使用 Firebase Extensions 快速為您的網頁應用程式新增功能

一、簡介

目標

在此 Codelab 中，您將藉助Firebase Extensions為線上市場應用添加功能。透過此 Codelab，您將了解擴充功能如何幫助您減少在應用程式開發和管理任務上花費的時間。

你將建構什麼

在此 Codelab 中，您將向線上市場 Web 應用添加以下功能：

• 更快地載入圖像以提高用戶保留率
• 限制資料庫中的條目以提高效能並降低費用
• 實現老用戶資料自動刪除，加強用戶資料保護

你將學到什麼

• 如何發現常見用例的擴展
• 如何在專案中安裝和配置擴展
• 如何維護（監控、更新和卸載）專案中的擴展

此 Codelab 重點關注 Firebase 擴充。有關本 Codelab 中提到的其他 Firebase 產品的詳細信息，請參閱Firebase 文件和其他Codelab 。

你需要什麼

• 安裝了現代網頁瀏覽器的電腦（建議使用 Chrome）
• 一個谷歌帳戶

2. 建立並設定 Firebase 項目

創建 Firebase 項目

1. 在Firebase 控制台中，按一下新增項目，並將 Firebase 項目命名為FriendlyMarket 。
2. 按一下項目建立選項。接受 Firebase 條款。跳過設定 Google Analytics，因為您不會在此應用程式中使用 Analytics。
3. 等待配置項目，然後按一下繼續。

您將建立的應用程式使用一些可用於網頁應用的 Firebase 產品：

• Firebase 身份驗證可輕鬆識別您的用戶
• Firebase 即時資料庫將結構化資料保存在雲端並在資料更新時獲得即時通知
• Cloud Storage for Firebase將映像保存在雲端

您現在將使用 Firebase 控制台啟用和設定這些 Firebase 產品。

啟用電子郵件登入

儘管身份驗證不是本 Codelab 的重點，但在您的應用程式中進行某種形式的身份驗證非常重要，以便唯一地識別每個使用它的人。您將使用電子郵件登入。

1. 在 Firebase 控制台中，按一下左側面板中的「開發」 。
2. 按一下「驗證」 ，然後按一下「登入方法」標籤（或按一下此處直接前往「登入方法」標籤）。
3. 按一下登入提供者清單中的電子郵件/密碼，將啟用開關設定為開啟位置，然後按一下儲存。

啟用即時資料庫

該應用程式使用 Firebase 即時資料庫來保存待售商品。

1. 在 Firebase 控制台左側面板的「開發」部分中，按一下「資料庫」 。
2. 向下捲動頁面經過 Cloud Firestore 窗格，然後按一下即時資料庫窗格中的建立資料庫。

3. 選擇“以鎖定模式啟動” ，然後按一下“啟用” 。

設定安全規則

現在，您將設定此應用程式所需的安全規則。這些是一些有助於保護您的應用程式的基本範例規則。這些規則允許任何人查看待售商品，但這些規則僅允許登入使用者執行其他讀取和寫入操作。不用擔心這些規則的細節；您只需複製並貼上它們即可啟動並運行您的應用程式。

1. 在即時資料庫儀表板頂部，按一下「規則」標籤。

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 來保存待售商品的圖像。

1. 在 Firebase 控制台左側面板的「開發」部分中，按一下「儲存」 。
2. 單擊開始。

3. 接受預設設定以建立預設儲存桶（按一下下一步，保留預設位置，然後按完成）。

現在，您將設定此應用程式所需的安全規則。這些規則僅允許經過身份驗證的使用者發布新映像，但允許任何人查看所列項目的圖像。

1. 在儲存儀表板頂部，按一下規則標籤。

2. 將下列規則集複製並貼上到「規則」標籤的規則欄位中：

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 項目

在此 Codelab 中，您將使用StackBlitz建置和部署應用，StackBlitz 是一個整合了多個 Firebase 工作流程的線上編輯器。 Stackblitz 不需要安裝軟體或特殊的 StackBlitz 帳號。

StackBlitz 可讓您與其他人分享專案。擁有您的 StackBlitz 項目 URL 的其他人可以查看您的程式碼並分叉您的項目，但他們無法編輯您的 StackBlitz 專案。

1. 前往此 URL 取得起始代碼： https ://stackblitz.com/edit/amiliesmarket-codelab 。
2. 在 StackBlitz 頁面頂部，按一下Fork 。

您現在擁有了一份起始程式碼的副本作為您自己的 StackBlitz 專案。因為您沒有登錄，所以您的“帳戶”被稱為@anonymous ，但這沒關係。該項目有一個唯一的名稱和一個唯一的 URL。您的所有檔案和變更都保存在此 StackBlitz 專案中。

將 Firebase Web 應用程式加入到專案中

1. 在 StackBlitz 中，查看src/firebase-config.js檔案。您將在此處新增 Firebase 配置物件。
2. 返回 Firebase 控制台，點擊左上角的項目概述導覽至專案的概述頁面。
3. 在專案概述頁面的中心，按一下 Web 圖標建立一個新的 Firebase Web 應用程式。
4. 使用暱稱Friendship Market Codelab註冊該應用程式。
5. 對於此 Codelab，請勿選取Also set up Firebase Hosting for this app旁的複選框。您將改用 StackBlitz 預覽窗格。
6. 點擊註冊應用程式。
7. 將套用的 Firebase 設定物件複製到剪貼簿。不要複製<script>標記。注意：如果您稍後需要查找配置，請按照此處的說明進行操作。

8. 按一下繼續控制台。

將項目的配置新增至您的應用程式：

1. 返回 StackBlitz，前往src/firebase-config.js檔案。
2. 將您的設定片段貼到文件中。完成後，它應該如下所示（但在配置物件中包含您自己項目的值）：

這個應用程式的出發點是什麼？

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

此 Codelab 首先為您提供基本市場應用程式的程式碼。任何用戶都可以查看待售商品列表，並點擊連結查看商品的詳細資訊頁面。如果用戶登錄，他們將看到賣家的聯絡資訊，以便他們協商價格併購買商品。

嘗試該應用程式：

1. 使用主畫面頂部的按鈕登入。您可以使用虛假的電子郵件地址、姓名和密碼。
2. 點擊右下角的“出售商品”按鈕以建立清單。
3. 對於標題，輸入Xylophone 。
4. 對於要價，輸入50 。
5. 對於「物品說明」 ，請輸入以下內容： This high quality xylophone can be used to play music.
6. 將木琴的圖像下載到您的計算機，然後使用「您的物品的圖片」按鈕上傳。

file_download下載圖片

7. 填寫所有欄位並上傳圖像後，點擊發布。
8. 找到您的新清單。點擊您的商品以查看其詳細資訊螢幕，然後展開賣家聯絡資訊面板。
9. 返回 Firebase 控制台。在資料庫儀表板中，您現在將看到您在forsale節點下發布的項目的條目。在儲存儀表板中，您還可以找到在friendlymarket路徑中上傳的圖像。

4. 尋找並安裝擴展

問題

在對您的應用程式進行一些用戶研究後，您發現大多數用戶透過智慧型手機而不是桌面裝置造訪您的網站。然而，您的統計數據也顯示，行動用戶往往會在幾秒鐘後離開您的網站（「流失」）。

出於好奇，您使用行動連線速度測試您的網站。 （在此處了解如何執行此操作。）您發現圖像需要很長時間才能加載，並且根本不會緩存在瀏覽器中。每次頁面瀏覽都會產生這麼長的載入時間！

解決方案

在閱讀如何優化圖像後，您決定採取兩個步驟來提高圖像載入效能：

• 壓縮圖像。即使是手機拍攝的影像解析度也遠高於該應用程式的需要。減小檔案大小將加快載入時間，而應用程式的解析度不會明顯下降。
• 快取.預設情況下，雲端儲存物件具有告訴瀏覽器不要快取圖像的標頭，這意味著用戶的瀏覽器將一遍又一遍地重新下載相同的圖像！幸運的是，您可以更改這些標頭以允許快取。用戶端 Cloud Storage SDK和Firebase Admin SDK都允許您設定這些標頭。

要壓縮圖像，您需要限制上傳品質或具有調整圖像大小的伺服器端進程。讓我們考慮一下權衡：

• 客戶端。對於客戶端進程，您可以僅限制上傳映像的檔案大小。這意味著您不需要編寫或維護任何新的伺服器邏輯。然而，這也意味著您的賣家需要弄清楚如何調整自己的圖像大小，這對於創建新清單來說是一個痛苦且不直觀的障礙。
• 伺服器端。如果您使用 Cloud Functions for Firebase，則可以觸發在上傳時自動調整影像大小的函數。這意味著賣家可以上傳他們喜歡的任何尺寸的圖像（不需要他們做額外的工作），並且您的後端功能可以無縫地調整圖像的大小。甚至還有一個可用於此功能的範例！

聽起來伺服器端是正確的選擇。但這個想法仍然涉及克隆範例，遵循其設定說明，然後使用 Firebase CLI 部署該函數。調整圖像大小聽起來像是常見的用例。難道沒有更簡單的解決方案嗎？

更簡單的解決方案

你很幸運。有一個更簡單的解決方案：Firebase Extensions！讓我們在Firebase 網站上查看可用擴充功能的目錄。

看那個！有一個名為“調整圖像大小”的擴充功能。這看起來很有希望。

讓我們在您的應用程式中使用此擴充功能！

安裝擴充

1. 按一下查看詳細資訊以查看有關此擴充功能的更多資訊。在「您可以配置的內容」下，該擴充功能可讓您設定要調整大小的尺寸，甚至可以設定快取標頭。完美的！
2. 按一下擴充功能詳細資料頁面上的「在控制台中安裝」按鈕。您將進入 Firebase 控制台頁面，其中列出了您的所有項目。
3. 選擇您為此 Codelab 建立的Friendship專案。
4. 請按照螢幕上的指示進行操作，直到到達「配置擴充」步驟。這些說明將顯示擴充功能的基本摘要，以及它將建立和存取所需角色的任何資源。
5. 在用於調整大小的影像的** Cache-Control **標頭欄位中，輸入以下內容：

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. 點擊應用程式頂部欄中的“友好市場”以導航到主螢幕。
2. 點擊應用程式右下角的“出售商品”按鈕以建立清單。
3. 對於標題，輸入Coffee
4. 對於要價，輸入1
5. 項目描述，輸入以下內容： Selling one cafe latte. It has foam art in the shape of a bear 。
6. 將一杯咖啡的圖片下載到您的電腦上，然後使用「您的商品圖片」按鈕上傳。 file_download下載圖片
7. 填寫所有欄位並上傳圖像後，點擊發布。您會看到咖啡清單出現在木琴下方！
8. 在 Firebase 控制台的「功能」儀表板中，按一下「日誌」標籤。您應該會看到該函數的日誌，表示它已執行。

9. 前往「儲存」儀表板，查看原始咖啡影像和friendlymarket路徑中調整大小的版本。
10. 在 StackBlitz 預覽窗格中，重新載入應用程式的主畫面幾次。您應該注意到咖啡圖像的加載速度明顯快於木琴圖像。

圖像在第一個頁面加載時加載速度更快，因為它較小，並且在後續頁面刷新時，它會從瀏覽器快取加載，而不是觸發網路請求。

5. 重新配置擴展

問題

您的應用程式會自動儲存賣家清單的草稿版本。您的用戶喜歡這個功能，但您的統計數據有點令人擔憂。您的報告顯示，只有大約 10% 的草稿實際發布，其餘 90% 只是佔用您資料庫中的空間。

解決方案

經過一些粗略計算後，您意識到在任何給定時間只需要保存大約五份草稿。

還記得 Firebase 擴充目錄嗎？也許已經針對這種情況建立了解決方案。讓我們安裝限制子節點擴充功能以自動將已儲存的草稿數量保持在五個或更少。每當新增草稿時，擴充功能都會刪除最舊的草稿。

1. 點擊擴充功能詳細資料頁面上的安裝按鈕。
2. 選擇您用於 Marketplace Web 應用的 Firebase 專案。
3. 請按照螢幕上的指示進行操作，直到到達「配置擴充」步驟。
4. 對於即時資料庫路徑，輸入drafts 。這是資料庫中保存草稿的路徑。
5. 對於要保留的最大節點數，輸入5 。這意味著每個項目的清單將保存五個草稿，如果添加另一個草稿，最舊的草稿將自動刪除。
6. 點擊安裝擴充功能。

當您等待安裝完成...

監控擴充

當您安裝擴充功能時，該過程會建立多個函數。您可能想要檢查這些功能的運作頻率或查看日誌和錯誤率。有關如何監控擴充功能的詳細信息，請參閱管理已安裝的擴充功能。請依照文件中的說明查看上一個步驟中「調整影像大小」擴充功能所建立的函數。

解除安裝擴充

要從專案中刪除擴展，您可能會想要刪除擴展創建的各個函數，但這可能會導致意外行為，因為一個擴展可能會建立多個函數。了解如何在文件中卸載擴充功能。

卸載會刪除所有資源（例如擴充功能的函數）以及為該擴充實例建立的服務帳戶。但是，卸載擴充功能後，擴充功能建立的任何工件（例如調整大小的映像）將保留在您的專案中。

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

您不限於在專案中安裝給定擴充功能的單一實例。如果您想要限制其他路徑中的項目，您可以安裝此擴充功能的另一個實例。但是，出於本 Codelab 的目的，您只需安裝該擴充功能一次。

查看實際效果

1. 確保您使用用於發布木琴或拿鐵咖啡的帳戶登錄
2. 產生一些草稿：
3. 點擊應用程式右下角的“出售商品”按鈕
4. 將標題編輯為「草稿 1」。
5. 向下捲動到草稿部分並查看草稿數。至少應該有兩個。
6. 點擊頂部應用程式列中的“友善市場”按鈕。這樣，您將擁有已儲存的草稿，但無需將其發布。
7. 對「草稿 2」、「草稿 3」等重複至「草稿 6」。
8. 當您建立「草稿 6」時，請注意「草稿 1」從您的草稿部分消失。
9. 正如您對調整圖像大小擴展所做的那樣，您可以檢查函數日誌以查看觸發了哪些函數。

糟糕，保留的草稿限制太小

您的客戶支援團隊聯絡您，讓您知道一些最高效的賣家抱怨他們的草稿在發布之前就被刪除了。你和你的隊友檢查你的數學，然後你發現你的數學偏差了 10,000 倍！

你該如何解決這個問題？讓我們重新配置已安裝的擴充功能！

1. 在 Firebase 控制台的左側窗格中，點選擴充。
2. 在已安裝的擴充卡上，按一下管理。
3. 在右上角，點擊重新配置擴充功能。
4. 將最大節點數更改為50000 。
5. 按一下「儲存」 。

這就是您需要做的全部！在擴展更新期間，您可以與您的支援團隊聯繫並讓他們知道修復程式已經部署。

6.自動刪除用戶數據

問題

您的客戶支援團隊已再次與您聯繫。刪除帳戶的賣家仍然收到其他用戶的電子郵件，他們很生氣！這些賣家希望在刪除帳戶時，他們的電子郵件地址將從您的系統中刪除。

目前，支援手動刪除每個用戶的數據，但必須有更好的方法！您考慮一下，並考慮編寫自己的批次作業，該作業會定期運行並從已刪除的帳戶中清除電子郵件地址。但刪除用戶資料似乎是一個非常常見的問題。也許 Firebase Extensions 也可以幫忙解決這個問題。

解決方案

您將配置「刪除使用者資料」擴展，以便在使用者刪除其帳戶時自動刪除資料庫中的users/uid節點。

1. 點擊擴充功能詳細資料頁面上的安裝按鈕。
2. 選擇您用於 Marketplace Web 應用的 Firebase 專案。
3. 請按照螢幕上的指示進行操作，直到到達「配置擴充」步驟。
4. 對於即時資料庫路徑，輸入sellers/{UID} 。 sellers部分是其子節點包含使用者電子郵件地址的節點， {UID}是通配符。透過此配置，擴充功能將知道當 UID 為 1234 的使用者刪除其帳戶時，擴充功能應從資料庫中刪除sellers/1234 。
5. 點擊安裝擴充功能。

當您等待安裝完成...

我們來談談可自訂性

在此 Codelab 中，您已經看到 Firebase 擴充功能可以協助解決常見用例，並且可以進行擴充功能以滿足您應用程式的需求。

然而，擴充功能並不能解決所有問題，用戶資料刪除問題就是一個很好的例子。儘管「刪除使用者資料」擴充功能解決了目前使用者刪除帳戶後電子郵件仍暴露的投訴，但該擴充功能不會刪除所有內容。例如，項目清單仍然可用，並且雲端儲存中的任何圖像也將保留。刪除用戶資料擴充功能確實允許我們配置要刪除的雲端儲存路徑，但由於用戶可以上傳具有許多不同名稱的許多不同文件，因此您將無法配置此擴充功能來自動刪除這些工件。對於這種情況， Cloud Functions for Firebase可能更適合，以便您可以編寫特定於應用程式資料模型的程式碼。

擴充和計費

Firebase 擴充功能本身是免費使用的（您只需為您使用的底層資源付費），但擴充功能所需的某些底層資源可能需要計費。此 Codelab 旨在無需計費帳戶即可完成。然而，設定 Flame 或 Blaze 計劃可以解鎖許多非常有趣的 Firebase 擴充功能。

例如，您可以縮短 URL 、觸發電子郵件、將集合匯出到 BigQuery等等！在此處查看完整的擴充目錄。

如果您想要一個擴展，但現在不可用，我們很樂意聽到！向Firebase 支援提出功能請求以建議新擴充。

查看實際效果

擴充安裝完成後，刪除使用者並看看會發生什麼：

1. 在 Firebase 控制台中，前往即時資料庫儀表板。
2. 展開sellers節點。
3. 每個賣家的資訊都以他們的用戶 UID 為關鍵。選擇用戶的 UID。
4. 在 Firebase 控制台中，前往您的驗證儀表板，並找到該使用者 UID。
5. 展開 UID 右側的選單，然後選擇「刪除帳戶」 。

6. 返回即時資料庫儀表板。賣家資訊將會消失！

7. 恭喜！

儘管您在此 Codelab 中沒有編寫太多程式碼，但您還是為您的 Marketplace 應用程式添加了重要功能。

您學習如何發現、配置、安裝和重新配置擴充功能。此外，您還了解如何監視已安裝的擴充功能以及如何在必要時卸載它們。

下一步是什麼？

查看其中一些其他擴充功能：

• 翻譯 Cloud Firestore 中的文字字串（需要結算帳戶）
• 將新用戶新增至 Mailchimp 電子郵件清單（需要計費帳戶）
• 縮短網址（需結算帳戶）

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

• 查看 Cloud Functions for Firebase Codelab

其他有用的文件

管理擴充：

• 嘗試使用 Firebase CLI 管理擴展
• 設定預算提醒
• 檢查已安裝擴充的運作頻率
• 將已安裝的擴充功能更新至新版本
• 解除安裝擴充

了解有關擴充功能的更詳細資訊：

• 在 GitHub 上查看每個擴充功能的源代碼和文檔
• 了解授予擴充功能的權限和存取權限