מוסיפים את 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 JS SDK, שמשתמש בפורמט של JavaScript Module.

תהליך העבודה הזה משתמש ב-npm ודורש כלי חבילות מודולים או כלי מסגרת JavaScript, כי ה-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 ועוד) זמינים לייבוא בחבילות משנה נפרדות.

בדוגמה הבאה אפשר לראות איך להשתמש ב-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 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.

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

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

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

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

השלבים הבאים

מידע על Firebase