1
00:00:00,000 --> 00:00:00,500


2
00:00:00,500 --> 00:00:03,992
[MUSIC PLAYING]

3
00:00:03,992 --> 00:00:49,910


4
00:00:49,910 --> 00:00:51,190
ديفيد مالان: حسنًا.

5
00:00:51,190 --> 00:00:55,060
هذه هي دورة CS50 وهذه هي
المحاضرة 7 حيث نستكمل

6
00:00:55,060 --> 00:00:58,060
ما توقفنا عنده آخر مرة
في حديثنا بشكل أكبر عن Python،

7
00:00:58,060 --> 00:01:02,340
لكن هذه المرة باستخدام Python
لأغراض قوية أكثر،

8
00:01:02,340 --> 00:01:04,980
جناس لم أكن أعنيه
حتى قلته هناك فقط.

9
00:01:04,980 --> 00:01:07,660
لكن الهدف من Python
هنا الآن هو استخدام هذه

10
00:01:07,660 --> 00:01:11,530
اللغة بالفعل لإنشاء لغة
أخرى، وتحديدًا HTML.

11
00:01:11,530 --> 00:01:15,010
وما سنقوم به هو البدء في توفير
كل ما هو موجود بدرجة أكبر عن النموذج العقلي

12
00:01:15,010 --> 00:01:17,500
لما تطلقون عليه
فصل المخاوف، حيث إنكم

13
00:01:17,500 --> 00:01:21,190
عندما تقومون بتصميم موقع ويب تم إنشاؤه
بشكل أكثر تعقيدًا، أو بالأحرى عندنا تصممون

14
00:01:21,190 --> 00:01:25,681
برنامجًا أكثر تعقيدًا، فأنتم
تحاولون تبنّي أنماط تصميم معينة حتى

15
00:01:25,681 --> 00:01:28,180
لا تقوموا فقط بكتابة كل شيء 
في ملف واحد كبير الأمر الذي

16
00:01:28,180 --> 00:01:31,990
يصبح مربكًا قليلاً، وغير عملي
للاحتفاظ به وللإضافة إليه مع مرور الوقت.

17
00:01:31,990 --> 00:01:34,930
ولكنكم تبدؤون في فصل
المخاوف، وخاصية الدالة،

18
00:01:34,930 --> 00:01:36,970
والميزات الخاصة بكم، 
وعمل المتعاونين

19
00:01:36,970 --> 00:01:39,089
في ملفات مختلفة
ومنهجيات مختلفة.

20
00:01:39,089 --> 00:01:42,130
ولذلك سنحاول تقديم بعض
هذه النُهج القياسية في مجالاتها اليوم

21
00:01:42,130 --> 00:01:43,840
والسبب وراء أنها تقوم بحل المشاكل بالفعل.

22
00:01:43,840 --> 00:01:45,340
لكن، بالطبع، كيف وصلنا إلى هنا؟

23
00:01:45,340 --> 00:01:46,920
منذ بضعة أسابيع، تحدثنا
عن هذا الشيء،

24
00:01:46,920 --> 00:01:48,910
هذا الظرف الافتراضي
الذي يمثل تحديدًا

25
00:01:48,910 --> 00:01:52,600
حِزم المعلومات، الأصفار والواحدات،
التي تمر عبر الإنترنت من النقطة أ

26
00:01:52,600 --> 00:01:55,120
إلى النقطة ب. وبين الرسائل
الموجودة في هذه الأظرف

27
00:01:55,120 --> 00:01:56,440
قد يكون هناك لأجل طلبات الويب.

28
00:01:56,440 --> 00:02:00,910
وتحدثنا عن بروتوكول HTTP،
بروتوكول نقل النص التشعبي،

29
00:02:00,910 --> 00:02:03,910
الذي يقوم بإرسال رسالة
كهذه داخل الظرف.

30
00:02:03,910 --> 00:02:06,100
وهذا، بالطبع، يطلب من
الصفحة الافتراضية

31
00:02:06,100 --> 00:02:08,110
لموقع ويب حسبما يلمّح الخط المائل.

32
00:02:08,110 --> 00:02:11,030
وفي كثير من الحالات، ولكن
ليس دائمًا، يشير هذا إلى

33
00:02:11,030 --> 00:02:13,270
اسم ملف افتراضي يُدعى index.html.

34
00:02:13,270 --> 00:02:16,540
ولكن هذا تقليد
بشري، وليس مطلوبًا.

35
00:02:16,540 --> 00:02:20,840
يستجيب الخادم، كما نأمل، 
بتعليمة برمجية رقمية تساوي أي عدد صحيح؟

36
00:02:20,840 --> 00:02:23,480


37
00:02:23,480 --> 00:02:26,220
200، كما نأمل، رقم
لم نره مطلقًا في الواقع

38
00:02:26,220 --> 00:02:28,140
ما لم تصبحوا
أكثر اعتيادًا عليه

39
00:02:28,140 --> 00:02:30,439
وتبدؤوا في التدقيق بحثًا
في مركز تحكم Chrome

40
00:02:30,439 --> 00:02:31,980
وتلقوا نظرة على حركة بيانات الشبكة الخاصة بكم.

41
00:02:31,980 --> 00:02:32,479
حسنًا.

42
00:02:32,479 --> 00:02:34,780
إذن توجد هنا استجابة 
ناجحة فعلية،

43
00:02:34,780 --> 00:02:36,720
وهي تعني أن كل شيء على ما يرام بالفعل.

44
00:02:36,720 --> 00:02:40,070
وإذا كان المتصفح يبدو متجهًا للأسفل
قليلاً في الظرف الافتراضي،

45
00:02:40,070 --> 00:02:43,950
إذا صح التعبير، فسترون لغة
أخرى تُسمى HTML، لغة ترميز النص

46
00:02:43,950 --> 00:02:46,660
التشعبي، وهي المجموعة
التي كتبناها منذ أسبوعين

47
00:02:46,660 --> 00:02:51,240
وستستمرون في كتابته هذا الأسبوع كما
تقومون الآن بإنشاء مواقع ويب بشكل ديناميكي.

48
00:02:51,240 --> 00:02:55,200
ولكن ما سنقوم بتقديمه اليوم هو
ما يُعرف أيضًا بإطار عمل،

49
00:02:55,200 --> 00:02:58,920
أو، على وجه أكثر دقة، إطار عمل صغير،
لأننا سنرى بعد بضع دقائق فقط

50
00:02:58,920 --> 00:03:02,090
أنه يمكن أن يكون الأمر في الواقع 
مزعجًا ومملاً حقًا

51
00:03:02,090 --> 00:03:05,490
لإنشاء مواقع ويب
بشكل تلقائي باستخدام Python

52
00:03:05,490 --> 00:03:07,890
إذا تعيّن عليكم كتابة تعليمة Python البرمجية فقط.

53
00:03:07,890 --> 00:03:09,750
وهكذا لاحظ الأشخاص، خلال
السنوات العديدة الماضية،

54
00:03:09,750 --> 00:03:13,470
ويا للدهشة، في كل مرة أقوم فيها
بإنشاء تطبيق ويب باستخدام Python،

55
00:03:13,470 --> 00:03:15,690
أجد نفسي أكتب
سطور التعليمة البرمجية نفسها

56
00:03:15,690 --> 00:03:18,985
مرارًا وتكرارًا فقط لكي أبدأ،
أو عندما أتعاون مع شخص

57
00:03:18,985 --> 00:03:21,360
آخر، أكتشف أنه، أوه، من
الصعب قليلاً التعاون

58
00:03:21,360 --> 00:03:23,370
إذا كنا نعمل جميعًا في نفس الملف.

59
00:03:23,370 --> 00:03:25,650
لذلك فقد اخترع أشخاص
ما يُسمى بأُطُر العمل.

60
00:03:25,650 --> 00:03:29,040
وهذا مثال عن تعليمة
برمجية مكتوبة في Python

61
00:03:29,040 --> 00:03:31,530
ولكن باستخدام إطار عمل يُسمى Flask.

62
00:03:31,530 --> 00:03:34,740
إذن فبينما يعدّ Bootstrap، الذي
قمتم بتشغيله منذ قليل،

63
00:03:34,740 --> 00:03:38,640
عبارة عن إطار عمل للغتي CSS وJavaScript،
وهما تحتويان على بعض الميزات الديناميكية

64
00:03:38,640 --> 00:03:42,000
أيضًا، فإن Flask عبارة عن إطار
عمل من Python

65
00:03:42,000 --> 00:03:45,480
يمنحكم فقط تعليمة برمجية معينة للمكتبة
التي يمكنكم استخدامها بحرية

66
00:03:45,480 --> 00:03:46,950
في التطبيقات الخاصة بكم.

67
00:03:46,950 --> 00:03:50,490
وهو تحديدًا يسهّل قليلاً، في نهاية المطاف، 
إنجاز عملكم

68
00:03:50,490 --> 00:03:52,620
وإنشاء الشيء الذي
تريدون إنشاءه بدلاً من

69
00:03:52,620 --> 00:03:57,540
الحاجة إلى إعادة اختراع العجلة مرارًا
وتكرارًا مثل الأشخاص الذين كانوا من قبلكم.

70
00:03:57,540 --> 00:04:01,680
وإذن فإليكم هنا منهجية
أشرتُ إليها ﻓﻲ وقت سابق ليكون لديكم

71
00:04:01,680 --> 00:04:03,480
تحديدًا نموذج عقلي للأسابيع القادمة.

72
00:04:03,480 --> 00:04:05,850
لذلك فإلى الآن، يبدو إلى حد
كبير أن كل برنامج

73
00:04:05,850 --> 00:04:09,660
قمنا بكتابته في لغة C 
وحديثًا جدًا في Python

74
00:04:09,660 --> 00:04:14,110
يمكنك تسميته كتعليمة وحدة التحكم البرمجية
أو منطق وحدة التحكم أو منطق العمل.

75
00:04:14,110 --> 00:04:14,610
حسنًا.

76
00:04:14,610 --> 00:04:16,980
يتعلق الأمر كله بالحصول على
شيء تم إنهاؤه بشكل منطقي،

77
00:04:16,980 --> 00:04:21,360
عادةً في ملف واحد، وربما ملفين إذا
كان لديكم helpers.ce أو ملف

78
00:04:21,360 --> 00:04:22,710
رأس أو أي شيء.

79
00:04:22,710 --> 00:04:24,120
لكن لقد كنا نكتب المنطق.

80
00:04:24,120 --> 00:04:26,940
ولكن اليوم ومنذ أسبوعين
عندما ركزنا

81
00:04:26,940 --> 00:04:31,060
على برمجة الويب في HTML وCSS،
يوجد الجزء الثاني من عالمنا.

82
00:04:31,060 --> 00:04:34,380
يوجد المنطق الذي يُنهي
العمل المثير للاهتمام باستخدام التكرارات الحلقية،

83
00:04:34,380 --> 00:04:35,850
والشروط، وكل ذلك.

84
00:04:35,850 --> 00:04:37,980
ولكن توجد أشياء ستصبح أيضًا
الآن من الجماليات،

85
00:04:37,980 --> 00:04:42,390
الشيء الذي يشاهده المستخدم بالفعل
والطريقة التي تعرض بها بياناتك.

86
00:04:42,390 --> 00:04:45,300
لذلك سنقوم فقط بتقديم 
حرفين من اختصار

87
00:04:45,300 --> 00:04:46,670
اليوم وننتقل بعد ذلك.

88
00:04:46,670 --> 00:04:49,590
في أي وقت تبدأون فيه بكتابة
تعليمة برمجية منطقية في Python،

89
00:04:49,590 --> 00:04:51,480
ستقوم باستدعاء وحدة التحكم الخاصة بك.

90
00:04:51,480 --> 00:04:55,200
إنها مثل الآلة التي تُشغّل
تطبيق الويب الخاص بك بالكامل،

91
00:04:55,200 --> 00:04:57,180
ولكن في أي وقت تفعل فيه
شيء جمالي أكثر،

92
00:04:57,180 --> 00:05:01,470
سنقوم باستدعاء تعليمة عرضك البرمجية،
إذن C وV هما الحرفان هنا.

93
00:05:01,470 --> 00:05:03,900
وهذا يشير فقط إلى
فصل المخاوف.

94
00:05:03,900 --> 00:05:05,340
سينتقل منطقك إلى هذا الملف.

95
00:05:05,340 --> 00:05:08,160
والجماليات والتنسيق
في هذا الملف الآخر.

96
00:05:08,160 --> 00:05:12,090
في الأسبوع القادم، سنقدم قواعد البيانات
في SQL، لغة استعلام محدّدة.

97
00:05:12,090 --> 00:05:15,230
وسنقدم M هنا
لأن الاختصار الرائج

98
00:05:15,230 --> 00:05:18,060
لبعض الوقت إلى حد كبير
الآن هو MVC، على الرغم من وجود

99
00:05:18,060 --> 00:05:19,770
بدائل لهذا النموذج العقلي.

100
00:05:19,770 --> 00:05:21,600
وهذا يعني فقط وجود
ثلاثة أنواع مختلفة

101
00:05:21,600 --> 00:05:24,433
من الأشياء التي يجب أن تفكروا 
فيها عند إعداد تطبيق.

102
00:05:24,433 --> 00:05:27,180
ولكننا اليوم سنركز على
هذين الأمرين، وحدة التحكم والعرض.

103
00:05:27,180 --> 00:05:30,840
وحتى الآن، قمنا بإجراء
أشياء كثيرة خاصة بوحدة التحكم بالكامل

104
00:05:30,840 --> 00:05:32,130
عند كتابة تعليمة برمجية.

105
00:05:32,130 --> 00:05:35,940
إذن الدافع، في النهاية، سيكون
الوصول إلى المغزى من الإنشاء،

106
00:05:35,940 --> 00:05:39,540
بشكل أساسي، هذا، موقع الويب
للرياضات الداخلية للطلاب الجدد،

107
00:05:39,540 --> 00:05:44,400
حيث كنت أول شخص قام بإعادة الإنشاء
في عام 1996 كطالب في السنة الثانية الجامعية،

108
00:05:44,400 --> 00:05:48,120
ربما 1997 كطالب في السنة الثالثة الجامعية،
بعد الحصول على دورة CS50 فقط ومتابعة

109
00:05:48,120 --> 00:05:49,590
صف CS51.

110
00:05:49,590 --> 00:05:54,120
وعلى الرغم من أنه من المروع
رؤية ذلك هذه الأيام، وبشكل غير ظاهر

111
00:05:54,120 --> 00:05:57,650
كانت توجد مجموعة كاملة من منطق وحدة التحكم
ومجموعة كاملة من تعليمة النموذج البرمجية،

112
00:05:57,650 --> 00:06:00,060
حتى على الرغم من أنني لا أعتقد أن
MVC موجودة كاختصار

113
00:06:00,060 --> 00:06:02,680
في ذلك الوقت حتى
اكتشف أشخاص النمط.

114
00:06:02,680 --> 00:06:06,400
ولكن ما كانت تحتويه خلال القائمة في
الأعلى هنا هو مجموعة كاملة من الدالات.

115
00:06:06,400 --> 00:06:09,390
إذن لا يجب أن تسيروا بعد الآن
في الحرم الجامعي لملء نموذج

116
00:06:09,390 --> 00:06:13,080
وتسليم ورقة في
RA أو غرفة سكن المراقب.

117
00:06:13,080 --> 00:06:16,320
يمكنكم بدلاً من ذلك الانتقال فقط إلى الويب،
الذي نعتبره جميعًا أمرًا مسلمًا به بالتأكيد

118
00:06:16,320 --> 00:06:18,390
اليوم، املأ نموذجًا قائم uلى الويب.

119
00:06:18,390 --> 00:06:22,020
ثم بعد ذلك، سيتلقى
المراقب المسؤول من froshims

120
00:06:22,020 --> 00:06:25,380
رسالة بريد إلكتروني تؤكد مَن
الذي قام بالتسجيل للرياضة بالفعل.

121
00:06:25,380 --> 00:06:28,130
وأخيرًا قمنا بإضافة ملفات
CSV، ملفات قيم مفصولة

122
00:06:28,130 --> 00:06:30,560
بفاصلة مثل جداول البيانات، حيث
يتم حفظ البيانات.

123
00:06:30,560 --> 00:06:32,190
ثم كان لدينا أمر
قوس الجولة الرائع،

124
00:06:32,190 --> 00:06:35,106
الذي كان ديناميكيًا ومثيرًا
للإعجاب جدًا أنا متأكد أنه كان كذلك.

125
00:06:35,106 --> 00:06:38,410
لكننا سنركز بالفعل على
الأساسيات فقط اليوم.

126
00:06:38,410 --> 00:06:39,520
إذن كيف توصلنا لذلك؟

127
00:06:39,520 --> 00:06:42,120
حسنًا، دعوني أمضي
قدمًا وأفتح CS50 IDE

128
00:06:42,120 --> 00:06:46,080
وأقتراح أننا إذا كنا نريد
إعداد موقع ويب، تطبيق

129
00:06:46,080 --> 00:06:50,010
ويب حقًا، وبقول تطبيق
أعني به شيئًا يحوي على منطق.

130
00:06:50,010 --> 00:06:52,510
وبقول موقع ويب، إنه
شيء ثابت بشكل عام.

131
00:06:52,510 --> 00:06:53,700
إذن هذا ما يكون عليه تطبيق الويب.

132
00:06:53,700 --> 00:06:56,783
إنه شيء يتغير بناء على
مَن يستخدمه، ومتى تستخدمه،

133
00:06:56,783 --> 00:06:58,050
وماذا تفعل باستخدامه.

134
00:06:58,050 --> 00:07:02,190
دعوني أمضي قدمًا، وبأكثر
طريقة مملة ومزعجة ممكنة،

135
00:07:02,190 --> 00:07:05,340
أقوم بتنفيذ تطبيق الويب
باستخدام Python.

136
00:07:05,340 --> 00:07:11,429
إذن سأمضي قدمًا وأفتح ملف
يسمى serve.pie لتقديم موقع ويب.

137
00:07:11,429 --> 00:07:13,720
وسأمضي قدمًا وأقوم باستيراد
بعض تعليمة المكتبة البرمجية.

138
00:07:13,720 --> 00:07:19,110
إذن من خادم HTTP، قم باستيراد شيء
يُسمى معالج طلب HTTP الأساسي

139
00:07:19,110 --> 00:07:21,510
وشيء يُسمى خادم HTTP أيضًا.

140
00:07:21,510 --> 00:07:24,220
ومن ثم سأمضي قدمًا واستخدم
فئة الكلمة الأساسية هذه، وهي

141
00:07:24,220 --> 00:07:36,750
خادم HTTP، طلب الخادم، معالج
الطلب، معالج طلب HTTP الأساسي--

142
00:07:36,750 --> 00:07:37,641
معالج.

143
00:07:37,641 --> 00:07:39,640
ثم سأمضي قدمًا
وأقوم هنا بتنفيذ

144
00:07:39,640 --> 00:07:44,770
دالة تُسمى def
do_GET، والتي تشير إلى--

145
00:07:44,770 --> 00:07:48,160
هذه هي دالة في Python حيث يجب أن
يتم استدعاؤها في أي وقت يقوم فيه

146
00:07:48,160 --> 00:07:51,970
مستخدم بزيارة خادم الويب الخاص بي عبر
GET، نوع الفعل

147
00:07:51,970 --> 00:07:54,115
الذي تحدثنا عنه
في سياق الويب.

148
00:07:54,115 --> 00:07:56,620
إذن لنفترض أن هدفي
الوحيد هنا هو إنشاء

149
00:07:56,620 --> 00:08:00,160
تطبيق قائم على الويب يقول في الوقت الحالي
فقط مرحبًا بالعالم.

150
00:08:00,160 --> 00:08:03,320
نحن نعلم كيفية القيام بذلك باستخدام HTML،
ولكن باستخدام HTML هذا مجرد ملف.

151
00:08:03,320 --> 00:08:07,540
دعونا نكتب برنامجًا لا
يقوم بطباعة مرحبًا fالعالم فقط،

152
00:08:07,540 --> 00:08:10,180
ولكن يقوم بإنشاء صفحة ويب
تحتوي على مرحبًا بالعالم.

153
00:08:10,180 --> 00:08:11,800
إذن الطريقة التي قد أقوم بذلك بها هي هذه.

154
00:08:11,800 --> 00:08:15,400
يمكنني أن أقول حرفيًا ذات، لأن ذات
تشير إلى خادم الويب في هذه الحالة.

155
00:08:15,400 --> 00:08:18,429
ويمكنني أن أمضي قدمًا وأقوم
بإرسال تعليمة الاستجابة البرمجية من 200،

156
00:08:18,429 --> 00:08:20,470
مجرد افتراض بشكل اجترائي
إلى حد ما أن كل شيء

157
00:08:20,470 --> 00:08:22,000
سيكون على ما يرام بعد قليل.

158
00:08:22,000 --> 00:08:24,550
بعد ذلك سأمضي قدمًا
وأقوم بإرسال رأس، كما

159
00:08:24,550 --> 00:08:26,500
تذكرون، قد ناقشناها
بشكل موجز في الماضي،

160
00:08:26,500 --> 00:08:31,900
حيث ستكون هذه الرأس
نوع المحتوى وستكون

161
00:08:31,900 --> 00:08:34,780
قيمته هي نص HTML،
والذي يُعد دليل على أن المتصفح

162
00:08:34,780 --> 00:08:37,990
لا يتلقى GIF، أو
أو JPEG، أو أي شيء آخر،

163
00:08:37,990 --> 00:08:39,402
لكن صفحة HTML الفعلية.

164
00:08:39,402 --> 00:08:42,110
ثم سأمضي قدمًا وأقول هذا
كل شيء بشأن الرؤوس.

165
00:08:42,110 --> 00:08:44,830
سأقوم باستدعاء دالة
تسمى رؤوس النهاية.

166
00:08:44,830 --> 00:08:47,500
ومن ثم في النهاية، سأستخدم
تعليمة Python البرمجية

167
00:08:47,500 --> 00:08:49,704
لإنشاء موقع الويب الخاص بي بشكل ديناميكي.

168
00:08:49,704 --> 00:08:51,370
الآن، ما الذي يجب أن يحتوي عليه موقع الويب؟

169
00:08:51,370 --> 00:08:54,411
فقط مرحبًا بالعالم في نهاية
اليوم، ولكن هناك مجموعة كاملة من html

170
00:08:54,411 --> 00:08:56,360
نحتاج إلى القيام بها من أجل
الوصول إلى تلك المرحلة.

171
00:08:56,360 --> 00:09:00,790
لذلك سأستخدم دالة
تُسمى wfile

172
00:09:00,790 --> 00:09:02,180
لكتابة ما يلي.

173
00:09:02,180 --> 00:09:05,490
دعوني أمضي قدمًا وأكتب doctype--

174
00:09:05,490 --> 00:09:09,730
عذرًا، علامة تعجب doctype HTML.

175
00:09:09,730 --> 00:09:14,905
ثم دعوني أمضي قدمًا وأفعل الأمر
نفسه، wfile.write، دعوني أمضي قدمًا

176
00:09:14,905 --> 00:09:17,530
وأقوم بلصق ونسخ هذا وبعد ذلك،
هذا، بالطبع، يكون دائمًا

177
00:09:17,530 --> 00:09:18,520
حدس سيئ.

178
00:09:18,520 --> 00:09:24,070
ثم دعوني أمضي قدمًا وأقوم بإخراج
لغة HTML تساوي en للغة الإنجليزية.

179
00:09:24,070 --> 00:09:26,840
ولاحظوا أنني أستخدم علامة اقتباس 
واحدة داخل علامتي الاقتباس

180
00:09:26,840 --> 00:09:28,600
وبذلك لا يختلط الأمر على Python.

181
00:09:28,600 --> 00:09:33,130
بعد ذلك دعوني أمضي قدمًا وأقوم
بإخراج علامة الرأس هنا.

182
00:09:33,130 --> 00:09:36,340
ثم ما الذي يأتي بعد 
علامة الرأس عادة؟

183
00:09:36,340 --> 00:09:38,140
نعم، عادة ما يأتي العنوان مؤخرًا.

184
00:09:38,140 --> 00:09:44,080
إذن سيكون العنوان مثل
مرحبًا أيها العنوان، أغلق علامة العنوان.

185
00:09:44,080 --> 00:09:49,290
والآن سنمضي قدمًا
وما الذي يأتي بعد العنوان؟

186
00:09:49,290 --> 00:09:51,750
أغلق الرأس، كما أعتقد، إذا
كنت أفعل ذلك بشكل صحيح.

187
00:09:51,750 --> 00:09:55,350
ومن ثم من المحتمل
أن لدينا بنية.

188
00:09:55,350 --> 00:09:58,380
ثم يا إلهي، هذه أسوأ 
طريقة لإنشاء موقع الويب.

189
00:09:58,380 --> 00:10:02,250
ولكن دعونا نمضي قدمًا ونقول الآن
شيئًا بسيطًا مثل مرحبًا بالعالم.

190
00:10:02,250 --> 00:10:06,960
والآن دعونا ننتقل إلى هنا
ونقول شيئًا مثل البنية.

191
00:10:06,960 --> 00:10:13,340
ومن ثم في النهاية، دعونا نمضي قدمًا
وننهي الصفحة ونقول خط مائل HTML.

192
00:10:13,340 --> 00:10:14,100
تم.

193
00:10:14,100 --> 00:10:17,520
حسنًا، والآن أنا بالفعل أحتاج إلى تكوين
الخادم للاستماع على المنفذ.

194
00:10:17,520 --> 00:10:21,150
لذلك دعوني أمضي قدمًا وأقوم بتحديد منفذ
TCP من 8080، الذي استخدمناه.

195
00:10:21,150 --> 00:10:23,860
دعوني أمضي قدمًا وأقوم 
بتحديد عنوان الخادم على أنه،

196
00:10:23,860 --> 00:10:28,710
أوه 0.0.0.0، وهو ما يستخدمه IDE
بشكل افتراضي، مثل العديد من الخوادم.

197
00:10:28,710 --> 00:10:32,400
ومن ثم دعوني أقوم بإنشاء
خادم الويب، خادم HTTP.

198
00:10:32,400 --> 00:10:43,060
معالج طلب خادم HTTP لعنوان الخادم،
httpd.serve_forever.

199
00:10:43,060 --> 00:10:45,900
حسنًا، هذه هي كيفية إنشاء
تطبيق قائم على ويب

200
00:10:45,900 --> 00:10:47,972
يقوم بإنشاء HTML بشكل ديناميكي.

201
00:10:47,972 --> 00:10:51,180
بالنظر للماضي، أندم حقًا على كتابة
كل ذلك لأن المغزى كله

202
00:10:51,180 --> 00:10:53,250
الآن هو التخلص من هذه التعليمة البرمجية.

203
00:10:53,250 --> 00:10:55,710
مثل، هذا هو سبب وجود أُطُر العمل.

204
00:10:55,710 --> 00:11:00,390
إذا كان هدفي المطروح بكل بساطة هو
كتابة تعليمة برمجية في Python تقوم بإنشاء

205
00:11:00,390 --> 00:11:04,680
hTML ديناميكيًا، ثم استدعاء
العديد من الدالات مثل write،

206
00:11:04,680 --> 00:11:08,730
والتي في الأساس تعادل
print في هذا السياق، فهذا يكون مملاً.

207
00:11:08,730 --> 00:11:11,430
وسأشعر بالملل من كتابتها، 
وسأنجز القليل للغاية

208
00:11:11,430 --> 00:11:12,940
في نهاية المطاف.

209
00:11:12,940 --> 00:11:15,820
ولذلك توجد أُطُر العمل
لجعل حياتنا أسهل.

210
00:11:15,820 --> 00:11:19,020
ولكن ما يحدُث بشكل غير ظاهر
هو هذا بالضبط.

211
00:11:19,020 --> 00:11:21,720
عندما نبدأ باستخدام إطار
العمل هذا المُسمى Flask،

212
00:11:21,720 --> 00:11:24,460
فسيقوم بتشغيل كل
هذا آليًا من أجلنا.

213
00:11:24,460 --> 00:11:27,330
سيسهل تحديد
عنوان IP الذي تريده

214
00:11:27,330 --> 00:11:29,190
لتشغيل خادم الويب 
الخاص بك، سيسهل

215
00:11:29,190 --> 00:11:32,106
تحديد رقم المنفذ
الذي تريد أن يتم الاستماع

216
00:11:32,106 --> 00:11:35,010
للخادم الخاص بك
عليه، وسيسهل

217
00:11:35,010 --> 00:11:38,850
من الاستجابة للحصول على الطلبات
لأن Flask سيتولى

218
00:11:38,850 --> 00:11:44,010
تنفيذ بعض الدالات
مثل هذه التي تسمى do get.

219
00:11:44,010 --> 00:11:46,260
إذن يوجد كل ذلك
بشكل غير ظاهر

220
00:11:46,260 --> 00:11:50,520
ولكن إطار عمل flask يمنحنا
في الأساس تجريدًا

221
00:11:50,520 --> 00:11:51,640
في أعلى ذلك.

222
00:11:51,640 --> 00:11:53,170
إذن ما الذي أعنيه بذلك في الواقع؟

223
00:11:53,170 --> 00:11:57,366
إذا أردنا استخلاص هذا الآن
في تطبيق ويب أبسط،

224
00:11:57,366 --> 00:11:58,740
أولاً دعونا نمضي قدمًا ونفعل ذلك.

225
00:11:58,740 --> 00:12:03,450
دعوني أمضي قدمًا وأفتح نافذة
طرفية، وأنتقل إلى التعليمة البرمجية الخاصة بي

226
00:12:03,450 --> 00:12:07,590
هنا وأمضي قدمًا
وأشغل Python لـ serve.py.

227
00:12:07,590 --> 00:12:10,030
وسترون ألا شيء
يحدث بالفعل حتى الآن.

228
00:12:10,030 --> 00:12:11,940
لذلك سأنتقل إلى
خادم ويب cs50 IDE

229
00:12:11,940 --> 00:12:15,999
لفتح علامة تبويب تحتوي على
خادم الويب الذي أقوم بتشغيله الآن.

230
00:12:15,999 --> 00:12:17,040
وسترون أن هذا هو كل شيء.

231
00:12:17,040 --> 00:12:18,998
هذا هو الشيء الوحيد
الذي أنجزته الآن.

232
00:12:18,998 --> 00:12:21,900
ليس ديناميكيًا بالتأكيد، ولكن
هناك تعليمة برمجية وتعليمة برمجية في Python

233
00:12:21,900 --> 00:12:25,140
هناك والتي يمكنني بواسطتها
القيام بشيء ما بشكل ديناميكي بالفعل.

234
00:12:25,140 --> 00:12:28,980
ولكن دعونا بدلاً من ذلك نفعل ذلك الآن
باستخدام Flask، إطار العمل هذا

235
00:12:28,980 --> 00:12:30,480
الذي يبدو أنه يجعل حياتنا أسهل.

236
00:12:30,480 --> 00:12:34,945
سأمضي قدمًا وأقوم بإعداد برنامج
يسمى application.py، والذي

237
00:12:34,945 --> 00:12:35,820
يعد مجرد تقليد.

238
00:12:35,820 --> 00:12:37,400
يمكنني أسميه أي شيء أريده.

239
00:12:37,400 --> 00:12:39,400
سأمضي قدمًا 
وأقول ما يلي.

240
00:12:39,400 --> 00:12:42,270
دعونا نمضي قدمًا أولاً ونقوم باستيراد
إطار العمل هذا المُسمى Flask.

241
00:12:42,270 --> 00:12:45,090
وعلى وجه التحديد أقوم باستيراد
flask المكتوب بالأحرف الكبيرة،

242
00:12:45,090 --> 00:12:46,710
وهو اسم إطار العمل نفسه.

243
00:12:46,710 --> 00:12:49,650
ثم دعوني وبشكل استباقي
أقوم باستيراد دالتين

244
00:12:49,650 --> 00:12:53,337
تسمى render template ثم هذا
المتغير الشامل الخاص المُسمى request.

245
00:12:53,337 --> 00:12:55,920
ستعرفون فقط كيفية القيام بذلك
من خلال قراءة الوثائق.

246
00:12:55,920 --> 00:12:58,320
ولكن الآن دعوني أمضي قدمًا
وأقول، مرحبًا Flask،

247
00:12:58,320 --> 00:13:01,500
هل يمكنك منحي 
تطبيق ويب؟

248
00:13:01,500 --> 00:13:02,610
وهذا عبارة عن نسخ ولصق.

249
00:13:02,610 --> 00:13:04,770
أنت في حاجة إليه
لأي تطبيق Flask،

250
00:13:04,770 --> 00:13:07,200
وهذا يعني فقط تحويل هذا الملف--

251
00:13:07,200 --> 00:13:11,102
application.py-- إلى تطبيق ويب.

252
00:13:11,102 --> 00:13:13,060
ثم أخيرًا، سأمضي
قدمًا وأفعل ذلك.

253
00:13:13,060 --> 00:13:15,630
سأخبر Flask أنني أريد
إنشاء تطبيق

254
00:13:15,630 --> 00:13:20,520
لديه طريق يستمع إلى
الخط المائل داخل ذلك الظرف الافتراضي.

255
00:13:20,520 --> 00:13:25,950
ووقتما ترى طلبًا لخط مائل
من بعض المستخدمين يا Flask،

256
00:13:25,950 --> 00:13:29,550
امضِ قدمًا وقم باستدعاء تلك الدالة
التي سميتها بشكل اعتباطي index،

257
00:13:29,550 --> 00:13:31,920
لكن يمكنني أن أسميها foo،
أو bar، أو أيًا كان.

258
00:13:31,920 --> 00:13:36,920
وما أريدك أن تفعله
هو ذلك، return hello world.

259
00:13:36,920 --> 00:13:38,280
وهذا كل شيء.

260
00:13:38,280 --> 00:13:41,450
إذن كل تلك السطور الأخرى التي
كتبتها بضجر منذ لحظة

261
00:13:41,450 --> 00:13:44,510
تم استخلاصها الآن إلى
7 سطور فقط، والتي لا يوضح أي شيء

262
00:13:44,510 --> 00:13:47,010
منها تمامًا
كيف تعمل حتى الآن.

263
00:13:47,010 --> 00:13:50,330
لكن إذا افترضتم أن هذا يعني
أعطني حق الوصول إلى المكتبة،

264
00:13:50,330 --> 00:13:53,930
وحول الملف الخاص بي إلى تطبيق 
ويب، واستمع الآن

265
00:13:53,930 --> 00:13:57,109
إلى طلبات get على الخط المائل،
هو أمر منطقي نوعًا ما

266
00:13:57,109 --> 00:13:59,900
ويناسب النموذج العقلي الذي
قدمناه قبل بضعة أسابيع

267
00:13:59,900 --> 00:14:02,510
باستخدام HTML و CSS نفسها.

268
00:14:02,510 --> 00:14:06,140
ولتشغيل هذا الخادم، ما سأقوم 
به الآن في دليل hello الخاص بي، حيث

269
00:14:06,140 --> 00:14:09,050
توجد نسخة عبر الإنترنت من هذا 
على موقع الويب الخاص بالدورة،

270
00:14:09,050 --> 00:14:11,530
سأمضي قدمًا 
وأقول بكل ببساطة تشغيل Flask.

271
00:14:11,530 --> 00:14:14,450
إذن Flask ليس مجرد إطار عمل
أو تعليمة برمجية يمكنك الوصول إليها

272
00:14:14,450 --> 00:14:17,270
مجانًا وتعليمة برمجية،
مفتوحة المصدر لكنها أيضًا

273
00:14:17,270 --> 00:14:19,970
برنامج يمكنك تشغيله في 
سطر الأوامر الذي اكتشف أيضًا

274
00:14:19,970 --> 00:14:22,659
كيفية تشغيل الخادم عليه
وتشغيله فقط إلى الأبد.

275
00:14:22,659 --> 00:14:25,700
وسترون بعض المخرجات
التشخيصية للوهلة الأولى، والتي

276
00:14:25,700 --> 00:14:26,930
يجب عليكم ألا تلقوا بالاً لمعظمها.

277
00:14:26,930 --> 00:14:29,000
ولكن سيكون هناك بضعة
عناوين URL تظهر

278
00:14:29,000 --> 00:14:30,650
تعتمد على اسم المستخدم الخاص بك.

279
00:14:30,650 --> 00:14:34,380
والاسم الخاص بي اليوم هو jharvard 3
فقط لأغراض التوضيح.

280
00:14:34,380 --> 00:14:37,460
وإذا نقرتم على عنوان
URL هذا ثم نقرتم فوق فتح،

281
00:14:37,460 --> 00:14:42,014
سترون الآن أن هذا الإصدار من 
التطبيق نفسه يقوم بهذا فقط.

282
00:14:42,014 --> 00:14:43,430
الآن، أنا أقوم بالغش نوعًا ما، رغم ذلك.

283
00:14:43,430 --> 00:14:47,510
لأنه إذا فتحت Chrome وقمت بعرض
مصدر الصفحة الخاص بي، فلاحظوا أنني بالطبع

284
00:14:47,510 --> 00:14:51,191
أقوم بالغش لأن كل ما قمت به
هو طباعة hello world.

285
00:14:51,191 --> 00:14:52,940
وإذا قمت بعرض مصدر
هذه الصفحة، فسأقول

286
00:14:52,940 --> 00:14:57,290
حرفيًا hello world
فقط وليس HTML الفعلي

287
00:14:57,290 --> 00:15:00,890
لأنني حرفيًا لم
أكتب أي HTML في ملفي.

288
00:15:00,890 --> 00:15:04,007
ولكن تبين أن Flask
يجعل هذا الأمر سهلاً، أيضًا.

289
00:15:04,007 --> 00:15:06,590
لذلك دعوني أمضي قدمًا وأقوم
بإيقاف الخادم هنا للحظة.

290
00:15:06,590 --> 00:15:08,330
يُعد Control-c 
صديقك، يقوم

291
00:15:08,330 --> 00:15:10,340
بإخراجك من أي برنامج مشغّل بالفعل.

292
00:15:10,340 --> 00:15:12,020
ودعوني أمضي قدمًا وأفعل هذا.

293
00:15:12,020 --> 00:15:14,870
ودعوني أمضي قدمًا ولا أقوم فقط بإرجاع
"hello world"

294
00:15:14,870 --> 00:15:16,560
كقيمة ضمنية.

295
00:15:16,560 --> 00:15:22,760
دعوني أمضي قدمًا وأقوم بإرجاع تقديم
القالب المسمى index.html.

296
00:15:22,760 --> 00:15:24,890
إذن هذه ميزة من ميزات Flask، أيضًا.

297
00:15:24,890 --> 00:15:27,100
إذا كنتم تريدون فصل المنطق الخاص بكم--

298
00:15:27,100 --> 00:15:29,780
أدوات التحكم لديكم-- من HTML الخاص بكم--

299
00:15:29,780 --> 00:15:33,500
العرض الخاص بكم-- فستقومون حرفيًا
بوضع الأول في application.pi،

300
00:15:33,500 --> 00:15:36,500
وتقومون بوضع الآخر في
ملف HTML مثل هذا.

301
00:15:36,500 --> 00:15:38,840
وتقومون بإخبار التعليمة البرمجية الخاصة بوحدة التحكم--

302
00:15:38,840 --> 00:15:41,780
application.py-- اعرض
المستخدم، لتقديم

303
00:15:41,780 --> 00:15:44,870
ملف index.html للمستخدم.

304
00:15:44,870 --> 00:15:46,400
إذن أين أضع هذا؟

305
00:15:46,400 --> 00:15:50,450
سيكون التقليد عبارة عن إنشاء
دليل يسمى القوالب.

306
00:15:50,450 --> 00:15:55,532
ثم في هذا الدليل، قم بالمضي قدمًا
وضع ملفًا يُسمى index.html.

307
00:15:55,532 --> 00:15:57,740
وإذا مضيت قدمًا وفتحت
الملف الذي قمت بإنشائه

308
00:15:57,740 --> 00:16:01,344
مسبقًا بالفعل في المحاضرة هنا، دعوني
فقط أُظهر لكم كيف يبدو هذا.

309
00:16:01,344 --> 00:16:03,260
وبعد ذلك سوف نلقي
نظرة عليه في المتصفح.

310
00:16:03,260 --> 00:16:09,050
ها هو HTML الآن مع
ميزة رائعة للغاية

311
00:16:09,050 --> 00:16:11,660
التي على وشك
أن نكشف فائدتها.

312
00:16:11,660 --> 00:16:16,170
ما الشيء الجديد الذي يظهر
أمامكم في هذا الملف؟

313
00:16:16,170 --> 00:16:18,220
الجمهور: قوسين متعرجين حول الاسم.

314
00:16:18,220 --> 00:16:20,140
ديفيد مالان: نعم، قوسين متعرجين.

315
00:16:20,140 --> 00:16:22,960
وبطريقة أو بأخرى
اعتاد ذلك على قول world،

316
00:16:22,960 --> 00:16:25,390
ولكن في نسختي النهائية
من هذا أقوم في الواقع

317
00:16:25,390 --> 00:16:27,855
بالتلميح إلى بعض
القدرات الأكثر قوة.

318
00:16:27,855 --> 00:16:29,980
هذا يشبه العنصر النائب
نوعًا ما، إذا صح التعبير.

319
00:16:29,980 --> 00:16:31,750
ربما اسم شخص حقيقي.

320
00:16:31,750 --> 00:16:34,760
وهنا تدخل قوة
شيء مثل Flask حيز التشغيل.

321
00:16:34,760 --> 00:16:37,520
إنه يسهل حقًا القيام 
بشيء كهذا.

322
00:16:37,520 --> 00:16:39,520
إذن دعوني أمضي قُدمًا
وأقوم بتحويل ذلك بالفعل

323
00:16:39,520 --> 00:16:41,470
إلى شيء أكثر
إثارة للاهتمام.

324
00:16:41,470 --> 00:16:43,300
دعوني أنتقل إلى application.py.

325
00:16:43,300 --> 00:16:47,860
وقبل أن أقوم بتقديم ملف HTML
هذا، دعوني أمضي قدمًا وأفعل ذلك.

326
00:16:47,860 --> 00:16:50,960
دعوني أمضي قدمًا وأعلن
متغيرًا يُسمى name.

327
00:16:50,960 --> 00:16:54,040
ودعوني أمضي قدمًا
وأتحقق من الطلب الوارد،

328
00:16:54,040 --> 00:16:56,530
ما بداخل هذا الظرف الافتراضي.

329
00:16:56,530 --> 00:17:01,390
دعوني أتحقق من وسيطاته أو أي من
معلمات HTTP التي تم تمريرها

330
00:17:01,390 --> 00:17:05,200
وأحاول الحصول على شيء
يسمى name مثل هذا.

331
00:17:05,200 --> 00:17:07,930
دعوني أمضي قدمًا وأقوم
بحفظ ذلك ثم لاحظوا ذلك.

332
00:17:07,930 --> 00:17:10,117
يأخذ قالب التقديم
وسيطات متعددة.

333
00:17:10,117 --> 00:17:12,950
ينبغي أن يكون المتغير الأول هو اسم
القالب الذي تريدون تقديمه.

334
00:17:12,950 --> 00:17:15,369
ولكن إذا كنتم تريدون تمرير
البيانات بشكل ديناميكي،

335
00:17:15,369 --> 00:17:19,060
يمكنكم استخدام المعلمات المسماة في Python.

336
00:17:19,060 --> 00:17:22,359
تذكّروا من الأسبوع الماضي أنه يمكنكم
القيام بأشياء من هذا القبيل، x يساوي y،

337
00:17:22,359 --> 00:17:23,560
وz يساوي w.

338
00:17:23,560 --> 00:17:26,470
يمكنكم تمرير أسماء
الأشياء التي تريدون تمريرها

339
00:17:26,470 --> 00:17:28,490
والقيم المقابلة لها.

340
00:17:28,490 --> 00:17:35,080
لذلك إذا كنت أريد تمرير متغير name 
وتعيينه مساويًا لمتغير الاسم

341
00:17:35,080 --> 00:17:38,200
الذي حددته للتو،
شاهدوا ما يمكننا القيام به هنا.

342
00:17:38,200 --> 00:17:41,110
دعوني أعود إلى وحدة التحكم الخاصة بي.

343
00:17:41,110 --> 00:17:45,940
دعوني أمضي قدمًا وأعيد تشغيل في دليل hello
الخاص بي، والذي يكون متوفرًا على الإنترنت،

344
00:17:45,940 --> 00:17:47,470
تشغيل Flask.

345
00:17:47,470 --> 00:17:51,310
والآن دعوني أنتقل إلى هذا حيث
قال hello world في السابق.

346
00:17:51,310 --> 00:17:54,040
دعوني الآن، تمامًا مثل مثال
Google الخاص بنا منذ بضعة

347
00:17:54,040 --> 00:17:57,730
أسابيع، أكتب not q يساوي القطط،
وهو ما فعلناه في المرة السابقة،

348
00:17:57,730 --> 00:18:01,720
ولكن ربما name يساوي ديفيد
لمحاكاة طلب get.

349
00:18:01,720 --> 00:18:06,530
وإذا فعلت كل شيء بشكل صحيح، عندما أضغط
على Enter الآن أرى هذا بشكل ديناميكي.

350
00:18:06,530 --> 00:18:10,000
وإذا قمت بتغيير هذا الآن من
ديفيد إلى، لنقل، فيرونيكا، بالطبع،

351
00:18:10,000 --> 00:18:11,830
سيقوم هذا بإخراج ذلك
بشكل ديناميكي.

352
00:18:11,830 --> 00:18:14,170
هل يمكن لشخص ما الآن تقسيم تعليمتي البرمجية؟

353
00:18:14,170 --> 00:18:19,950
اقترحوا مُدخلاً ينبغي عليّ تجربته
لمعرفة ما إذا قمت بالعبث في مكان ما.

354
00:18:19,950 --> 00:18:21,607
الجمهور: لا تدخل شيئًا.

355
00:18:21,607 --> 00:18:22,690
ديفيد مالان: حسنًا، لا مُدخل.

356
00:18:22,690 --> 00:18:24,760
أو ما هذا؟

357
00:18:24,760 --> 00:18:26,375
كررها؟

358
00:18:26,375 --> 00:18:28,000
Name يساوي Name، أحب ذلك، أيضًا.

359
00:18:28,000 --> 00:18:29,940
إذن دعونا نجرب ذلك، Name يساوي Name.

360
00:18:29,940 --> 00:18:34,840
حسنًا إذن، أعني أنه قد يكون مثلاً
خطأ نحوي أو خطأ دلالي نوعًا ما،

361
00:18:34,840 --> 00:18:37,450
ولكن ليس خطأ تعليمة برمجية في حد ذاتها بالفعل.

362
00:18:37,450 --> 00:18:38,470
إنه فقط خطأ من المستخدم.

363
00:18:38,470 --> 00:18:40,570
ولكن ماذا لو تخلصت منه؟

364
00:18:40,570 --> 00:18:42,130
حسنًا، هذا يبدو أمرًا غبيًا قليلاً.

365
00:18:42,130 --> 00:18:44,796
إذن خطأ جمالي، ولكن ينبغي علينا
ربما البدء في معالجة ذلك.

366
00:18:44,796 --> 00:18:46,600
ماذا لو تخلصت من name بالكامل؟

367
00:18:46,600 --> 00:18:47,620
مثير للإعجاب.

368
00:18:47,620 --> 00:18:50,680
يبدو أن الإصدار النهائي الخاص بي 
يحتوي على بعض الوظائف المضمنة.

369
00:18:50,680 --> 00:18:52,360
إذن من أين يأتي ذلك؟

370
00:18:52,360 --> 00:18:53,750
حسنًا، ماذا لو فعلت ذلك؟

371
00:18:53,750 --> 00:18:56,360
تبين أنه يمكنني
قول شيء مثل هذا.

372
00:18:56,360 --> 00:18:59,860
إذا لم يكن name، فامضِ قدمًا
وقم بتعين name مساويًا لـ world

373
00:18:59,860 --> 00:19:01,520
ستكون إحدى طرق فعل ذلك.

374
00:19:01,520 --> 00:19:04,870
أو يمكنني استخدام
الدالة هنا بالفعل.

375
00:19:04,870 --> 00:19:07,867
تبين أن دالة get هذه
يمكن أن تأخذ قيمة افتراضية.

376
00:19:07,867 --> 00:19:09,700
وهكذا إذا قرأتم
الوثائق، فسترون

377
00:19:09,700 --> 00:19:11,830
أن القيمة الثانية
التي تقدمونها سيتم

378
00:19:11,830 --> 00:19:13,870
استخدامها إذا لم يقدم المستخدم واحدة.

379
00:19:13,870 --> 00:19:17,230
وبالفعل، إذا قمت بإعادة التحميل
الآن ولم أر شيئًا، فأحصل على world.

380
00:19:17,230 --> 00:19:21,980
وإذا فعلت بدلاً من ذلك name تساوي، لنقل،
بريان، فأحصل على هذا المُخرج الديناميكي.

381
00:19:21,980 --> 00:19:26,290
ولذلك عندما أقول تطبيق ويب،
فهذا مجرد تلميح عما أعنيه.

382
00:19:26,290 --> 00:19:28,660
هذا محتوى تم إنشاؤه ديناميكيًا.

383
00:19:28,660 --> 00:19:31,400
ليس ترميزًا ضمنيًا، لأنه
قادم بالفعل من المستخدم.

384
00:19:31,400 --> 00:19:35,784
لذلك عندما تقوم Google بتنفيذ
تطبيق بحث الخط المائل للويب الخاص بها،

385
00:19:35,784 --> 00:19:37,450
فهذا ما يقومون به نوعًا ما.

386
00:19:37,450 --> 00:19:38,650
إنها طريقة أكثر انخراطًا، بالطبع.

387
00:19:38,650 --> 00:19:41,525
يقومون بالبحث في قاعدة بيانات،
عن القطط، والكلاب، أو أيًا كان

388
00:19:41,525 --> 00:19:44,140
الذي تبحثون عنه
ثم إنشاء HTML.

389
00:19:44,140 --> 00:19:46,840
لكن لاحظوا باستخدام هذا
النهج البسيط فقط

390
00:19:46,840 --> 00:19:50,800
يمكننا أن نقوم بإنشاء 
أي HTML نريده بشكل ديناميكي.

391
00:19:50,800 --> 00:19:52,870
لأن كل ما يتعين علينا
القيام به في هذا القالب

392
00:19:52,870 --> 00:19:56,980
المُسمى index.html هو ذلك بالضبط.

393
00:19:56,980 --> 00:19:59,800
Hello، فاصلة، ثم
عنصر نائب حيث

394
00:19:59,800 --> 00:20:01,750
name هو المتغير الذي تمرره.

395
00:20:01,750 --> 00:20:04,000
ولكي نكون واضحين، فإنه
لا يلزم تسميته name.

396
00:20:04,000 --> 00:20:07,190
يمكنني كتابة شيء مثل foo،
والذي سيكون سخيفًا قليلاً.

397
00:20:07,190 --> 00:20:11,100
ولكن إذا فعلت ذلك، فأحتاج إلى تسمية 
المتغير الذي سأدخله foo هنا.

398
00:20:11,100 --> 00:20:13,060
وإذن هناك توافق
واحد لواحد

399
00:20:13,060 --> 00:20:16,510
بين الأشياء قبل
علامات يساوي ومكان

400
00:20:16,510 --> 00:20:19,060
إدخالهم في الأسفل هنا.

401
00:20:19,060 --> 00:20:22,630
أي أسئلة، حتى الآن، على هذا 
المثال البسيط، والذي يعد مع هذا كتلة بنائية؟

402
00:20:22,630 --> 00:20:23,584
أجل؟

403
00:20:23,584 --> 00:20:27,730
الجمهور: [INAUDIBLE]
تم إنشاؤه بشكل ديناميكي.

404
00:20:27,730 --> 00:20:28,480
ديفيد مالان: بالتأكيد.

405
00:20:28,480 --> 00:20:34,360
أعني من إنشائه ديناميكيًا أنني
لم أكتبه مسبقًا عن طريق كتابة

406
00:20:34,360 --> 00:20:37,840
صفحة ويب يدويًا تقول
مرحبًا ديفيد، أو مرحبًا بريان،

407
00:20:37,840 --> 00:20:40,370
أو مرحبًا فيرونيكا.

408
00:20:40,370 --> 00:20:45,070
يتم إنشاء كل هذه الصفحات
بشكل ديناميكي بناءً على مُدخل المستخدم.

409
00:20:45,070 --> 00:20:46,540
أنا كتبت معظم تلك الصفحات.

410
00:20:46,540 --> 00:20:49,870
لقد قمت بكتابة كل شيء فيها
وبعد الفاصلة، ولكن بعد ذلك-- آسف،

411
00:20:49,870 --> 00:20:54,160
حتى الفاصلة، ولكن تم
إضافة الأسماء ديناميكيًا.

412
00:20:54,160 --> 00:20:54,950
سؤال جيد.

413
00:20:54,950 --> 00:20:57,820
أي أسئلة أخرى؟

414
00:20:57,820 --> 00:20:58,670
حسنًا.

415
00:20:58,670 --> 00:21:04,070
إذن لماذا لا نعود بذاكرتنا
إلى عام 1997 أو قرب ذلك ونرى

416
00:21:04,070 --> 00:21:07,280
إذا لم يكن بإمكاننا إنشاء تطبيق 
ويب أكثر ديناميكية يتيح إلى الطلاب

417
00:21:07,280 --> 00:21:09,680
قيامهم بالفعل 
بالتسجيل لشيء ما

418
00:21:09,680 --> 00:21:12,500
أكثر إقناعًا من
مجرد تقديم أسمائهم؟

419
00:21:12,500 --> 00:21:17,150
لذلك دعوني أمضي قدمًا وأفتح froshim0،
والذي يعد أول تطبيق نطاق أكبر

420
00:21:17,150 --> 00:21:18,860
لدينا هنا اليوم.

421
00:21:18,860 --> 00:21:21,290
ولاحظوا أن لديّ بعض الملفات.

422
00:21:21,290 --> 00:21:24,282
إذن ستتصاعد الأمور 
بسرعة بالفعل حيث سنقوم

423
00:21:24,282 --> 00:21:26,240
فجأة بتقديم
قوالب متعددة،

424
00:21:26,240 --> 00:21:28,710
ولكننا سنقوم بذلك لكي
نحل مشكلة.

425
00:21:28,710 --> 00:21:31,880
ولكن أولاً دعوني أمضي قدمًا
وأفتح تطبيق،py،

426
00:21:31,880 --> 00:21:35,630
الذي يشبه تمامًا دالة main الخاصة بكم
في لغة C ويُعد نقطة الدخول نوعًا ما الآن

427
00:21:35,630 --> 00:21:37,430
إلى تطبيق قائم على الويب.

428
00:21:37,430 --> 00:21:40,550
إذن لاحظوا ذلك-- دعونا نبدأ هكذا.

429
00:21:40,550 --> 00:21:44,090
دعوني أمضي قدمًا وأحذف ذلك
وأبدأ من البداية هنا.

430
00:21:44,090 --> 00:21:47,930
دعونا نمضي قدمًا ونقوم بذلك.

431
00:21:47,930 --> 00:21:52,910
في froshim0، لدينا هذا
الطريق الافتراضي للخط المائل،

432
00:21:52,910 --> 00:21:55,044
ولاحظوا أنه سيقوم
بتقديم index.html.

433
00:21:55,044 --> 00:21:56,960
لذلك عندما تبدأون في
قراءة تعليمة برمجية لشخص آخر،

434
00:21:56,960 --> 00:21:58,710
فإنكم تتبعون هذه الآثار نوعًا ما.

435
00:21:58,710 --> 00:22:01,670
إذن دعوني أمضي قدمًا وأفتح
المجلد نفسه، froshim0.

436
00:22:01,670 --> 00:22:03,977
دعوني أنتقل إلى--

437
00:22:03,977 --> 00:22:06,560
دعوني أمضي قدمًا، وبدلاً من ذلك، دعونا نفعل ذلك
من سكراتش، في الواقع.

438
00:22:06,560 --> 00:22:07,250
لنقم بذلك.

439
00:22:07,250 --> 00:22:13,490
Index.html، ودعوني
أكتب doctype HTML المألوف.

440
00:22:13,490 --> 00:22:16,850
ثم دعوني أمضي قدمًا وأكتب علامة HTML
هنا، فإنها تنهي الأفكار نيابة عني.

441
00:22:16,850 --> 00:22:22,070
علامة الرأس هنا، علامة العنوان
هنا، سيكون froshim0 العنوان هنا.

442
00:22:22,070 --> 00:22:23,660
دعوني أمضي قدمًا وأقوم بإنشاء بنية.

443
00:22:23,660 --> 00:22:26,570
والآن لصفحة الويب
هذه، أريد المضي قدمًا

444
00:22:26,570 --> 00:22:30,990
والتحلي ببعض الأشياء التي
يمكن للمستخدم التسجيل بواسطتها بالفعل لـ froshim.

445
00:22:30,990 --> 00:22:32,990
إذن دعوني أمضي قدمًا ويكون
لديّ نص عنوان

446
00:22:32,990 --> 00:22:36,620
هنا، مثل التسجيل في froshims
مثلما فعلت سابقًا.

447
00:22:36,620 --> 00:22:38,840
ثم دعوني أمضي قدمًا
وأبدء علامة نموذج.

448
00:22:38,840 --> 00:22:41,090
ثم هنا، ما هي المعلومات
التي قد يريد تقديمها

449
00:22:41,090 --> 00:22:44,326
الطالب عند التسجيل
لشيء ما مثل فريق رياضي؟

450
00:22:44,326 --> 00:22:45,100
الجمهور: الاسم.

451
00:22:45,100 --> 00:22:46,599
ديفيد مالان: حسنًا، اسم الطالب.

452
00:22:46,599 --> 00:22:50,120
إذن نوع المُدخل يساوي نصًا.

453
00:22:50,120 --> 00:22:53,149
لا ينبغي على الأرجح أن يكون اسم
هذا المُدخل شيئًا عامًا مثل q،

454
00:22:53,149 --> 00:22:55,190
ربما ينبغي أن يكون وصفيًا 
أكثر مثل name.

455
00:22:55,190 --> 00:22:57,530
إذن يبدو غريبًا
قليلاً، أن name يساوي name.

456
00:22:57,530 --> 00:22:58,550
وسنمضي قدمًا ونفعل ذلك.

457
00:22:58,550 --> 00:23:00,258
وإذا أردنا أن نكون 
خيالين حقًا، يمكننا

458
00:23:00,258 --> 00:23:04,100
فعل ما يشبه نص العنصر النائب للاسم لكي
نظلل نصًا رمادي يظهر للمستخدم

459
00:23:04,100 --> 00:23:05,030
ماذا نريد.

460
00:23:05,030 --> 00:23:07,040
ثم في وقت سابق من اليوم،
تعين على الطلاب

461
00:23:07,040 --> 00:23:09,960
المُسجلين للرياضات
أن يوفروا سكنهم على الأقل،

462
00:23:09,960 --> 00:23:11,810
إذن المبنى الذي يعيشون فيه.

463
00:23:11,810 --> 00:23:14,010
لذلك في HTML، لدينا
مجموعة من أنواع المُدخلات.

464
00:23:14,010 --> 00:23:17,320
لدينا مربعات النصوص، تبين أن
لدينا مناطق للنصوص تكون أكبر حجمًا،

465
00:23:17,320 --> 00:23:23,171
مربعات الاختيار، أزرار الراديو، ما هو الأكثر 
ملائمة ربما لاختيار السكن الخاص بكم؟

466
00:23:23,171 --> 00:23:24,170
الجمهور: القائمة المنسدلة.

467
00:23:24,170 --> 00:23:28,520
ديفيد مالان: مثل القائمة 
المنسدلة، أو التي تُسمى قائمة.

468
00:23:28,520 --> 00:23:31,155
لكن أي علامة؟

469
00:23:31,155 --> 00:23:32,330
الجمهور: وعاء؟

470
00:23:32,330 --> 00:23:34,913
ديفيد مالان: ليس الوعاء، هي
أكثر دقة من ذلك قليلاً.

471
00:23:34,913 --> 00:23:37,970
مع أي علامة يمكنكم
إنشاء قائمة منسدلة

472
00:23:37,970 --> 00:23:39,836
إذا كنتم قد فعلتم ذلك من قبل في HTML؟

473
00:23:39,836 --> 00:23:40,730
الجمهور: تحديد.

474
00:23:40,730 --> 00:23:41,563
ديفيد مالان: تحديد.

475
00:23:41,563 --> 00:23:45,710
إذن لم يتم تسميتها بشكل واضح تمامًا،
ولكنها في الواقع قائمة تحديد حسب الاسم.

476
00:23:45,710 --> 00:23:47,040
إذن يمكنني القيام بذلك بالفعل.

477
00:23:47,040 --> 00:23:50,510
تحديد، وسيكون اسم هذا 
الحقل هو سكن، على سبيل المثال.

478
00:23:50,510 --> 00:23:53,920
ثم داخل هذا سأمضي قدمًا
ويكون لديّ بعض الخيارات.

479
00:23:53,920 --> 00:23:58,130
إذن أحد الخيارات قد يكون
لنقُل Apley Court، وهي

480
00:23:58,130 --> 00:24:01,100
واحدة من المباني
التي يعيش فيها الطلاب الجدد.

481
00:24:01,100 --> 00:24:03,432
قد يكون هناك مكان آخر
يُسمى Canoday،

482
00:24:03,432 --> 00:24:05,390
ثم سيكون هناك 
مجموعات أخرى.

483
00:24:05,390 --> 00:24:08,510
ثم لاحظوا، أيضًا، إذا لم تستخدموا
قائمة تحديد من قبل، والتي لم

484
00:24:08,510 --> 00:24:10,801
تتح لكم الفرصة حقًا
حتى الآن لاستخدامها ما لم تكونوا قد فعلتم ذلك

485
00:24:10,801 --> 00:24:14,300
من قبل، يجب أن تحتوي هذه الخيارات 
أيضًا على قيم، والتي ستكون

486
00:24:14,300 --> 00:24:16,350
متشابهة بالضبط تماشيًا مع أغراضي.

487
00:24:16,350 --> 00:24:20,780
ولكن بينما يرى
الأشخاص ما بين العلامات،

488
00:24:20,780 --> 00:24:24,260
فإن ما بين هذه 
الاقتباسات كقيمة القيمة

489
00:24:24,260 --> 00:24:26,480
هو ما يراه الكمبيوتر في الواقع.

490
00:24:26,480 --> 00:24:29,270
إذن هذه هي الكلمات التي
تملأ القائمة المنسدلة،

491
00:24:29,270 --> 00:24:32,600
هذه هي القيم التي بالفعل تصبح
محشوةً في الظرف الافتراضي

492
00:24:32,600 --> 00:24:35,420
الذي يراه الطالب أو
الطالبة بنفسهم بالفعل.

493
00:24:35,420 --> 00:24:37,640
إذن دعوني أمضي قدمًا وأحفظ ذلك.

494
00:24:37,640 --> 00:24:41,316
دعوني أمضي قدمًا 
وأفتح وحدة التحكم الخاصة بي الآن.

495
00:24:41,316 --> 00:24:43,190
سأقوم باستعارة تعليمة
برمجية صغيرة فقط حتى

496
00:24:43,190 --> 00:24:45,470
يمكننا القيام بذلك من سكراتش هنا.

497
00:24:45,470 --> 00:24:51,950
إذن دعوني أمضي قدمًا وأسحب من
froshim0 ملف application.py الخاص بي

498
00:24:51,950 --> 00:24:55,430
وأنتقل إلى مساحة العمل الخاصة بي.

499
00:24:55,430 --> 00:24:59,420
إذن دعوني أمضي قدمًا
الآن وأشغل Flask حيث

500
00:24:59,420 --> 00:25:01,370
لديّ ملف application.py هذا.

501
00:25:01,370 --> 00:25:04,190
سأشاهد عنوان URL
الذي تستقر فيه تعليمتى البرمجية الآن.

502
00:25:04,190 --> 00:25:07,220
وإذا قمت بفتح هذا، سأرى 
خطأ داخليًا في الخادم.

503
00:25:07,220 --> 00:25:11,180
إذن هذا مقصود عند مرحلة ما لأن
الخطأ الداخلي في الخادم، تذكّروا،

504
00:25:11,180 --> 00:25:14,685
كان واحدًا من أكثر التعليمات البرمجية للحالة
غموضًا، 500، الذي ربما

505
00:25:14,685 --> 00:25:17,810
لن تروه إلا إذا قمتم بزيارة
موقع ويب حيث يسير شيء ما

506
00:25:17,810 --> 00:25:18,930
على نحو خاطئ بالفعل.

507
00:25:18,930 --> 00:25:21,500
إذن كيف يمكنني معرفة
الخطأ الذي قد حدث الآن

508
00:25:21,500 --> 00:25:24,800
حيث أقوم بكتابة التعليمات البرمجية بالفعل 
وليس مجرد كتابة HTML مرمّز ضمنيًا؟

509
00:25:24,800 --> 00:25:27,350
حسنًا، سيتم العثور على
جميع الدلائل

510
00:25:27,350 --> 00:25:30,090
هنا بداخل نافذة وحدة التحكم.

511
00:25:30,090 --> 00:25:33,860
إذن عندما تشغلون Flask فإنكم
تقومون بتشغيل خادم ويب كامل.

512
00:25:33,860 --> 00:25:39,512
أنت تستمعون عبر TCP/IP 
للطلبات الواردة من المستخدمين.

513
00:25:39,512 --> 00:25:42,470
وبالتالي فإن ما ستشاهدونه في وحدة التحكم
ليس فقط مخرجًا تشخيصيًا

514
00:25:42,470 --> 00:25:46,490
عندما تقومون بتشغيل Flask أولاً، لكنكم
سترون كافة رسائل الخطأ

515
00:25:46,490 --> 00:25:48,669
التى قد تحدث بعد ذلك.

516
00:25:48,669 --> 00:25:50,210
وهذا يبدو مشفرًا قليلاً.

517
00:25:50,210 --> 00:25:53,110
بصراحة، للوهلة الأولى يبدو
هذا النص زاخمًا لرؤيته.

518
00:25:53,110 --> 00:25:56,150
ولكن في حين أنه في Clang
و لغة C بشكل عام

519
00:25:56,150 --> 00:25:59,480
يساعدك النظر في الأعلى،
أما رسائل الخطأ في بعض الأحيان

520
00:25:59,480 --> 00:26:02,250
هنا في هذا السياق لـ Flask
تكون نحو الأسفل نوعًا ما.

521
00:26:02,250 --> 00:26:04,310
وهنا لدينا قالب غير موجود.

522
00:26:04,310 --> 00:26:06,829
قالب لأنه لم يمكنه
العثور على index.html.

523
00:26:06,829 --> 00:26:08,370
وهذا فقط لأنني أخفقت.

524
00:26:08,370 --> 00:26:11,090
إذن في الواقع دعوني أخرج من
Flask بكتابة control-c.

525
00:26:11,090 --> 00:26:14,690
وإذا كتبتُ ls في الدليل الخاص بي،
لاحظوا أني لم أنفذ

526
00:26:14,690 --> 00:26:16,440
ما أنصح به إلى حد ما.

527
00:26:16,440 --> 00:26:19,220
من المحتمل أنه دقيق بعض الشيء،
ولكن لم أنظم نفسي

528
00:26:19,220 --> 00:26:19,950
بالطريقة الصحيحة.

529
00:26:19,950 --> 00:26:23,220
ما هو الخطأ الذي ارتكبتُه؟

530
00:26:23,220 --> 00:26:24,320
نعم؟

531
00:26:24,320 --> 00:26:25,190
الجمهور: لم تقم بإنشاء
دليل قوالب.

532
00:26:25,190 --> 00:26:26,820
ديفيد مالان: نعم، إنه
خطأ سخيف إلى حد ما.

533
00:26:26,820 --> 00:26:28,290
لم أقم بإنشاء دليل قوالب.

534
00:26:28,290 --> 00:26:30,081
وبذلك يمكنكم القيام
بذلك بطرق أخرى مختلفة.

535
00:26:30,081 --> 00:26:32,460
بواسطة رمز المجلد هنا،
يمكنكم إنشاء مجلد جديد

536
00:26:32,460 --> 00:26:34,290
عن طريق النقر بزر الماوس الأيمن أو النقر فوق التحكم.

537
00:26:34,290 --> 00:26:37,290
أو في Linux يمكنكم إعداد
dir لإنشاء دليل.

538
00:26:37,290 --> 00:26:40,140
وحتى أتمكن من القيام بإنشاء
قوالب dir enter.

539
00:26:40,140 --> 00:26:43,410
ومن ثم يمكنني نقل ملف 
index.html الخاص بي، والذي

540
00:26:43,410 --> 00:26:47,850
كتبتُه منذ لحظة، في دليل القوالب الخاص
بي فقط باستخدام mv للتنقل.

541
00:26:47,850 --> 00:26:52,020
والآن يمكنني المضي قدمًا وتشغيل
Flask، بتمرير أصابعي،

542
00:26:52,020 --> 00:26:54,960
وأعود إلى علامة تبويب 
المتصفح وأنقر فوق إعادة التحميل،

543
00:26:54,960 --> 00:26:57,090
و ها هو ذا، الآن أرى النموذج بالفعل.

544
00:26:57,090 --> 00:26:58,480
إذن امتلك هذه الأنواع من البديهيات.

545
00:26:58,480 --> 00:27:01,188
لم أكن أنوي ذلك في الحقيقة،
ولكنني نسيتُ إنشاء المجلد.

546
00:27:01,188 --> 00:27:02,220
لقد حصلتُ على خطأ الخادم هذا.

547
00:27:02,220 --> 00:27:03,690
لا يجب أن تحدقوا
في المتصفح فقط، ولن

548
00:27:03,690 --> 00:27:05,273
يحتوي على معلومات كثيرة.

549
00:27:05,273 --> 00:27:07,740
ولكن إذا نظرتُ في
وحدة التحكم، النافذة الطرفية

550
00:27:07,740 --> 00:27:11,710
التي يمكنكم التحكم بها سترون
رسائل الخطأ هذه مثل تلك في clang.

551
00:27:11,710 --> 00:27:13,290
إذن لدينا هنا نموذج HTML الأساسي.

552
00:27:13,290 --> 00:27:15,456
ليس مكتملاً لأنني
لم أتحمّل عناء كتابة

553
00:27:15,456 --> 00:27:18,090
جميع أسماء السكن، ولكن لديّ
مُدخل من نوع النص

554
00:27:18,090 --> 00:27:19,530
بالإضافة إلى قائمة تحديد.

555
00:27:19,530 --> 00:27:22,260
وينقصني التفصيل الرئيسي
أيضًا إلى حد ما، على ما يبدو.

556
00:27:22,260 --> 00:27:24,232
ما الذي يجب إضافته على الأرجح إلى هذا الشكل؟

557
00:27:24,232 --> 00:27:25,740
الجمهور: أين تقوم بالتحديد.

558
00:27:25,740 --> 00:27:26,670
ديفيد مالان: حسنًا، أنا أقوم بتحديد--

559
00:27:26,670 --> 00:27:29,545
يمكنني تحديد السكن، وبذلك
يمكنني محو هذا بعدة طرق.

560
00:27:29,545 --> 00:27:31,864
لا أجد زر Submit أيضًا.

561
00:27:31,864 --> 00:27:33,780
الآن، يتضح أنه يمكنكم
الضغط على Enter

562
00:27:33,780 --> 00:27:36,571
وسيتم تقديمه بشكل افتراضي
بالفعل. لكن يمكننا إصلاح هذا.

563
00:27:36,571 --> 00:27:38,970
إذن دعوني أنتقل إلى index.html.

564
00:27:38,970 --> 00:27:42,410
دعوني أُقلص حجم علامة التبويب هذه فقط 
قليلاً ودعوني أُصلح هذين الأمرين.

565
00:27:42,410 --> 00:27:46,950
لذا دعوني أمضي قدمًا وأفتح
هذا الإصدار الأخير، والذي

566
00:27:46,950 --> 00:27:50,450
هو الآن في دليل القوالب هذا.

567
00:27:50,450 --> 00:27:55,110
دعوني أمضي قدمًا وأقوم في الجزء السفلي
هنا بكتابة نوع المدخل يساوي تقديم،

568
00:27:55,110 --> 00:27:57,840
قيمة ذلك ستصبح
التسجيل، فقط

569
00:27:57,840 --> 00:27:59,620
لإيضاح ما حدث لشخص ما.

570
00:27:59,620 --> 00:28:04,260
دعوني أمضي قدمًا وأعود
إلى النموذج الخاص بي، وأنقر فوق إعادة التحميل.

571
00:28:04,260 --> 00:28:05,980
ولم يحدث شيء حتى الآن فقط.

572
00:28:05,980 --> 00:28:10,080
وذلك لأنه بشكل افتراضي عندما
تقومون بإجراء تغييرات على بعض ملفاتكم،

573
00:28:10,080 --> 00:28:11,444
فلن يقوم Flask بملاحظتها.

574
00:28:11,444 --> 00:28:13,485
وبالفعل سنصلح ذلك
في مجموعة المشاكل

575
00:28:13,485 --> 00:28:15,300
القادمة من خلال إضافة المزيد من
التعليمات البرمجية والمزيد من

576
00:28:15,300 --> 00:28:17,130
التعقيد لتشغيل هذا تلقائيًا من أجلكم.

577
00:28:17,130 --> 00:28:20,050
ولكن في حالة الشّك،
control-c لإنهاء flask.

578
00:28:20,050 --> 00:28:23,130
ثم امضوا قدمًا وقوموا بإعادة تشغيل
flask، والتي ستقوم بإعادة تحميل

579
00:28:23,130 --> 00:28:25,140
HTML الخاصة بكم، جميع تعليمة Python البرمجية الخاصة بكم.

580
00:28:25,140 --> 00:28:28,890
وإذا عدتُ الآن إلى هنا ونقرتُ فوق
إعادة التحميل، فسنرى زر تسجيل.

581
00:28:28,890 --> 00:28:31,030
لذلك يجب ألا تكون هناك أي مفاجآت.

582
00:28:31,030 --> 00:28:35,610
وإذا كانت موجودة، حاولوا فقط 
الوصول إلى التشخيص فيه.

583
00:28:35,610 --> 00:28:38,850
هذا أيضًا غير واضح قليلاً،
أيضًا، إلى ما تكون عليه هذه القائمة.

584
00:28:38,850 --> 00:28:42,180
لذلك يتضح أنه إذا قمتم بالفعل
بإنشاء خيار وهمي مثل هذا

585
00:28:42,180 --> 00:28:47,080
الذي لا يحتوي على قيمة ويقول شيئًا
مثل السكن، فيمكنكم حفظ هذا.

586
00:28:47,080 --> 00:28:50,820
دعونا نمضي قدمًا ونعيد تشغيل
Flask ونعيد تحميل الصفحة هنا.

587
00:28:50,820 --> 00:28:52,260
سترون أنكم ترون السكن الآن.

588
00:28:52,260 --> 00:28:56,340
لسوء الحظ، هذا غباء
إلى حد ما لأن السكن الآن

589
00:28:56,340 --> 00:28:58,320
هو المكان الذي من الواضح أنه
حرفيًا يمكنكم العيش فيه،

590
00:28:58,320 --> 00:28:59,850
وهو لا يبدو جيدًا إلى حد ما.

591
00:28:59,850 --> 00:29:01,950
لذلك هناك إصلاحات HTML لهذا أيضًا.

592
00:29:01,950 --> 00:29:05,130
يمكنني الانتقال إلى هنا بالفعل
وأقول مُعطل من الناحية الفنية،

593
00:29:05,130 --> 00:29:06,960
لذلك لا يمكنكم تحديد ذلك في الواقع.

594
00:29:06,960 --> 00:29:12,209
الآن إذا قمتُ بإعادة تشغيل Flask وإعادة تحميله،
ما يزال يظهر هناك الآن.

595
00:29:12,209 --> 00:29:15,000
ولكن لأنني قمتُ بتحديد Apley Court 
بالفعل، يمكنكم رؤيته باللون الرمادي.

596
00:29:15,000 --> 00:29:16,916
ويمكننا في الواقع
أن نكون محدّدين بشكل أكبر،

597
00:29:16,916 --> 00:29:21,360
إذا لم تريدوا تعطيله فقط، ولكن
تحديده بشكل افتراضي ومن ثم امضوا قدمًا

598
00:29:21,360 --> 00:29:24,176
وأعيدوا تحميل الصفحة هنا،
آمل أنكم سترون الآن

599
00:29:24,176 --> 00:29:25,550
ما هو مألوف على معظم مواقع الويب.

600
00:29:25,550 --> 00:29:27,780
إنه يقول سكن، لكنه معطل.

601
00:29:27,780 --> 00:29:29,760
وعلى الرغم من وجود علامة اختيار
سخيفة هناك،

602
00:29:29,760 --> 00:29:31,722
فأنتم مجبرون على اختيار سكن فعلي.

603
00:29:31,722 --> 00:29:33,930
إذن هذه جماليات ثانوية،
لكن الأشياء التي

604
00:29:33,930 --> 00:29:35,440
تتحكمون بها الآن.

605
00:29:35,440 --> 00:29:36,840
إذن ما الذي سيحدث؟

606
00:29:36,840 --> 00:29:39,240
في الواقع لم أقم بتحديد
أين يجب أن ينتقل هذا الشكل

607
00:29:39,240 --> 00:29:42,971
عندما أقوم بالتسجيل بالفعل لأنني
أفتقد بعض التفاصيل الرئيسية على علامة

608
00:29:42,971 --> 00:29:43,470
الشكل.

609
00:29:43,470 --> 00:29:45,386
ونحن لم نفعل ذلك
خلال أسبوعين.

610
00:29:45,386 --> 00:29:48,480
ولكن عندما أعدنا تنفيذ 
Google بشكل هزلي،

611
00:29:48,480 --> 00:29:52,340
ما الذي أضفناه إلى علامة الشكل أيضًا؟

612
00:29:52,340 --> 00:29:53,360
أي سمات؟

613
00:29:53,360 --> 00:29:56,860


614
00:29:56,860 --> 00:29:58,990
هل يتذكر أي شخص منكم؟

615
00:29:58,990 --> 00:29:59,870
نعم.

616
00:29:59,870 --> 00:30:01,940
أوه، كررها مجددًا؟

617
00:30:01,940 --> 00:30:04,850
إجراء، والتي تعني ماذا؟

618
00:30:04,850 --> 00:30:05,800
الجمهور: ما العمل.

619
00:30:05,800 --> 00:30:06,800
ديفيد مالان: ما العمل.

620
00:30:06,800 --> 00:30:08,508
حسنًا، إذن الإجراء
الذي نريد أن نتخذه،

621
00:30:08,508 --> 00:30:11,510
حتى على الرغم من أنه لم تتم
تسميته بشكل مثالي بالضرورة،

622
00:30:11,510 --> 00:30:13,875
هو حيث تريد
تقديم الشكل؟

623
00:30:13,875 --> 00:30:16,250
ويمكنني بالفعل تقديم
ذلك بطرق مختلفة.

624
00:30:16,250 --> 00:30:18,124
سأمضي قدمًا
وأقول، أتعلمون ماذا،

625
00:30:18,124 --> 00:30:21,549
قوموا بتقديمها إلى ما تم تسميته
بشكل منطقي طريق خط مائل تسجيل.

626
00:30:21,549 --> 00:30:23,840
قد يحتوي Google، على سبيل المثال، على
تعليمة برمجية تقول بدلاً من ذلك

627
00:30:23,840 --> 00:30:25,250
لتقديم الشكل إلى خط مائل بحث.

628
00:30:25,250 --> 00:30:27,170
لكننا لن نبحث عن
شيء، نحن نقوم بالتسجيل.

629
00:30:27,170 --> 00:30:29,270
إذن اسم الطريق
متروك لنا تمامًا.

630
00:30:29,270 --> 00:30:32,300
وعبر أي وسيلة يجب
أن نقدم هذه المعلومات؟

631
00:30:32,300 --> 00:30:33,380
ما هما الخياران الموجودان لدينا؟

632
00:30:33,380 --> 00:30:34,400
الجمهور: Get أو post.

633
00:30:34,400 --> 00:30:35,500
ديفيد مالان: Get أو post.

634
00:30:35,500 --> 00:30:38,480
يميل Get إلى أن يكون الافتراضي
إذا لم تذكروا ذلك في الارتباطات.

635
00:30:38,480 --> 00:30:41,319
لماذا قد ترغبون في استخدام post بدلاً من ذلك؟

636
00:30:41,319 --> 00:30:44,110
الجمهور: تريد أن تنتقل إلى 
قاعدة البيانات من أجل القيام بشيء ما.

637
00:30:44,110 --> 00:30:46,943
ديفيد مالان: نعم، تريد أن تنتقل إلى 
قاعدة البيانات من أجل القيام بشيء ما.

638
00:30:46,943 --> 00:30:49,450
والفعل الصحيح للاستخدام
هناك هو نشر المعلومات

639
00:30:49,450 --> 00:30:51,010
بدلاً من الحصول على المعلومات.

640
00:30:51,010 --> 00:30:54,190
وبصورة محدّدة أكثر عندما
يتعلق الأمر بالخصوصية، عندما تستخدم نشر،

641
00:30:54,190 --> 00:30:56,805
لا تنتهي المعلومات في
عنوان URL الخاص بالمستخدم،

642
00:30:56,805 --> 00:30:58,930
وبالتالي لا تنتهي
في محفوظاته أو محفوظاتها،

643
00:30:58,930 --> 00:31:02,180
وبالتالي لا تنتهي في مكان
يمكن للأقارب، أو رفقاء السكن، أو أي شخص

644
00:31:02,180 --> 00:31:04,014
آخر رؤيته في الواقع
فقط بالتدقيق فيها.

645
00:31:04,014 --> 00:31:07,013
إذن، سنمضي قدمًا، بالفعل، لأن
هذا هو اسمي، وسكني، وربما

646
00:31:07,013 --> 00:31:09,202
رقم هاتفي، وبريدي الإلكتروني،
ورقم بطاقة الائتمان الخاص بي،

647
00:31:09,202 --> 00:31:10,660
وما شابه ذلك على موقع ويب آخر.

648
00:31:10,660 --> 00:31:13,100
سأستخدم نشر لذلك بدلاً من ذلك.

649
00:31:13,100 --> 00:31:16,180
إذن المغزى هنا هو
أننا هذا الأسبوع، نمتلك الآن

650
00:31:16,180 --> 00:31:18,760
القدرة على
تنفيذ خط مائل تسجيل.

651
00:31:18,760 --> 00:31:22,480
منذ أسبوعين، كان بإمكاننا فقط إرسال
الأشخاص إلى خط مائل بحث من Google،

652
00:31:22,480 --> 00:31:25,120
ولكن الآن لدينا القدرة
على إنشاء الطرق الخاصة بنا.

653
00:31:25,120 --> 00:31:29,780
ولكن كم عدد الطرق التي قمنا
بتحدديها حتى الآن في application.py؟

654
00:31:29,780 --> 00:31:30,920
فقط طريق واحد.

655
00:31:30,920 --> 00:31:34,610
ومجددًا، بعض الصيغ الجديدة باستخدام
علامة في غير التقليدية وكلمة

656
00:31:34,610 --> 00:31:35,690
الطريق الرئيسية هنا.

657
00:31:35,690 --> 00:31:38,300
ولكن دعوني في الواقع
أخمّن بشكل بديهيي

658
00:31:38,300 --> 00:31:43,460
إذا مضيتُ قدمًا وقلتُ
app.route خط مائل تسجيل،

659
00:31:43,460 --> 00:31:46,160
أراهن أنه يمكنني تنفيذ طريق
ثاني وإخبار خادم الويب

660
00:31:46,160 --> 00:31:50,180
أن يستمع في مكانين، على خط مائل
بالإضافة إلى خط مائل تسجيل.

661
00:31:50,180 --> 00:31:55,550
لكن إذا أردتُ الاستماع على وجه التحديد
على نشر، فيجب أن يكون هذا بالفعل.

662
00:31:55,550 --> 00:31:58,670
الطرق تساوي علامة اقتباس وعلامة إنهاء الاقتباس نشر.

663
00:31:58,670 --> 00:32:02,374
لأنه بشكل افتراضي فقط لتيسير الأمور،
إنه يفترض get فقط.

664
00:32:02,374 --> 00:32:03,290
إذن أنا أحتاج إلى إضافة ذلك.

665
00:32:03,290 --> 00:32:05,124
وستعرفون ذلك فقط
من الوثائق.

666
00:32:05,124 --> 00:32:07,123
الآن سأمضي قدمًا
وأقوم بتحديد دالة.

667
00:32:07,123 --> 00:32:09,050
هذه ميزة مزعجة 
قليلاً من Flask.

668
00:32:09,050 --> 00:32:11,716
يجب أن تعطوا الدالة اسمًا
حتى ولو كنتم على الارجح

669
00:32:11,716 --> 00:32:13,070
لم تشيروا إليها من قبل في أي مكان.

670
00:32:13,070 --> 00:32:15,980
إذن سأمضي قدمًا وأطلق على
هذا تسجيل.

671
00:32:15,980 --> 00:32:18,060
والآن لديّ ما يجب القيام به.

672
00:32:18,060 --> 00:32:23,066
ما الذي أريد فعله عندما
ينقر المستخدم فوق زر Submit هذا؟

673
00:32:23,066 --> 00:32:23,858
الجمهور: تخزينه.

674
00:32:23,858 --> 00:32:25,607
ديفيد مالان: أريد
تخزينه في مكان ما.

675
00:32:25,607 --> 00:32:27,120
إذن ربما أريد تخزينه.

676
00:32:27,120 --> 00:32:30,560
ولكن ما الذي أريد فعله أولاً
قبل السماح له أو لها بالفعل

677
00:32:30,560 --> 00:32:34,400
بالتسجيل، على الرغم من أنه
قام بالنقر فوق شكل التقديم هذا؟

678
00:32:34,400 --> 00:32:36,130
ربما تؤكد معلوماته، أليس كذلك؟

679
00:32:36,130 --> 00:32:39,830
لأنه إذا قام مستخدم كسول، أو إذا قام
مستخدم بالنقر فوق الزر عن طريق الخطأ

680
00:32:39,830 --> 00:32:42,771
أو ضغط على enter، فقد لا يقوم بالفعل 
بتقديم أي شيء-- لا يوجد اسم، لا يوجد سكن.

681
00:32:42,771 --> 00:32:44,020
هذه ليست معلومات مفيدة.

682
00:32:44,020 --> 00:32:45,687
يمكن النظر إليها على أنها غير مرغوب فيها.

683
00:32:45,687 --> 00:32:48,020
لذلك من المحتمل أننا نريد أن نسأل
سؤالاً منطقيًا إلى حد ما

684
00:32:48,020 --> 00:32:51,130
على سبيل المثال إذا لم يعطينا اسمًا
أو لم يعطينا سكنًا،

685
00:32:51,130 --> 00:32:53,149
اصرخوا في وجه المستخدم بطريقة ما.

686
00:32:53,149 --> 00:32:54,690
إذن سأمضي قدمًا وأفعل ذلك.

687
00:32:54,690 --> 00:32:56,330
إذن دعوني في الواقع
أعبر عن ذلك في Python،

688
00:32:56,330 --> 00:32:58,640
كما فعلنا في الأسبوع الماضي
باستخدام بعض عمليات التحقّق من الخطأ.

689
00:32:58,640 --> 00:33:03,680
إذن تذكرون أن اسم المستخدم يمكن
الحصول عليه من معلمة HTTP.

690
00:33:03,680 --> 00:33:09,470
من request.args get، ومن ثم
طلب معلمة الاسم.

691
00:33:09,470 --> 00:33:13,580
يمكن أن يأتي سكنه، في نفس الوقت،
من request.args أعطني السكن.

692
00:33:13,580 --> 00:33:16,520
ومجددًا، هذا
request.args هو شيء

693
00:33:16,520 --> 00:33:19,430
منحنا لأنفسنا حق الوصول إلى
هنا عندما قلنا، مرحبًا Flask،

694
00:33:19,430 --> 00:33:22,790
من فضلك أعطني حق الوصول إلى طلب
المستخدم، هذا الظرف الافتراضي.

695
00:33:22,790 --> 00:33:26,390
يشير Request.arg إلى جميع
معلمات HTTP في عنوان URL.

696
00:33:26,390 --> 00:33:30,020
وget هي مجرد دالة أو طريقة
متضمّنَة في ميزة Flask

697
00:33:30,020 --> 00:33:33,260
الخاصة تلك التي تتيح لنا الحصول
على معلمة محدّدة مثل الاسم،

698
00:33:33,260 --> 00:33:35,180
أو السكن، أو أي شيء آخر.

699
00:33:35,180 --> 00:33:38,390
وتذكرون أنه في Python، من الجيد
أنه يمكنكم قول لغة تشبه اللغة الإنجليزية

700
00:33:38,390 --> 00:33:42,490
إلى حد كبير، إذا لم يوجد اسم أو--

701
00:33:42,490 --> 00:33:46,170
لم يوجد سكن، دعونا نمضي قدمًا
ونقوم بتوبيخ المستخدم.

702
00:33:46,170 --> 00:33:50,360
على سبيل المثال، يمكن أن نقول failure
لأنه لم يتعاون أو لأنها لم تتعاون في الواقع

703
00:33:50,360 --> 00:33:51,980
كما ذكرنا.

704
00:33:51,980 --> 00:33:54,110
وبطريقة أخرى، إذا
تعاون، سأمضي

705
00:33:54,110 --> 00:33:58,070
قدمًا وأقدم قالب success.

706
00:33:58,070 --> 00:34:00,030
وسنوضح ذلك
في غضون لحظات.

707
00:34:00,030 --> 00:34:01,520
لذلك حصلتُ على سيناريوهين تمت معالجتهما.

708
00:34:01,520 --> 00:34:05,150
إذا لم يتعاون أو إذا 
تعاون، علامة اقتباس وعلامة إنهاء الاقتباس failure

709
00:34:05,150 --> 00:34:07,320
أو قالب HTML كامل.

710
00:34:07,320 --> 00:34:12,100
إذن الآن قمتُ بتنفيذ 
خط مائل تسجيل وأنا أستمع للطريق

711
00:34:12,100 --> 00:34:15,230
من خلال النشر، دعونا نمضي قدمًا
ونعيد تحميل الصفحة لتدبر الأمور بشكل جيد.

712
00:34:15,230 --> 00:34:16,190
اكتب اسمي.

713
00:34:16,190 --> 00:34:20,110
لن أخبركم عن سكني، ولكن
ستلاحظون الكثير.

714
00:34:20,110 --> 00:34:24,080
حسنًا، لذا لاحظ الخادم الآن أنني
لم أتعاون بالفعل وأقدم

715
00:34:24,080 --> 00:34:25,250
كل من اسم وسكن.

716
00:34:25,250 --> 00:34:27,904
ولذلك يعيد من أجلي
علامة اقتباس وعلامة إنهاء الاقتباس failure فقط.

717
00:34:27,904 --> 00:34:31,070
إذن هذا جيد لأنني الآن أعلم، حسنًا،
أنه من الواضح أنني ارتكبتُ شيئًا خاطئًا.

718
00:34:31,070 --> 00:34:34,610
دعوني أعود دعوني أمضي قدمًا
وقد أستخدم Canaday هنا.

719
00:34:34,610 --> 00:34:36,230
والآن دعوني أمضي قدمًا وأقوم بالتسجيل.

720
00:34:36,230 --> 00:34:39,230
ولكن، ولكن، ولكن، هذا، أعلم
مسبقًا أنه سيكون خاطئًا.

721
00:34:39,230 --> 00:34:40,790
لماذا؟

722
00:34:40,790 --> 00:34:42,290
ليس لديّ success.html.

723
00:34:42,290 --> 00:34:44,540
حسنًا، دعونا نعالج ذلك بشكل استباقي.

724
00:34:44,540 --> 00:34:47,239
دعوني أنتقل هنا بالفعل
إلى دليل القوالب الخاص بي.

725
00:34:47,239 --> 00:34:52,040
سأمضي قدمًا وأقوم بإنشاء ملف
جديد يُسمى success.html.

726
00:34:52,040 --> 00:34:54,399
دعوني أنتقل إلى القوالب
لحفظها هناك.

727
00:34:54,399 --> 00:34:56,690
وأتعلمون ماذا، يمكن أن
يكون success صفحة بسيطة للغاية.

728
00:34:56,690 --> 00:35:00,300
دعوني أفتح صفحة الفهرس الخاصة بي، دعوني
أنسخ ذلك، دعوني أنتقل إلى success،

729
00:35:00,300 --> 00:35:01,160
دعوني أُلصق هذا.

730
00:35:01,160 --> 00:35:06,470
دعوني أتخلص من كل تلك البنية
وأقول فقط success، على سبيل المثال.

731
00:35:06,470 --> 00:35:10,690
إذن دعوني أمضي قدمًا
وأعيد تشغيل Flask،

732
00:35:10,690 --> 00:35:12,110
لأنني أعددتُ قالبًا جديدًا.

733
00:35:12,110 --> 00:35:14,526
دعوني أمضي قدمًا وأعيد تحميل
الشكل فقط لتدبر الأمر جيدًا.

734
00:35:14,526 --> 00:35:17,720
دعوني أمضي قدمًا وأعطيكم اسمي
هذه المرة، حسنًا، أعيش في Canaday،

735
00:35:17,720 --> 00:35:19,760
وأقوم بالتسجيل.

736
00:35:19,760 --> 00:35:22,080
وما هو الخطأ الذي ارتكبته هذه المرة؟

737
00:35:22,080 --> 00:35:25,940
إذن يتضح أنه لا يمكنكم
فعل ذلك بهذه الطريقة، بالتأكيد.

738
00:35:25,940 --> 00:35:31,310
[LAUGHTER] لذلك بالفعل عندما 
تقومون بتقديم المعلومات إلى

739
00:35:31,310 --> 00:35:35,720
عبر شكل عبر get،
فإن Flask بذكاء شديد يضع

740
00:35:35,720 --> 00:35:37,460
هذه المعلومات في مكان مختلف.

741
00:35:37,460 --> 00:35:40,370
لأنه حسب التعريف، كما زعمتُ
بشكل صحيح جدًا في وقت سابق،

742
00:35:40,370 --> 00:35:42,860
في request.args كل
أزواج القيم الرئيسية

743
00:35:42,860 --> 00:35:46,790
الموجودة في عنوان URL والتي
تأتي من طلب المستخدم.

744
00:35:46,790 --> 00:35:50,870
ولكن عندما تقومون بالتقديم عبر نشر،
لأسباب كنت أتمنى وجودها الآن وإلا

745
00:35:50,870 --> 00:35:54,930
يجب أن تصلوا بالفعل إلى تلك
القيم عبر متغير مختلف.

746
00:35:54,930 --> 00:35:58,760
إذن بدلاً من استخدام request.args، يجب
أن تستخدموا request.form هنا

747
00:35:58,760 --> 00:36:02,990
وهنا للتوضيح-- وتمت تسمية هذا
بشكل فظيع بالضبط للأسباب

748
00:36:02,990 --> 00:36:04,550
التي أعتقد أنني أتعثر بها هنا--

749
00:36:04,550 --> 00:36:09,380
لأنها في الواقع تأتي عبر
شكل، أو عبر get أو نشر.

750
00:36:09,380 --> 00:36:15,770
لكن يضع Flask الوسيطات في args
ويضع وسيطات نشر في شكل.

751
00:36:15,770 --> 00:36:18,020
مما يؤدي بشكل واضح
إلى حدوث التباس محتمل.

752
00:36:18,020 --> 00:36:24,920
لكن إذا مضيتُ قدمًا الآن
وقمتُ بتحميل هذا الإصدار من الموقع وآمل أنني،

753
00:36:24,920 --> 00:36:31,610
سأمضي قُدمًا الآن وأقوم بتشغيل Flask،
وأعيد تحميل تلك الصفحة، وأكتب ديفيد،

754
00:36:31,610 --> 00:36:36,240
وأعطيكم سكني، وأسجل 
وأقوم بالتسجيل بنجاح في Frosh Ims.

755
00:36:36,240 --> 00:36:39,020
أترون مدى سهولة برمجة الويب؟

756
00:36:39,020 --> 00:36:44,180
لذا آمل الآن أنه يمكننا على الأقل
التركيز على بنية ما قمتُ به

757
00:36:44,180 --> 00:36:45,590
ونبدأ في تطويرها الآن.

758
00:36:45,590 --> 00:36:49,910
لأنه لاحظوا أنني لم أقم بممارسة ما 
أشرتُ إليه منذ قليل.

759
00:36:49,910 --> 00:36:56,054
ما هي القاعدة التي خرقتُها
عندما عرضتُ success.html؟

760
00:36:56,054 --> 00:36:57,220
كيف وصلتُ لتلك النقطة؟

761
00:36:57,220 --> 00:36:57,630
أجل؟

762
00:36:57,630 --> 00:36:57,960
الجمهور: النسخ واللصق.

763
00:36:57,960 --> 00:36:59,543
ديفيد ج. مالان: أجل، قمتُ بالنسخ واللصق.

764
00:36:59,543 --> 00:37:02,450
وهذا مجددًا، عادة ليس الشيء الصحيح
للقيام به في البرمجة.

765
00:37:02,450 --> 00:37:05,550
قد يقوم بالوظيفة بسرعة فائقة،
لكن من المحتمل أنه الحدس الخاطئ،

766
00:37:05,550 --> 00:37:07,170
لأن الاحتفاظ به سيصبح
أصعب وأصعب.

767
00:37:07,170 --> 00:37:08,060
الآن، لمَ ذلك؟

768
00:37:08,060 --> 00:37:10,220
لقد قمنا بتشغيل HTML 
منذ أسبوعين.

769
00:37:10,220 --> 00:37:13,940
وتتذكرون من مجموعة المشاكل تلك
عندما كان يجب أن تقوموا بإنشاء صفحة رئيسية،

770
00:37:13,940 --> 00:37:17,540
من المحتمل أنكم قد وجدتم أنفسكم 
تقومون بالنسخ واللصق في صفحتين،

771
00:37:17,540 --> 00:37:20,930
أو ثلاث صفحات، أو أربع صفحات لأنكم أردتم أن تجعلوها
تبدو هي نفسها.

772
00:37:20,930 --> 00:37:23,720
وبالتالي فمن المنطقي
وجود بعض قواسم مشتركة بينها.

773
00:37:23,720 --> 00:37:28,730
لكن في HTML فقط، لم تكن هناك طريقة لقول
استخدم نفس التخطيط للموقع بأكمله--

774
00:37:28,730 --> 00:37:32,060
استخدم نفس مخطط اللون--
نفس الخطوط، CSS نفسها--

775
00:37:32,060 --> 00:37:35,511
لكن غيّر فقط بنية الصفحة
لكل صفحة على حدة.

776
00:37:35,511 --> 00:37:38,010
ولذا قد يقوم بعض منكم بذلك
في هذا الشأن بالتحديد وما ورائه

777
00:37:38,010 --> 00:37:39,880
على سبيل المثال الأسئلة المنشورة التي تسأل،
هل يمكنكم فعل هذا؟

778
00:37:39,880 --> 00:37:43,030
ولكنكم لا يمكنكم فعل ذلك حقًا في HTML فقط.

779
00:37:43,030 --> 00:37:46,050
لكن الآن يمكننا الوصول إلى Python،
لغة برمجة فعلية

780
00:37:46,050 --> 00:37:48,330
يمكنهم القيام بأشياء بطريقة منطقية،
الآن بالفعل يمكنكم

781
00:37:48,330 --> 00:37:50,490
البدء أيضًا في طرح تلك الأشياء.

782
00:37:50,490 --> 00:37:57,000
ولاحظوا في هذا الملف، success.html،
أيضًا في index.html،

783
00:37:57,000 --> 00:38:00,120
ما هي بعض القواسم المشتركة،
الكافية لقول؟

784
00:38:00,120 --> 00:38:02,520
الشكل في واحد منهم فقط،
لكن ما الأمر

785
00:38:02,520 --> 00:38:06,190
المتكرر أيضًا بصورة واضحة في كل مكان؟

786
00:38:06,190 --> 00:38:10,840
العنوان، رأس الصفحة بصورة عامة أكثر،
doctype في الأعلى،

787
00:38:10,840 --> 00:38:11,767
علامة البنية فقط.

788
00:38:11,767 --> 00:38:14,850
ويمكنكم تخيل أنه يمكن أن توجد تفاصيل أكثر 
مثل الموجودة في صفحاتكم الرئيسية

789
00:38:14,850 --> 00:38:18,350
التي أردتم أن تكون هي نفسها
عبر عدة صفحات.

790
00:38:18,350 --> 00:38:22,120
إذن دعونا نلقي نظرة بالفعل 
على إعادة تحليل هذه التعليمة البرمجية،

791
00:38:22,120 --> 00:38:25,090
التي كتبتُها مسبقًا
في froshim0،

792
00:38:25,090 --> 00:38:28,030
وسترون لمَ يبدو
بالفعل

793
00:38:28,030 --> 00:38:30,820
الحصول ليس فقط على ملفات متعددة،
يمثل كل منها

794
00:38:30,820 --> 00:38:34,060
طريقًا واحدًا من طرقكم
أو وجهات نظركم،

795
00:38:34,060 --> 00:38:37,720
ولكن أيضًا الحصول على هذا الملف 
المُسمى layout.html أمرًا منطقيًا.

796
00:38:37,720 --> 00:38:40,570
في Flask، عند إنشاء
تطبيق ويب كما تعلمون

797
00:38:40,570 --> 00:38:43,570
أنه سيتبع نمطًا بنائيًا معينًا،
قواسم مشتركة

798
00:38:43,570 --> 00:38:46,790
عبر جميع صفحاتكم، 
يمكنكم بالفعل القيام بذلك.

799
00:38:46,790 --> 00:38:52,570
لذا في هذا الملف هنا، layout.html هو مجموعة
كاملة من لغة HTML التي تم ترميزها بشكل ثابت.

800
00:38:52,570 --> 00:38:53,540
وهو أمر بسيط للغاية.

801
00:38:53,540 --> 00:38:57,830
لقد حصل على علامة HTML، وعلامة الرأس،
وعلامة العنوان، وعلامة البنية، وبضعة أشياء أخرى،

802
00:38:57,830 --> 00:38:59,870
لكن هذه هي البنية
العامة للصفحة.

803
00:38:59,870 --> 00:39:02,290
ولاحظوا أنها تحتوي على تلك الصيغة الغريبة
في المنتصف.

804
00:39:02,290 --> 00:39:04,960
يوجد في الجزء الأبيض هنا 
ما يُطلق عليه الكتلة.

805
00:39:04,960 --> 00:39:07,010
الآن هذا هو Flask المحدّد.

806
00:39:07,010 --> 00:39:09,760
تمامًا مثلما يدعم Flask تلك الأقواس المتعرجة
على اليسار واليمين

807
00:39:09,760 --> 00:39:12,520
التي تقوم ضَع قيمة
هنا،

808
00:39:12,520 --> 00:39:17,230
كما يدعم flask ذلك التدوين الآخر،
قوس متعرج ونسبة مئوية ونسبة مئوية قوس متعرج

809
00:39:17,230 --> 00:39:22,900
حيث بالفعل يتيح لكم وضع عناصر نائبة 
لأجزاء فعلية من HTML.

810
00:39:22,900 --> 00:39:26,050
ليس فقط متغيرات، 
لكن الأجزاء الفعلية من HTML.

811
00:39:26,050 --> 00:39:29,470
ولذا يمكنكم التفكير في هذا التخطيط
كنموذج أو قالب

812
00:39:29,470 --> 00:39:33,780
حرفيًا حيث ستقومون بإنشاء
جميع صفحاتكم الأخرى بناء عليه،

813
00:39:33,780 --> 00:39:37,180
لكنها ستختلف فى هذا السطر
وهذا السطر فقط.

814
00:39:37,180 --> 00:39:40,600
وسنضع HTML بقدر ما نريد 
بين علامات البنية،

815
00:39:40,600 --> 00:39:42,070
علامة الفتح وعلامة الإغلاق.

816
00:39:42,070 --> 00:39:45,860
هذا يشير فقط إلى Flask 
هذه هي الأشياء التي يجب تغييرها.

817
00:39:45,860 --> 00:39:50,070
لذا إذا نظرتُ الآن في index.html الخاص بي،
وكما تذكرون أنه في وقت سابق

818
00:39:50,070 --> 00:39:53,260
كان يحتوى على الشكل الخاص بي index.html.

819
00:39:53,260 --> 00:39:55,782
لاحظوا أن هذا هو الشكل،
ولقد أنهيتُه في وقت سابق.

820
00:39:55,782 --> 00:39:57,990
عندما مضيتُ قدمًا وكتبتُ
جميع عناوين سكن الطلاب الجدد،

821
00:39:57,990 --> 00:39:59,260
ليس فقط عنوانين منها.

822
00:39:59,260 --> 00:40:01,840
وسترون أن الملف يبدأ
تقريبًا هو نفسه

823
00:40:01,840 --> 00:40:03,980
ومن ثم يستمر بأشياء أخرى.

824
00:40:03,980 --> 00:40:07,090
لكن لاحظوا ما هو الشيء المفقود من
index.html هذه المرة.

825
00:40:07,090 --> 00:40:08,350
لا يوجد doctype.

826
00:40:08,350 --> 00:40:09,820
لا توجد علامة HTML.

827
00:40:09,820 --> 00:40:12,340
لا توجد علامة رأس، أو علامة عنوان، أو علامة بنية.

828
00:40:12,340 --> 00:40:14,770
تم استبعاد كل تلك
الأشياء المشتركة.

829
00:40:14,770 --> 00:40:18,280
لكن توجد تلك الصيغة الجديدة الغريبة،
مجددًا، هي Flask المُحدّد.

830
00:40:18,280 --> 00:40:22,090
هذا السطر الأول هو الرابط
بين هذا الملف والتخطيط.

831
00:40:22,090 --> 00:40:25,870
هذا السطر الأول يقول،
مرحبًا Flask، هذا ملف index.html

832
00:40:25,870 --> 00:40:29,140
يوّسع نطاق تعريف layout.html.

833
00:40:29,140 --> 00:40:31,660
لذا إنه يقول التقط هذا القالب
وأدخلني هناك.

834
00:40:31,660 --> 00:40:32,920
ما الذي تريد إدخاله؟

835
00:40:32,920 --> 00:40:34,300
الصيغة نفسها هنا.

836
00:40:34,300 --> 00:40:37,570
عندما تضع أشياء بالفعل
بين علامة الكتلة

837
00:40:37,570 --> 00:40:42,130
وعلامة نهاية الكتلة، الموجودة أدناه،
عندما تقولون لـ Flask،

838
00:40:42,130 --> 00:40:46,540
امضي قدمًا وخذ هذه الأشياء
وأدخلها في العنصر النائب في التخطيط.

839
00:40:46,540 --> 00:40:51,130
إذن في الوقت نفسه، يمكن أن تكون
أيضًا صفحة success متطورة أكثر قليلاً الآن.

840
00:40:51,130 --> 00:40:54,070
إذا انتقلتُ إلى success،
إنها ليست معقدة للغاية.

841
00:40:54,070 --> 00:40:55,960
وبصراحة، إنها لا تبدو 
مثل HTML بعد الآن

842
00:40:55,960 --> 00:40:58,600
لأننا نستخدم
هذه الميزات الأكثر ديناميكية.

843
00:40:58,600 --> 00:41:01,180
لكنها فقط تقول، مرحبًا Flask،
استخدم التخطيط نفسه

844
00:41:01,180 --> 00:41:03,410
لذا تم إنشاء الصفحة
بالضبط نفسها.

845
00:41:03,410 --> 00:41:07,420
لكن بالنسبة للبنية،
امضي قدمًا وأدخل هذه القيمة بدلاً من ذلك.

846
00:41:07,420 --> 00:41:10,225
لذا بالطبع، عندما تمضون قدمًا
وتقومون بتحميل رسالة success هذه،

847
00:41:10,225 --> 00:41:12,100
سترون هذه الرسالة
هنا-- ليس فقط success،

848
00:41:12,100 --> 00:41:14,226
أنا أوضحت ذلك هنا
وقلتُ أنكم مسجلون.

849
00:41:14,226 --> 00:41:16,600
حسنًا، ليس بالفعل،
ذلك بسبب عدم وجود قاعدة بيانات حتى الآن.

850
00:41:16,600 --> 00:41:19,240
لكن هذا سيقوم بإنشاء
صفحة HTML كاملة.

851
00:41:19,240 --> 00:41:20,290
وماذا عن failure؟

852
00:41:20,290 --> 00:41:22,810
قبل ذلك كنت فقط أخادع
وأقول فقط أعِد failure،

853
00:41:22,810 --> 00:41:24,640
علامة اقتباس وعلامة إنهاء الاقتباس،
ليست HTML على الإطلاق.

854
00:41:24,640 --> 00:41:27,100
ستكون صفحة failure
هي نفسها تقريبًا،

855
00:41:27,100 --> 00:41:30,220
لكن الآن يمكنني بالفعل 
أن أقدّم بعض النصوص الوصفية.

856
00:41:30,220 --> 00:41:33,400
تقول تلك البنية فقط يجب
أن تقدم اسمك وسكنك،

857
00:41:33,400 --> 00:41:37,040
حيث يتم تحذير المستخدم 
من عدم التعاون بشكل صحيح.

858
00:41:37,040 --> 00:41:40,120
لذا الآن صفحاتكم الرئيسية،
إذا استنتجتم من ذلك،

859
00:41:40,120 --> 00:41:43,630
أنه قد يحتوي على نفس التخطيط،
والجماليات، وشرائط القائمة،

860
00:41:43,630 --> 00:41:46,764
وكل تلك الأمور الرائعة،
لكن يجب أن يتغير المحتوى فقط.

861
00:41:46,764 --> 00:41:49,430
ويمكنكم الانتهاء من ذلك
فقط بالنسخ واللصق.

862
00:41:49,430 --> 00:41:51,970
لذا هناك، أيضًا، بالنسبة إلى سؤالك
في وقت سابق عن الديناميكية،

863
00:41:51,970 --> 00:41:54,420
لا يجب أن تأتي الديناميكية
فقط من المستخدم.

864
00:41:54,420 --> 00:41:58,180
يمكن أن تأتي أيضًا من البنية
بشكل ديناميكي من موقع ويب

865
00:41:58,180 --> 00:41:59,202
قائم على عدة صفحات.

866
00:41:59,202 --> 00:42:00,910
إذن في نهاية اليوم،
لن يكون لدى المتصفح أدنى فكرة عن

867
00:42:00,910 --> 00:42:05,560
وجود Python،
ولن يكون معتادًا على استخدام Flask.

868
00:42:05,560 --> 00:42:08,020
ما تزال جميع المتصفحات
ترى أنها صفحة HTML.

869
00:42:08,020 --> 00:42:10,030
لكن ما يقوم به Flask وPython بدورها
من أجلنا

870
00:42:10,030 --> 00:42:13,630
هو إنشاء تلك الصفحة بشكل ديناميكي،
حيث تتبع القواعد

871
00:42:13,630 --> 00:42:15,850
منذ أسبوعين
حيث بدأنا مناقشة HTML وCSS،

872
00:42:15,850 --> 00:42:19,654
وتتبع قواعد الأسبوع الماضي
بشأن كيفية عمل Python.

873
00:42:19,654 --> 00:42:22,606
أي أسئلة؟

874
00:42:22,606 --> 00:42:25,558
الجمهور: إذن حتى لو [INAUDIBLE]

875
00:42:25,558 --> 00:42:33,930


876
00:42:33,930 --> 00:42:35,070
ديفيد ج. مالان: إنها ليست كذلك.

877
00:42:35,070 --> 00:42:36,180
سؤال جيد.

878
00:42:36,180 --> 00:42:39,300
تلك الصيغة الجديدة، الأقواس المتعرجة المزدوجة
التي رأيناها قبل ذلك والآن

879
00:42:39,300 --> 00:42:43,410
القوس المتعرج علامات النسبة المئوية،
هذه بالفعل لغة جديدة حتى الآن

880
00:42:43,410 --> 00:42:44,420
يُطلق عليها jinja--

881
00:42:44,420 --> 00:42:48,617
J-I-N-J-A-- وهي
لغة نموذجية.

882
00:42:48,617 --> 00:42:51,450
وتوجد العشرات من تلك الأشياء 
في العالم، وقدّم الأشخاص

883
00:42:51,450 --> 00:42:52,740
الصيغة الخاصة بهم.

884
00:42:52,740 --> 00:42:56,370
والسبب وراء الصيغة الغريبة
هو أن مخترع jinja

885
00:42:56,370 --> 00:42:58,920
قد فكّر بشكل افتراضي في
أنه لا توجد لغة أخرى

886
00:42:58,920 --> 00:43:01,530
تستخدم قوس متعرج
وعلامة النسبة المئوية

887
00:43:01,530 --> 00:43:03,156
وعلامة النسبة المئوية وقوس متعرج.

888
00:43:03,156 --> 00:43:05,030
وبالتالي قرر،
أنتم تعرفون ذلك،

889
00:43:05,030 --> 00:43:08,370
أنا سأستخدم تلك الصيغة
لأنها ستبدو مختلفة عن HTML،

890
00:43:08,370 --> 00:43:11,970
وCSS، وPython 
لذا إطار العمل ذلك مثل Flask

891
00:43:11,970 --> 00:43:14,397
لا يخلط بينها وبين شيء آخر.

892
00:43:14,397 --> 00:43:18,370
الجمهور: إذن هل يجب أن تقوم بتحميل ذلك في
[INAUDIBLE]، أم يحدث ذلك بشكل تلقائي؟

893
00:43:18,370 --> 00:43:20,120
ديفيد مالان: يتم دعمه
بشكل تلقائي.

894
00:43:20,120 --> 00:43:23,550
إذن Flask بشكل افتراضي يدعم jinja.

895
00:43:23,550 --> 00:43:25,890
قد تظهر مع الصيغة
النموذجية الخاصة بها.

896
00:43:25,890 --> 00:43:29,182
لكن أيًا كان الشخص الذي اخترع Flask
فقد قرر أنا لا أحتاج إلى إعادة ابتكار تلك العجلة،

897
00:43:29,182 --> 00:43:31,140
قام شخص آخر بالفعل بإنشاء
لغة نموذجية

898
00:43:31,140 --> 00:43:32,640
وهي تعطيني هذه الدالة.

899
00:43:32,640 --> 00:43:34,785
لذا سأقوم
بدمج عملنا معًا في عمل واحد.

900
00:43:34,785 --> 00:43:36,660
ولم أطلق عليه 
لغة منذ قليل،

901
00:43:36,660 --> 00:43:39,257
لأنه بصراحة ،HTML، CSS
--Python، JavaScript

902
00:43:39,257 --> 00:43:41,340
أعني، لدينا بالفعل
لغات كثيرة هنا.

903
00:43:41,340 --> 00:43:43,810
لكن jinja، في الواقع،
لغة أخرى حتى الآن.

904
00:43:43,810 --> 00:43:46,050
إنها ليست مجرد لغة برمجة
في حد ذاتها،

905
00:43:46,050 --> 00:43:48,180
على الرغم من أنها ستحتوي على
بعض ميزات التحكم في التدفق

906
00:43:48,180 --> 00:43:49,471
التي سنراها في غضون لحظات.

907
00:43:49,471 --> 00:43:51,150
إنها فقط محدودة أكثر من Python.

908
00:43:51,150 --> 00:43:52,100
أي أسئلة أخرى؟

909
00:43:52,100 --> 00:43:54,780
الجمهور: هل من الممكن الجمع بين ملفي
success وFailure. HTML

910
00:43:54,780 --> 00:43:57,495
في ملف واحد فقط ليكون التصميم أفضل؟

911
00:43:57,495 --> 00:43:58,620
ديفيد مالان: سؤال جيد.

912
00:43:58,620 --> 00:44:03,180
هل يمكن أن تجمع بين صفحتي success
وfailure في صفحة واحدة؟

913
00:44:03,180 --> 00:44:04,110
إجابة مختصرة، أجل.

914
00:44:04,110 --> 00:44:07,110
ودعوني لا أعرض ذلك الآن، لأن الأمر
سيكون أكثر تعقيدًا.

915
00:44:07,110 --> 00:44:11,370
لكن أجل، قد أتخيل تمرير متغيرات فيها
ذلك أمر منطقي--

916
00:44:11,370 --> 00:44:12,420
صحيح أم خاطئ--

917
00:44:12,420 --> 00:44:13,800
فقط في أحد هذه القوالب.

918
00:44:13,800 --> 00:44:17,190
وربما أطلق على القالب الجديد
result.html.

919
00:44:17,190 --> 00:44:20,700
بالفعل يمكنني بعد ذلك أن أحصل على شرط
إذا في القالب الخاص بي الذي

920
00:44:20,700 --> 00:44:23,100
يقول إذا كانت النتيجة صحيحة، قل هذا.

921
00:44:23,100 --> 00:44:25,510
وأيضًا إذا كانت النتيجة
خاطئة، قل ذلك الشيء الآخر.

922
00:44:25,510 --> 00:44:27,030
لذا يمكنكم فعل هذا، أجل.

923
00:44:27,030 --> 00:44:31,045
بشكل عام، على الرغم من ذلك، من المحتمل
أنه من الجيد الحفاظ على الرسائل منفصلة

924
00:44:31,045 --> 00:44:32,670
إذا كانت تقوم بشيء آخر من الناحية الوظيفية.

925
00:44:32,670 --> 00:44:35,430
في النهاية، هذه الملفات
صغيرة جدًا على كل حال.

926
00:44:35,430 --> 00:44:36,112
أجل؟

927
00:44:36,112 --> 00:44:38,070
الجمهور: فقط كسؤال،
ماذا يرى المستخدم

928
00:44:38,070 --> 00:44:42,000
إذا كانت ستفتح وحدة التحكم
في تصحيح الأخطاء على Chrome

929
00:44:42,000 --> 00:44:46,474
ونظر فيها، ما الذي يراه
حيث HTML هي التي تظهر؟

930
00:44:46,474 --> 00:44:47,890
ديفيد مالان: سؤال جيد حقًا.

931
00:44:47,890 --> 00:44:48,848
ما الذي يراه المستخدم؟

932
00:44:48,848 --> 00:44:51,870
يمكننا الإجابة على ذلك حرفيًا بمجرد
فتح Chrome وفتح

933
00:44:51,870 --> 00:44:53,970
عرض مصدر الصفحة أو مركز التحكم.

934
00:44:53,970 --> 00:44:55,290
هذا ما يراه المتصفح.

935
00:44:55,290 --> 00:44:58,770
لذا عندما قلتُ في وقت سابق أن المتصفح
ليس لديه أي فكرة عن أن Python أو Flask

936
00:44:58,770 --> 00:45:00,720
متضمنتان،
هذا، بالفعل، أمر صحيح.

937
00:45:00,720 --> 00:45:02,970
لأن ما يستقبله المتصفّح
في نهاية الأمر

938
00:45:02,970 --> 00:45:06,397
هو فقط هذه،
HTML التي تم إنشاؤها بشكل ديناميكي.

939
00:45:06,397 --> 00:45:06,980
سؤال جيد.

940
00:45:06,980 --> 00:45:07,774
أجل؟

941
00:45:07,774 --> 00:45:11,092
الجمهور: [INAUDIBLE] هل يمكنك أيضًا
وضع تعليمة Python البرمجية هناك،

942
00:45:11,092 --> 00:45:11,997
أم HTML فقط؟

943
00:45:11,997 --> 00:45:12,580
سؤال جيد.

944
00:45:12,580 --> 00:45:14,413
سنرى أشياء أكثر عن ذلك
في غضون لحظات.

945
00:45:14,413 --> 00:45:17,840
السؤال هو، هل يمكنك بين
القوس المتعرج وعلامات النسبة المئوية

946
00:45:17,840 --> 00:45:19,630
وضع تعليمة Python البرمجية بالفعل؟

947
00:45:19,630 --> 00:45:23,170
يمكنك وضع أشياء تبدو مثل
تعليمة Python البرمجية، ولكن ليس كل Python.

948
00:45:23,170 --> 00:45:24,715
ولذا أكثر من ذلك بعض الشيء.

949
00:45:24,715 --> 00:45:26,200
الجمهور: هل توجد دالة
تقوم بالاستدعاء أو شيء من هذا القبيل؟

950
00:45:26,200 --> 00:45:27,700
ديفيد مالان: فقط دالات معينة.

951
00:45:27,700 --> 00:45:30,310
اللغات النموذجية، قصة قصيرة
مطولة، هي أدوات تحديد الوصول لذا

952
00:45:30,310 --> 00:45:33,310
هي ليست معبرة تمامًا مثل
لغات برمجة حقيقية.

953
00:45:33,310 --> 00:45:36,115
وإلا كنتم معرضين لاختراقات
محتملة.

954
00:45:36,115 --> 00:45:38,740
تريدون أن تكون دالتها
محدودة للغاية لأنها

955
00:45:38,740 --> 00:45:42,820
فقط عن عرض البيانات، وليست عن التفكير
أو القيام بشكل عام بما هو منطقي.

956
00:45:42,820 --> 00:45:43,787
المزيد حول ذلك في غضون لحظات.

957
00:45:43,787 --> 00:45:45,370
حسنًا، كان ذلك كثيرًا في مرة واحدة.

958
00:45:45,370 --> 00:45:48,161
دعونا نأخذ استراحة لمدة خمس دقائق،
هنا، قم بتشغيل بعض الموسيقى، وسنعود،

959
00:45:48,161 --> 00:45:49,771
وسنجعل هذا يعمل بشكل أفضل.

960
00:45:49,771 --> 00:45:51,310
حسنًا، لقد عدنا.

961
00:45:51,310 --> 00:45:54,820
إذن لنلخص ما توصلنا إليه في
froshim0، نحن الآن

962
00:45:54,820 --> 00:45:58,120
لدينا هذه البنية والتي
هي تقليدية إلى حد كبير.

963
00:45:58,120 --> 00:46:00,640
أي تطبيق ويب
نقوم بإنشائه هنا

964
00:46:00,640 --> 00:46:04,540
سيتبع هذا النمط من امتلاك نقطة دخول
application.py حيث

965
00:46:04,540 --> 00:46:08,112
تبدأ كل الأشياء الممتعة،
ملف layout.html

966
00:46:08,112 --> 00:46:09,820
في دليل القوالب الخاص بكم
الذي يحدّد

967
00:46:09,820 --> 00:46:13,900
الموقع بالكامل وأي قواسم مشتركة،
ومن ثم صفحة واحدة أو بضع صفحات أخرى

968
00:46:13,900 --> 00:46:17,440
بالفعل تمثل وجهة نظركم الفردية
التي تتوافق مع طريق واحد أو أكثر

969
00:46:17,440 --> 00:46:18,760
من طرقكم الفعلية.

970
00:46:18,760 --> 00:46:21,430
لذا نحن الآن عند نقطة
خط الأساس الثابت،

971
00:46:21,430 --> 00:46:25,000
لكن هل تعمقنا في هذا بالطريقة الصحيحة،
قد لا يكون الأمر منطقيًا

972
00:46:25,000 --> 00:46:27,920
لماذا قمنا
بتلك التحليلات المختلفة.

973
00:46:27,920 --> 00:46:29,260
لذا دعونا الآن نقوم بتحسين ذلك.

974
00:46:29,260 --> 00:46:31,930
لأنه بالطبع، إذا
نظرتم في success.html،

975
00:46:31,930 --> 00:46:33,410
فإنه يزعم فقط أنكم مسجلون.

976
00:46:33,410 --> 00:46:34,580
حسنًا، ليس تمامًا.

977
00:46:34,580 --> 00:46:40,730
لأن في application.py، هل فعلنا
أي شيء باستخدام معلومات المستخدم؟

978
00:46:40,730 --> 00:46:41,230
لا.

979
00:46:41,230 --> 00:46:43,146
لقد تحقّقنا فقط، هل
أعطانا معلومات؟

980
00:46:43,146 --> 00:46:44,560
وإذا كان الأمر كذلك، فإننا نزعم success.

981
00:46:44,560 --> 00:46:48,040
وأيضًا إذا نسي اسمه و/أو
مسكنه، فنزعم failure.

982
00:46:48,040 --> 00:46:51,550
إذن ما هي بنية البيانات
في Python

983
00:46:51,550 --> 00:46:53,026
حيث يمكننا تخزين المسجلين؟

984
00:46:53,026 --> 00:46:55,150
ليست لدينا قواعد بيانات
حتى الآن، ليست لدينا SQL بعد.

985
00:46:55,150 --> 00:46:56,340
هذا في الأسبوع المقبل.

986
00:46:56,340 --> 00:46:57,040
الجمهور: مصفوفة.

987
00:46:57,040 --> 00:46:59,415
ديفيد ج. مالان: أجل، يمكننا
استخدام مصفوفة، أو ما هو معروف

988
00:46:59,415 --> 00:47:00,430
بالقائمة في Python.

989
00:47:00,430 --> 00:47:02,500
لذا دعوني أقترح كيف يمكننا القيام بذلك.

990
00:47:02,500 --> 00:47:08,050
دعوني بالفعل أفتح froshims1 
للمرة الثانية في هذا البرنامج.

991
00:47:08,050 --> 00:47:10,510
وفي application.py، لاحظوا ذلك.

992
00:47:10,510 --> 00:47:12,970
في الجزء العلوي من الملف،
لا أقوم فقط

993
00:47:12,970 --> 00:47:16,390
بإنشاء تطبيقي باستخدام
السطر نفسه كما كان من قبل،

994
00:47:16,390 --> 00:47:19,990
ولقد أشرتُ إلى أشياء هذه المرة
مسبقًا باستخدام رمز علامة التجزئة،

995
00:47:19,990 --> 00:47:22,660
لاحظوا أنني زعمتُ أن
في السطر 6 والسطر 7 هنا، هنا

996
00:47:22,660 --> 00:47:25,540
قائمة فارغة لجميع
الطلاب الذين سجلوا.

997
00:47:25,540 --> 00:47:27,479
بهذه الطريقة يمكننا الاحتفاظ
بالمعلومات.

998
00:47:27,479 --> 00:47:29,770
وقمنا بهذا فقط بشكل موجز
آخر مرة، لكن هل يتذكر أي شخص

999
00:47:29,770 --> 00:47:33,330
كيف نضيف
شيئًا إلى قائمة في Python؟

1000
00:47:33,330 --> 00:47:35,100
باستخدام أي دالة؟

1001
00:47:35,100 --> 00:47:36,030
Append.

1002
00:47:36,030 --> 00:47:38,594
إذن إذا كانت لديكم دالة append.
في نهاية اسم قائمة،

1003
00:47:38,594 --> 00:47:39,760
يمكنكم إضافة شيء إليها.

1004
00:47:39,760 --> 00:47:41,110
إذن إلى أين سيؤدي ذلك؟

1005
00:47:41,110 --> 00:47:44,841
حسنًا، هذا طريقي الخاص بخط مائل،
يشير، مجددًا، إلى الحصول بشكل افتراضي.

1006
00:47:44,841 --> 00:47:46,840
هذا هو الطريق الافتراضي
الذي قد يحصل عليه شخص،

1007
00:47:46,840 --> 00:47:50,470
وسيرى index.html، الذي
يحتوي على هذا الشكل.

1008
00:47:50,470 --> 00:47:55,270
إذا قمتُ بالتمرير الآن، سترون أن
لديّ طريق تسجيل كما كان لدي مسبقًا.

1009
00:47:55,270 --> 00:47:58,330
لكنني أقوم بخطوة واحدة إضافية.

1010
00:47:58,330 --> 00:48:01,432
ما هو السطر الجديد هنا، لأكون واضحًا؟

1011
00:48:01,432 --> 00:48:03,100
نعم، 26.

1012
00:48:03,100 --> 00:48:05,420
إذن يمكنني تنفيذ هذا
بطرق متعددة.

1013
00:48:05,420 --> 00:48:08,120
لكن التفصيل الرئيسي هو أنني
أُشير إلى اسم القائمة-- students،

1014
00:48:08,120 --> 00:48:09,620
لكن يمكنني تسميتها بأي شيء.

1015
00:48:09,620 --> 00:48:12,870
.append، كما اقترح شخص ما، وهي كيف تضيفون
شيئًا إلى نهاية القائمة.

1016
00:48:12,870 --> 00:48:14,328
ومن ثم يمكنني إضافة أي شيء أريده.

1017
00:48:14,328 --> 00:48:16,514
لأبقي الأمر بسيطًا،
سأقوم فقط بإضافة سلسلة.

1018
00:48:16,514 --> 00:48:18,430
وسأبقيها
بسيطة للغاية وأقول

1019
00:48:18,430 --> 00:48:21,940
فقط السلسلة ذاك وذاك
من كذا وكذا هي سكن.

1020
00:48:21,940 --> 00:48:25,480
إذن دايفيد من ماثيوز هول،
أو براين من أي مكان.

1021
00:48:25,480 --> 00:48:28,771
وهكذا لدينا هنا عناصر نائبة
عبر استخدام سلاسل f في Python.

1022
00:48:28,771 --> 00:48:30,520
إذن فإن هذا ليس له
علاقة بـ Flask، هذا

1023
00:48:30,520 --> 00:48:33,550
ليس له علاقة بـ jinja أو
أي شيء تحدثنا عنه للتو.

1024
00:48:33,550 --> 00:48:37,450
هذا متعلق بشكل كامل بصيغة
الأسبوع الماضي في Python فقط.

1025
00:48:37,450 --> 00:48:42,050
إذن هذا يُلحق بتلك القائمة
هذا الاسم من هذا السكن.

1026
00:48:42,050 --> 00:48:44,830
إذن دعونا نمضي قدمًا الآن
ونُجرّب هذا الإصدار.

1027
00:48:44,830 --> 00:48:50,200
إذا انتقلتُ إلى المصدر الفرعي ودليل
تعليمة اليوم البرمجية في froshims1

1028
00:48:50,200 --> 00:48:54,010
وقمتُ بتشغيل flask، سنرى
عنوان URL الذي يمكنني زيارته الآن.

1029
00:48:54,010 --> 00:48:56,630
دعوني أمضي قدمًا
وأفتح ذلك من froshims1.

1030
00:48:56,630 --> 00:48:59,140
لاحظوا أن لديّ قائمة
منسدلة كاملة الآن.

1031
00:48:59,140 --> 00:49:02,890
دعوني أمضي قدمًا وأقول ديفيد، ولكن
لن أخبركم بالسكن الخاص بي

1032
00:49:02,890 --> 00:49:04,720
حتى الآن وأحاول التسجيل.

1033
00:49:04,720 --> 00:49:07,210
الآن أرى رسالة ودودة أكثر،
وليست رسالة failure فقط.

1034
00:49:07,210 --> 00:49:10,030
وهذا بسبب القالب
الجديد المُحسّن.

1035
00:49:10,030 --> 00:49:12,670
حسنًا، سأمضي قدمًا وأكون ديفيد،
وسأكون من ماثيوز هنا.

1036
00:49:12,670 --> 00:49:14,800
دعوني أمضي قدمًا وأُقوم بالتسجيل وها هو ذا.

1037
00:49:14,800 --> 00:49:17,344
الآن نرى أن ديفيد من
ماثيوز تم تسجيله.

1038
00:49:17,344 --> 00:49:20,260
ويبدو أنه بشكل مفاجئ أصبح
في شكل قائمة نقطية جديدة.

1039
00:49:20,260 --> 00:49:22,129
ولكن في الواقع من أين جاء ذلك؟

1040
00:49:22,129 --> 00:49:22,920
حسنًا، لا أعلم.

1041
00:49:22,920 --> 00:49:23,836
دعوني أحاول ذلك مجددًا.

1042
00:49:23,836 --> 00:49:26,860
دعوني أعود لأكتب خط مائل، وهو
الطريق الذي يعطيني الشكل.

1043
00:49:26,860 --> 00:49:29,765
دعوني أمضي قدمًا وأكتب ليس
ديفيد هذه المرة، ولكن لنقل، براين.

1044
00:49:29,765 --> 00:49:31,140
براين، أي سكن تعيش فيه؟

1045
00:49:31,140 --> 00:49:32,080
الجمهور: بيني بايكر.

1046
00:49:32,080 --> 00:49:33,121
ديفيد مالان: بيني بايكر.

1047
00:49:33,121 --> 00:49:36,070
إذن دعوني أختار هذا من القائمة
بدلاً من ذلك وأنقر فوق تسجيل.

1048
00:49:36,070 --> 00:49:37,690
والآن نرى براين من بيني بايكر.

1049
00:49:37,690 --> 00:49:39,970
إذن بطريقة ما يقوم التطبيق
بتغيير الحالة،

1050
00:49:39,970 --> 00:49:43,730
ولاحظوا أن عنوان URL الذي نحن فيه
يُسمى خط مائل المُسجلون.

1051
00:49:43,730 --> 00:49:47,530
إذن يبدو أن ذلك طريق ثالث هذه المرة
وهو على ما يبدو غير تفاعلي

1052
00:49:47,530 --> 00:49:50,480
في حد ذاته، إنه يُظهر فقط
قائمة الطلاب المُسجلِين.

1053
00:49:50,480 --> 00:49:53,470
إذن دعونا فقط نضع
قبعة التصميم المشهورة.

1054
00:49:53,470 --> 00:49:56,950
إذا قمنا بتنفيذ
طريق خط مائل المُسجلون

1055
00:49:56,950 --> 00:50:03,976
بشكل منطقي ما الذي يجب أن تفعله هذه التعليمة البرمجية
في تعليمة برمجية زائفة لفظية، إذا صح التعبير؟

1056
00:50:03,976 --> 00:50:05,310
الجمهور: تكرار حلقي من النوع for؟

1057
00:50:05,310 --> 00:50:07,600
دايفيد مالان: مثل تكرار حلقي من 
النوع for، يكرّر ماذا؟

1058
00:50:07,600 --> 00:50:10,170
الجمهور: في القائمة التي
تحفظ جميع المُسجلين.

1059
00:50:10,170 --> 00:50:11,100
ديفيد مالان: أجل.

1060
00:50:11,100 --> 00:50:13,140
يكرر قائمة الطلاب
التي

1061
00:50:13,140 --> 00:50:14,640
تحتوي على جميع هؤلاء المُسجلين.

1062
00:50:14,640 --> 00:50:18,990
ويحتوي القالب، في الوقت نفسه، على الأرجح
على علامة LI لعنصر قائمة

1063
00:50:18,990 --> 00:50:22,480
وعلامة UL لقائمة غير مرتبة،
وهذا يعطيني قائمة نقطية.

1064
00:50:22,480 --> 00:50:23,740
إذن، دعونا نلقي نظرة على ذلك.

1065
00:50:23,740 --> 00:50:25,990
إذن، كيف نتبع هذه الآثار؟

1066
00:50:25,990 --> 00:50:29,310
حسنًا، إذا قمتُ بالتمرير إلى أعلى في
application.py، سنرى

1067
00:50:29,310 --> 00:50:31,440
طريق يُسمي خط مائل المُسجلون.

1068
00:50:31,440 --> 00:50:33,840
وسترون أن
كل ما يفعله على ما يبدو

1069
00:50:33,840 --> 00:50:36,860
هو أنه يقوم بإرجاع قالب
يُسمي registered.html،

1070
00:50:36,860 --> 00:50:40,320
حيث يُعد registered.html على الأرجح
قالب يقوم بإنشاء تلك القائمة.

1071
00:50:40,320 --> 00:50:42,900
ولكن هناك شيء
مختلف هذه المرة.

1072
00:50:42,900 --> 00:50:44,160
أقوم بتمرير وسيطة.

1073
00:50:44,160 --> 00:50:45,390
ولقد رأينا ذلك في وقت سابق.

1074
00:50:45,390 --> 00:50:48,720
عندما أردتُ تمرير اسم
يساوي ديفيد أو اسم يساوي براين،

1075
00:50:48,720 --> 00:50:51,450
فقط سحبتُ ذلك من متغير.

1076
00:50:51,450 --> 00:50:54,564
هذه المرة لن أقوم بكتابة request.args،
ولن أقوم بكتابة request.form.

1077
00:50:54,564 --> 00:50:55,605
لأن ما هو students؟

1078
00:50:55,605 --> 00:50:58,400


1079
00:50:58,400 --> 00:51:00,750
من أين أتى هذا؟

1080
00:51:00,750 --> 00:51:02,510
من هذه القائمة في الأعلى.

1081
00:51:02,510 --> 00:51:06,470
تذكرون أن لدينا هذا المتغير الشامل
في أعلى البرنامج، students،

1082
00:51:06,470 --> 00:51:08,240
الذي تتم تهيئته إلى قائمة فارغة.

1083
00:51:08,240 --> 00:51:11,990
لكن تذكرون أننا نستمر في إلحاقه
في طريق التسجيل الخاص بي.

1084
00:51:11,990 --> 00:51:13,850
إذن يمكنني أن أمضي قدمًا
وأقول، أتعلمون ماذا؟

1085
00:51:13,850 --> 00:51:18,020
امضي قدمًا وقُم بالتمرير في قالب register.html--
أو بدلاً من ذلك، قائمة--

1086
00:51:18,020 --> 00:51:21,284
تُسمى students وقيمتها
هي ذلك بالضبط.

1087
00:51:21,284 --> 00:51:24,200
ومجددًا، هذا الأمر يبدو غبيًا حيث يكون
لديكم الكلمة نفسها على يسار

1088
00:51:24,200 --> 00:51:26,121
ويمين اسم المتغير.

1089
00:51:26,121 --> 00:51:27,370
يمكنكم القيام بذلك بشكل مختلف.

1090
00:51:27,370 --> 00:51:30,290
مجددًا، يمكنكم أن تقولوا foo، يمكنكم أن تقولوا
x أو y أو أي شيء.

1091
00:51:30,290 --> 00:51:32,670
لكن بصراحة، يبدو منطقيًا أكثر،
فقط عندما تقومون

1092
00:51:32,670 --> 00:51:36,230
بتمرير اسم المتغير نفسه الذي
تهتمون لأمره بحيث يمكن أن يرى القالب

1093
00:51:36,230 --> 00:51:37,320
ذلك بالضبط.

1094
00:51:37,320 --> 00:51:38,570
إذن ما هي الآثار التالية؟

1095
00:51:38,570 --> 00:51:40,653
إذا أردتُ أن أفهم
بالضبط ما يحدث،

1096
00:51:40,653 --> 00:51:43,600
أي ملف من المحتمل أنه يجب أن أفتحه بعد ذلك؟

1097
00:51:43,600 --> 00:51:44,970
ربما register.html.

1098
00:51:44,970 --> 00:51:46,150
إذن دعونا ننتقل إلى هناك.

1099
00:51:46,150 --> 00:51:48,260
إنها في دليل القوالب
حسب التعريف،

1100
00:51:48,260 --> 00:51:51,850
وسترون، في الواقع، رسالة failure
التي تتيح لي فحص الأخطاء.

1101
00:51:51,850 --> 00:51:55,700
الفهرس، الذي يحتوي على الشكل؛ التخطيط،
الذي يحتوي على البنية العامة؛

1102
00:51:55,700 --> 00:51:58,390
وأخيرًا، registered.html.

1103
00:51:58,390 --> 00:52:01,960
والآن يمكننا الإجابة على السؤال الذي
ألقيته في وقت سابق عن تعليمة Python البرمجية

1104
00:52:01,960 --> 00:52:03,020
في القالب.

1105
00:52:03,020 --> 00:52:05,660
إذن هذا يبدو متطور أكثر
من قبل،

1106
00:52:05,660 --> 00:52:07,760
لكن لاحظوا أنه يتبع نمطًا.

1107
00:52:07,760 --> 00:52:10,360
يوسّع Register.html ذلك التخطيط نفسه.

1108
00:52:10,360 --> 00:52:13,120
إذن يستعير من النموذج نفسه، لذلك يبدو نفسه.

1109
00:52:13,120 --> 00:52:16,570
إن بنية هذه الصفحة، على الرغم من ذلك،
هي هذا المقتطف من HTML فقط.

1110
00:52:16,570 --> 00:52:19,390
أعطني قائمة غير مرتبة،
مفتوحة ومغلقة، وهذا

1111
00:52:19,390 --> 00:52:21,040
ما يمكنكم القيام به الآن باستخدام jinja.

1112
00:52:21,040 --> 00:52:23,260
مجددًا، إنها تقريبًا
مُطابقة للغة Python، إذن

1113
00:52:23,260 --> 00:52:26,360
لا داعي للقلق بشأن التفكير
في تعلم لغة أخرى بعد.

1114
00:52:26,360 --> 00:52:28,820
إنها مجرد مجموعة فرعية من
Python بشكل أساسي.

1115
00:52:28,820 --> 00:52:33,370
إذن إذا أردتُ الإخراج في
قائمة جميع الطلاب،

1116
00:52:33,370 --> 00:52:37,262
أستخدم صيغة jinja هنا، صيغة القالب 
بقوس متعرج نسبة مئوية.

1117
00:52:37,262 --> 00:52:38,720
وأقول for student في students.

1118
00:52:38,720 --> 00:52:42,344
تمامًا مثل Python، والذي ينتج عنه
تكرار تلك القائمة.

1119
00:52:42,344 --> 00:52:43,760
ومن ثم ما الذي أُريد إخراجه؟

1120
00:52:43,760 --> 00:52:46,810
حسنًا، يمكننا أن نستعير الأقواس
المتعرجة من مثال الاسم

1121
00:52:46,810 --> 00:52:51,460
ونقوم فقط بفتح عنصر قائمة، ونُدخل
اسم الطالب، ونغلق عنصر القائمة.

1122
00:52:51,460 --> 00:52:53,080
ومن ثم endfor.

1123
00:52:53,080 --> 00:52:55,240
إذن هذا هو الشيء
الوحيد الغبي باستخدام القوالب.

1124
00:52:55,240 --> 00:52:58,360
بينما في Python الصحيحة،
تذكرون أنه يمكنكم فقط

1125
00:52:58,360 --> 00:53:00,550
أن تقولوا for student في
students، لديكم نقطتين

1126
00:53:00,550 --> 00:53:02,740
ومن ثم تعالج المسافة البادئة كل شيء.

1127
00:53:02,740 --> 00:53:04,720
هذه المشكلة
في عالم HTML

1128
00:53:04,720 --> 00:53:07,660
هي أن المتصفحات تتذكر
تجاهُل جميع المسافات،

1129
00:53:07,660 --> 00:53:10,750
على سبيل المثال المسافة ليس لها أهمية
خاصة، ولكن لها أهمية خاصة في Python.

1130
00:53:10,750 --> 00:53:14,020
إذن، الطريقة التي يحل بها الأشخاص
هذا هي حرفيًا،

1131
00:53:14,020 --> 00:53:16,090
وإن كانت غريبة قليلاً، قول endfor--

1132
00:53:16,090 --> 00:53:17,817
كلمة واحدة، بدون مسافة.

1133
00:53:17,817 --> 00:53:18,400
وهذا كل شيء.

1134
00:53:18,400 --> 00:53:20,800
وتساعدكم المسافات البادئة على
قراءة شيء كهذا.

1135
00:53:20,800 --> 00:53:22,694
إذن ما هي HTML التي أقوم باسترجاعها؟

1136
00:53:22,694 --> 00:53:23,860
يمكنني بالفعل النظر في هذا.

1137
00:53:23,860 --> 00:53:26,200
دعوني أمضي قدمًا وأعرض
مصدر الصفحة في Chrome،

1138
00:53:26,200 --> 00:53:28,577
وسترون أنها ليست جميلة تمامًا
بقدر ما قد تكون مثالية

1139
00:53:28,577 --> 00:53:31,410
لأن هناك الكثير من المسافات
والتي تأتي من تلك القوالب

1140
00:53:31,410 --> 00:53:33,340
عندما قمتُ بطباعة
هذه، أيضًا.

1141
00:53:33,340 --> 00:53:36,490
ولكن هذا صحيح من الناحية البنائية،
وسأقوم بإخراج

1142
00:53:36,490 --> 00:53:40,120
هذا الجزء داخل هذا التخطيط بشكل ديناميكي.

1143
00:53:40,120 --> 00:53:42,742
أي أسئلة، بعد ذلك، حول هذا؟

1144
00:53:42,742 --> 00:53:47,220
الجمهور: إذن إذا أعدنا تشغيل
الخادم، أيًا كان ما تم تخزينه

1145
00:53:47,220 --> 00:53:49,180
في القائمة، ويختفى، أليس كذلك؟

1146
00:53:49,180 --> 00:53:50,305
ديفيد مالان: سؤال جيد.

1147
00:53:50,305 --> 00:53:51,940
دعونا نوقف تشغيل Flask باستخدام control-c.

1148
00:53:51,940 --> 00:53:53,590
دعونا نُعيد تشغيل الخادم.

1149
00:53:53,590 --> 00:53:57,640
ودعوني أعود إلى طريق
المسجلين الخاص بي وأعيد التحميل.

1150
00:53:57,640 --> 00:54:01,090
وللأسف، نعم، هذه ليست أفضل
طريقة لتسجيل الطلاب في رياضة.

1151
00:54:01,090 --> 00:54:04,570
لأنه إذا أصبح الخادم غير متصل،
أو فقد الطاقة، أو قمتم بالضغط على control-c،

1152
00:54:04,570 --> 00:54:06,670
بالتأكيد ستفقدون الجميع بالفعل.

1153
00:54:06,670 --> 00:54:08,620
ولاحظوا، أيضًا، على
الرغم من أننا بشكل عام

1154
00:54:08,620 --> 00:54:12,850
رفضنا استخدام المتغيرات الشاملة،
وهو الأمر نفسه بالنسبة لقائمة الطلاب هذه،

1155
00:54:12,850 --> 00:54:17,170
لمَ قمتُ بتعريفها
هنا بالأعلى في السطر 7 وليس،

1156
00:54:17,170 --> 00:54:20,430
على سبيل المثال، في طريق التسجيل الخاص بي هنا؟

1157
00:54:20,430 --> 00:54:23,320
لأن في الواقع، أقوم
بالإلحاق إلى القائمة هنا.

1158
00:54:23,320 --> 00:54:28,900
لكنني لم أعلن عن القائمة
بشكل متعمد هناك.

1159
00:54:28,900 --> 00:54:29,635
أجل؟

1160
00:54:29,635 --> 00:54:31,530
الجمهور: تستخدمها
في أجزاء أخرى.

1161
00:54:31,530 --> 00:54:34,780
ديفيد مالان: أستخدمها في مكان آخر في
الطرق الأخرى، طريق المُسجلين.

1162
00:54:34,780 --> 00:54:38,180
وأيضًا فيما يتعلق بأكثر من هذه النقطة،
إذا أعلنتُ عن قائمة هنا،

1163
00:54:38,180 --> 00:54:40,039
تصبح حسب التعريف
متغيرًا محليًا.

1164
00:54:40,039 --> 00:54:41,830
وهو ما يعني أنه بمجرد
أن توجد هذه الدالة،

1165
00:54:41,830 --> 00:54:45,760
الآن سأستغني عن هؤلاء
الطلاب الذين يُسجلون بشكل فوري

1166
00:54:45,760 --> 00:54:47,344
وليس حتى بعد الضغط على control-c.

1167
00:54:47,344 --> 00:54:49,510
إذن كان هذا أفضل نهج
للقيام بذلك، لكنه ليس

1168
00:54:49,510 --> 00:54:51,850
ما قمتُ به فيما قبل.

1169
00:54:51,850 --> 00:54:54,130
لقد قمتُ في الواقع بشيء
أفضل قليلاً.

1170
00:54:54,130 --> 00:54:56,350
إذن في ذلك الوقت، لم
أعلم حقًا-- على الأقل في،

1171
00:54:56,350 --> 00:54:58,496
أي عام، 1997-- أي شيء عن قواعد البيانات.

1172
00:54:58,496 --> 00:55:01,120
لا أعتقد أنني كنتُ أعلم حتى بشأن
ملفات CSV حتى الآن، أو على الأقل

1173
00:55:01,120 --> 00:55:02,920
كيفية إنشائها بشكل ديناميكي.

1174
00:55:02,920 --> 00:55:05,110
إذن بدلاً من ذلك اتخذتُ هذا النهج.

1175
00:55:05,110 --> 00:55:11,320
دعوني أنتقل إلى froshims2، وقد
لاحظ نفس القوالب كما كانت من قبل.

1176
00:55:11,320 --> 00:55:14,410
وبالفعل، قمتُ بالنسخ واللصق
بشكل كبير لهذا المثال الثاني.

1177
00:55:14,410 --> 00:55:17,980
ولكن في application.py،
لاحظوا هذا الأمر الرائع.

1178
00:55:17,980 --> 00:55:22,300
إذن هنا لديّ تقريبًا الشيء نفسه
بالأعلى من حيث Flask،

1179
00:55:22,300 --> 00:55:25,670
ولكنني أستخدم أيضًا مكتبة نظام التشغيل
هذه، المزيد حول ذلك بعد قليل.

1180
00:55:25,670 --> 00:55:27,460
ولكن ماذا عن السطر 2؟

1181
00:55:27,460 --> 00:55:33,167
إنه دقيق، ولكنني تحدثتُ بشأن هذا الاختصار
أعتقد مرة واحدة فقط منذ أسابيع، SMTP.

1182
00:55:33,167 --> 00:55:34,750
هل يعرف أحدكم ما الذي يشير إليه ذلك؟

1183
00:55:34,750 --> 00:55:36,416
الجمهور: بروتوكول إرسال البريد البسيط؟

1184
00:55:36,416 --> 00:55:39,640
ديفيد مالان: نعم، بروتوكول إرسال
البريد البسيط-- البريد الإلكتروني، وهو كذلك.

1185
00:55:39,640 --> 00:55:41,440
إذن تأتي Python مع
دالة مُدمجة

1186
00:55:41,440 --> 00:55:43,870
والتي يمكنكم عبرها إرسال رسائل البريد الإلكتروني،
وهذا هو بالضبط ما

1187
00:55:43,870 --> 00:55:45,580
فعلتُه عندما قمتُ بإنشاء هذا الموقع أول مرة.

1188
00:55:45,580 --> 00:55:47,650
لم أعرف أي شيء عن قواعد
البيانات، ولم أعرف أي شيء

1189
00:55:47,650 --> 00:55:50,320
عن حفظ أشياء في ملفات
بعد، ما زلتُ أتعلم.

1190
00:55:50,320 --> 00:55:53,050
ولكنني لم أدرك، امم،
أنه يمكنني استخدام البرمجة

1191
00:55:53,050 --> 00:55:56,530
لإرسال رسالة بريد إلكتروني إلى المراقب أو
RA الذي كان يُشرف على برنامج

1192
00:55:56,530 --> 00:55:59,470
الرياضة حتى يتمكّن فقط
من حفظه في مجلد

1193
00:55:59,470 --> 00:56:00,660
ومعرفة مَن قام بالتسجيل.

1194
00:56:00,660 --> 00:56:03,040
وهو ليس سهل الاستخدام 
بشكل كبير، ولكن على الأقل

1195
00:56:03,040 --> 00:56:06,040
يُنهي المهمة ليكون
قادرًا بعد ذلك على تتبع كل شيء.

1196
00:56:06,040 --> 00:56:11,030
إذن في هذا البرنامج، لاحظوا أن
لديّ طريق للشكل الخاص بي.

1197
00:56:11,030 --> 00:56:14,217
ولديّ طريق التسجيل هذا
ولكن بضعة سطور جديدة من التعليمة البرمجية.

1198
00:56:14,217 --> 00:56:17,050
وستعرفون فقط كيفية القيام بذلك
من خلال قراءة الوثائق.

1199
00:56:17,050 --> 00:56:20,140
ولكن في هذه الحالة هنا، لاحظوا ما
أفعله في طريق التسجيل لديّ.

1200
00:56:20,140 --> 00:56:25,600
سأحصل أولاً على اسم المستخدم 
وبريده الإلكتروني هذه المرة وسكنه.

1201
00:56:25,600 --> 00:56:26,650
ثم أقوم بالتحقّق من الخطأ.

1202
00:56:26,650 --> 00:56:29,170
إذا لم يعطيني اسمًا
أو بريدًا إلكترونيًا أو سكنًا،

1203
00:56:29,170 --> 00:56:32,230
سأقوم بتقديم failure.html
لإطلاعه على هذا القدر.

1204
00:56:32,230 --> 00:56:34,494
ثم أمضي قدمًا وأكتب هذه
السطور من التعليمة البرمجية.

1205
00:56:34,494 --> 00:56:36,910
وهذا صعب للغاية،
وستقومون فقط، مجددًا،

1206
00:56:36,910 --> 00:56:38,284
بمعرفة هذا من الوثائق.

1207
00:56:38,284 --> 00:56:40,570
ولكن يتضح أنه إذا
قرأتم الوثائق

1208
00:56:40,570 --> 00:56:46,160
الخاصة بمكتبة أو SMTP lib، يمكنكم
استخدام سطور التعليمة البرمجية كهذه على النحو التالي.

1209
00:56:46,160 --> 00:56:49,870
يمكنكم إخبار المكتبة عن الخادم
المراد استخدامه لإرسال رسالة بريد إلكتروني.

1210
00:56:49,870 --> 00:56:52,000
ويتضح أنه إذا قرأتم
وثائق Gmail،

1211
00:56:52,000 --> 00:56:56,110
فيمكنكم استخدام smtp.gmail.com لإرسال
رسائل بريد إلكتروني تلقائيًا ليس باستخدام

1212
00:56:56,110 --> 00:56:57,970
واجهة مستخدم الويب، ولكن باستخدام التعليمة البرمجية.

1213
00:56:57,970 --> 00:57:00,770
587 هو منفذ TCP الذي يستخدمونه.

1214
00:57:00,770 --> 00:57:04,180
إذن ليس 80، ليس 443،
إنه 587 حسب التقليد.

1215
00:57:04,180 --> 00:57:07,690
Starttls، إذا قرأتم الوثائق،
تقول شغِّل التشفير.

1216
00:57:07,690 --> 00:57:11,020
لذا يتم تشفير رسالة البريد الإلكتروني
بينك وبين Gmail.

1217
00:57:11,020 --> 00:57:13,750
ثم امضي قدمًا وقم بتسجيل الدخول
باستخدام اسم مستخدم وكلمة مرور.

1218
00:57:13,750 --> 00:57:17,830
لقد قمتُ بإنشاء حساب مسبقًا
يُسمى harvard@cs50.net، وكلمة المرور

1219
00:57:17,830 --> 00:57:19,565
الخاصة بي في بيئة IDE.

1220
00:57:19,565 --> 00:57:21,940
لقد قمتُ بتخزينه في مكان آخر
بحيث لا يكون مرئيًا على الشاشة،

1221
00:57:21,940 --> 00:57:24,610
وإلا يمكن أن يرسل الأشخاص
رسائل بريد إلكتروني باسم جون.

1222
00:57:24,610 --> 00:57:27,979
ثم أمضي قدمًا وأطلب حرفيًا
دالة تُسمى إرسال بريد.

1223
00:57:27,979 --> 00:57:29,770
وإذا قرأتم الوثائق،
فستأخذ

1224
00:57:29,770 --> 00:57:33,070
هذه كوسيطة شخص تريد
إرسال رسالة بريد إلكتروني إليه،

1225
00:57:33,070 --> 00:57:36,490
ومحتويات رسالة البريد الإلكتروني
التي تريد إرسالها،

1226
00:57:36,490 --> 00:57:39,490
والرسالة التي
تريد إرسالها بالفعل هنا.

1227
00:57:39,490 --> 00:57:42,340
أو بالأحرى، هذا العنوان
من المُرسِل، والعنوان من المُستلِم،

1228
00:57:42,340 --> 00:57:44,830
والرسالة الفعلية
التي تريد إرسالها.

1229
00:57:44,830 --> 00:57:48,070
بعد ذلك، يجب أن تمضوا قدمًا
وتقدموا قالب ولنفترض أنه success.

1230
00:57:48,070 --> 00:57:49,720
يمكنني إضافة تحقق آخر
من الخطأ، على سبيل المثال من المحتمل أنه يجب

1231
00:57:49,720 --> 00:57:52,360
أن أتحقّق مما إذا كان هنا أي
شيء خاطئ، ولكنني أبقي الأمر بسيطًا.

1232
00:57:52,360 --> 00:57:56,050
لكن هذه السطور الجديدة التي يتم
تظليلها ترسل رسالة بريد إلكتروني بالفعل.

1233
00:57:56,050 --> 00:57:56,990
إذن دعونا نجرب هذا.

1234
00:57:56,990 --> 00:58:02,320
دعوني أنتقل إلى froshims2 ودعوني
أمضي قدمًا وأقوم بتشغيل Flask.

1235
00:58:02,320 --> 00:58:06,030
دعوني أمضي قدمًا وأفتح
هذه الصفحة هنا، خط مائل.

1236
00:58:06,030 --> 00:58:09,290
ولاحظ أن لدي بالفعل
حقل ثاني للنص الآن.

1237
00:58:09,290 --> 00:58:12,700
إذن هذا سيكون ديفيد،
وهذا سيكون--

1238
00:58:12,700 --> 00:58:16,900
دعونا نرى، ماذا عن المضي قدمًا،
والتسجيل ليس نفسي،

1239
00:58:16,900 --> 00:58:19,770
لأنه ليس حساب بريدي الإلكتروني،
ولكن جون هارفارد الذي نزعم أن

1240
00:58:19,770 --> 00:58:22,960
بريده الإلكتروني هو cs50.net، jharvard هنا.

1241
00:58:22,960 --> 00:58:25,730
ويعيش في لنقل، ويلد.

1242
00:58:25,730 --> 00:58:29,330
دعونا نمضي قدمًا وننقر فوق تسجيل.

1243
00:58:29,330 --> 00:58:31,422
حسنًا، إن الأمر يستغرق وقتًا
أطول قليلاً هذه المرة،

1244
00:58:31,422 --> 00:58:33,630
ولكنه يقوم بعمل إضافي
لإرسال رسالة بريد إلكتروني.

1245
00:58:33,630 --> 00:58:38,920
والآن دعونا ننتقل إلى
gmail.com، ونفتح هذا.

1246
00:58:38,920 --> 00:58:39,420
أوه.

1247
00:58:39,420 --> 00:58:41,760
في بريدي الوارد، أنت مُسجل.

1248
00:58:41,760 --> 00:58:45,391
إذا قمتُ بفتح ذلك،
لاحظوا أن jharvard@cs50.net

1249
00:58:45,391 --> 00:58:48,390
أرسل إلي رسالة بريد إلكتروني عن طريق بذور BC،
على الأقل أحتفظ بجزء من المعلومات

1250
00:58:48,390 --> 00:58:48,890
الخاصة.

1251
00:58:48,890 --> 00:58:52,950
ويقول فقط في بنية
الرسالة إذا قمتُ بتحريك المؤشر،

1252
00:58:52,950 --> 00:58:54,390
أنت مُسجل.

1253
00:58:54,390 --> 00:58:56,790
لذا لقد عدتُ
إلى عام 1997 بشكل أكبر، لكنني

1254
00:58:56,790 --> 00:58:59,749
أدرجتُ اسم المستخدم، وعنوان
بريده الإلكتروني، وسكنه،

1255
00:58:59,749 --> 00:59:03,081
وربما رقم هاتفه أو أي شيء،
والرياضة التي يهتم بها.

1256
00:59:03,081 --> 00:59:04,360
لكن الفكرة هي ذلك بالضبط.

1257
00:59:04,360 --> 00:59:07,800
يمكنكم إرسال أي معلومات تريدونها
فقط باستخدام التعليمة البرمجية الآن.

1258
00:59:07,800 --> 00:59:12,470
لا يمكنكم القيام بذلك باستخدام
HTML أو CSS فقط.

1259
00:59:12,470 --> 00:59:16,130
أي أسئلة، بعد ذلك، حول هذا؟

1260
00:59:16,130 --> 00:59:16,780
أجل؟

1261
00:59:16,780 --> 00:59:19,405
الجمهور: في الأسبوع الماضي عندما كتبنا
التعليمة البرمجية في Python، كان يجب أن نقول

1262
00:59:19,405 --> 00:59:24,275
على سبيل المثال إذا كان الاسم يساوي الدالة
التي نرغب في تنفيذها.

1263
00:59:24,275 --> 00:59:26,030
كيف لا نفعل ذلك في هذا؟

1264
00:59:26,030 --> 00:59:27,696
ديفيد مالان: كان ذلك كله في JavaScript.

1265
00:59:27,696 --> 00:59:31,060
لذا يشير هذا إلى إذا كان الاسم
يساوي، ومن ثم قمتُ بتعيينه إلى دالة،

1266
00:59:31,060 --> 00:59:35,860
أنا أعتقد أنك تشير إلى أمثلة
JavaScript لدينا، أليس كذلك؟

1267
00:59:35,860 --> 00:59:36,380
حسنًا.

1268
00:59:36,380 --> 00:59:38,090
لذا سنرجع إلى ذلك
بعد قليل

1269
00:59:38,090 --> 00:59:39,980
حيث نعيد تقديم بعض الأمور
من JavaScript،

1270
00:59:39,980 --> 00:59:42,680
وهي تعطينا بالفعل بعض
الدالات الأخرى التي تذكرنا

1271
00:59:42,680 --> 00:59:43,610
بتلك الأمثلة.

1272
00:59:43,610 --> 00:59:44,590
أي أسئلة أخرى؟

1273
00:59:44,590 --> 00:59:47,777
الجمهور: ما هو عنوان البريد الإلكتروني الذي
أرسلتُ منه هذا البريد الإكتروني،

1274
00:59:47,777 --> 00:59:50,110
ولا تحتاج إلى إدخال
كلمة مرور للتأكد من

1275
00:59:50,110 --> 00:59:52,282
عدم إرسال أي شخص فقط رسالة بريد إلكتروني بشكل عشوائي؟

1276
00:59:52,282 --> 00:59:54,240
ديفيد مالان: نعم، إنه
سؤال جيد حقًا.

1277
00:59:54,240 --> 00:59:57,440
لذلك عبر أي عنوان بريد إلكتروني
قمتُ بإرسال ذلك، ولمَن أرسلتُ ذلك؟

1278
00:59:57,440 --> 01:00:01,310
مجددًا، هذا هو العنوان
من المُرسِل، وهذا هو العنوان من المُستلِم،

1279
01:00:01,310 --> 01:00:02,540
وهذه هي الرسالة الآن.

1280
01:00:02,540 --> 01:00:06,170
ولأنه ليس لدي حساب بريد إلكتروني
واحد فقط، فقد أرسل جون بنفسه

1281
01:00:06,170 --> 01:00:07,670
رسالة بريد إلكتروني في هذه الحالة.

1282
01:00:07,670 --> 01:00:11,330
من الناحية النظرية إذا كنتُ أقوم بتشغيل
برنامج رياضة داخلية للطلاب الجدد،

1283
01:00:11,330 --> 01:00:16,340
يمكنني محاولة القيام بذلك
وتغيير هذا من العنوان لنفسي.

1284
01:00:16,340 --> 01:00:19,850
يتمثل المغزى في أن Gmail لديه
بالفعل حماية في مكانه بحيث إذا قمتم

1285
01:00:19,850 --> 01:00:23,390
بتسجيل الدخول كـ jharvard
باستخدام كلمة مروره، ثم

1286
01:00:23,390 --> 01:00:26,090
البريد الإلكتروني، بغض النظر
عما تحدده كعنوان من المُرسِل،

1287
01:00:26,090 --> 01:00:29,150
سيتم تجاوزه بالفعل
ليكون من جون هارفرد.

1288
01:00:29,150 --> 01:00:32,010
ومع ذلك، يشير هذا إلى
احتمال عدم أمان البريد الإلكتروني.

1289
01:00:32,010 --> 01:00:34,010
إذا كنتَ لا تستخدم Gmail
ولكنك تستخدم خدمة من جهة خارجية

1290
01:00:34,010 --> 01:00:36,620
ليست صارمة للغاية
للتحقق من الخطأ،

1291
01:00:36,620 --> 01:00:40,920
من السهل بشكل لا يصدق تزييف
رسائل البريد الإلكتروني من شخص إلى آخر.

1292
01:00:40,920 --> 01:00:42,920
أعني، البحث في مجلد
الرسائل غير المرغوب فيها في بعض الأحيان.

1293
01:00:42,920 --> 01:00:45,710
معظم هؤلاء الأشخاص الذين يرسلون
إليك تلك الرسائل غير موجودين.

1294
01:00:45,710 --> 01:00:48,560
على سبيل المثال، عناوين البريد الإلكتروني
و/أو الأسماء وهمية.

1295
01:00:48,560 --> 01:00:52,190
ومع ذلك، قد يبدو أنها في
الواقع من أحد أقاربك، أو أحد أفراد العائلة،

1296
01:00:52,190 --> 01:00:55,610
أو صديق، على الرغم من أن هؤلاء
الأشخاص لم يرسلوا رسائل بريد إلكتروني.

1297
01:00:55,610 --> 01:00:57,890
وهذا لأن بعض مرسلي الرسائل
غير المرغوب فيها قد كتبوا تعليمة برمجية

1298
01:00:57,890 --> 01:00:59,810
على سبيل المثال هذه في
Python أو في أي لغة أخرى،

1299
01:00:59,810 --> 01:01:03,740
لكنه يتجاوز هذه الحقول،
ولكنه استخدم خادمًا ليس Gmail

1300
01:01:03,740 --> 01:01:07,200
لا يفرض هذه السياسات.

1301
01:01:07,200 --> 01:01:09,970
أي أسئلة أخرى؟

1302
01:01:09,970 --> 01:01:12,880
حقيقة ممتعة، أيضًا في عام 1995،
تعلمتُ كيفية الإرسال--

1303
01:01:12,880 --> 01:01:15,414
أو كيفية تغيير العنوان من المُرسِل
في البريد الإلكتروني.

1304
01:01:15,414 --> 01:01:17,830
ويتضح في هارفارد أنه يوجد
كيان يُسمى لوحة الإعلانات

1305
01:01:17,830 --> 01:01:19,270
وهو لا يرغب في القيام بذلك.

1306
01:01:19,270 --> 01:01:22,825
لذا لا تفعل ذلك.

1307
01:01:22,825 --> 01:01:25,950
في بعض الأحيان، توجد دفاعات بشرية
لهذا الغرض، وليست مجرد تقنية.

1308
01:01:25,950 --> 01:01:30,490
لحسن الحظ، صديقي الذي زورت
رسالة بريد إلكتروني منه لا يقوم--

1309
01:01:30,490 --> 01:01:31,870
لقد نجح الأمر، حسنًا.

1310
01:01:31,870 --> 01:01:33,250
حسنًا.

1311
01:01:33,250 --> 01:01:36,550
لديكم الآن قوة كبيرة،
لا تستخدموها من أجل الشر.

1312
01:01:36,550 --> 01:01:40,075
حسناً، دعونا نمضي قدمًا
ونقوم بمثال آخر، لكن هذا يأخذ

1313
01:01:40,075 --> 01:01:44,500
خطوة أخرى، مضيفًا، في
النهاية، بعض المعلومات الثابتة.

1314
01:01:44,500 --> 01:01:48,940
دعونا نمضي قدمًا في
froshims3 الآن ونفتح application.py.

1315
01:01:48,940 --> 01:01:53,977
لذا تذكرون أنه يمكننا استخدام ملفات
CSV-- ملفات قيم مفصولة بفاصلة--

1316
01:01:53,977 --> 01:01:55,810
لإنشاء وهم
جداول البيانات،

1317
01:01:55,810 --> 01:01:58,120
ولكننا الآن
سنقوم بإنشائها بأنفسنا.

1318
01:01:58,120 --> 01:02:00,100
التعليمة البرمجية لهذا
متضمنة بشكل كبير قليلاً،

1319
01:02:00,100 --> 01:02:03,020
والشيء الوحيد الذي قمتُ
بتغييره الآن هو حقًا طريقة التسجيل.

1320
01:02:03,020 --> 01:02:07,325
لذا في الإصدار الأول من هذه التعليمة البرمجية،
قمتُ بحفظه في قائمة شاملة في الذاكرة فقط.

1321
01:02:07,325 --> 01:02:09,700
لم يكن ذلك جيدًا لأنه
يتم التخلص منه بسهولة.

1322
01:02:09,700 --> 01:02:11,260
الإصدار الثاني من هذا
أرسلنا للتو رسالة بريد إلكتروني

1323
01:02:11,260 --> 01:02:12,730
إلى المراقب الذي يشغّل البرنامج.

1324
01:02:12,730 --> 01:02:15,400
كان هذا أفضل قليلاً، لأنه على
الأقل يمكنه حفظ البريد الإلكتروني بعد ذلك.

1325
01:02:15,400 --> 01:02:18,400
الإصدار الثالث، سنستخدم قاعدة
بيانات خفيفة الوزن جدًا تُسمى

1326
01:02:18,400 --> 01:02:22,360
ملف CSV الذي يحفظه على محرك
الأقراص الصلب الخاص بي بشكل دائم.

1327
01:02:22,360 --> 01:02:25,280
لذا حتى عندما يتوقف الخادم،
تظل البيانات موجودة.

1328
01:02:25,280 --> 01:02:27,230
إذن في Python، كيف يعمل هذا؟

1329
01:02:27,230 --> 01:02:30,890
حسنًا، لاحظوا أنني قمتُ بتحسين طريق التسجيل
الخاص بي في هذه المرة على النحو التالي.

1330
01:02:30,890 --> 01:02:33,479
إذا لم يعطيني المستخدم
اسمه أو سكنه،

1331
01:02:33,479 --> 01:02:35,020
بعد ذلك سأمضي قدمًا وأقدم failure.

1332
01:02:35,020 --> 01:02:36,860
هذا إلى حد كبير نفس
المنطق كما كان من قبل،

1333
01:02:36,860 --> 01:02:39,110
لكنني لم أحمّل نفسي عناء
إعلان المتغيرات هذه المرة،

1334
01:02:39,110 --> 01:02:41,270
فقط لقد طلبتُ الدالات مباشرة.

1335
01:02:41,270 --> 01:02:44,730
ها هو سطر جديد من التعليمة البرمجية
قد يذكرنا ببعض تعليمة الإدخال/الإخراج البرمجية

1336
01:02:44,730 --> 01:02:45,730
للملف السابق.

1337
01:02:45,730 --> 01:02:50,440
في السطر 16 هنا، أنا أخبر Python أن تمضي
قدمًا وتفتح ملف يُسمى

1338
01:02:50,440 --> 01:02:53,770
record.csv علامة اقتباس وعلامة إنهاء الاقتباس a.

1339
01:02:53,770 --> 01:02:56,600
لذا رأينا R، لقد رأينا
W للقراءة والكتابة.

1340
01:02:56,600 --> 01:02:59,400
أي شخص يتذكر ما هو a، أو لا؟

1341
01:02:59,400 --> 01:03:00,160
الجمهور: Append.

1342
01:03:00,160 --> 01:03:02,493
ديفيد مالان: يصادف أن هذا يعني
إلحاق، مما يعني فقط إضافة

1343
01:03:02,493 --> 01:03:04,180
صف إلى الملف، وهو أمر رائع.

1344
01:03:04,180 --> 01:03:06,790
لأنه إذا كان هناك طلاب مُسجَلون
بالفعل، عندما يتم تسجيل طالب واحد جديد،

1345
01:03:06,790 --> 01:03:08,831
فإننا نريد فقط إلحاق
الجزء السفلي من الملف.

1346
01:03:08,831 --> 01:03:12,310
يتم دعم علامة اقتباس وعلامة إنهاء الاقتباس a
بواسطة Python باستخدام هذه الدالة المفتوحة.

1347
01:03:12,310 --> 01:03:15,220
هذا يعطيني مرجعًا أو
ما يشبه مؤشر إلى ملف،

1348
01:03:15,220 --> 01:03:17,740
حتى على الرغم من أن
Python ليس لديها مؤشرات.

1349
01:03:17,740 --> 01:03:19,100
ثم هذه هي الميزة الجديدة.

1350
01:03:19,100 --> 01:03:21,340
وهنا أيضًا، لا يمكنك معرفة ذلك
فقط إلا من خلال رؤية مثال

1351
01:03:21,340 --> 01:03:22,900
أو عبر قراءة الوثائق.

1352
01:03:22,900 --> 01:03:26,900
يمكنكم استخدام مكتبة CSV، التي
سنراها كمستوردة أعلاه.

1353
01:03:26,900 --> 01:03:31,431
ويمكنكم أن تطلبوا كاتبًا،
تعليمة برمجية تقوم بالكتابة-- إنها،

1354
01:03:31,431 --> 01:03:31,930
تقوم بإنشاء--

1355
01:03:31,930 --> 01:03:33,190
ملفات CSV.

1356
01:03:33,190 --> 01:03:35,620
وتحديدًا، تريدون
الكتابة في هذا الملف.

1357
01:03:35,620 --> 01:03:38,320
تأتي تلك المكتبة-- مكتبة
CSV-- مع دالة

1358
01:03:38,320 --> 01:03:40,450
تُسمى كتابة صف، وهي
تقوم بما تقوله.

1359
01:03:40,450 --> 01:03:43,960
إذا قمتم بتمريره في قائمة
من الحقول مفصولة بفاصلة

1360
01:03:43,960 --> 01:03:46,810
والتي تريدونها لتمثيل
العمود الأول، والثاني،

1361
01:03:46,810 --> 01:03:49,665
والثالث لديكم،
فإنها ستعالج الكتابة من أجلكم

1362
01:03:49,665 --> 01:03:51,790
لذا لن تضطروا إلى الدخول
في تعقيدات ملف الإدخال/الإخراج

1363
01:03:51,790 --> 01:03:53,800
كما فعلتم في العديد من مجموعات المشاكل السابقة.

1364
01:03:53,800 --> 01:03:54,970
لاحظوا الدقة.

1365
01:03:54,970 --> 01:03:58,510
تحتاجون إلى الحصول على
الزوج الثاني من الأقواس،

1366
01:03:58,510 --> 01:04:00,850
لأن من الناحية الفنية ما
تعطونه هو صف.

1367
01:04:00,850 --> 01:04:02,930
تحدثنا بشكل موجز للغاية
عن ذلك في الأسبوع الماضي،

1368
01:04:02,930 --> 01:04:06,250
وهو ما يشبه تمامًا زوج من x فاصلة
y، أو خط الطول فاصلة خط العرض.

1369
01:04:06,250 --> 01:04:07,120
الفكرة نفسها هنا.

1370
01:04:07,120 --> 01:04:11,230
العمود الأول، والعمود الثاني،
وهكذا هو ما يُسمى صف.

1371
01:04:11,230 --> 01:04:13,940
ثم أُغلق الملف،
وبعد ذلك أُقدم القالب.

1372
01:04:13,940 --> 01:04:15,920
إذن ما الذي يفعله هذا في الواقع من أجلي؟

1373
01:04:15,920 --> 01:04:19,390
حسنًا، دعوني أنتقل إلى
المجلد froshims3 هنا.

1374
01:04:19,390 --> 01:04:22,360
ولاحظوا أن register.csv
في هذه اللحظة يُعد فارغًا.

1375
01:04:22,360 --> 01:04:23,560
هذا هو ملف CSV.

1376
01:04:23,560 --> 01:04:25,490
لا يحدث شيء داخل ذلك.

1377
01:04:25,490 --> 01:04:27,340
لا يوجد أحد مُسجَّل بعد.

1378
01:04:27,340 --> 01:04:32,260
ولكن دعوني أمضي قدمًا، ثم،
أنتقل إلى froshims3، وأُشغل Flask.

1379
01:04:32,260 --> 01:04:33,970
دعوني أمضي قدمًا وأقوم بتحميل هذا.

1380
01:04:33,970 --> 01:04:37,460
وسترون الشكل نفسه 
إلى حد ما، ولكن أيضًا رابطًا جديدًا.

1381
01:04:37,460 --> 01:04:40,760
لاحظوا أنه لا يوجد أي شخص مُسجَّل
حتى الآن إذا قمتُ بالنقر فوق هذا الرابط.

1382
01:04:40,760 --> 01:04:46,220
ولكن إذا انتقلتُ هنا وسجلتُ
ديفيد من ماثيوز ونقرتُ فوق تسجيل،

1383
01:04:46,220 --> 01:04:48,310
الآن يزعم أنني مُسجَّل بالفعل.

1384
01:04:48,310 --> 01:04:52,156
دعوني أضغط على هذا الرابط ولاحظوا
أنه صغير جدًا على الشاشة،

1385
01:04:52,156 --> 01:04:54,280
لكن خط مائل مُسجَّل هو
حيث سيقودني هذا،

1386
01:04:54,280 --> 01:04:56,470
وهو حيث كنتُ من قبل.

1387
01:04:56,470 --> 01:04:58,984
ترون ذلك الآن ديفيد
من ماثيوز مُسجَّل.

1388
01:04:58,984 --> 01:05:00,400
دعوني أعود إلى الشكل نفسه.

1389
01:05:00,400 --> 01:05:02,860
دعونا نُسجل، مثلاً،
براين من بيني بايكر.

1390
01:05:02,860 --> 01:05:04,094
أنقر فوق تسجيل.

1391
01:05:04,094 --> 01:05:05,510
من الواضح أنه أيضًا مُسجَّل.

1392
01:05:05,510 --> 01:05:06,580
دعونا ننقر فوق هذا الرابط.

1393
01:05:06,580 --> 01:05:07,870
براين من بيني بايكر.

1394
01:05:07,870 --> 01:05:09,760
حسنًا، إذن إلى أين تنتقل هذه البيانات؟

1395
01:05:09,760 --> 01:05:13,360
دعوني أعود إلى IDE،
أغلق ملف CSV المُسجَّل الخاص بي،

1396
01:05:13,360 --> 01:05:16,090
لأنه على الأرجح
تغيّر وأقوم بفتحه.

1397
01:05:16,090 --> 01:05:19,090
وها هو ذا، في الواقع، إنه
يطلب مني بإعادة تحميله.

1398
01:05:19,090 --> 01:05:20,330
ها هو الملف.

1399
01:05:20,330 --> 01:05:25,270
ولاحظوا ديفيد فاصلة ماثيوز، وبراين
فاصلة بيني بايكر، تمت ترجمة جميع تلك الصفوف

1400
01:05:25,270 --> 01:05:26,270
من أجلي.

1401
01:05:26,270 --> 01:05:28,450
إذن الآن لديّ قاعدة بيانات بالفعل.

1402
01:05:28,450 --> 01:05:31,510
وعلى الرغم من أنها قاعدة بيانات بسيطة
إلى حد ما، أتعرفون ما الذي يمكنني القيام به؟

1403
01:05:31,510 --> 01:05:34,990
دعوني أمضي قدمًا وأنقر بزر الماوس الأيمن
أو زر التحكم فوق IDE،

1404
01:05:34,990 --> 01:05:37,360
وأقوم بتحميلها في مجلد التنزيلات.

1405
01:05:37,360 --> 01:05:39,340
ومن ثم إذا قمتُ بالفعل
بفتح هذا الشيء، إذا كان

1406
01:05:39,340 --> 01:05:42,350
لديّ Excel مُثبّت
أو Apple Numbers، وهذه

1407
01:05:42,350 --> 01:05:47,690
هي المرة الأولى التي أستخدمه فيها على الإطلاق،
دعوني أمضي قدمًا وأفتح ذلك الملف.

1408
01:05:47,690 --> 01:05:49,400
فتح register.csv.

1409
01:05:49,400 --> 01:05:51,690
وها هو ذا، ها هو الآن ملف.

1410
01:05:51,690 --> 01:05:54,380
ويقوم Numbers بتنسيقه
بطريقة غريبة إلى حد ما،

1411
01:05:54,380 --> 01:05:56,210
لكنه يعرض الصفوف والأعمدة.

1412
01:05:56,210 --> 01:05:58,970
مَن منكم على دراية أكبر
باستخدام Excel يمكننا القيام بذلك، أيضًا.

1413
01:05:58,970 --> 01:06:00,560
دعوني أنتقل إلى الأسفل هنا.

1414
01:06:00,560 --> 01:06:03,200
دعوني أنتقل إلى مجلد التنزيلات.

1415
01:06:03,200 --> 01:06:07,040
سأنقر بزر التحكم أو بزر الماوس الأيمن هنا،
وهذه المرة أفتحه باستخدام Microsoft Excel.

1416
01:06:07,040 --> 01:06:10,730
وإذا رأيتم Excel مسبقًا،
سنرى على الأرجح واجهة مستخدم مُتشابهة جدًا.

1417
01:06:10,730 --> 01:06:12,680
لأنه في أي وقت Excel أو Numbers--

1418
01:06:12,680 --> 01:06:14,330
حسنًا، هذه هي المرة الأولى التي أستخدم فيها Excel.

1419
01:06:14,330 --> 01:06:18,500
إذن سيفتح ذلك، أيضًا،
بعض الصفوف والأعمدة، كذلك.

1420
01:06:18,500 --> 01:06:20,990
إذن ملفات CSV هي مجرد
جداول بيانات خفيفة جدًا.

1421
01:06:20,990 --> 01:06:24,159
ولكن الشيء الرائع بشأنها هو أنه
يمكنكم إنشاؤها بسهولة.

1422
01:06:24,159 --> 01:06:25,700
فقط يجب أن تضعوا الفواصل هناك.

1423
01:06:25,700 --> 01:06:29,420
الآن، كملاحظة جانبية، هل يمكنكم
استنباط مدخل مستخدم

1424
01:06:29,420 --> 01:06:32,660
الذي يمكنه على الأرجح تقسيم ملف CSV؟

1425
01:06:32,660 --> 01:06:37,550
ما الذي يمكن أن يكتبه شخص يمكنه
على الأرجح تقسيم ملفات CSV الخاصة بكم؟

1426
01:06:37,550 --> 01:06:38,460
فاصلة، أليس كذلك؟

1427
01:06:38,460 --> 01:06:42,150
إذا كان الأمر هكذا ديفيد مايلاند فاصلة
طالب في السنة الثالثة الجامعية، أو شيء من هذا القبيل.

1428
01:06:42,150 --> 01:06:45,000
أو أي شيء باستخدام علامات ترقيم غريبة.

1429
01:06:45,000 --> 01:06:46,530
هذا هو سبب استخدامكم المكتبات.

1430
01:06:46,530 --> 01:06:49,020
مكتبة CSV تلك في
هذه التعليمة البرمجية، التي

1431
01:06:49,020 --> 01:06:53,100
نقوم باستيرادها في الجزء العلوي من
الإصدار 3 هذا من التعليمة البرمجية،

1432
01:06:53,100 --> 01:06:55,830
الذي يعالج في الواقع
كل ذلك التعقيد من أجلنا.

1433
01:06:55,830 --> 01:06:58,950
عندما تُصادف المكتبة ديفيد
مايلاند فاصلة طالب في السنة الثالثة الجامعية إذا كان ذلك

1434
01:06:58,950 --> 01:07:00,900
هو مدخل المستخدم، ستقوم
بالإضافة إلى ذلك

1435
01:07:00,900 --> 01:07:03,720
بوضع علامات اقتباس حول
اسمي بأكمله، وبالتالي تتأكد

1436
01:07:03,720 --> 01:07:06,660
أن الفاصلة داخل
علامات الاقتباس، وبالتالي، لن يختلط عليها الأمر

1437
01:07:06,660 --> 01:07:10,450
مع الفاصلة الخاصة التي تُحدد
بداية الأعمدة الأخرى.

1438
01:07:10,450 --> 01:07:12,690
إذن مجددًا، لهذا السبب
لا تعيدون اختراع العجلة،

1439
01:07:12,690 --> 01:07:14,470
بسبب ظهور الحالات الحرجة مثل تلك.

1440
01:07:14,470 --> 01:07:17,640
حسنًا، ماذا عن خط مائل مُسجل،
وهو هذه القائمة التي

1441
01:07:17,640 --> 01:07:18,960
تقوم بإنشاء قائمة غير مرتبة؟

1442
01:07:18,960 --> 01:07:20,320
دعونا نرى كيف يعمل ذلك.

1443
01:07:20,320 --> 01:07:23,280
إذا قمتُ بالتمرير إلى هذه
التعليمة البرمجية، لاحظوا أنها ليست

1444
01:07:23,280 --> 01:07:25,920
مسألة بسيطة لسحب
متغير شامل فقط،

1445
01:07:25,920 --> 01:07:28,230
لأنه لا يوجد
متغير شامل بعد الآن.

1446
01:07:28,230 --> 01:07:30,790
الآن يجب أن أقرأه
من ملف CSV ذلك.

1447
01:07:30,790 --> 01:07:34,630
إذن ها هي ثلاثة سطور جديدة من
التعليمة البرمجية التي تعمل على النحو التالي.

1448
01:07:34,630 --> 01:07:38,730
سأمضي قدمًا وأفتح هذا
الملف، register.csv، في وضع القراءة

1449
01:07:38,730 --> 01:07:40,290
هذه المرة، وليس في وضع إلحاق.

1450
01:07:40,290 --> 01:07:44,400
سأمضي قدمًا وأقول
مرحبًا Python، استخدم قارئ CSV--

1451
01:07:44,400 --> 01:07:45,960
وهو مقابل الكاتب--

1452
01:07:45,960 --> 01:07:47,190
على هذا الملف.

1453
01:07:47,190 --> 01:07:50,719
ثم، مرحبًا Python، امضي قدمًا
وقم بتحويل ذلك القارئ بأكمله إلى قائمة.

1454
01:07:50,719 --> 01:07:53,010
إذن ستعرفون هذا فقط من
قراءة الوثائق.

1455
01:07:53,010 --> 01:07:54,330
يتضح أن هذا هو ما أوصي به.

1456
01:07:54,330 --> 01:07:57,540
إذا أردتم أخذ قارئ
وقراءة هذا الشيء بأكمله في الذاكرة فقط

1457
01:07:57,540 --> 01:08:00,600
مرة واحدة وتحويله إلى قائمة 
Python، تقومون فقط بتمريره

1458
01:08:00,600 --> 01:08:01,890
إلى دالة القائمة هذه.

1459
01:08:01,890 --> 01:08:04,260
هذا يعطيني قائمة سأقوم
باستدعاء students،

1460
01:08:04,260 --> 01:08:06,849
وبعد ذلك يمكنني القيام
بالتعليمة البرمجية نفسها كما فعلتُ من قبل.

1461
01:08:06,849 --> 01:08:08,640
ولتدبر الأمر جيدًا، ربما يجب
أن أقوم بما

1462
01:08:08,640 --> 01:08:13,260
فعلته آخر مرة، وهو file.close
لإغلاق الملف، أيضًا، فقط

1463
01:08:13,260 --> 01:08:15,821
للتأكد من إغلاقه في المرة
التالية التي يتم فتحه فيها.

1464
01:08:15,821 --> 01:08:18,779
ولكن يمكنني بالفعل تبسيط هذا،
وسترون المزيد من هذه الأمثلة

1465
01:08:18,779 --> 01:08:19,529
عبر الإنترنت.

1466
01:08:19,529 --> 01:08:23,310
إن عدم القيام بذلك في الواقع
أمر تقليدي أكثر في Python،

1467
01:08:23,310 --> 01:08:25,950
ولكن بدلاً من ذلك، قوموا بتغيير
تعليمتكم البرمجية على النحو التالي.

1468
01:08:25,950 --> 01:08:31,080
حتى لا تتحملون عناء إغلاقه بشكل صريح،
بدلاً من استخدام كلمة رئيسية تُسمى with

1469
01:08:31,080 --> 01:08:35,370
بدلاً من ذلك، ضَعوا اسم المتغير مرة أخرى هناك
ثم ضَعوا مسافة بادئة لكل شيء أدناه.

1470
01:08:35,370 --> 01:08:38,010
لا يهم أي منهما تقوم به
بالنسبة إلى أهدافنا.

1471
01:08:38,010 --> 01:08:39,430
الأول كان صحيحًا.

1472
01:08:39,430 --> 01:08:40,630
والثاني صحيح.

1473
01:08:40,630 --> 01:08:43,410
هذا هو أمر تقليدي أكثر،
فقط إذا كان ذلك لأنه يعالج إغلاق

1474
01:08:43,410 --> 01:08:44,979
الملف من أجلك.

1475
01:08:44,979 --> 01:08:47,520
لذا إذا رأيتم هذا عبر الإنترنت،
فهذا كل ما يحدث هناك.

1476
01:08:47,520 --> 01:08:53,100
ولكن الأمر يشبه في C القيام بكتابة fopen وfclose،
أو في هذه الحالة يكون الفتح والإغلاق

1477
01:08:53,100 --> 01:08:54,729
كما كان لدي منذ لحظة.

1478
01:08:54,729 --> 01:08:56,136
أية أسئلة أخرى؟

1479
01:08:56,136 --> 01:08:58,110
الجمهور: كيف تعالج
التكرارات؟

1480
01:08:58,110 --> 01:08:59,609
ديفيد مالان: كيف
سأقوم بالتكرار؟

1481
01:08:59,609 --> 01:09:00,240
سؤال جيد.

1482
01:09:00,240 --> 01:09:03,600
إذن لم أعالج التكرارات هنا
على الإطلاق، وديفيد من ماثيوز

1483
01:09:03,600 --> 01:09:05,310
يمكن أن يتم تسجيله مرارًا وتكرارًا.

1484
01:09:05,310 --> 01:09:07,080
ولكن ما الذي يمكنني فعله بشكل منطقي؟

1485
01:09:07,080 --> 01:09:10,439
حسنًا، من المحتمل أنه ينتمي
هنا في طريق التسجيل الخاص بي.

1486
01:09:10,439 --> 01:09:14,439
من المحتمل أنني أريد أن أتحقّق من
الخطأ بشكل أكبر من هذين السطرين فقط.

1487
01:09:14,439 --> 01:09:17,640
لأنه على الأرجح ما أريد
القيام به لمعرفة ما إذا كان ديفيد من ماثيوز

1488
01:09:17,640 --> 01:09:20,729
مُسجل بالفعل هو
فتح ملف CSV،

1489
01:09:20,729 --> 01:09:26,069
قم بتكرار سطوره للبحث عن
ديفيد وماثيوز على السطر نفسه

1490
01:09:26,069 --> 01:09:29,340
ومن ثم أعرض failure
للمستخدم إذا حاول أو حاولت

1491
01:09:29,340 --> 01:09:31,200
التسجيل للمرة الثانية.

1492
01:09:31,200 --> 01:09:33,660
لم أجعل الأمر سهلاً باستخدام
هذه التعليمة البرمجية، وبصراحة

1493
01:09:33,660 --> 01:09:35,939
سيكون ذلك أسهل بكثير
في الأسبوع القادم باستخدام SQL.

1494
01:09:35,939 --> 01:09:37,979
SQL، هذه اللغة الأخرى
لقواعد البيانات، ستجعل

1495
01:09:37,979 --> 01:09:41,109
الأمر سهلاً للبحث عن البيانات
التي تم حفظها بالفعل.

1496
01:09:41,109 --> 01:09:43,069
لا تجعل ملفات CSV هذا أمرًا سهلاً.

1497
01:09:43,069 --> 01:09:46,200
هذا قابل للتنفيذ، لكن يجب أن
تكتبوا المزيد من سطور التعليمة البرمجية.

1498
01:09:46,200 --> 01:09:47,479
إذن المزيد حول ذلك قريبًا.

1499
01:09:47,479 --> 01:09:48,290
أي أسئلة أخرى؟

1500
01:09:48,290 --> 01:09:51,270


1501
01:09:51,270 --> 01:09:55,470
حسنًا، دعونا ننتقل
إلى مثال واحد أخير،

1502
01:09:55,470 --> 01:10:00,400
froshim6، حيث سنقوم بشيء
أكبر قليلاً من أجلنا هنا.

1503
01:10:00,400 --> 01:10:04,140
لذا إذا انتقلتُ إلى
froshim6، لاحظوا أنه إذا

1504
01:10:04,140 --> 01:10:08,700
قمتُ بتشغيل Flask، والعودة إلى موقع الويب
هنا، وإعادة تحميل الشاشة،

1505
01:10:08,700 --> 01:10:13,320
ومضيتُ قدمًا وأعطيتكم اسمي، لكن
لا، لا أريد أن أعطيكم سكني،

1506
01:10:13,320 --> 01:10:14,680
لدينا هذه الميزة.

1507
01:10:14,680 --> 01:10:18,450
إنها قبيحة مجددًا، ولكن أين 
رأينا هذا النوع من الدالة

1508
01:10:18,450 --> 01:10:19,880
عندما لا يتعاون المستخدم؟

1509
01:10:19,880 --> 01:10:23,350


1510
01:10:23,350 --> 01:10:25,275
أو كيف قمتُ بتنفيذ هذا، على ما يبدو؟

1511
01:10:25,275 --> 01:10:26,150
الجمهور: JavaScript؟

1512
01:10:26,150 --> 01:10:27,690
ديفيد مالان: نعم، JavaScript.

1513
01:10:27,690 --> 01:10:30,690
إذن يتضح أنه باستخدام Python،
يمكنكم بالتأكيد

1514
01:10:30,690 --> 01:10:33,780
التحقّق من صلاحية مدخل المستخدم على
الخادم فقط من خلال التحقّق مما يوجد

1515
01:10:33,780 --> 01:10:37,710
في request.args أو request.form 
ومن ثم تصيحون وفقًا لنجاح

1516
01:10:37,710 --> 01:10:38,770
المستخدم أو فشله.

1517
01:10:38,770 --> 01:10:42,220
ولكن يمكنكم أيضًا استخدام JavaScript-- 
وبصراحة، لقد فعلنا هذا منذ أسبوعين،

1518
01:10:42,220 --> 01:10:44,640
لذا يبدو أننا فقط نقوم بحل
المشاكل نفسها مرة أخرى.

1519
01:10:44,640 --> 01:10:46,780
إذن كيف تفكرون في هذا؟

1520
01:10:46,780 --> 01:10:50,509
هل يجب أن أتحقق من اسم المستخدم
وسكنه في JavaScript؟

1521
01:10:50,509 --> 01:10:53,175
هل يجب أن أتحقق من 
اسم المستخدم وسكنه على الخادم؟

1522
01:10:53,175 --> 01:10:56,220


1523
01:10:56,220 --> 01:10:59,805
أعني، الرسائل مختلطة الآن.

1524
01:10:59,805 --> 01:11:01,190
الجمهور: أيًّا كان الأسرع.

1525
01:11:01,190 --> 01:11:02,000
ديفيد مالان: أيًّا كان الأسرع.

1526
01:11:02,000 --> 01:11:04,370
هذا مُعطى جيد جدًا
للاستخدام، الأسرع.

1527
01:11:04,370 --> 01:11:07,010
ويمكننا أن نجعله أجمل
عن طريق استخدام Bootstrap أو مكتبة ما

1528
01:11:07,010 --> 01:11:10,790
لتعطيكم مربع ملون، أو
نص خطأ باللون الأحمر أو شيء من هذا القبيل.

1529
01:11:10,790 --> 01:11:14,055
إذن ما هي أسرع لغة على الأرجح،
Python أو JavaScript؟

1530
01:11:14,055 --> 01:11:14,930
الجمهور: JavaScript.

1531
01:11:14,930 --> 01:11:15,929
ديفيد مالان: JavaScript.

1532
01:11:15,929 --> 01:11:18,420
لماذا، هل تُعد JavaScript
فقط أفضل، وأسرع لغة؟

1533
01:11:18,420 --> 01:11:20,360
الجمهور: أنت لا تقوم
بإنشائه [INAUDIBLE]

1534
01:11:20,360 --> 01:11:20,850
ديفيد مالان: كرري ذلك؟

1535
01:11:20,850 --> 01:11:22,778
الجمهور: أنت لا تقوم
بإنشائه على خادم جديد،

1536
01:11:22,778 --> 01:11:24,230
إذن كل شيء يحدث على نفس--

1537
01:11:24,230 --> 01:11:25,100
ديفيد مالان: هذا هو السبب، نعم.

1538
01:11:25,100 --> 01:11:27,766
ليس علينا الدخول في المناقشة العقائدية
بشأن أي لغة

1539
01:11:27,766 --> 01:11:30,800
هي الأفضل أو الأسرع، ولكن حيث يتم
تشغيلهما هو أمر هام بالتأكيد.

1540
01:11:30,800 --> 01:11:34,140
يتم تشغيل JavaScript، تذكرون،
حسب التعريف، في المتصفح.

1541
01:11:34,140 --> 01:11:36,140
يتم إرسالها كتعليمة JavaScript
البرمجية إلى المتصفح

1542
01:11:36,140 --> 01:11:37,940
الذي ينفذ بعد ذلك جانب العميل.

1543
01:11:37,940 --> 01:11:40,942
تقوم Python اليوم حسب التعريف
بكل شيء من جانب الخادم.

1544
01:11:40,942 --> 01:11:42,650
وبالفعل، لا يعرف
المتصفح حتى أن

1545
01:11:42,650 --> 01:11:47,240
Python مُتضمّنة، لأن كل ما تحصل عليه
هو تعليمة HTML البرمجية التي تنتج عن ذلك.

1546
01:11:47,240 --> 01:11:49,910
إذن حسنًا، تبدو
هذه وسيطة لعدم

1547
01:11:49,910 --> 01:11:53,530
القيام بكل العمل الجديد الذي قمنا به اليوم
في إذا لم يوجد اسم، إذا لم يوجد سكن،

1548
01:11:53,530 --> 01:11:55,910
وكل ذلك،
واستخدام JavaScript فقط.

1549
01:11:55,910 --> 01:12:00,080
لكن المشكلة هي إذا أصبحتم
سيئين قليلاً او أذكياء قليلاً

1550
01:12:00,080 --> 01:12:03,050
وقمتم بتنفيذ التحقّق من الخطأ
من جانب العميل فقط.

1551
01:12:03,050 --> 01:12:06,230
لأنه كما تقولون، إنها أسرع،
وبصراحة عندما أجعلها أجمل،

1552
01:12:06,230 --> 01:12:09,330
ستكون فقط أكثر
تفاعلية وأكثر سلاسة.

1553
01:12:09,330 --> 01:12:12,860
المشكلة هي أنه لا يمكنكم
ولا يجب أن تثقوا في المستخدمين.

1554
01:12:12,860 --> 01:12:15,320
لنفترض أنني مستخدم ضار
وأريد فقط

1555
01:12:15,320 --> 01:12:18,910
أن أضخ بعض البيانات الوهمية في موقع الويب
الخاص بكم، أو أريد أن أرسل لكم بريدًا غير مرغوب فيه،

1556
01:12:18,910 --> 01:12:22,550
أو أوجِد 1000 مشتركًا من الطلاب الجدد
غير موجودين في الواقع، أو أقوم فقط

1557
01:12:22,550 --> 01:12:24,592
بإنشاء مشاكل لكم بشكل عام.

1558
01:12:24,592 --> 01:12:26,300
حسنًا، قد تعتقدون،
حسنًا، لا بأس، أن لديّ

1559
01:12:26,300 --> 01:12:28,420
بعض الدفاعات في
المكان الصحيح، وتعليمة JavaScript البرمجية،

1560
01:12:28,420 --> 01:12:31,670
وسيحصل هذا الخصم على
ملاحظات سريعة وجميلة جدًا

1561
01:12:31,670 --> 01:12:34,880
والتي لم تقدموها في
هذه الحقول المختلفة.

1562
01:12:34,880 --> 01:12:38,600
ولكن بصراحة، لا يمكنكم الوثوق
في أي شيء أبدًا يقدمه الشخص.

1563
01:12:38,600 --> 01:12:41,150
إذا فتحتُ أدوات المُطوِّر
في Chrome، وانتقلتُ

1564
01:12:41,150 --> 01:12:45,770
إلى هذا بالأسفل هنا إلى القائمة نقطة 
نقطة نقطة، وانتقلتُ إلى الإعدادات،

1565
01:12:45,770 --> 01:12:50,120
ثم انتقلتُ إلى هنا بالأسفل، هناك.

1566
01:12:50,120 --> 01:12:52,670
هذا كل ما يلزم
لتعطيل جميع عملكم الجاد.

1567
01:12:52,670 --> 01:12:54,470
يمكنه أو يمكنها فقط
فتح متصفحه/متصفحها--

1568
01:12:54,470 --> 01:12:55,730
Chrome أو شيء آخر--

1569
01:12:55,730 --> 01:12:57,170
إيقاف تشغيل JavaScript.

1570
01:12:57,170 --> 01:13:00,200
إذن الآن عندما أقوم في الواقع
بتقديم هذا الشكل، لن يكون

1571
01:13:00,200 --> 01:13:02,960
هناك تحقّق عند التقديم،
أو معالجة عند النقر.

1572
01:13:02,960 --> 01:13:04,260
سيتم تعطيل كل ذلك.

1573
01:13:04,260 --> 01:13:07,400
إذن إذا مضيتُ قدمًا ونقرتُ فوق
Register، ما يزال على الأقل،

1574
01:13:07,400 --> 01:13:11,520
في هذا الإصدار من froshims،
لديّ تحقّق من جانب الخادم، أيضًا.

1575
01:13:11,520 --> 01:13:14,420
إذن قد يكون هذا الأمر مُحبِطًا قليلاً،
ولكن هذا هو الواقع إلى حد ما.

1576
01:13:14,420 --> 01:13:16,700
هذا الأمر جيد تمامًا لاستخدام تعليمة
JavaScript البرمجية

1577
01:13:16,700 --> 01:13:19,820
وتعليمة جانب العميل البرمجية لإعطاء المستخدم
تجربة أفضل-- المعروفة أيضًا.

1578
01:13:19,820 --> 01:13:21,920
بـ UX، تجربة المستخدم.

1579
01:13:21,920 --> 01:13:24,530
ولكن لا يمكنكم اختصار 
الأمور وعدم تنفيذ

1580
01:13:24,530 --> 01:13:27,230
جانب الخادم المنطقي نفسه 
إلى حد ما لأنكم

1581
01:13:27,230 --> 01:13:28,490
تحتاجون إلى التصدي لهذا.

1582
01:13:28,490 --> 01:13:30,865
وإلا، ستُصبح البيانات الوهمية في 
النهاية في قاعدة بياناتكم،

1583
01:13:30,865 --> 01:13:32,120
ستسير الأمور على نحو خاطئ.

1584
01:13:32,120 --> 01:13:35,850
لا تثقوا أبدًا، أبدًا، في المستخدم.

1585
01:13:35,850 --> 01:13:37,192
أي أسئلة؟

1586
01:13:37,192 --> 01:13:38,776
الجمهور: هل يمكنك فعل الشيء نفسه عبر CSS؟

1587
01:13:38,776 --> 01:13:40,525
دايفيد مالان: هل يمكنك
فعل الشيء نفسه باستخدام CSS؟

1588
01:13:40,525 --> 01:13:43,130
الجمهور: نعم، هل يمكنك [INAUDIBLE]
INAUDIBLE] JavaScript]؟؟

1589
01:13:43,130 --> 01:13:44,840
دايفيد مالان: ليس باستخدام CSS فقط.

1590
01:13:44,840 --> 01:13:47,990
يمكنك استخدام CSS لجعل
رسائل الخطأ أجمل بكثير، نعم،

1591
01:13:47,990 --> 01:13:51,237
ولكن ليس الأمر منطقيًا بما يكفي باستخدام CSS فقط.

1592
01:13:51,237 --> 01:13:54,320
وفي الواقع، فقط لإعطائكم الآن
معنى الخاص بكيفية جعل الأشياء أجمل

1593
01:13:54,320 --> 01:13:58,700
حيث استمر بالإشارة إلى مهارات تصميم 
أفضل من تلك التي أقوم بعرضها هنا.

1594
01:13:58,700 --> 01:14:01,550
إذا انتقلنا إلى Bootstrap، هذه المكتبة
مفتوحة المصدر، والمجانية، والشائعة

1595
01:14:01,550 --> 01:14:05,070
جدًا من CSS، تحتوي في الواقع على بعض 
الميزات التفاعلية، أيضًا.

1596
01:14:05,070 --> 01:14:08,360
وإذا انتقلتُ أسفل المكونات في
الوثائق وقمتُ بالتمرير

1597
01:14:08,360 --> 01:14:11,630
وانتقلتُ إلى الأشكال،
سترون، شكل واحد، لاحظوا

1598
01:14:11,630 --> 01:14:14,230
أن هذه الأشكال هي بالفعل
أجمل بكثير من تلك التي

1599
01:14:14,230 --> 01:14:15,230
قمتُ بإنشائها، أليس كذلك؟

1600
01:14:15,230 --> 01:14:17,600
إنها مثل نص أسود،
ونص رمادي، ونص صغير.

1601
01:14:17,600 --> 01:14:19,580
يبدو الأمر فقط أجمل وأفضل.

1602
01:14:19,580 --> 01:14:21,080
لكن من السهل القيام بذلك بشكل نسبي.

1603
01:14:21,080 --> 01:14:22,954
وبالفعل، بالنسبة للمشاكل
التالية حيث سيكون

1604
01:14:22,954 --> 01:14:26,000
مسموح لكم أن تقوموا بنسخ ولصق
تعليمة النموذج البرمجية هذه وHTML،

1605
01:14:26,000 --> 01:14:29,270
واستخدام Bootstrap CSS فقط
لجعل أشكالكم تبدو أجمل.

1606
01:14:29,270 --> 01:14:32,400
ولكن ما يمكنها القيام به حقًا إذا
انتقلتُ إلى القائمة الفرعية هنا،

1607
01:14:32,400 --> 01:14:34,840
لاحظوا أنه يوجد قسم
التحقّق هذا في Bootstrap.

1608
01:14:34,840 --> 01:14:36,300
وتحتوي المكتبات الأخرى على هذا، أيضًا.

1609
01:14:36,300 --> 01:14:38,480
وسترغبون في قراءة
الوثائق الفعلية.

1610
01:14:38,480 --> 01:14:41,780
ولكن إذا قمتُ بالتمرير للأسفل لبعض الوقت،
ها هو نموذج شكل في Bootstrap.

1611
01:14:41,780 --> 01:14:45,440
يبدو بالفعل أجمل قليلاً من
أي شيء قمتُ بإنشائه في HTML البسيط فقط.

1612
01:14:45,440 --> 01:14:50,420
ولكن لاحظوا إذا لم أتعاون، يمكنكم إجراء
تحقّق رائع من الأشكال حقًا

1613
01:14:50,420 --> 01:14:53,030
باستخدام نص أخضر وأحمر إذا
تعاون المستخدم

1614
01:14:53,030 --> 01:14:57,260
أو لم يتعاون باستخدام مزيج من CSS،
ولكن مع بعض تعليمة JavaScript البرمجية.

1615
01:14:57,260 --> 01:14:59,540
إذن ما يفعله Bootstrap
لكم في الواقع هو

1616
01:14:59,540 --> 01:15:01,940
تشغيل معالجة تعليمة
JavaScript البرمجية تلك تلقائيًا

1617
01:15:01,940 --> 01:15:04,057
التي رأيناها منذ أسبوعين
واستخدمناها الآن للتو.

1618
01:15:04,057 --> 01:15:06,140
ولكن فقط لا تنبثق
رسالة منها للمستخدم،

1619
01:15:06,140 --> 01:15:08,098
في الواقع تعطيه
ملاحظات فورية أكثر.

1620
01:15:08,098 --> 01:15:11,270
وتقريبًا أي موقع ويب شائع
تزورونه هذه الأيام يمنحكم

1621
01:15:11,270 --> 01:15:13,280
هذا المدخل الأقرب والفوري أكثر.

1622
01:15:13,280 --> 01:15:16,760
بشكل عام لا ترون
رسالة خطأ بسيطة منبثقة،

1623
01:15:16,760 --> 01:15:19,940
حتى على الرغم من أن هذا الأمر أسهل للقيام به.

1624
01:15:19,940 --> 01:15:22,420
أي أسئلة؟

1625
01:15:22,420 --> 01:15:24,530
حسنًا، إذن من أين
أتى ذلك المنطق؟

1626
01:15:24,530 --> 01:15:27,680
إذن دعوني أنتقل، على
سبيل المثال، إلى ملفي

1627
01:15:27,680 --> 01:15:30,860
النموذجي الآن للشكل في froshim6--

1628
01:15:30,860 --> 01:15:32,840
مجددًا، آخر هذه الأمثلة--

1629
01:15:32,840 --> 01:15:34,730
وستلاحظون أنني فعلتُ هذا.

1630
01:15:34,730 --> 01:15:37,520
إذا قمتُ بالتمرير خلال هذا الملف،
فسترون HTML نفسها

1631
01:15:37,520 --> 01:15:39,330
كما كنا نستخدمها لبعض الوقت.

1632
01:15:39,330 --> 01:15:43,010
ولكن لاحظوا في أسفل الصفحة
أنني استحضرتُ بعض الإلهام

1633
01:15:43,010 --> 01:15:48,290
منذ أسبوعين عندما نظرنا في
HTML، وCSS، وJavaScript.

1634
01:15:48,290 --> 01:15:51,650
إذن فقط لأنشط ذاكرتكم سريعًا،
لاحظوا كيف يعمل هذا.

1635
01:15:51,650 --> 01:15:54,320
يقول هذا السطر من التعليمة البرمجية
في JavaScript تحقّق من

1636
01:15:54,320 --> 01:15:57,730
المستند باستخدام مُحدِد الاستعلام،
الذي يتيح لكم تحديد أي شيء

1637
01:15:57,730 --> 01:16:00,740
في صفحة الويب حيث يبحث عن شكل.

1638
01:16:00,740 --> 01:16:05,840
وعندما يتم تقديم هذا الشكل، استدعوا
الدالة المجهولة التالية.

1639
01:16:05,840 --> 01:16:11,210
إذا عثر مُحدِد استعلام المستند
على مدخل ليس له قيمة--

1640
01:16:11,210 --> 01:16:13,522
وأقول ليس بسبب
علامة التعجب هنا--

1641
01:16:13,522 --> 01:16:15,980
التي تخبر المستخدم بهذا، 
يجب عليك تقديم اسمك

1642
01:16:15,980 --> 01:16:17,120
وقم بإرجاع خاطئ.

1643
01:16:17,120 --> 01:16:22,820
وأيضًا إذا لم يقدم المستخدم قيمة
لقائمة التحديد-- المعروفة أيضًا بالسكن--

1644
01:16:22,820 --> 01:16:25,520
امضي قدمًا وقُم بتنبيهه أنه
يجب أن يقدم السكن،

1645
01:16:25,520 --> 01:16:26,930
وإلا قُم بإرجاع صحيح.

1646
01:16:26,930 --> 01:16:29,270
وفقط لأكون واضحًا 
ولنتذكر منذ أسبوعين،

1647
01:16:29,270 --> 01:16:31,010
ما الذي أقوم بإرجاعه خاطئ؟

1648
01:16:31,010 --> 01:16:33,032
ما الذي يفعله هذا التأثير بشكل منطقي؟

1649
01:16:33,032 --> 01:16:36,270


1650
01:16:36,270 --> 01:16:38,290
نعم، كرّر ذلك مجددًا؟

1651
01:16:38,290 --> 01:16:40,330
ما كان ذلك؟

1652
01:16:40,330 --> 01:16:41,930
سمعتُ همسًا هنا.

1653
01:16:41,930 --> 01:16:43,730
لا؟

1654
01:16:43,730 --> 01:16:46,312
نعم، هذا يمنع 
تقديم الشكل.

1655
01:16:46,312 --> 01:16:48,770
السلوك الافتراضي لشكل ما
هو أنه يريد أن يتم تقديمه.

1656
01:16:48,770 --> 01:16:49,950
هذا هو سبب وجوده.

1657
01:16:49,950 --> 01:16:51,920
ولكن إذا قمتم بإرجاع
خاطئ في JavaScript، فإنها

1658
01:16:51,920 --> 01:16:54,860
ستقلل تدوير ذلك وتمنع 
هذا السلوك الافتراضي،

1659
01:16:54,860 --> 01:16:58,050
وبالتالي إيقاف المستخدم من
تقديم الشكل على الإطلاق.

1660
01:16:58,050 --> 01:17:02,810
إذن دعونا نرجع خطوة للخلف الآن، هناك
أشياء كثيرة تحدث في هذا الملف الآن

1661
01:17:02,810 --> 01:17:03,500
فقط.

1662
01:17:03,500 --> 01:17:05,990
في هذا المثال السادس 
والنهائي، لاحظوا أن

1663
01:17:05,990 --> 01:17:09,260
لدينا application.py، وهو 
نقطة دخول، ما يُسمى بوحدة التحكم

1664
01:17:09,260 --> 01:17:11,090
في تطبيق الويب هذا.

1665
01:17:11,090 --> 01:17:15,380
ويحتوي على طريق يبدو 
ببساطة شديدة هكذا بالنسبة إلى خط مائل.

1666
01:17:15,380 --> 01:17:19,490
عندما يحصل المستخدم على خط مائل، 
يتم إرجاع هذا القالب ببساطة.

1667
01:17:19,490 --> 01:17:22,320
ما الذي يوجد في قالب index.html هذا؟

1668
01:17:22,320 --> 01:17:25,560
حسنًا، إنه يحتوي على ملف HTML جزئي.

1669
01:17:25,560 --> 01:17:27,550
إنه يحتوي على HTML هذه.

1670
01:17:27,550 --> 01:17:31,160
ولكنه لا يحتوي على doctype،
وعلامة HTML، وعلامة رأس، وعلامة البنية،

1671
01:17:31,160 --> 01:17:32,570
وعلامة العنوان، وكل ذلك.

1672
01:17:32,570 --> 01:17:37,040
يحتوي فقط على الأشياء التي يجب
أن تكون داخل علامة البنية.

1673
01:17:37,040 --> 01:17:39,890
لأن هذا الملف
يستخدم القليل من jinja،

1674
01:17:39,890 --> 01:17:42,260
التي تُعد اللغة النموذجية
التي يستخدمها Flask.

1675
01:17:42,260 --> 01:17:44,540
يمكنكم فقط التفكير فيه
كـ Flask، هذا أمر جيد.

1676
01:17:44,540 --> 01:17:51,980
إنه يستخدم بعض من HTML هنا، ولكنه أيضًا 
يستخدم في أسفل الملف JavaScript.

1677
01:17:51,980 --> 01:17:55,880
إذن كما فعلنا من قبل عندما
نظرنا في مصدر الصفحة،

1678
01:17:55,880 --> 01:18:00,230
الشيء الذي سأراه في المتصفح
في صفحة الأشكال هذه ليس jinja،

1679
01:18:00,230 --> 01:18:02,810
وليس Python، ولا شيء متعلق بـ Flask.

1680
01:18:02,810 --> 01:18:06,530
فقط صفحة HTML تم تشكيلها
بشكل كامل وتحتوي الآن أيضًا

1681
01:18:06,530 --> 01:18:08,480
على بعض تعليمة جانب العميل البرمجية هذه.

1682
01:18:08,480 --> 01:18:11,570
إذن لديّ هذا المزيج الآن
من عدة لغات مختلفة،

1683
01:18:11,570 --> 01:18:15,978
لكن كل منها يحل
مشكلة مميزة للغاية.

1684
01:18:15,978 --> 01:18:16,952
أجل؟

1685
01:18:16,952 --> 01:18:21,010
الجمهور: إذن أعتقد أنه
منذ أسبوع أو أسبوعين عندما

1686
01:18:21,010 --> 01:18:23,039
كنا نعمل على
JavaScript وCSS، كنتَ

1687
01:18:23,039 --> 01:18:28,883
تقول أنه من المُفضل
تقسيم اللغات، وليس

1688
01:18:28,883 --> 01:18:30,588
مزجها في المستند نفسه.

1689
01:18:30,588 --> 01:18:32,570
الآن نقوم بمزج
لغات متعددة.

1690
01:18:32,570 --> 01:18:34,111
ديفيد مالان: ملاحظة جيدة حقًا.

1691
01:18:34,111 --> 01:18:37,100
إذن منذ أسبوعين نصحتكم
بالفعل بفصل المخاوف،

1692
01:18:37,100 --> 01:18:38,630
وبالتالي فصل الملفات.

1693
01:18:38,630 --> 01:18:40,940
ولهذا السبب قدمنا
ملف .css،

1694
01:18:40,940 --> 01:18:44,450
كما عرضنا بشكل موجز أمثلة
من ملف .js.

1695
01:18:44,450 --> 01:18:47,780
الإجابة المختصرة هي أنه بينما
تصبح تطبيقاتك أكثر تعقيدًا،

1696
01:18:47,780 --> 01:18:48,835
ستصبح الحياة فوضوية.

1697
01:18:48,835 --> 01:18:50,960
وكنتُ أتحدث إلى الفريق
في الواقع بشأن هذا

1698
01:18:50,960 --> 01:18:53,210
في وقت سابق حول كيفية تقديم
بعض هذه الأمثلة،

1699
01:18:53,210 --> 01:18:57,770
لأن ما ترونه في قرار تصميمي
هنا يُشكل صعوبة.

1700
01:18:57,770 --> 01:19:00,090
إذن هذه الصعوبة هنا هي على النحو التالي.

1701
01:19:00,090 --> 01:19:04,100
إنها ليست أفضل ممارسة بالضرورة
لتكون لديكم فقط تعليمة JavaScript

1702
01:19:04,100 --> 01:19:06,794
البرمجية المنطقية والمختلطة باستخدام HTML لديكم.

1703
01:19:06,794 --> 01:19:08,960
هذا يجعل التعاون
مع شخص آخر صعبًا أكثر.

1704
01:19:08,960 --> 01:19:11,900
إذا كان أحدكم جيدًا جدًا في التصميم
ويريد العمل في HTML وCSS،

1705
01:19:11,900 --> 01:19:14,540
ويريد الشخص الآخر حقًا أن يقوم بإنشاء
تعليمة JavaScript البرمجية، القيام بذلك

1706
01:19:14,540 --> 01:19:16,460
صعب إلى حد ما أثناء وجود
كلتاهما في الملف نفسه.

1707
01:19:16,460 --> 01:19:17,900
إذن يمكننا استبعاد هذا.

1708
01:19:17,900 --> 01:19:23,420
يمكنني تغيير هذا السطر، فقط
ليكون واضحًا جدًا، ليصبح هكذا.

1709
01:19:23,420 --> 01:19:27,110
بدلاً من وضع تعليمتي البرمجية الفعلية
في الملف، يمكنني القيام بشيء كهذا.

1710
01:19:27,110 --> 01:19:32,930
سيكون مصدر هذا 
form.js، وهذا كل شيء.

1711
01:19:32,930 --> 01:19:36,170
ومن ثم لديّ ملف منفصل ربما
يعمل فيه زميلي كما يلي.

1712
01:19:36,170 --> 01:19:38,420
ولكن في مرحلة ما الأفكار
التي تدور في رأسي

1713
01:19:38,420 --> 01:19:42,710
هي، إنها فقط مثل 10
سطور من التعليمة البرمجية ويجب

1714
01:19:42,710 --> 01:19:45,440
أن أقوم بإنشاء ملف ثاني
الآن، وهذا الملف الثاني

1715
01:19:45,440 --> 01:19:48,230
ربما سيكون في مجلد
مختلف مثل القالب الخاص بي.

1716
01:19:48,230 --> 01:19:51,860
وكما تعلمون، يبدو أن هذا
فقط يعمل على هندسة حل بشكل فائق

1717
01:19:51,860 --> 01:19:52,740
للمشكلة.

1718
01:19:52,740 --> 01:19:57,420
ومع ذلك، بمجرد وجود 20 سطرًا، 100 
سطر، حسنًا، الآن يبدو الأمر فوضويًا.

1719
01:19:57,420 --> 01:19:59,220
في مكان ما يوجد نقطة الانعطاف هذه.

1720
01:19:59,220 --> 01:20:02,240
وهذا حيث لن يوافق الأشخاص 
المنطقيون، وقد أناقش بطريقة ما،

1721
01:20:02,240 --> 01:20:03,490
وتتناقشون بطريقة أخرى.

1722
01:20:03,490 --> 01:20:05,900
وبصراحة، على الأرجح نكون
جميعًا على حق.

1723
01:20:05,900 --> 01:20:09,684
إذن هذا فقط يعبر عن 
تطوير الويب مع مرور الوقت.

1724
01:20:09,684 --> 01:20:12,350
وتوجد أُطُر العمل الرائعة 
الآن. وإذا ربطنا الأمور بما سبق

1725
01:20:12,350 --> 01:20:16,277
في السؤال حول CS50 وما بعدها،
فالفرصة بعد هذه الدورة التي تنظر

1726
01:20:16,277 --> 01:20:18,110
عن كثب في 
برمجة الويب، توجد

1727
01:20:18,110 --> 01:20:22,130
أطُر عمل رائعة أكثر هذه الأيام
من Flask ومن ثم Bootstrap

1728
01:20:22,130 --> 01:20:23,720
عند محاولة حل هذه المشكلة.

1729
01:20:23,720 --> 01:20:26,590
React هو أحد الأطُر الشائعة جدًا
التي قام Facebook بتطويره،

1730
01:20:26,590 --> 01:20:28,340
الآن أصبح مفتوح المصدر
ويستخدمه عدة أشخاص

1731
01:20:28,340 --> 01:20:30,710
في جميع أنحاء العالم
وبالفعل يعالج هذه المشكلة.

1732
01:20:30,710 --> 01:20:33,530
ويتيح لكم فصل
HTML لديكم عن CSS

1733
01:20:33,530 --> 01:20:37,820
وعن JavaScript في أجزاء مختلفة
من الملف ولكن ما زال في الملف نفسه.

1734
01:20:37,820 --> 01:20:39,500
وكان ذلك هو الحل الخاص بها.

1735
01:20:39,500 --> 01:20:42,749
بالإضافة إلى View وAngular، يوجد الكثير من
الحلول المختلفة لهذه المشاكل.

1736
01:20:42,749 --> 01:20:45,774
ولسوء الحظ، بمجرد أن نُخرِج
عجلات التدريب من CS50،

1737
01:20:45,774 --> 01:20:46,940
هذا ما ستواجهونه.

1738
01:20:46,940 --> 01:20:47,982
العالم فوضوي.

1739
01:20:47,982 --> 01:20:50,690
والسبب في وجود عدة
لغات وأطُر العمل

1740
01:20:50,690 --> 01:20:53,810
هو أن أشخاص مثلكم لديهم
هذه البديهيات ويعتقدون،

1741
01:20:53,810 --> 01:20:55,040
أنه يمكن القيام بهذا على نحو أفضل.

1742
01:20:55,040 --> 01:20:57,697
وبالتالي نقوم بالتكرار 
ولدينا العديد من التكنولوجيات الجديدة.

1743
01:20:57,697 --> 01:20:59,780
ولكن هذا النوع من 
الأشياء-- وبصراحة، هذا

1744
01:20:59,780 --> 01:21:02,370
هو نوع من السخافة
بحيث يتغير مع مرور الوقت.

1745
01:21:02,370 --> 01:21:04,910
أساسيات HTTP،
وتعليمة جانب العميل البرمجية،

1746
01:21:04,910 --> 01:21:07,880
وتعليمة JavaScript البرمجية، تلك 
الأساسيات ثابتة

1747
01:21:07,880 --> 01:21:10,430
حتى على الرغم من تغير 
تفاصيل التنفيذ.

1748
01:21:10,430 --> 01:21:12,710
إذن الإجابة المختصرة هي،
هل يمكن أن يكون هذا أفضل؟

1749
01:21:12,710 --> 01:21:13,390
من المحتمل.

1750
01:21:13,390 --> 01:21:14,390
هل يمكن أن يكون أفضل بكثير؟

1751
01:21:14,390 --> 01:21:15,080
لا أعرف.

1752
01:21:15,080 --> 01:21:18,860
الآن يصبح الأمر جداليًا 
بشكل أكبر بين المُطورين.

1753
01:21:18,860 --> 01:21:20,000
سؤال جيد.

1754
01:21:20,000 --> 01:21:23,420
حسنًا، إذن دعونا الآن نستخدم
بعض هذه الكتل البنائية

1755
01:21:23,420 --> 01:21:26,330
الأساسية لإنشاء مجموعة
نهائية من الأمثلة التي توضح

1756
01:21:26,330 --> 01:21:29,739
ميزة مألوفة جدًا بالنسبة
لمعظمنا وتُذكرنا بما

1757
01:21:29,739 --> 01:21:31,280
قمنا به منذ أسبوعين باستخدام بحث Google.

1758
01:21:31,280 --> 01:21:32,780
في الوقت الذي بحثنا فيه عن قطط.

1759
01:21:32,780 --> 01:21:35,150
اليوم سنُبقي الأمر أبسط 
قليلاً وأقل رسومية

1760
01:21:35,150 --> 01:21:36,233
ونبحث فقط عن كلمات.

1761
01:21:36,233 --> 01:21:38,480
لأنكم ستتذكرون من
مجموعة مشاكل المدقق الإملائي لدينا،

1762
01:21:38,480 --> 01:21:42,860
قمتم بتنفيذ مدقق إملائي
بأكثر من 140000 كلمة إنجليزية.

1763
01:21:42,860 --> 01:21:45,770
هذه مجموعة بيانات
هامة حقًا للبحث خلالها،

1764
01:21:45,770 --> 01:21:49,550
ومن المحتمل أنكم جميعًا على دراية
بالإكمال التلقائي هذه الأيام.

1765
01:21:49,550 --> 01:21:52,370
يوجد بالكاد موقع ويب هذه الأيام
أنه عند بدء كتابته

1766
01:21:52,370 --> 01:21:54,270
لا يحاول إنهاء
أفكاركم من أجلكم.

1767
01:21:54,270 --> 01:21:56,450
Google، Facebook، أي
عدد من المواقع الأخرى.

1768
01:21:56,450 --> 01:21:58,900
إذن الإكمال التلقائي، كيف يعمل ذلك؟

1769
01:21:58,900 --> 01:22:00,900
حسنًا، دعوني أقترح
النموذج العقلي التالي.

1770
01:22:00,900 --> 01:22:03,260
إذا كانت لديكم مجموعة من البيانات
مثل قائمة كبيرة من الكلمات،

1771
01:22:03,260 --> 01:22:06,440
أو قائمة كبيرة من الأصدقاء على Facebook،
أو قائمة كبيرة من أي شيء،

1772
01:22:06,440 --> 01:22:09,975
قد تقومون بتخزين ذلك جانب الخادم
لأن هذه البيانات كثيرة جدًا.

1773
01:22:09,975 --> 01:22:12,350
وفي الواقع، الأسبوع المقبل، قد 
تقومون بالتخزين في قاعدة بيانات كبيرة.

1774
01:22:12,350 --> 01:22:14,141
ولكن لليوم سنقوم
فقط بالتخزين في ملف

1775
01:22:14,141 --> 01:22:15,986
مثلما فعلنا لمجموعة المدقق الإملائي.

1776
01:22:15,986 --> 01:22:18,110
ولكن إذا كنتم ترغبون في إنشاء
تجربة تفاعلية

1777
01:22:18,110 --> 01:22:20,210
للشخص، ما هي
اللغة التي من المحتمل

1778
01:22:20,210 --> 01:22:24,340
أنكم سترغبون في استخدامها حتى
يحصل هو أو هي على ملاحظات فورية؟

1779
01:22:24,340 --> 01:22:25,525
على الأرجح JavaScript، أليس كذلك؟

1780
01:22:25,525 --> 01:22:26,650
ذلك هو المبدأ بأكمله.

1781
01:22:26,650 --> 01:22:28,810
ستقوم تعليمة جانب العميل البرمجية
بالتنفيذ بشكل أسرع لأنه لا يوجد

1782
01:22:28,810 --> 01:22:30,820
إنترنت بينكم وبين التعليمة البرمجية.

1783
01:22:30,820 --> 01:22:33,670
ولكن باستخدام Python، يمكنكم
الوصول إلى الملفات.

1784
01:22:33,670 --> 01:22:36,850
ومع ذلك، باستخدام تعليمة JavaScript البرمجية
يمكنكم الوصول بشكل أقرب إلى المستخدم،

1785
01:22:36,850 --> 01:22:38,230
لذا توجد هذه الصعوبات.

1786
01:22:38,230 --> 01:22:43,150
إذن كيف يمكننا أن نمضي في بناء موقع
يتيح للشخص عبر الشكل البحث

1787
01:22:43,150 --> 01:22:45,310
عبر ذلك الملف عن كلمات؟

1788
01:22:45,310 --> 01:22:47,080
حسنًا، دعونا نبدأ على النحو التالي.

1789
01:22:47,080 --> 01:22:52,900
إذن في الكلمة 0 لدينا ما يلي.

1790
01:22:52,900 --> 01:22:56,680
كبير، وهو مجرد ملف نصي
مُستعار من مجموعة مشاكل المدقق الإملائي،

1791
01:22:56,680 --> 01:22:58,484
140000 كلمة، سطر واحد ضعيف فيه.

1792
01:22:58,484 --> 01:23:00,400
لن أقوم حتى بالنقر 
عليه نقرًا مزدوجًا وفتحه

1793
01:23:00,400 --> 01:23:03,280
لأنه كبير جدًا
سيستغرق بضع ثواني لفتحه.

1794
01:23:03,280 --> 01:23:06,560
في application.py على الأرجح لدينا
نقطة دخول إلى هذا التطبيق،

1795
01:23:06,560 --> 01:23:09,219
وفي القوالب لدينا فقط
ثلاثة قوالب هذه المرة.

1796
01:23:09,219 --> 01:23:12,010
إذن فقط عندما تقرأون التعليمة 
البرمجية لشخص آخر لأول مرة،

1797
01:23:12,010 --> 01:23:13,210
أين يجب أن تكون نقطة دخولنا؟

1798
01:23:13,210 --> 01:23:15,710
أين يجب أن نلقي نظرة
لفهم ما يحدث؟

1799
01:23:15,710 --> 01:23:18,170


1800
01:23:18,170 --> 01:23:19,235
ربما application.py.

1801
01:23:19,235 --> 01:23:20,360
أو بصراحة، أتعرفون ماذا؟

1802
01:23:20,360 --> 01:23:23,030
إذا كنتم ترغبون في معرفة
ما يقوم به الشيء، قوموا بتشغيله.

1803
01:23:23,030 --> 01:23:23,990
لا ضرر في القيام بذلك.

1804
01:23:23,990 --> 01:23:25,600
إذن لنُشغّل Flask.

1805
01:23:25,600 --> 01:23:26,850
اجعل هذا أكبر قليلاً.

1806
01:23:26,850 --> 01:23:30,020
دعوني أفتح عنوان URL هنا،
وأفتح، وأرى نموذجًا بسيطًا جدًا

1807
01:23:30,020 --> 01:23:31,400
يسألني عن استعلام.

1808
01:23:31,400 --> 01:23:35,810
دعوني أمضي قدمًا وأبحث
وأنقر فوق Search.

1809
01:23:35,810 --> 01:23:37,970
وبعد لحظة، حسنًا.

1810
01:23:37,970 --> 01:23:40,730
هذا عدد كبير من الكلمات،
لكن يبدو أن

1811
01:23:40,730 --> 01:23:42,860
هذه جميعها الكلمات الإنجليزية
التي يعرفها قاموسنا

1812
01:23:42,860 --> 01:23:44,480
بشأن تلك التي تبدأ بحرف a.

1813
01:23:44,480 --> 01:23:46,354
وإذا انتقلتُ بنفس الطريقة 
إلى الأسفل، سترى

1814
01:23:46,354 --> 01:23:49,460
أنها تتوقف ند az بغض النظر
عن أي كلمة تبدأ بالحرف B، في الواقع.

1815
01:23:49,460 --> 01:23:52,290
حسنًا، دعونا نتأكد من أن هذا في الواقع
يعمل وليس مجرد خدعة.

1816
01:23:52,290 --> 01:23:54,320
لنبحث عن كلمات تبدأ بحرف b.

1817
01:23:54,320 --> 01:23:56,170
حسنًا ، إذن يبدو أن هذا يعمل، أيضًا.

1818
01:23:56,170 --> 01:23:58,730
ولاحظوا أنني استعرت بعض
الإلهام من Google.

1819
01:23:58,730 --> 01:24:02,450
لاحظوا أن الطريقة التي استخدمتُها
تُسمى خط مائل search استخدمناها منذ أسبوعين.

1820
01:24:02,450 --> 01:24:06,600
هل تأخذ معلمة إشارة للاستعلام،
وb هو أيًا كان ما كتبه الشخص.

1821
01:24:06,600 --> 01:24:10,010
لذا إذا كنتَ تريد البحث
عن كلمات تبدأ بالحرف z، enter،

1822
01:24:10,010 --> 01:24:11,750
آمل أنه يجب أن أعود الأن إلى الكلمات التي تبدأ بالحرف z.

1823
01:24:11,750 --> 01:24:15,650
إذن الآن بخلاف ما قمنا به منذ أسبوعين،
يمكننا تنفيذ كل من واجهة التطبيق

1824
01:24:15,650 --> 01:24:17,610
والخلفية لمحرك البحث.

1825
01:24:17,610 --> 01:24:19,910
لكن محرك البحث الخاص بنا
يبحث الآن فقط عن الكلمات.

1826
01:24:19,910 --> 01:24:23,150
لذا دعونا ننظر في application.py
كما هو مقترح، وهو نقطة الدخول،

1827
01:24:23,150 --> 01:24:24,800
ولنرى كيف أقوم بهذا.

1828
01:24:24,800 --> 01:24:28,220
إذن هذه هي التعليمة البرمجية
التي استعرتُها من الأسبوع الماضي

1829
01:24:28,220 --> 01:24:30,230
عندما قمنا سريعًا بتنفيذ
المدقق الإملائي

1830
01:24:30,230 --> 01:24:33,140
في 12 أو 20 سطرًا من تعليمات Python البرمجية.

1831
01:24:33,140 --> 01:24:35,270
أنا أُعلن عن متغير
شامل يُدعى كلمات،

1832
01:24:35,270 --> 01:24:38,110
وقمتُ بتكبيره فقط
ليذكرنا بالمرة الماضية

1833
01:24:38,110 --> 01:24:39,160
ومجموعة المشكلة.

1834
01:24:39,160 --> 01:24:41,240
أنا أستخدم هذه الصيغة
التي أشرتُ إليها في وقت سابق

1835
01:24:41,240 --> 01:24:43,700
هي تقليدية أكثر أو باثونية.

1836
01:24:43,700 --> 01:24:47,540
افتح الملف الكبير في وضع القراءة
واطلب ملف المتغير.

1837
01:24:47,540 --> 01:24:50,240
ثم هنا التكرار الحلقي الذي
يمكنك باستخدامه تكرار أكثر من

1838
01:24:50,240 --> 01:24:53,330
كل سطر في الملف،
وتقرأ سطر واحد في كل مرة.

1839
01:24:53,330 --> 01:24:55,670
ولكن تذكر، ما الذي ينتهي به
كل سطر في هذا الملف؟

1840
01:24:55,670 --> 01:24:58,270


1841
01:24:58,270 --> 01:25:01,820
مثل خط مائل عكسي n، ونحن لا نريد
بالفعل تلك كجزء من الكلمات.

1842
01:25:01,820 --> 01:25:03,320
هذا ليس جزءًا من الكلمة الإنجليزية.

1843
01:25:03,320 --> 01:25:07,290
لذا R strip، يزيل الشريط الأيمن أي
مسافة من نهاية السلسلة.

1844
01:25:07,290 --> 01:25:09,330
وهذا هو سبب وراء أنني أحتاج إلى
إضافة هذا الخط الإضافي.

1845
01:25:09,330 --> 01:25:11,750
لذلك أنا أقوم فقط بتنظيف
الملف أو التلاعب بالبيانات

1846
01:25:11,750 --> 01:25:15,300
كما قد تفعلون ذلك باستخدام أي نوع
من التطبيقات القائمة على البيانات.

1847
01:25:15,300 --> 01:25:18,320
إذن بعد ذلك يبدو أن لدي هذا
الطريق الذي يُقدّم القالب.

1848
01:25:18,320 --> 01:25:21,440
إذا نظرتُ في index.html،
دعونا نتبع الآثار.

1849
01:25:21,440 --> 01:25:23,120
انتقل إلى index.html.

1850
01:25:23,120 --> 01:25:24,830
حسنًا،هذا لن يحدث كثيرًا هنا.

1851
01:25:24,830 --> 01:25:27,830
تبدو مثل HTML، حيث يكون
الإجراء الخاص به هو خط مائل search،

1852
01:25:27,830 --> 01:25:28,850
تمامًا مثل ذلك الخاص بـ Google.

1853
01:25:28,850 --> 01:25:31,184
طريقة ذلك هي get
تمامًا مثل تلك الخاصة بـ Google.

1854
01:25:31,184 --> 01:25:34,100
لا يوجد أي شيء خاص حقًا بشأن
الكلمات التي أبحث عنها هنا،

1855
01:25:34,100 --> 01:25:35,390
لذا لا أهتم بذلك.

1856
01:25:35,390 --> 01:25:37,010
توجد بعض الميزات الرائعة أكثر هنا.

1857
01:25:37,010 --> 01:25:39,840
لاحظوا العنصر النائب هو النص
الرمادي الذي يراه الشخص.

1858
01:25:39,840 --> 01:25:41,090
تركيز تلقائي.

1859
01:25:41,090 --> 01:25:42,992
مجددًا ما الذي يقوم به هذا؟

1860
01:25:42,992 --> 01:25:45,075
هذه هي ميزة واجهة المستخدم فقط،
تجربة أفضل للمستخدم.

1861
01:25:45,075 --> 01:25:47,290
الجمهور: تضع ما شابه ذلك،
مباشرة في مربع النص.

1862
01:25:47,290 --> 01:25:50,210
دايفيد مالان: نعم، إنها تضع المؤشر
مباشرة في مربع النص.

1863
01:25:50,210 --> 01:25:53,040
للتركيز على شيء ما في 
صفحة ويب يعني جعله

1864
01:25:53,040 --> 01:25:54,590
يتفاعل مع المستخدم في الوقت الحالي.

1865
01:25:54,590 --> 01:25:56,716
ويقوم نظام التشغيل Mac، على سبيل المثال،
بتظليله باللون الأزرق.

1866
01:25:56,716 --> 01:25:58,590
إذن عندما تقومون أولاً بتحميل
الصفحة، فإن وميض المؤشر

1867
01:25:58,590 --> 01:26:02,160
في اختيار مربعات النص
ما تهتمون به بشكل أكبر.

1868
01:26:02,160 --> 01:26:05,625
يعمل Autocomplete off فقط على تعطيل
إصدار المتصفح من الإكمال التلقائي.

1869
01:26:05,625 --> 01:26:08,250
إذن لا أرى عمليات البحث السابقة،
فقط لأن المغزى هنا

1870
01:26:08,250 --> 01:26:10,440
هو تنفيذ هذا
بأنفسنا في نهاية المطاف،

1871
01:26:10,440 --> 01:26:11,820
ومن ثم لديّ زر البحث الخاص بي.

1872
01:26:11,820 --> 01:26:15,360
هذه أشياء خاصة بلغة jinja من
Flask لكي يكون لديّ ملف تخطيط.

1873
01:26:15,360 --> 01:26:16,730
دعونا نتبع تلك الآثار.

1874
01:26:16,730 --> 01:26:20,250
layout.html، لا شيء مثير
للاهتمام حقًا يحدث هناك.

1875
01:26:20,250 --> 01:26:23,010
إذا فكرتم في السبب حصلونا على هذه
في العديد من عروضنا التوضيحية،

1876
01:26:23,010 --> 01:26:26,130
هذا السطر الذي يبدو مشفرًا هنا
يجعل مواقع الويب تبدو أفضل فقط

1877
01:26:26,130 --> 01:26:27,600
على أجهزة الهواتف المحمولة.

1878
01:26:27,600 --> 01:26:30,750
بشكل افتراضي عادةً، إذا قمتم بسحب
هواتفكم ونظرتم في موقع ويب،

1879
01:26:30,750 --> 01:26:32,700
إذا لم يكن يحتوي على
هذا النوع من السطور، على سبيل المثال

1880
01:26:32,700 --> 01:26:35,970
سيكون النص صغيرًا
جدًا إلا إذا قمتم بالضغط والتكبير.

1881
01:26:35,970 --> 01:26:38,460
باستخدام هذا السطر 
وأشكاله المتنوعة،

1882
01:26:38,460 --> 01:26:40,320
سيُزيد حجم
الخط الافتراضي قليلاً

1883
01:26:40,320 --> 01:26:42,540
لجعله مقبولاً أكثر قليلاً
على شاشة صغيرة.

1884
01:26:42,540 --> 01:26:44,970
إذن هذا نجح سهل
لتجربة المستخدمين.

1885
01:26:44,970 --> 01:26:48,420
حسنًا، يبدو أنني اختبرت جميع الأشياء
المثيرة للاهتمام في هذه القوالب.

1886
01:26:48,420 --> 01:26:50,740
دعونا ننظر في طريق أخير ونهائي.

1887
01:26:50,740 --> 01:26:55,410
ها هو طريق البحث لديّ،
ويُشبه كثيرًا Python.

1888
01:26:55,410 --> 01:26:57,510
هذا صعب،
وسنعيد تنفيذه

1889
01:26:57,510 --> 01:26:59,260
بطريقة مختلفة في الحال.

1890
01:26:59,260 --> 01:27:02,880
إذن لديّ طريق بحث يستمع إلى
الحصول على طلبات في خط مائل search.

1891
01:27:02,880 --> 01:27:07,029
ثم هذا الخط الخيالي هو باثوني
تقريبًا مثل ما تحصل عليه التعليمة البرمجية.

1892
01:27:07,029 --> 01:27:08,820
وسأُفسر ماذا 
يفعل هذا ولماذا

1893
01:27:08,820 --> 01:27:14,130
هو تقليدي بدلاً من
كونه مباشر للوهلة الأولى.

1894
01:27:14,130 --> 01:27:17,010
ومن ثم أقدم القالب،
مع التمرير في هذه الكلمات.

1895
01:27:17,010 --> 01:27:20,610
إذن لدى هذه الطبقة على السطر
17 بالفعل تأثير

1896
01:27:20,610 --> 01:27:23,910
البحث في 140000
كلمة لأي كلمات

1897
01:27:23,910 --> 01:27:26,110
تبدأ بما كتبه المستخدم.

1898
01:27:26,110 --> 01:27:28,440
انظروا، سيكون هذا 
أمرًا مزعجًا للقيام به.

1899
01:27:28,440 --> 01:27:30,620
في Python، يمكنكم القيام بذلك
حرفيًا باستخدام سطر واحد.

1900
01:27:30,620 --> 01:27:33,120
سطر طويل، لكن سطر واحد مع ذلك.

1901
01:27:33,120 --> 01:27:34,650
دعوني أوضح هذا أكثر.

1902
01:27:34,650 --> 01:27:38,579
إذا كنتُ أبحث عن
كلمات في هذا الملف الكبير،

1903
01:27:38,579 --> 01:27:39,870
فقد أقوم بشيء مثل هذا.

1904
01:27:39,870 --> 01:27:41,150
الكلمات هي قائمة فارغة.

1905
01:27:41,150 --> 01:27:43,679
لذا هذه الكلمات بالأحرف الصغيرة
هي كل الكلمات التي تتطابق،

1906
01:27:43,679 --> 01:27:45,220
والتي أريد إرسالها إلى المستخدم.

1907
01:27:45,220 --> 01:27:47,520
لذا بشكل افتراضي ليس لدي أي فكرة
عن ما أقوم بإرساله.

1908
01:27:47,520 --> 01:27:48,960
لكنني أعرف أنه يمكنني القيام بذلك.

1909
01:27:48,960 --> 01:27:50,640
لكلمة في كلمات--

1910
01:27:50,640 --> 01:27:53,630
وهو المتغير بالأحرف الكبيرة،
الثابت في الأعلى

1911
01:27:53,630 --> 01:27:55,380
الذي يحتوي على الكل--
أو حتى غير ثابت،

1912
01:27:55,380 --> 01:27:58,760
لكن المتغير الشامل الذي
يحتوي على كل الكلمات من الملف، هنا

1913
01:27:58,760 --> 01:28:00,420
هو التكرار الحلقي فوق هذه.

1914
01:28:00,420 --> 01:28:02,290
يمكنني قول شيء من هذا القبيل الآن.

1915
01:28:02,290 --> 01:28:07,110
إذا كانت الكلمة الحالية تبدأ
بكل ما كتبه المستخدم-- حسنًا،

1916
01:28:07,110 --> 01:28:08,340
فما الذي يكتبه المستخدم؟

1917
01:28:08,340 --> 01:28:13,080
حسنًا، q يساوي request.args.get
علامة اقتباس وعلامة إنهاء الاقتباس q،

1918
01:28:13,080 --> 01:28:17,790
يعطيني اسم المستخدم، أو سكنه،
أو في هذه الحالة قيمة Q للاستعلام.

1919
01:28:17,790 --> 01:28:22,410
لذلك إذا كانت الكلمة التي نقوم حاليًا
بتكرارها تبدأ بالحرف q،

1920
01:28:22,410 --> 01:28:33,350
يمكنني المضي قدمًا والإلحاق إلى--
عذرًا، إلحاق هذه الكلمة إلى هذه القائمة.

1921
01:28:33,350 --> 01:28:35,880
هل ستقولون أنكم معتادون
على هذه السطور هنا؟

1922
01:28:35,880 --> 01:28:41,070
للتلخيص، أعطني قائمة فارغة
حيث يمكنني تخزين نتائج البحث،

1923
01:28:41,070 --> 01:28:44,650
قم بتكرار كل 140000 كلمة
الإضافية الممكنة، احصل على--

1924
01:28:44,650 --> 01:28:45,900
وفي الواقع، كان هذا أمر غبي.

1925
01:28:45,900 --> 01:28:49,050
يجب أن أضع هذا فقط هنا، لأنني
فقط أحتاج إلى التحقق من ذلك مرة واحدة.

1926
01:28:49,050 --> 01:28:52,290
لذلك قم بتخزين مدخل المستخدم
في متغير يُسمى q.

1927
01:28:52,290 --> 01:28:57,420
لكل كلمة ضمن 140000، تحقّق مما
إذا كانت تبدأ بمدخل المستخدم--

1928
01:28:57,420 --> 01:28:59,190
a، b، z، أيًا كان.

1929
01:28:59,190 --> 01:29:02,100
وإذا كان الأمر كذلك، فقم بإلحاقها هناك.

1930
01:29:02,100 --> 01:29:05,190
لذا دعونا نتخلص مؤقتًا من
هذا ونقديم القالب فقط.

1931
01:29:05,190 --> 01:29:09,210
لذا لاحظوا أن هذا ينهي المهمة،
لكن هذا منطق يشبه لغة C للغاية.

1932
01:29:09,210 --> 01:29:11,370
هذا ليس خاطئًا، إنه صحيح تمامًا.

1933
01:29:11,370 --> 01:29:14,460
لكن Python هي لغة
من المفترض أن تكون

1934
01:29:14,460 --> 01:29:17,340
أكثر قابلية لإن يقرءها الشخص
وأنيقة أكثر قليلاً،

1935
01:29:17,340 --> 01:29:19,050
إذا كانت غير واضحة تمامًا.

1936
01:29:19,050 --> 01:29:21,270
لذا فإن هذا السطر
يقوم بنفس الشيء بالضبط

1937
01:29:21,270 --> 01:29:24,530
باستخدام ميزة تُسمى
فهم القائمة، وهي

1938
01:29:24,530 --> 01:29:27,330
مثيرة للسخرية إذا لم
تفهم تمامًا كيفية عملها.

1939
01:29:27,330 --> 01:29:30,080
ولكن ها هو المتغير الذي
أريد إنشاؤه باسم كلمات.

1940
01:29:30,080 --> 01:29:33,169
تقول هذه الأقواس المربعة
هنا أعطني قائمة.

1941
01:29:33,169 --> 01:29:34,710
ما الذي تريد وضعه في تلك القائمة؟

1942
01:29:34,710 --> 01:29:36,339
أريد أن أضع كلمة في هذه القائمة.

1943
01:29:36,339 --> 01:29:38,130
أي كلمة تريد
وضعها في هذه القائمة؟

1944
01:29:38,130 --> 01:29:42,960
نتيجة استنتاج هذا التكرار الحلقي
ومن ثم وضع كلمة فقط في هذه القائمة

1945
01:29:42,960 --> 01:29:46,577
إذا كانت تبدأ بما
كتبه الشخص.

1946
01:29:46,577 --> 01:29:48,660
لذلك يتطلب الأمر التعود،
ولكن هذه طريقة طبقة واحدة فقط،

1947
01:29:48,660 --> 01:29:53,160
وهي طريقة باثونية تمامًا
للتعبير عن تلك السطور العديدة

1948
01:29:53,160 --> 01:29:56,130
من التعليمة البرمجية الإجرائية في سطر واحد بسيط.

1949
01:29:56,130 --> 01:29:57,450
هل هذا أفضل؟

1950
01:29:57,450 --> 01:29:58,492
ليس إذا لم تتمكّنوا من قراءتها.

1951
01:29:58,492 --> 01:30:00,408
لكن بمجرد أن تصبحوا معتادين أكثر
على استخدام Python،

1952
01:30:00,408 --> 01:30:02,220
نعم، هذا أفضل لأنه توجد تعليمة برمجية أقل.

1953
01:30:02,220 --> 01:30:02,925
أجل؟

1954
01:30:02,925 --> 01:30:07,875
الجمهور: لقد قلتَ أن Python تستخدم
التدوين لمعرفة مكان الشروط.

1955
01:30:07,875 --> 01:30:09,425
كيف هو [INAUDIBLE]؟

1956
01:30:09,425 --> 01:30:10,550
ديفيد مالان، سؤال جيد.

1957
01:30:10,550 --> 01:30:13,700
في هذه الحالة من فهم
القائمة، يمكنك فقط

1958
01:30:13,700 --> 01:30:16,610
الحصول على سطر واحد أو شرط واحد.

1959
01:30:16,610 --> 01:30:19,809
لا يمكنك الحصول على عدة سطور فيها،
لذلك لا يمكنني البدء بالضغط على Enter

1960
01:30:19,809 --> 01:30:20,600
ووضع مسافة بادئة هنا.

1961
01:30:20,600 --> 01:30:21,890
إنه غير مسموح به فقط.

1962
01:30:21,890 --> 01:30:24,950
لذا، ستستخدم هذا فقط-- وأنا
بصراحة أتجاوز الحدود حقًا.

1963
01:30:24,950 --> 01:30:27,950
يجب عليك فقط استخدام هذه
الصيغة عندما تناسب شاشتك

1964
01:30:27,950 --> 01:30:30,200
أو تناسب شاشة شخص منطقي.

1965
01:30:30,200 --> 01:30:33,530
بعد ذلك ربما يجب عليك القيام
بشيء معبر أكثر قليلاً.

1966
01:30:33,530 --> 01:30:35,277
أي أسئلة أخرى؟

1967
01:30:35,277 --> 01:30:36,860
لكن هذا أمر شائع جدًا لنراه عبر الإنترنت.

1968
01:30:36,860 --> 01:30:39,380
لذلك أي برامج تعليمية،
إذا رأيتَ هذا النوع من الطبقة الواحدة،

1969
01:30:39,380 --> 01:30:43,460
فحاول أن تفكر فيها من هذا
النهج ما الذي تقوم به في الواقع.

1970
01:30:43,460 --> 01:30:46,820
حسنًا، لذا اقترح من منظور
تجربة المستخدم

1971
01:30:46,820 --> 01:30:48,320
كيف يمكن أن يكون هذا البرنامج أفضل؟

1972
01:30:48,320 --> 01:30:50,070
لأن هذا هو فقط أول إصدار خاص بنا.

1973
01:30:50,070 --> 01:30:53,780
لذا ما الذي يمكن أن يكون
أفضل للمستخدم من هذا؟

1974
01:30:53,780 --> 01:30:57,630


1975
01:30:57,630 --> 01:30:59,180
ما الذي يمكن أن يكون أفضل؟

1976
01:30:59,180 --> 01:31:00,788
أجل؟

1977
01:31:00,788 --> 01:31:06,514
الجمهور: مجرد الرجوع،
هل يمكنك شرح الكلمات بالأحرف الكبيرة؟

1978
01:31:06,514 --> 01:31:07,430
ديفيد مالان: أوه، بالتأكيد.

1979
01:31:07,430 --> 01:31:13,670
الكلمات بالأحرف الكبيرة هي المتغير الشامل
الذي قمتُ بتعرفيه هنا والذي يُخزِّن كل 140000

1980
01:31:13,670 --> 01:31:14,450
كلمة الإضافية.

1981
01:31:14,450 --> 01:31:17,900
هذا ملف كبير حقًا
يُسمى كبير، الملف النصي.

1982
01:31:17,900 --> 01:31:20,000
بالأسفل هنا أنا أحتاج إلى متغير محلي.

1983
01:31:20,000 --> 01:31:23,030
وإذا كان أكثر وضوحًا، يمكن أن
أطلق عليها نتائج ومن ثم فقط

1984
01:31:23,030 --> 01:31:24,590
أقول النتائج تساوي النتائج.

1985
01:31:24,590 --> 01:31:28,370
هذه هي المجموعة الفرعية
من الكلمات التي تبدأ بالحرف a أو b،

1986
01:31:28,370 --> 01:31:30,780
أو أيًا كان ما يكتبه الشخص.

1987
01:31:30,780 --> 01:31:31,870
هذا كل شيء.

1988
01:31:31,870 --> 01:31:32,480
سؤال جيد.

1989
01:31:32,480 --> 01:31:32,690
أجل؟

1990
01:31:32,690 --> 01:31:34,640
الجمهور: لماذا نغير
آخر مرة-- لمَ

1991
01:31:34,640 --> 01:31:37,467
يجب أن تغيّر args إلى شكل؟

1992
01:31:37,467 --> 01:31:39,550
ديفيد مالان: لماذا قمتُ
بتغيير args الخاصة بي إلى--

1993
01:31:39,550 --> 01:31:41,590
الجمهور: أشكال؟

1994
01:31:41,590 --> 01:31:45,940
ديفيد مالان: في وقت سابق اليوم
عندما لم أكن أفهم ما يجري،

1995
01:31:45,940 --> 01:31:49,090
يجب أن تستخدام request.args
للحصول على طلبات.

1996
01:31:49,090 --> 01:31:52,445
يجب أن تستخدام request.form
لنشر طلبات.

1997
01:31:52,445 --> 01:31:55,060
الجمهور: لكنه ما يزال .get after؟

1998
01:31:55,060 --> 01:31:57,040
ديفيد مالان: إنه دائمًا .get، نعم.

1999
01:31:57,040 --> 01:31:59,260
لكنك تغير ما تحصل
عليه من أشياء.

2000
01:31:59,260 --> 01:32:03,730
في عالم مثالي، كان يمكن أن
يكون شيئًا-- أوه، أرى ما تقصده.

2001
01:32:03,730 --> 01:32:05,950
الحصول على هذا المعنى هو الفعل.

2002
01:32:05,950 --> 01:32:08,960
نحن كبشر نعني الحصول على شيء ما.

2003
01:32:08,960 --> 01:32:11,910
Args بهذا المعنى،
إذا استخدمت get--

2004
01:32:11,910 --> 01:32:14,410
أنا أقوم بهذا، لكن ربما
هذا هو سبب قيامها بذلك.

2005
01:32:14,410 --> 01:32:18,460
لأن get من get يبدو الأمر غريبًا،
في حين أن get من منشور أقل غرابة.

2006
01:32:18,460 --> 01:32:21,840
لكنهم فقط يطلقون عليها
args وشكل بدلاً من ذلك.

2007
01:32:21,840 --> 01:32:24,714
حسنًا، دعونا نعمل على
تحسين ذلك، لكن كيف؟

2008
01:32:24,714 --> 01:32:26,130
ما الذي يمكن أن يكون أفضل للمستخدم؟

2009
01:32:26,130 --> 01:32:26,600
أجل؟

2010
01:32:26,600 --> 01:32:28,390
الجمهور: يمكنه البحث عن
كلمة، وليس عن الحرف الأول فقط.

2011
01:32:28,390 --> 01:32:29,980
ديفيد مالان: حسنًا، ربما
سيكون البحث عن كلمة كاملة

2012
01:32:29,980 --> 01:32:31,688
أمرًا جيدًا، وليس فقط
الحرف الأول.

2013
01:32:31,688 --> 01:32:33,264
ما الذي يمكن أن نفعله أيضًا؟

2014
01:32:33,264 --> 01:32:38,882
الجمهور: يمكننا إنشاء قائمة
فهرس من الأحرف والكلمات؟

2015
01:32:38,882 --> 01:32:40,840
ديفيد مالان: حسنًا، يمكننا
إنشاء قائمة فهرس.

2016
01:32:40,840 --> 01:32:45,016
لذا ربما نستخدم علامة تجزئة أو
شكلًا من الإلهام من مجموعة مشاكلنا

2017
01:32:45,016 --> 01:32:47,890
باستخدام المدقق الإملائي ونستخدم
بالفعل بنية بيانات متطورة أكثر

2018
01:32:47,890 --> 01:32:49,872
للحصول على هذه الإجابات بسرعة أكبر.

2019
01:32:49,872 --> 01:32:53,080
ودعوني أقترح، أيضًا، الهدف
هنا هو تنفيذ الإكمال التلقائي في الواقع،

2020
01:32:53,080 --> 01:32:54,380
ولم يكن هذا إكمال تلقائي.

2021
01:32:54,380 --> 01:32:56,020
كان هذا مثل بحث المدرسة القديمة.

2022
01:32:56,020 --> 01:32:58,720
اكتب استعلامًا، واضغط على Enter،
واحصل على صفحة النتائج.

2023
01:32:58,720 --> 01:33:00,760
ماذا لو أردنا القيام
بشيء فوري أكثر؟

2024
01:33:00,760 --> 01:33:02,350
إذن دعوني أقترح ذلك في الواقع.

2025
01:33:02,350 --> 01:33:05,140
قبل النظر في التعليمة البرمجية،
دعوني أنتقل إلى words1.

2026
01:33:05,140 --> 01:33:07,662
دعوني أمضي قدمًا
وأقوم بتشغيل Flask في هذا الدليل.

2027
01:33:07,662 --> 01:33:09,370
دعوني أمضي قدمًا
وأعيد تحميل الشكل هنا،

2028
01:33:09,370 --> 01:33:12,040
ولاحظوا الآن لا يوجد زر Submit
لأنه لن تكون هناك أي

2029
01:33:12,040 --> 01:33:13,960
عمليات تقديم فعلية هنا.

2030
01:33:13,960 --> 01:33:18,220
لكنني سأمضي قدمًا وأدخل
الحرف A، وأوه، هذا رائع.

2031
01:33:18,220 --> 01:33:20,140
دعوني أحذف ذلك، إنه يختفى.

2032
01:33:20,140 --> 01:33:22,120
B، ها هي كل الكلمات التي تبدأ بالحرف B.

2033
01:33:22,120 --> 01:33:28,420
دعوني أكتب كلمات تبدأ بالحرفين B-A،
كلمات تبدأ بالأحرف B-A-B، كلمات تبدأ بالأحرف B-A-B-A.

2034
01:33:28,420 --> 01:33:31,450
هذه هي الطريقة التي يعمل بها الإكمال التلقائي.

2035
01:33:31,450 --> 01:33:35,800
لذا يبدو أنه يستجيب بشكل فوري
لمدخلي، لذا يحدث شيء.

2036
01:33:35,800 --> 01:33:37,630
لكنني لا أقوم في الواقع
بتقديم الشكل.

2037
01:33:37,630 --> 01:33:40,900
لذا أنا استخدمه الآن،
يبدو أن JavaScript من جانب العميل

2038
01:33:40,900 --> 01:33:42,340
ربما تتحدث إلى الخادم؟

2039
01:33:42,340 --> 01:33:42,919
دعونا نستنتج.

2040
01:33:42,919 --> 01:33:44,710
لذا هنا، أيضًا، يجب أن
يعتمد هذا على حدسك.

2041
01:33:44,710 --> 01:33:47,418
عندما تحاول فهم كيفية
عمل موقع شخص على الويب،

2042
01:33:47,418 --> 01:33:50,710
أو إذا كنتَ تريد أن تتعلم منه أو
تحاكي دالة أساسية معينة،

2043
01:33:50,710 --> 01:33:52,810
امضي قدمًا وافحص الصفحة.

2044
01:33:52,810 --> 01:33:55,690
ومن المحتمل أن لا تهتم كثيرًا
بشأن HTML حتى الآن.

2045
01:33:55,690 --> 01:33:57,130
من أين تأتي هذه البيانات؟

2046
01:33:57,130 --> 01:34:00,644
دعوني أضغط على علامة تبويب الشبكة،
التي ألقينا نظرة عليها منذ أسبوعين.

2047
01:34:00,644 --> 01:34:03,310
دعوني أمضي قدمًا وأعيد تشغيل
هذا ودعوني أوضح هذا وأبدأ

2048
01:34:03,310 --> 01:34:04,660
من بداية القصة.

2049
01:34:04,660 --> 01:34:08,590
لنرى ماذا يحدث عندما
أكتب الحرف A. مثير للإعجاب.

2050
01:34:08,590 --> 01:34:10,580
هناك طلب ويب.

2051
01:34:10,580 --> 01:34:14,830
لذا إذا قمتُ بالتكبير هنا، فلاحظوا
أن المتصفح بحث في الواقع

2052
01:34:14,830 --> 01:34:17,254
عن Q يساوي A، مدخل الشخص.

2053
01:34:17,254 --> 01:34:19,420
دعوني أمضي قدمًا و-- إنه
يستمر في البحث لأنني

2054
01:34:19,420 --> 01:34:20,670
أستخدم اختصارات لوحة المفاتيح هنا.

2055
01:34:20,670 --> 01:34:22,900
لكن دعوني أمضي قدمًا وأضغط على هذا الصف.

2056
01:34:22,900 --> 01:34:24,190
لاحظوا ماذا حدث.

2057
01:34:24,190 --> 01:34:29,980
لقد قمتُ بطلب إلى خط مائل search
علامة استفهام q يساوي عبر get.

2058
01:34:29,980 --> 01:34:31,600
لنرى ماذا كانت الاستجابة.

2059
01:34:31,600 --> 01:34:34,000
الرد هنا، إذا
عرضتُ المصدر-- أو بالأحرى،

2060
01:34:34,000 --> 01:34:37,360
إذا قرأتُ الاستجابة--

2061
01:34:37,360 --> 01:34:38,800
لاحظوا ما الذي تمت إعادته.

2062
01:34:38,800 --> 01:34:44,050
يبدو أن خادمي أعاد من أجلي
جزء من HTML يحتوي على المئات،

2063
01:34:44,050 --> 01:34:47,980
ربما الآلاف من الكلمات التي تبدأ بالحرف A.
لكن لاحظوا أنه لا توجد علامة UL،

2064
01:34:47,980 --> 01:34:51,430
لا توجد علامة رأس، لا يوجد عنوان، لا يوجد بنية،
إنه مجرد جزء HTML جزئي.

2065
01:34:51,430 --> 01:34:54,710
لكن هذا مثير للاهتمام، لأنني أعرف
باستخدام Python يمكنني القيام بذلك بالضبط.

2066
01:34:54,710 --> 01:34:57,430
يمكنني إنشاء أي شيء
أريده على الخادم،

2067
01:34:57,430 --> 01:35:01,400
ثم ربما يمكن أن يقوم المتصفح فقط
بتوصيل تلك التي غيرت النتائج.

2068
01:35:01,400 --> 01:35:03,710
لذا دعوني أمضي قدمًا وألقي نظرة
على تعليمة هذه الصفحة البرمجية.

2069
01:35:03,710 --> 01:35:08,290
إذا انتقلتُ الآن إلى تعليمة
مصدر برمجية خاصة بالمتصفح، مصدر صفحة العرض،

2070
01:35:08,290 --> 01:35:10,570
فسترون بعض السطور الجديدة.

2071
01:35:10,570 --> 01:35:14,420
لذا، للقيام بذلك بسهولة،
فأنا أستخدم بالفعل مكتبة أخرى.

2072
01:35:14,420 --> 01:35:15,970
هذه المكتبة تُسمى jQuery.

2073
01:35:15,970 --> 01:35:18,019
كانت هذت لسنوات عديدة،
مشهورة للغاية.

2074
01:35:18,019 --> 01:35:19,810
إنها نوع من البدء
في الخروج مما هو رائج،

2075
01:35:19,810 --> 01:35:21,970
لكنها ما تزال قوية
ومفيدة للغاية.

2076
01:35:21,970 --> 01:35:25,160
ويتم استخدامها من قِبل Bootstrap،
مكتبة CSS الأخرى التي تحدثنا عنها،

2077
01:35:25,160 --> 01:35:28,190
لذا من المنطقي
للغاية استخدامها هنا.

2078
01:35:28,190 --> 01:35:30,340
لاحظوا كيف أقوم بتضمينها
باستخدام علامة النص،

2079
01:35:30,340 --> 01:35:32,380
وتمت استضافتها على موقع
ويب تابع لجهة خارجية حتى

2080
01:35:32,380 --> 01:35:35,980
لا أضطر إلى حفظ نسخة منها
بنفسي على IDE الخاصة بي.

2081
01:35:35,980 --> 01:35:38,110
ثم دعونا ننظر في التعليمة
البرمجية التي كتبتُها بالفعل.

2082
01:35:38,110 --> 01:35:41,800
لذا لاحظوا أن الجزء العلوي من هذا الملف
لا يمثل شكلاً كاملاً،

2083
01:35:41,800 --> 01:35:43,305
إنه مدخل HTML فقط.

2084
01:35:43,305 --> 01:35:44,680
لأنني لا أحتاج إلى شكل كامل.

2085
01:35:44,680 --> 01:35:46,596
لا أحتاج إلى إجراء،
لا أحتاج إلى طريقة،

2086
01:35:46,596 --> 01:35:50,080
لأنني لا أقدمها في
أي مكان بالتعاون مع الأشخاص.

2087
01:35:50,080 --> 01:35:51,700
سأستخدم التعليمة البرمجية الخاصة بي.

2088
01:35:51,700 --> 01:35:55,870
لذا في علامة النص هنا، تعليمة JavaScript
البرمجية الخاصة بي، لاحظوا ما أقوم به.

2089
01:35:55,870 --> 01:35:57,880
هذه بعض التعليمة البرمجية
منذ أسبوعين تقريبًا.

2090
01:35:57,880 --> 01:36:01,060
سأقوم بالبحث في الشجرة
التي تمثل صفحة الويب هذه.

2091
01:36:01,060 --> 01:36:02,650
وبالفعل، من المفترض أن تكون شجرة.

2092
01:36:02,650 --> 01:36:05,890
تذكرون من ذلك الوقت عندما
نظرنا في صفحة HTML،

2093
01:36:05,890 --> 01:36:09,550
هناك في الذاكرة، وذلك بفضل
المتصفح، شيء يشبه الشجرة--

2094
01:36:09,550 --> 01:36:12,460
DOM، نموذج كائن المستند--
الذي يمثل صفحتك.

2095
01:36:12,460 --> 01:36:16,940
باستخدام JavaScript، هل يمكننا تغيير
هذه الصفحة بعد حدوثها؟

2096
01:36:16,940 --> 01:36:18,590
إذن ماذا سأفعل؟

2097
01:36:18,590 --> 01:36:23,620
سأقوم بإخبار المتصفح متى سمع
هذا المدخل حدثًا يستدعي مفتاحًا إلى الأعلى--

2098
01:36:23,620 --> 01:36:27,490
لذا كلما كان التركيز على الحقل--
إنه باللون الأزرق في نظام التشغيل Mac--

2099
01:36:27,490 --> 01:36:30,190
ويضغط الشخص على
المفتاح ومن ثم لننتقل،

2100
01:36:30,190 --> 01:36:34,550
وتنتقل الكلمة الرئيسية إلى الأعلى، امضي قدمًا
واطلب الدالة المجهولة التالية.

2101
01:36:34,550 --> 01:36:35,749
ما الذي تريد القيام به؟

2102
01:36:35,749 --> 01:36:37,540
الآن، هذه التعليمة البرمجية
مشفرة قليلاً، لكن دعوني

2103
01:36:37,540 --> 01:36:40,660
أنتقل خلالها لأنها
ثلاثة سطور فقط.

2104
01:36:40,660 --> 01:36:44,410
تستخدم هذه التعليمة البرمجية
هنا ميزة خاصة--

2105
01:36:44,410 --> 01:36:47,350
علامة الدولار-- والتي تأتي من
هذه المكتبة التي تُسمى jQuery.

2106
01:36:47,350 --> 01:36:48,670
المزيد حول ذلك في غضون لحظات.

2107
01:36:48,670 --> 01:36:54,520
تحتوي تلك المكتبة، واسمها مربك
إلى حد ما، على دالة تُسمى get،

2108
01:36:54,520 --> 01:36:57,530
والتي ليس لها علاقة مع Python
أو تلك التي تحدثنا عنها للتو.

2109
01:36:57,530 --> 01:36:59,980
ولكن يجب القيام بهذا باستخدام HTTP get.

2110
01:36:59,980 --> 01:37:02,200
باستخدام هذا السطر من التعليمة البرمجية،
يمكنك إخبار المتصفح،

2111
01:37:02,200 --> 01:37:06,940
حتى بعد تحميل صفحة ويب،
انتقل إلى عنوان URL هذا، من فضلك.

2112
01:37:06,940 --> 01:37:08,620
إذن ما هو عنوان URL الذي تريده؟

2113
01:37:08,620 --> 01:37:13,900
امضي قدمًا وأعطني من
الخادم نفسه خط مائل search q يساوي،

2114
01:37:13,900 --> 01:37:17,400
ومن ثم ما الذي يعنيه زائد في
JavaScript إذا كنتم تتذكرون؟

2115
01:37:17,400 --> 01:37:18,260
تسلسل.

2116
01:37:18,260 --> 01:37:20,629
لذا هذا يعني فقط
إلحاق سلسلة واحدة إلى السلسلة الأخرى.

2117
01:37:20,629 --> 01:37:22,420
لذا هذا مثل قول،
امضي قدمًا وأعطني

2118
01:37:22,420 --> 01:37:27,870
عنوان URL الذي ينتهي بخط مائل search،
علامة استفهام، Q يساوي A، أو Q يساوي B،

2119
01:37:27,870 --> 01:37:31,140
أو Q يساوي Z. أيًا
كان ما يكتبه الشخص

2120
01:37:31,140 --> 01:37:32,607
ويتلقى صفعة في النهاية.

2121
01:37:32,607 --> 01:37:34,440
ومن ثم هنا نحصل
عليها.

2122
01:37:34,440 --> 01:37:37,770
Input.value هو مدخل
المستخدم، القيمة نفسها.

2123
01:37:37,770 --> 01:37:40,790
ثم السطر الأخير-- وربما
هذا هو الأكثر روعة--

2124
01:37:40,790 --> 01:37:43,680
لاحظوا أن لدي
دالة مجهولة.

2125
01:37:43,680 --> 01:37:47,010
في هذه المكتبة التي
تُسمى jQuery، هناك هذه

2126
01:37:47,010 --> 01:37:49,590
الدالة التي تُسمى get التي تحصل على عنوان URL.

2127
01:37:49,590 --> 01:37:54,570
عندما يستجيب الخادم لطلبك
باستخدام ظرف افتراضي خاص به،

2128
01:37:54,570 --> 01:37:57,420
يتم استدعاء هذه الدالة المجهولة
ويتم تسليم ظرف الاستجابة

2129
01:37:57,420 --> 01:38:03,480
إليك، إذا جاز التعبير،
كوسيطة بيانات، كمتغير بيانات.

2130
01:38:03,480 --> 01:38:05,070
ثم ما الذي يمكنكم فعله؟

2131
01:38:05,070 --> 01:38:07,530
Document.queryselector UL.

2132
01:38:07,530 --> 01:38:08,220
ما هو UL؟

2133
01:38:08,220 --> 01:38:11,790
إنها قائمة غير مرتبة بشكل افتراضي
في هذه الصفحة لا يوجد بها أي شيء.

2134
01:38:11,790 --> 01:38:15,150
ولكن تذكرون أن ما يرسله الخادم
هو مجموعة من علامات LI.

2135
01:38:15,150 --> 01:38:18,160
هذا رائع، لأنني أريد وضع
علامات LI هذه بين هنا.

2136
01:38:18,160 --> 01:38:19,300
إذن كيف أفعل ذلك؟

2137
01:38:19,300 --> 01:38:21,614
أنتقل إلى ما تُسمى
HTML الداخلية من علامة UL،

2138
01:38:21,614 --> 01:38:23,280
وربما لم تشاهدوا هذا من قبل.

2139
01:38:23,280 --> 01:38:28,110
لكن يمكنك تغيير محتويات
العلامة الموجودة بداخلها

2140
01:38:28,110 --> 01:38:31,980
باستخدام HTML الداخلية
وفقط إسقاط البيانات هناك.

2141
01:38:31,980 --> 01:38:34,090
ولذا هذا هو ما يحدث.

2142
01:38:34,090 --> 01:38:36,360
دعوني أمضي قدمًا
وأفتح مركز تحكم Chrome.

2143
01:38:36,360 --> 01:38:37,920
أعد تحميل الصفحة
بحيث تكون فارغة.

2144
01:38:37,920 --> 01:38:40,080
دعوني أفتح مركز تحكم Chrome.

2145
01:38:40,080 --> 01:38:43,980
انتقل إلى العناصر، كما هو
الافتراضي. ولاحظوا في هذه الصفحة،

2146
01:38:43,980 --> 01:38:48,300
لاحظوا أن علامة UL مفتوحة
ومغلقة ولا يوجد بداخلها شيء.

2147
01:38:48,300 --> 01:38:51,660
لكن في اللحظة التي أبحث فيها
عن شيء ما، شاهدوا ماذا يحدث.

2148
01:38:51,660 --> 01:38:54,420
إذا قمتُ بالبحث عن، فجأة-- أوه،

2149
01:38:54,420 --> 01:38:56,550
إنه يومض، إنه صغير بعض الشيء.

2150
01:38:56,550 --> 01:38:58,050
الآن هناك مثلث صغير هناك.

2151
01:38:58,050 --> 01:38:59,550
ما الذي يوجد بداخله؟

2152
01:38:59,550 --> 01:39:03,130
كل علامات LI تلك
التي جاءت من الخادم.

2153
01:39:03,130 --> 01:39:05,940
لذا باستخدام JavaScript،
لدينا هذه القوة المدهشة الآن

2154
01:39:05,940 --> 01:39:10,101
لتغيير ما هو موجود داخل صفحة الويب
فقط من خلال طلب المزيد من البيانات من الخادم.

2155
01:39:10,101 --> 01:39:11,850
لذا إذا استخدمتم Facebook،
أو استخدمتم

2156
01:39:11,850 --> 01:39:15,154
Google Chat، أو أي مواقع ويب
تتغير بشكل ديناميكي كل ثانية، وكل دقيقة

2157
01:39:15,154 --> 01:39:17,820
وفي كل مرة تتلقون فيها
رسالة، يمكنكم حرفيًا،

2158
01:39:17,820 --> 01:39:21,435
إذا أصبحتم فضوليين قليلاً،
فتح مركز تحكم Chrome ومشاهدة DOM،

2159
01:39:21,435 --> 01:39:23,070
ومشاهدة علامة تبويب العناصر هذه.

2160
01:39:23,070 --> 01:39:25,440
وسترون أشياء جديدة
تنبثق كل مرة تتلقون

2161
01:39:25,440 --> 01:39:29,460
فيها رسالة، أو دردشة، أو أي
إشعار آخر على الشاشة.

2162
01:39:29,460 --> 01:39:32,884
الآن كملاحظة جانبية،
هذا أمر سيئ قليلاً لإرجاع HTML،

2163
01:39:32,884 --> 01:39:34,050
ولكن دعونا نرى كيف يتم ذلك.

2164
01:39:34,050 --> 01:39:39,450
دعوني أنتقل إلى application.py للكلمات
الأولى، وهي هذا المثال هنا.

2165
01:39:39,450 --> 01:39:43,110
وفي application.py،
لاحظوا ما أقوم به هو هذا.

2166
01:39:43,110 --> 01:39:46,800
بدلاً من إرجاع
صفحة كاملة من النتائج،

2167
01:39:46,800 --> 01:39:49,590
سأقوم بإرجاع قالب
يُسمى search.html.

2168
01:39:49,590 --> 01:39:52,600
جميع ما تبقى من هذه التعليمة
البرمجية متطابق مع ما سبق.

2169
01:39:52,600 --> 01:39:57,600
إذا انتقلتُ إلى القوالب الخاصة بي
وانتقلتُ إلى search.html، وتعرّفتُ على كيفية

2170
01:39:57,600 --> 01:39:59,040
وجود التعليمة البرمجية على الخادم بشكل بسيط للغاية.

2171
01:39:59,040 --> 01:40:02,010
إذا كان كل ما تريد القيام به هو
إظهار مجموعة من عناصر القائمة،

2172
01:40:02,010 --> 01:40:02,890
فهذا كل ما تحتاج إليه.

2173
01:40:02,890 --> 01:40:03,570
لا يوجد قالب.

2174
01:40:03,570 --> 01:40:06,778
على سبيل المثال لا توجد عمليات توسيع للتخطيط
لأنك لا تقوم بإرجاع صفحة ويب كاملة،

2175
01:40:06,778 --> 01:40:11,430
أنت تعيد جزءًا صغيرًا
جدًا من HTML.

2176
01:40:11,430 --> 01:40:14,490
ولكن يمكن القول أن هذا الأمر
سيء قليلاً، لأن هناك الكثير

2177
01:40:14,490 --> 01:40:16,530
من التكرار في
الشيء الذي يرجع.

2178
01:40:16,530 --> 01:40:19,202
إذا نظرتُ في هذه العلامة
التي تعود من الخادم،

2179
01:40:19,202 --> 01:40:22,410
فما هو الشيء المُكرّر بشكل واضح
بشأن جميع هذه المعلومات التي ترجع؟

2180
01:40:22,410 --> 01:40:25,540
وإذا نظرتم في علامة تبويب الشبكة،
سترون ذلك بالفعل أسفل الاستجابة.

2181
01:40:25,540 --> 01:40:26,573
ما هو التكرار؟

2182
01:40:26,573 --> 01:40:29,807
الجمهور: كنت تقوم بمجموعة من عمليات الاستدعاء
لنفس العنوان و--

2183
01:40:29,807 --> 01:40:32,890
ديفيد مالان: لقد كان هذا فقط لأنني
ضغطتُ على بعض، على سبيل المثال، التكبير والتصغير،

2184
01:40:32,890 --> 01:40:34,640
لذلك تظاهر بتقديم
طلبات متعددة.

2185
01:40:34,640 --> 01:40:35,830
لذا التظليل باللون الأحمر هنا.

2186
01:40:35,830 --> 01:40:37,720
ركزوا فقط على هذا الجزء هنا.

2187
01:40:37,720 --> 01:40:41,240
ما هو الشيء المُكرّر بشأن جميع
البيانات التي يتم إرجاعها؟

2188
01:40:41,240 --> 01:40:43,840
إنه فقط يقول عنصر القائمة،
كلمة، إغلاق عنصر القائمة.

2189
01:40:43,840 --> 01:40:45,640
عنصر القائمة، كلمة، إغلاق عنصر قائمة.

2190
01:40:45,640 --> 01:40:48,400
أعني هيا، فقط
استخدم صيغة فعّالة أكثر.

2191
01:40:48,400 --> 01:40:51,620
فقط افصل الأشياء بفواصل
أو شيء أخف وزنًا.

2192
01:40:51,620 --> 01:40:53,140
يقوم هذا بإرسال العديد من وحدات البايت.

2193
01:40:53,140 --> 01:40:53,740
أعني، انظروا.

2194
01:40:53,740 --> 01:40:55,480
توجد الآلاف من وحدات البايت.

2195
01:40:55,480 --> 01:40:58,630
هذه هي وحدات الكيلوبايت حسب
التعريف من المعلومات

2196
01:40:58,630 --> 01:41:00,630
التي نرسلها فقط
لإرسال قوس مفتوح،

2197
01:41:00,630 --> 01:41:02,200
LI قوس مغلق مرارًا وتكرارًا.

2198
01:41:02,200 --> 01:41:03,410
هذا ليس فعّال جدًا.

2199
01:41:03,410 --> 01:41:06,430
وهكذا تبنّى العالم
بالفعل نهجًا مختلفًا،

2200
01:41:06,430 --> 01:41:10,600
وسأشرح ذلك في words2
الذي يعيد بالفعل شيئًا يُسمى

2201
01:41:10,600 --> 01:41:15,040
تدوين كائن JavaScript،
وهو تمثيل موجز أكثر من هذا

2202
01:41:15,040 --> 01:41:15,710
على النحو التالي.

2203
01:41:15,710 --> 01:41:20,470
دعوني أنتقل إلى words2،
وأقوم بتشغيل Flask هناك.

2204
01:41:20,470 --> 01:41:22,754
ابحث عن نفس النوع
من الأشياء ومن ثم شاهدوا ما

2205
01:41:22,754 --> 01:41:24,670
يحدث على لوحة
الشبكة هذه المرة.

2206
01:41:24,670 --> 01:41:28,520
عندما أبحث عن A، استرجع
النتيجة المرئية نفسها على الفور.

2207
01:41:28,520 --> 01:41:31,780
ولكن إذا نظرتُ في استعلام
البحث هذا، فابحث الآن عما يعود.

2208
01:41:31,780 --> 01:41:35,247
أنا أزعم أن هذا هو تمثيل
محكم أكثر بكثير من المعلومات نفسها.

2209
01:41:35,247 --> 01:41:37,330
من المزعج بعض الشيء
أنه توجد علامتي اقتباس،

2210
01:41:37,330 --> 01:41:38,410
لأن هذا الشيء مكرر قليلاً.

2211
01:41:38,410 --> 01:41:40,534
ولكن علامتي الاقتباس
على الأقل فعّالتان أكثر بكثير

2212
01:41:40,534 --> 01:41:43,670
من قوس مفتوح، LI، قوس مغلق،
ومن ثم المقابل في النهاية.

2213
01:41:43,670 --> 01:41:46,300
لذا هذا ما يُسمى
بتدوين كائن JavaScript.

2214
01:41:46,300 --> 01:41:49,420
وبينما هذا القوس
المربع هنا وآلاف

2215
01:41:49,420 --> 01:41:52,420
الكلمات في وقت لاحق
يشير القوس المربع في النهاية إلى،

2216
01:41:52,420 --> 01:41:57,110
هذه هي مصفوفة JavaScript
التي يتم إرسالها من الخادم.

2217
01:41:57,110 --> 01:41:59,720
لذا فإن الشيء الوحيد الذي
تغير هنا هو كما يلي.

2218
01:41:59,720 --> 01:42:04,150
في words2، هذا المثال،
لاحظوا أنني لا

2219
01:42:04,150 --> 01:42:06,610
أحتاج إلى إرجاع قالب بعد الآن.

2220
01:42:06,610 --> 01:42:08,570
هذه التعليمة البرمجية هي
نفسها كما وردت في المثالين السابقين.

2221
01:42:08,570 --> 01:42:11,410
هذه هي الطريقة التي أبحث
بها عن 140000 كلمة بسرعة.

2222
01:42:11,410 --> 01:42:16,590
ولكن إذا قمتُ الآن بتضمين دالة رائعة
من Flask تُسمى jsonify--

2223
01:42:16,590 --> 01:42:17,920
وهي ليست كلمة بالفعل.

2224
01:42:17,920 --> 01:42:20,920
لكن jsonify، التي
تأخذ أي بنية بيانات

2225
01:42:20,920 --> 01:42:24,520
لديكم بيانات في على سبيل المثال هذه
القائمة من الكلمات، التطابقات،

2226
01:42:24,520 --> 01:42:28,162
ويتضح أن هذا النص الذي يعتمد على
التمثيل باستخدام علامات اقتباس وفواصل.

2227
01:42:28,162 --> 01:42:30,370
ولا يجب أن
تكتب قالبًا بنفسك.

2228
01:42:30,370 --> 01:42:33,070
وبالفعل، لقد تخلصتُ من search.html.

2229
01:42:33,070 --> 01:42:35,950
الشيء الوحيد الذي يجب أن تفعله
لتمنح نفسك حق الوصول إلى هذه الميزة

2230
01:42:35,950 --> 01:42:39,430
هو استيراد ليس فقط
تقديم قالب، وطلب،

2231
01:42:39,430 --> 01:42:44,790
وFlask، ولكن jsonify أيضًا،
من مكتبة Flask.

2232
01:42:44,790 --> 01:42:47,400
وهي مجرد ميزة واحدة أخرى.

2233
01:42:47,400 --> 01:42:53,030
أي أسئلة حول ذلك قبل
أن نجمعها معًا في مثال واحد أخير؟

2234
01:42:53,030 --> 01:42:53,683
أجل؟

2235
01:42:53,683 --> 01:42:57,140
الجمهور: هل يمكن أن تقسّم علامتي الاقتباس
ذلك إلى [INAUDIBLE]؟؟

2236
01:42:57,140 --> 01:42:59,330
ديفيد مالان: هل يمكن أن تقسّم علامتي الاقتباس
ذلك؟

2237
01:42:59,330 --> 01:43:00,980
سؤال جيد، بديهيات رائعة.

2238
01:43:00,980 --> 01:43:04,700
لا لأن مؤلف jsonify
كان ذكيًا بشأن هذا.

2239
01:43:04,700 --> 01:43:09,710
وإذا لاحظ المؤلف علامة اقتباس
مثل الفاصلة، أو مثل شيء

2240
01:43:09,710 --> 01:43:14,270
في اسمك يحتوي على علامة اقتباس،
فسيطلقه بطريقة ما،

2241
01:43:14,270 --> 01:43:15,500
عادة باستخدام خط مائل عكسي.

2242
01:43:15,500 --> 01:43:16,280
بديهيات جيدة.

2243
01:43:16,280 --> 01:43:19,160
ولكن هذا هو السبب في أنك على الأرجح
لا ترغب في كتابة هذه التعليمة البرمجية بنفسك

2244
01:43:19,160 --> 01:43:22,076
لأنه يجب أن تفكّر في
كل هذه الحالات الحرجة بدلاً من

2245
01:43:22,076 --> 01:43:25,040
التركيز على الأجزاء التي تهتم بها.

2246
01:43:25,040 --> 01:43:27,270
حسنًا، لذا يوجد مثال واحد أخير.

2247
01:43:27,270 --> 01:43:32,700
ومن المحتمل أنه سيكون دائرة كاملة
هنا، هل نحتاج إلى الخادم؟

2248
01:43:32,700 --> 01:43:36,420
هذه 140000 كلمة الآن
في ملف يُسمى كبير.

2249
01:43:36,420 --> 01:43:39,720
يحمّل تطبيق الويب الخاص بي هذا
الملف في الذاكرة ثم يبحث عنه.

2250
01:43:39,720 --> 01:43:42,840
ولكن مَن يمكنه أيضًا البحث
في قائمة كبيرة من الملفات؟

2251
01:43:42,840 --> 01:43:45,690


2252
01:43:45,690 --> 01:43:48,670
أين يمكننا أن نضع هذا المنطق؟

2253
01:43:48,670 --> 01:43:49,630
المتصفح، أليس كذلك؟

2254
01:43:49,630 --> 01:43:52,150
يمنحكم المتصفح JavaScript، 
JavaScript لغة،

2255
01:43:52,150 --> 01:43:54,070
واللغات يمكنها البحث عن أشياء.

2256
01:43:54,070 --> 01:43:55,960
إذن دعوني أقوم بهذا بدلاً من ذلك.

2257
01:43:55,960 --> 01:44:00,670
في مثال words3 لدينا هنا،
لاحظوا أن لديّ ملف واحد جديد.

2258
01:44:00,670 --> 01:44:04,450
مُقدمًا، كما تعلمون، أخذتُ ملف النص الكبير الخاص بي
الذي كان يحتوي على كلمة واحدة فقط لكل سطر

2259
01:44:04,450 --> 01:44:06,670
ووضعته في تنسيق
قياسي فقط لأنه

2260
01:44:06,670 --> 01:44:08,350
يجعل حياتي أسهل قليلاً.

2261
01:44:08,350 --> 01:44:10,450
وأطلقتُ عليه اسم large.json.

2262
01:44:10,450 --> 01:44:16,180
وهناك، في الواقع، حيث إذا قمتُ بفتح
هذا المجلد، سترون large.js،

2263
01:44:16,180 --> 01:44:20,080
وهو ملف ثاني،
هذه المرة ملف JavaScript،

2264
01:44:20,080 --> 01:44:26,080
حيث أعلنتُ فقط عن
مصفوفة JavaScript من جميع 140000 كلمة

2265
01:44:26,080 --> 01:44:27,170
للأفضل أو للأسوأ.

2266
01:44:27,170 --> 01:44:29,170
لقد وضعتُها فقط في
تنسيق مختلف قليلاً

2267
01:44:29,170 --> 01:44:31,390
بفواصل، وعلامات اقتباس
وأقواس مربعة،

2268
01:44:31,390 --> 01:44:35,630
وأعطيتُ هذا الشيء بأكمله اسم
متغير في أعلى الملف.

2269
01:44:35,630 --> 01:44:36,830
الآن، لماذا هذا مفيد؟

2270
01:44:36,830 --> 01:44:39,670
حسنًا، إذا انتقلتُ إلى
index.html، لاحظوا أنه

2271
01:44:39,670 --> 01:44:43,240
لم يعد هناك application.py أو
قوالب لهذا المثال على الإطلاق.

2272
01:44:43,240 --> 01:44:45,460
لقد تخلصنا من
Python تمامًا، لا

2273
01:44:45,460 --> 01:44:48,130
أعرف إذا كان ذلك للأفضل
أو للأسوأ، لكننا سنرى الآن.

2274
01:44:48,130 --> 01:44:51,940
إذن في هذا الملف، لاحظوا أن
لدينا علامة مدخل كما سبق،

2275
01:44:51,940 --> 01:44:55,540
عنصر نائب لجميع 
واجهات المستخدم، لكننا أيضًا

2276
01:44:55,540 --> 01:44:57,910
نقوم الآن بتضمين ملف large.js هذا.

2277
01:44:57,910 --> 01:45:02,290
وبالتالي نقول للمتصفح
من فضلك قم بتنزيل جميع 140000 كلمة

2278
01:45:02,290 --> 01:45:04,540
ومن ثم ابحث عنها محليًا.

2279
01:45:04,540 --> 01:45:06,190
كيف سأبحث عنها محليًا؟

2280
01:45:06,190 --> 01:45:09,130
لقد قمتُ بشكل أساسي بتحويل اللغة
التي كتبتُها في Python منذ

2281
01:45:09,130 --> 01:45:11,990
قليل إلى JavaScript على النحو التالي.

2282
01:45:11,990 --> 01:45:16,630
هنا يقول المتصفح احصل على
المدخل الذي يمكن أن يكتبه المستخدم.

2283
01:45:16,630 --> 01:45:19,300
هذا يخبر المتصفح، امضي
قدمًا واستمع إلى الكلمة الرئيسية بالأعلى.

2284
01:45:19,300 --> 01:45:21,301
متى يحدث ذلك،
من فضلك استدعي هذه الدالة

2285
01:45:21,301 --> 01:45:24,049
التي ليس لها اسم، لأنني أريدك
 فقط أن تستدعيها على الفور،

2286
01:45:24,049 --> 01:45:25,240
لا أحتاج إلى اسمها.

2287
01:45:25,240 --> 01:45:27,860
يتم تعريف هذه الدالة
عبر هذه السطور المتعددة.

2288
01:45:27,860 --> 01:45:30,370
يجب أن تقوم هذه السطور المتعددة 
بعمل أكثر قليلاً من ذي قبل.

2289
01:45:30,370 --> 01:45:32,590
لأنه قبل أن يقوم الخادم
بكل العمل الجاد

2290
01:45:32,590 --> 01:45:36,410
لإرسال جميع البيانات،
وقمنا فقط بتكديسها في صفحة الويب.

2291
01:45:36,410 --> 01:45:40,420
ولكن هنا سأقوم بإنشاء 
قائمة بشكل يدوي أكثر قليلاً.

2292
01:45:40,420 --> 01:45:42,310
إذن سأكتب
متغير يُسمى html

2293
01:45:42,310 --> 01:45:46,000
يساوي علامة اقتباس وعلامة إنهاء الاقتباس، لأنني أريد
إنشاء القائمة غير المرتبة بنفسي.

2294
01:45:46,000 --> 01:45:48,010
ثم إذا قام الشخص، في الواقع،
بكتابة شيء--

2295
01:45:48,010 --> 01:45:52,000
حتى إذا كان مدخله غير فارغ، إذن
إذا قام بكتابة حرف واحد على الأقل،

2296
01:45:52,000 --> 01:45:53,172
قُم بما يلي.

2297
01:45:53,172 --> 01:45:54,880
هذا غريب في
JavaScript، ولكن عندما تقومون

2298
01:45:54,880 --> 01:45:59,440
بتكرار مصفوفة في JavaScript،
تستخدمون حرف الجر of وليس in.

2299
01:45:59,440 --> 01:46:03,610
إذن for word من words، امضي
قدمًا وقُم بما يلي.

2300
01:46:03,610 --> 01:46:07,690
إذا بدأت الكلمة الحالية بـ--
لاحظوا حرف W كبير-- أيضًا

2301
01:46:07,690 --> 01:46:10,600
مختلف عن Python، لكن الفكرة 
نفسها، فقط تهجئة مختلفة--

2302
01:46:10,600 --> 01:46:14,620
إذا كانت الكلمة التي أقوم بتكرارها تبدأ
بأي مما أدخله الشخص،

2303
01:46:14,620 --> 01:46:15,910
وجدنا تطابُق.

2304
01:46:15,910 --> 01:46:18,760
امضي قدمًا وقم بإلحاق
متغير HTML هذا،

2305
01:46:18,760 --> 01:46:22,270
قوس مفتوح LI قوس مغلق،
ادمج الكلمة فيه،

2306
01:46:22,270 --> 01:46:25,060
ومن ثم قوس مُغلق، أيضًا.

2307
01:46:25,060 --> 01:46:28,450
إذن سأقوم بإنشاء متغير
في ذاكرة المتصفح

2308
01:46:28,450 --> 01:46:32,360
تحتوي على HTML التي أريد
تكديسها في DOM في نهاية المطاف.

2309
01:46:32,360 --> 01:46:33,260
كيف يمكنني فعل ذلك.

2310
01:46:33,260 --> 01:46:37,240
حسنًا، في السطر الأخير أنا أقول
للمستند، حدّد علامة UL،

2311
01:46:37,240 --> 01:46:39,900
انتقل داخل HTML الخاص به،
وقم بتغيير أي شيء

2312
01:46:39,900 --> 01:46:46,070
يوجد في هذه السلسلة من HTML،
والتي من المفترض أنها صفر أو علامات LI أكثر

2313
01:46:46,070 --> 01:46:47,960
الآن تعتمد على نتائج البحث تلك.

2314
01:46:47,960 --> 01:46:50,851
إذن الآن دعوني أعود إلى words1--

2315
01:46:50,851 --> 01:46:53,510
بدلاً من ذلك، دعوني أعود
إلى هذا المثال هنا.

2316
01:46:53,510 --> 01:46:55,110
دعوني أمضي قدمًا وأُقدم هذا.

2317
01:46:55,110 --> 01:46:58,550
لم يعد Flask بعد الآن، إذن يجب أن أستخدم
الخادم الخاص بنا منذ أسبوعين،

2318
01:46:58,550 --> 01:47:01,210
خادم HTTP، لتقديم HTML.

2319
01:47:01,210 --> 01:47:06,130
دعوني أمضي قدمًا وأُعيد تحميل الشاشة
هنا، وأفتح index.html، والآن

2320
01:47:06,130 --> 01:47:08,569
لاحظوا أننا مستعدون.

2321
01:47:08,569 --> 01:47:09,860
ما الذي تريدون البحث عنه؟

2322
01:47:09,860 --> 01:47:15,730
A، وB، وC. ثم دعونا نفتح
علامة تبويب الشبكة.

2323
01:47:15,730 --> 01:47:17,369
فحص، الشبكة.

2324
01:47:17,369 --> 01:47:19,160
دعونا نرى ما يحدث
في كل مرة أبحث فيها.

2325
01:47:19,160 --> 01:47:26,922
Z، وY، وQ، وA. لماذا لا يوجد
نقل بيانات الشبكة الآن؟

2326
01:47:26,922 --> 01:47:28,610
الجمهور: لا يوجد نقل بيانات الشبكة.

2327
01:47:28,610 --> 01:47:30,276
ديفيد مالان: حسنًا، لكن هذا ما قلتُه.

2328
01:47:30,276 --> 01:47:32,620
لكن لماذا لا يوجد نقل بيانات الشبكة؟

2329
01:47:32,620 --> 01:47:35,530
إنها لا تُرسل أي طرق، إنها لا 
تتحدّث إلى خادم طرف خلفي.

2330
01:47:35,530 --> 01:47:36,030
لماذا؟

2331
01:47:36,030 --> 01:47:38,980
لأن جميع البيانات التي قد 
أحتاج إليها محلية بالفعل.

2332
01:47:38,980 --> 01:47:41,170
إذن رسائل مختلطة هنا، أيضًا.

2333
01:47:41,170 --> 01:47:42,887
أيهما أفضل، أيهما صحيح؟

2334
01:47:42,887 --> 01:47:43,720
ما هو الفارق؟

2335
01:47:43,720 --> 01:47:44,770
كيف تفكرون في هذا؟

2336
01:47:44,770 --> 01:47:47,410
لأنه الآن، حيث كانت الكثير من برامجنا
في وقت سابق من الفصل الدراسي

2337
01:47:47,410 --> 01:47:50,410
صغيرة بشكل نسبي على الرغم من
أنها لم تبدو هكذا في ذلك الوقت،

2338
01:47:50,410 --> 01:47:52,930
الآن لدينا المزيد 
من احتمالات التصميم.

2339
01:47:52,930 --> 01:47:55,060
والإجابات
غير واضحة بشكل متزايد،

2340
01:47:55,060 --> 01:47:57,010
وهذا هو السبب في أنكم 
كمبرمجين فقط

2341
01:47:57,010 --> 01:47:59,232
ستعتادون أكثر على
التقاليد، ربما

2342
01:47:59,232 --> 01:48:00,940
ستمارسون ما 
علمتكم إياه أولاً،

2343
01:48:00,940 --> 01:48:02,890
عندها ستقررون 
وقد تقولون بالفعل،

2344
01:48:02,890 --> 01:48:05,181
أنا لا أرغب في ذلك، سأقوم
بهذا بطريقة أخرى.

2345
01:48:05,181 --> 01:48:08,530
إذن كيف تفكّرون بشأن أي من أمثلة الكلمات
المتعددة هذه هو الأفضل؟

2346
01:48:08,530 --> 01:48:11,080
أتاح الإصدار 0 للخادم
القيام بالعمل كله

2347
01:48:11,080 --> 01:48:15,250
وإرسال صفحة جديدة كاملة
من النتائج فقط كما فعل Google في عام 1999.

2348
01:48:15,250 --> 01:48:18,310
ثم الإصدار 1، قمنا بإضافة
القليل من JavaScript

2349
01:48:18,310 --> 01:48:21,880
التي استخدمت مكتبة jQuery 
للتحدّث إلى الخادم باستخدام

2350
01:48:21,880 --> 01:48:23,170
تقنية تُسمى Ajax--

2351
01:48:23,170 --> 01:48:24,640
XML وJavaScript غير متزامنة--

2352
01:48:24,640 --> 01:48:28,090
ولكن هذا فقط يعني أعطني المزيد من
البيانات ولكننا قمنا بإرجاع عناصر LI.

2353
01:48:28,090 --> 01:48:29,980
ثم قررنا أن هذا
سيئ قليلاً، لا

2354
01:48:29,980 --> 01:48:31,930
يبدو أن إرسال جميع
هذه العلامات غير المفيدة إلي، فقط

2355
01:48:31,930 --> 01:48:34,180
ارسل قائمة من الكلمات مفصولة بفاصلة.

2356
01:48:34,180 --> 01:48:35,337
كان هذا الإصدار 2.

2357
01:48:35,337 --> 01:48:37,420
ومن ثم يتخلص هذا الإصدار
الأخير من كل ذلك

2358
01:48:37,420 --> 01:48:39,211
ويُرسل فقط جميع الكلمات
إلى المتصفح

2359
01:48:39,211 --> 01:48:43,350
ويتيح له معالجتها بالكامل.

2360
01:48:43,350 --> 01:48:48,320
مَن يعجبه ما هو أفضل، 0، أو 1، أو 2، أو 3؟

2361
01:48:48,320 --> 01:48:49,236
ما هو رأيكم؟

2362
01:48:49,236 --> 01:48:52,670
الجمهور: لذا إذا لا يُفترض
أن تثقوا بالمستخدم في حالة

2363
01:48:52,670 --> 01:48:55,940
إيقافه تشغيل JavaScript، إذن
ينجح قراره بشأن

2364
01:48:55,940 --> 01:48:57,590
موقع الويب.

2365
01:48:57,590 --> 01:48:59,131
ديفيد مالان: هذه مقايضة جيدة.

2366
01:48:59,131 --> 01:49:02,374
لذا إذا أوقف المستخدم تشغيل JavaScript،

2367
01:49:02,374 --> 01:49:03,540
3-- حسنًا، لن يسيء لأي أحد--

2368
01:49:03,540 --> 01:49:07,530
لن يعمل 3، و2، و1 بعد الآن
لأنه تم تعطيل JavaScript.

2369
01:49:07,530 --> 01:49:09,080
في الوقت الحالي، هل يهمكم ذلك؟

2370
01:49:09,080 --> 01:49:09,740
ربما لا.

2371
01:49:09,740 --> 01:49:11,917
يوجد عدد صغير من
المستخدمين على الإنترنت

2372
01:49:11,917 --> 01:49:14,750
يثيرهم القلق للغاية بشأن هذا فيقومون فقط
بإيقاف تشغيل JavaScript كليًا،

2373
01:49:14,750 --> 01:49:17,958
والواقع أن معظم مواقع الويب تقوم بالتقسيم
دون استخدام JavaScript هذه الأيام.

2374
01:49:17,958 --> 01:49:20,155
قد تكون هذه تكلفة معقولة
للقيام بهذا.

2375
01:49:20,155 --> 01:49:20,780
أي أفكار أخرى؟

2376
01:49:20,780 --> 01:49:21,426
أجل؟

2377
01:49:21,426 --> 01:49:23,330
الجمهور: هل
الإصدار الأخير هو الأسرع؟

2378
01:49:23,330 --> 01:49:25,204
ديفيد مالان: هل
الإصدار الأخير هو الأسرع؟

2379
01:49:25,204 --> 01:49:29,370
لا أعرف، كيف يمكننا تقييم ذلك؟

2380
01:49:29,370 --> 01:49:31,120
نعم، أعني، يمكننا
حرفيًا تدبر الأمر.

2381
01:49:31,120 --> 01:49:34,492
وبصراحة،ما تم دمجه في Chrome في
علامات تبويب أخرى لم أنقر عليها حتى

2382
01:49:34,492 --> 01:49:36,700
عبارة عن أدوات خاصة بالأداء
حيث يمكنكم في الواقع

2383
01:49:36,700 --> 01:49:38,569
مراقبة مقدار الوقت الذي يستغرقه كل شيء.

2384
01:49:38,569 --> 01:49:40,360
وهذا ما يُسمى بقياس الأداء
بشكل عام أكثر،

2385
01:49:40,360 --> 01:49:42,610
وهذا ما قمتم بفعله
بشكل أساسي في مشاكل المدقق الإملائي

2386
01:49:42,610 --> 01:49:44,650
على الرغم من أننا كتبنا التعليمة البرمجية
التي قامت بإعداد توقيت كل شيء

2387
01:49:44,650 --> 01:49:46,691
وقياس كل شيء،
للإجابة على ذلك السؤال،

2388
01:49:46,691 --> 01:49:49,809
يمكنكم فقط محاولة إعداد توقيت
كل مثال من هذه الأمثلة

2389
01:49:49,809 --> 01:49:51,850
ومن ثم تقررون لأنفسكم
ما هو أفضل، بالتأكيد.

2390
01:49:51,850 --> 01:49:52,690
أجل؟

2391
01:49:52,690 --> 01:49:54,940
الجمهور: الشيء الأخير الذي كان لديّ
بمشكلة جدلية

2392
01:49:54,940 --> 01:49:57,995
هي أن هاتفي قديم، ولا
يحتوي على مساحة كبيرة من الذاكرة،

2393
01:49:57,995 --> 01:50:00,550
وقد لا تكون لديّ
أسرع خطة على الأرض.

2394
01:50:00,550 --> 01:50:06,059
إذن قد تُكلفني المزيد من البيانات،
وقد تجعل هاتفي بطيئًا.

2395
01:50:06,059 --> 01:50:07,600
ديفيد مالان: سبب منطقي جدًا.

2396
01:50:07,600 --> 01:50:13,070
دعوني أنتقل إلى ملف القاموس لدينا
هنا وأُدرج حجم هذا.

2397
01:50:13,070 --> 01:50:17,750
هذا الملف large.js مساحته 2.2
ميغابايت، على أجهزة الهاتف المحمولة،

2398
01:50:17,750 --> 01:50:21,326
خاصة في الأماكن التي تكون فيها الإشارة
بطيئة، أو فيها وحدات البايت باهظة الثمن،

2399
01:50:21,326 --> 01:50:23,200
أو أن لديكم فقط
وصول مُتقطِع، أعني،

2400
01:50:23,200 --> 01:50:26,230
أن تُرسل وحدتي ميغابايت إلى المستخدم
أمر بغيض بعض الشيء

2401
01:50:26,230 --> 01:50:30,430
إذا تمكنتم من تجنب ذلك، خاصة عندما
يمكنكم إرسال مجموعة فرعية فقط من النتائج،

2402
01:50:30,430 --> 01:50:33,392
ربما بعض وحدات الكيلوبايت،
من النتائج المتطابقة بدلاً من ذلك.

2403
01:50:33,392 --> 01:50:34,600
إذن هذا سبب منطقي جدًا.

2404
01:50:34,600 --> 01:50:36,365
التكلفة، تجربة المستخدم، الأداء.

2405
01:50:36,365 --> 01:50:36,990
أي أفكار أخرى؟

2406
01:50:36,990 --> 01:50:39,650


2407
01:50:39,650 --> 01:50:42,890
ما هو أفضل للأشخاص في الجامعة
وحرم الجامعي الذين يميلون عادة

2408
01:50:42,890 --> 01:50:46,380
أن يكون لديهم وصول جيد إلى الإنترنت؟

2409
01:50:46,380 --> 01:50:47,140
قل ذلك مجددًا؟

2410
01:50:47,140 --> 01:50:47,970
3، حسنًا.

2411
01:50:47,970 --> 01:50:50,010
ولكن ماذا لو أنها ليست
140000 كلمة، ولكنها

2412
01:50:50,010 --> 01:50:54,600
مثل مليار صورة من
القطط التي يقوم Google بفهرستها؟

2413
01:50:54,600 --> 01:50:58,031
أو المئات أو الآلاف من الأصدقاء
وجميع بيانات ملفاتهم الشخصية؟

2414
01:50:58,031 --> 01:51:00,030
على سبيل المثال في مرحلة ما توجد
نقطة الانعطاف هذه

2415
01:51:00,030 --> 01:51:01,820
حيث توجد بيانات كثيرة جدًا، أليس كذلك؟

2416
01:51:01,820 --> 01:51:03,279
إنه غير منطقي، إنه كثير جدًا.

2417
01:51:03,279 --> 01:51:05,778
لا تريدون فقط الحصول على نسخة
من قاعدة بيانات شركتكم

2418
01:51:05,778 --> 01:51:08,460
لكل المستخدمين لديكم فقط إليهم
ليبحثوا محليًا بشكل أكبر.

2419
01:51:08,460 --> 01:51:10,080
إذن مجددًا، هذه هي
الأسئلة غير الواضحة.

2420
01:51:10,080 --> 01:51:12,370
وأحد أهداف
المشروع النهائي، بصراحة،

2421
01:51:12,370 --> 01:51:15,480
إذا كنتم تقومون بشيء قائم على الويب، أو
على الهاتف المحمول، أو على C، أو أي شيء،

2422
01:51:15,480 --> 01:51:17,580
هو أن تلخيص كل هذه الأسئلة
الآن من أجلكم.

2423
01:51:17,580 --> 01:51:20,130
على سبيل المثال ليست لدينا
إجابات مُحددَة جيدًا نتذكرها

2424
01:51:20,130 --> 01:51:23,310
بشأن ما يجب أن يقوم به مشروعكم النهائي
وكيف يقوم به على أفضل وجه.

2425
01:51:23,310 --> 01:51:26,160
لكن في الأسابيع القادمة، ستقومون 
باقتراح مُسبق لبعض أفكار المشروعات،

2426
01:51:26,160 --> 01:51:29,416
اقتراح فكرة مشروع فعلي
ثم تصميم هذا وتنفيذه.

2427
01:51:29,416 --> 01:51:31,290
ومن المحتمل أنكم أيضًا،
ستشعرون بهذه الصعوبة

2428
01:51:31,290 --> 01:51:34,410
حيث الإجابة ليست واضحة دائمًا،
قد لا يعرف زميلكم في التدريس حتى

2429
01:51:34,410 --> 01:51:36,090
كيفية الإجابة عن سؤالكم، 
لأن لديه أو لديها

2430
01:51:36,090 --> 01:51:37,214
أفكار خاصة.

2431
01:51:37,214 --> 01:51:38,520
لكن الأمر متروك لكم في نهاية المطاف.

2432
01:51:38,520 --> 01:51:42,330
ونحن الآن في مرحلة
مستوى نضج الترميز

2433
01:51:42,330 --> 01:51:45,240
حيث نأخذ عجلات 
التدريب والمزيد من القرارات

2434
01:51:45,240 --> 01:51:47,100
التي ستُترك لكم الآن.

2435
01:51:47,100 --> 01:51:48,120
دعونا نتوقف هنا.

2436
01:51:48,120 --> 01:51:50,119
سأبقى هنا لبعض الوقت من
أجل الأسئلة الفردية،

2437
01:51:50,119 --> 01:51:52,220
وسأراكم الأسبوع القادم من أجل قواعد البيانات.