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

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

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

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

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

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

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

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

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

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

    npm install firebase

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

    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 Worker.

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

‫Firebase JavaScript 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.

‫ ‫2 בעבר, Firebase SQL Connect נקרא "Firebase Data Connect".

השלבים הבאים

מידע ולמידה על Firebase: