Create list of restaurant menu

Dengan menggunakan Qore, kita dapat menampilkan data dalam bentuk list serta menambahkan detail data dari list tersebut. Sebagai contoh usecase kita akan coba untuk membuat daftar menu restoran dan detail menunya. Simak langkah-langkahnya dibawah ini

1. Kita perlu untuk membuat collection datanya terlebih dahulu di table Qore. dengan menambahkan column name, category dan image. Sehingga tampilan table akan menjadi seperti ini.

2. Setelah menyiapkan collection data kita dapat menuju ke app editor dari aplikasi menu restoran ini.

3. Di halaman editor aplikasi buat halaman navigasi untuk menampilkan daftar menunya. Misalkan kita ingin menampilkannya di halaman menu, maka aktifkan halaman menu terlebih dahulu .

4. Setelah itu mulai menambahkan component list, dan di app editor telah menyediakan beberapa macam type list yakni list, list card, horizontal tile dan vertical. Untuk menu restaurant ini kita dapat memilih component list dengan type list card.

5. Selanjutnya kita dapat menyesuaikan setting component list card, agar data yang ditampilkan di aplikasi sesuai dengan keinginan. Maka yang perlu kita lakukan yakni

   • Menentukan source data yang akan ditampilkan di list, ketika kita klik source data maka akan terdapat pilihan table dan view. Kita dapat memilih table/view menu yang sebelumnya telah dibuat di step 1.

   • Setelah menentukan source maka tampilan component di emulator akan menyesuaikan jumlah card list berdasarkan jumlah data dari view/table yang dipilih.

   • Kemudian sesuaikan data dengan kolom yang ada di table dan view Kamu juga bisa menyesuaikan lagi design setting, ataupun menambahkan thumbnail di component tersebut.

   6. Setelah berhasil mengatur data dan style component list card, selanjutnya kita akan mulai menambahkan action pada component tersebut.

6. Action component ini akan dijalankan apabila user klik salah satu data yang ada di list. Terdapat beberapa pilihan action, dan kita dapat memilih action view detail untuk menampilkan detail menu yang dipilih oleh user.

7. Jika sudah coba untuk mengakses halaman detail yang baru terbentuk setelah kita setup action menjadi view detail.

8. Di halaman detail page kita dapat sesuaikan lagi component dan data yang ingin ditampilkan, untuk itu kita dapat menambahkan component

   • Image -> menampilkan gambar menu

   • Text -> menampilkan judul menu

   • Description text -> menampilkan category menu

   9. Setelah berhasil menyelesaikan step-step di point 8, maka kita dapat mencoba hasilnya dengan klik data menu lainnya maka halaman detail akan menampilkan data yang sesuai.