啟動 AI 待辦事項網頁應用程式

1. 簡介

總覽

現在要如何開始使用 AI 建構內容？對大多數人來說，這一切都從簡單的查詢或原型開始。Google AI Studio 提供強大的建構模式 (通常稱為「直覺式程式開發」)，可讓您使用 Gemini 模型驅動的程式碼生成功能，設計、測試及建構全端網頁應用程式。

在本程式碼研究室中，您將建構協作待辦事項應用程式，並使用 Firestore 資料庫進行持續儲存，以及使用 Firebase 驗證進行使用者登入。AI Studio 代理程式會設定所有後端服務，並編寫前端和資料庫互動程式碼。應用程式完成後，只要按一下滑鼠，就能直接部署至 Cloud Run。

學習內容

  • 提示 Google AI Studio 設計協作待辦事項清單網頁應用程式原型。
  • 設定並啟用 Firebase 整合功能，即可佈建 Firestore 資料庫，並設定 Google 登入驗證。
  • 在互動式預覽沙箱中測試應用程式。
  • 直接從 Google AI Studio UI 將應用程式部署至 Cloud Run。

課程內容

  • 瞭解如何使用 Google AI Studio 的建構模式，透過自然語言快速設計全端服務原型。
  • 瞭解 Google AI Studio 如何自動設定 Firebase Firestore 和驗證整合。
  • 瞭解如何將 AI Studio 應用程式以無伺服器容器的形式部署至 Cloud Run。
  • 瞭解如何在 Firebase 控制台中檢查資料庫記錄和安全狀態。

2. 專案設定

啟動 AI Studio 前，請先確認帳戶狀態和必要條件。

Google 帳戶和層級資訊

  1. 如果沒有 Google 帳戶，請建立帳戶。
    • 提示：請盡可能使用個人 Google 帳戶進行本實驗室。群組、公司或學校帳戶可能會強制執行 Workspace 政策，停用實驗功能或雲端整合功能。
  2. 查看部署作業的帳單詳細資料：
    • Google Cloud 入門級：無須建立完整的 Google Cloud 帳單帳戶，即可在特定區域免費發布最多兩個全端應用程式。
    • 標準部署：連結至現有的付費 Google Cloud 專案，並擴充儲存空間限制、CPU 資源和 API。

3. 在 AI Studio 建構模式中建立待辦事項應用程式

接下來，我們將建立應用程式外殼，並提示 AI 程式碼助理建構安全性和持續性層。

  1. 前往 Google AI Studio 應用程式面板，然後點選「New App」(新應用程式)。
  2. 在提示詞輸入框中，輸入待辦事項應用程式的說明：
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  3. 按一下「建構」，開始產生應用程式。

當 AI Studio 代理程式發現需要資料庫儲存空間和安全的使用者登入功能時，就會觸發自動 Firebase 設定流程。

  1. 大約一分鐘後，工作區會彈出「啟用 Firebase」整合資訊卡。
  2. 按一下「啟用 Firebase」按鈕，確認並接受服務條款。
  3. 代理程式會執行背景設定。幕後運作方式：
    • 系統會佈建 Firestore 資料庫執行個體。
    • Firebase 驗證已啟用，且 Google 登入也已啟用。
    • 建立服務帳戶設定 (例如建立包含 API 憑證的 src/lib/firebase.ts)。
    • 系統會新增包含預設安全界線 (使用者隔離規則) 的 firestore.rules。

4. 測試及疊代

正式推出服務前，請先在互動式預覽畫面中執行驗證檢查。

  1. 在 Google AI Studio 中開啟預覽窗格。
  2. 按一下「登入」按鈕，觸發沙箱 Google 登入驗證。
    • 修正錯誤注意事項：在生成或測試期間，您有時可能會因安全規則不一致而遇到執行階段問題、編譯錯誤或 Firestore 權限失敗。如果發生這種情況，AI Studio 會在對話中顯示「修正」按鈕，讓您要求代理程式自動診斷及修復問題。
    Google AI Studio 修正按鈕位置
  3. 登入後，新增多項工作 (例如「複習 Cloud Run 文件」、「完成 Codelab」)。
  4. 將部分工作切換為已完成，並刪除一項工作，確保用戶端處理常式和資料庫狀態正確更新。
  5. 如要變更樣式或行為，請透過即時通訊視窗指示代理程式。例如：
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. 等待代理程式更新程式碼集，並在預覽瀏覽器中查看更新。

5. 部署至 Cloud Run

原型完全正常運作後，請將其部署為 Cloud Run 上的公開服務。

  1. 在 Google AI Studio 的右上角，按一下「發布」按鈕，啟動部署精靈。Google AI Studio 發布按鈕位置
  2. 按一下「開始使用」，設定 Google Cloud 專案。
    • 確認目標 Google Cloud 專案下拉式選單與您連結至工作區的專案相符。
    • AI Studio 會自動為 Cloud Run 執行個體產生專屬服務 ID。
  3. 如果您是第一次部署，且使用標準 Google Cloud 參數，系統可能會提示您指定機構類型並提供帳單詳細資料。
  4. 按一下「發布應用程式」。
  5. 容器建構、容器註冊和服務部署步驟會在背景執行。這項程序通常會在 2 到 4 分鐘內完成。
  6. 部署完成後，請複製產生的「App URL」，並在瀏覽器分頁中前往即時應用程式連結。
  7. 在瀏覽器中測試即時網頁應用程式！

6. 在 Firebase 控制台中檢查

深入瞭解資料結構定義和使用者追蹤方式。

  1. 前往 Firebase 控制台。
  2. 選取專案 (標籤為 AI Studio 或您手動繫結的專案 ID)。
  3. 在左側導覽窗格中，依序選取「建構」>「Firestore 資料庫」：
    • 查看應用程式建立的資料庫集合和文件。
    • 確認每份文件的擁有者 ID 都與有效的使用者驗證憑證相符。
  4. 在 Firestore 面板中選取「安全性」分頁，即可查看自動產生的安全性指令，這些指令會將讀取和寫入權限限制在經過驗證的文件擁有者。
  5. 前往「安全性」>「驗證」，查看登入測試期間填入的有效使用者憑證清單。

7. 清除

如要避免產生預料之外的帳單費用，或清除工作區資源，請按照下列步驟操作：

  1. 在 Google AI Studio 中，前往「應用程式」頁面。
  2. 在格狀或清單中找出應用程式。
  3. 按一下垃圾桶圖示，即可刪除應用程式狀態，並從 Cloud Run 取消發布服務。
  4. 如果您是使用標準專案部署，並想完全關閉所有資源，請前往 Google Cloud 控制台專案設定，然後刪除基礎專案。

8. 結語

恭喜！您已直接透過 Google AI Studio 設計、開發及部署協作式全端網頁應用程式。

如要收集完成建構者實驗室的徽章，並尋找其他實驗室繼續學習之旅，請前往 goo.gle/builders。

瞭解詳情