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

1. 簡介

總覽

如今，人工智慧在建築領域的應用可以從哪裡開始？對我們大多數人來說，一切都始於一個簡單的查詢或原型。Google AI Studio 提供強大的 建置模式（通常稱為「vibe 編碼」），讓您可以使用 Gemini 模型驅動的程式碼產生來設計、測試和建立全端 Web 應用程式。

在本代碼實驗室中，您將建立一個協作待辦事項應用程序，使用 Firestore 資料庫進行持久存儲，並使用 Firebase Authentication 進行使用者登入。AI Studio 代理程式將配置所有後端服務，並編寫前端和資料庫互動程式碼。套用完善後，只需按一下即可將其直接部署到 Cloud Run。

作品集網站的最終版本

學習內容

  • 提示 Google AI Studio 建立一個協作式待辦事項清單 Web 應用程式原型。
  • 設定並啟用 Firebase 整合功能，即可佈建 Firestore 資料庫，並設定 Google 登入驗證。
  • 在互動式預覽沙箱中測試應用程式。
  • 直接從 Google AI Studio 使用者介面將應用程式部署到 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 Starter Tier：允許在選定區域免費發布最多兩個全端應用程序，而無需建立完整的 Google Cloud 結算帳戶。
    • 標準部署：連接到現有的付費 Google Cloud 項目，並擴充儲存限制、CPU 資源和 API。

3. 在 AI Studio 建置模式下建立待辦事項應用

讓我們建立應用程式外殼，並提示 AI 程式碼助理建立安全層和持久層。

  1. 導覽至 Google AI Studio 應用程式面板，然後點選 新應用程式。
  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 執行個體產生唯一的服務識別碼。
    • 您也可以選擇在部署設定中指定自訂的 .ai.studio URL 前綴（例如，your-portfolio-name.ai.studio）。
  3. 如果這是您第一次部署且您使用的是標準 Google Cloud 參數，系統可能會提示您指定組織類型並提供結算詳細資訊。
  4. 點擊發布應用程式。
  5. 容器建置、容器註冊和服務部署步驟均在背景執行。這個過程通常需要 2-4 分鐘才能完成。
  6. 部署完成後，複製生成的 App URL，然後在瀏覽器標籤頁中存取即時應用程式連結。
  7. 在瀏覽器中測試線上網頁應用程式！

6. 在 Firebase 控制台中檢查

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

  1. 導覽至 Firebase 控制台。
  2. 選擇您的項目（帶有 AI Studio 標籤或您手動綁定的項目 ID）。
  3. 在左側導覽窗格中，選擇 建置 > Firestore 資料庫:
    • 查看您的應用程式建立的資料庫集合和文件。
    • 請核實每個文件的擁有者 ID 是否與目前使用者的身份驗證憑證相符。
  4. 在 Firestore 面板中選擇 Security 選項卡，以查看自動產生的安全性指令，這些指令將讀取和寫入權限限制為已驗證的文件擁有者。
  5. 導覽至 安全性 > 驗證，查看登入測試期間填入的活動使用者憑證清單。

7. 清除

為避免任何意外費用或清理您的工作區資源：

  1. 在 Google AI Studio 中，前往 Apps 頁面。
  2. 在表格或清單中找到您的應用程式。
  3. 點擊垃圾桶圖示刪除應用程式狀態並從 Cloud Run 取消發布服務。
  4. 如果您使用標準項目進行部署，並且想要完全關閉所有資源，請前往 Google Cloud 控制台專案設定 並刪除底層專案。

8. 結語

恭喜！您已直接在 Google AI Studio 中設計、開發和部署了一個全端 Web 應用程式。

前往這個連結，即可領取「完成建構工具學習歷程」徽章！

如要繼續學習，請前往 goo.gle/builders 參加下一個實驗室。

瞭解詳情