Sekarang kita memiliki aliran dasar ke bawah, bahwa kita dapat menavigasi antara produk kami, menambahkannya ke troli dan
kemudian juga menggunakan gerobak untuk melakukan pemesanan dan juga melihat pesanan itu dan tentu saja, juga
mengedit gerobak jika
kita ingin, sekarang setelah semua itu selesai, saatnya untuk bergerak ke bagian terakhir dari aplikasi ini
yang tentu saja bagian di mana Anda dapat menambahkan produk baru.
Nah, itu juga bagian yang akan kita sempurnakan nanti karena nanti, kita tentu saja akan lebih dalam menangani input pengguna dan kita bahkan
akan menyimpan data itu di server tetapi kita sudah bisa memulai di sini. Untuk memulai, layar produk pengguna dan layar
produk edit
akan menjadi penting sekarang karena ini adalah layar tempat kami melihat
semua produk kami dan di mana kami juga dapat mengedit produk.
Jadi mari kita mulai dengan layar
produk pengguna dan mari kita mengubahnya menjadi komponen Bereaksi dengan
mengimpor Bereaksi dari Bereaksi dan tidak mengejutkan, dengan mengimpor barang-barang dari Bereaksi Asli. Barang yang ingin saya impor di sini adalah daftar datar
lagi karena saya akan menampilkan daftar produk pada akhirnya di
layar produk pengguna ini.
Oleh karena itu di sini, kami memiliki komponen layar produk pengguna yang menerima alat peraga dan di
mana saya kemudian perlu mengembalikan beberapa jsx dan di bagian bawah file, saya akan mengekspor komponen ini sebagai default.
Itu adalah komponen standar saya yang saya gunakan berulang kali. Sekarang di sini, saya ingin menampilkan
komponen saya, produk saya dengan daftar datar dan saya akan menggunakan kembali komponen item produk
yang kami buat sebelumnya.
Jadi kembali ke produk pengguna, kita dapat mengimpor item
produk dari folder komponen, jadi mari kita pergi ke sana
dan ke sana, untuk berbelanja dan memesan, bukan memesan tetapi item produk dan di sini,
tentu saja juga mengirimkan beberapa data. Sekarang data yang ingin saya sampaikan di sini
harus berupa produk-produk milik pengguna login saya.
Kami tidak memiliki pengguna yang masuk saat ini tetapi jika Anda ingat produk peredam, di sana kami berpura-pura
bahwa kami memiliki karena di sana kami memiliki array produk pengguna yang menampung semua produk yang dalam hal ini di
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
ini yang masuk, nanti ini tentu saja akan menjadi dinamis. Jadi produk pengguna adalah apa yang kami
butuhkan, kembali ke layar produk pengguna, oleh karena itu kami perlu mendapatkan
data itu dari Redux dengan bantuan pemilih penggunaan dari React Redux, seperti ini dan
di sini kami mendapatkan produk pengguna kami dengan memanggil pemilih penggunaan di mana kami melewati dalam fungsi itu, ia mendapatkan status, lalu menjangkau
bagian produk dari produk toko kami karena itulah pengenal yang saya gunakan di sana
dan kemudian seperti yang saya katakan, akses bidang produk pengguna ini di sini, jadi di layar produk
pengguna, di sini kami akses. produk pengguna. Produk-produk pengguna sekarang adalah array yang kita
masukkan ke dalam data, seperti biasa di sini saya akan menambahkan ekstraktor kunci yang memberi saya ID karena produk saya seperti yang disimpan
di sini dalam produk-produk pengguna menggunakan tentu saja model produk saya pada akhirnya dan oleh
karena itu memiliki ID yang pengidentifikasi unik yang dapat saya gunakan sehingga saya akan menggunakannya dan tentu saja seperti
biasa, juga kita perlu menambahkan item render, Anda sudah tahu pola itu. Item render mendapatkan data item di sini dan saya ingin mengembalikan
item produk baru untuk setiap entri di sini dan item produk, jika kita melihatnya, membutuhkan beberapa informasi.
Dibutuhkan prop pada tampilan detail di sini, dibutuhkan prop judul, prop harga, prop gambar dan kemudian juga pada tambah ke
keranjang prop.
Sekarang Anda mungkin sudah melihat bahwa tidak semua alat peraga ini benar-benar sesuai dengan tujuan kami
jika kami menggunakannya pada layar produk pengguna karena ini bukan layar di mana kami dapat berbelanja produk, ini
bukan layar tempat saya ingin dapat menambahkan produk ke gerobak. Saya ingin menampilkannya seperti yang saya lakukan di sini dengan gambar, harga
dan sebagainya, tetapi saya tidak terlalu peduli apakah kita bisa mengkliknya atau tentang tombol-tombol ini. Jadi saya akan mulai menambahkan item
produk seperti ini tetapi kita harus menyesuaikannya.
Jadi yang kita butuhkan adalah judul, harga, gambar dan detail tampilan dan pada add cart.
Jadi kita perlu gambar di sini dan itu tentu saja adalah itemData. barang. imageUrl karena Anda
tidak boleh melupakan itemData itu. item di titik akhir pada suatu produk
sebagaimana didefinisikan di sini dalam model, maka kita akan memiliki properti imageUrl ini dan kemudian di sini kita juga membutuhkan judul yang dapat
diakses melalui itemData. barang. judul. Kami membutuhkan harga yang dapat diakses dengan itemData. barang. harga dan jika kita melihat
komponen item produk, yang memenuhi semua yang kita butuhkan di sini tapi sekarang kita perlu detail
tampilan dan menambahkan ke keranjang dan saya akan menambahkan mereka sementara tetapi kita harus menemukan solusi yang berbeda di
sini.
Jadi detail tampilan adalah fungsi kosong
saat ini dan di tambahkan ke troli, juga fungsi kosong dan kami akan menerapkannya secara berbeda nanti.
Untuk saat ini, saya mengeluarkan item produk di sini dan karena itu
sekarang kita dapat menavigasi ke layar produk pengguna. Untuk sampai di sana, saatnya untuk kembali ke navigator toko dan
pada akhirnya, saya ingin menambahkannya ke navigator laci saya tetapi sebagai tumpukan terpisah, seperti produk dan pesanan adalah tumpukan
terpisah, ini juga harus menjadi tumpukan terpisah .
Kami hanya dapat menyalin tumpukan pesanan navigator di sini, mereplikasi ini dan mengimpor layar produk pengguna di sini, jadi
layar produk pengguna dari folder layar, di sana dari folder pengguna dan kemudian layar produk pengguna dan memetakan ini di
tumpukan yang baru disalin di sana yang Saya tidak akan memberi nama navigator karena saya sudah memiliki nama itu
di sini, tetapi saya akan beri nama katakanlah admin navigator mungkin dan di sini, saya memiliki pengidentifikasi
produk pengguna saya yang menunjuk pada layar produk pengguna. Sekarang di sini sebagai ikon, di laci saya
ingin memiliki md buat dan ios membuat ikon dan selain itu, ini harus baik-baik saja.
Sekarang kita hanya perlu menambahkan navigator ini ke navigator laci kita.
Di sana saya akan menambahkan kunci admin dan arahkan ke navigator admin, jadi sekarang kita
harus benar-benar dapat mencapai itu. Jika kita kembali ke aplikasi, kita memiliki
entri admin dan jika saya mengkliknya, kita mendapatkan masalah mengenai produk pengguna
saya, negara tidak terdefinisi bukan objek, mari kita melihat cepat pada layar produk pengguna, ya,
itu seharusnya jadilah produk karena irisan kami diberi nama produk di sini dalam peredam gabungan.
Jadi di sini seharusnya
juga produk, kesalahan ketik kecil dari sisi saya. Sekarang ini terlihat lebih baik dan sekarang, mungkin terlihat seperti tidak ada
yang berubah tetapi sebenarnya, Anda dapat melihat item navigasi saya hilang karena sekarang saya berada di layar baru tetapi saya memiliki daftar lama saya
di sini tetapi dengan lebih sedikit produk.
Jika Anda membandingkan Android di mana saya berada di layar mulai, kami memiliki lebih banyak produk
di sana, sekarang saya hanya memiliki yang mana U1 adalah ID pemilik.
Jadi itu
bagus tapi tentu saja saya tidak suka tombol-tombol ini di
sini dan saya juga ingin memiliki item menu di sini dan judul tajuk tentu saja.
Ada beberapa hal yang perlu kita perbaiki, tombol-tombol ini tentu saja adalah hal yang paling penting atau
hal yang paling mencolok yang salah sekalipun. Namun, saya akan mulai
dengan tajuk, di layar produk pengguna di
sini, kita dapat menambahkan opsi navigasi, layar produk pengguna. opsi navigasi dan di sana, atur judul tajuk
produk Anda misalnya dan kami juga memerlukan tombol menu, jadi kami sebenarnya bisa juga pergi ke layar ikhtisar produk dan dari
sana, salin tajuk ini bagian kiri di sini, kembali ke layar produk
pengguna dan tambahkan ini di sini.
Namun sekarang, kita memerlukan bentuk fungsi opsi navigasi di mana kita kemudian pada akhirnya mengembalikan
objek dengan semua opsi di sana, jadi itu adalah sesuatu yang perlu kita ubah seperti ini
dan kita juga perlu memastikan bahwa kita mengimpor item tombol tajuk dan tombol tajuk.
Jadi kembali ke layar ikhtisar produk, di sana saya memiliki impor ini
di sini, salin dari layar tinjauan produk,
buka layar produk pengguna dan tambahkan
di sana seperti ini, misalnya sehingga Anda mengimpor
semua yang Anda butuhkan.
Kami juga perlu mengimpor platform API karena kami juga menggunakannya ketika mengatur tombol header.
Setidaknya sekarang, ketika kita pergi ke area admin, kita memiliki judul di sini, kita memiliki laci, tombol menu lagi
tapi sekarang
bagaimana dengan tombol-tombol ini di sini?
Kita perlu mengubah tampilan barang produk kita.