推しアイデア
「そうしょく」→「装飾」でデザインにこだわりました！ ・CSSフレームワークを今回初めてBulmaを使用してフロントエンドのデザインを作成しました ・PC/スマホ対応のレスポンシブデザインにしています ・某キャラクターを意識したデザインで「ちいみせ」感を出しています
ブラキオカップ
ちいみせ
研究室や学生団体内の購買システム（なんか小さくてかわいいおみせ）
作った背景
研究室などでまとめ買いして商品を管理したりお金を受け渡ししたりするのメンドクサイ！
推し技術
FastAPI最高！ バーコードリーダーの機能で読み取り用の有名なライブラリQuaggaJSを利用としたらTypeScriptに対応していなかったため、日本語情報も少ないzxingを利用しています。
プロジェクト詳細
アプリの説明
研究室4年生のI君は、先生や研究室仲間たちが利用するためのお菓子やカップ麺の購買係を任されています。 販売時では、原価から利益を足したものを売価としています。
Ｉ君は販売価格や販売取引を全てスプレッドシートで手動で管理していました。
Ｉ君は卒研が大変で販売管理に時間が掛けられない中、もっと効率的に楽に販売管理ができないかを考えました。
このような背景から、今回作ったアプリ「ちいみせ」が生まれました。
ちいみせでは……
- 研究室やサークルなどの小規模なコミュニティで買い出しした商品の管理 (購入処理など) を、ウェブアプリ上で行うことができます（残高管理も）
- 商品の売価の設定や在庫管理, 新規商品の登録もできます
これでＩ君はわざわざ手動で管理する必要がなくなりました！
サービスの簡単な紹介
- 商品のバーコードをスキャンすると……
- その商品の購入ページへ！
- 研究室などは資金も潤沢でない場合が多い．商品リストからは消費期限順にソートすることもできる．なるべく廃棄を出さない取り組み．
応用が利きそうな使い方
体育祭のTシャツを作った時に、従来は対面でお金やTシャツを受け渡していたが、ちいみせを使うことで、対面で受け渡しする必要がなくなり、受け取ったかどうかはアプリ上で管理できる。
技術構成
フロントエンド
- React（TypeScript）
- Bulma（CSSフレームワーク）
- zxing（バーコードスキャンライブラリ）: https://github.com/zxing/zxing
- Azure Static Web Apps（デプロイ先）
- 本番環境: https://gray-cliff-02c3bc600.5.azurestaticapps.net/
- Figma（デザインツール）https://www.figma.com/file/0u4HzDeGXsoYcZBKFbTzeO/%E3%83%96%E3%83%A9%E3%82%AD%E3%82%AA%E3%82%AB%E3%83%83%E3%83%97?type=design&node-id=0-1&mode=design&t=7ULU0HNX0Njvl8R7-0
- フロントリポジトリhttps://github.com/naka520/honnaka_burakio_front
バックエンド
・FastAPI（Python） ・Azure SQL データベース（データベース） ・Azure Functions（デプロイ環境） 本番環境：https://brachiocup-honnaka-backend.azurewebsites.net/ （/docsでスワッガの確認ができます）
バーコードの読み取りロジック
購入でスキャンするとき
商品を編集して追加するとき
