CARA MEMBUAT APLIKASI PADA MIT APP INVENTOR

LANGKAH-LANGKAH DALAM PEMBUATAN APLIKASI PADA MIT APP INVENTOR

A. Membuka App Inventor Versi Online

1. Membuka google.com kemudian ketik “App Inventor” dan search.

2. Memilih “MIT App Inventor”.

3. Memilih “Create Apps”.

4. Tampilan akan muncul seperti di bawah ini kemudian klik “Continue”.

B. Membuat Aplikasi menggunakan App Inventor Versi Online.

1. Mengklik “Start New Project” dan pilih “Project name” kemudian klik “Continue”.

2. Setelah itu akan muncul tampilan seperti dibawah ini!.

3. Pilih Screen 1 kemudian pilih “Display phone size”.

4. Pada tampilan Screen 1, kita ubah klik “Title” ubah nama “SplashScreen”.

5. Klik “User Interface” Tarik “Image” atur width dan height disini saya gunakan ukuran 315 x 315 lalu klik “picture” pilih gambar pada file sesuai tema yang diinginkan.

6. Klik “Clock” untuk menentukan waktu yang dipakai pada splash screen.

7. Disini saya memasukan dua gambar untuk di tunjukan di splash screen. Kemudian klik “Blocks” untuk menyatukan kode-kode puzzle supaya splash screen dapat berjalan ketika membuka Aplikasi kemudian klik “Built-in” dan memilih“Contol” lalu Tarik puzzle ke daerah viewer.

8. Selanjutnya dalam membuat “Menu” pilih “Add Screen” kemudian akan tampil “Screen 2”.

9. Masukan gambar klik “image” pilih gambar dari file klik “Ok”.

10. Klik “Layout” lalu klik “HorizintalArrangement” lalu klik “Backgroundcolor” pilih “default” kemudian atur “Height” dan “Width”

11. Ulangi beberapa kali untuk menampilkan icon pada menu dengan klik “Layout” lalu klik “HorizintalArrangement” lalu klik “Backgroundcolor” pilih “default” kemudian atur “Height” dan “Width”dan klik “Button” untuk menambahkan icon pada menu.

12. Klik “Blocks” dan satukan kode-kode puzzle.

13. Untuk menambahkan materi, Klik “Add Screen” kemudian beri nama “Materi” agar sesuai dengan kode puzzle. Klik “Layout” lalu klik “HorizintalArrangement” lalu klik “Backgroundcolor” pilih “default” kemudian atur “Height” dan “Width”dan klik “Gambar” untuk menambahkan gambar.

14. Untuk menambahkan Bagian Contoh Soal, bisa mengikuti cara nomer 13.

15. Untuk menambahkan bagian video penjelasan menggunakan cara nomer 13 dengan tambahan yaitu fitur WebViewer, sehingga perlu menambahkan screen baru untuk web yang terhubung.