Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
hey-techcamp-2022
Search
garebare
September 16, 2022
Technology
2
52
hey-techcamp-2022
garebare
September 16, 2022
Tweet
Share
More Decks by garebare
See All by garebare
ペンギンをおすすめする
garebareda
0
20
Rustで作った自作コマンド群の話
garebareda
0
130
クリーンアーキテクチャ をGoでする場合に不要な Interfaceは消しやがれ
garebareda
0
100
自作Git作った話
garebareda
3
590
Rustで自作言語のインタプリタ作って Webで動くようにした話
garebareda
0
680
Vtuberをやりたくなりました
garebareda
1
65
Other Decks in Technology
See All in Technology
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8.1k
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
770
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Featured
See All Featured
What the flash - Photography Introduction
edds
65
11k
Adopting Sorbet at Scale
ufuk
71
8.8k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Debugging Ruby Performance
tmm1
71
11k
It's Worth the Effort
3n
181
27k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Embracing the Ebb and Flow
colly
81
4.3k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Teambox: Starting and Learning
jrom
130
8.6k
How to name files
jennybc
67
96k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Transcript
hey-techcamp-2022 Team Coffee DaikiTanaka Jabelic
作ったもの
オンラインストア 本人現地引渡しシステム QRコード
オンラインショップ 管理アプリ
Who 誰に向けて作ったのか
コンサート運営会社 (物販) 大規模を想定
Why なぜ作ったか
問題 - 紙ベースの作業が煩雑 - Exelから印刷したチェックシートを使用 - 手作業で在庫を記録 - 受け取ったのに受け取ってないフリをする -
不正防止ができない - アイテム別の売上がオンライン上でわからない - 決済は別サービス - 面倒 etc…
問題 - 紙ベースの作業が煩雑 - Exelから印刷したチェックシートを使用 - 手作業で在庫を記録 - 受け取ったのに受け取ってないフリをする -
不正防止ができない - アイテム別の売上がオンライン上でわからない - 決済は別サービス - 面倒 etc…
現場がスピード重視だから
求める結果 - 事前決済分の受け取りは現地スタッフが操作、承認したい - 記録方法の簡素化、マニュアル化されてほしい - オンラインショップでアイテムごとの売上をみたい - 決済のミスをなくす etc…
解決すること • 在庫管理が手作業で煩雑 • 受け渡し時に本人確認できていない
解決すると... • 手作業が減る • 受け渡しのスピードが上がる • マニュアルが複雑にならない • 不正ができないようになる
現場の作業を減らしてスピードを上がる
収益面 - 現地販売とオンライン販売の割合は半々 - 現地受け取り - 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万円
What 何を作ったか
作ったもの • オンラインショップ • 在庫管理システム(オンライン ショップ用) • QRコード本人確認システム(オ ンラインショップ現地受取用)
オンラインショップ • ユーザーが購入 • 自動で購入数を管理 在庫情報を自動で管理して手作業を減らす
在庫管理システム • 在庫の登録 • 在庫数の管理 在庫をまとめて手作業を減らす
QRコード本人引き渡しシステム • QRコードで本人確認 • 受け取りの不正防止機能 • 自動で在庫を減らす スタッフの作業スピードがあがる
スタッフの利点 お手軽に本人確認 - カメラでQRコードを読み取るだけ - QRコード決済など、馴染みのある技術💪 紙ベースの作業廃止 - システムによって自動化 -
作業マニュアルの簡素化にもつながる
本来実装すべきだったこと
• メールで通知 ◦ QRコードが表示されるのみなので保管の問題が解決される • 決済システム ◦ オンラインショップに決済システムがないため直接やり取りをするしかない • ログイン機能
◦ ユーザーが注文履歴を閲覧できる ◦ 複数の注文をまとめて受け取ることができる • POSレジ機能 ◦ オフライン販売(現地販売)のシステム化ができる • キャンセル機能
使った技術 技術選定/ツール選定/理由など
ツール選定
共有Wiki Scrapbox コード管理 GitHub Organization プロジェクト管理 GitHub Project API定義 Swagger(OpenAPI
v3) ツール選定 - Team - 共同編集可能 - リンク型管理 - すぐにメモを取れる - カンバン形式 - アジャイルへの移行準備として。 - 個人リポジトリ運用は最初からしない - 段階なくチームメンバーを迎え入れる準備として。 - FrontEndとBackEndの認識擦り合わせ - 設計の一部としてチームで取り組む
FrontEnd
技術選定 - 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
BackEnd スピード重視
Go • SQLite3 • Gin(フレームワーク) • gorm SQLiteはgormにマイグレーション機能がついているのでMySQLにすぐ切り替えれる Ginの機能とgormの機能しか使わないように気をつけた 簡素な実装により機能追加が簡単
デモ