九大祭向け会計システムq-posの開発

この資料は，2024年7月22日に開催された，九州大学プログラミングサークル「GLEAP」による2024年度夏季ハッカソン発表会にて，メンターチームの開発した「九大祭向け会計システムq-pos」に利用したものです．

---

This document was used for “q-pos, an accounting system for the Kyushu University Festival” developed by the Mentor Team at the Kyushu University Programming Circle “GLEAP”'s 2024 Summer Hackathon Presentation held on July 22, 2024.

Transcript

1. q-pos 九大の覇権を握る会計システム 2024-07-22 GLEAP ハッカソン発表会 メンターチーム 宮田 優作，武石 航汰，島村 友大，石丸 大晟，秋庭 孔樹，杉本 悠
2. 1 アジェンダ メンバー 背景 アプリの概要 アプリの使い方 技術スタック 役割分担 工夫した点 データベース設計 ソースコード 個人の感想 今後の展望 2
3. メンバー（Backend） 秋庭 孔樹 ケンチキシフトマネージャー 石丸 大晟 彼女に1500万円貢ぐ男 杉本 悠 競馬回収率57% 高専から裏口入学してきました 筋トレが好きです． 昨日競馬見に行きたかった
4. メンバー（Frontend） 武石 航汰 コンテナ16個テクニシャン 宮田 優作 ドミ1の支配者 島村 友大 英検準1級・TOEIC840点 コンテナ16個をあやつる男． 最近プログラミングを始めた新 入生です。PMやってみました。 Saucy dogを聴きましょう。 このスライドはCanva製ですが 私はPowerPoint派です。 The two people to my left are amazing, so let's rely on them. Their technical skills are so great that it's strengthening my desire to pursue my career of consultant. まぢむり I'd like to be only a friendly conversation partner.
5. 学園祭で使える会計システムが欲しいなぁ... 背景 GLEAPの名を広め，九大の覇権を握る 九大祭 🥳に特化した会計システムの開発 プログラミングサークルの技術力を轟かせる 高校生たちにプログラミングに興味を持ってもらう 本ハッカソンのターゲット
6. アプリの概要（1/2） 会計・売上をまとめて管理するPOSレジを開発 1. 会計機能 ・過去の注文、売上金額、 　支払い情報を管理 2. 売上管理 ・注文メニューの選択 ・支払い金額の入力 ・お釣りの計算 サイドバーに 記載している機能
7. アプリの概要（2/2） 3. ダッシュボード 4. 割引管理 ・注文メニューの選択 ・支払い金額の入力 ・お釣りの計算 売上やシフト ひと目で確認 5. メニュー管理 ・登録、削除、更新 会計・売上をまとめて管理するPOSレジを開発
8. アプリの使い方（1/3） 売上登録の流れ 注文内容を入力 1. 2. 支払い金額を入力 3. お釣りの計算
9. アプリの使い方（2/3） 売上登録の流れ（デモ） 注文内容を入力 1. 支払い金額の入力 2. お釣りの計算・会計完了 3.
10. アプリの使い方（3/3） ダッシュボード メニュー一覧画面
11. 開発の流れ（メニュー一覧画面） before after ホワイトボードでモック作成
12. 技術スタック フロントエンド バックエンド その他 Kawaii logs by @sawaratsuki1004
13. 1 アジェンダ メンバー 背景 アプリの概要 アプリの使い方 技術スタック 役割分担 工夫した点 データベース設計 ソースコード 個人の感想 今後の展望 2
14. 役割分担 フロントエンド バックエンド 資料作成 環境構築 要件定義 レビュー DB設計 API実装 UI実装
15. プロダクト SPAとPWAによる，限りなくネイティブアプリに近い使い心地（Front） Gin, Gormフレームワークによるシンプルで拡張性の高い設計（Back） チーム Notionやデータベースでのタスク管理による，情報透明性と作業効率の向上 LintやBotを含めたCI-CDの導入による，開発の効率と経験の向上 工夫した点 そしてなによりは， 業務アプリ並みの品質
16. データベース設計（ER図） 利用ツール
17. ソースコード (Frontend)（1/3） 宮田：はじめての経験 Context APIと状態管理ライブラリjotaiによるプロバイダ実装 pathpidaによる安全なルーティング LGTM botによるPR Discussionの盛り上げ 静的型付け言語Typescriptしか勝たん Webアプリの構造 pathpidaしか勝たん
18. ソースコード (Frontend)（2/3） 武石：開発環境担当大臣／yaml職人 PWAによるアプリの最高な使い心地 CI-CDの導入による開発効率の圧倒的向上 CIのなかみ Pull request作成時に自動で PretiterやES LInstを実行 みんな大好きシュークリーム
19. ソースコード (Frontend)（3/3） プロバイダを定義して コンポーネントで呼び出す
20. ソースコード (Backend) 秋庭：はじめてのAPI Gin, Gormフレームワークによる シンプルで拡張性の高い設計 INSERTを使ったデータの一括保存で 　　　通信量削減 石丸：はじめてのGo 処理ごとにディレクトリを分けコードを整理 airを利用したホットリロード開発 docker-composeでの環境統一 REST APIによる一貫性のあるシンプルで　 効率的な開発 杉本：はじめてのmigrate golang-migrateでのデータベース作成 テーブルの変更容易を高める環境構築
21. 個人の感想（1/2） 宮田 初の本格的なチーム開発．各メンバーと積極的にコミュニケーションをとり，　 効率よくリソースを利用することを意識した DDDとして，UIやDBの設計ではユーザにとっての使い心地を意識した タスク管理を，NotionとGitHub Issueのどちらを使うかで迷った 武石 みんな忙しくて時間がないなりにうまく分担して開発できた メンバーのレベルが高かったのでスムーズに開発が進められた 島村 上二人すごすぎた chakraUI使いやすかった Issuesの使い方少しわかった
22. 個人の感想（2/2） 秋庭 はじめての開発．開発ツールを使いこなすのが大変だったが，　 積極的にコミュニケーションを取って，なんとか成し遂げた API開発楽しかった... 石丸 初めてのGo開発で慣れない部分もあったがなんとか成し遂げた 開発環境を整えることで開発に集中することができた DB設計などユースケースから考えて実装できた 杉本 初めて使うツールも多く難しかったがなんとか成し遂げた 他のメンバーから様々なことを学べてとてもいい経験になった
23. 今後の展望 改善したい点 拡張性に配慮したアプリケーション設計．割引や商品カテゴリなど メンターチームとして，もっと品質の高いプロダクトを見せたかった キャッシュレス決済を導入したかった（法務に勝てず） 開発方針 要件達成に必要な機能の開発：ログイン，シフト管理 ユーザクライアントの開発．お客様のスマホからの注文，店員側からの注文内容 確認や完成通知の送信 九大祭向け会計システム q-pos 九大祭に向けデプロイ予定！！乞うご期待
24. みなさんのお手元でも 九大祭向け会計システム q-pos いったんngrokで妥協しました 強者はURLを手打ちしてください https://6ff3-133-5-11-12.ngrok-free.app/