1
00:00:00,000 --> 00:00:04,708
[MUSIC]

2
00:00:04,708 --> 00:00:08,762
في التمرين السابق، قمنا بالفعل بتكوين

3
00:00:08,762 --> 00:00:12,657
Firebase الخلفية كخدمة مع المشروع الجديد.

4
00:00:12,657 --> 00:00:18,637
وقم أيضًا بإعداد الكثير من البيانات في قاعدة البيانات الخاصة بنا، ثم قم بإعداد وحدة التخزين الخاصة بنا

5
00:00:18,637 --> 00:00:25,410
وتكوين خادم Firebase الخاص بنا ليكون بمثابة الواجهة الخلفية لتطبيق React الخاص بنا.

6
00:00:25,410 --> 00:00:30,670
في هذا التمرين، سننظر إلى نسخة معدلة من تطبيق React الخاص بنا،

7
00:00:30,670 --> 00:00:36,080
والذي يستخدم الواجهة الخلفية لـ Firebase كخدمة من أجل

8
00:00:36,080 --> 00:00:42,200
الحصول على البيانات وكذلك تخزين المعلومات للمستخدمين على الخادم.

9
00:00:42,200 --> 00:00:46,430
أيضًا، سنستفيد من دعم المصادقة الذي

10
00:00:46,430 --> 00:00:48,510
يوفره Firebase لمصادقة المستخدمين.

11
00:00:48,510 --> 00:00:55,434
كل من استخدام نهج البريد الإلكتروني وكلمة المرور، وأيضا استخدام حساب غوغل.

12
00:00:57,091 --> 00:01:04,231
للبدء في هذا التمرين، انتقل إلى موقع مناسب على جهاز الكمبيوتر الخاص بك،

13
00:01:04,231 --> 00:01:09,347
ثم استنساخ مستودع Git المعطى، لقد قدمت

14
00:01:09,347 --> 00:01:14,950
لك إصدار Firebase من تطبيق React الخاص بنا.

15
00:01:14,950 --> 00:01:24,300
لذلك اكتب بوابة استنساخ https://github.com/jmuppala/conFusion-Rea -

16
00:01:24,300 --> 00:01:27,470
CT-firebase.Git.

17
00:01:27,470 --> 00:01:30,450
ثم استنساخ مستودع Git.

18
00:01:30,450 --> 00:01:37,610
وبمجرد استنساخ مستودع Git إلى جهاز الكمبيوتر الخاص بك، ثم الانتقال

19
00:01:37,610 --> 00:01:47,340
إلى مجلد Confusion-React-FireBase الذي سيتم إنشاؤه في هذه المرحلة.

20
00:01:47,340 --> 00:01:52,230
وبعد ذلك ستلاحظ أن مجموعة من الملفات مثبتة بالفعل هناك.

21
00:01:52,230 --> 00:01:56,820
دعونا نمضي قدما والقيام بتثبيت الغزل لتثبيت جميع

22
00:01:56,820 --> 00:02:02,130
وحدات العقدة التي يعتمد عليها هذا التطبيق الزاوي.

23
00:02:02,130 --> 00:02:07,140
سيقوم هذا الإصدار أيضًا بتثبيت وحدات عقدة إضافية تسمى Firebase.

24
00:02:07,140 --> 00:02:12,850
وسوف أشرح أكثر قليلا عن هذه الوحدات عقدة في وقت لاحق في هذا التمرين.

25
00:02:12,850 --> 00:02:18,420
بمجرد اكتمال تثبيت المشروع، افتح المشروع في محرر.

26
00:02:18,420 --> 00:02:24,290
ثم في المشروع، انتقل إلى المصدر> مجلد فيريباس

27
00:02:24,290 --> 00:02:26,700
ثم افتح ملف config.js.

28
00:02:26,700 --> 00:02:33,220
وفي ملف config.js، سترى مجموعة من تكوين فيريباس

29
00:02:33,220 --> 00:02:38,950
التي تحتاج إلى إعدادها مع تكوين خادم فيريباس الخاص بك.

30
00:02:38,950 --> 00:02:43,970
كما رأينا في التمرين السابق، يمكننا الحصول على كل هذه المعلومات عند

31
00:02:43,970 --> 00:02:49,940
النقر على هذا الزر هنا يسمى إضافة Firebase إلى تطبيق الويب الخاص بك.

32
00:02:49,940 --> 00:02:53,035
ثم قم بنسخ هذه المعلومات

33
00:02:53,035 --> 00:02:58,162
ثم قم بلصق هذه المعلومات في ملف config.js الخاص بك.

34
00:02:58,162 --> 00:03:03,786
لاستبدالها بتكوين خوادم Firebase المحددة

35
00:03:03,786 --> 00:03:06,280
لكل هذه المعلومات.

36
00:03:06,280 --> 00:03:10,844
وبمجرد الانتهاء من ذلك، يمكنك بدء تشغيل

37
00:03:10,844 --> 00:03:14,609
تطبيق React الخاص بك عن طريق كتابة بداية الغزل في المطالبة.

38
00:03:14,609 --> 00:03:18,331
بمجرد تجميع تطبيق React الخاص بك، وهكذا

39
00:03:18,331 --> 00:03:23,890
هنا سترى الصفحة الرئيسية، الصفحة حول، كما نرى هنا.

40
00:03:23,890 --> 00:03:25,596
والقائمة

41
00:03:27,900 --> 00:03:31,570
وصفحة الاتصال

42
00:03:31,570 --> 00:03:33,360
دعونا تسجيل الدخول أنفسنا،

43
00:03:33,360 --> 00:03:36,865
اسمحوا لي أن أعود إلى الصفحة الرئيسية وبعد ذلك سنقوم بتسجيل الدخول أنفسنا.

44
00:03:36,865 --> 00:03:38,800
لذلك عند النقر على زر تسجيل الدخول،

45
00:03:38,800 --> 00:03:43,430
سترى النموذج النموذجي هنا مع البريد الإلكتروني ومعلومات كلمة المرور.

46
00:03:43,430 --> 00:03:47,010
سترى أيضًا زر أولي هنا يسمى «تسجيل الدخول» باستخدام Google.

47
00:03:47,010 --> 00:03:49,740
لذلك اسمحوا لي بتسجيل الدخول باستخدام حساب غوغل الخاص بي.

48
00:03:49,740 --> 00:03:54,885
لذلك عند النقر على تسجيل الدخول مع غوغل، فإنه سيتم فتح

49
00:03:54,885 --> 00:04:01,095
نافذة متصفح أخرى حيث سيطلب منك الإذن باستخدام حساب غوغل الخاص بك.

50
00:04:01,095 --> 00:04:07,745
ثم سترى، في الزاوية اليمنى، سترى على الفور اسمك

51
00:04:07,745 --> 00:04:13,285
يتم عرضه هنا، ومع زر تسجيل الدخول تحولت الآن إلى زر الخروج.

52
00:04:13,285 --> 00:04:19,340
لذلك، في هذه المرحلة، يجب أن تكون قادرا على رؤية المفضلة لديك.

53
00:04:19,340 --> 00:04:22,240
وفي هذه الحالة، بما أننا لا نملك أي مفضلة،

54
00:04:22,240 --> 00:04:24,110
لذا ستكون فارغة في هذه المرحلة.

55
00:04:24,110 --> 00:04:29,610
اسمحوا لي أن أعود إلى القائمة ومن ثم إضافة اثنين من العناصر إلى المفضلة.

56
00:04:29,610 --> 00:04:35,990
لذلك سأضيف هذا الطبق إلى المفضلة، لذلك عندما أنقر على هذا الطبق،

57
00:04:35,990 --> 00:04:41,350
سترى على الفور رمز تتحول إلى قلب مملوء.

58
00:04:41,350 --> 00:04:47,597
واسمحوا لي أيضا اختيار طبق واحد آخر وإضافته إلى المفضلة.

59
00:04:47,597 --> 00:04:52,526
الإعلان ثم الآن عندما تذهب إلى المفضلة, سترى اثنين

60
00:04:52,526 --> 00:04:57,187
من الأطباق المضافة إلى المفضلة لديك, كما كنت تتوقع.

61
00:04:57,187 --> 00:05:02,893
ومرة أخرى، يمكنك حذف الأطباق عن طريق النقر على

62
00:05:02,893 --> 00:05:09,270
الصليب حذف لإزالة العنصر من قائمة المفضلة لديك، كما هو موضح هنا.

63
00:05:09,270 --> 00:05:14,181
الآن يمكننا أيضا إضافة، كما تعلمون، يمكننا الذهاب إلى أي طبق

64
00:05:14,181 --> 00:05:17,140
ومن ثم إضافة تعليقات حول هذا الطبق.

65
00:05:17,140 --> 00:05:19,317
لذلك اسمحوا لي أن أضيف في تعليق هنا.

66
00:05:25,868 --> 00:05:31,364
وفي اللحظة التي تقدم فيها التعليق، سترى على الفور أن

67
00:05:31,364 --> 00:05:38,562
تعليقك سيتم عرضه هنا مع اسم المؤلف المدرج أيضًا هنا.

68
00:05:38,562 --> 00:05:41,572
ومع ذلك التاريخ كما هو موضح هنا

69
00:05:41,572 --> 00:05:46,592
لذلك، يمكنك أن ترى أن تقديم المستخدم من التعليقات

70
00:05:46,592 --> 00:05:49,592
سيتم دعمه لأي طبق معين.

71
00:05:49,592 --> 00:05:54,294
لذا، هذه هي الطريقة التي يعمل بها تطبيقك مع

72
00:05:54,294 --> 00:05:58,211
Firebase مثل الواجهة الخلفية كخدمة.

73
00:05:58,211 --> 00:06:03,071
الآن، بالطبع، يجب أن تتساءل، كيف يمكننا إعادة تصميم تطبيقنا

74
00:06:03,071 --> 00:06:07,882
للاستفادة من Firebase بدلاً من استخدام

75
00:06:07,882 --> 00:06:12,110
خادم Express MongoDB القياسي الذي قمنا ببنائه في وقت سابق؟

76
00:06:13,220 --> 00:06:18,606
من أجل تكوين التطبيق الخاص بك للاتصال مع خادم فيريباس،

77
00:06:18,606 --> 00:06:21,349
تحتاج إلى تثبيت وحدة فيريباس.

78
00:06:21,349 --> 00:06:25,964
توفر الوحدة النمطية Firebase، كما ترى هنا، الأداة

79
00:06:25,964 --> 00:06:31,772
والبنية التحتية التي تمكنك من الاتصال بخادم Firebase.

80
00:06:31,772 --> 00:06:35,639
ولتثبيت هذا في التطبيق الخاص

81
00:06:35,639 --> 00:06:40,141
بك، تكتب في تثبيت ناقص حفظ فيريباس.

82
00:06:40,141 --> 00:06:41,893
الآن كيفية الاستفادة من هذه؟

83
00:06:41,893 --> 00:06:47,461
وسوف أوضح أنه من خلال تشغيل بسرعة لك من خلال التعليمات البرمجية المعدلة

84
00:06:47,461 --> 00:06:53,492
حيث نستخدم فيريباس لتعديل التطبيق الذي قمنا بتطويره في

85
00:06:53,492 --> 00:06:59,185
وقت سابق للاستفادة من خادم فيريباس كما الخلفية كخدمة.

86
00:06:59,185 --> 00:07:04,065
دعونا نأخذ جولة سريعة من خلال تطبيق React المعدل لدينا لفهم

87
00:07:04,065 --> 00:07:08,825
كيفية إعادة تكوينه للتواصل مع خادم Firebase لدينا.

88
00:07:08,825 --> 00:07:11,933
سنبدأ رحلتنا في ملف package.json.

89
00:07:11,933 --> 00:07:13,455
وفي ملف package.json،

90
00:07:13,455 --> 00:07:18,820
ستلاحظ أنني أضفت في وحدة Firebase npm في هذا.

91
00:07:18,820 --> 00:07:24,020
وهكذا عند استنساخ مستودع Git والقيام بتثبيت الغزل،

92
00:07:24,020 --> 00:07:27,880
يتم تثبيت وحدة Firebase تلقائيًا في التطبيق الخاص بك.

93
00:07:27,880 --> 00:07:31,810
إذا كنت تقوم بتكوين تطبيق React جديد

94
00:07:31,810 --> 00:07:33,160
للتواصل مع الخادم،

95
00:07:33,160 --> 00:07:38,850
فأنت بحاجة إلى تثبيت وحدة Firebase بشكل صريح في التطبيق الخاص بك.

96
00:07:38,850 --> 00:07:44,880
الآن بعد ذلك، ستلاحظ تغييرات في مجلد Firebase.

97
00:07:44,880 --> 00:07:47,396
هنا رأينا بالفعل ملف التكوين.

98
00:07:47,396 --> 00:07:51,410
الملف الآخر الذي ستلاحظه هنا يسمى firebase.js.

99
00:07:51,410 --> 00:07:55,227
الآن هذا هو المكان الذي نقوم بتكوين تطبيقنا للتواصل مع

100
00:07:55,227 --> 00:07:56,530
خادم Firebase.

101
00:07:56,530 --> 00:07:58,744
لذلك نحن استيراد التكوين هنا.

102
00:07:58,744 --> 00:08:01,786
ثم استيراد فيريباس من فيريباس.

103
00:08:01,786 --> 00:08:06,624
ثم تقوم بتوليد التطبيق هنا عن طريق توفير التهيئة إلى firebase،

104
00:08:06,624 --> 00:08:10,838
لذلك هذا هو المكان الذي تقوم فيه بتوفير جميع معلومات التكوين

105
00:08:10,838 --> 00:08:14,835
بحيث يمكن للعميل التواصل مع خادم Firebase.

106
00:08:14,835 --> 00:08:19,738
بالإضافة إلى ذلك، أقوم بتصدير عدد قليل من هذه الصادرات من

107
00:08:19,738 --> 00:08:23,280
هنا تسمى المصادقة، fireauth وهلم جرا.

108
00:08:23,280 --> 00:08:27,915
هذه سوف أستخدم في منشئي العمل من

109
00:08:27,915 --> 00:08:31,524
أجل التواصل مع خادم Firebase الخاص بي.

110
00:08:33,371 --> 00:08:40,580
الآن بعد ذلك، ستكون التعديلات الرئيسية في ملف ActionCreators.

111
00:08:40,580 --> 00:08:46,222
الآن لم أضف في أي إجراءات جديدة، ولكن بدلاً من ذلك

112
00:08:46,222 --> 00:08:51,866
يتم تعديل جميع الاتصالات مع الخادم الآن للتواصل مع خادم Firebase الخاص بنا.

113
00:08:51,866 --> 00:08:55,478
لذلك بدلا من استخدام الجلب، كما فعلنا في وقت سابق،

114
00:08:55,478 --> 00:08:57,979
ونحن الآن في طريقنا لاستخدام فايرستور.

115
00:08:57,979 --> 00:09:02,466
كما ترون، لقد استوردت المصادقة، فايرستور،

116
00:09:02,466 --> 00:09:07,237
فيريوث، و فيريباستور من وحدة فيريباس التي

117
00:09:07,237 --> 00:09:11,260
قمت بإعدادها في وقت سابق في مجلد فيريباس.

118
00:09:11,260 --> 00:09:16,170
ثم كل هذه ستمكنني من التواصل مع خادم Firebase الخاص بي. من

119
00:09:16,170 --> 00:09:20,320
أجل جلب مجموعة من Firebase الخاص بي،

120
00:09:20,320 --> 00:09:25,050
نقول ببساطة firestore.collection، ومن ثم توفير اسم المجموعة.

121
00:09:25,050 --> 00:09:29,250
ثم يمكنك إضافة إلى المجموعة بالقول، إضافة، كما ترون هنا،

122
00:09:29,250 --> 00:09:37,570
والذي يأخذ العنصر المحدد الذي تضيفه إلى مجموعتك هناك.

123
00:09:37,570 --> 00:09:40,110
إذن هذه هي الوثيقة التي نضيفها إلى مجموعتنا.

124
00:09:40,110 --> 00:09:43,500
لذلك هذا هو للتعليق آخر، كما ترون هنا.

125
00:09:43,500 --> 00:09:48,270
وعندما تقوم بنشر ذلك، ستقوم بتزويدك مرة أخرى بـ DoCref،

126
00:09:48,270 --> 00:09:51,260
وهو المرجع إلى المستند،

127
00:09:51,260 --> 00:09:56,570
والذي يمكنك استخدامه بعد ذلك للذهاب وجلب المستند من الخادم الخاص بك.

128
00:09:56,570 --> 00:10:00,180
الآن الطريقة التي يعمل بها Firebase هي أنه

129
00:10:00,180 --> 00:10:04,700
سيوفر المعرف بشكل منفصل عن المحتويات الفعلية للمستندات.

130
00:10:04,700 --> 00:10:10,550
لذلك يحتفظ Firebase بالمعرف وبيانات المستند نفسها بشكل منفصل.

131
00:10:10,550 --> 00:10:15,450
لذلك هنا لا بد لي من الجمع بين الاثنين معا في

132
00:10:15,450 --> 00:10:18,260
كائن جافا سكريبت هنا، ودعا التعليق هنا.

133
00:10:18,260 --> 00:10:23,450
لذلك كما ترى من المستند، لذلك لاحظت أنه عندما أقوم

134
00:10:23,450 --> 00:10:29,710
بإدراج عنصر في مجموعة، فإنه يقوم بإرجاع DoCref هنا.

135
00:10:29,710 --> 00:10:34,180
ومن DoCref، يمكنني الحصول على هوية المستند.

136
00:10:34,180 --> 00:10:36,610
وهكذا ما أفعله هنا هو أنني ذاهب

137
00:10:36,610 --> 00:10:39,464
وجلب الوثيقة المقابلة هنا.

138
00:10:39,464 --> 00:10:44,305
وبعد ذلك مرة واحدة يتم جلب الوثيقة، الآن، بطبيعة الحال، يجب أن تكون الوثيقة موجودة،

139
00:10:44,305 --> 00:10:49,015
لذلك يجب أن يكون هذا صحيحا دائما، لأننا قد أدرجت للتو الوثيقة.

140
00:10:49,015 --> 00:10:53,032
ولكن فقط من أجل الاكتمال، أقوم بفحص صريح لذلك.

141
00:10:53,032 --> 00:10:57,576
وبعد ذلك يتم

142
00:10:57,576 --> 00:11:01,822
الحصول على البيانات الموجودة في المستند بقول doc.data، كما ترون هنا.

143
00:11:01,822 --> 00:11:05,658
ثم يتم الحصول على معرف المستند بواسطة doc.id،

144
00:11:05,658 --> 00:11:07,073
لذا فإن هذين منفصلين.

145
00:11:07,073 --> 00:11:12,708
ولكن ضمن شفرة React الخاصة بنا، قمنا دائمًا بتخزين المعرف

146
00:11:12,708 --> 00:11:20,530
والبيانات معًا كمستند JSON واحد هنا، أو كائن JavaScript هنا.

147
00:11:20,530 --> 00:11:23,340
لهذا السبب أنا الجمع بين الاثنين معا

148
00:11:23,340 --> 00:11:26,800
في كائن جافا سكريبت واحد هنا من خلال القيام بذلك.

149
00:11:26,800 --> 00:11:30,490
سترى لي مرارا وتكرارا القيام بذلك، على سبيل المثال،

150
00:11:30,490 --> 00:11:35,510
للترقيات جريئة وهلم جرا، وأيضا في أكتيونكريتورس.

151
00:11:35,510 --> 00:11:41,640
ثم بعد ذلك أقوم بإضافة التعليق إلى مخزن Redux الخاص بي هنا،

152
00:11:41,640 --> 00:11:44,250
وما تبقى من الشفرة على هذا النحو.

153
00:11:44,250 --> 00:11:47,016
وبالمثل، لجلب الأطباق،

154
00:11:47,016 --> 00:11:52,980
سترى كيف نجلب العديد من الأطباق من Firebase.

155
00:11:52,980 --> 00:11:58,330
لذلك نحن نرى أطباق firestore.collection الحصول على الأطباق والحصول عليها.

156
00:11:58,330 --> 00:12:02,520
الآن عندما تحصل على ذلك، ثم سوف تعطيني قيمة

157
00:12:02,520 --> 00:12:06,680
لقطة، وهي لقطة للحالة الراهنة لهذه المجموعة، ومن ذلك،

158
00:12:06,680 --> 00:12:10,690
يجب أن أذهب واسترداد كل طبق.

159
00:12:10,690 --> 00:12:15,400
وبعد ذلك أنا أعيد بناء مجموعة من الأطباق الخاصة بي هنا.

160
00:12:15,400 --> 00:12:18,990
الآن لاحظ أنه، كما قلت، معرف والبيانات منفصلة، لذلك

161
00:12:18,990 --> 00:12:23,495
أنا بحاجة إلى الجمع بينهما معا، لأن هذه هي الطريقة التي أستخدم بها البيانات في

162
00:12:23,495 --> 00:12:27,660
تطبيق React الخاص بي، لذلك أنا دفع ذلك في مجموعة الأطباق.

163
00:12:27,660 --> 00:12:32,980
ثم في النهاية إرجاع الأطباق التي سيتم بعد ذلك إدراجها في

164
00:12:32,980 --> 00:12:34,380
متجر Redux الخاص بي هنا.

165
00:12:34,380 --> 00:12:39,642
لذلك تم إجراء هذا النوع من التغييرات في ActionCreators.

166
00:12:39,642 --> 00:12:45,843
الآن سيتم التعامل مع عملية تسجيل الدخول والخروج أسفل هنا.

167
00:12:45,843 --> 00:12:51,445
لذلك بالنسبة لتسجيل الدخول، المصادقة التي قمنا باستيرادها من firebase،

168
00:12:51,445 --> 00:12:56,372
المصادقة هي التي تسمح لي بإجراء تسجيل الدخول والخروج.

169
00:12:56,372 --> 00:12:59,363
لذلك إذا كنت تقوم بتسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور،

170
00:12:59,363 --> 00:13:03,940
فإنه يوفر مع هذه الطريقة تسمى SigninWitheMailandPassword.

171
00:13:03,940 --> 00:13:10,250
ثم تقوم بتوفير البريد الإلكتروني وكلمة المرور كمعلمتين هنا.

172
00:13:10,250 --> 00:13:14,010
وبعد ذلك سوف تمكنك من تسجيل الدخول.

173
00:13:14,010 --> 00:13:20,985
وعند تسجيل الدخول، يوفر المصادقة هذا الكائن يسمى CurrentUser على المصادقة.

174
00:13:20,985 --> 00:13:26,455
لذلك يمكنك الحصول على معلومات المستخدم عن طريق قول auth.currentUser هنا.

175
00:13:26,455 --> 00:13:31,235
وأيضا أنا تخزين معلومات المستخدم في قاعدة البيانات الخاصة بي.

176
00:13:31,235 --> 00:13:33,879
الآن أنا لا تتبع صراحة أي رمز

177
00:13:33,879 --> 00:13:37,945
وأشياء من هذا القبيل لأن ذلك يتم تعقبها تلقائيا من قبل المصادقة بالنسبة لي،

178
00:13:37,945 --> 00:13:40,606
والتي يتم توفيرها من قبل وحدة نم فيريباس.

179
00:13:40,606 --> 00:13:43,723
لذلك أنا فقط الاستفادة من ذلك لتتبع الاستخدام الحالي.

180
00:13:43,723 --> 00:13:49,078
إذا كان المستخدم الحالي فارغًا، فأنا أعلم أن عميلي

181
00:13:49,078 --> 00:13:53,840
ليس لديه أي مستخدم قام بتسجيل الدخول إلى الخادم.

182
00:13:53,840 --> 00:13:59,510
وبالمثل، لتسجيل الخروج من المستخدم أقول ببساطة Auth.Signout.

183
00:13:59,510 --> 00:14:04,370
الآن مرة أخرى، وثائق كيفية الاستفادة من

184
00:14:04,370 --> 00:14:09,060
وحدة Npm Filebase متوفرة في وثائق Firebase.

185
00:14:09,060 --> 00:14:14,238
لذلك يمكنك بسهولة البحث عن ذلك لفهم كيفية الاستفادة من

186
00:14:14,238 --> 00:14:18,993
Firebase للاستفادة من جميع

187
00:14:18,993 --> 00:14:23,443
هذه الوظائف المختلفة المتوفرة من وحدة Firebase npm.

188
00:14:23,443 --> 00:14:27,999
أيضا، للمفضلات، ونحن إما نشر المفضلة، وهكذا

189
00:14:27,999 --> 00:14:32,454
تحتاج إلى نشر العناصر، لذلك كنت أقول إضافة،

190
00:14:32,454 --> 00:14:36,333
وعندما كنت في حاجة للحصول على عنصر، وسوف أقول الحصول على.

191
00:14:36,333 --> 00:14:41,455
ويمكنك حتى الحصول على عنصر من مستند معين في المجموعات.

192
00:14:41,455 --> 00:14:45,245
إذا كنت تريد مستند معين في المجموعة، فستقول .doc.

193
00:14:45,245 --> 00:14:49,015
ومن ثم تقوم بتزويد معرف المستند هنا.

194
00:14:49,015 --> 00:14:51,585
لذلك هذه هي الطريقة التي يمكنك الحصول على وثيقة محددة.

195
00:14:53,465 --> 00:14:56,265
أيضا حذف المفضلة، وجلب المفضلة وهلم جرا.

196
00:14:56,265 --> 00:15:01,640
الآن من أجل تخزين المفضلة في Firebase،

197
00:15:01,640 --> 00:15:09,100
يتم تخزين المفضلة كمعرف المستخدم ومعرف الطبق هنا.

198
00:15:09,100 --> 00:15:13,680
الآن فايرستور نفسها ليس لديها أي طريقة لملء

199
00:15:13,680 --> 00:15:15,800
معلومات الطبق في معرف الطبق.

200
00:15:15,800 --> 00:15:21,214
لذلك أنا مجرد جلب جميع المعلومات طبق،

201
00:15:21,214 --> 00:15:27,694
لذلك هذا هو كل المفضلة هو زوج، المستخدم وطبق معرف الزوج.

202
00:15:27,694 --> 00:15:30,431
لذلك أنا فقط جلب ذلك إلى المفضلة لدي هنا.

203
00:15:30,431 --> 00:15:35,859
ولكن هذا يعني أيضًا أنني بحاجة إلى تعديل مكون المفضلة الخاص بي حتى

204
00:15:35,859 --> 00:15:40,091
يتمكن من استخدام معرف الطبق ثم فهرسة الأطباق

205
00:15:40,091 --> 00:15:45,560
المخزنة في متجر Redux الخاص بي، والحصول على معلومات الطبق.

206
00:15:45,560 --> 00:15:49,194
أو سيكون البديل هو الذهاب إلى الخادم ثم جلب المعلومات.

207
00:15:49,194 --> 00:15:53,560
ولكن بما أن لدي بالفعل البيانات حول الأطباق في متجر Redux الخاص بي،

208
00:15:53,560 --> 00:15:58,234
لأنني قد فعلت بالفعل أطباق جلب لجلب جميع المعلومات

209
00:15:58,234 --> 00:15:59,474
حول الأطباق.

210
00:15:59,474 --> 00:16:05,492
أنا فقط ذاهب مباشرة إلى كائن الأطباق في بلدي ريدوس مزق

211
00:16:05,492 --> 00:16:08,190
وجلب هذه المعلومات.

212
00:16:08,190 --> 00:16:12,250
لذلك هذا يعني أيضا أن هناك تعديلات على المكون الرئيسي.

213
00:16:12,250 --> 00:16:18,894
في المكون الرئيسي، ستلاحظ أنه عندما أفعل المفضلة هنا

214
00:16:18,894 --> 00:16:25,343
لتفاصيل الطبق، سيكون لدي ببساطة لمقارنة الطبق إلى ذلك DisHid.

215
00:16:25,343 --> 00:16:29,188
وبالتالي فإن الطبق هنا في المفضلة هو ديسد نفسه، لذلك

216
00:16:29,188 --> 00:16:31,540
أنا فقط بحاجة إلى القيام المقارنة.

217
00:16:31,540 --> 00:16:35,334
لذلك سيكون هناك تغيير طفيف على هذا الخط في ديشيد.

218
00:16:35,334 --> 00:16:39,503
وأيضا ستلاحظ أنه عندما أدعو المفضلة،

219
00:16:39,503 --> 00:16:42,786
بالإضافة إلى توريد المفضلة لديهم،

220
00:16:42,786 --> 00:16:47,322
وأنا أيضا توريد الأطباق باعتبارها واحدة من الدعائم لبلدي المفضلة.

221
00:16:47,322 --> 00:16:51,711
لذلك هذا هو تغيير آخر ستلاحظه في المكون الرئيسي.

222
00:16:51,711 --> 00:16:54,990
وبالمثل، في المكون المفضل،

223
00:16:54,990 --> 00:16:59,996
ستلاحظ أنه داخل المكون المفضل أسفل هنا،

224
00:16:59,996 --> 00:17:04,933
ستلاحظ أنه عندما أقوم بتقديم المكون المفضل.

225
00:17:04,933 --> 00:17:09,761
ثم، هنا في هذه الوظيفة هنا، المفضلة كونست،

226
00:17:09,761 --> 00:17:14,113
ما أفعله هو أنني ذاهب إلى الأطباق المفضلة،

227
00:17:14,113 --> 00:17:19,338
والأطباق هي مجموعة من جميع ديشيدس هنا، لذلك أنا خريطة من خلال ذلك.

228
00:17:19,338 --> 00:17:23,591
لذا انظر إلى كل DisHid، ثم من الأطباق،

229
00:17:23,591 --> 00:17:27,545
قمت بتصفية هذا الطبق الخاص.

230
00:17:27,545 --> 00:17:29,484
ثم حصلت على DisHid، لذلك

231
00:17:29,484 --> 00:17:33,023
هنا سترى لي باستخدام مرشح مصفوفة JavaScript هنا.

232
00:17:33,023 --> 00:17:36,419
فإنه سيتم تصفية تلك المعلومات طبق محددة ومن

233
00:17:36,419 --> 00:17:38,687
ثم تقديم هذا الطبق معين.

234
00:17:38,687 --> 00:17:43,415
لذلك هذا هو العمل الإضافي الذي أحتاج إلى القيام به

235
00:17:43,415 --> 00:17:48,840
في المكون المفضل لدي من أجل تقديم كل من الأطباق هناك.

236
00:17:48,840 --> 00:17:55,900
لذلك، مثل هذا النوع من التعديلات الطفيفة ستلاحظ في اثنين من المكونات،

237
00:17:55,900 --> 00:17:59,840
وتحديدا تفاصيل الطبق، والمفضل والمكون الرئيسي.

238
00:17:59,840 --> 00:18:05,410
هذا هو المكان الذي تم فيه إجراء بعض التغييرات الطفيفة من أجل تسهيل

239
00:18:05,410 --> 00:18:09,980
تطبيق React لتكون قادرة على الاستفادة من خادم Firebase.

240
00:18:09,980 --> 00:18:12,790
لذلك هذا هو استعراض سريع لكيفية

241
00:18:12,790 --> 00:18:17,870
تعديل تطبيق React الخاص بي للتواصل مع خادم Firebase الخاص بي.

242
00:18:17,870 --> 00:18:23,257
الآن، كما هو الحال مع Angularfire، كان لدينا Angularfire أيضًا

243
00:18:23,257 --> 00:18:29,680
، والذي كان يوفر لنا طريقة للاستفادة مع Firebase للتواصل مع الخادم.

244
00:18:29,680 --> 00:18:35,659
رد فعل ليس لديها أي مثل هذا النظير، لذلك أنا مباشرة باستخدام

245
00:18:35,659 --> 00:18:41,472
وحدة نم فيريباس التي توفر القاعدة الأساسية للوصول إلى خادم فيريباس.

246
00:18:41,472 --> 00:18:46,165
ثم الاستفادة من الوظائف التي يوفرها للتواصل مع

247
00:18:46,165 --> 00:18:47,382
خادم Firebase الخاص بي.

248
00:18:47,382 --> 00:18:52,506
قضاء بعض الوقت مرة أخرى في الذهاب من خلال هذا الرمز لفهم كيفية

249
00:18:52,506 --> 00:18:57,534
الاستفادة من وحدات Firebase npm من أجل التواصل

250
00:18:57,534 --> 00:19:03,090
مع خادم Firebase الذي قمت بإعداده في التمرين السابق.

251
00:19:03,090 --> 00:19:08,293
مع هذا، لقد أعطيتك لمحة سريعة عن كيفية إعداد

252
00:19:08,293 --> 00:19:13,957
تطبيق React الخاص بك للتفاعل مع Firebase الخلفية كخدمة، ومن

253
00:19:13,957 --> 00:19:20,012
ثم تكون قادرة على دعم العمليات المختلفة لديك داخل التطبيق الخاص بك.

254
00:19:20,012 --> 00:19:24,632
الآن، مع هذا، أكملت هذا التمرين الخاص حيث

255
00:19:24,632 --> 00:19:28,758
أوضحت في هذا الدرس حول النهاية الخلفية كخدمة

256
00:19:28,758 --> 00:19:33,645
وأظهرت أيضًا Firebase كمثال على الواجهة الخلفية كخدمة.

257
00:19:33,645 --> 00:19:36,995
[ موسيقى]