[Week 11] Road to 2nd Sprint Review: Product Details x Search Product
Tanpa terasa 2 minggu telah berlalu sejak terakhir kali saya membagikan progress terakhir saya terhadap aplikasi LapakIkan. Progress terakhir saya yaitu membuat layout kasar untuk detail produk, serta mendesain database untuk aplikasi. Apakah progress selama 2 minggu ini sudah membaik? Sepertinya sudah hehe. Secara garis besar, selama 2 minggu ini saya telah menyempurnakan fitur melihat detail produk, membuat fitur mencari produk, serta sedikit berkolaborasi untuk menyempurnakan database yang digunakan. Saya akan menjabarkan dengan lumayan detail tentang progress pekerjaan saya.
Yang pertama, fitur detail produk. Setelah membagikan kepada pembaca tentang layout detail produk di post week 9 (yang sangat tidak estetik tersebut), akhirnya saya telah me-request pada Hipster kelompok saya untuk membuatkan mock-up yang lebih sempurna untuk fitur detail produk tersebut. Akhirnya saya pun menjadi lebih memiliki bayangan terhadap halaman tersebut, serta dapat menerapkan UI guideline yang ada. Tidak hanya tentang layouting, saya juga telah mencoba untuk mengambil data secara langsung dari Firebase dan berhasil. Fitur ini pun nantinya tinggal disempurnakan dengan menggabungkan dengan fitur beranda serta mencari produk, karena saat mengeklik post/produk yang ada akan me-redirect ke halaman ini. Halaman ini nanti akan menerima parameter dari post/produk tersebut dan juga tetap akan mengambil data dari firebase dengan tujuan agar pengambilan datanya efisien. Selain itu saya juga telah menambahkan chat button yang nantinya dapat digunakan sebagai sarana komunikasi antara penjual dan calon pembeli, yang juga akan dihubungkan dengan fitur chat. Berikut merupakan visualisasi perkembangan fitur detail produk:
Tidak hanya itu, saya juga telah mencoba untuk mengimprove dari segi kode yang digunakan. Berdasarkan informasi yang saya baca dari sumber-sumber di internet, design pattern yang cocok digunakan untuk framework React Native ini adalah Composition pattern. Composition dikatakan sebagai salah satu keunggulan React, yaitu penggunaan Component-nya (Composition of Components), dimana Component bisa dibilang merupakan bagian terkecil dari suatu kesatuan kode. Disebutkan juga bahwa kuncinya adalah membuat Component sekecil mungkin, dan nantinya tinggal mengimpor Component tersebut dan menyatukannya ke dalam sebuah Container. Hal ini tidak hanya memudahkan kita dalam proses pembuatan suatu fitur, namun juga memudahkan kita dalam melakukan test karena scope-nya yang kecil, sehingga kita dapat melakukan tes secara akurat. Berikut merupakan contoh implementasinya:
Fitur kedua yang sedang saya kerjakan ialah fitur untuk mencari produk. Secara singkat, fitur ini bekerja dengan cara memasukkan sebuah query pada search bar, lalu akan menampilkan hasil produk yang cocok. Pada saat pengerjaan fitur ini, saya menghadapi beberapa kendala terhadap teknis yang ada. Salah satunya ialah masalah mengenai database yang kami gunakan, yaitu Firebase, yang sebenarnya kurang men-support pencarian dengan query seperti ini, dikarenakan terbatasnya method yang ada. Setelah mencari tahu pun sebenarnya database yang sangat kaya terhadap fitur pencarian ini ialah ElasticSearch, dan React Native pun juga memiliki reactive-search untuk mendukung hal tersebut. Oleh karena itu saya coba memanipulasinya dengan cara menambahkan data berupa jenis/nama ikan pada produk yang ada (fixed, karena berupa drop-down choice), sehingga sejauh ini pencarian yang ada akan mengecek atribut tersebut sehingga dapat menghasilkan hasil yang tepat. Mungkin ke depannya kami dapat mengembangkannya, namun sejauh ini kami masih akan melakukannya seperti itu. Berikut merupakan progress fitur mencari produk:
Progress selanjutnya ialah mengenai desain database yang ada. Saya berkolaborasi terutama dengan William, yang mengerjakan fitur form membuat produk jual, untuk melakukan finalisasi desain. Walaupun mungkin masih belum final, namun desain ini sepertinya sudah lumayan baik. Untuk desain database untuk produk sendiri terbagi menjadi 2, yaitu untuk informasi yang diletakkan pada beranda, serta informasi tambahan untuk detail produk. Pada gambar yang ada dapat dilihat bahwa atribut-atribut yang ada pada beranda adalah atribut yang memang akan ditampilkan pada post di beranda, tujuannya adalah agar tidak terlalu berat saat meload databasenya. Di beranda pun juga terdapat reference untuk productId, yang nantinya digunakan untuk me-navigate ke fitur detail produk, dimana nanti akan me-retrieve data-data detail pada detail productDetails. Semoga nantinya desain ini masih bisa disempurnakan lagi ke depannya. Berikut contoh strukturnya:
Berikut merupakan progress saya menuju week 11 ini. To-Do list kelompok kami yaitu untuk memfinalisasi fitur-fitur yang ada agar siap digunakan, serta menyatukan semua fitur yang ada agar minggu depan saat Sprint Review sudah siap untuk digunakan dan dipresentasikan. Semoga tim kami dapat menjalani Sprint Review minggu depan dengan baik. Sampai jumpa di post selanjutnya!
