1
00:00:03,950 --> 00:00:06,525
في التمرين السابق،

2
00:00:06,525 --> 00:00:09,990
قمنا بالفعل بتكوين الواجهة الخلفية Firebase

3
00:00:09,990 --> 00:00:15,120
كخدمة مع المشروع الجديد، كما قمنا بإعداد الكثير من

4
00:00:15,120 --> 00:00:19,620
البيانات في قاعدة البيانات الخاصة بنا ثم قم بإعداد وحدة التخزين الخاصة بنا

5
00:00:19,620 --> 00:00:25,120
وتكوين خادم Firebase الخاص بنا ليكون بمثابة الواجهة الخلفية لتطبيق Angular الخاص بنا.

6
00:00:25,120 --> 00:00:29,160
في هذا التمرين، سننظر إلى نسخة معدلة من

7
00:00:29,160 --> 00:00:33,480
تطبيقنا Angular الذي يستخدم الواجهة الخلفية Firebase

8
00:00:33,480 --> 00:00:37,500
كخدمة من أجل الحصول على البيانات

9
00:00:37,500 --> 00:00:41,915
وكذلك تخزين المعلومات للمستخدمين على الخوادم.

10
00:00:41,915 --> 00:00:44,480
أيضًا، سنستفيد من

11
00:00:44,480 --> 00:00:48,455
دعم المصادقة الذي يوفره Firebase لمصادقة المستخدمين

12
00:00:48,455 --> 00:00:56,295
باستخدام نهج البريد الإلكتروني وكلمة المرور وكذلك باستخدام حساب Google.

13
00:00:56,295 --> 00:00:59,775
للبدء في هذا التمرين،

14
00:00:59,775 --> 00:01:02,750
انتقل إلى موقع مناسب على جهاز الكمبيوتر الخاص بك

15
00:01:02,750 --> 00:01:07,190
ثم استنساخ مستودع Git المحدد حيث

16
00:01:07,190 --> 00:01:14,775
قدمت لك إصدار Angular Firebase من تطبيقنا Angular.

17
00:01:14,775 --> 00:01:17,490
لذا اكتب، git clone

18
00:01:17,490 --> 00:01:27,470
https://github.com/jmuppala/confusion-Angular6-Firebase.git

19
00:01:27,470 --> 00:01:28,670
ثم استنساخ

20
00:01:28,670 --> 00:01:34,835
مستودع Git وبمجرد استنساخ مستودع Git إلى جهاز الكمبيوتر الخاص بك،

21
00:01:34,835 --> 00:01:43,355
ثم الانتقال إلى

22
00:01:43,355 --> 00:01:47,570
مجلد Angular Firebase الذي سيتم إنشاؤه في هذه المرحلة

23
00:01:47,570 --> 00:01:52,110
ثم لاحظ أن مجموعة من الملفات مثبتة بالفعل هناك.

24
00:01:52,110 --> 00:01:56,015
دعونا نمضي قدما ونقوم بتثبيت npm لتثبيت

25
00:01:56,015 --> 00:02:01,890
جميع وحدات العقدة التي يعتمد عليها هذا التطبيق Angular.

26
00:02:01,890 --> 00:02:04,520
سيقوم هذا الإصدار أيضًا بتثبيت

27
00:02:04,520 --> 00:02:10,010
وحدتي عقدة إضافيتين تسمى Firebase ثم Angular fire اثنين.

28
00:02:10,010 --> 00:02:15,525
وسوف أشرح أكثر قليلا عن هذه الوحدات عقدة اثنين في وقت لاحق في هذا التمرين.

29
00:02:15,525 --> 00:02:18,915
بمجرد اكتمال تثبيت المشروع،

30
00:02:18,915 --> 00:02:23,360
افتح المشروع في محرر ثم في المشروع،

31
00:02:23,360 --> 00:02:27,830
انتقل إلى مجلد البيئات المصدر

32
00:02:27,830 --> 00:02:32,420
ثم افتح ملف.ts invironment.ts وفي ملف البيئة،

33
00:02:32,420 --> 00:02:36,980
سترى مجموعة من تكوين Firebase التي

34
00:02:36,980 --> 00:02:42,130
تحتاج إلى إعدادها باستخدام تكوين خادم فيريباس الخاصة.

35
00:02:42,130 --> 00:02:45,105
كما رأينا في التمرين السابق،

36
00:02:45,105 --> 00:02:48,950
يمكننا الحصول على كل هذه المعلومات عند النقر على

37
00:02:48,950 --> 00:02:56,809
هذا الزر هنا

38
00:02:56,809 --> 00:03:01,835
المسمى «إضافة Firebase إلى تطبيق الويب الخاص بك» ثم نسخ هذه المعلومات ثم لصق

39
00:03:01,835 --> 00:03:06,500
هذه المعلومات في ملف البيئة الخاص بك لاستبدالها مع تكوين خوادم Firebase

40
00:03:06,500 --> 00:03:10,940
لكل هذه المعلومات وبمجرد الانتهاء منها،

41
00:03:10,940 --> 00:03:17,390
يمكنك بدء تشغيل تطبيق Angular الخاص بك عن طريق كتابة «ng service» في المطالبة.

42
00:03:17,390 --> 00:03:21,735
بمجرد تجميع تطبيق Angular الخاص بك باستخدام «ng

43
00:03:21,735 --> 00:03:29,905
serve»، انتقل إلى متصفح ثم اكتب localhost: 4200 للتحميل في

44
00:03:29,905 --> 00:03:34,850
تطبيق Angular الخاص بك وستلاحظ أن تطبيق Angular الخاص بك يتم تجميعه

45
00:03:34,850 --> 00:03:40,215
ثم تحميله في متصفحك تمامًا كما كان من قبل.

46
00:03:40,215 --> 00:03:43,190
لذا، بمجرد تشغيل تطبيق Angular الخاص بك وتشغيله،

47
00:03:43,190 --> 00:03:47,585
ستلاحظ أن هذا الإصدار من تطبيق Angular سيستفيد من

48
00:03:47,585 --> 00:03:51,260
خادم Firebase

49
00:03:51,260 --> 00:03:55,625
الذي قمت بإعداده في التمرين السابق، وهكذا سترى صفحة «Home»، صفحة

50
00:03:55,625 --> 00:04:00,030
«About» كما نرى هنا و

51
00:04:00,030 --> 00:04:09,615
« القائمة» وصفحة «الاتصال» ومن الواضح بما أننا لم يتم تسجيل الدخول حاليًا،

52
00:04:09,615 --> 00:04:14,975
فإن صفحة «المفضلة» تعرض خطأ يقول أنه لم يتم تسجيل دخول أي مستخدم.

53
00:04:14,975 --> 00:04:17,210
لذلك، دعونا تسجيل الدخول أنفسنا.

54
00:04:17,210 --> 00:04:20,760
اسمحوا لي أن أعود إلى «الصفحة الرئيسية» وبعد ذلك سنقوم بتسجيل الدخول أنفسنا.

55
00:04:20,760 --> 00:04:22,475
لذلك، عند النقر على زر تسجيل الدخول،

56
00:04:22,475 --> 00:04:27,195
سترى النموذج النموذجي هنا مع البريد الإلكتروني ومعلومات كلمة المرور.

57
00:04:27,195 --> 00:04:30,715
سترى أيضا زر إضافي هنا يسمى «تسجيل الدخول مع جوجل».

58
00:04:30,715 --> 00:04:33,600
لذلك اسمحوا لي بتسجيل الدخول باستخدام حسابي في Google.

59
00:04:33,600 --> 00:04:35,750
لذلك، عند النقر على «تسجيل الدخول باستخدام Google»،

60
00:04:35,750 --> 00:04:41,180
فسيتم فتح نافذة متصفح أخرى حيث سيطلب منك

61
00:04:41,180 --> 00:04:47,420
التفويض باستخدام حساب Google الخاص بك بواسطة خادم Firebase هذا.

62
00:04:47,420 --> 00:04:49,475
لذلك، اسمحوا لي أن المضي قدما والتصريح

63
00:04:49,475 --> 00:04:53,845
بهذا التطبيق وبعد ذلك بمجرد الانتهاء من التفويض،

64
00:04:53,845 --> 00:04:57,145
ثم سترى أن

65
00:04:57,145 --> 00:05:01,850
تطبيق Angular القائم على Firebase الخاص بك

66
00:05:01,850 --> 00:05:06,200
سوف تبدأ وعلى الزاوية اليمنى، سترى على الفور اسمك يتم

67
00:05:06,200 --> 00:05:11,525
عرضه هنا ومع «تسجيل الدخول» تحولت الآن إلى زر «تسجيل الخروج».

68
00:05:11,525 --> 00:05:14,755
لذلك، في هذه المرحلة،

69
00:05:14,755 --> 00:05:17,530
يجب أن تكون قادرا على رؤية المفضلة لديك

70
00:05:17,530 --> 00:05:20,310
وفي هذه الحالة بما أننا ليس لدينا أي المفضلة،

71
00:05:20,310 --> 00:05:22,155
لذلك سوف تكون فارغة في هذه المرحلة.

72
00:05:22,155 --> 00:05:27,830
اسمحوا لي أن أعود إلى «القائمة» ثم إضافة اثنين من العناصر إلى «المفضلة».

73
00:05:27,830 --> 00:05:32,235
لذلك، سأضيف هذا الطبق إلى المفضلة.

74
00:05:32,235 --> 00:05:34,045
لذلك، عندما أنقر على هذا الطبق،

75
00:05:34,045 --> 00:05:41,110
سترى على الفور رمز تتحول إلى قلب مملوء واسمحوا لي أيضا اختيار

76
00:05:41,110 --> 00:05:44,350
طبق واحد آخر

77
00:05:44,350 --> 00:05:49,650
وإضافته إلى «المفضلة» ثم الآن عندما تذهب إلى «المفضلة»،

78
00:05:49,650 --> 00:05:52,510
سترى اثنين من الأطباق المضافة إلى

79
00:05:52,510 --> 00:05:56,330
المفضلة لديك كما تفعل نتوقع ومرة أخرى،

80
00:05:56,330 --> 00:06:02,540
يمكنك حذف الأطباق عن طريق النقر على «حذف» تبديل هنا ثم انقر

81
00:06:02,540 --> 00:06:09,695
على الصليب لإزالة العنصر من قائمة المفضلة الخاصة بك كما هو موضح هنا.

82
00:06:09,695 --> 00:06:13,570
الآن، يمكننا أيضا إضافة كما أدركت،

83
00:06:13,570 --> 00:06:17,660
يمكننا الذهاب إلى أي طبق ومن ثم إضافة تعليقات حول هذا الطبق.

84
00:06:17,660 --> 00:06:19,190
لذلك، اسمحوا لي أن أضيف في تعليق

85
00:06:19,190 --> 00:06:28,260
هنا لحظة تقديم التعليق،

86
00:06:28,260 --> 00:06:32,435
سترى على الفور أن التعليقات الخاصة بك سيتم عرضها هنا مع

87
00:06:32,435 --> 00:06:41,825
اسم المؤلف تعليق المدرجة أيضا في هنا ومع التاريخ كما هو موضح هنا.

88
00:06:41,825 --> 00:06:45,890
لذلك، يمكنك أن ترى أن تقديم المستخدم

89
00:06:45,890 --> 00:06:49,955
من التعليقات سيتم دعمه لأي طبق معين.

90
00:06:49,955 --> 00:06:55,805
اسمحوا لي أن أضيف في واحد أكثر المفضلة وحتى هذا المستخدم سوف يكون اثنين من المفضلة.

91
00:06:55,805 --> 00:06:58,180
اسمحوا لي «تسجيل الخروج» هذا المستخدم.

92
00:06:58,180 --> 00:07:02,930
ارجع إلى «الصفحة الرئيسية» ثم «تسجيل الخروج» هذا المستخدم.

93
00:07:02,930 --> 00:07:07,715
الآن سنقوم بتسجيل الدخول باستخدام حساب آخر.

94
00:07:07,715 --> 00:07:13,490
لذلك، أود أن أقوم بإعداد

95
00:07:13,490 --> 00:07:17,840
حساب كلمة مرور البريد الإلكتروني هذا

96
00:07:17,840 --> 00:07:22,865
في وقت سابق، وهكذا سنقوم بتسجيل الدخول كمستخدم آخر وبمجرد تسجيل دخول المستخدم الآخر،

97
00:07:22,865 --> 00:07:29,045
اسمحوا لي مرة أخرى انتقل إلى «القائمة» وإضافة بضعة عناصر إلى

98
00:07:29,045 --> 00:07:36,904
المفضلة لهذا المستخدم معين

99
00:07:36,904 --> 00:07:40,700
وذلك عندما تعود إلى «المفضلة»،

100
00:07:40,700 --> 00:07:44,270
سترى هذه العناصر المدرجة للمستخدم الثاني.

101
00:07:44,270 --> 00:07:46,775
الآن، وبالمثل بالنسبة لهذا المستخدم،

102
00:07:46,775 --> 00:07:53,150
اسمحوا لي مرة أخرى تقديم تعليق آخر من قبل هذا المستخدم.

103
00:08:01,000 --> 00:08:02,600
ذلك-

104
00:08:02,600 --> 00:08:07,445
وسترى أن التعليقات المقدمة من قبل المستخدم الثاني تضاف أيضا في التطبيق.

105
00:08:07,445 --> 00:08:11,615
لذا، هذه هي الطريقة التي يعمل بها تطبيق Angular الخاص بك

106
00:08:11,615 --> 00:08:16,490
مع Firebase كخلفية كخدمة.

107
00:08:16,490 --> 00:08:18,529
الآن بالطبع يجب أن تتساءل،

108
00:08:18,529 --> 00:08:24,170
كيف نقوم بإعادة تصميم تطبيق Angular الخاص بنا للاستفادة من Firebase بدلاً

109
00:08:24,170 --> 00:08:31,610
من استخدام خادم Standard Express بالإضافة إلى MongoDB الذي قمنا ببنائه في وقت سابق؟

110
00:08:31,610 --> 00:08:38,440
من أجل تكوين تطبيق Angular الخاص بك للتواصل مع خادم Firebase،

111
00:08:38,440 --> 00:08:42,620
هناك نوعان من وحدات العقدة التي تحتاج إلى تثبيتها في

112
00:08:42,620 --> 00:08:49,730
تطبيق Angular الخاص بك واحد منهم هو وحدة Firebase.

113
00:08:49,730 --> 00:08:55,190
توفر وحدة Firebase كما ترى هنا الأدوات والبنية التحتية التي تمكنك من التواصل

114
00:08:55,190 --> 00:09:01,610
مع خادم Firebase وتثبيت هذا في التطبيق الخاص بك،

115
00:09:01,610 --> 00:09:05,720
تكتب، تثبيت npm ناقص حفظ Firebase.

116
00:09:05,720 --> 00:09:07,610
الآن جنبا إلى جنب مع هذا،

117
00:09:07,610 --> 00:09:11,395
هناك وحدة أخرى تسمى النار الزاوي 2.

118
00:09:11,395 --> 00:09:13,725
وبالتالي فإن النار الزاوي 2.

119
00:09:13,725 --> 00:09:20,535
أيضا، مرة أخرى لقد قدمت وصلات لهاتين الوحدتين في الموارد الإضافية.

120
00:09:20,535 --> 00:09:23,795
AngularFire 2 هي المكتبة الرسمية

121
00:09:23,795 --> 00:09:27,290
لدعم Firebase و Angular وكما ترون،

122
00:09:27,290 --> 00:09:31,520
فهو دعم قائم على الملاحظة لملفات Angular.

123
00:09:31,520 --> 00:09:36,545
لذا، يعمل هذا على الإضافة إلى وحدة Firebase npm ثم

124
00:09:36,545 --> 00:09:42,125
يمنحك واجهة قائمة يمكن ملاحظتها يمكننا استخدامها في تطبيق Angular الخاص بك.

125
00:09:42,125 --> 00:09:44,930
لذلك، سنكون الاستفادة من AngularFire 2.

126
00:09:44,930 --> 00:09:46,994
لذلك، للاستفادة من AngularFire2،

127
00:09:46,994 --> 00:09:49,940
تحتاج إلى تثبيت كل من فيريباس وكذلك أنغولارفير 2.

128
00:09:49,940 --> 00:09:51,345
لذلك، في لقطة واحدة،

129
00:09:51,345 --> 00:09:54,205
قم بتثبيت كل من هذه في تطبيق Angular الخاص بك.

130
00:09:54,205 --> 00:09:59,320
الآن، يقوم إصدار تطبيق Angular الذي قدمته لك تلقائيًا

131
00:09:59,320 --> 00:10:06,250
بتثبيت كل منهما كما سترى عند فحص ملف package.json.

132
00:10:06,250 --> 00:10:08,510
الآن، كيفية الاستفادة من هذين،

133
00:10:08,510 --> 00:10:12,245
وسوف أوضح أنه من خلال تشغيل بسرعة لك من خلال

134
00:10:12,245 --> 00:10:17,280
التعليمات البرمجية المعدلة للخدمات واثنين من المكونات حيث

135
00:10:17,280 --> 00:10:19,955
نستخدم فيريباس و AngularFire2

136
00:10:19,955 --> 00:10:23,135
لتعديل التطبيق الزاوي الذي قمنا بتطويره في

137
00:10:23,135 --> 00:10:30,140
وقت سابق للاستفادة من خادم فيريباس كما الخلفية كخدمة.

138
00:10:30,140 --> 00:10:34,075
من أجل فهم المزيد حول كيفية

139
00:10:34,075 --> 00:10:39,185
الاستفادة من فيريباس و أنغولارفير 2 داخل التطبيق الزاوي

140
00:10:39,185 --> 00:10:42,860
لدينا، أول محطة لدينا هي في ملف package.json.

141
00:10:42,860 --> 00:10:45,025
حتى في ملف package.json،

142
00:10:45,025 --> 00:10:50,850
ستلاحظ أنني قمت بتثبيت AngularFire2 هنا وأيضا قمنا بتثبيت

143
00:10:50,850 --> 00:10:57,510
Firebase لاستخدامها في هذا الإصدار من تطبيق Angular الذي أقوم بتوفيره لك.

144
00:10:57,510 --> 00:11:01,980
لذا، لاحظ أنه سيتم تثبيت هذين الاثنين تلقائيًا عند كتابة «npm

145
00:11:01,980 --> 00:11:07,720
install» بعد استنساخ مستودع git هذا الذي قدمته لك.

146
00:11:07,720 --> 00:11:11,220
إذا كنت تبدأ بتطبيق Angular جديد،

147
00:11:11,220 --> 00:11:15,590
فيجب عليك تثبيت كل من AngularFire 2 بالإضافة إلى Firebase

148
00:11:15,590 --> 00:11:20,184
من أجل الاستفادة من استخدام Firebase كواجهة خلفية كخدمة.

149
00:11:20,184 --> 00:11:22,365
الآن بعد تثبيت هذين الاثنين،

150
00:11:22,365 --> 00:11:27,360
دعونا نتعلم كيف نستفيد من هذه ضمن خدماتنا.

151
00:11:27,360 --> 00:11:30,030
لذا، فإن أفضل طريقة لتعلم كيفية الاستفادة من كل من

152
00:11:30,030 --> 00:11:33,640
هذه هي زيارة بعض الخدمات التي قمنا

153
00:11:33,640 --> 00:11:36,930
بتكوينها في تطبيقنا وفهم كيفية

154
00:11:36,930 --> 00:11:42,130
الاستفادة من استخدام AngularFire2 و Firebase.

155
00:11:42,130 --> 00:11:46,235
لذلك، سنبدأ مع ملف dish.service.ts.

156
00:11:46,235 --> 00:11:48,830
لذا، إذا ذهبت إلى ملف dish.service.ts،

157
00:11:48,830 --> 00:11:51,095
ستلاحظ أنه هنا،

158
00:11:51,095 --> 00:11:55,235
في خدمة الطبق هذه،

159
00:11:55,235 --> 00:12:01,190
سترى لي استيراد هذا AngularFireStore، AngularFireStoreDocument،

160
00:12:01,190 --> 00:12:08,115
و AngularFirestoreCollection من AngularFire إلى Firestore هنا.

161
00:12:08,115 --> 00:12:16,680
لذا، فإن ذلك يجلب كل ما أحتاجه من وحدة AngularFireStore npm الخاصة بي،

162
00:12:16,680 --> 00:12:21,010
ستلاحظ أيضًا أنني أستورد كل شيء من

163
00:12:21,010 --> 00:12:27,615
FireBase/App كما Firebase إلى خدمة الطبق الخاصة بي هنا.

164
00:12:27,615 --> 00:12:29,945
لذلك، بمجرد أن نستورد هذين الاثنين،

165
00:12:29,945 --> 00:12:35,415
دعونا نلقي نظرة سريعة على كيفية إعادة تكوين خدمة الطبق لدينا هنا.

166
00:12:35,415 --> 00:12:37,435
لذلك، إذا ذهبت إلى خدمة الطبق،

167
00:12:37,435 --> 00:12:41,175
ستلاحظ أنني لم أعد أستخدم عميل HTTP.

168
00:12:41,175 --> 00:12:48,975
بدلا من ذلك، أنا حقن أفس الذي هو أنغولارفيستور في منشئ هنا.

169
00:12:48,975 --> 00:12:51,520
و AngularFireStore هو الذي يعطيني

170
00:12:51,520 --> 00:12:55,815
الوصول إلى الواجهة الخلفية فيريباس كخدمة.

171
00:12:55,815 --> 00:13:01,785
الآن، تذكر أيضًا أننا قمنا بالفعل بتكوين جميع تفاصيل

172
00:13:01,785 --> 00:13:09,450
الخادم الخاص بنا وكذلك مشروع filestore في ملف environment.ts في وقت سابق.

173
00:13:09,450 --> 00:13:12,595
لذا، يجب أن

174
00:13:12,595 --> 00:13:16,180
تكون قد قمت بتكوين هذه المعلومات بالفعل حول كيفية استفادة تطبيق Angular

175
00:13:16,180 --> 00:13:20,930
الخاص بك من مشروع Firestore المستند إلى

176
00:13:20,930 --> 00:13:27,710
خادم Firestore الخاص بك للوصول إلى البيانات التي قمت بتكوينها هناك.

177
00:13:27,710 --> 00:13:32,290
لذا، سيعطيني هذا الوصول إلى سحابة

178
00:13:32,290 --> 00:13:39,400
Firestore الخاصة بي داخل مشروع Firebase الذي قمت بإعداده.

179
00:13:39,400 --> 00:13:43,410
الآن، أوثسرفيس هو بالطبع نفس أوثسيرفيس التي

180
00:13:43,410 --> 00:13:51,175
استخدمناها من قبل، ولكن تم تعديلها للاستفادة من دعم الزاوي لفيريباس.

181
00:13:51,175 --> 00:13:55,095
سنقوم بزيارة AuthService لمعرفة كيفية تحديثه.

182
00:13:55,095 --> 00:14:00,410
الآن، سوف أوثسرفيس تعطينا الوصول إلى

183
00:14:00,410 --> 00:14:06,345
هذه الطريقة تسمى جيتاوثستات والتي سوف تعود في ملحوظ.

184
00:14:06,345 --> 00:14:08,965
هذا يمكن ملاحظته، عندما نشترك في ذلك،

185
00:14:08,965 --> 00:14:15,855
سوف تعطينا المعلومات كمستخدم الذي يحتوي على معلومات المستخدم.

186
00:14:15,855 --> 00:14:21,465
لذلك، سأحصل على ذلك ثم قم بإعداد CurrentUser في طلبي

187
00:14:21,465 --> 00:14:28,995
كمستخدم تم إرجاعه بواسطة هذا الملاحظة هنا.

188
00:14:28,995 --> 00:14:30,699
لذلك، عندما نزور

189
00:14:30,699 --> 00:14:33,085
أوثسيرفيس، سوف نتعلم ما سيعود هذا جيتاوثستات بالنسبة

190
00:14:33,085 --> 00:14:35,700
لنا وبالتالي

191
00:14:35,700 --> 00:14:36,940
يمكن الحصول على معلومات كيرنتوسر من أي من

192
00:14:36,940 --> 00:14:41,165
الخدمات الأخرى لأننا بالفعل حقن أوثسرفيس في هنا.

193
00:14:41,165 --> 00:14:45,570
الآن، دعونا نلقي نظرة على كيفية تنفيذ طريقة getDuses هنا.

194
00:14:45,570 --> 00:14:47,710
الآن، في وقت سابق في طريقة getDuses،

195
00:14:47,710 --> 00:14:55,920
كنا نستخدم عميل HTTP للوصول إلى الخادم في URL الأساسي +/الأطباق.

196
00:14:55,920 --> 00:14:57,425
الآن في هذه الحالة،

197
00:14:57,425 --> 00:15:07,255
للوصول إلى مجموعة في خادم Firebase الخاص بي، سنقول هذا.afs.

198
00:15:07,255 --> 00:15:10,710
لذلك، هذا هو ما يوفر AngularFire2 بالنسبة لنا.

199
00:15:10,710 --> 00:15:19,810
AFS كما ترون هو AngularFireStore التي قمنا بحقنها هنا وهكذا نقول

200
00:15:19,810 --> 00:15:23,010
هذا.afs.collection وهنا سوف نحدد المجموعة المحددة التي نصل إليها هنا.

201
00:15:23,010 --> 00:15:26,315
أذكر أننا قمنا بإعداد الأطباق، والترقيات،

202
00:15:26,315 --> 00:15:30,415
ومجموعات القادة على خادم Firebase الخاص بي.

203
00:15:30,415 --> 00:15:34,065
لذلك، وهذا يعطيني مباشرة الوصول

204
00:15:34,065 --> 00:15:38,595
إلى مجموعة الأطباق الخاصة بي هنا ومن مجموعة الأطباق،

205
00:15:38,595 --> 00:15:42,740
ويمكنني إما أن تفعل. ValueChanges التي

206
00:15:42,740 --> 00:15:47,115
ستعيد جميع المعلومات في مجموعة الأعمال بالنسبة لي،

207
00:15:47,115 --> 00:15:50,440
أو يمكنني أن أفعل. SnapshotChanges التي

208
00:15:50,440 --> 00:15:53,990
ستعود معلومات إضافية بما في ذلك معرف من الأطباق.

209
00:15:53,990 --> 00:15:56,660
لذا، إذا بدلاً من القيام بـ

210
00:15:56,660 --> 00:15:59,310
SnapshotChanges، إذا قلت ValueChanges،

211
00:15:59,310 --> 00:16:03,110
فستعود فقط إلى معلومات الطبق ولكنها لن تعيد

212
00:16:03,110 --> 00:16:07,890
معرفات الأطباق ولكن بما أنني سأحتاج إلى معرفات أطباقي،

213
00:16:07,890 --> 00:16:13,335
لذلك هذا هو السبب في أنني أستخدم.SnapshotChanges في هذه الحالة.

214
00:16:13,335 --> 00:16:16,090
لذا، عندما يتم استدعاء.SnapshotChanges،

215
00:16:16,090 --> 00:16:19,505
سيعود هذا كما ترى ملاحظته

216
00:16:19,505 --> 00:16:27,195
والتي أقوم بتعيينها وبالتالي فإن قيمة الإرجاع التي تسمى كإجراءات وهذه الإجراءات

217
00:16:27,195 --> 00:16:31,800
، مرة أخرى، ستكون قابلة للملاحظة والتي سأقوم بتعيين كل إجراء في

218
00:16:31,800 --> 00:16:38,930
هذه الإجراءات ثم استخراج البيانات من الإجراء الذي هو عاد إلى هنا.

219
00:16:38,930 --> 00:16:44,525
وبالتالي فإن الإجراء هو القيمة التي يتم إرجاعها من لكل من الإجراءات

220
00:16:44,525 --> 00:16:50,765
وهذا الإجراء يحتوي على حمولة ويحتوي داخل ذلك حقل مظلم هنا.

221
00:16:50,765 --> 00:16:53,200
الآن، هذا شيء قد برزت من خلال قراءة

222
00:16:53,200 --> 00:16:57,010
وثائق AngularFire2

223
00:16:57,010 --> 00:17:03,705
وهكذا عندما نسمي وظيفة البيانات هذه على هذا الإجراء .payload.doc،

224
00:17:03,705 --> 00:17:05,875
وهذا سيعطيني البيانات.

225
00:17:05,875 --> 00:17:09,510
البيانات الخاصة بهذا الطبق المحدد التي يتم

226
00:17:09,510 --> 00:17:14,160
الحصول عليها من مجموعة الأطباق الخاصة بي على جانب الخادم.

227
00:17:14,160 --> 00:17:18,760
لذلك سيتم إرجاع كل وثيقة في هناك هنا

228
00:17:18,760 --> 00:17:24,205
ثم أحصل على معرف لذلك عن طريق قول action.payload.doc.id

229
00:17:24,205 --> 00:17:27,855
لذلك هذا هو المكان الذي سيتم

230
00:17:27,855 --> 00:17:32,030
حمل معرف ذلك وبعد ذلك سوف انضم إلى الاثنين معا وإرجاع

231
00:17:32,030 --> 00:17:40,035
هذا كوثيقة طبق مرة أخرى إلى مكوناتي المختلفة من هناك،

232
00:17:40,035 --> 00:17:42,150
وسوف استدعاء هذا الأسلوب getDuses.

233
00:17:42,150 --> 00:17:43,345
لذلك، كما تذكر،

234
00:17:43,345 --> 00:17:44,690
من مكون القائمة،

235
00:17:44,690 --> 00:17:47,400
وأنا استدعاء طريقة جيتدايوسيس من أجل الحصول

236
00:17:47,400 --> 00:17:51,090
على معلومات حول جميع الأطباق في مجموعتي.

237
00:17:51,090 --> 00:17:58,505
جمع. لذلك، سيتم إعادة بناء كل من هذه الأطباق التي يتم إرجاعها كمستند في

238
00:17:58,505 --> 00:18:03,420
كائن جافا سكريبت مع معرف إدراجها هنا وأيضا

239
00:18:03,420 --> 00:18:09,540
البيانات التي يتم استخراجها من هذا الإجراء payload.doc.data.

240
00:18:09,540 --> 00:18:16,455
الآن هذا هو الشيء الذي تتعلم من خلال قراءة وثائق AngularFire2.

241
00:18:16,455 --> 00:18:19,470
الآن، بما أنني قد فعلت هذا الجزء بالفعل،

242
00:18:19,470 --> 00:18:22,755
فأنا أعرض لك الشفرة الدقيقة التي من المفترض أن

243
00:18:22,755 --> 00:18:26,160
تستخدمها لاستخراج البيانات ثم تقديم

244
00:18:26,160 --> 00:18:33,500
هذه البيانات مرة أخرى إلى المكون الخاص بك الذي سيقوم باستدعاء طريقة getDubishes هنا.

245
00:18:33,500 --> 00:18:37,090
لذلك، من خلال القيام بذلك لكل واحد من الوثائق هناك،

246
00:18:37,090 --> 00:18:39,180
سيتم إعادة بناء هذه الوثيقة إلى

247
00:18:39,180 --> 00:18:44,800
كائن الطبق الذي

248
00:18:44,800 --> 00:18:51,500
نستخدمه في تطبيق Angular الخاص بنا، وبالتالي نحن قادرون على الوصول إلى المعرف.

249
00:18:51,500 --> 00:18:53,365
إذا قمت فقط بإجراء تغييرات في القيمة،

250
00:18:53,365 --> 00:18:59,825
فستعيد ببساطة جميع المستندات نفسها ولكن بدون معرفات المستندات.

251
00:18:59,825 --> 00:19:04,920
لذلك، يجب القيام بهذا العمل الإضافي داخل خدمتك من أجل

252
00:19:04,920 --> 00:19:07,835
إرجاع المعلومات بالطريقة الصحيحة

253
00:19:07,835 --> 00:19:10,865
بحيث يمكن لـ MyComponents الاستفادة من هذه المعلومات.

254
00:19:10,865 --> 00:19:13,370
وبالمثل، لطريقة getDish،

255
00:19:13,370 --> 00:19:17,695
لذلك لاحظ كيف يمكنني الوصول إلى المعلومات لطبق معين.

256
00:19:17,695 --> 00:19:22,020
مرة أخرى، سنقول هذا.afs ثم ستلاحظ أن أنا

257
00:19:22,020 --> 00:19:26,660
saying.doc ثم هنا لطريقة the.doc،

258
00:19:26,660 --> 00:19:32,650
وأنا توريد أطباق مائلة ثم معرف طبق معين.

259
00:19:32,650 --> 00:19:35,150
الآن، والسبب في أنني قدمت معرف،

260
00:19:35,150 --> 00:19:39,350
والمعرف هنا يأتي كمعلمة لطريقة getDish هنا.

261
00:19:39,350 --> 00:19:41,985
الآن، من أجل توفير هذا المعرّف،

262
00:19:41,985 --> 00:19:44,450
أحتاج إلى أن أكون قادرًا على توفير هذا المعرّف في

263
00:19:44,450 --> 00:19:47,480
طريقة getDusies حتى عندما يتم إنشاء القائمة الخاصة بي،

264
00:19:47,480 --> 00:19:51,205
سيكون لكل طبق معرّف مرتبط به هناك.

265
00:19:51,205 --> 00:19:56,575
يتم تمرير هذا المعرف هنا ولذا فإنني سوف الوصول إلى المستند في هذه المرحلة.

266
00:19:56,575 --> 00:20:01,260
لذلك، يسمح لك AngularFire2 بالوصول إلى

267
00:20:01,260 --> 00:20:07,125
مستند معين داخل مجموعة من خلال قول شرطة مائلة لاسم المجموعة،

268
00:20:07,125 --> 00:20:15,430
بالإضافة إلى معرف المستند أو يمكنك أن تقول هذا.afs.collection أطباق تماما كما سمعت،

269
00:20:15,430 --> 00:20:22,540
وجمع الأطباق و then.doc ومن ثم توفير المستند والمعرف داخل الأقواس هناك.

270
00:20:22,540 --> 00:20:26,725
لذلك، هذه طريقة أخرى لمعالجة طبق معين.

271
00:20:26,725 --> 00:20:32,680
مرة أخرى، أشترك في SnapshotChanges وهذا سيعود إلى إجراء يتم

272
00:20:32,680 --> 00:20:35,480
تعيينه مرة أخرى بنفس التنسيق

273
00:20:35,480 --> 00:20:39,495
لإنشاء كائن الطبق هنا مع المعرف هنا.

274
00:20:39,495 --> 00:20:42,410
الآن، يحتفظ Firebase بالمعرف منفصلاً عن المستند

275
00:20:42,410 --> 00:20:46,300
نفسه ولهذا السبب يجب علي القيام

276
00:20:46,300 --> 00:20:49,010
بإعادة البناء هذه بشكل صريح من أجل الحصول على

277
00:20:49,010 --> 00:20:54,750
مستند الطبق بطريقة قابلة للاستخدام بواسطة MyComponents.

278
00:20:54,750 --> 00:20:59,660
ثم قمت ببناء الخادم الخاص بي باستخدام Express و MongoDB،

279
00:20:59,660 --> 00:21:03,995
كان المعرف موجودًا تلقائيًا في المستند نفسه، لذا كان من

280
00:21:03,995 --> 00:21:09,235
السهل جدًا استرداد ذلك وإعادته إلى جانب العميل.

281
00:21:09,235 --> 00:21:13,610
الآن، لجيتفيتوريدديش،

282
00:21:13,610 --> 00:21:15,620
أذكر أن لجيتفيتوريدديش،

283
00:21:15,620 --> 00:21:20,870
ونحن نبحث عن تلك الأطباق حيث يتم تعيين ميزة إلى صحيح.

284
00:21:20,870 --> 00:21:25,790
الآن، هذا هو المكان الذي يسمح لنا AngularFire2

285
00:21:25,790 --> 00:21:31,180
ببناء استعلام وتوفير هذا الاستعلام هنا لهذه المجموعة.

286
00:21:31,180 --> 00:21:36,440
هنا أقول هذا.afs أطباق جمع هنا،

287
00:21:36,440 --> 00:21:39,520
لذلك ما زلت أستخدم المجموعة ولكن بعد ذلك ننظر

288
00:21:39,520 --> 00:21:43,140
إلى المعلمة الثانية لهذه المكالمة هنا.

289
00:21:43,140 --> 00:21:49,405
هذا يقول المرجع حيث يشير المرجع إلى كل مستند موجود في هذه المجموعة.

290
00:21:49,405 --> 00:21:53,330
هذا المرجع يقول المرجع وهذا هو المكان الذي يمكنني

291
00:21:53,330 --> 00:21:58,100
استخدام هذا الاستعلام إعداد يسمع حتى الذي يقول.

292
00:21:58,100 --> 00:22:04,695
لذلك، وهذا يعني أن كل واحد من الوثائق حيث ظهرت،

293
00:22:04,695 --> 00:22:10,445
كما ترون، بناء الجملة من السهل إلى حد ما لمتابعة هنا الذي يقول أين ظهرت.

294
00:22:10,445 --> 00:22:15,240
الآن، لاحظ أن يتم توفير هذه الميزة كسلسلة هنا،

295
00:22:15,240 --> 00:22:17,175
ثم التالي،

296
00:22:17,175 --> 00:22:22,230
المشغل يساوي حتى يمكنك أن تقول أكبر من، أقل من،

297
00:22:22,230 --> 00:22:25,345
أكبر من أو يساوي أقل من أو يساوي أي واحد من هذه الأشياء،

298
00:22:25,345 --> 00:22:30,375
ولكن لاحظ أن ذلك يجب أن يكون داخل الاقتباسات هنا ثم سوف يقول صحيح.

299
00:22:30,375 --> 00:22:35,105
لذلك، أينما تم تعيين الخاصية المميزة للمستند إلى true،

300
00:22:35,105 --> 00:22:36,620
استخرج كل تلك.

301
00:22:36,620 --> 00:22:40,545
لذلك، فإن هذا الاستعلام استخراج فقط تلك الوثائق

302
00:22:40,545 --> 00:22:45,250
من مجموعة الأطباق حيث يتم تعيين الميزة إلى true،

303
00:22:45,250 --> 00:22:50,195
ومن ثم إرجاع فقط تلك الوثائق

304
00:22:50,195 --> 00:22:53,770
من تلك المجموعة هنا، ومن هناك أنا ذاهب التغييرات لقطة وهذا

305
00:22:53,770 --> 00:22:59,350
سيعود مجموعة من الوثائق ومن هناك سوف خريطة لهم

306
00:22:59,350 --> 00:23:04,270
في وثائق طبق الفردية وبعد ذلك منذ أن

307
00:23:04,270 --> 00:23:09,700
ضمنت أن واحدة فقط من تلك الوثائق سوف يكون لها ميزة تعيين إلى true.

308
00:23:09,700 --> 00:23:13,030
لذلك، سوف يعود واحد منهم فقط لكنه سيعود كمصفوفة.

309
00:23:13,030 --> 00:23:14,980
لذلك، لهذا السبب أنا بناء هذا

310
00:23:14,980 --> 00:23:20,195
مع قوس مربع صفر العنصر الأول من الصفيف،

311
00:23:20,195 --> 00:23:25,210
وبالفعل سوف تحتوي على عنصر واحد فقط لأن عنصر واحد فقط في مجموعتي

312
00:23:25,210 --> 00:23:30,745
سوف تتطابق مع هذا الاستعلام المحدد الذي قمت بإعداده هنا مع الموجة هنا.

313
00:23:30,745 --> 00:23:36,470
هناك إعدادات استعلام أخرى هنا يمكنك أيضا استخدام شيء يسمى النظام من قبل.

314
00:23:36,470 --> 00:23:41,000
لذلك، يمكنك طلب المجموعة بواسطة خاصية معينة،

315
00:23:41,000 --> 00:23:47,310
ومجموعة أخرى من خيارات الاستعلام المتوفرة.

316
00:23:47,310 --> 00:23:51,480
الآن، يتم دعم هذا من قبل Firebase على سحابة Firestore،

317
00:23:51,480 --> 00:23:56,890
وهذا ما يمكننا الاستفادة منه باستخدام AngularFire2 لتصميم

318
00:23:56,890 --> 00:24:03,850
الشفرة في تطبيق Angular الخاص بك لإجراء الاستعلام من جانب العميل نفسه.

319
00:24:03,850 --> 00:24:09,280
لذلك، وهذا هو الذهاب الى العودة طبق ميزة محددة.

320
00:24:09,360 --> 00:24:15,355
الآن، مرة أخرى getDishid ستكون مشابهة لما قمنا به في وقت سابق.

321
00:24:15,355 --> 00:24:16,890
لذلك، لا تعديل هناك.

322
00:24:16,890 --> 00:24:21,370
الآن، لبوستكوممنت مرة أخرى

323
00:24:21,370 --> 00:24:27,820
لأن فيريباس مع سحابة فيريستور بيتا،

324
00:24:27,820 --> 00:24:31,720
ليس لديها مفهوم السكان،

325
00:24:31,720 --> 00:24:34,015
وهلم جرا التي رأيناها في وقت سابق.

326
00:24:34,015 --> 00:24:39,890
لذا، ما سأقوم به للتعليقات هو أنني سأقوم بنشر هذه التعليقات

327
00:24:39,890 --> 00:24:46,140
كمجموعة يتم وضعها داخل كل طبق نفسه.

328
00:24:46,140 --> 00:24:52,040
لذلك، سيكون لكل طبق مجموعته الخاصة من التعليقات حول هذا الطبق المحدد.

329
00:24:52,040 --> 00:24:54,965
عندما أقوم بنشر التعليق، سأستخدم DisHid،

330
00:24:54,965 --> 00:24:57,905
ثم معلومات التعليق.

331
00:24:57,905 --> 00:25:01,735
لذلك، ما أفعله هنا هو أنني ذاهب لأول مرة

332
00:25:01,735 --> 00:25:07,175
الاستعلام عن الأطباق ومن ثم الحصول على هذا الطبق معين.

333
00:25:07,175 --> 00:25:11,555
لذلك، يمكنك أن ترى أنني أستخدم الطريقة الأخرى للاستعلام عن مستند معين.

334
00:25:11,555 --> 00:25:16,070
لذلك، هنا أنا أقول هذا afs.collection ('أطباق') .doc Dishid.

335
00:25:16,440 --> 00:25:22,660
لذلك، يمكنني استخدام هذه الطريقة للوصول إلى مستند معين إذا أردت ذلك.

336
00:25:22,660 --> 00:25:25,610
الطريقة الأخرى بالطبع كنت قد رأيت بالفعل مع

337
00:25:25,610 --> 00:25:33,375
طريقة getDish حيث أقول أطباق doc شرطة مائلة بالإضافة إلى معرف.

338
00:25:33,375 --> 00:25:38,185
لذلك، طريقتان مختلفتان لمعالجة مستند

339
00:25:38,185 --> 00:25:44,460
معين داخل مجموعة هنا ثم Dished ثم جمع والتعليقات.

340
00:25:44,460 --> 00:25:46,840
لذا، بهذه الطريقة تقول في

341
00:25:46,840 --> 00:25:51,100
هذه المجموعة لهذه الوثيقة المحددة مع ذلك DishID،

342
00:25:51,100 --> 00:25:54,140
هناك مجموعة يتم تضمينها في

343
00:25:54,140 --> 00:25:57,180
هذا المستند وأن المجموعة تحتوي على تعليقات الاسم.

344
00:25:57,180 --> 00:25:59,660
لذلك، هذا هو تعشيش مجموعة

345
00:25:59,660 --> 00:26:03,125
داخل وثيقة التي هي في اتصال مستوى أعلى آخر.

346
00:26:03,125 --> 00:26:07,110
لذا، يسمح بهذا النوع من التعشيش للمجموعات بواسطة

347
00:26:07,110 --> 00:26:13,590
Firebase Cloud Store Beta حتى 100 مستوى عميق إذا كنت ترغب في الاختيار.

348
00:26:13,590 --> 00:26:15,700
لذلك، داخل هذه المجموعة،

349
00:26:15,700 --> 00:26:17,420
وأنا ذاهب لإضافة.

350
00:26:17,420 --> 00:26:20,310
لذا، كيف يمكنك إضافة مستند إلى مجموعة؟

351
00:26:20,310 --> 00:26:22,105
لإضافة مستند إلى مجموعتك،

352
00:26:22,105 --> 00:26:24,755
يمكنك استخدام طريقة الإضافة في مجموعة هنا.

353
00:26:24,755 --> 00:26:27,600
لذلك، يمكنك أن ترى أنه في تعليقات المجموعة،

354
00:26:27,600 --> 00:26:30,380
أقوم بإضافة هنا ثم

355
00:26:30,380 --> 00:26:33,655
هذا هو المستند الفعلي الذي سيتم إضافته هنا.

356
00:26:33,655 --> 00:26:35,280
لذلك، في المستند نفسه،

357
00:26:35,280 --> 00:26:40,645
سترى أن لدي خاصية المؤلف هنا حيث قمت بإعداد المعرف الحالي،

358
00:26:40,645 --> 00:26:44,665
وأيضا أنا إعداد الاسم الأول للمؤلف هنا،

359
00:26:44,665 --> 00:26:50,885
أنا فقط تخدم المرة الأولى هنا حتى هنا أقول هذا اسم عرض المستخدم الحالي.

360
00:26:50,885 --> 00:26:55,625
إذا كان اسم العرض صحيحًا، فسأقوم بتعيينه على اسم عرض المستخدم الحالي.

361
00:26:55,625 --> 00:27:00,960
إذا لم يكن لدى حساب المستخدم اسم عرض كما هو مرتبط به،

362
00:27:00,960 --> 00:27:06,420
فسأستخدم ببساطة بريد المستخدم الحالي هذا كخاصية الاسم الأول هنا.

363
00:27:06,420 --> 00:27:11,035
لذا، فإن هذا المستند الذي يحتوي على التعليق،

364
00:27:11,035 --> 00:27:13,150
يحمل تلقائيًا حقل الاسم الأول هذا

365
00:27:13,150 --> 00:27:16,140
وهذا ما سأستخدمه لتقديم

366
00:27:16,140 --> 00:27:22,495
المعلومات عند تقديم التعليقات في مكون DishDetaille الخاص بي.

367
00:27:22,495 --> 00:27:28,710
لذلك، لاحظ أنني في الواقع تكرار المعلومات هنا في كل من التعليقات.

368
00:27:28,710 --> 00:27:31,865
ولكن لا بأس، نظرًا لأن هذه يتم تخزينها

369
00:27:31,865 --> 00:27:34,160
كمستندات Json على Firebase، فلا بأس

370
00:27:34,160 --> 00:27:36,990
من تكرار بعض المعلومات في التعليقات هنا.

371
00:27:36,990 --> 00:27:40,245
ولكن إذا كنت تريد المزيد من التفاصيل عن المستخدم الحالي،

372
00:27:40,245 --> 00:27:45,280
لديك بالفعل إشارة إلى معرف المستخدم هنا حتى تتمكن من الذهاب فعلا وجلب

373
00:27:45,280 --> 00:27:48,150
المستند لمستخدم معين ومن ثم

374
00:27:48,150 --> 00:27:51,485
الحصول على مزيد من المعلومات للمستخدم إذا اخترت.

375
00:27:51,485 --> 00:27:54,830
الآن، عندما استخدمت Mongo DB بالإضافة إلى Mongo،

376
00:27:54,830 --> 00:27:57,950
رأيت أنني سأستخدم فقط معرف المستخدم الحالي

377
00:27:57,950 --> 00:28:01,650
للمؤلف ثم سأستخدم التعبئة لملء هذه المعلومات.

378
00:28:01,650 --> 00:28:05,150
الآن سحابة فيريستور بيتا في هذه اللحظة ليس لديها

379
00:28:05,150 --> 00:28:10,240
أي مفهوم لهذا ملء بقدر ما أستطيع أن أرى من الوثائق،

380
00:28:10,240 --> 00:28:14,335
وربما نسخة مستقبلية قد تدعم طريقة لسحب

381
00:28:14,335 --> 00:28:16,800
المعلومات من وثيقة أخرى

382
00:28:16,800 --> 00:28:19,270
وتعبئتها تلقائيا في المستند الحالي.

383
00:28:19,270 --> 00:28:24,500
عندما يحدث ذلك، يجب تعديل هذا الرمز للاستفادة من ذلك.

384
00:28:24,500 --> 00:28:26,725
ولكن الآن كما أراها،

385
00:28:26,725 --> 00:28:29,560
لا تملك Firestore beta القدرة على

386
00:28:29,560 --> 00:28:33,000
ملء المعلومات من مستند آخر في المستند الحالي.

387
00:28:33,000 --> 00:28:36,040
لذلك هذا هو السبب في أنني مجرد تكرار فقط تلك

388
00:28:36,040 --> 00:28:39,860
المعلومات التي أنا حقا بحاجة عندما أقدم التعليق في

389
00:28:39,860 --> 00:28:43,660
بلدي عنصر ديشديتيل هنا ثم أسفل

390
00:28:43,660 --> 00:28:47,945
هنا يمكنك أن ترى أن لدي التقييم والتعليق هنا وبعد ذلك أيضا،

391
00:28:47,945 --> 00:28:49,740
لاحظ أن أنا خلق

392
00:28:49,740 --> 00:28:57,370
هذين حقول إضافية في تعليقي هنا تسمى «CreateDat» و «UpdateDat».

393
00:28:57,370 --> 00:29:01,785
لاحظ كيف أضع الطابع الزمني ل «CreateDat».

394
00:29:01,785 --> 00:29:05,785
فيريباس، الآن ما هو هذا فيريباس أنا باستخدام هنا،

395
00:29:05,785 --> 00:29:12,050
هذا فيريباس هو بالضبط ما استوردته هنا من التطبيق فيريباس.

396
00:29:12,050 --> 00:29:15,850
لذلك يوفر لي كما ترون هنا أسفل هنا،

397
00:29:15,850 --> 00:29:20,395
أن يوفر لي نفس قيمة حقل فيريستور.

398
00:29:20,395 --> 00:29:25,260
لذا فإن هذه المكالمة إلى الطابع الزمني لخادم قيم firestorm،

399
00:29:25,260 --> 00:29:28,390
ستعيد الطابع الزمني الحالي بالنسبة

400
00:29:28,390 --> 00:29:32,605
لي وهذه هي المعلومات التي سأقوم بتخزينها في «CreateDat».

401
00:29:32,605 --> 00:29:35,255
الآن، عندما أدرجت جميع المستندات هنا،

402
00:29:35,255 --> 00:29:40,435
رأيت أنني قمت بإنشاء حقل «CreateDat» هذا يدويًا لكل مستند من المستندات.

403
00:29:40,435 --> 00:29:44,110
الآن هذه طريقة للقيام بنفس الشيء من داخل

404
00:29:44,110 --> 00:29:47,895
الكود الزاوي الخاص

405
00:29:47,895 --> 00:29:53,040
بنا في جانب العميل ونفس الشيء لحقل «UpdateDat» الذي ستراه هنا.

406
00:29:53,040 --> 00:29:55,270
لذلك، عندما تقوم بنشر تعليق جديد،

407
00:29:55,270 --> 00:30:00,330
ترى أن هذه هي الطريقة التي ستضيف بها تعليقًا جديدًا إلى ذلك الخادم.

408
00:30:00,330 --> 00:30:03,630
الآن، هذا يعود وعدا وهكذا هذه هي المعلومات

409
00:30:03,630 --> 00:30:07,410
التي أستخدمها هنا لبناء هذا الوعد هنا.

410
00:30:07,410 --> 00:30:10,930
ثم هذه الطريقة الأخرى هنا قائلا «getComments»،

411
00:30:10,930 --> 00:30:16,930
هذا «getComments كما ترون هو الوصول إلى أطباق جمع AFS،

412
00:30:16,930 --> 00:30:22,420
doc Dished ثم جمع التعليقات والإشعار أنه هنا،

413
00:30:22,420 --> 00:30:26,580
لن أطلب كل معرف التعليقات

414
00:30:26,580 --> 00:30:31,220
نفسه الذي لن أستخدمه في بلدي Angular عريضة على أي حال،

415
00:30:31,220 --> 00:30:33,230
لذلك بدلاً من استخدام تغييرات اللقطة،

416
00:30:33,230 --> 00:30:36,285
أستخدم فقط تغييرات القيمة وهذا سيعيد

417
00:30:36,285 --> 00:30:42,170
جميع المستندات الموجودة في مجموعة التعليقات هذه لهذه الوثيقة الخاصة بـ

418
00:30:42,170 --> 00:30:47,455
Dished من مجموعة الأطباق هنا والتي سيتم إرجاعها

419
00:30:47,455 --> 00:30:53,320
وهذه التعليقات التي سأقدم في مكون ديستيل الخاص بي.

420
00:30:53,320 --> 00:30:58,210
الآن، في Mongos، رأيت أن حقيقة أنني قمت بتضمين UserID تعني

421
00:30:58,210 --> 00:31:02,920
أنني يمكن أن أقوم بتجميع هذه المعلومات الآن مع Firebase،

422
00:31:02,920 --> 00:31:05,740
لا توجد طريقة لملء المعلومات الشائعة هنا،

423
00:31:05,740 --> 00:31:10,870
لذلك هذا هو السبب في أنني ذاهب بشكل صريح ثم ملء التعليقات في

424
00:31:11,210 --> 00:31:15,250
dishdetaille لجلب جميع التعليقات حول

425
00:31:15,250 --> 00:31:20,000
هذا الطبق معين عندما أقوم بتقديمها في مكون dishdetail.

426
00:31:20,000 --> 00:31:22,830
لذلك ترى، أنه اضطررت إلى ضبط

427
00:31:22,830 --> 00:31:26,480
رمز Angular قليلاً من أجل التعامل مع حقيقة أن

428
00:31:26,480 --> 00:31:29,765
Firebase لا يدعم بعض الأشياء التي يدعمها mongos

429
00:31:29,765 --> 00:31:33,605
على الأقل في اللحظة التي لا تدعم فيها Cloud Firestore beta هذه الأشياء،

430
00:31:33,605 --> 00:31:38,420
لذا اضطررت إلى العمل للتعامل مع ما Firebase يسمح لي

431
00:31:38,420 --> 00:31:45,365
بتخزين واسترداد من موقع خادم Firebase.

432
00:31:45,365 --> 00:31:51,640
الآن، من المثير للاهتمام بالنسبة لنا أن نقوم بزيارة سريعة لخدمة المصادقة هنا.

433
00:31:51,640 --> 00:31:54,060
خدمة المصادقة هنا مرة أخرى،

434
00:31:54,060 --> 00:31:59,875
لاحظ أنه في خدمة المصادقة هنا أنا استيراد هذا AngularFireAuth من

435
00:31:59,875 --> 00:32:06,435
AngularFire إلى npm submodule هنا.

436
00:32:06,435 --> 00:32:11,005
لذلك، هنا يمكنك أن ترى أنني استيراد AngularFireAuth وهذا

437
00:32:11,005 --> 00:32:15,970
يعطيني الوصول إلى جانب المصادقة من Firebase.

438
00:32:15,970 --> 00:32:21,690
الآن، دعونا نرى كيف تعمل مصادقة Firebase بالفعل من تطبيق Angular الخاص بنا.

439
00:32:21,690 --> 00:32:26,300
الآن سنبدأ ذلك من خلال النظر في كيفية تنفيذ تسجيل الدخول.

440
00:32:26,300 --> 00:32:28,775
لذلك، هذا هو المكان الذي أقوم بتنفيذ تسجيل الدخول،

441
00:32:28,775 --> 00:32:31,420
حيث أستخدم البريد الإلكتروني وكلمة المرور.

442
00:32:31,420 --> 00:32:38,090
لذلك، هذا الجزء عندما أقوم باستيراد AngularFireAuth هنا،

443
00:32:38,090 --> 00:32:44,910
لاحظ أن المنشئ أقوم بحقن AngularFireAuth في مُنشئ بلدي.

444
00:32:44,910 --> 00:32:47,260
لذلك هذا سوف

445
00:32:47,260 --> 00:32:50,240
حقن خدمة AngularFireAuth في المنشئ الخاص بي وهذا يعطيني الوصول إلى

446
00:32:50,240 --> 00:32:55,975
مصادقة Firebase على موقع الخادم حتى أتمكن من مصادقة المستخدمين.

447
00:32:55,975 --> 00:33:01,555
لذا، إذا كنت أرغب في مصادقة مستخدم يقوم بتسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور.

448
00:33:01,555 --> 00:33:04,490
وظيفة تسجيل الدخول هذه هي التي سيتم استدعاؤها

449
00:33:04,490 --> 00:33:07,300
عند كتابة البريد الإلكتروني وكلمة المرور الخاصة بي في

450
00:33:07,300 --> 00:33:10,110
مربع حوار تسجيل الدخول الذي أطفو

451
00:33:10,110 --> 00:33:13,735
على السطح ثم انقر على زر الإرسال أو زر

452
00:33:13,735 --> 00:33:16,120
تسجيل الدخول هنا، سيتم استدعاء وظيفة تسجيل الدخول هذه

453
00:33:16,120 --> 00:33:20,845
ومعلومات المستخدم ولكن استردادها من يتم تمرير مكون تسجيل الدخول هنا.

454
00:33:20,845 --> 00:33:22,985
لذلك عندما يتعلق الأمر هنا،

455
00:33:22,985 --> 00:33:29,410
سأستخدم هذا AFauth كما ترون أنا فقط حقنه في المُنشئ،

456
00:33:29,410 --> 00:33:33,995
وهذا يوفر كائن Auth هذا هنا،

457
00:33:33,995 --> 00:33:38,715
والذي يوفر هذه الطريقة المسماة «تسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور».

458
00:33:38,715 --> 00:33:43,530
لذا فإن تسجيل الدخول هذا باستخدام البريد الإلكتروني وكلمة المرور يأخذ معلمتين هنا حيث

459
00:33:43,530 --> 00:33:49,495
تتوقع اسم مستخدم المستخدم أو البريد الإلكتروني وكلمة المرور هنا.

460
00:33:49,495 --> 00:33:53,310
حتى هذه المعلومات اثنين من المعلومات أنا توريد

461
00:33:53,310 --> 00:33:57,290
ذلك كمعلمتين لهذا تسجيل الدخول مع البريد الإلكتروني وكلمة المرور.

462
00:33:57,290 --> 00:33:59,965
لذلك، عند النقر على ذلك سترى أنه

463
00:33:59,965 --> 00:34:03,790
يقول أن أول واحد يجب أن يكون البريد الإلكتروني والثاني يجب أن يكون كلمة المرور.

464
00:34:03,790 --> 00:34:05,455
الآن الطريقة التي قمت بإعدادها،

465
00:34:05,455 --> 00:34:09,590
يحتوي كائن المستخدم هذا الذي يأتي على البريد الإلكتروني في

466
00:34:09,590 --> 00:34:16,735
user.username هنا وكلمة المرور في خاصية كلمة المرور لكائن المستخدم.

467
00:34:16,735 --> 00:34:18,925
لذلك، عندما يتم الحصول على

468
00:34:18,925 --> 00:34:24,670
ذلك، ثم سأقوم بنشر هذه المعلومات وبعد ذلك عندما يتم الانتهاء من ذلك بنجاح،

469
00:34:24,670 --> 00:34:27,430
وهذا يعني أن المستخدم يتم تسجيل الدخول بشكل صحيح،

470
00:34:27,430 --> 00:34:29,075
إذا كان هناك خطأ،

471
00:34:29,075 --> 00:34:31,510
ثم يمكنك التقاط الخطأ هنا الآن أنا

472
00:34:31,510 --> 00:34:33,960
لا أفعل أي شيء على وجه التحديد مع الخطأ قد

473
00:34:33,960 --> 00:34:38,820
طباعة رسالة الخطأ هذه للإشارة إلى أن المستخدم لا يمكن تسجيل الدخول وهكذا.

474
00:34:38,820 --> 00:34:42,070
لذلك، لم أقم بتنفيذ هذا الجزء من الصفقة هنا،

475
00:34:42,070 --> 00:34:45,390
فأنا أتركه هناك فقط إذا كنت ترغب في وحدة التحكم في تسجيل

476
00:34:45,390 --> 00:34:48,740
هذه المعلومات يمكنك القيام بذلك عند حدوث أخطاء.

477
00:34:48,740 --> 00:34:51,495
الآن لتسجيل الخروج، في فيريباس.

478
00:34:51,495 --> 00:34:56,610
مرة أخرى نأخذ مساعدة من AFAuth التي قمنا بحقنها و Auth على ذلك،

479
00:34:56,610 --> 00:34:58,975
وهذا يوفر هذه الطريقة تسمى «تسجيل الخروج»،

480
00:34:58,975 --> 00:35:01,815
والتي عند استدعاؤها سيتم تسجيل الخروج من

481
00:35:01,815 --> 00:35:05,610
المستخدم الذي تم تسجيل دخوله حاليًا وهكذا تكون إحدى الطرق للتعامل مع هذا.

482
00:35:05,610 --> 00:35:09,795
الآن، يجب أن تتساءل كيف أتعامل مع جزء تسجيل الدخول إلى Google.

483
00:35:09,795 --> 00:35:17,980
الآن يتم التعامل مع هذا أيضا مع AFauth حتى وحدة AngularFire2 التي أستخدمها،

484
00:35:17,980 --> 00:35:22,780
تزود هذه المعلومات لهذه الأساليب بالنسبة لنا من خلال

485
00:35:22,780 --> 00:35:28,880
وحدة Firebase التي تستخدم أيضا في AngularFire2،

486
00:35:28,880 --> 00:35:33,105
وبالتالي فإن هذا يوفر هذه الطريقة تسمى تسجيل الدخول مع البوب وعندما

487
00:35:33,105 --> 00:35:37,280
نقوم بتسجيل الدخول مع pop- هنا لاحظ ما أقوم بتحديده هنا.

488
00:35:37,280 --> 00:35:42,650
لذلك، أنا أقول «جديد فيريباس.auth.googleAuthProvider».

489
00:35:42,650 --> 00:35:48,200
الآن، يمكنك أيضا القيام FireBase.Auth.FacebookAuthProvider وغيرها.

490
00:35:48,200 --> 00:35:52,170
لذلك، كما رأيت من التمرين السابق،

491
00:35:52,170 --> 00:35:58,835
يسمح لك Firebase بإجراء تسجيل دخول من طرف ثالث باستخدام إما Google و

492
00:35:58,835 --> 00:36:01,520
Facebook و GitHub و Twitter.

493
00:36:01,520 --> 00:36:04,440
حتى تتمكن من تكوين هذه بشكل مناسب،

494
00:36:04,440 --> 00:36:07,260
حيث قمت بتشغيل إذن Google فقط.

495
00:36:07,260 --> 00:36:10,470
إذن هذه هي الطريقة التي سأقوم بإعدادها لاستخدام

496
00:36:10,470 --> 00:36:16,160
إذن Google الخاص بي هنا وهذا السطر المفرد من الشفرة الذي أربطته هنا،

497
00:36:16,160 --> 00:36:23,650
هو السطر الذي يسبب المنبثقة للمتصفح الذي يقترح لي تفويض

498
00:36:23,650 --> 00:36:31,580
Firebase باستخدام تفويض Google باستخدام حساب Google الخاص بي هنا.

499
00:36:31,580 --> 00:36:34,210
لذلك هذا هو الجزء الثاني الذي قمت بإعداده هنا.

500
00:36:34,210 --> 00:36:38,929
لذلك لاحظ أن خدمة المصادقة قد

501
00:36:38,929 --> 00:36:44,170
تبسطت بشكل كبير مقارنة بما فعلناه مع الإصدار السابق من هذا التطبيق.

502
00:36:44,170 --> 00:36:49,755
حتى تتمكن من مقارنة الإصدارين لمعرفة كيف يختلف هذا عن الآخر.

503
00:36:49,755 --> 00:36:54,410
الآن، ليس فقط أن هذا AFauth الذي قمنا بحقنه هنا،

504
00:36:54,410 --> 00:36:57,365
جزء AngularFireAuth الذي قمنا بحقنه هنا،

505
00:36:57,365 --> 00:37:01,800
يوفر أيضًا هذا يمكن ملاحظته باسم «AuthState».

506
00:37:01,800 --> 00:37:08,045
هذا AuthState يمكن ملاحظتها، ويمكن الاشتراك في هذا «AuthState» يمكن ملاحظته،

507
00:37:08,045 --> 00:37:10,130
كما ترون هنا،

508
00:37:10,130 --> 00:37:15,880
والتي أعلنت هنا على أنها FireBase.User يمكن ملاحظتها.

509
00:37:15,880 --> 00:37:21,400
لذلك هذه هي المعلومات التي يتم تطبيقها هنا وأيضا يمكننا إعداد

510
00:37:21,400 --> 00:37:27,465
متغير آخر هنا يسمى المستخدم الحالي الذي هو من نوع مستخدم فيريباس هنا.

511
00:37:27,465 --> 00:37:31,610
لذا، فإن هذا AfAuthState هو أمر

512
00:37:31,610 --> 00:37:35,570
يمكن ملاحظته يمكنني الاشتراك فيه وكلما تغير هذا

513
00:37:35,570 --> 00:37:38,935
AuthState، يقوم AuthState بتتبع حالة المصادقة

514
00:37:38,935 --> 00:37:42,780
للمستخدم ما إذا كان المستخدم قد قام بتسجيل الدخول أو تسجيل الخروج وإذا قام المستخدم بتسجيل الدخول،

515
00:37:42,780 --> 00:37:47,930
فإن هذا سيعود لي معلومات المستخدم ومن

516
00:37:47,930 --> 00:37:53,475
معلومات المستخدم يمكننا استرداد الكثير من المعلومات بما في ذلك اسم العرض والبريد

517
00:37:53,475 --> 00:37:58,475
الإلكتروني ومعرف الملف الشخصي ثم

518
00:37:58,475 --> 00:38:04,535
الصورة الرمزية للمستخدم إذا تم إعداده لحسابات معينة.

519
00:38:04,535 --> 00:38:07,555
كل هذه سيتم توفيرها لنا تلقائيا من قبل المستخدم.

520
00:38:07,555 --> 00:38:10,660
لذلك، عند النقر على «المستخدم» ثم نقطة،

521
00:38:10,660 --> 00:38:14,445
سترى أنه يوفر كل هذه المعلومات بالنسبة لنا.

522
00:38:14,445 --> 00:38:16,870
لذلك هو اسم العرض البريد الإلكتروني،

523
00:38:16,870 --> 00:38:19,835
سواء تم التحقق من البريد الإلكتروني أم لا وهلم جرا.

524
00:38:19,835 --> 00:38:22,855
لذا بعض الأشياء التي تهمنا بشكل خاص.

525
00:38:22,855 --> 00:38:29,325
عنوان URL للصور الذي يمكن استخدامه لاسترداد المعلومات الرمزية للمستخدم،

526
00:38:29,325 --> 00:38:32,430
معرف الموفر الذي يحدد من

527
00:38:32,430 --> 00:38:35,755
يقدم هذه المعلومات لك هذا سيكون إما معرف Facebook،

528
00:38:35,755 --> 00:38:43,415
معرف Google و GitHub ID وهلم جرا ومعلومات إضافية حتى رمز التحديث.

529
00:38:43,415 --> 00:38:46,390
لذلك ترى مجموعة من المعلومات

530
00:38:46,390 --> 00:38:49,840
التي يتم توفيرها لك من خلال كائن المستخدم الذي يتم

531
00:38:49,840 --> 00:38:53,285
إرجاعه من قبل هذا Authstate عند الاشتراك فيه،

532
00:38:53,285 --> 00:38:57,400
وأيضا اسمحوا لي أن ألفت انتباهك إلى معرف المستخدم،

533
00:38:57,400 --> 00:39:01,830
وهذا هو ما يمكن استخدامه لفهرسة المستخدم في تطبيقنا.

534
00:39:01,830 --> 00:39:05,950
لذلك هذه هي خدمة المصادقة بالطريقة التي قمت

535
00:39:05,950 --> 00:39:10,325
بإعدادها لاستخدام مصادقة Firebase في هذا التطبيق.

536
00:39:10,325 --> 00:39:14,730
لذا، تغييرين قد انعكست لك لإظهار

537
00:39:14,730 --> 00:39:19,180
كيفية تعديل خدماتي لاستخدام Firebase.

538
00:39:19,180 --> 00:39:23,605
الكثير من التحديثات التي قمت بها لتطبيق Angular الخاص بي كلها

539
00:39:23,605 --> 00:39:28,115
في الخدمات من أجل الاستفادة من Firebase المثبتة.

540
00:39:28,115 --> 00:39:31,900
لذلك، بسبب الطفل منظم من تطبيق Angular،

541
00:39:31,900 --> 00:39:34,390
كانت المكونات ببساطة تعتمد

542
00:39:34,390 --> 00:39:37,330
على الخدمات والخدمات كانت تلك التي نتحدث إليها في النهاية الخلفية.

543
00:39:37,330 --> 00:39:39,660
لذا، فإن الكثير من التحديثات التي قمت بها

544
00:39:39,660 --> 00:39:43,040
لتطبيق Angular الخاص بي تتضمن فقط تحديث هذه الخدمات

545
00:39:43,040 --> 00:39:50,660
لاستخدام واجهة Firebase الخلفية من Google كخدمة مع وحدتي npm،

546
00:39:50,660 --> 00:39:53,815
Firebase و AngularFireAuth هنا.

547
00:39:53,815 --> 00:39:58,690
لذلك، سترى أن الكثير من التحديثات يقتصر على

548
00:39:58,690 --> 00:40:04,285
جميع هذه الخدمات التي لدي في مجلد الخدمات من تطبيق Angular الخاص بي.

549
00:40:04,285 --> 00:40:06,710
بالطبع، كنت بحاجة إلى إجراء القليل من

550
00:40:06,710 --> 00:40:09,615
التعديلات الدنيا في مكون dishdetaille

551
00:40:09,615 --> 00:40:15,430
ومكون الرأس من أجل جعلها تعمل مع Firebase.

552
00:40:15,430 --> 00:40:19,485
يمكنك القيام بزيارة سريعة إلى headercomponent.ts،

553
00:40:19,485 --> 00:40:25,760
و headercomponent.html و disdetailcomponent.tsfile لمعرفة كيف

554
00:40:25,760 --> 00:40:29,210
تغيرت الشفرة بين الإصدار السابق

555
00:40:29,210 --> 00:40:32,070
والإصدار الحالي من تطبيق Angular،

556
00:40:32,070 --> 00:40:36,360
الإصدار السابق، أعني الإصدار الذي استخدمناه ل

557
00:40:36,360 --> 00:40:39,490
التواصل مع

558
00:40:39,490 --> 00:40:43,230
خادم X plus Plus Mongo DB الذي استخدمناه في التمرين السابق.

559
00:40:43,230 --> 00:40:48,265
الآن، مكان آخر حيث تريني إجراء تعديلات،

560
00:40:48,265 --> 00:40:51,640
ومن المثير للاهتمام، هو في الخدمة المفضلة.

561
00:40:51,640 --> 00:40:52,930
في الخدمة المفضلة،

562
00:40:52,930 --> 00:40:55,280
الطريقة التي قمت بتخزين المفضلة للمستخدم،

563
00:40:55,280 --> 00:40:58,410
هي أن المفضلة هي مجموعة على

564
00:40:58,410 --> 00:41:02,015
موقع الخادم الخاص بي والمفضلة نفسها تحتوي على وثائق.

565
00:41:02,015 --> 00:41:06,550
يحتوي كل مستند على معرف المستخدم ومعرف الطبق.

566
00:41:06,550 --> 00:41:09,210
لذلك، يمكن أن يكون لمستخدم معين

567
00:41:09,210 --> 00:41:13,335
مستندات متعددة كل منها يخزن معرف المستخدم ومعرف الطبق.

568
00:41:13,335 --> 00:41:20,035
لذلك، مجموعة منهم معا سوف تحدد جميع المفضلة لمستخدم معين.

569
00:41:20,035 --> 00:41:25,865
لقد وجدت أن هذه طريقة أفضل لتنظيم هذه البيانات في Firebase.

570
00:41:25,865 --> 00:41:29,195
في MongoDB بالإضافة إلى mongos،

571
00:41:29,195 --> 00:41:34,230
رأيت أنني قد أدرجت في مجموعة من معرفات الأطباق في

572
00:41:34,230 --> 00:41:40,575
وثيقة المفضلة ثم حدد المخطط المفضل بهذه الطريقة.

573
00:41:40,575 --> 00:41:43,010
هنا، أستخدم

574
00:41:43,010 --> 00:41:47,395
مستند منفصل واحد لتتبع كل من المفضلة لكل من المستخدمين.

575
00:41:47,395 --> 00:41:50,295
الآن، لأن Firebase يدعم الاستعلام، لذلك،

576
00:41:50,295 --> 00:41:55,545
يمكنني الاستعلام عن Firebase واستخراج جميع المستندات التي تحتوي على نفس معرفات

577
00:41:55,545 --> 00:41:58,585
المستخدم، والتي تتطابق مع المستخدم الذي قام بتسجيل الدخول حاليًا ثم

578
00:41:58,585 --> 00:42:02,405
استخراج معرفات الطبق المقابلة من المفضلة.

579
00:42:02,405 --> 00:42:05,250
ثم سأذهب ثم استعلام الخادم الخاص بي

580
00:42:05,250 --> 00:42:08,475
والحصول على معلومات الطبق لكل من تلك الأطباق.

581
00:42:08,475 --> 00:42:13,325
لذلك، فإنه ينطوي على رحلات متعددة إلى الخادم من أجل الحصول على

582
00:42:13,325 --> 00:42:18,680
كل ما عندي من المعلومات الأطباق المفضلة قبل أن أتمكن من تقديم قائمتي المفضلة.

583
00:42:18,680 --> 00:42:24,180
ولكن، هذه هي أفضل طريقة يمكنني الحصول على Firebase للعمل مع تطبيق Angular الخاص بي.

584
00:42:24,180 --> 00:42:26,945
ربما، في تاريخ مستقبلي،

585
00:42:26,945 --> 00:42:30,740
قد يمتد Firebase Cloud Firestone

586
00:42:30,740 --> 00:42:34,475
للسماح بشيء مثل ملء ما قمنا به باستخدام mongo.

587
00:42:34,475 --> 00:42:38,570
في هذه الحالة، سأقوم بتحديث الشفرة لاستخدام هذه الطريقة

588
00:42:38,570 --> 00:42:42,705
للحصول على جميع معلومات الطبق تلقائيًا.

589
00:42:42,705 --> 00:42:48,420
لذلك، سيتم نقل عبء بناء هذا المستند المركب إلى موقع الخادم.

590
00:42:48,420 --> 00:42:51,740
الآن، موكلي يقوم بالكثير من العمل هنا.

591
00:42:51,740 --> 00:42:53,795
الآن، عندما تذهب هنا،

592
00:42:53,795 --> 00:42:56,400
سترى أنه في طريقة GetFavorites،

593
00:42:56,400 --> 00:42:59,495
سترى كيف يمكنني الوصول إلى المفضلة هنا.

594
00:42:59,495 --> 00:43:02,835
لذلك، عندما أفعل «Getfavorites» أنا الاستعلام عن

595
00:43:02,835 --> 00:43:06,220
هذه المجموعة من المفضلة ولكن لاحظ أن هنا،

596
00:43:06,220 --> 00:43:12,545
أقول «المرجع أين هو معرف المستخدم هذا».

597
00:43:12,545 --> 00:43:15,335
معرف المستخدم هذا أحصل هنا.

598
00:43:15,335 --> 00:43:18,320
لذا، في منشئ الخادم المفضل

599
00:43:18,320 --> 00:43:22,855
لدي، أشترك في خدمة Auth هذه في حالة Get Auth في خدمة Auth.

600
00:43:22,855 --> 00:43:25,075
لذلك، في خدمة المصادقة إذا ذهبت،

601
00:43:25,075 --> 00:43:28,615
سترى هذه الطريقة تسمى Get Auth الدولة هنا.

602
00:43:28,615 --> 00:43:33,175
ترجع حالة Get Auth this.AuthState،

603
00:43:33,175 --> 00:43:35,575
والتي قمت بتعريفها هناك.

604
00:43:35,575 --> 00:43:39,760
لذلك، سيكون هذا ملحوظا كما ترون لي أعلن هنا.

605
00:43:39,760 --> 00:43:41,800
لذلك، هذا يمكن ملاحظته هو الذي

606
00:43:41,800 --> 00:43:46,755
سأستخدمه داخل خدمتي المفضلة ثم اشترك في ذلك.

607
00:43:46,755 --> 00:43:53,720
لذلك، في أي وقت تتغير معلومات المستخدم هذا سوف ينعكس تلقائيا في هنا.

608
00:43:53,720 --> 00:43:59,180
لذلك، رأيت أنه حتى في التطبيق السابق كنت قد استخدمت ملاحظتها،

609
00:43:59,180 --> 00:44:04,525
من أجل عكس معلومات المستخدم في مكون الرأس الخاص بي.

610
00:44:04,525 --> 00:44:06,030
نوع مماثل من النهج،

611
00:44:06,030 --> 00:44:08,600
الذي أستخدمه في مكون المفضلة هنا،

612
00:44:08,600 --> 00:44:13,055
للحصول على معرف المستخدم للمستخدم الذي قام بتسجيل الدخول حاليًا.

613
00:44:13,055 --> 00:44:16,385
لذلك، عند الاستعلام عن مجموعة المفضلة،

614
00:44:16,385 --> 00:44:22,825
وسوف الاستعلام واستخراج فقط تلك الوثائق حيث يطابق المستخدم هذا.

615
00:44:22,825 --> 00:44:26,220
ثم أنا فقط باستخدام التغييرات القيمة هنا.

616
00:44:26,220 --> 00:44:29,210
لذلك، أنا فقط استخراج جميع الوثائق،

617
00:44:29,210 --> 00:44:34,650
أنني لا يهمني معرف وثيقة المفضلة نفسها في هذه اللحظة.

618
00:44:34,650 --> 00:44:37,970
لذلك، أنا فقط استخراج كل منهم واستخدامها.

619
00:44:37,970 --> 00:44:40,690
إذا لم يتم تسجيل دخول المستخدم وكما ترون

620
00:44:40,690 --> 00:44:43,620
أنا رمي خطأ هنا مع القول يمكن ملاحظته،

621
00:44:43,620 --> 00:44:50,735
«لا يوجد مستخدم تسجيل الدخول» وهذا هو ما يتم عرضه في خطابي المفضل هناك.

622
00:44:50,735 --> 00:44:53,960
الآن، يتم تحديث إيسفافوريتس أيضا هنا

623
00:44:53,960 --> 00:44:57,685
ولكن في إيسفافوريتس ما أفعله هو أنا ذاهب إلى دب.

624
00:44:57,685 --> 00:45:02,795
الآن هنا، وسوف الوصول إلى قاعدة البيانات بالقول،

625
00:45:02,795 --> 00:45:06,135
«دب يساوي firebase.firestore».

626
00:45:06,135 --> 00:45:09,610
أذكر أنني استيراد فيريباس هنا،

627
00:45:09,610 --> 00:45:12,270
استيراد نجمة كما فيريباس هنا.

628
00:45:12,270 --> 00:45:17,970
لا يوفر لي Angular Firestore نفسه طريقة

629
00:45:17,970 --> 00:45:23,970
للقيام باستعلامات مركبة متعددة هنا.

630
00:45:23,970 --> 00:45:29,495
لا توفر لي فايرستور الزاوي أو النار الزاوي القيام بذلك.

631
00:45:29,495 --> 00:45:33,390
لذلك، لهذا السبب لا بد لي من اللجوء إلى استخدام فيريباس فيريستور.

632
00:45:33,390 --> 00:45:35,840
لذلك، عندما أقول فيريباس فيريستور،

633
00:45:35,840 --> 00:45:42,310
وهذا يعطيني إشارة إلى قاعدة بيانات فيريستور ومن ثم يمكنني الذهاب إلى قاعدة البيانات هذه

634
00:45:42,310 --> 00:45:48,780
ومن ثم أقول «مجموعة دب المفضلة» وبعد ذلك يمكنني القيام باستعلامات متعددة هنا.

635
00:45:48,780 --> 00:45:55,470
لذلك، أنا أقول، .where المستخدم هو هذا.wheredish هو معرف الطبق.

636
00:45:55,470 --> 00:45:59,380
لذلك، إذا كنت ترغب في الحصول على المفضلة محددة.

637
00:45:59,380 --> 00:46:03,640
للتحقق مما إذا كان طبق معين هو المفضل للمستخدم، أحصل على

638
00:46:03,640 --> 00:46:08,285
ذلك المستند المحدد حيث يتطابق المستخدم والطبق مع هذين،

639
00:46:08,285 --> 00:46:12,110
إذا لم يتطابقان ثم سيعود مع فارغة.

640
00:46:12,110 --> 00:46:16,610
لذلك، أن أستخرج ثم أعد هذه القيمة هنا.

641
00:46:16,610 --> 00:46:18,900
الآن، ثم أنا نشر المفضلة،

642
00:46:18,900 --> 00:46:25,770
ترى كيف أفعل هذا أنا أقول هذه مجموعة AFS المفضلة وسأقول «إضافة».

643
00:46:25,770 --> 00:46:29,260
انظر إلى المستند الذي أقوم بتخزينه في المفضلة.

644
00:46:29,260 --> 00:46:32,130
يحتوي المستند نفسه على معرف المستخدم ومعرف الطبق.

645
00:46:32,130 --> 00:46:36,030
لذلك، هذه قطعتين من المعلومات المرفقة هنا وإذا

646
00:46:36,030 --> 00:46:41,295
لم يكن ثم أنها سوف ترفض الوعد مع أي مستخدم تسجيل الدخول هنا.

647
00:46:41,295 --> 00:46:44,915
وبالمثل، لحذف المفضلة التي قمت بتنفيذها هنا.

648
00:46:44,915 --> 00:46:48,735
قضاء بعض الوقت مرة أخرى في الذهاب من خلال هذا الرمز لفهم كيف قمت

649
00:46:48,735 --> 00:46:53,375
بالاستفادة من فيريباس و الزاوي النار إلى وحدات نبم

650
00:46:53,375 --> 00:47:02,170
من أجل التواصل مع خادم فيريباس الخاص بي الذي قمت بإعداده في التمرين السابق.

651
00:47:02,170 --> 00:47:05,880
مع هذا، لقد أعطيتك لمحة سريعة عن

652
00:47:05,880 --> 00:47:10,280
كيفية إعداد تطبيق Angular الخاص بك للتفاعل مع

653
00:47:10,280 --> 00:47:13,980
Firebase الخلفية كخدمة ومن ثم تكون

654
00:47:13,980 --> 00:47:19,970
قادرة على دعم العمليات المختلفة التي لديك داخل تطبيق Angular الخاص بك.

655
00:47:19,970 --> 00:47:21,905
كما أوضحت سابقًا،

656
00:47:21,905 --> 00:47:24,150
يبدو هذا التطبيق Angular تمامًا مثل

657
00:47:24,150 --> 00:47:26,690
الإصدار السابق من تطبيق Angular حيث كنا

658
00:47:26,690 --> 00:47:31,915
نستخدم إصدارنا الخاص من خادم Express MongoDB.

659
00:47:31,915 --> 00:47:38,510
الآن، مع هذا أكمل هذا التمرين الخاص حيث أوضحت في

660
00:47:38,510 --> 00:47:42,020
هذا الدرس حول النهاية الخلفية كخدمة وأظهرت أيضًا

661
00:47:42,020 --> 00:47:46,630
Firebase كمثال على الواجهة الخلفية كخدمة.