請按照本指南的說明,在網頁應用程式中使用 Firebase JavaScript SDK,或將其做為用戶端,供最終使用者存取,例如在 Node.js 桌面或物聯網應用程式中。
步驟 1:建立 Firebase 專案並註冊應用程式
您必須先建立 Firebase 專案,並將應用程式註冊至該專案,才能將 Firebase 新增至 JavaScript 應用程式。透過 Firebase 註冊應用程式時,您會取得 Firebase 設定物件,用於將應用程式連結至 Firebase 專案資源。
請參閱「瞭解 Firebase 專案」,進一步瞭解 Firebase 專案,以及在專案中新增應用程式的最佳做法。
建立 Firebase 專案
-
在 Firebase 控制台中,按一下「新增專案」。
-
如要將 Firebase 資源新增至現有 Google Cloud 專案,請輸入專案名稱,或從下拉式選單中選取。
-
如要建立新專案,請輸入所需的專案名稱。您也可以視需要編輯專案名稱下方顯示的專案 ID。
-
-
系統提示時,請詳閱並接受 Firebase 條款。
-
按一下「繼續」。
-
(選用) 為專案設定 Google Analytics,即可在使用下列任何 Firebase 產品時,獲得最佳體驗:
選取現有的 Google Analytics 帳戶,或建立新帳戶。
如果您建立新帳戶,請選取Analytics報表位置,然後接受專案的資料共用設定和 Google Analytics 條款。
-
按一下「建立專案」 (如果您使用的是現有的 Google Cloud 專案,請按一下「新增 Firebase」)。
Firebase 會自動為 Firebase 專案佈建資源。程序完成後,您會前往 Firebase 主控台的 Firebase 專案總覽頁面。
註冊應用程式
建立 Firebase 專案後,您就可以將網頁應用程式註冊至該專案。
-
在 Firebase 控制台的專案總覽頁面中間,按一下「Web」圖示 ( ),啟動設定工作流程。
如果您已將應用程式新增至 Firebase 專案,請按一下「Add app」,顯示平台選項。
-
輸入應用程式的暱稱。
這個暱稱是內部方便識別碼,只有您在 Firebase 控制台中看得到。 -
按一下 [Register app] (註冊應用程式)。
-
按照畫面上的操作說明,在應用程式中新增及初始化 Firebase SDK。
您也可以在本入門頁面的後續步驟中,找到有關新增、初始化及使用 Firebase SDK 的詳細操作說明。
如果您還沒有 JavaScript 專案,但想試用 Firebase 產品,可以下載我們的快速入門範例。
步驟 2:安裝 SDK 並初始化 Firebase
本頁面說明 Firebase JS SDK 模組化 API 的設定操作說明,該 API 使用 JavaScript 模組格式。
這個工作流程會使用 npm,並需要模組整合工具或 JavaScript 架構工具,因為模組 API 經過最佳化處理,可與模組整合工具搭配使用,藉此消除未使用的程式碼 (樹狀結構搖晃),並縮減 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 App 物件後,您就可以新增 Firebase 服務並開始使用。
如果應用程式包含以伺服器端算繪 (SSR) 為基礎的動態功能,您必須採取一些額外步驟,確保設定在伺服器算繪和用戶端算繪階段持續保留。在伺服器邏輯中實作
FirebaseServerApp
介面,藉此透過服務工作者管理應用程式的工作階段。
步驟 3:在應用程式中存取 Firebase
Firebase 服務 (例如 Cloud Firestore、Authentication、Realtime Database、Remote Config 等) 可在個別子套件中匯入。
以下範例說明如何使用 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 可與模組封包處理工具搭配使用,移除任何未使用的程式碼 (樹狀圖搖晃)。強烈建議您在正式版應用程式中使用此方法。Angular CLI、Next.js、Vue CLI 或 Create React App 等工具會自動處理透過 npm 安裝並匯入至程式碼庫的程式庫模組捆綁作業。
詳情請參閱「使用模組套件組合器與 Firebase」指南。
適用於網頁應用程式的 Firebase 服務
設定完成後,您就可以開始在網頁應用程式中新增及使用下列任一可用的 Firebase 服務。
以下指令說明如何使用 npm
匯入已在本機安裝的 Firebase 程式庫。如需其他匯入選項,請參閱可用的程式庫說明文件。
後續步驟
瞭解 Firebase:
探索 Firebase 應用程式範例。
透過 Firebase Web 程式碼研究室實際操作。
瀏覽 GitHub 中的開放原始碼。
查看 Firebase JavaScript SDK 的支援環境。
使用 Firebase 維護的其他開放原始碼程式庫 (例如 AngularFire、RxFire 和 FirebaseUI for web),加快開發速度。
準備發布應用程式:
- 在 Google Cloud 主控台中為專案設定預算快訊。
- 請在 Firebase 控制台中監控使用量和帳單資訊主頁,全面掌握專案在多項 Firebase 服務中的用量。
- 詳閱 Firebase 上市檢查清單。