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

1. 簡介

目標

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

建構項目

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

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

課程內容

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

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

事前準備

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

2. 建立及設定 Firebase 專案

建立 Firebase 專案

1. 在 Firebase 主控台中，按一下「新增專案」，然後將 Firebase 專案命名為「FriendlyMarket」。
2. 點選專案建立選項。接受 Firebase 條款。略過設定 Google Analytics，因為這個應用程式不會用到 Analytics。
3. 等待專案佈建完成，然後按一下「Continue」。

您建構的應用程式會使用幾項 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. 依序點選「驗證」和「登入方式」分頁標籤 (或按這裡直接前往「登入方式」分頁)。
3. 在「登入供應商」清單中點選「電子郵件/密碼」，然後將「啟用」開關切換到開啟位置，再點選「儲存」。

啟用即時資料庫

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

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

設定資料庫的安全性規則

接下來，您將設定這個應用程式所需的安全性規則。以下是一些基本規則範例，可協助保護應用程式。這些規則允許任何人查看待售商品，但只有已登入的使用者才能執行其他讀取和寫入作業。請放心，您只需要複製貼上這些規則，即可讓應用程式順利運作。

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

2. 複製下列規則集並貼到「Rules」分頁的規則欄位：

   {
     "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. 選取預設儲存體值區的位置。
   US-WEST1、US-CENTRAL1 和 US-EAST1 中的值區可使用 Google Cloud Storage 的「永遠免費」方案。其他所有位置的值區都會遵循 Google Cloud Storage 的定價和用量。
4. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
   在本程式碼研究室的後續步驟中，您將新增安全性規則來保護資料。請勿發布或公開應用程式，否則請為儲存空間值區新增安全規則。
5. 按一下「建立」。

為儲存體值區設定安全性規則

接下來，您將設定這個應用程式所需的安全性規則。這些規則只允許經過驗證的使用者發布新圖片，但允許任何人查看已列入清單的項目圖片。

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

2. 複製下列規則集並貼到「Rules」分頁的規則欄位：

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

3. 按一下 [發布]。

3. 執行範例應用程式

分支 StackBlitz 專案

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

您可以透過 StackBlitz 與他人共用專案。其他人只要有您的 StackBlitz 專案網址，就能查看您的程式碼並分支您的專案，但無法編輯您的 StackBlitz 專案。

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

您現在擁有起始程式碼的副本，可用於自己的 StackBlitz 專案。由於您未登入，系統會將您的「帳戶」稱為 @anonymous，但這沒關係。專案具有專屬名稱和網址。所有檔案和變更都會儲存在這個 StackBlitz 專案中。

將 Firebase Web 應用程式新增至專案

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. 在「標題」中輸入 Xylophone。
4. 在「Asking Price」中輸入 50。
5. 在「Item Description」中輸入以下內容：This high quality xylophone can be used to play music.
6. 將這個揚琴圖片下載到電腦，然後使用「物品圖片」按鈕上傳。

file_download下載圖片

7. 填妥所有欄位並上傳圖片後，按一下「張貼」。
8. 找出新的商家資訊。按一下商品，查看詳細資料畫面，然後展開「賣家聯絡資訊」面板。
9. 返回 Firebase 控制台。在「資料庫」資訊主頁中，您現在會在 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. 填妥所有欄位並上傳圖片後，請按一下「張貼」。你會看到咖啡項目顯示在 Xylophone 下方！
8. 在 Firebase 控制台的「Functions」資訊主頁中，按一下「Logs」分頁標籤。您應該會看到函式記錄檔，顯示函式已執行。

9. 前往「儲存空間」資訊主頁，即可在 friendlymarket 路徑中查看原始咖啡圖片和經過調整大小的版本。
10. 在 StackBlitz 預覽窗格中，重新載入應用程式主畫面幾次。您應該會發現咖啡圖片的載入速度比木琴圖片快上許多。

由於圖片較小，因此在首次載入網頁時，圖片的載入速度會加快，且在後續的網頁重新整理作業中，圖片會從瀏覽器快取中載入，而不會觸發網路要求。

5. 重新設定擴充功能

問題

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

解決方法

經過一些粗略的計算，您發現在任何時間點，只需要儲存約五個草稿即可。

還記得 Firebase Extensions 目錄嗎？也許已經有針對這種情況建立的解決方案。我們來安裝「限制子節點」擴充功能，讓系統自動將儲存的草稿數量控制在五個以下。每次新增草稿時，擴充功能就會刪除最舊的草稿。

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

等待安裝完成期間...

監控額外資訊

安裝擴充功能時，這個程序會建立多個函式。您可能需要檢查這些函式的執行頻率，或查看記錄和錯誤率。如要進一步瞭解如何監控擴充功能，請參閱「管理已安裝的擴充功能」。按照說明文件中的指示操作，查看先前步驟中「調整圖片大小」擴充功能建立的函式。

解除安裝擴充功能

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

解除安裝會刪除所有資源 (例如擴充功能的函式)，以及為該擴充功能例項建立的服務帳戶。不過，解除安裝擴充功能後，系統仍會保留該擴充功能產生的所有構件 (例如已調整大小的圖片)。

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

您不必在專案中安裝特定擴充功能的單一例項。如要限制其他路徑中的項目，可以安裝這個擴充功能的另一個例項。不過，為了方便您在本程式碼研究室中進行練習，我們只會請您安裝一次擴充功能。

實例觀摩

1. 請確認你登入的是發布木琴或拿鐵時使用的帳戶
2. 產生一些草稿：
3. 按一下應用程式右下角的「Sell something」按鈕
4. 編輯「標題」，改為「草稿 1」。
5. 向下捲動至「草稿」部分，查看草稿數量。至少要有兩個。
6. 按一下頂端應用程式列中的「FRIENDLY MARKET」按鈕。這樣一來，您就能儲存草稿，但不必發布。
7. 重複執行「草稿 2」、「草稿 3」等至「草稿 6」。
8. 建立「草稿 6」時，請注意「草稿 1」會從「草稿」部分消失。
9. 如同使用「調整圖片大小」擴充功能時，您可以查看函式記錄檔，瞭解觸發哪些函式。

抱歉，草稿保留上限過低

客戶服務團隊與你聯絡，表示部分最活躍的賣家抱怨草稿在發布前遭到刪除。你和隊友一起檢查計算結果，發現自己的計算結果錯了 10,000 倍！

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

1. 在 Firebase 控制台的左側窗格中，按一下「擴充功能」。
2. 在已安裝的擴充功能資訊卡上，按一下「管理」。
3. 按一下右上角的「重新設定擴充功能」。
4. 將「Maximum count of nodes to keep」變更為 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 中的所有圖片也會保留。刪除使用者資料擴充功能確實可讓我們設定要刪除的 Cloud Storage 路徑，但由於使用者可以上傳許多不同名稱的檔案，因此您無法設定這項擴充功能自動刪除這些構件。在這種情況下，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 查看各個擴充功能的原始碼和說明
• 瞭解授予擴充功能的權限和存取權