الدرس التطبيقي حول الترميز على الويب في AngularFire

1- نظرة عامة

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

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

المعلومات التي ستطّلع عليها

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

المتطلبات

  • حساب GitHub
  • إمكانية ترقية مشروع Firebase إلى خطة أسعار Blaze
  • محرِّر نصوص أو محرِّر IDE أو محرِّر النصوص، مثل WebStorm أو Sublime أو VS Code
  • مدير الحزمة npm، والذي يأتي عادةً مع Node.js
  • وحدة طرفية/وحدة تحكُّم
  • متصفح من اختيارك، مثل Chrome
  • رمز نموذجي للدرس التطبيقي حول الترميز (اطّلِع على الخطوة التالية من الدرس التطبيقي حول كيفية الحصول على الرمز).

2- الحصول على رمز النموذج

إنشاء مستودع GitHub

يمكن العثور على مصدر الدرس التطبيقي حول الترميز على الرابط https://github.com/firebase/codelab-Friendlychat-web. يحتوي المستودع على نماذج مشروعات لأنظمة أساسية متعددة. مع ذلك، يستخدم هذا الدرس التطبيقي دليل angularfire-start فقط.

انسخ المجلد angularfire-start إلى مستودعك الخاص:

  1. باستخدام محطة دفع، أنشِئ مجلدًا جديدًا على الكمبيوتر وغيِّره إلى الدليل الجديد:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. استخدم حزمة giget npm لجلب مجلد angularfire-start فقط:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. تتبُّع التغييرات محليًا باستخدام git:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  4. أنشئ مستودع GitHub جديد: https://github.com/new. يمكنك تسميته أي شيء تريده.
    1. سيمنحك GitHub عنوان URL جديد للمستودع بالتنسيق https://github.com/[user-name]/[repository-name].git أو git@github.com:[user-name]/[repository-name].git. انسخ عنوان URL هذا.
  5. يمكنك إرسال التغييرات المحلية إلى مستودع GitHub الجديد. شغِّل الأمر التالي، واستبدل عنوان URL للمستودع بالعنصر النائب your-repository-url.
    git remote add origin your-repository-url

git push -u origin main
  6. من المفترض أن يظهر لك الآن رمز إجراء التفعيل في مستودع جيت هب.

3- إنشاء مشروع على Firebase وإعداده

إنشاء مشروع على Firebase

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

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

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

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

ترقية خطة أسعار Firebase

لاستخدام ميزة "استضافة التطبيقات"، يجب أن يكون مشروعك في Firebase ضمن خطة أسعار Blaze، ما يعني أنّه مرتبط بحساب فوترة على Cloud.

  • يتطلب حساب الفوترة في Cloud طريقة دفع، مثل بطاقة الائتمان.
  • إذا كنت مستخدمًا جديدًا لمنصة Firebase وGoogle Cloud، تحقَّق من أهليتك للحصول على رصيد بقيمة 300 دولار أمريكي (أو ما يعادله بالعملة المحلية) وحساب فوترة مجاني على Cloud.

لترقية مشروعك إلى خطة Blaze، اتّبِع الخطوات التالية:

  1. في "وحدة تحكُّم Firebase"، اختَر ترقية خطتك.
  2. في مربّع الحوار، اختَر خطة Blaze، ثم اتّبِع التعليمات الظاهرة على الشاشة لربط مشروعك بحساب فوترة Cloud.
    إذا احتجت إلى إنشاء حساب فوترة على Cloud، قد تحتاج إلى الرجوع إلى مسار الترقية في وحدة تحكُّم Firebase لإكمال عملية الترقية.

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

  1. انقر على رمز الويب 58d6543a156e56f9.png لإنشاء تطبيق ويب جديد على Firebase.
  2. سجِّل التطبيق باستخدام اللقب محادثة ودية. لا تضع علامة في المربّع بجانب إعداد "استضافة Firebase" لهذا التطبيق أيضًا. انقر على تسجيل التطبيق.
  3. في الخطوة التالية، سيظهر لك كائن ضبط. أنت لست بحاجة إليه الآن. انقر على متابعة إلى وحدة التحكّم.

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

إعداد المصادقة

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

  1. في "وحدة تحكُّم Firebase"، انتقِل إلى المصادقة.
  2. انقر على البدء.
  3. في عمود مزوّدو الخدمات الإضافيون، انقر على Google > تفعيل.
  4. في مربّع النص اسم المشروع الذي يظهر بشكل علني، أدخِل اسمًا يسهل تذكّره، مثل My Next.js app.
  5. من القائمة المنسدلة البريد الإلكتروني للدعم للمشروع، اختَر عنوان بريدك الإلكتروني.
  6. انقر على حفظ.

تفعيل Cloud Firestore

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

يجب تفعيل Cloud Firestore:

  1. في "وحدة تحكُّم Firebase"، انتقِل إلى Firestore.
  2. انقر على إنشاء قاعدة بيانات >. التالي > البدء في وضع الاختبار > التالي.
    في وقت لاحق من هذا الدرس التطبيقي حول الترميز، ستضيف قواعد الأمان لتأمين بياناتك. لا توزِّع تطبيقًا أو تعرضه علنًا بدون إضافة قواعد أمان لقاعدة البيانات.
  3. يمكنك استخدام الموقع الجغرافي التلقائي أو اختيار موقع جغرافي من اختيارك.
    إذا كان لديك تطبيق حقيقي، عليك اختيار موقع قريب من المستخدمين. يُرجى العِلم أنّه لا يمكن تغيير هذا الموقع الجغرافي لاحقًا، وسيصبح أيضًا تلقائيًا موقع حزمتك التلقائية على Cloud Storage (الخطوة التالية).
  4. انقر على تم.

تفعيل Cloud Storage

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

يجب تفعيل Cloud Storage:

  1. في "وحدة تحكُّم Firebase"، انتقِل إلى مساحة التخزين.
  2. انقر على البدء > البدء في وضع الاختبار > التالي.
    في وقت لاحق من هذا الدرس التطبيقي حول الترميز، ستضيف قواعد الأمان لتأمين بياناتك. يجب عدم توزيع تطبيق أو عرضه بشكل علني بدون إضافة قواعد أمان إلى حزمة مساحة التخزين.
  3. يجب أن يكون قد تم اختيار موقع الحزمة مسبقًا (بسبب إعداد Firestore في الخطوة السابقة).
  4. انقر على تم.

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

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

  1. ثبِّت واجهة سطر الأوامر من خلال تشغيل الأمر npm التالي:
npm -g install firebase-tools@latest
  1. تحقَّق من تثبيت واجهة سطر الأوامر بشكل صحيح من خلال تشغيل الأمر التالي:
firebase --version

تأكَّد من أنّ إصدار واجهة سطر الأوامر في Firebase هو الإصدار 13.9.0 أو إصدار أحدث.

  1. فوّض واجهة سطر الأوامر في Firebase من خلال تشغيل الأمر التالي:
firebase login

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

  1. تأكد من وصول سطر الأوامر إلى دليل angularfire-start المحلي لتطبيقك.
  2. اربط تطبيقك بمشروع Firebase من خلال تشغيل الأمر التالي:
firebase use --add
  1. اختَر رقم تعريف المشروع عندما يُطلب منك ذلك، ثم امنح مشروعك على Firebase اسمًا مستعارًا.

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

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

5- تثبيت AngularFire

قبل تشغيل المشروع، تأكَّد من إعداد واجهة Angular CLI وAngularFire.

  1. في وحدة تحكم، شغِّل الأمر التالي:
npm install -g @angular/cli
  1. بعد ذلك، في وحدة تحكّم من دليل angularfire-start، شغِّل أمر Angular CLI التالي:
ng add @angular/fire

سيؤدي ذلك إلى تثبيت جميع التبعيات اللازمة لمشروعك.

  1. عندما يُطلب منك ذلك، أزِل العلامة من المربّع بجانب "ng deploy -- hosting" باستخدام شريط المسافة. اختَر الميزات التالية باستخدام مفاتيح الأسهم وشريط المسافة:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. اضغط على enter واتّبِع التعليمات المتبقية.
  3. إنشاء التزام برسالة "تثبيت AngularFire" وأرسله إلى مستودع جيت هب.

6- إنشاء واجهة خلفية لاستضافة التطبيقات

في هذا القسم، ستقوم بإعداد واجهة خلفية لاستضافة التطبيقات لمشاهدة فرع على مستودع git.

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

  1. انتقِل إلى صفحة استضافة التطبيق في وحدة تحكُّم Firebase:

الحالة الصفرية لوحدة تحكُّم استضافة التطبيقات، مع وجود زر "البدء" زر

  1. انقر على "البدء" لبدء تدفق الإنشاء في الخلفية. اضبط الخلفية كما يلي:
  2. اتبع المطالبات الواردة في الخطوة الأولى لربط مستودع GitHub الذي أنشأته سابقًا.
  3. ضبط إعدادات النشر:
    1. الاحتفاظ بالدليل الجذر باسم /
    2. ضبط الفرع المباشر على main
    3. تفعيل عمليات الطرح التلقائية
  4. أدخِل اسمًا للخلفية friendlychat-codelab.
  5. في قسم "إنشاء تطبيق ويب على Firebase أو ربطه"، اختر تطبيق الويب الذي ضبطته سابقًا من الخيار "اختيار تطبيق ويب حالي على Firebase". المنسدلة.
  6. انقر على "إنهاء ونشر". بعد لحظات، سيتم نقلك إلى صفحة جديدة يمكنك من خلالها الاطلاع على حالة الواجهة الخلفية الجديدة لاستضافة التطبيق.
  7. بعد اكتمال عملية الطرح، انقر على النطاق المجاني ضمن "النطاقات". قد يستغرق ذلك بضع دقائق لبدء العمل بسبب نشر نظام أسماء النطاقات.

لقد نشرت تطبيق الويب الأولي! في كل مرة ترسل فيها التزامًا جديدًا إلى فرع main من مستودع GitHub، ستظهر لك نسخة جديدة وطرحها في وحدة تحكُّم Firebase، وسيتم تحديث موقعك الإلكتروني تلقائيًا فور اكتمال عملية الطرح.

الحالة الصفرية لوحدة تحكُّم استضافة التطبيقات، مع وجود زر "البدء" زر

من المفترض أن تظهر لك شاشة تسجيل الدخول إلى تطبيق FriendlyChat التي لا تعمل (بعد).

لا يمكن للتطبيق القيام بأي شيء في الوقت الحالي، ولكن بمساعدتك، سيقوم بتنفيذه قريبًا!

الآن، لننشئ تطبيق دردشة في الوقت الفعلي.

7- استيراد Firebase وإعداده

ضبط Firebase

وسيتعيّن عليك ضبط حزمة تطوير البرامج (SDK) لمنصة Firebase لإخبارها بمشروع Firebase الذي تستخدمه.

  1. انتقِل إلى إعدادات المشروع في وحدة تحكُّم Firebase.
  2. في قسم "تطبيقاتك" اختر اسم التطبيق الذي تريد كائن تهيئة له.
  3. اختَر "إعداد" من جزء مقتطف حزمة تطوير البرامج (SDK) لمنصّة Firebase

ستجد أنه تم إنشاء ملف بيئة /angularfire-start/src/environments/environment.ts لك.

  1. انسخ مقتطف كائن الضبط، ثم أضِفه إلى angularfire-start/src/firebase-config.js.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

عرض إعداد AngularFire

ستجد أنّ الميزات التي اخترتها في وحدة التحكّم قد تمت إضافتها تلقائيًا في ملف "/angularfire-start/src/app/app.config.ts". يتيح ذلك لتطبيقك استخدام ميزات Firebase ووظائفه.

8- إعداد تسجيل دخول المستخدم

من المفترض أن يكون AngularFire جاهزًا الآن للاستخدام نظرًا لأنّه تم استيراده وإعداده في app.config.ts. ستُجري الآن عملية تسجيل دخول المستخدم من خلال مصادقة Firebase.

إضافة نطاق مصرَّح به

لا تسمح مصادقة Firebase إلا بتسجيل الدخول من قائمة محدّدة من النطاقات التي تتحكم فيها. أضِف نطاق استضافة التطبيق المجاني إلى قائمة النطاقات:

  1. انتقِل إلى استضافة التطبيقات.
  2. انسخ نطاق الخلفية.
  3. انتقِل إلى إعدادات المصادقة.
  4. اختَر علامة التبويب النطاقات المسموح بها.
  5. انقر على إضافة نطاق والصِق نطاق الواجهة الخلفية لـ "استضافة التطبيق".

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

عندما ينقر أحد المستخدمين على زر تسجيل الدخول باستخدام حساب Google في التطبيق، يتم تشغيل الوظيفة login. في هذا الدرس التطبيقي عن الترميز، أنت تريد السماح لمنصة Firebase باستخدام Google كموفِّر للهوية. ستستخدم نافذة منبثقة، ولكن تتوفّر طرق أخرى متعددة من Firebase.

  1. في الدليل الفرعي /src/app/services/، افتح chat.service.ts.
  2. ابحث عن الدالة login.
  3. استبدل الدالة بأكملها بالتعليمة البرمجية التالية.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

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

  1. الرجوع إلى الملف src/app/services/chat.service.ts
  2. ابحث عن الدالة logout.
  3. استبدل الدالة بأكملها بالتعليمة البرمجية التالية.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

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

ولتحديث واجهة المستخدم وفقًا لذلك، تحتاج إلى طريقة للتحقّق من تسجيل دخول المستخدم أو خروجه. يوفِّر AngularFire وظيفةً للحصول على عنصر ملحوظ يتم تعديله في كل مرة تتغيّر فيها حالة المصادقة. تم تنفيذ ذلك بالفعل، ولكنه يستحق إلقاء نظرة عليه.

  1. الرجوع إلى الملف src/app/services/chat.service.ts
  2. أوجِد عيّنة المتغيّر user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

يستدعي الرمز أعلاه دالة AngularFire user التي تعرض مستخدمًا يمكن ملاحظته. وسيتم تشغيله في كل مرة تتغير فيها حالة المصادقة (عندما يسجِّل المستخدم دخوله أو تسجيل خروجه). تستخدم مكونات نماذج Angular في FriendlyChat هذا العنصر الذي يمكن ملاحظته لتعديل واجهة المستخدم من أجل إعادة التوجيه، وعرض المستخدم في شريط التنقل في رأس الصفحة، وما إلى ذلك.

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

  1. إنشاء التزام مع رسالة الإتمام "إضافة مصادقة Google" وأرسله إلى مستودع جيت هب.
  2. افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
  3. في تطبيق الويب، أعِد تحميل الصفحة وسجِّل الدخول إلى التطبيق باستخدام زر تسجيل الدخول وحسابك على Google. إذا ظهرت لك رسالة خطأ تفيد بـ auth/operation-not-allowed، تأكَّد من أنّك فعّلت "تسجيل الدخول بحساب Google" كموفِّر مصادقة في "وحدة تحكُّم Firebase".
  4. بعد تسجيل الدخول، من المفترض أن تظهر صورة ملفك الشخصي واسم المستخدم: angularfire-3.png

9- كتابة رسائل إلى Cloud Firestore

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

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

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

688d7bc5fb662b57.png

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

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

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

  1. الرجوع إلى الملف src/app/services/chat.service.ts
  2. ابحث عن الدالة addMessage.
  3. استبدل الدالة بأكملها بالتعليمة البرمجية التالية.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

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

  1. إنشاء التزام برسالة "نشر محادثات جديدة على Firestore" وأرسله إلى مستودع جيت هب.
  2. افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
  3. يُرجى إعادة تحميل FriendlyChat. بعد تسجيل الدخول، أدخِل رسالة، مثل "مرحبًا"، وانقر على إرسال. سيؤدي هذا إلى كتابة الرسالة في Cloud Firestore. مع ذلك، لن تظهر لك البيانات حتى الآن في تطبيق الويب الفعلي لأنّك ما زلت بحاجة إلى تنفيذ عملية استرداد البيانات (القسم التالي من الدرس التطبيقي حول الترميز).
  4. يمكنك الاطّلاع على الرسالة المضافة حديثًا في "وحدة تحكُّم Firebase". افتح واجهة مستخدم مجموعة المحاكي. ضمن القسم إنشاء، انقر على قاعدة بيانات Firestore (أو انقر هنا وستظهر مجموعة الرسائل التي تتضمّن رسالتك الجديدة:

6812efe7da395692.png

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

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

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

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

  1. الرجوع إلى الملف src/app/services/chat.service.ts
  2. ابحث عن الدالة loadMessages.
  3. استبدل الدالة بأكملها بالتعليمة البرمجية التالية.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

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

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

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

  1. إنشاء التزام مع رسالة إتمام الإجراء "عرض المحادثات الجديدة في واجهة المستخدم" وأرسله إلى مستودع جيت هب.
  2. افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
  3. يُرجى إعادة تحميل FriendlyChat. يجب عرض الرسائل التي أنشأتها سابقًا في قاعدة البيانات في واجهة مستخدم FriendlyChat (انظر أدناه). لا تتردد في كتابة رسائل جديدة؛ فيجب أن تظهر على الفور.
  4. (اختياري) يمكنك محاولة حذف الرسائل أو تعديلها أو إضافتها يدويًا مباشرةً في القسم Firestore ضمن مجموعة أدوات المحاكاة؛ يجب أن تنعكس أي تغييرات على واجهة المستخدم.

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

angularfire-2.png

11- إضافة ميزات الذكاء الاصطناعي (AI)

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

الحصول على مفتاح Google AI API

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

تثبيت إضافة

ستنشر هذه الإضافة وظيفة سحابة إلكترونية يتم تشغيلها في كل مرة تتم فيها إضافة مستند جديد إلى مجموعة messages في Firestore. ستستدعي الدالة Gemini وتكتب ردّها في الحقل response في المستند.

  1. انقر على التثبيت في "وحدة تحكُّم Firebase" في صفحة إنشاء روبوت دردشة باستخدام Gemini API.
  2. اتّبِع التعليمات. بعد الوصول إلى خطوة إعداد الإضافة، اضبط قيم المَعلمات التالية:
    • موفِّر واجهة برمجة التطبيقات Gemini: Google AI
    • مفتاح Google AI API: الصِق المفتاح الذي أنشأته سابقًا وانقر على إنشاء مفتاح سرّي.
    • مسار جمع الأسلحة النارية: messages
    • حقل الطلب: text
    • حقل الردّ: response
    • حقل الطلب: timestamp
    • السياق: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. انقر على تثبيت الإضافة.
  4. الانتظار حتى يتم الانتهاء من تثبيت الإضافة

اختبار ميزة الذكاء الاصطناعي (AI)

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

  1. افتح FriendlyChat وأرسِل رسالة.
  2. بعد لحظات، من المفترض أن يظهر الرد في نافذة منبثقة بجانب رسالتك. تظهر ملاحظة ✨ ai generated في النهاية لتوضيح أنّه تم إنشاؤها باستخدام الذكاء الاصطناعي التوليدي، وليس مستخدمًا حقيقيًا.

12- إرسال الصور

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

على الرغم من أنّ Cloud Firestore هي أداة جيدة لتخزين البيانات المنظَّمة، تُعدّ خدمة Cloud Storage أكثر ملاءمةً لتخزين الملفات. Cloud Storage for Firebase هي خدمة لتخزين الملفات أو الكائن الثنائي الكبير (blob)، وستستخدمها لتخزين أي صور يشاركها المستخدم باستخدام تطبيقنا.

حفظ الصور في Cloud Storage

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

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

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

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

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, 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.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

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

  1. إنشاء التزام مع رسالة التزام: "إضافة إمكانية نشر الصور" وأرسله إلى مستودع جيت هب.
  2. افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
  3. يُرجى إعادة تحميل FriendlyChat. بعد تسجيل الدخول، انقر على زر تحميل الصورة في أسفل يمين angularfire-4.png واختَر ملف صورة باستخدام أداة اختيار الملفات. إذا كنت تبحث عن صورة، يمكنك استخدام هذه الصورة الرائعة لكوب قهوة.
  4. من المفترض أن تظهر رسالة جديدة في واجهة المستخدم للتطبيق تحتوي على الصورة التي اخترتها: angularfire-2.png

إذا حاولت إضافة صورة بدون تسجيل الدخول، من المفترض أن تظهر رسالة خطأ تخبرك بأنّه يجب تسجيل الدخول لإضافة صور.

13- Show notifications

ستتم الآن إتاحة إشعارات المتصفّح. سيُرسِل التطبيق إشعارًا إلى المستخدمين عند نشر رسائل جديدة في المحادثة. المراسلة عبر السحابة الإلكترونية من Firebase هي حل مراسلة من عدّة أنظمة أساسية يتيح لك إرسال الرسائل والإشعارات بدون أي تكلفة بشكل موثوق.

إضافة مشغِّل خدمة "المراسلة عبر السحابة الإلكترونية من Firebase"

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

من المفترَض أن يكون قد تم إعداد مقدِّم خدمة المراسلة عند إضافة AngularFire، لذلك يُرجى التأكّد من توفّر الرمز التالي في قسم الاستيراد في /angularfire-start/src/app/app.config.ts.

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

يحتاج عامل الخدمة ببساطة إلى تحميل وإعداد حزمة تطوير البرامج (SDK) لخدمة "المراسلة عبر السحابة الإلكترونية من Firebase"، والتي ستتولى عرض الإشعارات.

الحصول على الرموز المميّزة للجهاز في خدمة "المراسلة عبر السحابة الإلكترونية من Firebase"

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

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

chat.service.ts

  1. ابحث عن الدالة saveMessagingDeviceToken.
  2. استبدل الدالة بأكملها بالتعليمة البرمجية التالية.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.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(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

طلب الأذونات لعرض الإشعارات

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

8b9d0c66dc36153d.png

  1. الرجوع إلى الملف src/app/services/chat.service.ts
  2. ابحث عن الدالة requestNotificationsPermissions.
  3. استبدل الدالة بأكملها بالتعليمة البرمجية التالية.

chat.service.ts

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

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

  1. إنشاء التزام مع رسالة التزام: "إضافة إمكانية نشر الصور" وأرسله إلى مستودع جيت هب.
  2. افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
  3. يُرجى إعادة تحميل FriendlyChat. بعد تسجيل الدخول، من المفترض أن يظهر مربّع حوار إذن إرسال الإشعارات: bd3454e6dbfb6723.png
  4. انقر على سماح.
  5. افتح وحدة تحكّم JavaScript في المتصفّح. من المفترض أن تظهر لك الرسالة التالية: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  6. انسخ الرمز المميّز لجهازك. ستحتاج إليها في المرحلة التالية من الدرس التطبيقي حول الترميز.

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

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

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

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

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

de79e8638a45864c.png

14- قواعد الأمان في Cloud Firestore

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

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

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

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

rules_version = '2';

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

ستعدّل القواعد لحظر العناصر باستخدام القواعد التالية:

firestore.rules

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;
    }
  }
}

من المفترض أن يتم تعديل قواعد الأمان تلقائيًا إلى مجموعة "المحاكي".

عرض قواعد أمان Cloud Storage

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

عند إعداد مشروع Firebase في بداية هذا الدرس التطبيقي حول الترميز، اخترت استخدام قاعدة أمان Cloud Storage التلقائية التي تسمح فقط للمستخدمين الذين تمت مصادقتهم باستخدام Cloud Storage. يمكنك الاطّلاع على القواعد وتعديلها في وحدة تحكُّم 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;
    }
  }
}

15- تهانينا

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

المواضيع التي تناولتها

  • Firebase App Hosting
  • مصادقة Firebase
  • Cloud Firestore
  • حزمة تطوير البرامج (SDK) لمنصّة Firebase لخدمة Cloud Storage
  • المراسلة عبر السحابة الإلكترونية من Firebase
  • مراقبة أداء Firebase

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

مزيد من المعلومات

16- [اختياري] فرض الإجراء عبر فحص التطبيقات

تساعد ميزة فحص التطبيقات من Firebase على تأمين خدماتك من الزيارات غير المرغوب فيها وتساعد في حماية الخلفية من إساءة الاستخدام. في هذه الخطوة، ستضيف عملية التحقق من بيانات الاعتماد وتحظر العملاء غير المصرَّح لهم باستخدام ميزة "التحقّق من التطبيقات" وreCAPTCHA Enterprise.

أولاً، يجب تفعيل ميزتَي "فحص التطبيقات" و"reCaptcha".

تفعيل reCAPTCHA Enterprise

  1. في Cloud Console، ابحث عن reCaptcha Enterprise واختَره ضمن "الأمان".
  2. فعِّل الخدمة كما هو مطلوب، وانقر على إنشاء مفتاح.
  3. أدخِل الاسم المعروض على النحو المطلوب، واختَر الموقع الإلكتروني كنوع المنصة.
  4. أضِف عناوين URL التي تم نشرها إلى قائمة النطاقات، وتأكَّد من أنّ خيار "استخدام تحدي مربّع الاختيار" إلغاء تحديد.
  5. انقر على إنشاء مفتاح، وخزِّن المفتاح الذي تم إنشاؤه في مكان آمن للاحتفاظ به. ستحتاج إليها لاحقًا في هذه الخطوة.

تفعيل فحص التطبيقات

  1. في وحدة تحكُّم Firebase، ابحث عن قسم إنشاء في اللوحة اليمنى.
  2. انقر على فحص التطبيق، ثم على علامة التبويب طريقة تسجيل الدخول للانتقال إلى فحص التطبيق.
  3. انقر على Register (تسجيل) وأدخِل مفتاح reCaptcha Enterprise عندما يُطلب منك ذلك، ثم انقر على حفظ.
  4. في عرض واجهات برمجة التطبيقات، حدِّد سعة التخزين وانقر على فرض. نفِّذ الإجراء نفسه مع Cloud Firestore.

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

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

وهذا يعني أنّ ميزة "فحص التطبيقات" تحظر تلقائيًا الطلبات التي لم يتم التحقّق منها. لنقم الآن بإضافة ميزة التحقق إلى تطبيقك.

انتقِل إلى ملف environment.ts وأضِف reCAPTCHAEnterpriseKey إلى عنصر environment.

export const environment = {
  firebase: {
    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',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

استبدِل قيمة key بالرمز المميّز لخدمة reCaptcha Enterprise.

بعد ذلك، انتقِل إلى ملف app.config.ts وأضِف عمليات الاستيراد التالية:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

في ملف app.config.ts نفسه، أضِف تعريف المتغيّر العمومي التالي:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

في عمليات الاستيراد، أضِف إعداد فحص التطبيق باستخدام ReCaptchaEnterpriseProvider، واضبط isTokenAutoRefreshEnabled على true للسماح بإعادة تحميل الرموز المميّزة تلقائيًا.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

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

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

الآن، انتقِل إلى عرض التطبيقات لفحص التطبيق في وحدة تحكُّم Firebase.

انقر على القائمة الكاملة، واختَر إدارة الرموز المميّزة لتصحيح الأخطاء.

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

انتقِل إلى ملف chat.service.ts، وأضِف عملية الاستيراد التالية:

import { AppCheck } from '@angular/fire/app-check';

في ملف chat.service.ts نفسه، أدخِل ميزة "التحقّق من التطبيقات" إلى جانب خدمات Firebase الأخرى.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. إنشاء التزام برسالة "حظر العملاء غير المصرَّح لهم باستخدام ميزة "فحص التطبيقات" وأرسله إلى مستودع جيت هب.
  2. افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.

تهانينا من المفترض أن تعمل ميزة "فحص التطبيقات" الآن في تطبيقك.