اتبع هذا الدليل لاستخدام Firebase JavaScript SDK في تطبيق الويب الخاص بك أو كعميل لوصول المستخدم النهائي ، على سبيل المثال ، في سطح مكتب Node.js أو تطبيق إنترنت الأشياء.
المتطلبات الأساسية
قم بتثبيت المحرر المفضل لديك أو IDE.
سجّل الدخول إلى Firebase باستخدام حساب Google الخاص بك.
إذا لم يكن لديك بالفعل مشروع JavaScript وترغب فقط في تجربة أحد منتجات Firebase ، فيمكنك تنزيل أحد نماذج البدء السريع الخاصة بنا.
الخطوة 1 : أنشئ مشروع Firebase
قبل أن تتمكن من إضافة Firebase إلى تطبيق JavaScript ، تحتاج إلى إنشاء مشروع Firebase للاتصال بتطبيقك.
تفضل بزيارة فهم مشاريع Firebase لمعرفة المزيد حول مشاريع Firebase وأفضل الممارسات لإضافة تطبيقات إلى المشاريع.
الخطوة 2 : تسجيل تطبيقك في Firebase
بعد أن يكون لديك مشروع Firebase ، يمكنك إضافة تطبيق الويب الخاص بك إليه.
تفضل بزيارة فهم مشاريع Firebase لمعرفة المزيد حول أفضل الممارسات والاعتبارات لإضافة تطبيقات إلى مشروع Firebase.
في وسط صفحة نظرة عامة على مشروع وحدة تحكم ، انقر فوق رمز الويب ( ) لبدء سير عمل الإعداد.
إذا كنت قد أضفت بالفعل تطبيقًا إلى مشروع Firebase ، فانقر فوق إضافة تطبيق لعرض خيارات النظام الأساسي.
أدخل اسم الشهرة للتطبيق الخاص بك.
هذا اللقب هو معرّف داخلي ملائم ولا يكون مرئيًا إلا لك في وحدة تحكم Firebase.(اختياري) قم بإعداد Firebase Hosting لتطبيق الويب الخاص بك.
يمكنك إعداد Firebase Hosting الآن أو لاحقًا . يمكنك أيضًا ربط تطبيق الويب Firebase بموقع الاستضافة في أي وقت في إعدادات المشروع .
إذا اخترت إعداد Hosting up now ، فحدد موقعًا من القائمة المنسدلة لربطه بتطبيق Firebase Web.
تعرض هذه القائمة موقع الاستضافة الافتراضي لمشروعك وأي مواقع أخرى قمت بإعدادها في مشروعك.
أي موقع قمت بربطه بالفعل بتطبيق ويب Firebase غير متاح للارتباط الإضافي. يمكن ربط كل موقع استضافة بتطبيق ويب Firebase واحد فقط.
انقر فوق تسجيل التطبيق .
الخطوة 3 : إضافة Firebase SDKs وتهيئة Firebase
يوفر Firebase مكتبات JavaScript لمعظم منتجات Firebase ، بما في ذلك Remote Config و FCM والمزيد. يمكنك إضافة أي من المكتبات المتاحة إلى تطبيقك.
تعتمد كيفية إضافة Firebase SDKs إلى تطبيق الويب الخاص بك على ما إذا كنت قد اخترت استخدام Firebase Hosting لتطبيقك ، أو ما هي الأدوات التي تستخدمها مع تطبيقك (مثل مجموعة الوحدات النمطية) ، أو إذا كنت تقوم بتكوين Node.js برنامج. لمزيد من المساعدة في الاختيار بين هذه البدائل ، راجع طرق إضافة Web SDKs إلى تطبيقك .
إذا كنت مهتمًا بتجربة Beta SDK الجديدة المحسّنة لتطوير التطبيقات المعيارية ، فحدد خيار الإصدار 9 (Beta). ضع في اعتبارك أنه لا توجد التزامات دعم فني في إصدار بيتا.
مع npm
يمكنك تهيئة الاستيراد الجزئي لـ Firebase JavaScript SDK وتحميل منتجات Firebase التي تحتاجها فقط. إذا كنت تستخدم حزمة (مثل Browserify أو webpack) ، فيمكنك import
منتجات Firebase الفردية عندما تحتاج إليها.
ثبِّت Firebase JavaScript SDK:
إذا لم يكن لديك بالفعل ملف
package.json
، فأنشئ واحدًا عن طريق تشغيل الأمر التالي من جذر مشروع JavaScript الخاص بك:npm init
تثبيت
firebase
حزمة الآلية الوقائية الوطنية وحفظه إلى الخاصpackage.json
ملف عن طريق تشغيل:npm install --save firebase
لتضمين منتجات 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";
ابدأ تشغيل 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
يمكنك تهيئة الاستيراد الجزئي لـ Firebase JavaScript SDK وتحميل منتجات Firebase التي تحتاجها فقط. يخزن Firebase كل مكتبة من Firebase JavaScript SDK على شبكة CDN العالمية (شبكة توصيل المحتوى).
لتضمين منتجات 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.4.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.4.1/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script> </body>
ابدأ تشغيل 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 ، يمكنك تهيئة تطبيقك لتحميل مكتبات Firebase JavaScript SDK ديناميكيًا من عناوين URL المحجوزة. تعرف على المزيد حول إضافة حزم SDK عبر عناوين URL للاستضافة المحجوزة .
باستخدام خيار الإعداد هذا ، بعد النشر في Firebase ، يسحب تطبيقك تلقائيًا كائن تكوين Firebase من مشروع Firebase الذي قمت بالنشر إليه. يمكنك نشر نفس قاعدة الشفرة للعديد من مشاريع Firebase ، ولكن لا يتعين عليك تتبع تكوين Firebase الذي تستخدمه لـ firebase.initializeApp()
.
يعمل خيار الإعداد هذا أيضًا لاختبار تطبيق الويب محليًا .
لتضمين منتجات 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="/__/firebase/8.4.1/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="/__/firebase/8.4.1/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="/__/firebase/8.4.1/firebase-auth.js"></script> <script src="/__/firebase/8.4.1/firebase-firestore.js"></script> </body>
ابدأ تشغيل Firebase في تطبيقك (لا داعي لتضمين كائن تهيئة Firebase عند استخدام عناوين URL للاستضافة المحجوزة):
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
تطبيقات Node.js
ثبِّت Firebase JavaScript SDK:
إذا لم يكن لديك بالفعل ملف
package.json
، فأنشئ واحدًا عن طريق تشغيل الأمر التالي من جذر مشروع JavaScript الخاص بك:npm init
تثبيت
firebase
حزمة الآلية الوقائية الوطنية وحفظه إلى الخاصpackage.json
ملف عن طريق تشغيل:npm install --save firebase
استخدم أحد الخيارات التالية لاستخدام وحدة 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";
ابدأ تشغيل 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 في أي وقت.
إذا كنت تستخدم عناوين URL للاستضافة المحجوزة ، فسيتم سحب تهيئة Firebase تلقائيًا من مشروع Firebase ، لذلك لا تحتاج إلى تقديم كائن التكوين الخاص بك بشكل صريح في التعليمات البرمجية الخاصة بك.
نحن لا ننصح يدويا تحرير الكائن التكوين، وخاصة ما يلي المطلوبة "خيارات Firebase":
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 Hosting
إذا ربطت تطبيق الويب Firebase بموقع استضافة Firebase ، فيمكنك نشر محتوى موقعك وتكوينه الآن (عند إعداد تطبيق الويب) أو في أي وقت لاحق.
للنشر في Firebase ، ستستخدم Firebase CLI ، وهي أداة سطر أوامر.
قم بزيارة وثائق Firebase CLI للتعرف على كيفية تثبيت CLI أو التحديث إلى أحدث إصدار .
ابدأ مشروع Firebase. قم بتشغيل الأمر التالي من جذر دليل التطبيق المحلي الخاص بك:
firebase init
اربط دليل التطبيق المحلي بـ Firebase
يولد ملف
firebase.json
(ملف مطلوب لاستضافة Firebase)يطلب منك تحديد دليل جذر عام يحتوي على ملفاتك العامة الثابتة (HTML ، CSS ، JS ، إلخ.)
الاسم الافتراضي للدليل الذي يبحث عنه Firebase هو "عام". يمكنك أيضًا تعيين الدليل العام لاحقًا عن طريق تعديل ملف
firebase.json
مباشرةً.
انشر المحتوى الخاص بك وتهيئة الاستضافة إلى Firebase Hosting.
موقع الاستضافة الافتراضي
افتراضيا، كل مشروع Firebase ديه المجالات الفرعية الحرة على
web.app
وfirebaseapp.com
المجالات (PROJECT_ID .web.app
وPROJECT_ID .firebaseapp.com
).انشر على موقعك. قم بتشغيل الأمر التالي من الدليل الجذر لتطبيقك:
firebase deploy
اعرض موقعك على أي من مواقعك الافتراضية:
-
PROJECT_ID .web.app
-
PROJECT_ID .firebaseapp.com
-
موقع استضافة غير افتراضي
تدعم مشاريع Firebase مواقع متعددة (تعتبر هذه مواقع غير افتراضية ). يمكنك إضافة مواقع إضافية إلى مشروعك إما أثناء سير عمل إعداد تطبيق الويب لوحدة التحكم أو من صفحة استضافة وحدة التحكم.
أضف موقعك إلى ملف
firebase.json
(الذي تم إنشاؤه أثناءfirebase init
).لاحظ أن تكوين
firebase.json
يفترض أن لديك مستودعات منفصلة لكل موقع من مواقعك.{ "hosting": { "site": "SITE_ID", "public": "public", // ... } }
انشر على موقعك. قم بتشغيل الأمر التالي من الدليل الجذر لتطبيقك:
firebase deploy --only hosting:SITE_ID
عرض موقعك على إما:
-
SITE_ID .web.app
-
SITE_ID .firebaseapp.com
-
الخطوة 5 : الوصول إلى Firebase في تطبيقك
تدعم حزمة Firebase JavaScript SDK منتجات Firebase التالية. كل منتج اختياري ويمكن الوصول إليه كما هو موضح.
تعرف على الطرق المتاحة في الوثائق المرجعية لـ Firebase JavaScript .
منتج Firebase | Namespace (v8 وأقل) | الويب | Node.js |
---|---|---|---|
تحليلات | firebase.analytics() | ||
المصادقة | firebase.auth() | ||
سحابة Firestore | firebase.firestore() | ||
وظائف السحابة لـ Firebase Client SDK | firebase.functions() | ||
المراسلة السحابية | firebase.messaging() | ||
سحابة التخزين | firebase.storage() | ||
مراقبة الأداء (إصدار بيتا ) | firebase.performance() | ||
قاعدة بيانات الوقت الحقيقي | firebase.database() | ||
التكوين عن بعد (إصدار بيتا ) | firebase.remoteConfig() |
المكتبات المتاحة
الخطوات التالية
تعرف على Firebase:
استكشاف نماذج تطبيقات Firebase .
احصل على خبرة عملية مع Firebase Web Codelab .
استكشف الكود مفتوح المصدر في GitHub .
راجع البيئات المدعومة لـ Firebase JavaScript SDK.
يمكنك تسريع عملية التطوير باستخدام مكتبات مفتوحة المصدر إضافية يديرها Firebase ، مثل AngularFire و RxFire و FirebaseUI للويب .
استعد لإطلاق تطبيقك:
- قم بإعداد تنبيهات الميزانية لمشروعك في Google Cloud Console.
- راقب لوحة معلومات الاستخدام والفوترة في وحدة تحكم Firebase للحصول على صورة شاملة لاستخدام مشروعك عبر خدمات Firebase المتعددة.
- راجع قائمة التحقق من إطلاق Firebase .
أضف خدمات Firebase إلى تطبيقك:
استضف تطبيقك باستخدام Firebase Hosting .
قم بإعداد تدفق مصادقة المستخدم باستخدام المصادقة .
قم بتخزين البيانات ، مثل معلومات المستخدم ، باستخدام Cloud Firestore أو Realtime Database .
تخزين الملفات ، مثل الصور ومقاطع الفيديو ، باستخدام Cloud Storage .
احصل على نظرة ثاقبة لمشاكل أداء تطبيقك من خلال مراقبة الأداء .
تشغيل رمز الواجهة الخلفية الذي يعمل في بيئة آمنة باستخدام وظائف السحابة .
إرسال الإخطارات مع Cloud Messaging .