NgSysV.使用 Google&#s Firestore 建立一個簡單的 Svelte 資訊系統

該貼文系列已在 NgateSystems.com 上建立索引。您還可以在那裡找到超級有用的關鍵字搜尋工具。

最後評論：24 年 11 月

一、簡介

大多數網路應用程式的存在純粹是為了創建和存取共享資訊。考慮一下亞馬遜的 https://www.amazon.co.uk/ 網站。該系統的基本目的是讓您瀏覽產品詳細資訊的集中集合、下訂單並監控交付進度。為了實現這一目標，亞馬遜必須：

• 將此資訊保存在可透過網路存取的地方
• 建置和管理它以確保近乎即時的存取和完全完整性。

這篇文章是關於用於實現這些目標的「資料庫」技術。

警告 - 這是一篇長帖子，因為 Svelte 中的資料庫讀寫會無情地吸引您使用 SvelteKit 的客戶端-伺服器架構。以前，您的程式碼僅在 Web 瀏覽器中「客戶端」運行。現在，您還將在由 npm run dev 啟動的本機伺服器上執行程式碼。這會產生後果...

我已經研究過分割貼文的方法，但它們不起作用。更糟的是，您將使用的 Javascript 包含許多新功能。所以，我很抱歉 - 你只能忍耐了。

但也要往好的方面看。一旦你經歷了這一切，事情就會開始變得更容易。慢慢來。如果您覺得我沒有解釋清楚，請使用 chatGPT。當您需要有關 JavaScript 語法的建議時，您會發現該機器人特別有用。放鬆。這會很有趣！

2. 設定您的專案以使用 Google 的 Firestore

在網路上儲存共享資料的方法有無數種。本系列文章使用 Google 的 Firestore 系統，因為它適合初學者。它需要最少的設置，並且非常適合 Svelte Web 應用程式的結構。

您需要執行四個初步步驟：

1. 取得 Google 帳戶
2. 在此帳戶下建立 Firebase 專案
3. 註冊您的「網頁應用程式」
4. 為您的 Firebase 專案初始化 Firestore 資料庫

Firebase 是 Google 的總稱，涵蓋了許多不同的服務，您可以使用這些服務在網路上安裝簡單的項目。給定帳戶的服務透過 Google 的「Firebase 控制台」（網址為 https://console.firebase.google.com/）進行管理。它們包括允許您將檔案上傳到 Google Cloud 的「儲存」服務和「Firestore 資料庫」服務。資料庫與文件的不同之處在於它具有可配置的結構。它使您能夠存取和更新已配置資料集的離散元素。

2.1 取得Google帳戶

如果您有 Gmail 位址，那麼您就已經受到保護，因為這會自動算是 Google 帳戶。如果沒有，請按照建立 Google 帳戶中的說明取得一個。

2.2 為您的程式碼建立 Firebase 項目

啟動 Google Firebase 控制台並使用您的 Google 帳戶登入（請注意，如果您使用此帳戶登入 Gmail，則您也已經登入 Firebase 控制台）。現在點擊“建立專案”框來啟動該過程。

Google 會要求您為您的專案提供一個名稱（我建議您使用您在 VSCode 中使用的專案名稱），並會提出一個擴展，使其成為 Firebase 世界中唯一的「專案識別碼」。例如，本系列文章中使用的我的版本的「Svelte-dev」項目在 Google 中稱為「Svelte-dev-afbaf」。

順便說一句，由於專案識別碼最終將構成您的網路應用程式的預設即時URL 的一部分，並且由於Google 允許您編輯其最初的「唯一性擴展」提案，因此您可能會嘗試更改此設定去做一些有意義的事情。不過，我建議你忘記這個想法。首先，您會發現很難選擇適合雙方的識別碼。其次，根據我的經驗，這些「預設網址」從未被 Google 索引過。以最低成本購買並在上線時連結到預設 URL 的「自訂 URL」是迄今為止獲得令人難忘的 URL 的最佳方式。

現在點選「繼續」即可顯示「Google Analytics」註冊頁面。您可以在此處安全地忽略它，因為它僅與即時應用程式的效能問題相關。使用滑桿拒絕它，然後點擊“建立專案”按鈕繼續。

當 Google 註冊您的專案時，燈光現在變暗了一點。最後，一旦您再點擊一個「繼續」按鈕，您就會發現自己位於專案的 Firebase 控制台視窗中。以下是「svelte-dev」專案的 Firestore 標籤的螢幕截圖：

值得給自己一點時間來熟悉這個頁面，因為它有點複雜。基本結構由左側的「工具選單」組成，它決定右側主面板中顯示的內容。問題在於選單是「自適應」的，並維護一個「專案快捷方式」部分來記住您去過的地方。因此，每次打開控制台時，選單看起來都不同！然而，一旦掌握了這個功能，事情就會進展順利。請注意，完整的工具集隱藏在其父「產品類別」選單項目的「建置」、「運行」和「分析」子選單中。 「建造」套裝包含您目前所需的一切。

在繼續操作之前，請注意以下事項：

• 螢幕頂部的資訊確認 svelte-test 專案目前已在「Spark」計劃中註冊。這意味著您目前所做的一切都是免費的。最終，在本系列文章中，您將需要開始向 Google 付費，並且需要將您的專案升級到「Blaze」費率。但不用擔心 - 這還有很長的路要走，您不需要支付太多費用，並且您可以建立每月預算來限制 Google 可能向您收取的費用。
• 點擊工具列頂部的「項目概述」按鈕即可顯示項目詳細資訊。此處提供的詳細資訊包括項目標識符的提醒和刪除項目的按鈕。如果一切都出了問題，你總是可以用它來消除混亂並重新開始。這不會花費您任何費用

2.3 註冊您的網路應用程式

Firebase 需要知道您的網路應用程式的名稱：

• 點擊> 「開始」訊息下方的圖標，並根據要求提供暱稱。我建議您在這裡再次使用您的專案名稱（例如“svelte-dev”）。
• 忽略「為此應用程式設定 Firebase 託管」的提示，因為當我們最終進行部署時，您的所有託管需求都將由 App Engine 處理。
• 最後，點選「註冊」和「繼續控制台」返回初始控制台畫面。

2.4 - 初始化 Firestore 資料庫

從工具選單的「Build」堆疊中選擇「Firestore Database」以獲得如下所示的 Firebase 控制台視圖：

點擊「建立資料庫」按鈕後，控制台將要求您：

1. 設定您的資料庫「名稱和位置」。 「名稱」是資料庫的標識符，僅當您計劃在專案中建立多個不同的資料庫時才相關。現在將其留空，以便 Google 使用其「預設」設定。 “位置”指定資料庫的實體位置。此處提供的選項下拉清單可能是您對 Google Cloud 服務規模的第一印象。其伺服器場遍布全球。您可能需要選擇靠近您所在位置的伺服器。例如，我通常使用“europe-west2 : Heathro”，因為我住在英國。 Google Cloud 控制台中其他頁面可讓您指定效能和可用性特徵，但您現在不需要查看這些。

2. 使用「規則」來保護您的資料庫。這裡的畫面為您提供了設定初始「生產」和「測試」「規則」之間的選擇。當然，這只有在你首先知道「規則」是什麼的情況下才有意義——而現在不是我解釋它們的合適時機。除非您更了解，否則我希望您檢查此處的“測試模式”選項。請放心，稍後當我談論“授權”時我會回到這個話題（天哪，還有很多東西要談！）。

完成這兩個階段後，Cloud Firestore 頁面將會在 Firebase 控制台中開啟。現在怎麼辦？

3. 使用 Firestore 資料庫

本節旨在回答以下問題：

1. 什麼是資料庫？
2. Firestore 資料庫是什麼樣的？
3. 如何在 Firestore 控制台中初始化資料庫？
4. 如何使用 Javascript 存取 Firestore 資料庫？
5. 如何取得 Svelte page.svelte 檔案來從 Firestore 資料庫載入資料？
6. 如何取得 Svelte page.svelte 檔案以將資料新增至 Firestore 資料庫？

3.1 什麼是資料庫？

就我們的直接目的而言，資料庫是一組表，其中包含命名資料「欄位」的值行。因此，例如，「客戶訂單」資料庫可能包含

• 包含「客戶 ID」和「客戶地址詳細資料」欄位值的「客戶」表
• 包含「產品編號」和「產品詳細資料」欄位的「產品」表格
• 「客戶訂單」表，其中包含「客戶 ID」所下的「產品編號」訂單的詳細資訊

重要的是這樣的安排結構化資料內容的命名和格式具有一致的標準

3.2 Firestore 資料庫是什麼樣的？

在 Firestore 中，表格稱為“集合”，其中的行稱為“文件”。集合中儲存的文件並不都需要具有相同的字段，但字段名稱和內容應在整個集合中遵循一致的模式。

Firestore 文件的一個重要特徵是它應該有一個唯一的識別碼或「密鑰」。有時，每個文件中都會有一個字段，例如“電子郵件地址”，您可以使用它來提供“自然”唯一密鑰。如果沒有，Firestore 可能會被要求自動建立一個人工金鑰。

資料庫設計可能是系統開發中最具挑戰性的部分，我將再次迴避這一點，因為只有當您擁有一些實務經驗時，所涉及的問題才會變得清晰。不過，如果您有時間，您會發現查看 Cloud Firestore 資料模型頁面很有用。

3.3 如何在 Firestore 控制台中初始化資料庫？

在這篇文章中，我打算向您展示如何在預設 Firestore 資料庫中建立單一產品集合。這將包含簡單的文檔，其中包含產品編號欄位以及 Firestore 自動產生的金鑰。

在 Firebase 控制台的 Firestore 頁面上，按一下「開始收集」按鈕，然後在現在出現的彈出視窗的「集合 ID」欄位中輸​​入名稱「產品」。

現在使用資料輸入頁面建立一個測試產品文檔，其中包含數值為「1」的「productNumber」欄位和文字值為「Product 1」的「productDetails」欄位。

• 在“Field”輸入框中輸入“productNumber”設定欄位名稱，將“Type”方塊設為“number”，並在“Value”方塊中輸入“1”（不含引號字元）。
• 點擊“新增欄位”，在“欄位”輸入框中輸入“productDetails”設定欄位名稱，將“類型”方塊保留預設的“字串”設置，然後輸入“產品1”（不含引號字符） ）在「值」框中
。

現在，先點擊「自動 ID」按鈕，然後「儲存」來簽署文檔，控制台現在應如下所示：

如果您想添加更多文檔，此時您可以單擊“添加文檔”，但在本例中沒有必要 - 您只需要一個文檔來演示您的 Web 應用程式讀取它的能力。

您現在已經完成了，但請注意，控制台的「面板視圖」可讓您編輯或刪除剛剛建立的文件。如果您的情況一團糟，您甚至可以刪除整個集合並重新開始。

3.4 如何使用 Javascript 存取 Firestore 資料庫？

事情開始變得真的有趣了！

Google 提供了一個 Javascript 函式庫，可讓您讀取和寫入 Firestore 文件。此類庫稱為“API”（應用程式介面）。看看下面的程式碼，它顯示瞭如何使用 firebase/firestore 庫來讀取 svelte-dev 產品集合中的所有文件：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

專注於以 const productsCollRef = collection(db, "products"); 開頭的部分。這使用 Firestore API 呼叫將產品集合中所有文件的排序副本載入到 State currentProducts 變數中。

首先，從 Firestore 用戶端 API 程式庫中提取的集合和查詢函數用於將 Firebase 指向產品集合並定義要在其上執行的查詢。然後透過 getDocs API 呼叫啟動查詢。

我不會嘗試描述這一系列 Firestore API 呼叫的機制。將它們視為一段「樣板程式碼」 - 程式碼 - 那種您寫一次，然後簡單複製的東西。由於您會發現需要一個完整的範本庫來涵蓋 Firestore「讀取」、「更新」和「刪除」操作的全部數組，因此您可能會發現查看 Post 10.1 - Firestore CRUD 命令範本很有用。如果您想查看 Google 自己的 API 描述，您可以在第 10.1 篇文章的末尾找到這些內容的連結。

這裡的「CRUD」是「建立」、「讀取」、「更新」和「刪除」的縮寫。

getDocs 結果作為文件數組傳回，通常稱為「快照」。但請注意，getDocs 函數呼叫前面有一個await 關鍵字。

這裡需要await關鍵字，因為預設情況下，在Javascript中，引用外部資料來源的指令可能需要不可預測的時間才能完成非同步處理。 「await」關鍵字本質上（儘管這是一個粗略的簡化）使您能夠覆蓋這種安排。當您有更多時間時，您可能會發現查看 Javascript fetch() API 和「await」關鍵字的簡單指南很有用

但現在，回到上面的程式碼片段，看看以 const firebaseConfig 語句開頭的部分。

firebaseConfig 聲明初始化一個對象，其中包含將 Web 應用連接到特定 Firebase 專案所需的設定詳細資訊。它包括 Firebase 用於定位和驗證您的應用程式的各種密鑰和標識符。您可以在 Firebase 控制台的「專案概覽/專案設定」中找到您的特定 Web 應用程式的設定。下面程式碼範例中的 firebaseConfig 設定已被“混淆”，因為它們是 我的 專案所特有的，並且不能輕易傳遞（稍後將詳細介紹這一點）。嘗試下面的範例程式碼時，您需要從您自己的專案複製 firebaseConfig 設定。

初始化 firebaseConfig 後，Web 應用程式可以初始化查詢的 const productsCollRef = collection(db, "products"); 所需的 db 變數。聲明：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

最後，您可能想知道這些 API 函數從何而來。答案是它們是透過程式碼區塊頂部的三個語句從專案中的位置導入的：

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

這裡正在訪問“模組化庫”來為您的程式碼提供函數。從父模組中提取命名函數（例如集合），以滿足程式碼中稍後所需的參考。

但這又引出了一個問題「模組化庫首先如何進入我的專案？」答案當然是你必須把它們放在那裡，而你用來執行此操作的工具是忠實的舊 npm。

返回 VSCode svelte-test 終端會話（如有必要，透過幾個 ctrl-C 按鍵終止開發伺服器）並執行以下指令'

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

一兩分鐘後（安裝涉及大量下載），您將準備好執行下載 Firestore 資料庫集合的程式碼。但是，您仍然不知道如何將其嵌入到 Svelte Web 應用程式中。那麼，進入下一個問題...

3.5 如何取得 Svelte page.svelte 檔案以從 Firestore 資料庫載入資料？

這是一個漫長的過程，但是，堅持下去，你就快完成了。

目前，在<script>中在 src/routes/ page.svelte 檔案的部分，您有以下語句：<br> </script>

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

如您所知，這會將您的產品欄位聲明為狀態變數並將其初始化為空數組。現在您要做的是將「空」替換為 Firestore 產品集合的內容。

不幸的是，正如您所看到的，這涉及非同步操作。這讓事情變得有些複雜，因為 Svelte 不希望任何東西減慢頁面的初始加載速度 - 它很高興看到稍後添加的信息，但是，用戶的第一印象應該是即時響應。 Svelte 有一個將初始資料載入到 page.svelte 檔案中的標準安排。事情是這樣的：

首先，建立一個新的 src/routes/ page.server.js 文件，將所有非同步程式碼包裝在 load() 函數（強制名稱）內，並將其結果作為物件傳回。

這是程式碼

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

上面的 load 函數傳回一個具有單一 products 屬性的對象，其值是由 Firestore API 呼叫建構的 currentProducts 陣列。

這一切都很好，但是如何將其傳達給 page.svelte 中的產品狀態變數呢？

第一步是將新資料（強制名稱）狀態變數廣告為page.svelte 的prop（「property」的縮寫），您可以透過使用匯出關鍵字聲明它來實現此目的，因此：

npm install firebase

在您到達本系列的第 3.1 篇文章並了解「組件」之前，本系列不會介紹 Props。現在，將您的 page.svelte 檔案視為一個以資料作為參數的函數。

當您現在執行 page.svelte 檔案時，SvelteKit 框架會看到帶有保留資料關鍵字的匯出 let 資料聲明，並認為：「啊，我需要執行與此頁面關聯的 load() 函數」。產品資料及時返回 page.svelte 的 data 屬性中，現在，由於這是一個反應變量，因此頁面被刷新。

要讓現有的「範本」程式碼適用於新的安排，您所需要做的就是用 data.products 取代產品參考

page.server.js 檔案是您在 Svelte 中第一次看到的「伺服器端」程式碼 - 即在伺服器中執行的程式碼。到目前為止，您所看到的所有 page.svelte 程式碼都在瀏覽器中「客戶端」運行。相較之下，page.server.js 檔案要麼在 npm run dev 啟動的本機伺服器中運行，要麼在部署後在 App Engine 伺服器的 Node.js 環境中運行。伺服器端程式碼比客戶端程式碼運行速度更快且安全。唯一可以查看或更改它的人是您 - 它的所有者。

以下是 Post 2.2 中 page.svelte 檔案修改版本的完整程式碼：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

此程式碼應該位於哪裡？目前，「新增另一個產品」

的 on:click 按鈕觸發的程式碼位於您的 page.svelte 檔案中。但 Svelte 建議，出於安全性和效率原因，資料庫更新應在 page.server.js 中的 actions() 函數中「伺服器端」執行，該函數與您已在此處建立的 load() 函數並行。該功能透過從

「發布」資料來觸發。

這是新的

的內容page.svelte 中的排列應如下所示：

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

「actions」函數傳回的物件透過其 <script> 中宣告的 form 屬性可用於 page.svelte 檔案。部分。在這裡，出口許可證表格；語句與早期使用 data prop 傳回 load() 函數的結果類似。 </script>

以下是 page.svelte 和 page.server.js 的完整版本：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

如果您複製此程式碼，請記住再次重設 firestoreConfig 資料。如果您在使其工作時遇到問題，請記住上一篇文章中有關調試客戶端程式碼的建議，並查看下面的「後記部分」以獲取有關修復伺服器端問題的建議。祝你好運！

請注意，page.server.js 中的FireStore API 導入和資料庫設定語句已被賦予“檔案範圍”，方法是將它們移出它們所服務的函數並將它們重新定位到檔案<script> 的頂部。部分。在更複雜的專案中，常見的做法是在單獨的 lib 資料夾中配置 db，以使其能夠作為導入更廣泛地共享。 </script>

您也會注意到，新程式碼刪除了先前出現在舊 page.svelte 檔案的 on:click 函數中的 popupVisible 欄位的重設。 Svelte 對表單提交的預設操作是重新載入頁面。因此，處理表單後，popupVisible 會重新初始化為 false，「目前註冊的產品：」陣列會從更新的 Firestore 產品集合中刷新，並且彈出視窗會消失。作為獎勵，新的產品編號將按照正確的排序順序插入，這得益於產品 getDocs 中的 orderBy("productNumber", "asc") 限定符。

警告：這樣的程式碼只會在您的 Firestore 資料庫公開時才有效。當您新增規則來限制授權使用者（即已「登入」的使用者）存取集合時，您在此處使用的 Firestore 範本將會失敗。本系列下一部分的貼文將解釋原因，特別是 Post 3.4 將解釋如何回退到純粹基於客戶端 page.svelte 檔案的程式碼。然而，由於這將以犧牲安全性和效能為代價，因此我希望您能夠克服這些「小問題」並繼續開發客戶端-伺服器程式碼。目前，請確保您的資料庫規則類似於：

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

4. 總結

我想這篇文章會讓你的耐心達到極限。如果您已經達到了這一點，並且您的網路應用程式正常運行，並且您的理智仍然完好無損，請給自己一顆金星 - 您已經涵蓋了大多數核心 Svelte 主題並掌握了基本技能！

話雖如此，還有很多東西要學習。例如，這篇文章沒有描述基本的錯誤處理和表單驗證安排。除此之外，我還想向您介紹 Svelte 路由（即頁面）、佈局（頁首和頁尾）、元件以及圍繞安全性的棘手問題（登入設計和資料庫規則）。最後，還有一個有趣的問題，即如何部署 Web 應用程式以在網路上進行即時操作。希望您能繼續閱讀！

後記：事情出錯時

在您的網頁應用程式中引入「伺服器端」處理可以讓您快速進入高級開發人員聯盟。這是因為我希望您喜歡在 page.svelte 檔案上使用的「Chrome Inspector」技術不適用於 page.server.js 檔案。但一切都沒有失去。以下是資深開發人員會使用的技術介紹：

後記（一）：在終端機會話中調試伺服器端程式碼

雖然 VSCode 編輯器會盡力幫助您產生正確的程式碼，但一些基本錯誤只有在 SvelteKit 伺服器嘗試執行您的 Web 應用程式時才會變得明顯。此時，您的螢幕可能會顯示「500 - 內部錯誤」訊息（如果它顯示任何內容！）。瀏覽器在這裡無法為您提供太多幫助，因為 page.server.js 檔案在這裡基本上是不可見的。雖然「來源」標籤的 Page/localhost 儲存層次結構繼續顯示您的 page.svelte 文件，但它對 page.server.js 沒有任何說明。

但是檢查員知道發生了錯誤，有時可以為您提供有關其原因的有用線索。選單列的右端將顯示一個中間有十字的紅色圖示。按一下此按鈕，檢查器控制台將開啟並顯示摘要錯誤詳細資料。但如果您需要完整詳細信息，您可以在使用 npm run dev 啟動伺服器的終端會話中找到這些資訊。

這裡的問題是，您可能會覺得細節程度可能太完整。每個錯誤都會報告一個“調用堆疊”，詳細說明故障點之前的伺服器函數調用的完整序列這是由不正確的字段名稱聲明引發的簡短錯誤（我故意將const db= 錯誤地輸入為const dba =

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

終端機視窗不是查看此類資訊的好地方。有時您必須向上或向下捲動才能找到您想要的內容，並且資訊可能會被其他活動的輸出所掩蓋。儘管如此，這就是你所擁有的一切，所以你需要充分利用它。

但請注意，在上面所示的範例中，錯誤原因已被非常清楚地表明- 伺服器在page.server.js 第18 行第38 列處遇到了對db 變數的引用，並且db 尚未被引用宣布。我認為這可以滿足您所需的一切。

終端機視窗也可以幫助您解決邏輯問題。過去，「偵錯」通常是透過將 console.log messages 訊息放置在程式碼中的戰略點來進行的，在這裡使用這種方法很容易。典型的日誌訊息是：

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

像這樣放置在page.server.js 檔案中的日誌訊息將顯示在VSCode 終端機視窗中（相較之下，客戶端page.svelte 程式碼中的日誌語句將繼續顯示在瀏覽器的控制台視窗）。

後記（b）：在 VSCode 調試器中調試伺服器端程式碼

Console.log 訊息可以很好地解決小問題，但現在您希望能夠使用瀏覽器「斷點」偵錯工具的複雜性。不要害怕。現在您可以在 VSCode 中找到它。編輯。這就是你要做的：

1. 開啟要偵錯的 page.server.js 文件，並在要檢查的點設定斷點。您可以將滑鼠懸停在要用作斷點的原始程式碼行上並點擊出現在其左側的淡紅點來完成此操作。淡紅點現在變成鮮紅色。
2. 在 VSCode 指令面板（快速鍵「ctrl shift p」）中選擇「偵錯：附加到節點進程」並取得工作區中的項目清單。選擇您要調試的。
3. 請注意，您剛啟動的終端會話被標記為「Javascript 偵錯終端」。在該終端機中輸入“npm run dev”，並注意通常出現的 Vite 輸出如何包含附加的“偵錯器附加”行。另請注意 VSCode 的活動欄如何變成橙色
4. 現在將滑鼠懸停在 Vite 顯示的 http://localhost 位址上，然後透過「ctrl-click」啟動 Web 應用程式。您的網路應用程式現在會在彈出視窗中開啟。
5. 您現在會發現 page.server.js 檔案的編輯器頁面已成為活動的偵錯會話，並在第一個斷點處停止執行。編輯器視窗頂部的面板顯示熟悉的「前進到下一個斷點」等按鈕，將滑鼠懸停在欄位名稱上將顯示顯示其值的工具提示。和先前一樣，如果偵錯會話在變數賦值語句上停止，則只有在前進到下一條語句時才會看到結果。
6. 將滑鼠懸停在偵錯控制面板遠端的圖示上來終止偵錯會話。當您按下“alt”鍵時，這會在“斷開連接”和“停止”操作之間切換。當顯示「斷開連線」時按一下此按鈕，橘色的 VSCode 活動列將再次變為藍色。如果您想恢復偵錯，請再次在偵錯終端機視窗中「按住 Ctrl 點選」Web 應用程式 URL（該視窗將保持活動狀態，直到您明確「bin」它）

下面的螢幕截圖顯示了這篇文章的 page.server.js 檔案在 load() 函數返回時停止。此時將「滑鼠懸停」在產品屬性上進行傳回會顯示讀取 Firestore 產品集合的結果。

有關 VSCode 調試器中可用功能的完整詳細信息，請參閱 VSCode 調試中的文檔

以上是NgSysV.使用 Google&#s Firestore 建立一個簡單的 Svelte 資訊系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！