hey-techcamp-2022

1. hey-techcamp-2022 Team Coffee DaikiTanaka Jabelic
2. 作ったもの
3. オンラインストア 本人現地引渡しシステム QRコード
4. オンラインショップ 管理アプリ
5. Who 誰に向けて作ったのか
6. コンサート運営会社 (物販) 大規模を想定
7. Why なぜ作ったか
8. 問題 - 紙ベースの作業が煩雑 - Exelから印刷したチェックシートを使用 - 手作業で在庫を記録 - 受け取ったのに受け取ってないフリをする - 不正防止ができない - アイテム別の売上がオンライン上でわからない - 決済は別サービス - 面倒 etc…
9. 問題 - 紙ベースの作業が煩雑 - Exelから印刷したチェックシートを使用 - 手作業で在庫を記録 - 受け取ったのに受け取ってないフリをする - 不正防止ができない - アイテム別の売上がオンライン上でわからない - 決済は別サービス - 面倒 etc…
10. 現場がスピード重視だから
11. 求める結果 - 事前決済分の受け取りは現地スタッフが操作、承認したい - 記録方法の簡素化、マニュアル化されてほしい - オンラインショップでアイテムごとの売上をみたい - 決済のミスをなくす etc…
12. 解決すること • 在庫管理が手作業で煩雑 • 受け渡し時に本人確認できていない
13. 解決すると... • 手作業が減る • 受け渡しのスピードが上がる • マニュアルが複雑にならない • 不正ができないようになる
14. 現場の作業を減らしてスピードを上がる
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万円
16. What 何を作ったか
17. 作ったもの • オンラインショップ • 在庫管理システム(オンライン ショップ用) • QRコード本人確認システム(オ ンラインショップ現地受取用)
18. オンラインショップ • ユーザーが購入 • 自動で購入数を管理 在庫情報を自動で管理して手作業を減らす
19. 在庫管理システム • 在庫の登録 • 在庫数の管理 在庫をまとめて手作業を減らす
20. QRコード本人引き渡しシステム • QRコードで本人確認 • 受け取りの不正防止機能 • 自動で在庫を減らす スタッフの作業スピードがあがる
21. スタッフの利点 お手軽に本人確認 - カメラでQRコードを読み取るだけ - QRコード決済など、馴染みのある技術💪 紙ベースの作業廃止 - システムによって自動化 - 作業マニュアルの簡素化にもつながる
22. 本来実装すべきだったこと
23. • メールで通知 ◦ QRコードが表示されるのみなので保管の問題が解決される • 決済システム ◦ オンラインショップに決済システムがないため直接やり取りをするしかない • ログイン機能 ◦ ユーザーが注文履歴を閲覧できる ◦ 複数の注文をまとめて受け取ることができる • POSレジ機能 ◦ オフライン販売(現地販売)のシステム化ができる • キャンセル機能
24. 使った技術 技術選定/ツール選定/理由など
25. ツール選定
26. 共有Wiki Scrapbox コード管理 GitHub Organization プロジェクト管理 GitHub Project API定義 Swagger(OpenAPI v3) ツール選定 - Team - 共同編集可能 - リンク型管理 - すぐにメモを取れる - カンバン形式 - アジャイルへの移行準備として。 - 個人リポジトリ運用は最初からしない - 段階なくチームメンバーを迎え入れる準備として。 - FrontEndとBackEndの認識擦り合わせ - 設計の一部としてチームで取り組む
27. FrontEnd
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
29. BackEnd スピード重視
30. Go • SQLite3 • Gin(フレームワーク) • gorm SQLiteはgormにマイグレーション機能がついているのでMySQLにすぐ切り替えれる Ginの機能とgormの機能しか使わないように気をつけた 簡素な実装により機能追加が簡単
31. デモ