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

by chahan

Embed

Start on current slide

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ドライバー向けWebアプリ

Slide 8

Slide 8 text

ドライバー向けWebアプリ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

使用技術 

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

リポジトリ管理 

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

物理世界との連携 

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content