GSP1337

簡介

在這個實驗室，您會學習如何在 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)，然後授予繼續操作所需的權限。

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

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

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

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

探索預先建構的應用程式

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

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

生成應用程式

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

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

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

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

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

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

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

將學習卡背景顏色更改為淡綠色，並調整學習卡邏輯，一次只能翻面一張。

4. 點選「Send prompt」，觀察助理如何在編輯器修改應用程式程式碼。

注意事項：如有「Remix」按鈕，請依序點選該按鈕和「Apply」並確認操作。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

點選「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 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。