Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

הוסף את 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 באפליקציה שלך וצור אובייקט App 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 App בקוד שלך, תוכל להוסיף ולהתחיל להשתמש בשירותי Firebase.

שלב 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: השתמש bundler מודול (webpack / אוסף) להפחתת גודל

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

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

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

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

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

הצעדים הבאים

למד על Firebase: