運用 AI 推出作品集網站

1. 簡介

總覽

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

在本程式碼研究室中，您將建構個人作品集網站。AI Studio 代理程式會編寫前端程式碼。應用程式完成後，只要按一下滑鼠，就能直接部署至 Cloud Run。

學習內容

  • 提示 Google AI Studio 設計個人作品集網站原型。
  • 在互動式預覽沙箱中測試應用程式。
  • 直接從 Google AI Studio UI 將應用程式部署至 Cloud Run。

課程內容

  • 瞭解如何使用 Google AI Studio 的建構模式，透過自然語言快速設計前端服務原型。
  • 瞭解如何將 AI Studio 應用程式以無伺服器容器的形式部署至 Cloud Run。

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 professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
  3. 按一下「建構」，開始產生應用程式。

4. 測試及疊代

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

  1. 在 Google AI Studio 中開啟預覽窗格。
  2. 在預覽沙箱中與任何導覽按鈕、連結或版面配置互動，驗證視覺體驗。
    • 修正錯誤注意事項：在生成或測試期間，您有時可能會遇到執行階段問題或編譯錯誤。如果發生這種情況，AI Studio 會在對話中顯示「修正」按鈕，讓您要求代理程式自動診斷及修復問題。
    Google AI Studio 修正按鈕位置
  3. 如要變更樣式或行為，請透過即時通訊視窗指示代理程式。例如：
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Include a new section to showcase my recent presentations and talks."
  4. 等待代理程式更新程式碼集，並在預覽瀏覽器中查看更新。

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. 部署完成後，請複製產生的「應用程式網址」，並在瀏覽器分頁中前往即時應用程式連結。
  7. 在瀏覽器中測試即時網頁應用程式！

6. (選用) 新增自訂網域

根據預設，Cloud Run 會在 Google 管理的 run.app 子網域上代管服務。如要使用個人網域 (例如 yourname.com 或 portfolio.yourname.com)，您可以將自訂網域對應至服務。

步驟 1：在 Cloud Run 中新增網域對應

  1. 前往 Google Cloud 控制台的「Cloud Run Domain Mappings」(Cloud Run 網域對應) 頁面。
  2. 按一下「新增對應」。
  3. 從下拉式選單中選擇要對應的 Cloud Run 服務。
  4. 輸入自訂網域名稱 (例如 yourname.com 或 portfolio.yourname.com)。
  5. 按一下「下一步」或「繼續」。Cloud Run 會顯示您必須使用網域註冊商建立的 DNS 記錄 (例如 A/AAAA 或 CNAME 記錄)。

步驟 2：設定 DNS 註冊機構

  1. 登入網域註冊商的管理面板 (例如 Squarespace、GoDaddy 或 Namecheap)。
  2. 開啟網域的 DNS 管理或 DNS 設定設定頁面。
  3. 建立與 Cloud Run 對應精靈中顯示值相符的 DNS 記錄：
    • 如要對應頂層網域 (例如 yourname.com)，請新增列出的 A 和 AAAA 記錄。
    • 如果是子網域對應 (例如 portfolio.yourname.com)，請新增列出的 CNAME 記錄。
  4. 儲存 DNS 設定變更。

步驟 3：等待系統佈建 SSL 憑證

DNS 變更生效後：

  1. Google Cloud 會自動佈建代管型 SSL/TLS 憑證，確保連線安全。
  2. 這項程序通常會在 15 分鐘內完成，但視 DNS 傳播情況而定，最久可能需要 24 小時。
  3. 完成後，自訂網域就會安全地轉送至作品集網站。

7. 清除

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

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

8. 結語

恭喜！您已直接透過 Google AI Studio 設計、開發及部署作品集網站。

瞭解詳情

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

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