AngularFire 網頁程式碼研究室

1. 總覽

在本程式碼研究室中，您將瞭解如何使用 AngularFire 建立網頁應用程式，方法是使用 Firebase 產品和服務實作及部署即時通訊用戶端。

課程內容

• 使用 Angular 和 Firebase 建構網頁應用程式。
• 使用 Cloud Firestore 和 Cloud Storage for Firebase 同步處理資料。
• 使用 Firebase 驗證服務驗證使用者。
• 在 Firebase App Hosting 上部署網頁應用程式。
• 使用 Firebase 雲端通訊傳送通知。
• 收集網頁應用程式的成效資料。

事前準備

• GitHub 帳戶
• 將 Firebase 專案升級至 Blaze 定價方案
• 您選擇的 IDE/文字編輯器，例如 WebStorm、Sublime 或 VS Code
• 套件管理工具 npm，通常會隨附於 Node.js
• 終端機/控制台
• 你選擇的瀏覽器，例如 Chrome
• 程式碼研究室的程式碼範例 (請參閱程式碼研究室的下一個步驟，瞭解如何取得程式碼)。

2. 取得程式碼範例

建立 GitHub 存放區

您可以在 https://github.com/firebase/codelab-friendlychat-web 找到本程式碼研究室的原始碼。這個存放區包含多個平台的範例專案。不過，本程式碼研究室只會使用 angularfire-start 目錄。

將 angularfire-start 資料夾複製到自己的存放區：

1. 使用終端機在電腦上建立新資料夾，然後切換到新目錄：

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. 使用 giget npm 套件，只擷取 angularfire-start 資料夾：

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. 使用 Git 在本機追蹤變更：

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. 建立新的 GitHub 存放區：https://github.com/new。命名方式不限。
   1. GitHub 會提供新的存放區網址，看起來像是 https://github.com/[user-name]/[repository-name].git 或 git@github.com:[user-name]/[repository-name].git。複製這個網址。
5. 將本機變更推送至新的 GitHub 存放區。執行下列指令，並將 your-repository-url 預留位置替換為存放區網址。

   git remote add origin your-repository-url
   
   git push -u origin main
   

6. 現在 GitHub 存放區中應該會顯示範例程式碼。

3. 建立及設定 Firebase 專案

建立 Firebase 專案

1. 使用 Google 帳戶登入 Firebase 控制台。
2. 按一下按鈕建立新專案，然後輸入專案名稱 (例如 FriendlyChat)。
   
3. 按一下「繼續」。
4. 如果系統提示，請詳閱並接受 Firebase 條款，然後按一下「繼續」。
5. (選用) 在 Firebase 控制台中啟用 AI 輔助功能 (稱為「Gemini in Firebase」)。
6. 本程式碼研究室不需要 Google Analytics，因此請關閉 Google Analytics 選項。
7. 按一下「建立專案」，等待專案佈建完成，然後按一下「繼續」。

升級 Firebase 定價方案

如要使用 Firebase App Hosting 和 Cloud Storage for Firebase，Firebase 專案必須採用即付即用 (Blaze) 定價方案，也就是連結至 Cloud Billing 帳戶。

• Cloud Billing 帳戶需要付款方式，例如信用卡。
• 如果您剛開始使用 Firebase 和 Google Cloud，請確認是否符合 $300 美元抵免額和免費試用 Cloud Billing 帳戶的資格。
• 如果您是在活動中進行這項程式碼研究室，請詢問主辦單位是否有可用的 Cloud 抵免額。

如要將專案升級至 Blaze 方案，請按照下列步驟操作：

1. 在 Firebase 控制台中，選取「升級方案」。
2. 選取 Blaze 方案。按照畫面上的指示，將 Cloud Billing 帳戶連結至專案。
   如果你在升級過程中需要建立 Cloud Billing 帳戶，可能需要返回 Firebase 控制台的升級流程，才能完成升級。

將 Firebase 網頁應用程式新增至專案

1. 按一下網頁圖示 ，建立新的 Firebase 網頁應用程式。
2. 使用「Friendly Chat」這個暱稱註冊應用程式。請勿勾選「一併為此應用程式設定 Firebase 託管」旁的方塊，然後按一下「註冊應用程式」。
3. 在下一個步驟中，您會看到設定物件。你目前不需要這項功能。按一下 [Continue to console] (前往主控台)。

設定 Firebase 產品

您要建構的應用程式會使用幾項 Firebase 產品，這些產品都可用於網頁應用程式：

• Firebase 驗證：可讓使用者輕鬆登入您的應用程式。
• Cloud Firestore：在雲端儲存結構化資料，並在資料變更時收到即時通知。
• Cloud Storage for Firebase，將檔案儲存到雲端。
• Firebase App Hosting，用於建構、託管及提供應用程式。
• Firebase 雲端通訊，用於傳送推播通知及顯示瀏覽器彈出式通知。
• Firebase 效能監控，收集應用程式的使用者效能資料。

部分產品需要特殊設定或透過 Firebase 控制台啟用。

設定驗證

如要讓使用者透過 Google 帳戶登入網頁應用程式，請使用 Google 登入方式。

1. 前往 Firebase 控制台的「驗證」。
2. 按一下「開始使用」。
3. 在「其他供應商」欄中，依序點選「Google」>「啟用」。
4. 在「專案的公開名稱」文字方塊中，輸入容易記住的名稱，例如 My Next.js app。
5. 從「專案支援電子郵件」下拉式選單中，選取您的電子郵件地址。
6. 按一下 [儲存]。

設定 Cloud Firestore

這個網路應用程式使用 Cloud Firestore 儲存及接收即時通訊訊息。

如要在 Firebase 專案中設定 Cloud Firestore，請按照下列步驟操作：

1. 在 Firebase 控制台的左側面板中，展開「Build」，然後選取「Firestore database」。
2. 按一下 [Create database] (建立資料庫)。
3. 將「資料庫 ID」保留為 (default)。
4. 選取資料庫位置，然後按一下「下一步」。
   如果是實際應用程式，建議選擇靠近使用者的位置。
5. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
   在本程式碼研究室的後續步驟中，您將新增安全性規則，確保資料安全。請勿在未為資料庫新增安全性規則的情況下，公開發布或公開應用程式。
6. 點選「建立」。

設定 Cloud Storage for Firebase

網頁應用程式會使用 Cloud Storage for Firebase 儲存、上傳及分享圖片。

如要在 Firebase 專案中設定 Cloud Storage for Firebase，請按照下列步驟操作：

1. 在 Firebase 主控台的左側面板中，展開「Build」，然後選取「Storage」。
2. 按一下「開始使用」。
3. 選取預設 Storage bucket 的位置。
   位於 US-WEST1、US-CENTRAL1 和 US-EAST1 的 bucket 可享有 Google Cloud Storage 的「一律免費」方案。其他所有位置的值區均適用 Google Cloud Storage 定價和用量。
4. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
   在本程式碼研究室稍後的步驟中，您將新增安全性規則來保護資料。請勿在未為儲存空間 bucket 新增安全規則的情況下，公開發布或公開應用程式。
5. 點選「建立」。

4. 安裝 Firebase 指令列介面

透過 Firebase 指令列介面 (CLI)，您可以使用 Firebase 託管功能在本地提供 Web 應用程式，以及將 Web 應用程式部署至 Firebase 專案。

1. 執行下列 npm 指令來安裝 CLI：

npm -g install firebase-tools@latest

2. 執行下列指令，確認 CLI 是否已正確安裝：

firebase --version

確認 Firebase CLI 版本為 13.9.0 以上。

3. 執行下列指令，授權 Firebase CLI：

firebase login

您已設定網頁應用程式範本，從應用程式的本機目錄 (您在程式碼研究室中複製的存放區)，為 Firebase Hosting 提取應用程式的設定。但如要擷取設定，您必須將應用程式與 Firebase 專案建立關聯。

4. 請確認指令列正在存取應用程式的本機 angularfire-start 目錄。
5. 執行下列指令，將應用程式與 Firebase 專案建立關聯：

firebase use --add

6. 系統顯示提示訊息時，請選取「專案 ID」，然後為 Firebase 專案提供別名。

如果您有多個環境 (正式版、預先發布版等)，別名就非常實用。不過，在本程式碼研究室中，我們只會使用 default 的別名。

7. 按照指令列中的其餘指示操作。

5. 安裝 AngularFire

執行專案前，請確認已設定 Angular CLI 和 AngularFire。

1. 在控制台中執行下列指令：

npm install -g @angular/cli

2. 接著，在 angularfire-start 目錄的控制台中，執行下列 Angular CLI 指令：

ng add @angular/fire

這會為專案安裝所有必要的依附元件。

3. 系統顯示提示時，按空格鍵取消勾選 ng deploy -- hosting。使用方向鍵和空格鍵選取下列功能：
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. 按下 enter，然後按照其餘提示操作。
5. 建立含有「Install AngularFire」提交訊息的提交內容，並推送至 GitHub 存放區。

6. 建立 App Hosting 後端

在本節中，您將設定 App Hosting 後端，監控 Git 存放區中的分支。

在本節結束時，您將擁有連線至 GitHub 存放區的 App Hosting 後端，每當您將新修訂版本推送至 main 分支版本時，系統就會自動重建及推出新版應用程式。

1. 前往 Firebase 控制台的「App Hosting」(應用程式代管) 頁面：

2. 按一下「開始使用」，即可啟動後端建立流程。請按下列方式設定後端：
3. 按照第一個步驟中的提示，連結您稍早建立的 GitHub 存放區。
4. 設定部署設定：
   1. 將根目錄保留為 /
   2. 將即時分支設為 main
   3. 啟用自動推出功能
5. 為後端 friendlychat-codelab 命名。
6. 在「建立或連結 Firebase 網頁應用程式」中，從「選取現有的 Firebase 網頁應用程式」下拉式選單中，挑選您先前設定的網頁應用程式。
7. 按一下「完成並部署」。稍待片刻，系統會將您導向新頁面，您可以在該頁面查看新 App Hosting 後端的狀態！
8. 推出完成後，請按一下「網域」下方的免費網域。由於 DNS 傳播需要時間，這項作業可能要過幾分鐘才會開始運作。

您已部署初始網頁應用程式！每當您將新的修訂版本推送至 GitHub 存放區的 main 分支版本時，Firebase 主控台就會開始新的建構和推出作業，並在推出作業完成後自動更新網站。

您應該會看到 FriendlyChat 應用程式的登入畫面，但目前還無法運作。

目前應用程式無法執行任何操作，但只要有你的協助，很快就能派上用場！

接著，我們來建構即時通訊應用程式。

7. 匯入及設定 Firebase

設定 Firebase

您需要設定 Firebase SDK，說明要使用的 Firebase 專案。

1. 前往 Firebase 控制台中的專案設定
2. 在「您的應用程式」資訊卡中，選取需要設定物件的應用程式暱稱。
3. 從 Firebase SDK 程式碼片段窗格中選取「Config」。

您會發現系統已為您產生環境檔案 /angularfire-start/src/environments/environment.ts。

4. 複製設定物件程式碼片段，然後加進 angularfire-start/src/firebase-config.js。

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

查看 AngularFire 設定

您會發現，在控制台中選取的功能已自動新增至 /angularfire-start/src/app/app.config.ts 檔案。這樣應用程式就能使用 Firebase 功能。

8. 設定使用者登入

AngularFire 已在 app.config.ts 中匯入並初始化，現在應該可以使用了。您現在要使用 Firebase 驗證實作使用者登入功能。

新增授權網域

Firebase 驗證只允許您控管的一組網域登入。將免費的 App Hosting 網域新增至網域清單：

1. 前往「App Hosting」。
2. 複製後端的網域。
3. 前往「驗證設定」。
4. 選擇「已授權網域」分頁標籤。
5. 按一下「新增網域」，然後貼上 App Hosting 後端的網域。

使用 Google 登入功能驗證使用者

在應用程式中，使用者點選「使用 Google 帳戶登入」按鈕時，系統會觸發 login 函式。在本程式碼研究室中，您要授權 Firebase 使用 Google 做為身分識別提供者。您會使用彈出式視窗，但 Firebase 提供其他幾種方法。

1. 在 /src/app/services/ 子目錄中，開啟 chat.service.ts。
2. 找出 login 函式。
3. 將整個函式替換為下列程式碼。

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((