مختبر ترميز الويب Firebase

1. نظرة عامة

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

ماذا ستتعلم

• مزامنة البيانات باستخدام Cloud Firestore و Cloud Storage لـ Firebase.
• قم بمصادقة المستخدمين باستخدام مصادقة Firebase.
• انشر تطبيق الويب الخاص بك على Firebase Hosting.
• أرسل إشعارات باستخدام Firebase Cloud Messaging.
• اجمع بيانات أداء تطبيق الويب الخاص بك.

ماذا ستحتاج

• محرر IDE / النص الذي تختاره ، مثل WebStorm أو Atom أو Sublime أو VS Code
• مدير الحزم npm ، والذي يأتي عادةً مع Node.js
• محطة / وحدة تحكم
• متصفح من اختيارك ، مثل Chrome
• نموذج التعليمات البرمجية لمعمل الرموز (راجع الخطوة التالية من مختبر الرموز لمعرفة كيفية الحصول على الشفرة.)

2. احصل على نموذج التعليمات البرمجية

استنساخ مستودع GitHub الخاص بـ codelab من سطر الأوامر:

git clone https://github.com/firebase/codelab-friendlychat-web

بدلاً من ذلك ، إذا لم يكن لديك git مثبتًا ، يمكنك تنزيل المستودع كملف ZIP .

قم باستيراد تطبيق المبتدئين

باستخدام IDE الخاص بك ، افتح أو قم باستيراد دليل 📁 web-start من المستودع المستنسخ. يحتوي دليل 📁 web-start هذا على رمز البداية الخاص بـ codelab ، والذي سيكون تطبيق ويب دردشة يعمل بكامل طاقته.

3. إنشاء مشروع Firebase وإعداده

أنشئ مشروع Firebase

1. سجّل الدخول إلى Firebase .
2. في وحدة تحكم Firebase ، انقر فوق إضافة مشروع ، ثم قم بتسمية مشروع Firebase FriendlyChat . تذكر معرّف المشروع لمشروع Firebase الخاص بك.
3. قم بإلغاء تحديد تمكين Google Analytics لهذا المشروع
4. انقر فوق إنشاء مشروع .

يستخدم التطبيق الذي سننشئه منتجات Firebase المتوفرة لتطبيقات الويب:

• مصادقة Firebase للسماح للمستخدمين بسهولة بتسجيل الدخول إلى تطبيقك.
• Cloud Firestore لحفظ البيانات المنظمة على السحابة والحصول على إشعار فوري عند تغيير البيانات.
• Cloud Storage for Firebase لحفظ الملفات في السحابة.
• استضافة Firebase لاستضافة أصولك وخدمتها.
• Firebase Cloud Messaging لإرسال إشعارات الدفع وعرض الإشعارات المنبثقة في المتصفح.
• مراقبة أداء Firebase لجمع بيانات أداء المستخدم لتطبيقك.

تحتاج بعض هذه المنتجات إلى تكوين خاص أو تحتاج إلى التمكين باستخدام وحدة تحكم Firebase.

أضف تطبيق ويب Firebase إلى المشروع

1. انقر فوق أيقونة الويب لإنشاء تطبيق ويب Firebase جديد.
2. سجّل التطبيق بالاسم المستعار Friendly Chat ، ثم حدد المربع بجوار إعداد Firebase Hosting لهذا التطبيق أيضًا . انقر فوق تسجيل التطبيق .
3. في الخطوة التالية ، سترى كائن تكوين. انسخ كائن JS فقط (وليس HTML المحيط) في firebase-config.js

تفعيل تسجيل الدخول إلى Google لمصادقة Firebase

للسماح للمستخدمين بتسجيل الدخول إلى تطبيق الويب بحساباتهم على Google ، سنستخدم طريقة تسجيل الدخول إلى Google .

ستحتاج إلى تمكين تسجيل الدخول إلى Google :

1. في وحدة تحكم Firebase ، حدد موقع قسم الإنشاء في اللوحة اليمنى.
2. انقر فوق المصادقة ، ثم انقر فوق علامة التبويب طريقة تسجيل الدخول (أو انقر هنا للانتقال مباشرة إلى هناك).
3. قم بتمكين موفر تسجيل الدخول إلى Google ، ثم انقر فوق حفظ .
4. عيّن الاسم العام لتطبيقك على Friendly Chat واختر بريدًا إلكترونيًا لدعم المشروع من القائمة المنسدلة.
5. هيئ شاشة موافقة OAuth في Google Cloud Console وأضف شعارًا:

تفعيل Cloud Firestore

يستخدم تطبيق الويب Cloud Firestore لحفظ رسائل الدردشة وتلقي رسائل الدردشة الجديدة.

ستحتاج إلى تمكين Cloud Firestore:

1. في قسم إنشاء وحدة تحكم Firebase ، انقر فوق قاعدة بيانات Firestore .
2. انقر على إنشاء قاعدة بيانات في جزء Cloud Firestore.

3. حدد خيار البدء في وضع الاختبار ، ثم انقر فوق التالي بعد قراءة إخلاء المسؤولية حول قواعد الأمان.

يضمن وضع الاختبار أنه يمكننا الكتابة بحرية إلى قاعدة البيانات أثناء التطوير. سنجعل قاعدة بياناتنا أكثر أمانًا لاحقًا في مختبر الرموز هذا.

4. قم بتعيين الموقع حيث يتم تخزين بيانات Cloud Firestore الخاصة بك. يمكنك ترك هذا كإعداد افتراضي أو اختيار منطقة قريبة منك. انقر فوق تم لتوفير Firestore.

تفعيل التخزين السحابي

يستخدم تطبيق الويب Cloud Storage لـ Firebase لتخزين الصور وتحميلها ومشاركتها.

ستحتاج إلى تمكين التخزين السحابي:

1. في قسم إنشاء وحدة تحكم Firebase ، انقر على التخزين .
2. إذا لم يكن هناك زر البدء ، فهذا يعني أن التخزين السحابي ممكّن بالفعل ، ولست بحاجة إلى اتباع الخطوات أدناه.
3. انقر فوق البدء .
4. اقرأ إخلاء المسؤولية حول قواعد الأمان لمشروع Firebase الخاص بك ، ثم انقر فوق التالي .

باستخدام قواعد الأمان الافتراضية ، يمكن لأي مستخدم تمت مصادقته كتابة أي شيء إلى Cloud Storage. سنجعل التخزين الخاص بنا أكثر أمانًا لاحقًا في مختبر الرموز هذا.

4. يتم تحديد موقع Cloud Storage مسبقًا بنفس المنطقة التي اخترتها لقاعدة بيانات Cloud Firestore الخاصة بك. انقر فوق تم لإكمال الإعداد.

4. قم بتثبيت واجهة سطر أوامر Firebase

تسمح لك واجهة سطر أوامر Firebase (CLI) باستخدام Firebase Hosting لخدمة تطبيق الويب الخاص بك محليًا ، وكذلك لنشر تطبيق الويب الخاص بك في مشروع Firebase الخاص بك.

1. قم بتثبيت CLI عن طريق تشغيل الأمر npm التالي:

npm -g install firebase-tools

2. تحقق من تثبيت CLI بشكل صحيح عن طريق تشغيل الأمر التالي:

firebase --version

تأكد من أن إصدار Firebase CLI هو v4.1.0 أو أحدث.

3. قم بتفويض Firebase CLI عن طريق تشغيل الأمر التالي:

firebase login

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

4. تأكد من وصول سطر الأوامر إلى دليل web-start المحلي للتطبيق.
5. اربط تطبيقك بمشروع Firebase عن طريق تشغيل الأمر التالي:

firebase use --add

6. عند المطالبة ، حدد معرف المشروع الخاص بك ، ثم امنح مشروع Firebase اسمًا مستعارًا.

يكون الاسم المستعار مفيدًا إذا كانت لديك بيئات متعددة (إنتاج ، مرحلة ، إلخ). ومع ذلك ، بالنسبة لمعمل الرموز هذا ، دعنا نستخدم الاسم default .

7. اتبع التعليمات المتبقية في سطر الأوامر الخاص بك.

5. قم بتشغيل تطبيق المبتدئين محليًا

الآن بعد أن قمت باستيراد وتكوين مشروعك ، فأنت جاهز لتشغيل تطبيق الويب لأول مرة.

1. في وحدة التحكم من دليل web-start ، قم بتشغيل أمر Firebase CLI التالي:

firebase serve --only hosting

2. يجب أن يعرض سطر الأوامر الاستجابة التالية:

✔  hosting: Local server: http://localhost:5000

نحن نستخدم محاكي Firebase Hosting لخدمة تطبيقنا محليًا. يجب أن يكون تطبيق الويب متاحًا الآن من http: // localhost: 5000 . يتم تقديم جميع الملفات الموجودة ضمن الدليل public .

3. باستخدام المستعرض الخاص بك ، افتح التطبيق الخاص بك على http: // localhost: 5000 .

يجب أن ترى واجهة مستخدم تطبيق FriendlyChat ، والتي لا تعمل (بعد!):

لا يمكن للتطبيق فعل أي شيء في الوقت الحالي ، ولكن بمساعدتك سيكون قريبًا! لقد وضعنا لك واجهة المستخدم فقط حتى الآن.

لنقم الآن ببناء دردشة في الوقت الفعلي!

6. استيراد وتهيئة Firebase

قم باستيراد حزمة Firebase SDK

نحتاج إلى استيراد Firebase SDK إلى التطبيق. هناك طرق متعددة للقيام بذلك كما هو موضح في وثائقنا . على سبيل المثال ، يمكنك استيراد المكتبة من شبكة CDN الخاصة بنا. أو يمكنك تثبيته محليًا باستخدام npm ، ثم حزمه في تطبيقك إذا كنت تستخدم Browserify.

سنحصل على Firebase SDK من npm ونستخدم Webpack لتجميع الكود الخاص بنا. نحن نقوم بذلك حتى يتمكن Webpack من إزالة أي كود غير ضروري ، مع الحفاظ على حجم حزمة JS صغيرًا للتأكد من تحميل تطبيقنا في أسرع وقت ممكن. بالنسبة لمعمل الشفرات هذا ، قمنا بالفعل بإنشاء ملف web-start/package.json يتضمن Firebase SDK كعنصر تبعية ، بالإضافة إلى استيراد الوظائف المطلوبة في الجزء العلوي من web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

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

ثبّت Firebase SDK وابدأ إصدار Webpack الخاص بك

نحتاج إلى تشغيل بعض الأوامر لبدء إنشاء تطبيقنا.

1. افتح نافذة طرفية جديدة
2. تأكد من أنك في دليل web-start
3. قم بتشغيل npm install لتنزيل Firebase SDK
4. قم بتشغيل npm run start لبدء Webpack. سيعيد Webpack الآن باستمرار بناء الكود المصدري لبقية مختبر الكود.

هيئ Firebase

نحتاج أيضًا إلى تكوين Firebase SDK لإخباره بمشروع Firebase الذي نستخدمه.

1. انتقل إلى إعدادات المشروع في وحدة تحكم Firebase
2. في بطاقة "تطبيقاتك" ، حدد لقب التطبيق الذي تريد كائن تهيئة له.
3. حدد "تكوين" من جزء مقتطف Firebase SDK.
4. انسخ مقتطف كائن التكوين ، ثم أضفه إلى web-start/src/firebase-config.js .

firebase-config.js

const config = {
  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",
};

الآن ، انتقل إلى الجزء السفلي من web-start/src/index.js وقم بتهيئة Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. إعداد تسجيل دخول المستخدم

يجب أن تكون حزمة Firebase SDK جاهزة الآن للاستخدام نظرًا لاستيرادها وتهيئتها في index.js . سنقوم الآن بتنفيذ تسجيل دخول المستخدم باستخدام مصادقة Firebase .

قم بمصادقة المستخدمين لديك باستخدام تسجيل الدخول بحساب Google

في التطبيق ، عندما ينقر المستخدم على زر تسجيل الدخول باستخدام Google ، يتم تشغيل وظيفة signIn . (لقد أعددنا ذلك بالفعل من أجلك!) بالنسبة إلى مختبر الرموز هذا ، نريد تخويل Firebase لاستخدام Google كموفر الهوية. سنستخدم نافذة منبثقة ، ولكن تتوفر عدة طرق أخرى من Firebase.

1. في دليل web-start ، في الدليل الفرعي src/ ، افتح index.js .
2. ابحث عن وظيفة signIn .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

يتم تشغيل وظيفة signOut عندما ينقر المستخدم على زر تسجيل الخروج .

1. ارجع إلى ملف src/index.js .
2. ابحث عن signOutUser .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

تتبع حالة المصادقة

لتحديث واجهة المستخدم الخاصة بنا وفقًا لذلك ، نحتاج إلى طريقة للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول أو تسجيل الخروج. باستخدام مصادقة Firebase ، يمكنك تسجيل مراقب في حالة المصادقة التي سيتم تشغيلها في كل مرة تتغير فيها حالة المصادقة.

1. ارجع إلى ملف src/index.js .
2. ابحث عن وظيفة initFirebaseAuth .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

يسجل الكود أعلاه الوظيفة authStateObserver كمراقب حالة المصادقة. سيتم تشغيله في كل مرة تتغير فيها حالة المصادقة (عندما يقوم المستخدم بتسجيل الدخول أو تسجيل الخروج). سنقوم في هذه المرحلة بتحديث واجهة المستخدم لعرض أو إخفاء زر تسجيل الدخول وزر تسجيل الخروج وصورة ملف تعريف المستخدم الذي قام بتسجيل الدخول وما إلى ذلك. تم تنفيذ جميع أجزاء واجهة المستخدم هذه بالفعل.

اعرض معلومات المستخدم الذي قام بتسجيل الدخول

نريد عرض صورة الملف الشخصي للمستخدم الذي قام بتسجيل الدخول واسم المستخدم في الشريط العلوي لتطبيقنا. في Firebase ، تكون بيانات المستخدم الذي قام بتسجيل الدخول متاحة دائمًا في كائن currentUser . في وقت سابق ، قمنا بإعداد وظيفة authStateObserver ليتم تشغيلها عندما يقوم المستخدم بتسجيل الدخول حتى يتم تحديث واجهة المستخدم الخاصة بنا وفقًا لذلك. ستستدعي getProfilePicUrl و getUserName عند تشغيلها.

1. ارجع إلى ملف src/index.js .
2. ابحث عن الدالتين getProfilePicUrl و getUserName .
3. استبدل كلتا الوظيفتين بالكود التالي.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

نعرض رسالة خطأ إذا حاول المستخدم إرسال رسائل عندما لا يقوم المستخدم بتسجيل الدخول. (يمكنك تجربتها ، على الرغم من ذلك!) لذلك ، نحتاج إلى اكتشاف ما إذا كان المستخدم قد قام بالفعل بتسجيل الدخول.

1. ارجع إلى ملف src/index.js .
2. ابحث عن الوظيفة isUserSignedIn .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

اختبار تسجيل الدخول إلى التطبيق

1. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase serve --only hosting على سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. قم بتسجيل الدخول إلى التطبيق باستخدام زر تسجيل الدخول وحساب Google الخاص بك. إذا رأيت رسالة خطأ تفيد بأن auth/operation-not-allowed ، فتحقق للتأكد من أنك قمت بتمكين تسجيل الدخول إلى Google كموفر مصادقة في وحدة تحكم Firebase.
3. بعد تسجيل الدخول ، يجب عرض صورة ملفك الشخصي واسم المستخدم:

8. اكتب رسائل إلى Cloud Firestore

في هذا القسم ، سنكتب بعض البيانات إلى Cloud Firestore حتى نتمكن من ملء واجهة المستخدم للتطبيق. يمكن القيام بذلك يدويًا باستخدام وحدة تحكم Firebase ، لكننا سنفعل ذلك في التطبيق نفسه لإثبات كتابة Cloud Firestore الأساسية.

نموذج البيانات

يتم تقسيم بيانات Cloud Firestore إلى مجموعات ومستندات وحقول ومجموعات فرعية. سنخزن كل رسالة من الدردشة كمستند في مجموعة المستوى الأعلى تسمى messages .

أضف رسائل إلى Cloud Firestore

لتخزين رسائل الدردشة التي يكتبها المستخدمون ، سنستخدم Cloud Firestore .

في هذا القسم ، ستضيف وظيفة للمستخدمين لكتابة رسائل جديدة إلى قاعدة البيانات الخاصة بك. يقوم المستخدم بالنقر فوق الزر "إرسال" بتشغيل مقتطف الشفرة أدناه. يضيف كائن رسالة بمحتويات حقول الرسالة إلى مثيل Cloud Firestore في مجموعة messages . تضيف طريقة add() مستندًا جديدًا بمعرف تم إنشاؤه تلقائيًا إلى المجموعة.

1. ارجع إلى ملف src/index.js .
2. ابحث عن وظيفة saveMessage .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

اختبار إرسال الرسائل

1. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase serve --only hosting على سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. بعد تسجيل الدخول ، أدخل رسالة مثل "مرحبًا!" ، ثم انقر فوق إرسال . سيؤدي هذا إلى كتابة الرسالة في Cloud Firestore. ومع ذلك ، لن ترى البيانات في تطبيق الويب الفعلي الخاص بك لأننا ما زلنا بحاجة إلى تنفيذ استرداد البيانات (القسم التالي من مخطط الشفرة).
3. يمكنك رؤية الرسالة المضافة حديثًا في Firebase Console. افتح وحدة تحكم Firebase. ضمن قسم الإنشاء ، انقر فوق قاعدة بيانات Firestore (أو انقر هنا وحدد مشروعك) وسترى مجموعة الرسائل بالرسالة المضافة حديثًا:

9. قراءة الرسائل

مزامنة الرسائل

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

سنضيف رمزًا يستمع إلى الرسائل المضافة حديثًا من التطبيق. في هذا الكود ، سنقوم بتسجيل المستمع الذي يستمع إلى التغييرات التي تم إجراؤها على البيانات. سنعرض آخر 12 رسالة فقط من الدردشة لتجنب عرض سجل طويل جدًا عند التحميل.

1. ارجع إلى ملف src/index.js .
2. ابحث عن وظيفة loadMessages .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

للاستماع إلى الرسائل في قاعدة البيانات ، نقوم بإنشاء استعلام على مجموعة باستخدام وظيفة collection لتحديد مجموعة البيانات التي نريد الاستماع إليها. في الكود أعلاه ، نستمع إلى التغييرات داخل messages المجموعة ، حيث يتم تخزين رسائل الدردشة. نحن أيضًا نطبق حدًا من خلال الاستماع فقط إلى آخر 12 رسالة باستخدام .limit(12) وترتيب الرسائل حسب التاريخ باستخدام orderBy('timestamp', 'desc') للحصول على أحدث 12 رسالة.

تأخذ وظيفة onSnapshot الاستعلام كمعاملها الأول ، ودالة رد الاتصال كثانيها. سيتم تشغيل وظيفة رد الاتصال عند وجود أي تغييرات على المستندات التي تطابق الاستعلام. قد يكون هذا في حالة حذف رسالة أو تعديلها أو إضافتها. يمكنك قراءة المزيد حول هذا الأمر في وثائق Cloud Firestore .

اختبار مزامنة الرسائل

1. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase serve --only hosting على سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. يجب أن يتم عرض الرسائل التي قمت بإنشائها مسبقًا في قاعدة البيانات في FriendlyChat UI (انظر أدناه). لا تتردد في كتابة رسائل جديدة ؛ يجب أن تظهر على الفور.
3. (اختياري) يمكنك محاولة حذف أو تعديل أو إضافة رسائل جديدة يدويًا في قسم قاعدة البيانات في وحدة تحكم Firebase ؛ يجب أن تنعكس أي تغييرات في واجهة المستخدم.

تهانينا! أنت تقرأ مستندات Cloud Firestore في تطبيقك!

10. إرسال الصور

سنقوم الآن بإضافة ميزة تشارك الصور.

بينما يعد Cloud Firestore مفيدًا لتخزين البيانات المنظمة ، فإن التخزين السحابي مناسب بشكل أفضل لتخزين الملفات. Cloud Storage for Firebase هي خدمة تخزين ملفات / blob ، وسنستخدمها لتخزين أي صور يشاركها المستخدم باستخدام تطبيقنا.

حفظ الصور في التخزين السحابي

بالنسبة إلى مختبر الرموز هذا ، أضفنا لك بالفعل زرًا يؤدي إلى تشغيل مربع حوار منتقي الملفات. بعد تحديد ملف ، يتم استدعاء وظيفة saveImageMessage ، ويمكنك الحصول على مرجع للملف المحدد. تحقق وظيفة saveImageMessage ما يلي:

1. ينشئ رسالة دردشة "عنصر نائب" في موجز الدردشة ، بحيث يرى المستخدمون الرسوم المتحركة "جارٍ التحميل" أثناء تحميل الصورة.
2. يقوم بتحميل ملف الصورة إلى Cloud Storage إلى هذا المسار: /<uid>/<messageId>/<file_name>
3. يولد عنوان URL قابل للقراءة بشكل عام لملف الصورة.
4. يحدّث رسالة الدردشة بعنوان URL الخاص بملف الصورة الذي تم تحميله حديثًا بدلاً من صورة التحميل المؤقتة.

ستضيف الآن وظيفة إرسال صورة:

1. ارجع إلى ملف src/index.js .
2. ابحث عن وظيفة saveImageMessage .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

اختبار إرسال الصور

1. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase serve --only hosting على سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. بعد تسجيل الدخول ، انقر فوق زر تحميل الصورة وحدد ملف صورة باستخدام منتقي الملفات. إذا كنت تبحث عن صورة ، فلا تتردد في استخدام هذه الصورة الرائعة لفنجان القهوة .
3. يجب أن تظهر رسالة جديدة في واجهة مستخدم التطبيق مع الصورة المحددة:

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

11. إظهار الإخطارات

سنقوم الآن بإضافة دعم لإخطارات المتصفح. سيقوم التطبيق بإعلام المستخدمين عند نشر رسائل جديدة في الدردشة. Firebase Cloud Messaging (FCM) هو حل مراسلة عبر الأنظمة الأساسية يتيح لك تسليم الرسائل والإشعارات بشكل موثوق دون أي تكلفة.

أضف عامل خدمة FCM

يحتاج تطبيق الويب إلى عامل خدمة يتلقى ويعرض إشعارات الويب.

1. من دليل web-start ، في دليل src ، افتح firebase-messaging-sw.js .
2. أضف المحتوى التالي إلى هذا الملف.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

يحتاج عامل الخدمة ببساطة إلى تحميل وتهيئة Firebase Cloud Messaging SDK ، والتي ستهتم بعرض الإشعارات.

احصل على رموز جهاز FCM

عندما يتم تمكين الإشعارات على جهاز أو متصفح ، سيتم إعطاؤك رمزًا مميزًا للجهاز . رمز الجهاز هذا هو ما نستخدمه لإرسال إشعار إلى جهاز معين أو متصفح معين.

عندما يقوم المستخدم بتسجيل الدخول ، نقوم باستدعاء وظيفة saveMessagingDeviceToken . هذا هو المكان الذي سنحصل فيه على رمز جهاز FCM من المتصفح وحفظه في Cloud Firestore.

1. ارجع إلى ملف src/index.js .
2. ابحث عن الوظيفة saveMessagingDeviceToken .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

ومع ذلك ، لن يعمل هذا الرمز في البداية. لكي يتمكن تطبيقك من استرداد الرمز المميز للجهاز ، يحتاج المستخدم إلى منح التطبيق إذنًا لعرض الإشعارات (الخطوة التالية من مختبر الرموز).

طلب أذونات لإظهار الإخطارات

عندما لا يكون المستخدم قد منح التطبيق الخاص بك إذنًا لعرض الإشعارات ، فلن يتم منحك رمزًا مميزًا للجهاز. في هذه الحالة ، نسمي طريقة firebase.messaging().requestPermission() ، والتي ستعرض مربع حوار متصفح يطلب هذا الإذن ( في المتصفحات المدعومة ).

1. ارجع إلى ملف src/index.js .
2. ابحث عن طلب الوظيفة requestNotificationsPermissions .
3. استبدل الوظيفة بأكملها بالكود التالي.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

احصل على رمز جهازك

1. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase serve --only hosting على سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. بعد تسجيل الدخول ، من المفترض أن يظهر مربع حوار إذن الإشعارات:
3. انقر فوق السماح .
4. افتح وحدة تحكم JavaScript في المستعرض الخاص بك. يجب أن تشاهد الرسالة التالية: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
5. انسخ الرمز المميز لجهازك. ستحتاجه للمرحلة التالية من مختبر الرموز.

إرسال إشعار إلى جهازك

الآن بعد أن أصبح لديك رمز جهازك المميز ، يمكنك إرسال إشعار.

1. افتح علامة التبويب Cloud Messaging في وحدة تحكم Firebase .
2. انقر فوق "إعلام جديد"
3. أدخل عنوان الإخطار ونص الإخطار.
4. على الجانب الأيمن من الشاشة ، انقر فوق "إرسال رسالة اختبار"
5. أدخل رمز الجهاز الذي نسخته من وحدة تحكم JavaScript في متصفحك ، ثم انقر فوق علامة الجمع ("+")
6. انقر فوق "اختبار"

إذا كان تطبيقك في المقدمة ، فسترى الإشعار في وحدة تحكم JavaScript.

إذا كان التطبيق الخاص بك في الخلفية ، يجب أن يظهر إشعار في متصفحك ، كما في هذا المثال:

12. قواعد أمان Cloud Firestore

عرض قواعد أمان قاعدة البيانات

يستخدم Cloud Firestore لغة قواعد محددة لتحديد حقوق الوصول والأمان والتحقق من صحة البيانات.

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

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

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

سنقوم بتحديث القواعد لتقييد الأشياء باستخدام القواعد التالية:

قواعد firestore

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

تحديث قواعد أمان قاعدة البيانات

هناك طريقتان لتعديل قواعد أمان قاعدة البيانات ، إما في وحدة تحكم Firebase أو من ملف القواعد المحلية المنشور باستخدام Firebase CLI.

لتحديث قواعد الأمان في وحدة تحكم Firebase:

1. انتقل إلى قسم قاعدة البيانات من اللوحة اليمنى ، ثم انقر فوق علامة التبويب القواعد .
2. استبدل القواعد الافتراضية الموجودة بالفعل في وحدة التحكم بالقواعد الموضحة أعلاه.
3. انقر فوق نشر .

لتحديث قواعد الأمان من ملف محلي:

1. من دليل web-start ، افتح firestore.rules .
2. استبدل القواعد الافتراضية الموجودة بالفعل في الملف بالقواعد الموضحة أعلاه.
3. من دليل web-start ، افتح firebase.json .
4. أضف السمة firestore.rules التي تشير إلى firestore.rules ، كما هو موضح أدناه. (يجب أن تكون سمة hosting موجودة بالفعل في الملف.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

5. انشر قواعد الأمان باستخدام Firebase CLI عن طريق تشغيل الأمر التالي:

firebase deploy --only firestore

6. يجب أن يعرض سطر الأوامر الاستجابة التالية:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. قواعد أمان التخزين السحابي

عرض قواعد أمان التخزين السحابي

يستخدم Cloud Storage for Firebase لغة قواعد محددة لتحديد حقوق الوصول والأمان وعمليات التحقق من صحة البيانات.

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

سنقوم بتحديث القواعد للقيام بما يلي:

• اسمح لكل مستخدم بالكتابة فقط في مجلداته المحددة
• اسمح لأي شخص بالقراءة من Cloud Storage
• تأكد من أن الملفات التي تم تحميلها عبارة عن صور
• قصر حجم الصور التي يمكن تحميلها على 5 ميغا بايت كحد أقصى

يمكن تنفيذ ذلك باستخدام القواعد التالية:

التخزين. القواعد

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

تحديث قواعد أمان التخزين السحابي

هناك طريقتان لتعديل قواعد أمان التخزين: إما في وحدة تحكم Firebase أو من ملف قواعد محلية تم نشره باستخدام Firebase CLI.

لتحديث قواعد الأمان في وحدة تحكم Firebase:

1. انتقل إلى قسم التخزين من اللوحة اليمنى ، ثم انقر فوق علامة التبويب القواعد .
2. استبدل القاعدة الافتراضية الموجودة بالفعل في وحدة التحكم بالقواعد الموضحة أعلاه.
3. انقر فوق نشر .

لتحديث قواعد الأمان من ملف محلي:

1. من دليل web-start ، افتح storage.rules .
2. استبدل القواعد الافتراضية الموجودة بالفعل في الملف بالقواعد الموضحة أعلاه.
3. من دليل web-start ، افتح firebase.json .
4. أضف السمة storage.rules التي تشير إلى ملف storage.rules ، كما هو موضح أدناه. (يجب أن تكون سمة hosting وقاعدة database موجودة بالفعل في الملف.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

6. انشر قواعد الأمان باستخدام Firebase CLI عن طريق تشغيل الأمر التالي:

firebase deploy --only storage

7. يجب أن يعرض سطر الأوامر الاستجابة التالية:

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. جمع بيانات الأداء

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

هناك طرق مختلفة للتكامل مع Firebase Performance Monitoring JavaScript SDK. في مختبر الشفرات هذا ، قمنا بتمكين مراقبة الأداء من عناوين URL للاستضافة . راجع الوثائق لمعرفة طرق أخرى لتمكين SDK.

تتبعات تلقائية

نظرًا لأننا نقوم بالفعل باستيراد getPerformance في الجزء العلوي من web-start/src/index.js ، نحتاج فقط إلى إضافة سطر واحد لإخبار مراقبة الأداء بجمع تحميل الصفحة ومقاييس طلب الشبكة تلقائيًا عند زيارة المستخدمين لموقعك المنشور!

1. في web-start/src/index.js ، أضف السطر التالي أسفل TODO الحالي لتهيئة مراقبة الأداء.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

قياس تأخير الإدخال الأول (اختياري)

يعد تأخير الإدخال الأول مفيدًا نظرًا لأن المستعرض الذي يستجيب لتفاعل المستخدم يمنح المستخدمين انطباعاتهم الأولى حول استجابة تطبيقك.

يبدأ تأخير الإدخال الأول عندما يتفاعل المستخدم لأول مرة مع عنصر في الصفحة ، مثل النقر فوق زر أو ارتباط تشعبي. يتوقف فورًا بعد أن يتمكن المتصفح من الاستجابة للإدخال ، مما يعني أن المتصفح ليس مشغولاً بتحميل أو تحليل محتوى صفحتك.

إذا كنت ترغب في قياس تأخير الإدخال الأول ، فستحتاج إلى تضمين الكود التالي مباشرةً.

1. افتح public/index.html .
2. قم بإلغاء التعليق على علامة script في السطر التالي.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

لقراءة المزيد عن أول polyfill لتأخير الإدخال ، ألق نظرة على الوثائق .

عرض بيانات الأداء

نظرًا لأنك لم تنشر موقعك بعد (ستنشره في الخطوة التالية) ، فإليك لقطة شاشة تعرض المقاييس المتعلقة بأداء تحميل الصفحة التي ستراها في وحدة تحكم Firebase في غضون 30 دقيقة من تفاعل المستخدمين مع موقعك المنشور :

عندما تقوم بدمج SDK لمراقبة الأداء في تطبيقك ، فلن تحتاج إلى كتابة أي رمز آخر قبل أن يبدأ تطبيقك تلقائيًا في مراقبة العديد من الجوانب المهمة للأداء. بالنسبة لتطبيقات الويب ، تسجل SDK جوانب مثل الرسم الأول للمحتوى ، وقدرة المستخدمين على التفاعل مع تطبيقك ، والمزيد.

يمكنك أيضًا إعداد تتبعات ومقاييس وسمات مخصصة لقياس جوانب معينة من تطبيقك. قم بزيارة الوثائق لمعرفة المزيد حول الآثار والمقاييس المخصصة والسمات المخصصة .

15. انشر تطبيقك باستخدام استضافة Firebase

يقدم Firebase خدمة استضافة لخدمة أصولك وتطبيقات الويب. يمكنك نشر ملفاتك على Firebase Hosting باستخدام Firebase CLI. قبل النشر ، تحتاج إلى تحديد الملفات المحلية التي يجب نشرها في ملف firebase.json . بالنسبة إلى معمل الرموز هذا ، لقد قمنا بالفعل بذلك نيابة عنك لأن هذه الخطوة كانت مطلوبة لخدمة ملفاتنا أثناء مختبر الرموز هذا. يتم تحديد إعدادات الاستضافة تحت سمة hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

تخبر هذه الإعدادات CLI أننا نريد نشر جميع الملفات في الدليل ./public ( "public": "./public" ).

1. تأكد من وصول سطر الأوامر إلى دليل web-start المحلي للتطبيق.
2. انشر ملفاتك في مشروع Firebase عن طريق تشغيل الأمر التالي:

firebase deploy --except functions

3. يجب أن تعرض وحدة التحكم ما يلي:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. قم بزيارة تطبيق الويب الخاص بك الذي يتم استضافته بالكامل الآن على CDN عالمي باستخدام Firebase Hosting في اثنين من نطاقات Firebase الفرعية الخاصة بك:

• https://<firebase-projectId>.firebaseapp.com
• https://<firebase-projectId>.web.app

بدلاً من ذلك ، يمكنك تشغيل firebase open hosting:site في سطر الأوامر.

تفضل بزيارة الوثائق لمعرفة المزيد حول كيفية عمل استضافة Firebase .

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

16. مبروك!

لقد استخدمت Firebase لإنشاء تطبيق ويب للدردشة في الوقت الفعلي!

ما غطينا

• مصادقة Firebase
• سحابة Firestore
• Firebase SDK للتخزين السحابي
• Firebase Cloud Messaging
• مراقبة أداء Firebase
• استضافة Firebase

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

Learn more

• firebase.google.com