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
كيف يمكننا تكييف تطبيق Angular للاستفادة من خادم Rest API هذا؟

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

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

6
00:00:29,190 --> 00:00:31,385
نقاط نهاية واجهة برمجة تطبيقات Rest

7
00:00:31,385 --> 00:00:37,190
وطلبات واجهة برمجة تطبيقات Rest المختلفة التي يتعرض لها خادم LoopBack الخاص بنا.

8
00:00:37,190 --> 00:00:40,295
الآن، هذا هو المكان الذي سنستفيد من

9
00:00:40,295 --> 00:00:46,865
SDK LoopBack التي يمكن بناؤها تلقائيًا بالنسبة لنا باستخدام وحدة Node.

10
00:00:46,865 --> 00:00:51,214
سنلقي نظرة على خوادم LoopBack الخاصة بنا،

11
00:00:51,214 --> 00:00:56,975
ونقاط النهاية المختلفة لـ Rest API وننشئ SDK تلقائيًا،

12
00:00:56,975 --> 00:00:59,480
والذي يمكننا بعد ذلك دمجه في

13
00:00:59,480 --> 00:01:04,380
تطبيقنا Angular ثم نتمكن من التواصل مع خادم LoopBack الخاص بنا،

14
00:01:04,380 --> 00:01:10,055
سواء للمصادقة أو أيضًا من تبادل البيانات.

15
00:01:10,055 --> 00:01:13,000
للبدء في هذا التمرين، قم

16
00:01:13,000 --> 00:01:17,045
أولاً باستنساخ مستودع git الذي

17
00:01:17,045 --> 00:01:23,535
يحتوي على تطبيق Angular مكتمل جزئيًا يتصل بخادم LoopBack الخاص بنا.

18
00:01:23,535 --> 00:01:26,730
لذلك، للقيام بذلك، انتقل إلى موقعك المناسب على جهاز الكمبيوتر الخاص بك.

19
00:01:26,730 --> 00:01:29,580
لذا، أنا هنا في مجلد Coursera Angular الخاص بي.

20
00:01:29,580 --> 00:01:33,390
سأقوم باستنساخ مستودع git عن طريق

21
00:01:33,390 --> 00:01:35,680
كتابة git clone

22
00:01:41,510 --> 00:01:51,270
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git،

23
00:01:51,270 --> 00:01:54,160
ثم استنساخ مستودع git هذا.

24
00:01:55,460 --> 00:01:58,645
بمجرد استنساخ مستودع git،

25
00:01:58,645 --> 00:02:08,355
سننتقل إلى مجلد LoopBack الارتباك Angular6 ثم نقوم

26
00:02:08,355 --> 00:02:12,370
بإجراء تثبيت NPM لتثبيت

27
00:02:12,370 --> 00:02:19,135
جميع وحدات العقدة لهذا التطبيق Angular المكتمل جزئيًا.

28
00:02:19,135 --> 00:02:26,670
لإنشاء مجموعة تطوير برامج LoopBack تلقائيًا لخادم LoopBack الخاص بنا،

29
00:02:26,670 --> 00:02:32,125
سنأخذ مساعدة وحدة عقدة LoopBack SDK Builder هذه.

30
00:02:32,125 --> 00:02:34,955
لذا، فإن هذا LoopBack SDK Builder

31
00:02:34,955 --> 00:02:39,140
هو وحدة عقدة يحركها المجتمع والتي تم تطويرها بالفعل

32
00:02:39,140 --> 00:02:46,380
من LoopBack SDK Angular الرسمية التي أطلقها مطورو LoopBack.

33
00:02:46,380 --> 00:02:50,160
دعم الاسترجاع سك الزاوي جس الزاوي.

34
00:02:50,160 --> 00:02:53,885
لذلك، تم تعديل هذا في هذا Loopback SDK Builder

35
00:02:53,885 --> 00:02:58,390
لدعم Angular اثنين وحول التطبيقات.

36
00:02:58,390 --> 00:03:01,090
لذا، فإن LoopBack SDK Builder،

37
00:03:01,090 --> 00:03:10,155
وحدة العقدة نفسها بمجرد تثبيتها في مجلد مشروع الخادم الخاص بك،

38
00:03:10,155 --> 00:03:13,610
ثم يمكنك الاستفادة من LoopBack SDK Builder

39
00:03:13,610 --> 00:03:18,810
لتمرير تلقائيًا من خلال تطبيق LoopBack الذي قمت بإنشائه بالفعل.

40
00:03:18,810 --> 00:03:22,190
سيؤدي ذلك تلقائيًا إلى بناء كل ما

41
00:03:22,190 --> 00:03:25,610
نحتاجه للبدء في تطبيق Angular الخاص بنا.

42
00:03:25,610 --> 00:03:27,765
لذلك، فإنه يبني مجموعة تطوير البرمجيات.

43
00:03:27,765 --> 00:03:30,155
لذلك، ضمن مجموعة تطوير البرامج،

44
00:03:30,155 --> 00:03:35,995
يقوم LoopBack SDK Builder بتصدير

45
00:03:35,995 --> 00:03:41,930
جميع الواجهات، وجميع النماذج للبيانات المختلفة التي سنقوم بتخزينها على

46
00:03:41,930 --> 00:03:44,390
خادم LoopBack الخاص بنا وكذلك

47
00:03:44,390 --> 00:03:49,520
جميع خدمات API التي يمكن استخدامها داخل تطبيق Angular الخاص بك.

48
00:03:49,520 --> 00:03:55,485
لذلك، تأتي النماذج وخدماتك تلقائيًا للركوب بمجرد إنشاء SDK.

49
00:03:55,485 --> 00:04:00,935
الآن انها مجرد مسألة دمج هذا سك في التطبيق الزاوي لدينا،

50
00:04:00,935 --> 00:04:03,265
ومن ثم البدء بسرعة.

51
00:04:03,265 --> 00:04:08,010
نظرًا لأننا قمنا بالفعل ببناء تطبيق Angular الخاص بنا في دورة سابقة،

52
00:04:08,010 --> 00:04:11,900
سأقوم بتعديل هذا التطبيق للاستفادة من

53
00:04:11,900 --> 00:04:16,660
SDK LoopBack الذي سنقوم بتصديره من هذا LoopBack SDK Builder.

54
00:04:16,660 --> 00:04:18,620
في الخطوة السابقة،

55
00:04:18,620 --> 00:04:20,030
قمت للتو بتثبيت

56
00:04:20,030 --> 00:04:23,420
تطبيق Angular المكتمل جزئيًا والذي

57
00:04:23,420 --> 00:04:27,305
تم تكييفه بالفعل للاستفادة من SDK LoopBack.

58
00:04:27,305 --> 00:04:30,070
لذلك، دعونا المضي قدما وبناء

59
00:04:30,070 --> 00:04:33,855
لوباك سك ومن ثم نشره في التطبيق الزاوي لدينا،

60
00:04:33,855 --> 00:04:41,605
ومن ثم المضي قدما وتجميع التطبيق الزاوي لدينا والبدء معها.

61
00:04:41,605 --> 00:04:44,390
لإعداد LoopBack SDK،

62
00:04:44,390 --> 00:04:51,830
انتقل إلى مجلد خادم LoopBack في علامة التبويب الطرفية أو في إطار الأوامر.

63
00:04:51,830 --> 00:04:57,355
حتى هنا أنا في مجلد خادم LoopBack الخاص بي.

64
00:04:57,355 --> 00:04:58,855
لذلك، في هذا المجلد،

65
00:04:58,855 --> 00:05:14,185
اسمحوا لي المضي قدما وتثبيت هذا LoopBack

66
00:05:14,185 --> 00:05:16,960
SDK Builder.

67
00:05:16,960 --> 00:05:19,535
مرة واحدة يتم تثبيت باني،

68
00:05:19,535 --> 00:05:22,625
دعونا المضي قدما وبناء لوباك سك.

69
00:05:22,625 --> 00:05:24,835
لإنشاء SDK LoopBack،

70
00:05:24,835 --> 00:05:34,460
سنأخذ مساعدة أداة سطر الأوامر LB-SDK التي تقوم وحدة LoopBack SDK

71
00:05:34,460 --> 00:05:36,370
بتكوين تلقائيًا لنا.

72
00:05:36,370 --> 00:05:42,060
لذلك، للوصول إلى ذلك، سنقول،. /وحدات العقدة.

73
00:05:42,060 --> 00:05:43,610
لذلك، في وحدات العقدة،

74
00:05:43,610 --> 00:05:47,570
هناك مجلد a.bin الذي يتم إنشاؤه تلقائيا كلما قمت

75
00:05:47,570 --> 00:05:51,770
بتثبيت وحدات عقدة مختلفة في المجلد هناك.

76
00:05:51,770 --> 00:05:55,040
لذلك، للذهاب إلى مجلد the.bin،

77
00:05:55,040 --> 00:06:01,540
ونحن سوف الوصول إلى هذا الأمر لب-سك هناك،

78
00:06:01,540 --> 00:06:03,490
أن يحصل على تثبيت تلقائيا،

79
00:06:03,490 --> 00:06:07,850
ثم سوف ندعو هذا الخادم العرض. /server.js،

80
00:06:12,430 --> 00:06:20,310
ونحن بحاجة إلى تحديد المسار إلى تطبيق Angular الذي قمنا بتهيئته للتو.

81
00:06:20,310 --> 00:06:23,180
لذا، فإن تطبيقي الزاوي موجود حاليًا في

82
00:06:23,180 --> 00:06:28,865
مستنداتي Coursera الزاوي الارتباك مجلد LoopBack الزاوي.

83
00:06:28,865 --> 00:06:31,410
لذا، دعني أنسخ ذلك الجزء

84
00:06:31,410 --> 00:06:36,470
ثم اسمحوا لي أن أذهب إلى محطة بلدي أو نافذة الأوامر

85
00:06:36,470 --> 00:06:41,600
حيث أحاول تكوين بلدي LoopBack SDK.

86
00:06:41,600 --> 00:06:43,490
لذلك، في موجه،

87
00:06:43,490 --> 00:06:45,995
لأنه في مجلد المستندات،

88
00:06:45,995 --> 00:06:55,540
سأقوم بكتابة المسار الكامل لهذا بدءا من المجلد الجذر الخاص بي في جهاز Mac الخاص بي.

89
00:06:55,540 --> 00:06:57,680
إذا كنت تستخدم Windows الخاص بهم،

90
00:06:57,680 --> 00:07:04,370
فتأكد من أن هذا المسار يشير إلى المسار الكامل الذي يبدأ من نقطتين C أو D،

91
00:07:04,370 --> 00:07:07,540
أيهما محرك الأقراص الذي تقوم بتثبيته على جهاز Windows.

92
00:07:07,540 --> 00:07:12,650
لذا، فإن المسار الكامل إلى مجلد LoopBack الزاوي الخاص بك

93
00:07:12,650 --> 00:07:15,505
، ثم سنقول،

94
00:07:15,505 --> 00:07:21,900
/SRC، المجلد المصدر هناك، ثم التطبيق.

95
00:07:21,900 --> 00:07:24,710
بعد ذلك، سنقوم بنشر SDK في

96
00:07:24,710 --> 00:07:30,120
المجلد المشترك في المجلد الفرعي SDK هناك.

97
00:07:30,430 --> 00:07:36,680
نريد أن يقوم هذا LoopBack SDK Builder

98
00:07:36,680 --> 00:07:43,570
بنشر إصدار الويب NG2 تلقائيًا من SDK.

99
00:07:43,570 --> 00:07:45,879
لذلك، هذا هو الإصدار الذي سيدعم

100
00:07:45,879 --> 00:07:50,380
تطبيقات الويب وتطبيقنا الزاوي في هذه الحالة.

101
00:07:50,380 --> 00:07:54,870
إذا كنت تقوم بإنشاء هذا لتطبيق برنامج نصي أصلي، فستقول،

102
00:07:54,870 --> 00:08:00,050
NG2 الأصلي لإنشاء SDK لتطبيق Native Script.

103
00:08:00,050 --> 00:08:02,380
نظرًا لأنني أقوم ببناء تطبيق Angular الخاص بي

104
00:08:02,380 --> 00:08:04,580
، سأقول فقط، على الويب NG2،

105
00:08:04,580 --> 00:08:08,190
ثم السماح لـ Loopback SDK Builder تلقائيًا

106
00:08:08,190 --> 00:08:12,230
بإنشاء مجموعة تطوير البرامج ثم نشره

107
00:08:12,230 --> 00:08:20,780
في مجلد تطبيقات/مشاركة/sdk الخاص بي.

108
00:08:20,780 --> 00:08:23,715
لذلك، بعد بضع ثوانٍ،

109
00:08:23,715 --> 00:08:29,915
يتم إنشاء SDK ونشره في تطبيق Angular الخاص بي.

110
00:08:29,915 --> 00:08:33,250
الآن قبل أن أبدأ تطبيق Angular الخاص بي،

111
00:08:33,250 --> 00:08:36,730
دعني أبدأ خادم LoopBack الخاص بي، وقبل

112
00:08:36,730 --> 00:08:40,820
أن أفعل ذلك سأذهب إلى علامة تبويب محطة أخرى

113
00:08:40,820 --> 00:08:44,900
هنا ثم بدء تشغيل خادم MongoDB الخاص بي،

114
00:08:44,900 --> 00:08:45,955
لذا سأقول،

115
00:08:45,955 --> 00:08:55,790
Mongod —dbpaths = البيانات، ثم

116
00:08:55,790 --> 00:08:57,890
بدء تشغيل خادم MongoDB الخاص بي.

117
00:08:57,890 --> 00:09:02,760
أولاً، دعني أبدأ خادم LoopBack الخاص بي.

118
00:09:02,760 --> 00:09:07,710
لذلك، في بداية NPM الفورية،

119
00:09:07,710 --> 00:09:12,140
ويجب أن يكون خادم LoopBack الخاص بي قيد التشغيل وتشغيله في فترة قصيرة.

120
00:09:12,140 --> 00:09:17,555
ثم، انتقل الآن إلى تطبيق LoopBack الخاص بي،

121
00:09:17,555 --> 00:09:20,645
دعني أفتح هذا التطبيق في

122
00:09:20,645 --> 00:09:25,890
رمز Visual Studio الخاص بي حتى نتمكن من إلقاء نظرة على شفرة المصدر.

123
00:09:27,500 --> 00:09:31,665
بمجرد فتح طلبي في التعليمات البرمجية Visual Studio،

124
00:09:31,665 --> 00:09:37,315
اسمحوا لي أن تأخذ ذلك في نافذة سطح المكتب الجديد.

125
00:09:37,315 --> 00:09:45,200
ثم، اسمحوا لي أيضا أن أبدأ بلدي نشر التطبيق الزاوي

126
00:09:45,200 --> 00:09:53,645
عن طريق كتابة نغسيرفر في موجه وانتظر بلدي تطبيق الزاوي للحصول على تجميعها.

127
00:09:53,645 --> 00:09:57,785
بمجرد تجميع تطبيق Angular الخاص بي وتطبيقه،

128
00:09:57,785 --> 00:10:00,910
دعني أذهب إلى متصفح،

129
00:10:00,910 --> 00:10:04,810
ثم أولاً الخروج من هذا التطبيق Angular.

130
00:10:04,810 --> 00:10:06,935
الذهاب إلى المتصفح،

131
00:10:06,935 --> 00:10:09,455
اسمحوا لي أن فتح علامة تبويب جديدة هنا،

132
00:10:09,455 --> 00:10:13,760
ثم اكتب في المضيف المحلي: 4200 وسترى

133
00:10:13,760 --> 00:10:18,345
تطبيق الزاوي المنتشر إلى نافذة المتصفح هذه هنا

134
00:10:18,345 --> 00:10:21,070
، ويمكنك أن ترى أن

135
00:10:21,070 --> 00:10:25,095
الصفحة الرئيسية، صفحة حول لنا مع جميع البيانات،

136
00:10:25,095 --> 00:10:32,740
ثم القائمة وأيضا المفضلة.

137
00:10:34,120 --> 00:10:38,410
حاليا الذي لا يظهر أي شيء لأنه

138
00:10:38,410 --> 00:10:42,640
لم يتم تسجيل أي مستخدم وصفحة الاتصال، تماما كما كان من قبل.

139
00:10:42,640 --> 00:10:47,520
حتى لتسجيل الدخول، اسمحوا لي تسجيل الدخول كمستخدم وبعد ذلك سوف أكتب

140
00:10:47,520 --> 00:10:52,540
في اسم المستخدم وكلمة المرور الخاصة بي هنا، وبعد ذلك

141
00:10:52,540 --> 00:10:59,030
بمجرد تسجيل الدخول ثم سوف تكون قادرة على رؤية أنه عندما أذهب إلى

142
00:10:59,030 --> 00:11:04,665
المفضلة، سيتم عرض المفضلة لهذا المستخدم معين هنا.

143
00:11:04,665 --> 00:11:08,680
تماما كما كان من قبل، يمكننا كتابة التعليقات ثم إرسال التعليقات،

144
00:11:08,680 --> 00:11:13,515
ومن ثم أيضا إضافة عناصر إلى المفضلة وهلم جرا.

145
00:11:13,515 --> 00:11:16,900
يتم

146
00:11:16,900 --> 00:11:22,740
دعم جميع الوظائف التي رأيتها مع الإصدارات السابقة من تطبيق Angular أيضًا في هذا الإصدار من تطبيق Angular.

147
00:11:22,740 --> 00:11:28,860
أيضا لخادم LoopBack الخاص بك لتكون قادرة على تقديم الصور،

148
00:11:28,860 --> 00:11:36,235
سيتم تخزين كل هذه البيانات في رمز الخادم الخاص بك في مجلد العميل من رمز الخادم.

149
00:11:36,235 --> 00:11:39,975
لذلك، في مجلد العميل الخاص بخادم LoopBack الخاص بي،

150
00:11:39,975 --> 00:11:43,010
لاحظ أنني قمت بإنشاء هذا المجلد الفرعي

151
00:11:43,010 --> 00:11:47,365
المسمى الصور ثم قمت بتخزين كافة الصور في المجلد الفرعي.

152
00:11:47,365 --> 00:11:52,010
الآن، من أجل تقديم هذه الصور وأيضًا لاستخدام

153
00:11:52,010 --> 00:11:58,930
مجلد العميل كمجلد عمومي لخادم LoopBack الخاص بي،

154
00:11:58,930 --> 00:12:02,630
ثم في بعض التغييرات التي أحتاج إلى إجراؤها على خادم LoopBack الخاص بي.

155
00:12:02,630 --> 00:12:05,100
الآن، أول شيء عليك القيام به هو،

156
00:12:05,100 --> 00:12:08,275
انتقل إلى مجلد التمهيد وفي مجلد التمهيد،

157
00:12:08,275 --> 00:12:12,250
سترى هذا الملف root.js هنا،

158
00:12:12,250 --> 00:12:15,025
والذي يحتوي على هذه المعلومات هنا.

159
00:12:15,025 --> 00:12:18,410
الآن، يمكنك إما حذف ملف root.js

160
00:12:18,410 --> 00:12:22,330
أو ببساطة إعادة تسمية الملف root.js إلى شيء آخر.

161
00:12:22,330 --> 00:12:29,630
حتى هنا، ترى أنني قمت بإعادة تسمية هذا الملف إلى root.jpeed مع تمديد جباع.

162
00:12:29,630 --> 00:12:34,190
الآن، يجب ألا يحتوي هذا الملف على ملحق the.js بعد الآن.

163
00:12:34,190 --> 00:12:37,430
لذلك، أي شيء آخر غير امتداد the.js على ما يرام.

164
00:12:37,430 --> 00:12:39,975
لذا، ما يعنيه هذا هو أنه في هذه الحالة،

165
00:12:39,975 --> 00:12:45,250
لن يقوم خادم LoopBack الخاص بي، عند بدء التشغيل بتنفيذ التعليمات البرمجية في هذا المجلد.

166
00:12:45,250 --> 00:12:51,745
الآن، عندما تنظر إلى التعليمات البرمجية في ملف root.js الذي تم تكوينه في وقت سابق،

167
00:12:51,745 --> 00:12:55,605
رأيت أن جهاز التوجيه تم تكوينه بحيث،

168
00:12:55,605 --> 00:13:00,955
عند الوصول إلى الخط المائل الذي هو المجلد الجذر من الخوادم الخاصة بك،

169
00:13:00,955 --> 00:13:05,170
ثم أنها سوف تخدم ببساطة حتى الخوادم حالة LoopBack وبالفعل،

170
00:13:05,170 --> 00:13:08,175
هذا ما رأيناه لدينا خادم LoopBack خدمة

171
00:13:08,175 --> 00:13:15,055
وقت التشغيل وآخر وقت إعادة تشغيل لخادمنا.

172
00:13:15,055 --> 00:13:16,590
نحن لا نريد أن نفعل

173
00:13:16,590 --> 00:13:20,920
ذلك، بدلاً من ذلك نريد أن يكون خادم LoopBack قادرًا على استخدام كل ما

174
00:13:20,920 --> 00:13:25,390
نضعه في مجلد العميل كمجلد عمومي وبالتالي

175
00:13:25,390 --> 00:13:27,900
يمكن نشر أي تطبيق عميل إلى

176
00:13:27,900 --> 00:13:31,590
مجلد العميل الخاص بخادم LoopBack الخاص بي ويجب

177
00:13:31,590 --> 00:13:39,250
الوصول إليه عند الوصول إلى LoopBack في نقاط نهاية الخط المائل القياسية الخاصة به.

178
00:13:39,250 --> 00:13:43,940
لذلك، هذا هو جذر مجلد الخادم.

179
00:13:43,940 --> 00:13:46,890
لذلك، للقيام بذلك، أول شيء عليك القيام به هو

180
00:13:46,890 --> 00:13:50,560
تغيير اسم ملفات root.js هذا إلى الجذر.

181
00:13:50,560 --> 00:13:53,245
على سبيل المثال، يمكنك ببساطة إعادة تسمية ذلك إلى

182
00:13:53,245 --> 00:13:56,440
root.jbaed أو يمكنك فقط حذف هذا الملف.

183
00:13:56,440 --> 00:14:00,325
لن تكون هناك حاجة إلى هذا الملف في هذا الإصدار من خادم LoopBack الخاص بي.

184
00:14:00,325 --> 00:14:01,840
الآن، ليس ذلك فقط،

185
00:14:01,840 --> 00:14:08,265
الجزء الثاني الذي تحتاج إلى إعادة تكوينه هو الذهاب إلى ملف middleware.json هنا.

186
00:14:08,265 --> 00:14:10,230
ملف midleware.json.

187
00:14:10,230 --> 00:14:12,170
في ملف midleware.json،

188
00:14:12,170 --> 00:14:14,605
إذا قمت بالتمرير لأسفل،

189
00:14:14,605 --> 00:14:17,195
سترى أنه هنا، في

190
00:14:17,195 --> 00:14:23,755
الأصل سيحتوي هذا ببساطة على ملفات: ثم هدفين فارغ هنا.

191
00:14:23,755 --> 00:14:26,505
الآن، في هذا الدعامة الفارغة هنا،

192
00:14:26,505 --> 00:14:28,420
ما عليك سوى إضافة هذا الرمز هنا،

193
00:14:28,420 --> 00:14:36,430
والذي يقول الاسترجاع #static وتقول params$!.. /العميل.

194
00:14:36,820 --> 00:14:41,025
لذا، سيشير هذا إلى خادم LoopBack الخاص بي إلى

195
00:14:41,025 --> 00:14:45,670
أنه

196
00:14:45,670 --> 00:14:53,800
يجب استخدام مجلد العميل المتوفر هنا كمجلد عمومي ثابت لخادم LoopBack الخاص بي.

197
00:14:53,800 --> 00:14:58,790
لذلك، يمكن الوصول إلى أي شيء وضع في مجلد العميل من الخادم الخاص بي.

198
00:14:58,790 --> 00:15:05,725
لذلك، هذا هو التغيير الإضافي الذي تحتاج إلى القيام به إلى ملف middleware.json.

199
00:15:05,725 --> 00:15:08,235
لذلك، بمجرد إجراء هذين التغييرين،

200
00:15:08,235 --> 00:15:15,030
سيتم تكوين خادم LoopBack الخاص بك لخدمة البيانات بما

201
00:15:15,030 --> 00:15:17,940
في ذلك الصور التي ستقوم بوضعها في

202
00:15:17,940 --> 00:15:22,575
المجلد الفرعي للصور تحت مجلد العميل هنا.

203
00:15:22,575 --> 00:15:28,475
لذا، تأكد من نسخ الصور إلى مجلد العميل هنا والثاني هو

204
00:15:28,475 --> 00:15:34,625
الانتقال إلى ملف middleware.json في مجلد الخادم،

205
00:15:34,625 --> 00:15:37,265
ثم قم بتحديث هذا الجزء.

206
00:15:37,265 --> 00:15:43,860
وبمجرد القيام بذلك، يمكن الوصول إلى هذه الصور ببساطة عن طريق الوصول إلى

207
00:15:43,860 --> 00:15:48,760
/صور/اسم ملف الصورة للوصول إلى

208
00:15:48,760 --> 00:15:54,120
هذه الصور لأن أطباقنا

209
00:15:54,120 --> 00:16:00,390
، والقادة، والعروض الترويجية تتطلب ملفات الصور

210
00:16:00,390 --> 00:16:03,525
هذه وبالتالي سوف تكون متاحة لنا من

211
00:16:03,525 --> 00:16:08,080
خادم LoopBack وأيضا كل ما تضعه في مجلد العميل.

212
00:16:08,080 --> 00:16:14,050
على سبيل المثال، يمكنك إعداد مجلد التوزيع

213
00:16:14,050 --> 00:16:16,920
لتطبيق Angular الخاص بك وببساطة نسخ

214
00:16:16,920 --> 00:16:21,025
محتويات مجلد التوزيع بالكامل إلى مجلد العميل هنا،

215
00:16:21,025 --> 00:16:25,220
ثم إذا قمت بالوصول إلى خادم LoopBack في

216
00:16:25,220 --> 00:16:30,850
نقطة النهاية الجذر القياسية،

217
00:16:30,850 --> 00:16:37,565
فسيكون تطبيق Angular الخاص بك يتم تقديمها تلقائيًا بواسطة خادم LoopBack الخاص بك.

218
00:16:37,565 --> 00:16:43,950
لذا، هذه هي التغييرات التي تحتاج إلى إجرائها على خادم LoopBack الخاص بك.

219
00:16:43,950 --> 00:16:49,700
بالطبع، يجب أن تكون فضوليًا حول كيفية إنشاء SDK هذا

220
00:16:49,700 --> 00:16:52,820
بالضبط، حيث يتم تثبيت SDK هذا بالضبط وكيف يمكنني بالفعل

221
00:16:52,820 --> 00:16:56,045
الاستفادة منه داخل تطبيق Angular الخاص بي.

222
00:16:56,045 --> 00:17:01,955
لذلك، للقيام بذلك، دعونا نذهب إلى تطبيق Angular الخاص بنا وفي المجلد المصدر،

223
00:17:01,955 --> 00:17:04,375
تحت مجلد التطبيق المصدر،

224
00:17:04,375 --> 00:17:06,565
والآن عند فتح المجلد المشترك،

225
00:17:06,565 --> 00:17:13,235
سترى أن هناك مجلد فرعي هنا اسمه SDK وداخل هذا المجلد الفرعي SDK،

226
00:17:13,235 --> 00:17:16,365
ستجد مجموعة كاملة من الملفات هنا،

227
00:17:16,365 --> 00:17:22,565
lb.config.ts، index.ts وداخل مآخذ التخزين

228
00:17:22,565 --> 00:17:25,330
والخدمات وداخل الخدمة،

229
00:17:25,330 --> 00:17:28,255
لديك خدمات مخصصة وخدمات أساسية هنا،

230
00:17:28,255 --> 00:17:31,960
والنماذج المختلفة التي يتم نشرها هنا.

231
00:17:31,960 --> 00:17:36,630
تحتوي النماذج في الواقع على هياكل نموذجية

232
00:17:36,630 --> 00:17:42,605
لنماذجنا المختلفة التي نقوم بتنفيذها.

233
00:17:42,605 --> 00:17:45,280
الآن، هذا هو SDK LoopBack.

234
00:17:45,280 --> 00:17:49,430
تم إنشاء هذا الرمز تلقائيًا لك، وإذا كنت تريد ذلك،

235
00:17:49,430 --> 00:17:52,800
يمكنك ببساطة الدخول ثم

236
00:17:52,800 --> 00:17:57,030
المرور عبر هذه الملفات لمعرفة ما هو متاح هناك.

237
00:17:57,030 --> 00:18:00,560
تأكد من عدم تعديل أي من الملفات الموجودة في

238
00:18:00,560 --> 00:18:02,940
المجلد الفرعي SDK هذا لأن هذا

239
00:18:02,940 --> 00:18:06,040
تم إنشاؤه تلقائيًا من قِبل Loopback SDK Builder،

240
00:18:06,040 --> 00:18:10,355
وسيحتوي ذلك على كل شيء تم تكوينه بحيث

241
00:18:10,355 --> 00:18:15,125
يمكن الوصول إلى خادم LoopBack الخاص بك من تطبيق Angular الخاص بك.

242
00:18:15,125 --> 00:18:19,240
الخدمات التي سأستخدمها كلها متاحة هنا

243
00:18:19,240 --> 00:18:21,630
الآن، كيف نستفيد من هذا؟

244
00:18:21,630 --> 00:18:25,600
لذلك، لمساعدتك على فهم كيفية الاستفادة من هذا،

245
00:18:25,600 --> 00:18:33,725
دعونا زيارة مكون المنزل لدينا ومن ثم نرى كيف يتم تحديث المكون الرئيسي الآن.

246
00:18:33,725 --> 00:18:35,855
لذلك، عندما تذهب إلى مكون المنزل،

247
00:18:35,855 --> 00:18:44,125
ستلاحظ أنني الآن استيراد الأطباق من.. /مشاركة/SDK/نماذج.

248
00:18:44,125 --> 00:18:47,950
لذا، هذه هي النماذج التي يتم تصديرها تلقائيًا إلى

249
00:18:47,950 --> 00:18:52,390
SDK بواسطة منشئ Loopback SDK الخاص بي.

250
00:18:52,390 --> 00:18:57,010
لذلك، هذا هو المكان الذي سيتم تعريف نموذج أطباقي هناك.

251
00:18:57,010 --> 00:18:59,450
لذا، أنا فقط ذاهب إلى الاستفادة من نموذج الأطباق.

252
00:18:59,450 --> 00:19:06,290
وبالمثل، فإن الخدمة نفسها متوفرة مثل هذا DischeSAPI،

253
00:19:06,290 --> 00:19:15,220
كما ترون هنا وهذا DischeSapi هو في.. /مشاركة/sdk/services المجلد هنا.

254
00:19:15,220 --> 00:19:18,280
وبالمثل، فإن الترقيات والترقيات API,

255
00:19:18,280 --> 00:19:20,110
وقادة وقادة API.

256
00:19:20,110 --> 00:19:24,750
لذلك، يتم إنشاء كل هذه تلقائيًا بالنسبة لي بواسطة منشئ Loopback SDK.

257
00:19:24,750 --> 00:19:26,720
الآن، ثم تذهب إلى التعليمات البرمجية،

258
00:19:26,720 --> 00:19:31,045
ستلاحظ الآن أنني سوف أعلن الطبق كأطباق،

259
00:19:31,045 --> 00:19:35,455
والترويج والترقيات، والزعيم ك/قادة.

260
00:19:35,455 --> 00:19:39,955
هذه النماذج الثلاثة هي النماذج التي يتم تصديرها بواسطة منشئ SDK Loopback.

261
00:19:39,955 --> 00:19:44,905
لاحظ أيضًا كيف قمت بإعادة تكوين الخدمات الثلاث هنا.

262
00:19:44,905 --> 00:19:48,090
الآن، تشير خدمة الطبق إلى واجهة برمجة التطبيقات للأطباق،

263
00:19:48,090 --> 00:19:50,950
وخدمات الترويج التي تشير إلى العروض الترويجية API،

264
00:19:50,950 --> 00:19:55,825
والخدمة الرائدة لواجهة برمجة التطبيقات لقادة API،

265
00:19:55,825 --> 00:19:59,980
وتلاحظ أيضًا كيف يمكنني الوصول إلى خدمة الطبق هنا.

266
00:19:59,980 --> 00:20:06,290
لذلك، سأقول أن خدمة الطبق هذه تجد واحدة وحيث ظهرت مساوية لصحيح.

267
00:20:06,290 --> 00:20:14,539
لذا، هذا هو المكان الذي تتذكر فيه أنه في مستكشف واجهة برمجة تطبيقات LoopBack الخاص بي،

268
00:20:14,539 --> 00:20:20,405
كنت قد كتبت هذا في الفلتر هناك،

269
00:20:20,405 --> 00:20:23,490
ثم حاولت العثور على الأطباق هناك.

270
00:20:23,490 --> 00:20:27,260
لذا، هذا هو بالضبط ما أفعله هنا أيضًا في شفرتي هنا.

271
00:20:27,260 --> 00:20:30,140
لذلك، هذا فيندون، ثم الموردة مع هذا،

272
00:20:30,140 --> 00:20:34,140
سوف تجد عنصر واحد ثم يعود ذلك هنا،

273
00:20:34,140 --> 00:20:38,240
وبعد ذلك أنا تعيين كل إلى هذا الطبق هنا

274
00:20:38,240 --> 00:20:43,510
وبقية بلدي تطبيق الزاوي يعمل بالضبط بنفس الطريقة كما كان من قبل.

275
00:20:43,510 --> 00:20:47,490
الآن، لاحظ أيضًا أنه في المُنشئ،

276
00:20:47,490 --> 00:20:52,945
لاحظ كيف قمت بتكوين هذا يسمى تهيئة LoopBack.

277
00:20:52,945 --> 00:20:59,685
الآن، لإجراء تهيئة LoopBack في كل مكون تستخدمه،

278
00:20:59,685 --> 00:21:09,280
تحتاج إلى استيراد هذا التكوين LoopBack من مجلد SDK المشترك هنا وأيضًا،

279
00:21:09,280 --> 00:21:13,790
إصدار واجهة برمجة التطبيقات هذا الذي أعلنه.

280
00:21:14,410 --> 00:21:19,340
لقد قمت بتحديث هذا الملف baseurl.ts.

281
00:21:19,340 --> 00:21:21,720
حتى في مجلد عنوان URL الأساسي،

282
00:21:21,720 --> 00:21:31,330
لقد قمت بتحديث هذا إلى اسمي القولون جهاز الكمبيوتر الخاص بي 3،000.

283
00:21:31,330 --> 00:21:35,510
لذلك، هذا واحد تأكد من استبدال هذا مع

284
00:21:35,510 --> 00:21:42,460
عنوان إب أو اسم الكمبيوتر المحدد الذي كنت قيد التشغيل.

285
00:21:42,460 --> 00:21:50,350
لذلك، تأكد من تحديث عنوان URL الأساسي هنا وإصدار واجهة برمجة التطبيقات هنا هو ببساطة سلسلة.

286
00:21:50,350 --> 00:21:52,560
قول واجهة برمجة التطبيقات هنا.

287
00:21:52,560 --> 00:21:58,790
لذلك سيتم استخدام هذين في ملف component.ts منزلي.

288
00:21:58,790 --> 00:22:02,560
لذلك أنا استيراد هذا الإصدار أبي هنا و لوباباككونفيغ.

289
00:22:02,560 --> 00:22:05,475
و باسيورل أنا بالفعل

290
00:22:05,475 --> 00:22:10,640
حقن في بلدي منشئ هنا بحيث هو متاح بالفعل هنا،

291
00:22:10,640 --> 00:22:14,890
ومن ثم في بلدي منشئ مكون بلدي،

292
00:22:14,890 --> 00:22:19,440
وأنا بحاجة إلى القيام بهذه العبارات اثنين هنا.

293
00:22:19,440 --> 00:22:22,190
لذا، سنقول، «LoopBack تعيين عنوان URL

294
00:22:22,190 --> 00:22:25,120
الأساسي إلى عنوان URL الأساسي» وهو نفس العنوان الذي قمت

295
00:22:25,120 --> 00:22:31,950
بحقنه هناك ثم ننظر مرة أخرى إلى إصدار واجهة برمجة التطبيقات إلى إصدار واجهة برمجة التطبيقات هنا.

296
00:22:31,950 --> 00:22:36,695
لذلك هذين أحتاج إلى تكوين في مكون منزلي

297
00:22:36,695 --> 00:22:41,815
وأيضا أي مكون آخر حيث يمكنني الوصول إلى خادم LoopBack الخاص بي، ولست

298
00:22:41,815 --> 00:22:43,425
بحاجة إلى تكوين هذا.

299
00:22:43,425 --> 00:22:48,060
الآن، يقترح منشئ LoopBack SDK أننا بحاجة إلى

300
00:22:48,060 --> 00:22:53,880
القيام بذلك في كل واحد من المكونات هنا.

301
00:22:53,880 --> 00:23:01,775
أيضا، ستلاحظ أنه إذا ذهبت إلى ملف module.ts التطبيق في ملف module.ts التطبيق،

302
00:23:01,775 --> 00:23:08,610
فقد أزلت جميع مدخلات جميع الخدمات الأخرى وبدلاً من ذلك أقوم

303
00:23:08,610 --> 00:23:15,480
باستيراد هذا هنا يسمى وحدة متصفح SDK من مشاركة SDK هنا.

304
00:23:15,480 --> 00:23:18,110
وحدة متصفح SDK هنا،

305
00:23:18,110 --> 00:23:24,075
وإذا ذهبت إلى المدخلات هنا،

306
00:23:24,075 --> 00:23:31,635
سترى أنني قمت بتكوين وحدة متصفح SDK هذه. Forroot هنا في المدخلات.

307
00:23:31,635 --> 00:23:38,180
لذلك يتم تكوين وحدة متصفح SDK هذه تلقائيًا عندما نبني LoopBack SDK الخاصة بنا

308
00:23:38,180 --> 00:23:41,000
ونحتاج فقط إلى استيراد ذلك إلى

309
00:23:41,000 --> 00:23:44,705
ملف module.ts الخاص بنا ونلاحظ أيضًا أن مقدمي الخدمة،

310
00:23:44,705 --> 00:23:46,895
هذا هو المكان الذي قمنا بتكوين خدماتنا،

311
00:23:46,895 --> 00:23:49,540
لا يحتوي على أي من الخدمات بعد الآن لأن ذلك

312
00:23:49,540 --> 00:23:52,745
كجزء من SDK LoopBack الخاص بي،

313
00:23:52,745 --> 00:23:56,715
لذا فإن الشيء الوحيد الذي أقوم بتوفيره هو عنوان URL الأساسي هنا.

314
00:23:56,715 --> 00:24:02,510
لقد أزلت جميع تلك الأخرى من ملف module.ts التطبيق الخاص بي هنا.

315
00:24:03,180 --> 00:24:07,325
لذا، هذا تغيير واحد ستلاحظه.

316
00:24:07,325 --> 00:24:11,720
وبالمثل، إذا ذهبت إلى ملف حول component.ts، ملف

317
00:24:11,720 --> 00:24:14,740
dishDetaille

318
00:24:14,740 --> 00:24:19,740
component.ts، ملف component.ts المفضل وكذلك ملف مكون القائمة.

319
00:24:19,740 --> 00:24:22,420
لذلك دعونا ننظر إلى ملف.ts مكون القائمة.

320
00:24:22,420 --> 00:24:25,190
لذلك سترى هنا مرة أخرى أنا استيراد هذا

321
00:24:25,190 --> 00:24:29,370
أربعة ثم في عنصر القائمة بلدي أقول،

322
00:24:29,370 --> 00:24:33,075
أطباق خدمات طبق أبي ومن ثم أنا

323
00:24:33,075 --> 00:24:37,400
تكوين لوبباككونفيغ مجموعة باسيورل سيتابي الإصدار.

324
00:24:37,400 --> 00:24:42,550
لقد فعلت ذلك بالفعل في مستودع Angular الذي قدمته

325
00:24:42,550 --> 00:24:49,235
لك للتطبيق الزاوي لخادم

326
00:24:49,235 --> 00:24:54,220
LoopBack، وسترى أيضًا أنني قمت ببعض التعديلات هنا.

327
00:24:54,220 --> 00:25:00,225
حتى إذا كنت ترغب في العثور على جميع العناصر من خدمة الطبق لذلك كنت أقول ببساطة

328
00:25:00,225 --> 00:25:03,335
dishService.Find والتي سوف يعود

329
00:25:03,335 --> 00:25:09,100
جميع الأطباق التي هي هناك في بلدي خادم الاسترجاع هنا.

330
00:25:09,100 --> 00:25:11,425
إذاً هذا ما أسترده هنا

331
00:25:11,425 --> 00:25:15,435
وبالتالي فإن بقية التعليمات البرمجية يجب أن تبدو مألوفة هنا إلا أن هنا أدعو

332
00:25:15,435 --> 00:25:20,010
الأطباق يساوي الأطباق ومجموعة من الأطباق هنا.

333
00:25:20,010 --> 00:25:22,995
لذلك هذا هو التغيير الذي ستراه في مكون القائمة.

334
00:25:22,995 --> 00:25:28,810
الآن، يجب أن تتساءل كيف تعمل مصادقة المستخدم في هذه الحالة.

335
00:25:28,810 --> 00:25:32,275
لمصادقة المستخدم، اسمحوا لي أن ألفت انتباهكم إلى

336
00:25:32,275 --> 00:25:35,800
مكانين حيث يمكنني الاستفادة من مصادقة المستخدم.

337
00:25:35,800 --> 00:25:38,735
دعونا أولا انتقل إلى مكون تسجيل الدخول.

338
00:25:38,735 --> 00:25:40,990
لذا، في مكون تسجيل الدخول،

339
00:25:40,990 --> 00:25:46,030
سترى أنه في مكون تسجيل الدخول أقوم باستيراد هذين الاثنين هنا،

340
00:25:46,030 --> 00:25:49,970
واجهة برمجة تطبيقات العميل وهي الخدمات التي تسمح لي بإجراء

341
00:25:49,970 --> 00:25:54,245
مصادقة المستخدم وتسجيل الدخول وتسجيل الخروج،

342
00:25:54,245 --> 00:25:57,430
وكذلك أقوم باستيراد نموذج العميل

343
00:25:57,430 --> 00:26:00,995
والوصول إلى نموذج الرمز المميز في مكون تسجيل الدخول،

344
00:26:00,995 --> 00:26:06,320
سترى أنه من خلال خدمة Auth الآن ليست سوى واجهة برمجة تطبيقات العميل،

345
00:26:06,730 --> 00:26:15,670
وستلاحظ أيضًا أنه في مكون تسجيل الدخول عند إرسال نموذج تسجيل الدخول،

346
00:26:15,670 --> 00:26:19,530
أدعو هذا authService.Login.

347
00:26:19,530 --> 00:26:24,655
وظيفة تسجيل الدخول هذه المتوفرة من خلال API العميل.

348
00:26:24,655 --> 00:26:30,775
أذكر عندما حاولنا تسجيل الدخول باستخدام مستكشف واجهة برمجة تطبيقات LoopBack rest،

349
00:26:30,775 --> 00:26:36,500
كنا نستخدم نقطة نهاية العميل لتسجيل الدخول إلى النظام.

350
00:26:36,500 --> 00:26:39,310
لذلك هذا هو بالضبط ما أفعله في التعليمات البرمجية هنا.

351
00:26:39,310 --> 00:26:43,335
لذلك سنقول هذا authService.Login وهنا ترى

352
00:26:43,335 --> 00:26:47,930
أنه يأخذ هذه المعلمات المجانية هنا،

353
00:26:47,930 --> 00:26:55,425
واسم المستخدم وكلمة المرور ككائن جافا سكريبت الأول هنا،

354
00:26:55,425 --> 00:27:01,755
وبعد ذلك أنا أيضا تحديد هذا user.dember.،.

355
00:27:01,755 --> 00:27:08,310
تذكر هو العلم من مربع الاختيار تذكرني الذي لدينا في حوار مكونات تسجيل الدخول هناك.

356
00:27:08,310 --> 00:27:12,180
لذلك، عندما يتحقق المستخدم من أنه في معلومات المستخدم سوف

357
00:27:12,180 --> 00:27:16,095
تستمر تلقائيا من قبل سك.

358
00:27:16,095 --> 00:27:18,945
خدمة المصادقة التي يتم توفيرها داخل SDK.

359
00:27:18,945 --> 00:27:21,275
لذا، ترى الآن أنني لست بحاجة إلى

360
00:27:21,275 --> 00:27:24,290
تنفيذ أي خدمة تخويل

361
00:27:24,290 --> 00:27:26,940
متاحة تلقائيًا لي من خلال

362
00:27:26,940 --> 00:27:31,565
واجهة برمجة تطبيقات العميل المتوفرة كخدمة هنا.

363
00:27:31,565 --> 00:27:35,320
لذلك، هذه هي الطريقة التي أقوم بتسجيل دخول المستخدم هنا،

364
00:27:35,320 --> 00:27:38,275
وعندما يقوم المستخدم بتسجيل الدخول في هذا سيعود

365
00:27:38,275 --> 00:27:45,015
كائن جافا سكريبت ومن كائن جافا سكريبت أحصل على

366
00:27:45,015 --> 00:27:50,930
res.user.. المستخدم يزود معلومات المستخدم بالنسبة لي وأنا

367
00:27:50,930 --> 00:27:57,355
ببساطة إرسال هذا إلى بلدي هيدركومبوننت هنا.

368
00:27:57,355 --> 00:27:59,860
حتى الذهاب إلى هيدركومبوننت.

369
00:27:59,860 --> 00:28:02,235
لذا دعنا نذهب إلى مكون الرأس،

370
00:28:02,235 --> 00:28:04,620
وفي ملف HeaderComponent.ts،

371
00:28:04,620 --> 00:28:09,670
سترى أنه مرة أخرى هنا أقوم باستيراد واجهة برمجة تطبيقات

372
00:28:09,670 --> 00:28:18,115
العميل والعميل هنا، وستلاحظ أيضًا أنه في واجهة برمجة تطبيقات العميل،

373
00:28:18,115 --> 00:28:23,830
أحدد هنا ملاحظة أنني أقول

374
00:28:23,830 --> 00:28:29,880
هذا العميل هو هذا AuthService جيتكاشيدكرنت.

375
00:28:29,880 --> 00:28:34,190
لذلك إذا تم تأمين المستخدم في

376
00:28:34,190 --> 00:28:38,660
المستخدمين المسجلين حاليا يتم إرسال معلومات في AuthService التي ليست سوى واجهة برمجة تطبيقات العميل.

377
00:28:38,660 --> 00:28:43,775
لذلك، عندما أدعو هذا getCachedCurrent هذا سيعود المستخدم الذي تم تسجيل دخوله حاليًا.

378
00:28:43,775 --> 00:28:45,570
إذا لم يتم تسجيل دخول أي مستخدم،

379
00:28:45,570 --> 00:28:46,820
سيؤدي ذلك إلى إرجاع قيمة فارغة.

380
00:28:46,820 --> 00:28:51,865
لذلك هذه إحدى الطرق التي يمكنني التحقق منها لمعرفة ما إذا كان المستخدم قد قام بتسجيل الدخول حاليًا أم لا.

381
00:28:51,865 --> 00:28:55,690
لذا، إذا تم تسجيل دخول المستخدم حاليًا،

382
00:28:55,690 --> 00:28:59,740
فسيحصل هذا العميل على معلومات حول العميل الذي تم تحميله.

383
00:28:59,740 --> 00:29:02,385
معلومات العميل بما في ذلك الاسم الأول واسم العائلة

384
00:29:02,385 --> 00:29:11,190
والبريد الإلكتروني وملف تعريف المستخدم الآخر ستكون متاحة لهذا الكائن.

385
00:29:11,190 --> 00:29:16,080
لذلك، هنا أنا التحقق للتأكد من أن هذا.customer ليست فارغة.

386
00:29:16,080 --> 00:29:19,265
إذا لم يكن فارغًا، فسأحفظ اسم المستخدم إلى

387
00:29:19,265 --> 00:29:23,100
هذا.customer.username وبهذه الطريقة عند

388
00:29:23,100 --> 00:29:26,705
تعيين اسم المستخدم،

389
00:29:26,705 --> 00:29:31,690
فسيعكس رأسي في شريط الأدوات في HeaderComponent اسم المستخدم هناك.

390
00:29:31,690 --> 00:29:37,820
الآن، لتسجيل الخروج من المستخدم كل ما أفعله هو أنا تعيين اسم المستخدم

391
00:29:37,820 --> 00:29:45,665
ومتغيرات العميل إلى فارغة ثم أنا ببساطة دعا authService.log،

392
00:29:45,665 --> 00:29:51,075
أوثسيرفيسز هو كوستومرابي.لوغوت، وهذا هو كيف يمكنني تسجيل الخروج من المستخدم.

393
00:29:51,075 --> 00:29:52,760
عندما يقوم المستخدم بتسجيل الخروج،

394
00:29:52,760 --> 00:29:55,750
يتم تدمير بيانات الاعتماد الخاصة به.

395
00:29:55,750 --> 00:30:02,360
الآن، يتم الاعتناء بكل هذا تلقائيًا من خلال خدمة واجهة برمجة تطبيقات العملاء

396
00:30:02,360 --> 00:30:09,075
المتوفرة في SDK LoopBack الذي قمت بإنشائه هناك للتو.

397
00:30:09,075 --> 00:30:13,830
لذلك، لاحظت أن كيف يقوم LoopBack SDK Builder ببناء

398
00:30:13,830 --> 00:30:19,430
الخدمات والنماذج وكل ما أحتاجه وفي تطبيق Angular الخاص بي،

399
00:30:19,430 --> 00:30:22,360
أنا فقط أقوم باستيراد تلك ثم الاستفادة

400
00:30:22,360 --> 00:30:25,450
منها لتكوين تطبيق Angular الخاص بي.

401
00:30:25,450 --> 00:30:27,065
لذا، بمجرد إنشاء

402
00:30:27,065 --> 00:30:32,510
SDK LoopBack باستخدام LoopBack SDK Builder، يتم

403
00:30:32,510 --> 00:30:40,545
تنفيذ المكونات وقوالب العرض الخاصة بهم التي تجلس كل ما تبقى.

404
00:30:40,545 --> 00:30:45,480
يتم بناء الخدمات تلقائيا بالنسبة لي من قبل لوباك سك منشئ،

405
00:30:45,480 --> 00:30:49,160
يتم بناء النماذج تلقائيا بالنسبة لي وكل ما أحتاج إلى القيام به هو

406
00:30:49,160 --> 00:30:54,060
مجرد استيراد تلك إلى جميع المكونات حيث أحتاج إلى الاستفادة منها.

407
00:30:54,060 --> 00:31:01,775
لذا، لاحظ كيف تم تحديث هذا التطبيق Angular للاستفادة من SDK LoopBack.

408
00:31:01,775 --> 00:31:06,520
الآن إذا كنت تريد المزيد من المعلومات حول كيفية استخدام LoopBack SDK،

409
00:31:06,520 --> 00:31:11,465
فيمكنك أيضًا التحقق من الوثائق التي يوفرها LoopBack SDK Builder.

410
00:31:11,465 --> 00:31:14,425
لذلك، إذا ذهبت إلى منشئ LoopBack SDK،

411
00:31:14,425 --> 00:31:19,440
يتوفر رابط لهذا في الموارد الإضافية لهذا الدرس،

412
00:31:19,440 --> 00:31:21,820
وفي منشئ LoopBack SDK،

413
00:31:21,820 --> 00:31:24,930
سيكون لديك جميع المعلومات التي تحتاجها

414
00:31:24,930 --> 00:31:31,830
للاستفادة من SDK الذي تم إنشاؤه بواسطة منشئ LoopBack SDK.

415
00:31:31,830 --> 00:31:34,205
لذلك إذا ذهبت إلى وثائق ويكي.

416
00:31:34,205 --> 00:31:39,830
في وثائق ويكي الكثير من الشرح لكيفية استخدام منشئ LoopBack SDK

417
00:31:39,830 --> 00:31:46,050
أو SDK الذي تم إنشاؤه بواسطة منشئ LoopBack SDK معطى هنا.

418
00:31:46,050 --> 00:31:49,460
لذا، ذهبت للتو من خلال هذه الوثائق لمعرفة كيفية

419
00:31:49,460 --> 00:31:53,555
الاستفادة من SDK الذي تم إنشاؤه بواسطة LoopBack SDK Builder،

420
00:31:53,555 --> 00:31:57,420
ثم إعادة تكوين تطبيق Angular الخاص بي للاستفادة من

421
00:31:57,420 --> 00:32:02,090
ذلك للتفاعل مع خادم LoopBack الخاص بي.

422
00:32:02,090 --> 00:32:06,715
لذلك مع هذا، قمت بإظهار ذلك بسرعة

423
00:32:06,715 --> 00:32:11,140
لك كيف يمكنك بناء تطبيق Angular الخاص بك

424
00:32:11,140 --> 00:32:15,270
والاستفادة من SDK الذي تم إنشاؤه بواسطة LoopBack SDK Builder من

425
00:32:15,270 --> 00:32:20,365
أجل الوصول إلى خادم LoopBack الخاص بك من داخل تطبيق Angular الخاص بك.

426
00:32:20,365 --> 00:32:26,210
سيكون نهج مماثل مناسبًا أيضًا للتطبيق الأيوني الخاص بك.

427
00:32:26,210 --> 00:32:31,610
بالنسبة لتطبيق Native Script، يمكنك إنشاء SDK باستخدام NG2 الأصلي في

428
00:32:31,610 --> 00:32:37,835
سطر الأوامر بدلاً من ويب NG2 كما استخدمناه عند إنشاء SDK هذا.

429
00:32:37,835 --> 00:32:41,890
مع هذه المقدمة السريعة لكيفية الاستفادة من

430
00:32:41,890 --> 00:32:44,815
LoopBack SDK Builder لبناء SDK ومن

431
00:32:44,815 --> 00:32:47,980
ثم الاستفادة منه في تطبيق Angular الخاص بنا،

432
00:32:47,980 --> 00:32:52,300
فإنها تأتي إلى نهاية هذا التمرين.