Membuat side menu bar di Kodular

Pada pembahasan kali ini berfokus pada user interface, yang mana akan menjelaskan bagaimana cara membuat side menu bar di Kodular. Pembuatan side menu ini menggunakan komponen “side menu layout” yang sudah disediakan oleh kodular.

Side menu merupakan bagian dari User Interface (UI) pada aplikasi yang bertujuan untuk membuat navigasi yang membantu pengguna dalam berpindah halaman. Biasanya side menu dibuat oleh pengembang jika aplikasi yang dibuat didalamnya memuat banyak data ataupun halaman.

Apabila proses penyajian tampilan aplikasinya tidak baik, maka akan membuat pengguna kesulitan ketika mencari halaman ataupun data yang ingin dilihat pada saat menggunakan aplikasi.

Agar pengguna nyaman dalam mencari halaman ataupun data, maka harus dibuat navigasi yang dapat mempermudah pengguna dalam menemukan halaman atau data dengan cepat.

Sebelumnya Kodular masih sama dengan app inventor, yang mana belum adanya dukungan untuk pengembang dalam membuat navigasi side menu dan biasanya pengembang akan menggunakan bantuan extension khusus untuk membuat side menu.

Namun untuk versi kodular yang terbaru kali ini, sudah terdapat komponen yang dapat membantu pengembang dalam membuat side menu di aplikasi. Komponen yang digunakan yaitu Side Menu Layout, dengan adanya kompomen asli dari kodular ini, pengembang tidak perlu lagi mencari extension.

Cara membuat side menu bar di Kodular

pertama login terlebih dahulu ke Kodular. Lalu buat project baru dan beri nama sidebar, setelah itu buat desainnya terlebih dahulu.

untuk desain yang saya buat kali ini cukup sederhana dan juga tidak banyak dalam penggunaan komponen maupun pembuat blok programnya.

Desain untuk membuat side menu bar di kodular

berikut di bawah ini adalah desain dalam membuat side menu bar di kodular

Adapun komponen penting yang digunakan pada desain kali ini yaitu, “Side Menu Layout”, “Image”, dan “Lottie”. Komponen Side Menu Layout dapat ditemukan pada menu pallet bagian layout lalu klik navigasi dan disitu kamu akan melihat komponennya. Kemudian untuk komponen Image dapat ditemukan di menu pallet bagian user interface dan yang terakhir yaitu komponen Lottie dapat ditemukan di bagian pallet lalu klik Drawing and Animation.

Komponen Side Menu Layout, seperti yang sudah saya jelaskan sebelumnya, komponen ini digunakan untuk membuat side menu. Kemudian untuk komponen Image untuk menampilkan gambar, dan komponen Lottie untuk menampilkan animasi gambar yang bergerak.

untuk gambar dan animasi dapat kamu temukan di internet, khususnya untuk komponen lottie, kamu dapat mencari file animasinya di website lottie itu sendiri. Setelah mendapatkan gambar dan file json milik lottie, jangan lupa untuk upload ke asset di project aplikasi yang sedang dibuat.

Untuk cara penggunaan lottie di kodular, sudah saya jelaskan pada postingan sebelumnya ketika membuat animasi loading di kodular. Jika kamu masih baru dengan penggunaan komponen lottie silahkan baca postingan sebelumnya.

Blok program membuat side menu bar di Kodular

berikut di bawah ini adalah blok program yang saya buat.

adapun penjelasan sedikit mengenai blok program di atas, pada blok program tersebut terdapat 3 buah prosedur yang terdiri dari prosedur icons, prosedur pages, dan prosedur titles.

Prosedur icon berisi list gambar icon yang nantinya akan digunakan untuk membuat icon pada side menu.

Posedur pages berisi list data yang terdiri dari gambar dan animasi json, yang nantinya akan di tampilkan pada komponen image dan komponen lottie.

Prosedur titles berisi list judul yang nantinya akan digunakan sebagai judul halaman.

Program “When Screen1 Initialize” merupakan program yang berguna untuk membuat perintah apa saja yang dilakukan pada saat aplikasi pertama kali terbuka.

Pada program tersebut berisi perintah untuk menampilkan komponen lottie terlebih dahulu ketika aplikasi pertama kali berjalan, lalu di lanjut dengan membuat side menu menggunakan perulangan berdasarkan panjang dari list yang telah di buat di prosedur.

Kemudian program selanjutnya yaitu ketika side menu layout di klik oleh pengguna, maka akan merubah halaman dan juga judul halaman.

Build Projet aplikasi menjadi apk

Setelah selesai proses pengkodean, selanjutnya adalah merubah project yang dibuat menjadi sebuah aplikasi, agar nanti dapat dilakukan pengujian untuk mengetahui apakah aplikasi yang dibuat telah sesuai dengan keinginan.

berikut di bawah ini merupakan demo aplikasi pada tutorial kali ini.

Adapun file aia side menu bar saya lampirkan sebagai bahan pembelajaran, baiklah mungkin cukup ini saja yang bisa saya sampaikan, apabila ada yang ingin ditanyakan, silahkan tulis di komentar.