hey-techcamp-2022

Transcript

1. hey-techcamp-2022
   Team Coffee
   DaikiTanaka
   Jabelic
   

   View Slide

2. 作ったもの
   

   View Slide

3. オンラインストア
   本人現地引渡しシステム
   QRコード
   

   View Slide

4. オンラインショップ 管理アプリ
   

   View Slide

5. Who
   誰に向けて作ったのか
   

   View Slide

6. コンサート運営会社
   (物販)
   大規模を想定
   

   View Slide

7. Why
   なぜ作ったか
   

   View Slide

8. 問題
   - 紙ベースの作業が煩雑
   - Exelから印刷したチェックシートを使用
   - 手作業で在庫を記録
   - 受け取ったのに受け取ってないフリをする
   - 不正防止ができない
   - アイテム別の売上がオンライン上でわからない
   - 決済は別サービス
   - 面倒
   etc…
   

   View Slide

9. 問題
   - 紙ベースの作業が煩雑
   - Exelから印刷したチェックシートを使用
   - 手作業で在庫を記録
   - 受け取ったのに受け取ってないフリをする
   - 不正防止ができない
   - アイテム別の売上がオンライン上でわからない
   - 決済は別サービス
   - 面倒
   etc…
   

   View Slide

10. 現場がスピード重視だから
    

    View Slide

11. 求める結果
    - 事前決済分の受け取りは現地スタッフが操作、承認したい
    - 記録方法の簡素化、マニュアル化されてほしい
    - オンラインショップでアイテムごとの売上をみたい
    - 決済のミスをなくす
    etc…
    

    View Slide

12. 解決すること
    ● 在庫管理が手作業で煩雑
    ● 受け渡し時に本人確認できていない
    

    View Slide

13. 解決すると...
    ● 手作業が減る
    ● 受け渡しのスピードが上がる
    ● マニュアルが複雑にならない
    ● 不正ができないようになる
    

    View Slide

14. 現場の作業を減らしてスピードを上がる
    

    View Slide

15. 収益面
    - 現地販売とオンライン販売の割合は半々
    - 現地受け取り
    - 1人10000円, オンライン販売の半分
    - と仮定します
    2500 人 x 10000円 x 3.6%
    = 2億5000万円 x 3.6%
    = 900万円
    例外
    - サマーソニック：1日12万人 x 2日間
    60000万人 x 10000円 x 3.6 = 2160万円
    

    View Slide

16. What
    何を作ったか
    

    View Slide

17. 作ったもの
    ● オンラインショップ
    ● 在庫管理システム(オンライン
    ショップ用)
    ● QRコード本人確認システム(オ
    ンラインショップ現地受取用)
    

    View Slide

18. オンラインショップ
    ● ユーザーが購入
    ● 自動で購入数を管理
    在庫情報を自動で管理して手作業を減らす
    

    View Slide

19. 在庫管理システム
    ● 在庫の登録
    ● 在庫数の管理
    在庫をまとめて手作業を減らす
    

    View Slide

20. QRコード本人引き渡しシステム
    ● QRコードで本人確認
    ● 受け取りの不正防止機能
    ● 自動で在庫を減らす
    スタッフの作業スピードがあがる
    

    View Slide

21. スタッフの利点
    お手軽に本人確認
    - カメラでQRコードを読み取るだけ
    - QRコード決済など、馴染みのある技術💪
    紙ベースの作業廃止
    - システムによって自動化
    - 作業マニュアルの簡素化にもつながる
    

    View Slide

22. 本来実装すべきだったこと
    

    View Slide

23. ● メールで通知
    ○ QRコードが表示されるのみなので保管の問題が解決される
    ● 決済システム
    ○ オンラインショップに決済システムがないため直接やり取りをするしかない
    ● ログイン機能
    ○ ユーザーが注文履歴を閲覧できる
    ○ 複数の注文をまとめて受け取ることができる
    ● POSレジ機能
    ○ オフライン販売(現地販売)のシステム化ができる
    ● キャンセル機能
    

    View Slide

24. 使った技術
    技術選定/ツール選定/理由など
    

    View Slide

25. ツール選定
    

    View Slide

26. 共有Wiki Scrapbox
    コード管理 GitHub Organization
    プロジェクト管理 GitHub Project
    API定義 Swagger(OpenAPI v3)
    ツール選定 - Team
    - 共同編集可能
    - リンク型管理
    - すぐにメモを取れる
    - カンバン形式
    - アジャイルへの移行準備として。
    - 個人リポジトリ運用は最初からしない
    - 段階なくチームメンバーを迎え入れる準備として。
    - FrontEndとBackEndの認識擦り合わせ
    - 設計の一部としてチームで取り組む
    

    View Slide

27. FrontEnd
    

    View Slide

28. 技術選定 - FrontEnd
    FraweWork/Bundler Vue.js/Vite
    APIClient Aspida(openapi2Aspida)
    Store Pinia
    Formatter/Linter Prettier/ESLint
    UIComponent Element Plus
    Git hooks husky
    Test Vitest
    その他
    ○ QRコード生成：qrcode
    ○ QRコード読取：jsqr
    ○ QRコード保存：html2canvas
    ○ API定義: OpenAPI(Swagger)
    将来を見据えた技術選定
    ・デフォでTypeScript
    ・比較的新しめな技術
    ・組織の変化に対応
    UI設計 Figma
    

    View Slide

29. BackEnd
    スピード重視
    

    View Slide

30. Go
    ● SQLite3
    ● Gin(フレームワーク)
    ● gorm
    SQLiteはgormにマイグレーション機能がついているのでMySQLにすぐ切り替えれる
    Ginの機能とgormの機能しか使わないように気をつけた
    簡素な実装により機能追加が簡単
    

    View Slide

31. デモ
    

    View Slide