Tweet
Tweet

Slide 1

Slide 1 text

hey-techcamp-2022 Team Coffee DaikiTanaka Jabelic

Slide 2

Slide 2 text

作ったもの

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Who 誰に向けて作ったのか

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Why なぜ作ったか

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

収益面 - 現地販売とオンライン販売の割合は半々 - 現地受け取り - 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万円

Slide 16

Slide 16 text

What 何を作ったか

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ツール選定

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

FrontEnd

Slide 28

Slide 28 text

技術選定 - 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

Slide 29

Slide 29 text

BackEnd スピード重視

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

デモ