Membuat aplikasi pembelajaran dengan App Inventor

Pada kesempatan kali ini saya akan menjelaskan bagaimana cara membuat aplikasi pembelajaran dengan App Inventor. Bagi yang belum tahu, App Inventor adalah sebuah website yang menyediakan banyak fitur untuk membantu pengguna dalam membuat aplikasi android secara online dan mudah.

Membuat aplikasi pembelajaran berbasis android dengan app inventor
Membuat aplikasi pembelajaran berbasis android dengan app inventor

Dewasa ini perkembangan teknologi sangatlah pesat, terutama penggunaan teknologi elektronik sebagai media pembelajaran yang dapat membantu proses belajar dan mengajar atau yang biasa disebut dengan E-Learning. Biasanya E-Learning menggunakan media pembelajaran elektronik seperti Komputer, Televisi, dan Radio. Namun ada perkembangan lebih dalam lagi dari E-Learning yaitu Mobile-learning. Mobile learning adalah model pembelajaran yang memanfaatkan aplikasi pada smartphone untuk proses belajar dan mengajar.

Apa itu aplikasi pembelajaran?

Aplikasi pembelajaran adalah sebuah media bantu ajar yang dibuat dalam bentuk perangkat lunak dengan tujuan untuk membantu proses belajar dan mengajar menjadi lebih menarik, biasanya dalam bentuk berbasis web, dekstop, maupun aplikasi android.

Lalu apasih kelebihan dari aplikasi pembelajaran berbasis android?

Aplikasi pembelajaran berbasis android ini termasuk kedalam jenis Mobile-learning. Berikut beberapa kelebihan dari Mobile-learning:

  1. Proses instalasinya yang mudah, karena hanya perlu perangkat smartphone saja, yang mana saat ini hampir semua orang menggunakan smartphone.
  2. Proses pembelajaran dapat dilakukan kapanpun dan dimanapun.
  3. Dapat melakukan kontrol jarak jauh antara guru dan siswa saat melakukan sistem pembelajaran dari rumah.

Maka dari itu, saat ini banyak orang-orang yang memanfaatkan aplikasi pembelajaran berbasis android sebagai alat bantu ajar yang efisien, karena proses kegiatan belajarnya yang mudah dan dapat dikontrol dari jarak jauh.

Nah pada tutorial kali ini, saya akan memberikan contoh membuat aplikasi pembelajaran berbasis android dengan app inventor yaitu aplikasi pembelajaran pengenalan hewan berbasis android. Tentunya dalam proses pembuatan aplikasinya dibantu dengan App Inventor.

Cara membuat aplikasi pembelajaran dengan App Inventor berbasis android

Pertama login ke situs web App Inventor, masuk dengan email google kemudian buatlah project baru dan berikan nama projectnya sesuai dengan keinginanmu. Bagi yang baru pertama kali menggunakan App Inventor saya sarankan untuk belajar membuat aplikasi sederhana terlebih dahulu.

Desain aplikasi pembelajaran app inventor

setelah itu buatlah desain aplikasi seperti gambar di bawah ini.

Desain aplikasi pembelajaran app inventor
Desain aplikasi pembelajaran app inventor

Untuk desain aplikasi, kamu dapat membuatnya lebih bagus dari contoh yang saya berikan karena contoh desain ini cukup sederhana. Pada tahap desain, saya menggunakan 3 screen yaitu Screen1, Screen Home dan Screen Mulai.

Baca juga : membuat game dengan app inventor

Pada Screen1 saya membuat halaman splash screen yang hanya menampilkan logo dan penjelasan dari aplikasi pembelajaran android. Adapun komponen yang digunakan yaitu Image dan Clock. Komponen Image dapat ditemukan di bagian menu pallet “user interface” sedangkan komponen Clock dapat ditemukan di bagian menu pallet “sensor”.

Pada Screen Home terdapat komponen Image, Button dan Notifier. Komponen Button dan Notifier dapat ditemukan di bagian menu pallet “user interface”. Komponen Notifier digunakan untuk membuat notifikasi pada aplikasi pembelajaran.

Lalu yang terakhir yaitu Screen Mulai terdapat komponen Button, Image, Sound dan Label. Komponen Sound dapat ditemukan pada menu bagian pallet “media”. Untuk membuat desain berbentuk kotak, saya menggunakan komponen vertical arrangement dan horizontal arrangement.

Kemudian jangan lupa untuk mengupload data gambar ataupun suara hewan ke asset di App Inventor. Lihat gambar di bawah ini

Upload data gambar dan suara ke asset app inventor
Upload data gambar dan suara ke asset app inventor

Untuk data gambar dan suara disini semuanya bersumber dari internet. Jika kamu ingin menggunakan gambar yang diambil sendiri jangan lupa untuk mengompres gambarnya terlebih dahulu sebelum di upload.

Setelah proses desain aplikasi pembelajaran selesai, tahap selanjutnya ialah membuat kode program.

Kode block program aplikasi pembelajaran app inventor

Agar aplikasi yang dibuat dapat berfungsi sebagaimana mestinya, maka dibuatlah sebuah program. Program pada App Inventor ini berbasis visual blok yang dalam proses pembuatan kode programnya hanya melakukan drag and drop. Berikut di bawah ini adalah kode programnya:

Block program aplikasi pembelajaran app inventor pada screen1
Block program aplikasi pembelajaran app inventor pada screen1

Block program di atas diterapkan pada Screen1. Adapun penjelasan dari program tersebut, “when screen1 intialize do” maksudnya adalah ketika aplikasi pertamakali berjalan apa yang akan dilakukan terlebih dahulu? nah disitu saya isi dengan melakukan perintah pembuatan waktu/timer pada komponen Clock senilai 2300 atau 2,3 detik.

kemudian ketika komponen Clock berjalan, atur komponen “clock timer enable” menjadi false agar tidak mengulang timer dan apabila timer sudah mencapai 2,3 detik maka akan secara otomatis masuk ke Screen Home.

Lalu pada program “when Screen1 BackPressed do close application” maksudnya adalah ketika pengguna menekan tombol back pada smartphone maka pengguna akan keluar dari aplikasi.

Block program aplikasi pembelajaran app inventor pada Screen Home
Block program aplikasi pembelajaran app inventor pada Screen Home

Pada block program diatas diterapkan di Screen Home. Ketika komponen Button Keluar dan tombol Backpressed pada smartphone di tekan maka akan menampilkan notifikasi untuk meyakinkan pengguna apakah benar ingin keluar dari aplikasi pembelajaran.

Selanjutnya ketika pengguna klik “Ya” maka pengguna akan keluar dari aplikasi, sebaliknya jika klik “Tidak” maka pengguna akan tetap berada di aplikasi. Nah ketika Button Mulai di klik maka pengguna akan masuk ke Screen Mulai.

Block program aplikasi pembelajaran app inventor pada Screen Mulai
Block program aplikasi pembelajaran app inventor pada Screen Mulai

Untuk kode program di atas diterapkan pada Screen Mulai. Adapun penjelasan dari program diatas, ketika “screen mulai” terbuka pertama kali akan mengatur untuk “button kiri” untuk tidak ditampilkan, kemudian panggil fungsi mulai.

ketika fungsi “mulai” berjalan maka akan menampilkan data gambar, suara dan penjelasan ke layar smartphone. Data-data tersebut dibuat dalam bentuk list pada fungsi data, sehingga proses pemanggilan datanya menjadi lebih mudah.

“Button kiri” dan “Button kanan” berfungsi sebagai previous dan next dalam menampilkan materi pengenalan hewan, ketika “button suara” di klik maka akan aplikasi akan mengeluarkan suara hewan. Lalu pada “Button Kembali” ketika di klik akan kembali ke halaman beranda yaitu Screen Home.

Build project mejadi aplikasi

Setelah proses pengkodean selesai, tahap selanjutnya adalah merubah project menjadi aplikasi dengan cara klik “build” lalu pilih “download sebagai aplikasi”.

berikut di bawah ini adalah dokumentasi dari project aplikasi pembelajaran yang sudah jadi

dokumentasi aplikasi pembelajaran app inventor pengenalan hewan

Baiklah cukup sampai sini saja tutorialnya, jika ada yang tidak paham silahkan tulis di komentar.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *