使用 Firebase Extensions，為網頁應用程式快速加入新功能

1. 簡介

目標

在本程式碼研究室中，您將使用 Firebase 擴充功能，為線上市集應用程式新增功能。在本程式碼研究室中，您將瞭解擴充功能如何協助您減少應用程式開發和管理工作所花的時間。

建構項目

在本程式碼研究室中，您將為線上市集網路應用程式新增下列功能：

• 加快圖片載入速度，提高使用者留存率
• 限制資料庫中的項目數量，以提升效能並降低帳單金額
• 實作舊使用者資料自動刪除功能，加強保護使用者資料

課程內容

• 如何尋找常見用途的擴充功能
• 如何在專案中安裝及設定擴充功能
• 如何維護 (監控、更新及解除安裝) 專案中的擴充功能

本程式碼研究室著重於 Firebase 擴充功能。如要詳細瞭解本程式碼實驗室中提及的其他 Firebase 產品，請參閱 Firebase 說明文件和其他程式碼實驗室。

事前準備

• 安裝了新式網路瀏覽器的電腦 (建議使用 Chrome)
• Google 帳戶

2. 建立及設定 Firebase 專案

建立 Firebase 專案

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

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

• Firebase 驗證，輕鬆識別使用者
• Firebase 即時資料庫：在雲端儲存結構化資料，並在資料更新時收到即時通知
• Cloud Storage for Firebase，用於將圖片儲存至雲端

接下來，請使用 Firebase 控制台啟用及設定這些 Firebase 產品。

升級 Firebase 定價方案

如要使用 Firebase Extensions 和其基礎雲端服務，以及 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 控制台的升級流程，才能完成升級。

啟用電子郵件登入功能

雖然本程式碼研究室的重點不是驗證，但應用程式中必須有某種形式的驗證，才能明確識別每位使用者。使用電子郵件登入。

1. 在 Firebase 控制台中，點選左側面板中的「Develop」。
2. 依序點選「Authentication」和「Sign-in method」分頁標籤 (或按這裡直接前往「Sign-in method」分頁)。
3. 在「Sign-in providers」清單中點選「Email/Password」，將「Enable」切換到開啟位置，然後點選「Save」。

啟用即時資料庫

應用程式會使用 Firebase 即時資料庫儲存待售商品。

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

為資料庫設定安全性規則

現在，您要為這個應用程式設定必要的安全性規則。以下是一些基本範例規則，可協助保護應用程式安全。這些規則允許任何人查看待售商品，但只有登入的使用者才能執行其他讀取和寫入作業。您不必擔心這些規則的細節，只要複製並貼上，就能讓應用程式正常運作。

1. 在 Realtime Database 資訊主頁頂端，按一下「規則」分頁標籤。

2. 複製下列規則集，然後貼到「規則」分頁的規則欄位中：

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. 按一下「發布」。

設定 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. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
   在本程式碼研究室的後續步驟中，您將新增安全性規則，確保資料安全無虞。請勿在未為 Storage 值區新增安全規則的情況下，公開發布或公開應用程式。
5. 點選「建立」。

為 Storage 值區設定安全性規則

現在，您要為這個應用程式設定必要的安全性規則。這些規則只允許已驗證的使用者發布新圖片，但允許任何人查看所列項目的圖片。

1. 在「儲存空間」資訊主頁頂端，按一下「規則」分頁標籤。

2. 複製下列規則集，然後貼到「規則」分頁的規則欄位中：

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. 按一下「發布」。

3. 執行範例應用程式

分叉 StackBlitz 專案

在本程式碼研究室中，您將使用 StackBlitz 建構及部署應用程式。StackBlitz 是一種線上編輯器，整合了多個 Firebase 工作流程。Stackblitz 不需要安裝軟體或使用特殊的 StackBlitz 帳戶。

StackBlitz 可讓您與他人共用專案。其他擁有 StackBlitz 專案網址的使用者可以查看您的程式碼並複製專案，但無法編輯您的 StackBlitz 專案。

1. 前往這個網址取得起始程式碼：https://stackblitz.com/edit/friendlymarket-codelab。
2. 按一下 StackBlitz 頁面頂端的「Fork」。

您現在已將範例程式碼複製為自己的 StackBlitz 專案。由於你未登入帳戶，系統會將「帳戶」稱為「@anonymous」，但這沒關係。專案會有專屬名稱和網址。所有檔案和變更都會儲存在這個 StackBlitz 專案中。

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

1. 在 StackBlitz 中查看 src/firebase-config.js 檔案。您將在此新增 Firebase 設定物件。
2. 返回 Firebase 控制台，然後點選左上方的「專案總覽」，前往專案總覽頁面。
3. 在專案總覽頁面中央，按一下網頁圖示 建立新的 Firebase 網頁應用程式。
4. 使用「FriendlyMarket Codelab」暱稱註冊應用程式。
5. 在本程式碼研究室中，請勿勾選「Also set up Firebase Hosting for this app」旁的方塊。您將改用 StackBlitz 預覽窗格。
6. 按一下 [Register app] (註冊應用程式)。
7. 將應用程式的 Firebase 設定物件複製到剪貼簿。請勿複製 <script> 標記。注意：如要稍後尋找設定，請按照這裡的操作說明進行。

8. 按一下 [Continue to console] (前往主控台)。

將專案的設定新增至應用程式：

1. 返回 StackBlitz，然後前往 src/firebase-config.js 檔案。
2. 將設定程式碼片段貼到檔案中。完成後，設定物件應如下所示 (但會包含您專案的值)：

這個應用程式的起點為何？

查看 StackBlitz 畫面右側的互動式預覽畫面：

本程式碼研究室會提供基本市集應用程式的程式碼。任何使用者都能查看待售商品清單，並點選連結查看商品詳細資料頁面。如果使用者已登入，系統會顯示賣家的聯絡資訊，方便他們議價及購買商品。

試用應用程式：

1. 使用主畫面頂端的按鈕登入。你可以使用假的電子郵件地址、姓名和密碼。
2. 按一下右下角的「Sell something」(銷售商品) 按鈕，即可建立商品資訊。
3. 在「Title」中輸入 Xylophone。
4. 在「Asking Price」(詢問價格) 中，輸入 50。
5. 在「項目說明」中輸入下列資訊：This high quality xylophone can be used to play music.
6. 將這張木琴圖片下載到電腦，然後按一下「你的商品圖片」按鈕上傳。

file_download下載圖片

7. 填妥所有欄位並上傳圖片後，按一下「發布」。
8. 找到新商家資訊。按一下項目即可查看詳細資料畫面，然後展開「賣家聯絡資訊」面板。
9. 返回 Firebase 控制台。在「Database」資訊主頁中，您現在會看到 forsale 節點下方顯示您發布的項目。在「Storage」資訊主頁中，您也會在 friendlymarket 路徑中找到上傳的圖片。

4. 尋找並安裝擴充功能

問題

您對應用程式進行使用者研究後，發現大多數使用者是透過智慧型手機 (而非電腦) 瀏覽網站。不過，統計資料也顯示，行動裝置使用者往往會在幾秒後離開網站 (即「流失」)。

您好奇地以行動網路速度測試網站，(如要瞭解如何執行這項操作，請參閱這篇文章。)您發現圖片載入時間過長，而且瀏覽器完全沒有快取圖片。每次網頁瀏覽都會產生這麼長的載入時間！

解決方案

閱讀圖片最佳化一文後，您決定採取兩項措施來提升圖片載入效能：

• 壓縮圖片。即使是手機拍攝的圖片，解析度也遠高於這個應用程式的需求。縮減檔案大小可加快載入速度，且應用程式的解析度不會明顯降低。
• 快取。根據預設，Cloud Storage 物件的標頭會告知瀏覽器不要快取圖片，也就是說，使用者的瀏覽器會不斷重新下載同一張圖片！幸好，您可以變更這些標頭來允許快取。用戶端 Cloud Storage SDK 和 Firebase Admin SDK 都允許您設定這些標頭。

如要壓縮圖片，您必須限制上傳品質，或透過伺服器端程序調整圖片大小。我們來看看這兩種方法的優缺點：

• 用戶端。如果是用戶端程序，您可以限制上傳圖片的檔案大小。也就是說，您不需要編寫或維護任何新的伺服器邏輯。但這也表示賣家必須自行調整圖片大小，這對建立新商品資訊來說，是令人痛苦且不直覺的障礙。
• 伺服器端。如果您使用 Cloud Functions for Firebase，可以觸發函式，在上傳圖片時自動調整大小。這表示賣家可以上傳任何大小的圖片 (不必額外作業)，後端函式則可順暢地調整圖片大小。這項功能甚至提供範例！

看來伺服器端是個不錯的選擇。但這個做法仍需要複製範例、按照設定說明操作，然後使用 Firebase CLI 部署函式。調整圖片大小聽起來是很常見的用途。有沒有更簡單的解決方案？

更簡單的解決方案

好消息！其實有更簡單的解決方案：Firebase Extensions！請前往 Firebase 網站查看可用的擴充功能目錄。

真厲害！「Resize Images」擴充功能可派上用場。這看起來很有希望。

現在在應用程式中使用這項擴充功能！

安裝擴充功能

1. 按一下「查看詳細資料」，即可查看這項擴充功能的詳細資訊。在「可以設定的部分」下方，擴充功能可讓您設定要調整大小的尺寸，甚至可以設定快取標頭。太完美了！
2. 在擴充功能的詳細資料頁面上，按一下「在控制台中安裝」按鈕。系統會將您帶往 Firebase 控制台頁面，其中列出所有專案。
3. 選擇您為本程式碼研究室建立的 FriendlyMarket 專案。
4. 按照畫面上的指示操作，直到看到「設定擴充功能」步驟為止。操作說明會顯示擴充功能的簡要摘要，以及擴充功能將建立的任何資源和所需的存取角色。
5. 在「Cache-Control」header for resized images」欄位中，輸入下列內容：

public, max-age=31536000

6. 其他參數則保留預設值。
7. 按一下「安裝擴充功能」。

等待安裝完成期間...

使用 Firebase 指令列介面安裝

如果您較習慣使用指令列工具，也可以透過 Firebase CLI 安裝及管理擴充功能。只要使用最新版 CLI 提供的 firebase ext 指令，詳情請參閱這篇文章。

(選填) 進一步瞭解 Cache-Control 標頭

Cache-Control 標頭值 public, max-age=31536000 表示圖片最多會快取 1 年。如要進一步瞭解 Cache-Control 標頭，請參閱這份說明文件。

更新用戶端程式碼

您安裝的擴充功能會將調整大小後的圖片寫入與原始圖片相同的值區。系統會在縮放後的圖片檔案名稱結尾加上設定的尺寸。因此，如果原始檔案路徑為 friendlymarket/user1234-car.png，縮放後圖片的檔案路徑就會是 friendlymarket/user1234-car_200x200.png。

現在要更新應用程式，讓它擷取調整大小後的圖片，而非完整尺寸的圖片。

1. 在 StackBlitz 中開啟 src/firebase-refs.js 檔案。
2. 將現有的 getImageRef 函式換成下列程式碼，為調整大小後的圖片建立參照：

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

立即測試

由於這項擴充功能會監控新上傳的圖片，因此現有圖片不會調整大小。

建立新貼文，即可查看擴充功能運作情形：

1. 按一下應用程式頂端列中的「Friendly Market」，即可前往主畫面。
2. 按一下應用程式右下角的「Sell something」(銷售商品) 按鈕，即可建立商品資訊。
3. 在「Title」中輸入 Coffee
4. 在「Asking Price」(詢價) 中，輸入 1
5. 在「Item Description」(項目說明) 中輸入下列資訊：Selling one cafe latte. It has foam art in the shape of a bear。
6. 將這張咖啡杯圖片下載到電腦，然後按一下「你的商品圖片」按鈕上傳。file_download下載圖片
7. 填妥所有欄位並上傳圖片後，按一下「發布」。你會看到咖啡的商家資訊出現在「木琴」下方！
8. 在 Firebase 控制台的「Functions」資訊主頁中，按一下「記錄」分頁標籤。您應該會看到函式的記錄檔，顯示函式已執行。

9. 前往 Storage 資訊主頁，即可在 friendlymarket 路徑中查看原始咖啡圖片和調整大小後的版本。
10. 在 StackBlitz 預覽窗格中，重新載入應用程式主畫面幾次。你會發現咖啡圖片的載入速度明顯快於木琴圖片。

由於圖片較小，因此第一次載入網頁時速度較快，後續重新整理網頁時，圖片會從瀏覽器快取載入，不會觸發網路要求。

5. 重新設定擴充功能

問題

應用程式會自動儲存賣家刊登資訊的草稿版本。使用者很喜歡這項功能，但您的統計資料有點令人擔心。報表顯示，只有約 10% 的草稿實際發布，其餘 90% 只是佔用資料庫空間。

解決方案

經過一些粗略的計算後，您發現自己隨時只需要儲存大約五個草稿。

還記得 Firebase Extensions 目錄嗎？或許已有針對這種情況建構的解決方案。請安裝「Limit Child Nodes」擴充功能，自動將儲存的草稿數量維持在五個以下。每新增一封草稿，擴充功能就會刪除最舊的草稿。

1. 在擴充功能的詳細資料頁面上，按一下「安裝」按鈕。
2. 選擇用於市集網頁應用程式的 Firebase 專案。
3. 按照畫面上的指示操作，直到看到「設定擴充功能」步驟為止。
4. 在「Realtime Database path」(即時資料庫路徑) 中輸入 drafts。這是資料庫中儲存草稿的路徑。
5. 在「要保留的節點數上限」中輸入 5。也就是說，每個項目最多會儲存五個草稿，如果新增其他草稿，系統會自動刪除最舊的草稿。
6. 按一下「安裝擴充功能」。

等待安裝完成期間...

監控擴充功能

安裝擴充功能時，系統會建立多個函式。您可能想查看這些函式的執行頻率，或是查看記錄和錯誤率。如要進一步瞭解如何監控擴充功能，請參閱「管理已安裝的擴充功能」。按照說明文件中的指示，查看上一步驟中由「Resize Images」擴充功能建立的函式。

解除安裝擴充功能

如要從專案中移除擴充功能，您可能會想刪除擴充功能建立的個別函式，但這可能會導致非預期行為，因為一個擴充功能可能會建立多個函式。請參閱說明文件，瞭解如何解除安裝擴充功能。

解除安裝擴充功能會一併刪除所有資源 (例如擴充功能適用的函式)，以及為該擴充功能執行個體建立的服務帳戶。不過，解除安裝擴充功能後，系統仍會將該擴充功能產生的所有成果 (例如調整大小後的圖片) 保留在專案中。

在單一專案中安裝多個擴充功能副本

您可以在專案中安裝特定擴充功能的單一執行個體，如要限制其他路徑中的項目，可以安裝這個擴充功能的另一個執行個體。不過，在本程式碼研究室中，您只需要安裝一次擴充功能。

觀看實際使用教學

1. 確認你登入的是發布木琴或拿鐵貼文的帳戶
2. 生成一些草稿：
3. 按一下應用程式右下角的「Sell something」(銷售商品) 按鈕
4. 將「標題」編輯為「草稿 1」。
5. 向下捲動至「草稿」部分，即可查看草稿數量。至少要有兩個。
6. 按一下應用程式頂端列中的「友善市場」按鈕。這樣一來，草稿就會儲存，但不必發布。
7. 針對「草稿 2」、「草稿 3」等，重複上述步驟，直到「草稿 6」為止。
8. 建立「草稿 6」後，請注意「草稿 1」會從「草稿」部分消失。
9. 如同「調整圖片大小」擴充功能，您可以查看函式記錄，瞭解觸發的函式。

喔，保留草稿的上限太小了

你的客戶支援團隊來信通知你，部分最活躍的賣家抱怨草稿在發布前遭到刪除。你和隊友一起檢查數學，發現你的數學結果差了 10,000 倍！

如何修正這個問題？讓我們重新設定已安裝的擴充功能！

1. 在 Firebase 控制台的左側窗格中，按一下「擴充功能」。
2. 在已安裝擴充功能的資訊卡上，按一下「管理」。
3. 按一下右上角的「重新設定擴充功能」。
4. 將「要保留的節點數上限」變更為 50000。
5. 按一下 [儲存]。

這樣就大功告成了！在擴充功能更新期間，您可以與支援團隊聯絡，告知他們修正程式已部署完畢。

6. 自動刪除使用者資料

問題

客戶服務團隊已再次與您聯絡。賣家刪除帳戶後，仍會收到其他使用者的電子郵件，這讓他們非常生氣！這些賣家刪除帳戶時，以為系統會一併刪除他們的電子郵件地址。

目前支援團隊會手動刪除每位使用者的資料，但一定有更好的方法！您考慮自行編寫批次作業，定期執行並清除已刪除帳戶的電子郵件地址。但刪除使用者資料似乎是相當常見的問題。Firebase 擴充功能或許也能協助解決這個問題。

解決方案

您將設定「刪除使用者資料」擴充功能，在使用者刪除帳戶時，自動刪除資料庫中的 users/uid 節點。

1. 在擴充功能的詳細資料頁面上，按一下「安裝」按鈕。
2. 選擇用於市集網頁應用程式的 Firebase 專案。
3. 按照畫面上的指示操作，直到看到「設定擴充功能」步驟為止。
4. 在「Realtime Database paths」(即時資料庫路徑) 中輸入 sellers/{UID}。sellers 部分是子項包含使用者電子郵件地址的節點，而 {UID} 則是萬用字元。完成這項設定後，擴充功能就會知道，當 UID 為 1234 的使用者刪除帳戶時，擴充功能應從資料庫中刪除 sellers/1234。
5. 按一下「安裝擴充功能」。

等待安裝完成期間...

談談自訂功能

在本程式碼研究室中，您已瞭解 Firebase 擴充功能可協助解決常見用途，且擴充功能可設定，以符合應用程式需求。

不過，擴充功能無法解決所有問題，使用者資料刪除問題就是一個很好的例子。雖然「刪除使用者資料」擴充功能可解決目前的問題 (即使用者刪除帳戶後，電子郵件仍會曝光)，但無法刪除所有內容。舉例來說，商品資訊仍會保留，Cloud Storage 中的所有圖片也會繼續存在。「Delete User Data」擴充功能可讓我們設定要刪除的 Cloud Storage 路徑，但由於使用者可能會上傳許多不同名稱的檔案，因此您無法設定這項擴充功能來自動刪除這些構件。在這種情況下，Cloud Functions for Firebase 可能更適合您，因為您可以編寫專為應用程式資料模型設計的程式碼。

擴充功能和帳單

Firebase 擴充功能本身可免費使用 (您只需支付所用基礎資源的費用)，但擴充功能所需的某些基礎資源可能需要付費。本程式碼研究室的設計宗旨是不需帳單帳戶也能完成。不過，設定 Flame 或 Blaze 方案後，就能解鎖許多非常有趣的 Firebase 擴充功能。

舉例來說，您可以縮短網址、觸發電子郵件、將集合匯出至 BigQuery 等等。如要查看擴充功能的完整目錄，請按這裡。

如果希望我們提供某項擴充功能，但目前尚未推出，歡迎告訴我們！如要建議新擴充功能，請填寫 Firebase 支援表單。

觀看實際使用教學

擴充功能安裝完成後，請刪除使用者並查看會發生什麼情況：

1. 前往 Firebase 控制台的即時資料庫資訊主頁。
2. 展開 sellers 節點。
3. 每個賣家的資訊都會以使用者 UID 為鍵。挑選使用者的 UID。
4. 在 Firebase 控制台中，前往驗證資訊主頁，找出該使用者 UID。
5. 展開 UID 右側的選單，然後選取「刪除帳戶」。

6. 返回「Realtime Database」資訊主頁。賣家資訊將會消失！

7. 恭喜！

雖然您在本程式碼研究室中編寫的程式碼不多，但已為市集應用程式新增重要功能。

您已學會如何探索、設定、安裝及重新設定擴充功能。此外，您也瞭解如何監控已安裝的擴充功能，以及如何視需要解除安裝。

後續步驟

以下列出其他擴充功能，歡迎查看：

• 翻譯 Cloud Firestore 中的文字字串 (需要帳單帳戶)
• 將新使用者新增至 Mailchimp 電子郵件清單 (需要帳單帳戶)
• 縮短網址 (須有帳單帳戶)

需要更多自訂伺服器端程式碼嗎？

• 查看 Cloud Functions for Firebase 程式碼研究室

其他實用文件

管理擴充功能：

• 使用 Firebase CLI 管理擴充功能
• 設定預算快訊
• 查看已安裝擴充功能的執行頻率
• 將已安裝的擴充功能更新至新版本
• 解除安裝擴充功能

進一步瞭解額外資訊：

• 在 GitHub 上查看各項擴充功能的原始碼和文件
• 瞭解擴充功能獲得的權限和存取權