Modul Pembelajaran

Membuat Aplikasi Mobile Android Tanpa Coding dengan App MIT Inventor 2

Untuk Kelas X & XI IPA/IPS

SMA DON BOSKO

Oleh :
Khakim Assidiqi N.H.
Jefri Nur Cahyo

PPL UNNES 2019

A. Berkenalan dengan App Inventor
Apa itu App Inventor?
App Inventor adalah sebuah tool untuk membuat aplikasi android, yang
menyenangkan dari tool ini adalah karena berbasis visual block programming, jadi kita
bisa membuat aplikasi tanpa kode satupun. Mengapa disebut visual block programming?,
karena kita akan melihat, menggunakan, menyusun dan drag-drops “blok” dalam
membuat aplikasi, dan secara sederhana kita bisa menyebutnya tanpa menuliskan kode
program / coding.

B. Mulai Membuat Aplikasi

1. Untuk memulai, buka alamat berikut:

http://ai2.appinventor.mit.edu
2. Login dengan akun Google kalian.
3. Akan muncul tampilan daftar project seperti berikut, klik tombol “​Start new
project”​ .

Gambar 1. Tampilan daftar project

4. Tuliskan judul program, sebagai contoh “BelajarAndroid1”, klik “Ok”

 Gambar 2. Menambahkan project baru.

5. Maka akan muncul tampilan workspace seperti berikut

Gambar 3. Penjelasan Menu

Sebelum melanjutkan pembuatan disini ada beberapa menu yang perlu diketahui :

1. Project (warna hitam) -> adalah menu awal berisi antara lain start new project,
save project, Delete Project.
2. Connect (merah) -> menu untuk menghubungkan project kita dengan
menggunakan media antara lain. MIT App Inventor Companion (bisa di
download di Google Play Store). Berfungsi sebagai emulator untuk project kita.
Jadi kita bisa langsung mencoba aplikasi yang kita buat tanpa harus
mendownloadnya terlebih dahulu.
3. Build (kuning) -> menu untuk download aplikasi kita. Dengan save project kita
ke komputer. Atau melalui scan Barcode yang akan menuju ke link download
yang bisa langsung di download dari Smartphone.
4. (biru) -> untuk menambah screen dan menghapus screen jika membutuhkan
beberapa screen.
5. Menu Designer ​untuk mendesain aplikasi kita dalam pengaturan layout, tombol,
gambar dan lain-lain.
6. Block​ akan berisi logika dari aplikasi kita.
C. Membuat Aplikasi ​Self Introduction
Pada kesempatan kali ini kita akan belajar membuat sebuah program aplikasi
sederhana untuk menampilkan informasi diri seperti Nama, Kelas, Hobi, Alamat dan
Kontak. Serta menambahkan foto/gambar di atas informasi tersebut, kurang lebih hasil
jadi akan terlihat seperti pada gambar berikut.

Gambar 4. Tampilan Jadi Aplikasi ​Self Introduction

Berikut langkah - langkah dalam membuat aplikasi ​Self Introduction ​:
1. Buat project baru dengan mengklik menu “​Projects​ > ​Start New Project​”.

Gambar 5. Membuat Project baru (New Project)

2. Selanjutnya beri nama project, sebagai contoh dinamai “​AndroidPerkenalan​”.

Gambar 6. Menamai Project

3. Setelah mengklik “Ok”, maka akan tampil layar sebagai ini

Gambar 7. Tampilan Lembar kerja kosong (Blank Workspace)

4. Karena dalam aplikasi ini nantinya membutuhkan gambar untuk ditampilkan,

maka unduh terlebih dahulu file ​assets y​ ang berisikan kumpulan gambar pada link
berikut:
https://bit.ly/DB-TIK-Android1
atau bisa juga menggunakan foto kamu sendiri.

5. Masukan sebuah gambar kedalam ​Screen 1 d​ engan cara menarik menu Image
pada bagian User Interface ke dalam tampilan layar putih (​Screen 1)​ .

Gambar 8. Memasukan gambar

6. Unggah (​Upload)​ foto kalian kedalam aplikasi App Inventor, dengan cara
mengklik tombol “​Upload File ...​” yang tertera pada window ​Media. ​Klik
“​Choose File...”​ dan pilih gambar yang ingin di masukan.

Gambar 9. Upload File gambar atau foto

Gambar 10. Pilih file yang ingin di upload

7. Langkah terakhir untuk memasukan gambar adalah dengan memilih gambar yang
ditampilkan, Pada bagian window ​Properties, k​ lik “Picture” dan pilh gambar
yang diinginkan, lalu klik “Ok”.
 Gambar 11. Memilih gambar yang ditampilkan

8. Selanjutnya masukan 4 Label ke dalam screen dan ganti Text menjadi ​Nama.
Kelas, Hobi, dan Hubungi Saya ​dan centang ​FontBold p​ ada window ​Properties.

Gambar 12. Membuat label

9. Lalu masukan label baru di antara ​Nama d​ an ​Kelas d​ an ganti ​Text m
​ enjadi ​Nama
Kamu.​ Masukan juga label baru di antara ​Kelas d​ an ​Hobi​ dan ganti ​Text m
​ enjadi
Kelas ​kamu saat ini (contoh: XII IPA 1). Masukan juga label baru di antara ​Hobi
dan ​Hubungi Saya ​dan ganti ​Text ​menjadi ​Hobi Kamu​ saat ini (contoh: Menulis,
Mendengarkan Musik, Menyanyi).
Jika kamu mengikuti langkah dengan benar maka akan muncul tampilan sebagai
berikut:

Gambar 13. Tampilan setelah memasukan Label

10. Selanjutnya buka Window ​Layout, ​caranya dengan mengklik judul Window.

Gambar 14. Membuka Window Layout

11. Buat sebuah layout mendatar baru, sehingga tombol dapat disusun berjajar ke
samping. Caranya tarik “​HorizontalArrangement”​ ke bawah Label Hubungi Saya.

Gambar 15. Membuat Layout Horizontal

12. Masukan 3 tombol kedalam “HorizontalArrangement” dengan cara menarik
tombol tersebut. Selanjutnya ubah Text tombol masing - masing menjadi
Instagram, Twitter, E-mail.

Gambar 16. Menarik Tombol Ke Horizontal Arrangement

13. Masukan sebuah “Activity Starter” kedalam Screen 1, caranya adalah dengan
membuka Window “Connectivity” dan menarik “Activity Starter”. Komponen ini
tidak akan tampil di layar, sehingga akan masuk pada “Non visible Component”.

Gambar 17. Komponen tidak terlihat.

14. Langkah selanjutnya adalah beralih dari Tab ​Designer k​ e Tab ​Blocks d​ engan
mengklik tombol yang berada di kanan atas.

Gambar 18. Beralih ke ​Blocks

15. Kita ingin membuat tombol Instagram ketika di klik akan menampilkan halaman
instagram kalian. Untuk melakukan hal tersebut buatlah sebuah blok logika baru
dengan mengklik “​Button1”​ dan pilih “​When Button1.Click”​ . Selanjutnya klik
​ ctivityStarter1​.​Action to” tepat berada dibawah
“ActivityStarter1” dan tarik“​Set A
“​When Button1.Click​”. Masukan juga “Text” atau berlogo tanda petik “ ” yang
​ ctivityStarter1.​ A
ada pada blok “Built-in” ke samping “​Set A ​ ction to”, sehingga
terlihat seperti ini.
 Gambar 19. Memasukan Blok Logika

16. Lanjutkan dengan mengubah isi Text (warna merah muda) dengan
“android.intent.action.VIEW”. Serta menambahkan block ​DataUri d​ an
StartActivity s​ eperti pada gambar dibawah. Jangan lupa untuk mengganti
nama_instagram_kamu​ dengan username ​Instagram​ kamu.

Gambar 20. Blok logika tombol Instagram

17. Masukan blok baru untuk ​Button2​ dan ​Button3​ sehingga tampilannya seperti ini.

Gambar 21. Menambah Logika Untuk Button 2 dan 3

18. Selesai, selanjutnya adalah mengcompile dan menjalankan aplikasi pada
smartphone Android teman-teman. Caranya adalah dengan mengklik menu “Build
> App (Provide QR Code for .apk)”. Tunggu proses build hingga muncul QR
code, dan scan menggunakan aplikasi Pemindai/Kamera/QR Code Scanner pada
smartphone. Maka aplikasi akan di download, lanjutkan proses penginstalan.

Gambar 22. Scan QR Code

Gambar 23. Proses download

Gambar 24. Tampilan Hasil Akhir
D. Aplikasi Periksa Kelulusan Nilai
Kali ini kita akan membuat sebuah program aplikasi untuk mengetahui kelulusan
dari nilai kita. Aplikasi kali ini kita tidak hanya mendesain tampilan, tetapi kita akan
belajar menggunakan Blocks pada App Inventor. kurang lebih hasil jadi akan terlihat
seperti pada gambar berikut.

Berikut langkah - langkah dalam membuat aplikasi ​Cek Nilai ​:

1. Buat Projects baru dan beri nama ​CekNilaiNamaKamu
2. Setelah masuk di lembar kerja kosong, langkah selanjutnya yaitu memberikan
Vertical Arrangement ​yang terdapat di ​Palette ​> ​Layout​, agar lebih mudah
mengatur komponen-komponen layout.

​ enjadi ​Center​,​ ​dan pada

3. Di Bagian Properties atur ​AlignHorizontal dan AlignVertical m
bagian ​Width a​ tur menjadi​ ​Fill parent.
  
4. Langkah selanjutnya berikan komponen ​TextBox​ dan ​Button y​ ang terdapat di
Pallete ​> ​User Interface​ kedalam ​VerticalArrangement1​ ​yang sudah dibuat
dengan cara drag & drop. ​TextBox d​ isini berguna untuk menginput nilai yang
ingin dihitung, untuk ​Button b​ erguna untuk tombol proses.
  
 
   
  
5. Pada lembar kerja klik pada bagian TextBox dan Button lalu ubah Properties
seperti gambar berikut :
a. b.
6. Drag Label yang terdapat di ​Pallete ​>​ User Interface​ ke dalam lembar kerja
dibawah ​VerticalArrangement1​ ​dan ubah ​Properties​, ​, Label disini berguna
untuk menampilkan hasil dari proses :
FontZize = 40
Height = 200 Pixels
Width = Fill Parent

7. Selanjutnya kita buat ​VerticalArrangement2​ ​untuk tombol Reset dan rubah

Propertiesnya seperti gambar :
8. Drag Button ke dalam ​VerticalArrangement2​ ​rubah pada bagian Properties dan
hasilnya seperti gambar berikut :
9. Buatlah sebuah blok logika baru dengan ​membuat Variable baru yaitu Nilai dan
Proses. Variable Nilai berfungsi untuk menyimpan data Input, dan Variable
Proses berfungsi untuk menampilkan hasil Proses ke dalam Label.

Klik Math, pilih letakan di samping Variable Nilai, lalu klik Text pilih

letakan di samping Variable Proses. Perhatikan gambar berikut :

10. Kita ingin membuat tombol CEK berfungsi ketika di klik akan menampilkan hasil
dari nilai yang di input. Untuk melakukan hal tersebut klik “​Button1”​ dan pilih

“​When Button1.Click​”. Selanjutnya klik Variables dan pilih letakan

tepat berada dibawah “​When Button1.Click​” lalu klik ​“TextBox1” p​ ilih

“TextBox1 . Text” , letakan disamping . Rubah titik-titik menjadi “set

global Nilai to”. Perhatikan gambar berikut :

Berikutnya klik ​“Control” ​pilih yang paling atas ​“if then” l​ etakan dibawah “set

global Nilai to”. Klik ​“Math” p​ ilih letakan disamping ​“ if ” k​ emudian

 klik Varables dan pilih letakan di kolom pertama lalu klik ​“Math” ​pilih

(rubah 0 menjadi 75) letakan dikolom kedua, rubah “=” menjadi “kurang
dari atatu sama dengan (<)” seperti gambar berikut :

Berikutnya klik Variables pilih letakan disamping ​“then” ​dan rubah

“set global Proses to”, kemudian klik Text dan pilih (berikan kata-kata

“Jangan Menyerah, Silahkan Coba Lagi”) letakan disamping seperti

gamar berikut :

Klik logo setting dibelakang “if” letakan “else” diibawah “if” perhatikan gambar
berikut :

1. 2.
 Akan muncul kata “else” dibawah “then” kemudian klik Variables pilih

letakan disamping ​“else” d​ an rubah “set global Proses to”, kemudian

klik Text dan pilih (berikan kata-kata “Selamat Anda Lulus Ujian”)

letakan disamping sehingga terlihat seperti ini :

Berikutnya klik “Label1” pilih letakan dibawah “else”

kemudian klik “Variables” pilih (rubah menjadi global Proses),

perhatikan gambar berikut :

11. Diatas adalah Block untuk tombol “CEK”, berikutnya kita akan membuat Block
untuk tombol “Reset”. Pertama kita klik ​Button2​ lalu pilih “​When Button2.Click”​ .

Kemudian klik TextBox1 lalu pilih letakan disamping “do”

lalu klik Text dan pilih (biarkan saja seperti itu) lalu letakan disamping

.
 Berikutnya klik ​Label1 l​ alu pilih letakan dibawah

lalu klik (biarkan saja seperti itu) lalu letakan

disamping .
Perhatikan gambar berikut :

12. Berikut adakah gambar keseluruhan Block dari aplikasi Cek Nilai