مختبر كود الويب AngularFire

1. نظرة عامة

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

ماذا ستتعلم

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

ماذا ستحتاج

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

2. احصل على نموذج التعليمات البرمجية

استنساخ مستودع GitHub الخاص بـ codelab من سطر الأوامر:

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

بدلاً من ذلك ، إذا لم يكن لديك git مثبتًا ، يمكنك تنزيل المستودع كملف ZIP .

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

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

3. إنشاء مشروع Firebase وإعداده

أنشئ مشروع Firebase

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

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

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

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

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

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

تفعيل تسجيل الدخول إلى Google لمصادقة Firebase

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

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

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

تفعيل Cloud Firestore

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

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

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

3. حدد خيار البدء في وضع الاختبار ، ثم انقر فوق التالي بعد قراءة إخلاء المسؤولية حول قواعد الأمان.

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

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

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

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

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

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

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

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

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

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

1. قم بتثبيت CLI عن طريق تشغيل الأمر npm التالي:

npm -g install firebase-tools

2. تحقق من تثبيت CLI بشكل صحيح عن طريق تشغيل الأمر التالي:

firebase --version

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

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

firebase login

لقد قمت بإعداد قالب تطبيق الويب لسحب تكوين تطبيقك لـ Firebase Hosting من الدليل المحلي لتطبيقك (المستودع الذي نسخته مسبقًا في مختبر الرموز). ولكن لسحب التكوين ، تحتاج إلى ربط تطبيقك بمشروع 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. عند المطالبة ، حدد الميزات التي تم إعدادها في Firebase Console ( ng deploy -- hosting ، Authentication ، Firestore ، Cloud Functions (callable) ، Cloud Messaging ، Cloud Storage ) ، واتبع المطالبات على وحدة التحكم.

6. قم بتشغيل التطبيق المبدئي محليًا

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

1. في وحدة التحكم من دليل angularfire-start ، قم بتشغيل أمر Firebase CLI التالي:

firebase emulators:start

2. يجب أن يعرض سطر الأوامر الاستجابة التالية:

✔  hosting: Local server: http://localhost:5000

أنت تستخدم محاكي Firebase Hosting لخدمة تطبيقنا محليًا. يجب أن يكون تطبيق الويب متاحًا الآن من http: // localhost: 5000 . يتم تقديم جميع الملفات الموجودة ضمن الدليل الفرعي src .

3. باستخدام المستعرض الخاص بك ، افتح التطبيق الخاص بك على http: // localhost: 5000 .

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

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

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

7. استيراد وتهيئة Firebase

هيئ Firebase

ستحتاج إلى تكوين Firebase SDK لإخبارها بمشروع Firebase الذي تستخدمه.

1. انتقل إلى إعدادات المشروع في وحدة تحكم Firebase
2. في بطاقة "تطبيقاتك" ، حدد لقب التطبيق الذي تريد كائن تهيئة له.
3. حدد "تكوين" من جزء مقتطف Firebase SDK.

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

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

البيئة. t

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

استيراد AngularFire

ستجد أن الميزات التي حددتها في وحدة التحكم قد تم توجيهها تلقائيًا في ملف /angularfire-start/src/app/app.module.ts . يسمح هذا لتطبيقك باستخدام ميزات ووظائف Firebase. ومع ذلك ، للتطوير في بيئة محلية ، تحتاج إلى توصيلهم لاستخدام مجموعة Emulator.

1. في /angularfire-start/src/app/app.module.ts ، ابحث عن قسم imports ، وقم بتعديل الوظائف المتوفرة للاتصال بمجموعة Emulator في بيئات غير إنتاجية.

// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

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

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

يجب أن يكون AngularFire الآن جاهزًا للاستخدام نظرًا لاستيراده وتهيئته في app.module.ts . أنت الآن بصدد تنفيذ تسجيل دخول المستخدم باستخدام مصادقة Firebase .

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

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

1. في دليل angularfire-start ، في الدليل الفرعي /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);
    })
}

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

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

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

chat.service.ts

// Observable user
user$ = user(this.auth);

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

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

1. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase emulators:start في سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. قم بتسجيل الدخول إلى التطبيق باستخدام زر تسجيل الدخول وحساب Google الخاص بك. إذا رأيت رسالة خطأ تفيد بأن auth/operation-not-allowed ، فتحقق للتأكد من أنك قمت بتمكين تسجيل الدخول إلى Google كموفر مصادقة في وحدة تحكم Firebase.
3. بعد تسجيل الدخول ، يجب عرض صورة ملفك الشخصي واسم المستخدم:

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

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

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

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

أضف رسائل إلى 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>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

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

1. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase emulators:start في سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. بعد تسجيل الدخول ، أدخل رسالة مثل "مرحبًا!" ، ثم انقر فوق إرسال . سيؤدي هذا إلى كتابة الرسالة في Cloud Firestore. ومع ذلك ، لن ترى البيانات في تطبيق الويب الفعلي الخاص بك لأنك لا تزال بحاجة إلى تنفيذ استرداد البيانات (القسم التالي من مخطط الشفرة).
3. يمكنك رؤية الرسالة المضافة حديثًا في Firebase Console. افتح واجهة مستخدم مجموعة Emulator. ضمن قسم الإنشاء ، انقر فوق قاعدة بيانات 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. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase emulators:start في سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. يجب أن يتم عرض الرسائل التي قمت بإنشائها مسبقًا في قاعدة البيانات في FriendlyChat UI (انظر أدناه). لا تتردد في كتابة رسائل جديدة ؛ يجب أن تظهر على الفور.
3. (اختياري) يمكنك محاولة حذف أو تعديل أو إضافة رسائل جديدة يدويًا في قسم Firestore من مجموعة Emulator ؛ يجب أن تنعكس أي تغييرات في واجهة المستخدم.

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

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

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

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

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

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

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

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

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

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You 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. إذا كان تطبيقك لا يزال قيد الخدمة ، فحدِّث تطبيقك في المتصفح. بخلاف ذلك ، قم بتشغيل firebase emulators:start في سطر الأوامر لبدء خدمة التطبيق من http: // localhost: 5000 ، ثم افتحه في متصفحك.
2. بعد تسجيل الدخول ، انقر فوق زر تحميل الصورة في أسفل اليسار وحدد ملف صورة باستخدام منتقي الملفات. إذا كنت تبحث عن صورة ، فلا تتردد في استخدام هذه الصورة الرائعة لفنجان القهوة .
3. يجب أن تظهر رسالة جديدة في واجهة مستخدم التطبيق مع الصورة المحددة:

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

12. إظهار الإخطارات

ستضيف الآن دعمًا لإشعارات المتصفح. سيقوم التطبيق بإعلام المستخدمين عند نشر رسائل جديدة في الدردشة. Firebase Cloud Messaging (FCM) هو حل مراسلة عبر الأنظمة الأساسية يتيح لك تسليم الرسائل والإشعارات بشكل موثوق دون أي تكلفة.

أضف عامل خدمة FCM

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

يجب أن يكون موفر المراسلة قد تم إعداده بالفعل عند إضافة AngularFire ، تأكد من وجود الكود التالي في قسم الواردات في /angularfire-start/src/app/app.module.ts

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

app / app.module.ts

يحتاج عامل الخدمة ببساطة إلى تحميل وتهيئة Firebase Cloud Messaging SDK ، والتي ستهتم بعرض الإشعارات.

احصل على رموز جهاز FCM

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

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

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

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

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

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

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

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

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

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

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

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

rules_version = '2';

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

ستقوم بتحديث القواعد لتقييد الأشياء باستخدام القواعد التالية:

قواعد firestore

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

يجب أن يتم تحديث قواعد الأمان تلقائيًا إلى مجموعة Emulator الخاصة بك.

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

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

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

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

ستقوم بتحديث القواعد للقيام بما يلي:

• اسمح لكل مستخدم بالكتابة فقط في مجلداته المحددة
• اسمح لأي شخص بالقراءة من Cloud Storage
• تأكد من أن الملفات التي تم تحميلها عبارة عن صور
• قصر حجم الصور التي يمكن تحميلها على 5 ميغا بايت كحد أقصى

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

التخزين. القواعد

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

14. انشر تطبيقك باستخدام استضافة Firebase

يقدم Firebase خدمة استضافة لخدمة أصولك وتطبيقات الويب. يمكنك نشر ملفاتك على Firebase Hosting باستخدام Firebase CLI. قبل النشر ، تحتاج إلى تحديد الملفات المحلية التي يجب نشرها في ملف firebase.json . بالنسبة إلى معمل الرموز هذا ، لقد قمت بهذا بالفعل نيابة عنك لأن هذه الخطوة كانت مطلوبة لخدمة ملفاتنا أثناء مختبر الرموز هذا. يتم تحديد إعدادات الاستضافة تحت سمة hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

تخبر هذه الإعدادات CLI أنك تريد نشر جميع الملفات في الدليل ./public ( "public": "./public" ).

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

ng deploy

ثم حدد خيار Firebase ، واتبع التعليمات في سطر الأوامر.

3. يجب أن تعرض وحدة التحكم ما يلي:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. قم بزيارة تطبيق الويب الخاص بك الذي يتم استضافته بالكامل الآن على CDN عالمي باستخدام Firebase Hosting في اثنين من نطاقات Firebase الفرعية الخاصة بك:

• https://<firebase-projectId>.firebaseapp.com
• https://<firebase-projectId>.web.app

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

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

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

15. مبروك!

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

ما قمت بتغطيته

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

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

يتعلم أكثر

• firebase.google.com