Membangun Aplikasi Mobile Menggunakan MIT APP Inventor (1)

pada tanggal

 Membangun Aplikasi Mobile Menggunakan MIT APP Inventor

Hai, para generasi milenial! 

Kali ini saya akan sedikit berbagi pengalaman terkait dengan penggunaan MIT APP Inventor dalam membangun aplikasi mobile. Nah sebelum memulai percobaan yang sangat sederhana, berikut adalah beberapa tools atau perlengkapan yang perlu disiapkan sebelum belajar menggunakan MIT App Inventor:

  1. email pada gmail yang aktif
  2. koneksi internet yang cukup stabil
  3. laptop sesuai dengan spesifikasi 
  4. emulator (apabila ingin melihat terlebih dahulu hasil dari coding di MIT App Inventor pada laptop kita)
  5. Smartphone yang aktif lengkap dengan paket datanya
Nah setelah mengetahui perlengkapan yang perlu disiapkan, berikutnya adalah persyaratan yang perlu dipenuhi agar dapat belajar dengan lebih mudah dan cerdas, yaitu:

  1. kemampuan pemrograman dasar
  2. algoritma
  3. setidaknya memahami konsep pemrograman berbasis mobile
  4. mau dengan tekun membaca tutorial
Nah itulah persiapan yang perlu dilakukan saat akan belajar mengembangkan aplikasi mobile. Pada intinya belajar menggunakan MIT App Inventor tidaklah rumit apalagi sulit. Coding nya juga tidak serumit dibandingkan menuliskan satu per satu dan dikompilasi sebagaimana java ADT. MIT App Inventor ini memfasilitasi kita sebagai pemula untuk mengembangkan aplikasi mobile dengan lebih mudah. Bock coding untuk menjalankan aplikasinya cukup menyusun dan menuliskan kelengkapannya sebagaimana menyusun puzzle dengan benar. 

Ok, saatnya untuk mencoba program sederhana dalam menggunakan MIT App Inventor ini:

Ilustrasinya adalah, pada tampilan layar HP akan muncul perubahan warna latar. Yang awalnya warna latarnya adalah default (hitam) lalu apabila diklik tombol akan berubah warna latarnya.

Gambar 1. Tamplan Awal

Awalnya tampilan layar monitor HP akan seperti pada Gambar 1. di atas. Semula tersedia tiga tombol (button) yaitu Ganti Warna Merah, Warna Kuning, dan Warna Hijau.

Nah setelah diklik pada masing-masing tombol tersebut maka layar monitor pada HP akan berubah warna latarnya sebagaimana yang disebutkan pada masing-masing tombol tersebut.
Saat diklik Ganti Warna Merah maka tampilan layar latar pada monitor HP akan berubah image menjadi merah, sebagaimana Gambar 2 berikut.
Gambar 2. Warna Latar berubah menjadi Image Merah

Saat diklik tombol Warna Kuning, akan berubah tampilan seperti pada Gambar 3. berikut ini
Gambar 3. Warna Latar Kuning

Nah saat diklik tombol Warna Hijau, akan berubah sebagaimana pada tampilan pada Gambar 4. berikut ini.
Gambar 4. Tampilan Layar Monitor Hijau

Nah berikut adalah komponen yang dibutuhkan:
  1. Screen
  2. Label
  3. Tombol GantiWarna
  4. Tombol KlikWarnaLatar
  5. Tombol Hijau
Masing-masing komponen tersebut disesuaikan dengan yang dibutuhkan dan diatur pada bagian PROPERTIES yang ada di ujung kanan layar, seperti di bawah ini:

Setelah selesai mengatur properties dari komponen yang sudah diletakkan pada Screen (layar) saatnya untuk mengatur bagian Blocks.
Gambar 5. Blocks Coding

Nah untuk menyusun puzzle pada block coding tersebut, caranya klik terlebih dahulu pada tombol yang akan diatur. Misalnya apabila menyusun block pada GantiWarna maka langkahnya adalah:
  1. Letakkan pada tombol GantiWarna
  2. Lalu pilih puzzle When GantiWarna Click Do
  3. Lalu letakkan mouse pada bagian Screen dan pilih set Screen1 Background to 
  4. Lalu pilih  bagian Color 
  5. dan pilih warna yang sesuai
Lakukan cara yang sama seperti langkah di atas hingga pada bagian blocks berubah seperti pada Gambar 5 di atas.

Demikian sharing kali ini. Semoga bermanfaat. Selamat mencoba









Komentar

Posting Komentar