2022.06.30 に開催された「Cookpad Tech Kitchen #27〜Rails/Next.js/IoTによる食品流通〜」での「Next.jsで作るドライバー向けWebアプリ」についてのスライドです。
© 2021 Cookpad Inc.Next.jsで作るドライバー向けWebアプリ2022-06-30 Tech Kitchen #27Takuya Nakamura
View Slide
自己紹介● 中村 拓哉 / chahan / cha-san● 2021/02 入社● サーバーサイドエンジニア● クックパッドマート○ 流通■ ドライバー向けWebアプリ■ 配送拠点■ 他、流通に関わること諸々● @peto_tn● サンブレイク発売日ですね
● ドライバー向けWebアプリとは● 使用技術○ GraphQL○ 認証 / 認可● リポジトリ管理○ モノレポ○ ディレクトリ構成● 物理世界との連携話すこと
ドライバー向けWebアプリとは
● 生鮮食品ECサービス● 流通は自分達で作っている● 実際にものを届けるのはドライバークックパッドマート
● ドライバーに向けて何をいつどこからどこに届けるか指示する● 特性○ SEOは不要○ 実用性重視○ 使用可能なユーザーを管理○ スマホ向けドライバー向けWebアプリ
ドライバー向けWebアプリ
● 元々ネイティブアプリで提供している時代もあった○ チームにモバイルエンジニアがいない○ 開発が必要になるとチーム外のモバイルエンジニアに都度依頼○ 流通の構造を変えたいということは度々あり、速度が出ないことが課題に○ 常駐させておくほど常にタスクはない○ Webに移行してチーム内で開発できるよう振り切った○ ※チームの都合であってどちらが優れているということではないNative VS Web
● 変化の早い流通に即応しやすい○ 大きな変更から小さな改善まで入れやすい■ 改善の頻度が上がった● 管理ツールとしても活用○ 社内や運送会社のマネージャーの管理画面としても活用Web移行の副次的効果
使用技術
● Language / Framework○ Next.js○ TypeScript● API○ GraphQL○ Apollo Client● UI○ MUI技術構成● Lint / Formatter○ eslint○ prettier● Test○ jest○ react-testing-library○ fishery
● スキーマからコード生成できて便利● シンプルにページ毎に必要な情報をガッと取得している● クライアントから直接呼んでいるGraphQL
● IDaaS: Azure AD○ 社内標準。社内の人間はすでにアカウントがある○ 各種ドライバーWebアプリの権限を一括管理■ 複数のWebアプリがあるため、ドライバーに対して権限を一括で管理できるようにしている● Slack連携して、SlackIDに紐づいてない人は弾いたりしている○ ドライバーにSlack通知をするため認証
● contextに現在のユーザー情報を詰める○ アプリケーション○ 所属○ 権限● Query単位で認可している○ Field単位だとパフォーマンスが非現実的認可
リポジトリ管理
● 各種Webアプリはモノレポ構成○ 見通しがいい■ 流通チームとしてこのリポジトリを見てればOK■ チームが別れるプロジェクトは素直にリポジトリを分けた方が無難○ 共通化■ 依存関係の共通化■ モジュールの共通化■ Issueの共通化○ CIなど既存の仕組みに載せやすいモノレポ
● src/○ components/■ _shared/■ 各ページ/○ hooks/■ カスタムフックスを配置○ lib/■ viewを伴わない純粋なロジックを配置○ graphql/■ GraphQLのクエリ定義を配置○ gen/■ GraphQLやprotocol buffersからの自動生成されたコードを配置● tests/ディレクトリ構成
● Atomic Design やってみた○ プロジェクトにあってなかったのでやめた■ MUIを使い倒してるとatomが生まれない■ デザインシステムを作りたいわけではない● リッチなデザインよりも実用性重視■ 新規メンバーの学習コストが高いディレクトリ構成
物理世界との連携
● 配送拠点でドライバーが印刷する● 印刷ジョブをキューイングして処理する○ 一定のタイムラインで運行しているため同じタイミングで印刷されやすいラベル印刷
● 納品時に冷蔵庫を開ける必要がある● 解錠用のQRコードを発行して表示する○ ドライバーが冷蔵庫にかざして解錠○ ユーザーが商品を受け取る際と同じ原理QRコード解錠
● 用途○ 納品時のコンテナと商品の検品○ 出荷時のコンテナチェック○ 温度計の紐付け● ドライバーがカメラの権限を承認○ カメラが起動しない■ ほぼ権限問題○ 動作確認ページを用意QRコードリーダー