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

1- نظرة عامة

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

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

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

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

المتطلبات

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

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

إنشاء مستودع جيت هب

يمكنك العثور على مصدر الدرس التطبيقي حول الترميز على الرابط 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 أو [email protected]:[user-name]/[repository-name].git. انسخ عنوان URL هذا.
  5. يمكنك إرسال التغييرات المحلية إلى مستودعك الجديد بجيت هب. شغِّل الأمر التالي، مع استبدال عنوان 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.

لترقية مشروعك إلى خطة 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 استخدام "استضافة Firebase" لعرض تطبيق الويب على جهازك، وكذلك لنشر تطبيق الويب في مشروعك على Firebase.

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

تأكَّد من أنّ إصدار واجهة سطر الأوامر في Firebase هو الإصدار v13.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. اتبع التعليمات الواردة في الخطوة الأولى لربط مستودع جيت هب الذي أنشأته سابقًا.
  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 إلا بعمليات تسجيل الدخول من قائمة محددة من النطاقات التي تتحكم فيها. أضِف نطاق App Hosting المجاني الخاص بك إلى قائمة النطاقات:

  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 Database (أو انقر هنا) وستظهر لك مجموعة الرسائل التي تتضمن الرسالة المضافة حديثًا:

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

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

تثبيت إضافة

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

  1. انقر على التثبيت في وحدة تحكُّم Firebase في صفحة إنشاء برنامج ChatBot باستخدام Gemini API.
  2. اتّبِع التعليمات التي تظهر على الشاشة. بعد الوصول إلى خطوة ضبط الإضافة، اضبط قيم المَعلمات التالية:
    • موفّر واجهة برمجة تطبيقات Gemini: Google AI
    • مفتاح واجهة برمجة تطبيقات Google AI: الصِق المفتاح الذي أنشأته سابقًا وانقر على إنشاء سر.
    • مسار جمع النار: 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 هي خدمة لتخزين الملفات/النقاط الكبيرة، وستستخدمها لتخزين أي صور يشاركها المستخدم باستخدام تطبيقنا.

حفظ الصور في 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 (FCM) هي حل مراسلة عبر الأنظمة الأساسية يتيح لك تسليم الرسائل والإشعارات بشكل موثوق بدون أي تكلفة.

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

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

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

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

app/app.module.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 ميغابايت كحدّ أقصى

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

storage.rules

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.

أولاً، يجب تفعيل App Check وreCaptcha.

تفعيل reCaptcha Enterprise

  1. في وحدة التحكّم في السحابة الإلكترونية، ابحث عن 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.module.ts وأضِف عمليات الاستيراد التالية:

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

في ملف app.module.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" وانتظِر إلى أن تكتمل عملية الطرح الجديدة.

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