1 00:00:01,060 --> 00:00:03,293 ‫Instruktur: Sekarang mari kita selesaikan 2 00:00:03,293 --> 00:00:05,413 ‫bagian fungsi login ini. 3 00:00:06,980 --> 00:00:09,300 ‫Dan ingat bagaimana saya mengatakan 4 00:00:09,300 --> 00:00:11,790 ‫bahwa dalam video ini saya ingin menerapkan 5 00:00:11,790 --> 00:00:15,010 ‫peringatan yang sangat bagus ketika pengguna berhasil masuk, dan 6 00:00:16,450 --> 00:00:19,210 ‫untuk melihatnya mari kita keluarkan pengguna untuk saat 7 00:00:19,210 --> 00:00:21,663 ‫ini dengan menghapus cookie secara manual. 8 00:00:22,700 --> 00:00:24,760 ‫Mari kita muat ulang, dan sekarang 9 00:00:24,760 --> 00:00:26,883 ‫tentu saja pengguna tidak boleh masuk 10 00:00:28,840 --> 00:00:30,720 ‫lagi, dan memang tidak. 11 00:00:30,720 --> 00:00:33,120 ‫Seperti yang sudah kita ketahui, itu karena 12 00:00:33,120 --> 00:00:35,410 ‫cookie tidak dikirim dalam permintaan. 13 00:00:35,410 --> 00:00:37,790 ‫Jadi ada login middleware yang kami buat 14 00:00:37,790 --> 00:00:39,050 ‫di video terakhir 15 00:00:39,050 --> 00:00:42,840 ‫tidak menempatkan objek pengguna menjadi respons. penduduk setempat, ingat 16 00:00:42,840 --> 00:00:44,320 ‫itu? 17 00:00:44,320 --> 00:00:47,810 ‫Jadi jika tidak ada, manual pengguna tidak akan di-render, dan 18 00:00:47,810 --> 00:00:50,650 ‫sebagai gantinya bagian ini di-render sehingga kita sekarang 19 00:00:50,650 --> 00:00:53,367 ‫bisa klik di sini di Log In. 20 00:00:53,367 --> 00:00:56,920 ‫Jadi peringatan yang saya bicarakan sebelum saya ingin itu muncul 21 00:00:56,920 --> 00:00:59,760 ‫di sini pada dasarnya di awal dan kemudian 22 00:00:59,760 --> 00:01:01,470 ‫setelah satu setengah detik 23 00:01:01,470 --> 00:01:04,000 ‫kami masih ingin melakukan reload itu. 24 00:01:04,000 --> 00:01:07,610 ‫Jadi pindah ke beranda utama. 25 00:01:07,610 --> 00:01:09,550 ‫Pokoknya mari kita buat 26 00:01:09,550 --> 00:01:13,800 ‫beberapa fungsi untuk peringatan ini di file terpisah lainnya. 27 00:01:13,800 --> 00:01:14,983 ‫Jadi file baru, 28 00:01:16,607 --> 00:01:18,853 ‫waspada. js. 29 00:01:20,210 --> 00:01:23,320 ‫Baiklah, tapi sekarang sebelum kita benar-benar dapat melanjutkan, kita 30 00:01:23,320 --> 00:01:24,510 ‫perlu berpikir sedikit 31 00:01:24,510 --> 00:01:26,890 ‫tentang arsitektur front-end kita di sini. 32 00:01:26,890 --> 00:01:30,070 ‫Kursus ini, tentu saja, bukan tentang front-end, tetapi 33 00:01:30,070 --> 00:01:32,470 ‫setidaknya kita perlu sedikit peduli tentangnya 34 00:01:32,470 --> 00:01:34,170 ‫di sini, karena 35 00:01:34,170 --> 00:01:36,080 ‫kita benar-benar mulai mendapatkan 36 00:01:36,080 --> 00:01:38,130 ‫sejumlah besar file di sini, 37 00:01:38,130 --> 00:01:40,420 ‫dan termasuk semuanya ke halaman 38 00:01:40,420 --> 00:01:42,550 ‫kami bukanlah praktik yang baik. 39 00:01:42,550 --> 00:01:43,383 ‫Jadi seperti 40 00:01:44,770 --> 00:01:46,700 ‫yang telah kita lakukan di sini. 41 00:01:46,700 --> 00:01:48,710 ‫Jadi ini bukan praktik yang baik. 42 00:01:48,710 --> 00:01:51,200 ‫Kita seharusnya hanya memiliki satu file JavaScript 43 00:01:51,200 --> 00:01:53,340 ‫besar yang mencakup semua kode. 44 00:01:53,340 --> 00:01:56,000 ‫Jadi dalam pengembangan front-end JavaScript modern, 45 00:01:56,000 --> 00:01:59,150 ‫kami biasanya menggunakan sesuatu yang disebut modul bundler. 46 00:01:59,150 --> 00:02:02,210 ‫Yang paling populer mungkin masih Webpack, tetapi 47 00:02:02,210 --> 00:02:04,700 ‫biasanya Webpack memberi kita banyak masalah 48 00:02:04,700 --> 00:02:07,140 ‫dan sangat merepotkan untuk mengaturnya. 49 00:02:07,140 --> 00:02:11,380 ‫Jadi sebenarnya ada anak baru yang sangat baik di blok 50 00:02:11,380 --> 00:02:13,930 ‫ini, bisa dikatakan, yang disebut Parcel. 51 00:02:13,930 --> 00:02:18,930 ‫Jadi kita akan lihat itu, lihat apakah itu sudah muncul, 52 00:02:19,680 --> 00:02:21,870 ‫dan memang, itu dia. 53 00:02:21,870 --> 00:02:26,490 ‫Sangat cepat, tanpa bundler aplikasi web konfigurasi. 54 00:02:26,490 --> 00:02:29,080 ‫Jadi itulah yang kami cari. 55 00:02:29,080 --> 00:02:31,790 ‫Cukup bundler yang tidak memerlukan konfigurasi 56 00:02:31,790 --> 00:02:34,240 ‫yang rumit, karena kami tidak ingin 57 00:02:34,240 --> 00:02:36,340 ‫membuang waktu dengan itu. 58 00:02:37,470 --> 00:02:41,753 ‫Baiklah, jadi mari kita lanjutkan dan menginstalnya di sini. 59 00:02:42,940 --> 00:02:44,340 ‫Jadi npm install dan 60 00:02:46,010 --> 00:02:48,603 ‫saya tidak yakin apakah itu hanya Parcel sebenarnya. 61 00:02:50,180 --> 00:02:51,013 ‫Jadi mari 62 00:02:52,509 --> 00:02:53,459 ‫kita kembali ke sini. 63 00:02:55,860 --> 00:02:58,963 ‫Mungkin itu Parcel. js atau sesuatu, 64 00:02:59,820 --> 00:03:02,810 ‫karena saya ingat terakhir kali saya 65 00:03:02,810 --> 00:03:06,850 ‫menginstalnya tidak langsung berfungsi, jadi mari kita periksa itu. 66 00:03:06,850 --> 00:03:08,993 ‫Ya, memang, itu Parcel-bundler. 67 00:03:18,370 --> 00:03:20,300 ‫Sekarang kami mendapat beberapa kesalahan. 68 00:03:20,300 --> 00:03:25,300 ‫Oke, jadi saya lupa menyimpannya sebagai ketergantungan dev. 69 00:03:27,070 --> 00:03:30,810 ‫Jadi kami sebenarnya menginginkannya sebagai pengembang simpanan, oke, dan 70 00:03:30,810 --> 00:03:33,910 ‫itu karena ini adalah alat pengembangan. 71 00:03:33,910 --> 00:03:35,483 ‫Sekarang masih ada yang tidak beres. 72 00:03:39,640 --> 00:03:41,313 ‫Biarkan saya mencobanya dengan Sudo di sini. 73 00:03:50,150 --> 00:03:52,790 ‫Jadi jika itu tidak berhasil dalam 74 00:03:52,790 --> 00:03:56,943 ‫kasus Anda, gunakan saja Sudo untuk mendapatkan izin yang tepat. 75 00:04:03,360 --> 00:04:05,910 ‫Baiklah, jadi mari kita lihat paket kami. json 76 00:04:07,060 --> 00:04:11,140 ‫dan memang ini dia, oke. 77 00:04:11,140 --> 00:04:12,620 ‫Sekarang jika Anda 78 00:04:12,620 --> 00:04:14,810 ‫menonton video ini beberapa saat setelah saya 79 00:04:14,810 --> 00:04:17,550 ‫merekamnya, mereka mungkin sudah beralih ke versi nomor dua 80 00:04:18,550 --> 00:04:20,200 ‫dan seperti yang telah kita 81 00:04:20,200 --> 00:04:22,370 ‫ketahui mungkin memperkenalkan beberapa perubahan yang melanggar. 82 00:04:22,370 --> 00:04:25,840 ‫Dan seterusnya dari titik ini jika Anda mendapatkan kesalahan yang tidak 83 00:04:25,840 --> 00:04:27,740 ‫Anda lihat di sini dalam 84 00:04:27,740 --> 00:04:30,940 ‫video, silakan lanjutkan dan instal paket ini di sini menggunakan 85 00:04:30,940 --> 00:04:32,533 ‫versi . 86 00:04:33,590 --> 00:04:34,750 ‫1, oke. 87 00:04:34,750 --> 00:04:35,860 ‫Jadi pada 88 00:04:38,610 --> 00:04:41,650 ‫dasarnya tambahkan satu seperti ini, oke. 89 00:04:41,650 --> 00:04:45,630 ‫Jadi ini kemudian membuat Anda mengalami kesalahan aneh ini dan 90 00:04:45,630 --> 00:04:48,100 ‫semoga itu juga menyelamatkan saya dari 91 00:04:48,100 --> 00:04:50,110 ‫banyak komentar negatif atau ulasan 92 00:04:50,110 --> 00:04:54,330 ‫negatif yang mengharapkan saya untuk memperbarui semua video saya setiap minggu 93 00:04:54,330 --> 00:04:57,640 ‫hanya karena beberapa alat diperbarui, dan tentu saja 94 00:04:57,640 --> 00:04:59,560 ‫itu tidak mungkin. 95 00:04:59,560 --> 00:05:01,330 ‫Sering kali solusi 96 00:05:01,330 --> 00:05:03,790 ‫termudah adalah dengan menggunakan versi yang 97 00:05:03,790 --> 00:05:07,030 ‫sama seperti yang saya gunakan di video, oke. 98 00:05:07,030 --> 00:05:10,420 ‫Bagaimanapun, sekarang untuk benar-benar menggunakan Parcel mari 99 00:05:10,420 --> 00:05:12,973 ‫tambahkan beberapa skrip di sini. 100 00:05:15,410 --> 00:05:19,053 ‫Jadi saya menambahkan satu untuk ditonton atau JavaScript. 101 00:05:20,890 --> 00:05:22,400 ‫Oke, dan untuk 102 00:05:24,380 --> 00:05:26,443 ‫itu saya menggunakan perintah Parcel watch. 103 00:05:28,100 --> 00:05:31,250 ‫Ini sebenarnya sudah berjalan dengan baik di luar kotak, 104 00:05:31,250 --> 00:05:33,810 ‫tetapi saya masih ingin mengonfigurasi sedikit, karena 105 00:05:33,810 --> 00:05:36,890 ‫jika tidak, itu akan menempatkan saya bundel terakhir di 106 00:05:36,890 --> 00:05:39,270 ‫beberapa folder yang tidak saya inginkan. 107 00:05:39,270 --> 00:05:44,270 ‫Jadi mari kita tentukan folder mana yang sebenarnya harus dilihat. 108 00:05:45,920 --> 00:05:50,920 ‫Jadi itu publik/JavaScript dan kemudian index. js, jadi itulah titik masuk kita dan 109 00:05:52,670 --> 00:05:54,190 ‫itulah file yang 110 00:05:54,190 --> 00:05:56,490 ‫akan kita buat dalam hitungan detik. 111 00:05:56,490 --> 00:05:57,350 ‫Oke. 112 00:05:57,350 --> 00:05:59,670 ‫Maka direktori keluaran juga harus menjadi 113 00:06:03,432 --> 00:06:05,237 ‫publik. 114 00:06:06,980 --> 00:06:07,900 ‫js, oke. 115 00:06:07,900 --> 00:06:09,700 ‫Sering kali Anda akan 116 00:06:09,700 --> 00:06:12,330 ‫memiliki folder yang berbeda untuk pengembangan dan 117 00:06:12,330 --> 00:06:15,550 ‫untuk output, tetapi dalam kasus ini karena arsitekturnya sangat 118 00:06:15,550 --> 00:06:18,400 ‫sederhana, saya akan meletakkan file bundel tepat di 119 00:06:18,400 --> 00:06:20,550 ‫tempat yang sama dengan file pengembangan. 120 00:06:20,550 --> 00:06:23,000 ‫Baiklah, mari kita tentukan juga file 121 00:06:25,102 --> 00:06:25,935 ‫output 122 00:06:26,860 --> 00:06:32,600 ‫dan itu harus dibundel. js, baiklah. 123 00:06:32,600 --> 00:06:35,750 ‫Jadi sekarang saya dapat menjalankan ini dan kemudian akan 124 00:06:35,750 --> 00:06:39,430 ‫melihat file ini di sini dan melihat apakah ada sesuatu yang 125 00:06:39,430 --> 00:06:41,330 ‫berubah atau di salah satu 126 00:06:41,330 --> 00:06:43,110 ‫dependensi dan kapan pun 127 00:06:43,110 --> 00:06:45,260 ‫itu terjadi, ia akan menggabungkan semua file 128 00:06:45,260 --> 00:06:49,090 ‫bersama-sama lagi ke dalam bundel ini. file js, baiklah. 129 00:06:49,090 --> 00:06:50,610 ‫Kemudian mari 130 00:06:50,610 --> 00:06:53,720 ‫kita juga menduplikasi ini, karena kita juga 131 00:06:53,720 --> 00:06:56,820 ‫ingin final, katakanlah versi produksi, oke. 132 00:06:56,820 --> 00:06:59,040 ‫Jadi yang ini kita akan menjalankan yang 133 00:06:59,040 --> 00:07:01,100 ‫di mana mereka benar-benar selesai, oke. 134 00:07:01,100 --> 00:07:03,450 ‫Jadi itu membutuhkan waktu sedikit lebih lama, 135 00:07:03,450 --> 00:07:06,630 ‫tetapi juga melakukan sedikit lebih banyak hal pengoptimalan, tetapi tentu 136 00:07:06,630 --> 00:07:08,710 ‫saja kita tidak memerlukan pengembangan. 137 00:07:08,710 --> 00:07:12,130 ‫Dalam pengembangan seperti biasa, kami hanya ingin itu berhasil. 138 00:07:12,130 --> 00:07:14,090 ‫Jadi mari kita lakukan npm 139 00:07:15,970 --> 00:07:20,030 ‫run watch:js, tetapi sebelum kita melakukannya, mari kita buat file 140 00:07:20,980 --> 00:07:22,473 ‫index. js. 141 00:07:23,370 --> 00:07:25,320 ‫Mari kita tutup beberapa folder ini di sini. 142 00:07:26,170 --> 00:07:28,283 ‫Agak terlalu membingungkan seperti ini. 143 00:07:31,340 --> 00:07:34,890 ‫Jadi indeks. js dan mari kita lakukan 144 00:07:36,640 --> 00:07:38,403 ‫konsol sederhana. log di sini untuk saat ini. 145 00:07:39,670 --> 00:07:41,503 ‫Halo dari Parcel, 146 00:07:42,460 --> 00:07:43,293 ‫baiklah. 147 00:07:45,480 --> 00:07:47,510 ‫Kemudian mari kita juga pergi ke 148 00:07:47,510 --> 00:07:50,940 ‫basis kita di sini dan kemudian kita akan benar-benar mengomentari 149 00:07:50,940 --> 00:07:52,140 ‫semua ini dan 150 00:07:53,810 --> 00:07:55,163 ‫hanya menyertakan file bundel. 151 00:07:57,720 --> 00:08:01,790 ‫Jadi sekali lagi, satu file yang pada dasarnya akan berisi semua 152 00:08:01,790 --> 00:08:04,000 ‫kode yang ada di semua file 153 00:08:04,000 --> 00:08:05,533 ‫lain dan semua dependensinya. 154 00:08:06,910 --> 00:08:10,860 ‫Jadi mari kita simpan, dan sekarang mari kita jalankan ini, lihat apa yang kita 155 00:08:10,860 --> 00:08:12,033 ‫dapatkan di sana. 156 00:08:12,980 --> 00:08:17,170 ‫Dan memang, kami mendapat file baru kami, yaitu bundel. js dan ia 157 00:08:17,170 --> 00:08:21,000 ‫memiliki semua kumpulan kode ini di sana, 158 00:08:21,000 --> 00:08:25,663 ‫oke, cukup untuk satu baris kode pada saat ini. 159 00:08:26,820 --> 00:08:29,203 ‫Tapi bagaimanapun mari kita reload halaman kita 160 00:08:31,510 --> 00:08:33,840 ‫di sini, dan halo dari Parcel. 161 00:08:33,840 --> 00:08:38,140 ‫Jadi itu berhasil, dan sekarang mari kita lanjutkan dan benar-benar 162 00:08:38,140 --> 00:08:40,343 ‫menyiapkan file ini di sini. 163 00:08:42,200 --> 00:08:44,980 ‫Jadi untuk menghindari kebingungan, mari kita tutup file-file ini 164 00:08:44,980 --> 00:08:47,180 ‫yang tidak lagi kita perlukan untuk apa 165 00:08:47,180 --> 00:08:48,923 ‫yang sedang kita lakukan sekarang. 166 00:08:51,320 --> 00:08:52,570 ‫Jadi itu banyak hal. 167 00:08:54,340 --> 00:08:56,900 ‫Baiklah, yang ini juga. 168 00:08:56,900 --> 00:09:00,560 ‫Jadi sekarang ide dasarnya adalah bahwa index. File js adalah file 169 00:09:00,560 --> 00:09:02,930 ‫entri kami, jadi dalam file ini 170 00:09:02,930 --> 00:09:05,500 ‫kami tidak bisa mendapatkan data dari antarmuka 171 00:09:05,500 --> 00:09:08,400 ‫pengguna dan kemudian kami mendelegasikan tindakan ke beberapa 172 00:09:08,400 --> 00:09:11,960 ‫fungsi yang berasal dari modul lain di sini pada dasarnya. 173 00:09:11,960 --> 00:09:13,870 ‫Jadi kita sekarang memiliki modul login, 174 00:09:13,870 --> 00:09:15,830 ‫kita memiliki modul alert, dan seperti 175 00:09:15,830 --> 00:09:17,950 ‫di Node.js. js sekarang 176 00:09:17,950 --> 00:09:21,920 ‫kita sebenarnya dapat mengekspor data dari modul-modul ini. 177 00:09:21,920 --> 00:09:24,550 ‫Jadi mari kita lakukan itu, dan yang ingin saya 178 00:09:24,550 --> 00:09:26,440 ‫ekspor adalah fungsi ini di sini. 179 00:09:26,440 --> 00:09:28,030 ‫Sekarang ini bekerja sedikit berbeda dari 180 00:09:28,030 --> 00:09:30,200 ‫bekerja dengan Node.js. js 181 00:09:30,200 --> 00:09:33,160 ‫karena Node.js js menggunakan sesuatu 182 00:09:33,160 --> 00:09:35,040 ‫yang disebut CommonJS untuk mengimplementasikan modul. 183 00:09:35,040 --> 00:09:36,510 ‫Saya tidak yakin 184 00:09:36,510 --> 00:09:38,600 ‫apakah saya menyebutkannya ketika kami pertama 185 00:09:38,600 --> 00:09:43,520 ‫kali berbicara tentang modul, tetapi di sini di JavaScript front-end sejak ES2015 atau 186 00:09:43,520 --> 00:09:47,000 ‫ES6 ada sesuatu yang disebut modul dalam JavaScript juga. 187 00:09:47,000 --> 00:09:48,720 ‫Sintaksnya sedikit berbeda, tetapi 188 00:09:48,720 --> 00:09:51,150 ‫sebenarnya cara kerjanya di belakang layar, tetapi 189 00:09:51,150 --> 00:09:54,470 ‫sebenarnya jika Anda memahami cara kerjanya dengan CommonJS maka 190 00:09:54,470 --> 00:09:57,060 ‫yang ini di sini akan sangat mirip. 191 00:09:57,060 --> 00:10:00,740 ‫Jadi modul ES6 menggunakan sintaks ekspor impor. 192 00:10:00,740 --> 00:10:04,070 ‫Jadi di sini yang perlu kita lakukan adalah mengatakan ekspor 193 00:10:05,120 --> 00:10:08,430 ‫dan kemudian apa pun yang ingin kita ekspor dari file 194 00:10:08,430 --> 00:10:10,110 ‫ini, dan hanya itu. 195 00:10:10,110 --> 00:10:13,170 ‫Sekarang potongan kode ini di sini kita akan 196 00:10:13,170 --> 00:10:15,100 ‫benar-benar menggunakannya dalam file indeks. 197 00:10:15,100 --> 00:10:17,720 ‫Jadi ingat bagaimana saya mengatakan bahwa file ini 198 00:10:17,720 --> 00:10:20,630 ‫di sini lebih untuk benar-benar mendapatkan data dari antarmuka 199 00:10:20,630 --> 00:10:22,420 ‫pengguna dan kemudian mendelegasikan tindakan. 200 00:10:22,420 --> 00:10:26,203 ‫Jadi itulah yang kami lakukan di sini, oke. 201 00:10:27,490 --> 00:10:30,320 ‫Jadi di sini kita hanya memiliki modul semacam 202 00:10:30,320 --> 00:10:32,950 ‫ini yang kemudian mengekspor fungsi login. 203 00:10:32,950 --> 00:10:35,350 ‫Kemudian kita dapat mengimpornya di sini dan memanggil 204 00:10:36,370 --> 00:10:39,700 ‫login di sini di index. js dan 205 00:10:39,700 --> 00:10:41,620 ‫itu berfungsi seperti ini. 206 00:10:41,620 --> 00:10:44,210 ‫Jadi impor alih-alih mengharuskan 207 00:10:44,210 --> 00:10:47,690 ‫lalu nama variabel yang ingin kita impor. 208 00:10:47,690 --> 00:10:49,283 ‫Jadi saya menggunakan kurung kurawal di sini. 209 00:10:50,466 --> 00:10:51,960 ‫Jadi itu disebut 210 00:10:55,420 --> 00:10:57,970 ‫login dan kemudian dari nama file. 211 00:10:57,970 --> 00:11:01,493 ‫Yang dalam hal ini, direktori yang sama, login. 212 00:11:03,080 --> 00:11:06,363 ‫Sekarang mari kita juga menonaktifkan eslint di sini lagi, dan saya 213 00:11:10,730 --> 00:11:13,570 ‫menggunakan kurung kurawal ini di sini, pada dasarnya karena 214 00:11:13,570 --> 00:11:16,840 ‫kita melakukan ekspor dengan cara ini, tetapi ada juga sesuatu 215 00:11:16,840 --> 00:11:20,070 ‫yang mirip dengan module. ekspor yang 216 00:11:20,070 --> 00:11:22,140 ‫merupakan jenis ekspor default. 217 00:11:22,140 --> 00:11:26,780 ‫Jadi dalam modul ES6 sebenarnya disebut ekspor default. 218 00:11:26,780 --> 00:11:30,320 ‫Jadi dalam hal ini kita tidak akan membutuhkan kurung kurawal ini. 219 00:11:30,320 --> 00:11:31,153 ‫Oke. 220 00:11:31,153 --> 00:11:33,750 ‫Sekarang kita perlu melakukannya seperti 221 00:11:33,750 --> 00:11:37,200 ‫ini, karena itu nama fungsi yang kita 222 00:11:37,200 --> 00:11:39,110 ‫ekspor, oke. 223 00:11:39,110 --> 00:11:42,860 ‫Sekarang sesuatu yang sangat penting juga dalam login ini adalah 224 00:11:42,860 --> 00:11:44,350 ‫kita menggunakan axios. 225 00:11:44,350 --> 00:11:47,250 ‫Dan ingat bagaimana saya mengatakan bahwa 226 00:11:47,250 --> 00:11:51,040 ‫kami akan menginstalnya sebenarnya dari npm sebagai modul npm, bukan? 227 00:11:51,040 --> 00:11:54,340 ‫Jadi mari kita lakukan sekarang, dan sebenarnya karena kita 228 00:11:54,340 --> 00:11:56,660 ‫sudah mengomentari aksioma dari sini. 229 00:11:56,660 --> 00:11:59,560 ‫Jadi saat ini login tidak bisa menggunakan axios. 230 00:11:59,560 --> 00:12:03,060 ‫Yah karena kami tidak lagi memasukkannya di sini. 231 00:12:03,060 --> 00:12:06,070 ‫Jadi mari kita tambahkan, buka terminal baru dan 232 00:12:06,070 --> 00:12:08,903 ‫instal axios ke dalam proyek kita. 233 00:12:18,310 --> 00:12:23,280 ‫Kemudian sekarang yang perlu kita lakukan adalah mengatakan import axios from 234 00:12:25,830 --> 00:12:27,773 ‫axios, dan hanya itu, 235 00:12:29,290 --> 00:12:30,260 ‫baiklah. 236 00:12:30,260 --> 00:12:33,900 ‫Jadi file ini, setidaknya untuk saat ini, sudah 237 00:12:33,900 --> 00:12:36,530 ‫selesai tetapi jangan ditutup karena kita 238 00:12:36,530 --> 00:12:38,540 ‫masih akan membutuhkannya segera. 239 00:12:38,540 --> 00:12:42,020 ‫Selanjutnya kita sebenarnya juga harus menginstal polyfill, yang akan membuat 240 00:12:42,020 --> 00:12:44,420 ‫beberapa fitur JavaScript yang lebih baru 241 00:12:44,420 --> 00:12:47,120 ‫juga berfungsi di browser yang lebih lama. 242 00:12:47,120 --> 00:12:50,360 ‫Jadi katakanlah npm install dan yang ini 243 00:12:50,360 --> 00:12:52,850 ‫di sini terlihat agak aneh. 244 00:12:52,850 --> 00:12:57,850 ‫Jadi mari kita tambahkan babel/polyfill, seperti 245 00:12:57,980 --> 00:12:59,240 ‫ini. 246 00:12:59,240 --> 00:13:01,370 ‫Kemudian sampai disini kita 247 00:13:02,600 --> 00:13:03,433 ‫akan 248 00:13:06,180 --> 00:13:09,070 ‫melakukan import seperti ini, baiklah. 249 00:13:09,070 --> 00:13:12,290 ‫Jadi yang ini disini kita tidak menyimpannya ke variabel apapun, karena 250 00:13:12,290 --> 00:13:14,200 ‫itu tidak perlu sama sekali. 251 00:13:14,200 --> 00:13:17,640 ‫Yang kami ingin lakukan adalah pada dasarnya dimasukkan 252 00:13:17,640 --> 00:13:20,840 ‫ke dalam bundel terakhir kami untuk melakukan polyfill 253 00:13:20,840 --> 00:13:23,337 ‫dengan baik beberapa fitur JavaScript. 254 00:13:23,337 --> 00:13:26,320 ‫Baiklah, dan karena itu juga mengapa ini ada 255 00:13:26,320 --> 00:13:29,220 ‫di baris pertama dari impor ini. 256 00:13:29,220 --> 00:13:33,960 ‫Bagaimanapun, sekarang mari kita impor kotak peta ini juga. 257 00:13:33,960 --> 00:13:36,800 ‫Untuk itu kita harus terlebih dahulu 258 00:13:36,800 --> 00:13:40,640 ‫membuat fungsi yang akan melakukan semua hal ini di sini. 259 00:13:40,640 --> 00:13:41,790 ‫Oke. 260 00:13:41,790 --> 00:13:43,190 ‫Jadi mari kita 261 00:13:45,450 --> 00:13:46,283 ‫buat 262 00:13:50,660 --> 00:13:54,363 ‫export displayMap, yang akan mengambil array lokasi. 263 00:13:55,620 --> 00:14:02,290 ‫Sehingga nantinya akan benar-benar terbaca di index. file js, baiklah. 264 00:14:02,290 --> 00:14:06,510 ‫Jadi sekali lagi, indeks. js lebih untuk mendapatkan 265 00:14:06,510 --> 00:14:09,030 ‫data dari antarmuka pengguna, jadi dari 266 00:14:09,030 --> 00:14:13,110 ‫situs web, dan kemudian mendelegasikan beberapa tindakan ke modul lain 267 00:14:13,110 --> 00:14:14,230 ‫ini, oke. 268 00:14:14,230 --> 00:14:18,653 ‫Jadi karena itu, hal ini di sini akan dilakukan di dalam index. 269 00:14:21,010 --> 00:14:22,883 ‫Mari kita lakukan di sini. 270 00:14:28,750 --> 00:14:32,723 ‫Kemudian impor kotak peta 271 00:14:37,420 --> 00:14:40,690 ‫displayMap, baiklah. 272 00:14:40,690 --> 00:14:42,640 ‫Jadi mari kita 273 00:14:45,980 --> 00:14:48,470 ‫sebut itu juga dengan lokasi. 274 00:14:48,470 --> 00:14:52,420 ‫Sekarang ingat kembali ketika kita benar-benar membuat peta ini dan 275 00:14:52,420 --> 00:14:55,400 ‫ingat bagaimana peta itu menanyakan apakah kita ingin 276 00:14:55,400 --> 00:14:57,760 ‫menggunakan pustaka mapbox di npm? 277 00:14:57,760 --> 00:15:00,670 ‫Jadi sekarang kita bisa melanjutkan dan benar-benar 278 00:15:00,670 --> 00:15:04,590 ‫menggunakan yang itu daripada yang ini yang kita gunakan sekarang. 279 00:15:04,590 --> 00:15:06,450 ‫Jadi tidak ada 280 00:15:06,450 --> 00:15:07,993 ‫di sini. 281 00:15:09,850 --> 00:15:10,693 ‫Ya, jadi yang ini. 282 00:15:10,693 --> 00:15:13,170 ‫Jadi ini adalah pustaka mapbox yang saat 283 00:15:13,170 --> 00:15:15,330 ‫ini kami gunakan, tetapi sekali lagi 284 00:15:15,330 --> 00:15:17,290 ‫ada juga versi npm. 285 00:15:17,290 --> 00:15:20,290 ‫Jadi kita tidak perlu memiliki yang satu ini. 286 00:15:20,290 --> 00:15:22,620 ‫Namun, untuk beberapa alasan ada 287 00:15:22,620 --> 00:15:26,410 ‫masalah dengan menggunakan perpustakaan ini bersama dengan Parcel, oke. 288 00:15:26,410 --> 00:15:29,430 ‫Jadi orang lain benar-benar mengalami masalah ini. 289 00:15:29,430 --> 00:15:32,370 ‫Jadi kita tidak bisa menggunakan library npm 290 00:15:32,370 --> 00:15:34,080 ‫mapbox bersama-sama dengan Parcel. 291 00:15:34,080 --> 00:15:36,993 ‫Jadi itulah alasan mengapa saya masih melakukannya seperti ini. 292 00:15:38,850 --> 00:15:39,810 ‫Oke. 293 00:15:39,810 --> 00:15:43,360 ‫Jadi mapbox dilengkapi dengan ini. 294 00:15:43,360 --> 00:15:45,533 ‫Ini juga tidak kita butuhkan lagi. 295 00:15:46,470 --> 00:15:49,150 ‫Sekarang mari kita benar-benar menyingkirkan beberapa kesalahan yang 296 00:15:49,150 --> 00:15:50,593 ‫kita lihat di sini. 297 00:15:51,510 --> 00:15:53,060 ‫Nah sekarang mereka tidak 298 00:15:53,060 --> 00:15:55,500 ‫lagi di sini, tetapi misalnya kami memiliki masalah 299 00:15:55,500 --> 00:15:57,630 ‫bahwa kode ini di sini membuat 300 00:15:57,630 --> 00:16:02,280 ‫beberapa kesalahan ketika kami berada di halaman yang tidak memiliki peta ini di sini, kan. 301 00:16:02,280 --> 00:16:05,310 ‫Karena tentu saja pada halaman detail memiliki peta ini jadi elemen 302 00:16:05,310 --> 00:16:07,890 ‫ini, tetapi kemudian kode ini tentu saja berjalan di 303 00:16:07,890 --> 00:16:09,203 ‫semua halaman lainnya, yang 304 00:16:09,203 --> 00:16:10,973 ‫kemudian akan membuat kesalahan di sana. 305 00:16:11,840 --> 00:16:13,700 ‫Jadi mari kita perbaiki itu. 306 00:16:13,700 --> 00:16:15,980 ‫Jadi apa yang saya lakukan di sini adalah pertama-tama 307 00:16:15,980 --> 00:16:18,950 ‫membuat elemen dengan ini dan kemudian menguji apakah itu benar-benar ada 308 00:16:18,950 --> 00:16:20,933 ‫sebelum kita mengeksekusi baris kode ini. 309 00:16:23,610 --> 00:16:25,660 ‫Jadi kita akan membuat beberapa elemen DOM disini. 310 00:16:32,415 --> 00:16:33,248 ‫Dan di sini 311 00:16:34,820 --> 00:16:35,683 ‫saya akan mengatakan delegasi. 312 00:16:39,750 --> 00:16:41,380 ‫Jadi jika mapbox 313 00:16:43,370 --> 00:16:46,623 ‫dan hanya kemudian ke dua tindakan ini di 314 00:16:47,690 --> 00:16:48,790 ‫sini, oke. 315 00:16:48,790 --> 00:16:50,350 ‫Ini juga kemudian mapbox dan 316 00:16:52,420 --> 00:16:53,853 ‫itu jauh lebih bagus. 317 00:16:57,190 --> 00:16:58,850 ‫Di sini mari 318 00:16:58,850 --> 00:17:00,630 ‫kita juga meletakkan nilai, dan 319 00:17:00,630 --> 00:17:03,690 ‫saya akan menempatkan keduanya karena sebenarnya kita mungkin 320 00:17:03,690 --> 00:17:07,140 ‫membutuhkannya atau sebenarnya kita akan membutuhkannya untuk hal-hal lain juga. 321 00:17:07,140 --> 00:17:08,803 ‫Jadi cara ini sedikit lebih bersih. 322 00:17:10,170 --> 00:17:13,230 ‫Mari tambahkan juga pendengar acara ini 323 00:17:13,230 --> 00:17:16,660 ‫di sini jika elemen ini ada, kan. 324 00:17:16,660 --> 00:17:20,683 ‫Karena yah, sekali lagi, itu akan membuat kesalahan jika tidak. 325 00:17:22,260 --> 00:17:23,777 ‫Jadi loginform, dan 326 00:17:27,750 --> 00:17:28,583 ‫jika dan 327 00:17:29,610 --> 00:17:30,443 ‫kemudian 328 00:17:33,770 --> 00:17:37,460 ‫mari kita gunakan kembali di sini, simpan, dan 329 00:17:37,460 --> 00:17:39,363 ‫sekarang itu terlihat lebih baik. 330 00:17:40,270 --> 00:17:41,103 ‫Oke. 331 00:17:42,355 --> 00:17:44,113 ‫Mari kita tutup terminal ini. 332 00:17:45,500 --> 00:17:48,010 ‫Ini Anda harus terus menggabungkan kode kita 333 00:17:48,010 --> 00:17:49,480 ‫setiap kali ada simpanan. 334 00:17:49,480 --> 00:17:50,980 ‫Mari kita simpan di sini lagi. 335 00:17:53,600 --> 00:17:56,440 ‫Oke, jadi saya harap itu berubah sekarang. 336 00:17:56,440 --> 00:17:58,203 ‫Jadi mari kita pergi ke depan dan mencobanya. 337 00:18:00,610 --> 00:18:03,800 ‫Jadi, jika Anda masih bisa masuk pada titik ini 338 00:18:03,800 --> 00:18:06,563 ‫dengan baik, itu berarti itu benar-benar berhasil. 339 00:18:13,470 --> 00:18:15,850 ‫Yah mungkin tidak. 340 00:18:15,850 --> 00:18:17,263 ‫Mari kita coba lagi di sini. 341 00:18:21,360 --> 00:18:25,113 ‫Baiklah, jadi ada sesuatu yang salah terjadi di sini. 342 00:18:26,430 --> 00:18:29,620 ‫Jadi seperti biasa, mari kita log email dan kata sandi ini 343 00:18:29,620 --> 00:18:31,093 ‫ke konsol di sini. 344 00:18:32,570 --> 00:18:35,300 ‫Maksud saya, karena kita sudah 345 00:18:35,300 --> 00:18:38,233 ‫tahu bahwa sebenarnya fungsi ini dipanggil, kan. 346 00:18:39,260 --> 00:18:41,360 ‫Jika tidak, kami bahkan tidak akan mendapatkan kesalahan. 347 00:18:45,380 --> 00:18:49,560 ‫Benar, karena kesalahan itu jelas berasal dari API kami. 348 00:18:49,560 --> 00:18:53,403 ‫Jadi semua yang kita miliki di sini benar-benar berfungsi, saya percaya. 349 00:19:03,010 --> 00:19:04,763 ‫Mari kita lihat konsolnya. 350 00:19:10,830 --> 00:19:14,610 ‫Sehingga terlihat bahwa sebenarnya tidak ada username 351 00:19:14,610 --> 00:19:16,193 ‫dan password. 352 00:19:18,320 --> 00:19:19,153 ‫Oke. 353 00:19:21,640 --> 00:19:22,640 ‫Saya tidak yakin mengapa demikian. 354 00:19:22,640 --> 00:19:26,003 ‫Mari kita lihat apakah kita benar-benar mendapatkan sesuatu. 355 00:19:26,870 --> 00:19:29,350 ‫Jadi login dan saya juga akan 356 00:19:31,140 --> 00:19:33,963 ‫mencatat ini di sini, bukan di sini 357 00:19:34,950 --> 00:19:35,880 ‫tapi di 358 00:19:37,930 --> 00:19:38,763 ‫sini. 359 00:19:50,730 --> 00:19:52,600 ‫Dan ternyata masalahnya 360 00:19:52,600 --> 00:19:55,060 ‫pasti nama pengguna dan kata 361 00:19:55,060 --> 00:19:57,220 ‫sandi tidak benar-benar ditentukan. 362 00:19:57,220 --> 00:20:00,140 ‫Oh, dan sekarang tentu saja saya bisa mengerti mengapa demikian. 363 00:20:00,140 --> 00:20:01,483 ‫Apa kesalahan bodoh. 364 00:20:02,440 --> 00:20:04,900 ‫Jadi kami mencoba membaca nilai-nilai ini di 365 00:20:04,900 --> 00:20:07,340 ‫sini, tepat di awal ketika halaman 366 00:20:07,340 --> 00:20:11,223 ‫dimuat, dan tentu saja pada titik ini nilai-nilai ini tidak ditentukan. 367 00:20:12,230 --> 00:20:15,400 ‫Jadi kami tentu saja hanya bisa 368 00:20:15,400 --> 00:20:19,103 ‫mendefinisikannya di sini di pendengar acara kami, kan. 369 00:20:20,370 --> 00:20:22,800 ‫Jadi pada saat fungsi ini dipanggil 370 00:20:22,800 --> 00:20:25,690 ‫dengan baik maka tentu saja email dan password sudah 371 00:20:25,690 --> 00:20:28,143 ‫diatur maka inilah saatnya kita bisa membacanya. 372 00:20:31,210 --> 00:20:33,423 ‫Jadi itu agak bodoh, tapi, 373 00:20:36,870 --> 00:20:39,470 ‫Anda tahu, terkadang hal semacam itu terjadi. 374 00:20:46,560 --> 00:20:48,673 ‫Sekarang mari kita salin ini di sini. 375 00:20:50,830 --> 00:20:53,460 ‫Kali ini kita berhasil login, 376 00:20:53,460 --> 00:20:56,373 ‫artinya kode kita disini masih berfungsi. 377 00:20:57,740 --> 00:21:01,500 ‫Bagus, jadi sekarang mari kita lakukan bagian terakhir yang 378 00:21:01,500 --> 00:21:03,310 ‫ingin kita lakukan 379 00:21:03,310 --> 00:21:07,373 ‫dalam kuliah ini, yang sebenarnya membuat peringatan ini, oke. 380 00:21:08,700 --> 00:21:13,700 ‫Jadi mari kita buat sebuah fungsi bernama show alert dan mengekspornya. 381 00:21:13,720 --> 00:21:16,790 ‫Jadi saat masuk kita akan mengimpor fungsi ini dan menggunakannya 382 00:21:16,790 --> 00:21:17,793 ‫di sana. 383 00:21:18,890 --> 00:21:21,070 ‫Jadi showAlert dan ini 384 00:21:23,583 --> 00:21:27,557 ‫sebagai input akan mendapatkan tipe dan pesan, 385 00:21:29,090 --> 00:21:31,010 ‫jadi seperti ini. 386 00:21:31,010 --> 00:21:32,230 ‫Dan 387 00:21:34,070 --> 00:21:35,600 ‫tipe ini 388 00:21:38,170 --> 00:21:41,043 ‫sukses atau error, oke. 389 00:21:41,043 --> 00:21:44,020 ‫Karena bergantung pada input ini, kami kemudian akan memiliki 390 00:21:44,020 --> 00:21:46,890 ‫CSS yang berbeda untuk setiap peringatan ini dan Anda 391 00:21:46,890 --> 00:21:48,590 ‫akan melihatnya dalam sedetik. 392 00:21:49,450 --> 00:21:52,360 ‫Jadi yang akan kita lakukan pada dasarnya adalah membuat beberapa 393 00:21:52,360 --> 00:21:56,233 ‫markup HTML di sini dan kemudian memasukkannya ke dalam HTML kita, jadi itu adalah 394 00:21:57,210 --> 00:21:58,733 ‫sesuatu yang sangat mudah. 395 00:22:00,530 --> 00:22:04,520 ‫Jadi markup dan string template dan sekarang 396 00:22:04,520 --> 00:22:07,280 ‫beberapa HTML yang bagus. 397 00:22:07,280 --> 00:22:11,370 ‫Jadi ini hanyalah sebuah div dengan kelas 398 00:22:13,110 --> 00:22:14,680 ‫alert dan kemudian 399 00:22:14,680 --> 00:22:18,110 ‫alert -- jadi pengubah dengan tipe 400 00:22:18,110 --> 00:22:19,113 ‫kita. 401 00:22:21,890 --> 00:22:24,450 ‫Oke, dan itulah mengapa 402 00:22:24,450 --> 00:22:27,070 ‫itu harus sukses atau salah. 403 00:22:27,070 --> 00:22:29,650 ‫Jadi izinkan saya menunjukkannya dengan 404 00:22:29,650 --> 00:22:32,800 ‫cepat di CSS, karena menurut saya sangat penting 405 00:22:32,800 --> 00:22:36,530 ‫untuk benar-benar mengetahui bagaimana semua ini dimainkan bersama, oke. 406 00:22:36,530 --> 00:22:38,520 ‫Jadi di sini kami memiliki 407 00:22:38,520 --> 00:22:41,863 ‫kelas peringatan kami dan kemudian peringatan sukses dan kesalahan peringatan. 408 00:22:43,300 --> 00:22:44,880 ‫Baiklah. 409 00:22:44,880 --> 00:22:48,273 ‫Seperti biasa mari kita nonaktifkan eslint di sini, oke, 410 00:22:49,840 --> 00:22:52,700 ‫dan singkirkan ini dan sekarang tentu saja 411 00:22:54,530 --> 00:22:57,570 ‫di sini ada pesan yang kita sampaikan 412 00:22:57,570 --> 00:22:59,193 ‫ke fungsi ini. 413 00:23:00,190 --> 00:23:01,970 ‫Tentu saja kita dapat 414 00:23:01,970 --> 00:23:04,470 ‫melanjutkan dan menggunakan ini di seluruh aplikasi, tetapi 415 00:23:04,470 --> 00:23:08,150 ‫dalam kasus ini kita hanya membutuhkannya di sini untuk login kita. 416 00:23:08,150 --> 00:23:11,053 ‫Jadi dokumen. queryselector, dan sekarang 417 00:23:11,890 --> 00:23:13,990 ‫di sini kita memilih elemen di 418 00:23:13,990 --> 00:23:17,900 ‫mana kita ingin memasukkan HTML yang baru saja kita buat. 419 00:23:17,900 --> 00:23:19,950 ‫Jadi itu sebenarnya tepat di 420 00:23:19,950 --> 00:23:21,530 ‫awal elemen body. 421 00:23:21,530 --> 00:23:23,153 ‫Jadi tepat di bagian atas halaman. 422 00:23:24,570 --> 00:23:25,473 ‫Jadi 423 00:23:27,570 --> 00:23:32,380 ‫isi, lalu masukkan HTML yang berdekatan, jadi yang ini di sini. 424 00:23:32,380 --> 00:23:34,720 ‫Jika Anda mengikuti kursus JavaScript lengkap saya, 425 00:23:34,720 --> 00:23:37,793 ‫maka semua ini di sini bukanlah hal baru bagi 426 00:23:38,890 --> 00:23:39,810 ‫Anda, oke. 427 00:23:39,810 --> 00:23:42,670 ‫Jadi di sini kita dapat menentukan beberapa kata kunci, 428 00:23:42,670 --> 00:23:45,080 ‫dan dalam hal ini kita ingin afterbegin. 429 00:23:45,080 --> 00:23:46,900 ‫Jadi pada dasarnya apa 430 00:23:46,900 --> 00:23:50,763 ‫artinya ini di dalam tubuh, tapi tepat di awal, baiklah. 431 00:23:52,580 --> 00:23:54,800 ‫Kemudian HTML, jadi markup, 432 00:23:54,800 --> 00:23:57,070 ‫yang sebenarnya ingin kita sertakan. 433 00:23:57,070 --> 00:23:57,903 ‫Besar. 434 00:23:57,903 --> 00:24:00,760 ‫Jadi ini akan membuat peringatan yang sangat 435 00:24:00,760 --> 00:24:04,900 ‫sederhana berdasarkan jenis dan metode, tetapi sekarang kita sebenarnya juga 436 00:24:04,900 --> 00:24:07,193 ‫menginginkan fungsi untuk menyembunyikan peringatan. 437 00:24:08,380 --> 00:24:11,410 ‫Jadi mari kita buat di sini juga, ekspor, dan 438 00:24:11,410 --> 00:24:14,103 ‫mungkin kita bahkan tidak membutuhkannya di luar sini, 439 00:24:14,980 --> 00:24:18,480 ‫tetapi tetap untuk dapat digunakan kembali, selalu merupakan ide bagus untuk 440 00:24:18,480 --> 00:24:19,773 ‫mengekspor semua ini. 441 00:24:21,410 --> 00:24:25,173 ‫Yang ini tidak perlu menerima argumen apa pun. 442 00:24:27,250 --> 00:24:31,220 ‫Jadi sekarang yang akan kita lakukan adalah 443 00:24:31,220 --> 00:24:33,780 ‫memilih elemen dengan 444 00:24:33,780 --> 00:24:36,700 ‫kelas alert dan kemudian menghapusnya. 445 00:24:36,700 --> 00:24:38,167 ‫Jadi peringatan pemilih 446 00:24:40,120 --> 00:24:40,953 ‫kueri. 447 00:24:43,710 --> 00:24:45,803 ‫Jadi nama kelasnya sama persis seperti di sini. 448 00:24:46,720 --> 00:24:49,430 ‫Kemudian kita perlu menggunakan trik JavaScript 449 00:24:49,430 --> 00:24:52,610 ‫di mana kita perlu naik satu tingkat ke elemen 450 00:24:52,610 --> 00:24:55,700 ‫induk dan kemudian dari sana menghapus elemen anak. 451 00:24:55,700 --> 00:24:59,380 ‫Jadi jika ada elemen maka 452 00:24:59,380 --> 00:25:02,147 ‫elemen. elemen induk. removeChild 453 00:25:06,728 --> 00:25:08,478 ‫dan kemudian elemen. 454 00:25:09,413 --> 00:25:10,910 ‫Oke. 455 00:25:10,910 --> 00:25:14,070 ‫Jadi sekali lagi, itu seharusnya hanya JavaScript dasar 456 00:25:14,070 --> 00:25:16,230 ‫atau manipulasi DOM dasar. 457 00:25:16,230 --> 00:25:18,150 ‫Jadi karena ini adalah kursus 458 00:25:18,150 --> 00:25:20,393 ‫simpul, saya tidak akan membahasnya lebih dalam. 459 00:25:21,680 --> 00:25:23,770 ‫Bagaimanapun, yang ingin saya lakukan di sini 460 00:25:23,770 --> 00:25:25,670 ‫sekarang adalah setiap kali kami 461 00:25:25,670 --> 00:25:28,393 ‫menampilkan peringatan, sembunyikan dulu semua peringatan yang sudah ada. 462 00:25:30,400 --> 00:25:32,340 ‫Jadi kami selalu 463 00:25:32,340 --> 00:25:34,353 ‫memastikan selalu menjalankan hideAlert. 464 00:25:35,310 --> 00:25:39,150 ‫Lalu akhirnya saya juga selalu ingin menyembunyikan semua peringatan setelah 465 00:25:39,150 --> 00:25:40,383 ‫lima detik. 466 00:25:42,370 --> 00:25:44,480 ‫Jadi jendela 467 00:25:46,885 --> 00:25:50,220 ‫setTimeout hideAlert setelah lima 468 00:25:50,220 --> 00:25:51,790 ‫detik. 469 00:25:51,790 --> 00:25:54,533 ‫Baiklah, dan sekarang mari kita impor itu di sini. 470 00:25:58,030 --> 00:26:00,220 ‫Tampilan peringatan itu disebut, kan? 471 00:26:00,220 --> 00:26:03,193 ‫Oh showAlert, dengan jenis dan pesan. 472 00:26:05,900 --> 00:26:06,973 ‫Jadi showAlert 473 00:26:08,140 --> 00:26:08,973 ‫dari 474 00:26:12,280 --> 00:26:15,730 ‫kanan dari itu dan seterusnya ... 475 00:26:15,730 --> 00:26:19,010 ‫Ya, jadi kami ingin menggunakan hak itu di tempat ini. 476 00:26:19,010 --> 00:26:21,970 ‫Jadi alih-alih peringatan JavaScript kami ingin 477 00:26:23,297 --> 00:26:25,650 ‫melakukan showAlert, baiklah, dan di 478 00:26:25,650 --> 00:26:27,180 ‫sini sama. 479 00:26:27,180 --> 00:26:29,220 ‫Kami masih perlu menentukan 480 00:26:29,220 --> 00:26:30,380 ‫jenisnya di 481 00:26:32,925 --> 00:26:35,467 ‫sini, dan itu berhasil dalam 482 00:26:40,220 --> 00:26:42,630 ‫kasus ini dan ini kesalahannya. 483 00:26:42,630 --> 00:26:44,193 ‫Kami mencapai pelengkapan otomatis. 484 00:26:46,450 --> 00:26:47,963 ‫Oke, itu lebih baik. 485 00:26:48,890 --> 00:26:50,483 ‫Jadi mari kita mengujinya. 486 00:26:53,580 --> 00:26:56,923 ‫Dan pertama-tama kita harus logout dengan menghapus cookie ini. 487 00:27:01,160 --> 00:27:02,990 ‫Muat ulang, login, dan sekarang 488 00:27:02,990 --> 00:27:03,993 ‫saya mengujinya 489 00:27:11,400 --> 00:27:13,900 ‫terlebih dahulu dengan kata sandi yang 490 00:27:15,500 --> 00:27:17,290 ‫salah dan ini dia. 491 00:27:17,290 --> 00:27:21,400 ‫Jadi email atau kata sandi yang salah tepat di peringatan kami yang bagus 492 00:27:21,400 --> 00:27:24,400 ‫dan Anda melihat bahwa setelah lima detik itu menghilang. 493 00:27:24,400 --> 00:27:26,160 ‫Tentu saja kita bisa 494 00:27:26,160 --> 00:27:28,400 ‫menempatkan beberapa animasi yang bagus di sana 495 00:27:28,400 --> 00:27:31,830 ‫dan semuanya, tapi saya pikir seperti ini sudah lebih dari cukup. 496 00:27:31,830 --> 00:27:33,950 ‫Jadi mari kita lihat lagi dengan 497 00:27:33,950 --> 00:27:36,113 ‫cepat, dan seperti itulah yang akan terlihat, tetapi 498 00:27:37,600 --> 00:27:40,400 ‫ketika itu benar maka tentu saja itu harus menjadi hijau. 499 00:27:42,030 --> 00:27:44,930 ‫Jadi ya, masuk dengan sukses dan kami 500 00:27:44,930 --> 00:27:47,890 ‫melihat pemuatan ulang setelah satu setengah detik 501 00:27:47,890 --> 00:27:50,320 ‫dan sekarang ini benar-benar berfungsi. 502 00:27:50,320 --> 00:27:53,593 ‫Itu otentikasi lengkap kami di front-end. 503 00:27:54,880 --> 00:27:59,430 ‫Itu banyak pekerjaan, tetapi jika Anda bertanya kepada saya, itu sangat berharga. 504 00:27:59,430 --> 00:28:02,070 ‫Sekarang satu-satunya hal yang hilang adalah 505 00:28:02,070 --> 00:28:05,690 ‫kita benar-benar keluar ketika kita mengklik tombol ini di sini. 506 00:28:05,690 --> 00:28:07,510 ‫Jadi sekarang bukan itu masalahnya 507 00:28:07,510 --> 00:28:10,133 ‫dan di video berikutnya mari kita perbaiki itu.