Kecanggihan teknologi memungkinkan masyarakat melakukan banyak hal dengan cara yang jauh lebih mudah. Bahkan tak sedikit hal yang tadinya terlihat mustahil berubah menjadi hal yang sangat mungkin untuk dilakukan. Ingin punya aplikasi Android sendiri tapi tidak bisa coding? Atau ingin belajar algoritma pemrograman Android tapi tidak ingin berhadapan dengan barisan kode yang rumit? App Inventor memungkinkan hal tersebut dan membuat proses belajar pemrograman terasa lebih mudah dan menyenangkan. Dengan aplikasi ini, membuat aplikasi Android sederhan tanpa coding bukan lagi menjadi hal yang mustahil.
App Inventor sebenarnya merupakan aplikasi open source berbasis web yang diciptakan oleh Google. Tujuan awal pembuatannya adalah untuk mendorong mereka yang tidak bisa coding untuk belajar algoritma pemrograman hingga tertarik untuk mempelajari pemrograman lebih jauh. Namun kini, pengelolaan aplikasi ini telah dialihkan ke MIT (Massachusetts Institute of Technology).
Bagi Anda yang ingin mencoba membuat aplikasi Android, mungkin Anda akan tertarik dengan aplikasi yang satu ini. Dan sebagai salah satu bahan referensi, berikut saya rangkum cara membuat aplikasi Android sederhana dengan MIT App Inventor.
Tidak hanya App Invertor tapi untuk membuat aplikasi ini terkesan lebih nyata kita akan menggunakan sebuah software leapdroid. LeapDroid? Mungkin agak sedikit asing dengan namanya. LeapDroid ini merupakan salah satu emulator yang belum banyak dikenal. LeapDroid ini memiliki tampilan yang sama dengan emulator lainnya. Lah kok bisa? ,namun dengan tampilannya yang sama LeapDroid ini memiliki perbedaan dengan emulator lainnya. emulator ini memiliki keunggulan yaitu ringan, dan mudah digunakan. Dan lebih bagusnya lagi LeapDroid ini memiliki stabilitas yang bagus untuk PC/Laptop kita.
Berikut tampilan applikasi leapdroid setelah diinstall :
Gambar.1.Tampilan Leapdroid
Pada Workshop yang telah saya ikuti di bangku perkuliahan workshop aplikasi internet ini , saya
akan membagikan sedikit ilmu saya dimulai dari hal sederhana terlebih dahulu yaitu "applikasi
penampil data diri (Biodata)" .
Silahkan ikuti langkah-langkah berikut :
1. Membuka Aplikasi MIT App Invertor
MIT App Inventor sebenarnya bisa dijalankan secara online maupun offline. Namun ada perbedaan mendalam antara keduanya, khususnya dalam hal instalasi dan konfigurasi. Ada serangkaian proses yang cukup panjang untuk menginstal MIT App Inventor dan menggunakannya secara offline. Namun untuk sarana pembelajaran, sebaiknya Anda mulai dari versi onlinenya saja. Setidaknya Anda tidak perlu pusing dengan proses instalasi yang rumit dan bisa langsung mulai membuat aplikasi Android.
Untuk mengakses MIT App Inventor online, Anda bisa mengunjungi appinventor.mit.edu. Ini adalah homepage MIT App Inventor. Di sini Anda akan dihadapkan pada berbagai informasi seputar App Inventor, termasuk program-program pendidikan yang terkait dengannya. Sebelum menjalankan MIT App Inventor, pilih menu get started untuk mempelajari lebih jauh tentang tata cara memulai menggunakan aplikasi ini. Untuk mengakses aplikasi MIT App Inventor,dari sini Anda bisa langsung mengklik tautan "create apps" yang mengarah ke ai2.appinventor.mit.edu.
2. Login dengan Akun Google
Saat pertama kali mengakses MIT App Inventor, pengguna akan diminta untuk login dengan
akun Google miliknya. Masukkan username dan password akun Google Anda, setelah itu Anda akan
diarahkan ke halaman permission request yang berisi permintaan izin untuk mengakses beberapa
informasi akun Google Anda. Di sini cukup pilih Allow, setujui terms of service yang muncul
setelahnya dan aplikasi MIT App Inventor akan terbuka.
3. Mulai Membuat Project Baru
Kini halaman utama aplikasi MIT App Inventor telah terbuka. Dari sini, Anda bisa mulai
membuat aplikasi baru dengan mengklik tombol Start New Project atau melalui menu Projects->Start New Project. Selanjutnya beri nama project yang ingin Anda buat.
Setelah selesai membuat nama, akan muncul tampilan seperti dibawah ini. Tampilan yang terbuka saat ini adalah bagian dari menu designer untuk mendesign tampilan dari aplikasi yang akan dibuat.
Untuk membuat logic dari aplikasi android ini, kita dapat meng-klik tombol Blocks. Karena ada 2 bagian pembuatan aplikasi android ini, saya juga akan membahas tutorial ini menjadi 2 bagian. Yang pertama adalah bagaimana cara mendesign aplikasi android ini.
4. Menambahkan Komponen yang Dibutuhkan
Kini tambahkan komponen yang diperlukan terlebih dahulu. Anda bisa mengakses komponen ini pada jendela Palette pada sub menu Drawing and Animation. Drag and drop fungsi label unutk mengisikan form data diri nantinya ke layar smartphone sehingga pada jendela Components muncul komponen baru yakni label. Tambahkan juga komponen lain seperti button. Anda bisa menemukan button pada jendela palette. Tambahkan komponen ini dengan cara yang sama seperti sebelumnya, yakni dengan melakukan drag and drop ke layar smartphone yang ada pada jendela Viewer. Selain Button juga dapat ditambahkan Text Box nantinya.
5. Melakukan Pengeditan Tulisan (design) sesuai yang dibutuhkan
Untuk pengeditan Text pada bagian User Interface disebelah kiri terdapat banyak pilihan.
Drag-and-drop pada bagian Label ke Screen1. Lalu tukar tulisan didalamnya dengan klik label yang ingin diubah tulisannya, kemudian pada bagian properties ubah isi dari Text. Hal tersebut dapat
dilakukan kepada semua label dan button yang telah dimasukkan ke dalam screen1 (Tutorial_ menampilkan_ Data_Diri) . Agar tulisan pada label ke tengah, pada Properties di bagian Width diatur
Fill Parent, kemudian TextAlignment menjadi center. Begitu seterusnya bila ingin melakukan hal
yang sama untuk label lain.
Selain pengeditan text juga dapat dilakukan pengeditan warna yang juga pada kolom properties seperti pada gambar berikut :
Kita juga dapat mengkostumasi tampilan Screen1 dan isinya sesuai keinginan kita. Seperti gambar dibawah, diatur background screen1 dengan menambahkan backgroundimage pada bagian properties. Untuk mengatur ukuran, warna tulisan dan background label dapat diatur di properties.
Seperti gambar berikut :
Setelah melakukan pengeditan background ,pada bagian Layout, pilih VerticalScroll Arrangement dan masukkan ke dalam screen1. Setelah itu, semua components yang ada dimasukkan ke dalam VerticalScrollArrangement. Ini berfungsi apabila ada components yang tidak bisa terlihat secara vertikal pada layer android, kita dapat melihatnya dengan cara men-scrollnya.
Selanjutnya pada bagian pallete klik menu Layout, dan pilih TableArrangement. Atur Coloums 2 dan Rows 5, sesuai dengan berapa banyak kolom dan baris yang ingin dimasukkan kedalam Table
Arrangement . Atur juga width-nya menjadi Fill Parent. Hal ini bertujuan agar label nama dan
textbox yang sebelumnya terpisah dapat dimasukkan menjadi satu .
hasilnya seperti gambar berikut :
Sehingga hasil akhir desain yang dibuat dapat berupa gambar berikut :
dan selesailah tugas kita pada bagian design .
6. Mengisikan Logic Program (Blocks)
Tutorial design telah selesai. Selanjutnya adalah tutorial bagaimana untuk membuat logic programnya. Klik pada bagian Blocks, disamping menu design. Pada bagian sebelah kiri, klik Screen1, lalu akan muncul beberapa logic. Pilih logic “when screen1 .initialize do” dan masukkan ke
dalam viewer.
Pilih pada bagian label nama, dan ambil logic “Set label nama visible to”. Pada bagian Built-in
disebelah kiri, ambil logic false, dan letakkan di sebelah “set labelnama visible to” . Letakkan “set
labelnama visible to false” didalam logic “when screen1 initialize do”. Begitu seterusnya untuk label
NIM, Kelas, Umur, dan juga Status.
Fungsi dari “when screen1 initialize do” “set labelnama visible to false” berarti, ketika screen1
dimulai, maka label nama tidak akan ditampilkan. Untuk logic pada button1 yaitu “when button1 click do ” . Untuk isinya dilakukan hal yang sama dengan screen1, hanya saja nilainya menjadi true, dan isi dari label nama, NIM, Kelas, Umur dan Status tadi menjadi isi dari textbox yang di inputkan setelah meng-klik tombol Tampilkan Data/button 1 dengan menambah logic “set labelname text to textboxnama text” .
Aplikasi android telah selesai.
Klik tombol Build, dan pilih App (save .apk to my computer). Setelah selesai, instal di Leapdroid.
7. Menampilkan Pada Leapdroid
Berikut tampilan pada Leapdroid :
Sekian.
Semoga Bermanfaat .
akun Google miliknya. Masukkan username dan password akun Google Anda, setelah itu Anda akan
diarahkan ke halaman permission request yang berisi permintaan izin untuk mengakses beberapa
informasi akun Google Anda. Di sini cukup pilih Allow, setujui terms of service yang muncul
setelahnya dan aplikasi MIT App Inventor akan terbuka.
3. Mulai Membuat Project Baru
Kini halaman utama aplikasi MIT App Inventor telah terbuka. Dari sini, Anda bisa mulai
membuat aplikasi baru dengan mengklik tombol Start New Project atau melalui menu Projects->Start New Project. Selanjutnya beri nama project yang ingin Anda buat.
Setelah selesai membuat nama, akan muncul tampilan seperti dibawah ini. Tampilan yang terbuka saat ini adalah bagian dari menu designer untuk mendesign tampilan dari aplikasi yang akan dibuat.
Untuk membuat logic dari aplikasi android ini, kita dapat meng-klik tombol Blocks. Karena ada 2 bagian pembuatan aplikasi android ini, saya juga akan membahas tutorial ini menjadi 2 bagian. Yang pertama adalah bagaimana cara mendesign aplikasi android ini.
4. Menambahkan Komponen yang Dibutuhkan
Kini tambahkan komponen yang diperlukan terlebih dahulu. Anda bisa mengakses komponen ini pada jendela Palette pada sub menu Drawing and Animation. Drag and drop fungsi label unutk mengisikan form data diri nantinya ke layar smartphone sehingga pada jendela Components muncul komponen baru yakni label. Tambahkan juga komponen lain seperti button. Anda bisa menemukan button pada jendela palette. Tambahkan komponen ini dengan cara yang sama seperti sebelumnya, yakni dengan melakukan drag and drop ke layar smartphone yang ada pada jendela Viewer. Selain Button juga dapat ditambahkan Text Box nantinya.
5. Melakukan Pengeditan Tulisan (design) sesuai yang dibutuhkan
Untuk pengeditan Text pada bagian User Interface disebelah kiri terdapat banyak pilihan.
Drag-and-drop pada bagian Label ke Screen1. Lalu tukar tulisan didalamnya dengan klik label yang ingin diubah tulisannya, kemudian pada bagian properties ubah isi dari Text. Hal tersebut dapat
dilakukan kepada semua label dan button yang telah dimasukkan ke dalam screen1 (Tutorial_ menampilkan_ Data_Diri) . Agar tulisan pada label ke tengah, pada Properties di bagian Width diatur
Fill Parent, kemudian TextAlignment menjadi center. Begitu seterusnya bila ingin melakukan hal
yang sama untuk label lain.
Selain pengeditan text juga dapat dilakukan pengeditan warna yang juga pada kolom properties seperti pada gambar berikut :
Kita juga dapat mengkostumasi tampilan Screen1 dan isinya sesuai keinginan kita. Seperti gambar dibawah, diatur background screen1 dengan menambahkan backgroundimage pada bagian properties. Untuk mengatur ukuran, warna tulisan dan background label dapat diatur di properties.
Seperti gambar berikut :
Setelah melakukan pengeditan background ,pada bagian Layout, pilih VerticalScroll Arrangement dan masukkan ke dalam screen1. Setelah itu, semua components yang ada dimasukkan ke dalam VerticalScrollArrangement. Ini berfungsi apabila ada components yang tidak bisa terlihat secara vertikal pada layer android, kita dapat melihatnya dengan cara men-scrollnya.
Selanjutnya pada bagian pallete klik menu Layout, dan pilih TableArrangement. Atur Coloums 2 dan Rows 5, sesuai dengan berapa banyak kolom dan baris yang ingin dimasukkan kedalam Table
Arrangement . Atur juga width-nya menjadi Fill Parent. Hal ini bertujuan agar label nama dan
textbox yang sebelumnya terpisah dapat dimasukkan menjadi satu .
hasilnya seperti gambar berikut :
Sehingga hasil akhir desain yang dibuat dapat berupa gambar berikut :
dan selesailah tugas kita pada bagian design .
6. Mengisikan Logic Program (Blocks)
Tutorial design telah selesai. Selanjutnya adalah tutorial bagaimana untuk membuat logic programnya. Klik pada bagian Blocks, disamping menu design. Pada bagian sebelah kiri, klik Screen1, lalu akan muncul beberapa logic. Pilih logic “when screen1 .initialize do” dan masukkan ke
dalam viewer.
Pilih pada bagian label nama, dan ambil logic “Set label nama visible to”. Pada bagian Built-in
disebelah kiri, ambil logic false, dan letakkan di sebelah “set labelnama visible to” . Letakkan “set
labelnama visible to false” didalam logic “when screen1 initialize do”. Begitu seterusnya untuk label
NIM, Kelas, Umur, dan juga Status.
Fungsi dari “when screen1 initialize do” “set labelnama visible to false” berarti, ketika screen1
dimulai, maka label nama tidak akan ditampilkan. Untuk logic pada button1 yaitu “when button1 click do ” . Untuk isinya dilakukan hal yang sama dengan screen1, hanya saja nilainya menjadi true, dan isi dari label nama, NIM, Kelas, Umur dan Status tadi menjadi isi dari textbox yang di inputkan setelah meng-klik tombol Tampilkan Data/button 1 dengan menambah logic “set labelname text to textboxnama text” .
Aplikasi android telah selesai.
Klik tombol Build, dan pilih App (save .apk to my computer). Setelah selesai, instal di Leapdroid.
7. Menampilkan Pada Leapdroid
Berikut tampilan pada Leapdroid :
Sekian.
Semoga Bermanfaat .
Komentar
Posting Komentar