בזמן שאתה מפתח אפליקציית אינטרנט באמצעות Firebase, אתה עלול להיתקל במושגים לא מוכרים, או תחומים שבהם אתה צריך מידע נוסף כדי לקבל את ההחלטות הנכונות עבור הפרויקט שלך. עמוד זה נועד לענות על שאלות אלו או להפנות אותך למשאבים למידע נוסף.
אם יש לך שאלות לגבי נושא שאינו מכוסה בדף זה, בקר באחת מהקהילות המקוונות שלנו. אנו גם נעדכן את הדף הזה עם נושאים חדשים מעת לעת, אז בדוק שוב כדי לראות אם הוספנו את הנושא שאתה רוצה ללמוד עליו.
גרסאות SDK: מרווחות שמות ומודולריות
Firebase מספקת שני משטחי API עבור אפליקציות אינטרנט:
- JavaScript - מרווח שמות. זהו ממשק ה-JavaScript ש-Firebase שמרה עליו במשך שנים רבות ומוכר למפתחי אינטרנט עם אפליקציות Firebase ישנות יותר. מכיוון שה-API ברווח השמות אינו נהנה מתמיכה מתמשכת בתכונות חדשות, רוב האפליקציות החדשות צריכות במקום זאת לאמץ את ה-API המודולרי.
- JavaScript - מודולרי . SDK זה מבוסס על גישה מודולרית המספקת גודל SDK מופחת ויעילות רבה יותר עם כלי בניית JavaScript מודרניים כגון webpack או Rollup .
ה-API המודולרי משתלב היטב עם כלי בנייה שמסירים קוד שאינו בשימוש באפליקציה שלך, תהליך המכונה "טלטול עצים". אפליקציות שנבנו עם SDK זה נהנות מטביעות רגל מופחתות מאוד. ה-API עם רווח שמות, למרות שהוא זמין כמודול, אין לו מבנה מודולרי לחלוטין ואינו מספק את אותה מידה של הפחתת גודל.
למרות שרוב ה-API המודולרי עוקב אחר אותם דפוסים כמו ה-API עם רווח שמות, הארגון של הקוד שונה. בדרך כלל, ה-API עם מרחב שמות מכוון לתבנית מרחב שמות ושירות, בעוד שה-API המודולרי מכוון לפונקציות בדידות. לדוגמה, שרשרת הנקודות של ממשק ה-API עם רווחי שמות, כגון firebaseApp.auth()
, מוחלף ב-API המודולרי בפונקציה getAuth()
יחידה שלוקחת את firebaseApp
ומחזירה מופע Authentication.
משמעות הדבר היא שיישומי אינטרנט שנוצרו עם ה-API עם רווח שמות דורשים עיבוד מחדש על מנת לנצל את היתרונות של עיצוב אפליקציות מודולרי. עיין במדריך השדרוג לפרטים נוספים.
JavaScript - API מודולרי לאפליקציות חדשות
אם אתה מתחיל בשילוב חדש עם Firebase, אתה יכול להצטרף ל-API המודולרי כאשר אתה מוסיף ומאתחל את ה-SDK .
כשאתה מפתח את האפליקציה שלך, זכור שהקוד שלך יהיה מאורגן בעיקר סביב פונקציות . ב-API המודולרי, השירותים מועברים כארגומנט הראשון, ולאחר מכן הפונקציה משתמשת בפרטי השירות כדי לעשות את השאר. לדוגמה:
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
לדוגמאות ופרטים נוספים, עיין במדריכים לכל תחום מוצר וכן בתיעוד העזר המודולרי של API .
דרכים להוסיף את ערכות ה-SDK של האינטרנט לאפליקציה שלך
Firebase מספקת ספריות JavaScript עבור רוב מוצרי Firebase, כולל Config מרחוק, FCM ועוד. האופן שבו אתה מוסיף Firebase SDK לאפליקציית האינטרנט שלך תלוי באיזה כלי אתה משתמש עם האפליקציה שלך (כמו מאגד מודולים).
אתה יכול להוסיף כל אחת מהספריות הזמינות לאפליקציה שלך באמצעות אחת מהשיטות הנתמכות:
- npm (עבור חבילות מודולים)
- CDN (רשת אספקת תוכן)
להוראות הגדרה מפורטות, ראה הוסף Firebase לאפליקציית JavaScript שלך . שאר החלק הזה מכיל מידע שיעזור לך לבחור מבין האפשרויות הזמינות.
npm
הורדת חבילת Firebase npm (הכוללת חבילות דפדפן וגם חבילות Node.js) מספקת לך עותק מקומי של Firebase SDK, שעשוי להיות נחוץ עבור יישומים שאינם דפדפנים כגון אפליקציות Node.js, React Native או Electron. ההורדה כוללת חבילות Node.js ו-React Native כאופציה עבור חלק מהחבילות. החבילות של Node.js נחוצות לשלב הרינדור בצד השרת (SSR) של מסגרות SSR.
שימוש ב-npm עם מאגד מודולים כגון webpack או Rollup מספק אפשרויות אופטימיזציה כדי "לנער" קוד שאינו בשימוש ולהחיל מילוי ממוקד, מה שיכול להקטין מאוד את טביעת הרגל של האפליקציה שלך. הטמעת תכונות אלה עשויה להוסיף קצת מורכבות לתצורה ולשרשרת הבנייה שלך, אבל כלים שונים של CLI מיינסטרים יכולים לעזור להפחית זאת. כלים אלה כוללים את Angular , React , Vue , Next ואחרים.
לסיכום:
- מספק אופטימיזציה של גודל אפליקציה חשובה
- כלי עבודה חזקים זמין לניהול מודולים
- נדרש עבור SSR עם Node.js
CDN (רשת אספקת תוכן)
הוספת ספריות המאוחסנות ב-CDN של Firebase היא שיטת הגדרת SDK פשוטה שעשויה להיות מוכרת למפתחים רבים. שימוש ב-CDN כדי להוסיף את ה-SDKs, לא תזדקק לכלי בנייה, ושרשרת הבנייה שלך עשויה להיות פשוטה וקלה יותר לעבודה בהשוואה לאונדלר מודולים. אם אינך מודאג במיוחד מהגודל המותקן של האפליקציה שלך ואין לך דרישות מיוחדות כגון תעבורה מ-TypeScript, אז CDN יכול להיות בחירה טובה.
לסיכום:
- מוכר ופשוט
- מתאים כאשר גודל האפליקציה אינו מהווה דאגה גדולה
- מתאים כאשר האתר שלך אינו משתמש בכלי בנייה.
גרסאות Firebase Web SDK
ניתן להשתמש ב-Web SDK של Firebase גם ביישומי דפדפן וגם ב-Node. עם זאת, מספר מוצרים אינם זמינים בסביבות Node. עיין ברשימת הסביבות הנתמכות .
חלק מ-SDK של מוצרים מספקים גרסאות נפרדות של דפדפן ו-Node, שכל אחת מהן מסופקת בפורמטים של ESM ו-CJS, וחלק מה-SDK של מוצרים אפילו מספקות גרסאות של Cordova או React Native. Web SDK מוגדר לספק את הגרסה הנכונה בהתבסס על תצורת הכלים או הסביבה שלך ולא אמורה לדרוש בחירה ידנית ברוב המקרים. כל גרסאות ה-SDK נועדו לסייע בבניית אפליקציות אינטרנט או אפליקציות לקוח לגישה של משתמש קצה, כגון ביישום Node.js שולחני או IoT. אם המטרה שלך היא להגדיר גישה מנהלתית מסביבות מורשות (כגון שרתים), השתמש במקום זאת ב- Firebase Admin SDK .
איתור סביבה עם חבילות ומסגרות
כאשר אתה מתקין את Firebase Web SDK באמצעות npm, גרסאות JavaScript ו-Node.js מותקנות שתיהן. החבילה מספקת זיהוי סביבה מפורט כדי לאפשר את החבילות הנכונות עבור היישום שלך.
אם הקוד שלך משתמש require
Node.js, ה-SDK מוצא את החבילה הספציפית לצומת. אחרת, ההגדרות של ה-bunler שלך חייבות להיות מוגדרות כהלכה כדי לזהות את שדה נקודת הכניסה הנכונה בקובץ package.json
שלך (לדוגמה, main
, browser
או module
). אם אתה נתקל בשגיאות זמן ריצה עם ה-SDK, בדוק כדי לוודא שה-Bundler שלך מוגדר לתעדוף סוג החבילה הנכון עבור הסביבה שלך.
למד על אובייקט התצורה של Firebase
כדי לאתחל את Firebase באפליקציה שלך, עליך לספק את תצורת פרויקט Firebase של האפליקציה שלך. אתה יכול להשיג את אובייקט התצורה שלך ב-Firebase בכל עת.
אנו לא ממליצים לערוך ידנית את אובייקט התצורה שלך, במיוחד את "אפשרויות Firebase" הנדרשות הבאות:
apiKey
,projectId
ו-appID
. אם אתה מאתחל את האפליקציה שלך עם ערכים לא חוקיים או חסרים עבור "אפשרויות Firebase" הנדרשות האלה, המשתמשים באפליקציה שלך עלולים להיתקל בבעיות חמורות.אם הפעלת את Google Analytics בפרויקט Firebase שלך, אובייקט התצורה שלך מכיל את השדה
measurementId
. למד עוד על שדה זה בדף תחילת העבודה של Analytics .אם תפעיל את Google Analytics או Realtime Database לאחר יצירת Firebase Web App, ודא שאובייקט התצורה של Firebase שבו אתה משתמש באפליקציה שלך מעודכן בערכי התצורה המשויכים (
measurementId
ו-databaseURL
, בהתאמה). אתה יכול להשיג את אובייקט התצורה שלך ב-Firebase בכל עת.
להלן הפורמט של אובייקט תצורה עם כל השירותים מופעלים (ערכים אלה מאוכלסים אוטומטית):
var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", // The value of `databaseURL` depends on the location of the database databaseURL: "https://DATABASE_NAME.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field measurementId: "G-MEASUREMENT_ID", };
ספריות זמינות
אפשרויות הגדרה נוספות
עיכוב טעינה של ערכות פיתוח התוכנה Firebase (מ-CDN)
אתה יכול לדחות את הכללת ערכות ה-SDK של Firebase עד שהדף כולו ייטען. אם אתה משתמש בסקריפטים מודולריים של CDN של API עם <script type="module">
, זוהי התנהגות ברירת המחדל. אם אתה משתמש בסקריפטים עם רווחי CDN כמודול, השלם את השלבים הבאים כדי לדחות את הטעינה:
הוסף דגל
defer
לכל תגscript
עבור Firebase SDKs, ולאחר מכן דחה את האתחול של Firebase באמצעות סקריפט שני, לדוגמה:<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>
צור קובץ
init-firebase.js
, ולאחר מכן כלול את הדברים הבאים בקובץ:// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
השתמש במספר פרויקטים של Firebase באפליקציה אחת
ברוב המקרים, עליך לאתחל את Firebase רק באפליקציית ברירת מחדל אחת. אתה יכול לגשת ל-Firebase מאותה אפליקציה בשתי דרכים שוות:
Web modular API
import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a "default" Firebase project const defaultProject = initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = getStorage(defaultProject); let defaultFirestore = getFirestore(defaultProject); // Option 2: Access Firebase services using shorthand notation defaultStorage = getStorage(); defaultFirestore = getFirestore();
Web namespaced API
// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let defaultFirestore = defaultProject.firestore(); // Option 2: Access Firebase services using shorthand notation defaultStorage = firebase.storage(); defaultFirestore = firebase.firestore();
עם זאת, לפעמים אתה צריך לגשת למספר פרוייקטים של Firebase בו-זמנית. לדוגמה, ייתכן שתרצה לקרוא נתונים ממסד הנתונים של פרויקט Firebase אחד, אך לאחסן קבצים בפרויקט Firebase אחר. לחלופין, ייתכן שתרצה לאמת פרויקט אחד תוך שמירה על אימות של פרויקט שני.
ה-SDK של Firebase JavaScript מאפשר לך לאתחל ולהשתמש במספר פרויקטים של Firebase באפליקציה אחת בו-זמנית, כאשר כל פרויקט משתמש במידע תצורת Firebase משלו.
Web modular API
import { initializeApp, getApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a default Firebase project initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = initializeApp(otherProjectFirebaseConfig, "other"); console.log(getApp().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = getStorage(); const defaultFirestore = getFirestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = getStorage(otherProject); const otherFirestore = getFirestore(otherProject);
Web namespaced API
// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other"); console.log(firebase.app().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();
הפעל שרת אינטרנט מקומי לפיתוח
אם אתה בונה אפליקציית אינטרנט, חלקים מסוימים של Firebase JavaScript SDK דורשים שתשרת את אפליקציית האינטרנט שלך משרת ולא ממערכת הקבצים המקומית. אתה יכול להשתמש ב- Firebase CLI כדי להפעיל שרת מקומי.
אם כבר הגדרת Firebase Hosting עבור האפליקציה שלך, ייתכן שכבר השלמת כמה מהשלבים הבאים.
כדי לשרת את אפליקציית האינטרנט שלך, תשתמש ב-Firebase CLI, כלי שורת פקודה.
בקר בתיעוד של Firebase CLI כדי ללמוד כיצד להתקין את ה-CLI או לעדכן לגרסה העדכנית ביותר שלו .
אתחל את פרויקט Firebase שלך. הפעל את הפקודה הבאה מהשורש של ספריית האפליקציה המקומית שלך:
firebase init
מקשר את ספריית האפליקציות המקומית שלך ל-Firebase
יוצר קובץ
firebase.json
(קובץ נדרש עבור Firebase Hosting)מבקש ממך לציין ספריית שורש ציבורית המכילה את הקבצים הסטטיים הציבוריים שלך (HTML, CSS, JS וכו')
שם ברירת המחדל של הספרייה ש-Firebase מחפשת הוא "ציבורי". תוכל גם להגדיר את הספרייה הציבורית מאוחר יותר על ידי שינוי ישיר של קובץ
firebase.json
שלך.
הפעל את השרת המקומי לפיתוח. הפעל את הפקודה הבאה מהשורש של ספריית האפליקציה המקומית שלך:
firebase serve
משאבי קוד פתוח עבור Firebase JavaScript SDK
Firebase תומכת בפיתוח קוד פתוח, ואנו מעודדים תרומות ומשוב מהקהילה.
ערכות SDK של Firebase JavaScript
רוב ערכות ה-SDK של Firebase JavaScript מפותחות כספריות קוד פתוח במאגר ה-Firebase GitHub הציבורי שלנו.
דוגמאות להתחלה מהירה
Firebase שומרת על אוסף של דוגמאות להתחלה מהירה עבור רוב ממשקי ה-API של Firebase באינטרנט. מצא את ההתחלות המהירות הללו במאגר ההתחלה המהיר הציבורי שלנו Firebase GitHub . אתה יכול להשתמש בהתחלות מהירות אלה כקוד לדוגמה לשימוש ב-Firebase SDK.