מוסיפים את 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 framework, כי ה-API המודולרי מותאם לעבודה עם חבילות מודולים כדי למנוע קוד שלא נמצא בשימוש (רעידת עץ) ולהפחית את גודל ה-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 כדי לבצע אופטימיזציה של ניהול הסשנים עם Service Workers באפליקציה.

שלב 3: ניגשים ל-Firebase באפליקציה

אפשר לייבא שירותי Firebase (כמו Cloud Firestore, אימות, מסד נתונים בזמן אמת, הגדרת תצורה מרחוק ועוד).

הדוגמה הבאה ממחישה איך להשתמש ב-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: משתמשים במודול חבילות של מודולים (Webpack/Rollup) להקטנת הגודל

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

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

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

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

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

השלבים הבאים

מידע על Firebase: