Workshop Aplikasi Internet - TUTORIAL MEMBUAT DATA DIRI MENGGUNAKAN MIT APP INVENTOR BERBASIS LEAPDROID ~ Ayu Azizah's Work

App Inventor adalah aplikasi web sumber terbuka yang awalnya dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute of Technology (MIT). App Inventor memungkinkan pengguna baru untuk memprogram komputer untuk menciptakan aplikasi perangkat lunak bagi sistem operasi Android. App Inventor menggunakan antarmuka grafis, serupa dengan antarmuka pengguna pada Scratch dan StarLogo TNG, yang memungkinkan pengguna untuk men-drag-and-drop objek visual untuk menciptakan aplikasi yang bisa dijalankan pada perangkat Android. Dalam menciptakan App Inventor, Google telah melakukan riset yang berhubungan dengan komputasi edukasional dan menyelesaikan lingkungan pengembangan online Google.

Nah, pada praktikum lalu saya diajarkan bagaimana cara menggunakan aplikasi App Inventor. Saya menggunakan tambahan software LeapDroid untuk menjalankan project ini. Project ini berisi sebuah program untuk membuat aplikasi dimana nantinya saat program dijalankan akan menampilkan data diri sesuai dengan di inputkan. Langkah-langkahnya percobaannya, yaitu :
1. Buka link App Inventor http://appinventor.mit.edu.
2. Klik Create apps!

3. Masuk ke akun google kamu. Kemudian klik Start My New Project dan isi nama project sesuai keinginan kamu lalu klik Ok. Berikut adalah tampilan awal dari Screen App Inventor.

4. Untuk membuat keterangan pada Screen berupa teks, seperti judul, Nama, NIM, Alamat, Umur dan Status seperti gambar di bawah, saya menambahkan komponen Label. Label berfungsi untuk menamakan Screen. Caranya : drag and drop Label yang ada pada menu User Interface ke Screen. Anda dapat mengatur format Label pada menu Properties sesuai keinginan Anda.

5. Untuk membuat kotak untuk mengisi data diri, tambahkan Textbox yang ada pada Menu User Interfaces. Caranya : drag and drop Textbox yang ada pada menu User Interface ke Screen. Anda dapat mengatur format Textbox pada menu Properties sesuai keinginan Anda.

6. Agar Label dan Textbox dapat berdampingan seperti pada gambar, perlu ditambahkan Layout Table Arrangement. Caranya : drag and drop TableArrangement dari menu Layout ke Screen. Kemudian atur format Rows pada menu Properties sesuai kebutuhan. Pada project ini, format Rows dibuat 5 karna pada project ini ada 5 Label dan Textbox. Lalu drag and drop Label dan Textbox ke dalam kotak TableArrangement.

7. Untuk melihat hasil dari project yang sedang dibuat dibutuhkan tombol Button pada Screen. Caranya : drag and draw Button yang ada pada menu User Interface ke Screen. Anda dapat mengatur format Button yang Anda masukkan dalam Screen sesuai keinginan Anda.

8. Tambahkan tempat untuk melihat tampilan hasil dari project ini, tambahkan Text for Label yang ada pada menu User Interface. Text for Label ini berfungsi untuk menampilkan teks yang kita inputkan pada Textbox. Caranya : drag and draw Text for Label yang ada pada menu User Interface ke Screen. Anda dapat mengatur format Label yang Anda masukkan dalam Screen sesuai keinginan Anda.

9. Setelah komponen di atas sudah tersusun pada Screen, tambahkan Layout Vertical Scroll Arrangement agar saat di jalankan pada aplikasi Android tampilan Screen dapat di Scroll. Caranya : drag and drop VerticalScrollArrangement pada menu Layout ke Screen. Kemudian drag and drop TableArrangement, semua Label dan semua Textbox ke dalam kotak VerticalScrollArrangement.

10. Setelah selesai mendesain tampilan untuk project ini, Klik Blocks yang ada pada pojok kanan aplikasi. Buat program sesuai dengan Block seperti gambar di bawah ini.