Upgrade to Pro — share decks privately, control downloads, hide ads and more …

使用 Google AI Studio 和 Codex 開發串接 Firebase 的訂飲料 ...

使用 Google AI Studio 和 Codex 開發串接 Firebase 的訂飲料 iOS App

介紹如何用 Google AI Studio 與 Codex 開發串接 Firebase 的訂飲料 iOS App。內容從 Google AI Studio 建立串接 Firebase 的網頁原型到使用 Codex 與 Firebase CLI 開發串接 Firebase 的 SwiftUI iOS App

More Decks by 愛瘋一切為蘋果的彼得潘

Other Decks in Programming

Transcript

  1. 相關教學資源 • blog • 彼得潘的 App Neverland • 方 便搜尋彼得潘

    Medium 文 章的 B612 App blog • FB 粉絲團: 愛瘋 一 切為蘋果的彼得潘 • 個 人 網站 • 同學們的作業: 台 大 iOS App 程式設計 • 同學們的作業: 海 大 SwiftUI iOS / Flutter App 程式設計 • 同學們的作業: 彼得潘的 Swift iOS / Flutter App 開發教室 • FB社團: 彼得潘的 Swift iOS / Flutter App 開發教室 • LINE: deeplovepeterpan • FB: https://www.facebook.com/deeplove.pan

  2. • 現在 大 部分的 iOS App 都有網路功能 • 網路功能例 子

      • 帳號的註冊建立 • 登入功能 • 抓取網路上的資料和圖片 • 將資料和圖片上傳到網路上 • 聊天功能 • 實現網路功能很 麻 煩 • 除了開發 iOS App,還要開發部署在網路上電腦的後端程式 • 透過 Firebase 實現後端功能,不 用 再另外開發後端程式 開發有網路功能的 iOS App
  3. • 建立 Firebase 專案 • 在 Firebase 專案 頁面 設定

    iOS App 和下載 GoogleService- Info.plist • 在 iOS App 的 Xcode 專案加入 Firebase iOS SDK 和 GoogleService-Info.plist • 在 Firebase 專案 頁面 進 行 Authentication、Firestore、Cloud Storage 的相關設定 • 在 iOS App 的 Xcode 專案開發串接 Firebase 的程式 開發串接 Firebase 的程式前要先完成許多準備動作 iOS App 串接 Firebase 很 麻 煩
  4. Google AI Studio • https://aistudio.google.com • 線上寫程式的 IDE • 使

    用 Gemini vibe coding 開發各種程式 • 開發串接 Firebase 和 Gemini API 的網 頁 ,同時包含前端畫 面 、後端功能、AI 功能 • 從 Playground 實驗各種 Gemini AI 功能,比 方 聊天、圖片影片 生 成、 文 字轉聲 音 等
  5. • 快速 用 AI 做出 prototype,實驗各種功能和操作流程 • AI 幫忙設計後端的 Firestore

    資料庫,不 用 再 自 己 想 • 此時已建好 Firebase 專案,相關的 Authentication、Firestore、Cloud Storage 功 能也已完成 • 剩下要做的事 • 設定 Firebase 專案 支 援 iOS 平台 • 在 iOS App 的 Xcode 專案加入 Firebase iOS SDK 和 GoogleService-Info.plist • 在 iOS App 的 Xcode 專案開發串接 Firebase 的程式 • 剩下要做的事也可以請 AI 幫忙 • 請 Codex 幫忙 先做網 頁 版,再開發 iOS App 開發串接 Firebase 的網 頁
  6. • 使 用 ChatGPT 的 Image 繪製圖片 • 使 用

    Gemini 的 Nano Banana 繪製圖片 • Codex • 使 用 ChatGPT 的 Image 繪製圖片 • Stitch • 使 用 Gemini 的 Nano Banana 繪製圖片 • Claude Design • 可以設計畫 面 ,不過無法繪製圖片 網 頁 和 App 的畫 面 設計和需要的圖片也可以交給 AI
  7. • 開發 iOS App 主要包含四個部分 • 設計 App 畫 面

    和準備圖片素材 • 開發程式製作 App 畫 面 • 開發程式實現 App 功能 • 開發程式實現後端功能 • 現在這些都可以 用 AI 完成了, • 範例 • 用 Codex 或 Claude 寫程式實現 App 畫 面 和 App 功能 • 用 Codex 或 Gemini 生 成圖片素材 • 用 Google AI Studio 實現 Firebase 後端功能 現在已經可以 用 AI 開發完整的 App
  8. • Mac 版的 Claude & Codex 都有 computer use 功能

    • computer use • AI 直接使 用 滑鼠和鍵盤操作電腦軟體 • 上架 App • AI 操作 Xcode,將 App 上傳到 App Store Connect • AI 操作 Safari 或 Chrome,填寫 App 上架的相關資料後將 App 送審 上架 App 也可以請 AI 代勞
  9. • 範例: 開發 ToDo App • prompt: 簡單的 ToDo App,可以新增和瀏覽,記錄的資料要存起

    來,不需要刪除、修改和其它功能。 • AI 使 用 本機瀏覽器的 localStorage 存資料 Google AI Studio 開發儲存功能時,預設只會存在 本機的瀏覽器,不會存在網路上
  10. 資料只存在本機瀏覽器 • 問題 • 換另 一 個瀏覽器就看不到之前記錄的資料,比 方 從 Chrome

    換到 Safari • 換 一 台電腦就看不到之前記錄的資料 • 解法 • 將資料存在網路上,比 方 透過 Firebase • prompt 要明確提到將資料存在網路或存在 Firebase
  11. 包含全部功能的 prompt 開發串接 Firebase 的訂飲料 App,功能如下 • 使 用 Google

    登入或帳號密碼註冊登入 • 依據圖片的資料 生 成飲料 menu,存在 Firestore • 使 用 者可建立訂飲料群組,分享邀請碼給朋友 • 使 用 者可輸入邀請碼加入群組訂飲料 • 在群組裡可查看飲料訂單 • 使 用 者可 po 文 分享,內容包含圖片和 文 字,圖片存在 Cloud Storage • 動態牆 頁面 顯 示 所有使 用 者 po 的內容 注意: 帳密功能要另外在 Firebase 專案的網 頁 打開,Cloud Storage 功能必須先設定付費的信 用 卡
  12. 不 用 另外設定,AI 生 成就能使 用 的網站 簡化後的 prompt 開發串接

    Firebase 的訂飲料 App,功能如下 • 使 用 Google 登入 • 依據圖片的資料 生 成飲料 menu,存在 Firestore • 使 用 者可建立訂飲料群組,分享邀請碼給朋友 • 使 用 者可輸入邀請碼加入群組訂飲料 • 在群組裡可查看飲料訂單
  13. 附上飲料 menu 的圖片建議使 用 Chrome Safari 在 Google AI Studio

    上傳圖片有點問題,可能會卡在上傳中
  14. • 製作訂飲料 App 或其它應 用 ,包含 Google 登入和資料儲存在 Firestore 等功能

    • Google AI Studio 製作網 頁 要花 一 段時間, 大 家先請 AI 製作,AI 製作時我們可以繼續講下 一 段內容。 練習: 使 用 Google AI Studio 建立串接 Firebase 的 App
  15. Google AI Studio 有時會在建立 Firebase Project 時出問題 • 免費的 Gemini

    帳號較容易遇到問題 • 應該是 Google AI Studio 的 bug • 可以試試建立新 App,可能就會成功
  16. 自 己 從 Firebase 網 頁 建立 project,再將 fi rebaseCon

    fi g 貼給 AI 新增網 頁 應 用 程式 https:// fi rebase.google.com
  17. 將 fi rebaseCon fi g 貼給 AI 當 project 是

    手 動建立時,可能 Google 登入 & FIreStore 的功能也要 從 Firebase 網 頁手 動設定,請依照 Google AI Studio 提到的解法操作
  18. • AI 建立 Firebase 專案出問題時改成 手 動建立專案 • 登入 Google

    帳號 • 建立資料 • 修正網 頁 問題 • 調整網 頁 UI • 生 成圖片 • 分享網 頁 • 發布網 頁 練習: 操作網 頁 和修正問題
  19. Firebase 專案的 Cloud Firestore 頁面 > 安全性 Cloud Firestore 的存取權限

    • AI 寫程式設定權限 • 更簡單的權限設定 方 法
  20. Firebase 專案的 Cloud Firestore 頁面 > 資料 > users 查詢使

    用 者資訊 • Cloud Firestore Data Model 介紹 • 利 用 Firestore 儲存使 用 者的相關資料,利 用文 件 ID 對應
 Authentication 的使 用 者 ID
  21. • 連結 • 功能 • 建立 Firebase 專案 • 管理和設定專案的功能

    • 部署網站 • 管理資料庫與 Storage 的權限 • 安裝 方 法 • curl -sL https:// fi rebase.tools | bash • 登入帳號 • fi rebase login 幫助 AI 進 行 Firebase 相關設定的 Firebase CLI Firebase CLI
  22. • 從 Xcode 建立 iOS SwiftUI App 專案 DrinkApp •

    Codex 新增專案,選擇 App 專案資料夾 DrinkApp • prompt: 使 用 Firebase CLI 在 Firebase 專案 ai-studio-applet-webapp-70e4d 加 入 iOS 平台,將 GoogleService-Info.plist 加到 Xcode project 使 用 Codex 完成 iOS App 串接 Firebase 的相關設定
  23. • https://github.com/ fi rebase/ fi rebase-ios-sdk • https://github.com/google/GoogleSignIn-iOS • 可以請

    Codex 加,不過它預設修改的流程有點複雜,有時會失敗,所以建議以下兩種做法 • 使 用 Codex 的 computer use 控制 Xcode 加入 Firebase iOS SDK & GoogleSignIn • 自己 操作 Xcode 加入 Firebase iOS SDK & GoogleSignIn 使 用 SPM 加入 Firebase iOS SDK & GoogleSignIn
  24. • 連結 • prompt: 操作 Xcode 加入 Firebase iOS SDK,加入

    FirebaseAuth、FirebaseFirestore,不要直 接修改專案的相關檔案 使 用 Codex 的 computer use 控制 Xcode 加入 Firebase iOS SDK & GoogleSignIn
  25. 練習: 使 用 Codex 的 computer use 控制 Xcode 加入

    Firebase iOS SDK 的 FirebaseAuth、FirebaseFirestore & GoogleSignIn
  26. prompt: 讀取專案 ai-studio-applet-webapp-70e4d 的 Firestore collection menus 從 Codex 讀取

    Firebase 專案的相關資料 AI 利 用 Firebase CLI & 
 Firestore REST API 讀取
  27. 方 法1: 透過 Firebase CLI & Firestore REST API 了解

    Firestore 的設計 使 用 Codex 開發串接 Firebase 的 iOS App
  28. 方 法2: 附上 Firestore 網 頁 截圖幫助 Codex 了解 Firestore

    的設計 使 用 Codex 開發串接 Firebase 的 iOS App
  29. prompt: 使 用 AI 生 成 App Icon 和可愛的珍奶娃娃圖片,加到 assets,珍奶娃娃顯

    示 在登入 後的 首 頁 請 Codex 繪製 iOS App 的 assets 圖片和 App Icon • 連結 • Codex 如何 生 成 App 畫 面 裡的去背圖片
  30. • Firebase 的專案建立和相關設定透過 Codex 和 Firebase CLI 實現 • 範例

    • 先 用 Xcode 建立 SwiftUI 專案 • prompt: 開發串接 Firebase Firestore 的匿名笑話 App,在 Firebase 建立專案,使 用 者可分享笑話跟瀏覽笑話 其實 一 句話就能從無到有做出串接 Firebase 資料庫的 iOS App 如果沒有使 用 Google AI Studio
  31. • 連結 • 包含 XcodeBuildMCP 和 iOS App 開發常 用

    的各種 skill,像是 swiftui-ui-patterns 和 ios-debugger-agent。 • 一 條龍完成 App 開發的各種 工 作 • 使 用 SwiftUI 製作 App 畫 面 • 加入 AI 生 成的圖片 • debug 修正程式的問題 • 啟動模擬器測試 App,若發現問題 Codex 將 自 動修正程式再進 行 測試。 使 用 Codex 的 Build iOS Apps plugin 開發 App
  32. • 連結 • AI 原本常會使 用 舊式的 SwiftUI 寫法,比 方

    使 用 舊式的 ObservedObject 和 EnvironmentObject。有了 swiftui-ui-patterns skill,AI 將優先使 用 新式的 Observable 和 Environment。 利 用 swiftui-ui-patterns skill 幫助 AI 寫出更好且新式的 SwiftUI 程式
  33. • 連結 • 透過 XcodeBuildMCP 與 ios-debugger-agent skill 操作 iOS

    模擬器測試 App • 若發現問題 Codex 將 自 動修正程式再進 行 測試 請 Codex 操作 iOS 模擬器測試 App 功能