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

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

3b1284f5144b54f6.png

ماذا ستتعلم

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

ماذا ستحتاج

  • وIDE / محرر نص من اختيارك، مثل WebStorm ، ذرة ، سبحانه ، أو كود VS
  • مدير مجموعة الآلية الوقائية الوطنية ، والتي تأتي عادة مع نود.جي إس
  • محطة / وحدة تحكم
  • متصفح من اختيارك ، مثل Chrome
  • نموذج التعليمات البرمجية لمعمل الرموز (راجع الخطوة التالية من مختبر الرموز لمعرفة كيفية الحصول على الشفرة.)

استنساخ codelab في مستودع جيثب من سطر الأوامر:

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

بدلا من ذلك، إذا لم يكن لديك بوابة المثبتة، يمكنك تحميل مستودع كملف ZIP .

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

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

أنشئ مشروع Firebase

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

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

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

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

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

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

تسجيل لقطة شاشة لتطبيق الويب

تمكين جوجل تسجيل الدخول للمصادقة Firebase

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

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

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

d89fb3873b5d36ae.png

تفعيل Cloud Firestore

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

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

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

729991a081e7cd5.png

  1. حدد الخيار بدء وضع الاختبار في، ثم انقر فوق التالي بعد قراءة هذا العقد عن قواعد الأمن.

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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

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

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

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

  1. قم بتثبيت CLI عن طريق تشغيل الأمر npm التالي:
npm -g install firebase-tools
  1. تحقق من تثبيت CLI بشكل صحيح عن طريق تشغيل الأمر التالي:
firebase --version

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

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

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

  1. تأكد من أن سطر الأوامر الخاص بك والوصول المحلي التطبيق الخاص بك web-start الدليل.
  2. اربط تطبيقك بمشروع Firebase عن طريق تشغيل الأمر التالي:
firebase use --add
  1. عند المطالبة، حدد اسم المستخدم الخاص بك المشروع، ثم إعطاء المشروع Firebase الخاص بك اسم مستعار.

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

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

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

  1. في وحدة التحكم من web-start الدليل، قم بتشغيل الأمر Firebase CLI التالية:
firebase serve --only hosting
  1. يجب أن يعرض سطر الأوامر الاستجابة التالية:
✔  hosting: Local server: http://localhost:5000

نحن نستخدم استضافة Firebase منافس لخدمة التطبيق لدينا محليا. وينبغي أن يكون تطبيق الويب متوفر الآن من HTTP: // المضيف المحلي: 5000 . كافة الملفات التي تقع تحت public يتم تقديم الدليل.

  1. باستخدام المتصفح الخاص بك، افتح التطبيق في HTTP: // المضيف المحلي: 5000 .

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

4c23f9475228cef4.png

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

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

استيراد Firebase SDK

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

ونحن في طريقنا للحصول على SDK Firebase من الآلية الوقائية الوطنية واستخدام Webpack لحزمة متاحة لدينا. نحن نقوم بذلك حتى يتمكن Webpack من إزالة أي كود غير ضروري ، مع الحفاظ على حجم حزمة JS صغيرًا للتأكد من تحميل تطبيقنا في أسرع وقت ممكن. لهذا codelab، لقد قمت بالفعل بإنشاء web-start/package.json ملف يتضمن SDK Firebase ك تبعية، وكذلك استيراد الوظائف المطلوبة في الجزء العلوي من 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 لتحميل SDK Firebase
  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);

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

قم بمصادقة المستخدمين لديك باستخدام تسجيل الدخول بحساب 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 ظيفة لالزناد عندما يقوم المستخدم بتسجيل في ذلك أن التحديثات UI لدينا وفقا لذلك. فإنه سيتم استدعاء 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: // المضيف المحلي: 5000 ، ومن ثم فتحها في المتصفح الخاص بك.
  2. سجّل الدخول إلى التطبيق باستخدام زر تسجيل الدخول وحساب Google الخاص بك. إذا رأيت رسالة خطأ تفيد auth/operation-not-allowed ، والتحقق للتأكد من أن قمت بتمكين جوجل الدخول في كمزود المصادقة في وحدة Firebase.
  3. بعد تسجيل الدخول ، يجب عرض صورة ملفك الشخصي واسم المستخدم: c7401b3d44d0d78b.png

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

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

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

688d7bc5fb662b57.png

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

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

في هذا القسم ، ستضيف وظيفة للمستخدمين لكتابة رسائل جديدة إلى قاعدة البيانات الخاصة بك. ويمكن للمستخدم النقر على زر SEND يؤدي التعليمات البرمجية المتكررة أدناه. وتضيف كائن رسالة مع محتويات حقول الرسالة إلى المثال سحابة 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: // المضيف المحلي: 5000 ، ومن ثم فتحها في المتصفح الخاص بك.
  2. بعد تسجيل الدخول، أدخل رسالة مثل "يا هناك!"، ثم انقر فوق إرسال. سيؤدي هذا إلى كتابة الرسالة في Cloud Firestore. ومع ذلك، فإنك لن ترى بعد البيانات في التطبيق الفعلي الويب الخاص بك لأننا ما زلنا بحاجة إلى تنفيذ استرداد البيانات (القسم التالي من codelab).
  3. يمكنك رؤية الرسالة المضافة حديثًا في Firebase Console. افتح وحدة تحكم Firebase. تحت هذا الباب بناء انقر فوق قاعدة بيانات Firestore (أو انقر هنا وحدد مشروعك) ويجب أن تشاهد مجموعة رسائل مع رسالتك المضافة حديثا:

6812efe7da395692.png

رسائل تزامن

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

سنضيف رمزًا يستمع إلى الرسائل المضافة حديثًا من التطبيق. في هذا الرمز ، سنقوم بتسجيل المستمع الذي يستمع إلى التغييرات التي تم إجراؤها على البيانات. سنعرض آخر 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 يأخذ وظيفة استعلام كمعلمة أولى، وظيفة رد كثاني لها. سيتم تشغيل وظيفة رد الاتصال عند وجود أي تغييرات على المستندات التي تطابق الاستعلام. قد يكون هذا في حالة حذف رسالة أو تعديلها أو إضافتها. يمكنك قراءة المزيد حول هذا الموضوع في وثائق سحابة Firestore .

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

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

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

2168dec79b573d07.png

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

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

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

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

  1. ينشئ رسالة دردشة "عنصر نائب" في موجز الدردشة ، بحيث يرى المستخدمون صورة متحركة "يتم تحميلها" أثناء تحميل الصورة.
  2. تحميل ملف الصورة إلى سحابة التخزين لهذا المسار: /<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: // المضيف المحلي: 5000 ، ومن ثم فتحها في المتصفح الخاص بك.
  2. بعد تسجيل الدخول ، انقر فوق زر تحميل الصورة 13734cb66773e5a3.png وحدد ملف صورة باستخدام منتقي الملفات. إذا كنت تبحث عن صورة، لا تتردد في استخدام هذه صورة جميلة من فنجان القهوة .
  3. يجب أن تظهر رسالة جديدة في واجهة مستخدم التطبيق مع الصورة المحددة: 3b1284f5144b54f6.png

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

سنقوم الآن بإضافة دعم لإخطارات المتصفح. سيقوم التطبيق بإعلام المستخدمين عند نشر رسائل جديدة في الدردشة. Firebase سحابة التراسل (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 رمزية من المتصفح وحفظه إلى سحابة 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() الأسلوب، الذي سيتم عرض الحوار متصفح يسأل عن هذا الإذن ( في المستعرضات المعتمدة ).

8b9d0c66dc36153d.png

  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: // المضيف المحلي: 5000 ، ومن ثم فتحها في المتصفح الخاص بك.
  2. بعد تسجيل الدخول ، من المفترض أن يظهر مربع حوار إذن الإشعارات: bd3454e6dbfb6723.png
  3. انقر فوق السماح.
  4. افتح وحدة تحكم JavaScript في المستعرض الخاص بك. سترى الرسالة التالية: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. انسخ الرمز المميز لجهازك. ستحتاجه للمرحلة التالية من مختبر الرموز.

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

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

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

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

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

de79e8638a45864c.png

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

يستخدم سحابة 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"
  }
}
  1. انشر قواعد الأمان باستخدام Firebase CLI عن طريق تشغيل الأمر التالي:
firebase deploy --only firestore
  1. يجب أن يعرض سطر الأوامر الاستجابة التالية:
=== 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

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

يستخدم سحابة تخزين لل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"
  }
}
  1. انشر قواعد الأمان باستخدام Firebase CLI عن طريق تشغيل الأمر التالي:
firebase deploy --only storage
  1. يجب أن يعرض سطر الأوامر الاستجابة التالية:
=== 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

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

هناك طرق مختلفة للتكامل مع Firebase Performance Monitoring JavaScript SDK. في هذا codelab، نحن تمكين مراقبة الأداء من عناوين المواقع استضافة. الرجوع إلى الوثائق لمعرفة طرق أخرى للتمكين 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 دقيقة من تفاعل المستخدمين مع موقعك المنشور :

29389131150f33d7.png

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

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

العروض 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
  1. يجب أن تعرض وحدة التحكم ما يلي:
=== 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
  1. قم بزيارة تطبيق الويب الخاص بك الذي يتم استضافته بالكامل الآن على CDN عالمي باستخدام Firebase Hosting في اثنين من نطاقات Firebase الفرعية الخاصة بك:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

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

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

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

ما غطينا

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

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

يتعلم أكثر