در این مطلب، ویدئو برنامه وب OCR زمان واقعی (React، NodeJS، Python و AWS) با زیرنویس فارسی را برای دانلود قرار داده ام. شما میتوانید با پرداخت 15 هزار تومان ، این ویدیو به علاوه تمامی فیلم های سایت را دانلود کنید.اکثر فیلم های سایت به زبان انگلیسی می باشند. این ویدئو دارای زیرنویس فارسی ترجمه شده توسط هوش مصنوعی می باشد که میتوانید نمونه ای از آن را در قسمت پایانی این مطلب مشاهده کنید.
مدت زمان فیلم: 1:52:44
تصاویر این ویدئو:
قسمتی از زیرنویس این فیلم:
00:00:00,060 –> 00:00:02,429
سلام بچه ها، به نظر می رسید امروز اینجا بسیار
2
00:00:02,429 –> 00:00:04,410
هیجان زده هستم، زیرا ما در شرف
3
00:00:04,410 –> 00:00:08,189
ساختن یک برنامه وب OCR بلادرنگ
4
00:00:08,189 –> 00:00:10,200
با استفاده از فناوری های پیشرفته و
5
00:00:10,200 –> 00:00:12,870
معماری خدمات نشانگر هستیم، بنابراین
6
00:00:12,870 –> 00:00:15,269
از react برای front end استفاده خواهیم کرد که از
7
00:00:15,269 –> 00:00:17,220
node استفاده می کند. js و Python برای back-end در
8
00:00:17,220 –> 00:00:19,199
ارتباط با API gateway
9
00:00:19,199 –> 00:00:22,560
function lambda s3 من مجموعه ای از خدمات
10
00:00:22,560 –> 00:00:25,140
در AWS هستم که به طور کامل
11
00:00:25,140 –> 00:00:27,330
برنامه شما را از
12
00:00:27,330 –> 00:00:29,070
ابتدا می سازند و آن را به تولید می رسانند،
13
00:00:29,070 –> 00:00:32,130
بنابراین به شما نشان خواهم داد. چگونه یک
14
00:00:32,130 –> 00:00:34,860
سند را آپلود کنیم، میتواند فاکتوری باشد که
15
00:00:34,860 –> 00:00:36,690
حاوی اطلاعات زیادی باشد، ما
16
00:00:36,690 –> 00:00:39,030
تمام اطلاعات را در حال استخراج
17
00:00:39,030 –> 00:00:40,770
میکنیم و به برنامه react خود
18
00:00:40,770 –> 00:00:44,190
برمیگردیم، بنابراین
19
00:00:44,190 –> 00:00:46,260
من مطمئن هستم که شما چیزهای زیادی دیدهاید.
20
00:00:46,260 –> 00:00:48,270
از این برنامهها، اما من
21
00:00:48,270 –> 00:00:49,980
شما را از طریق تمام مراحل و همه
22
00:00:49,980 –> 00:00:51,660
چیزهایی که برای ساختن چنین برنامهای باید بدانید، توضیح
23
00:00:51,660 –> 00:00:53,640
24
00:00:53,640 –> 00:00:56,550
25
00:00:56,550 –> 00:00:58,109
خواهم داد.
26
00:00:58,109 –> 00:01:00,090
این برنامه من می خواهم
27
00:01:00,090 –> 00:01:01,680
عملکرد و
28
00:01:01,680 –> 00:01:04,140
نتیجه نهایی را به شما نشان دهم بنابراین درک بسیار
29
00:01:04,140 –> 00:01:06,270
واضحی در مورد پروژه ای دارد
30
00:01:06,270 –> 00:01:08,460
که می خواهید دوباره شروع کنید. این یک
31
00:01:08,460 –> 00:01:10,770
سفر بسیار
32
00:01:10,770 –> 00:01:12,869
33
00:01:12,869 –> 00:01:16,320
هیجان انگیز است. خوب شروع شد بچه ها این
34
00:01:16,320 –> 00:01:18,720
برنامه ما است، ما این
35
00:01:18,720 –> 00:01:20,640
صفحه را از ابتدا می سازیم، اما من فقط می خواهم
36
00:01:20,640 –> 00:01:22,799
به شما نشان دهم که این برنامه چگونه کار می کند،
37
00:01:22,799 –> 00:01:26,100
ما یک صفحه وب داریم و در
38
00:01:26,100 –> 00:01:29,040
واقع یک تصویر را آپلود می کنیم که من
39
00:01:29,040 –> 00:01:31,110
یکسری فاکتورها را از
40
00:01:31,110 –> 00:01:33,479
اینترنت دانلود کرده ام. شما فقط میتوانید هر سندی را انتخاب کنید
41
00:01:33,479 –> 00:01:35,549
که ما میخواهیم آنها را در
42
00:01:35,549 –> 00:01:37,079
این برنامه آپلود کنیم و امیدواریم در این
43
00:01:37,079 –> 00:01:39,240
برنامه آنها را به سرعت تبدیل کند
44
00:01:39,240 –> 00:01:40,939
و جادوی خود را انجام دهد
45
00:01:40,939 –> 00:01:43,710
که تشخیص کاراکتر نوری OCR است
46
00:01:43,710 –> 00:01:46,409
و به چه تعداد و تعداد استخراج میکند
47
00:01:46,409 –> 00:01:50,430
و تاریخ را از یک فاکتور بگیرید، بنابراین بیایید
48
00:01:50,430 –> 00:01:53,640
فقط یک فاکتور آزمایشی آپلود کنیم و ببینیم
49
00:01:53,640 –> 00:01:56,310
این برنامه چگونه عالی کار می کند و در حال
50
00:01:56,310 –> 00:01:58,530
تجزیه و تحلیل است، لطفاً صبر کنید و همانطور که می
51
00:01:58,530 –> 00:02:01,829
بینید ما در حال انجام هستیم
52
00:02:01,829 –> 00:02:04,799
این فایل را از لحاظ ظاهری در آمازون s3 آپلود کنید، آن را روی
53
00:02:04,799 –> 00:02:07,439
یک دستگاه OCR اجرا کنید تا بتوانیم این داده ها را
54
00:02:07,439 –> 00:02:12,599
برای فاکتور خود در dynamodb ذخیره کنیم و آن
55
00:02:12,599 –> 00:02:13,860
مقدار را
56
00:02:13,860 –> 00:02:16,260
به عنوان یک شی JSON یا یک برنامه react برگرداند
57
00:02:16,260 –> 00:02:19,050
و ما همه این مقادیر را به
58
00:02:19,050 –> 00:02:21,570
فرم HTML و در البته ما
59
00:02:21,570 –> 00:02:23,940
این فاکتور
60
00:02:23,940 –> 00:02:26,460
61
00:02:26,460 –> 00:02:28,770
62
00:02:28,770 –> 00:02:30,300
را به پایگاه داده خود ارسال
63
00:02:30,300 –> 00:02:32,480
64
00:02:32,480 –> 00:02:35,130
می کنیم.
65
00:02:35,130 –> 00:02:37,680
تماسهای API ما از
66
00:02:37,680 –> 00:02:40,950
تماس ناهمزمان استفاده میکنیم تا اساساً
67
00:02:40,950 –> 00:02:44,070
تصویر خود را با فرمت base64 به
68
00:02:44,070 –> 00:02:48,420
api بفرستیم و ما با یک OCR تماس میگیریم
69
00:02:48,420 –> 00:02:50,910
و البته من دادهها را در
70
00:02:50,910 –> 00:02:53,010
پایان به dynamodb ارسال میکنم، بنابراین این سه
71
00:02:53,010 –> 00:02:55,830
API هستند. فراخوان هایی را که می خواهیم ایجاد
72
00:02:55,830 –> 00:02:58,950
کنیم، به دروازه API AWS ضربه می زنیم که
73
00:02:58,950 –> 00:03:01,140
اساساً یک دروازه و
74
00:03:01,140 –> 00:03:03,840
ورودی است که در آن شما اساساً
75
00:03:03,840 –> 00:03:06,600
می توانید درخواست های خود را ارسال کنید و یک api آرامش بخش خواهد بود،
76
00:03:06,600 –> 00:03:08,910
من شما را در
77
00:03:08,910 –> 00:03:10,950
تمام موارد راهنمایی خواهم کرد. مراحل نحوه ساخت د و
78
00:03:10,950 –> 00:03:13,020
آن را به لامدا وصل کنید و نحوه پردازش این
79
00:03:13,020 –> 00:03:17,040
درخواست از یک کلاینت تا دوباره api آرامش بخش
80
00:03:17,040 –> 00:03:20,430
این است که AWS سرویس را مدیریت می کند که
81
00:03:20,430 –> 00:03:22,350
بسیار عالی است و به طور خودکار
82
00:03:22,350 –> 00:03:23,400
نیازی به نگرانی در مورد
83
00:03:23,400 –> 00:03:25,410
فناوری اساسی ندارید که آنها را اصلاح می کند یا
84
00:03:25,410 –> 00:03:28,260
سیستم عامل را می شناسید که مطمئن شوید
85
00:03:28,260 –> 00:03:30,260
این بسیار در دسترس است و همه آن
86
00:03:30,260 –> 00:03:33,540
هزینه های اضافی آمازون قرار
87
00:03:33,540 –> 00:03:35,700
است تمام این مسائل را برای شما برطرف کند، بنابراین تا
88
00:03:35,700 –> 00:03:38,489
اینجا Amazon s3 نقش مهمی
89
00:03:38,489 –> 00:03:42,390
در اینجا با ارائه برنامه ما ایفا می کند و
90
00:03:42,390 –> 00:03:44,640
البته در سمت باطن، نقطه ورود
91
00:03:44,640 –> 00:03:47,010
همه درخواست ها خواهد بود. دروازه API باشد،
92
00:03:47,010 –> 00:03:51,290
بنابراین دروازه API بر اساس منابع باقی مانده
93
00:03:51,290 –> 00:03:54,330
یا اساساً بر اساس URL
94
00:03:54,330 –> 00:03:56,580
که می خواهیم به آن ضربه بزنیم،
95
00:03:56,580 –> 00:03:59,640
درخواست ما را به یکی از این
96
00:03:59,640 –> 00:04:02,250
سرویس های میکرو که یک
97
00:04:02,250 –> 00:04:05,760
تابع لامبدا خواهد بود هدایت می کند و اساساً
98
00:04:05,760 –> 00:04:09,209
آپلود کننده تصویر ما را با استفاده از nodejs می سازد.
99
00:04:09,209 –> 00:04:12,330
آن فاکتورها را در آمازون s3 آپلود خواهد کرد، همچنین
100
00:04:12,330 –> 00:04:14,940
از یک یادداشتگیر برای درج و خواندن
101
00:04:14,940 –> 00:04:17,070
دادهها در dynamodb برای تعامل با
102
00:04:17,070 –> 00:04:19,560
dynamodb استفاده میکند، ما از Python در
103
00:04:19,560 –> 00:04:22,039
ارتباط با AW استفاده خواهیم کرد. تراک متنی برای
104
00:04:22,039 –> 00:04:25,110
ساختن آنالوگی
105
00:04:25,110 –> 00:04:27,300
تابع تشخیص نوری کاراکتر
106
00:04:27,300 –> 00:04:29,669
OCR در برنامه ما،
107
00:04:29,669 –> 00:04:32,340
از صفر تا قهرمان
108
00:04:32,340 –> 00:04:35,250
از معماری گرفته تا
109
00:04:35,250 –> 00:04:37,979
اجرای واقعی پروژه زندگی واقعی شما بسیار سرگرم کننده خواهد بود، بنابراین
110
00:04:37,979 –> 00:04:40,669
بدون بحث بیشتر اجازه دهید شروع به کدنویسی کنیم
111
00:04:40,669 –> 00:04:43,199
یا بچه ها اولین چیز را شروع کنیم. که ما به آن نیاز
112
00:04:43,199 –> 00:04:46,710
داریم کد ویژوال استودیو است که در آن
113
00:04:46,710 –> 00:04:49,639
برنامه خود را در این محیط توسعه می دهیم،
114
00:04:49,639 –> 00:04:53,909
بنابراین اساساً دو
115
00:04:53,909 –> 00:04:55,770
افزونه وجود دارد که می خواهم آنها را زیباتر نصب کنید
116
00:04:55,770 –> 00:04:58,830
تا اساساً یک کد خوب و
117
00:04:58,830 –> 00:05:03,180
تمیزتر در برنامه خود داشته باشید و من
118
00:05:03,180 –> 00:05:05,069
قصد دارم آنها را نشان دهم.
119
00:05:05,069 –> 00:05:07,110
شما فقط باید به افزونه بروید و
120
00:05:07,110 –> 00:05:09,659
این guy را نصب کنید و دیگری که
121
00:05:09,659 –> 00:05:13,229
باید آن را نصب کنیم. React در اصل
122
00:05:13,229 –> 00:05:16,319
ابزاری را قطعه قطعه می کند که به ما کمک می کند.
123
00:05:16,319 –> 00:05:18,919
124
00:05:18,919 –> 00:05:23,580
استفاده در
125
00:05:23,580 –> 00:05:25,860
برنامه ما این است که اساساً
126
00:05:25,860 –> 00:05:28,259
همه این میانبرهایی را که می دانید
127
00:05:28,259 –> 00:05:30,930
برای ما فراهم می کند، بنابراین ما می توانیم در واقع شروع به تمرکز
128
00:05:30,930 –> 00:05:34,560
روی برنامه خود کنیم، بنابراین شما
129
00:05:34,560 –> 00:05:38,669
نیاز خواهید داشت یک حساب AWS برای تکمیل
130
00:05:38,669 –> 00:05:41,699
این آموزش و ما از آمازون
131
00:05:41,699 –> 00:05:45,719
s3 برای سرویس ذخیره سازی خود استفاده خواهیم کرد و همچنین
132
00:05:45,719 –> 00:05:47,460
همانطور
133
00:05:47,460 –> 00:05:49,199
که در مقدمه و
134
00:05:49,199 –> 00:05:52,680
بررسی معماری ذکر کردم از آن
135
00:05:52,680 –> 00:05:55,979
برای سرویس برنامه خود استفاده خواهیم کرد. برنامه react ما
136
00:05:55,979 –> 00:05:58,169
در نهایت در
137
00:05:58,169 –> 00:06:00,719
یک سطل s3 آپلود می شود و ما
138
00:06:00,719 –> 00:06:02,940
خط مشی ها و کنترل دسترسی را تنظیم می کنیم
139
00:06:02,940 –> 00:06:06,120
تا بتوانیم برنامه را به کاربران نهایی خود ارائه دهیم
140
00:06:06,120 –> 00:06:08,340
و سپس برنامه ما
141
00:06:08,340 –> 00:06:11,550
با دروازه API تماس می گیرد و ما با شما صحبت
142
00:06:11,550 –> 00:06:15,330
خواهیم کرد. OCR و dynamodb و s3
143
00:06:15,330 –> 00:06:18,569
از طریق توابع لامبدا که
144
00:06:18,569 –> 00:06:20,460
با استفاده از فنآوریهای مختلف در حال توسعه هستند،
145
00:06:20,460 –> 00:06:24,029
nodejs Python بسیار خوب است، بنابراین قبل از اینکه ما
146
00:06:24,029 –> 00:06:25,879
واقعاً این
147
00:06:25,879 –> 00:06:29,940
فناوریها را انجام دهیم، باید دو
148
00:06:29,940 –> 00:06:33,240
چیز را در محیط خود راهاندازی کنیم، بنابراین اولین
149
00:06:33,240 –> 00:06:35,699
چیز یک کد استودیوی تصویری بود که شما
150
00:06:35,699 –> 00:06:39,330
بچه ها همه این کامپوننت ها را نصب کرده اید و
151
00:06:39,330 –> 00:06:41,289
152
00:06:41,289 –> 00:06:45,309
اگر n PM
153
00:06:45,309 –> 00:06:46,990
یا nodej روی دستگاه خود نصب ندارید، اساساً با اجرای یا NPM شروع خواهید کرد،
154
00:06:46,990 –> 00:06:50,319
لطفاً nodejs را در گوگل جستجو کنید و به t بروید. o
155
00:06:50,319 –> 00:06:52,270
وب سایت را دانلود و نصب
156
00:06:52,270 –> 00:06:54,309
کنید یک قطعه دیگر که
157
00:06:54,309 –> 00:06:56,559
باید بخورید، باید آن را درست پیکربندی کنید تا
158
00:06:56,559 –> 00:06:59,229
بتوانید به تنظیمات AWS بروید، منظورم این است
159
00:06:59,229 –> 00:07:00,909
که من فقط یک بار دیگر این را پیکربندی می کنم
160
00:07:00,909 –> 00:07:03,189
تا بچه ها ببینید چگونه کار می کند. بنابراین
161
00:07:03,189 –> 00:07:05,349
از من میخواهد که آن مقدار را ارائه دهم،
162
00:07:05,349 –> 00:07:09,009
این را جایگذاری میکنم و همچنین از
163
00:07:09,009 –> 00:07:12,729
این یکی برای تکمیل فرآیند پیکربندی نام مستعار
164
00:07:12,729 –> 00:07:14,800
استفاده میکنم. نگران
165
00:07:14,800 –> 00:07:16,539
پنهان کردن این مقادیر نیستم زیرا
166
00:07:16,539 –> 00:07:18,099
آنها را حذف میکنم و این یک حساب آزمایشی است
167
00:07:18,099 –> 00:07:20,949
پس کپی نکنید – لطفا
168
00:07:20,949 –> 00:07:24,580
حساب خود را از حساب خود بیابید و آن را به پیکربندی پایگاه داده خود اضافه کنید
169
00:07:24,580 –> 00:07:27,069
تا من منطقه پیش فرض
170
00:07:27,069 –> 00:07:31,300
را به عنوان US west 1 و
171
00:07:31,300 –> 00:07:33,039
فرمت اختیاری پیش فرض که JSON است که فقط
172
00:07:33,039 –> 00:07:35,229
می خواهم حفظ کنم حفظ کنم. ساده است و من
173
00:07:35,229 –> 00:07:37,360
اکنون صفحه را پاک می کنم، باید بتوانم
174
00:07:37,360 –> 00:07:42,610
با استفاده از این مقدار کلید جدید تولید شده به s3 خود دسترسی داشته باشم،
175
00:07:42,610 –> 00:07:46,029
بچه ها اکنون ما
176
00:07:46,029 –> 00:07:49,209
آماده هستیم تا برنامه react خود را شروع کنیم.
177
00:07:49,209 –> 00:07:50,800
178
00:07:50,800 –> 00:07:55,649
نصب NPM که به صورت جهانی
179
00:07:55,649 –> 00:08:01,029
و یکبار ایجاد react app commit است این کار انجام شد
180
00:08:01,029 –> 00:08:02,800
، ما برنامه react خود را نصب می کنیم،
181
00:08:02,800 –> 00:08:07,870
بنابراین دستور بعدی
182
00:08:07,870 –> 00:08:11,949
ایجاد می شود، ایجاد react است
183
00:08:11,949 –> 00:08:14,800
و من نام این برنامه را می گذارم، بنابراین
184
00:08:14,800 –> 00:08:16,930
ویدیو را موقتاً متوقف می کنم و منتظر می مانم تا این
185
00:08:16,930 –> 00:08:19,240
فرآیند انجام شود. من میروم
186
00:08:19,240 –> 00:08:22,449
و برنامه را با استفاده از این
187
00:08:22,449 –> 00:08:28,149
دستور NPM dot M p.m شروع میکنم. space start بنابراین در
188
00:08:28,149 –> 00:08:30,039
این برنامه همانطور که می بینید
189
00:08:30,039 –> 00:08:33,159
پوشه عمومی داریم و پوشه SRC در اصل پوشه عمومی
190
00:08:33,159 –> 00:08:35,289
یا نقطه ورود
191
00:08:35,289 –> 00:08:38,860
برنامه ما است و اگر در این
192
00:08:38,860 –> 00:08:41,380
صفحه پایین بیایید تقسیمی به نام root خواهید دید
193
00:08:41,380 –> 00:08:44,439
و اساساً این جایی است که
194
00:08:44,439 –> 00:08:47,649
ما ‘در حال بارگذاری مجدد یا یک
195
00:08:47,649 –> 00:08:50,380
برنامه react در پوشه SRC شما یک
196
00:08:50,380 –> 00:08:53,019
ایندکس دارید که j/s نقطه ورود
197
00:08:53,019 –> 00:08:55,050
تعهد react
198
00:08:55,050 –> 00:08:56,760
شما است و می توانید ببینید که ما یک سری کارها را وارد می کنیم و انجام می
199
00:08:56,760 –> 00:08:58,589
دهیم و در پایان
200
00:08:58,589 –> 00:09:02,370
روز ما در این سناریو یک ماژول در برنامه react ایجاد می کنیم
201
00:09:02,370 –> 00:09:04,230
که برنامه نامیده می شود
202
00:09:04,230 –> 00:09:06,390
و آن را با استفاده از جاوا اسکریپت خالص با تقسیم مسیر جایگزین می کنیم،
203
00:09:06,390 –> 00:09:07,890
204
00:09:07,890 –> 00:09:10,950
بنابراین هر
205
00:09:10,950 –> 00:09:13,170
برنامه رآکتوری چگونه کار می کند شما ماژول های مختلف ایجاد می کنید،
206
00:09:13,170 –> 00:09:15,420
ماژول های کوچک آنها یکی را انجام می دهند.
207
00:09:15,420 –> 00:09:17,490
اما یک چیز واقعاً خوب است و
208
00:09:17,490 –> 00:09:20,730
شما می توانید در همه جا در
209
00:09:20,730 –> 00:09:22,950
برنامه خود از
210
00:09:22,950 –> 00:09:25,440
211
00:09:25,440 –> 00:09:27,149
آنها استفاده
212
00:09:27,149 –> 00:09:29,430
213
00:09:29,430 –> 00:09:31,709
مجدد کنید. ماژولهای ferent
214
00:09:31,709 –> 00:09:34,260
مؤلفههای کوچک در برنامههای واکنش نشان میدهند، بنابراین
215
00:09:34,260 –> 00:09:36,600
میتوانیم آنها را دوباره استفاده کنیم و میتوانیم آنها را اشکال زدایی کنیم
216
00:09:36,600 –> 00:09:39,000
و آزمایششان کنیم و به راحتی آنها را مقیاسبندی کنیم، بنابراین
217
00:09:39,000 –> 00:09:41,399
به یاد داشته باشید که تمام هدف ایجاد
218
00:09:41,399 –> 00:09:43,709
این ماژولها این است که یک
219
00:09:43,709 –> 00:09:46,589
مؤلفه کوچکتر جفت شده ایجاد کنیم، اما
220
00:09:46,589 –> 00:09:48,959
میتوانیم آنها را کنار هم قرار دهیم و بسازیم. یک برنامه واقعی است،
221
00:09:48,959 –> 00:09:51,329
بنابراین در این سناریو همانطور که
222
00:09:51,329 –> 00:09:54,750
می بینید ما در حال وارد کردن ماژول
223
00:09:54,750 –> 00:09:55,350
به نام
224
00:09:55,350 –> 00:09:58,079
برنامه هستیم و در اینجا ما این
225
00:09:58,079 –> 00:10:00,930
ماژول را در صفحه رندر می کنیم، بنابراین
226
00:10:00,930 –> 00:10:03,270
درک مفهومی آن بسیار آسان است همانطور که می
227
00:10:03,270 –> 00:10:07,380
بینید اکنون در اینجا برنامه react ما به
228
00:10:07,380 –> 00:10:09,779
طور پیش فرض است. این برنامه را شروع کرد و
229
00:10:09,779 –> 00:10:11,730
آن صفحه را برای ما ایجاد کرد، ما
230
00:10:11,730 –> 00:10:14,459
شروع به اصلاح این برنامه خواهیم کرد، اما
231
00:10:14,459 –> 00:10:16,860
قبل از اینکه واقعاً این کار را انجام دهیم،
232
00:10:16,860 –> 00:10:19,800
این برنامه را متوقف می کنم، به عقب برمی گردم
233
00:10:19,800 –> 00:10:22,589
و آنچه را که اینجا انجام می دهیم، نصب می کنیم.
234
00:10:22,589 –> 00:10:26,279
مجموعهای از ماژولها برای اینکه اساساً
235
00:10:26,279 –> 00:10:28,380
برنامه ما را بهبود ببخشند، ما
236
00:10:28,380 –> 00:10:31,440
از آنهایی که میشناسید در
237
00:10:31,440 –> 00:10:35,130
مسیر چرخه توسعه استفاده میکنیم، اما قبل از
238
00:10:35,130 –> 00:10:37,380
انجام این کار، ابتدا مطمئن شوید که
239
00:10:37,380 –> 00:10:40,290
به آن پوشه برنامه، زیرا
240
00:10:40,290 –> 00:10:42,060
اگر شروع به نصب همه این ماژول ها
241
00:10:42,060 –> 00:10:45,240
در خارج از آن پوشه کنید، آنها کار نمی
242
00:10:45,240 –> 00:10:47,630
کنند، بنابراین مطمئن شوید که در
243
00:10:47,630 –> 00:10:49,860
هنگام نصب این مؤلفه ها در دایرکتوری برنامه هستید،
244
00:10:49,860 –> 00:10:51,930
ما به عقب برمی گردیم، ما
245
00:10:51,930 –> 00:10:56,089
با react strap شروع می کنیم. یک
246
00:10:56,089 –> 00:10:59,100
مؤلفه بوت استرپ برای react است که ما
247
00:10:59,100 –> 00:11:01,320
آن ماژول را نصب می کنیم.
248
00:11:01,320 –> 00:11:04,230
ماژول بعدی که نصب می کنیم
249
00:11:04,230 –> 00:11:08,460
env env نامیده
250
00:11:08,460 –> 00:11:10,710
251
00:11:10,710 –> 00:11:15,270
می شود. دوباره
252
00:11:15,270 –> 00:11:17,250
از URL ها درست استفاده می کنید و نمی خواهید
253
00:11:17,250 –> 00:11:19,050
باقیمانده ها را در معرض کاربران نهایی خود قرار دهید،
254
00:11:19,050 –> 00:11:21,570
کسانی که به کد منبع نگاه می کنند،
255
00:11:21,570 –> 00:11:23,399
بنابراین کاری که ما می خواهیم انجام دهیم
256
00:11:23,399 –> 00:11:26,100
، آنها را در یک فایل پیکربندی قرار می دهیم و
257
00:11:26,100 –> 00:11:27,810
آنها را مانند بارگذاری می کنیم. متغیرهای محیطی،
258
00:11:27,810 –> 00:11:30,450
بنابراین به این صورت است که شما اساساً
259
00:11:30,450 –> 00:11:32,940
اسرار خود را در برنامه بارگذاری
260
00:11:32,940 –> 00:11:34,470
میکنید، در برنامه زندگی واقعی چه میخواهید انجام دهید،
261
00:11:34,470 –> 00:11:37,470
262
00:11:37,470 –> 00:11:40,140
این یک مثال است، اما میتوانید
263
00:11:40,140 –> 00:11:42,300
این مقدار را در یک فایل مخفی در جایی در
264
00:11:42,300 –> 00:11:45,690
فنجان خود قرار دهید. کاری که ما می خواهیم انجام دهیم ما
265
00:11:45,690 –> 00:11:47,790
از آن در برنامه زندگی واقعی استفاده
266
00:11:47,790 –> 00:11:49,649
خواهیم کرد، امیدوارم در این آموزش فرصتی برای استفاده از آن
267
00:11:49,649 –> 00:11:52,290
داشته باشیم، اما به خاطر داشته باشید که برای
268
00:11:52,290 –> 00:11:54,270
برنامه واقعی همیشه می خواهید
269
00:11:54,270 –> 00:11:57,320
اجزای بارگذاری اجزا را با استفاده از متغیرهای محیطی بارگیری کنید،
270
00:11:57,320 –> 00:12:00,089
بنابراین من روند نصب را متوقف می کنم
271
00:12:00,089 –> 00:12:03,180
و ما انتخاب می کنیم
272
00:12:03,180 –> 00:12:04,709
به محض اینکه نصب به
273
00:12:04,709 –> 00:12:07,610
درستی انجام شد، AMD را نصب می کنیم
274
00:12:07,610 –> 00:12:10,589
که به ما کمک می کند
275
00:12:10,589 –> 00:12:12,930
مقادیر را از طریق متغیرهای محیطی بخوانیم
276
00:12:12,930 –> 00:12:17,790
مؤلفه بعدی ما base64 خواهد بود – تصویری
277
00:12:17,790 –> 00:12:20,220
که به ما کمک می کند تا
278
00:12:20,220 –> 00:12:22,080
تصاویر خود را که می خواهیم تبدیل کنیم. برای آپلود در
279
00:12:22,080 –> 00:12:25,170
این برنامه به فرمت base64 و
280
00:12:25,170 –> 00:12:27,120
ما آنها را به API gateway منتقل می کنیم
281
00:12:27,120 –> 00:12:30,150
و API gable liquor آن
282
00:12:30,150 –> 00:12:33,600
کدهای up base64 را به یک تصویر واقعی و
283
00:12:33,600 –> 00:12:36,029
سطل s3 تبدیل می کند، خواهیم دید که دقیقاً چگونه
284
00:12:36,029 –> 00:12:37,740
کار می کند. این ماژول را نیز نصب خواهیم کرد،
285
00:12:37,740 –> 00:12:40,620
ماژول بعدی ما
286
00:12:40,620 –> 00:12:42,570
بسیار جالب خواهد بود، شما می توانید
287
00:12:42,570 –> 00:12:44,910
به سادگی به مخزن github آنها بروید و
288
00:12:44,910 –> 00:12:46,560
اگر به پایین اسکرول کنید،
289
00:12:46,560 –> 00:12:50,010
نصب npm نصب
290
00:12:50,010 –> 00:12:52,440
را مشاهده خواهید کرد. se fat awesome –
291
00:12:52,440 –> 00:12:55,920
آیکون های عالی و سرگرم کننده خوب، پس بیایید ادامه دهیم و
292
00:12:55,920 –> 00:13:00,839
آن ماژول را نیز نصب کنیم،
293
00:13:00,839 –> 00:13:02,040
و ماژول بعدی که قرار است نصب کنیم
294
00:13:02,040 –> 00:13:04,440
به نام لحظه لحظه اساساً
295
00:13:04,440 –> 00:13:06,480
به شما کمک می کند تا با داده ها کار کنید و زمان آن
296
00:13:06,480 –> 00:13:09,570
همه چیزهایی را ارائه می دهد که شما
297
00:13:09,570 –> 00:13:12,329
باید با تاریخ و زمان در این ماژول
298
00:13:12,329 –> 00:13:15,360
کار کنید، بنابراین نکته مثبت در مورد واکنش اگر
299
00:13:15,360 –> 00:13:16,890
توجه کنید این است که مجبور نیستید
300
00:13:16,890 –> 00:13:19,200
چرخ را دوباره اختراع کنید، می توانید به سادگی جلو بروید و
301
00:13:19,200 –> 00:13:20,570
از مخالفانی استفاده کنید
302
00:13:20,570 –> 00:13:22,700
که دیگران از آنها استفاده
303
00:13:22,700 –> 00:13:25,250
می کنند. میتوانید
304
00:13:25,250 –> 00:13:27,740
305
00:13:27,740 –> 00:13:29,330
به جای
306
00:13:29,330 –> 00:13:31,550
صرف زمان برای ساختن اجزا یا
307
00:13:31,550 –> 00:13:33,380
کار کردن با آنها، مانند کتابخانههای زمان پخت
308
00:13:33,380 –> 00:13:36,260
و مواردی از این قبیل، روی برنامه واقعی خود و چیزهایی که میخواهید بسازید تمرکز کنید، بنابراین این یک راه عالی برای
309
00:13:36,260 –> 00:13:39,470
دستیابی به چیزهایی است که در مدت زمان کوتاهی میدانید.
310
00:13:39,470 –> 00:13:41,330
ما از
311
00:13:41,330 –> 00:13:43,730
کتابخانه افراد دیگر نیز برای
312
00:13:43,730 –> 00:13:45,920
کمک به دستیابی به اهدافمان استفاده خواهیم کرد. ما ادامه می دهیم
313
00:13:45,920 –> 00:13:48,200
و لحظه نصب را انجام می دهیم و همچنین
314
00:13:48,200 –> 00:13:50,990
آخرین قسمت مربوط به تنظیم واکنش ما، می خواهم
315
00:13:50,990 –> 00:13:53,330
به یک مورد اشاره کنم که پوشه به نام
316
00:13:53,330 –> 00:13:56,180
node un ماژول derscore این پوشه بسیار بزرگ است
317
00:13:56,180 –> 00:13:57,710
زیرا شروع به ساخت اجزای جدید می کنید
318
00:13:57,710 –> 00:13:59,810
و ماژول های بیشتری را به
319
00:13:59,810 –> 00:14:01,940
برنامه خود اضافه می کنید.
320
00:14:01,940 –> 00:14:04,040
321
00:14:04,040 –> 00:14:06,800
322
00:14:06,800 –> 00:14:08,480
323
00:14:08,480 –> 00:14:10,970
324
00:14:10,970 –> 00:14:12,710
اگر از github یا AWS code commit یا هر سیستم کنترل نسخه دیگری استفاده می کنید، این کد را به مخزن کد خود ارسال کنید،
325
00:14:12,710 –> 00:14:15,710
326
00:14:15,710 –> 00:14:18,140
327
00:14:18,140 –> 00:14:20,330
زیرا فضای زیادی را اشغال می کند،
328
00:14:20,330 –> 00:14:22,400
بنابراین آنچه می خواهید همیشه در
329
00:14:22,400 –> 00:14:25,880
فایل نادیده گرفتن git خود انجام دهید، مطمئن شوید که این
330
00:14:25,880 –> 00:14:28,220
ماژول گره مانند همیشه آیا وجود دارد، بنابراین شما
331
00:14:28,220 –> 00:14:31,550
اساساً این را به مخزن خود ارسال نکنید،
332
00:14:31,550 –> 00:14:33,830
هر کسی که برنامه شما را دانلود
333
00:14:33,830 –> 00:14:38,000
می کند، می تواند به سادگی به این یک فایل JSON رفته
334
00:14:38,000 –> 00:14:40,730
و تمام ماژول هایی را که
335
00:14:40,730 –> 00:14:42,590
از برنامه خود استفاده می کنید مشاهده کند و آنها
336
00:14:42,590 –> 00:14:44,960
به سادگی می توانند از دستور استفاده کنند و
337
00:14:44,960 –> 00:14:47,540
نصب شوند. برای نصب همه آن ماژول
338
00:14:47,540 –> 00:14:49,730
هایی که ما در برنامه خود استفاده می کنیم، بنابراین
339
00:14:49,730 –> 00:14:52,100
این آخرین قطعه ای بود که می خواستم
340
00:14:52,100 –> 00:14:54,770
در کار واقعی در
341
00:14:54,770 –> 00:14:56,840
شرکت ها ذکر کنم اگر شما برنامه react ما را انجام می دهید
342
00:14:56,840 –> 00:14:59,000
بله، ما همیشه میخواهیم
343
00:14:59,000 –> 00:15:01,610
مطمئن شویم که پوشه فرم ماژول زیرخط یادداشت
344
00:15:01,610 –> 00:15:05,110
از مخزن اصلی شما حذف شده است،
345
00:15:05,110 –> 00:15:08,240
کاملاً برای سیاستهای سطلی
346
00:15:08,240 –> 00:15:12,760
که باید برای دسترسی عمومی کنترل
347
00:15:12,760 –> 00:15:15,470
کنیم، که میتوانیم یک سطح حساب ارزیابی را تنظیم
348
00:15:15,470 –> 00:15:18,680
کنیم که همان طور که میبینید ما است.
349
00:15:18,680 –> 00:15:20,030
خاموش،
350
00:15:20,030 –> 00:15:23,960
بنابراین ما اساساً علامت بلوک
351
00:15:23,960 –> 00:15:25,580
کلید دسترسی عمومی در سطح حساب را
352
00:15:25,580 –> 00:15:27,950
برداریم تا بتوانیم نظارت داشته باشیم یا
353
00:15:27,950 –> 00:15:30,650
اساساً می توانیم کلید دسترسی خود را در سطل تنظیم
354
00:15:30,650 –> 00:15:32,480
کنیم که در سطح حساب نیست، بنابراین بیایید ادامه دهیم
355
00:15:32,480 –> 00:15:34,430
و
356
00:15:34,430 –> 00:15:36,980
برای مثال یک سطل جدید I ایجاد کنیم.
357
00:15:36,980 –> 00:15:38,270
من این سطل را نام میبرم، این
358
00:15:38,270 –> 00:15:43,839
برنامه را خدمت میکنم، آن را میگویم واکنش نشان میدهد
359
00:15:43,839 –> 00:15:49,279
حسابهای پرداختنی به آن برنامه درست و سپس
360
00:15:49,279 –> 00:15:52,279
میروم
361
00:15:52,279 –> 00:15:56,000
به عنوان مثال منطقه کالیفرنیای شمالی را انتخاب میکنم
362
00:15:56,000 –> 00:16:01,400
و ما حرکت میکنیم بعد و من فقط
363
00:16:01,400 –> 00:16:03,710
پیش فرض را بدون نسخه نگه می دارم، فعلاً
364
00:16:03,710 –> 00:16:06,589
تیک بلوک یا دسترسی
365
00:16:06,589 –> 00:16:08,690
عمومی را برداریم و به شما می گویم چرا و
366
00:16:08,690 –> 00:16:10,040
ما این سطل را ایجاد می کنیم،
367
00:16:10,040 –> 00:16:11,960
بنابراین وقتی سطل ایجاد شد،
368
00:16:11,960 –> 00:16:15,610
این سطل است که ما سه خواهیم بود نوار rving
369
00:16:15,610 –> 00:16:19,400
اساساً برنامه از یک
370
00:16:19,400 –> 00:16:21,440
برنامه react در نهایت
371
00:16:21,440 –> 00:16:23,779
از این سطل ارائه می شود و من به شما
372
00:16:23,779 –> 00:16:25,880
نحوه تنظیم آن را به زودی نشان
373
00:16:25,880 –> 00:16:29,630
خواهم داد و اساساً یک پوشه دیگر به نام
374
00:16:29,630 –> 00:16:34,910
تصاویر برنامه وب react AP و تصاویری
375
00:16:34,910 –> 00:16:36,950
که می خواهم نگه دارم خواهیم داشت. که در ویرجینیای شمالی
376
00:16:36,950 –> 00:16:41,360
دسترسی به OCR
377
00:16:41,360 –> 00:16:44,180
به این سطل را برای سادگی در
378
00:16:44,180 –> 00:16:46,550
حال حاضر ساده کنیم زیرا در ویرجینیای شمالی
379
00:16:46,550 –> 00:16:48,800
عصاره تقویت کننده OData من مطمئناً
380
00:16:48,800 –> 00:16:52,310
در منطقه کالیفرنیا فعال نیست، بنابراین
381
00:16:52,310 –> 00:16:53,450
امیدوارم در آینده
382
00:16:53,450 –> 00:16:55,850
AWS این را اضافه کند. بعداً به
383
00:16:55,850 –> 00:16:59,930
مرحله بعدی میروم و فعلاً من فقط تیک
384
00:16:59,930 –> 00:17:01,820
تمام این دسترسیهای عمومی را برای اهداف آموزشی حذف
385
00:17:01,820 –> 00:17:04,429
میکنم، شما فقط میتوانید همه
386
00:17:04,429 –> 00:17:07,400
این دسترسیها را به این سطلها محدود کنید، بنابراین کاری
387
00:17:07,400 –> 00:17:11,209
که در حال حاضر باید انجام دهیم، باید ادامه دهیم
388
00:17:11,209 –> 00:17:14,150
و چند مجوز تنظیم کنیم.
389
00:17:14,150 –> 00:17:18,380
در برنامه ما و یکی
390
00:17:18,380 –> 00:17:20,349
از آنها اساساً آن
391
00:17:20,349 –> 00:17:25,309
پوشه ای را راه اندازی می کند که برای تصاویر تنظیم می
392
00:17:25,309 –> 00:17:26,420
شود، با آن شروع می کنیم و سپس می
393
00:17:26,420 –> 00:17:28,130
خواهیم یک وب سایت ثابت یا یک وب سایت ثابت را در
394
00:17:28,130 –> 00:17:31,520
react AP of v راه اندازی کنیم. ampire بنابراین اولین مورد
395
00:17:31,520 –> 00:17:34,030
اساساً تصاویر ما هستند که ما
396
00:17:34,030 –> 00:17:38,900
این سطل را انتخاب می کنیم و
397
00:17:38,900 –> 00:17:43,260
اکنون به ویژگی ها می رویم.
398
00:17:43,260 –> 00:17:44,590
399
00:17:44,590 –> 00:17:47,390
400
00:17:47,390 –> 00:17:48,320
401
00:17:48,320 –> 00:17:50,360
سیاستی که
402
00:17:50,360 –> 00:17:54,259
به همه اجازه میدهد اساساً اشیاء را قرار دهند
403
00:17:54,259 –> 00:17:56,870
و بنابراین اکنون بعداً میتوانیم همه
404
00:17:56,870 –> 00:17:59,330
این دسترسیها را اصلاح کنیم، اما فعلاً
405
00:17:59,330 –> 00:18:02,360
سادهتر میمانم، اجازه دهید به این صفحه برگردیم، شما
406
00:18:02,360 –> 00:18:06,860
میتوانید به سادگی در گوگل جستجو کنید که چگونه اساساً
407
00:18:06,860 –> 00:18:09,440
مجوز دسترسی به وبسایت را پیدا کنید. یا
408
00:18:09,440 –> 00:18:13,039
اساساً دسترسی عمومی برای قرار دادن شی
409
00:18:13,039 –> 00:18:15,200
یا دریافت شیء، من این خط مشی را کپی می کنم
410
00:18:15,200 –> 00:18:19,460
که چگونه این سطل را برای این منظور عمومی کنیم، به
411
00:18:19,460 –> 00:18:21,980
اینجا برمی گردم،
412
00:18:21,980 –> 00:18:24,259
این را اینجا قرار
413
00:18:24,259 –> 00:18:26,809
می دهم، اما برای چه کاری انجام می دهم اکنون به جای فقط دریافت
414
00:18:26,809 –> 00:18:28,730
شی فعلاً از آنجایی که در حال آپلود
415
00:18:28,730 –> 00:18:31,850
اطلاعات هستیم، فعلاً شیء قرار می
416
00:18:31,850 –> 00:18:34,879
دهیم و به جای مثال bucket
417
00:18:34,879 –> 00:18:38,600
start، یعنی تمام پوشه ها و
418
00:18:38,600 –> 00:18:41,450
تمام محتویات این پوشه
419
00:18:41,450 –> 00:18:44,600
برای همه در دسترس خواهد بود تا اساساً
420
00:18:44,600 –> 00:18:47,330
put را آپلود کنند. اشیاء بعدا ما به سادگی می توانیم
421
00:18:47,330 –> 00:18:49,389
محدود کنیم این فعلاً ما
422
00:18:49,389 –> 00:18:52,610
اصل را انتخاب کردیم که ستاره است، بنابراین به AWS میگوییم که فعلاً
423
00:18:52,610 –> 00:18:56,360
به همه اجازه دهد این کار را انجام دهند،
424
00:18:56,360 –> 00:18:59,899
ما این را ذخیره میکنیم و همانطور که میبینید
425
00:18:59,899 –> 00:19:02,240
اکنون میگوید عمومی است، بنابراین
426
00:19:02,240 –> 00:19:04,549
یک چیز دیگر وجود دارد که باید روی آن پیکربندی کنیم.
427
00:19:04,549 –> 00:19:08,299
این برنامه و آن این است که
428
00:19:08,299 –> 00:19:11,179
من این شخص را می بندم و ما دیگر به این نیاز
429
00:19:11,179 –> 00:19:13,399
نداریم زیرا ما این برنامه را کپی کردیم،
430
00:19:13,399 –> 00:19:16,129
بنابراین یک چیز دیگر باید
431
00:19:16,129 –> 00:19:18,379
یک اشتراک گذاری منبع متقاطع را راه اندازی
432
00:19:18,379 –> 00:19:20,629
کنیم که البته
433
00:19:20,629 –> 00:19:22,970
البته شما می توانید آن را بسازید.
434
00:19:22,970 –> 00:19:25,730
رویدادهای برنامه مشتری غنی با آمازون s3 و به
435
00:19:25,730 –> 00:19:28,460
طور انتخابی اجازه دسترسی متقاطع منطقه ای را
436
00:19:28,460 –> 00:19:31,009
به آمازون شما به
437
00:19:31,009 –> 00:19:33,169
منابع یا برنامه یا برنامه واکنش نشان می دهد،
438
00:19:33,169 –> 00:19:35,690
واقعاً اساساً ما قادر خواهیم بود از
439
00:19:35,690 –> 00:19:39,259
این پوشه استفاده کنیم و به راحتی با آن ارتباط برقرار کنیم،
440
00:19:39,259 –> 00:19:40,970
بنابراین منظورم این است که شما می توانید به زودی ببینید که چگونه این
441
00:19:40,970 –> 00:19:43,879
اگر به اینجا بروید کار می کند، برای مثال همانطور
442
00:19:43,879 –> 00:19:46,690
که می بینید HTTP example.com
443
00:19:46,690 –> 00:19:49,190
وب سایتی مشابه این آدرس خواهد داشت،
444
00:19:49,190 –> 00:19:51,320
ما به آن وب سایت اجازه می دهیم
445
00:19:51,320 –> 00:19:53,929
اساساً از این پوشه استفاده کند و در پیکربندی دوره با آن تعامل داشته
446
00:19:53,929 –> 00:19:56,870
باشد. ما میخواهیم
447
00:19:56,870 –> 00:19:58,730
تنظیمات البته را فراخوانی کنیم و
448
00:19:58,730 –> 00:20:01,399
این را ذخیره میکنیم، اما کاری که
449
00:20:01,399 –> 00:20:01,760
خوب
450
00:20:01,760 –> 00:20:05,030
انجام میدهیم یا به زودی
451
00:20:05,030 –> 00:20:07,220
آدرس وبسایت خود را که یک
452
00:20:07,220 –> 00:20:09,140
برنامه React است که
453
00:20:09,140 –> 00:20:12,400
از پوشه صوتی ارائه میشود، جایگزین میکنیم. برای اینکه اساساً امکان
454
00:20:12,400 –> 00:20:15,290
برقراری ارتباط بین این دو وجود داشته باشد، بنابراین
455
00:20:15,290 –> 00:20:17,120
فعلاً این را ذخیره می کنم، اما به
456
00:20:17,120 –> 00:20:21,200
زودی آدرس وب سایت را به روز می کنیم
457
00:20:21,200 –> 00:20:23,540
تا پوشه دیگر را دوباره کپی کنم
458
00:20:23,540 –> 00:20:26,420
و به s3 خود برگردم
459
00:20:26,420 –> 00:20:31,670
اکنون باید تنظیم کنیم بالا یا واکنش نشان میدهد،
460
00:20:31,670 –> 00:20:35,300
بنابراین به این پوشه میروم،
461
00:20:35,300 –> 00:20:40,670
دوباره به
462
00:20:40,670 –> 00:20:41,960
مجوز میروم، درست در مجوز، میروم به
463
00:20:41,960 –> 00:20:43,850
خطمشی سطل میروم، این
464
00:20:43,850 –> 00:20:46,640
خطمشی سطل را تنظیم میکنم، ما میرویم پیش از این و
465
00:20:46,640 –> 00:20:48,860
این را به نام سطلی تغییر دهید که ما در حال
466
00:20:48,860 –> 00:20:51,470
اعمال این خطمشی هستیم که یک
467
00:20:51,470 –> 00:20:54,050
رویداد react در بالای آن است، میبینید که میگوید
468
00:20:54,050 –> 00:21:00,170
پوشه یا سطل برنامه وب واکنش نشان میدهد و ما میخواهیم
469
00:21:00,170 –> 00:21:02,060
اشیاء دریافت کنیم زیرا فقط
470
00:21:02,060 –> 00:21:05,150
به افراد اجازه میدهیم به
471
00:21:05,150 –> 00:21:07,310
وب سایت ما بروید، ما نمی خواهیم به آنها اجازه
472
00:21:07,310 –> 00:21:09,200
دهیم فایل های ما یا هر چیزی که ما هستیم را تغییر دهند فقط میخواهم
473
00:21:09,200 –> 00:21:11,840
این برنامه را به کاربرانمان ارائه
474
00:21:11,840 –> 00:21:14,810
دهم. این سطل درست است، بنابراین من میخواهم این شخص را نجات دهم
475
00:21:14,810 –> 00:21:17,450
و همانطور که میبینید اکنون سطل عمومی او است،
476
00:21:17,450 –> 00:21:20,000
اما یک کاری که باید انجام
477
00:21:20,000 –> 00:21:22,360
دهیم برای اینکه این وبسایت را
478
00:21:22,360 –> 00:21:25,640
اساساً سطل کنیم باید انجام دهیم. باید به
479
00:21:25,640 –> 00:21:29,330
میزبانی وب استاتیک برویم و باید این شخص را انتخاب کنیم
480
00:21:29,330 –> 00:21:33,740
تا اساساً از این سطل برای
481
00:21:33,740 –> 00:21:35,930
میزبانی وب سایت استفاده کند و همانطور که می بینید
482
00:21:35,930 –> 00:21:38,180
به طور پیش فرض می گوید می توانید از HTML dot index استفاده کنید.
483
00:21:38,180 –> 00:21:42,380
من فعلاً از همان چیزی استفاده خواهم کرد
484
00:21:42,380 –> 00:21:44,240
به جای خطا اگر دارید
485
00:21:44,240 –> 00:21:45,770
می توانید فعلاً آن را قرار دهید من فقط
486
00:21:45,770 –> 00:21:48,950
آن را خالی می گذارم و
487
00:21:48,950 –> 00:21:51,410
این آدرس ما خواهد بود.
488
00:21:51,410 –> 00:21:54,980
489
00:21:54,980 –> 00:21:57,680
490
00:21:57,680 –> 00:22:02,750
بعداً این را به Rob 53 خود نگاشت کنید و یک
491
00:22:02,750 –> 00:22:05,030
نام مستعار یا رکورد ایجاد کنید تا بتوانیم به
492
00:22:05,030 –> 00:22:09,680
آن اشاره کنیم، می تواند www my invoicing website باشد که
493
00:22:09,680 –> 00:22:12,530
به آن اشاره می کند یا می
494
00:22:12,530 –> 00:22:15,920
توانیم با استفاده از مسیر 53 کارهای شیک تری انجام دهیم، بنابراین
495
00:22:15,920 –> 00:22:17,960
اکنون می خواهیم آن را حفظ کنیم. ساده است این
496
00:22:17,960 –> 00:22:20,030
برنامه وب استاتیک ما است، من می خواهم
497
00:22:20,030 –> 00:22:22,280
روی آن کلیک کنم و همانطور که می توانید ببینید
498
00:22:22,280 –> 00:22:25,670
در حال حاضر چیزی در آن پوشه
499
00:22:25,670 –> 00:22:27,560
نداریم اما امیدواریم به زودی
500
00:22:27,560 –> 00:22:30,140
بتوانیم ترافیک خود را از طریق این سطل به وب سایت خود ارائه دهیم،
501
00:22:30,140 –> 00:22:34,820
بنابراین فکر می
502
00:22:34,820 –> 00:22:39,850
کنم در این مورد که قبلاً پیکربندی کرده ایم یا
503
00:22:39,850 –> 00:22:42,920
پوشه برنامه وب خوب هستیم، اما یک چیز
504
00:22:42,920 –> 00:22:44,540
را باید پیکربندی کنیم. به یاد داشته باشید زمانی که
505
00:22:44,540 –> 00:22:48,860
من سمت تصویر را ایجاد کردم و به شما گفتم
506
00:22:48,860 –> 00:22:52,130
که به مجوز بروید و ما
507
00:22:52,130 –> 00:22:55,010
آدرس عمومی را انجام دادیم یک چیزی را که پیکربندی
508
00:22:55,010 –> 00:22:59,330
کردیم، به پیکربندی دوره مبدا دوره گفتیم که
509
00:22:59,330 –> 00:23:01,520
اساساً به این
510
00:23:01,520 –> 00:23:04,400
آدرس اجازه می دهد تا این سطل را درست اجازه دهد، اما
511
00:23:04,400 –> 00:23:07,790
در حال حاضر ما می خواهیم به محض
512
00:23:07,790 –> 00:23:10,130
اینکه آدرسی را داشتیم که آن را از این
513
00:23:10,130 –> 00:23:12,110
پوشه ثابتی که ایجاد
514
00:23:12,110 –> 00:23:13,940
کردیم کپی کردیم، خوب بگویید، بنابراین این
515
00:23:13,940 –> 00:23:17,420
تضمین می کند که فقط وب سایت یا
516
00:23:17,420 –> 00:23:22,250
برنامه
517
00:23:22,250 –> 00:23:24,020
react ما به این پوشه دسترسی خواهد داشت فقط برای خلاصه کردن ما
518
00:23:24,020 –> 00:23:25,670
دوره را پیکربندی می کنیم. پیکربندی و ما
519
00:23:25,670 –> 00:23:29,660
سطل را عمومی کردیم تا تصاویر خود را به درستی ذخیره
520
00:23:29,660 –> 00:23:31,250
کنیم، می خواهیم دسته ای از آنها را آپلود کنیم که
521
00:23:31,250 –> 00:23:33,650
این درست است برنامه react ما و
522
00:23:33,650 –> 00:23:35,810
ما یک پوشه برای یک برنامه react ایجاد کردیم.
523
00:23:35,810 –> 00:23:38,930
و کاری که ما انجام دادیم، ما فقط
524
00:23:38,930 –> 00:23:43,280
بلوک دسترسی عمومی را خاموش کردیم و سپس
525
00:23:43,280 –> 00:23:46,190
به سیاست سطلی رفتیم، یک خط مشی تنظیم کردیم،
526
00:23:46,190 –> 00:23:49,430
سپس آنها به s3 گفتند هی، ما
527
00:23:49,430 –> 00:23:52,300
به مردم اجازه می دهیم اساساً اشیاء را
528
00:23:52,300 –> 00:23:56,540
دریافت کنند تا ترافیک را از این سطل دریافت کنند و یک
529
00:23:56,540 –> 00:23:58,100
چیز. این کار را انجام دادیم، به
530
00:23:58,100 –> 00:24:00,980
خواص رفتیم و در خواص
531
00:24:00,980 –> 00:24:03,050
این سطل را به میزبانی وب سایت استاتیک تبدیل
532
00:24:03,050 –> 00:24:07,160
کردیم. نکته مثبت در مورد این
533
00:24:07,160 –> 00:24:09,440
نوع معماری دوباره این است که ما مجبور
534
00:24:09,440 –> 00:24:11,870
نیستیم چیزی را حفظ کنیم تا جایی
535
00:24:11,870 –> 00:24:14,840
که سرویس ترافیک ثابت ما s3
536
00:24:14,840 –> 00:24:17,480
بسیار است. معماری های بسیار توزیع شده بسیار جذاب
537
00:24:17,480 –> 00:24:22,240
برای ما ذخیره سازی اشیا و
538
00:24:22,240 –> 00:24:24,680
مقیاس به طور خودکار هیچ گلوگاهی وجود نخواهد داشت
539
00:24:24,680 –> 00:24:26,890
آمازون از تمام
540
00:24:26,890 –> 00:24:29,600
فناوری های زیربنایی
541
00:24:29,600 –> 00:24:31,309
برنامه های کاربردی سرور مراقبت می کند، بنابراین
542
00:24:31,309 –> 00:24:32,809
برنامه ما واقعاً قابل اعتماد خواهد بود
543
00:24:32,809 –> 00:24:35,600
زمانی که ما این را از s3 ارائه می
544
00:24:35,600 –> 00:24:38,240
کنیم، این یک معماری عالی است و میکروسرویسهای آن است،
545
00:24:38,240 –> 00:24:39,950
زیرا ما
546
00:24:39,950 –> 00:24:42,980
با هیچ چیز در مورد حفظ
547
00:24:42,980 –> 00:24:45,410
سیستم عامل اصلی در وصله
548
00:24:45,410 –> 00:24:47,030
آن سیستم عامل یا هر چیز دیگری سروکار
549
00:24:47,030 –> 00:24:49,760
نداریم. خیلی خب بچه ها حالا ما
550
00:24:49,760 –> 00:24:53,000
شروع به ساختن اولین کامپوننت خود می کنیم
551
00:24:53,000 –> 00:24:56,390
که به آن آپلود شده در Jas می گویند، بنابراین
552
00:24:56,390 –> 00:24:58,580
از این کامپوننت برای
553
00:24:58,580 –> 00:25:02,210
آپلود فاکتور خود در باطن استفاده می کنیم، پس
554
00:25:02,210 –> 00:25:05,030
آپلود کنید که Jaso من این را نام می برم و
555
00:25:05,030 –> 00:25:07,280
اگر شما به یاد داشته باشید که ما
556
00:25:07,280 –> 00:25:10,220
آن کامپوننت react snippet را نصب کردیم که
557
00:25:10,220 –> 00:25:12,679
ایجاد همه این کدهای boilerplate را آسان
558
00:25:12,679 –> 00:25:16,520
می کند، بنابراین من MRC دانش آموزان را
559
00:25:16,520 –> 00:25:21,110
بیشتر انجام دادم.
560
00:25:21,110 –> 00:25:23,630
561
00:25:23,630 –> 00:25:26,450
562
00:25:26,450 –> 00:25:29,480
که نامی دارد که من
563
00:25:29,480 –> 00:25:32,179
آن را با کامپوننت آپلود گسترش میدهم،
564
00:25:32,179 –> 00:25:34,220
هرگاه چیزی را گسترش دهیم، به این معنی است
565
00:25:34,220 –> 00:25:38,150
که شما تمام ویژگیها و
566
00:25:38,150 –> 00:25:40,280
همه چیز را از این کلاس والد به ارث میبرید
567
00:25:40,280 –> 00:25:42,230
که جزء جزء به عنوان یک دارایی نامیده میشود
568
00:25:42,230 –> 00:25:44,600
و همه ویژگیهایی را دارد که ما دارد.
569
00:25:44,600 –> 00:25:47,570
باید این ماژول را بسازیم، بنابراین این یک
570
00:25:47,570 –> 00:25:50,960
ماژول است، این کادری است که به آن آپلود میگویند
571
00:25:50,960 –> 00:25:53,390
و پس از همه این موارد، ما
572
00:25:53,390 –> 00:25:56,270
چیزی را با استفاده از JSX برمیگردانیم و
573
00:25:56,270 –> 00:25:58,700
آن را به هر کسی که میخواهد از آن استفاده کند صادر
574
00:25:58,700 –> 00:26:00,980
میکنیم. دوباره آن را صادر می کنیم، بنابراین وقتی آن را صادر
575
00:26:00,980 –> 00:26:03,740
می کنیم باید آن را در جایی درست وارد کنیم
576
00:26:03,740 –> 00:26:05,630
و اینجاست که آن را وارد می
577
00:26:05,630 –> 00:26:07,549
کنیم، همان چیزی را خواهیم داشت که در اینجا
578
00:26:07,549 –> 00:26:13,490
آپلود را از آپلود نقطه ای اسلش وارد
579
00:26:13,490 –> 00:26:16,220
کنیم و خلاص می شویم از این
580
00:26:16,220 –> 00:26:19,190
برنامه بنابراین ما مؤلفه آپلود خود را وارد
581
00:26:19,190 –> 00:26:22,190
کردیم اکنون باید از آن مانند یک تگ HTML
582
00:26:22,190 –> 00:26:24,440
در برنامه خود استفاده کنیم، اما در حال حاضر این
583
00:26:24,440 –> 00:26:26,570
مؤلفه آپلود چیزی را برنمیگرداند،
584
00:26:26,570 –> 00:26:28,190
بنابراین کاری که میخواهیم انجام دهیم،
585
00:26:28,190 –> 00:26:29,900
یک تقسیم ساده ایجاد
586
00:26:29,900 –> 00:26:33,860
میکنیم. برای اینکه کانال خود را موتور کدنویسی کنم،
587
00:26:33,860 –> 00:26:36,679
پس وقتی این را ذخیره کنیم و
588
00:26:36,679 –> 00:26:38,240
به برنامه خود بازگردیم، خواهید دید که ما
589
00:26:38,240 –> 00:26:39,830
به موتور کد در برنامه خود خوش آمدید،
590
00:26:39,830 –> 00:26:42,620
بنابراین یکی از مواردی که می خواهم
591
00:26:42,620 –> 00:26:47,720
فقط در مورد آن صحبت کنم تفاوت بین
592
00:26:47,720 –> 00:26:50,120
dumb مجازی و dumb و نحوه کار آنها است.
593
00:26:50,120 –> 00:26:52,400
با هم اگر روی این مرد راست کلیک کنم
594
00:26:52,400 –> 00:26:55,610
و inspect را بزنم همانطور که می بینید این یک
595
00:26:55,610 –> 00:26:57,710
تقسیم ریشه است درست این یک تقسیم ریشه است
596
00:26:57,710 –> 00:26:59,870
که در مورد آن صحبت کردم و
597
00:26:59,870 –> 00:27:01,760
اکنون محتوایی دارد که می گوید به cotangent خوش آمدید
598
00:27:01,760 –> 00:27:03,909
اما در باطن
599
00:27:03,909 –> 00:27:07,190
به یاد داشته باشید که عمومی ما پوشه ای که در آن
600
00:27:07,190 –> 00:27:10,669
h فایل ad یا index.html دارای یک تقسیم
601
00:27:10,669 –> 00:27:13,100
با ایده میوه بود و کاری که ما در ایندکس انجام دادیم
602
00:27:13,100 –> 00:27:16,250
که j/s انجام دادیم این است که اساساً
603
00:27:16,250 –> 00:27:19,909
محتوای تقسیم ریشه را با مؤلفه آپلود خود جایگزین می کنیم.
604
00:27:19,909 –> 00:27:23,360
آنها از JSX استفاده می کنند و
605
00:27:23,360 –> 00:27:24,679
606
00:27:24,679 –> 00:27:27,710
Babel این JSX را به زیر تبدیل می کند. جاوا اسکریپت
607
00:27:27,710 –> 00:27:31,070
و آن را به HTML نقطه شاخص ما منتقل کنید تا
608
00:27:31,070 –> 00:27:33,350
مرورگر بتواند آن را بفهمد و
609
00:27:33,350 –> 00:27:34,159
به کاربر نهایی نشان دهد،
610
00:27:34,159 –> 00:27:37,850
بنابراین این یک اسکلت بسیار اساسی از
611
00:27:37,850 –> 00:27:41,659
یک ماژول است که شما یک کلاس دارید که یک
612
00:27:41,659 –> 00:27:44,059
نام دارد و مجموعه ای از کارهای آن
613
00:27:44,059 –> 00:27:46,460
را انجام می دهد. حافظه داخلی خود را که
614
00:27:46,460 –> 00:27:49,070
وضعیت نامیده می شود ما می توانیم وضعیت را به روز
615
00:27:49,070 –> 00:27:51,380
کنیم و می توانیم مقدار را از حالت بخوانیم، بنابراین یک
616
00:27:51,380 –> 00:27:54,590
چیزی که می خواهم اینجا اضافه کنم فقط این است که می خواهم
617
00:27:54,590 –> 00:28:00,529
bootstrap را نیز نصب کنم و اگر گوگل آن را بوت کنید می خواهم به
618
00:28:00,529 –> 00:28:03,710
صفحه بوت استرپ برگردم.
619
00:28:03,710 –> 00:28:05,659
همه این صفحه را پیدا خواهید کرد
620
00:28:05,659 –> 00:28:08,169
و ما از NPM install
621
00:28:08,169 –> 00:28:11,630
react bootstrap و bootstrap استفاده می کنیم، بنابراین این
622
00:28:11,630 –> 00:28:14,270
فقط به منظور استفاده از بوت
623
00:28:14,270 –> 00:28:17,000
استرپ در صفحه ما است.
624
00:28:17,000 –> 00:28:18,830
625
00:28:18,830 –> 00:28:20,950
می دانم شاخص نقطه JSP
626
00:28:20,950 –> 00:28:23,630
بنابراین هر شرکت تک mponent که
627
00:28:23,630 –> 00:28:29,390
واردات نیز هست می توانید از این اسلش این
628
00:28:29,390 –> 00:28:35,179
اسلش CSS اسلش بوت استرپ CSS مختلف استفاده کنید، بنابراین
629
00:28:35,179 –> 00:28:38,419
هر مؤلفه ای که من
630
00:28:38,419 –> 00:28:40,880
به این برنامه وارد می کنم بدترین آنها
631
00:28:40,880 –> 00:28:43,039
به این ورودی دسترسی دارند، بنابراین من فقط باید
632
00:28:43,039 –> 00:28:45,559
آن را در یک مکان وارد کنم نه هر یک از آنها.
633
00:28:45,559 –> 00:28:47,570
ادامه میدهیم و برنامه را شروع
634
00:28:47,570 –> 00:28:52,299
میکنیم و ما به ساختن یا
635
00:28:52,299 –> 00:28:55,990
آپلود ماژول j/s ادامه میدهیم، بنابراین باید
636
00:28:55,990 –> 00:28:59,440
یک سری چیزها را وارد کنم،
637
00:28:59,440 –> 00:29:03,280
مثلاً فرمی که میدانید از برچسبهای گروه تشکیل
638
00:29:03,280 –> 00:29:07,720
دهید و اگر به یاد داشته باشید چیزهایی را از react strap درست کنید.
639
00:29:07,720 –> 00:29:11,320
من به react strap باز می گردم
640
00:29:11,320 –> 00:29:15,429
و در اینجا اضافی شماست، بیایید
641
00:29:15,429 –> 00:29:18,940
روی آن کلیک کنیم، بنابراین اگر در react
642
00:29:18,940 –> 00:29:21,490
strap پایین بیایم همانطور که می بینید، می توانیم یک
643
00:29:21,490 –> 00:29:24,400
دستور پایین مانند این ایجاد کنیم و به این ترتیب
644
00:29:24,400 –> 00:29:25,960
آن را ایجاد می کنید، یک پایین ایجاد می کنید و
645
00:29:25,960 –> 00:29:28,000
سپس شما باید آن را از قسمت اضافی وارد کنید،
646
00:29:28,000 –> 00:29:30,070
بنابراین یک سری چیزها وجود دارد که
647
00:29:30,070 –> 00:29:32,559
می توانید در بند واکنش ایجاد کنید، ما
648
00:29:32,559 –> 00:29:34,840
با استفاده از این کامپوننت شروع به ساختن یا فرم دادن
649
00:29:34,840 –> 00:29:36,730
خواهیم کرد و خواهید دید که فرآیند بسیار آسان خواهد بود،
650
00:29:36,730 –> 00:29:40,929
بنابراین من دکمه وارد کردن
651
00:29:40,929 –> 00:29:43,900
را انجام می دهم. فرم وارد کردن من می خواهم
652
00:29:43,900 –> 00:29:47,410
وارد کردن گروه فرم و
653
00:29:47,410 –> 00:29:53,559
من میخواهم برچسب را وارد کنم، متن فرم را درست وارد میکنم
654
00:29:53,559 –> 00:29:56,620
و فعلاً ممکن است در آینده به چیزهای دیگری نیاز داشته باشیم
655
00:29:56,620 –> 00:29:58,510
، من 100٪ مطمئن نیستم زیرا
656
00:29:58,510 –> 00:30:01,590
دارم این را
657
00:30:01,590 –> 00:30:05,590
میسازم. همانطور که دیدید و این
658
00:30:05,590 –> 00:30:09,850
چیزی است که ما از بند واکنش
659
00:30:09,850 –> 00:30:12,370
کامل می سازیم، بنابراین ما همه این
660
00:30:12,370 –> 00:30:14,860
ماژول ها را وارد می کنیم، بنابراین باید بتوانیم از همه
661
00:30:14,860 –> 00:30:16,929
این مؤلفه در برنامه خود استفاده کنیم
662
00:30:16,929 –> 00:30:18,940
که یک مؤلفه دیگر وجود دارد که می خواهیم از
663
00:30:18,940 –> 00:30:21,360
آن استفاده کنیم تا
664
00:30:21,360 –> 00:30:26,020
اساساً تصاویر خود را به base64 تبدیل می کنیم و ما
665
00:30:26,020 –> 00:30:28,390
آنها را به دروازه API می فرستیم. یک gable API
666
00:30:28,390 –> 00:30:31,870
آن کد base64 را به یک
667
00:30:31,870 –> 00:30:34,809
تصویر واقعی به سطل SG ما تبدیل می کند، بنابراین بیایید
668
00:30:34,809 –> 00:30:37,059
قبل از اینکه آن را فراموش کنیم آن را نیز نصب کنیم.
669
00:30:37,059 –> 00:30:39,790
670
00:30:39,790 –> 00:30:42,550
متاسفم که باید این شخص را
671
00:30:42,550 –> 00:30:47,679
در پوشه برنامه خود نصب کنم به یاد داشته باشید که همیشه می خواهید
672
00:30:47,679 –> 00:30:50,350
برای دیدن برنامه بروید و سپس اکنون
673
00:30:50,350 –> 00:30:52,059
در برنامه هستید، ما
674
00:30:52,059 –> 00:30:54,600
آن
675
00:30:55,020 –> 00:30:57,370
را بر اساس
676
00:30:57,370 –> 00:31:00,370
دستورالعمل react نصب می کنیم. Five base64 می گوید که
677
00:31:00,370 –> 00:31:02,440
برای این کار باید به راحتی از این دستور استفاده کنید
678
00:31:02,440 –> 00:31:04,809
install react five base64 من این کار را انجام می
679
00:31:04,809 –> 00:31:08,640
دهم زیرا در نهایت می
680
00:31:08,640 –> 00:31:11,010
681
00:31:11,010 –> 00:31:13,620
خواهم تصویر خود را به base64 آپلود کنم و
682
00:31:13,620 –> 00:31:15,480
به back-end REST API ارسال
683
00:31:15,480 –> 00:31:18,450
کنم و در بک اند هیچ js
684
00:31:18,450 –> 00:31:22,140
آن فایل را بخوانم که اساساً شش base64 است. و
685
00:31:22,140 –> 00:31:24,870
به یک تصویر واقعی تبدیل میشود،
686
00:31:24,870 –> 00:31:26,700
برای مثال اگر میخواهید از fog awesome
687
00:31:26,700 –> 00:31:28,200
از زمانی که ما آن را نصب کردهایم استفاده کنید، میتوانیم ادامه دهیم
688
00:31:28,200 –> 00:31:33,380
و از فونت
689
00:31:33,380 –> 00:31:40,380
جالب جالب استفاده کنیم و در واقع میتوانم فونت
690
00:31:40,380 –> 00:31:47,040
عالی را انجام دهم، میتوانم به آنجا بروم و به سادگی میتوانم
691
00:31:47,040 –> 00:31:50,220
روی آن کلیک کنم مخزن github و اگر به
692
00:31:50,220 –> 00:31:52,970
پایین اسکرول کنید و صفحه عالی را پیدا
693
00:31:52,970 –> 00:31:57,120
کردید، استفاده را در اینجا خواهید
694
00:31:57,120 –> 00:31:58,650
دید، می بینید که می گوید hot awesome به
695
00:31:58,650 –> 00:32:02,010
این صورت می توانید از آن درست استفاده کنید و اگر
696
00:32:02,010 –> 00:32:05,100
من به این نگاهی بیندازم، برای مثال
697
00:32:05,100 –> 00:32:07,110
اگر به عقب برگردم و وارد کنم، واکنش نشان دهید. تمام این
698
00:32:07,110 –> 00:32:08,850
699
00:32:08,850 –> 00:32:12,510
دستورات فوق العاده فکری از دستورالعمل من من
700
00:32:12,510 –> 00:32:14,190
چیزی شبیه به این خواهم داشت اکنون می توانید
701
00:32:14,190 –> 00:32:17,880
نمادهای مختلفی را وارد کنید، به
702
00:32:17,880 –> 00:32:22,650
عنوان مثال اگر یک اطلاعات اطلاعاتی، فرض کنید دایره
703
00:32:22,650 –> 00:32:25,590
درست است و چگونه می دانم که اگر فقط
704
00:32:25,590 –> 00:32:27,419
به فونت عالی بروید
705
00:32:27,419 –> 00:32:31,470
و اساساً نمادها را انتخاب کنید. شما اراده کنید من میتوانم
706
00:32:31,470 –> 00:32:34,740
تمام نمادهایی که میدانید را ببینم که
707
00:32:34,740 –> 00:32:37,350
برای استفاده در واکنشهای خود در دسترس
708
00:32:37,350 –> 00:32:41,340
هستند، ما یک بخش در این
709
00:32:41,340 –> 00:32:43,860
بخش خواهیم داشت که یک نام کلاس داشته باشد و
710
00:32:43,860 –> 00:32:45,750
ما آن را خام نامگذاری
711
00:32:45,750 –> 00:32:48,030
میکنیم، بنابراین ما میخواهیم
712
00:32:48,030 –> 00:32:50,340
از کلاس بوت استرپ ما در بوت استرپ ما ردیف شود و
713
00:32:50,340 –> 00:32:52,710
در داخل این اتاق هم اکنون
714
00:32:52,710 –> 00:32:55,380
یک ستون ایجاد می کنیم، بنابراین اولین ستونی
715
00:32:55,380 –> 00:32:56,760
که می خواهیم ایجاد کنیم
716
00:32:56,760 –> 00:33:01,650
نام کلاس برابر با Col – 6 خواهد بود تا بدانید
717
00:33:01,650 –> 00:33:03,780
کدام نوع صفحه را به 12 بخش مختلف تقسیم می کند
718
00:33:03,780 –> 00:33:05,450
و ما
719
00:33:05,450 –> 00:33:10,890
ستون را با 3 آفست می کنیم یعنی سه
720
00:33:10,890 –> 00:33:13,679
ستون از سمت چپ سه ستون
721
00:33:13,679 –> 00:33:17,850
از راست راست این سه
722
00:33:17,850 –> 00:33:22,440
ستون از سمت چپ به اضافه شش ستون
723
00:33:22,440 –> 00:33:23,610
در وسط
724
00:33:23,610 –> 00:33:26,830
به اضافه سه ستون در سمت راست خواهد بود. بنابراین وقتی
725
00:33:26,830 –> 00:33:28,510
با سه افست میکنید، اساساً
726
00:33:28,510 –> 00:33:30,280
سه ستون به سمت چپ
727
00:33:30,280 –> 00:33:31,870
اضافه میکنید و سه ستون به سمت راست اضافه میکنید
728
00:33:31,870 –> 00:33:34,210
، مجموع آن همیشه 12 است، نگاه کنید که
729
00:33:34,210 –> 00:33:37,480
همیشه 12 کامل است، بنابراین اکنون ما
730
00:33:37,480 –> 00:33:41,760
جلوتر و پایینتر میرویم. دوباره
731
00:33:41,760 –> 00:33:47,380
فرمی از react strap اضافه می کنم که فقط می تواند باشد
732
00:33:47,380 –> 00:33:50,560
install ما می گوییم در ارسال یا
733
00:33:50,560 –> 00:33:52,000
در حال حاضر یک سری کارها را انجام
734
00:33:52,000 –> 00:33:55,720
می دهیم، فقط آن را به حالت کامل رها می کنیم و
735
00:33:55,720 –> 00:33:58,800
در داخل فرم یک
736
00:33:58,800 –> 00:34:04,390
گروه انجمن فرم گروه ایجاد می کنیم و در گروه فرم خود
737
00:34:04,390 –> 00:34:07,330
ما میخواهیم یک سری
738
00:34:07,330 –> 00:34:09,580
چیزها را در آنجا ایجاد کنیم و اساساً آنها
739
00:34:09,580 –> 00:34:11,590
برچسب شما را گروهبندی میکنند و یک متن که
740
00:34:11,590 –> 00:34:16,168
مفهومی بسیار ساده است، بنابراین بیایید یک
741
00:34:16,168 –> 00:34:20,320
برچسب h3 ایجاد کنیم، نام آن را میگذاریم و
742
00:34:20,320 –> 00:34:25,860
من برای مثال از آن استفاده میکنم متن قرمز خطر
743
00:34:25,860 –> 00:34:29,980
درست است و در داخل آن چیزی به نام پردازش قرار می
744
00:34:29,980 –> 00:34:31,870
745
00:34:31,870 –> 00:34:33,880
دهیم حالا بعداً این نام را تکمیل می
746
00:34:33,880 –> 00:34:36,880
کنیم و فعلاً کاری که می توانیم انجام دهیم می توانیم ادامه دهیم
747
00:34:36,880 –> 00:34:39,310
و بگوییم که در سراسر سینک
748
00:34:39,310 –> 00:34:48,250
می گوید پردازش سند درست است
749
00:34:48,250 –> 00:34:51,370
هر چه می خواهیم ترک کنیم خوب
750
00:34:51,370 –> 00:34:52,750
بنابراین فعلاً ما چیزی در جای خود
751
00:34:52,750 –> 00:34:56,230
داریم، بنابراین در داخل که قرار است
752
00:34:56,230 –> 00:35:00,070
اتفاق بیفتد، فرض کنید h6، میخواهیم بگوییم
753
00:35:00,070 –> 00:35:06,300
فاکتور خود را برای آپلود صدا درست آپلود کنید
754
00:35:06,300 –> 00:35:10,420
و بعد از این یک
755
00:35:10,420 –> 00:35:16,390
متن فرم برای متن و ما
756
00:35:16,390 –> 00:35:19,960
یک رنگ از سمت راست خاموش خواهیم داشت که مانند
757
00:35:19,960 –> 00:35:23,650
غیر فعال است و این خاکستری
758
00:35:23,650 –> 00:35:25,570
خواهد شد و فرض کنید برای مثال آپلود
759
00:35:25,570 –> 00:35:30,400
PNG یا JPEG فعلاً درست است برای ارسال،
760
00:35:30,400 –> 00:35:34,690
من از چیزی به نام دسته استفاده میکنم
761
00:35:34,690 –> 00:35:39,220
تا همه چیز را ارسال کنم و سپس این دست
762
00:35:39,220 –> 00:35:41,680
ارسال میکند، البته بهترین شماره را ارسال میکنم.
763
00:35:41,680 –> 00:35:45,490
در کد من و اجازه دهید برای
764
00:35:45,490 –> 00:35:48,970
مثال از بخشی از این به عنوان فقط اضافه
765
00:35:48,970 –> 00:35:52,270
کردن دسته ارسال استفاده کنیم، بنابراین handle submit
766
00:35:52,270 –> 00:35:54,760
در نهایت یک جایگزین غیر همگام خواهد بود
767
00:35:54,760 –> 00:35:58,059
، فرض کنید اگر
768
00:35:58,059 –> 00:36:01,240
این فرم را ارسال کنید تا جدول dynamodb را بفرستید،
769
00:36:01,240 –> 00:36:05,020
دستهها ارسال میشوند مانند
770
00:36:05,020 –> 00:36:07,930
خوب است و کاری که ما در آنجا انجام می
771
00:36:07,930 –> 00:36:10,390
دهیم، می گوییم زمانی که ارسال می کنیم، اول از
772
00:36:10,390 –> 00:36:15,089
همه می خواهیم از
773
00:36:15,089 –> 00:36:20,440
ارسال پیش فرض جلوگیری کنیم و ما
774
00:36:20,440 –> 00:36:22,960
پیش فرض را تایپ می کنیم، بنابراین نمی خواهیم اساساً
775
00:36:22,960 –> 00:36:26,049
فرمی را ارسال کنیم که فقط یک
776
00:36:26,049 –> 00:36:29,170
واکنش طبیعی است. از جاوا اسکریپت و من
777
00:36:29,170 –> 00:36:32,200
باید چیزی به نام اینجا در
778
00:36:32,200 –> 00:36:35,010
ایالت خودم ایجاد کنم، میخواهم نام این
779
00:36:35,010 –> 00:36:39,640
پردازش را بگذارم، برای مثال بسیار خوب،
780
00:36:39,640 –> 00:36:41,829
این را خواهم داشت، فرض کنید وقتی فرم را آپلود
781
00:36:41,829 –> 00:36:44,920
کردیم، یک
782
00:36:44,920 –> 00:36:47,950
شماره تأیید تأیید درست خواهیم داشت. عدد این در
783
00:36:47,950 –> 00:36:53,109
حال حاضر یک مقدار خالی خواهد بود،
784
00:36:53,109 –> 00:36:55,359
درست در حالت دوباره، همانطور که گفتم یک شی است
785
00:36:55,359 –> 00:36:58,630
که حاوی دسته ای از متغیرها و
786
00:36:58,630 –> 00:37:01,510
چیزهایی است که می توانیم
787
00:37:01,510 –> 00:37:04,359
هر زمان که می خواهید
788
00:37:04,359 –> 00:37:06,670
مقداری را که ذخیره می کنید به روز کنید تا با آنها کار کنیم در کامپوننت خود ذخیره کنیم.
789
00:37:06,670 –> 00:37:09,190
در حالتی که قطعاً همیشه
790
00:37:09,190 –> 00:37:12,579
باید از آن حالت استفاده کنید و کاری که ما می خواهیم
791
00:37:12,579 –> 00:37:15,190
انجام دهیم، برای تأیید در
792
00:37:15,190 –> 00:37:17,200
حال حاضر می گوییم وقتی این کار را انجام می دهیم، فقط
793
00:37:17,200 –> 00:37:19,809
مقدار را به دو بار آپلود به روز می کنیم درست
794
00:37:19,809 –> 00:37:22,539
زمانی که روی «می دانید» کلیک کنید. در پایین ارسال کنید
795
00:37:22,539 –> 00:37:25,000
چه اتفاقی میافتد،
796
00:37:25,000 –> 00:37:27,190
متغیر تأییدی که داخل
797
00:37:27,190 –> 00:37:29,559
مؤلفه ما است با این مقدار بهروزرسانی میشود،
798
00:37:29,559 –> 00:37:33,250
فقط میخواهم این را ذخیره کنم و ببینم
799
00:37:33,250 –> 00:37:35,260
آیا خطایی وجود دارد،
800
00:37:35,260 –> 00:37:37,930
اگر همه چیز پیش نمیرود، خطا را برطرف میکنیم و
801
00:37:37,930 –> 00:37:42,460
به ساخت فرم خود ادامه میدهیم.
802
00:37:42,460 –> 00:37:45,549
بنابراین میگوید پردازش تعریف نشده است، من
803
00:37:45,549 –> 00:37:48,510
باید این را در رندر خود قرار دهم
804
00:37:48,510 –> 00:37:51,480
و فقط فعلاً این را به عنوان یک ثابت میگویم،
805
00:37:51,480 –> 00:37:53,670
خوب است، بنابراین همانطور که
806
00:37:53,670 –> 00:37:56,670
میبینید اکنون یک چهار یا یک درون
807
00:37:56,670 –> 00:37:57,990
این مرد داریم که قرار است داشته باشیم. یک
808
00:37:57,990 –> 00:38:01,380
بخش دیگر n و ما یک نام کلاس اختصاص
809
00:38:01,380 –> 00:38:03,840
می دهیم و نام آن را انجمن می
810
00:38:03,840 –> 00:38:07,710
گذاریم – گروه و از فضا استفاده می کنیم اکنون
811
00:38:07,710 –> 00:38:10,500
آتش خواهیم داشت و
812
00:38:10,500 –> 00:38:12,300
از کلاسی به نام رنگ استفاده می کنیم، به زودی خواهیم دید
813
00:38:12,300 –> 00:38:15,390
که چگونه این بر برنامه ما تأثیر می گذارد،
814
00:38:15,390 –> 00:38:18,420
اما اجازه دهید من ادامه دهم و وارد کنم و
815
00:38:18,420 –> 00:38:22,200
اساساً از پنج پایه 64 خود استفاده کنم که
816
00:38:22,200 –> 00:38:24,750
قرار است آن تصویر را درست دریافت کند و
817
00:38:24,750 –> 00:38:26,550
سپس آن را در بک اند آپلود
818
00:38:26,550 –> 00:38:28,740
819
00:38:28,740 –> 00:38:30,780
820
00:38:30,780 –> 00:38:33,720
کنم.
821
00:38:33,720 –> 00:38:35,580
اگر بیش از یک فایل وجود داشته باشد، اساساً به برنامه من اجازه میدهیم که یک دسته مگس دریافت کند، در
822
00:38:35,580 –> 00:38:38,460
غیر این صورت میتوانیم
823
00:38:38,460 –> 00:38:40,380
آن را ساده نگه داریم،
824
00:38:40,380 –> 00:38:42,780
همچنین میخواهیم آن را پیدا کنیم و ببینیم که چگونه و
825
00:38:42,780 –> 00:38:44,550
اساساً واکنش
826
00:38:44,550 –> 00:38:47,400
برنامه را مطالعه کنیم. ما میخواهیم بگوییم وقتی
827
00:38:47,400 –> 00:38:50,310
این کار انجام شد، ادامه میدهیم
828
00:38:50,310 –> 00:38:54,690
و چیزی به نام emit
829
00:38:54,690 –> 00:38:58,290
تابعی به نام get files را فراخوانی میکنیم و میخواهیم
830
00:38:58,290 –> 00:39:01,920
بگوییم این را درست پیدا نکنیم، بنابراین این
831
00:39:01,920 –> 00:39:04,020
را پیوند میدهیم زیرا همانطور که
832
00:39:04,020 –> 00:39:07,430
این را ارسال میکنیم هنگامی که ما این فایل را ارسال
833
00:39:07,430 –> 00:39:10,560
می کنیم، مطمئن می شویم که tra را از دست ندهیم
834
00:39:10,560 –> 00:39:13,980
ck این شی موجود که
835
00:39:13,980 –> 00:39:16,500
درست نیست، بنابراین با استفاده از این تابع
836
00:39:16,500 –> 00:39:18,450
شما به نوعی ردیابی این
837
00:39:18,450 –> 00:39:20,910
آتش و این روشی که
838
00:39:20,910 –> 00:39:25,940
به آن منتقل می شد را دنبال می کنید، بنابراین ما یک تابع async async ایجاد می کنیم
839
00:39:25,940 –> 00:39:29,000
که به آن دریافت فایل ها
840
00:39:29,000 –> 00:39:31,320
می گویند و ما همه فایلهایی را که
841
00:39:31,320 –> 00:39:34,380
دریافت کردهایم به درستی پاس میدهیم و کاری که میخواهیم
842
00:39:34,380 –> 00:39:36,510
دوباره انجام دهیم، مجموعه حالت خود را بهروزرسانی
843
00:39:36,510 –> 00:39:39,930
میکنیم و در داخل حالت
844
00:39:39,930 –> 00:39:42,660
میخواهیم بگوییم که دو چیز داریم که
845
00:39:42,660 –> 00:39:45,510
یکی از آنها به نام بارگیری است. دقیقاً
846
00:39:45,510 –> 00:39:48,210
به این متغیر
847
00:39:48,210 –> 00:39:51,030
، تغییرات خود را در برنامه ما پیگیری می کند
848
00:39:51,030 –> 00:39:53,520
تا ببیند آیا آماده است و اساساً بارگذاری آن تمام شده است
849
00:39:53,520 –> 00:39:56,580
یا نه و
850
00:39:56,580 –> 00:39:58,640
دومین موردی که قرار است فایل هایی داشته
851
00:39:58,640 –> 00:40:00,610
باشیم که در
852
00:40:00,610 –> 00:40:03,100
حال حاضر داریم، در حال حاضر خالی خواهد بود. ما میتوانیم ادامه دهیم
853
00:40:03,100 –> 00:40:05,950
و در حالتی که قرار است در حالت
854
00:40:05,950 –> 00:40:08,890
بارگذاری داشته باشیم،
855
00:40:08,890 –> 00:40:14,650
اساساً برابر است با استخراج درست دادهها،
856
00:40:14,650 –> 00:40:15,370
857
00:40:15,370 –> 00:40:18,340
زیرا هنگامی که ما آن را آپلود میکنیم که میخواهیم
858
00:40:18,340 –> 00:40:21,670
بهروزرسانی کنیم، بارگذاری برابر با دادههای او
859
00:40:21,670 –> 00:40:25,600
است و ما بهروزرسانی را آپلود میکنیم. یا
860
00:40:25,600 –> 00:40:28,630
فایل هایی که چیزهایی که شما در
861
00:40:28,630 –> 00:40:29,830
اینجا درست دریافت شده است،
862
00:40:29,830 –> 00:40:32,050
شما اساساً میتوانید این را تا آنجا رها کنید،
863
00:40:32,050 –> 00:40:34,870
اما از آنجایی که میخواهم
864
00:40:34,870 –> 00:40:36,340
مطمئن شوم که شما بچهها همه این چیزها را میفهمید،
865
00:40:36,340 –> 00:40:37,630
بنابراین میخواهم آن را اضافه کنم، اما
866
00:40:37,630 –> 00:40:39,850
شما معمولاً فقط میتوانید از فایلها استفاده کنید، زیرا آنها
867
00:40:39,850 –> 00:40:42,130
یک ارزش کلیدی متعهدانه دارند. همینطور است،
868
00:40:42,130 –> 00:40:47,650
بنابراین اساساً من این تابع
869
00:40:47,650 –> 00:40:50,800
را آماده کار کرده ام، بنابراین
870
00:40:50,800 –> 00:40:52,660
چیزهای دیگری را به این تابع اضافه می کنیم، اما در
871
00:40:52,660 –> 00:40:54,400
حال حاضر فقط آن را ساده نگه
872
00:40:54,400 –> 00:40:57,730
873
00:40:57,730 –> 00:41:00,630
می داریم. من اساساً این
874
00:41:00,630 –> 00:41:04,120
بخش را نبسته ام خوب است من از پنج
875
00:41:04,120 –> 00:41:08,830
base64 استفاده کردم تا جایی را
876
00:41:08,830 –> 00:41:11,650
برای کاربر فراهم کنم تا جریمه خود را آپلود کند، بنابراین اگر
877
00:41:11,650 –> 00:41:15,130
این برنامه را ذخیره کنم و اگر به
878
00:41:15,130 –> 00:41:17,860
اینجا برگردم امیدوارم نتیجه عالی را ببینیم،
879
00:41:17,860 –> 00:41:20,440
بچه ها همانطور که اکنون می توانید ببینید. من
880
00:41:20,440 –> 00:41:23,860
فرمی دارم که دارای بخش دو است، بنابراین میتوانم
881
00:41:23,860 –> 00:41:25,480
انتخاب کنم که کاربر فایل را
882
00:41:25,480 –> 00:41:27,250
انتخاب کند، بنابراین فرض کنید من
883
00:41:27,250 –> 00:41:28,750
یک فاکتور را انتخاب میکنم، همانطور که میتوانید نمونهای را ببینید
884
00:41:28,750 –> 00:41:32,230
که PNG تا اینجا بسیار خوب است، میدانم که
885
00:41:32,230 –> 00:41:34,690
اساساً باید آن را بسازیم. این به نظر خوب است
886
00:41:34,690 –> 00:41:36,970
من به شما هو را نشان خواهم داد دقیقاً برای استفاده از
887
00:41:36,970 –> 00:41:39,460
CSS یا استایل دادن به این صفحه خوب،
888
00:41:39,460 –> 00:41:43,990
بیایید به عقب برگردیم ما این فایل را ایجاد کردیم
889
00:41:43,990 –> 00:41:46,330
و سپس ادامه می دهیم و گروه فرم دوم خود را ایجاد می کنیم،
890
00:41:46,330 –> 00:41:49,270
بنابراین کاری که می خواهم انجام دهم،
891
00:41:49,270 –> 00:41:52,020
فقط می خواهم این قسمت از فرم اصلی خود را قرار دهم.
892
00:41:52,020 –> 00:41:54,400
گروهها، بنابراین این بچهها
893
00:41:54,400 –> 00:41:57,520
تنها بخشی از برنامه یا برنامه آنها خواهند بود،
894
00:41:57,520 –> 00:41:59,620
بنابراین میبینید که فاصله
895
00:41:59,620 –> 00:42:01,930
اکنون بهتر است،
896
00:42:01,930 –> 00:42:04,660
بنابراین ما یک گروه فرم دیگری ایجاد میکنیم، بنابراین گروههای فرمی را ایجاد میکنیم
897
00:42:04,660 –> 00:42:07,210
تا این عناصر را با هم گروهبندی کنیم
898
00:42:07,210 –> 00:42:09,460
تا نفر بعدی من باشم میخواهم ایجاد کنم، میخواهم
899
00:42:09,460 –> 00:42:11,800
آن را برچسب بزنم
900
00:42:11,800 –> 00:42:15,010
و این یکی میشود، فرض کنید
901
00:42:15,010 –> 00:42:17,590
میخواهم h6 داشته باشم، میخواهم این
902
00:42:17,590 –> 00:42:22,000
فاکتور را درست کنم، عالی بود، بنابراین حالا
903
00:42:22,000 –> 00:42:25,590
بیایید جلو برویم و یک ورودی کامل ایجاد کنیم
904
00:42:25,590 –> 00:42:31,210
و در ورودی ما
905
00:42:31,210 –> 00:42:37,660
می خواهم تایپ کنم که با متن برابر است،
906
00:42:37,660 –> 00:42:42,000
من این را برابر با
907
00:42:42,000 –> 00:42:47,860
صورتحساب می نامم و از یک شناسه نیز استفاده می
908
00:42:47,860 –> 00:42:50,650
کنم، فقط در حال حاضر
909
00:42:50,650 –> 00:42:52,869
صد در صد مطمئن نیستم
910
00:42:52,869 –> 00:42:55,360
که از این استفاده کنم یا نه ایده یا نه چون من
911
00:42:55,360 –> 00:42:57,330
دارم این برنامه را روی
912
00:42:57,330 –> 00:43:02,200
فاکتور درست میسازم و میخواهیم داشته باشیم یک
913
00:43:02,200 –> 00:43:04,300
مقدار برای این فرض میکنم که
914
00:43:04,300 –> 00:43:06,850
میدانیم مقادیری را در اینجا اضافه میکنیم و
915
00:43:06,850 –> 00:43:08,590
سپس میخواهیم این مورد را الزامی کنیم، بنابراین
916
00:43:08,590 –> 00:43:12,300
بیایید این مورد را درست کنیم و سپس
917
00:43:12,300 –> 00:43:16,060
اجازه دهید این ورودی را ببندیم و در واقع
918
00:43:16,060 –> 00:43:17,560
به جای انجام این کار، فقط
919
00:43:17,560 –> 00:43:20,890
باید اسلش را انجام دهیم و باید
920
00:43:20,890 –> 00:43:26,560
بگوییم که باید بگوییم
921
00:43:26,560 –> 00:43:28,540
ارزش این شخص چیزی
922
00:43:28,540 –> 00:43:30,730
از کشور ما خواهد بود زیرا ما در
923
00:43:30,730 –> 00:43:33,730
نهایت ارزشی را که
924
00:43:33,730 –> 00:43:36,130
قرار است از آن دریافت کنیم به روز می کنیم ماژول تشخیص شیء OCR را
925
00:43:36,130 –> 00:43:38,830
از پشت ماژول
926
00:43:38,830 –> 00:43:41,650
و ما اساساً تجزیه ای را
927
00:43:41,650 –> 00:43:44,250
که فایل JSON را انجام می دهیم و
928
00:43:44,250 –> 00:43:48,520
مقدار مربوطه را در حالت خود آپلود می کنیم، به طوری
929
00:43:48,520 –> 00:43:52,359
که به هر حال این حالت وجود دارد، بنابراین من فرض می کنم که
930
00:43:52,359 –> 00:43:56,470
باید این فاکتور را در وضعیت خود ایجاد کنم.
931
00:43:56,470 –> 00:43:58,060
ما ادامه می دهیم و ایجاد می کنیم که
932
00:43:58,060 –> 00:44:00,280
اساساً همانطور که می بینید
933
00:44:00,280 –> 00:44:02,680
وضعیت جایی است که من فقط می توانم
934
00:44:02,680 –> 00:44:05,619
این مقادیر را ایجاد و نگه دارم در حالی که
935
00:44:05,619 –> 00:44:07,420
کاربرد کامپوننت درست است می
936
00:44:07,420 –> 00:44:10,390
گوید ورودی تعریف نشده نیست و اگر
937
00:44:10,390 –> 00:44:13,930
به خاطر داشته باشید در react strap ما همه
938
00:44:13,930 –> 00:44:15,760
این ارزش ها را وارد کرد ما
939
00:44:15,760 –> 00:44:18,280
یکی دیگر را از دست دادیم که من همین الان اضافه کردم، بنابراین اگر
940
00:44:18,280 –> 00:44:20,440
به آنجا برگردم، فرمی دارم که اکنون
941
00:44:20,440 –> 00:44:23,950
یک فاکتور دارد، بنابراین اکنون یک فرم دیگر این
942
00:44:23,950 –> 00:44:25,500
است که اساساً شماره صورتحساب ما خواهد بود،
943
00:44:25,500 –> 00:44:27,990
درست
944
00:44:27,990 –> 00:44:31,650
است. اساساً مبلغ و
945
00:44:31,650 –> 00:44:35,460
تاریخ من باشد، بنابراین ما به ساختن
946
00:44:35,460 –> 00:44:39,600
آن گزینهها نیز ادامه میدهیم، بنابراین اگر
947
00:44:39,600 –> 00:44:43,380
به قلعه خود برگردم، گروه انجمن دیگری
948
00:44:43,380 –> 00:44:46,940
در این گروه انجمن خواهم داشت که
949
00:44:46,940 –> 00:44:51,780
برچسب دیگری خواهد بود.
950
00:44:51,780 –> 00:44:52,610
951
00:44:52,610 –> 00:44:56,160
متاسفم که تغییر کرده است تا برچسب قدیمی کامل نگه داشته شود
952
00:44:56,160 –> 00:45:00,140
و من دوباره h6
953
00:45:00,140 –> 00:45:02,970
درست خواهم داشت همان داستان در مقدار
954
00:45:02,970 –> 00:45:05,730
دلار علامت درست است و پرانتزها
955
00:45:05,730 –> 00:45:07,680
سمت دیگر را می گذارم و
956
00:45:07,680 –> 00:45:10,710
ورودی دیگری خواهم داشت. من فقط
957
00:45:10,710 –> 00:45:13,620
آن را کپی می کنم، بنابراین اگر مشکلی ندارید،
958
00:45:13,620 –> 00:45:16,380
بتوانیم در زمان خود صرفه جویی کنیم تا این یکی
959
00:45:16,380 –> 00:45:22,560
مقدار مناسبی باشد و همانطور که می توانید
960
00:45:22,560 –> 00:45:27,690
حدس بزنید که روشن است،
961
00:45:27,690 –> 00:45:30,920
برخی از مقادیر را در حالت من به روز رسانی می کند.
962
00:45:30,920 –> 00:45:34,620
ما از مقداری می خوانیم
963
00:45:34,620 –> 00:45:36,900
که در حال حاضر هیچ ارزشی ندارد، امیدوارم
964
00:45:36,900 –> 00:45:39,000
من از من بخواهم فراخوانی API مقادیری خواهد داشت
965
00:45:39,000 –> 00:45:41,600
و این در اصل
966
00:45:41,600 –> 00:45:46,410
به آن مقدار متصل است، بنابراین ما
967
00:45:46,410 –> 00:45:48,300
گروه دوم را ایجاد کردیم که سومین گروه را
968
00:45:48,300 –> 00:45:51,240
می توانید به عنوان انرژی فرض کنید، گروه فرم دیگری بسیار
969
00:45:51,240 –> 00:45:52,890
خوب است و ما
970
00:45:52,890 –> 00:45:54,870
تا می توانید یک گروه دیگر خواهیم داشت. حدس بزنید
971
00:45:54,870 –> 00:45:58,020
این تاریخ فاکتور خواهد بود درست
972
00:45:58,020 –> 00:46:04,470
است که تاریخ هشتم خواهد بود این تاریخ را درست نامگذاری کنید
973
00:46:04,470 –> 00:46:07,920
و همانطور که می بینید اکنون در حال
974
00:46:07,920 –> 00:46:09,990
تازه شدن است و ما فیلد دیگری
975
00:46:09,990 –> 00:46:12,870
به نام تاریخ داریم بنابراین گروه فرم دیگری وجود دارد
976
00:46:12,870 –> 00:46:17,310
و احتمالاً به یکی دیگر نیاز داریم. شما
977
00:46:17,310 –> 00:46:19,440
و شما می خواهید آن را وام دهنده نام گذاری کنید، اما
978
00:46:19,440 –> 00:46:22,350
این مقادیر اساساً اصلی هستند که
979
00:46:22,350 –> 00:46:24,360
ما با آنها کار می کنیم مانند
980
00:46:24,360 –> 00:46:26,100
مقدار عدد شستشوی کوهستانی و همه آنها
981
00:46:26,100 –> 00:46:28,590
این مقادیر را از عکس استخراج می کنند و
982
00:46:28,590 –> 00:46:32,130
می بینید که چگونه این کار برای شما انجام می شود.
983
00:46:32,130 –> 00:46:34,599
به عنوان مثال وام دهنده درست است
984
00:46:34,599 –> 00:46:37,539
همانطور که می توانید حدس بزنید این فروشنده است و
985
00:46:37,539 –> 00:46:43,019
من به تاریخ نیاز دارم و زمانی که آنها در وضعیت من هستند
986
00:46:45,720 –> 00:46:50,289
بسیار خوب است، بنابراین فرض کنید که ما یک
987
00:46:50,289 –> 00:46:53,200
توضیح نیز داریم، بیایید یک
988
00:46:53,200 –> 00:46:56,470
بخش برای توضیحات ایجاد کنیم، بنابراین من می
989
00:46:56,470 –> 00:47:00,460
خواهم فرم دیگری ایجاد کنید گروه درست
990
00:47:00,460 –> 00:47:03,400
در داخل این گروه فرم، ما
991
00:47:03,400 –> 00:47:06,479
یک برچسب دیگر خواهیم داشت، من فقط اسم آن را
992
00:47:06,479 –> 00:47:11,849
میگذارم، فقط این توضیحات را
993
00:47:12,539 –> 00:47:17,829
درست نام میگذارم و در
994
00:47:17,829 –> 00:47:23,619
ورودی دیگری ایجاد میکنیم، فرض کنید ورودی دیگری ایجاد
995
00:47:23,619 –> 00:47:26,759
میکنیم که این بار نام آن را میگذاریم
996
00:47:26,759 –> 00:47:29,619
مطمئناً متن خواهد بود و
997
00:47:29,619 –> 00:47:34,079
این توضیحی خواهد بود
998
00:47:34,079 –> 00:47:36,999
و دوباره طبق معمول ما این
999
00:47:36,999 –> 00:47:42,609
مقدار را برای وضعیت خودمان کور
1000
00:47:42,609 –> 00:47:44,979
خواهیم کرد و همینطور خواهد بود و
1001
00:47:44,979 –> 00:47:48,759
اگر به عقب برگردید بسیار عالی خواهد بود
1002
00:47:48,759 –> 00:47:50,979
. به فرم خود امیدواریم اکنون یک
1003
00:47:50,979 –> 00:47:53,289
فرم تمیز داشته باشیم و اکنون باید به
1004
00:47:53,289 –> 00:47:55,719
1005
00:47:55,719 –> 00:47:58,779
رتبه دوم بیاییم تا این فرم را به سرور ارسال کنیم، بنابراین
1006
00:47:58,779 –> 00:48:02,469
کاری که میخواهیم انجام دهیم، به پایین میرویم و در
1007
00:48:02,469 –> 00:48:04,779
پایان این گروه فرم بعد از این شخص
1008
00:48:04,779 –> 00:48:06,819
، از دکمه استفاده می کنیم و سپس
1009
00:48:06,819 –> 00:48:10,029
نام کلاس برابر با BTN خواهد بود، اگر
1010
00:48:10,029 –> 00:48:12,309
با بوت استرپ آشنا هستید، اگر نه
1011
00:48:12,309 –> 00:48:16,059
فقط به BT نگاهی بیندازید که نام کلاس ها را می
1012
00:48:16,059 –> 00:48:18,339
شناسید، آن را گوشتی و بزرگ
1013
00:48:18,339 –> 00:48:19,960
خواهید یافت. دکمه بزرگ و
1014
00:48:19,960 –> 00:48:22,269
بلوک BTN خواهد بود زیرا می
1015
00:48:22,269 –> 00:48:26,739
خواهم بدانم اساساً کل
1016
00:48:26,739 –> 00:48:29,769
بخش را که قرار است نامش را
1017
00:48:29,769 –> 00:48:31,479
بگذارم پوشش می دهد و رنگ دیگری را که می خواهم تغییر دهم،
1018
00:48:31,479 –> 00:48:33,880
مثلاً به BT موفقیت آمیز نیست، بنابراین
1019
00:48:33,880 –> 00:48:37,539
دقیقاً شبیه چیزی است
1020
00:48:37,539 –> 00:48:39,700
که در ابتدای این آموزش
1021
00:48:39,700 –> 00:48:44,079
به شما نشان دادم. این ارسال کنید و اگر به
1022
00:48:44,079 –> 00:48:46,210
عقب برگردیم، امیدواریم
1023
00:48:46,210 –> 00:48:48,849
همه چیز خوب باشد، بنابراین به آنجا می رسیم،
1024
00:48:48,849 –> 00:48:50,619
به چیزی که به شما نشان دادم نزدیک می شود،
1025
00:48:50,619 –> 00:48:52,480
اما تنها چیزی که کمی
1026
00:48:52,480 –> 00:48:55,930
متفاوت است، بخش CSS ما است که به
1027
00:48:55,930 –> 00:48:58,420
نوعی همه اینها را پوشش می دهد، خوب خوبی ایجاد می
1028
00:48:58,420 –> 00:49:01,900
کند- اگر میدانید آپلود فایل را میدانید،
1029
00:49:01,900 –> 00:49:04,060
قطعاً میتوانید ادامه دهید و از
1030
00:49:04,060 –> 00:49:07,770
آپلود فایل CSS استفاده کنید، میدانید که
1031
00:49:07,770 –> 00:49:10,119
سبکهای مختلف زیادی در وب وجود دارد که میتوانید
1032
00:49:10,119 –> 00:49:12,640
به سادگی ادامه دهید و از هر کدام که
1033
00:49:12,640 –> 00:49:15,310
دوست دارید استفاده کنید، اما من یکی را دارم که در
1034
00:49:15,310 –> 00:49:17,920
واقع شما میدانید که من آن را دانلود میکنم. از
1035
00:49:17,920 –> 00:49:21,460
وب و من خیلی خوب به نظر می رسد که می خواهم از آن استفاده
1036
00:49:21,460 –> 00:49:23,170
کنم، من آن را در اینجا به اشتراک می گذارم امیدوارم
1037
00:49:23,170 –> 00:49:25,150
دوست داشته باشید که کد در
1038
00:49:25,150 –> 00:49:26,920
قسمت توضیحات باشد، فقط می توانید
1039
00:49:26,920 –> 00:49:30,490
نگاهی به آن بیندازید و دقیقاً فایل CSS را دانلود
1040
00:49:30,490 –> 00:49:33,450
کنید بچه ها که من وارد کردم
1041
00:49:33,450 –> 00:49:36,190
upl اوه که فایل CSS را
1042
00:49:36,190 –> 00:49:38,200
از طریق این CSS آپلود می کنیم، شما به سادگی می
1043
00:49:38,200 –> 00:49:40,510
توانید آن را از مخزن من استفاده کنید یا
1044
00:49:40,510 –> 00:49:42,910
آدرس را در قسمت توضیحات
1045
00:49:42,910 –> 00:49:45,160
قرار دهید و کاملاً واضح است که شما بچه ها تا به حال می دانید که
1046
00:49:45,160 –> 00:49:47,200
چگونه ماژول ها و چیزها را به یک
1047
00:49:47,200 –> 00:49:49,650
برنامه React وارد کنید. اکنون از
1048
00:49:49,650 –> 00:49:53,410
وارد کردن نقطه آپلود CSS استفاده می کنم، اگر
1049
00:49:53,410 –> 00:49:56,250
نگاهی بیندازید وقتی آن ماژول را وارد کردیم، اکنون
1050
00:49:56,250 –> 00:49:59,530
منطقه آپلود ما متفاوت به نظر می رسد
1051
00:49:59,530 –> 00:50:02,170
، اساساً خوب و تمیز است و به
1052
00:50:02,170 –> 00:50:04,720
این معنی است که می توانیم ادامه دهیم و فایل خود را آپلود کنیم،
1053
00:50:04,720 –> 00:50:08,680
بیایید نگاهی به آن بیندازیم. فایل CSS
1054
00:50:08,680 –> 00:50:11,530
در واقع CSS بسیار آسان است، اما اجازه دهید
1055
00:50:11,530 –> 00:50:13,770
فقط برخی از حاشیهها و بالشتکها ایجاد کنیم،
1056
00:50:13,770 –> 00:50:16,450
به عنوان مثال، اگر رنگ سفید را حذف کنم
1057
00:50:16,450 –> 00:50:19,869
همانطور که میبینید، بخش حذف میشود،
1058
00:50:19,869 –> 00:50:22,240
اما ما از FFF استفاده میکنیم، کمی
1059
00:50:22,240 –> 00:50:25,720
شبیه خاکستری برای پسزمینه است، بنابراین اگر من
1060
00:50:25,720 –> 00:50:27,910
این بخش را حذف کردم اگر نگاهی
1061
00:50:27,910 –> 00:50:31,119
به اینجا بیندازید می گوید یا آن را به اینجا بکشید اگر
1062
00:50:31,119 –> 00:50:33,670
این بخش را حذف کنم می بینید که این بخش
1063
00:50:33,670 –> 00:50:38,170
در حال حذف شدن است و اگر به
1064
00:50:38,170 –> 00:50:40,930
بخش دیگری برگردم برای مثال اگر
1065
00:50:40,930 –> 00:50:46,660
این را حذف کنم می بینید که حذف می شود. که هفتم در
1066
00:50:46,660 –> 00:50:49,089
نماد، بنابراین این کاری که انجام می دهد این است که اساساً
1067
00:50:49,089 –> 00:50:52,839
آن را مطلق قرار می دهد،
1068
00:50:52,839 –> 00:50:56,260
کمی از فضای بالا نشان می دهد و
1069
00:50:56,260 –> 00:50:59,470
اساساً اندازه Icom را تنظیم می کنیم
1070
00:50:59,470 –> 00:51:02,560
و صفحه نمایش یک بلوک است بنابراین ما
1071
00:51:02,560 –> 00:51:04,780
در یک ردیف و پس زمینه با شما آشنا خواهیم شد.
1072
00:51:04,780 –> 00:51:06,730
علاوه بر صد آن و
1073
00:51:06,730 –> 00:51:08,770
آن نماد را تکرار نمی کند، بنابراین اساسا من فقط
1074
00:51:08,770 –> 00:51:13,260
این نماد را در وسط تعریف می کنم، بنابراین
1075
00:51:13,260 –> 00:51:17,550
این اساساً قرار دادن
1076
00:51:17,550 –> 00:51:21,940
آیتم فایل ها به درستی است و این قسمت اگر
1077
00:51:21,940 –> 00:51:25,510
حذفش کنم و همانطور که می بینید بیایید اضافه
1078
00:51:25,510 –> 00:51:27,580
کنیم. همانطور که می بینید
1079
00:51:27,580 –> 00:51:30,460
من یک حاشیه در اطراف دارم و فوکوس شده است
1080
00:51:30,460 –> 00:51:33,940
و برای اندازه ورودی اگر آن را حذف کنم همانطور
1081
00:51:33,940 –> 00:51:35,650
که می بینید این اساساً
1082
00:51:35,650 –> 00:51:38,140
کل بخش است که ایجاد می کند
1083
00:51:38,140 –> 00:51:41,800
و متن را با مرکز تراز می کند vid برابر با
1084
00:51:41,800 –> 00:51:45,760
100 است. ٪ هیچ حاشیه ای وجود ندارد و من
1085
00:51:45,760 –> 00:51:49,359
اساساً آن را خط تیره می کنم زیرا می توانید مانند
1086
00:51:49,359 –> 00:51:52,390
سبک سبز در اطراف این قسمت ببینید، بنابراین این
1087
00:51:52,390 –> 00:51:56,109
اساساً یک فایل CSS یک ظاهر طراحی ساده است،
1088
00:51:56,109 –> 00:51:58,750
امیدوارم بچه ها CSS را درک کنید، اگر نه می
1089
00:51:58,750 –> 00:52:00,640
توانید به سادگی از این فایل استفاده کنید یا هر
1090
00:52:00,640 –> 00:52:03,040
استایلی را از اینترنت پیدا کنید. در واقع
1091
00:52:03,040 –> 00:52:05,619
بسیار آسان است درک می کنم اگر سوالی دارید به من اطلاع دهید
1092
00:52:05,619 –> 00:52:07,180
من نمی خواهم
1093
00:52:07,180 –> 00:52:09,099
زمان زیادی را روی این استایل CSS تلف
1094
00:52:09,099 –> 00:52:11,310
کنم، فقط می خواهم به شما نشان دهم که چگونه این
1095
00:52:11,310 –> 00:52:15,820
کار انجام می شود، بنابراین در حال پردازش سند ما
1096
00:52:15,820 –> 00:52:19,150
با این شخص و تا می توانید کار خواهیم کرد. ببینید که
1097
00:52:19,150 –> 00:52:21,250
ما آپلود را داریم، میتوانیم روی آن کلیک کنیم،
1098
00:52:21,250 –> 00:52:23,530
میتوانیم فایلی را انتخاب کنیم که حاوی فایل نمونه
1099
00:52:23,530 –> 00:52:26,320
است و امیدواریم پس از ارسال
1100
00:52:26,320 –> 00:52:29,349
مجدد آن به API در دروازه تگ
1101
00:52:29,349 –> 00:52:31,869
، مقداری از مقادیر را در ازای آن دریافت کنیم،
1102
00:52:31,869 –> 00:52:34,570
بنابراین کار شما تقریباً تمام شده است. قسمت
1103
00:52:34,570 –> 00:52:36,730
جلویی من می دانم که ما به منوی نیاز داریم تا
1104
00:52:36,730 –> 00:52:38,560
بتوانیم این بسیار زیبا به نظر برسد، اما می
1105
00:52:38,560 –> 00:52:40,990
خواهم روی خدمات پشتیبان تمرکز
1106
00:52:40,990 –> 00:52:43,540
کنم، این فقط یک واکنش بود، اما
1107
00:52:43,540 –> 00:52:46,060
اساساً
1108
00:52:46,060 –> 00:52:48,670
برای دریافت و کار با آن تماس ناهمزمان به دروازه API صادر می کنم
1109
00:52:48,670 –> 00:52:50,890
. خدمات پایانی ما هنوز
1110
00:52:50,890 –> 00:52:53,170
با واکنش به پایان نرسیدهایم، اما از نظر استایلسازی و
1111
00:52:53,170 –> 00:52:55,450
ساختن این فرم به اندازه کافی برای برنامهمان خوب به
1112
00:52:55,450 –> 00:52:57,460
نظر برسد، تا
1113
00:52:57,460 –> 00:52:59,349
این مرحله تمام شدهایم، اجازه دهید اکنون روی
1114
00:52:59,349 –> 00:53:01,240
آن سرویسهای بکاند تمرکز کنیم و امیدواریم در
1115
00:53:01,240 –> 00:53:03,609
پایان ما این برنامه
1116
00:53:03,609 –> 00:53:07,450
react را به دروازه API متصل کنید y از طریق دروازه API ما از
1117
00:53:07,450 –> 00:53:10,720
آن تصویر base64 به تابع لامبدا ما گذشته است
1118
00:53:10,720 –> 00:53:13,329
و لامبدا یک ستاره خواهد بود که اساساً
1119
00:53:13,329 –> 00:53:16,479
تصویر را به خوبی در آمازون s3 با
1120
00:53:16,479 –> 00:53:18,400
استفاده از گیت لامبدا و API ذخیره می کنیم، ما
1121
00:53:18,400 –> 00:53:20,849
اساساً در حال ساخت یک
1122
00:53:20,849 –> 00:53:23,019
برنامه بدون سرور بودیم زیرا اگر
1123
00:53:23,019 –> 00:53:24,849
هیچ ترافیکی دریافت نمی کنید، چیزی نیست. در
1124
00:53:24,849 –> 00:53:26,680
حال برنامهریزی است که برای هیچ چیزی پولی نمیپردازید که
1125
00:53:26,680 –> 00:53:28,719
هیچکس برای نگهداری از سروری نیاز
1126
00:53:28,719 –> 00:53:31,150
ندارد، آمازون اساساً
1127
00:53:31,150 –> 00:53:33,479
کد ما را زیر لایه
1128
00:53:33,479 –> 00:53:36,219
1129
00:53:36,219 –> 00:53:38,259
1130
00:53:38,259 –> 00:53:40,799
اجرا میکند.
1131
00:53:40,799 –> 00:53:43,180
در منطقه کالیفرنیای شمالی کار میکند
1132
00:53:43,180 –> 00:53:45,609
و ما یکی را که در آن نوشته شده
1133
00:53:45,609 –> 00:53:47,890
است از ابتدا انتخاب میکنیم، زیرا
1134
00:53:47,890 –> 00:53:50,619
باید همه چیز را از ابتدا ایجاد کنیم.
1135
00:53:50,619 –> 00:53:53,079
1136
00:53:53,079 –> 00:53:56,799
1137
00:53:56,799 –> 00:53:58,839
نقشه ها و البته
1138
00:53:58,839 –> 00:54:01,450
آنها یک مخزن دارند که می توانید اساساً
1139
00:54:01,450 –> 00:54:04,599
به پایه های کد مختلف نگاهی بیندازید،
1140
00:54:04,599 –> 00:54:06,430
اما چیزی که ما می خواهیم بسازیم
1141
00:54:06,430 –> 00:54:09,789
در واقع آپلود یک base64 است. تصویر
1142
00:54:09,789 –> 00:54:12,400
از برنامه react ما به s3 بیایید
1143
00:54:12,400 –> 00:54:15,279
یک تابع ایجاد سریع ایجاد کنیم خوب
1144
00:54:15,279 –> 00:54:17,200
تابع ما آماده است که به آن آپلود
1145
00:54:17,200 –> 00:54:20,529
تصویر می گویند. اساساً این را وصل خواهیم کرد
1146
00:54:20,529 –> 00:54:22,420
زیرا می بینید که یک ماشه خالی است
1147
00:54:22,420 –> 00:54:26,140
زیرا ما این
1148
00:54:26,140 –> 00:54:29,170
تصویر آپلود را به دروازه API خود وصل نکرده ایم. بنابراین ما
1149
00:54:29,170 –> 00:54:32,079
از دروازه API به لامبدا و از
1150
00:54:32,079 –> 00:54:34,029
لامبدا به مقصدی میرویم
1151
00:54:34,029 –> 00:54:40,119
که آمازون s3 ما خواهد بود، بنابراین در اینجا همانطور که
1152
00:54:40,119 –> 00:54:43,719
میبینید من اساساً عملکردی دارم که
1153
00:54:43,719 –> 00:54:47,890
یک کنترلکننده نقطه شاخص را صادر میکند همانطور که
1154
00:54:47,890 –> 00:54:49,900
میبینید قرار است صادر شود. این و
1155
00:54:49,900 –> 00:54:52,239
اساساً شامل یک
1156
00:54:52,239 –> 00:54:56,289
کد موفقیت 200 است و یک json stringify که
1157
00:54:56,289 –> 00:54:58,420
اساساً برمیگرداند، یک رشته برای
1158
00:54:58,420 –> 00:55:00,880
هر کسی که این تابع را فراخوانی میکند وجود دارد، بنابراین من میخواهم آن
1159
00:55:00,880 –> 00:55:03,670
را با تابعی جایگزین کنم
1160
00:55:03,670 –> 00:55:05,859
که در اینجا آماده
1161
00:55:05,859 –> 00:55:08,229
کردهام. من دقیقاً به شما می
1162
00:55:08,229 –> 00:55:10,449
گویم که این تابع چه کاری انجام می دهد، بنابراین در
1163
00:55:10,449 –> 00:55:13,839
خط اول من یک ثابت
1164
00:55:13,839 –> 00:55:16,420
1165
00:55:16,420 –> 00:55:19,569
دارم که به این AWS SDK نیاز دارد.
1166
00:55:19,569 –> 00:55:23,109
1167
00:55:23,109 –> 00:55:26,720
شما عملکردهای مختلفی را می شناسید، بنابراین
1168
00:55:26,720 –> 00:55:28,460
در برنامه