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
47
hey-techcamp-2022
garebare
September 16, 2022
Tweet
Share
More Decks by garebare
See All by garebare
ペンギンをおすすめする
garebareda
0
15
Rustで作った自作コマンド群の話
garebareda
0
120
クリーンアーキテクチャ をGoでする場合に不要な Interfaceは消しやがれ
garebareda
0
90
自作Git作った話
garebareda
3
550
Rustで自作言語のインタプリタ作って Webで動くようにした話
garebareda
0
630
Vtuberをやりたくなりました
garebareda
1
60
Other Decks in Technology
See All in Technology
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
340
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.7k
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.2k
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
DMM.com アルファ室採用案内資料
hsugita
1
160
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
640
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
Featured
See All Featured
The Invisible Side of Design
smashingmag
294
49k
Fireside Chat
paigeccino
21
2.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Producing Creativity
orderedlist
PRO
337
39k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
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の機能しか使わないように気をつけた 簡素な実装により機能追加が簡単
デモ