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

1- نظرة عامة

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

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

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

المتطلبات

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

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

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

يمكن العثور على مصدر رمز Codelab على 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 أو [e-mail]:[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. من المفترض أن يظهر لك الرمز المبدئي في مستودع GitHub.

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

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

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

ملاحظة مهمة: سيتم تسمية مشروعك على Firebase باسم FriendlyChat، ولكن سيحدّد Firebase تلقائيًا رقم تعريف مشروع فريدًا له على النحو التالي: friendlychat-1234. يُستخدَم هذا المعرّف الفريد لتحديد مشروعك (بما في ذلك في واجهة سطر الأوامر)، في حين أنّ FriendlyChat هو اسم معروض ببساطة.

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

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

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

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

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

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

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

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

ملاحظة: يمكنك الرجوع إلى خطة الأسعار غير المدفوعة (Spark) بعد إكمال هذا الدليل التعليمي حول رموز البرمجة.

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

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

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

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

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

إعداد Cloud Firestore

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

في ما يلي كيفية إعداد Cloud Firestore في مشروع Firebase:

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

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

يستخدم تطبيق الويب ميزة "التخزين في السحابة الإلكترونية" لبرنامج Firebase لتخزين الصور وتحميلها ومشاركتها.

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

1. في اللوحة اليمنى من "وحدة تحكُّم Firebase"، وسِّع إنشاء، ثم اختَر مساحة التخزين.
2. انقر على البدء.
3. اختَر موقعًا جغرافيًا لحزمة التخزين التلقائية.
   يمكن للحِزم في US-WEST1 وUS-CENTRAL1 وUS-EAST1 الاستفادة من المستوى "مجاني دائمًا" في Google Cloud Storage. تخضع الحِزم في جميع المواقع الجغرافية الأخرى لأسعار Google Cloud Storage واستخدامها.
4. انقر على البدء في وضع الاختبار. يمكنك الاطّلاع على بيان إخلاء المسؤولية بشأن قواعد الأمان.
   في وقت لاحق من هذا الدرس التطبيقي حول الترميز، ستضيف قواعد أمان لتأمين بياناتك. لا توزِّع تطبيقًا علنًا أو تعرضه بدون إضافة قواعد أمان لحزمة التخزين.
5. انقر على إنشاء.

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

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

ملاحظة: لتثبيت واجهة سطر الأوامر، عليك تثبيت npm الذي يأتي عادةً مع Node.js.

1. ثبِّت واجهة سطر الأوامر من خلال تنفيذ الأمر npm التالي:

npm -g install firebase-tools@latest

لا يعمل؟ قد تحتاج إلى تغيير أذونات npm.

2. تأكَّد من تثبيت واجهة برمجة التطبيقات بشكلٍ صحيح من خلال تنفيذ الأمر التالي:

firebase --version

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

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

firebase login

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

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

firebase use --add

6. اختَر رقم تعريف المشروع عندما يُطلب منك ذلك، ثم امنح مشروعك على Firebase اسمًا مستعارًا.

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

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

5- تثبيت AngularFire

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

1. في وحدة تحكّم، نفِّذ الأمر التالي:

npm install -g @angular/cli

2. بعد ذلك، في وحدة تحكّم من دليل angularfire-start، نفِّذ الأمر التالي في Angular CLI:

ng add @angular/fire

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

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

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

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

ملاحظة: ميزة "استضافة التطبيقات على Firebase" متاحة في إصدار مبكر متاح للجميع.

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

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

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

   ملاحظة: يمكنك تتبُّع خدمات Google Cloud الأساسية لخلفية "استضافة التطبيقات" من خلال اتّباع الروابط من وحدة التحكّم. اطّلِع على مزيد من المعلومات في مقالة عرض السجلّات والمقاييس.

8. بعد اكتمال عملية الطرح، انقر على النطاق المجاني ضمن "النطاقات". قد يستغرق الأمر بضع دقائق حتى يبدأ العمل بسبب نشر نظام أسماء النطاقات.

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

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

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

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

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

ضبط Firebase

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

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

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

4. انسخ مقتطف كائن الضبط، ثم أضِفه إلى 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.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

يجب أن يحتوي الرمز أعلاه على كائن ضبط Firebase الخاص بالتطبيق، وليس قيم العنصر النائب.

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

9- كتابة الرسائل في Cloud Firestore

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

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

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

ملاحظة: لمزيد من المعلومات حول نموذج بيانات Cloud Firestore، يمكنك الاطّلاع على المستندات والمجموعات في المستندات.

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

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 في تطبيقك.

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

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

الحصول على مفتاح واجهة برمجة التطبيقات لتكنولوجيات الذكاء الاصطناعي من Google

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: الصِق المفتاح الذي أنشأته سابقًا وانقر على إنشاء مفتاح سرّي.
   • مسار مجموعة Firestore: messages
   • حقل الطلب: text
   • حقل الردّ: response
   • حقل الطلب: timestamp
   • السياق: Keep your answers short, informal, and helpful. Use emojis when possible.
3. انقر على تثبيت الإضافة.
4. الانتظار إلى أن تكتمل عملية تثبيت الإضافة

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

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

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

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

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

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

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() التي ستعرض مربع حوار متصفّح يطلب هذا الإذن ( في المتصفحات المتوافقة).

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

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

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

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

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

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

في ورشة عمل لاحقة حول رموز البرامج، حزمة تطوير البرامج (SDK) لمنصّة Firebase لخدمة "وظائف السحابة الإلكترونية"، ستتعرّف على كيفية التشغيل التلقائي لإرسال الإشعارات من الخلفية لكل رسالة جديدة يتم نشرها في تطبيق المحادثة.

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

متغيّر القاعدة request.auth هو متغيّر خاص يحتوي على معلومات عن مستخدم تمت مصادقته. يشير متغيّر القاعدة request.resource إلى البيانات الجديدة التي تتم كتابتها. يمكنك العثور على مزيد من المعلومات في المستندات.

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

عرض قواعد أمان 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;
    }
  }
}

متغيّر القاعدة request.auth هو متغيّر خاص يحتوي على معلومات عن مستخدم تمّت مصادقة هويته. يحتوي متغيّر القاعدة request.resource على معلومات عن الملف الذي تم تحميله. يمكنك العثور على مزيد من المعلومات في المستندات.

15- تهانينا!

لقد استخدمت Firebase لإنشاء تطبيق ويب مخصّص للمحادثات في الوقت الفعلي.

المحتوى الذي غطيته

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

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

انتقِل إلى دورة تعلم البرمجة Cloud Functions لبرنامج Firebase للتعرّف على كيفية استخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase في Cloud Functions وإضافة بعض مهام الخلفية إلى تطبيق المحادثات. يمكنك البدء مباشرةً في الخطوة 5 من دورة تعلم البرمجة هذه لأنّك سبق أن أعددت مشروعك على Firebase.

هل تريد معرفة المزيد عن Cloud Firestore؟ هل تريد الاطّلاع على معلومات عن المجموعات الفرعية والمعاملات؟ يمكنك الانتقال إلى الدرس التطبيقي حول ترميز الويب في Cloud Firestore للتعرّف على مزيد من التفاصيل حول الترميز في Cloud Firestore.

هل تريد معرفة المزيد عن ميزة "مراقبة الأداء" في Firebase للويب؟ يمكنك الانتقال إلى الدرس التطبيقي حول ترميز المواقع الإلكترونية من Firebase للاطّلاع على تفاصيل أكثر حول "مراقبة أداء Firebase".

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

• firebase.google.com

16- [اختياري] فرض الميزة باستخدام "فحص التطبيق"

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

تعتمد هذه الخطوة على استكمال الخطوات السابقة، تأكّد من تشغيل FriendlyChat محليًا مع المحاكيات أو نشره مع خدمات Firebase.

أولاً، يجب تفعيل ميزتَي "فحص التطبيقات" و"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.firebasestorage.app',
    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 نفسه، أدخِل App Check إلى جانب خدمات Firebase الأخرى.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

1. أنشئ عملية إرسال مع رسالة الإرسال "حظر العملاء غير المصرّح لهم باستخدام App Check" وادفعها إلى مستودع GitHub.
2. افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.

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