Oleh Muhammad Iqbal Hanafri

Alhamdulillah pada kesempatan kali ini kita akan membahas salah satu teknologi yang mampu mempercepat pembuatan aplikasi berbasis android, yang merupakan salah satu mobile operating system paling populer saat ini. Sebelum kita masuk ke tutorial pembuatan aplikasi sederhana, kita akan coba lihat penjualan smartphone berbasis aplikasi android saat ini, sehingga sangat beralasan mengapa membuat aplikasi android sangat potensial.

Gambar 1. Grafik Penjualan Smartphone Android

Berdasarkan grafik tersebut, sangat wajar apabila banyak sekali programmer yang kemudian fokus mempelajari teknik-teknik pembuatan aplikasi berbasis mobile ini. Salah satu aplikasi berbasis web yang bisa membantu mempermudah kita semua dalam membuat aplikasi dengan cepat dan mudah adalah menggunakan Thunkable.com, yang merupakan aplikasi berbasis drag and drop logic programming. Baik, kali ini kita akan memberikan sedikit tutorial sederhana untuk membuat aplikasi dengan Thunkable.com.

Langkah awal yang perlu dilakukan adalah silakan anda membuka alamat pada browser anda dengan mengetikkan www.thunkable.com, anda akan melihat halaman awal website Thunkable.com, berikut adalah tampilannya.

 Gambar 2. Halaman Depan Tampilan Website Thunkable.com

Selanjutnya, anda bisa klik Sign in untuk masuk ke dalam aplikasi, tetapi anda akan menemukan tampilan berikut ini untuk konfirmasi pilihan aplikasi, apakah cross platform atau android. Kalau anda ingin membuat aplikasi dengan sistem operasi tidak hanya android saja, maka klik pilihan cross platform dan begitu juga sebaliknya apabila anda ingin fokus membuat aplikasi android. Pada contoh kali ini kita fokus pada pembuatan Classic Android.

Gambar 3. Pilihan Aplikasi Cross Platform atau Classic Android

Gambar 4. Menu Pilihan Sign In Masuk Aplikasi

Silakan anda masuk menggunakan akun Google/Gmail untuk membuat aplikasi. Berikut adalah tampilan setelah anda masuk ke dalam aplikasi Thunkable.com.

Gambar 5. Tampilan Aplikasi Thunkable.com Setelah Sign In

Di awal tampilan setelah Sign in anda akan dituntun untuk mempelajari bagaimana pembuatan aplikasi berbasis android menggunakan drag and drop logic programming di link Youtube.com. Tetapi, pada artikel ini kita akan share juga cara membuat aplikasi sederhana menggunakan tools Thunkable.com. Silakan anda klik button pada sebelah kiri atas Create New App, anda kemudian diminta memasukkan nama aplikasi android yang akan anda buat.

Gambar 6. Masukkan Nama Aplikasi

Sebagai contoh saya ingin membuat aplikasi dengan nama Mr Gloo App, silakan anda berkreasi sesuai dengan keinginan anda.

Gambar 7. Tampilan Layar Thunkable.com dalam Pembuatan Aplikasi

Berdasarkan Gambar 7, sebelah kiri dari aplikasi adalah tool Pallete, tool ini digunakan untuk memberikan pilihan terkait tampilan pada aplikasi android seperti User Interface (ada Button, CheckBox, Date Picker, Image, Label, List Picker, List View dan lainnya), Layout (Horizontal Arrangement, Horizontal Scroll Arrange, Table Arrangement) dan lain sebagainya. Pada bagian tengah terdapat screen tampilan aplikasi, kemudian bagian atasnya ada menu Designer sebagai tampilan hasil, serta Blocks yang merupakan menu logic programming.

Sebelah kanan terdapat Components yang menunjukkan berapa banyak tools Pallete yang kita gunakan dalam membuat aplikasi. Ketika kita menambahkan tools Pallete dengan cara drag and drop ke Screen aplikasi, maka menu Components akan bertambah. Lalu pada bagian paling kanan adalah menu Properties yang akan menyesuaikan dengan kondisi jenis tools Pallete yang kita gunakan. Kemudian pada bagian kanan atas ada menu Screen dan Add Screen, yang merupakan halaman setiap aplikasi android yang tampil.

Langkah awal membuat aplikasi, silakan anda klik drag and drop dari Pallet ke Screen aplikasi.  Silakan pilih Pallete lalu drag and drop menu Image, seketika menu Properties akan menyesuaikan dengan Components yang dipilih.

Gambar 8. Drag and Drop Pallete Image

Selanjutnya, pada menu Properties ada pilihan Picture untuk mengganti gambar. Pilih dan upload gambar sesuai keinginan lalu atur height (tinggi) dan width (lebar) sesuai dengan keinginan.

Gambar 9. Menyesuaikan Ukuran Image / Gambar

Pada setting Properties Image ini saya memberikan nilai 40% untuk Height dan 40% untuk Width. Artinya gambar yang tampil ukurannya hanya 40% dari panjang dan lebar layar atau Screen. Anda bisa mencoba untuk mengisi nilai lainnya agar gambar terlihat menarik dan proporsional.

Selanjutnya kita drag and drop tools pada Pallete yaitu Button, untuk memberikan tombol aplikasi. Pada aplikasi sederhana ini kita akan membuat 2 halaman, pertama adalah halaman depan, lalu yang kedua adalah halaman setelah menu di klik. Silakan drag and drop menu Button tersebut dan letakkan di bawah Image.

Gambar 10. Memasukkan Button

Gambar 11. Rubah Nama Teks Pada Button

Lalu, rubah nama teks pada tombol button agar lebih menarik dan pilih menu Shape untuk bentuk Button (rounded, rectangular, oval). Contoh kali ini yang dipilih adalah rounded, atau melingkar pada ujung tombol. Selanjutnya pilih Components Screen1 dan pilih Properties untuk merubah nama aplikasi pada bagian atas aplikasi.

Gambar 12. Rubah Nama Judul Bar Aplikasi

Gambar 13. Perubahan Nama Bar Aplikasi

Selanjutnya, kita akan tambahkan Screen. Dimana nanti logic programmingnya adalah ketika kita meng-klik button Masuk maka akan berpindah dari Screen1 ke Screen2. Klik Add Screen, lalu ada penembahan Screen, silakan klik Screen1 maka akan ada dropdown menu yang muncul, yaitu Screen2.

Gambar 14. Penambahan Screen

Lalu, pilih kembali Screen1 agar bisa berikan logic-nya. Pada menu bagian atas pilih Blocks untuk memberikan logic programming.

Gambar 15. Tampilan Blocks

Silakan klik Button1 pada sebelah kiri Blocks, lalu pilih bentuk logic When Button1.Click do. Anda bisa drag and drop atau tinggal klik saja.

Gambar 16. Memasukkan Logic Botton

Gambar 17. Pilihan Blocks Control

Kemudian silakan anda pilih menu Built-in yaitu Control, silakan anda cari dan pilih open another screen screenName. Lalu pasangkan logic tersebut dengan cara drag and drop tepat di dalam logic yang pertama.

Gambar 18. Penggabungan Antar Blocks

Lanjutkan dengan memilih Blocks menu Text pada Built-in, lalu pilih menu kosong yang merupakan teks string, silakan drag and drop ke bagian akhir screenName. Silakan anda masukkan teks sesuai dengan nama Screen yang akan kita tuju, dalam hal ini adalah Screen2.

Gambar 19. Memasukkan Blocks String

Berdasarkan logic programming Blocks ini bisa kita terjemahkan, Ketika Button1 di klik, maka buka screen lainnya yaitu Screen2. Alhamdulillah sudah jadi aplikasi kita, silakan anda coba dengan cara live test untuk melihat hasilnya langsung atau dengan download file .apk agar bisa segera diinstall di smartphone anda.

Gambar 20. Thunkable Live

Gambar 21. Ekspor Aplikasi ke .apk Android

Selamat mencoba, dan selamat berkreasi dengan jenis aplikasi yang lebih atraktif lainnya.