1 00:00:02,200 --> 00:00:08,380 Sekarang kita memiliki aliran dasar ke bawah, bahwa kita dapat menavigasi antara produk kami, menambahkannya ke troli dan 2 00:00:08,410 --> 00:00:13,900 kemudian juga menggunakan gerobak untuk melakukan pemesanan dan juga melihat pesanan itu dan tentu saja, juga 3 00:00:13,930 --> 00:00:15,040 mengedit gerobak jika 4 00:00:15,070 --> 00:00:20,530 kita ingin, sekarang setelah semua itu selesai, saatnya untuk bergerak ke bagian terakhir dari aplikasi ini 5 00:00:20,530 --> 00:00:24,430 yang tentu saja bagian di mana Anda dapat menambahkan produk baru. 6 00:00:24,430 --> 00:00:29,960 Nah, itu juga bagian yang akan kita sempurnakan nanti karena nanti, kita tentu saja akan lebih dalam menangani input pengguna dan kita bahkan 7 00:00:29,980 --> 00:00:36,770 akan menyimpan data itu di server tetapi kita sudah bisa memulai di sini. Untuk memulai, layar produk pengguna dan layar 8 00:00:36,770 --> 00:00:37,910 produk edit 9 00:00:37,910 --> 00:00:42,560 akan menjadi penting sekarang karena ini adalah layar tempat kami melihat 10 00:00:42,560 --> 00:00:47,450 semua produk kami dan di mana kami juga dapat mengedit produk. 11 00:00:47,480 --> 00:00:49,720 Jadi mari kita mulai dengan layar 12 00:00:49,750 --> 00:00:53,420 produk pengguna dan mari kita mengubahnya menjadi komponen Bereaksi dengan 13 00:00:53,600 --> 00:01:01,970 mengimpor Bereaksi dari Bereaksi dan tidak mengejutkan, dengan mengimpor barang-barang dari Bereaksi Asli. Barang yang ingin saya impor di sini adalah daftar datar 14 00:01:01,970 --> 00:01:06,250 lagi karena saya akan menampilkan daftar produk pada akhirnya di 15 00:01:06,320 --> 00:01:08,260 layar produk pengguna ini. 16 00:01:08,630 --> 00:01:15,650 Oleh karena itu di sini, kami memiliki komponen layar produk pengguna yang menerima alat peraga dan di 17 00:01:15,650 --> 00:01:22,960 mana saya kemudian perlu mengembalikan beberapa jsx dan di bagian bawah file, saya akan mengekspor komponen ini sebagai default. 18 00:01:23,090 --> 00:01:29,670 Itu adalah komponen standar saya yang saya gunakan berulang kali. Sekarang di sini, saya ingin menampilkan 19 00:01:30,000 --> 00:01:38,070 komponen saya, produk saya dengan daftar datar dan saya akan menggunakan kembali komponen item produk 20 00:01:38,070 --> 00:01:40,560 yang kami buat sebelumnya. 21 00:01:40,560 --> 00:01:44,130 Jadi kembali ke produk pengguna, kita dapat mengimpor item 22 00:01:47,030 --> 00:01:51,020 produk dari folder komponen, jadi mari kita pergi ke sana 23 00:01:51,020 --> 00:01:57,090 dan ke sana, untuk berbelanja dan memesan, bukan memesan tetapi item produk dan di sini, 24 00:01:57,230 --> 00:02:03,320 tentu saja juga mengirimkan beberapa data. Sekarang data yang ingin saya sampaikan di sini 25 00:02:03,320 --> 00:02:06,140 harus berupa produk-produk milik pengguna login saya. 26 00:02:06,140 --> 00:02:11,450 Kami tidak memiliki pengguna yang masuk saat ini tetapi jika Anda ingat produk peredam, di sana kami berpura-pura 27 00:02:11,450 --> 00:02:17,300 bahwa kami memiliki karena di sana kami memiliki array produk pengguna yang menampung semua produk yang dalam hal ini di 28 00:02:17,300 --> 00:02:25,130 sini memiliki ID pengguna, ID pemilik U1 dan saya hanya berasumsi untuk saat ini untuk memiliki beberapa data dummy bahwa ini adalah data pengguna kami saat 29 00:02:25,130 --> 00:02:31,930 ini yang masuk, nanti ini tentu saja akan menjadi dinamis. Jadi produk pengguna adalah apa yang kami 30 00:02:31,930 --> 00:02:37,930 butuhkan, kembali ke layar produk pengguna, oleh karena itu kami perlu mendapatkan 31 00:02:37,930 --> 00:02:44,540 data itu dari Redux dengan bantuan pemilih penggunaan dari React Redux, seperti ini dan 32 00:02:44,560 --> 00:02:55,680 di sini kami mendapatkan produk pengguna kami dengan memanggil pemilih penggunaan di mana kami melewati dalam fungsi itu, ia mendapatkan status, lalu menjangkau 33 00:02:55,680 --> 00:03:02,520 bagian produk dari produk toko kami karena itulah pengenal yang saya gunakan di sana 34 00:03:02,520 --> 00:03:10,590 dan kemudian seperti yang saya katakan, akses bidang produk pengguna ini di sini, jadi di layar produk 35 00:03:10,590 --> 00:03:18,990 pengguna, di sini kami akses. produk pengguna. Produk-produk pengguna sekarang adalah array yang kita 36 00:03:18,990 --> 00:03:26,870 masukkan ke dalam data, seperti biasa di sini saya akan menambahkan ekstraktor kunci yang memberi saya ID karena produk saya seperti yang disimpan 37 00:03:26,880 --> 00:03:31,860 di sini dalam produk-produk pengguna menggunakan tentu saja model produk saya pada akhirnya dan oleh 38 00:03:31,860 --> 00:03:38,400 karena itu memiliki ID yang pengidentifikasi unik yang dapat saya gunakan sehingga saya akan menggunakannya dan tentu saja seperti 39 00:03:38,400 --> 00:03:46,830 biasa, juga kita perlu menambahkan item render, Anda sudah tahu pola itu. Item render mendapatkan data item di sini dan saya ingin mengembalikan 40 00:03:46,830 --> 00:03:53,130 item produk baru untuk setiap entri di sini dan item produk, jika kita melihatnya, membutuhkan beberapa informasi. 41 00:03:53,670 --> 00:04:05,790 Dibutuhkan prop pada tampilan detail di sini, dibutuhkan prop judul, prop harga, prop gambar dan kemudian juga pada tambah ke 42 00:04:05,790 --> 00:04:07,300 keranjang prop. 43 00:04:07,400 --> 00:04:12,840 Sekarang Anda mungkin sudah melihat bahwa tidak semua alat peraga ini benar-benar sesuai dengan tujuan kami 44 00:04:12,840 --> 00:04:18,840 jika kami menggunakannya pada layar produk pengguna karena ini bukan layar di mana kami dapat berbelanja produk, ini 45 00:04:18,840 --> 00:04:26,310 bukan layar tempat saya ingin dapat menambahkan produk ke gerobak. Saya ingin menampilkannya seperti yang saya lakukan di sini dengan gambar, harga 46 00:04:26,310 --> 00:04:34,920 dan sebagainya, tetapi saya tidak terlalu peduli apakah kita bisa mengkliknya atau tentang tombol-tombol ini. Jadi saya akan mulai menambahkan item 47 00:04:34,920 --> 00:04:39,310 produk seperti ini tetapi kita harus menyesuaikannya. 48 00:04:39,510 --> 00:04:46,170 Jadi yang kita butuhkan adalah judul, harga, gambar dan detail tampilan dan pada add cart. 49 00:04:46,170 --> 00:04:53,430 Jadi kita perlu gambar di sini dan itu tentu saja adalah itemData. barang. imageUrl karena Anda 50 00:04:53,430 --> 00:04:59,400 tidak boleh melupakan itemData itu. item di titik akhir pada suatu produk 51 00:04:59,400 --> 00:05:08,540 sebagaimana didefinisikan di sini dalam model, maka kita akan memiliki properti imageUrl ini dan kemudian di sini kita juga membutuhkan judul yang dapat 52 00:05:08,570 --> 00:05:17,840 diakses melalui itemData. barang. judul. Kami membutuhkan harga yang dapat diakses dengan itemData. barang. harga dan jika kita melihat 53 00:05:17,840 --> 00:05:23,570 komponen item produk, yang memenuhi semua yang kita butuhkan di sini tapi sekarang kita perlu detail 54 00:05:23,570 --> 00:05:30,380 tampilan dan menambahkan ke keranjang dan saya akan menambahkan mereka sementara tetapi kita harus menemukan solusi yang berbeda di 55 00:05:30,380 --> 00:05:31,100 sini. 56 00:05:31,100 --> 00:05:34,290 Jadi detail tampilan adalah fungsi kosong 57 00:05:34,290 --> 00:05:41,760 saat ini dan di tambahkan ke troli, juga fungsi kosong dan kami akan menerapkannya secara berbeda nanti. 58 00:05:42,270 --> 00:05:47,370 Untuk saat ini, saya mengeluarkan item produk di sini dan karena itu 59 00:05:47,370 --> 00:05:54,600 sekarang kita dapat menavigasi ke layar produk pengguna. Untuk sampai di sana, saatnya untuk kembali ke navigator toko dan 60 00:05:54,600 --> 00:06:00,420 pada akhirnya, saya ingin menambahkannya ke navigator laci saya tetapi sebagai tumpukan terpisah, seperti produk dan pesanan adalah tumpukan 61 00:06:00,420 --> 00:06:03,120 terpisah, ini juga harus menjadi tumpukan terpisah . 62 00:06:03,120 --> 00:06:11,160 Kami hanya dapat menyalin tumpukan pesanan navigator di sini, mereplikasi ini dan mengimpor layar produk pengguna di sini, jadi 63 00:06:11,160 --> 00:06:19,440 layar produk pengguna dari folder layar, di sana dari folder pengguna dan kemudian layar produk pengguna dan memetakan ini di 64 00:06:19,440 --> 00:06:27,180 tumpukan yang baru disalin di sana yang Saya tidak akan memberi nama navigator karena saya sudah memiliki nama itu 65 00:06:28,000 --> 00:06:35,140 di sini, tetapi saya akan beri nama katakanlah admin navigator mungkin dan di sini, saya memiliki pengidentifikasi 66 00:06:35,570 --> 00:06:43,900 produk pengguna saya yang menunjuk pada layar produk pengguna. Sekarang di sini sebagai ikon, di laci saya 67 00:06:43,920 --> 00:06:51,670 ingin memiliki md buat dan ios membuat ikon dan selain itu, ini harus baik-baik saja. 68 00:06:51,680 --> 00:06:55,460 Sekarang kita hanya perlu menambahkan navigator ini ke navigator laci kita. 69 00:06:55,460 --> 00:07:02,830 Di sana saya akan menambahkan kunci admin dan arahkan ke navigator admin, jadi sekarang kita 70 00:07:02,830 --> 00:07:08,980 harus benar-benar dapat mencapai itu. Jika kita kembali ke aplikasi, kita memiliki 71 00:07:08,980 --> 00:07:14,080 entri admin dan jika saya mengkliknya, kita mendapatkan masalah mengenai produk pengguna 72 00:07:14,090 --> 00:07:19,880 saya, negara tidak terdefinisi bukan objek, mari kita melihat cepat pada layar produk pengguna, ya, 73 00:07:19,910 --> 00:07:25,880 itu seharusnya jadilah produk karena irisan kami diberi nama produk di sini dalam peredam gabungan. 74 00:07:25,880 --> 00:07:27,990 Jadi di sini seharusnya 75 00:07:28,080 --> 00:07:34,590 juga produk, kesalahan ketik kecil dari sisi saya. Sekarang ini terlihat lebih baik dan sekarang, mungkin terlihat seperti tidak ada 76 00:07:34,590 --> 00:07:40,830 yang berubah tetapi sebenarnya, Anda dapat melihat item navigasi saya hilang karena sekarang saya berada di layar baru tetapi saya memiliki daftar lama saya 77 00:07:40,830 --> 00:07:42,910 di sini tetapi dengan lebih sedikit produk. 78 00:07:43,020 --> 00:07:47,190 Jika Anda membandingkan Android di mana saya berada di layar mulai, kami memiliki lebih banyak produk 79 00:07:47,190 --> 00:07:50,340 di sana, sekarang saya hanya memiliki yang mana U1 adalah ID pemilik. 80 00:07:50,730 --> 00:07:51,550 Jadi itu 81 00:07:51,960 --> 00:07:54,850 bagus tapi tentu saja saya tidak suka tombol-tombol ini di 82 00:07:54,930 --> 00:07:58,960 sini dan saya juga ingin memiliki item menu di sini dan judul tajuk tentu saja. 83 00:07:58,980 --> 00:08:03,930 Ada beberapa hal yang perlu kita perbaiki, tombol-tombol ini tentu saja adalah hal yang paling penting atau 84 00:08:03,930 --> 00:08:08,270 hal yang paling mencolok yang salah sekalipun. Namun, saya akan mulai 85 00:08:08,270 --> 00:08:11,420 dengan tajuk, di layar produk pengguna di 86 00:08:11,450 --> 00:08:19,910 sini, kita dapat menambahkan opsi navigasi, layar produk pengguna. opsi navigasi dan di sana, atur judul tajuk 87 00:08:19,910 --> 00:08:30,130 produk Anda misalnya dan kami juga memerlukan tombol menu, jadi kami sebenarnya bisa juga pergi ke layar ikhtisar produk dan dari 88 00:08:30,160 --> 00:08:35,930 sana, salin tajuk ini bagian kiri di sini, kembali ke layar produk 89 00:08:36,020 --> 00:08:39,620 pengguna dan tambahkan ini di sini. 90 00:08:39,620 --> 00:08:44,900 Namun sekarang, kita memerlukan bentuk fungsi opsi navigasi di mana kita kemudian pada akhirnya mengembalikan 91 00:08:44,900 --> 00:08:50,210 objek dengan semua opsi di sana, jadi itu adalah sesuatu yang perlu kita ubah seperti ini 92 00:08:50,660 --> 00:08:55,880 dan kita juga perlu memastikan bahwa kita mengimpor item tombol tajuk dan tombol tajuk. 93 00:08:55,880 --> 00:09:00,300 Jadi kembali ke layar ikhtisar produk, di sana saya memiliki impor ini 94 00:09:00,440 --> 00:09:03,310 di sini, salin dari layar tinjauan produk, 95 00:09:03,440 --> 00:09:05,990 buka layar produk pengguna dan tambahkan 96 00:09:06,010 --> 00:09:09,050 di sana seperti ini, misalnya sehingga Anda mengimpor 97 00:09:09,050 --> 00:09:10,940 semua yang Anda butuhkan. 98 00:09:10,940 --> 00:09:16,400 Kami juga perlu mengimpor platform API karena kami juga menggunakannya ketika mengatur tombol header. 99 00:09:18,210 --> 00:09:25,800 Setidaknya sekarang, ketika kita pergi ke area admin, kita memiliki judul di sini, kita memiliki laci, tombol menu lagi 100 00:09:25,800 --> 00:09:26,860 tapi sekarang 101 00:09:26,940 --> 00:09:29,250 bagaimana dengan tombol-tombol ini di sini? 102 00:09:29,310 --> 00:09:33,840 Kita perlu mengubah tampilan barang produk kita.