Jadi mari
kita rencanakan aplikasi yang akan kita bangun dan kita akan membangun aplikasi belanja dasar,
toko online dasar dalam aplikasi yang bisa kita katakan. Jadi karena itu dalam aplikasi ini di sini, kita pasti
akan
membutuhkan banyak produk yang dapat didaftar, jadi kita akan memiliki seperti layar ikhtisar produk di mana kita
melihat kartu-kartu ini dengan produk kami, dengan gambar, dengan judul dan harga mungkin, sesuatu seperti
ini dan juga gerobak atau tombol tambah ke gerobak dan tombol perincian, jadi pada dasarnya tombol yang memungkinkan
kita pergi ke halaman detail dan tombol yang memungkinkan kita menambahkan
ini ke gerobak.
Karena jika Anda ketuk tombol gerobak ini di sini,
jadi jika Anda memilih tombol gerobak ini, maka ini ditambahkan ke gerobak dan Anda dapat mencapai gerobak itu
dengan tombol tindakan di sini di
bilah tindakan, jadi di tajuk atas, di sana saya ingin memiliki ikon keranjang
seperti itu, mungkin sedikit lebih bagus daripada yang saya gambar di sini tetapi ikon ini pada akhirnya
memungkinkan kita untuk pergi ke halaman terpisah setelahnya, layar terpisah dari aplikasi ini di mana kita tentu
saja kemudian juga dapat kembali ke tempat kita akan melihat seperti jumlah total dalam dolar di sini yang menambah jumlah barang keranjang kami
dan kemudian daftar barang-barang kami seperti buku dan berapa
biayanya dan sesuatu
seperti ini.
Jadi pada dasarnya kita melihat keranjang kita di sini, kita melihat
jumlah itu dan kemudian kita melihat masing-masing
barang dan tentu saja, saya juga ingin memiliki tombol yang memungkinkan saya untuk memesan apa yang ada di kereta dan sebenarnya tombol
itu tidak boleh di bawah ini , jadi di sini kita
akan memiliki tombol pesanan.
Sebenarnya ini seharusnya ada di
sini, jadi di sini saya ingin memiliki satu baris di mana kita memiliki jumlah total dan kemudian di sebelahnya, tombol pesanan.
Jadi pada dasarnya itu
adalah tujuan tetapi Anda dapat menempatkan
ini di mana pun Anda inginkan, pada akhirnya, kami ingin memiliki tombol yang memungkinkan kami untuk memesan apa pun
yang
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.
Jadi tempat pesanan ini, ikon ini di sini pada dasarnya hanya akan menghapus item dari
keranjang.
Jadi itulah
idenya, tentu saja jika Anda menambahkan item yang sama beberapa kali ke troli, Anda tidak boleh menambahkan beberapa
baris untuk itu tetapi sebaliknya di sini, saya juga ingin menunjukkan seperti jumlah item yang hanya meningkat jika kita menambahkan lebih
banyak sering ke troli dan yang berkurang jika kita menghapusnya sampai semua item dihapus dalam hal mana
seluruh baris akan dihapus di sini.
Jadi begitulah cara halaman troli
ini bekerja, ini adalah halaman ikhtisar di sini, tentu saja karena itu kami juga dapat mengetuk tombol detail atau mungkin item secara umum, jadi
di mana saja pada gambar atau hal-hal seperti
itu dan kemudian kita harus dibawa ke sebuah halaman detail.
Jadi itulah layar lain di aplikasi ini dimana kita tentu saja juga bisa kembali.
Itu halaman detail dari ikon di
mana kita harus melihat gambar, kita mungkin harus melihat
seperti judul di sini di header, sehingga itu akan menjadi judul item. Kemudian di bawah itu, kita melihat seperti harganya, kita melihat deskripsi
dan kita mungkin ingin memiliki tombol to cart di sini, di mana kita juga dapat menambahkan
item ke troli di sini. Jadi itulah alur mengenai produk kami yang kami miliki
di sini. Sekarang
yang penting dalam aplikasi ini adalah bahwa kita tidak bisa hanya melihat produk dan berbelanja mereka dan
menambahkannya ke troli dan sebagainya, tetapi tentu saja kita juga dapat melihat pesanan kita dan yang paling penting,
kita juga dapat menambahkan produk baru.
Oleh karena itu di sini, kita perlu laci dan laci ini akan memberi kita beberapa pilihan. Sekarang pilihan pertama tentu saja adalah kita
pergi ke toko kita sehingga bisa dikatakan, itulah bagian ini di mana kita berada
ketika aplikasi dimulai.
Opsi kedua harus menjadi pesanan
kami dan opsi ketiga harus seperti opsi kelola produk, di mana kami dapat mengelola produk kami sendiri yang
ingin Anda tawarkan kepada pengguna lain.
Jadi seperti yang saya katakan, berbelanja pada dasarnya adalah apa yang sudah kita lihat.
Sekarang jika kita mengetuk pesanan, maka saya ingin dibawa ke layar di mana kita tentu saja juga dapat membuka laci itu karena itu akan
memungkinkan kita untuk kembali tetapi pada layar itu
kita harus melihat pesanan di mana kita pada dasarnya memiliki barang-barang di mana kita seperti melihat
seperti jumlah pesanan itu, tanggal dan kemudian juga tombol di mana kita dapat mengetuk di mana kita melihat rincian lebih lanjut dan jika kita
mengetuk tombol ini, maka kita memiliki area opsional ini yang membuka atau menutup dan di sana, aku pada dasarnya
ingin melihat barang pesanan yang pada dasarnya adalah apa yang kita miliki di gerobak.
Jadi kami punya dua buku di sini dengan harga 19 misalnya, nah ini akan muncul di sini di area detail
ketika kami membuka ini.
Jadi itulah ide
di sini
dalam urutan, kita dapat memperluas pesanan sehingga kita tidak hanya melihat jumlah dan tanggal tetapi kita juga melihat item
keranjang yang kita tempatkan di
sana pada dasarnya, jadi pada dasarnya apa yang kita miliki di sini di kereta, itu muncul dalam pesanan.
Jadi itulah layar
pesanan, kami juga telah mengelola produk dan mari menggambar di sini mungkin. Produk yang dikelola adalah area lain dari aplikasi ini di mana kami
juga memiliki tombol menu untuk membuka laci itu lagi sehingga kami dapat mencapai bagian lain dari aplikasi tetapi di sini di
layar produk yang dikelola di mana kami memiliki produk kami sendiri, sehingga produk pengguna dan di aplikasi ini, kami
belum akan menambahkan otentikasi tetapi kami akan menambahkan ini nanti, tetapi di sini, kami memiliki produk
kami sendiri. Di sini
idenya adalah sekali lagi bahwa kita pada dasarnya melihat daftar produk yang cukup dekat dengan apa yang kita
lihat di sini di layar toko, sehingga kita memiliki seperti kartu kita di sini dengan gambar, dengan judul dan harga mungkin, jadi kami
dapat menggunakan kembali daftar ini di sini mungkin tetapi tentu
saja opsi yang kami miliki pada setiap produk, yang berbeda. Alih-alih menambahkannya ke troli dan
melihat detailnya, kita bisa menghapusnya, itu satu
tombol dan kita juga bisa mengeditnya. Tentu saja kita hanya dapat mengedit produk kita sendiri tetapi sekali
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
tetapi hanya itu untuk saat ini.
Jadi kami memiliki tombol edit dan
hapus, sekarang sebagai tambahan di sini di tajuk, jadi
kami membutuhkan lebih banyak ruang di sini, di tajuk kami juga akan memiliki tombol tindakan yang memungkinkan kami untuk menambahkan
produk baru.
Jadi pada dasarnya yang seharusnya sedikit lebih luas di sini, saya menggambar ini terlalu sempit.
Jadi kita memiliki tombol tindakan ini di sini dan tombol tindakan ini di sini, tombol plus ini, ini akan
membawa kita ke halaman baru di
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
produk baru dan yang memungkinkan kita untuk menambahkan judul di sini dengan input teks dan input teks juga dapat berada
di bawah label judul, Anda dapat membangun ini sesuai keinginan Anda.
Kita harus dapat menambahkan
harga, kita harus dapat menambahkan deskripsi di sini, mungkin menjadi input multiline di sini,
kita tentu saja harus dapat menambahkan imageUrl juga.
Jadi itulah yang bisa kita tambahkan di sini dan kemudian kita perlu tombol di sini di bilah tindakan, tombol tanda
centang atau semacamnya yang memungkinkan kita untuk mengkonfirmasi ini. Kami tidak akan terlalu peduli tentang semua penanganan input pengguna
di sini
pada tahap ini karena saya akan memiliki modul terpisah di mana saya menyelami semua detail di sana, bagaimana Anda bisa melakukan
ini dengan cara yang elegan, bagaimana Anda dapat menambahkan validasi, jadi di sini di aplikasi ini kami akan menjaga ini
sangat mendasar, kami tidak akan memeriksa apakah pengguna memasukkan sesuatu yang benar atau semacamnya,
kami akan melakukannya nanti dalam kursus.
Di sini kita baru saja mengumpulkan input dasar ketika tombol ini di sini, tombol tanda centang
di sini ditekan, kita dibawa kembali ke halaman ini dan tentu saja kita menggunakan Redux dalam sistem manajemen negara
kita untuk menambahkan produk baru ke daftar produk yang kemudian juga muncul di sini di toko kami dan yang muncul di sini
di daftar produk kami tentu saja yang dapat kami kelola.
Jadi itulah yang kita miliki di sini.
Sekarang jika kita ketuk edit di sini, jika kita memilih tombol edit ini di sini, maka kita juga akan dibawa ke halaman
produk edit yang sama, tetapi tentu saja sekarang kita memiliki beberapa nilai yang telah diisi sebelumnya di sini, dipopulasikan dengan produk yang kita muat
dan ada bidang-bidang tertentu yang kita
tidak dapat mengedit, misalnya harga tidak boleh diedit karena jika harga dapat diedit, maka jika sudah ada
di keranjang, itu akan menjadi
masalah, jadi kami tidak akan mengizinkan pengeditan harga
di sini, kami akan memungkinkan pengeditan judul, deskripsi, dan imageUrl,
jadi itu adalah sesuatu yang mungkin.
Jadi itulah satu perbedaannya,
kami memiliki bidang yang telah diisi sebelumnya dan harganya tidak dapat diedit.
Jika kita menekan tanda centang dalam mode edit dan kita dapat mengetahui apakah kita sedang mengedit atau tidak
dengan fakta apakah kita menerima ID produk sebagai parameter misalnya, jadi setelah kita selesai
mengedit, kita dapat menekan ikon tanda centang itu dan kemudian kami juga dibawa kembali dan kami hanya menyimpan apa
pun yang kami edit di sini kembali ke produk kami.
Ini aplikasinya di sini.
Seperti yang saya sebutkan, ini akan menjadi dasar untuk modul berikutnya juga, di
sana kami kemudian juga akan menambahkan permintaan HTTP, otentikasi, kami akan melakukan semua itu validasi formulir di sini dengan cara yang
lebih elegan dan sebagainya tetapi
modul ini di sini sekarang adalah sebuah latihan hebat untuk bagaimana membangun aplikasi seperti itu, untuk bagaimana bekerja
dengan komponen, gaya mereka, cara menambahkan navigasi karena jelas kita memiliki banyak navigasi dalam aplikasi
ini dan bagaimana mengelola keadaan kita di aplikasi belanja ini.
Seperti yang saya sebutkan di kuliah terakhir, Anda dapat melewati modul ini, tetapi kemudian Anda harus
menyelami kode yang sudah selesai sehingga Anda dapat mengikuti modul berikutnya tetapi rekomendasi saya tentu saja adalah Anda
a) coba semua ini Anda sendiri dan tentu saja hasil Anda tidak akan sama dengan yang saya dapatkan, jadi Anda
pasti juga harus menonton video saya setelahnya untuk melihat bagaimana saya melakukan ini dan agar Anda memiliki basis kode
yang sama untuk diikuti tetapi ini akan
menjadi latihan yang bagus bahkan jika hasil Anda di sana terlebih dahulu karena tidak ada pendekatan yang
salah atau benar atau b) pilihan Anda yang lain tentu saja adalah Anda tidak mencobanya sendiri dan Anda hanya mengikuti,
juga pilihan yang
valid tetapi saya yakin Anda akan dapatkan sedikit lebih banyak dari kursus jika Anda mencobanya sendiri pertama
tetapi
pada akhirnya, lakukan apa pun yang Anda suka. Dalam kuliah berikutnya, kita akan membahas ini dan mulai membangun aplikasi
ini.