1
00:00:03,609 --> 00:00:09,108
اسمحوا لي الآن أن أقدم لكم لمحة موجزة عن تطبيقات الصفحة الواحدة.

2
00:00:09,108 --> 00:00:11,415
ما هي تطبيقات الصفحة الواحدة؟

3
00:00:11,415 --> 00:00:16,080
كيف تختلف عن مواقع الويب التي قد تكون قد طورتها في وقت سابق؟

4
00:00:16,080 --> 00:00:21,405
على سبيل المثال، موقع الويب الذي قمت بتطويره في الدورة السابقة لهذا التخصص،

5
00:00:21,405 --> 00:00:26,854
حيث كان لديك صفحات متعددة - لماذا تعتبر تطبيقات الصفحة الواحدة مثيرة للاهتمام

6
00:00:26,854 --> 00:00:29,300
وما الذي يجب أن تكون على علم به

7
00:00:29,300 --> 00:00:32,548
عند تصميم تطبيقات الصفحة الواحدة؟

8
00:00:32,548 --> 00:00:37,606
ليس المقصود من هذه المحاضرة أن تكون رسالة كاملة حول تطبيقات الصفحة الواحدة،

9
00:00:37,606 --> 00:00:40,159
ولكن في الحقيقة، تعطيك ما يكفي من مقدمة

10
00:00:40,159 --> 00:00:44,375
لبدء التفكير في تطبيقات الصفحة الواحدة،

11
00:00:44,375 --> 00:00:47,509
وخاصة في سياق الزاوي.

12
00:00:47,509 --> 00:00:53,409
قبل أن نفهم تطبيقات الصفحة الواحدة، دعونا نأخذ خطوة إلى الوراء

13
00:00:53,409 --> 00:00:56,335
وننظر في كيفية عمل المواقع التقليدية.

14
00:00:56,335 --> 00:00:59,695
في المواقع التقليدية، حتى الآن - إذا قمت بزيارة موقع ويب،

15
00:00:59,695 --> 00:01:02,774
قد تطلب الوصول إلى صفحة معينة.

16
00:01:02,774 --> 00:01:06,691
على سبيل المثال، سوف تطلب صفحة index.html

17
00:01:06,691 --> 00:01:10,600
عند الانتقال إلى موقع الويب،

18
00:01:10,600 --> 00:01:12,879
إما عن طريق النقر على رابط

19
00:01:12,879 --> 00:01:19,855
أو عن طريق كتابة عنوان الموقع في شريط العناوين في متصفحك.

20
00:01:19,855 --> 00:01:23,950
لذا عادة، تكون صفحة index.html هي أول صفحة

21
00:01:23,950 --> 00:01:27,140
تجلبها عند زيارة موقع ويب.

22
00:01:27,140 --> 00:01:30,894
وعندما يتم تنزيل الصفحة من الخادم إلى متصفحك -

23
00:01:30,894 --> 00:01:33,989
ومن ثم سيتم عرض هذا في متصفحك.

24
00:01:33,989 --> 00:01:39,109
الآن قد يتضمن هذا ليس فقط صفحة index.html، ولكن أيضا الموارد الأخرى

25
00:01:39,109 --> 00:01:44,224
التي قد تكون هناك حاجة ليتم تحميلها من أجل بناء صفحة index.html.

26
00:01:44,224 --> 00:01:49,239
في هذه الحالة، قد تتطلب صفحة index.html موارد إضافية،

27
00:01:49,239 --> 00:01:57,935
مثل الصور أو البيانات، ليتم تحميلها قبل إنشاء صفحة الفهرس.

28
00:01:57,935 --> 00:02:02,980
ولكن الآن، في وقت لاحق، إذا انتقلت إلى صفحة أخرى في موقع الويب الخاص بك

29
00:02:02,980 --> 00:02:07,073
- على سبيل المثال، صفحة أخرى مثل contactus.html،

30
00:02:07,073 --> 00:02:14,259
سيؤدي ذلك إلى إرسال متصفحك طلبًا آخر

31
00:02:14,259 --> 00:02:16,930
إلى الخادم لجلب تلك الصفحة الثانية.

32
00:02:16,930 --> 00:02:19,960
لذلك سيتم بدء طلب كامل إلى الخادم

33
00:02:19,960 --> 00:02:22,479
وجميع الموارد اللازمة لبناء

34
00:02:22,479 --> 00:02:27,560
الصفحة الثانية يجب تحميلها من الخادم.

35
00:02:27,560 --> 00:02:30,745
لذلك أثناء الانتقال من صفحة إلى صفحة أخرى،

36
00:02:30,745 --> 00:02:34,819
فإنه يتضمن كل صفحة جديدة ليتم تحميلها من الخادم

37
00:02:34,819 --> 00:02:37,705
وهذا ينطوي على وقت ذهابا وإيابا

38
00:02:37,705 --> 00:02:42,099
إلى الخادم لجلب جميع الموارد المطلوبة لبناء تلك الصفحات.

39
00:02:42,099 --> 00:02:45,025
الآن تخيل أن موقع الويب الخاص بك يحتوي على العديد من الصفحات.

40
00:02:45,025 --> 00:02:48,310
ثم من الواضح أن كل قطعة واحدة

41
00:02:48,310 --> 00:02:54,025
تتطلب صفحة الويب الخاصة بك لتقديم سوف تتطلب وقت رحلة كاملة ذهابا وإيابا إلى الخوادم.

42
00:02:54,025 --> 00:02:58,685
ما تلاحظه هو - في كثير من الأحيان هو أن العديد من هذه الصفحات لديها الكثير من القواسم المشتركة.

43
00:02:58,685 --> 00:03:00,444
ربما، على سبيل المثال،

44
00:03:00,444 --> 00:03:05,275
الرأس والتذييل وبعض المعلومات الأخرى كلها شائعة في كل هذه الصفحات.

45
00:03:05,275 --> 00:03:09,875
ولكن لا يزال، يتطلب منك كل طلب صفحة جديدة

46
00:03:09,875 --> 00:03:15,051
- للذهاب وجلب الصفحة بأكملها من الخادم.

47
00:03:15,051 --> 00:03:22,150
الآن مع استخدام التخزين المؤقت على موقع المتصفح، يمكنك تخفيف بعض هذه المشاكل

48
00:03:22,150 --> 00:03:28,740
عن طريق إعادة استخدام الموارد

49
00:03:28,740 --> 00:03:33,189
التي تم جلبها بالفعل من ذاكرة التخزين المؤقت الخاصة بك؛ ولكن لا يزال، تتطلب كل صفحة جديدة تنتقل

50
00:03:33,189 --> 00:03:35,830
إليها صفحة كاملة ليتم إعادة تحميلها من موقع الخادم.

51
00:03:35,830 --> 00:03:40,240
تقترب تطبيقات الصفحة الواحدة من هذه المشكلة بطريقة مختلفة.

52
00:03:40,240 --> 00:03:44,289
في تطبيق صفحة واحدة، عادة ما قمنا بتطوير تطبيق ويب

53
00:03:44,289 --> 00:03:49,955
لذلك عندما ينتقل المتصفح إلى موقع الويب،

54
00:03:49,955 --> 00:03:55,384
ثم هذا سوف يطلب تحميل تطبيق الويب من موقع الخادم.

55
00:03:55,384 --> 00:03:59,472
لذلك سيكون هذا، على سبيل المثال، موجودًا في صفحة رئيسية مثل index.html،

56
00:03:59,472 --> 00:04:02,860
والتي ستؤدي إلى تشغيل مجموعة كاملة من الأصول

57
00:04:02,860 --> 00:04:09,553
المطلوبة لعرض تطبيق الويب الخاص بك ليتم تنزيله إلى موقع العميل الخاص بك.

58
00:04:09,553 --> 00:04:14,199
الآن كيف يتم حزم هذه الأصول يعتمد على كيفية تصميم تطبيق الويب الخاص بك

59
00:04:14,199 --> 00:04:18,439
وأيضا ما هو الإطار الذي تستخدمه لتصميم تطبيق الويب الخاص بك.

60
00:04:18,439 --> 00:04:32,020
ولكن مع ذلك، لديك واحد تحميل كبير واحد في بداية تطبيق الويب الخاص بك.

61
00:04:32,020 --> 00:04:36,160
ستؤدي التغييرات اللاحقة على موقع العميل، على سبيل المثال، التي بدأتها بنقرة على رابط، إلى بدء طلب جديد لموقع الخادم؛ ولكن في هذه الحالة، في

62
00:04:36,160 --> 00:04:42,550
كثير من الأحيان، تقوم بتنزيل بعض البيانات فقط، ربما في شكل بيانات JSON،

63
00:04:42,550 --> 00:04:45,745
من موقع الخادم.

64
00:04:45,745 --> 00:04:52,060
لذلك في هذه الحالة، قد يتطلب كل منها الوصول إلى الخادم

65
00:04:52,060 --> 00:04:54,839
فقط لتنزيل بيانات JSON، على سبيل المثال،

66
00:04:54,839 --> 00:05:00,009
والتي قد تمكنك بعد ذلك من عرض العرض الجديد بالكامل

67
00:05:00,009 --> 00:05:03,240
في تطبيق الصفحة الواحدة الخاص بك.

68
00:05:03,240 --> 00:05:07,329
وبالتالي فإن تحميل الصفحة الأولية، تحميل التطبيق الأولي، بطبيعة الحال،

69
00:05:07,329 --> 00:05:11,218
هو دائما هناك، ولكن معظم التفاعلات اللاحقة مع الخادم

70
00:05:11,218 --> 00:05:17,050
سيكون ببساطة لتحميل البيانات، وعادة في شكل جسون أو شمل،

71
00:05:17,050 --> 00:05:20,930
اعتمادا على كيفية تصميم تنسيق البيانات الخاص بك.

72
00:05:20,930 --> 00:05:22,720
وبمجرد تنزيل البيانات

73
00:05:22,720 --> 00:05:27,865
، يمكن استخدام هذه البيانات لعرض العرض الجديد داخل التطبيق الخاص بك.

74
00:05:27,865 --> 00:05:29,259
لذلك في هذه الظروف،

75
00:05:29,259 --> 00:05:33,870
سوف توفر الكثير من الوقت ذهابا وإيابا إلى الخادم لتحميل الكثير من الأصول.

76
00:05:33,870 --> 00:05:38,680
وبطبيعة الحال، يتطلب تحميل الصفحة الأولي قدرا من العمل الذي يتعين القيام به،

77
00:05:38,680 --> 00:05:44,394
ولكن الطلبات اللاحقة قد تكون لكميات صغيرة جدا من البيانات.

78
00:05:44,394 --> 00:05:52,037
وهذا، في الواقع، هو السمة الهامة لتطبيقات الصفحة الواحدة.

79
00:05:52,037 --> 00:05:58,310
الآن مع التقديم المسبق لبعض وجهات نظرهم على موقع الخادم نفسه،

80
00:05:58,310 --> 00:06:05,925
يمكنك حتى تخفيف بعض وقت التنزيل الأولي لتطبيق الويب الخاص بك.

81
00:06:05,925 --> 00:06:07,730
لذلك، حتى Angular، على سبيل المثال،

82
00:06:07,730 --> 00:06:13,853
تمكنك من تقديم جزء من العرض الأول على موقع الخادم

83
00:06:13,853 --> 00:06:20,783
لتمكين عرض المعلومات للعميل بسرعة،

84
00:06:20,783 --> 00:06:26,995
بينما يتم تنزيل بقية تطبيق الويب بواسطة متصفحك.

85
00:06:26,995 --> 00:06:31,314
حتى نتمكن من تلخيص أن تطبيقات الصفحة الواحدة

86
00:06:31,314 --> 00:06:35,060
كتطبيق ويب على موقع ويب يناسب في صفحة واحدة - مرة أخرى،

87
00:06:35,060 --> 00:06:40,805
تعطي أو تأخذ - كما تعلمون، لا تفسر ذلك حرفيا جدا.

88
00:06:40,805 --> 00:06:44,389
لذلك لا تحتاج إلى إعادة تحميل صفحة بأكملها مرة أخرى.

89
00:06:44,389 --> 00:06:49,620
لذلك هذه هي الميزة الهامة لتطبيق صفحة واحدة.

90
00:06:49,620 --> 00:06:54,139
كذلك، تمكنك تطبيقات الصفحة الواحدة من تقديم تجربة مستخدم

91
00:06:54,139 --> 00:06:59,435
أقرب للعمل الذي يرونه مع تطبيقات سطح المكتب.

92
00:06:59,435 --> 00:07:02,930
بمجرد تنزيل تطبيق الويب الأولي؛ بعد ذلك،

93
00:07:02,930 --> 00:07:11,475
ستبدو معظم التفاعلات الأخرى وكأنك تتفاعل مع تطبيق سطح المكتب.

94
00:07:11,475 --> 00:07:15,959
لذلك لتلخيص ما تعلمناه للتو، ما هو تطبيق صفحة واحدة؟

95
00:07:15,959 --> 00:07:21,069
تطبيق صفحة واحدة هو تطبيق ويب أو موقع ويب يتناسب مع صفحة واحدة.

96
00:07:21,069 --> 00:07:26,670
لا تحتاج إلى إعادة تحميل الصفحة بأكملها في كل مرة يتفاعل فيها المستخدم

97
00:07:26,670 --> 00:07:28,362
مع التطبيق.

98
00:07:28,362 --> 00:07:37,199
و أوك هو أشبه سطح المكتب أو التطبيق الأصلي.

99
00:07:37,199 --> 00:07:42,699
يتم تنزيل معظم الموارد المطلوبة للتطبيق الخاص بك في المقام الأول نفسه، مع تحميل الصفحة الأولى.

100
00:07:42,699 --> 00:07:45,720
بعد ذلك، يتم إعادة رسم أجزاء فقط من الصفحة،

101
00:07:45,720 --> 00:07:53,540
استنادًا إلى كيفية حدوث تفاعل المستخدم دون الحاجة إلى خادم كامل ذهابًا وإيابًا،

102
00:07:53,540 --> 00:07:58,889
لجلب جميع الموارد التي تحتاجها.

103
00:07:58,889 --> 00:08:04,644
وبطبيعة الحال، فإن هذا لا يأتي دون مجموعته الخاصة من القضايا التي تحتاج إلى معالجة.

104
00:08:04,644 --> 00:08:07,740
لذلك عند تصميم تطبيقات صفحة واحدة، واحدة من أول الأشياء

105
00:08:07,740 --> 00:08:11,609
التي غالبا ما يتساءل الناس عن تطبيقات الصفحة الواحدة

106
00:08:11,609 --> 00:08:14,444
هي أنها ليست الأمثل لمحركات البحث.

107
00:08:14,444 --> 00:08:19,225
لذا فإن تحسين محرك البحث هو جزء مهم يحتاج إلى معالجة.

108
00:08:19,225 --> 00:08:20,579
لذلك إذا كان لديك محركات بحث

109
00:08:20,579 --> 00:08:24,795
تزحف موقعك على الويب لاستخراج البيانات ومعلومات الفهرس،

110
00:08:24,795 --> 00:08:28,889
فقد لا تكون تطبيقات الصفحة الواحدة بالضرورة تعاونية في هذه الحالة.

111
00:08:28,889 --> 00:08:33,230
ولكن حتى تحسين محرك البحث مع أطر البيانات الحالية،

112
00:08:33,230 --> 00:08:40,680
مثل Angular، قد حان بعيدا على الطريق أنه حتى مع تطبيق الصفحة الواحدة،

113
00:08:40,680 --> 00:08:47,940
يمكن لمحركات البحث فهرسة الكثير من المعلومات

114
00:08:47,940 --> 00:08:50,621
التي يخدمها تطبيق الويب الخاص بك.

115
00:08:50,621 --> 00:08:59,009
المشكلة الثانية التي يجب معالجتها هي مقدار بناء الويب الذي يجب إلغاء تحميله

116
00:08:59,009 --> 00:09:02,750
إلى موقع العميل بدلاً من موقع الخادم.

117
00:09:02,750 --> 00:09:07,500
لذا فإن الخادم يعمل إلى حد كبير كمصدر بيانات في تطبيقات الصفحة الواحدة

118
00:09:07,500 --> 00:09:10,644
ويتم إلغاء تحميل الكثير من العمل إلى موقع العميل.

119
00:09:10,644 --> 00:09:11,840
من منظور واحد،

120
00:09:11,840 --> 00:09:18,782
يمنحك هذا طريقة أكثر قابلية للتطوير لتقديم تطبيق الويب الخاص

121
00:09:18,782 --> 00:09:24,037
بك إلى موقع العميل الخاص بك، لأن الكثير من عمل التقديم يتم على موقع العميل.

122
00:09:24,037 --> 00:09:31,649
الآن يمكنك تحسين هذا إلى حد ما لتعويض التنزيل الأولي

123
00:09:31,649 --> 00:09:34,399
لتطبيق الويب من موقع الخادم عن

124
00:09:34,399 --> 00:09:37,034
طريق القيام بجزء من التقديم على موقع الخادم.

125
00:09:37,034 --> 00:09:40,559
كما ذكرت، يوفر لك Angular فرصة

126
00:09:40,559 --> 00:09:45,120
للقيام بذلك مع عرض موقع الخادم الجزئي

127
00:09:45,120 --> 00:09:48,889
للعرض الأولي لتطبيقك.

128
00:09:48,889 --> 00:09:53,460
الجانب الثالث هو كيفية الحفاظ على التاريخ حتى عند النقر على زر العودة

129
00:09:53,460 --> 00:09:56,789
أو زر الأمام، إلى أين يمكنك أن تأخذ المستخدم ل؟

130
00:09:56,789 --> 00:09:59,759
هل يمكنك حفظ ما يكفي من المعلومات

131
00:09:59,759 --> 00:10:06,083
التي سوف تكون قادرة على التنقل بين وجهات النظر المختلفة من التطبيق الخاص بك وهلم جرا؟

132
00:10:06,083 --> 00:10:08,985
لذلك هذا هو الشيء الوحيد الذي تحتاج إلى أن تأخذ في الاعتبار.

133
00:10:08,985 --> 00:10:16,975
بالطبع، لأن جهاز التوجيه Angular يعزز واجهة برمجة تطبيقات التاريخ المكون من خمس صفحات html،

134
00:10:16,975 --> 00:10:21,649
لذلك فهو قادر على معالجة هذه المشكلة إلى حد كبير.

135
00:10:21,649 --> 00:10:25,139
السؤال الأخير الذي لدينا هو التحليلات.

136
00:10:25,139 --> 00:10:29,804
كيف تدعم التحليلات على صفحة الويب الخاصة بك؟

137
00:10:29,804 --> 00:10:33,850
كيف يمكنك جمع بيانات التحليلات وما إلى ذلك؟

138
00:10:33,850 --> 00:10:39,235
وأيضا، كما ذكرت سابقا، تسريع تحميل الصفحة الأولية

139
00:10:39,235 --> 00:10:44,924
هو شيء يثير القلق عندما كنت تصميم تطبيق الويب الخاص بك.

140
00:10:44,924 --> 00:10:46,764
الآن مع Angular، كما قلت،

141
00:10:46,764 --> 00:10:52,449
سيؤدي إجراء عرض جزئي على جانب الخادم إلى تسريع تحميل الصفحة الأولية

142
00:10:52,449 --> 00:10:57,610
على موقع العميل الخاص بك بينما

143
00:10:57,610 --> 00:11:00,735
يتم تنزيل بقية تطبيق الويب إلى موقع العميل.

144
00:11:00,735 --> 00:11:07,120
حتى تتمكن من إخفاء القليل من وقت التحميل الأولي لتطبيق الويب عن

145
00:11:07,120 --> 00:11:10,730
طريق إجراء عرض جزئي من موقع الخادم نفسه.

146
00:11:10,730 --> 00:11:13,701
مع وضع هذه الأفكار الأساسية في الاعتبار،

147
00:11:13,701 --> 00:11:19,120
دعنا نذهب الآن ونستكشف كيف يدعم Angular تطبيقات الصفحة الواحدة.

148
00:11:19,120 --> 00:11:22,450
لقد أدمجنا بالفعل جهاز التوجيه الزاوي

149
00:11:22,450 --> 00:11:25,375
في تطبيقنا الزاوي في التمرين السابق.

150
00:11:25,375 --> 00:11:28,879
في التدريبات اللاحقة في هذا الدرس

151
00:11:28,879 --> 00:11:34,315
والمهمة، سوف نكمل تطوير تطبيق الصفحة الواحدة

152
00:11:34,315 --> 00:11:41,139
الذي كنا نعمل عليه حتى الآن في هذا المساق.