はじめに
こんにちは
茨城高専アドベントカレンダー3日目です
初qiitaなので拙い文章だと思います。なので寛大な心のご用意をお願いします。
文化祭の注文管理どうやっているイメージですか？
チケット作ったり？紙に集計したり？なんもなかったり！？？
そんなアナログな方法では高専として恥ずかしい気がしたので作ることにしました！
あとリアルタイムで売り上げも見たいよね
一週間前くらいから作り始めて本番までになんとか動くところまではもっていくことができました。
実際に使ってくれた2-1の人たちに感謝！
どんなレジ？
レジ
メインのレジ画面です。
後述するメニューの編集画面で設定したメニューが表示されます
選択するとこのような画面になります。
ここからトッピングを選択してカートに入れます。
オーダー確認画面です。
カートにれた商品が一覧で表示されます。
商品の右にある金額にトッピング分が含まれていませんね。仕様バグです。
売り上げ・ダッシュボード
オーダーの統計が見れます。
オーダー全てを取得してデバイス側で集計作業する力技で実装してます。
メニュー編集
オーダーとトッピングの追加編集削除ができます。
トッピングを先に用意しておいてメニューどのトッピングを付けられるようにするかで管理しています。
編集したら全て再読み込みが入ります。
オーダー確認
オーダーを見たり編集したり追加したりできます。
厨房の画面が間に合わなかった代わりに本番中に追加したチェックボックスによる簡易的な管理機能がついちゃってます。
30秒ごとにAPIを叩くようになっています。もちろんチェックボックスの状態は保持されます。
技術面
使用した技術
フロント
- Next.js
- TailwindCSS
バック
- Next.js
- NotionAPI
インフラ
- proxmox
- tailscale
- playit(外部公開用)
API周り
全部notionAPI叩くだけのAPIです。
サークルIDの受け渡し方を途中で変えたので設計ボロッボロ
テストコードを書こう(n敗)
フロント周り
AIに全部任せました。
スクリーンショットはiPadサイズですがスマホの大きさにも対応してます。
v0結構いい感じのやつ出してくれて助かる
反省
ガバガバセキュリティー
ログインとかそんなもんはありません。cookie手入力。
自分がいない間レジ、厨房担当のスマホにcookie入れてくれたジョンありがとう
最悪オレオレ証明書でもいいからhttps対応したかった
厨房の画面が完成しなかった
ダッシュボードのオーダー画面を作っちゃって代用できることに気づいた
本番中オーダー画面にチェックボックスを追加してどこまで作ったか管理できるようにした。
チェックボックス小さくてごめん
開発用サーバーで本番運用
完成を急いだばかりにtypescriptの型エラーを解消する気力がなく、開発用サーバーで茨香祭中は動かしていたのでクライアントサイドもサーバーサイドもパフォーマンスが出しきれてなかった。
茨香祭後にビルド通して使ってみたらめっちゃ快適に動いちゃったのでanyでもいいから強引にビルド通すべきだったと後悔
本番中にコード書き換えてごめん
改善とかバグ修正とか簡単にできるから開発用サーバーで動かしていてよかったかも？？？
そんなことないね
APIのテスト書け
メニューの情報を更新するAPIにミスがあり、更新できていなかった。
エラー吐いてもそれをクライアントに知らせる部分はなく、画面遷移が発生しないだけ
エラー画面を出せばよかったのかも
余計な機能
お釣りの計算機能要らなかった…？
売り上げのダッシュボード凝ったけどそんなみてる人いなさそう
react使ってる意味
もっとコンポーネントを使えばよかった
ほとんどコンポーネントは使用せずに全部書いて作ってます。
AIに投げる都合でファイル１つにまとまってた方がいいんですよね…
reactの良さを潰してないかこれ
途中で商品の金額変える概念あったねええぇぇ忘れてた
オーダーのDBにその時の金額を入れておけばよかったものを端折ったため、商品ごとの売り上げが追えなくなりました。
それぞれの個数は出るから許して欲しい
AI最高！！！！
GitHub Copilot最高
最後に
全部作り直したい！！
自分の中でAIの立ち位置が定まってきたので適度に手を入れながら作りたいですね
もしこれに興味持ってくれたらMDLに入って一緒に開発していきましょう！待ってます
次のSWHT実験ではTypst使ってみようかな…
明日は@ReoHakase さんのStarshipでシェルを綺麗に使いやすくしよう for zsh, Powershell, etc.です
宣伝
MDLについて
学生の主体的な活動を支援する学生団体です。
毎週木曜に10号館3階に集まってます。
最近できたばっかりでまだまだ人が少ないのでぜひ見学だけでもきてください！