Loading...
No results found.

Apply your skills in Google Cloud console

在 Google AI Studio 設計應用程式原型

Lab 25 minutes universal_currency_alt No cost show_chart Introductory
info This lab may incorporate AI tools to support your learning.
This content is not yet optimized for mobile devices.
For the best experience, please visit us on a desktop computer using a link sent by email.

GSP1337

Google Cloud 自學實驗室標誌

簡介

在這個實驗室，您會學習如何在 Google AI Studio 快速設計應用程式原型，包括探索預先建構的 AI 應用程式、瞭解如何依據範本建立自己的應用程式、使用及調整文字提示詞，以及掌握如何管理及共用成果。在這個實驗室，您是參加黑客松的解決方案開發人員，目標是在時限內快速建構並共用多個概念驗證 AI 應用程式。

課程內容

這個實驗室的內容包括：

  • 探索 Google 預先建構的應用程式。
  • 依據範本建構應用程式，並藉助程式碼助理加以修改。
  • 輸入一段文字提示詞，建構資料導向應用程式。
  • 儲存、下載及查看應用程式設計原型。

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

  • 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。
注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。
  • 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。
注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

開啟 Google AI Studio

  1. 點選「Start Lab」。實驗室面板會顯示這個實驗室的臨時憑證。

    • 注意事項：如為付費實驗室，系統會提示您選取付款方式。

  2. 在無痕視窗開啟 Google AI Studio，接著會出現 Google 登入頁面。

    • 提示：在個別視窗開啟實驗室和 AI Studio 分頁再並排查看，操作上會比較方便。

  3. 複製下方的使用者名稱，並貼入「電子郵件地址」欄位，然後點選「下一步」。

    {{{user_0.username | "Username"}}}

  4. 複製下方的密碼，並貼入「輸入密碼」欄位，然後點選「下一步」。

    {{{user_0.password | "Password"}}}

  5. 為繼續操作，請接受畫面中的條款及細則。

您現在已透過臨時學生帳戶登入 Google AI Studio。

工作 1：探索預先建構的應用程式

您是參加黑客松的開發人員，首先要快速掌握情況，看看有哪些可用的構成元素和範例。請先探索預先建構的聊天機器人應用程式。

  1. 在左側導覽選單，點選位於「Build」選項上方的「Enable saving」，然後選取你的使用者名稱。

  2. 點選「Build」。

  3. 依序點選「Gallery」>「All apps」分頁標籤，然後捲動瀏覽預先建構的應用程式範本庫。

  4. 找到並點選「ChatterBots」應用程式。

注意事項：如果畫面顯示「Failed to store recent Application」錯誤訊息，代表您尚未授予 Google 雲端硬碟的存取權。為解決這個問題，請前往左側欄的「History」部分，啟用雲端硬碟存取權。點選「Allow Drive access」之後，隨即會開啟新的彈出式視窗。在彈出式視窗選取學員帳戶 (例如 student-XX-YYYY@qwiklabs.net)，然後授予繼續操作所需的權限。

  1. 點選「Allow」，授予「Microphone」存取權。

  2. 應用程式會在 IDE 檢視畫面開啟。請花一些時間熟悉介面：左側是「Code assistant」，中央是程式碼編輯器/檔案檢視器，右側的「Preview」畫面則可讓您即時預覽聊天機器人的運作情形。

  3. 預覽應用程式、探索 ChatterBot 預設設定，並依據您定義的特性建立 ChatterBot。

  4. 查看生成的程式碼。在程式碼編輯器點選「Show file tree view」按鈕，即可查看程式碼結構。點選 App.tsx 等檔案，可以查看主要應用程式程式碼。點選元件資料夾內的檔案，則能查看特定 UI 元素的建構情形。

ChatterBots 應用程式程式碼

探索預先建構的應用程式

工作 2：依據範本生成應用程式設計原型並加以修改

接下來，您決定為黑客松專案開發簡單的學習卡公用程式。您會依據範本生成應用程式，並藉助程式碼助理快速調整外觀，以配合專案品牌。

生成應用程式

  1. 點選「Back to start」，然後點選畫面左上角的 Google AI Studio 標誌返回首頁。

  2. 在左側導覽選單，依序點選「Build」>「Start」。

  3. 找到並點選「Flash UI」範本，以便生成應用程式。

藉助程式碼助理修改應用程式

  1. 在右側的「Preview」窗格，與預設學習卡互動來觀察運作情形。

  2. 在輸入欄位輸入 Large Language Models，然後點選箭頭，依據特定主題生成一組學習卡。

  3. 接著，請移到畫面左下方的「Code assistant」輸入欄位。輸入下列指令，變更應用程式的樣式和邏輯：

將學習卡背景顏色更改為淡綠色，並調整學習卡邏輯，一次只能翻面一張。
  1. 點選「Send prompt」，觀察助理如何在編輯器修改應用程式程式碼。
注意事項：如有「Remix」按鈕，請依序點選該按鈕和「Apply」並確認操作。

  1. 程式碼更新之後，請在「Preview」窗格測試這兩項變更：確認學習卡為淺綠色，一次只能翻開一張。

  2. 接著新增其他功能。在「Code assistant」輸入欄位，輸入下列新指令：

建立「新增 5 張」的按鈕，多生成 5 張學習卡，確認卡片內容不重複。

  1. 點選「Send prompt」，接著助理會在 UI 新增按鈕，並修改程式碼來加入新的邏輯。

  2. 最後，在「Preview」窗格測試新功能。依序點選新增的「給我驚喜」>「新增 5 張」按鈕，並確認卡組中已新增 5 張不重複的學習卡。

  3. 點選應用程式名稱「Flash UI」旁的鉛筆圖示，將其更名為「Flashcard Maker」，保留預設說明，然後點選「Save」。

點選「Check my progress」，確認目標已達成。

依據範本生成應用程式設計原型並加以修改

工作 3：使用文字提示詞建構應用程式

接著開始黑客松的主要活動：從零開始建構核心功能。您會以簡單的英文說明需求，藉此建構旅遊行程規劃工具，並特別要求模型建立可以清楚顯示結構化資料的 UI。

  1. 返回「Build」頁面的範本庫。

  2. 在頁面頂端的主要文字提示詞列，輸入下列詳細要求：

建立會生成 3 日城市旅遊行程的應用程式，內含城市名稱輸入欄位。輸出內容應為格式簡潔的結構化計畫，列有日期、時間和活動。

  1. 點選「Build」，等待程式碼助理生成完整的應用程式。

  2. 應用程式顯示之後，請在「Preview」窗格測試功能。在城市輸入欄位輸入 Rome，然後按下 ENTER 鍵。

  3. 查看輸出內容。應用程式應會顯示為期 3 天的羅馬結構化行程，展現 AI 成功依據文字提示詞建立了資料導向 UI。

  4. 點選面板頂端應用程式名稱旁的鉛筆圖示，將其更名為「AI Travel Itinerary Generator」，保留預設說明，然後點選「Save」。

  5. (選用) 您可以藉助程式碼助理，修改應用程式的任何部分！

點選「Check my progress」，確認目標已達成。

使用文字提示詞建構應用程式

工作 4：儲存、下載及查看應用程式

旅程規劃工具的設計原型可以順利運作！黑客松的最後一個步驟是下載進度，並與團隊共用專案。

應用程式會儲存至「Build」頁面中的「Your apps」專區。

  1. 點選同一個工具列中的「下載」圖示，含有應用程式完整原始碼的 ZIP 檔案會下載至您的電腦。

    • 注意事項：您可以在本機使用自己的編輯器，以這段程式碼繼續進行開發工作。

  2. 瞭解如何發布應用程式。點選同一個工具列中的「Deploy App」按鈕。

    • 注意事項：在這個實驗室，這個步驟不會示範完整的部署程序，而是說明在 Google Cloud 發布應用程式的整合式做法。

查看應用程式設計原型

  1. 前往首頁，點選左上角的 Google AI Studio 標誌。

  2. 點選左側導覽選單中的「Build」。

  3. 依序點選「Your apps」>「Created by you」分頁標籤，查看您修改及建構的設計原型。您應該會看見 Flashcard Maker 和 AI Travel Itinerary Generator 這兩個應用程式。

應用程式設計原型檢視畫面

恭喜！

恭喜！您已成功使用 Google AI Studio，從零開始快速探索、調整及建立可以運作的應用程式設計原型。您學會如何運用預先建構的範本、以自然語言修改程式碼，以及使用一段文字提示詞生成完整的資料導向應用程式。您已具備相應知識，可將自己的 AI 構想化為現實。

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2026 年 3 月 12 日

實驗室上次測試日期：2026 年 3 月 12 日

Copyright 2026 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。

Before you begin

  1. Labs create a Google Cloud project and resources for a fixed time
  2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
  3. On the top left of your screen, click Start lab to begin

Use private browsing

  1. Copy the provided Username and Password for the lab
  2. Click Open console in private mode

Sign in to the Console

  1. Sign in using your lab credentials. Using other credentials might cause errors or incur charges.
  2. Accept the terms, and skip the recovery resource page
  3. Don't click End lab unless you've finished the lab or want to restart it, as it will clear your work and remove the project

This content is not currently available

We will notify you via email when it becomes available

Great!

We will contact you via email if it becomes available

One lab at a time

Confirm to end all existing labs and start this one

Use private browsing to run the lab

Using an Incognito or private browser window is the best way to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.