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

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

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

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

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

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

שלב 2: התקנת ה-SDK ואתחול Firebase

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

תהליך העבודה הזה משתמש ב-npm ודורש כלי חבילות מודולים או JavaScript framework tooling, כי ה-modular API מותאם לעבודה עם כלי חבילות מודולים כדי להסיר קוד שלא בשימוש (tree-shaking) ולצמצם את גודל ה-SDK.

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

    npm install firebase

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

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

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

    אם האפליקציה כוללת תכונות דינמיות שמבוססות על עיבוד בצד השרת (SSR), תצטרכו לבצע כמה שלבים נוספים כדי לוודא שההגדרה נשמרת בכל העיבודים בצד השרת ובצד הלקוח. בלוגיקה של השרת, מטמיעים את הממשק FirebaseServerApp כדי לבצע אופטימיזציה של ניהול הסשנים באפליקציה באמצעות Service Workers.

שלב 3: גישה ל-Firebase באפליקציה

שירותי Firebase (כמו Cloud Firestore,‏ Authentication,‏ Realtime Database,‏ Remote Config ועוד) זמינים לייבוא בחבילות משנה נפרדות.

בדוגמה הבאה אפשר לראות איך אפשר להשתמש ב-SDK של Cloud Firestore Lite כדי לאחזר רשימה של נתונים.

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 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) כדי להקטין את הגודל

מידע נוסף זמין במדריך שלנו בנושא חבילות מודולים.

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

מידע נוסף זמין במדריך בנושא שימוש בחבילות מודולים עם Firebase.

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

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

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

1 Firebase AI Logic נקרא בעבר 'Vertex AI in Firebase' עם החבילה firebase/vertexai.

2 Firebase SQL Connect נקרא בעבר 'Firebase Data Connect'.

השלבים הבאים

מידע נוסף על Firebase