Building Cookpad Mart

【肉だ！】クックパッドマートの食材を楽しむエンジニア交流会 -mart meetup #1 で発表したCookpad Martの立ち上げ時における舞台裏の発表です。
https://connpass.com/event/94653/

Transcript

1. Building Cookpad Mart
   Ryo Katsuma
   【肉だ！】クックパッドマートの食材を楽しむエンジニア交流会 -Mart Meetup #1
   

   View Slide

2. 自己紹介
   •勝間 亮 (かつま りょう)
   •2009~ クックパッド
   ‣サービス開発エンジニア
   ‣検索, 投稿, 新規事業, 会員事業, … etc
   •2014~ レシピ領域マネージャー
   •2018~ 買物事業(新規事業)
   ‣エンジニア, テックリード, リベロ
   

   View Slide

3. 今日の話
   

   View Slide

4. 今日の話
   •社内テスト
   •現在の開発体制
   •これからの開発
   

   View Slide

5. 今日の話
   •どういう風な開発をしてきて
   •今どうやって開発すすめてて
   •これからどうしていくの
   

   View Slide

6. 社内テスト
   

   View Slide

7. View Slide

8. 社内テスト
   •一般ユーザーへのリリースに向けた課題抽出と改善
   ‣ 1回のテスト(発注〜買い出し〜仕分け〜受け取り)で
   5~10くらい課題 ☺
   ‣ スケールさせる形で改善方法を考える
   •1月から延々とテスト
   

   View Slide

9. 1~2月
   •スプレッドシートで発注シートを運用
   ‣ 商品マスターと発注書を作成
   •スポットで月に2度実施 x 2ヶ月
   •大局的な課題と方向性決め
   ‣ 1-1の買い出しではなく「ルート集荷/ルート配送」の採用
   ‣ 仕分けがかなり大変
   

   View Slide

10. View Slide

11. View Slide

12. 3月~
    •Webアプリのプロトタイプを実装
    ‣ 以降、毎週火曜と木曜に実施
    •単発テストではなく常に購入できる状態に
    ‣ 習慣化によるユーザーの行動観察
    ‣ 定常化のためのオペレーションテスト
    •方向性
    ‣ 仕分け、保冷、受け取りの大枠の方向性
    

    View Slide

13. View Slide

14. View Slide

15. 先週〜
    •アプリで運用開始
    •ユーザーリリースを意識したテスト
    ‣ 例）Slackに頼らずにPush通知でサポート
    •スタッフが介入しないオペレーションの磨き込み
    

    View Slide

16. View Slide

17. View Slide

18. 現在の開発体制
    

    View Slide

19. 開発メンバー
    サーバーサイドエンジニア
    サーバーサイドエンジニア兼デザイナ
    iOSアプリエンジニア
    アプリデザイナ
    

    View Slide

20. アプリ開発
    •Webアプリのプロトタイプをベース
    ‣ アプリ: 商品一覧、詳細、カート追加、決済、受取
    ‣ 管理画面: 商品登録、注文確認、買物リスト
    ‣ バッチ処置: Push通知, 販売スケジュールデータ作成
    

    View Slide

21. タスク管理
    

    View Slide

22. クライアントサイド
    •Swift 4.1
    •Xcode 9.4
    •RxSwift / RxCocoa
    

    View Slide

23. クライアントサイド
    •極力Storyboardで管理
    ‣ コード記述量を減らす
    •1画面 = 1Storyboard
    ‣ StoryboardReferenceで管理
    •レイアウト
    ‣ 大枠はStackView, 細かな作り込みにAutoLayout
    ‣ IBDesignableを利用してコード記述量を減らす
    

    View Slide

24. サーバーサイド
    •Rails 5.2.0
    •Ruby 2.5.1
    •MySQL 5.7
    

    View Slide

25. 3アプリの統合
    •Web / API / Admin を1アプリ
    ‣ Web: Pure Rails
    ‣ API: garage
    ‣ Admin: AdminLTE + Vue.js
    3BJMTBQQMJDBUJPOSPVUFTESBXEP
    DPOTUSBJOUTIPTUa"NBSUTFSWFSaDPNa;EP
    TDPQFNPEVMFNBSUEP
    SPPUUPBCPVUJOEFY
    FOE
    FOE
    DPOTUSBJOUTTVCEPNBJOa" NBSUTFSWFS
    BQJ TUBHJOH
    a;EP
    TDPQFNPEVMFBQJ BTBQJEP
    TDPQFWEP
    SFTPVSDFTQSPEVDUT POMZDSFBUF>
    FOE
    FOE
    FOE
    DPOTUSBJOUTTVCEPNBJOa"NBSUTFSWFSBENJO TUBHJOH
    a;EP
    TDPQFNPEVMFBENJO BTBENJOEP
    SFTPVSDFTQSPEVDUT
    FOE
    FOE
    FOE
    

    View Slide

26. DB
    •開発DB
    ‣ 共用のRDS
    •エンジニアは普段は共用DBを向いて開発
    ‣ localに開発DBは基本的に利用しない
    •開発に値するデータを自分で用意するのが大変
    ‣ 店舗、店舗食材、販売食材、配送スケジュール … etc
    

    View Slide

27. 本番DBを開発DBにレプリ
    •本番環境の管理画面でデータを用意
    ‣ 行レプリで開発DBに反映
    ‣ 入稿データはリアルタイムに開発環境に反映
    •開発DBのid offset値を6億
    ‣ レプリとデータ挿入のコンフリクトを防止
    ! techlife レプリ
    

    View Slide

28. 画像配信
    •Tofu
    ‣ Cookpad版 Imgixぽいもの (ImageMagick + S3 + CDN)
    •1リソース = 1画像
    ‣ Product.find_by(id: 1).resizable_image_url(“360x240”, format: “webp”)
    •フォールバック
    ‣ 開発環境で存在しない画像URLはproxyで本番環境画像を配信
    ‣ 入稿画像はリアルタイムに開発環境に反映
    ! cookpad tofu
    

    View Slide

29. CI + デプロイ
    •CI: Jenkins
    •Deploy: Rundeck
    ‣ PRマージ➜CI実行➜Dockerイメージ➜stagingデプロイ
    ‣ 動作確認後、Slackからデプロイ
    

    View Slide

30. その他のサービス
    •Firebase: Push通知基盤
    •Sentry: エラー通知
    •Stripe: 決済
    

    View Slide

31. アプリすり合わせ隊™
    •開発メンバー + サプライチェーンメンバー
    •今回のフェーズはどこまで進めるか、UIはどうするか
    ‣ 1ヶ月単位のスプリント計画的なもの
    ‣ それぞれの観点で実現すべきものをすり合わせ
    

    View Slide

32. View Slide

33. 心がけ
    •変化は受け入れる
    ‣ 新しくTryすべきものがあれば受け入れる
    • 例) 商品の受け取り番号の採番ロジックは週1~2回変更
    ‣ 柔軟な変更を受け入れられるように単純な実装を
    •ガチガチな計画は立てない (立てられない)
    ‣ ただし、ゴール目標は立てる
    ‣ 無茶はしないけど全力で！
    

    View Slide

34. 今後の開発
    

    View Slide

35. 注文アプリとバックエンド
    •受取り場所と時間の柔軟な変更
    ‣ ユーザー観点で「できてほしい」ができない
    • 例）受取り場所の変更、来週受取り分の注文などができない
    •柔軟な出品管理
    ‣ スーパーで実現できていることが全然できない
    • 例）月曜は野菜の日、火曜は肉の日、水曜は全品3% Off …
    •実現を見越したテーブルはあるが、コードはまだ全然書けていない
    

    View Slide

36. Androidアプリ
    •注文、決済、商品受取り
    ‣ APIは揃ってきてるが、、、
    ‣ iOSアプリベースのものだけ
    •1行も書いてないしレポジトリも無い
    

    View Slide

37. 店舗向けアプリ
    •注文調整 / 売上管理
    •API + iPadアプリ
    •1行も書いてないしレポジトリも無い
    

    View Slide

38. 受取り場所オーナー向けアプリ
    •場所の流通が増えればインセンティブが増える仕組み
    •Webアプリ
    •1行も書いてないしレポジトリも無い
    

    View Slide

39. やれていないことは
    かなり多い！！！！！１
    

    View Slide

40. まとめ
    

    View Slide

41. まとめ
    •社内テストを半年実施して形がまとまってきた
    •チームを横断して中長期的な視点を持って開発計画
    •実現できていることはまだまだ一部
    •今日はいろいろお話しましょう！
    

    View Slide