開始使用 Firebase Studio

1. 總覽

在本程式碼研究室中，您將練習使用 Firebase Studio 的應用程式原型設計代理，建立有助於學習新語言的應用程式。接著，您可以改善應用程式，並視需要發布至 Firebase App Hosting。

語言學習應用程式的 GIF 動畫

課程內容

  • 在 Firebase Studio 撰寫提示的最佳做法
  • 反覆運算應用程式，新增功能及修正錯誤
  • 將應用程式發布至 Firebase App Hosting，並與他人共用
  • 透過 App Hosting 應用程式總覽面板追蹤重要指標

事前準備

  • 你選擇的瀏覽器，例如 Google Chrome
  • 用於建立及管理 Firebase 專案的 Google 帳戶

2. 使用應用程式原型設計代理生成應用程式

App Prototyping 代理程式會使用 Gemini in Firebase 建構應用程式。即使使用相同的提示，結果也可能與本程式碼研究室中的結果不完全相同。如果您遇到困難，我們提供了一組檔案，可新增至工作區，以便在整個程式碼研究室的幾個檢查點繼續進行實驗室。

  1. 登入 Google 帳戶並開啟 Firebase Studio。
  2. 在「Prototype an app with AI」(使用 AI 製作應用程式原型) 欄位中，輸入要建構的應用程式說明。在本程式碼研究室中，您將建構一個應用程式，透過故事、字卡和 AI 導師學習新語言。輸入提示，例如：
    An app to help someone learn a new language. The app should include
AI-generated stories in the target language, where users can click vocab
words or the entire story to see it in English. A different section
includes flashcards, where the user is shown a word in the chosen language
and can click it to flip the card and see the word in English. The final
section includes an AI chatbot that allows the user to have simple
conversations in the chosen language or ask questions in English about
what a word means or how to form a sentence in the chosen language. All
content should be beginner-friendly, focusing on basic greetings, common
questions/answers, and vocabulary relevant to the lessons or stories.
To start, the app should teach the user French, although we might add
additional languages in the future.
  3. 按一下「運用 AI 設計原型」。
  4. 查看建議的應用程式藍圖。按一下「自訂」自訂圖示即可編輯藍圖：
    1. 將應用程式名稱變更為「Speak Easy」。
    2. 將色彩配置變更為下列項目：
    Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
Secondary color: Light parchment (#F5EBCD) to complement the primary color.
Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
    如要以圖片形式提交配色或版面配置，請在提示或藍圖程序中點按「附件」附件圖示選項，上傳圖片。圖片不得大於 3 MiB。
  5. 按一下 [儲存]。
  6. 藍圖完成更新後，請按一下「設計這個應用程式的原型」。應用程式藍圖
  7. 由於這個應用程式包含 AI 元素，因此代理程式會提示您輸入 Gemini 金鑰。新增自己的 Gemini API 金鑰，或按一下「自動產生」產生 Gemini API 金鑰。按一下「自動產生」，Firebase Studio 就會建立 Firebase 專案，並為您產生 Gemini API 金鑰。
  8. App Prototyping 代理程式會使用 App Blueprint 建立應用程式的第一個版本。完成後，應用程式的預覽畫面會與 Gemini 即時通訊介面一起顯示。請花點時間測試應用程式。即使應用程式的外觀與您想像的不盡相同，下一節也會說明如何新增功能及調整設計。應用程式初始原型的 GIF 動畫

3. (選用) 取得程式碼

如果您遇到困難，或想更密切地跟著範例應用程式操作，請使用程式碼研究室中多個檢查點提供的範例檔案。

  1. 下載資料夾中的檔案。
  2. 在 Firebase Studio 中，按一下「切換至程式碼」程式碼檢視圖示，開啟程式碼檢視畫面。
  3. 將下載的檔案拖曳至 Firebase Studio 的 Explorer 窗格。允許檔案取代現有檔案。
  4. 按一下「Switch to Prototyper」(切換至 Prototyper)，繼續進行程式碼實驗室，並使用應用程式的範例版本。

4. 測試、疊代及偵錯應用程式功能

預覽應用程式時，您可能會發現錯誤或非預期功能。在應用程式的範例版本中，我們會新增下列變更和修正：

  • 在 AI 故事生成器中，使用者應可點選詞彙，查看英文定義。
  • 字卡應以法文顯示，點選後切換為英文。
  • 使用者應該可以前往設定頁面，將學習語言從法文切換為日文。

目標 1：在 AI 故事生成器中加入詞彙

選用步驟：如要從這個時間點開始使用應用程式的範例版本，請下載並將這些檔案拖曳到 Firebase Studio 的「程式碼」檢視畫面中的「Explorer」窗格。

  1. 在即時通訊介面中，描述要新增的功能：
    In the AI Story Generator, users should be able to click vocab words or
phrases to get the definition in English. Words or phrases should be
underlined to indicate they can be clicked.
  2. 在預覽視窗中測試應用程式。您稍後會更新應用程式的外觀和風格，因此請先專注於功能。
  3. 如果應用程式無法正常運作，請繼續提示 App Prototyping 代理程式進行調整。例如：
    IMPORTANT: Be sure to underline and provide a definition for most words
and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
story appears multiple times, only underline and define the first instance.
  4. 按一下「切換至程式碼」程式碼檢視圖示開啟程式碼檢視畫面，即可查看應用程式的所有檔案，並直接修改程式碼。如果 Gemini 無法解決錯誤，手動編輯檔案有時會比較簡單。準備就緒後，請切換至 Prototyper 模式，繼續使用 App Prototyping 代理程式。

AI 故事生成器以法文生成故事的 GIF 動畫，並將字詞加上底線

目標 2：為記憶卡新增翻譯

選用步驟：如要從這個時間點開始使用應用程式的範例版本，請下載並將這些檔案拖曳到 Firebase Studio 的「程式碼」檢視畫面中的「Explorer」窗格。

按照上述相同程序，使用對話介面描述功能，在預覽視窗中測試，然後使用其他提示或「程式碼」檢視畫面，將翻譯內容新增至記憶卡。請嘗試輸入以下提示：

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

有時，App Prototyping 代理程式無法辨識錯誤。描述你看到的問題和需要修正的內容，例如：

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

GIF 動畫：學習卡在法文和英文之間切換

目標 3：新增語言

選用步驟：如要從這個時間點開始使用應用程式的範例版本，請下載並將這些檔案拖曳到 Firebase Studio 的「程式碼」檢視畫面中的「Explorer」窗格。

請嘗試輸入以下提示：

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

GIF 動畫：將應用程式語言切換為日文

5. 反覆疊代並改進應用程式設計

選用步驟：如要從這個時間點開始使用應用程式的範例版本，請下載並將這些檔案拖曳到 Firebase Studio 的「程式碼」檢視畫面中的「Explorer」窗格。

現在應用程式已具備所需的所有功能，接下來要處理樣式。

變更應用程式的色彩配置

您可以指定要使用的顏色，也可以讓 App Prototyping 代理程式主導。在對話介面中，你也可以按一下「附件」附件圖示選項，上傳要使用的顏色或樣式圖片。如要使用提示，請嘗試：

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

更新應用程式中使用的文字

舉例來說，你可能希望系統只說「聊天」，而不是「AI Chatbot Tutor」：

 Change the text "AI Chatbot Tutor" to "Chat".

調整應用程式的 UI，使其更直覺易用

舉例來說，您可能希望使用者按下鍵盤上的 Return 即可提交文字，而不必按下按鈕：

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

新增選項，讓使用者選擇淺色或深色模式

許多使用者可能會希望選擇應用程式的淺色或深色主題。請考慮在下列位置提供切換選項：

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

提示和偵錯提示

  • 取得提示相關協助：如果難以向 App Prototyping 代理程式說明需求，不妨請 Gemini for Google 協助修正提示。進一步瞭解如何有效提示。
  • 在其他裝置上測試：在「原型」模式中，按一下「分享預覽連結」「連結」圖示，即可在其他裝置上測試應用程式。
  • 使用內建工具：在「程式碼」檢視畫面中，使用 Firebase Studio 的內建偵錯和報表功能檢查、偵錯及稽核應用程式。
  • 從簡單的開始：一次處理一項功能。建議先在原型中加入基本功能，確認運作正常後再擴充。
  • 描述錯誤：如果某個功能無法正常運作，請向應用程式原型製作代理程式說明目前行為，然後說明您想要的行為。
  • 視需要還原：如果 App Prototyping 代理程式誤解提示，或導致難以解決的問題，請按一下「還原」按鈕，將應用程式還原至先前的版本，然後使用其他提示重試。

6. (選用) 發布應用程式

選用步驟：如要從這個時間點開始使用應用程式的範例版本，請下載並將這些檔案拖曳到 Firebase Studio 的「程式碼」檢視畫面中的「Explorer」窗格。

測試應用程式並確認沒問題後，即可使用 Firebase App Hosting 將應用程式發布至網頁。

  1. 按一下「發布」，建立新的 Firebase 專案，並開始設定 App Hosting。系統會顯示「發布應用程式」窗格。
  2. 在「Firebase 專案」步驟中，記下為您建立的 Firebase 專案名稱，然後按一下「下一步」。
  3. 在「連結 Cloud Billing 帳戶」步驟中，選擇下列其中一個選項：
    1. 選取要連結至 Firebase 專案的 Cloud Billing 帳戶。
    2. 如果沒有 Cloud Billing 帳戶，或想建立新帳戶，請按一下「建立 Cloud Billing 帳戶」。系統會開啟 Google Cloud 文字，您可以在其中建立新的自助式 Cloud Billing 帳戶。建立帳戶後，請返回 Firebase Studio，然後從「連結 Cloud 帳單」清單中選取該帳戶。
  4. 點選「繼續」，Firebase Studio 會將帳單帳戶連結至與工作區相關聯的專案，這個專案是在您自動產生 Gemini API 金鑰或點選「發布」時建立。接著，應用程式託管功能會在 Google Cloud 中為您的應用程式設定全代管環境。
  5. 按一下「建立首次推出」。Firebase Studio 會啟動 App Hosting 推出程序。這項作業最多可能需要十分鐘才能完成。如要進一步瞭解幕後運作情形，請參閱「App Hosting 建構程序」。
  6. 推出作業完成後，系統會顯示「應用程式總覽」，其中包含網址和應用程式洞察資料，這些資料是由 App Hosting 可觀測性功能提供。如要使用自訂網域 (例如 example.com 或 app.example.com) 取代 Firebase 產生的網域，可以在 Firebase 文字中新增自訂網域。

如要進一步瞭解 App Hosting，請參閱「瞭解 App Hosting 和運作方式」。

7. (選用) 監控應用程式

應用程式代管服務的「應用程式總覽」面板會提供應用程式的重要指標和資訊，讓您使用應用程式代管服務的內建可觀測性工具，監控網頁應用程式的效能。網站推出後，按一下「發布」即可存取總覽。您可以從這個面板執行以下操作：

  • 按一下「建立推出版本」，即可發布新版應用程式。
  • 分享應用程式連結，或直接在「前往應用程式」中開啟應用程式。
  • 查看應用程式過去 7 天的成效摘要，包括請求總數和最新推出版本的狀態。按一下「查看詳細資料」，即可在 Firebase 文字中查看更多資訊。
  • 查看應用程式在過去 24 小時內收到的要求數量圖表，並依 HTTP 狀態碼細分。

如果關閉「應用程式總覽」面板，隨時可以點選「發布」重新開啟。

如要進一步瞭解如何管理及監控 App Hosting 推出作業，請參閱「管理推出作業和版本」。

8. 結論

恭喜！您已使用 Firebase Studio 成功建立應用程式。您還可以在應用程式中加入更多內容，例如擴充字典、更多語言、音訊、動畫或難度選項。您可以繼續使用應用程式，或建立新內容。

瞭解詳情：