使用 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

Transcript

1. 彼得潘 使 用 Google AI Studio 和 Codex 開發串接 Firebase 的 訂飲料 iOS App
2. 彼得潘簡介 正職: 作家 副業: blog 作家、講師、家教、企業內訓、VIBE CODING 陪 跑教練、顧問、 工 程師、評審、接案
3. 相關教學資源 • 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

4. 小 王 子 、彼得潘、Peter、 鬼 塚、 情歌王 子 、 小 潘同學 莫叫我老師
5. • 現在 大 部分的 iOS App 都有網路功能 • 網路功能例 子 　 • 帳號的註冊建立 • 登入功能 • 抓取網路上的資料和圖片 • 將資料和圖片上傳到網路上 • 聊天功能 • 實現網路功能很 麻 煩 • 除了開發 iOS App，還要開發部署在網路上電腦的後端程式 • 透過 Firebase 實現後端功能，不 用 再另外開發後端程式 開發有網路功能的 iOS App
6. iOS App 最常使 用 的三 大 Firebase 功能
7. • 建立 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 很 麻 煩
8. 請 Google AI Studio & Codex 幫忙
9. Google AI Studio • https://aistudio.google.com • 線上寫程式的 IDE • 使 用 Gemini vibe coding 開發各種程式 • 開發串接 Firebase 和 Gemini API 的網 頁 ，同時包含前端畫 面 、後端功能、AI 功能 • 從 Playground 實驗各種 Gemini AI 功能，比 方 聊天、圖片影片 生 成、 文 字轉聲 音 等
10. 實驗各種 Gemini AI 功能 Playground
11. • 快速 用 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 的網 頁
12. • 使 用 ChatGPT 的 Image 繪製圖片 • 使 用 Gemini 的 Nano Banana 繪製圖片 • Codex • 使 用 ChatGPT 的 Image 繪製圖片 • Stitch • 使 用 Gemini 的 Nano Banana 繪製圖片 • Claude Design • 可以設計畫 面 ，不過無法繪製圖片 網 頁 和 App 的畫 面 設計和需要的圖片也可以交給 AI
13. • 開發 iOS App 主要包含四個部分 • 設計 App 畫 面 和準備圖片素材 • 開發程式製作 App 畫 面 • 開發程式實現 App 功能 • 開發程式實現後端功能 • 現在這些都可以 用 AI 完成了， • 範例 • 用 Codex 或 Claude 寫程式實現 App 畫 面 和 App 功能 • 用 Codex 或 Gemini 生 成圖片素材 • 用 Google AI Studio 實現 Firebase 後端功能 現在已經可以 用 AI 開發完整的 App
14. • Mac 版的 Claude & Codex 都有 computer use 功能 • computer use • AI 直接使 用 滑鼠和鍵盤操作電腦軟體 • 上架 App • AI 操作 Xcode，將 App 上傳到 App Store Connect • AI 操作 Safari 或 Chrome，填寫 App 上架的相關資料後將 App 送審 上架 App 也可以請 AI 代勞
16. 從 Google AI Studio 的 Build 頁 面 開發網 頁 https://aistudio.google.com
17. 通常會選擇 3.1 Pro & React 點選右上的 Settings 選擇 model & framework
18. 免費可以開發，付費可享 用 更 高 的額度
19. 按 tab 輸入 AI 的建議 在 prompt 輸入 文 字時會出現 AI 的建議
20. • 範例: 開發 ToDo App • prompt: 簡單的 ToDo App，可以新增和瀏覽，記錄的資料要存起 來，不需要刪除、修改和其它功能。 • AI 使 用 本機瀏覽器的 localStorage 存資料 Google AI Studio 開發儲存功能時，預設只會存在 本機的瀏覽器，不會存在網路上
21. 資料只存在本機瀏覽器 • 問題 • 換另 一 個瀏覽器就看不到之前記錄的資料，比 方 從 Chrome 換到 Safari • 換 一 台電腦就看不到之前記錄的資料 • 解法 • 將資料存在網路上，比 方 透過 Firebase • prompt 要明確提到將資料存在網路或存在 Firebase
22. • 若需儲存資料，先試試預設使 用 本機瀏覽器 localStorage 儲存的效果 • 先不要提到將資料存在網路或存在 Firebase 練習: 使 用 Google AI Studio 建立 App
23. 使 用 Google AI Studio 開 發訂飲料網 頁
24. 天仁飲料 menu 圖片連結
25. 包含全部功能的 prompt 開發串接 Firebase 的訂飲料 App，功能如下 • 使 用 Google 登入或帳號密碼註冊登入 • 依據圖片的資料 生 成飲料 menu，存在 Firestore • 使 用 者可建立訂飲料群組，分享邀請碼給朋友 • 使 用 者可輸入邀請碼加入群組訂飲料 • 在群組裡可查看飲料訂單 • 使 用 者可 po 文 分享，內容包含圖片和 文 字，圖片存在 Cloud Storage • 動態牆 頁面 顯 示 所有使 用 者 po 的內容 注意: 帳密功能要另外在 Firebase 專案的網 頁 打開，Cloud Storage 功能必須先設定付費的信 用 卡
26. 不 用 另外設定，AI 生 成就能使 用 的網站 簡化後的 prompt 開發串接 Firebase 的訂飲料 App，功能如下 • 使 用 Google 登入 • 依據圖片的資料 生 成飲料 menu，存在 Firestore • 使 用 者可建立訂飲料群組，分享邀請碼給朋友 • 使 用 者可輸入邀請碼加入群組訂飲料 • 在群組裡可查看飲料訂單
27. 附上飲料 menu 的圖片建議使 用 Chrome Safari 在 Google AI Studio 上傳圖片有點問題，可能會卡在上傳中
28. 選擇後點選 Select this design 選擇設計的樣式
29. 同意進 行 Firebase 的相關設定 點選 Enable Firebase
30. • 製作訂飲料 App 或其它應 用 ，包含 Google 登入和資料儲存在 Firestore 等功能 • Google AI Studio 製作網 頁 要花 一 段時間， 大 家先請 AI 製作，AI 製作時我們可以繼續講下 一 段內容。 練習: 使 用 Google AI Studio 建立串接 Firebase 的 App
31. Google AI Studio 有時會在建立 Firebase Project 時出問題 • 免費的 Gemini 帳號較容易遇到問題 • 應該是 Google AI Studio 的 bug • 可以試試建立新 App，可能就會成功
32. 自 己 從 Firebase 網 頁 建立 project，再將 fi rebaseCon fi g 貼給 AI 新增網 頁 應 用 程式 https:// fi rebase.google.com
33. 將 fi rebaseCon fi g 貼給 AI 當 project 是 手 動建立時，可能 Google 登入 & FIreStore 的功能也要 從 Firebase 網 頁手 動設定，請依照 Google AI Studio 提到的解法操作
34. 測試網 頁 ，請 AI 修正問題 點選 error 訊息旁邊的 Fix
35. 登入 Google 帳號
36. 輸入群組名字 建立 GROUP
37. 輸入邀請碼 Join group
38. 訂飲料
39. 飲料訂單
40. 點選右上的 Edit tool 請 AI 調整 UI 點選想修改的區塊 從 prompt 輸入修改或從下 方 的 工 具列修改
41. 修改背景 色 ，按 Submit 送出
42. 切到 Code 分 頁 手 動修改程式
43. 使 用 Gemini 的 Nano Banana 生 圖 請 AI 生 成圖片
44. 權限設為公開: Anyone with the link can view 分享(Share)網 頁
45. 修改網 頁 將 生 成 自己 的版本，不會改到原本的程式 別 人 可從 Google AI Studio 操作網 頁 或修改網 頁
46. 發布(publish)網 頁 • 設定付款帳號(信 用 卡)才能發布 • 享有免費的網路流量額度，沒有太多 人 連 的話，基本上不會花到錢
47. • AI 建立 Firebase 專案出問題時改成 手 動建立專案 • 登入 Google 帳號 • 建立資料 • 修正網 頁 問題 • 調整網 頁 UI • 生 成圖片 • 分享網 頁 • 發布網 頁 練習: 操作網 頁 和修正問題
48. 查詢 Firebase 的專案連結
49. 專案已設定網 頁 應 用 程式
50. Firebase 專案的安全性 > Authentication > 使 用 者 查詢登入的使 用 者
51. 已有 Google 登入，可另外添加其它登入 方 式 Firebase 專案的 Authentication > 登入 方 式
52. Firebase 專案的 Cloud Firestore 頁面 > 安全性 Cloud Firestore 的存取權限 • AI 寫程式設定權限 • 更簡單的權限設定 方 法
53. Firebase 專案的 Cloud Firestore 頁面 > 資料 > users 查詢使 用 者資訊 • Cloud Firestore Data Model 介紹 • 利 用 Firestore 儲存使 用 者的相關資料，利 用文 件 ID 對應
 Authentication 的使 用 者 ID
54. Firebase 專案的 Cloud Firestore 頁面 > 資料 > menus 飲料 menu
55. groups & inviteCodes 飲料群組 & 邀請碼
56. groups 底下的 members & orders 群組成員和飲料訂單
57. 練習: 查詢 Firebase 的專案資料
58. 使 用 Codex ＆ Firebase CLI 完成 iOS App 串接 Firebase 的相關設定
59. • 連結 • 功能 • 建立 Firebase 專案 • 管理和設定專案的功能 • 部署網站 • 管理資料庫與 Storage 的權限 • 安裝 方 法 • curl -sL https:// fi rebase.tools | bash • 登入帳號 • fi rebase login 幫助 AI 進 行 Firebase 相關設定的 Firebase CLI Firebase CLI
60. • 從 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 的相關設定
61. 使 用 Codex 完成 Firebase 的相關設定
62. Firebase 的 project 網 頁 加入了 iOS
63. 不 用 再 自己手 動下載加到專案了 Codex 將 GoogleService-Info.plist 加到 Xcode project
64. 練習: 使 用 Codex ＆ Firebase CLI 完成 iOS App 串接 Firebase 的相關設定
65. • 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
66. • 連結 • prompt: 操作 Xcode 加入 Firebase iOS SDK，加入 FirebaseAuth、FirebaseFirestore，不要直 接修改專案的相關檔案 使 用 Codex 的 computer use 控制 Xcode 加入 Firebase iOS SDK & GoogleSignIn
67. 加入 GoogleSignIn
68. 練習: 使 用 Codex 的 computer use 控制 Xcode 加入 Firebase iOS SDK 的 FirebaseAuth、FirebaseFirestore & GoogleSignIn
69. prompt: 讀取專案 ai-studio-applet-webapp-70e4d 的 Firestore collection menus 從 Codex 讀取 Firebase 專案的相關資料 AI 利 用 Firebase CLI & 
 Firestore REST API 讀取
70. prompt: 讀取專案 ai-studio-applet-webapp-70e4d 的 Authentication 使 用 者清單 從 Codex 讀取 Firebase 專案的相關資料
71. 練習: 從 Codex 讀取 Firebase 專案的相關資料
72. 方 法1: 透過 Firebase CLI & Firestore REST API 了解 Firestore 的設計 使 用 Codex 開發串接 Firebase 的 iOS App
73. 方 法2: 附上 Firestore 網 頁 截圖幫助 Codex 了解 Firestore 的設計 使 用 Codex 開發串接 Firebase 的 iOS App
74. 方 法3: 附上網 頁 截圖幫助 Codex 了解 App 的功能需求 使 用 Codex 開發串接 Firebase 的 iOS App
75. 解法: 請 Codex 開發時分成不同檔案 Codex 可能將程式全部塞在 一 個檔案
76. 附上圖片請 Codex 修正 Google 登入問題 請 Codex 修正問題 修正權限問題
77. App 畫 面
78. 使 用 ChatGPT 製作精美的 App 畫 面 展 示 圖
79. 練習: 使 用 Codex 開發串接 Firebase 的 iOS App
80. prompt: 使 用 AI 生 成 App Icon 和可愛的珍奶娃娃圖片，加到 assets，珍奶娃娃顯 示 在登入 後的 首 頁 請 Codex 繪製 iOS App 的 assets 圖片和 App Icon • 連結 • Codex 如何 生 成 App 畫 面 裡的去背圖片
81. 請 Codex 繪製 App 圖片和 App Icon
82. 請 Codex 繪製 App 圖片和 App Icon
83. 練習: 請 Codex 繪製 iOS App 的 assets 圖片和 App Icon
84. • Firebase 的專案建立和相關設定透過 Codex 和 Firebase CLI 實現 • 範例 • 先 用 Xcode 建立 SwiftUI 專案 • prompt: 開發串接 Firebase Firestore 的匿名笑話 App，在 Firebase 建立專案，使 用 者可分享笑話跟瀏覽笑話 其實 一 句話就能從無到有做出串接 Firebase 資料庫的 iOS App 如果沒有使 用 Google AI Studio
85. 匿名笑話 App
86. Authentication 的匿名登入
87. Firestore 的 jokes
88. 練習: 使 用 Codex 從無到有開發串接 Firebase 的 iOS App
89. • 連結 • 包含 XcodeBuildMCP 和 iOS App 開發常 用 的各種 skill，像是 swiftui-ui-patterns 和 ios-debugger-agent。 • 一 條龍完成 App 開發的各種 工 作 • 使 用 SwiftUI 製作 App 畫 面 • 加入 AI 生 成的圖片 • debug 修正程式的問題 • 啟動模擬器測試 App，若發現問題 Codex 將 自 動修正程式再進 行 測試。 使 用 Codex 的 Build iOS Apps plugin 開發 App
90. • 連結 • AI 原本常會使 用 舊式的 SwiftUI 寫法，比 方 使 用 舊式的 ObservedObject 和 EnvironmentObject。有了 swiftui-ui-patterns skill，AI 將優先使 用 新式的 Observable 和 Environment。 利 用 swiftui-ui-patterns skill 幫助 AI 寫出更好且新式的 SwiftUI 程式
91. • 連結 • 透過 XcodeBuildMCP 與 ios-debugger-agent skill 操作 iOS 模擬器測試 App • 若發現問題 Codex 將 自 動修正程式再進 行 測試 請 Codex 操作 iOS 模擬器測試 App 功能
92. 練習: 使 用 Codex 的 Build iOS Apps plugin 開發 App
93. 想要使 用 Firebase storage 儲存檔案 ?
94. 存檔的 Firebase Storage 功能必須升級成 Blaze 方 案
95. • 連結 Spark plan & Blaze plan
96. • 連結 Spark plan & Blaze plan
97. • 連結 將 Firebase 專案從免費的 Spark 方 案升級為即付即 用 的 Blaze 方 案
98. • Stitch 補充: 使 用 Google stitch 設計 App 畫 面
99. 聯絡彼得潘 •LINE: deeplovepeterpan •FB: https://www.facebook.com/deeplove.pan