arabic.js.srt

1
00:00:00,000 --> 00:00:02,418
- على مدى السنوات الـ10 الماضية
أصبحت صفحات الويب الخاصة بنا

2
00:00:02,418 --> 00:00:05,600
أكثر ديناميكية وقوة
بفضل جافا سكريبت.

3
00:00:05,600 --> 00:00:07,541
لقد قمنا بنقل الكثير من
الأكواد التي كانت عادة في

4
00:00:07,541 --> 00:00:10,120
جهة الخادوم إلى متصفحاتنا،

5
00:00:10,120 --> 00:00:13,051
مما تركنا مع آلاف
من أسطر رموز جافا سكريبت

6
00:00:13,051 --> 00:00:15,691
مرتبطة بمختلف ملفات HTML و CSS

7
00:00:15,691 --> 00:00:17,821
دون تنظيم رسمي.

8
00:00:17,821 --> 00:00:19,781
هذا هو السبب وراء استخدام المزيد
والمزيد من المطورين

9
00:00:19,781 --> 00:00:23,948
أطر عمل جافا سكريبت
مثل Angular أو React أو Vue.

10
00:00:24,821 --> 00:00:27,829
Vue يسر التعامل
فعال وعملي

11
00:00:27,829 --> 00:00:29,860
و هو إطار جافا سكريبت
يساعدك على إنشاء

12
00:00:29,860 --> 00:00:33,381
كود أكثر قابلية للإصلاح وللإختبار.

13
00:00:33,381 --> 00:00:36,229
Vue هو إطار عمل جافا سكريبت تقدمي،
مما يعني أنه،

14
00:00:36,229 --> 00:00:38,621
إذا كان لديك تطبيق
يعمل على الخادوم.

15
00:00:38,621 --> 00:00:41,627
يمكنك توصيل Vue
في جزء من تطبيقك

16
00:00:41,627 --> 00:00:44,381
الذي يحتاج إلى تجربة أكثر
ثراء وتفاعل.

17
00:00:44,381 --> 00:00:46,269
أو، إذا كنت ترغب في بناء
واجهات ذات توجه تجاري

18
00:00:46,269 --> 00:00:48,240
إلى واجهتك الأمامية من البداية،

19
00:00:48,240 --> 00:00:50,611
فلدى Vue المكتبات الأساسية
و النظام المتكامل

20
00:00:50,611 --> 00:00:52,421
الذي تحتاج للتوسع.

21
00:00:52,421 --> 00:00:53,829
مثل غيرها من أطر الواجهة الأمامية،

22
00:00:53,829 --> 00:00:55,960
تسمح لك Vue بأخذ
صفحة ويب وتقسيمها

23
00:00:55,960 --> 00:01:00,000
إلى مكونات قابلة لإعادة الاستخدام،
كل منها يحتوي على HTML،

24
00:01:00,000 --> 00:01:02,291
CSS، و  جافا سكريبت اللازمة لإستخراج

25
00:01:02,291 --> 00:01:04,269
ذلك الجزء من الصفحة.

26
00:01:04,269 --> 00:01:06,260
التالي، سنلقي نظرة
على Vue عن كثب ب

27
00:01:06,260 --> 00:01:08,301
بناء صفحة جرد منتج،

28
00:01:08,301 --> 00:01:10,187
لكن ابقوا معنا حتى نهاية الفيديو

29
00:01:10,187 --> 00:01:13,571
لرسالة من
منشئ Vue،  إيفان يوو.

30
00:01:13,571 --> 00:01:15,301
لن نعلمك كيفية استخدام Vue،

31
00:01:15,301 --> 00:01:16,981
لكننا سنقدم بعض المفاهيم الأساسية

32
00:01:16,981 --> 00:01:19,460
التي تجعل من Vue مفيدة للغاية.

33
00:01:19,460 --> 00:01:21,200
كما هو الحال مع العديد من تطبيقات جافا سكريبت،

34
00:01:21,200 --> 00:01:24,272
نبدأ من الحاجة إلى
عرض البيانات على صفحة الويب الخاصة بنا.

35
00:01:24,272 --> 00:01:26,591
مع Vue، يبدأ الأمر بسهولة تامة.

36
00:01:26,591 --> 00:01:29,745
نقوم بتضمين مكتبة Vue،
إنشاء مثيل Vue،

37
00:01:29,745 --> 00:01:33,673
و توصيله بالعنصر الأساسي
بمعرّف التطبيق app.

38
00:01:33,673 --> 00:01:36,032
EL تعني عُنصر وهي اختصار لكلمة element الإنجليزية.

39
00:01:36,032 --> 00:01:39,505
سنقوم أيضًا بنقل بياناتنا داخل كائن

40
00:01:39,505 --> 00:01:41,993
و تغيير X إلى صيغة برمجية

41
00:01:41,993 --> 00:01:44,544
مع الأقواس المزدوجة المتعرجة.

42
00:01:44,544 --> 00:01:46,945
كما ترون، إنه يعمل.

43
00:01:46,945 --> 00:01:50,695
رائع جدًا، لكن سحر Vue
يبدأ عندما تتغير البيانات.

44
00:01:50,695 --> 00:01:51,975
إذا ذهبنا إلى سطر الأوامر،

45
00:01:51,975 --> 00:01:54,735
سنقوم بتغيير قيمة منتجنا.

46
00:01:54,735 --> 00:01:57,324
لاحظ أنه بمجرد
تغير قيمة المنتج،

47
00:01:57,324 --> 00:01:59,953
قام Vue بتحديث HTML الخاص بنا تلقائيًا.

48
00:01:59,953 --> 00:02:01,745
هذا لأن Vue إطار تفاعلي،

49
00:02:01,745 --> 00:02:03,273
يعني أنه عندما تتغير بياناتنا،

50
00:02:03,273 --> 00:02:05,193
يهتم Vue بتحديث جميع الأماكن

51
00:02:05,193 --> 00:02:07,255
التي نستخدمها في صفحة الويب الخاصة بنا.

52
00:02:07,255 --> 00:02:10,305
هذا الأمر يعمل مع كافة أنواع البيانات،
وليس النصوص فقط.

53
00:02:10,305 --> 00:02:11,604
لذلك بدلا من منتج واحد،

54
00:02:11,604 --> 00:02:14,604
دعونا نستخدم مجموعة من المنتجات.

55
00:02:14,604 --> 00:02:17,865
ثم سنقوم بتحديث
H2 إلى قائمة غير مرتبة،

56
00:02:17,865 --> 00:02:20,535
و إنشاء عنصر قائمة جديد
لكل منتج في المصفوفة

57
00:02:20,535 --> 00:02:22,618
باستخدام التوجيه v-for لVue.

58
00:02:24,353 --> 00:02:26,615
بهذه الطريقة، يحصل كل منتج
على عنصر قائمة خاص به

59
00:02:26,615 --> 00:02:28,495
كما ترون هنا.

60
00:02:28,495 --> 00:02:30,352
لكن هذا لا يزال يبدو مختلق ذو بيانات معدة مسبقاً بعض الشيء.

61
00:02:30,352 --> 00:02:32,312
لذلك دعونا نبدأ بقائمتنا فارغة

62
00:02:32,312 --> 00:02:34,815
بعدها سنجلب أحدث منتجاتنا من واجهة برمجة تطبيقات حقيقية

63
00:02:34,815 --> 00:02:37,433
التي يمكن أن تأتي
من قاعدة بيانات في مكان ما.

64
00:02:37,433 --> 00:02:38,863
عندما يتم إنشاء تطبيقنا،

65
00:02:38,863 --> 00:02:41,866
سنجلب أحدث المنتجات
من واجهة برمجة التطبيقات هذه.

66
00:02:41,866 --> 00:02:43,199
كل ماعليك معرفته هنا هو أننا

67
00:02:43,199 --> 00:02:45,063
نجلب قائمتنا من المنتجات

68
00:02:45,063 --> 00:02:46,923
ومن ثم تحديثها في بياناتنا.

69
00:02:46,923 --> 00:02:48,281
كما ترون على صفحة الويب لدينا،

70
00:02:48,281 --> 00:02:51,435
كل عنصر قائمة يعرض
الكائن الذي تم إرجاعه.

71
00:02:51,435 --> 00:02:53,474
حسنا، يبدو أنه غير قابل للقراءة بعد،

72
00:02:53,474 --> 00:02:56,265
لذلك دعونا نغير الطريقة التي يتم عرضها فيها.

73
00:02:56,265 --> 00:02:59,643
سنقوم بطباعة الكمية والاسم.

74
00:02:59,643 --> 00:03:02,265
و هاهو ذا، طبع بشكل جيد.

75
00:03:02,265 --> 00:03:03,563
قد نرغب في لفت الانتباه إلى

76
00:03:03,563 --> 00:03:05,675
العناصر التي لا تحتوي على كمية.

77
00:03:05,675 --> 00:03:09,595
لذلك دعونا نضيف وسم span
يحمل النص، منتهي من المخزون.

78
00:03:09,595 --> 00:03:13,334
يجب أن يظهر هذا فقط إذا
كانت كمية العنصر تساوي صفرًا.

79
00:03:13,334 --> 00:03:16,134
سنستخدم التوجيه v-if.

80
00:03:16,134 --> 00:03:20,362
لأن سترتنا لديها كمية
صفر، فهي خارج المخزون.

81
00:03:20,362 --> 00:03:22,081
ماذا لو أردنا
طباعة الرقم الإجمالي

82
00:03:22,081 --> 00:03:24,641
من المنتجات تحت قائمتنا؟

83
00:03:24,641 --> 00:03:26,468
لجعل هذا يعمل، نحتاج إلى إنشاء

84
00:03:26,468 --> 00:03:29,570
خاصية محسوبة تسمى totalProducts

85
00:03:29,570 --> 00:03:34,228
و التي تعيد الكمية
الإجمالية لمنتجاتنا.

86
00:03:34,228 --> 00:03:36,490
إذا كنت غير معتاد
على دالة reduce في جافا سكريبت،

87
00:03:36,490 --> 00:03:40,468
فهي تجمع كل الكميات لكل منتج.

88
00:03:40,468 --> 00:03:41,851
كما ترون، في متصفحنا،

89
00:03:41,851 --> 00:03:45,308
فهي أضافت بشكل صحيح
جميع الكميات.

90
00:03:45,308 --> 00:03:47,588
هنا في المتصفح، أريد
أن اريك إضافة Vue

91
00:03:47,588 --> 00:03:51,380
لمتصفح Chrome حيث يمكننا
مشاهدة مصفوفة بياناتنا

92
00:03:51,380 --> 00:03:53,547
وفحصها هنا.

93
00:03:55,108 --> 00:03:57,460
بما أننا في سطر الأوامر، وللمتعة فقط،

94
00:03:57,460 --> 00:03:59,850
دعنا نلغي العنصر الأخير من المصفوفة

95
00:03:59,850 --> 00:04:01,828
ونرى ما سيحدث.

96
00:04:01,828 --> 00:04:04,359
كما ترى، لم يتم
تحديث قائمتنا فقط،

97
00:04:04,359 --> 00:04:07,940
ولكن مجموعنا كذلك، كما قد تأمل.

98
00:04:07,940 --> 00:04:10,410
بعد ذلك، دعنا نضيف بعض
التفاعل إلى هذه الصفحة

99
00:04:10,410 --> 00:04:12,346
من خلال استخدام زر.

100
00:04:12,346 --> 00:04:14,490
سنقوم بإنشاء و إضافة
زر لكل منتج

101
00:04:14,490 --> 00:04:15,850
وعند حدوث نقرة،

102
00:04:15,850 --> 00:04:18,850
سنزيد الكمية بمقدار واحد.

103
00:04:19,959 --> 00:04:22,279
بالعودة إلى المتصفح، لاحظ
كيف أنه عندما نضيف عنصرًا،

104
00:04:22,279 --> 00:04:25,159
لا يتم تحديث
المخزون الإجمالي فقط،

105
00:04:25,159 --> 00:04:27,780
ولكن أيضًا إذا قمنا بزيادة
منتج السترة الخاص بنا،

106
00:04:27,780 --> 00:04:30,300
فإن رسالة منتهي من المخزون تختفي.

107
00:04:30,300 --> 00:04:31,860
النقر على هذا الزر مليون مرة

108
00:04:31,860 --> 00:04:33,890
أمر متعب،
لذلك ماذا لو أردنا

109
00:04:33,890 --> 00:04:37,719
كتابة كمية
السترات أو الجوارب؟

110
00:04:37,719 --> 00:04:40,580
نقوم فقط بإنشاء حقل إدخال
جديد و إلزامه بـ

111
00:04:40,580 --> 00:04:43,867
حقل كمية المنتج
بواسطة التوجيه v-model

112
00:04:43,867 --> 00:04:46,519
و تحديد أنه دائمًا رقم.

113
00:04:46,519 --> 00:04:48,060
ستلاحظ الآن، أنه يمكنني إدخال إجمالي

114
00:04:48,060 --> 00:04:52,450
كمية كل عنصر و
يتم تحديثها على الفور.

115
00:04:52,450 --> 00:04:54,500
يمكنني حتى ضبط الكمية إلى الصفر

116
00:04:54,500 --> 00:04:57,899
وأحصل على رسالة، انتهاء المخزون.

117
00:04:57,899 --> 00:05:01,232
ولا تزال أزرار الإضافة تعمل على ما يرام.

118
00:05:02,259 --> 00:05:03,999
إذا كنا نبني تطبيقا أكبر،

119
00:05:03,999 --> 00:05:05,839
قد نرغب في تقسيم
الأمور في هذه المرحلة

120
00:05:05,839 --> 00:05:09,290
إلى المكونات والملفات الخاصة بهم.

121
00:05:09,290 --> 00:05:11,827
لدى Vue واجهة سطر أوامر أيضا

122
00:05:11,827 --> 00:05:15,828
مما يجعل من السهل
بدء مشاريع حقيقية بسرعة.

123
00:05:15,828 --> 00:05:18,879
يمكننا حتى استخدام
مكونات الملف الواحد في Vue

124
00:05:18,879 --> 00:05:21,770
الذي يحتوي على HTML، جافا سكريبت،

125
00:05:21,770 --> 00:05:23,687
و Scoped CSS، أو SCSS.

126
00:05:25,599 --> 00:05:28,926
- مرحبًا، أنا إيفان يو، منشئ Vue.js.

127
00:05:28,926 --> 00:05:31,587
ما رأيته هنا
بالكاد خدش سطح

128
00:05:31,587 --> 00:05:33,065
ما يمكن لVue أن تفعله.

129
00:05:33,065 --> 00:05:34,856
هناك أكثر من ذالك بكثير في النظام المتكامل

130
00:05:34,856 --> 00:05:36,555
لمساعدتك في البناء، التنظيم،

131
00:05:36,555 --> 00:05:39,076
و التوسع بتطبيقات الواجهة الأمامية الخاصة بك.

132
00:05:39,076 --> 00:05:42,457
للحصول على فكرة أفضل وأشمل،
اقرأ وثائقنا البرمجية اليوم.

133
00:05:42,457 --> 00:05:44,708
أعتقد أنك ستستمتع بالعرض.