1
00:00:03,650 --> 00:00:10,755
الآن بعد أن أكملنا تطوير خادم REST API كامل باستخدام Loopback،

2
00:00:10,755 --> 00:00:14,639
فإن السؤال التالي الفوري الذي سينشأ في ذهنك هو،

3
00:00:14,639 --> 00:00:20,090
كيف يمكننا تكييف تطبيق React للاستفادة من خادم REST API هذا؟

4
00:00:20,090 --> 00:00:23,140
كما فعلنا في الحالات السابقة،

5
00:00:23,140 --> 00:00:29,190
سنحتاج أيضًا إلى إعادة تكوين تطبيق React الخاص بنا للاستفادة على وجه التحديد من

6
00:00:29,190 --> 00:00:31,410
نقاط نهاية REST API

7
00:00:31,410 --> 00:00:37,960
وطلبات REST API المختلفة كما هو موضح بواسطة خادم Loopback الخاص بنا.

8
00:00:38,150 --> 00:00:42,075
للبدء في هذا التمرين، أولاً،

9
00:00:42,075 --> 00:00:45,275
استنساخ مستودع git الذي

10
00:00:45,275 --> 00:00:51,140
يحتوي على إعادة تطبيق مكتمل يتصل بخادم Loopback الخاص بنا.

11
00:00:51,140 --> 00:00:54,760
لذلك، للقيام بذلك، انتقل إلى موقعك المناسب على أجهزة الكمبيوتر الخاصة بك.

12
00:00:54,760 --> 00:00:58,370
سأقوم باستنساخ مستودع git عن طريق

13
00:00:58,370 --> 00:01:00,640
كتابة git clone

14
00:01:06,440 --> 00:01:15,270
https://github.com/jmuppala/conFusion-React-Loopback.git،

15
00:01:15,270 --> 00:01:18,130
ثم استنساخ مستودع git هذا.

16
00:01:19,430 --> 00:01:22,665
بمجرد استنساخ مستودع git،

17
00:01:22,665 --> 00:01:30,780
سننتقل إلى مجلد Confusion-React-Loopback

18
00:01:30,780 --> 00:01:39,355
ثم ننفذ تثبيت الغزل لتثبيت جميع وحدات العقدة لهذا التطبيق.

19
00:01:39,355 --> 00:01:42,315
قبل بدء تشغيل تطبيق React،

20
00:01:42,315 --> 00:01:46,300
تأكد من تكوين خادم Loopback بشكل صحيح.

21
00:01:46,300 --> 00:01:47,705
في خادم الاسترجاع،

22
00:01:47,705 --> 00:01:49,410
في مجلد العميل، قم

23
00:01:49,410 --> 00:01:54,425
بنقل الصور التي قدمناها كملف images.zip،

24
00:01:54,425 --> 00:01:56,780
وفك ضغطه، ثم قم بنقل الصور إلى

25
00:01:56,780 --> 00:02:00,540
مجلد الصور تحت مجلد العميل كما هو موضح هنا.

26
00:02:00,540 --> 00:02:08,660
أيضا، إعادة تسمية الملف root.js كما root.jpباع أو حذف الملف root.js.

27
00:02:08,660 --> 00:02:13,310
نحن لا نحتاج إلى هذا بعد الآن في تطبيقنا لأننا نريد التأكد من أن

28
00:02:13,310 --> 00:02:21,050
خادمنا يقوم بحفظ المحتويات من مجلد العميل.

29
00:02:21,050 --> 00:02:22,740
لذلك، لتحقيق ذلك،

30
00:02:22,740 --> 00:02:25,265
دعونا فتح ملف middleware.json،

31
00:02:25,265 --> 00:02:27,845
وفي ملف middleware.json،

32
00:02:27,845 --> 00:02:32,980
في جزء الملفات،

33
00:02:32,980 --> 00:02:38,435
أضف هذا إلى جزء الملفات من ملف middleware.json الخاص بك.

34
00:02:38,435 --> 00:02:46,320
لذلك، سنقول، استرجاع ثابت ومعلمات: الدولار البنك نقطة نقطة شرطة مائلة العميل»،

35
00:02:46,320 --> 00:02:49,595
مشيرا إلى أن خادم الاسترجاع الخاص بك سيوفر

36
00:02:49,595 --> 00:02:53,555
محتوى ثابت من مجلد العميل هنا.

37
00:02:53,555 --> 00:02:55,890
بعد إجراء هذه التغييرات،

38
00:02:55,890 --> 00:03:00,080
يمكنك تشغيل الخادم الخاص بك.

39
00:03:00,360 --> 00:03:04,100
تأكد من أن خادم MongoDB الخاص

40
00:03:04,100 --> 00:03:07,860
بك قيد التشغيل أيضًا قبل تشغيل خادم Loopback.

41
00:03:07,860 --> 00:03:14,690
ثم، بعد ذلك، سنقوم بعد ذلك بتجميع وإطلاق عميل React الخاص بنا.

42
00:03:14,690 --> 00:03:20,345
الآن، مرة أخرى التأكد من أن خادم MongoDB وخادم Loopback الخاص بك قيد التشغيل،

43
00:03:20,345 --> 00:03:22,810
انتقل إلى المحطة وأضف المحطة الطرفية.

44
00:03:22,810 --> 00:03:31,405
اكتب الغزل تبدأ لبدء تطبيق الاسترجاع لدينا، تطبيق React.

45
00:03:31,405 --> 00:03:34,980
لذلك، عندما يتم تشغيل التطبيق في المتصفح،

46
00:03:34,980 --> 00:03:40,750
ستلاحظ أن تطبيق React القائم على

47
00:03:40,750 --> 00:03:46,670
Loopback يتصرف تمامًا مثل الإصدارات السابقة من تطبيق React.

48
00:03:46,670 --> 00:03:48,670
لذلك، هنا لدينا الصفحة الرئيسية،

49
00:03:48,670 --> 00:03:52,725
ثم لدينا صفحة حول لنا كما نرى هنا،

50
00:03:52,725 --> 00:03:56,770
ثم صفحة القائمة حيث يتم سرد عناصر القائمة هنا،

51
00:03:56,770 --> 00:04:00,260
صفحة اتصل بنا كما هو متوقع.

52
00:04:00,260 --> 00:04:04,535
ثم اسمحوا لي أن أعود إلى الصفحة الرئيسية ثم تسجيل الدخول نفسي كمسؤول.

53
00:04:04,535 --> 00:04:11,000
لذلك، دعونا تسجيل الدخول كمسؤول،

54
00:04:11,000 --> 00:04:14,480
وبعد ذلك سوف تكون قادرة على رؤية المفضلة.

55
00:04:14,480 --> 00:04:19,075
قمت بتسجيل الدخول في وقت سابق ثم قمت بإضافة عنصر واحد إلى المفضلة.

56
00:04:19,075 --> 00:04:24,290
دعنا نذهب الآن إلى القائمة ثم نضيف عنصرًا ثانيًا إلى «المفضلة».

57
00:04:24,290 --> 00:04:27,930
لذلك، هنا سنقوم بإضافة هذا العنصر إلى المفضلة،

58
00:04:27,930 --> 00:04:34,850
وبعد ذلك سوف تكون قادرا على رؤية أن كل من هذه العناصر هي الآن في المفضلة.

59
00:04:34,850 --> 00:04:38,194
وبالمثل، يمكنك حذف العناصر من المفضلة.

60
00:04:38,194 --> 00:04:42,020
لذلك، دعونا المضي قدما وحذف هذا من المفضلة لدينا.

61
00:04:42,020 --> 00:04:43,490
بالعودة إلى عنصر القائمة،

62
00:04:43,490 --> 00:04:47,550
دعنا نضيف تعليقًا إلى أحد الأطباق.

63
00:04:47,550 --> 00:04:49,560
لذلك، اسمحوا لي أن أنقر على هذا الطبق،

64
00:04:49,560 --> 00:04:51,855
وبعد ذلك سنقوم بتقديم تعليق.

65
00:04:51,855 --> 00:05:01,980
لذلك، عندما نرسل تعليقًا،

66
00:05:01,980 --> 00:05:05,175
كما ترون، يتم إضافة التعليق إلى

67
00:05:05,175 --> 00:05:09,710
خادمنا هناك كما

68
00:05:09,710 --> 00:05:15,690
هو متوقع وتظهر النتيجة في صفحة تفاصيل الطبق هنا.

69
00:05:15,690 --> 00:05:18,660
وبالعودة مرة أخرى إلى الصفحة الرئيسية،

70
00:05:19,260 --> 00:05:24,650
نجد أن تطبيق React لدينا قادر الآن على التواصل مع

71
00:05:24,650 --> 00:05:27,740
خادم Loopback ومن ثم الحصول

72
00:05:27,740 --> 00:05:31,465
على البيانات من الخادم والتفاعل مع الخادم كما هو متوقع.

73
00:05:31,465 --> 00:05:35,160
الآن، بالطبع، السؤال الذي قد ينشأ في عقلك هو،

74
00:05:35,160 --> 00:05:41,455
كيف يتواصل تطبيق الاسترجاع هذا مع خادم الاسترجاع؟

75
00:05:41,455 --> 00:05:47,610
الآن، هذا هو المكان الذي نود أن نلاحظ أنه بالنسبة إلى الاسترجاع،

76
00:05:47,610 --> 00:05:51,495
نظرًا لأن خادم Loopback يعرض نقاط نهاية REST API، فإن

77
00:05:51,495 --> 00:05:55,575
تطبيق React الخاص بي قادر على الوصول إلى خادم Loopback في

78
00:05:55,575 --> 00:05:59,860
نقاط النهاية REST API المقابلة ثم التواصل مع الخادم،

79
00:05:59,860 --> 00:06:07,845
كما فعلنا مع خادم REST API الخاص بنا التي نفذناها في وقت سابق.

80
00:06:07,845 --> 00:06:15,020
لذلك، دعونا نمضي قدما ونلقي نظرة على رمز تطبيق React المعدل.

81
00:06:15,020 --> 00:06:17,690
الذهاب إلى رمز التطبيق لدينا،

82
00:06:17,690 --> 00:06:23,200
فإن التغييرات الرئيسية التي ستلاحظ ستكون في ملف ActionCreators.js.

83
00:06:23,200 --> 00:06:27,620
هنا، ستلاحظ أننا نتواصل الآن مع خادم

84
00:06:27,620 --> 00:06:33,930
Loopback بدلاً من خادم REST API الذي كان لدينا في وقت سابق.

85
00:06:33,930 --> 00:06:37,550
لذلك، سيتم الآن الوصول إلى خادم Loopback في

86
00:06:37,550 --> 00:06:43,800
نقطة النهاية api/التعليقات أو نقطة نهاية api/الأطباق وهلم جرا.

87
00:06:43,800 --> 00:06:52,350
لذلك، يتم تحديث جميع طلبات الجلب هذه للوصول إلى خادم Loopback الخاص بنا الفوري.

88
00:06:52,700 --> 00:06:56,215
لذلك، ستلاحظ تغييرات مماثلة هناك.

89
00:06:56,215 --> 00:07:00,095
الآن، بالإضافة إلى تسجيل الدخول إلى خادم Loopback الخاص بنا،

90
00:07:00,095 --> 00:07:08,190
لذلك دعونا نذهب إلى رمز تسجيل الدخول هنا.

91
00:07:08,190 --> 00:07:09,750
لذلك، في مستخدم تسجيل الدخول،

92
00:07:09,750 --> 00:07:18,035
ونحن نشر جلب إلى باسيورل و أبي/العملاء/تسجيل الدخول نقطة النهاية،

93
00:07:18,035 --> 00:07:25,260
وبعد ذلك سنقوم بتوفير بيانات الاعتماد في نص رسالة الطلب التي تخرج.

94
00:07:25,260 --> 00:07:27,215
وردا على ذلك،

95
00:07:27,215 --> 00:07:29,830
سيقوم الخادم بإرسال الاستجابة مرة أخرى.

96
00:07:29,830 --> 00:07:33,950
تحتوي الاستجابة بعد ذلك على معلومات الرمز المميز.

97
00:07:33,950 --> 00:07:38,905
يتم إرسال معلومات الرمز المميز مرة أخرى

98
00:07:38,905 --> 00:07:44,790
في شكل معرف رسالة الرد.

99
00:07:44,790 --> 00:07:47,325
لذا، فإن المعرف نفسه بمثابة الرمز المميز.

100
00:07:47,325 --> 00:07:49,545
لذا، فإن رسالة الرد نفسها،

101
00:07:49,545 --> 00:07:55,200
سأقوم بحفظ هذا في التخزين المحلي الخاص بي كما هو موضح هنا.

102
00:07:55,200 --> 00:07:59,320
نقوم بتوثيق رسالة الاستجابة ومن ثم تخزين ذلك هناك.

103
00:07:59,320 --> 00:08:06,945
تحتوي رسالة الاستجابة هذه، Response.id، على الرمز المميز.

104
00:08:06,945 --> 00:08:12,815
لذلك، يعمل response.id كرمز ويب JSON للوصول إلى خادم الاسترجاع.

105
00:08:12,815 --> 00:08:15,650
لذلك، هذا هو السبب في أنك ستلاحظ أنه في

106
00:08:15,650 --> 00:08:19,235
الحالات التي أحتاج فيها إلى الوصول إلى الخادم، لذلك على سبيل المثال،

107
00:08:19,235 --> 00:08:25,520
سنلاحظ أنه عندما نجلب أو ننشر المفضلة لديك إلى الخادم،

108
00:08:25,520 --> 00:08:28,550
ستلاحظ أن أحصل على الرمز المميز بالقول،

109
00:08:28,550 --> 00:08:30,420
دع الرمز المميز، تحليل JSON،

110
00:08:30,420 --> 00:08:33,990
LocalStorage، GetItem، الرمز المميز هنا،

111
00:08:33,990 --> 00:08:38,890
ثم في حقل رأس التخويل،

112
00:08:38,890 --> 00:08:44,300
قلت أن حقل التخويل يجب أن يكون token.id هنا كما هو موضح هنا.

113
00:08:44,300 --> 00:08:51,380
لذا، هذه هي الطريقة التي سنتمكن من مصادقة أنفسنا إلى خادم Loopback.

114
00:08:51,380 --> 00:08:55,450
لذلك، هنا ترى أنه يقول، BaseUrl، api/المفضلة،

115
00:08:55,450 --> 00:08:59,440
ومن ثم الحصول على قائمة المفضلة من الخادم،

116
00:08:59,440 --> 00:09:03,430
ومن ثم حفظه في متجر redux لدينا.

117
00:09:03,430 --> 00:09:06,710
لذلك، حسنا، لا يزال الكثير من التعليمات البرمجية كما هو،

118
00:09:06,710 --> 00:09:09,740
باستثناء التحديثات التي قمنا بها من أجل

119
00:09:09,740 --> 00:09:13,455
الوصول إلى نقاط نهاية أبي Loopbacks ريست.

120
00:09:13,455 --> 00:09:22,665
الآن، بالنسبة إلى Angular، لدينا SDK Loopback يمكن بناؤه لتطبيق Angular الخاص بنا.

121
00:09:22,665 --> 00:09:27,070
ولكن بالنسبة إلى React، لا يوجد مثل هذا الدعم متوفر من Loopback،

122
00:09:27,070 --> 00:09:30,460
ولذا يجب علينا اللجوء إلى الوصول مباشرة إلى

123
00:09:30,460 --> 00:09:34,840
نقاط النهاية Loopback REST API كما هو موضح هنا باستخدام الجلب،

124
00:09:34,840 --> 00:09:38,860
ومن ثم نحن قادرون على التواصل مع خادم Loopback.

125
00:09:38,860 --> 00:09:42,115
مع هذا الفهم السريع لكيفية

126
00:09:42,115 --> 00:09:48,360
تحديث تطبيق React الخاص بنا للوصول إلى خادم Loopback الخاص بنا،

127
00:09:48,360 --> 00:09:51,795
نقوم بإكمال فحص خادم Loopback.

128
00:09:51,795 --> 00:09:56,980
قضاء بعض الوقت في البحث عن بعض المكونات ومعرفة

129
00:09:56,980 --> 00:10:02,340
كيفية استخدام المعلومات التي تم الحصول عليها من خادم Loopback.

130
00:10:02,340 --> 00:10:06,530
ستلاحظ أن معظم المكونات تبقى تمامًا كما كانت من قبل،

131
00:10:06,530 --> 00:10:13,650
باستثناء بعض التعديلات الطفيفة في المكون المفضل للحصول

132
00:10:13,650 --> 00:10:18,495
على المعلومات من خادم Loopback

133
00:10:18,495 --> 00:10:22,700
ثم استخدمها لتقديم قائمة العناصر المفضلة لديك.

134
00:10:22,700 --> 00:10:29,545
بخلاف ذلك، تقتصر الكثير من التغييرات على ملف ActionCreators.js،

135
00:10:29,545 --> 00:10:34,260
حيث قمنا بتحديث الجلب لاستخدام عنوان URL

136
00:10:34,260 --> 00:10:41,125
لخادم Loopback الخاص بنا ليتمكن من الوصول إلى نقاط النهاية المختلفة لـ REST API.

137
00:10:41,125 --> 00:10:48,460
لذلك، مع هذا، لقد أظهرت لك بسرعة كيف يمكنك بناء التطبيق الخاص بك.

138
00:10:48,460 --> 00:10:51,590
مع هذه المقدمة السريعة لكيفية

139
00:10:51,590 --> 00:10:54,755
الاستفادة من الاسترجاع داخل تطبيقنا،

140
00:10:54,755 --> 00:10:59,110
نأتي إلى نهاية هذا التمرين.