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

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

הדוגמה להלן מראה כיצד תוכל להשתמש ב- SDK Cloud Firestore Lite לאחזור רשימת נתונים.

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: