Catch up on everthing we announced at this year's Firebase Summit. Learn more

הוסף את Firebase לפרויקט JavaScript שלך

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

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

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

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

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

שלב 2: התקן את ה- SDK ו לאתחל Firebase

דף זה מתאר הוראות ההתקנה גרסה 9 של SDK JS Firebase, אשר משתמשת מודול JavaScript פורמט.

עבודה זו משתמשת NPM ודורש bundlers מודול או נוסעים במסגרת JavaScript משום SDK v9 מותאמת לעבודה עם bundlers מודול לחסל קוד בשימוש (עץ-רועד) וגודל 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: השתמש bundler מודול (webpack / אוסף) להפחתת גודל

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

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

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

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

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

הצעדים הבאים

למד על Firebase: