Next.jsで作るドライバー向けWebアプリ

2022.06.30 に開催された「Cookpad Tech Kitchen #27〜Rails/Next.js/IoTによる食品流通〜」での「Next.jsで作るドライバー向けWebアプリ」についてのスライドです。

Transcript

1. © 2021 Cookpad Inc.
   Next.jsで作るドライバー向けWebアプリ
   2022-06-30 Tech Kitchen #27
   Takuya Nakamura
   

   View Slide

2. 自己紹介
   ● 中村 拓哉 / chahan / cha-san
   ● 2021/02 入社
   ● サーバーサイドエンジニア
   ● クックパッドマート
   ○ 流通
   ■ ドライバー向けWebアプリ
   ■ 配送拠点
   ■ 他、流通に関わること諸々
   ● @peto_tn
   ● サンブレイク発売日ですね
   

   View Slide

3. ● ドライバー向けWebアプリとは
   ● 使用技術
   ○ GraphQL
   ○ 認証 / 認可
   ● リポジトリ管理
   ○ モノレポ
   ○ ディレクトリ構成
   ● 物理世界との連携
   話すこと
   

   View Slide

4. ドライバー向けWebアプリとは

   

   View Slide

5. ● 生鮮食品ECサービス
   ● 流通は自分達で作っている
   ● 実際にものを届けるのはドライバー
   クックパッドマート
   

   View Slide

6. ● ドライバーに向けて何をいつどこからどこに
   届けるか指示する
   ● 特性
   ○ SEOは不要
   ○ 実用性重視
   ○ 使用可能なユーザーを管理
   ○ スマホ向け
   ドライバー向けWebアプリ
   

   View Slide

7. ドライバー向けWebアプリ
   

   View Slide

8. ドライバー向けWebアプリ
   

   View Slide

9. ● 元々ネイティブアプリで提供している時代もあった
   ○ チームにモバイルエンジニアがいない
   ○ 開発が必要になるとチーム外のモバイルエンジニアに都度依頼
   ○ 流通の構造を変えたいということは度々あり、速度が出ないことが課題に
   ○ 常駐させておくほど常にタスクはない
   ○ Webに移行してチーム内で開発できるよう振り切った
   ○ ※チームの都合であってどちらが優れているということではない
   Native VS Web
   

   View Slide

10. ● 変化の早い流通に即応しやすい
    ○ 大きな変更から小さな改善まで入れやすい
    ■ 改善の頻度が上がった
    ● 管理ツールとしても活用
    ○ 社内や運送会社のマネージャーの管理画面としても活用
    Web移行の副次的効果
    

    View Slide

11. 使用技術

    

    View Slide

12. ● Language / Framework
    ○ Next.js
    ○ TypeScript
    ● API
    ○ GraphQL
    ○ Apollo Client
    ● UI
    ○ MUI
    技術構成
    ● Lint / Formatter
    ○ eslint
    ○ prettier
    ● Test
    ○ jest
    ○ react-testing-library
    ○ fishery
    

    View Slide

13. ● スキーマからコード生成できて便利
    ● シンプルにページ毎に必要な情報をガッと取得している
    ● クライアントから直接呼んでいる
    GraphQL
    

    View Slide

14. ● IDaaS: Azure AD
    ○ 社内標準。社内の人間はすでにアカウントがある
    ○ 各種ドライバーWebアプリの権限を一括管理
    ■ 複数のWebアプリがあるため、ドライバーに対して権限を一括で管理できるようにして
    いる
    ● Slack連携して、SlackIDに紐づいてない人は弾いたりしている
    ○ ドライバーにSlack通知をするため
    認証
    

    View Slide

15. ● contextに現在のユーザー情報を詰める
    ○ アプリケーション
    ○ 所属
    ○ 権限
    ● Query単位で認可している
    ○ Field単位だとパフォーマンスが非現実的
    認可
    

    View Slide

16. リポジトリ管理

    

    View Slide

17. ● 各種Webアプリはモノレポ構成
    ○ 見通しがいい
    ■ 流通チームとしてこのリポジトリを見てればOK
    ■ チームが別れるプロジェクトは素直にリポジトリを分けた方が無難
    ○ 共通化
    ■ 依存関係の共通化
    ■ モジュールの共通化
    ■ Issueの共通化
    ○ CIなど既存の仕組みに載せやすい
    モノレポ
    

    View Slide

18. ● src/
    ○ components/
    ■ _shared/
    ■ 各ページ/
    ○ hooks/
    ■ カスタムフックスを配置
    ○ lib/
    ■ viewを伴わない純粋なロジックを配置
    ○ graphql/
    ■ GraphQLのクエリ定義を配置
    ○ gen/
    ■ GraphQLやprotocol buffersからの自動生成されたコードを配置
    ● tests/
    ディレクトリ構成
    

    View Slide

19. ● Atomic Design やってみた
    ○ プロジェクトにあってなかったのでやめた
    ■ MUIを使い倒してるとatomが生まれない
    ■ デザインシステムを作りたいわけではない
    ● リッチなデザインよりも実用性重視
    ■ 新規メンバーの学習コストが高い
    ディレクトリ構成
    

    View Slide

20. 物理世界との連携

    

    View Slide

21. ● 配送拠点でドライバーが印刷する
    ● 印刷ジョブをキューイングして処理する
    ○ 一定のタイムラインで運行しているため同じタイミングで印刷されやすい
    ラベル印刷
    

    View Slide

22. ● 納品時に冷蔵庫を開ける必要がある
    ● 解錠用のQRコードを発行して表示する
    ○ ドライバーが冷蔵庫にかざして解錠
    ○ ユーザーが商品を受け取る際と同じ原理
    QRコード解錠
    

    View Slide

23. ● 用途
    ○ 納品時のコンテナと商品の検品
    ○ 出荷時のコンテナチェック
    ○ 温度計の紐付け
    ● ドライバーがカメラの権限を承認
    ○ カメラが起動しない
    ■ ほぼ権限問題
    ○ 動作確認ページを用意
    QRコードリーダー
    

    View Slide

24. View Slide