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

במדריך הזה מוסבר איך להשתמש ב-SDK של Firebase JavaScript באפליקציית האינטרנט או כלקוח לגישה של משתמשי קצה, למשל באפליקציית 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:

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

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

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

שלב 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 project 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: שימוש ב-bundler של מודולים (webpack/‏Rollup) כדי לצמצם את הגודל

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

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

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

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

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

השלבים הבאים

מידע נוסף על Firebase: