1
00:00:00,000 --> 00:00:03,800
هذا هو ما سنقوم ببنائه

2
00:00:01,680 --> 00:00:06,000
في هذا المشروع باستخدام React JS،

3
00:00:03,800 --> 00:00:07,280
TypeScript وTailwind CSS. لذا، الآن

4
00:00:06,000 --> 00:00:08,640
اسمحوا لي أن تظهر لك الوظائف التي

5
00:00:07,280 --> 00:00:10,440
سنقوم بتنفيذ هذا

6
00:00:08,640 --> 00:00:12,520
مشروع. أول شيء لدينا هو

7
00:00:10,440 --> 00:00:14,040
مرشح. لذلك، يمكننا اختيار رخيصة

8
00:00:12,520 --> 00:00:16,160
المنتجات. كما ترون، هذا هو

9
00:00:14,040 --> 00:00:18,200
أرخص واحد. يمكننا أيضًا تحديد

10
00:00:16,160 --> 00:00:20,160
واحدة باهظة الثمن. يمكنك أن ترى أن لدينا

11
00:00:18,200 --> 00:00:21,960
منتج باهظ الثمن. يمكننا أيضًا الاختيار

12
00:00:20,160 --> 00:00:23,880
الشعبية، وهذا هو

13
00:00:21,960 --> 00:00:25,760
شعبية واحدة هنا. يمكننا أيضا

14
00:00:23,880 --> 00:00:27,600
البحث حسب اسم المنتج. لنفترض لو أنني

15
00:00:25,760 --> 00:00:29,440
أريد البحث عن رولكس، لذلك سأفعل ذلك

16
00:00:27,600 --> 00:00:30,400
اكتب مثل رولكس، وهنا يمكنك أن ترى

17
00:00:29,440 --> 00:00:32,840
سوف يعطيني كل ما لديهم

18
00:00:30,400 --> 00:00:34,200
المنتجات التي تحمل اسم رولكس.

19
00:00:32,840 --> 00:00:35,720
لذا، سأقوم بإزالة ذلك من هنا.

20
00:00:34,200 --> 00:00:37,680
يمكننا إعادة ضبط مرشحاتنا، لذا سأذهب

21
00:00:35,720 --> 00:00:39,720
للنقر على ذلك. يمكنك أيضًا البحث عن طريق

22
00:00:37,680 --> 00:00:41,280
الحد الأدنى للسعر وأيضا الحد الأقصى

23
00:00:39,720 --> 00:00:43,920
السعر. لذا، لنفترض أنني إذا كتبت فقط مثل

24
00:00:41,280 --> 00:00:45,400
الحد الأدنى لسعر 20، وبعد ذلك أنا

25
00:00:43,920 --> 00:00:48,000
الذهاب أيضا لتوفير الحد الأقصى للسعر

26
00:00:45,400 --> 00:00:49,200
مثل 200200، حتى هنا يمكنك أن ترى

27
00:00:48,000 --> 00:00:51,040
سوف يعطيني ذلك الاثنين فقط

28
00:00:49,200 --> 00:00:52,720
المنتجات هنا. ويمكننا أيضًا

29
00:00:51,040 --> 00:00:54,360
اختر حسب الفئة. لذا، إذا أنا فقط

30
00:00:52,720 --> 00:00:56,280
حدد مثل الجمال، لذلك سوف يحدث

31
00:00:54,360 --> 00:00:57,720
أعطني فقط منتجات التجميل. نستطيع

32
00:00:56,280 --> 00:00:58,880
حدد أيضًا حسب نوع مختلف من الأشياء

33
00:00:57,720 --> 00:01:00,520
مثل لنفترض أنه إذا قمت بالنقر فوق

34
00:00:58,880 --> 00:01:02,160
الأثاث، وسوف يعطيني فقط

35
00:01:00,520 --> 00:01:03,840
هذا الأثاث هنا، وما إلى ذلك و

36
00:01:02,160 --> 00:01:06,240
وهكذا دواليك. حسنا، والآن اسمحوا لي فقط

37
00:01:03,840 --> 00:01:07,920
قم بتحديث ذلك مرة أخرى. يمكننا أيضا

38
00:01:06,240 --> 00:01:09,600
اختر بكلمة رئيسية. لذلك، دعونا نفترض

39
00:01:07,920 --> 00:01:11,400
إذا نقرت على Apple، فسوف يحدث ذلك

40
00:01:09,600 --> 00:01:12,960
أعطني كل منتجات Apple هذه بشكل صحيح

41
00:01:11,400 --> 00:01:15,960
هنا. يمكننا أيضًا البحث عن

42
00:01:12,960 --> 00:01:20,120
ساعات أزياء,

43
00:01:15,960 --> 00:01:21,960
الاتجاه، والأحذية، والقميص، وأكثر من ذلك بكثير.

44
00:01:20,120 --> 00:01:23,840
حسنًا ، كانت هذه أول الأشياء. الآن،

45
00:01:21,960 --> 00:01:25,480
اسمحوا لي أن أقوم بإعادة الضبط هناك، ونحن أيضًا

46
00:01:23,840 --> 00:01:27,400
نفذت ترقيم الصفحات. لذا، إذا كنت

47
00:01:25,480 --> 00:01:28,440
انقر على الثاني، وهنا أنت

48
00:01:27,400 --> 00:01:30,600
يمكن أن نرى أنه سوف يقودنا إلى

49
00:01:28,440 --> 00:01:32,360
الصفحة الثانية، ويمكنني أن أختار مثل

50
00:01:30,600 --> 00:01:34,000
نوع مختلف من ترقيم الصفحات، وما إلى ذلك

51
00:01:32,360 --> 00:01:35,360
وهكذا دواليك. لذلك، يمكنني النقر على

52
00:01:34,000 --> 00:01:37,040
الزر التالي، سوف يظهر لي

53
00:01:35,360 --> 00:01:38,440
الصفحة التالية. يمكنني أيضًا النقر على

54
00:01:37,040 --> 00:01:41,040
السابقة، لذلك سوف يجلب لنا

55
00:01:38,440 --> 00:01:42,440
إلى الصفحة السابقة. والآن، إذا كنت

56
00:01:41,040 --> 00:01:44,360
انقر على منتج معين، لذلك أنا

57
00:01:42,440 --> 00:01:46,400
الذهاب لمجرد اختيار مثل الساعات، و

58
00:01:44,360 --> 00:01:47,880
الآن إذا نقرت على منتج معين،

59
00:01:46,400 --> 00:01:49,360
وكما ترون هنا، فهو كذلك

60
00:01:47,880 --> 00:01:50,840
سوف يقودنا إلى هذا المحدد

61
00:01:49,360 --> 00:01:52,880
صفحة المنتج. لذلك، لدينا المنتج

62
00:01:50,840 --> 00:01:55,440
الصورة، لدينا اسم المنتج،

63
00:01:52,880 --> 00:01:57,840
الوصف والسعر وأيضا التقييم

64
00:01:55,440 --> 00:01:59,600
أيضًا. حسنًا، يمكننا العودة لنرى

65
00:01:57,840 --> 00:02:02,000
جميع المنتجات مرة أخرى. نستطيع

66
00:01:59,600 --> 00:02:04,600
قم أيضًا بمتابعة شخص ما وإلغاء المتابعة إذا كنت

67
00:02:02,000 --> 00:02:05,840
أراد أن. وهذه ديناميكية تمامًا

68
00:02:04,600 --> 00:02:08,240
أشخاص مثلنا سنرسل أ

69
00:02:05,840 --> 00:02:10,679
طلب إلى واجهة برمجة تطبيقات المستخدمين العشوائيين. إذا أنا

70
00:02:08,240 --> 00:02:12,160
قم بتحديث ذلك، لذلك في أي وقت أقوم بتحديث ذلك،

71
00:02:10,679 --> 00:02:14,120
سوف يعطيني كل هذا العشوائي

72
00:02:12,160 --> 00:02:17,480
الناس هنا. وأخيرا، لدينا

73
00:02:14,120 --> 00:02:18,840
هذه المدونات، وهم لا يفعلون شيئًا.

74
00:02:17,480 --> 00:02:20,440
لذلك، دعونا الآن ندخل في إعداد هذا

75
00:02:18,840 --> 00:02:21,720
المشروع، وأنا ذاهب لرؤيتك هناك.

76
00:02:20,440 --> 00:02:24,400
دعونا نتحدث عن متطلبات

77
00:02:21,720 --> 00:02:25,960
هذا الفيديو. لذلك، لهذا الفيديو، سوف تفعل ذلك

78
00:02:24,400 --> 00:02:27,320
يجب أن تعرف جافا سكريبت. لذا، إذا كنت

79
00:02:25,960 --> 00:02:29,480
لا أعرف ما هو جافا سكريبت، لذلك أنا

80
00:02:27,320 --> 00:02:31,680
لديك دورة كاملة عن ذلك. أنت أيضا

81
00:02:29,480 --> 00:02:33,480
سأحتاج إلى معرفة Tailwind CSS، لذلك أنا

82
00:02:31,680 --> 00:02:36,200
لديك دورة كاملة عن ذلك. أنت أيضا

83
00:02:33,480 --> 00:02:38,520
يجب أن تعرف TypeScript وReact JS،

84
00:02:36,200 --> 00:02:40,360
وعليك أيضًا أن تأخذ هذه الدورة

85
00:02:38,520 --> 00:02:42,800
وهي أنواع TypeScript المتقدمة لـ

86
00:02:40,360 --> 00:02:44,600
JS التالي، لكن هذه الدورة ليست مخصصة فقط لـ

87
00:02:42,800 --> 00:02:46,680
مطور JS التالي. لقد صنعت هذا

88
00:02:44,600 --> 00:02:48,840
دورة تدريبية لكل من مطوري React JS و

89
00:02:46,680 --> 00:02:50,560
أيضًا لمطوري Next JS. إذا كنت

90
00:02:48,840 --> 00:02:51,920
استكمال هذه الدورات، أستطيع تماما

91
00:02:50,560 --> 00:02:54,400
ضمان أنك سوف تكون

92
00:02:51,920 --> 00:02:56,520
تطلق على نفسك اسم TypeScript و

93
00:02:54,400 --> 00:02:58,200
رد فعل وحوش JS. الآن، دعونا ندخل

94
00:02:56,520 --> 00:02:59,800
إعداد هذا الفيديو. الآن، اسمحوا لي

95
00:02:58,200 --> 00:03:01,240
قم بإجراء إعداد لرحلة البرمجة الخاصة بي. لذا،

96
00:02:59,800 --> 00:03:02,800
سأقوم بفتح محطتي هنا

97
00:03:01,240 --> 00:03:04,400
على سطح المكتب الخاص بي، وسأقوم بذلك فقط

98
00:03:02,800 --> 00:03:06,760
الصق هذا الأمر وهو إنشاء ملف جديد

99
00:03:04,400 --> 00:03:08,120
المشروع باستخدام الاعشاب، وأنا ذاهب

100
00:03:06,760 --> 00:03:09,400
لإعطائها اسمًا مثل React

101
00:03:08,120 --> 00:03:10,760
com.ecom. يمكنك أن تعطيه اسما لك

102
00:03:09,400 --> 00:03:12,560
مثل. وسأقوم بالضغط على زر الإدخال

103
00:03:10,760 --> 00:03:13,680
الآن. سأكتب Y وأضرب

104
00:03:12,560 --> 00:03:15,840
أدخل.

105
00:03:13,680 --> 00:03:17,200
والآن سأختار React.

106
00:03:15,840 --> 00:03:18,960
سأقوم أيضًا باختيار TypeScript

107
00:03:17,200 --> 00:03:20,640
لأنه في هذا الفيديو، سنكون

108
00:03:18,960 --> 00:03:22,280
أيضًا باستخدام TypeScript أيضًا. لذلك، أنا

109
00:03:20,640 --> 00:03:25,160
سوف نمضي قدمًا ونذهب إلى هذا المجلد

110
00:03:22,280 --> 00:03:27,440
وهو رد فعل ecom.

111
00:03:25,160 --> 00:03:28,880
والآن اسمحوا لي أن أستخدم npm i للتثبيت

112
00:03:27,440 --> 00:03:30,280
كل شيء. الآن، هذا

113
00:03:28,880 --> 00:03:32,000
تم ذلك بنجاح، لذلك سأقوم بالمسح

114
00:03:30,280 --> 00:03:34,920
هذا خارج. والآن علينا التثبيت

115
00:03:32,000 --> 00:03:37,080
المزيد من الحزم التي هي أكسيوس، واضحة

116
00:03:34,920 --> 00:03:38,040
رمز، وأيضا الرد على جهاز التوجيه دوم. أنا

117
00:03:37,080 --> 00:03:39,720
سوف تضغط على زر الإدخال، لذلك سوف يتم ذلك

118
00:03:38,040 --> 00:03:41,400
تثبيت ذلك في الجهاز الخاص بي. الآن، هذا

119
00:03:39,720 --> 00:03:42,480
تم بنجاح. الشيء التالي الذي

120
00:03:41,400 --> 00:03:44,720
ما يتعين علينا القيام به هو أن علينا أن نذهب

121
00:03:42,480 --> 00:03:47,280
للأمام وانتقل إلى tailwindcss.com،

122
00:03:44,720 --> 00:03:48,520
ثم المستندات والأدلة والأعشاب الضارة. لذلك، بمجرد أننا

123
00:03:47,280 --> 00:03:49,880
هناك، لذلك هذه الخطوة هي الآن

124
00:03:48,520 --> 00:03:51,120
تم بنجاح. الشيء التالي الذي

125
00:03:49,880 --> 00:03:52,560
ما يتعين علينا القيام به هو أن علينا نسخ

126
00:03:51,120 --> 00:03:54,680
هذا الأمر، وأنا ذاهب إلى المكان

127
00:03:52,560 --> 00:03:55,880
هذا هنا. لصقه على أي حال، و

128
00:03:54,680 --> 00:03:57,400
سأقوم أيضًا بالضغط على زر الإدخال، لذا فهو كذلك

129
00:03:55,880 --> 00:03:59,400
سأقوم بتهيئة Tailwind CSS الخاص بي

130
00:03:57,400 --> 00:04:00,800
داخل مشروعي. الآن، هذا تماما

131
00:03:59,400 --> 00:04:03,400
انتهيت، لذا سأفتح رمز VS الخاص بي

132
00:04:00,800 --> 00:04:04,640
هنا داخل هذا المجلد المحدد.

133
00:04:03,400 --> 00:04:06,080
بعد ذلك، علينا نسخ هذا

134
00:04:04,640 --> 00:04:08,520
التكوين، وعلينا أن نذهب إلى

135
00:04:06,080 --> 00:04:09,640
tailwindconfig.js، وعلينا أن نفعل ذلك

136
00:04:08,520 --> 00:04:11,960
ضع ذلك هنا. لذلك، أنا ذاهب إلى

137
00:04:09,640 --> 00:04:13,320
احفظ ملفي، والآن اسمح لي بالتمرير

138
00:04:11,960 --> 00:04:15,400
أسفل. لذلك، علينا أيضًا أن نذهب إلى

139
00:04:13,320 --> 00:04:17,200
ملف Index.css. لذا، سأكتب فقط

140
00:04:15,400 --> 00:04:19,000
Index.css، والآن اسمحوا لي أن أضعه

141
00:04:17,200 --> 00:04:21,079
هذا هنا. حسنًا، دعنا الآن فقط

142
00:04:19,000 --> 00:04:22,880
إزالة ذلك من هنا. وأخيرا، أنا

143
00:04:21,079 --> 00:04:24,760
سأمضي قدمًا وانتقل إلى تطبيقي

144
00:04:22,880 --> 00:04:26,880
app.tsx، وسأقوم باستبداله فقط

145
00:04:24,760 --> 00:04:28,360
أنه مع هذا الرمز. حسنًا، وأخيرًا،

146
00:04:26,880 --> 00:04:30,520
الآن اسمحوا لي أن تشغيل ذلك. انا ذاهب ل

147
00:04:28,360 --> 00:04:32,000
أن تستخدم npm run dev، وسوف يحدث ذلك

148
00:04:30,520 --> 00:04:33,480
قم بتشغيل هذا هنا. إذن، ونحن الآن

149
00:04:32,000 --> 00:04:35,360
الحصول على ما مرحبا العالم هنا،

150
00:04:33,480 --> 00:04:36,600
وهو أمر مذهل. والآن اسمحوا لي أن أفعل ذلك

151
00:04:35,360 --> 00:04:38,440
قليلا من التنظيف. لذلك، سأفعل ذلك فقط

152
00:04:36,600 --> 00:04:40,360
قم بإزالة هذه الأصول من هنا. انا ذاهب

153
00:04:38,440 --> 00:04:42,640
لإزالة هذا app.css أيضًا، وأنا

154
00:04:40,360 --> 00:04:44,600
سأذهب إلى رجلي، ونعم، أنا

155
00:04:42,640 --> 00:04:45,920
أعتقد أن هذا سيكون عليه. إذن أنت

156
00:04:44,600 --> 00:04:47,760
أعرف ماذا، اسمحوا لي فقط التحقق من ذلك.

157
00:04:45,920 --> 00:04:49,400
دعونا فقط تحديث ذلك. ونعم،

158
00:04:47,760 --> 00:04:50,880
سيكون هذا هو الحال بالنسبة للإعداد. و

159
00:04:49,400 --> 00:04:52,080
كما تعلمون، نحن أيضا لا نحتاج إلى

160
00:04:50,880 --> 00:04:53,800
عامة، لذلك سأقوم أيضًا بإزالة

161
00:04:52,080 --> 00:04:55,200
العامة من هنا. لذلك، كان هذا هو الحال

162
00:04:53,800 --> 00:04:57,280
للإعداد. بعد ذلك، علينا أن نخلق

163
00:04:55,200 --> 00:04:58,760
مجلد المكونات لدينا، وسأفعل ذلك فقط

164
00:04:57,280 --> 00:05:01,000
أعطها اسم مثل

165
00:04:58,760 --> 00:05:02,240
عناصر. والآن بالداخل هناك، نحن موجودون

166
00:05:01,000 --> 00:05:03,880
سيتم إنشاء أولا وقبل كل شيء لدينا

167
00:05:02,240 --> 00:05:04,720
الشريط الجانبي.tsx،

168
00:05:03,880 --> 00:05:07,200
وسأقوم فقط بإنشاء ملفي

169
00:05:04,720 --> 00:05:08,560
المكون باستخدام rfce لدينا. الآن، في الداخل

170
00:05:07,200 --> 00:05:10,760
هذا المكون، أولا وقبل كل شيء، علينا أن

171
00:05:08,560 --> 00:05:12,640
إنشاء حالتنا للفئات. لذا،

172
00:05:10,760 --> 00:05:14,320
سأكتب فقط الفئات ثم أقوم بتعيينها

173
00:05:12,640 --> 00:05:15,960
الفئات

174
00:05:14,320 --> 00:05:18,120
تماما مثل ذلك. انها سوف تكون متساوية

175
00:05:15,960 --> 00:05:20,440
إلى حالة الاستخدام، وليس الانتقال،

176
00:05:18,120 --> 00:05:22,640
ولكن حالة الاستخدام. انا ذاهب لتعيين ذلك

177
00:05:20,440 --> 00:05:24,840
إلى مجموعة فارغة لأننا هنا نحن ذاهبون

178
00:05:22,640 --> 00:05:26,960
ليتم تخزين جميع الفئات لدينا. و

179
00:05:24,840 --> 00:05:29,480
الآن، سأقوم فقط بتعليق ذلك باستخدام

180
00:05:26,960 --> 00:05:30,800
سلسلة من المصفوفة تماما مثل ذلك. حسنا، لذلك

181
00:05:29,480 --> 00:05:32,200
هذه ستكون حالتنا الأولى. الآن،

182
00:05:30,800 --> 00:05:34,400
سأقوم أيضًا بإنشاء دولة لـ

183
00:05:32,200 --> 00:05:35,880
الكلمات الرئيسية، ولكن الآن في هذه الحالة، نحن

184
00:05:34,400 --> 00:05:37,640
لن نقوم بتغيير كلماتنا الرئيسية،

185
00:05:35,880 --> 00:05:39,040
لذلك سأكتب فقط مثل الكلمات الرئيسية، و

186
00:05:37,640 --> 00:05:40,520
لن أكتب فقط مثل المجموعة

187
00:05:39,040 --> 00:05:42,240
الكلمات الرئيسية أو شيء من هذا القبيل لأن

188
00:05:40,520 --> 00:05:43,840
نحن لا نغير لدينا

189
00:05:42,240 --> 00:05:45,760
الدولة. لذلك، سأكتب فقط مثل الاستخدام

190
00:05:43,840 --> 00:05:47,280
الدولة، وكل هذه العناصر، سأفعل فقط

191
00:05:45,760 --> 00:05:49,840
ضع ذلك هنا، وأنا سأفعل

192
00:05:47,280 --> 00:05:52,560
قم أيضًا بتعليق ذلك باستخدام السلسلة.

193
00:05:49,840 --> 00:05:53,840
حسنا، سلسلة من المصفوفة. تحت

194
00:05:52,560 --> 00:05:55,800
هناك، نحن ذاهبون لجلب لدينا

195
00:05:53,840 --> 00:05:57,600
البيانات باستخدام تأثير الاستخدام. والآن

196
00:05:55,800 --> 00:05:59,320
داخل هناك، أولا وقبل كل شيء، اسمحوا لي

197
00:05:57,600 --> 00:06:00,520
تقديم مجموعة التبعية الفارغة الخاصة بي. الآن،

198
00:05:59,320 --> 00:06:02,680
في الداخل هناك، سنكون

199
00:06:00,520 --> 00:06:03,800
إنشاء فئات الجلب لدينا. إنه

200
00:06:02,680 --> 00:06:06,120
الذهاب إلى يسمح لنا بإحضار لدينا

201
00:06:03,800 --> 00:06:07,320
الفئات باستخدام هذه الوظيفة. هذا

202
00:06:06,120 --> 00:06:08,720
ستكون وظيفة غير متزامنة

203
00:06:07,320 --> 00:06:10,640
لأننا سوف ندعو بعض

204
00:06:08,720 --> 00:06:12,600
واجهة برمجة التطبيقات. حسنًا، سأكتب فقط محاولة و

205
00:06:10,640 --> 00:06:15,680
كتلة الصيد، وكتلة الصيد،

206
00:06:12,600 --> 00:06:18,960
سأكتب فقط مثل um console.error،

207
00:06:15,680 --> 00:06:20,800
ثم حدث خطأ أثناء جلب المنتجات. حسنًا،

208
00:06:18,960 --> 00:06:22,480
وسوف أقوم بتمرير خطأي هنا.

209
00:06:20,800 --> 00:06:24,120
إذا لم يكن الأمر كذلك، أولاً وقبل كل شيء،

210
00:06:22,480 --> 00:06:26,080
سوف نحصل على الرد

211
00:06:24,120 --> 00:06:29,120
باستخدام الانتظار. سنكون كذلك

212
00:06:26,080 --> 00:06:33,720
جلب بياناتنا من https، وبعد ذلك

213
00:06:29,120 --> 00:06:36,320
موقع json.com والمنتجات الوهمية. والآن

214
00:06:33,720 --> 00:06:38,360
اسمحوا لي أن أحصل على بيانات بيانات JSON من ذلك

215
00:06:36,320 --> 00:06:40,360
استجابة. لذلك، سأكتب البيانات فقط، و

216
00:06:38,360 --> 00:06:41,840
ثم انها سوف تكون مساوية ل

217
00:06:40,360 --> 00:06:43,400
اه كما تعلمون، فإنه سيكون مساويا ل

218
00:06:41,840 --> 00:06:45,200
الانتظار، وبعد ذلك سنكون

219
00:06:43,400 --> 00:06:46,200
باستخدام Response.json.

220
00:06:45,200 --> 00:06:47,760
لكن كما تعلمون، سأقوم أيضًا بالإنشاء

221
00:06:46,200 --> 00:06:49,800
واجهة لذلك. لذا، سأفعل فقط

222
00:06:47,760 --> 00:06:52,720
أعطها اسم مثل اه

223
00:06:49,800 --> 00:06:54,440
اه جلب الرد والآن اسمحوا لي فقط

224
00:06:52,720 --> 00:06:55,720
قم بإنشاء ذلك هنا بالأعلى. و

225
00:06:54,440 --> 00:06:58,360
أولا وقبل كل شيء، سنكون

226
00:06:55,720 --> 00:07:00,240
إنشاء واجهة للمنتج

227
00:06:58,360 --> 00:07:01,640
في حد ذاته، وسأكتب فقط مثل

228
00:07:00,240 --> 00:07:03,640
الفئة، وأنها سوف تكون مساوية ل

229
00:07:01,640 --> 00:07:05,040
السلسلة. والآن في الأسفل هناك، نحن

230
00:07:03,640 --> 00:07:07,160
سوف نقوم بإنشاء واجهة

231
00:07:05,040 --> 00:07:08,720
لذلك جلب الاستجابة، وانها تسير

232
00:07:07,160 --> 00:07:10,280
ليتم تعيينها على المنتجات، وبعد ذلك

233
00:07:08,720 --> 00:07:12,000
واجهة المنتجات التي قمنا بإنشائها

234
00:07:10,280 --> 00:07:14,120
فوق. حسنًا، وسيتم ضبطه

235
00:07:12,000 --> 00:07:15,960
لهذه المجموعة الفارغة. لذلك، هذا هناك.

236
00:07:14,120 --> 00:07:17,200
والآن اسمحوا لي فقط بتسجيل بياناتي في ملف

237
00:07:15,960 --> 00:07:20,040
وحدة التحكم، لذلك سأكتب فقط مثل

238
00:07:17,200 --> 00:07:22,200
console.log من البيانات، واسمحوا لي أيضا

239
00:07:20,040 --> 00:07:23,840
فقط اتصل بهذه الوظيفة هنا.

240
00:07:22,200 --> 00:07:25,720
حسنًا، سأستخدم فقط مثل الجلب

241
00:07:23,840 --> 00:07:26,840
الفئات، والآن اسمحوا لي أن أقوم بالتنفيذ

242
00:07:25,720 --> 00:07:28,720
هذه الوظيفة. انا ذاهب لحفظ بلدي

243
00:07:26,840 --> 00:07:30,600
الملف، ولن يحدث شيء بشكل صحيح

244
00:07:28,720 --> 00:07:32,560
هنا. لماذا هذا؟ لأننا لم نفعل ذلك

245
00:07:30,600 --> 00:07:33,880
تسجيل هذا المكون في أي مكان. لذا،

246
00:07:32,560 --> 00:07:36,440
الآن دعونا نفعل ذلك. انا ذاهب للذهاب

247
00:07:33,880 --> 00:07:38,440
المضي قدما والذهاب إلى التطبيق الخاص بي، وهنا الآن دعونا

248
00:07:36,440 --> 00:07:40,280
لي فقط تسجيل المكون الخاص بي. لذا، أولاً

249
00:07:38,440 --> 00:07:41,800
من بين كل شيء، أنت تعرف ماذا، تحتاج إلى عدد قليل

250
00:07:40,280 --> 00:07:43,920
الأشياء. لذا، سأقوم فقط باستيراد أولاً

251
00:07:41,800 --> 00:07:46,960
كل ما عندي من جهاز التوجيه المتصفح. لذا، سأفعل فقط

252
00:07:43,920 --> 00:07:48,720
اكتب مثل جهاز توجيه المتصفح كجهاز توجيه. أنا

253
00:07:46,960 --> 00:07:50,400
الذهاب إلى إعادة تسمية ذلك إلى جهاز التوجيه، و

254
00:07:48,720 --> 00:07:51,960
دعونا أيضًا نستورد المكون الخاص بنا

255
00:07:50,400 --> 00:07:54,040
وهو أحد مكونات الشريط الجانبي. لذلك، أنا

256
00:07:51,960 --> 00:07:55,560
الذهاب لنسخ ذلك من هنا. والآن

257
00:07:54,040 --> 00:07:57,680
داخل هناك، دعونا فقط إزالة ذلك

258
00:07:55,560 --> 00:07:59,840
من هنا. انا ذاهب لكتابة جهاز التوجيه الخاص بي

259
00:07:57,680 --> 00:08:02,600
أولا وقبل كل شيء مثل الافتتاح و

260
00:07:59,840 --> 00:08:03,800
إغلاق جهاز التوجيه. في الداخل هناك، نحن

261
00:08:02,600 --> 00:08:05,640
سنقوم بإنشاء div الخاص بنا باستخدام ملف

262
00:08:03,800 --> 00:08:07,480
فئة المرن وأيضا منزل

263
00:08:05,640 --> 00:08:09,600
شاشة. وسأضغط على زر الإدخال لليمين

264
00:08:07,480 --> 00:08:11,640
هنا. والآن بالداخل هناك، لدينا فقط

265
00:08:09,600 --> 00:08:13,320
للاتصال بالشريط الجانبي الخاص بنا. انا ذاهب للحفظ

266
00:08:11,640 --> 00:08:15,040
ملفي، والآن اسمحوا لي أن أختبر ذلك،

267
00:08:13,320 --> 00:08:16,280
والآن دعونا نقوم بتحديث ذلك. و

268
00:08:15,040 --> 00:08:17,640
هنا يمكنك أن ترى أننا الآن نحصل على كل شيء

269
00:08:16,280 --> 00:08:19,720
من تلك البيانات هنا. لذلك، لدينا لدينا

270
00:08:17,640 --> 00:08:21,400
المنتجات. هنا يمكنك رؤية كل من ذلك

271
00:08:19,720 --> 00:08:24,120
المنتج سوف يعطينا فئة

272
00:08:21,400 --> 00:08:25,320
الجمال، لكننا نريد فقط الأشياء الفريدة

273
00:08:24,120 --> 00:08:27,600
هنا. لا نريد أن نكون مثل

274
00:08:25,320 --> 00:08:30,160
الجمال مرارا وتكرارا. نريد فقط أن

275
00:08:27,600 --> 00:08:32,479
احصل على الجمال مرة واحدة. حسنا، وبعد ذلك

276
00:08:30,160 --> 00:08:34,039
نريد أن نصبح مثل لا أعرف، ربما

277
00:08:32,479 --> 00:08:35,919
اه شيء آخر مثل هذا. لا أستطيع

278
00:08:34,039 --> 00:08:37,280
حتى نطق هذه الكلمة، ولكن نعم.

279
00:08:35,919 --> 00:08:38,680
نحن نريد فقط الحصول على فريدة من نوعها

280
00:08:37,280 --> 00:08:40,120
فئات. لا نريد أن نحصل على كل شيء

281
00:08:38,680 --> 00:08:41,719
لهم. لذا، كيف في العالم نحن ذاهبون

282
00:08:40,120 --> 00:08:42,800
للحصول على فئاتنا الفريدة؟ لذا،

283
00:08:41,719 --> 00:08:44,360
سوف نستخدم مثل

284
00:08:42,800 --> 00:08:45,920
صفيف.من،

285
00:08:44,360 --> 00:08:48,160
والآن بالداخل هناك، سنكون

286
00:08:45,920 --> 00:08:50,560
تمرير مجموعتنا الجديدة إلى هناك. وهذا

287
00:08:48,160 --> 00:08:52,400
set يأخذ تكرارًا، وسوف يفعل ذلك فقط

288
00:08:50,560 --> 00:08:54,240
يمنحنا القيمة الفريدة من ذلك.

289
00:08:52,400 --> 00:08:55,520
لذلك، سأستخدم فقط مثل البيانات، ثم نحن

290
00:08:54,240 --> 00:08:57,520
سوف يتم التكرار من خلال

291
00:08:55,520 --> 00:08:59,120
تلك المنتجات. والآن علينا أن نستخدم

292
00:08:57,520 --> 00:09:00,840
مثل طريقة الخريطة لذلك. لذلك، أنا ذاهب

293
00:08:59,120 --> 00:09:01,440
لمجرد الكتابة مثل المنتج، وبعد ذلك أنا

294
00:09:00,840 --> 00:09:03,160
سوف يتم استخدام مثل

295
00:09:01,440 --> 00:09:05,240
فئات المنتجات. الآن، سوف يحدث ذلك

296
00:09:03,160 --> 00:09:07,400
يعطينا فقط تلك الفريدة. لذا، أستطيع

297
00:09:05,240 --> 00:09:09,800
تخزينها تماما في المتغير مثل

298
00:09:07,400 --> 00:09:11,160
فئات فريدة من نوعها، وسوف يكون

299
00:09:09,800 --> 00:09:13,080
يساوي هذا الرمز. والآن اسمحوا لي فقط

300
00:09:11,160 --> 00:09:14,800
تسجيل وحدة التحكم فئاتي الفريدة.

301
00:09:13,080 --> 00:09:16,440
لذا، إذا قمت بحفظ الملف الخاص بي، واسمحوا لي الآن

302
00:09:14,800 --> 00:09:18,000
فقط قم بتشغيل ذلك. وهنا يمكنك رؤيتنا

303
00:09:16,440 --> 00:09:20,000
الآن يحصلون على هؤلاء الأربعة فقط

304
00:09:18,000 --> 00:09:22,040
الفئات هنا. حسنا، لدينا

305
00:09:20,000 --> 00:09:23,120
جمالنا، وهكذا دواليك. لذا،

306
00:09:22,040 --> 00:09:26,000
نعم، هذا هو كيف سنكون

307
00:09:23,120 --> 00:09:27,880
الحصول على قيمنا الفريدة من بياناتنا.

308
00:09:26,000 --> 00:09:30,120
لذلك، سأقوم بإزالة ذلك من هنا.

309
00:09:27,880 --> 00:09:31,640
وسأقوم فقط بتعيين ذلك على حسابي

310
00:09:30,120 --> 00:09:33,400
الفئات. لذا، سأكتب فقط مثل المجموعة

311
00:09:31,640 --> 00:09:35,640
الفئات، ونحن سوف نكون فقط

312
00:09:33,400 --> 00:09:36,800
تمرير فئاتنا الفريدة إلى هناك.

313
00:09:35,640 --> 00:09:38,360
حسنًا، هكذا سنكون

314
00:09:36,800 --> 00:09:39,800
جلب فئتنا. والآن حان الوقت

315
00:09:38,360 --> 00:09:41,680
لتقديم هذا. سأقوم فقط بإزالة ذلك

316
00:09:39,800 --> 00:09:43,160
من هنا. لا أعرف ماذا يحدث

317
00:09:41,680 --> 00:09:45,000
مع JSX هذا. ربما سأحصل عليه

318
00:09:43,160 --> 00:09:46,600
لإعادة تشغيل رمز VS الخاص بي. حسنا، الآن هو

319
00:09:45,000 --> 00:09:48,000
أفضل. لذا، أولاً وقبل كل شيء، أنت تعرف ماذا،

320
00:09:46,600 --> 00:09:49,520
سأضطر إلى تقديم القليل فقط

321
00:09:48,000 --> 00:09:52,000
الفصول إليها. لذلك، سأكتب مثل ذلك

322
00:09:49,520 --> 00:09:53,720
عرض 64، والحشو في كل مكان

323
00:09:52,000 --> 00:09:55,680
سيتم ضبطه على خمسة، وسيتم ضبط الارتفاع

324
00:09:53,720 --> 00:09:57,400
للشاشة. هذا يجب أن يكون الأول لدينا

325
00:09:55,680 --> 00:09:59,360
شعبة. الآن، في الداخل هناك، نحن ذاهبون إلى

326
00:09:57,400 --> 00:10:01,800
أن نقوم بإنشاء H1 الخاص بنا مع فئة من النص

327
00:09:59,360 --> 00:10:03,720
2 XL، الخط غامق تمامًا، هامش لـ

328
00:10:01,800 --> 00:10:05,560
سيتم تعيين الجزء السفلي إلى 10، والهامش

329
00:10:03,720 --> 00:10:07,040
سيتم تعيين الجزء العلوي على أربعة. و

330
00:10:05,560 --> 00:10:08,400
سأعطيه اسمًا مثل React

331
00:10:07,040 --> 00:10:09,920
متجر. يمكنك أن تعطيه أي اسم لك

332
00:10:08,400 --> 00:10:11,240
مثل. انا ذاهب لحفظ الملف الخاص بي. و

333
00:10:09,920 --> 00:10:13,440
هنا يمكنك أن ترى أننا نحصل الآن على ما لدينا

334
00:10:11,240 --> 00:10:14,920
قم بتخزين React هنا، وهو

335
00:10:13,440 --> 00:10:16,960
تبدو مذهلة. انا ذاهب للاختباء أيضا

336
00:10:14,920 --> 00:10:18,440
هذا الشريط الجانبي من هنا. الآن انها تبحث

337
00:10:16,960 --> 00:10:20,400
أفضل. تحت هناك، ونحن في طريقنا إلى

338
00:10:18,440 --> 00:10:21,640
أن نقوم بإنشاء قسمنا. والآن بالداخل

339
00:10:20,400 --> 00:10:24,320
هذا القسم، ونحن في طريقنا إلى أن نكون أول من

340
00:10:21,640 --> 00:10:26,240
كل ذلك يخلق مدخلاتنا للنص الخاص بنا. و

341
00:10:24,320 --> 00:10:28,840
سأكتب فقط مثل اسم الفصل

342
00:10:26,240 --> 00:10:30,880
من الحدود 2 بكسل وأيضا تماما

343
00:10:28,840 --> 00:10:32,840
مدور. الحشو للمحور السيني سيكون

344
00:10:30,880 --> 00:10:34,160
تعيين لاثنين. على الشاشة الصغيرة الحجم،

345
00:10:32,840 --> 00:10:36,440
سنقوم بتوفير الهامش ل

346
00:10:34,160 --> 00:10:39,960
الجزء السفلي من الصفر. حسنًا، وسأفعل أيضًا

347
00:10:36,440 --> 00:10:42,800
توفير العنصر النائب للبحث. تعال

348
00:10:39,960 --> 00:10:44,080
على، ابحث عن المنتج. تمام؟ وفي هذا

349
00:10:42,800 --> 00:10:45,400
الحالة، وأنا لن تكون تقديم أي

350
00:10:44,080 --> 00:10:47,480
القيم لهذا. انا ذاهب لحفظ بلدي

351
00:10:45,400 --> 00:10:49,040
ملف. حسنًا، سيكون هذا هو الحال

352
00:10:47,480 --> 00:10:50,640
الأول. الآن، سأفعل ذلك أيضًا

353
00:10:49,040 --> 00:10:53,600
إنشاء div بفئة flex و

354
00:10:50,640 --> 00:10:55,480
أيضا تبرير هيا، تبرير

355
00:10:53,600 --> 00:10:57,360
مركز. ونحن في طريقنا لتوفير

356
00:10:55,480 --> 00:10:58,760
عناصر المركز كذلك. والآن

357
00:10:57,360 --> 00:11:01,280
بالداخل هناك، سوف نقوم بالإنشاء

358
00:10:58,760 --> 00:11:03,120
مدخلاتنا مع نوع النص.

359
00:11:01,280 --> 00:11:05,360
وسأقدم أيضًا اسم فئة

360
00:11:03,120 --> 00:11:07,400
الحدود الثانية. الهامش للحق سيكون

361
00:11:05,360 --> 00:11:09,360
تعيين لاثنين. الحشو للمحور السيني سوف

362
00:11:07,400 --> 00:11:11,440
يتم ضبطها على خمسة. الحشو للمحور ص

363
00:11:09,360 --> 00:11:13,560
سيتم تعيينها على ثلاثة. وأيضا الهامش

364
00:11:11,440 --> 00:11:15,200
سيتم ضبط الجزء السفلي على ثلاثة. و

365
00:11:13,560 --> 00:11:16,240
سيتم ضبط العرض على كامل تمامًا. و

366
00:11:15,200 --> 00:11:18,240
كما تعلمون، سأقدم أيضًا

367
00:11:16,240 --> 00:11:19,480
نائبا عن الرجال. انا ذاهب ل

368
00:11:18,240 --> 00:11:21,280
قم بتكرار هذا السطر من التعليمات البرمجية وأنا

369
00:11:19,480 --> 00:11:22,880
الذهاب أيضا لتوفير الحد الأقصى هنا.

370
00:11:21,280 --> 00:11:24,400
حسنًا، دعوني الآن أحفظ ملفي.

371
00:11:22,880 --> 00:11:26,240
وهذه هي الطريقة التي يبدو بها الأمر صحيحًا

372
00:11:24,400 --> 00:11:27,880
هنا. يبدو الأمر فظيعًا، لكن نعم، نحن كذلك

373
00:11:26,240 --> 00:11:29,320
سوف يغير ذلك. التالي علينا أن نأخذ

374
00:11:27,880 --> 00:11:31,360
رعاية فئاتنا. لذلك، أنا ذاهب إلى

375
00:11:29,320 --> 00:11:33,440
تأتي تحت هذا القسم. الآن، سأفعل ذلك فقط

376
00:11:31,360 --> 00:11:35,120
اكتب مثل الفئات

377
00:11:33,440 --> 00:11:36,640
قسم. بادئ ذي بدء، علينا أن نخلق

378
00:11:35,120 --> 00:11:38,880
div الخاص بنا مع فئة الهامش لـ

379
00:11:36,640 --> 00:11:42,480
أسفل الخمسة. وعلينا أن نخلق

380
00:11:38,880 --> 00:11:44,200
لدينا H2 مع نص كبير جدا.

381
00:11:42,480 --> 00:11:46,240
كبير جدًا وسيكون الخط كذلك

382
00:11:44,200 --> 00:11:48,400
شبه جريئة. الهامش للأسفل سيكون

383
00:11:46,240 --> 00:11:50,680
تعيين على ثلاثة. والآن دعونا نكتب فقط

384
00:11:48,400 --> 00:11:52,480
فئاتنا داخل هناك. وهذا هو

385
00:11:50,680 --> 00:11:54,000
كيف يبدو هنا. هذا هو الحال

386
00:11:52,480 --> 00:11:55,640
مذهل. الآن تحت هناك، نحن

387
00:11:54,000 --> 00:11:57,920
سيتم التكرار لجميع

388
00:11:55,640 --> 00:11:58,880
تلك الفئات، التي قدمناها

389
00:11:57,920 --> 00:12:00,880
هنا. لذلك، سنكون

390
00:11:58,880 --> 00:12:02,320
التكرار من خلال كل من هناك. و

391
00:12:00,880 --> 00:12:04,000
ثم سنقوم بتقديم مثل

392
00:12:02,320 --> 00:12:06,080
فقط تلك الفريدة. لذا، سأفعل فقط

393
00:12:04,000 --> 00:12:07,560
اكتب مثل الفئات. والآن دعونا

394
00:12:06,080 --> 00:12:10,240
مجرد استخدام خريطتنا. وهنا سأفعل

395
00:12:07,560 --> 00:12:12,600
تقديم فئتي وكذلك الفهرس.

396
00:12:10,240 --> 00:12:15,160
والآن في الداخل هناك، أولا وقبل كل شيء، دعونا

397
00:12:12,600 --> 00:12:16,720
لي تقديم التسمية الخاصة بي. ولكل تسمية،

398
00:12:15,160 --> 00:12:18,920
لن أقوم بتقديم أي HTML

399
00:12:16,720 --> 00:12:20,720
ل. سأقدم مفتاحي

400
00:12:18,920 --> 00:12:22,080
الفهرس هنا. واسمحوا لي فقط

401
00:12:20,720 --> 00:12:23,800
توفير اسم فئة الكتلة. و

402
00:12:22,080 --> 00:12:26,200
سيتم تعيين الهامش للأسفل إلى

403
00:12:23,800 --> 00:12:27,680
اثنان فقط. حسنًا، فلنذهب الآن

404
00:12:26,200 --> 00:12:29,480
داخل هناك. وسأكون كذلك

405
00:12:27,680 --> 00:12:30,880
إنشاء المدخلات الخاصة بي أولاً. ومن أجل

406
00:12:29,480 --> 00:12:32,440
هذا الإدخال، ونحن لن تستخدم

407
00:12:30,880 --> 00:12:34,480
النص، ولكن بدلا من ذلك سنكون

408
00:12:32,440 --> 00:12:36,400
باستخدام الراديو. سأقدم اسمًا فقط

409
00:12:34,480 --> 00:12:38,680
من مثل الفئة.

410
00:12:36,400 --> 00:12:41,320
وسأقدم أيضًا القيمة

411
00:12:38,680 --> 00:12:42,960
من الفئة كذلك. وأنت تعلم، أنا

412
00:12:41,320 --> 00:12:44,960
لن يتم تقديم أي تغيير

413
00:12:42,960 --> 00:12:46,480
أو أي شيء من هذا القبيل. لذلك أعتقد

414
00:12:44,960 --> 00:12:47,880
هذا سيكون على ما يرام. ولكن انا ذاهب

415
00:12:46,480 --> 00:12:49,960
لتوفير القليل من التصميم لها أيضًا.

416
00:12:47,880 --> 00:12:52,440
لذلك، مثل اه الهامش للحق سيكون

417
00:12:49,960 --> 00:12:54,960
تعيين لاثنين. سيتم الآن ضبط العرض على 16

418
00:12:52,440 --> 00:12:57,520
بكسل. وسيتم ضبط الارتفاع أيضًا على 16

419
00:12:54,960 --> 00:12:59,600
بكسل. لذا، الآن اسمحوا لي أن أحفظ ملفي.

420
00:12:57,520 --> 00:13:00,960
وهذه هي الطريقة التي تبدو بها فئاتي

421
00:12:59,600 --> 00:13:02,720
هنا. ولكن الآن علينا أن نقدم

422
00:13:00,960 --> 00:13:04,960
فئاتنا. وللقيام بذلك، نحن

423
00:13:02,720 --> 00:13:07,520
سأستخدم فئتي.

424
00:13:04,960 --> 00:13:09,120
اه نعم فئة من هذا القبيل. و

425
00:13:07,520 --> 00:13:10,440
سأستخدم الأحرف الكبيرة. إذا

426
00:13:09,120 --> 00:13:12,480
أنت لا تحب الأحرف الكبيرة، يمكنك ذلك

427
00:13:10,440 --> 00:13:14,120
تغيير ذلك تماما. لكن نعم في بلدي

428
00:13:12,480 --> 00:13:15,839
الحالة، وهذا يبدو أفضل. لذا، نعم،

429
00:13:14,120 --> 00:13:17,600
نحن جيدون تمامًا هنا.

430
00:13:15,839 --> 00:13:19,560
لذلك، هذا يبدو مذهلا. الآن، أنت

431
00:13:17,600 --> 00:13:22,200
تعرف ماذا؟ انا ذاهب لرعاية أيضا

432
00:13:19,560 --> 00:13:23,480
من الكلمات الرئيسية أيضًا. لذلك، وأنا فقط

433
00:13:22,200 --> 00:13:24,800
أدركت أنني سوف تضطر إلى التفاف

434
00:13:23,480 --> 00:13:27,480
لهم في نوع من القسم. لذا، سأفعل

435
00:13:24,800 --> 00:13:28,800
مجرد قطع ذلك من هنا. والآن اسمحوا لي

436
00:13:27,480 --> 00:13:30,360
فقط ضع ذلك هنا بالأسفل

437
00:13:28,800 --> 00:13:31,760
هناك. والآن دعونا نعتني به

438
00:13:30,360 --> 00:13:34,800
الكلمات الرئيسية. سأكتب فقط مثل

439
00:13:31,760 --> 00:13:35,960
الكلمات الرئيسية والقسم. حسنًا، فلنفعل ذلك الآن

440
00:13:34,800 --> 00:13:37,160
فقط اعتني بهذا. إذن، أولًا

441
00:13:35,960 --> 00:13:39,600
كل شيء، ونحن في طريقنا إلى إنشاء الهامش

442
00:13:37,160 --> 00:13:42,000
للجزء السفلي من الخمسة. H2 مع فئة

443
00:13:39,600 --> 00:13:43,920
النص كبير جدًا وكذلك الخط

444
00:13:42,000 --> 00:13:45,720
سيتم ضبطه على شبه غامق. هامش ل

445
00:13:43,920 --> 00:13:47,240
سيتم تعيين الجزء السفلي إلى ثلاثة. ودعونا

446
00:13:45,720 --> 00:13:48,880
فقط اكتب كلماتنا الرئيسية هنا. لذا،

447
00:13:47,240 --> 00:13:50,240
انا ذاهب لحفظ الملف الخاص بي. وهذا هو

448
00:13:48,880 --> 00:13:52,040
كيف يبدو هنا. يمكنك ذلك

449
00:13:50,240 --> 00:13:54,080
توفر أيضًا نوعًا من الهامش

450
00:13:52,040 --> 00:13:55,360
لأعلى أربعة أو شيء من هذا. أنا

451
00:13:54,080 --> 00:13:56,560
أعتقد أن هذا يبدو جيدًا.

452
00:13:55,360 --> 00:13:58,520
في الأسفل هناك، دعونا نبدع

453
00:13:56,560 --> 00:13:59,800
شعبة أخرى. والآن داخل هذا القسم،

454
00:13:58,520 --> 00:14:01,680
سنقوم بالتكرار من خلال

455
00:13:59,800 --> 00:14:03,280
جميع الكلمات الرئيسية. ودعونا نستخدم فقط

456
00:14:01,680 --> 00:14:06,160
خريطة هنا. وأنا ذاهب لتمرير

457
00:14:03,280 --> 00:14:08,440
كلمتي الرئيسية وكذلك الفهرس أيضًا.

458
00:14:06,160 --> 00:14:10,240
حسنًا، الآن سنذهب إلى الداخل

459
00:14:08,440 --> 00:14:12,480
ليتم إنشاء زر. يمكنك إنشاء

460
00:14:10,240 --> 00:14:14,720
مثل أي نوع من واجهة المستخدم إذا أردت ذلك.

461
00:14:12,480 --> 00:14:16,560
وسأمرر مثل مفتاحي

462
00:14:14,720 --> 00:14:18,280
مؤشر. واسمحوا لي أيضًا أن أصمم هذا.

463
00:14:16,560 --> 00:14:19,720
سأكتب فقط كتلة. هامش ل

464
00:14:18,280 --> 00:14:21,720
سيتم تعيين الجزء السفلي إلى اثنين. الحشو ل

465
00:14:19,720 --> 00:14:23,400
سيتم تعيين المحور السيني على أربعة. الحشو

466
00:14:21,720 --> 00:14:25,400
سيتم ضبط المحور y على اثنين. و

467
00:14:23,400 --> 00:14:27,440
سيتم ضبط العرض على كامل تمامًا. نص

468
00:14:25,400 --> 00:14:29,680
سيتم تعيينه على اليسار. ودعونا فقط

469
00:14:27,440 --> 00:14:31,280
توفير الحدود وتقريبها أيضا. مرة واحدة

470
00:14:29,680 --> 00:14:33,839
لدينا أكثر من ذلك، نريد التغيير

471
00:14:31,280 --> 00:14:35,480
لون الخلفية من الرمادي إلى 200.

472
00:14:33,839 --> 00:14:36,800
حسنًا، هذا سيكون كل شيء.

473
00:14:35,480 --> 00:14:38,560
والآن داخل هذا الزر، نريد أن نفعل ذلك

474
00:14:36,800 --> 00:14:40,079
استخدم مثل الكلمة الرئيسية.

475
00:14:38,560 --> 00:14:41,360
إلى الأحرف الكبيرة. إذا كنت تريد التغيير

476
00:14:40,079 --> 00:14:42,640
ذلك، أنت أكثر من موضع ترحيب ل

477
00:14:41,360 --> 00:14:44,120
تغيير ذلك.

478
00:14:42,640 --> 00:14:45,920
حسنًا، هنا يمكنك أن ترى أن لدي

479
00:14:44,120 --> 00:14:47,400
الأزرار هنا، أزرار الكلمات الرئيسية

480
00:14:45,920 --> 00:14:49,440
هنا، والتي تبحث أيضا

481
00:14:47,400 --> 00:14:51,760
مدهش. والآن أخيرا، علينا أن نفعل ذلك

482
00:14:49,440 --> 00:14:53,839
اعتني بهذا الزر الواحد. حسنا، لذلك

483
00:14:51,760 --> 00:14:55,959
سأنزل هنا فحسب. والآن اسمحوا لي

484
00:14:53,839 --> 00:14:57,240
فقط قم بإنشاء زر هنا. و

485
00:14:55,959 --> 00:14:59,000
دعونا مجرد أسلوب ذلك قليلا. لذا، سأفعل

486
00:14:57,240 --> 00:15:01,200
فقط قم بتوفير عرض كامل تمامًا.

487
00:14:59,000 --> 00:15:03,560
ميغابايت، سيتم تعيين الهامش للأسفل إلى

488
00:15:01,200 --> 00:15:04,680
4 العينية. والحشو للمحور ص سوف

489
00:15:03,560 --> 00:15:06,560
يتم ضبطه على اللون الأسود تمامًا. سوف الخلفية

490
00:15:04,680 --> 00:15:08,920
يتم ضبطها على فارغة تمامًا. وسوف النص

491
00:15:06,560 --> 00:15:10,800
يتم ضبطه على اللون الأبيض تمامًا. وتقريب.

492
00:15:08,920 --> 00:15:12,480
سيتم تعيين هامش الجزء العلوي إلى خمسة.

493
00:15:10,800 --> 00:15:15,959
وسأقدم فقط تسمية الإعجاب

494
00:15:12,480 --> 00:15:17,560
إعادة تعيين المرشحات. سأحفظ ملفي فقط

495
00:15:15,959 --> 00:15:19,480
وهنا يمكنك أن ترى هذه هي الطريقة التي أتبعها

496
00:15:17,560 --> 00:15:22,120
سوف تبدو إعادة تعيين مرشح. إذن نحن كذلك

497
00:15:19,480 --> 00:15:23,280
لقد انتهيت الآن تمامًا من عناصر واجهة المستخدم هذه. لكن

498
00:15:22,120 --> 00:15:24,480
الآن الشيء التالي الذي يتعين علينا القيام به هو

499
00:15:23,280 --> 00:15:26,360
أنه يتعين علينا رعاية

500
00:15:24,480 --> 00:15:28,280
الوظيفة. نحن ذاهبون إلى أن نجعل

501
00:15:26,360 --> 00:15:30,000
نوع من التغييرات داخل هذا

502
00:15:28,280 --> 00:15:31,760
الشريط الجانبي.tsx

503
00:15:30,000 --> 00:15:34,800
ملف. ونريد أن نجعل ذلك يتغير

504
00:15:31,760 --> 00:15:36,000
البيانات الموجودة داخل ملف content.tsx الرئيسي،

505
00:15:34,800 --> 00:15:37,720
التي سنقوم بإنشائها للغاية

506
00:15:36,000 --> 00:15:39,600
قريباً. لذا، كيف في العالم نحن ذاهبون

507
00:15:37,720 --> 00:15:42,680
أن تفعل ذلك؟ حسنا، الطريقة الأولى هي

508
00:15:39,600 --> 00:15:44,520
لاستخدام مجموعة أدوات Redux أو Redux،

509
00:15:42,680 --> 00:15:46,560
كل ما تريد أن تسمي ذلك. و

510
00:15:44,520 --> 00:15:48,240
الطريقة التالية هي استخدام السياق. إذن هذا

511
00:15:46,560 --> 00:15:49,320
المشروع ليس هذا المشروع الكبير. لذا،

512
00:15:48,240 --> 00:15:50,800
سنستخدم فقط

513
00:15:49,320 --> 00:15:52,040
السياق. لذا، سأمضي قدمًا وأنشئ ملفي

514
00:15:50,800 --> 00:15:55,360
السياق هنا. لذا، سأعطي فقط

515
00:15:52,040 --> 00:15:58,000
إنه اسم مثل مرشح context.tsx.

516
00:15:55,360 --> 00:15:59,880
ليس تسكس،

517
00:15:58,000 --> 00:16:00,720
تماما مثل ذلك. وداخل هذا السياق

518
00:15:59,880 --> 00:16:02,880
أولا وقبل كل شيء، سنكون

519
00:16:00,720 --> 00:16:05,120
استيراد الكثير من الأشياء مثل اه نحن

520
00:16:02,880 --> 00:16:07,800
يجب أن نستورد سياق الإنشاء الخاص بنا. نحن

521
00:16:05,120 --> 00:16:10,320
يجب أيضًا استيراد سياق الاستخدام الخاص بنا. و

522
00:16:07,800 --> 00:16:12,720
علينا أيضًا استيراد حالة الاستخدام الخاصة بنا.

523
00:16:10,320 --> 00:16:14,640
وعلينا أيضًا استيراد React الخاص بنا

524
00:16:12,720 --> 00:16:16,800
عقدة. لذلك، سنقوم بالاستيراد

525
00:16:14,640 --> 00:16:18,440
كل ذلك من React.js. التالي، نحن

526
00:16:16,800 --> 00:16:20,160
علينا إنشاء واجهتنا الكبيرة. لذا،

527
00:16:18,440 --> 00:16:21,520
سأكتب فقط مثل الواجهة. وأنا

528
00:16:20,160 --> 00:16:23,680
سأعطيه اسم مرشح مثل

529
00:16:21,520 --> 00:16:25,880
نوع السياق. وأنا ذاهب لجعل فقط

530
00:16:23,680 --> 00:16:27,160
أنه بأحرف كبيرة. والآن بالداخل هناك،

531
00:16:25,880 --> 00:16:29,360
أولا وقبل كل شيء، علينا أن نكتب لدينا

532
00:16:27,160 --> 00:16:30,600
استعلام البحث. وأنت تعلم، اسمحوا لي فقط

533
00:16:29,360 --> 00:16:32,200
تكبير قليلا هنا. وهي تسير

534
00:16:30,600 --> 00:16:34,040
ليتم ضبطها على السلسلة. نحن نعرف بالفعل

535
00:16:32,200 --> 00:16:35,920
ذلك. علينا أيضًا أن نكتب مجموعتنا

536
00:16:34,040 --> 00:16:37,720
استعلام البحث. وسيتم تعيينه

537
00:16:35,920 --> 00:16:39,680
إلى وظيفة، والتي سوف تتخذ نوعا ما

538
00:16:37,720 --> 00:16:41,400
من معلمة الاستعلام. وهذا

539
00:16:39,680 --> 00:16:43,560
ستكون سلسلة. والآن علينا أن نفعل ذلك

540
00:16:41,400 --> 00:16:45,920
إعطاء الفراغ لدينا هنا. ونحن أيضا

541
00:16:43,560 --> 00:16:47,160
يجب أن نقدم الفئة المختارة لدينا.

542
00:16:45,920 --> 00:16:50,600
وسيتم تعيينه على سلسلة. نحن

543
00:16:47,160 --> 00:16:53,839
تعرف ذلك بالفعل. ومن ثم يختار تعيين

544
00:16:50,600 --> 00:16:55,280
الفئة المحددة ستكون الآن مساوية ل

545
00:16:53,839 --> 00:16:57,360
هذه الوظيفة، والتي سوف تتخذ أيضا

546
00:16:55,280 --> 00:16:59,160
الفئة كمعلمة. وهذا

547
00:16:57,360 --> 00:17:00,680
ستكون سلسلة. حسنًا، نحن أيضًا

548
00:16:59,160 --> 00:17:02,800
يجب أن نضع ذلك على الفراغ. اسمحوا لي

549
00:17:00,680 --> 00:17:04,199
تقديم الحد الأدنى للسعر. وهذا

550
00:17:02,800 --> 00:17:05,959
الحد الأدنى للسعر، ونحن نعلم بالفعل أنه كذلك

551
00:17:04,199 --> 00:17:07,199
سيكون إما رقمًا أو هو

552
00:17:05,959 --> 00:17:09,160
سيكون غير محدد تماما. نحن

553
00:17:07,199 --> 00:17:11,240
لا تقبل أي شيء آخر هناك.

554
00:17:09,160 --> 00:17:12,959
حسنًا، إما رقم أو غير محدد.

555
00:17:11,240 --> 00:17:14,839
ثم يتعين علينا توفير الحد الأدنى المحدد لدينا

556
00:17:12,959 --> 00:17:16,959
سعر. وسيتم ضبطه على هذا

557
00:17:14,839 --> 00:17:20,320
السعر. وهذا سيكون تماما

558
00:17:16,959 --> 00:17:21,800
رقم. حسنًا، أو ربما غير محدد. حسنًا،

559
00:17:20,320 --> 00:17:22,839
لذلك دعونا مجرد توفير حقنا الفراغ

560
00:17:21,800 --> 00:17:24,760
هنا لأن هذا سيكون

561
00:17:22,839 --> 00:17:27,199
وظيفة. ودعونا نقدم فقط ل

562
00:17:24,760 --> 00:17:30,640
الحد الأقصى للسعر. وسيكون الحد الأقصى للسعر إما

563
00:17:27,199 --> 00:17:33,040
رقم أو غير محدد. وأيضا المجموعة

564
00:17:30,640 --> 00:17:35,040
سيتم الآن تعيين الحد الأقصى للسعر على هذا

565
00:17:33,040 --> 00:17:36,920
وظيفة، والتي سوف تكون الثمن. والآن

566
00:17:35,040 --> 00:17:38,800
دعونا فقط نقدم إما السعر أو

567
00:17:36,920 --> 00:17:40,800
غير محدد. والآن علينا أيضاً أن نفعل ذلك

568
00:17:38,800 --> 00:17:43,040
إرجاع الفراغ لأن هذا سيكون

569
00:17:40,800 --> 00:17:44,960
وظيفة أو طريقة بدلا من ذلك. والآن

570
00:17:43,040 --> 00:17:46,800
فلنقدم فقط كلماتنا الرئيسية أو

571
00:17:44,960 --> 00:17:48,280
الكلمة المفتاحية مفردة. وسوف يكون كذلك

572
00:17:46,800 --> 00:17:50,280
تعيين إلى سلسلة. وبعد ذلك علينا أن نفعل ذلك

573
00:17:48,280 --> 00:17:51,640
تقديم الكلمة الرئيسية لدينا. وهذا

574
00:17:50,280 --> 00:17:54,040
ستكون وظيفة، والتي سوف تتخذ

575
00:17:51,640 --> 00:17:55,800
الكلمة الأساسية كمعلمة. وهذا

576
00:17:54,040 --> 00:17:57,679
ستكون سلسلة. والآن علينا أن نفعل ذلك

577
00:17:55,800 --> 00:17:59,240
فقط قم بإرجاع الفراغ داخل هذا. لذا،

578
00:17:57,679 --> 00:18:00,640
دعونا نعود. وهذه هي الطريقة

579
00:17:59,240 --> 00:18:02,600
سنقوم بإنشاء الفلتر الخاص بنا

580
00:18:00,640 --> 00:18:06,760
أنواع السياق. هذا سوف يكون فقط

581
00:18:02,600 --> 00:18:08,200
الأنواع. حسنا، لذلك

582
00:18:06,760 --> 00:18:10,040
دعونا فقط ننشئ ملفنا

583
00:18:08,200 --> 00:18:12,560
سياق التصفية هنا. لذا، سأفعل فقط

584
00:18:10,040 --> 00:18:14,160
الكتابة مثل إنشاء السياق. والآن هنا

585
00:18:12,560 --> 00:18:16,160
في الداخل هناك، سنكون

586
00:18:14,160 --> 00:18:17,440
توفير فقط غير المحدد هنا.

587
00:18:16,160 --> 00:18:18,840
ولكن بالنسبة لهذا النوع، سنكون كذلك

588
00:18:17,440 --> 00:18:21,360
توفير في المقام الأول عامل التصفية

589
00:18:18,840 --> 00:18:24,600
نوع السياق أو غير محدد. والآن دعونا

590
00:18:21,360 --> 00:18:25,960
لي فقط تصفية ثم السياق. والآن

591
00:18:24,600 --> 00:18:27,919
علينا تخزين ذلك في هذا المتغير

592
00:18:25,960 --> 00:18:29,520
هنا. حسنًا، كل شيء على ما يرام

593
00:18:27,919 --> 00:18:31,400
تبدو جيدة. ولكن علينا أن نستخدم فقط

594
00:18:29,520 --> 00:18:32,440
هذه المتغيرات غير المستخدمة. الشيء التالي

595
00:18:31,400 --> 00:18:34,360
ما يتعين علينا القيام به هو ما يتعين علينا القيام به

596
00:18:32,440 --> 00:18:37,760
إنشاء مزود لدينا. لذا، سأكتب فقط

597
00:18:34,360 --> 00:18:38,960
مثل موفر عامل تصفية const التصدير. و

598
00:18:37,760 --> 00:18:40,440
يمكنك أن تعطيه مثل أي اسم لك

599
00:18:38,960 --> 00:18:42,280
مثل. وسأستخدم مثل

600
00:18:40,440 --> 00:18:43,760
رد فعل. المكون الوظيفي هنا

601
00:18:42,280 --> 00:18:45,760
في هذه الحالة. وسنكون كذلك

602
00:18:43,760 --> 00:18:47,640
توفير أه أطفالنا. هذا هو الحال

603
00:18:45,760 --> 00:18:50,919
لماذا أنا باستخدام ذلك. لذلك، نحن في طريقنا إلى

604
00:18:47,640 --> 00:18:53,200
تعيين الأطفال هيا، الأطفال ل

605
00:18:50,919 --> 00:18:55,400
عقدة التفاعل. والآن علينا أن نفعل ذلك فقط

606
00:18:53,200 --> 00:18:58,000
تعيين أن يساوي هذا الحق للأطفال

607
00:18:55,400 --> 00:18:59,560
هنا. تمام؟ والآن أخيرا، علينا أن نفعل ذلك

608
00:18:58,000 --> 00:19:01,640
اذهب إلى الجسم. الآن، اسمحوا لي أن أنقذ بلدي

609
00:18:59,560 --> 00:19:03,040
ملف. سوف يعطينا هذا الخطأ، ولكن أنا

610
00:19:01,640 --> 00:19:06,200
أريدك أن تتجاهل ذلك لبعض الوقت

611
00:19:03,040 --> 00:19:08,000
ثواني لأنه سيصلح نفسه.

612
00:19:06,200 --> 00:19:09,840
حسنًا، هذا مجرد خطأ في TypeScript.

613
00:19:08,000 --> 00:19:11,200
لذا، علينا أولاً أن نحدد أ

614
00:19:09,840 --> 00:19:13,800
الكثير من الدولة. لذلك، سنكون

615
00:19:11,200 --> 00:19:15,560
تحديد مثل حالة استعلام البحث و

616
00:19:13,800 --> 00:19:17,440
تعيين أيضا أم

617
00:19:15,560 --> 00:19:18,640
استعلام البحث.

618
00:19:17,440 --> 00:19:20,560
سيكون مساويا للاستخدام

619
00:19:18,640 --> 00:19:22,320
الدولة. والآن بالداخل هناك، نحن ذاهبون

620
00:19:20,560 --> 00:19:24,520
ليتم ضبط ذلك على سلسلة فارغة. لذا،

621
00:19:22,320 --> 00:19:26,520
سأقوم فقط بتعيين ذلك على سلسلة فقط.

622
00:19:24,520 --> 00:19:27,679
حسنًا، نعم، هذا سيكون

623
00:19:26,520 --> 00:19:29,760
أول واحد. الآن، الشيء التالي الذي نحن

624
00:19:27,679 --> 00:19:33,240
ما يتعين علينا القيام به هو أن علينا إنشاء لدينا

625
00:19:29,760 --> 00:19:36,080
اه الفئة المختارة ثم تعيين

626
00:19:33,240 --> 00:19:38,280
الفئة المختارة كذلك. انها سوف

627
00:19:36,080 --> 00:19:39,560
يكون مساويا لحالة الاستخدام. والآن

628
00:19:38,280 --> 00:19:41,159
في الداخل هناك، سنكون كذلك

629
00:19:39,560 --> 00:19:43,440
ضبط ذلك على السلسلة الفارغة فقط

630
00:19:41,159 --> 00:19:47,480
مثل هذا. وأيضا علينا أن نضع

631
00:19:43,440 --> 00:19:49,000
الحد الأدنى للسعر. وأيضا تحديد الحد الأدنى للسعر.

632
00:19:47,480 --> 00:19:51,360
سيكون مساويا للاستخدام

633
00:19:49,000 --> 00:19:52,960
الدولة. وعلينا أن نضبط ذلك

634
00:19:51,360 --> 00:19:54,080
غير محدد في البداية لأننا لا نفعل ذلك

635
00:19:52,960 --> 00:19:55,840
تريد تعيين القيمة الأولية ل

636
00:19:54,080 --> 00:19:57,680
أي شيء حسنا؟ وسوف ترى السبب

637
00:19:55,840 --> 00:19:59,720
أنا أقدم غير محدد هنا

638
00:19:57,680 --> 00:20:01,800
حسنا في بضع ثوان. الآن اسمحوا لي فقط

639
00:19:59,720 --> 00:20:03,080
قم بتعليق ذلك مع غير محدد وأنت

640
00:20:01,800 --> 00:20:04,480
أعلم أنني سأذهب فقط وأنت تعلم أنني لست كذلك

641
00:20:03,080 --> 00:20:06,320
الذهاب لتكرار ذلك.

642
00:20:04,480 --> 00:20:08,920
لذلك سأكتب فقط مثل الحد الأقصى للسعر

643
00:20:06,320 --> 00:20:11,040
وبعد ذلك سيتم تحديد السعر الأقصى

644
00:20:08,920 --> 00:20:14,120
يكون مساويا للاستخدام

645
00:20:11,040 --> 00:20:16,120
حالة استخدام الدولة وسنكون

646
00:20:14,120 --> 00:20:17,680
توفير غير محدد كالأولي

647
00:20:16,120 --> 00:20:20,880
قيمة. حسنا، لذلك دعونا نقدم فقط

648
00:20:17,680 --> 00:20:22,920
إما السلسلة أو غير محددة. ولماذا

649
00:20:20,880 --> 00:20:24,600
هل أقوم بتوفير سلسلة؟

650
00:20:22,920 --> 00:20:26,440
هذه هي الأسعار التي علينا أن نحددها

651
00:20:24,600 --> 00:20:28,600
هناك لعدد. تحت هناك نحن

652
00:20:26,440 --> 00:20:30,600
يجب أن ننشئ كلمتنا الرئيسية ودعنا

653
00:20:28,600 --> 00:20:32,120
فقط اكتب كلمتنا الرئيسية ثم المجموعة

654
00:20:30,600 --> 00:20:34,040
الكلمة الرئيسية. حسنا، وسوف يكون

655
00:20:32,120 --> 00:20:36,880
يساوي حالة الاستخدام وعلينا أن

656
00:20:34,040 --> 00:20:38,520
فقط قم بتعيينه على السلسلة الفارغة.

657
00:20:36,880 --> 00:20:39,760
تماما مثل ذلك. الآن انتهينا تماما

658
00:20:38,520 --> 00:20:43,040
مع ذلك. لذلك سأكتب فقط مثل

659
00:20:39,760 --> 00:20:46,080
العودة، وتوفير سياق عامل التصفية الخاص بي

660
00:20:43,040 --> 00:20:47,400
مزود النقطة. حسنًا، الآن بالداخل هناك

661
00:20:46,080 --> 00:20:48,920
سنقدم أيضًا خدماتنا

662
00:20:47,400 --> 00:20:50,080
الأطفال هنا. لذلك سأكتب فقط

663
00:20:48,920 --> 00:20:51,920
مثل

664
00:20:50,080 --> 00:20:53,960
اه اطفال

665
00:20:51,920 --> 00:20:55,200
وسأقدم أيضًا قيمي

666
00:20:53,960 --> 00:20:56,880
هنا. لذلك سأكتب فقط مثل

667
00:20:55,200 --> 00:20:58,680
القيمة وسأقوم بتفكيك الهيكل

668
00:20:56,880 --> 00:21:00,320
لهم. لذلك سأقدم أولاً ما لدي

669
00:20:58,680 --> 00:21:03,760
استعلام البحث وأنا ذاهب أيضا

670
00:21:00,320 --> 00:21:06,080
تقديم استعلام البحث الخاص بي والمحدد

671
00:21:03,760 --> 00:21:09,640
الفئة وأيضا المجموعة المختارة

672
00:21:06,080 --> 00:21:11,760
الفئة والحد الأدنى للسعر وأيضا الحد الأقصى

673
00:21:09,640 --> 00:21:15,440
أو تعلم تحديد الحد الأدنى للسعر أيضًا،

674
00:21:11,760 --> 00:21:19,480
تحديد الحد الأدنى للسعر وأيضا الحد الأقصى للسعر

675
00:21:15,440 --> 00:21:21,680
وقم بتعيين الحد الأقصى للسعر وكذلك الكلمة الرئيسية

676
00:21:19,480 --> 00:21:24,240
وقم بتعيين الكلمة الرئيسية بهذه الطريقة. لذلك أنا

677
00:21:21,680 --> 00:21:26,640
الذهاب لحفظ الملف الخاص بي ثم أخيرا

678
00:21:24,240 --> 00:21:28,920
علينا فقط إنشاء مرشح الاستخدام الخاص بنا.

679
00:21:26,640 --> 00:21:31,880
حسنًا، فلنستخدم صيغة التصدير الخاصة بنا

680
00:21:28,920 --> 00:21:34,000
استخدام الفلتر سيكون مساويا لهذا

681
00:21:31,880 --> 00:21:36,080
وظيفة هنا والآن اسمحوا لي فقط

682
00:21:34,000 --> 00:21:37,240
توفير أولا وقبل كل شيء السياق الخاص بي. يمكنك ذلك

683
00:21:36,080 --> 00:21:39,520
أعط أي اسم تريده وأنا

684
00:21:37,240 --> 00:21:41,320
سأستخدم فقط سياق الاستخدام الخاص بي بشكل صحيح

685
00:21:39,520 --> 00:21:43,840
هنا ونحن في طريقنا لتقديم لدينا

686
00:21:41,320 --> 00:21:46,120
تصفية السياق إلى هناك. حسنا، والآن

687
00:21:43,840 --> 00:21:47,600
علينا أن نتحقق مما إذا لم يكن لدينا ذلك

688
00:21:46,120 --> 00:21:50,000
السياق. إذن ماذا تريد أن تفعل فيه

689
00:21:47,600 --> 00:21:52,200
هذا الوضع؟ نريد فقط أن نرمي

690
00:21:50,000 --> 00:21:56,680
الخطأ الجديد وتريد أن تقول ذلك

691
00:21:52,200 --> 00:21:59,320
يجب استخدام مرشح الاستخدام مع داخل أ

692
00:21:56,680 --> 00:22:01,200
مزود التصفية.

693
00:21:59,320 --> 00:22:02,920
مقدم مثل هذا تماما. إذا لم يكن الأمر كذلك

694
00:22:01,200 --> 00:22:04,320
هذه الحالة نريد فقط إرجاعها

695
00:22:02,920 --> 00:22:07,000
السياق تماما مثل هذا. لذلك سأفعل

696
00:22:04,320 --> 00:22:08,400
احفظ ملفي وكان ذلك كثيرًا

697
00:22:07,000 --> 00:22:09,640
الحديث.

698
00:22:08,400 --> 00:22:11,600
لا أعرف أين يوجد هذا في العالم

699
00:22:09,640 --> 00:22:12,880
جاء استخدام الانتقال من ولكن نعم،

700
00:22:11,600 --> 00:22:14,679
هناك كل ما عليك القيام به

701
00:22:12,880 --> 00:22:16,240
لسياق التصفية. الآن بعد أن نحن

702
00:22:14,679 --> 00:22:17,240
لقد نجحنا في إنشاء سياقنا لك

703
00:22:16,240 --> 00:22:18,520
تعرف على الشيء التالي الذي يتعين علينا القيام به

704
00:22:17,240 --> 00:22:20,360
هو أنه يتعين علينا المضي قدما والذهاب إلى

705
00:22:18,520 --> 00:22:22,080
هدفنا الرئيسي وعلينا أن نسجل ذلك

706
00:22:20,360 --> 00:22:24,600
هنا. لذلك علينا أولاً أن نفعل ذلك

707
00:22:22,080 --> 00:22:26,320
استيراد مزود عامل التصفية لدينا والآن نحن

708
00:22:24,600 --> 00:22:27,600
يجب أن يلف كل شيء في الداخل

709
00:22:26,320 --> 00:22:29,800
هذا. سأكتب فقط مثل الفلتر

710
00:22:27,600 --> 00:22:32,280
المزود وأنا ذاهب لإغلاق هناك

711
00:22:29,800 --> 00:22:33,720
واسمحوا لي أن أضع تطبيقي داخل هذا

712
00:22:32,280 --> 00:22:35,920
مزود التصفية. إذن الأمر تمامًا

713
00:22:33,720 --> 00:22:38,400
منتهي. بعد ذلك علينا استخدام هذا الفلتر

714
00:22:35,920 --> 00:22:40,120
السياق داخل مكون الشريط الجانبي. هكذا

715
00:22:38,400 --> 00:22:41,520
كيف سنفعل ذلك؟ أولا

716
00:22:40,120 --> 00:22:42,920
من بين كل ما يتعين علينا تفكيكه

717
00:22:41,520 --> 00:22:45,440
شيء واحد من هناك. لذلك نحن ذاهبون

718
00:22:42,920 --> 00:22:46,640
لاستخدام مثل استخدام مرشح. الآن في الداخل

719
00:22:45,440 --> 00:22:48,240
سنكون مرشح الاستخدام هذا

720
00:22:46,640 --> 00:22:50,280
وتفكيك جميع ممتلكاتهم.

721
00:22:48,240 --> 00:22:51,800
لذا سأضعها هنا. و

722
00:22:50,280 --> 00:22:53,960
نعم، لم نستخدم هذا ولهذا السبب

723
00:22:51,800 --> 00:22:55,480
نحن الآن جميع العناصر المعلنة

724
00:22:53,960 --> 00:22:56,800
غير مستخدمة ولهذا السبب نحصل عليه الآن

725
00:22:55,480 --> 00:22:58,840
هذا الخطأ مثل

726
00:22:56,800 --> 00:23:00,600
لدينا هذه المتغيرات ولكننا لم نفعل ذلك

727
00:22:58,840 --> 00:23:02,560
استخدم هذا. الآن دعونا نستخدمها فقط. أولا

728
00:23:00,600 --> 00:23:05,040
من كل ما علينا أن نعتني بالأول

729
00:23:02,560 --> 00:23:06,480
حقل الإدخال وهو حقل الإدخال هذا

730
00:23:05,040 --> 00:23:10,000
هنا. لذلك سأقدم

731
00:23:06,480 --> 00:23:12,080
القيمة الأولية لاستعلام البحث و

732
00:23:10,000 --> 00:23:14,000
سأقدم أيضًا التغيير

733
00:23:12,080 --> 00:23:15,520
وبمجرد أن نغير شيئًا ما في الداخل

734
00:23:14,000 --> 00:23:17,560
هناك لذلك سوف نستخدم مثل

735
00:23:15,520 --> 00:23:19,560
قم بتعيين استعلام البحث وسنكون

736
00:23:17,560 --> 00:23:22,320
توفير e.target.value

737
00:23:19,560 --> 00:23:23,480
مثل ما كتبناه داخل هذا الإدخال.

738
00:23:22,320 --> 00:23:25,840
حسنًا، هذا سيكون الأول

739
00:23:23,480 --> 00:23:27,320
واحد وبعد ذلك علينا أن نعتني به

740
00:23:25,840 --> 00:23:29,480
حقل الإدخال هذا هنا مثل

741
00:23:27,320 --> 00:23:30,960
الحد الأدنى وأيضا الحد الأقصى. حسنا، لذلك

742
00:23:29,480 --> 00:23:32,600
للحد الأدنى الذي سنكون عليه

743
00:23:30,960 --> 00:23:34,600
توفير القيمة هنا و

744
00:23:32,600 --> 00:23:36,520
ستكون القيمة إما الحد الأدنى للسعر

745
00:23:34,600 --> 00:23:38,360
الذي نحصل عليه الآن من الأعلى

746
00:23:36,520 --> 00:23:39,720
والآن إذا لم يكن هذا هو الحال نحن

747
00:23:38,360 --> 00:23:41,560
سيتم الإعداد فقط هناك لتفريغ

748
00:23:39,720 --> 00:23:43,080
سلسلة. حسنًا، بمجرد أن نتغير

749
00:23:41,560 --> 00:23:44,600
شيء في الداخل هناك لذلك نحن ذاهبون

750
00:23:43,080 --> 00:23:46,120
ليتم استدعاء هذه الوظيفة التي هي

751
00:23:44,600 --> 00:23:48,240
التعامل مع دقيقة

752
00:23:46,120 --> 00:23:50,320
تغير السعر. هذه ليست وظيفة كبيرة

753
00:23:48,240 --> 00:23:52,040
لإنشائه بشكل منفصل ولكن كما تعلمون

754
00:23:50,320 --> 00:23:53,440
ماذا؟ لا أريد أن أتسبب في فوضى واجهة المستخدم الخاصة بي

755
00:23:52,040 --> 00:23:55,040
سأذهب إلى الأعلى والآن دعونا

756
00:23:53,440 --> 00:23:57,600
مجرد خلق هناك هنا. لذلك سأفعل

757
00:23:55,040 --> 00:23:59,440
مجرد استخدام مثل const والتعامل مع السعر الأدنى

758
00:23:57,600 --> 00:24:02,200
التغيير وسوف يستغرق ذلك

759
00:23:59,440 --> 00:24:03,320
كائن الحدث والآن نحن في الداخل

760
00:24:02,200 --> 00:24:04,840
سيكون أولا وقبل كل شيء الحصول على

761
00:24:03,320 --> 00:24:06,800
القيمة من هناك حتى نتمكن من استخدام like

762
00:24:04,840 --> 00:24:08,480
e.target.value

763
00:24:06,800 --> 00:24:11,160
ويمكننا أيضًا أن نضع هناك على

764
00:24:08,480 --> 00:24:13,080
الحد الأدنى للسعر هنا. لذلك قيمة إذا كنا

765
00:24:11,160 --> 00:24:15,480
لديك نوع من القيمة وتحويلها

766
00:24:13,080 --> 00:24:16,880
قيمتنا إلى رقم النقطة العائمة هذا

767
00:24:15,480 --> 00:24:18,920
وإذا لم تكن لدينا القيمة، فنحن كذلك

768
00:24:16,880 --> 00:24:20,760
أريد فقط أن أضع هناك على غير محدد. و

769
00:24:18,920 --> 00:24:23,280
الآن اسمحوا لي أن أعتني بخطأ الحدث هذا

770
00:24:20,760 --> 00:24:25,679
هنا. دعونا نستخدم مثل إنشاء نقطة

771
00:24:23,280 --> 00:24:27,840
تغيير الحدث والآن علينا أن فقط

772
00:24:25,679 --> 00:24:29,600
قم بتمرير عنصر إدخال HTML الخاص بنا هنا

773
00:24:27,840 --> 00:24:31,520
داخل هناك. إذن هذه هي الطريقة التي تسير بها الأمور

774
00:24:29,600 --> 00:24:33,200
لحل هذا الخطأ هنا. حسنًا،

775
00:24:31,520 --> 00:24:35,280
لذلك سيكون هذا هو الأول. الآن

776
00:24:33,200 --> 00:24:36,880
دعونا نعتني بهذا الحد الأقصى

777
00:24:35,280 --> 00:24:38,880
هنا. حسنًا، سنكون كذلك

778
00:24:36,880 --> 00:24:41,000
توفير القيمة إلى هناك. لذلك دعونا

779
00:24:38,880 --> 00:24:42,160
فقط اكتب القيمة والأحرف الأولية

780
00:24:41,000 --> 00:24:44,240
القيمة التي سنضعها هناك

781
00:24:42,160 --> 00:24:45,600
إلى الحد الأقصى للسعر، وإذا لم نفعل ذلك

782
00:24:44,240 --> 00:24:47,880
لدينا الحد الأقصى للسعر لذلك نحن

783
00:24:45,600 --> 00:24:50,120
سوف نستخدم المصفوفة الفارغة

784
00:24:47,880 --> 00:24:51,840
صفيف فارغ ولكن مجرد سلسلة فارغة. حسنًا،

785
00:24:50,120 --> 00:24:53,320
لذلك علينا أن نستخدم لدينا في التغيير.

786
00:24:51,840 --> 00:24:54,640
عندما نريد تغيير شيء ما في الداخل

787
00:24:53,320 --> 00:24:57,640
هناك لذلك سنكون

788
00:24:54,640 --> 00:24:59,320
باستخدام مثل التعامل مع أقصى تغير في السعر. عطوف

789
00:24:57,640 --> 00:25:00,960
من اسم وظيفة طويلة لذلك لدينا فقط

790
00:24:59,320 --> 00:25:02,480
لإنشاء هناك هنا. لذلك انا ذاهب

791
00:25:00,960 --> 00:25:03,960
لاستخدامها هناك. انها سوف تذهب أيضا

792
00:25:02,480 --> 00:25:06,080
خذ هذا الحدث حتى تعرف أنني سأفعل ذلك

793
00:25:03,960 --> 00:25:07,840
يجب أن نسخ هذا الشيء برمته من

794
00:25:06,080 --> 00:25:09,840
هنا. الآن اسمحوا لي أن ألصق هناك بشكل صحيح

795
00:25:07,840 --> 00:25:11,760
هنا ودعني أغلق هناك. ونحن كذلك

796
00:25:09,840 --> 00:25:13,720
سوف نفعل نفس الشيء مثلنا

797
00:25:11,760 --> 00:25:15,960
يجب الحصول على القيمة باستخدام

798
00:25:13,720 --> 00:25:17,360
e.target.value

799
00:25:15,960 --> 00:25:19,560
وعلينا أيضًا تغيير المجموعة

800
00:25:17,360 --> 00:25:21,280
الحد الأقصى للسعر ومن ثم علينا أن

801
00:25:19,560 --> 00:25:22,800
تقديم قيمتنا إذا كان لدينا القيمة

802
00:25:21,280 --> 00:25:25,000
لذلك يتعين علينا تغيير ذلك إلى التحليل

803
00:25:22,800 --> 00:25:26,280
تعويم وإذا لم يكن لدينا قيمة ذلك

804
00:25:25,000 --> 00:25:27,960
نريد فقط تغيير ذلك إلى

805
00:25:26,280 --> 00:25:29,520
غير محدد. حسنًا، سأقوم بالحفظ

806
00:25:27,960 --> 00:25:31,840
هذا الملف وهذا سيكون عليه

807
00:25:29,520 --> 00:25:33,840
المقبض أقصى تغير في السعر. حسنا، لذلك

808
00:25:31,840 --> 00:25:35,320
دعونا نرى فقط ما تبقى و

809
00:25:33,840 --> 00:25:36,840
هنا يمكنك أن ترى علينا أيضا أن نأخذ

810
00:25:35,320 --> 00:25:38,040
رعاية حقل الإدخال هذا هنا

811
00:25:36,840 --> 00:25:40,679
والذي لن يكون بهذا القدر من

812
00:25:38,040 --> 00:25:43,679
مشكلة. إذن ما أريد أن أفعله هو أنني

813
00:25:40,679 --> 00:25:44,600
تريد أن تقدم لي ماذا تسميها؟

814
00:25:43,679 --> 00:25:46,720
أم

815
00:25:44,600 --> 00:25:48,520
انا ذاهب لتقديم بلدي على التغيير. إنه

816
00:25:46,720 --> 00:25:50,240
سوف تأخذ هذه الوظيفة باعتبارها

817
00:25:48,520 --> 00:25:54,320
معالج الإدخال لذلك سأستخدم مثل

818
00:25:50,240 --> 00:25:56,160
التعامل مع فئات تغيير الراديو تمامًا مثل

819
00:25:54,320 --> 00:25:58,040
هذا ونحن سوف نمر

820
00:25:56,160 --> 00:26:00,320
الفئة

821
00:25:58,040 --> 00:26:01,960
فئة داخل هناك وأنا ذاهب ل

822
00:26:00,320 --> 00:26:04,000
انسخ ذلك من هنا ودعنا نذهب إلى

823
00:26:01,960 --> 00:26:05,600
الجزء العلوي وأنا ذاهب إلى إنشاء فقط

824
00:26:04,000 --> 00:26:07,120
هناك هنا. لن نكون كذلك

825
00:26:05,600 --> 00:26:08,800
القيام بأي شيء مجنون ولكننا سنفعل

826
00:26:07,120 --> 00:26:10,280
يكون مجرد إنشاء هذه الوظيفة، وانها

827
00:26:08,800 --> 00:26:11,720
سوف تأخذ هذه الفئة باعتبارها

828
00:26:10,280 --> 00:26:13,960
المعلمة والتي ستكون

829
00:26:11,720 --> 00:26:16,400
سلسلة والآن داخل هناك علينا أن

830
00:26:13,960 --> 00:26:18,320
فقط اكتب مثل مجموعة الفئة المحددة.

831
00:26:16,400 --> 00:26:20,200
دعونا فقط نقدم فئتنا في الداخل

832
00:26:18,320 --> 00:26:21,240
هناك. تحت هذا الفصل اسم ماذا

833
00:26:20,200 --> 00:26:23,360
هل علينا أن نفعل؟ علينا فقط

834
00:26:21,240 --> 00:26:24,840
تقديم فحصنا ونحن ذاهبون إلى

835
00:26:23,360 --> 00:26:27,240
يتم الإعداد هناك إلى المحدد

836
00:26:24,840 --> 00:26:29,640
الفئة وإذا كان هذا يساوي

837
00:26:27,240 --> 00:26:32,200
فئة لذلك فقط تحقق هناك وإذا

838
00:26:29,640 --> 00:26:34,040
هذا لا يساوي الفئة

839
00:26:32,200 --> 00:26:36,640
ثم قم بتعطيله. حسنا، هذا هو

840
00:26:34,040 --> 00:26:38,920
سيكون للفحص والآن

841
00:26:36,640 --> 00:26:41,160
دعونا نعتني بهذه الكلمات الرئيسية

842
00:26:38,920 --> 00:26:42,600
هنا. عندما ينقر شخص ما على هذا

843
00:26:41,160 --> 00:26:44,640
زر هنا فماذا علينا أن

844
00:26:42,600 --> 00:26:47,560
افعل؟ في هذا الوضع نريد التغيير

845
00:26:44,640 --> 00:26:49,040
انقر فوق الكلمة الأساسية للمقبض. حسنا، ونحن

846
00:26:47,560 --> 00:26:50,480
سوف يتم تمرير الكلمة الرئيسية فقط

847
00:26:49,040 --> 00:26:52,440
داخل هناك. لذلك سأقوم بنسخ ذلك

848
00:26:50,480 --> 00:26:55,360
من هنا وعلينا أن نخلق فقط

849
00:26:52,440 --> 00:26:57,120
هناك هنا بالداخل تحت هذا

850
00:26:55,360 --> 00:26:58,840
التعامل مع فئة تغيير الراديو. لذلك سأفعل

851
00:26:57,120 --> 00:27:00,840
مجرد خلق هناك هنا. انها تسير

852
00:26:58,840 --> 00:27:02,320
أن نأخذ كلمة رئيسية ودعونا فقط

853
00:27:00,840 --> 00:27:04,440
توفير سلسلة إلى هناك. الآن دعونا

854
00:27:02,320 --> 00:27:05,880
فقط قم بتغيير الكلمة الرئيسية الخاصة بنا وسنكون كذلك

855
00:27:04,440 --> 00:27:07,560
سيتم تمرير كلمتنا الرئيسية فقط

856
00:27:05,880 --> 00:27:09,120
داخل هناك. حسنًا، سأقوم بالحفظ

857
00:27:07,560 --> 00:27:11,200
ملفي وأعتقد أن هذا سيكون

858
00:27:09,120 --> 00:27:13,080
من أجل الوظيفة إذا لم أكن كذلك

859
00:27:11,200 --> 00:27:14,840
خطأ. نعم، أنا مخطئ

860
00:27:13,080 --> 00:27:17,560
لأنه علينا أن نعتني بهذا

861
00:27:14,840 --> 00:27:19,160
إعادة تعيين المرشحات كذلك. حسنا، فكيف نحن

862
00:27:17,560 --> 00:27:20,840
سوف نفعل ذلك؟ للقيام بذلك

863
00:27:19,160 --> 00:27:22,240
أولا وقبل كل شيء علينا أن نقدم لدينا

864
00:27:20,840 --> 00:27:24,560
معالج هنا. لذلك نحن ذاهبون إلى

865
00:27:22,240 --> 00:27:25,600
أن تكتب فقط مثل معالج النقر.

866
00:27:24,560 --> 00:27:27,800
لذلك سوف نمر مثل

867
00:27:25,600 --> 00:27:29,400
إعادة ضبط المقبض. حسنًا، سأقوم بالنسخ

868
00:27:27,800 --> 00:27:31,520
ذلك من هنا ودعنا نذهب إلى

869
00:27:29,400 --> 00:27:33,360
أعلى وتعيين كل شيء إلى فارغة

870
00:27:31,520 --> 00:27:36,480
سلسلة. حسنًا، سأكتب مثل ذلك

871
00:27:33,360 --> 00:27:38,240
const التعامل مع مرشحات إعادة تعيين والآن

872
00:27:36,480 --> 00:27:39,360
داخل هناك ماذا عليك أن تفعل؟

873
00:27:38,240 --> 00:27:41,440
أولا وقبل كل شيء علينا أن نقدم لدينا

874
00:27:39,360 --> 00:27:43,320
استعلام البحث وعلينا أن نضع هناك ل

875
00:27:41,440 --> 00:27:45,000
سلسلة فارغة. علينا أن نحصل على مجموعتنا

876
00:27:43,320 --> 00:27:47,040
الفئة المختارة. علينا أن نضع هناك

877
00:27:45,000 --> 00:27:48,640
لسلسلة فارغة. علينا أن نحصل على مجموعتنا

878
00:27:47,040 --> 00:27:50,800
الحد الأدنى للسعر. علينا توفير

879
00:27:48,640 --> 00:27:53,120
غير محدد داخل هناك. علينا أن نحصل على

880
00:27:50,800 --> 00:27:55,480
لدينا الحد الأقصى للسعر. علينا أن نضع

881
00:27:53,120 --> 00:27:58,840
هناك إلى غير محدد وأيضا المجموعة

882
00:27:55,480 --> 00:28:01,000
الكلمة الأساسية لصفيف فارغ لسلسلة فارغة.

883
00:27:58,840 --> 00:28:02,760
لذلك سأقوم بحفظ الملف الخاص بي وأعتقد

884
00:28:01,000 --> 00:28:04,920
هذا سيكون عليه. إذن أنت تعرف ماذا؟

885
00:28:02,760 --> 00:28:06,160
لم يتم الانتهاء من الوظيفة بالكامل

886
00:28:04,920 --> 00:28:07,800
ولكن الآن الشيء التالي الذي يتعين علينا القيام به

887
00:28:06,160 --> 00:28:10,000
ما نفعله هو أنه يتعين علينا تقديم المحتوى الخاص بنا

888
00:28:07,800 --> 00:28:12,320
هنا. الشريط الجانبي ليس تماما

889
00:28:10,000 --> 00:28:13,920
تم. حسنًا، سيكون هذا هو الحال

890
00:28:12,320 --> 00:28:16,480
الشريط الجانبي والآن دعونا ننشئه

891
00:28:13,920 --> 00:28:21,600
مكون المحتوى الرئيسي لدينا. رئيسي جدا

892
00:28:16,480 --> 00:28:23,520
المحتوى يخدع المحتوى الرئيسي.tsx

893
00:28:21,600 --> 00:28:25,400
الآن سأكتب فقط مثل rfc و

894
00:28:23,520 --> 00:28:26,840
المحتوى الرئيسي داخل هناك. لذلك انا ذاهب

895
00:28:25,400 --> 00:28:28,600
لحفظ ملفي والآن دعني أمضي قدمًا

896
00:28:26,840 --> 00:28:30,440
وانتقل إلى تطبيقي. تحت هذا

897
00:28:28,600 --> 00:28:32,280
الشريط الجانبي الذي سنقوم بإنشاءه

898
00:28:30,440 --> 00:28:35,159
شعبة. سأقدم فقط بعض الدروس ل

899
00:28:32,280 --> 00:28:37,720
انها مثل تقريب ومن ثم سوف العرض

900
00:28:35,159 --> 00:28:40,679
يتم ضبطه على الوضع الكامل والمرن أيضًا

901
00:28:37,720 --> 00:28:43,200
سيتم ضبط التبرير على بين وأيضًا

902
00:28:40,679 --> 00:28:45,159
سيتم ضبط flex على الالتفاف الكامل. حسنًا،

903
00:28:43,200 --> 00:28:46,760
تماما مثل ذلك. وفي الداخل نحن هناك

904
00:28:45,159 --> 00:28:48,640
سيكون مجرد توفير طرقنا.

905
00:28:46,760 --> 00:28:50,240
ليس عليك القيام بذلك ولكن إذا كنت

906
00:28:48,640 --> 00:28:51,400
تريد أن تفعل ذلك لذلك سيكون

907
00:28:50,240 --> 00:28:53,440
فكرة أفضل. إذا كنت ترغب في إنشاء

908
00:28:51,400 --> 00:28:55,000
صفحة منفصلة يمكنك القيام بذلك تماما

909
00:28:53,440 --> 00:28:57,360
لكن هل تعرف ماذا؟ لن أفعل

910
00:28:55,000 --> 00:28:58,600
ذلك. سأكتب فقط مثل الطريق و

911
00:28:57,360 --> 00:29:00,640
دعونا نصل إلى هناك من رد الفعل

912
00:28:58,600 --> 00:29:02,240
جهاز التوجيه ودعنا نغلق هناك بشكل صحيح

913
00:29:00,640 --> 00:29:04,400
هنا. سأقوم بتوفير طريق ل

914
00:29:02,240 --> 00:29:05,679
هناك والمسار سيكون مجرد منزل و

915
00:29:04,400 --> 00:29:08,480
من أجل الوطن سنكون عادلين

916
00:29:05,679 --> 00:29:10,000
توفير عنصر من المحتوى الرئيسي لدينا

917
00:29:08,480 --> 00:29:11,760
المكون الذي أنشأناه للتو بشكل صحيح

918
00:29:10,000 --> 00:29:13,000
هنا. لذلك سأقوم بحفظ ملفي و

919
00:29:11,760 --> 00:29:14,560
هنا يمكنك أن ترى أننا نحصل الآن على ما لدينا

920
00:29:13,000 --> 00:29:17,040
المحتوى الرئيسي هنا وهو

921
00:29:14,560 --> 00:29:18,600
مذهل. لذلك سأغلق هناك و

922
00:29:17,040 --> 00:29:20,320
دعونا فقط نغلق هذا الفلتر وأيضا

923
00:29:18,600 --> 00:29:22,240
الشريط الجانبي والآن دعونا نهتم

924
00:29:20,320 --> 00:29:23,600
من هذا المكون المحتوى الرئيسي. وماذا في ذلك

925
00:29:22,240 --> 00:29:25,000
سأفعل ذلك أولاً وقبل كل شيء أنا

926
00:29:23,600 --> 00:29:26,240
سوف تضطر إلى استيراد الكثير من الأشياء

927
00:29:25,000 --> 00:29:29,440
من

928
00:29:26,240 --> 00:29:31,800
ماذا نسميها؟ من مرشح الاستخدام لدينا.

929
00:29:29,440 --> 00:29:33,400
حسنًا، فلننفذ ذلك الآن

930
00:29:31,800 --> 00:29:36,040
في الداخل هناك علينا أن نفكك الهيكلة

931
00:29:33,400 --> 00:29:38,560
مثل استعلام البحث وأيضا

932
00:29:36,040 --> 00:29:41,679
الفئة المحددة وأيضا الحد الأدنى

933
00:29:38,560 --> 00:29:44,159
السعر والحد الأقصى للسعر وأيضا

934
00:29:41,679 --> 00:29:45,400
الكلمة الرئيسية. حسنًا، سأعود.

935
00:29:44,159 --> 00:29:47,240
هيا، اسمحوا لي أن أعود وأنا

936
00:29:45,400 --> 00:29:49,240
الذهاب لحفظ الملف الخاص بي وهذا هو

937
00:29:47,240 --> 00:29:50,760
الشيء الذي يتعين علينا استيراده هنا.

938
00:29:49,240 --> 00:29:53,640
بعد ذلك، يتعين علينا إنشاء عدد قليل من الدول

939
00:29:50,760 --> 00:29:55,000
مثل المنتجات ثم قم بتعيين المنتجات.

940
00:29:53,640 --> 00:29:57,120
سيكون الآن مساويا للاستخدام

941
00:29:55,000 --> 00:29:58,520
الدولة ويمكننا أن نقدم مثل الأساس

942
00:29:57,120 --> 00:30:00,680
أي شيء.

943
00:29:58,520 --> 00:30:02,400
أي شيء للمصفوفة. حسنًا، فلنفعل ذلك

944
00:30:00,680 --> 00:30:04,560
فقط قم بتوفير مصفوفتنا الفارغة هنا.

945
00:30:02,400 --> 00:30:06,880
وأيضًا، دعونا ننشئ الفلتر الخاص بنا

946
00:30:04,560 --> 00:30:08,960
وتعيين الفلتر. انها سوف تكون متساوية

947
00:30:06,880 --> 00:30:11,720
إلى حالة الاستخدام. وبالنسبة للابتدائي

948
00:30:08,960 --> 00:30:13,040
ليس انتقال استخدام ولكن حالة استخدام.

949
00:30:11,720 --> 00:30:15,240
والقيمة الأولية التي سنكون عليها

950
00:30:13,040 --> 00:30:17,720
وضع كل شيء عليه. وأنا كذلك

951
00:30:15,240 --> 00:30:21,200
سوف تمر بلدي الحالي

952
00:30:17,720 --> 00:30:24,400
الصفحة ثم قم بتعيين الحالي. هيا، اضبط

953
00:30:21,200 --> 00:30:26,200
الصفحة الحالية. انها سوف تكون مساوية ل

954
00:30:24,400 --> 00:30:28,560
استخدام الدولة.

955
00:30:26,200 --> 00:30:30,760
استخدم الحالة وسنمر

956
00:30:28,560 --> 00:30:32,440
واحد لها مثل القيمة الأولية.

957
00:30:30,760 --> 00:30:33,960
وبعد ذلك دعونا ننشئ أيضًا لـ

958
00:30:32,440 --> 00:30:36,200
القائمة المنسدلة لأننا سنكون

959
00:30:33,960 --> 00:30:39,520
وكذلك إنشاء قائمة منسدلة أيضًا.

960
00:30:36,200 --> 00:30:40,960
ثم قم بتعيين القائمة المنسدلة مفتوحة. حسنا، لذلك

961
00:30:39,520 --> 00:30:43,240
سيكون مساويا للاستخدام

962
00:30:40,960 --> 00:30:44,880
الدولة. استخدم الحالة وسنكون كذلك

963
00:30:43,240 --> 00:30:46,840
توفير القيمة الأولية كاذبة ل

964
00:30:44,880 --> 00:30:49,000
ذلك. حسنًا، إذن يكون كل ما انتهيت منه.

965
00:30:46,840 --> 00:30:51,280
لكنني سأقوم أيضًا بإنشاء واحدة

966
00:30:49,000 --> 00:30:53,480
المتغير ليس حالة بل متغير واحد

967
00:30:51,280 --> 00:30:56,520
مثل العناصر في كل صفحة، وسوف يكون

968
00:30:53,480 --> 00:30:57,920
يساوي 12 عنصرًا فقط. إذا كنت تريد ذلك

969
00:30:56,520 --> 00:31:00,960
زيادة ذلك، يمكنك أن تفعل ذلك تماما.

970
00:30:57,920 --> 00:31:02,640
لكن في حالتي، 12 فقط سيفي بالغرض. اسمحوا لي

971
00:31:00,960 --> 00:31:04,120
اعتني بواجهة المستخدم وبعد ذلك سنذهب

972
00:31:02,640 --> 00:31:06,160
لنذهب إلى كيف سنكون

973
00:31:04,120 --> 00:31:08,080
جلب البيانات لدينا. حسنًا، أولًا

974
00:31:06,160 --> 00:31:10,160
جميعًا، اسمحوا لي فقط بتغيير هذا div إلى

975
00:31:08,080 --> 00:31:11,520
قسم. انا ذاهب لنسخ ذلك من

976
00:31:10,160 --> 00:31:13,440
هنا والآن اسمحوا لي أن أستبدل ذلك

977
00:31:11,520 --> 00:31:15,720
مع هذا واحد. سأقدم اسم الفصل

978
00:31:13,440 --> 00:31:16,640
مثل الشاشة الكبيرة جدًا، ماذا

979
00:31:15,720 --> 00:31:19,560
هل تريد أن تفعل؟ نريد فقط أن

980
00:31:16,640 --> 00:31:21,040
توفير هذا العرض 55 ريم. ل

981
00:31:19,560 --> 00:31:24,160
الشاشة الكبيرة، التي تريد تغييرها

982
00:31:21,040 --> 00:31:26,400
العرض إلى 55 rem أيضًا.

983
00:31:24,160 --> 00:31:28,640
و بالنسبة للشاشة الصغيرة

984
00:31:26,400 --> 00:31:31,400
تريد تغيير العرض إلى 40 rem.

985
00:31:28,640 --> 00:31:34,520
وبالنسبة للشاشة الصغيرة جدًا، فأنت تريد ذلك

986
00:31:31,400 --> 00:31:36,080
لتغيير العرض إلى 20 rem. وأيضا

987
00:31:34,520 --> 00:31:38,200
سيتم تعيين الحشو في كل مكان

988
00:31:36,080 --> 00:31:39,400
إلى خمسة. لذا، سيكون الأمر على ما يرام.

989
00:31:38,200 --> 00:31:40,840
والآن يتعين علينا إنشاء div الخاص بنا باستخدام

990
00:31:39,400 --> 00:31:42,960
فئة الهامش للأسفل سوف

991
00:31:40,840 --> 00:31:44,800
يتم ضبطها الآن على خمسة. وعلينا أيضًا أن نفعل ذلك

992
00:31:42,960 --> 00:31:47,720
إنشاء div آخر مع فئة

993
00:31:44,800 --> 00:31:49,640
المرن وأيضا المرن من العمود. و

994
00:31:47,720 --> 00:31:51,040
سيتم تعيين الصغير للصغير

995
00:31:49,640 --> 00:31:54,200
حجم الشاشة، ونحن في طريقنا إلى توفير

996
00:31:51,040 --> 00:31:56,120
المرن من الصف لذلك تماما من هذا القبيل.

997
00:31:54,200 --> 00:31:57,120
وأنت تعرف ماذا؟ انا ذاهب ايضا

998
00:31:56,120 --> 00:32:00,360
تقديم أ

999
00:31:57,120 --> 00:32:01,960
تبرير بين وأيضا العناصر

1000
00:32:00,360 --> 00:32:03,240
سيتم ضبطه على المركز. في الداخل هناك،

1001
00:32:01,960 --> 00:32:05,679
ونحن في طريقنا إلى إنشاء آخر

1002
00:32:03,240 --> 00:32:07,160
div مع فئة النسبية وأيضا

1003
00:32:05,679 --> 00:32:09,400
سيتم تعيين الهامش للأسفل إلى

1004
00:32:07,160 --> 00:32:11,000
سيتم أيضًا تعيين خمسة وللأعلى أيضًا

1005
00:32:09,400 --> 00:32:13,120
خمسة. حسنًا، وسنكون كذلك

1006
00:32:11,000 --> 00:32:14,760
إنشاء زر واحد فقط بالداخل هناك.

1007
00:32:13,120 --> 00:32:17,280
وهذا الزر سوف يأخذ هذه الفصول

1008
00:32:14,760 --> 00:32:18,840
مثل الحدود وأيضًا الحشو لـ x

1009
00:32:17,280 --> 00:32:20,800
سيتم تعيين المحور إلى أربعة، الحشو ل

1010
00:32:18,840 --> 00:32:23,160
سيتم تعيين المحور y على اثنين و

1011
00:32:20,800 --> 00:32:25,920
تقريب تماما أربعة والمرن سيكون

1012
00:32:23,160 --> 00:32:27,440
تم ضبطه أيضًا على مركز العناصر.

1013
00:32:25,920 --> 00:32:29,920
حسنا، داخل هذا الزر، ماذا تفعل

1014
00:32:27,440 --> 00:32:31,480
تريد أن تفعل؟ نريد فقط أن نقدم

1015
00:32:29,920 --> 00:32:33,600
أيقونة لدينا فقط في الوقت الراهن. سنكون كذلك

1016
00:32:31,480 --> 00:32:35,320
فقط تنفيذ الرمز الخاص بنا وهو

1017
00:32:33,600 --> 00:32:36,760
إختصار ثلاثة.

1018
00:32:35,320 --> 00:32:38,679
إختصار ثلاثة، ونحن في طريقنا إلى الاستيراد

1019
00:32:36,760 --> 00:32:40,200
ذلك من الأيقونة الواضحة. وأنا ذاهب

1020
00:32:38,679 --> 00:32:42,080
لتوفير اسم فئة الهامش فقط

1021
00:32:40,200 --> 00:32:44,400
لأن الحق سيتم تعيينه على اثنين. حسنًا،

1022
00:32:42,080 --> 00:32:45,960
لذلك سأقوم بحفظ الملف الخاص بي.

1023
00:32:44,400 --> 00:32:47,240
وهذه هي الطريقة التي يبدو بها الأمر صحيحًا

1024
00:32:45,960 --> 00:32:49,520
هنا. لذلك، سنقوم بتغيير كل شيء

1025
00:32:47,240 --> 00:32:50,920
من تلك الأشياء بالداخل هناك. لكن في الوقت الحالي،

1026
00:32:49,520 --> 00:32:52,280
هذا يبدو أفضل. كما تعلمون، أنا

1027
00:32:50,920 --> 00:32:54,280
لن تفعل ذلك لاحقا. انا ذاهب ل

1028
00:32:52,280 --> 00:32:56,880
افعل ذلك الآن. لذلك، أولا وقبل كل شيء، دعونا

1029
00:32:54,280 --> 00:32:58,040
لي فقط التحقق مما إذا كان الفلتر يساوي الثلاثي

1030
00:32:56,880 --> 00:33:00,120
ل

1031
00:32:58,040 --> 00:33:01,760
كل ما تم ضبطه بالفعل على ما يرام

1032
00:33:00,120 --> 00:33:03,160
هنا والتي وضعناها بالفعل هناك

1033
00:33:01,760 --> 00:33:04,200
الجميع. لذا، إذا كان هذا هو الحال، فماذا تفعل

1034
00:33:03,160 --> 00:33:06,600
تريد أن تفعل؟ نريد فقط أن نضع

1035
00:33:04,200 --> 00:33:08,400
هناك للتصفية. وإذا لم يكن هذا هو

1036
00:33:06,600 --> 00:33:10,880
الحالة، لذلك نريد فقط أن نحصل على مرشح مثل

1037
00:33:08,400 --> 00:33:14,000
نقطة الحرف في وتريد تقديمه

1038
00:33:10,880 --> 00:33:17,720
صفر ثم إلى الأحرف الصغيرة في الداخل

1039
00:33:14,000 --> 00:33:19,480
هناك. لم يتم تحديد موقع ولكن إلى حالة صغيرة. نحن

1040
00:33:17,720 --> 00:33:21,640
يجب أيضًا أن تقوم بتسلسل نقطة التصفية

1041
00:33:19,480 --> 00:33:23,440
شريحة ورقم واحد. حسنًا، أنا ذاهب

1042
00:33:21,640 --> 00:33:24,960
لحفظ ذلك في الوقت الراهن. وهذه هي الطريقة

1043
00:33:23,440 --> 00:33:26,640
يبدو هنا. لكن حاليا نحن

1044
00:33:24,960 --> 00:33:28,120
ليس لديك أي قائمة منسدلة، لذلك هذا

1045
00:33:26,640 --> 00:33:29,280
لماذا لا نستطيع أن نرى هناك. لكنك تعلم

1046
00:33:28,120 --> 00:33:32,120
ماذا؟ اسمحوا لي فقط بإنشاء تلك القائمة المنسدلة

1047
00:33:29,280 --> 00:33:34,360
القائمة هنا. حسنا، ماذا لدي

1048
00:33:32,120 --> 00:33:35,520
أن تفعل تحت هذا الزر؟

1049
00:33:34,360 --> 00:33:36,920
سأقوم فقط بإنشاء القائمة المنسدلة الخاصة بي

1050
00:33:35,520 --> 00:33:38,200
القائمة التي قمنا بإنشائها بالفعل

1051
00:33:36,920 --> 00:33:40,920
أعلاه. لذا، سأكتب مثل القطرة

1052
00:33:38,200 --> 00:33:42,280
القائمة السفلية. وإذا كان الأمر كذلك، إذن

1053
00:33:40,920 --> 00:33:44,520
ماذا تريد أن تفعل؟ نريد فقط أن

1054
00:33:42,280 --> 00:33:46,760
أولاً، قم بإنشاء div هنا.

1055
00:33:44,520 --> 00:33:48,240
سأقدم بعض الطبقات لذلك مثل

1056
00:33:46,760 --> 00:33:50,040
مطلق. أنت لا تقدم أ

1057
00:33:48,240 --> 00:33:51,560
مطلق لأنه في هذه الحالة، نحن لسنا كذلك

1058
00:33:50,040 --> 00:33:53,640
توفير القيمة النسبية. إذن هذا

1059
00:33:51,560 --> 00:33:55,960
سوف تكون القيمة المطلقة ل.

1060
00:33:53,640 --> 00:33:57,000
حسنًا، والآن بالداخل، ماذا نفعل

1061
00:33:55,960 --> 00:33:59,080
يجب أن تفعل؟ علينا أن نغير

1062
00:33:57,000 --> 00:34:00,280
لون الخلفية إلى الأبيض تماما و

1063
00:33:59,080 --> 00:34:03,280
كما سأقدم القليل من

1064
00:34:00,280 --> 00:34:05,240
الحدود والحدود الرمادية من 300 و

1065
00:34:03,280 --> 00:34:06,640
أيضًا مدور بالكامل، هامش للأعلى

1066
00:34:05,240 --> 00:34:08,800
سيتم ضبطه على اثنين، وسيتم ضبط العرض على

1067
00:34:06,640 --> 00:34:10,080
ممتلئ تماما. بالنسبة لحجم الشاشة الصغير،

1068
00:34:08,800 --> 00:34:11,879
سنقوم بضبط العرض على

1069
00:34:10,080 --> 00:34:13,840
تماما 40.

1070
00:34:11,879 --> 00:34:15,120
نعم، 40 تماما من هذا القبيل.

1071
00:34:13,840 --> 00:34:17,200
حسنًا، الآن سنذهب إلى الداخل

1072
00:34:15,120 --> 00:34:19,159
ليتم إنشاء زر آخر و

1073
00:34:17,200 --> 00:34:20,720
والتي سوف تقول مثل عندما ينقر شخص ما

1074
00:34:19,159 --> 00:34:22,760
هناك، لذلك نحن سنكون فقط

1075
00:34:20,720 --> 00:34:24,359
إطلاق هذه الوظيفة التي تشبه set

1076
00:34:22,760 --> 00:34:26,480
مرشح. ونحن في طريقنا إلى الإعداد

1077
00:34:24,359 --> 00:34:27,520
هناك لرخيصة. بدلا من كامل، أنت

1078
00:34:26,480 --> 00:34:29,960
تعرف ماذا؟ اسمحوا لي أن تظهر لك هناك

1079
00:34:27,520 --> 00:34:31,240
هنا الذي تم ضبطه على كامل. الآن،

1080
00:34:29,960 --> 00:34:33,040
سنقوم بالإعداد هناك ل

1081
00:34:31,240 --> 00:34:34,399
واحدة رخيصة هنا. انا ذاهب ايضا

1082
00:34:33,040 --> 00:34:36,440
توفير قليلا من الطبقات لذلك مثل

1083
00:34:34,399 --> 00:34:38,399
كتلة تماما. الحشو للمحور x

1084
00:34:36,440 --> 00:34:40,000
سيتم ضبطها على أربعة والحشوة لـ

1085
00:34:38,399 --> 00:34:41,840
سيتم تعيين المحور y على اثنين، وسيكون العرض

1086
00:34:40,000 --> 00:34:43,600
تم ضبطه على أربعة وسيتم ضبط النص على

1087
00:34:41,840 --> 00:34:45,280
اليسار. انا ذاهب لتوفير التحويم

1088
00:34:43,600 --> 00:34:46,640
الدولة لذلك مثل عندما تحوم شخص ما

1089
00:34:45,280 --> 00:34:49,200
أمر، لذلك تريد تغيير

1090
00:34:46,640 --> 00:34:51,240
لون الخلفية الذي يحب 200

1091
00:34:49,200 --> 00:34:52,919
من الرمادي تماما. لذا، الآن سأفعل

1092
00:34:51,240 --> 00:34:54,760
مجرد تقديم تسمية رخيصة في الداخل

1093
00:34:52,919 --> 00:34:55,879
هناك. انا ذاهب لحفظ الملف الخاص بي. و

1094
00:34:54,760 --> 00:34:57,600
كما تعلمون، انا ذاهب الى تكرار فقط

1095
00:34:55,879 --> 00:34:59,760
ذلك عدة مرات. لذلك، سأفعل ذلك فقط

1096
00:34:57,600 --> 00:35:01,840
حدد هذا الزر. وعندنا رخيصة

1097
00:34:59,760 --> 00:35:03,640
لذلك لدينا مكلفة ولدينا أيضا

1098
00:35:01,840 --> 00:35:05,280
شعبية واحدة هنا. لذلك، أنا ذاهب إلى

1099
00:35:03,640 --> 00:35:08,160
فقط قم بتغيير ذلك إلى إعجاب بدلاً من أ

1100
00:35:05,280 --> 00:35:10,200
رخيصة، وأنا ذاهب لتوفير النفقات

1101
00:35:08,160 --> 00:35:11,760
سيف. وهنا سأقدم أيضًا

1102
00:35:10,200 --> 00:35:14,760
باهظة الثمن. وأخيرا، سأفعل

1103
00:35:11,760 --> 00:35:18,200
تقديم شعبية. لذلك، ص ص. هيا، ص

1104
00:35:14,760 --> 00:35:19,920
أو ص ل ل ص. وهنا شعبية أيضا.

1105
00:35:18,200 --> 00:35:22,160
لذا، سأقوم بحفظ الملف الخاص بي. الآن، إذا كنت

1106
00:35:19,920 --> 00:35:23,480
انقر هناك، لذلك لن يحدث شيء.

1107
00:35:22,160 --> 00:35:25,680
لذلك، كما تعلمون، سأذهب إلى بلدي

1108
00:35:23,480 --> 00:35:27,200
القائمة المنسدلة. تم ضبطه الآن على خطأ.

1109
00:35:25,680 --> 00:35:29,280
لذلك، انا ذاهب الى مجرد تعيين هناك لمثل

1110
00:35:27,200 --> 00:35:30,680
صحيح. الآن، إذا قمت بحفظ ملفي وهنا

1111
00:35:29,280 --> 00:35:32,720
يمكنك أن ترى أننا أصبحنا الآن رخيصين،

1112
00:35:30,680 --> 00:35:34,560
مكلفة وأيضا شعبية. أنا

1113
00:35:32,720 --> 00:35:36,000
الذهاب لتعيين هناك كاذبة مرة أخرى.

1114
00:35:34,560 --> 00:35:38,080
والآن علينا أن نهتم بالباقي

1115
00:35:36,000 --> 00:35:39,920
من واجهة المستخدم. إذن، التالي سنكون

1116
00:35:38,080 --> 00:35:41,480
العمل مع البطاقة. حسنًا، سأفعل

1117
00:35:39,920 --> 00:35:43,440
فقط قم بإنشاء div مع فئة like

1118
00:35:41,480 --> 00:35:45,800
الشبكة. سأقوم أيضًا بكتابة شبكة من

1119
00:35:43,440 --> 00:35:47,480
أعمدة وأربعة وأنا ذاهب أيضا

1120
00:35:45,800 --> 00:35:48,640
توفير حجم الشاشة الصغيرة، نحن

1121
00:35:47,480 --> 00:35:50,520
سيتم توفير شبكة من

1122
00:35:48,640 --> 00:35:53,480
أعمدة. بالنسبة للمتوسط، نحن ذاهبون

1123
00:35:50,520 --> 00:35:55,280
ليتم توفير أعمدة الشبكة الأعمدة

1124
00:35:53,480 --> 00:35:57,160
من أربعة وأيضا سأقدم

1125
00:35:55,280 --> 00:35:58,800
قليلا من الفجوة لذلك سيتم تعيين مثل هذه الفجوة

1126
00:35:57,160 --> 00:36:01,280
إلى خمسة. وهنا سنكون

1127
00:35:58,800 --> 00:36:02,720
تقديم بطاقة الكتاب قريبا جدا. حسنًا،

1128
00:36:01,280 --> 00:36:04,160
لذا، أولًا وقبل كل شيء، علينا أن نعتني به

1129
00:36:02,720 --> 00:36:05,960
منتج التصفية وبعد ذلك سنذهب

1130
00:36:04,160 --> 00:36:07,480
أن تقفز إلى بطاقة الكتاب. لذا،

1131
00:36:05,960 --> 00:36:09,040
سنقوم بوضع بطاقتنا في

1132
00:36:07,480 --> 00:36:10,960
بضع ثوان ولكن أولا وقبل كل شيء، علينا أن نفعل ذلك

1133
00:36:09,040 --> 00:36:12,760
جلب البيانات لدينا. حسنا، داخل هذا

1134
00:36:10,960 --> 00:36:14,240
مكون. لذا، ما سأفعله هو

1135
00:36:12,760 --> 00:36:15,880
أنني سأستخدم تأثير الاستخدام الخاص بي

1136
00:36:14,240 --> 00:36:17,480
هنا. لذلك، سأستخدم فقط مثل الاستخدام

1137
00:36:15,880 --> 00:36:19,240
تأثير وهنا سنكون

1138
00:36:17,480 --> 00:36:21,320
تمرير وظيفتنا داخل هناك و

1139
00:36:19,240 --> 00:36:22,600
أيضا مجموعة التبعية لدينا. لذلك، بالنسبة ل

1140
00:36:21,320 --> 00:36:24,000
مجموعة التبعية، ونحن في طريقنا إلى أن يكون

1141
00:36:22,600 --> 00:36:25,560
تمرير الصفحة الحالية عند

1142
00:36:24,000 --> 00:36:27,359
تغييرات الصفحة الحالية وأيضا

1143
00:36:25,560 --> 00:36:29,480
الكلمة الرئيسية. لذلك، تريد فقط إعادة الجلب

1144
00:36:27,359 --> 00:36:30,400
كل المحتوى لدينا. لذا، بناءً على ذلك،

1145
00:36:29,480 --> 00:36:32,120
أولا وقبل كل شيء، سنكون

1146
00:36:30,400 --> 00:36:33,400
الإعلان عن عنوان URL الخاص بنا وسيكون

1147
00:36:32,120 --> 00:36:34,920
يساوي كما تعلمون، اسمحوا لي أن أقوم بالتكبير

1148
00:36:33,400 --> 00:36:37,120
قليلا هنا. وسنكون كذلك

1149
00:36:34,920 --> 00:36:40,080
الإعداد هناك لمثل https وبعد ذلك

1150
00:36:37,120 --> 00:36:42,480
مرة أخرى، لدينا json.com وهمية وبعد ذلك

1151
00:36:40,080 --> 00:36:43,960
منتجات القطع للأمام. ثم هنا

1152
00:36:42,480 --> 00:36:45,440
ونحن في طريقنا لتوفير الحد ل

1153
00:36:43,960 --> 00:36:47,040
هناك. إذا كنت لا ترغب في توفير

1154
00:36:45,440 --> 00:36:48,920
الحد، لذلك ليس عليك القيام بذلك. لكن

1155
00:36:47,040 --> 00:36:50,120
في حالتي، سأفعل ذلك. أنا

1156
00:36:48,920 --> 00:36:51,560
سوف يتم تقديم المحتوى الخاص بي

1157
00:36:50,120 --> 00:36:54,320
ديناميكيا، لذلك سأقوم بتغيير ذلك

1158
00:36:51,560 --> 00:36:55,800
إلى القالب الحرفي.

1159
00:36:54,320 --> 00:36:57,200
كل ما تريد أن تسمي ذلك. أنا

1160
00:36:55,800 --> 00:36:59,800
سأقدم رمز الدولار الخاص بي بشكل صحيح

1161
00:36:57,200 --> 00:37:02,000
هنا ثم العناصر في كل صفحة وهي

1162
00:36:59,800 --> 00:37:03,400
تم ضبطه الآن على 12 عنصرًا فقط هنا. أنت

1163
00:37:02,000 --> 00:37:05,680
يمكن أن يزيد أو ينقص ذلك إذا كنت

1164
00:37:03,400 --> 00:37:08,320
أراد أن. وفي حالتي، سأفعل

1165
00:37:05,680 --> 00:37:10,440
فقط اضبط ذلك على الإعجاب بـ 12 و12 سيفي بالغرض.

1166
00:37:08,320 --> 00:37:11,760
وتخطي. دعونا فقط نقدم تخطينا

1167
00:37:10,440 --> 00:37:13,720
هنا. وهذا سوف يكون

1168
00:37:11,760 --> 00:37:15,600
ديناميكية، لذلك سأكتب مثل بلدي

1169
00:37:13,720 --> 00:37:18,600
رمز الدولار. واسمحوا لي فقط أن أقدم أ

1170
00:37:15,600 --> 00:37:19,920
الصفحة الحالية ناقص واحد ثم خارجها

1171
00:37:18,600 --> 00:37:22,440
ومن هناك، نريد فقط توفير أ

1172
00:37:19,920 --> 00:37:24,840
مرات العناصر لكل صفحة. حسنًا، إنه كذلك

1173
00:37:22,440 --> 00:37:26,200
سنقدم لنا عنوان URL الخاص بنا بناءً على ذلك.

1174
00:37:24,840 --> 00:37:28,280
الآن، تحت عنوان URL هذا، علينا أن نفعل ذلك

1175
00:37:26,200 --> 00:37:30,000
تحقق من الكلمة الرئيسية لدينا. حسنًا ، إذا كنت

1176
00:37:28,280 --> 00:37:33,359
لديك بالفعل كلمتنا الرئيسية، لذلك عليك أن تفعل ذلك

1177
00:37:30,000 --> 00:37:36,640
قم بتغيير عنوان URL الخاص بنا إلى عنوان URL هذا مثل http

1178
00:37:33,359 --> 00:37:39,760
ttps ثم دمية لدينا. هيا يا دمية

1179
00:37:36,640 --> 00:37:41,320
json. منتجات json.com المائلة للأمام

1180
00:37:39,760 --> 00:37:43,160
ومن ثم البحث. اسمحوا لي أن أقدم أ

1181
00:37:41,320 --> 00:37:44,960
الكلمة الرئيسية هنا. وهنا نحن ذاهبون

1182
00:37:43,160 --> 00:37:46,480
ليتم عرض كلمتنا الرئيسية بشكل صحيح

1183
00:37:44,960 --> 00:37:48,480
هنا. حسنًا، هذا سيكون

1184
00:37:46,480 --> 00:37:51,640
التالي. وأخيرا، علينا أن نستخدم

1185
00:37:48,480 --> 00:37:51,640
محاورنا

1186
00:37:56,840 --> 00:38:00,560
لجلب كل المحتوى لدينا. لذلك، يمكنك

1187
00:37:58,920 --> 00:38:01,800
استخدم الجلب تمامًا إذا أردت ذلك.

1188
00:38:00,560 --> 00:38:04,040
لكن في حالتي، سأقوم بالإعداد فقط

1189
00:38:01,800 --> 00:38:05,240
أن مثل axios. ولكن للقيام بذلك، نحن

1190
00:38:04,040 --> 00:38:07,200
لقد قمت بالفعل بتثبيت ذلك ولكن علينا أن نفعل ذلك

1191
00:38:05,240 --> 00:38:09,240
احصل على هذا هنا بالأعلى. لذلك، أنا

1192
00:38:07,200 --> 00:38:11,080
استوردت ذلك بالفعل. حسنا، لدينا

1193
00:38:09,240 --> 00:38:13,320
للاستيلاء على محاورنا والآن علينا أن نفعل ذلك

1194
00:38:11,080 --> 00:38:15,760
فقط اتصل بطريقة get الخاصة بنا وعلينا أن نفعل ذلك

1195
00:38:13,320 --> 00:38:17,920
قم بتمرير عنوان URL الخاص بنا إلى هناك. وبعد ذلك نحن

1196
00:38:15,760 --> 00:38:19,240
يجب أن تمر لدينا بعد ذلك.

1197
00:38:17,920 --> 00:38:21,520
حسنًا، فلنقدم فقط ما لدينا

1198
00:38:19,240 --> 00:38:22,960
إجابة. والآن للرد، ماذا

1199
00:38:21,520 --> 00:38:25,680
هل علينا أن نفعل؟ علينا أن نضع

1200
00:38:22,960 --> 00:38:27,640
المنتجات إلى Response.data

1201
00:38:25,680 --> 00:38:28,760
ومن ثم هذا المنتج. حسنًا ، إذا كنت

1202
00:38:27,640 --> 00:38:30,000
تريد التحقق من ذلك، اسمحوا لي أن تظهر فقط

1203
00:38:28,760 --> 00:38:31,600
لك ذلك. لذا، سأقوم بالنسخ فقط

1204
00:38:30,000 --> 00:38:33,400
ذلك من هنا. وأنا ذاهب فقط

1205
00:38:31,600 --> 00:38:35,280
تسجيل ذلك إلى وحدة التحكم مثل

1206
00:38:33,400 --> 00:38:36,640
Response.data.products.

1207
00:38:35,280 --> 00:38:37,960
لكنني سأقدم أيضًا صيدًا

1208
00:38:36,640 --> 00:38:39,920
بيان. لذا، إذا حصلت على نوع ما

1209
00:38:37,960 --> 00:38:42,000
خطأ، لذلك تريد أن ترى

1210
00:38:39,920 --> 00:38:44,640
console.error. وهنا نحن في طريقنا إلى

1211
00:38:42,000 --> 00:38:46,040
يكون المرور مثل خطأ في جلب البيانات.

1212
00:38:44,640 --> 00:38:48,240
وسأستخدم خطأي بشكل صحيح

1213
00:38:46,040 --> 00:38:49,920
هنا. لذا، سأقوم بحفظ الملف الخاص بي. و

1214
00:38:48,240 --> 00:38:53,000
الآن اسمحوا لي أن أعرض لكم كل هذا المحتوى.

1215
00:38:49,920 --> 00:38:55,080
حسنًا، هنا يمكنك أن ترى. يا إلهي نحن

1216
00:38:53,000 --> 00:38:56,359
حصلت على نوع من الخطأ هنا.

1217
00:38:55,080 --> 00:38:59,240
دعونا فقط التحقق من ذلك. إذن ما هو

1218
00:38:56,359 --> 00:39:00,640
يحدث؟ ينبغي أن يكون من المنتجات. لا

1219
00:38:59,240 --> 00:39:02,560
ماذا بحق الجحيم أنا أكتب فقط مثل

1220
00:39:00,640 --> 00:39:04,359
المنتجات. لذا، سأقوم بحفظ الملف الخاص بي

1221
00:39:02,560 --> 00:39:06,320
وتشغيل ذلك. وهنا يمكنك أن ترى أننا كذلك

1222
00:39:04,359 --> 00:39:08,720
الآن الحصول على كل تلك البيانات هنا

1223
00:39:06,320 --> 00:39:10,280
باستخدام محاورنا. لذا، نعم، كان ذلك

1224
00:39:08,720 --> 00:39:11,200
أشياء بسيطة وسهلة. الشيء التالي

1225
00:39:10,280 --> 00:39:12,720
ما يتعين علينا القيام به، سأفعل ذلك فقط

1226
00:39:11,200 --> 00:39:13,840
إزالة ذلك من هنا. الشيء التالي

1227
00:39:12,720 --> 00:39:15,760
ما يتعين علينا القيام به هو ما يتعين علينا القيام به

1228
00:39:13,840 --> 00:39:16,840
رعاية الترشيح. حسنا، لذلك

1229
00:39:15,760 --> 00:39:19,000
سأقوم فقط بإنشاء ملفي

1230
00:39:16,840 --> 00:39:20,800
وظيفة هنا. مثل الحصول على مرشح

1231
00:39:19,000 --> 00:39:22,480
البند. مثل الحصول على منتجات التصفية. لذا، سأفعل

1232
00:39:20,800 --> 00:39:24,040
فقط اكتب مثل هذا سيكون

1233
00:39:22,480 --> 00:39:25,760
وظيفة ضخمة بالمناسبة. انا ذاهب ل

1234
00:39:24,040 --> 00:39:27,480
ارجع. والآن اسمحوا لي فقط أن أقدم أ

1235
00:39:25,760 --> 00:39:30,160
قليلا من التباعد هنا. ودعونا

1236
00:39:27,480 --> 00:39:33,000
فقط قم بإنشاء منتجاتنا التي تمت تصفيتها.

1237
00:39:30,160 --> 00:39:34,600
هيا، p r o d u c t s. والآن بالداخل

1238
00:39:33,000 --> 00:39:36,680
هذه الوظيفة، ماذا عليك أن تفعل؟

1239
00:39:34,600 --> 00:39:38,000
أولا وقبل كل شيء، علينا أن نضع مرشحنا

1240
00:39:36,680 --> 00:39:40,760
المنتجات

1241
00:39:38,000 --> 00:39:42,880
لهذا المرشح ليس مرشحا ولكن

1242
00:39:40,760 --> 00:39:44,720
المنتجات التي هي ما هي الدولة

1243
00:39:42,880 --> 00:39:46,440
والتي قمنا بتعريفها بالفعل هنا،

1244
00:39:44,720 --> 00:39:48,360
والذي تم ضبطه الآن على المصفوفة الفارغة

1245
00:39:46,440 --> 00:39:50,000
هنا. والآن دعونا نتغير فقط

1246
00:39:48,360 --> 00:39:52,040
ذلك. حسنًا، سنقوم بالإعداد

1247
00:39:50,000 --> 00:39:53,680
أن لتلك المنتجات التصفية. والآن

1248
00:39:52,040 --> 00:39:55,920
وتحت ذلك ماذا علينا أن نفعل؟

1249
00:39:53,680 --> 00:39:57,720
علينا أن نتحقق مما إذا كان لدينا بالفعل

1250
00:39:55,920 --> 00:39:59,680
الفئة المختارة. إذن ماذا لديك

1251
00:39:57,720 --> 00:40:02,080
القيام به في هذه الحالة؟ نريد الحصول على

1252
00:39:59,680 --> 00:40:03,560
منتجات الفلتر هيا الفلتر

1253
00:40:02,080 --> 00:40:05,000
المنتجات المتغيرة، والتي نحن فقط

1254
00:40:03,560 --> 00:40:06,520
تم إنشاؤها هنا. لذلك سأقوم بالنسخ

1255
00:40:05,000 --> 00:40:08,200
ذلك من هنا. والآن اسمحوا لي فقط

1256
00:40:06,520 --> 00:40:11,280
ضعه هنا. لذا قم بتصفية المنتجات،

1257
00:40:08,200 --> 00:40:12,760
وعلينا أن نستدعي طريقة التصفية الخاصة بنا

1258
00:40:11,280 --> 00:40:14,480
هناك. الآن هنا، ماذا عليك أن تفعل؟

1259
00:40:12,760 --> 00:40:16,800
علينا أن نمرر منتجنا إلى الداخل

1260
00:40:14,480 --> 00:40:17,960
هناك، مثل وظيفة السهم. و

1261
00:40:16,800 --> 00:40:20,640
ثم نحن في طريقنا للتحقق مثل

1262
00:40:17,960 --> 00:40:23,480
فئة المنتج، هيا، الفئة هي

1263
00:40:20,640 --> 00:40:24,760
الثلاثي يساوي الفئة المحددة.

1264
00:40:23,480 --> 00:40:26,920
لذلك سأقوم بإعادة تسمية ذلك ليعجبك

1265
00:40:24,760 --> 00:40:28,560
منتجات التصفية، والتي قمنا بها بالفعل

1266
00:40:26,920 --> 00:40:30,400
المحددة أعلاه. لذلك دعونا نضعها

1267
00:40:28,560 --> 00:40:32,360
هنا. وسأحفظ هناك.

1268
00:40:30,400 --> 00:40:34,200
لذلك إذا قمت بحفظ هناك، والآن اسمحوا لي فقط

1269
00:40:32,360 --> 00:40:35,440
قم بتسجيل ذلك إلى وحدة التحكم مثل المنتجات

1270
00:40:34,200 --> 00:40:36,840
هنا. لذلك سأقوم بحفظ بلدي

1271
00:40:35,440 --> 00:40:38,480
ملف.

1272
00:40:36,840 --> 00:40:40,040
ولكن من أجل ذلك، علينا أيضًا أن نطلق عليه ذلك

1273
00:40:38,480 --> 00:40:41,680
في مكان ما. لذا، كما تعلمون، سأفعل

1274
00:40:40,040 --> 00:40:43,000
اتصل بهذا هنا. اه سأفعل فقط

1275
00:40:41,680 --> 00:40:45,080
إنشاء متغير. سأعطيه الاسم

1276
00:40:43,000 --> 00:40:46,640
من مثل المنتجات التي تمت تصفيتها، وانها

1277
00:40:45,080 --> 00:40:48,400
سيكون مساويا للحصول على مرشح

1278
00:40:46,640 --> 00:40:51,800
المنتجات، وأنا ذاهب للتنفيذ

1279
00:40:48,400 --> 00:40:53,640
هناك. فإذا قمت بالتنفيذ هناك، كذلك نحن أيضًا

1280
00:40:51,800 --> 00:40:54,920
يجب عليك تسجيل ذلك إلى وحدة التحكم. أوه، أنت

1281
00:40:53,640 --> 00:40:56,520
أعلم أنني لن أقوم بتخزين ذلك في أي شيء

1282
00:40:54,920 --> 00:40:59,160
متغير الآن في الوقت الراهن. لذلك سأفعل

1283
00:40:56,520 --> 00:41:00,760
احفظ الملف الخاص بي. ونعم.

1284
00:40:59,160 --> 00:41:02,680
اسمحوا لي أن أنعش هناك. وهنا أنت

1285
00:41:00,760 --> 00:41:04,600
أستطيع أن أرى، وهنا فئتي. لذلك إذا كنت

1286
00:41:02,680 --> 00:41:06,360
انقر على هذا الأول، وسوف

1287
00:41:04,600 --> 00:41:08,160
تعطينا كل تلك البيانات بناء على ذلك

1288
00:41:06,360 --> 00:41:09,320
جمال محدد هنا إذن هذا

1289
00:41:08,160 --> 00:41:10,640
سوف يكون

1290
00:41:09,320 --> 00:41:12,480
هذا واحد سيكون له فئة

1291
00:41:10,640 --> 00:41:14,560
الجمال، وكل منهم سوف يكون

1292
00:41:12,480 --> 00:41:16,320
فئة اسمحوا لي أن أعرض لكم ذلك

1293
00:41:14,560 --> 00:41:17,720
الجمال هنا. لذلك إذا قمت بالنقر فوق

1294
00:41:16,320 --> 00:41:19,920
الأثاث، فإنه سوف يعطينا

1295
00:41:17,720 --> 00:41:21,240
البيانات المبنية على هذا الأثاث هنا.

1296
00:41:19,920 --> 00:41:23,760
وهنا يمكنك أن ترى أن كلاهما سوف يفعل ذلك

1297
00:41:21,240 --> 00:41:25,640
لديك معرف. لماذا أقول الهوية، ولكن

1298
00:41:23,760 --> 00:41:27,360
فئة الأثاث هنا. هكذا

1299
00:41:25,640 --> 00:41:29,400
الآن اسمحوا لي أن أقوم بالتحديث هناك. وهذا

1300
00:41:27,360 --> 00:41:30,720
وكان المرشح الأول. الآن اسمحوا لي فقط

1301
00:41:29,400 --> 00:41:31,800
اعتني بالباقي منهم. لكن أنت

1302
00:41:30,720 --> 00:41:33,640
أعلم أنني سأقوم أيضًا بتخزينها

1303
00:41:31,800 --> 00:41:35,560
داخل هذا المتغير. حسنًا، فلنفعل ذلك

1304
00:41:33,640 --> 00:41:37,520
فقط قم بإزالة ذلك من هنا. وكان ذلك

1305
00:41:35,560 --> 00:41:39,240
أول ما لدينا إذا تحقق. الآن تحت هذا

1306
00:41:37,520 --> 00:41:41,560
إذا تم التحقق، علينا أيضًا التحقق من وجود

1307
00:41:39,240 --> 00:41:44,360
الحد الأدنى للسعر. حسنًا، إذا كان الحد الأدنى

1308
00:41:41,560 --> 00:41:46,760
السعر لا يساوي غير محدد، أنت

1309
00:41:44,360 --> 00:41:48,480
ترغب في الحصول على منتجاتنا التي تمت تصفيتها، و

1310
00:41:46,760 --> 00:41:51,080
تريد ضبط ذلك على التصفية

1311
00:41:48,480 --> 00:41:52,720
المنتجات، هيا، تصفيتها

1312
00:41:51,080 --> 00:41:54,080
Products.filter.

1313
00:41:52,720 --> 00:41:56,080
والآن بالداخل هناك، سنكون كذلك

1314
00:41:54,080 --> 00:41:57,200
تمرير منتجاتنا داخل هناك. و

1315
00:41:56,080 --> 00:42:00,600
عليك فقط التحقق من ذلك

1316
00:41:57,200 --> 00:42:02,360
سعر المنتج، هيا، السعر

1317
00:42:00,600 --> 00:42:03,760
أكبر من أو يساوي الحد الأدنى

1318
00:42:02,360 --> 00:42:05,520
السعر الذي حددناه بالفعل

1319
00:42:03,760 --> 00:42:07,040
أعلاه. حسنًا، دعني أذهب الآن

1320
00:42:05,520 --> 00:42:08,800
هناك. وهنا يمكنك أن ترى، نحن الآن

1321
00:42:07,040 --> 00:42:10,720
الحصول على هذا الحد الأدنى للسعر من الاستخدام

1322
00:42:08,800 --> 00:42:12,600
مرشح. نريد تصفية الإعجابات

1323
00:42:10,720 --> 00:42:14,640
إذا كان سعر المنتج أكبر من أو

1324
00:42:12,600 --> 00:42:16,120
يساوي الحد الأدنى للسعر. لذلك في ذلك

1325
00:42:14,640 --> 00:42:18,560
الوضع، يمكننا تسجيل ذلك تماما ل

1326
00:42:16,120 --> 00:42:19,640
وحدة التحكم مثل منتجات التصفية. لكن

1327
00:42:18,560 --> 00:42:20,920
كما تعلمون، فإنه سوف يضيع الكثير من

1328
00:42:19,640 --> 00:42:22,920
وقتك. لذلك إذا كان لديك وقت فراغ،

1329
00:42:20,920 --> 00:42:24,000
حتى تتمكن من المضي قدمًا والتصفية تمامًا

1330
00:42:22,920 --> 00:42:25,960
من خلال ذلك. لذلك أنا لن أفعل

1331
00:42:24,000 --> 00:42:27,800
ذلك. حسنًا، كان هذا للحد الأدنى

1332
00:42:25,960 --> 00:42:30,920
واحد. ولكن الآن دعونا فقط نوفر ذلك

1333
00:42:27,800 --> 00:42:32,560
الحد الأقصى للسعر لا يساوي، تعال

1334
00:42:30,920 --> 00:42:34,160
على، لا يساوي

1335
00:42:32,560 --> 00:42:36,600
اه غير محدد لذلك في هذه الحالة، أنت

1336
00:42:34,160 --> 00:42:38,560
ترغب في الحصول على منتجاتنا التي تمت تصفيتها، و

1337
00:42:36,600 --> 00:42:41,400
تريد ضبط ذلك على التصفية

1338
00:42:38,560 --> 00:42:43,040
طريقة المنتجات.التصفية. والآن بالداخل

1339
00:42:41,400 --> 00:42:44,720
هناك، علينا أن نمرر منتجنا.

1340
00:42:43,040 --> 00:42:47,080
سعر المنتج

1341
00:42:44,720 --> 00:42:48,800
أقل من أو يساوي الحد الأقصى

1342
00:42:47,080 --> 00:42:50,480
السعر، والذي يأتي أيضا من الاستخدام

1343
00:42:48,800 --> 00:42:52,520
سياق التصفية حسنًا، سوف يحدث ذلك

1344
00:42:50,480 --> 00:42:54,400
تعطينا القيم على أساس هناك. وبعد ذلك،

1345
00:42:52,520 --> 00:42:55,880
وعلينا أيضًا أن نهتم بهذا البحث

1346
00:42:54,400 --> 00:42:57,720
الحقل كما لذلك سأفعل ذلك بشكل صحيح

1347
00:42:55,880 --> 00:42:59,240
الآن. وبعد ذلك، علينا أيضًا أن نهتم

1348
00:42:57,720 --> 00:43:00,800
من حقل الإدخال هذا أيضًا. إذا كنت

1349
00:42:59,240 --> 00:43:03,120
البحث عن بعض العناصر، ونحن في طريقنا إلى ذلك

1350
00:43:00,800 --> 00:43:04,680
تقديم هذا العنصر المحدد فقط. حسنًا،

1351
00:43:03,120 --> 00:43:06,400
لذلك دعونا نفعل ذلك. انا ذاهب ل

1352
00:43:04,680 --> 00:43:09,440
تقديم بيان إذا الخاص بي هنا. لذا

1353
00:43:06,400 --> 00:43:10,920
إذا استعلام البحث، والذي يأتي أيضا

1354
00:43:09,440 --> 00:43:12,840
من سياق API، لذلك نحن في طريقنا إلى

1355
00:43:10,920 --> 00:43:14,320
أن تستخدم مثل منتج التصفية. والآن

1356
00:43:12,840 --> 00:43:16,560
سيكون مساويا للمرشح

1357
00:43:14,320 --> 00:43:18,640
طريقة المنتج.التصفية. ونحن ذاهبون

1358
00:43:16,560 --> 00:43:19,640
ليتم تمرير منتجاتنا داخل هناك.

1359
00:43:18,640 --> 00:43:21,680
حسنًا، فلنستخدم فقط

1360
00:43:19,640 --> 00:43:24,400
عنوان المنتج. نحن مهتمون فقط

1361
00:43:21,680 --> 00:43:26,280
العنوان. وتريد ضبط ذلك على

1362
00:43:24,400 --> 00:43:28,040
صغيرة لأنه يمكن أن يكون هناك الكثير من

1363
00:43:26,280 --> 00:43:29,560
الصراعات بين الحروف الكبيرة و

1364
00:43:28,040 --> 00:43:31,600
أحرف صغيرة. لذلك هذا هو السبب الوحيد لوجودي

1365
00:43:29,560 --> 00:43:33,240
تغيير ذلك إلى الأحرف الصغيرة. سأفعل

1366
00:43:31,600 --> 00:43:35,120
قم أيضًا بتوفير طريقة التضمين

1367
00:43:33,240 --> 00:43:38,120
هناك. وهنا علينا أن نمرر

1368
00:43:35,120 --> 00:43:40,720
استعلام البحث، ثم إلى أحرف صغيرة.

1369
00:43:38,120 --> 00:43:42,200
هيا، بالأحرف الصغيرة. تعال. ل

1370
00:43:40,720 --> 00:43:44,400
أحرف صغيرة. ها نحن ذا. وأنا ذاهب ل

1371
00:43:42,200 --> 00:43:46,360
تنفيذ هناك أيضا. حسنًا، هذا هو الحال الآن

1372
00:43:44,400 --> 00:43:48,480
تم القيام به تماما. وأنت تعرف ماذا؟ أنا

1373
00:43:46,360 --> 00:43:50,000
الذهاب أيضا لرعاية

1374
00:43:48,480 --> 00:43:51,360
اه أن التصفية كذلك. لذلك انا ذاهب

1375
00:43:50,000 --> 00:43:54,120
لحفظ هذا الملف، والآن اسمحوا لي فقط

1376
00:43:51,360 --> 00:43:56,240
تظهر لك هناك. اسمحوا لي أن الاعتناء بها

1377
00:43:54,120 --> 00:43:57,560
أين يوجد في العالم؟

1378
00:43:56,240 --> 00:43:59,520
تم ضبط هذا الآن على خطأ. لذلك انا ذاهب

1379
00:43:57,560 --> 00:44:00,880
لتعيين ذلك على أنه صحيح. سأضبط ذلك على

1380
00:43:59,520 --> 00:44:02,560
صحيح. وهنا يمكنك أن ترى، الآن اسمحوا لي

1381
00:44:00,880 --> 00:44:04,440
فقط اهتم بالرخيص، الباهظ الثمن،

1382
00:44:02,560 --> 00:44:05,840
والشعبية. لذلك دعونا نذهب فقط

1383
00:44:04,440 --> 00:44:08,320
العودة.

1384
00:44:05,840 --> 00:44:09,520
حسنًا، دعني أعتني بذلك. وأنا

1385
00:44:08,320 --> 00:44:11,600
أعتقد أن هذا سيكون النهائي

1386
00:44:09,520 --> 00:44:12,920
مرشح. لذلك سأستخدم مفتاحي بشكل صحيح

1387
00:44:11,600 --> 00:44:15,280
هنا، وسأقوم بتمرير

1388
00:44:12,920 --> 00:44:16,640
قم بتصفية الفلتر بأكمله بالداخل هناك.

1389
00:44:15,280 --> 00:44:18,680
والآن بالداخل هناك، سنكون كذلك

1390
00:44:16,640 --> 00:44:20,720
باستخدام الحالات كما لو تم تعيين الحالة

1391
00:44:18,680 --> 00:44:22,359
باهظة الثمن، فماذا تريد أن تفعل

1392
00:44:20,720 --> 00:44:25,560
في تلك الحالة؟ نريد فقط أن

1393
00:44:22,359 --> 00:44:26,800
إرجاع المنتجات التي تمت تصفيتها

1394
00:44:25,560 --> 00:44:28,480
طريقة. سوف نستخدم ذلك

1395
00:44:26,800 --> 00:44:30,480
طريقة الفرز. وبعد ذلك سنكون

1396
00:44:28,480 --> 00:44:32,480
تمرير مثل معلمتين مثل A و

1397
00:44:30,480 --> 00:44:35,480
ب. يمكنك تمرير X وY. يمكنك النجاح

1398
00:44:32,480 --> 00:44:37,680
أي شيء تريده. ب.السعر ناقصا

1399
00:44:35,480 --> 00:44:39,400
أ.السعر. حسنًا، هذا سيكون لـ

1400
00:44:37,680 --> 00:44:40,760
الأول، مثل باهظة الثمن

1401
00:44:39,400 --> 00:44:42,440
واحد. وأنا ذاهب أيضا فقط

1402
00:44:40,760 --> 00:44:44,120
تكرار ذلك للواحدة الشعبية و

1403
00:44:42,440 --> 00:44:46,359
أيضا للرخيصة. لذلك سأفعل

1404
00:44:44,120 --> 00:44:47,960
فقط أكتب مثل رخيصة في هذه الحالة.

1405
00:44:46,359 --> 00:44:51,080
وبعد ذلك سنكون هنا

1406
00:44:47,960 --> 00:44:53,200
تغيير ذلك من B إلى A، وأيضا

1407
00:44:51,080 --> 00:44:55,280
هذا من A إلى B. حسنًا، إنه كذلك

1408
00:44:53,200 --> 00:44:56,760
سوف تعطينا فقط تلك الرخيصة.

1409
00:44:55,280 --> 00:44:59,240
وسنقوم أيضًا بالبحث عنه

1410
00:44:56,760 --> 00:45:00,560
الشعبية كذلك. والآن في هذا

1411
00:44:59,240 --> 00:45:02,160
الحالة، ونحن لن نعمل مع

1412
00:45:00,560 --> 00:45:05,040
التسعير. نحن في طريقنا إلى العمل

1413
00:45:02,160 --> 00:45:08,880
مع التقييم. B.B. تصنيف ناقص

1414
00:45:05,040 --> 00:45:10,160
أ.التصنيف. مثله. حسنًا، إذن هو كذلك

1415
00:45:08,880 --> 00:45:11,760
سوف تعطينا كل تلك البيانات. لو

1416
00:45:10,160 --> 00:45:13,560
هذا ليس هو الحال، نريد فقط أن

1417
00:45:11,760 --> 00:45:15,840
توفير حالة افتراضية هناك، ونحن

1418
00:45:13,560 --> 00:45:16,920
تريد العودة فقط التي تمت تصفيتها

1419
00:45:15,840 --> 00:45:19,520
المنتجات هنا. لذلك سأفعل

1420
00:45:16,920 --> 00:45:21,040
احفظ ملفي، وهذا سيكون كل شيء.

1421
00:45:19,520 --> 00:45:22,160
لذلك سأقوم فقط بتسجيل ذلك في وحدة التحكم،

1422
00:45:21,040 --> 00:45:23,800
والآن اسمحوا لي أن أعرض لكم جميعا

1423
00:45:22,160 --> 00:45:25,800
لهم. لذلك سأستخدم فقط مثل الفلتر

1424
00:45:23,800 --> 00:45:27,120
المنتجات. انا ذاهب لحفظ هذا الملف.

1425
00:45:25,800 --> 00:45:28,280
والآن اسمحوا لي أن أعرض لكم جميعا

1426
00:45:27,120 --> 00:45:30,000
هناك. إذن هنا يمكنك أن ترى، الأمر يحدث

1427
00:45:28,280 --> 00:45:31,960
لتعطيني الكثير من البيانات. اسمحوا لي فقط

1428
00:45:30,000 --> 00:45:33,840
امسح هذا. وقبل كل شيء، أنا

1429
00:45:31,960 --> 00:45:35,760
سوف تبحث عن شيء من هذا القبيل

1430
00:45:33,840 --> 00:45:37,520
ه ث ق. وهنا يمكنك أن ترى، أنها تسير

1431
00:45:35,760 --> 00:45:40,120
لتعطينا تلك البيانات، ولكن لا يمكننا رؤيتها

1432
00:45:37,520 --> 00:45:41,359
تلك البيانات لأننا لم نقدمها

1433
00:45:40,120 --> 00:45:42,880
محتوى الكتاب، الذي سنكون عليه

1434
00:45:41,359 --> 00:45:44,560
القيام به في بضع ثوان. لذلك إذا كنت فقط

1435
00:45:42,880 --> 00:45:47,880
توسيع هناك، وهنا يمكنك أن ترى، انها

1436
00:45:44,560 --> 00:45:50,080
سوف تعطينا e w s e n c و e i y

1437
00:45:47,880 --> 00:45:51,560
وهكذا دواليك. لذلك كان هذا

1438
00:45:50,080 --> 00:45:53,600
الفلتر الأول، وهو ما يعني مثل الأول

1439
00:45:51,560 --> 00:45:56,520
الفلتر يعمل بشكل كامل. إذا كتبت

1440
00:45:53,600 --> 00:45:59,440
مثل الحد الأدنى لقيمة 19، وبعد ذلك

1441
00:45:56,520 --> 00:46:00,680
الحد الأقصى لقيمة مثل 200، ربما.

1442
00:45:59,440 --> 00:46:02,520
وهنا يمكنك أن ترى، سوف يعطي

1443
00:46:00,680 --> 00:46:04,560
لنا الحد الأدنى من القيمة، وانها سوف

1444
00:46:02,520 --> 00:46:06,480
كما تعطينا الحد الأقصى كما تعلمون، اسمحوا لي فقط

1445
00:46:04,560 --> 00:46:08,480
تظهر لك الحد الأدنى منها. لذلك سأفعل ذلك فقط

1446
00:46:06,480 --> 00:46:10,160
توسيع هناك.

1447
00:46:08,480 --> 00:46:12,320
وتحقق من التسعير. هكذا هو الحال الآن

1448
00:46:10,160 --> 00:46:14,359
تم ضبطه على 19 لأنني قدمت الحد الأدنى

1449
00:46:12,320 --> 00:46:16,720
قيمة 19 إلى هناك. والآن اسمحوا لي

1450
00:46:14,359 --> 00:46:18,840
فقط تحقق من الحد الأقصى. حسنا، اسمحوا لي

1451
00:46:16,720 --> 00:46:21,560
فقط تحقق من هذا. لا، هذا ليس

1452
00:46:18,840 --> 00:46:22,880
الحد الأقصى واحد. اسمحوا لي أن أقدم 200 الحق

1453
00:46:21,560 --> 00:46:26,200
هنا. لكن أولاً وقبل كل شيء، دعونا نوضح الأمر

1454
00:46:22,880 --> 00:46:28,040
هذا خارج. اسمحوا لي أن أقدم 200، والآن

1455
00:46:26,200 --> 00:46:31,520
انها سوف تعطينا

1456
00:46:28,040 --> 00:46:34,000
أعتقد 200. دعني أرى فقط.

1457
00:46:31,520 --> 00:46:34,000
حسنًا.

1458
00:46:34,800 --> 00:46:38,640
نعم، فإنه لا يساوي 200. ولكن

1459
00:46:37,160 --> 00:46:41,520
نعم، هذه البيانات تأتي تماما من

1460
00:46:38,640 --> 00:46:43,280
واجهة برمجة التطبيقات. إذن هذه ليست واجهة برمجة التطبيقات الخاصة بي. هكذا

1461
00:46:41,520 --> 00:46:44,800
لا يمكننا اختبار ذلك الآن. لكن

1462
00:46:43,280 --> 00:46:46,280
على أية حال، كلاهما يعملان الآن. أنا

1463
00:46:44,800 --> 00:46:48,560
يعني مثل كل هؤلاء الثلاثة

1464
00:46:46,280 --> 00:46:50,880
العمل. اسمحوا لي أن تحقق من التالي.

1465
00:46:48,560 --> 00:46:51,840
لذلك إذا تحققت من هذا الجمال، وهنا

1466
00:46:50,880 --> 00:46:53,680
كما ترون، فإنه سوف يعطينا جميعا

1467
00:46:51,840 --> 00:46:55,120
من منتجات التجميل تلك. إذا قمت بالنقر فوق

1468
00:46:53,680 --> 00:46:57,200
التفاحة، لذلك سوف تعطينا فقط

1469
00:46:55,120 --> 00:46:59,200
منتج التفاح هذا. ونعم، حصلنا على

1470
00:46:57,200 --> 00:47:00,640
خطأ لأنه يتعين علينا ربط هناك. نحن

1471
00:46:59,200 --> 00:47:02,680
لم تربط هناك. لذلك سنكون

1472
00:47:00,640 --> 00:47:05,920
القيام بذلك في بضع ثوان. لذا نعم،

1473
00:47:02,680 --> 00:47:07,800
اسمحوا لي جيسون أوه، هنا يمكنك أن ترى، لقد

1474
00:47:05,920 --> 00:47:10,120
ارتكب خطأ. اعتقدت أنني سأفعل

1475
00:47:07,800 --> 00:47:13,960
تكون ملزمة هناك، ولكن لا. علينا أن

1476
00:47:10,120 --> 00:47:16,080
قم بتغيير ذلك إلى بدلاً من us o c m، نحن

1477
00:47:13,960 --> 00:47:18,040
يجب تغيير ذلك إلى c o m. انا ذاهب

1478
00:47:16,080 --> 00:47:19,440
لإنقاذ هذا. والآن اسمحوا لي فقط

1479
00:47:18,040 --> 00:47:21,440
جرب هذا. لذلك سأقوم فقط بتنظيف هذا

1480
00:47:19,440 --> 00:47:22,920
خارج. وهنا سأختار فقط

1481
00:47:21,440 --> 00:47:24,400
التفاحة. سوف يعطينا فقط

1482
00:47:22,920 --> 00:47:26,359
منتج التفاح هذا هنا، مثل

1483
00:47:24,400 --> 00:47:28,080
التفاح التفاح التفاح التفاح. وإذا قمت بالنقر فوق

1484
00:47:26,359 --> 00:47:30,040
على الساعة، وسوف يعطينا جميعا

1485
00:47:28,080 --> 00:47:32,080
من تلك الساعات هنا، كما لدينا

1486
00:47:30,040 --> 00:47:34,080
ساعة بحزام من الجلد البني وما إلى ذلك

1487
00:47:32,080 --> 00:47:35,760
وهكذا دواليك. وكل شيء يعمل. و

1488
00:47:34,080 --> 00:47:37,440
الآن اسمحوا لي أن أقوم بالتحديث هناك. والآن

1489
00:47:35,760 --> 00:47:39,000
كل شيء يعمل بالطريقة التي نتوقعها

1490
00:47:37,440 --> 00:47:42,400
لهم للعمل. ولكن الآن علينا أن نقدم

1491
00:47:39,000 --> 00:47:43,840
كل هذا المحتوى الذي تمت تصفيته داخل موقعنا

1492
00:47:42,400 --> 00:47:46,080
الشاشة هنا. فكيف سنفعل

1493
00:47:43,840 --> 00:47:47,680
أن تفعل ذلك؟ دعونا نفعل ذلك فقط. هكذا

1494
00:47:46,080 --> 00:47:49,720
ما سأفعله هو أنني سأذهب

1495
00:47:47,680 --> 00:47:51,160
للذهاب إلى القاع، ونحن هنا

1496
00:47:49,720 --> 00:47:53,120
سوف يتم تقديم كتابنا

1497
00:47:51,160 --> 00:47:55,280
مكون. ولكن قبل أن أفعل ذلك، نحن

1498
00:47:53,120 --> 00:47:56,440
سوف نستخدم مثل منتجات التصفية،

1499
00:47:55,280 --> 00:47:57,760
وبعد ذلك سنقوم بالتكرار

1500
00:47:56,440 --> 00:47:59,800
من خلال جميع المنتجات، ونحن

1501
00:47:57,760 --> 00:48:01,200
يجب أن تحصل على واحدة تمت تصفيتها. والآن

1502
00:47:59,800 --> 00:48:03,920
في الداخل هناك، وهنا سنكون

1503
00:48:01,200 --> 00:48:05,480
تقديم كتابنا، هيا، بطاقة الكتاب.

1504
00:48:03,920 --> 00:48:06,720
حسنًا، سأقوم بالعرض هناك

1505
00:48:05,480 --> 00:48:08,480
هنا، وأنا ذاهب للتعليق

1506
00:48:06,720 --> 00:48:09,880
هذا خارج. انا ذاهب لحفظ هذا الملف.

1507
00:48:08,480 --> 00:48:11,320
سوف يعطينا خطأ. لكن الآن

1508
00:48:09,880 --> 00:48:13,680
دعونا ننشئ بطاقة كتابنا بشكل صحيح

1509
00:48:11,320 --> 00:48:15,040
هنا. Card.tsx.

1510
00:48:13,680 --> 00:48:16,440
والآن بالداخل هناك، أولاً وقبل كل شيء،

1511
00:48:15,040 --> 00:48:18,560
ونحن في طريقنا إلى الاستيلاء على الرابط لدينا

1512
00:48:16,440 --> 00:48:20,320
المكون، والذي سوف ترى لماذا أنا

1513
00:48:18,560 --> 00:48:23,200
القيام بذلك. وبعد ذلك سنكون

1514
00:48:20,320 --> 00:48:25,000
فقط باستخدام لدينا r a f c e. ودعونا فقط

1515
00:48:23,200 --> 00:48:26,760
إنشاء مكون كتابنا، بطاقة الكتاب

1516
00:48:25,000 --> 00:48:28,600
المكون على وجه الدقة. انا ذاهب ل

1517
00:48:26,760 --> 00:48:30,880
قم بإلغاء التعليق هناك. ودعونا ننتزع فقط

1518
00:48:28,600 --> 00:48:32,240
هناك هنا. احفظ الملف الخاص بي.

1519
00:48:30,880 --> 00:48:33,960
وهنا يمكنك أن ترى أننا وصلنا الآن

1520
00:48:32,240 --> 00:48:35,880
بطاقة كتاب، بطاقة كتاب، وما إلى ذلك وهكذا

1521
00:48:33,960 --> 00:48:37,359
إيابا. لقد فهمت الفكرة. لهذا الكتاب

1522
00:48:35,880 --> 00:48:39,080
البطاقة، ونحن في طريقنا لتمرير عدد قليل

1523
00:48:37,359 --> 00:48:41,960
الدعائم مثل أولا وقبل كل شيء، ونحن في طريقنا إلى

1524
00:48:39,080 --> 00:48:43,359
يتم تمرير المفتاح مثل Product.id.

1525
00:48:41,960 --> 00:48:45,880
وبعد ذلك سوف نمر أيضًا

1526
00:48:43,359 --> 00:48:47,720
المعرف نفسه، مثل Product.id مرة واحدة

1527
00:48:45,880 --> 00:48:49,840
مرة أخرى. ونحن في طريقنا لتمرير

1528
00:48:47,720 --> 00:48:52,359
العنوان، بحيث يكون مساويا ل

1529
00:48:49,840 --> 00:48:53,760
عنوان المنتج. وأيضا دعونا نمر فقط

1530
00:48:52,359 --> 00:48:55,680
صورتنا لأننا سنكون كذلك

1531
00:48:53,760 --> 00:48:57,440
تقديم الصورة. لذلك يمكننا استخدام مثل

1532
00:48:55,680 --> 00:49:00,440
المنتج. الصورة المصغرة.

1533
00:48:57,440 --> 00:49:03,320
صورة مصغرة. تعال. ن أ ط ل، تماما مثل

1534
00:49:00,440 --> 00:49:05,600
ذلك. ومن ثم السعر. وسوف السعر

1535
00:49:03,320 --> 00:49:07,000
يتم ضبطه على سعر المنتج.

1536
00:49:05,600 --> 00:49:08,480
حسنًا، دعوني الآن أحفظ ملفي فحسب،

1537
00:49:07,000 --> 00:49:10,240
وهذا سيكون كل شيء. أنا

1538
00:49:08,480 --> 00:49:12,400
لا أعرف لماذا يظهر لي هذا الخطأ،

1539
00:49:10,240 --> 00:49:13,760
لكننا سنصلح ذلك في بضع ثوان.

1540
00:49:12,400 --> 00:49:15,840
أولاً، اسمحوا لي أن أقوم بتفكيك البنية

1541
00:49:13,760 --> 00:49:16,720
كل تلك البيانات. لذلك سأستخدم فقط مثل

1542
00:49:15,840 --> 00:49:18,880
اه

1543
00:49:16,720 --> 00:49:21,400
معرف. تعال. دعنا فقط نحصل على هويتنا،

1544
00:49:18,880 --> 00:49:22,720
العنوان، وكذلك الصورة والسعر. كان

1545
00:49:21,400 --> 00:49:23,840
سوف تحصل على كل ذلك. لكن

1546
00:49:22,720 --> 00:49:25,800
أولا وقبل كل شيء، دعونا مجرد إنشاء

1547
00:49:23,840 --> 00:49:28,680
واجهة هناك. وسيكون ذلك أ

1548
00:49:25,800 --> 00:49:30,000
الدعائم بطاقة الكتاب. والآن داخل هذا

1549
00:49:28,680 --> 00:49:33,600
الواجهة التي سنقدمها

1550
00:49:30,000 --> 00:49:35,920
معرف السلسلة، وأيضا اه ليس أ

1551
00:49:33,600 --> 00:49:37,960
فاصلة. وسيكون العنوان أيضا أ

1552
00:49:35,920 --> 00:49:39,240
سلسلة. كل شيء سيكون سلسلة، لذلك

1553
00:49:37,960 --> 00:49:41,920
سأكتب فقط مثل الصورة ستكون

1554
00:49:39,240 --> 00:49:44,320
السلسلة وأيضا السعر سيكون أ

1555
00:49:41,920 --> 00:49:46,680
الرقم في هذه الحالة نحن نستخدم بلدي

1556
00:49:44,320 --> 00:49:48,720
رد فعل مكون وظيفي، لذلك رد فعل

1557
00:49:46,680 --> 00:49:50,440
هيا. رد فعل.FC

1558
00:49:48,720 --> 00:49:52,720
للمكون الوظيفي. وأنا

1559
00:49:50,440 --> 00:49:55,080
سوف مجرد تمرير كتابي

1560
00:49:52,720 --> 00:49:57,360
اه بطاقة. ها نحن ذا. بطاقة الكتاب، ج أ ص

1561
00:49:55,080 --> 00:49:58,640
د، ومن ثم الدعائم. حسنًا، سأفعل ذلك فحسب

1562
00:49:57,360 --> 00:50:00,480
قم بتمريرها هنا، وسوف تكون كذلك

1563
00:49:58,640 --> 00:50:02,480
يساوي هذه الوظيفة. لا ينبغي أن يكون

1564
00:50:00,480 --> 00:50:03,560
على قدم المساواة، لذلك سأقوم فقط بإزالة هناك، و

1565
00:50:02,480 --> 00:50:05,760
سأقوم فقط بالتغيير إلى هذا

1566
00:50:03,560 --> 00:50:06,920
data. حسنًا، هذا كل ما تحتاجه. و

1567
00:50:05,760 --> 00:50:09,200
الآن الشيء التالي الذي يتعين علينا القيام به هو

1568
00:50:06,920 --> 00:50:10,560
أنه يتعين علينا استخدام So، لاستخدام

1569
00:50:09,200 --> 00:50:12,480
أولا وقبل كل شيء، دعونا فقط إزالة هذا

1570
00:50:10,560 --> 00:50:14,880
بطاقة الكتاب، وسأقوم بتوفيرها

1571
00:50:12,480 --> 00:50:16,720
اسم الفئة أو الحدود والحشو كافة

1572
00:50:14,880 --> 00:50:18,680
سيتم تعيين حولها إلى أربعة وبشكل كامل

1573
00:50:16,720 --> 00:50:20,080
مدور. حسنًا، الآن داخل هذا div،

1574
00:50:18,680 --> 00:50:22,840
ونحن في طريقنا إلى أن نضع في المقام الأول

1575
00:50:20,080 --> 00:50:25,680
الارتباط لدينا، وبعد ذلك دعونا هذا الرابط سوف

1576
00:50:22,840 --> 00:50:29,320
سيتم الدخول في هذا الرابط سوف يدخل في

1577
00:50:25,680 --> 00:50:31,360
المنتج وأيضًا هذا المعرف المحدد. حسنًا،

1578
00:50:29,320 --> 00:50:33,040
والآن بالداخل، دعونا نعرض فقط

1579
00:50:31,360 --> 00:50:34,880
صورتنا أولا وقبل كل شيء، وأنا ذاهب إلى

1580
00:50:33,040 --> 00:50:36,960
فقط قم بإزالة IMG من هنا، واترك

1581
00:50:34,880 --> 00:50:39,000
لي فقط تمرير صورتي داخل هناك. أنا

1582
00:50:36,960 --> 00:50:41,280
الذهاب أيضا إلى تغيير البديل

1583
00:50:39,000 --> 00:50:42,840
النص إلى العنوان نفسه، واسمحوا لي

1584
00:50:41,280 --> 00:50:44,760
فقط ضع اسم فئة بنفس العرض

1585
00:50:42,840 --> 00:50:47,240
سيتم ضبطه على أربعة وسيكون الارتفاع أيضًا

1586
00:50:44,760 --> 00:50:49,600
تم ضبطه على 32. سيتم أيضًا تعيين الكائن على

1587
00:50:47,240 --> 00:50:51,400
تغطية تماما، ويكون مثل الهامش ل

1588
00:50:49,600 --> 00:50:52,840
سيتم ضبط الجزء السفلي على اثنين. حسنا، لذلك

1589
00:50:51,400 --> 00:50:54,520
انا ذاهب لحفظ هناك. والآن

1590
00:50:52,840 --> 00:50:56,400
تحت هذا الرابط، أو تعرف ماذا،

1591
00:50:54,520 --> 00:50:58,600
بدلا من هذا الرابط، تحت هذا

1592
00:50:56,400 --> 00:51:01,360
الصورة، سنستخدم H2،

1593
00:50:58,600 --> 00:51:03,560
ودعنا نقدم خطًا غامقًا فقط

1594
00:51:01,360 --> 00:51:05,400
سيكون جيدًا أو شبه غامق سيكون جيدًا.

1595
00:51:03,560 --> 00:51:07,320
سأغير هناك إلى العنوان. والآن

1596
00:51:05,400 --> 00:51:08,960
تحت هناك، دعونا فقط تقديم لدينا

1597
00:51:07,320 --> 00:51:10,680
اه فقرة هنا فقرة يمين

1598
00:51:08,960 --> 00:51:12,560
هنا. لذلك، سأكتب فقط مثل وأنا

1599
00:51:10,680 --> 00:51:13,920
الذهاب لحفظ الملف الخاص بي، وهنا يمكنك

1600
00:51:12,560 --> 00:51:15,560
نرى أننا الآن نحصل على كافة البيانات لدينا

1601
00:51:13,920 --> 00:51:16,840
هنا، والذي يبدو مذهلاً.

1602
00:51:15,560 --> 00:51:19,520
لذلك، لدينا صورة المنتج، لدينا

1603
00:51:16,840 --> 00:51:21,360
عنوان المنتج، وكذلك المال

1604
00:51:19,520 --> 00:51:23,280
السعر. إذا قمت بالتغيير هناك، فسوف يحدث ذلك

1605
00:51:21,360 --> 00:51:24,360
لتعطينا فقط تلك الأولى. وبواسطة

1606
00:51:23,280 --> 00:51:25,680
الطريقة، الآن اسمحوا لي أن أريكم كل شيء

1607
00:51:24,360 --> 00:51:27,920
هذا الفلتر. إذا أردت البحث عنه

1608
00:51:25,680 --> 00:51:30,000
مثل هذا ديور، لذلك سأكتب مثل هذا

1609
00:51:27,920 --> 00:51:31,960
d i o r، وهنا يمكنك أن ترى ما يحدث

1610
00:51:30,000 --> 00:51:33,800
لتعطيني هناك فقط. وإذا كنت فقط

1611
00:51:31,960 --> 00:51:35,800
الكتابة مثل غوتشي، انها سوف تفعل ذلك فقط

1612
00:51:33,800 --> 00:51:36,920
أعطني هذا البند المحدد هنا.

1613
00:51:35,800 --> 00:51:38,680
والآن إذا أردت البحث عن

1614
00:51:36,920 --> 00:51:40,040
التفاح، لذلك إذا قمت بالنقر فوق هناك، فهو

1615
00:51:38,680 --> 00:51:41,760
سأعطيني منتج أبل فقط

1616
00:51:40,040 --> 00:51:42,720
هنا. إذا قمت بالنقر فوق على الساعات،

1617
00:51:41,760 --> 00:51:45,760
لذلك سوف يعطيني فقط

1618
00:51:42,720 --> 00:51:47,200
الساعات، الموضة، الاتجاه. إنه

1619
00:51:45,760 --> 00:51:48,600
سوف تعطيني كل تلك البيانات القائمة

1620
00:51:47,200 --> 00:51:50,560
على هذا الفلتر الذي لدينا بالفعل

1621
00:51:48,600 --> 00:51:52,400
تم. لذا، نعم، هذا يبدو رائعًا.

1622
00:51:50,560 --> 00:51:54,800
الآن، دعونا نهتم بالمباراة النهائية

1623
00:51:52,400 --> 00:51:56,800
الشيء الذي يسمى ترقيم الصفحات.

1624
00:51:54,800 --> 00:51:58,360
الوقت لرعاية ترقيم الصفحات. لذا،

1625
00:51:56,800 --> 00:52:00,040
بادئ ذي بدء، سيكون لدينا السابق لدينا

1626
00:51:58,360 --> 00:52:02,880
زر، ثم سيكون لدينا التالي

1627
00:52:00,040 --> 00:52:04,480
الزر، وسيكون لدينا أيضًا 1 2 3

1628
00:52:02,880 --> 00:52:06,560
وهكذا دواليك الزر الأيمن

1629
00:52:04,480 --> 00:52:08,560
هنا. حسنًا، أولاً وقبل كل شيء، دعنا فقط

1630
00:52:06,560 --> 00:52:09,800
اعتني بالزر الأول. انا ذاهب

1631
00:52:08,560 --> 00:52:11,640
أن تضطر أيضًا إلى لفها بطريقة ما

1632
00:52:09,800 --> 00:52:13,280
من الحاوية. لذلك، سأستخدم فقط مثل

1633
00:52:11,640 --> 00:52:15,400
سيتم تعيين المرن، وكذلك المرن على

1634
00:52:13,280 --> 00:52:17,200
العمود، والشاشة الأصغر

1635
00:52:15,400 --> 00:52:19,640
الحجم، ونحن نذهب إلى استخدام مثل المرن

1636
00:52:17,200 --> 00:52:21,880
سيتم تعيين الصف، وكذلك التبرير على

1637
00:52:19,640 --> 00:52:23,520
بين، وبعد ذلك سيتم تعيين العناصر إلى

1638
00:52:21,880 --> 00:52:25,560
المركز، سيتم تعيين الهامش للأعلى

1639
00:52:23,520 --> 00:52:27,000
إلى خمسة. حسنًا، والآن بالداخل، ماذا

1640
00:52:25,560 --> 00:52:28,440
هل علينا أن نفعل؟

1641
00:52:27,000 --> 00:52:30,800
أولا وقبل كل شيء، دعونا نعتني بها

1642
00:52:28,440 --> 00:52:31,880
الحالة السابقة . حسنًا، بالنسبة لـ

1643
00:52:30,800 --> 00:52:33,920
السابقة، ونحن سوف يكون

1644
00:52:31,880 --> 00:52:35,720
إنشاء الزر أولاً. الذي - التي

1645
00:52:33,920 --> 00:52:37,200
سوف يستغرق الزر بعض التصميم مثل

1646
00:52:35,720 --> 00:52:38,800
الحدود، ومن ثم الحشو ل

1647
00:52:37,200 --> 00:52:40,840
سيتم تعيين المحور السيني على أربعة، مع حشوة لـ

1648
00:52:38,800 --> 00:52:42,760
سيتم تعيين المحور ص على اثنين، الهامش

1649
00:52:40,840 --> 00:52:45,880
سيتم تعيين المحور السيني على اثنين، و

1650
00:52:42,760 --> 00:52:47,280
مدور بالكامل بالكامل. حسنًا، ونعم،

1651
00:52:45,880 --> 00:52:49,200
هذا سيكون عليه. ونحن هنا

1652
00:52:47,280 --> 00:52:51,720
سوف يمر فقط مثل السابق،

1653
00:52:49,200 --> 00:52:52,760
وسأقوم بالتكرار هناك،

1654
00:52:51,720 --> 00:52:54,680
وأنا ذاهب أيضا لتغيير هناك ل

1655
00:52:52,760 --> 00:52:56,120
القادم كذلك. حسنًا، أولاً وقبل كل شيء، نحن

1656
00:52:54,680 --> 00:52:57,960
يجب أن تهتم بالوظيفة ،

1657
00:52:56,120 --> 00:52:59,320
لذلك سأستخدم فقط مثل إذا نقر شخص ما

1658
00:52:57,960 --> 00:53:01,240
على الزر السابق، لذلك تريد

1659
00:52:59,320 --> 00:53:03,320
فقط أطلق هذه الوظيفة، وهي

1660
00:53:01,240 --> 00:53:05,440
صفحة التعامل

1661
00:53:03,320 --> 00:53:06,640
التغيير. لم نقم بإنشاء هذه الوظيفة،

1662
00:53:05,440 --> 00:53:07,840
لكننا سننشئ هناك

1663
00:53:06,640 --> 00:53:10,080
بضع ثوان. لذا، سوف يستغرق الأمر

1664
00:53:07,840 --> 00:53:11,840
مقياس مسبق واحد مثل الصفحة الحالية وبعد ذلك

1665
00:53:10,080 --> 00:53:13,440
ناقص واحد. لذلك، دعونا نفعل ذلك هناك. أنا

1666
00:53:11,840 --> 00:53:15,080
الذهاب لنسخ اسم هناك. أنا

1667
00:53:13,440 --> 00:53:16,400
ذاهب للذهاب إلى الأعلى. اسمحوا لي فقط

1668
00:53:15,080 --> 00:53:19,160
إنشاء هذه الوظيفة هنا مثل

1669
00:53:16,400 --> 00:53:21,360
ثابت التعامل مع تغيير الصفحة، وانها تسير

1670
00:53:19,160 --> 00:53:23,240
ليكون يساوي تلك الصفحة، ودعونا

1671
00:53:21,360 --> 00:53:24,920
فقط قم بتوفير رقمنا بالداخل هناك.

1672
00:53:23,240 --> 00:53:26,520
لذا، قبل أن أفعل هناك، أولاً وقبل كل شيء، نحن

1673
00:53:24,920 --> 00:53:28,600
يجب أن تعلن بعض المتغيرات مثل

1674
00:53:26,520 --> 00:53:30,840
إجمالي المنتجات ثابت. مثل كم

1675
00:53:28,600 --> 00:53:33,560
المنتجات التي نريدها؟ نريد 100 فقط

1676
00:53:30,840 --> 00:53:35,720
المنتجات. ثم مجموع ثابت هيا.

1677
00:53:33,560 --> 00:53:37,480
إجمالي الصفحات. سيكون لديك مثل

1678
00:53:35,720 --> 00:53:38,960
الرياضيات.سقف,

1679
00:53:37,480 --> 00:53:41,000
وسنقوم بتمرير المجموع

1680
00:53:38,960 --> 00:53:43,800
المنتجات، ثم دعونا نقسمها

1681
00:53:41,000 --> 00:53:45,280
لهم من قبل العناصر في كل صفحة. حسنًا، إنه كذلك

1682
00:53:43,800 --> 00:53:47,600
سوف تعطينا مجموع الصفحات الصحيحة

1683
00:53:45,280 --> 00:53:50,000
هنا. لذا، علينا فقط التحقق مما إذا كانت الصفحة

1684
00:53:47,600 --> 00:53:53,040
أكبر من الصفر وهيا. دعونا

1685
00:53:50,000 --> 00:53:54,800
فقط قم بتوفير الصفر هنا. و

1686
00:53:53,040 --> 00:53:56,720
اه الصفحة أقل من أو يساوي

1687
00:53:54,800 --> 00:53:58,120
إجمالي الصفحات. إذن، ماذا تريد أن تفعل

1688
00:53:56,720 --> 00:54:00,040
في تلك الحالة؟ نريد فقط أن نكتب

1689
00:53:58,120 --> 00:54:02,080
مثل تعيين الصفحة الحالية، ونحن نريد

1690
00:54:00,040 --> 00:54:04,000
تمرير صفحتنا في الداخل هناك. حسنًا، الآن

1691
00:54:02,080 --> 00:54:05,840
إذا قمت بحفظ الملف الخاص بي، لكنه لن يفعل

1692
00:54:04,000 --> 00:54:07,880
أي شيء لأنه يتعين علينا أولا وقبل كل شيء

1693
00:54:05,840 --> 00:54:09,880
اعتني بالآخر أيضًا. حسنًا،

1694
00:54:07,880 --> 00:54:11,760
لذلك لن تفعل أي شيء في الوقت الراهن.

1695
00:54:09,880 --> 00:54:13,200
حسنًا، هذا كل ما تحتاجه. ولكن أنا

1696
00:54:11,760 --> 00:54:15,320
الذهاب أيضا لتوفير حالة المعوقين

1697
00:54:13,200 --> 00:54:16,680
هناك. ولتعطيل هناك، أولا

1698
00:54:15,320 --> 00:54:18,560
للجميع، علينا أن نستخدم المعاقين

1699
00:54:16,680 --> 00:54:20,960
السمة، وعلينا أن نقدم

1700
00:54:18,560 --> 00:54:23,000
الصفحة الحالية ثلاثية تساوي واحدًا.

1701
00:54:20,960 --> 00:54:24,560
لذا، إذا تم تعيين صفحتنا الحالية على واحدة،

1702
00:54:23,000 --> 00:54:26,359
لذلك تريد تعطيل هذا بالكامل

1703
00:54:24,560 --> 00:54:27,560
زر. إذا كانت الصفحة الحالية أكبر

1704
00:54:26,359 --> 00:54:29,000
من واحد، لذلك تريد أن تفعل فقط

1705
00:54:27,560 --> 00:54:30,920
شيء عن هناك. تريد أن

1706
00:54:29,000 --> 00:54:33,040
تغيير هناك. لذلك، هذا كل ما تحتاجه.

1707
00:54:30,920 --> 00:54:34,320
انا ذاهب ايضا لقطع هناك من هنا.

1708
00:54:33,040 --> 00:54:36,240
نعم، كما تعلمون، أنا لن أقطع

1709
00:54:34,320 --> 00:54:38,359
هناك من هنا. دعونا فقط نقطع هناك

1710
00:54:36,240 --> 00:54:39,840
والصقه هنا. حسنا، هذا هو

1711
00:54:38,359 --> 00:54:41,280
سيكون التالي. والآن دعونا

1712
00:54:39,840 --> 00:54:43,000
فقط اعتني بالصحيح التالي

1713
00:54:41,280 --> 00:54:44,400
الآن. وكما تعلمون، سأقوم بالقطع أيضًا

1714
00:54:43,000 --> 00:54:46,359
هناك، ودعونا نضعها في مكانها الصحيح

1715
00:54:44,400 --> 00:54:48,240
هنا لبضع ثوان. والآن اسمحوا لي

1716
00:54:46,359 --> 00:54:49,480
فقط اعتني بالزر السابق.

1717
00:54:48,240 --> 00:54:51,359
لذا، ما سأفعله هو أنني كذلك

1718
00:54:49,480 --> 00:54:53,359
سوف يتم تمرير طريقة النقر الخاصة بي

1719
00:54:51,359 --> 00:54:55,760
هنا. ولهذا عند النقر، نحن

1720
00:54:53,359 --> 00:54:57,359
سأستخدم صفحة المقبض هذه

1721
00:54:55,760 --> 00:54:58,800
تغيير مرة أخرى. وفي هذا

1722
00:54:57,359 --> 00:55:01,000
الوضع، ونحن سوف نمر

1723
00:54:58,800 --> 00:55:02,400
تلك الصفحة الحالية. وماذا بحق الجحيم أنا

1724
00:55:01,000 --> 00:55:04,480
أفعل؟

1725
00:55:02,400 --> 00:55:06,120
دعنا نغلق هناك هنا، و

1726
00:55:04,480 --> 00:55:07,840
سأقوم أيضًا بإزالة ذلك من هنا.

1727
00:55:06,120 --> 00:55:10,200
لذلك، ستكون الصفحة الحالية في هذه الحالة

1728
00:55:07,840 --> 00:55:12,520
تعيين إلى زائد واحد. وفي هذه الحالة نحن كذلك

1729
00:55:10,200 --> 00:55:14,920
الآن يتناقص واحد. في هذه الحالة،

1730
00:55:12,520 --> 00:55:17,040
نحن الآن نتزايد هناك. حسنا، لذلك

1731
00:55:14,920 --> 00:55:18,600
الآن هذا كل ما تحتاجه. والآن نحن أيضا

1732
00:55:17,040 --> 00:55:20,480
يجب أن نقدم حالتنا المعوقة على

1733
00:55:18,600 --> 00:55:21,880
هناك. لذلك، بالنسبة لدولة المعاقين، نحن

1734
00:55:20,480 --> 00:55:24,560
سوف يتم التحقق مما إذا كان التيار

1735
00:55:21,880 --> 00:55:26,120
الصفحة ثلاثية تساوي إجمالي الصفحة.

1736
00:55:24,560 --> 00:55:27,960
كان هذا هو السبب الوحيد الذي جعلني أفعل ذلك

1737
00:55:26,120 --> 00:55:30,480
متغير عالمي حتى نتمكن من استخدامه

1738
00:55:27,960 --> 00:55:32,080
هنا. حسنًا، إذا تم ضبط ذلك على

1739
00:55:30,480 --> 00:55:33,640
إجمالي الصفحات، لذلك تريد تعطيلها

1740
00:55:32,080 --> 00:55:35,520
هناك. الآن، الزر السابق هو

1741
00:55:33,640 --> 00:55:37,200
تم إنجازه بالكامل، وكذلك الزر التالي

1742
00:55:35,520 --> 00:55:39,600
تم. الآن، علينا أن نعتني بها

1743
00:55:37,200 --> 00:55:41,200
هذه الأزرار 1 2 3 4 5 وما إلى ذلك على اليمين

1744
00:55:39,600 --> 00:55:43,240
هنا. حسنًا، كيف سنكون؟

1745
00:55:41,200 --> 00:55:44,960
تفعل هناك؟ للقيام بذلك هناك، أولا وقبل كل شيء،

1746
00:55:43,240 --> 00:55:47,000
علينا أن نستخدم فقط لذلك، سأكتب فقط

1747
00:55:44,960 --> 00:55:50,160
مثل المرن، وبعد ذلك سيتم تعيين المرن على

1748
00:55:47,000 --> 00:55:52,040
التفاف، وبعد ذلك فقط هيا. تبرير

1749
00:55:50,160 --> 00:55:53,520
سيتم ضبطه على المركز. والآن بالداخل

1750
00:55:52,040 --> 00:55:54,520
هناك، هنا سنقوم بالتقديم

1751
00:55:53,520 --> 00:55:57,920
لدينا

1752
00:55:54,520 --> 00:55:59,520
اه الترحيل هيا. p a g i n a t i o n.

1753
00:55:57,920 --> 00:56:01,160
زر ترقيم الصفحات. إذن، كيف سنذهب؟

1754
00:55:59,520 --> 00:56:02,880
أن تفعل هناك؟ دعونا أولا فقط

1755
00:56:01,160 --> 00:56:05,040
كل ذلك ينشئ وظيفة هناك. لذا،

1756
00:56:02,880 --> 00:56:06,400
سأذهب إلى الأعلى، ونحن ذاهبون إلى

1757
00:56:05,040 --> 00:56:08,280
أن يتم إنشاء وظيفة جديدة ل

1758
00:56:06,400 --> 00:56:11,440
زر ترقيم الصفحات. لذلك، سأستخدم فقط

1759
00:56:08,280 --> 00:56:13,000
مثل الحصول على ترقيم الصفحات

1760
00:56:11,440 --> 00:56:15,320
الأزرار، وسيتم ضبطها الآن على

1761
00:56:13,000 --> 00:56:16,440
وظيفة السهم اه هنا. و

1762
00:56:15,320 --> 00:56:17,680
أولا وقبل كل شيء، علينا أن نحصل على

1763
00:56:16,440 --> 00:56:19,760
أزرار. لذلك، سوف نستخدم

1764
00:56:17,680 --> 00:56:21,840
مثل الأزرار، وسوف يكون

1765
00:56:19,760 --> 00:56:23,320
رقم. لذا، دعونا نمرر أرقامنا

1766
00:56:21,840 --> 00:56:25,560
من مجموعة داخل هناك، والآن هو

1767
00:56:23,320 --> 00:56:27,480
سيتم ضبطها على مجموعة فارغة تمامًا.

1768
00:56:25,560 --> 00:56:29,800
حسنًا، ليست أرقامًا، بل مجرد

1769
00:56:27,480 --> 00:56:31,440
رقم مفرد. ها نحن ذا. لذا، الآن

1770
00:56:29,800 --> 00:56:33,600
دعونا نهتم أيضًا بالبداية

1771
00:56:31,440 --> 00:56:35,760
وصفحة البداية وأيضا النهاية

1772
00:56:33,600 --> 00:56:37,600
الصفحة. حسنًا، فلنستخدم مثل

1773
00:56:35,760 --> 00:56:39,760
صفحة البداية، وأنها سوف تكون متساوية

1774
00:56:37,600 --> 00:56:42,040
إلى math.max، وسنكون كذلك

1775
00:56:39,760 --> 00:56:44,120
تمرير واحد وأيضا الصفحة الحالية

1776
00:56:42,040 --> 00:56:45,560
ناقص اثنين. لذلك، فإنه سوف يعطينا

1777
00:56:44,120 --> 00:56:47,560
صفحة البداية. والآن دعونا نأخذ فقط

1778
00:56:45,560 --> 00:56:50,040
رعاية الصفحة النهائية. وصفحة النهاية

1779
00:56:47,560 --> 00:56:51,320
سيتم ضبطه على math.minimum. وهنا في

1780
00:56:50,040 --> 00:56:53,920
في هذه الحالة، ونحن في طريقنا لتمرير لدينا

1781
00:56:51,320 --> 00:56:56,600
إجمالي الصفحات وأيضا الصفحة الحالية زائد

1782
00:56:53,920 --> 00:56:57,880
اثنان. ليس ناقص اثنين، بل زائد اثنين. و

1783
00:56:56,600 --> 00:56:59,520
الآن اسمحوا لي أن أقدم القليل من اه

1784
00:56:57,880 --> 00:57:02,520
بيان شرطي هنا. إذا كان لدينا

1785
00:56:59,520 --> 00:57:04,200
الصفحة الحالية ناقص اثنين أقل من واحد،

1786
00:57:02,520 --> 00:57:06,240
لذلك في هذه الحالة، نريد الحصول على

1787
00:57:04,200 --> 00:57:08,240
صفحة النهاية، وتريد تعيين ذلك على

1788
00:57:06,240 --> 00:57:10,600
مثل math.minimum، وعلينا أن نفعل ذلك

1789
00:57:08,240 --> 00:57:12,480
تقديم مجموع صفحاتنا، ومن ثم إضافة

1790
00:57:10,600 --> 00:57:14,840
صفحة النهاية هنا في هذه الحالة. ونحن

1791
00:57:12,480 --> 00:57:17,920
يجب أيضًا الجمع بين هذين وبعد ذلك

1792
00:57:14,840 --> 00:57:19,800
ناقص الصفحة الحالية، وأيضا دعونا فقط

1793
00:57:17,920 --> 00:57:21,359
ضع ناقص واحد هنا. حسنًا،

1794
00:57:19,800 --> 00:57:22,880
في هذه الحالة. هذا سوف يعطي

1795
00:57:21,359 --> 00:57:25,080
لنا صفحة النهاية. لذلك، سأفعل ذلك أيضًا

1796
00:57:22,880 --> 00:57:27,320
مكررة هناك، ودعونا نأخذ فقط

1797
00:57:25,080 --> 00:57:30,080
رعاية ماذا نسميها؟ ال

1798
00:57:27,320 --> 00:57:33,840
صفحة البداية. لذلك، إذا كانت الصفحة الحالية زائد

1799
00:57:30,080 --> 00:57:35,080
اثنان أكبر من إجمالي الصفحات، لذلك

1800
00:57:33,840 --> 00:57:37,400
في هذه الحالة، سنكون

1801
00:57:35,080 --> 00:57:39,680
مجرد تغيير البداية من هذا القبيل إلى

1802
00:57:37,400 --> 00:57:41,680
صفحة البداية. وأنا ذاهب فقط

1803
00:57:39,680 --> 00:57:43,760
إزالة كل تلك الأشياء من هنا. دع

1804
00:57:41,680 --> 00:57:46,880
لي أن أقدم واحدة للعداد المسبق الأول،

1805
00:57:43,760 --> 00:57:49,640
ثم ابدأ الصفحة ناقص اثنين، وبعد ذلك

1806
00:57:46,880 --> 00:57:51,040
ناقص إجمالي الصفحة، ثم ناقص التيار

1807
00:57:49,640 --> 00:57:52,800
صفحة. لذلك، فإنه سوف يعطينا

1808
00:57:51,040 --> 00:57:54,200
صفحة البداية. حسنًا، دعنا الآن فقط

1809
00:57:52,800 --> 00:57:56,440
كرر من خلال كل ذلك. لذا،

1810
00:57:54,200 --> 00:57:59,480
دعونا نستخدم فقط مثل Let page يساوي

1811
00:57:56,440 --> 00:58:02,120
لبدء الصفحة، ثم اه الصفحة أقل

1812
00:57:59,480 --> 00:58:03,680
من أو يساوي نهاية الصفحة، ثم

1813
00:58:02,120 --> 00:58:05,320
وأخيرا، دعونا فقط نستخدم صفحتنا زائد

1814
00:58:03,680 --> 00:58:07,800
زائد. يمكنك استخدام أنا إذا أردت ذلك،

1815
00:58:05,320 --> 00:58:09,600
ولكن في حالتي، اه الصفحة ستكون جيدة.

1816
00:58:07,800 --> 00:58:12,000
لذا، الآن دعونا فقط نستخدم Button.Push

1817
00:58:09,600 --> 00:58:14,640
الطريقة، وعلينا أن نقدم أه

1818
00:58:12,000 --> 00:58:16,000
الصفحة داخل هناك. ليست حافة، ولكن الصفحة.

1819
00:58:14,640 --> 00:58:17,480
وأخيرا، علينا فقط أن نعيد ما لدينا

1820
00:58:16,000 --> 00:58:19,160
أزرار. حسنًا، سأقوم بحفظ حسابي

1821
00:58:17,480 --> 00:58:21,480
الملف، وهذا هو كيف سنكون

1822
00:58:19,160 --> 00:58:22,800
إنشاء أزرار الحصول على ترقيم الصفحات. و

1823
00:58:21,480 --> 00:58:24,320
الآن دعونا نستخدمها هنا

1824
00:58:22,800 --> 00:58:27,080
في الداخل

1825
00:58:24,320 --> 00:58:29,280
هذه المنطقة. لذلك، دعونا نستخدمها هناك.

1826
00:58:27,080 --> 00:58:30,800
سأقوم بالتنفيذ هناك، لكن أولاً

1827
00:58:29,280 --> 00:58:32,680
كل شيء، علينا أن نلتف هناك داخل هذه

1828
00:58:30,800 --> 00:58:34,400
الأقواس المتعرجة. انا ذاهب لإزالة أيضا

1829
00:58:32,680 --> 00:58:36,000
هذه الفاصلة من هنا. والآن علينا أن نفعل ذلك

1830
00:58:34,400 --> 00:58:37,800
التكرار عبر جميع صفحاتهم،

1831
00:58:36,000 --> 00:58:39,160
لذلك يتعين علينا استخدام طريقة الخريطة في الداخل

1832
00:58:37,800 --> 00:58:41,280
هناك. وسنكون فقط

1833
00:58:39,160 --> 00:58:42,840
تمرير الصفحة داخل هناك. لذا، سأفعل

1834
00:58:41,280 --> 00:58:45,160
فقط أولا وقبل كل شيء قم بإنشاء زر الحق

1835
00:58:42,840 --> 00:58:46,960
هنا بالداخل هناك. وقبل كل شيء، نحن

1836
00:58:45,160 --> 00:58:48,960
يجب أن تمر المفتاح، وسوف المفتاح

1837
00:58:46,960 --> 00:58:50,520
يتم تعيينها على الصفحة. وسنكون كذلك

1838
00:58:48,960 --> 00:58:52,200
توفير أيضًا عند النقر مثل متى

1839
00:58:50,520 --> 00:58:54,920
ينقر شخص ما هناك، لذلك نريد أن نفعل ذلك

1840
00:58:52,200 --> 00:58:56,200
فقط قم بتمرير تغيير صفحة المقبض لدينا. و

1841
00:58:54,920 --> 00:58:57,600
الآن في هذه الحالة، لا نريد أن نفعل ذلك

1842
00:58:56,200 --> 00:58:59,920
لا شيء هناك، ولكننا نريد فقط

1843
00:58:57,600 --> 00:59:01,440
تمرير الصفحة داخل هناك. حسنًا و

1844
00:58:59,920 --> 00:59:03,359
دعونا فقط نقدم قليلا من التصميم ل

1845
00:59:01,440 --> 00:59:05,480
هذا. سأستخدم مثل عدد قليل

1846
00:59:03,359 --> 00:59:06,920
التصميم الديناميكي مثل الحدود أولاً

1847
00:59:05,480 --> 00:59:08,720
كل شيء، الحشو للمحور السيني سيكون

1848
00:59:06,920 --> 00:59:10,960
أربعة، وسوف يكون الحشو للمحور ص

1849
00:59:08,720 --> 00:59:13,720
تم ضبطه على اثنين، وسيصبح هامش المحور السيني

1850
00:59:10,960 --> 00:59:15,320
يتم ضبطها على واحدة، مدورة بالكامل وكاملة.

1851
00:59:13,720 --> 00:59:17,440
ونعم، في هذه الحالة، سأكون كذلك

1852
00:59:15,320 --> 00:59:19,440
تمرير صفحتي يساوي ثلاثة أضعاف

1853
00:59:17,440 --> 00:59:21,120
الصفحة الحالية. إذن، في تلك الحالة، أنت

1854
00:59:19,440 --> 00:59:22,880
تريد تغيير لون الخلفية إلى

1855
00:59:21,120 --> 00:59:24,960
أسود تماما. ونحن نريد أيضا أن

1856
00:59:22,880 --> 00:59:26,400
تغيير النص إلى اللون الأبيض تماما. ثم

1857
00:59:24,960 --> 00:59:27,760
ليس الأمر كذلك، ماذا تريد

1858
00:59:26,400 --> 00:59:30,040
تفعل في هذه الحالة؟ نريد فقط أن

1859
00:59:27,760 --> 00:59:31,920
اضبط ذلك على السلسلة الفارغة تمامًا مثل

1860
00:59:30,040 --> 00:59:34,240
هناك. وهنا علينا فقط أن نمرر

1861
00:59:31,920 --> 00:59:36,200
اسم الصفحة، وهذا سوف يفعل ذلك. هكذا

1862
00:59:34,240 --> 00:59:37,760
سأقوم بحفظ الملف الخاص بي، وهنا أنت

1863
00:59:36,200 --> 00:59:39,880
أستطيع أن أرى أننا نحصل الآن على جميع الصفحات

1864
00:59:37,760 --> 00:59:41,600
هنا. لذلك إذا قمت بتحديث صفحتي و

1865
00:59:39,880 --> 00:59:43,840
هنا يمكنك أن ترى أننا وصلنا إلى 1 2

1866
00:59:41,600 --> 00:59:45,280
3. يمكنني النقر على السابق. لا أستطيع

1867
00:59:43,840 --> 00:59:47,160
انقر على الحق السابق الآن ل

1868
00:59:45,280 --> 00:59:48,760
نحن الآن في الصفحة الأولى. إذا قمت بالنقر فوق

1869
00:59:47,160 --> 00:59:50,760
في الثانية، سيتم تقديمه

1870
00:59:48,760 --> 00:59:52,200
المحتوى الخاص بي هنا. يمكنني أيضًا النقر

1871
00:59:50,760 --> 00:59:53,480
في المرحلة التالية وهنا يمكنك أن ترى

1872
00:59:52,200 --> 00:59:55,280
انها سوف تقدم أيضا كل ذلك

1873
00:59:53,480 --> 00:59:57,360
المحتوى. يمكنني النقر على الرابع، أنا

1874
00:59:55,280 --> 00:59:58,920
يمكن النقر على السابق والآن إذا

1875
00:59:57,360 --> 01:00:00,400
أقوم بالنقر بوضوح على السابق، إنه كذلك

1876
00:59:58,920 --> 01:00:02,680
الذهاب فقط يعطينا السابق

1877
01:00:00,400 --> 01:00:04,880
العناصر هنا. أستطيع أن أذهب إلى التالي

1878
01:00:02,680 --> 01:00:06,960
واحد، وهكذا دواليك، وهو

1879
01:00:04,880 --> 01:00:09,440
تبدو مذهلة. لذا نعم، يمكنني تقديم ذلك

1880
01:00:06,960 --> 01:00:11,080
تصفية في هذه الحالة، ولكن أنا

1881
01:00:09,440 --> 01:00:12,640
نسيت أن أعتني بهذا الفلتر بشكل صحيح

1882
01:00:11,080 --> 01:00:15,880
هنا. والآن دعونا نفعل ذلك. أنا

1883
01:00:12,640 --> 01:00:18,400
سأذهب إلى الأعلى حيث لدي هذا

1884
01:00:15,880 --> 01:00:19,920
القائمة المنسدلة هنا أو الزر

1885
01:00:18,400 --> 01:00:21,840
والتي يمكنك رؤيتها هنا. لذلك لدينا

1886
01:00:19,920 --> 01:00:24,360
هذا الزر وسأكون عادلا

1887
01:00:21,840 --> 01:00:26,080
لصق معالج النقر الخاص بي. هيا،

1888
01:00:24,360 --> 01:00:27,280
معالج النقر عند شخص ما

1889
01:00:26,080 --> 01:00:28,960
ينقر هناك. إذن ماذا تريد

1890
01:00:27,280 --> 01:00:33,320
تفعل في هذه الحالة؟ نريد فقط أن

1891
01:00:28,960 --> 01:00:34,920
اضبط القائمة المنسدلة على عدم فتح القائمة المنسدلة.

1892
01:00:33,320 --> 01:00:37,000
حسنًا، إذا تم ضبط ذلك حاليًا على

1893
01:00:34,920 --> 01:00:38,200
كاذبة، فإنه سوف يجعلها صحيحة وإذا

1894
01:00:37,000 --> 01:00:40,400
تم تعيينه على أنه صحيح، لذلك سوف يتم ذلك

1895
01:00:38,200 --> 01:00:42,480
جعلها كاذبة. حسنًا، فلنتحقق فقط

1896
01:00:40,400 --> 01:00:44,320
بها. إذا قمت بالنقر فوق هناك، يمكنني الذهاب إلى

1897
01:00:42,480 --> 01:00:46,680
العنصر الرخيص ويمكنني الاختيار تمامًا

1898
01:00:44,320 --> 01:00:48,760
العنصر الرخيص ويمكنني أيضًا تحديد

1899
01:00:46,680 --> 01:00:51,080
واحدة باهظة الثمن ويمكنني أيضًا اختيارها

1900
01:00:48,760 --> 01:00:52,400
واحدة شعبية كذلك. لذا نعم، كل شيء

1901
01:00:51,080 --> 01:00:55,200
يعمل بالطريقة التي نتوقعها منهم

1902
01:00:52,400 --> 01:00:56,800
العمل وأنهم يبحثون فظيعة. لذلك أنا

1903
01:00:55,200 --> 01:00:58,640
الذهاب لرعاية ذلك في عدد قليل

1904
01:00:56,800 --> 01:01:00,400
ثواني، ولكن نعم، كل شيء تماما

1905
01:00:58,640 --> 01:01:01,840
عمل. يمكنني النقر على Apple it's

1906
01:01:00,400 --> 01:01:03,800
سأعطيني منتج أبل فقط

1907
01:01:01,840 --> 01:01:05,000
والساعات وما إلى ذلك وما إلى ذلك. الآن

1908
01:01:03,800 --> 01:01:06,600
لقد انتهينا تماما من الرئيسي

1909
01:01:05,000 --> 01:01:08,480
صفحة المحتوى، ولكن الآن دعونا نأخذ فقط

1910
01:01:06,600 --> 01:01:10,240
رعاية صفحة المنتج. مثل لو أنا

1911
01:01:08,480 --> 01:01:11,680
انقر على هذا المنتج المحدد، لذلك نحن

1912
01:01:10,240 --> 01:01:14,000
يجب أن تهتم أيضًا بهذا المنتج

1913
01:01:11,680 --> 01:01:15,240
كذلك. حسنًا، فلنفعل ذلك فحسب.

1914
01:01:14,000 --> 01:01:17,280
انا ذاهب للمضي قدما وإنشاء جديد

1915
01:01:15,240 --> 01:01:18,720
مكون. سأعطيه اسم مثل

1916
01:01:17,280 --> 01:01:22,200
المنتج

1917
01:01:18,720 --> 01:01:24,080
page.tsx. اسمحوا لي فقط باستخدام RAFCE و

1918
01:01:22,200 --> 01:01:26,000
سأذهب إلى تطبيقي ودعنا

1919
01:01:24,080 --> 01:01:27,320
فقط قم بالتسجيل هناك هنا. حسنا، لذلك

1920
01:01:26,000 --> 01:01:29,720
سأقوم فقط بتكرار هذا السطر من

1921
01:01:27,320 --> 01:01:31,560
الكود ثم نريد الدخول هيا.

1922
01:01:29,720 --> 01:01:33,760
المنتج ونريد أن ندخل في

1923
01:01:31,560 --> 01:01:36,120
معرف محدد لهذا المنتج. والآن دعونا

1924
01:01:33,760 --> 01:01:37,880
أنا فقط أعرض صفحة المنتج الخاصة بي بشكل صحيح

1925
01:01:36,120 --> 01:01:39,400
هنا في هذه الحالة. انا ذاهب لحفظ بلدي

1926
01:01:37,880 --> 01:01:41,040
الملف والآن اسمحوا لي أن أعتني به

1927
01:01:39,400 --> 01:01:42,920
ذلك. بادئ ذي بدء، سيكون هناك عدد قليل

1928
01:01:41,040 --> 01:01:44,560
الأشياء التي علينا أن نعتني بها. هكذا

1929
01:01:42,920 --> 01:01:47,080
أولا وقبل كل شيء، اسمحوا لي أن أمضي قدما و

1930
01:01:44,560 --> 01:01:49,640
الاستيلاء على هويتي. حسنًا، سوف تأتي بطاقة الهوية

1931
01:01:47,080 --> 01:01:51,840
من معلمة الاستخدام والتي تأتي

1932
01:01:49,640 --> 01:01:53,880
من جهاز التوجيه رد الفعل وهنا نحن

1933
01:01:51,840 --> 01:01:55,600
عليك فقط لصق المعرف هنا. هكذا

1934
01:01:53,880 --> 01:01:57,120
سوف يكون المعرف سلسلة بالكامل. انها تسير

1935
01:01:55,600 --> 01:01:58,680
ليتم ضبطها على هذه الأقواس الصحيحة

1936
01:01:57,120 --> 01:02:00,440
هنا. حسنًا، سوف يمنحنا

1937
01:01:58,680 --> 01:02:01,760
معرف. الآن علينا أيضًا أن نحصل على ما لدينا

1938
01:02:00,440 --> 01:02:03,560
الملاحة. سوف نستخدم

1939
01:02:01,760 --> 01:02:05,400
مثل استخدام التنقل لذلك، وهو

1940
01:02:03,560 --> 01:02:07,480
أيضًا وظيفة قادمة من رد الفعل

1941
01:02:05,400 --> 01:02:09,800
جهاز التوجيه dom وسوف نقوم بتخزين ذلك فقط

1942
01:02:07,480 --> 01:02:12,280
في التنقل

1943
01:02:09,800 --> 01:02:14,080
متغير هنا. NAV I G A T E,

1944
01:02:12,280 --> 01:02:16,240
نعم. ودعونا فقط ننشئ دولتنا.

1945
01:02:14,080 --> 01:02:18,280
لذلك سأستخدم فقط مثل اه المنتج و

1946
01:02:16,240 --> 01:02:20,400
أيضًا المنتج المحدد هنا وهو

1947
01:02:18,280 --> 01:02:22,360
سيكون مساويا لحالة الاستخدام و

1948
01:02:20,400 --> 01:02:24,400
سيتم ضبطه على قيمة فارغة في البداية

1949
01:02:22,360 --> 01:02:26,360
والآن سأقوم بتعليق ذلك باستخدام

1950
01:02:24,400 --> 01:02:28,440
المنتج الذي لم نصنعه، ولكن

1951
01:02:26,360 --> 01:02:30,720
سنقوم بإنشاء ذلك في بضع ثوان و

1952
01:02:28,440 --> 01:02:32,120
أيضا فارغة. حسنًا، إما

1953
01:02:30,720 --> 01:02:33,720
المنتج أو فارغة. والآن دعونا فقط

1954
01:02:32,120 --> 01:02:36,040
قم بإنشاء واجهة هنا. لهذا السبب

1955
01:02:33,720 --> 01:02:37,360
سوف تكون واجهة المنتج والآن

1956
01:02:36,040 --> 01:02:39,040
داخل هذا المنتج سنكون

1957
01:02:37,360 --> 01:02:40,760
توفير المعرف الذي سيتم تعيينه على

1958
01:02:39,040 --> 01:02:43,040
رقم. سأقدم أيضًا

1959
01:02:40,760 --> 01:02:45,400
سيتم تعيين العنوان والعنوان على السلسلة

1960
01:02:43,040 --> 01:02:48,040
ومن ثم لدينا وصفنا و

1961
01:02:45,400 --> 01:02:50,440
الأوصاف هي أيضًا سلسلة و

1962
01:02:48,040 --> 01:02:52,040
سيتم تحديد السعر إلى رقم وأنا

1963
01:02:50,440 --> 01:02:53,920
الذهاب أيضا لتوفير التصنيف و

1964
01:02:52,040 --> 01:02:56,080
سيتم تعيين التصنيف على رقم أيضًا.

1965
01:02:53,920 --> 01:02:58,080
ثم أخيرا لدينا صورنا.

1966
01:02:56,080 --> 01:03:00,120
حسنًا، سيتم تعيين الصور على سلسلة

1967
01:02:58,080 --> 01:03:02,280
من هذه المصفوفة الفارغة. حسنًا، إنه كذلك

1968
01:03:00,120 --> 01:03:03,840
سوف تأخذ ذلك على أنه

1969
01:03:02,280 --> 01:03:05,880
لذلك سوف نقوم بشرح استخدامنا

1970
01:03:03,840 --> 01:03:07,640
الدولة باستخدام هذا المنتج والآن

1971
01:03:05,880 --> 01:03:09,440
دعونا نعتني فقط بواجهة المستخدم، ولكن

1972
01:03:07,640 --> 01:03:11,360
قبل أن أفعل ذلك، سأضطر إلى ذلك

1973
01:03:09,440 --> 01:03:13,000
جلب كل هذا المحتوى هنا. هكذا

1974
01:03:11,360 --> 01:03:15,560
سأستخدم تأثير الاستخدام في هذا

1975
01:03:13,000 --> 01:03:17,000
القضية والآن داخل هناك، علينا أن

1976
01:03:15,560 --> 01:03:19,280
أولا وقبل كل توفير التبعية

1977
01:03:17,000 --> 01:03:21,120
مجموعة من هذا المعرف كما لو كان هذا المعرف

1978
01:03:19,280 --> 01:03:22,840
التغييرات، لذلك تريد فقط استدعاء هذا

1979
01:03:21,120 --> 01:03:24,640
وظيفة. وقبل كل شيء، علينا أن نفعل ذلك

1980
01:03:22,840 --> 01:03:26,400
التحقق من الهوية. إذا كان لدينا بالفعل

1981
01:03:24,640 --> 01:03:27,960
ID، ثم سنستخدم

1982
01:03:26,400 --> 01:03:30,040
axios ثم سنستخدمه

1983
01:03:27,960 --> 01:03:31,600
الحصول على وهكذا دواليك. لذلك دعونا

1984
01:03:30,040 --> 01:03:33,720
فقط احصل على محاورنا وسأكون كذلك

1985
01:03:31,600 --> 01:03:36,040
باستخدام طريقة الحصول على هناك. انا ذاهب

1986
01:03:33,720 --> 01:03:37,480
لتوضيح ذلك أيضًا باعتباره المنتج.

1987
01:03:36,040 --> 01:03:40,240
دعونا نفعل ذلك فقط. وأنا ذاهب ل

1988
01:03:37,480 --> 01:03:43,320
كما توفر HTTPS ونفس الشيء

1989
01:03:40,240 --> 01:03:45,520
واجهة برمجة تطبيقات JSON الوهمية. لذلك دعونا نذهب إلى

1990
01:03:43,320 --> 01:03:47,480
المنتجات وعلينا تقديم هويتنا

1991
01:03:45,520 --> 01:03:48,680
ديناميكيا. حسنًا، إذا كان هذا هو

1992
01:03:47,480 --> 01:03:51,160
الحالة، لذلك سوف يعطينا ذلك

1993
01:03:48,680 --> 01:03:53,359
الرد مرة أخرى. حسنا، تماما مثل ذلك و

1994
01:03:51,160 --> 01:03:55,080
علينا أن نستخدم ماذا نسميه؟

1995
01:03:53,359 --> 01:03:57,840
قم بتعيين المنتج وعلينا أن نمرر

1996
01:03:55,080 --> 01:03:59,440
Response.data داخل هناك. حسنا، أنا

1997
01:03:57,840 --> 01:04:01,160
الذهاب لحفظ هذا الملف والآن

1998
01:03:59,440 --> 01:04:02,720
تحت هذا إذن، علينا أن نفعل ذلك أيضًا

1999
01:04:01,160 --> 01:04:04,480
تقديم بيان الصيد كذلك. هكذا

2000
01:04:02,720 --> 01:04:05,880
إذا حصلت على نوع من الخطأ

2001
01:04:04,480 --> 01:04:08,880
لذلك في هذه الحالة، سنكون

2002
01:04:05,880 --> 01:04:10,920
فقط باستخدام مثل console.log. حسنا، لذلك

2003
01:04:08,880 --> 01:04:12,840
سيكون console.error جيدًا بدلاً من ذلك. هكذا

2004
01:04:10,920 --> 01:04:14,320
سأستخدم فقط مثل الخطأ

2005
01:04:12,840 --> 01:04:17,600
جلب هيا.

2006
01:04:14,320 --> 01:04:19,720
جارٍ جلب بيانات المنتج. ودعونا فقط

2007
01:04:17,600 --> 01:04:21,080
تقديم خطأنا هنا. حسنا، لذلك

2008
01:04:19,720 --> 01:04:22,480
سأقوم بحفظ ذلك وهذه هي الطريقة

2009
01:04:21,080 --> 01:04:24,960
نحن ذاهبون لجلب منتجاتنا

2010
01:04:22,480 --> 01:04:26,880
هنا في هذا المكون. لذا نعم،

2011
01:04:24,960 --> 01:04:28,480
هذا رائع وأنت تعلم، سأفعل

2012
01:04:26,880 --> 01:04:30,280
قم أيضًا بتوفير محمل هنا. فإذا

2013
01:04:28,480 --> 01:04:32,280
ليس لديك المنتجات، لذلك

2014
01:04:30,280 --> 01:04:34,680
الحالة، نريد فقط العودة

2015
01:04:32,280 --> 01:04:36,720
سيكون H1 من نقطة التحميل نقطة

2016
01:04:34,680 --> 01:04:39,280
بخير. والآن اسمحوا لي أن أعتني بهذا

2017
01:04:36,720 --> 01:04:40,960
واجهة المستخدم. لذلك سأمضي قدمًا وأولًا

2018
01:04:39,280 --> 01:04:42,480
من كل شيء، توفير الحشو الخاص بي في كل مكان

2019
01:04:40,960 --> 01:04:43,760
سيتم ضبطه على خمسة وسيكون العرض

2020
01:04:42,480 --> 01:04:46,520
تعيين ل

2021
01:04:43,760 --> 01:04:47,760
نعم، 60٪ سيكون على ما يرام. الآن داخل هذا

2022
01:04:46,520 --> 01:04:49,560
div، سنقوم بإنشاء ملفنا

2023
01:04:47,760 --> 01:04:51,640
زر ودعونا نقدم فقط لدينا

2024
01:04:49,560 --> 01:04:52,920
انقر هنا وعندما شخص ما

2025
01:04:51,640 --> 01:04:55,480
ينقر على هناك، فماذا تريد

2026
01:04:52,920 --> 01:04:57,400
افعل؟ نريد فقط التنقل ناقص واحد.

2027
01:04:55,480 --> 01:04:58,400
حسنًا، ودعونا نصمم ذلك أيضًا.

2028
01:04:57,400 --> 01:05:00,080
حسنًا، سأقدم القليل منها

2029
01:04:58,400 --> 01:05:02,120
التصميم مثل الهامش للأسفل

2030
01:05:00,080 --> 01:05:03,359
يتم ضبطها على خمسة، والحشوة للمحور السيني

2031
01:05:02,120 --> 01:05:05,640
سيتم تعيينها على أربعة، الحشو ل

2032
01:05:03,359 --> 01:05:07,440
سيتم تعيين المحور y على اثنين والخلفية

2033
01:05:05,640 --> 01:05:09,359
سيتم تعيينها على فارغة تماما والنص

2034
01:05:07,440 --> 01:05:11,560
سيتم ضبطه على اللون الأبيض تمامًا وبشكل كامل

2035
01:05:09,359 --> 01:05:14,560
مدور. لذلك بالنسبة لهذه التسمية الممتدة، سنقوم بذلك

2036
01:05:11,560 --> 01:05:16,080
فقط قل مرة أخرى. انا ذاهب لحفظ الملف الخاص بي

2037
01:05:14,560 --> 01:05:17,760
والآن لنفترض أنني إذا قمت بالنقر فوق هذا

2038
01:05:16,080 --> 01:05:20,160
أيقونة، وسوف تعطيني محمل

2039
01:05:17,760 --> 01:05:23,120
أولا وقبل كل شيء، ولكن

2040
01:05:20,160 --> 01:05:25,640
شيء ليس صحيحا.

2041
01:05:23,120 --> 01:05:28,480
حسنًا، ما زلنا نحصل على محمل. دع

2042
01:05:25,640 --> 01:05:30,720
لي أن أذهب إلى وحدة التحكم.

2043
01:05:28,480 --> 01:05:33,600
وحصلنا على نوع من الخطأ.

2044
01:05:30,720 --> 01:05:35,840
لذا حدث خطأ أثناء جلب بيانات المنتج، axios.

2045
01:05:33,600 --> 01:05:37,440
يجب أن تكون دمية. لماذا أحتفظ

2046
01:05:35,840 --> 01:05:39,000
نسيان ذلك؟ دعونا فقط ننقذ ما لدينا

2047
01:05:37,440 --> 01:05:41,000
ملف

2048
01:05:39,000 --> 01:05:42,680
والآن اسمحوا لي أن أقوم بتحديث ذلك.

2049
01:05:41,000 --> 01:05:44,040
وهنا يمكنك أن ترى أننا وصلنا الآن

2050
01:05:42,680 --> 01:05:46,440
زر الرجوع الخاص بنا هنا، وهو

2051
01:05:44,040 --> 01:05:48,000
تبدو مذهلة. لذلك كان هذا هو الأول

2052
01:05:46,440 --> 01:05:50,359
الشيء الذي يتعين علينا إنشاء ظهرنا

2053
01:05:48,000 --> 01:05:52,480
زر. الآن دعونا فقط ننشئ صورتنا.

2054
01:05:50,359 --> 01:05:53,800
لذلك سأستخدم صورتي هنا و

2055
01:05:52,480 --> 01:05:55,600
سأستخدم مثل أول شيء،

2056
01:05:53,800 --> 01:05:57,800
بلدي المنتج.الصور

2057
01:05:55,600 --> 01:05:59,760
ونريد الحصول على الصورة الأولى فقط

2058
01:05:57,800 --> 01:06:01,960
من ذلك. والآن عن البديل

2059
01:05:59,760 --> 01:06:04,560
النص، ونحن في طريقنا إلى توفير

2060
01:06:01,960 --> 01:06:06,120
عنوان المنتج ثم للفئة

2061
01:06:04,560 --> 01:06:09,480
الأسماء، سأكتب فقط مثل العرض

2062
01:06:06,120 --> 01:06:11,000
سيتم ضبطه على 50% وسيكون الارتفاع أيضًا

2063
01:06:09,480 --> 01:06:12,800
ضبط على السيارات والهامش للأسفل

2064
01:06:11,000 --> 01:06:14,600
سيتم تعيينها إلى خمسة. انا ذاهب للحفظ

2065
01:06:12,800 --> 01:06:16,560
هذا ودعونا نقوم بتحديث ذلك. هكذا

2066
01:06:14,600 --> 01:06:18,320
سوف يعطينا تلك الصورة بشكل صحيح

2067
01:06:16,560 --> 01:06:21,560
هنا. سأعود وأختار

2068
01:06:18,320 --> 01:06:23,040
واحد آخر مثل ربما أريد أن أختار

2069
01:06:21,560 --> 01:06:24,520
نعم، هذه الأريكة ستكون جيدة. هل هناك

2070
01:06:23,040 --> 01:06:25,640
أريكة أو لا أعرف ماذا بحق الجحيم

2071
01:06:24,520 --> 01:06:27,120
هذا هو.

2072
01:06:25,640 --> 01:06:29,760
لذا، نعم، هنا يمكنك أن ترى أننا الآن

2073
01:06:27,120 --> 01:06:31,680
الحصول على تلك الصورة هنا والآن نحن

2074
01:06:29,760 --> 01:06:33,840
يجب أن نقدم H1 لدينا وأنا ذاهب ل

2075
01:06:31,680 --> 01:06:36,080
أن تقدم بعض الطبقات مثل النص

2076
01:06:33,840 --> 01:06:38,160
سيتم ضبطه على 2 XL، الهامش للأسفل

2077
01:06:36,080 --> 01:06:40,280
سيتم ضبطه على أربعة وسيتم ضبط الخط

2078
01:06:38,160 --> 01:06:42,840
إلى جريئة تماما. حسنًا، فلنستخدم فقط

2079
01:06:40,280 --> 01:06:44,200
منتجاتنا.العنوان

2080
01:06:42,840 --> 01:06:45,200
ودعونا فقط نحفظ ملفنا وهنا

2081
01:06:44,200 --> 01:06:47,000
يمكنك أن ترى أننا نحصل الآن على

2082
01:06:45,200 --> 01:06:48,760
عنوان المنتج. انا ذاهب لتقديم أيضا

2083
01:06:47,000 --> 01:06:50,800
فقرة مع فئات الهامش

2084
01:06:48,760 --> 01:06:54,720
سيتم تعيين الجزء السفلي على أربعة والنص

2085
01:06:50,800 --> 01:06:56,760
سيتم ضبطه على اللون الرمادي تمامًا 700 وأيضًا

2086
01:06:54,720 --> 01:06:58,400
سيتم ضبط العرض على

2087
01:06:56,760 --> 01:06:59,720
كما تعلمون، العرض تعسفي

2088
01:06:58,400 --> 01:07:02,920
القيمة، لذلك يتعين علينا القيام به

2089
01:06:59,720 --> 01:07:05,200
ذلك يدوياً. لذلك سأستخدم فقط 70%

2090
01:07:02,920 --> 01:07:05,880
وأغلق ذلك. والآن بالداخل هناك، نحن

2091
01:07:05,200 --> 01:07:07,480
سوف نستخدم

2092
01:07:05,880 --> 01:07:08,800
وصف المنتج.

2093
01:07:07,480 --> 01:07:09,640
سأقوم بحفظ ذلك وهنا يمكنك ذلك

2094
01:07:08,800 --> 01:07:12,720
نرى أنه سوف يعطينا ذلك

2095
01:07:09,640 --> 01:07:12,720
الوصف هنا.

2096
01:07:13,680 --> 01:07:17,640
والآن تحت هناك، نحن ذاهبون

2097
01:07:15,720 --> 01:07:19,120
لاستخدام المرن. يمكنك تقديم المزيد

2098
01:07:17,640 --> 01:07:20,840
التصميم إذا أردت ذلك، ولكن في بلدي

2099
01:07:19,120 --> 01:07:22,600
الحالة، وهذا سوف يكون على ما يرام.

2100
01:07:20,840 --> 01:07:23,640
لذلك دعونا نقدم سعرنا الصحيح

2101
01:07:22,600 --> 01:07:25,160
هنا. لذلك سوف نستخدم

2102
01:07:23,640 --> 01:07:26,480
سعر المنتج.

2103
01:07:25,160 --> 01:07:27,920
والآن تحت هذه الفقرة، نحن

2104
01:07:26,480 --> 01:07:29,920
سوف نستخدم مثل الهامش ل

2105
01:07:27,920 --> 01:07:31,280
سيتم ضبط اليسار على 10 ودعونا

2106
01:07:29,920 --> 01:07:35,160
ما عليك سوى تقديم تقييمنا هنا

2107
01:07:31,280 --> 01:07:37,000
هذه الحالة ومن ثم تصنيف المنتج.

2108
01:07:35,160 --> 01:07:38,280
حسنًا، سأقوم بحفظ ملفي و

2109
01:07:37,000 --> 01:07:40,560
هنا يمكنك أن ترى أننا نحصل الآن على ما لدينا

2110
01:07:38,280 --> 01:07:41,960
السعر وأيضا التصنيف، وهو

2111
01:07:40,560 --> 01:07:44,080
مذهل. لذلك دعونا نفترض إذا كنت أريد ذلك

2112
01:07:41,960 --> 01:07:46,280
انتقل إلى الصفحة التالية وأنا ذاهب إلى

2113
01:07:44,080 --> 01:07:47,920
فقط اختر طعام القطط. انها سوف

2114
01:07:46,280 --> 01:07:49,120
يعطينا أولا وقبل كل شيء، الصورة. إنه كذلك

2115
01:07:47,920 --> 01:07:51,080
أخذ بعض الوقت بسببي

2116
01:07:49,120 --> 01:07:53,640
اتصال بالإنترنت. لذلك فهو يعطي الآن

2117
01:07:51,080 --> 01:07:55,520
لي الصورة، الاسم، الوصف،

2118
01:07:53,640 --> 01:07:57,080
أيضا السعر والتصنيف. يمكنك ذلك

2119
01:07:55,520 --> 01:07:59,800
تغيير تماما مثل أي شيء أنت

2120
01:07:57,080 --> 01:08:02,400
تريد. إذن هذا هو الحال، وكان هذا كل شيء

2121
01:07:59,800 --> 01:08:03,760
حول صفحة المنتج. والتالي نحن

2122
01:08:02,400 --> 01:08:05,600
سوف نعتني بالجزء العلوي

2123
01:08:03,760 --> 01:08:07,200
البائع وأيضا المدونات. كان هذا كل شيء

2124
01:08:05,600 --> 01:08:09,120
حول صفحة المنتج والآن دعونا

2125
01:08:07,200 --> 01:08:11,320
أنشئ مدوناتنا الشهيرة وأيضًا

2126
01:08:09,120 --> 01:08:12,560
كبار البائعين. حسنًا، سأقوم بذلك فقط

2127
01:08:11,320 --> 01:08:16,319
إنشاء مكونين. انا ذاهب لاعطاء

2128
01:08:12,560 --> 01:08:17,680
إنه اسم مثل blogs.tsx الشهير.

2129
01:08:16,319 --> 01:08:19,759
وفي الداخل هناك، اسمحوا لي أن أقوم بإنشاء حسابي الخاص

2130
01:08:17,680 --> 01:08:21,160
المكون وبعد ذلك سنكون

2131
01:08:19,759 --> 01:08:23,839
خلق أيضا

2132
01:08:21,160 --> 01:08:26,440
اه لكبار البائعين.tsx

2133
01:08:23,839 --> 01:08:28,120
كذلك. لذلك دعونا نكتب RAFCE الخاص بنا

2134
01:08:26,440 --> 01:08:30,000
والآن دعونا نسجل ذلك في ملفنا

2135
01:08:28,120 --> 01:08:31,680
مكون التطبيق. إذن تحت هذه

2136
01:08:30,000 --> 01:08:33,719
الطرق، ونحن في طريقنا إلى إنشاء واحدة

2137
01:08:31,680 --> 01:08:35,880
المزيد من div وداخل هذا div، أولاً

2138
01:08:33,719 --> 01:08:37,040
جميعًا، اسمحوا لي فقط أن أقدم أفضل الكتب مبيعًا

2139
01:08:35,880 --> 01:08:40,160
وبعد ذلك سنكون كذلك

2140
01:08:37,040 --> 01:08:41,680
جعل شعبيتنا هيا شعبية.

2141
01:08:40,160 --> 01:08:43,799
لذلك سأقوم بحفظ ملفي واتركه الآن

2142
01:08:41,680 --> 01:08:45,480
أذهب إلى كبار البائعين والآن دعونا

2143
01:08:43,799 --> 01:08:46,520
فقط قم بإنشاء ذلك. إذن أول شيء

2144
01:08:45,480 --> 01:08:48,640
ما سأفعله هو أنني سأذهب

2145
01:08:46,520 --> 01:08:51,880
فقط لإنشاء مؤلفي

2146
01:08:48,640 --> 01:08:53,280
اه دولة لذلك قم بتعيين المؤلفين

2147
01:08:51,880 --> 01:08:55,319
وهذا سيكون مساويا للاستخدام

2148
01:08:53,280 --> 01:08:57,359
الدولة وهنا سنكون فقط

2149
01:08:55,319 --> 01:08:59,160
مصفوفة المرور. حسنا، والآن اسمحوا لي فقط

2150
01:08:57,359 --> 01:09:00,359
قم بتعليق ذلك باستخدام المؤلف الذي

2151
01:08:59,160 --> 01:09:03,359
سنقوم بإنشاء في عدد قليل

2152
01:09:00,359 --> 01:09:04,799
ثواني والآن دعونا نقدم ذلك.

2153
01:09:03,359 --> 01:09:06,280
حسنًا، فلنقم الآن بإنشاء ذلك

2154
01:09:04,799 --> 01:09:08,719
واجهة هنا. لذلك سأكتب فقط

2155
01:09:06,280 --> 01:09:10,520
واجهة ثم المؤلف والاسم سوف

2156
01:09:08,719 --> 01:09:12,960
تكون سلسلة. سنكون كذلك

2157
01:09:10,520 --> 01:09:16,120
العرض هو التالي وهذا يحدث

2158
01:09:12,960 --> 01:09:18,120
أن تكون منطقية وأيضا

2159
01:09:16,120 --> 01:09:20,160
وأيضا علينا أن نقدم الصورة

2160
01:09:18,120 --> 01:09:21,839
وسوف تكون الصورة سلسلة تماما.

2161
01:09:20,160 --> 01:09:23,240
حسنًا، لقد تم ذلك تمامًا. الآن نحن

2162
01:09:21,839 --> 01:09:24,960
يجب أن تجلب البيانات لدينا. لذلك نحن ذاهبون

2163
01:09:23,240 --> 01:09:26,960
لاستخدام تأثير الاستخدام والآن

2164
01:09:24,960 --> 01:09:29,080
داخل هناك، لمجموعة التبعية،

2165
01:09:26,960 --> 01:09:30,799
أنا لا أقدم أي شيء. والآن

2166
01:09:29,080 --> 01:09:32,160
في الداخل هناك، أولا وقبل كل شيء، دعونا فقط

2167
01:09:30,799 --> 01:09:34,279
إنشاء وظيفتنا. لذا، سأعطي فقط

2168
01:09:32,160 --> 01:09:35,960
إنه اسم مثل جلب البيانات. إنه

2169
01:09:34,279 --> 01:09:37,440
ستكون وظيفة غير متزامنة

2170
01:09:35,960 --> 01:09:39,520
لأننا الآن جلب نوعا من

2171
01:09:37,440 --> 01:09:40,960
بيانات داخل هناك. لذا، الآن دعونا فقط

2172
01:09:39,520 --> 01:09:42,520
استخدم كتلة المحاولة والالتقاط الخاصة بنا. ل

2173
01:09:40,960 --> 01:09:45,480
كتلة الصيد، سأستخدمها

2174
01:09:42,520 --> 01:09:46,440
console.error. وسأقول فقط مثل اه

2175
01:09:45,480 --> 01:09:49,000
خطأ

2176
01:09:46,440 --> 01:09:51,000
جلب المؤلفين. ودعونا نقدم لدينا

2177
01:09:49,000 --> 01:09:52,120
خطأ كذلك. وبالنسبة لكتلة المحاولة،

2178
01:09:51,000 --> 01:09:54,120
بادئ ذي بدء، سوف نحصل على

2179
01:09:52,120 --> 01:09:55,880
الاستجابة باستخدام الانتظار و

2180
01:09:54,120 --> 01:09:59,440
طريقة الجلب. وهنا سنكون

2181
01:09:55,880 --> 01:10:01,760
تمرير https لدينا ثم عشوائي

2182
01:09:59,440 --> 01:10:05,040
user.me.

2183
01:10:01,760 --> 01:10:07,320
ومن ثم API وأه علامة استفهام

2184
01:10:05,040 --> 01:10:09,120
النتائج تساوي خمسة لأننا فقط

2185
01:10:07,320 --> 01:10:10,240
تريد الحصول على خمسة مستخدمين. حسنا، إذا كنت

2186
01:10:09,120 --> 01:10:11,720
تريد الحصول على المزيد، يمكنك تماما

2187
01:10:10,240 --> 01:10:13,440
تقدم هناك مثل دعونا نفترض إذا كنت

2188
01:10:11,720 --> 01:10:15,360
تريد الحصول على 10 مستخدمين، يمكنك الكتابة فقط

2189
01:10:13,440 --> 01:10:17,440
10 هنا. ولكن في حالتي، خمسة سوف

2190
01:10:15,360 --> 01:10:19,680
كن بخير. حسنًا، سأكتب مثل ذلك

2191
01:10:17,440 --> 01:10:22,320
data. الآن، اسمحوا لي أن أحول ردي إلى

2192
01:10:19,680 --> 01:10:23,560
JSON. تمام. والآن نقوم بتخزين الداخل

2193
01:10:22,320 --> 01:10:24,800
البيانات. لذا، الشيء التالي الذي علينا

2194
01:10:23,560 --> 01:10:26,520
ما علينا القيام به هو أن علينا أن نكرر

2195
01:10:24,800 --> 01:10:29,640
من خلال بياناتهم. لذا، سأفعل فقط

2196
01:10:26,520 --> 01:10:31,000
الكتابة مثل بيانات المؤلفين. وأنا هنا

2197
01:10:29,640 --> 01:10:33,000
سوف يتم تمرير حق المؤلف الخاص بي

2198
01:10:31,000 --> 01:10:36,800
هنا. وكانت تلك مصفوفة. الآن هو

2199
01:10:33,000 --> 01:10:38,280
ستكون مساوية لـ data.results.map.

2200
01:10:36,800 --> 01:10:40,160
والآن سنكون هنا أيضًا

2201
01:10:38,280 --> 01:10:41,760
توفير المعلمة لدينا، والتي ستكون أ

2202
01:10:40,160 --> 01:10:43,720
مستخدم. وفي الوقت الحالي، سنكون كذلك

2203
01:10:41,760 --> 01:10:44,800
فقط نمر هنا لأننا لا نفعل ذلك

2204
01:10:43,720 --> 01:10:47,600
معرفة أي نوع من البيانات نحن الآن

2205
01:10:44,800 --> 01:10:48,600
الحصول على الآن. تمام. والآن بالداخل

2206
01:10:47,600 --> 01:10:50,360
هناك، ونحن على وشك أن نقدم

2207
01:10:48,600 --> 01:10:52,880
أولا وقبل كل شيء، الاسم. وهنا دعونا

2208
01:10:50,360 --> 01:10:54,200
فقط قم بتوفير user.name.first الخاص بنا.

2209
01:10:52,880 --> 01:10:58,440
وبعد ذلك سنكون كذلك

2210
01:10:54,200 --> 01:10:59,280
توفير اه user.name.last.

2211
01:10:58,440 --> 01:11:01,720
حسنًا، سوف يمنحنا

2212
01:10:59,280 --> 01:11:05,320
اسم المستخدم. والآن هو التالي، تعال

2213
01:11:01,720 --> 01:11:07,760
على. سيتم تعيين Uh is Follow على false

2214
01:11:05,320 --> 01:11:10,640
في البداية. وسوف تكون صورة المستخدم

2215
01:11:07,760 --> 01:11:12,440
user.pictures.

2216
01:11:10,640 --> 01:11:14,560
الصورة.متوسطة.

2217
01:11:12,440 --> 01:11:16,840
وهنا علينا أن نقدم الفواصل لدينا.

2218
01:11:14,560 --> 01:11:19,240
وقد انتهى هذا الخطأ الآن بنجاح.

2219
01:11:16,840 --> 01:11:21,320
تغيير مؤلفينا مجموعة وتقديم لدينا

2220
01:11:19,240 --> 01:11:23,080
بيانات المؤلفين الخاصة إلى هناك. هذا هو الحال

2221
01:11:21,320 --> 01:11:25,000
كل ما يتعين علينا القيام به من أجل هذا

2222
01:11:23,080 --> 01:11:27,160
جلب البيانات. واسمحوا لي أن أسمي ذلك

2223
01:11:25,000 --> 01:11:28,920
هنا. جلب البيانات. والآن أنا

2224
01:11:27,160 --> 01:11:30,960
ذاهب للتنفيذ هناك. دعونا نقدم

2225
01:11:28,920 --> 01:11:32,280
لدينا JSX. لذا، أولاً وقبل كل شيء، سأقوم بذلك

2226
01:11:30,960 --> 01:11:34,080
فقط قم بتغيير لون الخلفية إلى

2227
01:11:32,280 --> 01:11:35,520
بيضاء تماما. انا ذاهب لتقديم أيضا

2228
01:11:34,080 --> 01:11:37,680
سيتم تعيين الحشو في كل مكان

2229
01:11:35,520 --> 01:11:39,560
إلى خمسة. سيكون هامش المحور X

2230
01:11:37,680 --> 01:11:42,200
تعيين إلى خمسة. الهامش للأعلى سيكون

2231
01:11:39,560 --> 01:11:44,560
خمسة كذلك. واه سأفعل ذلك أيضًا

2232
01:11:42,200 --> 01:11:47,640
توفير الحدود. وسيكون العرض فقط

2233
01:11:44,560 --> 01:11:48,880
23 ريم ومدورة بالكامل. الآن في الداخل

2234
01:11:47,640 --> 01:11:52,760
هناك، سنقوم بإنشاء لدينا

2235
01:11:48,880 --> 01:11:55,240
H2 مع فئات النص

2236
01:11:52,760 --> 01:11:57,000
سيتم تعيين نص Excel وكذلك الخط

2237
01:11:55,240 --> 01:11:59,240
إلى جريئة. الهامش للأسفل سيكون

2238
01:11:57,000 --> 01:12:01,320
تعيين إلى خمسة. ودعونا نقدم فقط لدينا

2239
01:11:59,240 --> 01:12:03,200
كبار البائعين داخل هذا. انا ذاهب ل

2240
01:12:01,320 --> 01:12:05,080
احفظ الملف الخاص بي. وهذه هي الطريقة التي تبدو بها

2241
01:12:03,200 --> 01:12:07,440
مثل هنا. التالي، علينا أن نفعل ذلك

2242
01:12:05,080 --> 01:12:08,680
توفير ماي لدينا. وداخل هذا UL، نحن

2243
01:12:07,440 --> 01:12:10,520
سوف يتم التكرار من خلال

2244
01:12:08,680 --> 01:12:11,640
جميع المؤلفين. ثم في الداخل

2245
01:12:10,520 --> 01:12:13,880
هناك، سنقوم بتوفير

2246
01:12:11,640 --> 01:12:16,120
المؤلف وأيضا فهرس المؤلف.

2247
01:12:13,880 --> 01:12:18,400
ثم في الداخل هناك، سأفعل

2248
01:12:16,120 --> 01:12:20,080
أولا وقبل كل شيء، اكتب LI الخاص بي. وبالنسبة ل

2249
01:12:18,400 --> 01:12:22,360
المفتاح، سأقدم الفهرس الخاص بي بشكل صحيح

2250
01:12:20,080 --> 01:12:24,160
هنا. يمكنك استخدام UUID ويمكنك

2251
01:12:22,360 --> 01:12:25,640
استخدم كل تلك الأشياء. لكن في الوقت الحالي، أنا كذلك

2252
01:12:24,160 --> 01:12:27,440
الذهاب فقط لتوفير هذا الفهرس الصحيح

2253
01:12:25,640 --> 01:12:29,520
هنا. وبالنسبة لأسماء الصفوف، أنا ذاهب

2254
01:12:27,440 --> 01:12:31,200
لتوفير مثل العناصر المرنة والعناصر

2255
01:12:29,520 --> 01:12:33,560
سيتم الآن ضبطه على المركز. تبرير الإرادة

2256
01:12:31,200 --> 01:12:35,400
يتم ضبطها على ما بين. والهامش ل

2257
01:12:33,560 --> 01:12:36,720
سيتم ضبط الجزء السفلي على أربعة فقط.

2258
01:12:35,400 --> 01:12:38,560
في الداخل هناك، سنكون

2259
01:12:36,720 --> 01:12:41,560
سيكون إنشاء قسمنا وقسمنا

2260
01:12:38,560 --> 01:12:44,040
فليكس. سيتم ضبط التبرير على المركز.

2261
01:12:41,560 --> 01:12:46,120
وسيتم أيضًا تعيين العناصر إلى المركز.

2262
01:12:44,040 --> 01:12:47,720
دعونا فقط نعرض صورتنا. وأنا

2263
01:12:46,120 --> 01:12:50,120
الذهاب فقط لإزالة هناك واستبدال

2264
01:12:47,720 --> 01:12:51,440
هناك مع Author.image. وبالنسبة ل

2265
01:12:50,120 --> 01:12:54,520
النص البديل، سنكون

2266
01:12:51,440 --> 01:12:56,040
تقديم مثل المؤلف. الاسم كذلك. و

2267
01:12:54,520 --> 01:12:58,840
الآن دعونا نقدم دروسنا مثل

2268
01:12:56,040 --> 01:13:02,480
سيتم ضبط العرض على 25%. وأيضا

2269
01:12:58,840 --> 01:13:04,640
سيتم ضبط الارتفاع على 25٪.

2270
01:13:02,480 --> 01:13:06,600
دعونا فقط نقدم مركز التبرير الخاص بنا

2271
01:13:04,640 --> 01:13:08,440
وتقريبها بالكامل من الجدار. لذا، إذا كنت

2272
01:13:06,600 --> 01:13:10,160
احفظ ملفي، وهذا هو كيف يبدو

2273
01:13:08,440 --> 01:13:11,400
مثل هنا. لذا، تحت هناك،

2274
01:13:10,160 --> 01:13:12,920
سنقوم بإنشاء امتدادنا

2275
01:13:11,400 --> 01:13:14,720
مع فئات الهامش لليسار

2276
01:13:12,920 --> 01:13:17,480
سيتم ضبطها على أربعة. ودعونا فقط

2277
01:13:14,720 --> 01:13:21,080
تقديم اسم المؤلف لدينا. إذا قمت بحفظ بلدي

2278
01:13:17,480 --> 01:13:23,000
الملف، والآن تبدو مذهلة.

2279
01:13:21,080 --> 01:13:24,840
حسنًا، إنهم يبدون مذهلين للغاية

2280
01:13:23,000 --> 01:13:26,800
الآن. تحت هذا القسم نحن

2281
01:13:24,840 --> 01:13:28,640
سوف نقوم بإنشاء الزر الخاص بنا. و

2282
01:13:26,800 --> 01:13:29,800
سيحتوي هذا الزر على بعض الأشياء مثل

2283
01:13:28,640 --> 01:13:31,800
اه هل تعلم ماذا؟ نعم سأفعل

2284
01:13:29,800 --> 01:13:35,040
مجرد تقديم أولا وقبل كل شيء، يا

2285
01:13:31,800 --> 01:13:36,880
اه مؤلف إذن، المؤلف هو التالي.

2286
01:13:35,040 --> 01:13:38,920
وإذا كان يتبع، فنحن ذاهبون

2287
01:13:36,880 --> 01:13:40,400
لاستخدامها مثل إلغاء المتابعة. وإذا كان ذلك

2288
01:13:38,920 --> 01:13:42,480
ليس هذا هو الحال، سنكون فقط

2289
01:13:40,400 --> 01:13:43,800
تقديم مثل المتابعة. إذا قمت بحفظ بلدي

2290
01:13:42,480 --> 01:13:45,640
الملف، وهنا يمكنك أن ترى أننا الآن

2291
01:13:43,800 --> 01:13:47,400
الحصول على زر المتابعة. إذا قمت بالنقر فوق

2292
01:13:45,640 --> 01:13:48,760
هناك، لن يحدث شيء. وأنا

2293
01:13:47,400 --> 01:13:50,200
سوف نقدم هذا المنطق في عدد قليل

2294
01:13:48,760 --> 01:13:52,360
ثواني. ولكن قبل كل شيء، علينا أن نفعل ذلك

2295
01:13:50,200 --> 01:13:54,040
الاسلوب هناك. لذا، سأستخدم مثل اه

2296
01:13:52,360 --> 01:13:55,840
أسماء الطبقة. وسنكون كذلك

2297
01:13:54,040 --> 01:13:57,320
تقديم المحتوى الديناميكي. لذا، من أجل ذلك،

2298
01:13:55,840 --> 01:13:59,120
سوف نستخدم مثل الحشو

2299
01:13:57,320 --> 01:14:01,440
للمحور Y للواحد، والحشوة للمحور X

2300
01:13:59,120 --> 01:14:03,160
محور ثلاثة، مدور بالكامل. وهنا

2301
01:14:01,440 --> 01:14:07,120
دعونا فقط نعرض المحتوى الديناميكي الخاص بنا

2302
01:14:03,160 --> 01:14:08,920
مثل المؤلف. اه هيا. اه

2303
01:14:07,120 --> 01:14:10,320
Author.isFollowing.

2304
01:14:08,920 --> 01:14:11,840
إذا كان هذا هو الحال، فماذا لدينا

2305
01:14:10,320 --> 01:14:14,080
أن تفعل؟ نريد فقط أن نتغير مثل

2306
01:14:11,840 --> 01:14:16,280
لون الخلفية إلى الأسود تماما. اه انا

2307
01:14:14,080 --> 01:14:18,280
يعني مثل الأحمر وأيضا سيكون النص

2308
01:14:16,280 --> 01:14:19,480
تم ضبطه على اللون الأبيض تمامًا. إذا لم يكن هذا هو

2309
01:14:18,280 --> 01:14:21,400
في هذه الحالة، سنقوم بتغيير

2310
01:14:19,480 --> 01:14:23,080
لون الخلفية إلى الأسود تماما و

2311
01:14:21,400 --> 01:14:25,120
لون النص إلى الأبيض تماما. لذلك، إذا

2312
01:14:23,080 --> 01:14:26,600
لقد قمت بحفظ ملفي، واسمحوا لي أن أتحقق منه

2313
01:14:25,120 --> 01:14:28,760
هذا خارج. وهنا يمكنك أن ترى نحن فقط

2314
01:14:26,600 --> 01:14:30,160
يكون مثل هذه اللون الأسود. ودعونا

2315
01:14:28,760 --> 01:14:32,680
فقط قم بتوفير هذه الوظيفة بشكل صحيح

2316
01:14:30,160 --> 01:14:34,280
هنا. عند النقر، عندما ينقر شخص ما على

2317
01:14:32,680 --> 01:14:35,680
هناك، فماذا علينا أن نفعل؟ لدينا

2318
01:14:34,280 --> 01:14:37,400
لإطلاق هذه الوظيفة فقط، وهي

2319
01:14:35,680 --> 01:14:39,200
التعامل مع متابعة

2320
01:14:37,400 --> 01:14:40,920
اه انقر. وعلينا أيضًا أن نقدم

2321
01:14:39,200 --> 01:14:42,400
فهرسنا بالداخل هناك. حسنًا، أنا كذلك

2322
01:14:40,920 --> 01:14:43,880
الذهاب لنسخ هناك. والآن دعونا فقط

2323
01:14:42,400 --> 01:14:46,600
خلق هناك. انا ذاهب للذهاب إلى

2324
01:14:43,880 --> 01:14:47,920
أعلى. وتحت تأثير المستخدم هذا، نحن

2325
01:14:46,600 --> 01:14:50,360
سوف نقوم بإنشاء هذه الوظيفة

2326
01:14:47,920 --> 01:14:52,600
هنا. وسوف يستغرق المؤشر.

2327
01:14:50,360 --> 01:14:54,360
والفهرس سيكون رقما.

2328
01:14:52,600 --> 01:14:56,400
والآن بالداخل هناك، سنكون

2329
01:14:54,360 --> 01:14:58,320
وضع مؤلفينا. وهنا علينا أن نفعل ذلك

2330
01:14:56,400 --> 01:15:00,840
تقديم مؤلفنا السابق. ودعونا

2331
01:14:58,320 --> 01:15:02,040
فقط استخدم مؤلفنا السابق. dark.map.

2332
01:15:00,840 --> 01:15:04,200
وهنا سوف نقدم

2333
01:15:02,040 --> 01:15:06,120
المؤلف وأيضا الفهرس. حسنا، لذلك

2334
01:15:04,200 --> 01:15:08,480
دعونا نلتف هناك كما لو كان مؤلفًا

2335
01:15:06,120 --> 01:15:10,280
وأيضا الفهرس. والآن خارج من

2336
01:15:08,480 --> 01:15:13,240
هناك، ونحن نذهب إلى التحقق من ذلك

2337
01:15:10,280 --> 01:15:15,440
مؤشر الفهرس الثلاثي يساوي الفهرس

2338
01:15:13,240 --> 01:15:17,520
نفسها. إذا كان هذا هو الحال، نريد فقط

2339
01:15:15,440 --> 01:15:19,480
لاستخدامها مثل كل من المؤلف. وبعد ذلك

2340
01:15:17,520 --> 01:15:21,960
نريد أن نقدم مثل ما يلي.

2341
01:15:19,480 --> 01:15:24,920
ونريد هيا. اه لو ما شاء

2342
01:15:21,960 --> 01:15:28,280
l o o w i n g. تريد تعيين هو

2343
01:15:24,920 --> 01:15:29,760
متابعة وليس Author.isFollowing.

2344
01:15:28,280 --> 01:15:31,720
تمام. وفي الخارج من هناك، نحن كذلك

2345
01:15:29,760 --> 01:15:33,520
سوف يتم تقديم مؤلفنا فقط.

2346
01:15:31,720 --> 01:15:34,920
حسنًا، دعوني الآن أحفظ ملفي.

2347
01:15:33,520 --> 01:15:36,320
والآن إذا قمت بالنقر فوق هناك، وهنا

2348
01:15:34,920 --> 01:15:38,920
يمكنك أن ترى أننا أصبحنا الآن مثل

2349
01:15:36,320 --> 01:15:41,160
إلغاء المتابعة. وأيضا اللون تماما

2350
01:15:38,920 --> 01:15:43,240
تغير. يمكنك متابعة الجميع. و

2351
01:15:41,160 --> 01:15:45,160
يمكنك إلغاء المتابعة هناك إذا أردت ذلك.

2352
01:15:43,240 --> 01:15:47,640
لذا، كان هذا هو العنصر الأكثر مبيعًا.

2353
01:15:45,160 --> 01:15:49,600
بعد ذلك، علينا أن نذهب إلى الشعبية

2354
01:15:47,640 --> 01:15:51,840
مكون المدونات وهنا سأفعل

2355
01:15:49,600 --> 01:15:53,880
تمرير مجموعة. وداخل هذه المصفوفة، نحن

2356
01:15:51,840 --> 01:15:56,000
لديك كائن. وداخل ذلك الكائن،

2357
01:15:53,880 --> 01:15:57,600
لدينا عنوان. ويمكن أن يكون العنوان

2358
01:15:56,000 --> 01:15:59,520
أي شيء. وبعد ذلك يمكن للمؤلف أن يكون

2359
01:15:57,600 --> 01:16:01,200
أيضا أي شيء. ويحب يمكن أن يكون

2360
01:15:59,520 --> 01:16:03,360
أي شيء. ويمكن أن تكون التعليقات مثل

2361
01:16:01,200 --> 01:16:05,200
في الأساس أي شيء تريده. حسنا، لذلك

2362
01:16:03,360 --> 01:16:07,240
هذه هي مجموعة مدوناتنا. داخل هذا

2363
01:16:05,200 --> 01:16:09,520
المصفوفة، لدينا بعض الكائنات هنا،

2364
01:16:07,240 --> 01:16:11,560
الذي قمت بتكراره للتو. لذلك، هذا هو بلدي

2365
01:16:09,520 --> 01:16:13,520
بلوق اه مجموعة هنا. والآن دعونا

2366
01:16:11,560 --> 01:16:15,080
فقط كرر من خلال هناك. لكن

2367
01:16:13,520 --> 01:16:16,640
أولا وقبل كل شيء، اسمحوا لي أن أزيل هناك.

2368
01:16:15,080 --> 01:16:17,680
وسأقوم بالتصميم هناك. أول من

2369
01:16:16,640 --> 01:16:19,600
جميع، اسمحوا لي فقط تقديم الخلفية

2370
01:16:17,680 --> 01:16:21,400
لون أبيض تماما. الحشو للجميع

2371
01:16:19,600 --> 01:16:24,160
سيتم تعيين حولها إلى خمسة. سوف العرض

2372
01:16:21,400 --> 01:16:26,400
يتم ضبطها على 23 ريم. وأنا ذاهب أيضا

2373
01:16:24,160 --> 01:16:28,080
توفير هامش لأعلى أربعة و

2374
01:16:26,400 --> 01:16:30,840
توفير الحدود تماما. هامش ل

2375
01:16:28,080 --> 01:16:32,080
سيكون اليسار خمسة وتقريبه. في الداخل

2376
01:16:30,840 --> 01:16:34,960
هناك، سنقدم خدماتنا

2377
01:16:32,080 --> 01:16:36,920
H2. سيتم تعيين النص على التفوق تماما.

2378
01:16:34,960 --> 01:16:38,280
وأيضا سيتم تعيين الخط إلى غامق.

2379
01:16:36,920 --> 01:16:41,240
سيتم تعيين الهامش للأسفل إلى

2380
01:16:38,280 --> 01:16:43,560
خمسة. ودعونا فقط نقدم شعبيتنا

2381
01:16:41,240 --> 01:16:44,800
بلوق داخل هذا. إذا قمت بحفظ الملف الخاص بي،

2382
01:16:43,560 --> 01:16:46,440
وهنا يمكنك أن ترى أننا نحصل الآن

2383
01:16:44,800 --> 01:16:48,640
بطاقتنا. تحت هناك، نحن ذاهبون

2384
01:16:46,440 --> 01:16:50,000
لتقديم UL لدينا. وداخل هذا

2385
01:16:48,640 --> 01:16:51,880
UL، سنقوم بالتكرار

2386
01:16:50,000 --> 01:16:53,960
من خلال جميع مدوناتنا. ودعونا فقط

2387
01:16:51,880 --> 01:16:56,320
استخدم مدونتنا وقم أيضًا بتوفير فهرسنا

2388
01:16:53,960 --> 01:16:58,040
كذلك. حسنًا، نحن الآن بالداخل

2389
01:16:56,320 --> 01:17:00,000
سوف نستخدم UL لدينا. أعني

2390
01:16:58,040 --> 01:17:02,160
مثل LI لدينا. وهنا علينا أن نقدم

2391
01:17:00,000 --> 01:17:03,760
مفتاحنا. وسيكون المفتاح هو الفهرس. و

2392
01:17:02,160 --> 01:17:05,280
دعونا أيضًا نقدم اسم الفصل الخاص بنا

2393
01:17:03,760 --> 01:17:07,280
سيتم تعيين الهامش للأسفل إلى

2394
01:17:05,280 --> 01:17:08,920
أربعة. وداخل هذا UL، نحن ذاهبون

2395
01:17:07,280 --> 01:17:11,160
ليتم توفيرها أيضًا أولاً وقبل كل شيء،

2396
01:17:08,920 --> 01:17:12,880
div مع فئة المرن. وتبرير

2397
01:17:11,160 --> 01:17:15,560
سيتم ضبطه على ما بين. وسوف العناصر

2398
01:17:12,880 --> 01:17:16,960
يتم ضبطها على المركز. تمام. والداخل

2399
01:17:15,560 --> 01:17:19,400
هناك، سنقدم أيضًا

2400
01:17:16,960 --> 01:17:20,760
تمتد لدينا مع فئة الخط الغامق.

2401
01:17:19,400 --> 01:17:23,160
سيتم تعيين الهامش للأسفل إلى

2402
01:17:20,760 --> 01:17:25,040
اثنان. ودعنا نعرض مدونتنا فقط

2403
01:17:23,160 --> 01:17:27,720
عنوان. لذلك، دعونا نستخدم مدونتنا فقط.

2404
01:17:25,040 --> 01:17:28,920
عنوان. انا ذاهب لحفظ هذا الملف.

2405
01:17:27,720 --> 01:17:30,720
وهنا يمكنك أن ترى أننا وصلنا الآن

2406
01:17:28,920 --> 01:17:32,400
جميع عناوين المدونات هنا.

2407
01:17:30,720 --> 01:17:34,440
تحت هذا الامتداد والقسم، نحن موجودون

2408
01:17:32,400 --> 01:17:35,720
سيتم إنشاء فترة أخرى.

2409
01:17:34,440 --> 01:17:39,320
وسأقوم بتوفير دروس

2410
01:17:35,720 --> 01:17:42,160
مثل النص الرمادي تماما من 600. نشرت

2411
01:17:39,320 --> 01:17:44,160
اه ثم blog.author.

2412
01:17:42,160 --> 01:17:45,440
وهنا المؤلف. تحت هذا

2413
01:17:44,160 --> 01:17:47,520
Span، سنقوم بإنشاءه بعد

2414
01:17:45,440 --> 01:17:48,640
div آخر مع فئة flex و

2415
01:17:47,520 --> 01:17:50,720
العناصر

2416
01:17:48,640 --> 01:17:52,760
سيتم تعيين العناصر إلى المركز. هامش ل

2417
01:17:50,720 --> 01:17:54,080
سيتم تعيين الجزء العلوي على اثنين. ونحن هنا

2418
01:17:52,760 --> 01:17:56,560
سوف يتم العرض أولاً وقبل كل شيء،

2419
01:17:54,080 --> 01:17:58,160
أيقونة مثل دائرة الرسائل، وهي

2420
01:17:56,560 --> 01:17:59,920
الآن سوف يأتي من الواضح

2421
01:17:58,160 --> 01:18:01,560
أيقونة. وسأقدم أيضًا

2422
01:17:59,920 --> 01:18:05,160
حجم لهذا. لذلك، سيكون الحجم الآن

2423
01:18:01,560 --> 01:18:06,680
اضبط على 16. أو 16 فقط سيكون جيدًا. لذا،

2424
01:18:05,160 --> 01:18:08,240
انا ذاهب لحفظ هناك. وهذه هي الطريقة

2425
01:18:06,680 --> 01:18:09,760
سوف نحصل على الأيقونة الخاصة بنا. دع

2426
01:18:08,240 --> 01:18:11,920
لي تقديم فترة بلدي مع فئة

2427
01:18:09,760 --> 01:18:13,680
النص باللون الرمادي تمامًا 500. هامش لـ

2428
01:18:11,920 --> 01:18:15,640
سيتم تعيين الحق إلى خمسة. هامش ل

2429
01:18:13,680 --> 01:18:17,440
سيتم تعيين اليسار إلى واحد فقط. و

2430
01:18:15,640 --> 01:18:19,440
داخل هذه الفترة، انا ذاهب لتقديم

2431
01:18:17,440 --> 01:18:20,880
مثل blog.likes.

2432
01:18:19,440 --> 01:18:22,960
هيا، يحب مثل هناك. وأنا ذاهب

2433
01:18:20,880 --> 01:18:24,640
ليغلق هناك. إذن، خارج هذا

2434
01:18:22,960 --> 01:18:26,840
تمتد وأيضا شعبة بهم، أو كما تعلمون

2435
01:18:24,640 --> 01:18:28,360
ماذا؟ خارج هذه الفترة فقط، نحن

2436
01:18:26,840 --> 01:18:31,600
سوف يتم تقديم واحد أكثر مثل

2437
01:18:28,360 --> 01:18:33,280
ممتاز. وبعد ذلك دعونا نقدم فقط

2438
01:18:31,600 --> 01:18:34,520
حجمنا لهذا. لذلك سيتم تحديد الحجم

2439
01:18:33,280 --> 01:18:36,040
إلى 16.

2440
01:18:34,520 --> 01:18:37,440
والآن تحت هناك، نحن ذاهبون

2441
01:18:36,040 --> 01:18:40,440
لاستخدام فترة مع فئة

2442
01:18:37,440 --> 01:18:42,240
النص رمادي تماما من 500. وأيضا

2443
01:18:40,440 --> 01:18:43,680
سيتم تعيين هامش اليمين إلى اثنين.

2444
01:18:42,240 --> 01:18:46,200
سيتم تعيين الهامش لليسار إلى اثنين

2445
01:18:43,680 --> 01:18:47,840
كذلك. لذلك، دعونا نقدم مدونتنا فقط

2446
01:18:46,200 --> 01:18:49,640
تعليقات. وهذا سوف يكون عليه الأمر. لذا،

2447
01:18:47,840 --> 01:18:51,520
إذا قمت بحفظ الملف الخاص بي، وهنا يمكنك أن ترى

2448
01:18:49,640 --> 01:18:53,400
لقد أصبحنا الآن مثل كل الإعجابات

2449
01:18:51,520 --> 01:18:54,680
وجميع التعليقات كذلك. لذا،

2450
01:18:53,400 --> 01:18:57,000
نعم، هذا كل ما علينا

2451
01:18:54,680 --> 01:18:59,200
افعل الآن. لكن علينا تغيير القليل

2452
01:18:57,000 --> 01:19:01,560
الأشياء بالداخل هناك. لذا، علينا أن نفعل ذلك

2453
01:18:59,200 --> 01:19:03,240
تغيير أحجام هذه. ودعونا

2454
01:19:01,560 --> 01:19:04,400
فقط افعل ذلك. هناك بعض التغييرات

2455
01:19:03,240 --> 01:19:05,680
التي قمت بها. لذا فإن أول شيء

2456
01:19:04,400 --> 01:19:07,960
ما عليك القيام به هو أن عليك أن تذهب

2457
01:19:05,680 --> 01:19:10,080
في التطبيق.tsx. وبدلا من

2458
01:19:07,960 --> 01:19:12,200
توفير تبرير بين، عليك أن تفعل ذلك

2459
01:19:10,080 --> 01:19:13,480
تغيير ذلك إلى مركز تبرير. و

2460
01:19:12,200 --> 01:19:15,520
ثم عليك أن تذهب إلى الرئيسية

2461
01:19:13,480 --> 01:19:18,000
المكون وتوفير الهامش فقط

2462
01:19:15,520 --> 01:19:19,960
لحق 10 ريم. ثم أنت

2463
01:19:18,000 --> 01:19:22,400
يجب أن أذهب إلى الشريط الجانبي. ولديك

2464
01:19:19,960 --> 01:19:24,960
لتوفير هامش لأعلى ثلاثة

2465
01:19:22,400 --> 01:19:26,440
وأيضا اه عليك توفير هذه

2466
01:19:24,960 --> 01:19:28,120
الأشياء هنا كما فعلنا بالفعل

2467
01:19:26,440 --> 01:19:30,000
قدمت بعض منهم ولكن هنا لديك

2468
01:19:28,120 --> 01:19:31,560
لتوفير مثل كامل وهذا هو

2469
01:19:30,000 --> 01:19:33,680
كيف ستبدو واجهة المستخدم الخاصة بك. والآن دعونا

2470
01:19:31,560 --> 01:19:36,080
لي فقط اختباره للمرة الأخيرة. أنا

2471
01:19:33,680 --> 01:19:37,920
سوف نقدم مثل شيء ربما

2472
01:19:36,080 --> 01:19:39,960
انا ذاهب للبحث فقط عن مثل اللون الأحمر

2473
01:19:37,920 --> 01:19:41,760
مسمار. تعال.

2474
01:19:39,960 --> 01:19:43,880
مسمار لذلك سوف يعطيني ذلك أولاً

2475
01:19:41,760 --> 01:19:46,240
واحد ثم إذا بحثت عن مثل

2476
01:19:43,880 --> 01:19:48,400
الحد الأدنى للسعر لذلك سأكتب فقط مثل 10

2477
01:19:46,240 --> 01:19:49,600
أو تعلم أن 19 سيكون جيدًا أو 20 سيكون جيدًا

2478
01:19:48,400 --> 01:19:51,520
كن بخير.

2479
01:19:49,600 --> 01:19:52,840
حسنًا ثم 200 لذلك سوف يعطي

2480
01:19:51,520 --> 01:19:54,640
لي كل منتجاتهم. الآن اسمحوا لي

2481
01:19:52,840 --> 01:19:55,840
فقط انقر على إعادة التعيين. يمكنك النقر

2482
01:19:54,640 --> 01:19:57,720
على الجمال لذلك سوف يحدث فقط

2483
01:19:55,840 --> 01:19:59,440
يعطينا عنصر الجمال. اسمحوا لي أن انقر

2484
01:19:57,720 --> 01:20:00,920
على إعادة تعيين مرة أخرى. انا ذاهب ل

2485
01:19:59,440 --> 01:20:02,480
انقر على أبل لذلك سوف يحدث ذلك فقط

2486
01:20:00,920 --> 01:20:04,320
أعطني التفاح

2487
01:20:02,480 --> 01:20:05,680
المنتج ثم إذا قمت بالنقر فوق على الساعة

2488
01:20:04,320 --> 01:20:07,400
لذلك سوف تعطيني الساعات و

2489
01:20:05,680 --> 01:20:09,520
وهكذا دواليك. الآن يمكنك أيضا

2490
01:20:07,400 --> 01:20:12,160
حدد واحدة رخيصة. يمكنني اختيار

2491
01:20:09,520 --> 01:20:13,840
واحدة باهظة الثمن وأيضا شعبية

2492
01:20:12,160 --> 01:20:15,640
ويمكننا أيضًا العمل مع ترقيم الصفحات

2493
01:20:13,840 --> 01:20:17,200
لذلك إذا ذهبت إلى الصفحة التالية، وهكذا

2494
01:20:15,640 --> 01:20:19,800
وهكذا دواليك. لذلك سوف يعطيني

2495
01:20:17,200 --> 01:20:21,960
كل تلك العناصر هنا. تمام؟ و

2496
01:20:19,800 --> 01:20:23,800
يمكننا أيضًا متابعة شخص ما وإلغاء متابعته

2497
01:20:21,960 --> 01:20:26,120
شخص ما، وهذه هي الطريقة التي لدينا واجهة المستخدم بأكملها

2498
01:20:23,800 --> 01:20:27,600
سوف تبدو وكأنها. شكرا جزيلا لكم

2499
01:20:26,120 --> 01:20:29,200
مشاهدة وإذا كنت تحب هذا النوع من

2500
01:20:27,600 --> 01:20:30,840
المشاريع لذا لا تتردد في التعليق

2501
01:20:29,200 --> 01:20:32,840
أدناه وسأبذل قصارى جهدي ل

2502
01:20:30,840 --> 01:20:34,400
اصنع مشروعًا رائعًا مثل هذه

2503
01:20:32,840 --> 01:20:35,920
المستقبل كذلك. لذلك أنا ذاهب لرؤية

2504
01:20:34,400 --> 01:20:39,280
لكم في الفيديو التالي. شكرا جزيلا لك

2505
01:20:35,920 --> 01:20:39,280
للمشاهدة وداعا.