デブねこ管理委員会発表資料

Transcript

1. デブねこ管理委員会 猫と一緒に家計簿を管理するアプリ dev_neko
2. レシートを読み取って 家計簿を管理 目標金額をオーバーすると 猫が太っていく
3. アプリにアクセス https://test.dev-neko.arctic-street.net/
4. デザイン&フロント Pinterestでデザインの方向性を確定 FigmaでWF+デザインを作成 VScode+Cline+V0でデザインからコードを作成 カメラ機能周りもVibe Codingで大元を作成 VScode+Cline+V0でフロントを作成。 V0はNext.jsの開発元のVervelのAIであり、 React+Next.js環境と相性が良く、 ReactやNext.jsのバージョン周りの問題を解決してくれた。 他のAIだと情報が追いつかずに、 エラーが出てしまったりしていた。
5. AI設計＆インフラ Google AI Studioでプロンプト＆出力JSON形式を設計 し、そのままコードまでポン出し。その後調整して TypeScriptとして関数化。 プロンプトはシンプルに「レシートの内容を読み取ってくださ い」だけにした。（後から追記したけど） インフラはAWS CDKでEC2インスタンス作成からサーバー 内設定（Node、MySQL、Apacheの導入も含む）、HTTPS 化、Next.js起動まで全自動化。 Vercelでも良かったけど、自分の勉強のために採用した。 作っては消しを繰り返したので微課金で済んでいるがLet’s Encryptに「証明書取り過ぎ！」って怒られた。
6. バックエンド MySQL（TablePlus）を用いたデータベース設計・構築を担当し、 ユーザー・レシート・品目・カテゴリの正規化されたテーブル構造を 設計。Next.jsのAPIルートと接続して非同期でデータの登録・取 得ができるように実装した。 レシートデータは、Google Gemini APIを活用し、店名・支店名・ 品目名・価格・カテゴリなどの情報を自動で抽出し、それぞれの テーブルに適切に保存されるようにした。また、カテゴリ別に支出 総額をグルーピングして取得する処理も実装し、フロントのグラフ 表示させた。
7. 学んだこと バックエンド ハッカソンでバックエンドを担当したのは 初めてだった。AIを駆使し、何とか形にす ることはできたが、出力されたコードを読 み解く力が不足しているのを痛感した。 今後も、基礎的な学習からじっくり取り組 んでいきたい。 インフラ AI界隈の進化をキャッチアップできたの と、IaCをガッツリ触れたのが大きかっ た。ただし、AWS CDKのコーディングは 粗が残っているのと、冪等性が意識でき ていないこと、AWSコンポーネントの知識 範囲の狭さなどが課題として残った。 デザイン&フロント 本格的な複数人のアプリ開発兼 AIコー ディングは初めてでした。 機能実装に関する説明責任や、 詳細な調整は人力で行わないといけない ため、 基礎的な知識が不足しているのを痛感し た。
8. Thank You! デブねこ管理委員会