מוסיפים את 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.

תהליך העבודה הזה משתמש ב-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 ומיובאות ל-codebase.

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

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

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

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

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

השלבים הבאים

מידע על Firebase