使用 Google AI Studio 和 Cloud SQL 建構第一個以資料庫為基礎的網頁應用程式

1. 事前準備

如果你曾嘗試與朋友或鄰居一起在週末跑步，一定知道其中的困難：大家在無止盡的群組對話中討論集合地點，不斷詢問每個人的跑步配速，而新加入者永遠不確定誰會出席。

在本程式碼研究室中，您將建構 Running Club，解決這個日常問題。這是一個友善的網頁應用程式，可供當地跑者瀏覽喜愛的路線、安排週末聚會、按一下即可回覆，以及與其他跑者聊天。

為什麼這個應用程式需要資料庫？

社群應用程式需要可靠的記憶體，也就是「資料庫」。跑者新增風景路線、回覆週六晨跑的 RSVP，或是發布詢問停車資訊的留言時，即使關閉手機或電腦，這些資訊也不會消失。資料庫會安全地儲存及整理所有路線、參與者名單和成員訊息，因此社團成員每次開啟應用程式時，都能看到最新資訊。

您將使用 Google AI Studio 的「建構」模式建構這個應用程式。您不必自行編寫複雜的程式碼或設定技術基礎架構，只要用簡單的語言描述需求即可。Google AI Studio 會生成應用程式，連線至實際的 PostgreSQL 適用的 Cloud SQL 資料庫來記住資料，並在 Cloud Run 上發布應用程式，讓社群立即開始使用。

建構項目

您將建構並啟動 Running Club，這是一個社群網頁應用程式，包含：

  • Google 登入：使用現有 Google 帳戶快速安全地登入。
  • 跑者個人資料：顯示跑步偏好設定和目標配速的成員個人資料。
  • 路線庫：收藏你最愛的鄰近路線，並顯示距離、山路難度和集合地點。
  • 近期跑步行程：活動看板，可整理近期跑步行程並連結至路線。
  • 輕鬆回覆：只要按一下按鈕，會員就能表示「我要參加」，並查看其他出席者。
  • 進行討論：在每次執行作業的留言區協調詳細資料、提出問題及分享最新消息。

課程內容

  • 瞭解如何在 Google AI Studio 中，使用簡單的提示詞建立可運作的網頁應用程式。
  • Google AI Studio 如何自動設定 Google 登入。
  • 瞭解 Google AI Studio 如何建立及連結實際的 PostgreSQL 適用的 Cloud SQL 資料庫，以便記住您的資料。
  • 只要與 AI 對話，就能新增功能及擴充資料庫。
  • 如何確認俱樂部的資料在不同造訪期間都能安全儲存。
  • 如何使用 Cloud Run 將應用程式發布至網際網路。
  • 如何在 Google Cloud 控制台中查看即時應用程式和資料庫。

軟硬體需求

  • 新版網路瀏覽器，例如 Google Chrome。
  • 用來登入 Google AI Studio 的標準 Google 帳戶。

Cloud SQL Starter 版的資格和限制

Google AI Studio 提供 Google Cloud 入門級，協助建構者試用生成式應用程式和代管資料庫：

  • 資格條件：
    • 適用於使用標準 Google 帳戶的個人。
    • 不符合資格的帳戶包括：現有或過去有 Cloud Billing 帳戶的使用者，以及與 Google Workspace、Google Workspace for Education 或 Google 非營利相關聯的帳戶。
    • 如果您的帳戶不符合使用入門層級的資格，您仍可在 AI Studio 中選取已啟用帳單的現有 Google Cloud 專案，完成這個程式碼研究室。
  • 資源規格：
    • 佈建執行 PostgreSQL 18 的 PostgreSQL 適用的 Cloud SQL 開發人員版執行個體。
    • 包括 0.5 個 vCPU、2 GB RAM 和 1 GB 儲存空間。視活動而定，這應該足夠您在幾個月或更長的時間內，每天執行數百次造訪。
    • 支援縮減至零，在沒有作用中的資料庫連線時自動暫停運算，以節省配額。
  • Quota：
    • 每月免費配額包括 50 個運算單元和 10 GB 的儲存空間。

2. 開啟 Google AI Studio 並啟動新應用程式

如要開始使用，請在瀏覽器中開啟 Google AI Studio。這是您的創作工作區，只要描述需求，就能輕鬆建構及測試應用程式。

步驟 1：登入 Google AI Studio

  1. 開啟網路瀏覽器 (例如 Google Chrome)，然後前往 aistudio.google.com。
  2. 按一下「開始使用」，然後登入標準 Google 帳戶 (例如 Gmail 帳戶)。

開始使用

  1. 首次造訪時，如果系統提示您詳閱服務條款，請詳閱並接受條款，然後繼續操作。

步驟 2：啟動新應用程式

  1. 在底部中央面板中，按一下「開始建構」 (或按一下右側面板中的「+ 新應用程式」)。

開始建構

3. 從簡單提示和 Firebase 驗證開始

您不需要複雜的架構圖就能開始使用。您只需一句話，就能啟動初始應用程式、設定 Google 登入，以及連結資料庫。

輸入初始提示

在 AI Studio 建構模式的提示詞輸入框中，輸入下列提示並按下 Enter 鍵：

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

AI Studio 新應用程式

這個連結會自動填寫提示詞輸入框。

瞭解工作區

提交提示後，Google AI Studio 會開啟完整的應用程式工作區。請花點時間查看畫面上的三個主要區域：

AI Studio 工作區

  • 對話 / 提示方塊 (底部)：您可以在這裡以簡單的語言繼續與 AI 對話，新增功能、調整設計或提出問題。
  • 檔案和程式碼區域 (左側)：顯示 AI 在幕後建立的檔案。您不需要自行編寫或編輯程式碼，但可以透過這個面板觀看 AI 建立應用程式元件。
  • 即時預覽視窗 (右側)：即時顯示實際運作的應用程式。產生視窗後，您就可以直接在視窗中點選按鈕、在文字欄位中輸入內容，以及測試應用程式。
  • 程式碼編輯器 (右側)：顯示 AI 生成的實際程式碼。你可以視需要編輯，但這並非必要步驟。
  • 部署及共用 (右上角)：您可以在這裡將應用程式部署到網際網路，並與他人共用。

Google AI Studio 自動執行的作業

AI 處理要求時，您可以觀看應用程式的建構過程：

  1. 設定 Google 登入：AI 會自動整合 Google 登入功能，讓跑者透過 Google 帳戶安全登入，不必管理使用者密碼或安全性設定。
  2. 連結實際資料庫：AI 會設定受管理 Cloud SQL 資料庫，用於儲存社群資料。如果系統提示，請按一下為專案啟用資料庫。

AI Studio 新應用程式

  1. 整理資料表 (schema.ts)：將資料庫結構定義視為整理好的試算表集合。AI 會自動為應用程式建立儲存空間結構：
    • users 表格：儲存成員個人資料、姓名、顯示圖片和跑步配速。
    • runs 表格：儲存已排定的活動，包括活動名稱、距離、目標配速、地點和日期。
    • comments 表格：儲存跑者在每次跑步後留下的訊息和問題。
    所有這些變更都會在程式碼區域自動完成，如果您從「預覽」切換至「程式碼」分頁，即可查看這些類別的整理方式。但您不需要自行編寫程式碼，系統會自動完成所有作業。AI Studio 新應用程式(注意：您不需要手動編寫或編輯這段程式碼，只要要求新功能，AI 就會為您更新！)
  2. 建構視覺化介面：AI 會建立您在畫面上看到的網頁，包括頁首、即將進行的跑步活動清單、活動建立表單和留言區。

驗證並執行貼文作業

生成完成後，請在「Preview」窗格測試新應用程式：

  1. 在預覽視窗中，按一下「會員登入」 (或按一下「發布即將進行的跑步活動」按鈕，系統會觸發驗證)。
  2. 使用 Firebase Auth 對話方塊，透過 Google 帳戶進行驗證。
  3. 登入後，導覽列會顯示你的 Google 個人資料名稱和顯示圖片，系統也會自動管理你的配速偏好設定。
  4. 在「Post Upcoming Run」表單中輸入標題 (例如 Morning 5K Shakeout)。
  5. 選取日期和時間，然後輸入會議地點 (例如 Central Park West Entrance)。
  6. 按一下「發布並執行」PublishRun。AI Studio 新應用程式
  7. 確認新跑步活動會立即顯示在即將進行的跑步活動動態消息中，並顯示你已通過驗證的個人資料名稱和配速徽章 (主辦人身分)。AI Studio 新應用程式
  8. 在跑步的討論區發布快速訊息 (例如 Bringing extra water bottles!)，並確認訊息顯示在留言串中。

4. 建立路徑庫

跑步俱樂部通常會重複使用熱門的當地路線。不必重複輸入相同的路線資訊，成員只要將喜愛的路線儲存到目錄中，就能在排定跑步行程時附加路線。

要求 AI 新增路線庫

在對話提示詞輸入框中輸入下列要求，然後按下 Enter 鍵：

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

AI Studio 新應用程式

為此，AI 會自動建立新的「路線」儲存空間資料表，並直接連結至「跑步」資料表。只要主辦人選取路線，應用程式就能透過這項連結自動擷取距離和位置詳細資料。

(再次提醒，您不需要修改這段程式碼，AI 會為您更新資料庫結構！)

在預先發布版中測試新版路線庫

AI 更新應用程式後，請在即時預覽視窗中試用新路線功能：

  1. 在應用程式導覽中，按一下「路線庫」分頁標籤。如果沒有這類分頁，請檢查直播預覽畫面底部，系統可能會要求你按下「儲存」按鈕來重新整理預覽畫面。如果沒有幫助，請嘗試在對話視窗中與 AI 互動，詢問路線庫的位置。
  2. 按一下「儲存新路徑」(或「新增路徑」)，然後填入一些範例詳細資料：
    • 路線名稱：Riverfront Trail Loop
    • 距離：8.5 km
    • 難度：Moderate
    • 起始位置：Waterfront Pier 4
  3. 按一下「儲存至媒體庫」。
  4. 現在，直接點選新路線資訊卡上的「安排跑步」按鈕，即可使用這條路線安排跑步行程。AI Studio 新應用程式
  5. 請注意，系統會自動填入距離、難度和地點詳細資料！
  6. 按一下「發布跑步」，確認新群組跑步活動顯示在首頁動態消息中。

5. 實作回覆邀請和成員邀請

社群應用程式需要參與才能蓬勃發展！跑者可以查看即將舉行的跑步活動，一鍵報名參加，並與好友分享邀請連結。

要求 AI 新增回覆和邀請

在對話提示詞輸入框中輸入下列要求，然後按下 Enter 鍵：

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

AI 如何在幕後追蹤出席者

為追蹤每場跑步活動的參與者，AI 會在資料庫中自動建立 rsvps 表格。這就像是數位登記表，可將跑者的姓名連結至特定賽事。

(您不需要編寫或編輯這段程式碼，AI 會自動管理資料庫中的這份登記表！)

在預覽畫面中測試回覆邀請和邀請

AI 更新應用程式後，請在即時預覽視窗中測試新的回覆功能：

  1. 在預覽視窗中，找到主動態消息中的近期跑步活動。
  2. 按一下「加入跑步」 (或「回覆」) 按鈕。
  3. 確認你的名稱和顯示圖片顯示在「參加跑步者」部分，且出席者計數器增加 1。
  4. 按一下「複製邀請連結」，確認系統已產生共用連結。

AI Studio 新應用程式

6. 測試資料持續性和 Cloud SQL 將資源調度率降至零

建構應用程式時，最重要的是確保社群資訊安全無虞。如果你重新整理瀏覽器、關閉分頁或關機，希望返回時所有已儲存的路線、回覆和討論內容都還在。

在這個步驟中，您將測試資料是否安全地儲存在 Cloud SQL 資料庫中，並瞭解應用程式閒置時，Google Cloud 如何節省能源和成本。

測試重新整理應用程式

  1. 按一下 AI Studio 預覽視窗中的「重新載入」按鈕 (或重新整理瀏覽器分頁)。

AI Studio 新應用程式

  1. 在預覽畫面中查看應用程式：請注意，您建立的所有內容 (會員個人資料、已儲存路線、已排定的跑步行程、回覆和留言) 都在原處！
  2. 應用程式不只是暫時將資訊儲存在螢幕上，而是安全地儲存在 Cloud SQL 資料庫中。

Cloud SQL 如何節省能源和成本 (「將資源調度率降至零」)

如果跑步俱樂部應用程式在半夜無人使用，會發生什麼情況？

  • 自動進入休眠狀態 (「將資源調度率降至零」)：如果沒有人造訪應用程式或註冊跑步活動，資料庫會自動暫停，以節省資源。
  • 即時喚醒：跑者開啟應用程式或點選邀請連結後，資料庫會立即喚醒，並提供所有已儲存的資訊。
  • 閒置時不計費：應用程式閒置時會進入休眠狀態，因此不會耗用運算資源。

7. 發布及部署至 Cloud Run

您已在預覽版中建構及測試跑步俱樂部應用程式，現在可以與社群分享了！您不必購買網站主機或設定伺服器，只要按一下滑鼠，就能在網路上發布應用程式。

在網路上發布應用程式

  1. 在 Google AI Studio 的右上角，按一下「發布」按鈕。
  2. 畫面上會顯示摘要視窗，確認詳細資料：
    • 託管：在 Google Cloud Run 託管及部署。AI Studio 新應用程式
    • 已連線的服務：Google 登入和 Cloud SQL 資料庫。AI Studio 新應用程式
  3. 按一下「發布」即可啟動應用程式。AI Studio 新應用程式

開啟及分享即時應用程式

  1. 發布完成後，Google AI Studio 會提供網頁網址和 QR code。AI Studio 新應用程式
  2. 按一下連結，在新的瀏覽器分頁中開啟即時網頁應用程式，或使用手機相機掃描 QR code。
  3. 在手機上試試看：在手機上登入，回覆您先前在電腦上排定的其中一項跑步活動，並觀看參與者人數即時更新，這一切都是透過共用的 Cloud SQL 資料庫完成！

8. (額外練習) 在 Google Cloud 控制台中檢查資源

Google AI Studio 建構及部署應用程式時，不會將應用程式鎖在私密黑箱中，而是代表您建立可實際用於正式環境的 Google Cloud 服務。Google Cloud 控制台就像控制中心，您可以在這裡查看即時應用程式和資料庫。

步驟 1：開啟 Google Cloud 控制台

  1. 在新瀏覽器分頁中開啟 Google Cloud 控制台。
  2. 按一下畫面頂端的專案下拉式選單，然後選取為 AI Studio 應用程式建立的專案 (名稱通常以 continual-run- 開頭)。

步驟 2：查看網頁應用程式的執行位置 (Cloud Run)

  1. 在頂端搜尋列輸入 Cloud Run，然後從搜尋結果中選取。AI Studio 新應用程式
  2. 按一下應用程式名稱 (例如 running-club)。AI Studio 新應用程式
  3. 您可以在這裡探索網站的代管引擎：
    • 指標：實用圖表，顯示網站訪客人數。
    • 記錄：即時記錄活動，顯示訪客與應用程式互動時發生的情況。

步驟 3：查看資料庫運作情形 (Cloud SQL)

  1. 在頂端的搜尋列輸入 Cloud SQL，然後從搜尋結果中選取。
  2. 按一下 PostgreSQL 資料庫執行個體。AI Studio 新應用程式
  3. 您可以在這裡查看即時資料庫詳細資料，確認資料庫已啟用，並準備好儲存跑步俱樂部的資料。AI Studio 新應用程式

9. 清理資源

如果您是為了練習而建構這個應用程式，可以輕鬆刪除。如果打算繼續使用跑步俱樂部應用程式與社群互動，可以讓應用程式保持執行狀態！

  1. 在 Google AI Studio 中，按一下左側邊欄的「我的應用程式」。
  2. 找到「Running Club」應用程式。
  3. 按一下「刪除應用程式」 (或垃圾桶圖示)。系統會關閉實際網頁，並一併移除測試資料庫。AI Studio 新應用程式

10. 恭喜

您已使用 Google AI Studio 和 Cloud SQL，建構、自訂及發布第一個以資料庫為基礎的網頁應用程式！

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

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

你的成就

  • 以一般日常用語建構應用程式：使用簡單提示建立完整的社群跑步俱樂部應用程式。
  • 啟用 Google 登入：自動設定使用 Google 帳戶的安全登入方式。
  • 連結至實際資料庫：將儲存的路徑、排定的跑步活動、回覆狀態和討論內容安全地儲存在 Cloud SQL 中。
  • 透過對話新增功能：只要與 AI 對話，即可建立路線庫和回覆追蹤功能。
  • 發布至網路：只要按一下，即可將應用程式部署至網際網路，並在各種裝置上測試。
  • 深入瞭解幕後運作方式：瞭解 Google Cloud 如何代管執行中的網頁應用程式和資料庫。

後續步驟

您可以在 Google AI Studio 中繼續與 AI 對話，為應用程式擴充新功能：

  • 互動式地圖：提示 AI 新增地圖預覽畫面和 GPS 路線。
  • 跑步夥伴配對：提示 AI 建議配速目標相近的跑步夥伴。
  • 天氣預報：提示 AI 在即將進行的跑步活動卡片上顯示週末天氣預報。
  • 相片分享：提示 AI 允許跑者在團體跑步後分享相片。

延伸閱讀