מוסיפים את Firebase לפרויקט ה-JavaScript

במדריך הזה מוסבר איך להשתמש ב-SDK של Firebase JavaScript באפליקציית האינטרנט או כלקוח לגישה של משתמשי קצה, למשל באפליקציית Node.js למחשב או לאינטרנט של הדברים (IoT).

שלב 1: יוצרים פרויקט ב-Firebase ומירשם את האפליקציה

כדי להוסיף את Firebase לאפליקציית JavaScript, צריך ליצור פרויקט Firebase ולרשום את האפליקציה בפרויקט הזה. כשרושמים אפליקציה ב-Firebase, מקבלים אובייקט תצורה של Firebase שבו משתמשים כדי לקשר את האפליקציה למשאבי הפרויקט ב-Firebase.

במאמר הסבר על פרויקטים ב-Firebase מוסבר בהרחבה על פרויקטים ב-Firebase ועל השיטות המומלצות להוספת אפליקציות לפרויקטים.

אם עדיין אין לכם פרויקט JavaScript ואתם רק רוצים לנסות מוצר של Firebase, תוכלו להוריד אחד מדוגמאות למתחילים.

שלב 2: מתקינים את ה-SDK ומפעילים את Firebase

בדף הזה מתוארות הוראות להגדרת ה-API המודולרי של Firebase JS SDK, שמשתמש בפורמט מודול JavaScript.

בתהליך העבודה הזה נעשה שימוש ב-NPM ומחייבים שימוש ב-רכיבי Bundler של מודולים או בכלים של framework של JavaScript, כי ה-API המודולרי מותאם לעבודה עם חבילות מודולים כדי לבטל קוד שלא נמצא בשימוש (רעידת עץ) ולהקטין את ה-SDK.

  1. מתקינים את Firebase באמצעות npm:

    npm install firebase

  2. מאתחלים את Firebase באפליקציה ויוצרים אובייקט של אפליקציית Firebase:

    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 ולהתחיל להשתמש בהם.

    אם האפליקציה שלכם כוללת תכונות דינמיות שמבוססות על רינדור בצד השרת (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: שימוש ב-bundler של מודולים (webpack/‏Rollup) כדי לצמצם את הגודל

ה-SDK לאינטרנט של Firebase תוכנן לפעול עם חבילות מודולים כדי להסיר קוד שלא בשימוש (tree-shaking). מומלץ מאוד להשתמש בגישה הזו באפליקציות ייצור. כלים כמו Angular CLI,‏ Next.js,‏ Vue CLI או Create React App מטפלים באופן אוטומטי בקיבוץ מודולים של ספריות שמותקנות דרך npm ומיובאות לקוד הבסיסי.

מידע נוסף זמין במדריך שימוש ב-bundlers של מודולים עם Firebase.

שירותי Firebase זמינים לאינטרנט

עכשיו, אחרי שמסיימים להשתמש ב-Firebase, אפשר להתחיל להוסיף לאפליקציית האינטרנט כל אחד משירותי Firebase הבאים ולהשתמש בהם.

הפקודות הבאות מראות איך לייבא ספריות של Firebase שמותקנות באופן מקומי באמצעות npm. אפשרויות ייבוא חלופיות מפורטות במסמכי העזרה של הספריות הזמינות.

השלבים הבאים

מידע נוסף על Firebase: