Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
דף זה תורגם על ידי Cloud Translation API.
Switch to English

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

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

תנאים מוקדמים

  • התקן את העורך או IDE המועדפים עליך.

  • היכנס ל- Firebase באמצעות חשבון Google שלך.

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

שלב 1 : צור פרויקט Firebase

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

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

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

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

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

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

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

  2. הזן את הכינוי לאפליקציה שלך.
    כינוי זה הוא מזהה פנימי ונוח והוא גלוי רק לך במסוף Firebase.

  3. (אופציונלי) הגדר את אירוח Firebase עבור אפליקציית האינטרנט שלך.

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

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

      • רשימה זו מציגה את אתר אירוח ברירת המחדל של הפרויקט ואתרים אחרים שהגדרת בפרויקט שלך.

      • כל אתר שכבר קישרת לאפליקציית Firebase Web אינו זמין לקישור נוסף. ניתן לקשר כל אתר אירוח לאפליקציית Firebase אחת בלבד.

  4. לחץ על רשום אפליקציה .

שלב 3 : הוסף קבצי SDK של Firebase ואתחל את Firebase

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

האופן שבו אתה מוסיף SDK של Firebase לאפליקציית האינטרנט שלך תלוי אם בחרת להשתמש ב- Firebase Hosting עבור האפליקציה שלך, באילו כלים אתה משתמש באפליקציה שלך (כמו מקבץ מודולים), או אם אתה מגדיר Node.js אפליקציה. לקבלת עזרה נוספת בבחירה בין חלופות אלה, ראה דרכים להוספת SDK האינטרנט לאפליקציה שלך .

אם אתה מעוניין לנסות את ה- Beta SDK החדש המותאם לפיתוח אפליקציות מודולרי, בחר באפשרות לגרסה 9 (Beta). זכור כי אין חובות תמיכה טכנית במהדורת בטא.

עם npm

באפשרותך להגדיר ייבוא ​​חלקי של ה- SDK של Firebase JavaScript ולהעמיס רק את מוצרי Firebase שאתה זקוק להם. אם אתה משתמש בבאנדלר (כמו Browserify או webpack), תוכל import מוצרי Firebase בודדים כשתזדקק להם.

  1. התקן את ה- SDK של Firebase JavaScript:

    1. אם עדיין אין לך קובץ package.json , צור קובץ על ידי הפעלת הפקודה הבאה משורש פרויקט JavaScript שלך:

      npm init

    2. התקן את firebase חבילת NPM ולשמור אותו שלך package.json הקובץ על ידי הפעלה:

      npm install --save firebase

  2. כדי לכלול רק מוצרי Firebase ספציפיים (כמו אימות ו- Cloud Firestore), import מודולי Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. אתחל את Firebase באפליקציה שלך:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

מה- CDN

באפשרותך להגדיר ייבוא ​​חלקי של ה- SDK של Firebase JavaScript ולהעמיס רק את מוצרי Firebase שאתה זקוק להם. Firebase מאחסן כל ספרייה של ה- SDK של Firebase JavaScript ב- CDN העולמי שלנו (רשת מסירת תוכן).

  1. כדי לכלול רק מוצרי Firebase ספציפיים (למשל אימות ו- Cloud Firestore), הוסף את הסקריפטים הבאים בתחתית תג <body> , אך לפני שתשתמש בשירותי Firebase כלשהם:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
    </body>
    


  2. אתחל את Firebase באפליקציה שלך:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

מכתובות אתרים לאירוח

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

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

אפשרות הגדרה זו פועלת גם לבדיקת אפליקציית האינטרנט שלך באופן מקומי .

  1. כדי לכלול רק מוצרי Firebase ספציפיים (לדוגמה, Analytics, אימות או Cloud Firestore), הוסף את הסקריפטים הבאים בתחתית תג <body> , אך לפני שתשתמש בשירותי Firebase כלשהם:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.6.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.6.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.6.1/firebase-auth.js"></script>
      <script src="/__/firebase/8.6.1/firebase-firestore.js"></script>
    </body>
    


  2. אתחל את Firebase באפליקציה שלך (אין צורך לכלול את אובייקט התצורה של Firebase בעת שימוש בכתובות אתרים שמורות):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

אפליקציות Node.js

  1. התקן את ה- SDK של Firebase JavaScript:

    1. אם עדיין אין לך קובץ package.json , צור קובץ על ידי הפעלת הפקודה הבאה משורש פרויקט JavaScript שלך:

      npm init
    2. התקן את firebase חבילת NPM ולשמור אותו שלך package.json הקובץ על ידי הפעלה:

      npm install --save firebase
  2. השתמש באחת מהאפשרויות הבאות כדי להשתמש במודול Firebase באפליקציה שלך:

    • אתה יכול require מודולים מכל קובץ JavaScript

      כדי לכלול רק מוצרי Firebase ספציפיים (כמו אימות ו- Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • אתה יכול להשתמש ב- ES2015 כדי import מודולים

      כדי לכלול רק מוצרי Firebase ספציפיים (כמו אימות ו- Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. אתחל את Firebase באפליקציה שלך:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

למד על אובייקט התצורה של Firebase

כדי לאתחל את Firebase באפליקציה שלך, עליך לספק את תצורת פרויקט Firebase של האפליקציה שלך. תוכל להשיג את אובייקט התצורה של Firebase בכל עת.

  • אם אתה משתמש בכתובות אתרים שמורות , תצורת ה- Firebase שלך ​​נשלפת אוטומטית מפרויקט Firebase שלך, כך שאינך צריך לספק במפורש את אובייקט התצורה שלך בקוד שלך.

  • אנו לא ממליצים לערוך ידנית את אובייקט התצורה שלך, במיוחד את "אפשרויות Firebase" apiKey : apiKey , projectId ו- appID . אם אתה מאתחל את האפליקציה שלך עם ערכים לא חוקיים או חסרים עבור "אפשרויות Firebase" הנדרשות, משתמשי האפליקציה שלך עלולים להיתקל בבעיות חמורות.

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

הנה הפורמט של אובייקט תצורה עם כל השירותים מופעלים (ערכים אלה מאוכלסים אוטומטית):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

הנה אובייקט תצורה עם ערכים לדוגמה :

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

שלב 4 : (אופציונלי) התקן את CLI ופרוס לאירוח Firebase

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

כדי לפרוס ל- Firebase, תשתמש ב- Firebase CLI, כלי שורת פקודה.

  1. בקר בתיעוד ה- CLI של Firebase כדי ללמוד כיצד להתקין את ה- CLI או לעדכן לגרסתו האחרונה .

  2. אתחל את פרויקט Firebase שלך. הפעל את הפקודה הבאה משורש ספריית האפליקציות המקומית שלך:

    firebase init

  3. פרוס את התוכן ואת תצורת האירוח שלך לאירוח Firebase.

    אתר אירוח ברירת מחדל

    כברירת מחדל, כל פרויקט Firebase מכיל תת-חינם על web.app ו firebaseapp.com תחומים ( PROJECT_ID .web.app ו PROJECT_ID .firebaseapp.com ).

    1. פרוס לאתר שלך. הפעל את הפקודה הבאה מספריית הבסיס של האפליקציה שלך:

      firebase deploy
    2. צפה באתר שלך באחד מאתרי ברירת המחדל שלך:

      • PROJECT_ID .web.app
      • PROJECT_ID .firebaseapp.com

    אתר אירוח שאינו ברירת מחדל

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

    1. הוסף את האתר שלך לקובץ firebase.json שלך (שנוצר במהלך firebase init ).

      שים לב שתצורה זו של firebase.json מניחה שיש לך מאגרים נפרדים לכל אחד מהאתרים שלך.

      {
        "hosting": {
          "site": "SITE_ID",
          "public": "public",
      
          // ...
        }
      }
      
    2. פרוס לאתר שלך. הפעל את הפקודה הבאה מספריית הבסיס של האפליקציה שלך:

      firebase deploy --only hosting:SITE_ID
    3. צפה באתר שלך באחת מהכתובות:

      • SITE_ID .web.app
      • SITE_ID .firebaseapp.com

שלב 5 : גש ל- Firebase באפליקציה שלך

ה- SDK של JavaScript של Firebase תומך במוצרי Firebase הבאים. כל מוצר הוא אופציונלי וניתן לגשת אליו כמוצג.

למד אודות השיטות הזמינות בתיעוד ההפניה של JavaScript של Firebase .

מוצר Firebase מרחב שמות (v8 ומטה) אינטרנט Node.js
ניתוח firebase.analytics()
אימות firebase.auth()
ענן Firestore firebase.firestore()
פונקציות ענן עבור SDK של לקוח Firebase firebase.functions()
מסרים בענן firebase.messaging()
אחסון בענן firebase.storage()
ניטור ביצועים ( גרסת בטא ) firebase.performance()
מסד נתונים בזמן אמת firebase.database()
תצורה מרחוק ( גרסת בטא ) firebase.remoteConfig()

ספריות זמינות

הצעדים הבאים

למד אודות Firebase:

הוסף שירותי Firebase לאפליקציה שלך: