Membuat Aplikasi Pembelajaran menggunakan App Inventor secara Online

 

Membuat Aplikasi Pembelajaran menggunakan App Inventor 

App Inventor for Android merupakan aplikasi web opensource (free) untuk membuat aplikasi android. App Inventor untuk Android awalnya disediakan oleh Google dan sekarang dikelola oleh Massachusetts Institute of Technology (MIT). App Inventor dapat digunakan untuk membuat aplikasi perangkat lunak berbasis Android.

Yang menjadi keunggulan dari aplikasi ini adalah App Inventor ini berbasis visual block programming, yang artinya kita dapat membuat kode tanpa perlu mahir memahami kode pemograman dan bahkan tanpa kode satupun karena kita akan melihat, menggunakan, menyusun drag and drops block yang berupa symbol perintah dan fungsi dalam membuat aplikasi. Di sini kita akan membuat aplikasi pembelajaran yang di dalamnya terdapat materi dan video pembelajaran serta quiz di akhir sebagai evaluasi. Lantas bagaimana cara penggunaanya? Berikut tutorial cara menggunakan App Inventor secara online.

1.      Pertama-tama hal yang harus disiapkan adalah akun gmail. Jika kamu belum memiliki akun gmail, maka buatlah terlebih dahulu.

2.  Jika akun gmail sudah siap, bukalah browser kamu kemudian ketikkan di Address bar https://ai2.appinventor.mit.edu/. Jika kamu belum login keakun gmail, maka akan tampil halaman Login Gmail. Isikan Username dan password akun gmail mu, dan pilih tombol Sign In/Masuk. Kemudian akan muncul tampilan berikut

3.  Pilihlah start new project untuk membuat projek baru kemudian beri nama projek tersebut sesuai dengan kebutuhan. Kemudian klik ok seperti tampilan berikut. 

4.   Setelah klik ok maka akan diarahkan pada bagian halaman awal pembuatan aplikasi.  Pada Screen 1, silahkan untuk memasukkan komponen yang dibutuhkan. Buatlah layout aplikasi yang akan dibuat. Contoh di sini adalah membuat splash Screen untuk halaman pembuka aplikasi.

5.      Pertama berilah nama untuk Screen ini, di halaman pertama kita akan membuat halaman Home. Ubahlah properties about Screen dan title menjadi home

6.    selanjutnya kita akan menambahkan Background gambar. Langkahnya yaitu, klik tombol upload file yang terletak di menu Component. Kemudian pilih file/gambar yang akan digunakan sebagai Background

7.  Setelah selesai mengupload gambar, gunakan properties backgorund image dan pilih gambar yang telah di upload tadi

8.      Tambahkan komponen-komponen lain yang akan ditampilkan pada Screen 1 ini, sebagai contoh pilihlah komponen TableArangement, Horizontal Arrangement, Image, Label, Button dan Clock. Fitur ini terletak di menu pallete user Interface dan Layout

9.      Komponen-komponen yang telah ditambahkan tadi, akan muncul di kolom Components dan tampilannya akan seperti gambar berikut

10.  Setelah menambahkan komponen-kompenen tersebut, kemudian upload gambar yang akan digunakan pada komponen image, kemudian ubah teks pada label menjadi judul dan pertanyaan kesiapan memulai aplikasi pada Screen home ini, lalu ubah pula teks pada button ini menjadi tulisan “Start”. Kita juga dapat mengatur warna dan tulisan sesuai dengan keinginan. Hasilnya akan seperti gambar berikut

11.  Setelah selesai di Screen 1, selanjutnya adalah berpindah ke Screen 2. Caranya yaitu klik tombol  add Screen. Kemudian klik ok. Screen 2 ini kita gunakan untuk halaman menu. Sama seperti sebelumnya, ubah dahulu Background gambar pada Screen ini. Dengan cara menguploadnya terlebih dahulu.

12.  Kemudian komponen-komponen yang digunakan adalah sebagai berikut. Beri nama Screen2 ini dengan about Screen Menu dan title Main Menu

13.  Kemudian Ubahlah teks pada komponen Label1 ini menjadi main menu. Pada Komponen Table Arrangement1, aturlah kolom dan barisnya dengan kolom 2 dan baris 2. Kemudian masukkan  Horizontal Arrangement pada masing-masing tabel, lalu tambahkan button pada masing-masing horizontal Arrangement tadi.  Penggunaan tabel dan horizontal arrangement ini memudahkan kita untuk mengatur agar setiap komponennya itu terletak di tengah-tengah Screen.

14.  Ubahlah Background Image pada button tadi menggunakan gambar-gambar yang akan digunakan sebagai tombol, di sini kita gunakan gambar-gambar yang telah dibuat sebagai berikut

Pada Screen main menu ini, menu yang akan ditampilkan adalah tujuan pembelajaran, materi pembelajaran, kompetensi dan quiz.

15.  Setelah mengubah Background Image pada masing-masing button, maka hasil akhirnya akan menjadi seperti ini.

16.  Jika tampilan pada Screen 2 ini dirasa sudah cukup, kita akan berpindah pada Screen berikutnya, yaitu Screen 3.

17.  Screen ini kita gunakan untuk menjadi halaman kompetensi dan tujuan pembelajaran. Sama seperti sebelumnya, kita ubah terlebih Background Image. Di sini kita gunakan gambar yang telah diedit dan diberi tulisan berupa kompetensi dan tujuan pembelajaran. Atau bisa dilihat gambar berikut

18. Setelah mengubah Background pada Screen ini, kemudian tambahkan komponen tablearrangement dengan ketentuan 3 kolom dan 2 baris. Setelah itu tambahkan 3 button pada tabel tersebut. Tombol ini berfungsi untuk tombol next, previous dan home. Ubahlah Background Image  pada masing-masing button tersebut.

Setelah itu tambahkan beberapa table arrangement agar table arrangement yang kita tambahkan di awal tadi tetap berada di atas.

19.  Aktifkan fitur scroll yang ada pada properties seperti gambar berikut

20.  Hasil untuk Screen 3 menu kompetensi dan tujuan pembelajaran adalah sebagai berikut

21.  Setelah selesai di menu kompetensi dan tujuan pembelajaran, kita berpindah ke Screen selanjutnya, yaitu menambahkan materi yang akan dibahas pada aplikasi ini. Untuk memasukkan materi pada Screen ini, fitur yang digunakan hanyalah label dan image. Label ini digunakan untuk menambahkan teks berupa materi tadi. Kita perlu menggunakan beberapa label, karena jika hanya menggunakan  1 label maka materi akan tertulis kepinggir bukan ke bawah. Jangan lupa mengaktifkan fitur scroll pada Screen ini.

22.  Di bagian bawah Screen ini, tambahkan pula tombol next.

23. Buatlah materi tidak dalam 1 Screen, agar tidak terlalu panjang scroll ke bawahnya. Sehingga kita tambahkan Screen untuk memasukkan materi selanjutnya. Lakukan hal yang sama untuk Screen selanjutnya, yaitu gunakan fitur label, image dan 2 button yaitu next dan prev. Disini saya memasukkan materi ke dalam 5 Screen beserta rangkumannya.

24.  Pada akhir materi pembelajaran, kita akan menambahkan pula video pembelajaran. Caranya yaitu dengan menggunakan Component  WebViewer pada pallete User Interface 

25.  Setelah itu, pada properties terdapat menu HomeUrl . Isilah dengan menggunakan link youtube yang akan digunakan sebagai video pembelajaran pada aplikasi ini https://youtu.be/RKumzgtFaU8 

26.  Setelah memasukkan tampilan akan seperti ini. Video akan terlihat ketika kita sudah mengeksport file ini menjadi sebuah apk.

27.  Pada Screen selanjutnya, kita akan memasukkan quiz pada platform lain yang telah dibuat. Di sini kita sudah membuat quiz di platform proprofs.

• a.      Pertama kita gunakan gambar yang akan tampil pada halaman atas quiz.
• b. Kemudian tambahkan label berupa teks ”setelah selesai memahami materi pembelajaran mengenai pemanasan global, isilah latihan soal berikut”
• c.  Setelah itu, gunakan kembali komponen WebViewer pada pallete. Pada HomeUrl, masukkan link quiz yang telah dibuat tadi https://www.proprofs.com/quiz-school/ugc/story.php?title=test-global-warming_2mw

• d.   Tambahkan fitur button untuk tombol home, prev dan Finish. Tampilan akhirnya akan seperti ini 
  

28.  Pada Screen terakhir, kita akan mengisi dengan profil dari pembuat aplikasi ini.

29.  Setelah selesai memasukkan komponen, sekarang kita akan mengatur block atau memasukkan kode-kode agar tombol-tombol yang kita masukkan tadi berfungsi, caranya yaitu klik tombol blocks yang terletak tepat di sebelah Designer

• a.     Di mulai dari halaman awal, karena pada halaman pertama ini adalaah berupa splash Screen  maka, block control yang digunakan lumayan banyak, yaitu sebagai berikut

Atur setiap komponen menjadi seperti gambar di atas meliputi image, label dan button. Di halaman 1 itu tadi button1 tersebut berfungsi sebagai tombol start, maka kita akan diarahkan pada halaman 2 atau halaman selanjutnya. Block Clock ini berfungsi agar setiap komponen tersebut muncul secara berurutan sesuai dengan waktu yang telah ditentukan.

• b.     Untuk Screen2, berikut block control yang digunakan pada setiap tombol

• c.   Screen selanjutnya yaitu kompetensi dan tujuan pembelajaran, hanya terdapat 3 tombol yaitu main menu, next dan prev. Maka Block Control yang digunakan adalah

• d.     Screen selanjutnya, halaman awal materi pembelajaran yaitu hanya tombol next, dan block control yang digunakan yaitu

        Halaman selanjutnya untuk materi pembelajaran yaitu

• e.      Selanjutnya Screen untuk quiz, block control yang digunakan adalah home, Prev, dan finish sebagai berikut.
  

30.  Setelah selesai mengatur blocks, kita bisa mengontrol atau melihat dari preview aplikasi yang sudah dibuat di handphone yaitu dengan menggunakan Connectà kemudian pilih AI Companion. Pastikan di handphone kita telah menginstal aplikasi MIT AI2 Companion.

31.  Masukkan kode pada web ke aplikasi handphone MIT AI2 Companion

32.  Jika selesai melihat preview, selanjutnya kita akan mengubah projek yang telah dibuat ini menjadi sebuah aplikasi yang bisa di instal dan digunakan di handphone. Caranya yaitu dengan klik Build yang terletak di deretan menu paling atas

Kemudian pilihlah Android App (.apk). tunggulah hingga progress bar ini selesai

Setelah selesai, akan muncul barcode dan juga tombol download apk.

Barcode ini akan mengarahkan kita pada proses pendowloadan dan penginstalan aplikasi ini. Pindai barcode menggunakan handphone. Maka projek yang kita buat ini, akan terinstall di handphone kita.

Setelah selesai download dan install, Aplikasi siap untuk digunakan dan di bagikan kepada peserta didik, berikut beberapa tampilan pada aplikasi yang telah kita buat tadi.

Kamu bisa mengunduh hasil akhir dari aplikasi yang telah kita buat tadi pada link berikut!

Link Unduh Aplikasi

SEMOGA BERMANFAAT.