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
2. 自己紹介 • 中村 拓哉 / chahan / cha-san • 2021/02 入社 • サーバーサイドエンジニア • クックパッドマート ◦ 流通 ▪ ドライバー向けWebアプリ ▪ 配送拠点 ▪ 他、流通に関わること諸々 • @peto_tn • サンブレイク発売日ですね
3. • ドライバー向けWebアプリとは • 使用技術 ◦ GraphQL ◦ 認証 / 認可 • リポジトリ管理 ◦ モノレポ ◦ ディレクトリ構成 • 物理世界との連携 話すこと
4. ドライバー向けWebアプリとは

5. • 生鮮食品ECサービス • 流通は自分達で作っている • 実際にものを届けるのはドライバー クックパッドマート
6. • ドライバーに向けて何をいつどこからどこに 届けるか指示する • 特性 ◦ SEOは不要 ◦ 実用性重視 ◦ 使用可能なユーザーを管理 ◦ スマホ向け ドライバー向けWebアプリ
7. ドライバー向けWebアプリ
8. ドライバー向けWebアプリ
9. • 元々ネイティブアプリで提供している時代もあった ◦ チームにモバイルエンジニアがいない ◦ 開発が必要になるとチーム外のモバイルエンジニアに都度依頼 ◦ 流通の構造を変えたいということは度々あり、速度が出ないことが課題に ◦ 常駐させておくほど常にタスクはない ◦ Webに移行してチーム内で開発できるよう振り切った ◦ ※チームの都合であってどちらが優れているということではない Native VS Web
10. • 変化の早い流通に即応しやすい ◦ 大きな変更から小さな改善まで入れやすい ▪ 改善の頻度が上がった • 管理ツールとしても活用 ◦ 社内や運送会社のマネージャーの管理画面としても活用 Web移行の副次的効果
11. 使用技術

12. • Language / Framework ◦ Next.js ◦ TypeScript • API ◦ GraphQL ◦ Apollo Client • UI ◦ MUI 技術構成 • Lint / Formatter ◦ eslint ◦ prettier • Test ◦ jest ◦ react-testing-library ◦ fishery
13. • スキーマからコード生成できて便利 • シンプルにページ毎に必要な情報をガッと取得している • クライアントから直接呼んでいる GraphQL
14. • IDaaS: Azure AD ◦ 社内標準。社内の人間はすでにアカウントがある ◦ 各種ドライバーWebアプリの権限を一括管理 ▪ 複数のWebアプリがあるため、ドライバーに対して権限を一括で管理できるようにして いる • Slack連携して、SlackIDに紐づいてない人は弾いたりしている ◦ ドライバーにSlack通知をするため 認証
15. • contextに現在のユーザー情報を詰める ◦ アプリケーション ◦ 所属 ◦ 権限 • Query単位で認可している ◦ Field単位だとパフォーマンスが非現実的 認可
16. リポジトリ管理

17. • 各種Webアプリはモノレポ構成 ◦ 見通しがいい ▪ 流通チームとしてこのリポジトリを見てればOK ▪ チームが別れるプロジェクトは素直にリポジトリを分けた方が無難 ◦ 共通化 ▪ 依存関係の共通化 ▪ モジュールの共通化 ▪ Issueの共通化 ◦ CIなど既存の仕組みに載せやすい モノレポ
18. • src/ ◦ components/ ▪ _shared/ ▪ 各ページ/ ◦ hooks/ ▪ カスタムフックスを配置 ◦ lib/ ▪ viewを伴わない純粋なロジックを配置 ◦ graphql/ ▪ GraphQLのクエリ定義を配置 ◦ gen/ ▪ GraphQLやprotocol buffersからの自動生成されたコードを配置 • tests/ ディレクトリ構成
19. • Atomic Design やってみた ◦ プロジェクトにあってなかったのでやめた ▪ MUIを使い倒してるとatomが生まれない ▪ デザインシステムを作りたいわけではない • リッチなデザインよりも実用性重視 ▪ 新規メンバーの学習コストが高い ディレクトリ構成
20. 物理世界との連携

21. • 配送拠点でドライバーが印刷する • 印刷ジョブをキューイングして処理する ◦ 一定のタイムラインで運行しているため同じタイミングで印刷されやすい ラベル印刷
22. • 納品時に冷蔵庫を開ける必要がある • 解錠用のQRコードを発行して表示する ◦ ドライバーが冷蔵庫にかざして解錠 ◦ ユーザーが商品を受け取る際と同じ原理 QRコード解錠
23. • 用途 ◦ 納品時のコンテナと商品の検品 ◦ 出荷時のコンテナチェック ◦ 温度計の紐付け • ドライバーがカメラの権限を承認 ◦ カメラが起動しない ▪ ほぼ権限問題 ◦ 動作確認ページを用意 QRコードリーダー