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

בדוגמה הבאה אפשר לראות איך משתמשים ב-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 &>#39;firebase/service';

// TODO: Replace the following with your app&#39;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 ומיובאות לבסיס הקוד שלכם.

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

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

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

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

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

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

השלבים הבאים

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