اتّبِع هذا الدليل لاستخدام حزمة تطوير البرامج (SDK) Firebase JavaScript في تطبيق الويب أو كعميل لمنح العميل النهائي إذن الوصول، على سبيل المثال، في تطبيق Node.js لأجهزة الكمبيوتر المكتبي أو تطبيق إنترنت الأشياء.
الخطوة 1: إنشاء مشروع على Firebase وتسجيل تطبيقك
قبل أن تتمكّن من إضافة Firebase إلى تطبيق JavaScript، عليك إنشاء مشروع على Firebase وتسجيل تطبيقك في هذا المشروع. عند تسجيل تطبيقك في Firebase، ستحصل على عنصر إعدادات Firebase الذي ستستخدمه لربط تطبيقك بموارد مشروعك على Firebase.
انتقِل إلى مقالة التعرّف على مشاريع Firebase للاطّلاع على مزيد من المعلومات عن مشاريع Firebase وأفضل الممارسات لإضافة التطبيقات إلى المشاريع.
إنشاء مشروع على Firebase
-
في وحدة تحكّم Firebase، انقر على إضافة مشروع.
-
لإضافة موارد Firebase إلى مشروع Google Cloud حالي، أدخِل اسم المشروع أو اختَره من القائمة المنسدلة.
-
لإنشاء مشروع جديد، أدخِل اسم المشروع المطلوب. يمكنك أيضًا اختياريًا تعديل رقم تعريف المشروع المعروض أسفل اسم المشروع.
-
-
راجِع بنود Firebase واقبلها في حال طُلب منك ذلك.
-
انقر على متابعة.
-
(اختياري) يمكنك إعداد Google Analytics لمشروعك، ما يتيح لك الحصول على تجربة مثالية باستخدام أيّ من منتجات Firebase التالية:
اختَر إما حساب Google Analytics حاليًا أو أنشئ حسابًا جديدًا.
إذا أنشأت حسابًا جديدًا، اختَر Analytics الموقع الجغرافي لإعداد التقارير، ثم وافِق على إعدادات مشاركة البيانات وبنود Google Analytics لمشروعك.
-
انقر على إنشاء مشروع (أو إضافة Firebase، إذا كنت تستخدم مشروعًا حاليًا على Google Cloud).
توفّر Firebase الموارد تلقائيًا لمشروعك على Firebase. عند اكتمال العملية، سيتم نقلك إلى صفحة النظرة العامة لمشروع Firebase في وحدة تحكّم Firebase.
تسجيل تطبيقك
بعد إنشاء مشروع على Firebase، يمكنك تسجيل تطبيق الويب في هذا المشروع.
-
في وسط صفحة overview (نظرة عامة) للمشروع في وحدة تحكُّم Firebase، انقر على رمز الويب ( ) لبدء سير عمل الإعداد.
إذا سبق لك إضافة تطبيق إلى مشروعك على Firebase، انقر على إضافة تطبيق ل عرض خيارات المنصة.
-
أدخِل لقب تطبيقك.
هذا اللقب هو معرّف داخلي لتسهيل الاستخدام، ولا يظهر إلا لك في وحدة تحكّم Firebase. -
انقر على تسجيل التطبيق.
-
اتّبِع التعليمات الظاهرة على الشاشة لإضافة حزمة تطوير البرامج (SDK) لمنصّة Firebase وإعدادها في تطبيقك.
يمكنك أيضًا العثور على تعليمات أكثر تفصيلاً لإضافة حزمة تطوير البرامج (SDK) لبرنامج Firebase وإعدادها واستخدامها في الخطوات التالية من صفحة البدء هذه.
إذا لم يكن لديك مشروع JavaScript وأردت تجربة أحد منتجات Firebase، يمكنك تنزيل أحد عيّنات البدء السريع.
الخطوة 2: تثبيت حزمة تطوير البرامج (SDK) وإعداد Firebase
توضّح هذه الصفحة تعليمات الإعداد لواجهة برمجة التطبيقات المكوّنة من وحدات لحزمة تطوير البرامج (SDK) لبرنامج Firebase باستخدام JavaScript، والتي تستخدم تنسيق وحدة JavaScript.
يستخدم سير العمل هذا أداة npm ويتطلّب حِزم وحدات أو أدوات إطار عمل JavaScript لأنّ واجهة برمجة التطبيقات المُجمَّعة محسّنة للعمل مع حِزم الوحدات لإزالة الرموز البرمجية غير المستخدَمة (إزالة العناصر غير الضرورية من الشجرة) وتقليل حجم حزمة تطوير البرامج (SDK).
ثبِّت Firebase باستخدام npm:
npm install firebase
اضبط إعدادات 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 والبدء في استخدامها.
إذا كان تطبيقك يتضمّن ميزات ديناميكية تستند إلى العرض من جهة الخادم (SSR)، عليك اتّخاذ بعض الخطوات الإضافية لضمان استمرار الإعدادات في جميع عمليات العرض من جهة الخادم وعمليات العرض من جهة العميل. في منطق الخادم، نفِّذ واجهة
FirebaseServerApp
لتحسين إدارة الجلسات في تطبيقك باستخدام مهام الخدمة.
الخطوة 3: الوصول إلى Firebase في تطبيقك
تتوفّر خدمات Firebase (مثل Cloud Firestore وAuthentication وRealtime Database Remote Config والمزيد) لاستيرادها ضمن حزم فرعية individual.
يوضّح المثال أدناه كيفية استخدام حزمة 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) لتقليل الحجم
تم تصميم حزمة تطوير البرامج (SDK) لمنصة Firebase على الويب للعمل مع حِزم الوحدات لإزالة أي رمزبرمجي غير مُستخدَم (إزالة العناصر غير الضرورية). ننصحك بشدة باستخدام هذا النهج في التطبيقات العلنية. تتولى أدوات مثل Angular CLI أو Next.js أو Vue CLI أو Create React App تلقائيًا تجميع الوحدات للمكتبات المثبَّتة من خلال npm والمستورَدة إلى قاعدة بياناتك البرمجية.
اطّلِع على دليلنا استخدام حِزم الوحدات مع Firebase للحصول على مزيد من المعلومات.
خدمات Firebase المتاحة للويب
بعد إعداد استخدام Firebase، يمكنك البدء في إضافة أيٍّ من خدمات Firebase المتاحة التالية واستخدامها في تطبيق الويب.
توضّح الأوامر التالية كيفية استيراد مكتبات Firebase المثبَّتة على الجهاز باستخدام npm
. للحصول على خيارات استيراد بديلة، يُرجى الاطّلاع على
مستندات المكتبات المتاحة.
الخطوات التالية
مزيد من المعلومات عن Firebase:
اطّلِع على عيّنات من تطبيقات Firebase.
يمكنك الحصول على خبرة عملية من خلال درس الترميز على الويب في Firebase.
يمكنك الاطّلاع على الرمز البرمجي المفتوح المصدر في GitHub.
راجِع البيئات المتوافقة لحزمة تطوير البرامج (SDK) Firebase JavaScript.
يمكنك تسريع عملية التطوير باستخدام مكتبات إضافية مفتوحة المصدر تديرها Firebase، مثل AngularFire و RxFire و FirebaseUI للويب.
تجهيز تطبيقك للإطلاق:
- إعداد تنبيهات الميزانية لمشروعك في وحدة تحكّم Google Cloud
- يمكنك مراقبة لوحة بيانات الاستخدام والفوترة في وحدة تحكّم Firebase للحصول على نظرة عامة على استخدام مشروعك على مستوى خدمات Firebase المتعددة.
- راجِع قائمة التحقّق من إطلاق Firebase.