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 أو تطبيق إنترنت الأشياء.

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

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

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

إذا لم يكن لديك بالفعل مشروع جافا سكريبت ونريد فقط أن يجرب منتج Firebase، يمكنك تحميل واحد من عينات التشغيل السريع .

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

توضح هذه الصفحة تعليمات الإعداد لإصدار 9 من Firebase JS SDK، والذي يستخدم جافا سكريبت وحدة الشكل.

هذا العمل الاستخدامات الآلية الوقائية الوطنية ويتطلب bundlers حدة أو جافا سكريبت إطار الأدوات لهو الأمثل لSDK V9 للعمل مع bundlers وحدة للقضاء على كود غير المستخدمة (تهز الشجرة) وتقليل حجم 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 والمصادقة و 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 / التراكمية) للحد من حجم

تم تصميم Firebase Web SDK للعمل مع حزم الوحدات النمطية لإزالة أي كود غير مستخدم (اهتزاز الشجرة). نوصي بشدة باستخدام هذا الأسلوب لتطبيقات الإنتاج. أدوات مثل الزاوي CLI ، Next.js ، فيو CLI ، أو خلق رد فعل التطبيقات التعامل مع تلقائيا وحدة تجميع للمكتبات تثبيتها من خلال الآلية الوقائية الوطنية والمستوردة إلى مصدر برنامج الخاص بك.

انظر دليل لدينا عن طريق bundlers حدة مع Firebase لمزيد من المعلومات.

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

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

تظهر الأوامر التالية كيفية استيراد المكتبات Firebase المثبتة محليا مع npm . انظر الصفحة المكتبات المتوفرة لخيارات استيراد بديلة.

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

تعرف على Firebase: