GDGoC開発体験談 - Gemini生成AI活用ハッカソン / GASとFirebaseで挑むパン屋のフードロス解決 -

GDG DevFest Tokyo 2024 (https://gdg-tokyo.connpass.com/event/335192/) にて発表したGSGoCの活動紹介

Transcript

1. Google Developer Groups on Campus GDGoC 開発体験談 Gemini・AI活用ハッカソン / GASとFirebaseで挑むパン屋 フードロス解決 高木 洋羽 & ゆに こ (GDGoC)
2. Google Developer Groups on Campus GDGoC と Google Developer Groups on Campus 旧 Google Developer Student Club (GDSC) がGDGと 連携強化 ためリブランディング Google Developers 支援を受けたGoogle 技術に関心 ある大学生向けコミュニティ 世界中に2,100以上 Chapterが存在 日本で 4年目、全国各地で28 大学・キャンパス Chapterごとに身近な課題を技術により解決を目指す 本日 Univ. Tokyo と Osakaから開発経験談を紹介 14 3
3. Google Developer Groups on Campus Gemini・AI活用ハッカソン 〜参加報告 & 今後 展望〜 高木 洋羽 (M1, GDGoC Univ. Tokyo)
4. Google Developer Groups on Campus Solution Challenge 2024 世界中 GDGoCから無数 チームが参加する年次 大規模な学生ハッカソン
5. Google Developer Groups on Campus Solution Challenge 2024 お題：Google 技術を何かしら使って SDGs いずれかを解決するアプリケーションを開発
6. Google Developer Groups on Campus Solution Challenge 2024 我々Univ. Tokyo チームが日本勢唯一 Global Top 100を獲得
7. Google Developer Groups on Campus 開発 背景 コロナ禍を経て教育 場にオンライン授業 が普及 家から繋がる・録画が残るなど一見して便利そうですが......
8. Google Developer Groups on Campus オンライン授業 闇 あれ、みんなカメラオフ だけど聞いてる かな...... どうせ誰も聞いてないでしょ 今日なにか面白い部分あった？
9. Google Developer Groups on Campus オンライン授業 闇 講義前後における資料作成 負担増 学習効果へ 不安から宿題増 集中力 低下 モチベーション 低下
10. Google Developer Groups on Campus 臨場感 欠如 が全てを台無しにしている！ 資料作成 手間も技術で何とかできる ず 開発 背景
11. Google Developer Groups on Campus 臨場感 欠如 が全てを台無しにしている！ 資料作成 手間も技術で何とかできる ず → AI 力でなんとかしよう！ 開発 背景
12. Google Developer Groups on Campus 完成したも (先生側視点 )
13. Google Developer Groups on Campus ① リアルタイム AI感情認識 生徒たち カメラ映像 共有せずに表情認識 結果を匿名で集計・表示 - 画面内にいない場合 バレる facial emotion recognition OSSがGitHubに多数 JavaScriptで 実装も 今回 auduno/clmtrackrを利用 SmartSyncSeminar
14. Google Developer Groups on Campus ② Geminiを利用して講義後 補助資料作成を完全自動化 - 講義スライド PDFファイル → 画像化 → Geminiへ「文字起こし してください」 - 講義録画 動画ファイル → Geminiへ「文字起こし してください」 - 文字起こしをまとめて Geminiへ「要約してください」「確認問題 を作ってください」 SmartSyncSeminar
15. Google Developer Groups on Campus WebRTCやChrome 画面キャプチャ系APIを利用しつつ (ほぼZoomな)オンライン会議システム + 先ほど 2つ 機能拡張を実装 - Webサーバ：Node.js，HTML/JS，Gemini呼 出し部分 Pythonと分担，ページ表示など - SFUサーバ：LiveKitを利用，リアルタイム通信 制御 SmartSyncSeminar
16. Google Developer Groups on Campus 題材選定 オンライン授業：自分たちが過去に本当に困ったことへ 解決策を提示 技術選定 Gemini：ホットな話題に乗っかる ハッカソン 提出〆切：2024年2月22日 Gemini Pro Vision：2024年1月22日から提供開始，マルチモーダルかつ長いコンテクス トが入力可能 → 資料が膨大な教育分野で 他 LLMよりも向いている？ 振り返り
17. Google Developer Groups on Campus コーディング 工数削減 プロンプトエンジニアリング / フローエンジニアリング 到来 ・も や複雑なプログラミング要らずで新機能を1つ開発できる ・発想力と言語能力を元に人間 思考をLLM 上に作る ハッカソンで感じた生成 AI / LLM 影響
18. Google Developer Groups on Campus コーディング 工数削減 プロンプトエンジニアリング / フローエンジニアリング 到来 ・も や複雑なプログラミング要らずで新機能を1つ開発できる ・発想力と言語能力を元に人間 思考をLLM 上に作る 最新技術 混沌化 ・昨日まで出来なかったことが突如できるようになる ・誰かが使い方を提示しなけれ いけない ハッカソンで感じた生成 AI / LLM 影響
19. Google Developer Groups on Campus Enjoy Hackathon! これまで・未来 運営者 方々に感謝を添えて
20. Google Developer Groups on Campus GAS と Firebase で挑む パン屋 フードロス解決 ゆに こ (B2, GDGoC Osaka)
21. Google Developer Groups on Campus 私たちが開発したも GDGoC Osaka がパンダッコ様と開発した 商品 取り置き予約 を行う Web アプリ GDGoC Osaka - テクノロジーで身近な課題 解決 パンダッコ : 大阪府豊中市 ベーグル屋さん - フードロスと複雑なワークフローに課題感
22. Google Developer Groups on Campus 従来 ワークフロー パンダッコ 顧客 パンダッコ 顧客 商品名を投稿 取り置き依頼 予約完了 返信
23. Google Developer Groups on Campus 従来 ワークフロー パンダッコ 顧客 パンダッコ 顧客 商品名を投稿 取り置き依頼 予約完了 返信 商品名と値段しか見れ ない
24. Google Developer Groups on Campus 従来 ワークフロー パンダッコ 顧客 パンダッコ 顧客 商品名を投稿 取り置き依頼 予約完了 返信 在庫不足等で予約で きない場合も 商品名と値段しか見れ ない
25. Google Developer Groups on Campus 従来 ワークフロー パンダッコ 顧客 パンダッコ 顧客 商品名を投稿 取り置き依頼 予約完了 返信 在庫不足等で予約で きない場合も 予約を一元管理 できない 商品名と値段しか見れ ない
26. Google Developer Groups on Campus 当アプリ ワークフロー パンダッコ 顧客 パンダッコ 顧客 ①GAS から * 商品追加 * 在庫登録 ②取り置き予約 Web App Web App ③Spreadsheet で 予約 確認 公式 LINE で 新商品等 告知
27. Google Developer Groups on Campus 当アプリ ワークフロー パンダッコ 顧客 パンダッコ 顧客 ①GAS から * 商品追加 * 在庫登録 ②取り置き予約 Web App Web App ③Spreadsheet で 予約 確認 公式 LINE で 新商品等 告知 スプシで予約を一 覧できる！
28. Google Developer Groups on Campus 当アプリ ワークフロー パンダッコ 顧客 パンダッコ 顧客 ①GAS から * 商品追加 * 在庫登録 ②取り置き予約 Web App Web App ③Spreadsheet で 予約 確認 公式 LINE で 新商品等 告知 アプリ上で在庫数や写 真が見れる！ スプシで予約を一 覧できる！
29. Google Developer Groups on Campus 技術構成 (1/3) Firestore 在庫編集 1 スプレッドシートに在庫 情報を入力 GAS から Firestore を 更新
30. Google Developer Groups on Campus 技術構成 (2/3) Firestore 取り置き予約 2 受取日時を設定 商品を選択 予約依頼 作成 注文履歴 確認 Hosting Storage
31. Google Developer Groups on Campus 技術構成 (3/3) Firestore 予約確認 3 GAS から Firestore データを取得
32. Google Developer Groups on Campus Firebase & GAS 選定理由 Firebase バックエンドやインフラで頭を悩ますことがなく、 開発速度が速い 　　「API サーバーがないとセキュリティ的にまずいんじゃない？」 → Firestore Rules である程度制御可能。validation に関わる情報が単一データ み 場合 割と な んとかなる。複数データや DB 外 情報が絡む場合 厳密な検査 できない Spreadsheet, GAS 管理画面 UI を楽に構築できる。認可 設定が楽 (スプシ アクセス権)
33. Google Developer Groups on Campus Primitive types, List, Set, Map, Timestamp, LatLng 等 操作に加え、 更新前, 更新後 データ, リクエスト, 認証情報等を用いて認可する https://firebase.google.com/docs/reference/rules/rules.Map
34. Google Developer Groups on Campus 開発プロセス 開発メンバー: M1, M2 が 3 名、B3, B1 が 2 名 ほとんどが Web 開発初心者。勉強しながら 1 年弱で開発した アプリ 運営開始やテスト とき 手厚めにサポートが必要 2月 3月 4月 10月 3月〜 2023年 ヒアリング 要件定義書作成 メンバー募集 アプリ設計 開発開始 パンダッコ様へ 最終報告 テスト パンダッコ様に 月一で進捗報告
35. Google Developer Groups on Campus クローズドテストを実施しました 常連 お客様限定でクローズドテストを行った - お客様 フィードバック - 注文前に確認画面が欲しい - 1 週間前に注文されたも を注文できない場合 明示してほしい - 曖昧検索が欲しい etc... 結局、フードロス 解決した ？ - PoC で解決 兆し 見えた。一般に展開した後に解決したか確認予定。 現在 開発 一段落し、本番運用開始 ため サポートに奮闘中
36. Google Developer Groups on Campus Join us 社会人 方へ - 社会人も参加可能なイベントもあります。ぜ お越しください！ - メンターやスポンサー、会場 サポート、登壇、告知協力などでサポートしていただけると大変 嬉しいです。本事例 ような開発面で 協力 lも是非！ 学生 方へ - お近く チャプター イベントにご参加ください！ - 新規チャプター設立も可能です！ お問い合わせ X : Community Manager @Reisa0210 GDGoC Osaka 公式 @gdsc_osaka Email: dsc-japan@google.com
37. Google Developer Groups on Campus Thank you ! + Q&A