1 00:00:02,060 --> 00:00:03,200 Jadi mari 2 00:00:03,200 --> 00:00:08,920 kita rencanakan aplikasi yang akan kita bangun dan kita akan membangun aplikasi belanja dasar, 3 00:00:08,930 --> 00:00:17,120 toko online dasar dalam aplikasi yang bisa kita katakan. Jadi karena itu dalam aplikasi ini di sini, kita pasti 4 00:00:17,120 --> 00:00:17,680 akan 5 00:00:17,710 --> 00:00:24,590 membutuhkan banyak produk yang dapat didaftar, jadi kita akan memiliki seperti layar ikhtisar produk di mana kita 6 00:00:24,680 --> 00:00:30,770 melihat kartu-kartu ini dengan produk kami, dengan gambar, dengan judul dan harga mungkin, sesuatu seperti 7 00:00:30,770 --> 00:00:37,930 ini dan juga gerobak atau tombol tambah ke gerobak dan tombol perincian, jadi pada dasarnya tombol yang memungkinkan 8 00:00:37,970 --> 00:00:42,440 kita pergi ke halaman detail dan tombol yang memungkinkan kita menambahkan 9 00:00:42,440 --> 00:00:43,730 ini ke gerobak. 10 00:00:43,760 --> 00:00:47,060 Karena jika Anda ketuk tombol gerobak ini di sini, 11 00:00:47,060 --> 00:00:53,900 jadi jika Anda memilih tombol gerobak ini, maka ini ditambahkan ke gerobak dan Anda dapat mencapai gerobak itu 12 00:00:53,900 --> 00:00:56,360 dengan tombol tindakan di sini di 13 00:00:56,390 --> 00:01:01,300 bilah tindakan, jadi di tajuk atas, di sana saya ingin memiliki ikon keranjang 14 00:01:01,570 --> 00:01:08,060 seperti itu, mungkin sedikit lebih bagus daripada yang saya gambar di sini tetapi ikon ini pada akhirnya 15 00:01:08,060 --> 00:01:14,480 memungkinkan kita untuk pergi ke halaman terpisah setelahnya, layar terpisah dari aplikasi ini di mana kita tentu 16 00:01:14,480 --> 00:01:23,240 saja kemudian juga dapat kembali ke tempat kita akan melihat seperti jumlah total dalam dolar di sini yang menambah jumlah barang keranjang kami 17 00:01:23,510 --> 00:01:26,910 dan kemudian daftar barang-barang kami seperti buku dan berapa 18 00:01:26,930 --> 00:01:28,360 biayanya dan sesuatu 19 00:01:28,520 --> 00:01:29,510 seperti ini. 20 00:01:29,540 --> 00:01:33,140 Jadi pada dasarnya kita melihat keranjang kita di sini, kita melihat 21 00:01:33,140 --> 00:01:35,580 jumlah itu dan kemudian kita melihat masing-masing 22 00:01:35,630 --> 00:01:42,470 barang dan tentu saja, saya juga ingin memiliki tombol yang memungkinkan saya untuk memesan apa yang ada di kereta dan sebenarnya tombol 23 00:01:42,530 --> 00:01:46,070 itu tidak boleh di bawah ini , jadi di sini kita 24 00:01:46,070 --> 00:01:47,530 akan memiliki tombol pesanan. 25 00:01:47,600 --> 00:01:48,890 Sebenarnya ini seharusnya ada di 26 00:01:48,890 --> 00:01:53,450 sini, jadi di sini saya ingin memiliki satu baris di mana kita memiliki jumlah total dan kemudian di sebelahnya, tombol pesanan. 27 00:01:54,110 --> 00:01:55,310 Jadi pada dasarnya itu 28 00:01:55,310 --> 00:01:57,250 adalah tujuan tetapi Anda dapat menempatkan 29 00:01:57,250 --> 00:02:02,930 ini di mana pun Anda inginkan, pada akhirnya, kami ingin memiliki tombol yang memungkinkan kami untuk memesan apa pun 30 00:02:02,930 --> 00:02:03,470 yang 31 00:02:03,470 --> 00:02:12,150 ada di keranjang dan pada setiap item keranjang di sini, saya juga ingin memiliki seperti ikon tempat sampah di sini yang memungkinkan saya untuk menghapus item dari keranjang. 32 00:02:12,200 --> 00:02:22,300 Jadi tempat pesanan ini, ikon ini di sini pada dasarnya hanya akan menghapus item dari 33 00:02:22,300 --> 00:02:23,410 keranjang. 34 00:02:23,410 --> 00:02:24,220 Jadi itulah 35 00:02:24,220 --> 00:02:29,760 idenya, tentu saja jika Anda menambahkan item yang sama beberapa kali ke troli, Anda tidak boleh menambahkan beberapa 36 00:02:29,830 --> 00:02:36,520 baris untuk itu tetapi sebaliknya di sini, saya juga ingin menunjukkan seperti jumlah item yang hanya meningkat jika kita menambahkan lebih 37 00:02:36,520 --> 00:02:41,920 banyak sering ke troli dan yang berkurang jika kita menghapusnya sampai semua item dihapus dalam hal mana 38 00:02:41,920 --> 00:02:44,080 seluruh baris akan dihapus di sini. 39 00:02:44,080 --> 00:02:46,000 Jadi begitulah cara halaman troli 40 00:02:46,000 --> 00:02:54,070 ini bekerja, ini adalah halaman ikhtisar di sini, tentu saja karena itu kami juga dapat mengetuk tombol detail atau mungkin item secara umum, jadi 41 00:02:54,070 --> 00:02:56,950 di mana saja pada gambar atau hal-hal seperti 42 00:02:56,980 --> 00:03:00,250 itu dan kemudian kita harus dibawa ke sebuah halaman detail. 43 00:03:00,250 --> 00:03:04,810 Jadi itulah layar lain di aplikasi ini dimana kita tentu saja juga bisa kembali. 44 00:03:04,810 --> 00:03:08,190 Itu halaman detail dari ikon di 45 00:03:08,260 --> 00:03:12,490 mana kita harus melihat gambar, kita mungkin harus melihat 46 00:03:12,490 --> 00:03:23,710 seperti judul di sini di header, sehingga itu akan menjadi judul item. Kemudian di bawah itu, kita melihat seperti harganya, kita melihat deskripsi 47 00:03:24,190 --> 00:03:32,300 dan kita mungkin ingin memiliki tombol to cart di sini, di mana kita juga dapat menambahkan 48 00:03:32,310 --> 00:03:37,460 item ke troli di sini. Jadi itulah alur mengenai produk kami yang kami miliki 49 00:03:37,470 --> 00:03:38,630 di sini. Sekarang 50 00:03:38,640 --> 00:03:44,060 yang penting dalam aplikasi ini adalah bahwa kita tidak bisa hanya melihat produk dan berbelanja mereka dan 51 00:03:44,060 --> 00:03:50,010 menambahkannya ke troli dan sebagainya, tetapi tentu saja kita juga dapat melihat pesanan kita dan yang paling penting, 52 00:03:50,130 --> 00:03:52,110 kita juga dapat menambahkan produk baru. 53 00:03:52,110 --> 00:03:59,100 Oleh karena itu di sini, kita perlu laci dan laci ini akan memberi kita beberapa pilihan. Sekarang pilihan pertama tentu saja adalah kita 54 00:03:59,120 --> 00:04:05,940 pergi ke toko kita sehingga bisa dikatakan, itulah bagian ini di mana kita berada 55 00:04:05,940 --> 00:04:07,770 ketika aplikasi dimulai. 56 00:04:07,830 --> 00:04:10,110 Opsi kedua harus menjadi pesanan 57 00:04:10,110 --> 00:04:17,340 kami dan opsi ketiga harus seperti opsi kelola produk, di mana kami dapat mengelola produk kami sendiri yang 58 00:04:17,370 --> 00:04:19,920 ingin Anda tawarkan kepada pengguna lain. 59 00:04:19,950 --> 00:04:22,810 Jadi seperti yang saya katakan, berbelanja pada dasarnya adalah apa yang sudah kita lihat. 60 00:04:22,830 --> 00:04:31,500 Sekarang jika kita mengetuk pesanan, maka saya ingin dibawa ke layar di mana kita tentu saja juga dapat membuka laci itu karena itu akan 61 00:04:31,500 --> 00:04:34,540 memungkinkan kita untuk kembali tetapi pada layar itu 62 00:04:34,590 --> 00:04:40,530 kita harus melihat pesanan di mana kita pada dasarnya memiliki barang-barang di mana kita seperti melihat 63 00:04:40,960 --> 00:04:49,800 seperti jumlah pesanan itu, tanggal dan kemudian juga tombol di mana kita dapat mengetuk di mana kita melihat rincian lebih lanjut dan jika kita 64 00:04:49,800 --> 00:04:56,850 mengetuk tombol ini, maka kita memiliki area opsional ini yang membuka atau menutup dan di sana, aku pada dasarnya 65 00:04:56,860 --> 00:05:02,040 ingin melihat barang pesanan yang pada dasarnya adalah apa yang kita miliki di gerobak. 66 00:05:02,040 --> 00:05:09,810 Jadi kami punya dua buku di sini dengan harga 19 misalnya, nah ini akan muncul di sini di area detail 67 00:05:09,810 --> 00:05:11,590 ketika kami membuka ini. 68 00:05:11,610 --> 00:05:12,490 Jadi itulah ide 69 00:05:12,540 --> 00:05:13,230 di sini 70 00:05:13,230 --> 00:05:18,030 dalam urutan, kita dapat memperluas pesanan sehingga kita tidak hanya melihat jumlah dan tanggal tetapi kita juga melihat item 71 00:05:18,030 --> 00:05:19,200 keranjang yang kita tempatkan di 72 00:05:19,230 --> 00:05:23,720 sana pada dasarnya, jadi pada dasarnya apa yang kita miliki di sini di kereta, itu muncul dalam pesanan. 73 00:05:23,960 --> 00:05:25,380 Jadi itulah layar 74 00:05:25,380 --> 00:05:33,480 pesanan, kami juga telah mengelola produk dan mari menggambar di sini mungkin. Produk yang dikelola adalah area lain dari aplikasi ini di mana kami 75 00:05:33,480 --> 00:05:40,620 juga memiliki tombol menu untuk membuka laci itu lagi sehingga kami dapat mencapai bagian lain dari aplikasi tetapi di sini di 76 00:05:40,620 --> 00:05:47,130 layar produk yang dikelola di mana kami memiliki produk kami sendiri, sehingga produk pengguna dan di aplikasi ini, kami 77 00:05:47,280 --> 00:05:52,980 belum akan menambahkan otentikasi tetapi kami akan menambahkan ini nanti, tetapi di sini, kami memiliki produk 78 00:05:53,340 --> 00:05:55,380 kami sendiri. Di sini 79 00:05:55,380 --> 00:06:01,290 idenya adalah sekali lagi bahwa kita pada dasarnya melihat daftar produk yang cukup dekat dengan apa yang kita 80 00:06:01,350 --> 00:06:08,790 lihat di sini di layar toko, sehingga kita memiliki seperti kartu kita di sini dengan gambar, dengan judul dan harga mungkin, jadi kami 81 00:06:08,790 --> 00:06:11,980 dapat menggunakan kembali daftar ini di sini mungkin tetapi tentu 82 00:06:12,510 --> 00:06:18,720 saja opsi yang kami miliki pada setiap produk, yang berbeda. Alih-alih menambahkannya ke troli dan 83 00:06:18,720 --> 00:06:22,400 melihat detailnya, kita bisa menghapusnya, itu satu 84 00:06:22,440 --> 00:06:28,710 tombol dan kita juga bisa mengeditnya. Tentu saja kita hanya dapat mengedit produk kita sendiri tetapi sekali 85 00:06:28,710 --> 00:06:35,400 lagi, kita tidak akan memiliki pemetaan pengguna nyata di sini, kita dapat melakukan ini dengan beberapa ID pengguna dummy yang kita lampirkan pada setiap produk 86 00:06:35,730 --> 00:06:37,470 tetapi hanya itu untuk saat ini. 87 00:06:37,530 --> 00:06:39,330 Jadi kami memiliki tombol edit dan 88 00:06:39,330 --> 00:06:41,920 hapus, sekarang sebagai tambahan di sini di tajuk, jadi 89 00:06:41,940 --> 00:06:47,640 kami membutuhkan lebih banyak ruang di sini, di tajuk kami juga akan memiliki tombol tindakan yang memungkinkan kami untuk menambahkan 90 00:06:47,640 --> 00:06:48,390 produk baru. 91 00:06:48,390 --> 00:06:53,310 Jadi pada dasarnya yang seharusnya sedikit lebih luas di sini, saya menggambar ini terlalu sempit. 92 00:06:53,340 --> 00:07:00,030 Jadi kita memiliki tombol tindakan ini di sini dan tombol tindakan ini di sini, tombol plus ini, ini akan 93 00:07:00,030 --> 00:07:02,480 membawa kita ke halaman baru di 94 00:07:02,490 --> 00:07:12,630 mana kita dapat menambahkan produk baru, jadi ini akan membawa kita ke halaman produk tambahan di sini di mana kita tentu saja dapat pergi di sana-sini, kita dapat menambahkan 95 00:07:12,720 --> 00:07:19,720 produk baru dan yang memungkinkan kita untuk menambahkan judul di sini dengan input teks dan input teks juga dapat berada 96 00:07:19,720 --> 00:07:23,650 di bawah label judul, Anda dapat membangun ini sesuai keinginan Anda. 97 00:07:23,670 --> 00:07:25,770 Kita harus dapat menambahkan 98 00:07:25,890 --> 00:07:32,390 harga, kita harus dapat menambahkan deskripsi di sini, mungkin menjadi input multiline di sini, 99 00:07:32,400 --> 00:07:36,530 kita tentu saja harus dapat menambahkan imageUrl juga. 100 00:07:36,570 --> 00:07:41,460 Jadi itulah yang bisa kita tambahkan di sini dan kemudian kita perlu tombol di sini di bilah tindakan, tombol tanda 101 00:07:41,460 --> 00:07:46,440 centang atau semacamnya yang memungkinkan kita untuk mengkonfirmasi ini. Kami tidak akan terlalu peduli tentang semua penanganan input pengguna 102 00:07:46,440 --> 00:07:47,120 di sini 103 00:07:47,130 --> 00:07:52,230 pada tahap ini karena saya akan memiliki modul terpisah di mana saya menyelami semua detail di sana, bagaimana Anda bisa melakukan 104 00:07:52,530 --> 00:07:57,330 ini dengan cara yang elegan, bagaimana Anda dapat menambahkan validasi, jadi di sini di aplikasi ini kami akan menjaga ini 105 00:07:57,330 --> 00:08:00,870 sangat mendasar, kami tidak akan memeriksa apakah pengguna memasukkan sesuatu yang benar atau semacamnya, 106 00:08:00,870 --> 00:08:02,350 kami akan melakukannya nanti dalam kursus. 107 00:08:02,430 --> 00:08:07,470 Di sini kita baru saja mengumpulkan input dasar ketika tombol ini di sini, tombol tanda centang 108 00:08:07,830 --> 00:08:13,560 di sini ditekan, kita dibawa kembali ke halaman ini dan tentu saja kita menggunakan Redux dalam sistem manajemen negara 109 00:08:13,560 --> 00:08:20,100 kita untuk menambahkan produk baru ke daftar produk yang kemudian juga muncul di sini di toko kami dan yang muncul di sini 110 00:08:20,100 --> 00:08:23,280 di daftar produk kami tentu saja yang dapat kami kelola. 111 00:08:23,340 --> 00:08:24,420 Jadi itulah yang kita miliki di sini. 112 00:08:24,480 --> 00:08:32,100 Sekarang jika kita ketuk edit di sini, jika kita memilih tombol edit ini di sini, maka kita juga akan dibawa ke halaman 113 00:08:32,100 --> 00:08:40,410 produk edit yang sama, tetapi tentu saja sekarang kita memiliki beberapa nilai yang telah diisi sebelumnya di sini, dipopulasikan dengan produk yang kita muat 114 00:08:40,770 --> 00:08:43,110 dan ada bidang-bidang tertentu yang kita 115 00:08:43,110 --> 00:08:49,080 tidak dapat mengedit, misalnya harga tidak boleh diedit karena jika harga dapat diedit, maka jika sudah ada 116 00:08:49,080 --> 00:08:51,230 di keranjang, itu akan menjadi 117 00:08:51,480 --> 00:08:54,390 masalah, jadi kami tidak akan mengizinkan pengeditan harga 118 00:08:54,390 --> 00:08:57,840 di sini, kami akan memungkinkan pengeditan judul, deskripsi, dan imageUrl, 119 00:08:57,930 --> 00:09:00,210 jadi itu adalah sesuatu yang mungkin. 120 00:09:00,210 --> 00:09:01,210 Jadi itulah satu perbedaannya, 121 00:09:01,260 --> 00:09:04,180 kami memiliki bidang yang telah diisi sebelumnya dan harganya tidak dapat diedit. 122 00:09:04,260 --> 00:09:09,840 Jika kita menekan tanda centang dalam mode edit dan kita dapat mengetahui apakah kita sedang mengedit atau tidak 123 00:09:09,840 --> 00:09:14,220 dengan fakta apakah kita menerima ID produk sebagai parameter misalnya, jadi setelah kita selesai 124 00:09:14,220 --> 00:09:20,100 mengedit, kita dapat menekan ikon tanda centang itu dan kemudian kami juga dibawa kembali dan kami hanya menyimpan apa 125 00:09:20,100 --> 00:09:23,660 pun yang kami edit di sini kembali ke produk kami. 126 00:09:23,670 --> 00:09:25,780 Ini aplikasinya di sini. 127 00:09:25,890 --> 00:09:30,700 Seperti yang saya sebutkan, ini akan menjadi dasar untuk modul berikutnya juga, di 128 00:09:30,700 --> 00:09:38,100 sana kami kemudian juga akan menambahkan permintaan HTTP, otentikasi, kami akan melakukan semua itu validasi formulir di sini dengan cara yang 129 00:09:38,100 --> 00:09:40,020 lebih elegan dan sebagainya tetapi 130 00:09:40,050 --> 00:09:46,110 modul ini di sini sekarang adalah sebuah latihan hebat untuk bagaimana membangun aplikasi seperti itu, untuk bagaimana bekerja 131 00:09:46,200 --> 00:09:51,240 dengan komponen, gaya mereka, cara menambahkan navigasi karena jelas kita memiliki banyak navigasi dalam aplikasi 132 00:09:51,240 --> 00:09:54,940 ini dan bagaimana mengelola keadaan kita di aplikasi belanja ini. 133 00:09:55,020 --> 00:09:59,850 Seperti yang saya sebutkan di kuliah terakhir, Anda dapat melewati modul ini, tetapi kemudian Anda harus 134 00:09:59,850 --> 00:10:05,100 menyelami kode yang sudah selesai sehingga Anda dapat mengikuti modul berikutnya tetapi rekomendasi saya tentu saja adalah Anda 135 00:10:05,100 --> 00:10:10,840 a) coba semua ini Anda sendiri dan tentu saja hasil Anda tidak akan sama dengan yang saya dapatkan, jadi Anda 136 00:10:10,860 --> 00:10:16,230 pasti juga harus menonton video saya setelahnya untuk melihat bagaimana saya melakukan ini dan agar Anda memiliki basis kode 137 00:10:16,230 --> 00:10:18,360 yang sama untuk diikuti tetapi ini akan 138 00:10:18,360 --> 00:10:23,280 menjadi latihan yang bagus bahkan jika hasil Anda di sana terlebih dahulu karena tidak ada pendekatan yang 139 00:10:23,280 --> 00:10:28,890 salah atau benar atau b) pilihan Anda yang lain tentu saja adalah Anda tidak mencobanya sendiri dan Anda hanya mengikuti, 140 00:10:28,890 --> 00:10:29,870 juga pilihan yang 141 00:10:29,970 --> 00:10:34,830 valid tetapi saya yakin Anda akan dapatkan sedikit lebih banyak dari kursus jika Anda mencobanya sendiri pertama 142 00:10:34,830 --> 00:10:35,490 tetapi 143 00:10:35,490 --> 00:10:40,080 pada akhirnya, lakukan apa pun yang Anda suka. Dalam kuliah berikutnya, kita akan membahas ini dan mulai membangun aplikasi 144 00:10:40,080 --> 00:10:40,500 ini.