Laporan 3

Jenis layout pada app inventor,Project hasil adalah project mengeluarkan

Nim,Nama,alamat dan program studi dengan menggunakan layout

A. Membuat Projek
Pertama buka App Inventor https://appinventor.mit.edu/
Create Apps pada App Inventor

Gambar 1. Tampilan Web Inventor

Untuk melakukan create apps,harus log in menggunakan gmail.
Kedua pilih Start My Project ,isilah nama project “Latihan 1”yang akan dibuat. Klik OK.

Gambar 2. Membuat Projek Baru

Terlihat Tampilan Awal projek seperti gambar dibawah
Gambar 3. Tampilan Menu App Inventor
B. Membuat Tampilan Aplikasi
1.Buat judul nama aplikasi terlebih dahulu. Yakni dengan menyeret label pada menu user
interface. Untuk melakukan edit tulisan bisa dilakukan pada menu sebelah kanan yakni
pada menu properties. Selain itu anda bisa melakukan edit background aplikasi yakni
dengan mengklik “Screen1” pada components.

Gambar 4. Pembuatan Judul Aplikasi

Buatlah Identitas Mahasiswa,yakni berupa Nama,Nim,Alamat,Umur,dan Status. Caranya
dengan membuat layout table arrangement yang terdapat pada menu layout. Kemudian drag
and drop “Label” dan “Textbox” ke screen untuk melakukan isi data seperti tampilan
dibawah:

Gambar 5. Tampilan Data

3. Setelah dilakukan pembuatan data untuk pengisian biodata, untuk mencek bahwa data
tersebut benar/salah,diperlukan suatu push button. Yakni dengan memilih “Button” pada
menu user interface. Kemudian drag and drop button tersebut ke screen dan lakukan
pengeditan seperti gambar dibawah :

Gambar 6. Tampilan Button

4. Tombol button tersebut untuk mencek bahwa data tersebut benar. Jika benar,maka perlu
ditampilkan bahwa data tersebut benar. Caranya yakni menggunakan label yang didrag and
drop ke screen. Label yang digunakan sesuai dengan data yang diinput yakni sebanyak 5
buah. Tampilan seperti gambar dibawah :
Gambar 7. Tampilan Aplikasi
C. Membuat Kode Program
Setelah melakukan pembuatan aplikasi,selanjutnya dilakukan pembuatan kode program.
Dengan menggunakan app inventor,bentuk source code berupa susunan puzzle yang sangat
memudahkan kita dalam membuat alur program.
Klik menu block pada bagian pojok kanan atas

Gambar 8. Memulai Program dengan klik Block

Langkah awal yakni melakukan inisialisasi pada screen. Guna dari inisialisasi tersebut yakni
pada saat mengisi data identitas,data tersebut dinyatakan dalam keadaan salah. Cara membuat
program yakni bisa dipilih pada menu block

Gambar 9. Menu pembuatan program

Dengan memilih pembuatan program sesuai yang diinginkan,maka tampilan untuk kode
biodata identitas mahasiswa seperti tampilan dibawah :

Gambar 10. Kode Program Inisialisasi Identitas Mahasiswa

Setelah melakukan inisialisasi pada kolom data identitas,lalu dikakukan inisialisasi pada
button yang berguna untuk memverifikasi data identitas yang telah diisi pada kolom identitas.
Dimana data dituliskan secara manual.

Gambar 11. Program Verifikasi Identitas

Untuk memodifikasi tampilan verrifikasi tersebut,maka pada percobaan ini dilakukan
pemberian warna dan mengatur ukuran tulisan setelah klik button.

Gambar 12. Program Modifikasi Warna dan Ukuran

Setelah selesai melakukan pemograman aplikasi tersebut, maka pilih menu “Build”, lalu klik
“App(save.apk to my computer)” yang berguna untuk mendownload program.

Gambar 13. Build dan Save Program

D. Menjalankan Project Aplikasi
Setelah program selesai didownload ,untuk menjalankan program aplikasi bisa dilakukan
menggunakan aplikasi Leaproid Studio.
Buka software Leapstudio
Drag and drop file yang sudah didownload dicomputer ke Leapdroid.
Klik Install untuk menjalankan aplikasi

Gambar 14. Tampilan Install Aplikasi

Setelah terinstall,pilih open

Gambar 15. Tampilan Aplikasi yang sudah terinstall

Sesudah dibuka,Aplikasi Identitas Diri sudah bisa dijalankan

Gambar 16. Tampilan Aplikasi
Untuk Menjalankan Aplikasi tersebut, Isilah data sesuai identitas seperti gambar dibawah.
Kemudian untuk memverifikasi,klik button “Klik Disini”

Gambar 17. Tampilan Pengisian Identitas Mahasiswa

Setelah di klik,Data yang telah diisi menyatakan benar dan sesuai dengan identitas yang
dimiliki.

Gambar 18. Tampilan Verifikasi Identitas setelah klik Button