أضف Firebase إلى مشروع JavaScript الخاص بك

اتبع هذا الدليل لاستخدام Firebase JavaScript SDK في تطبيق الويب الخاص بك أو كعميل لوصول المستخدم النهائي، على سبيل المثال، في تطبيق Node.js لسطح المكتب أو تطبيق IoT.

الخطوة 1 : إنشاء مشروع Firebase وتسجيل تطبيقك

قبل أن تتمكن من إضافة Firebase إلى تطبيق JavaScript، تحتاج إلى إنشاء مشروع Firebase وتسجيل تطبيقك مع هذا المشروع. عند تسجيل تطبيقك في Firebase، ستحصل على كائن تكوين Firebase الذي ستستخدمه لربط تطبيقك بموارد مشروع Firebase.

قم بزيارة فهم مشاريع Firebase للتعرف على المزيد حول مشاريع Firebase وأفضل الممارسات لإضافة التطبيقات إلى المشاريع.

إذا لم يكن لديك مشروع JavaScript بالفعل وتريد فقط تجربة منتج Firebase، فيمكنك تنزيل أحد نماذج البدء السريع الخاصة بنا.

الخطوة 2 : تثبيت SDK وتهيئة Firebase

توضح هذه الصفحة تعليمات الإعداد لواجهة برمجة التطبيقات النمطية لـ Firebase JS SDK، والتي تستخدم تنسيق وحدة JavaScript .

يستخدم سير العمل هذا npm ويتطلب حزم الوحدات النمطية أو أدوات إطار عمل JavaScript نظرًا لأن واجهة برمجة التطبيقات المعيارية مُحسَّنة للعمل مع حزم الوحدات للتخلص من التعليمات البرمجية غير المستخدمة (اهتزاز الشجرة) وتقليل حجم SDK.

  1. تثبيت Firebase باستخدام npm:

    npm install firebase

  2. قم بتهيئة Firebase في تطبيقك وقم بإنشاء كائن تطبيق 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 في التعليمات البرمجية الخاصة بك، يمكنك إضافة خدمات Firebase والبدء في استخدامها.

الخطوة 3 : الوصول إلى Firebase في تطبيقك

تتوفر خدمات Firebase (مثل Cloud Firestore وAuthentication وRealtime Database وRemote Config والمزيد) للاستيراد ضمن حزم فرعية فردية.

يوضح المثال أدناه كيف يمكنك استخدام 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 : استخدم أداة تجميع الوحدات النمطية (webpack/Rollup) لتقليل الحجم

تم تصميم Firebase Web SDK للعمل مع مجمعات الوحدات النمطية لإزالة أي تعليمات برمجية غير مستخدمة (اهتزاز الشجرة). نوصي بشدة باستخدام هذا الأسلوب لتطبيقات الإنتاج. أدوات مثل Angular CLI أو Next.js أو Vue CLI أو Create React App تتعامل تلقائيًا مع تجميع الوحدات للمكتبات المثبتة من خلال npm والمستوردة إلى قاعدة التعليمات البرمجية الخاصة بك.

راجع دليلنا استخدام حزم الوحدات النمطية مع Firebase لمزيد من المعلومات.

خدمات Firebase المتاحة للويب

الآن بعد أن قمت بالإعداد لاستخدام Firebase، يمكنك البدء في إضافة واستخدام أي من خدمات Firebase المتوفرة التالية في تطبيق الويب الخاص بك.

توضح الأوامر التالية كيفية استيراد مكتبات Firebase المثبتة محليًا باستخدام npm . للحصول على خيارات استيراد بديلة، راجع وثائق المكتبات المتاحة .

الخطوات التالية

تعرف على Firebase: