تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

1. نظرة عامة

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

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

ما ستتعرّف عليه

إنشاء تطبيق ويب باستخدام Angular وFirebase
مزامنة البيانات باستخدام Cloud Firestore و"مساحة التخزين في السحابة الإلكترونية" لـ 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 إلى مستودعك:

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

cd codelab-friendlyeats-web
```

استخدِم حزمة npm giget لجلب مجلد angularfire-start فقط:

npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install

تتبُّع التغييرات محليًا باستخدام git:

git init

git add .

git commit -m "codelab starting point"

git branch -M main

أنشئ مستودعًا جديدًا على 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 هذا.
ادفع التغييرات المحلية إلى مستودع GitHub الجديد. شغِّل الأمر التالي، مع استبدال العنصر النائب your-repository-url بعنوان URL الخاص بالمستودع.
```
git remote add origin your-repository-url

git push -u origin main
```
من المفترض أن يظهر لك الرمز المبدئي في مستودع GitHub.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إعداد Cloud Firestore

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

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

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

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

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

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

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

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

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

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

npm -g install firebase-tools@latest

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

firebase --version

تأكَّد من أنّ إصدار Firebase CLI هو 13.9.0 أو إصدار أحدث.

فوِّض Firebase CLI من خلال تنفيذ الأمر التالي:

firebase login

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

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

firebase use --add

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

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

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

5- تثبيت AngularFire

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

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

npm install -g @angular/cli

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

ng add @angular/fire

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

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

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

في هذا القسم، ستُعدّ خلفية "استضافة التطبيقات" لمشاهدة فرع في مستودع git.

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

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

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

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

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

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

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

لا يمكن للتطبيق تنفيذ أي إجراء في الوقت الحالي، ولكن بفضل مساعدتك، سيتمكّن من تنفيذ الإجراءات قريبًا.

لننشئ الآن تطبيقًا للمحادثة في الوقت الفعلي.

7. استيراد Firebase وضبطه

ضبط Firebase

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

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

ستلاحظ أنّه تم إنشاء ملف بيئة /angularfire-start/src/environments/environment.ts نيابةً عنك.

انسخ مقتطف عنصر الإعدادات، ثم أضفه إلى 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",
  },
};

عرض عملية إعداد AngularFire

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

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

من المفترض أن يكون AngularFire جاهزًا للاستخدام الآن بعد استيراده وإعداده في app.config.ts. ستبدأ الآن في تنفيذ ميزة تسجيل دخول المستخدمين باستخدام Firebase Authentication.

إضافة نطاق مفوَّض

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

انتقِل إلى استضافة التطبيقات.
انسخ نطاق الخلفية.
انتقِل إلى إعدادات المصادقة.
اختَر علامة التبويب النطاقات المعتمَدة.
انقر على إضافة نطاق والصق نطاق الخلفية في "استضافة التطبيقات".

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

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

`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 عندما ينقر المستخدم على الزر تسجيل الخروج.

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

`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 دالة للحصول على عنصر قابل للتتبّع يتم تعديله في كل مرة تتغيّر فيها حالة المصادقة. سبق أن تم تنفيذ هذه الميزة، ولكن من المفيد إلقاء نظرة عليها.

ارجع إلى الملف src/app/services/chat.service.ts.
ابحث عن عملية ضبط المتغيّر user$.

`chat.service.ts`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

`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.

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

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

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

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

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

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

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

تثبيت إضافة

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

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

اختبار ميزة تستخدم الذكاء الاصطناعي

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

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

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

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

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

حفظ الصور في "مساحة التخزين في السحابة الإلكترونية"

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

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

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

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

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

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

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

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

13. Show notifications

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

إضافة عامل خدمة "المراسلة عبر السحابة الإلكترونية من 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`

ابحث عن الدالة saveMessagingDeviceToken.
استبدِل الدالة بأكملها بالرمز التالي.

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

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

`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.');
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

عليك تعديل القواعد لتقييد بعض العناصر باستخدام القواعد التالية:

‫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 لـ Firebase لغة قواعد محدّدة لتحديد أذونات الوصول والأمان وعمليات التحقّق من البيانات.

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

عليك تعديل القواعد لإجراء ما يلي:

السماح لكل مستخدم بالكتابة في مجلدات محدّدة خاصة به فقط
السماح لأي مستخدم بالقراءة من 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 لميزة "التخزين في السحابة الإلكترونية"
المراسلة عبر السحابة الإلكترونية من Firebase
مراقبة أداء Firebase

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

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

firebase.google.com

16- [اختياري] فرض الميزة باستخدام App Check

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

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

تفعيل reCaptcha Enterprise

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

تفعيل ميزة "فحص التطبيق"

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

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

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

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

انتقِل إلى ملف 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({ ...

في عمليات الاستيراد، أضِف عملية إعداد App Check باستخدام 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 في وحدة تحكُّم Firebase.

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

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

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

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

في ملف chat.service.ts نفسه، أدخِل App Check إلى جانب خدمات Firebase الأخرى.

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

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

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

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

1. نظرة عامة

ما ستتعرّف عليه

المتطلبات

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

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

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

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

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

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

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

إعداد Cloud Firestore

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

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

5- تثبيت AngularFire

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

7. استيراد Firebase وضبطه

ضبط Firebase

عرض عملية إعداد AngularFire

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

إضافة نطاق مفوَّض

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

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

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

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

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

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

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

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

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

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

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

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

تثبيت إضافة

اختبار ميزة تستخدم الذكاء الاصطناعي

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

حفظ الصور في "مساحة التخزين في السحابة الإلكترونية"

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

13. Show notifications

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

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

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

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

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

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

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

‫firestore.rules

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

15. تهانينا!

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

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

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

16- [اختياري] فرض الميزة باستخدام App Check

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