הוסף את 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 Module .

זרימת עבודה זו משתמשת ב-npm ודורשת חבילות מודולים או כלי מסגרת של JavaScript מכיוון שה-API המודולרי מותאם לעבוד עם חבילות מודולים כדי לחסל קוד לא בשימוש (טלטול עצים) ולהקטין את גודל ה-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 project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);
    

    אפליקציית Firebase היא אובייקט דמוי מיכל המאחסן תצורה נפוצה ומשתף אימות בין שירותי Firebase. לאחר שאתחול אובייקט של Firebase App בקוד שלך, תוכל להוסיף ולהתחיל להשתמש בשירותי Firebase.

שלב 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 : השתמש בצרור מודול (webpack/Rollup) להקטנת גודל

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

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

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

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

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

הצעדים הבאים

למד על Firebase: