請依照本指南在您的 Web 應用程式中使用 Firebase JavaScript SDK 或作為最終使用者存取的用戶端(例如,在 Node.js 桌面或 IoT 應用程式中)。
第 1 步:建立 Firebase 專案並註冊您的應用
在將 Firebase 新增至 JavaScript 應用程式之前,您需要建立一個 Firebase 專案並向專案註冊您的應用程式。當您向 Firebase 註冊您的應用程式時,您將獲得一個 Firebase 配置對象,您將使用該對象將您的應用程式與 Firebase 專案資源連接。
造訪了解 Firebase 項目,詳細了解 Firebase 項目以及將應用程式新增至專案的最佳實務。
如果您還沒有 JavaScript 專案並且只想嘗試 Firebase 產品,則可以下載我們的快速入門範例之一。
第 2 步:安裝 SDK 並初始化 Firebase
本頁面介紹 Firebase JS SDK 模組化 API 的設定說明,該 API 使用JavaScript 模組格式。
此工作流程使用 npm 並需要模組捆綁器或 JavaScript 框架工具,因為模組化 API 經過最佳化,可與模組捆綁器配合使用,以消除未使用的程式碼(tree-shaking)並減少 SDK 大小。
使用 npm 安裝 Firebase:
npm install firebase
在您的應用程式中初始化 Firebase 並建立 Firebase App 物件:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Firebase 應用程式是一個類似容器的對象,它儲存通用配置並在 Firebase 服務之間共用身份驗證。在程式碼中初始化 Firebase 應用程式物件後,您可以新增並開始使用 Firebase 服務。
第 3 步:在您的應用程式中存取 Firebase
Firebase 服務(如 Cloud Firestore、驗證、即時資料庫、遠端設定等)可在各個子包中匯入。
下面的範例展示如何使用 Cloud Firestore Lite SDK 檢索資料清單。
import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; // Follow this pattern to import other Firebase services // import { } from 'firebase/<service>'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); // Get a list of cities from your database async function getCities(db) { const citiesCol = collection(db, 'cities'); const citySnapshot = await getDocs(citiesCol); const cityList = citySnapshot.docs.map(doc => doc.data()); return cityList; }
步驟 4 :使用模組捆綁器(webpack/Rollup)來縮小尺寸
Firebase Web SDK 旨在與模組捆綁器配合使用,以刪除任何未使用的程式碼(tree-shaking)。我們強烈建議在生產應用程式中使用這種方法。 Angular CLI 、 Next.js 、 Vue CLI或Create React App 等工具會自動處理透過 npm 安裝並匯入到程式碼庫中的程式庫的模組捆綁。
請參閱我們的指南將模組捆綁器與 Firebase 結合使用以了解更多資訊。
可用的 Web Firebase 服務
現在您已設定好使用 Firebase,您可以開始在 Web 應用程式中新增和使用以下任何可用的 Firebase 服務。
以下命令顯示如何匯入使用npm
本機安裝的 Firebase 庫。有關替代導入選項,請參閱可用的庫文件。
下一步
了解 Firebase:
獲得Firebase Web Codelab的實務經驗。
查看 Firebase JavaScript SDK支援的環境。
使用 Firebase 維護的其他開源程式庫(例如AngularFire 、 RxFire和FirebaseUI for web )加快您的開發速度。
準備啟動您的應用程式:
- 在 Google Cloud Console 中為您的專案設定預算提醒。
- 監控 Firebase 控制台中的使用情況和計費資訊中心,全面了解專案在多個 Firebase 服務中的使用情況。
- 查看Firebase 啟動清單。