GSP643

總覽

莉莉在 12 年前創立了連鎖獸醫診所 Pet Theory。過去幾年來，Pet Theory 的連鎖體系發展得十分迅速。原先的預約系統無法因應日益增加的需求，也不支援顧客自行預約看診時間，因此莉莉找來 IT 部門的阿克和顧問小茹，請他們建構一套能輕鬆擴充的雲端系統。在本實驗室，您將建構完善的 Firebase 網頁應用程式，方便使用者即時記錄資訊和預約看診時間。

架構

下圖列出了您將使用的服務，以及這些服務間的關係：

目標

本實驗室的學習內容包括：

• 設定 Firestore 安全防護機制，自動處理伺服器端的驗證與授權程序。
• 為網頁應用程式新增 Google 登入功能。
• 設定資料庫，讓使用者能新增聯絡資訊。
• 瀏覽及部署程式碼，讓使用者能預約看診時間。
• 在網頁應用程式體驗 Firebase 的即時更新機制。

事前準備

本實驗室的難度為中級，假設您熟悉 Cloud 控制台和殼層環境。用過 Firebase 會有幫助，但沒有也無妨。操作本實驗室前，建議您先完成下列實驗室：

• 將資料匯入 Firestore 資料庫

另外，您也須熟悉檔案的編輯方式。您可以使用慣用的文字編輯器 (例如 nano、vi 等)，或是從 Cloud Shell 頂端的工具列啟動程式碼編輯器：

準備完成後，請向下捲動頁面，按照步驟設定實驗室環境。

Firebase 後端

小茹傳送電子郵件給阿克：

軟體顧問小茹	阿克你好： 上週辛苦了，很高興看到診所的資料都順利遷移到 Firestore！ 下一步應該就是使用 Firebase 託管 Pet Theory 網站。 小茹
IT 管理員阿克	小茹你好： 我沒有聽過 Firebase 託管，這項功能有什麼優點嗎？我該從哪裡著手才好？ 阿克
軟體顧問小茹	阿克你好： Firebase 託管的主要優點在於採用無伺服器架構，因此無須管理基礎架構，而且安全性規則也會內嵌在應用程式中，方便限制權限，盡可能減少處理顧客資料時產生的問題。 此外，Firebase 採「即付即用」的計費模式，是相當符合我們需求的全方位行動開發平台。 小茹
IT 管理員阿克	小茹你好： 聽起來 Firebase 可大幅簡化安全性和基礎架構管理作業，這剛好占了我工作很大一部分。我也很高興不必為閒置伺服器付費了！ 阿克

小茹先傳送郵件給阿克說明背景資訊，接著他們開會討論，歸納出幾項重要任務。根據會議結果，阿克需要執行下列工作：

• 設定 Firebase 專案。
• 建立安全性政策。
• 將 Firestore CLI 新增至 Google Cloud 專案。

接下來，請協助阿克完成這些工作。

工作 1：註冊 Firebase 應用程式

請開啟無痕視窗，前往 Firebase 控制台。

當系統要求時，輸入下列資訊：

• 使用者名稱：
• 密碼：

注意：本實驗室已預先佈建標示為 的 Firebase 專案。選取該專案即可存取控制台。

1. 如果出現提示訊息，請接受《Firebase 條款及細則》，然後點選「繼續」。

2. 在「專案總覽」頁面，依序點選「+ 新增應用程式」>「網頁」圖示。

3. 系統提示您填寫「應用程式暱稱」時，請輸入 Pet Theory。

4. 勾選「一併為這個應用程式設定 Firebase 託管」旁的方塊。

5. 在網站的下拉式選單中選取「建立新網站」，或是確認網站與專案 ID (或「Lab details」列出的資料) 相符。

6. 點選「註冊應用程式」按鈕。

7. 在後續步驟 (「新增 Firebase SDK」、「安裝 Firebase CLI」和「部署至 Firebase 託管」)，點選「下一步」或「前往控制台」，返回主要的資訊主頁。

現在您已設定好 Firebase 應用程式。

檢查工作是否已完成

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

註冊 Firebase 應用程式

工作 2：啟用 Firebase 產品

Firebase 驗證

請在 Firebase 控制台設定 Firebase 驗證功能，讓使用者能使用 Google 帳戶登入。

1. 點選左側導覽選單中的「驗證」 (如未置頂，請在「專案捷徑」或「產品類別」>「安全性」部分尋找)。

2. 如果是第一次使用，請點選「開始使用」。

3. 在「登入方式」分頁，從供應商清單中選取「Google」。

4. 在設定對話方塊，點選「啟用」切換鈕。

5. 從下拉式選單中選取支援電子郵件地址，然後點選「儲存」。

6. 點選「驗證」頁面頂端的「設定」分頁標籤，新增授權用的自訂網域。

7. 在設定窗格的左選單選取「授權網域」。

8. 點選「新增網域」按鈕。

9. 輸入下列網域 (可視需要將 project-id 換成您的專案 ID)：

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. 點選「新增」按鈕。

檢查工作是否已完成

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

設定 Firebase 驗證

Firebase Firestore

接著，請設定 Firestore 資料庫。

1. 在左側導覽選單的「資料庫和儲存空間」部分，點選「Firestore」。

2. 在 Cloud Firestore 到達網頁，點選「建立資料庫」按鈕。

3. 在「步驟 1：選取版本」，選擇「Standard 版」，然後點選「下一步」。

4. 在「步驟 2：資料庫 ID 和位置」，選取適當位置 (例如 nam5 或接受預設值)，然後點選「下一步」。

5. 在「步驟 3：設定」，選取「以測試模式啟動」，然後點選「建立」。

6. 資料庫佈建完成後，點選「規則」分頁標籤。

7. 將安全性規則換成下列內容，允許通過驗證的使用者讀取/寫入自己的資料：

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

接著點選「發布」，即可將變更部署至 Firebase。

您已設定好 Firebase 驗證和 Firestore，目前後端設定全部完成。

Firebase Localhost

您已協助阿克設定可正常運作的 Firebase 託管環境，供網頁程式開發人員部署程式碼。

不過，阿克從未啟用過 Firebase 驗證，也沒有將程式碼部署至 Firebase 的經驗，因此他傳送郵件向小茹求助...

IT 管理員阿克	小茹你好： 謝謝你的指點！Firebase 環境看來都設定好了。接下來，我要部署網站開發人員寫好的程式碼。 可以請你說明這具體涉及哪些工作，以及我下一步應該做什麼嗎？ 阿克
顧問小茹	阿克你好： 太好了！我會傳送相關說明，協助你執行應用程式並新增下列功能： 設定網站的登入驗證機制。 讓顧客可在個人資料頁面記錄相關詳細資料。 建立預約看診的自助式服務入口網站。 小茹
開發運作工程師阿克	小茹你好： 聽起來要花不少工夫。 這樣我每次想新增功能，都得調整架構嗎？更別提等這些更新生效還要花多少時間了... 阿克
顧問小茹	阿克你好： 別擔心，大部分的繁重工作都能交給 Firebase 程式庫處理。 Firebase 提供出色的指令列工具，你可以輕鬆將 localhost 連線至後端 Firebase 專案。 請先執行「firebase init」指令，向 Firebase 指定你要使用的產品。 等專案設定完成後，只要在指令列呼叫「firebase deploy」就行了。 小茹
IT 管理員阿克	小茹你好： 哇，那我就放心了！Firebase 託管真是越聽越好用 :-) 阿克

工作 3：複製存放區並安裝依附元件

在這項工作，您將使用 Cloud Shell 和 Cloud Shell 編輯器，複製應用程式程式碼並安裝必要的 Node.js 套件。

1. 在原先操作 Firebase 控制台的同一個無痕視窗，開啟新分頁並前往 Google Cloud 控制台，然後在系統提示時接受《服務條款》。

2. 在 Google Cloud 控制台工具列，點選「啟用 Cloud Shell」。

3. 在 Cloud Shell 終端機執行下列指令，從 Cloud Storage bucket 複製實驗室檔案：

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. 點選 Cloud Shell 工具列中的「開啟編輯器」按鈕，查看及編輯程式碼。

5. 在 Cloud Shell 編輯器的檔案總管，前往 pet-theory/lab02 資料夾。

6. 在 Cloud Shell 編輯器開啟終端機 (或使用現有的 Cloud Shell 終端機)，然後切換至 lab02 目錄：

   cd pet-theory/lab02

7. 執行下列指令，安裝 Node.js 套件：

   npm install 注意：Cloud Shell 環境已預先安裝 Node.js 和 npm。

您現在可以將應用程式連結至後端 Firebase 專案了。

工作 4：授權存取 Firebase

請在 IDE 連線至 Firebase，並部署應用程式。

1. 輸入下列指令，授權存取 Firebase 專案：

   firebase login --no-localhost

   注意：

   Firebase 會嘗試授權本機環境連線至 Firebase 專案。因此，請務必在無痕視窗執行瀏覽器活動，確保使用合適的憑證完成這項操作。

2. 輸入 Y，在 Firebase 啟用 Gemini 功能。

3. 如果系統詢問 Firebase 是否能收集錯誤回報資訊，請輸入 Y 並按下 Enter 鍵。

4. 點選產生的網址，在同一個無痕視窗開啟另一個分頁。

5. 選取您的實驗室帳戶，然後點選「允許」。

6. 點選「Yes, I just ran this command」繼續操作。

7. 點選「Yes, this is my session ID」，確認工作階段 ID。

8. 複製產生的存取碼，貼到 Cloud Shell 的「Enter authorization code:」提示詞中，然後按下 Enter 鍵。

輸出內容大致如下：

輸出內容範例：

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net

注意：

目前 localhost 已連結至後端 Firebase 專案。

Firebase 已連線並完成授權，下一步是初始化要使用的 Firebase 產品。

工作 5：初始化 Firebase 產品

請在 IDE 向 Firebase 指定所需的產品。

1. 在目前的工作目錄，啟動新的 Firebase 專案：

   firebase init

   注意：

   執行這個指令後，系統將逐步引導您設定專案目錄和 Firebase 產品。請選取要在這個資料夾設定的 Firebase CLI 功能。使用方向鍵可在選單上下移動，按下空格鍵則可選取產品選項。

2. 選取下列產品：

   • Firestore
   • Hosting

3. 使用方向鍵和空格鍵選取「Firestore」和「Hosting」，確認殼層畫面與下列內容相符後，按下 Enter 鍵：

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. 完成剩餘步驟來設定 Firebase：

   • 使用向下鍵選取「Use an existing project」，然後按下 Enter 鍵。
   • 從清單中選取專案 ID ，然後按下 Enter 鍵。
   • 依序按下 N 和 Enter 鍵，保留 firestore.rules 檔案。
   • 依序按下 N 和 Enter 鍵，保留 firestore.indexes.json 檔案。
   • 按下 Enter 鍵保留公開目錄。
   • 按下 N 禁止重寫 index.html 檔案，然後按下 Enter 鍵。
   • 系統詢問是否設為透過 GitHub 自動建構及部署時，依序按下 N 和 Enter 鍵。
   • 系統提示覆寫 404.html 檔案時，按下 N。
   • 系統提示覆寫 index.html 檔案時，按下 N。
   • 系統詢問是否要安裝 Firebase 適用的代理技能時，依序按下 Y 和 Enter 鍵。

   輸出內容範例：

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

本機設定現已完成。

工作 6：部署至 Firebase

請繼續在 Cloud Shell 執行這個步驟，並確認您位於程式碼編輯器的 pet-theory/lab02 資料夾。

1. 編輯 firebase.json，並在 hosting 區段新增 site 索引鍵：

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. 開啟終端機，使用網站 ID 值部署 Firebase 應用程式，例如：

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   輸出內容：

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. 點選產生的託管網址 (應類似 .web.app)，在新的無痕分頁開啟該網址：

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   重要事項：

   請勿在本實驗室使用個人憑證進行驗證，務必使用帳戶 登入 Google。

4. 點選「使用 Google 帳戶登入」按鈕：

   注意：

   如果出現「browser is not supported or 3rd party cookies and data may be disabled」錯誤訊息，請確定您已在瀏覽器啟用 Cookie。

   

   在 Chrome，點選網址分頁最右側的眼睛圖示，再選取彈出式視窗中的藍色連結。請點選「網站無法正常運作嗎？」連結來更新瀏覽器設定，改成接受 Cookie。

5. 使用實驗室提供的使用者名稱 登入，下列頁面隨即開啟：

   

   像 Pet Theory 這樣的小公司沒有足夠的資源，員工也不具備處理這項工作所需的技能。 這種情況下，讓應用程式使用者以既有的 Google 帳戶 (或其他識別資訊提供者) 登入會很有幫助！

   注意：

   管理密碼十分困難，並有可能讓公司面臨更多風險，使用者也不會想再多設定一組 ID 和密碼。

您已順利部署程式碼，現在使用者能透過 Google 驗證功能存取預約應用程式。

工作 7：為網頁應用程式新增顧客頁面

請返回終端機，使用編輯器查看 public 資料夾中的檔案。

1. 開啟 public/customer.js 檔案，然後複製及貼上下列程式碼：

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. 開啟 public/styles.css 檔案，然後貼上下列程式碼：

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. 在終端機指令列執行下列指令：

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   輸出內容：

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. 前往應用程式分頁，然後使用 CMD + SHIFT +R 鍵 (Mac) 或 CTRL + SHIFT + R 鍵 (Windows)，強制重新整理頁面。單純重新整理頁面並不會顯示所需的更新內容。

   

5. 輸入一些顧客資訊 (虛構的姓名和電話號碼)：

   顧客姓名：

   John

   顧客電話：

   98473757454

6. 點選「Save profile」。

7. 返回 Firebase 控制台。

8. 依序點選「建構」>「Firestore Database」，查看儲存的個人資料：

   

9. 返回網頁應用程式頁面，點選「Appointments」連結。目前尚未部署預約功能的程式碼，因此您會看見空白頁面。

檢查工作是否已完成

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

為網頁應用程式新增顧客頁面

很棒吧！

Firestore 會即時更新用戶端 (網頁應用程式和原生行動應用程式)，使用者不必自行重新整理或重新載入。

恭喜！

在本實驗室，您使用 Firebase 建立了完善的無伺服器網頁應用程式。建立並設定 Firebase 專案後，您新增了 Firestore 安全防護機制，自動處理伺服器端的驗證和授權程序。接著，您為網頁應用程式加入 Google 登入功能，還設定了資料庫，讓使用者能新增聯絡資訊及預約看診。最後，您探索並部署預約功能的程式碼，還在網頁應用程式體驗 Firebase 的即時更新機制。您已經準備好參加本學習路徑的其他實驗室了！

後續步驟/瞭解詳情

• Google Cloud：什麼是無伺服器？

Google Cloud 教育訓練與認證

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

使用手冊上次更新日期：2026 年 5 月 31 日

實驗室上次測試日期：2026 年 5 月 31 日

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