APP Inventor merupakan sebuah aplikasi web based editor yang digunakan untuk membuat aplikasi android dengan script yang sudah disediakan. Script tersebut dibuat seperti blok-blok yang disusun yang saling berkaitan. Pada kali ini saya akan membuat sebuah aplikasi sederhana untuk menampilkan text yang diinputkan dan ditambahkan dengan mengganti warna text serta background.
1. Buka website berikut http://ai2.appinventor.mit.edu/ untuk menggunakan app inventor
2. Kemudian akan diminta login dengan account google dan akan diminta autentikasi
3. Buatlah projek baru dengan memilih Project > Start New Project pada tampilan App Inventor
4. Maka akan tampil jendela pertama dari APP Inventor
Pada gambar diatas ada tampilan menu, berikut beberapa fungsi dari menu tersebut:
User Interfaces Menu
| |
Menu
|
Fungsi
|
Button
|
Sebuah tombol dengan kemampuan untuk mendeteksi klik, yang dapat mengeksekusi suatu perintah
|
Checkbox
|
Sebuah kotak centang memunculkan suatu kejadian ketika pengguna mengkliknya
|
DatePicker
|
Sebuah tombol yang ketika diklik meluncurkan dialog popup yang memungkinkan pengguna untuk memilih tanggal
|
Image
|
Sebuah komponen untuk menampilkan gambar
|
Label
|
Label digunakan untuk menampilkan teks, biasa untuk memberikan informasi
|
ListPicker
|
Sebuah tombol yang ketika diklik menampilkan daftar teks bagi pengguna
|
ListView
|
ListView digunakan menampilkan daftar yang dibuat
|
Notifier
|
Notifier digunakan untuk menampilkan pesan dan notifikasi.
|
PasswordTextBox
|
Sebuah box untuk menginputkan password dengan enkripsi
|
Slider
|
Slider digunakan untuk progress bar yang dapat digeser
|
Spinner
|
Sebuah komponen untuk menampilkan pop-up dengan daftar elemen
|
TextBox
|
Sebuah box yang digunakan untuk menginputkan teks
|
TimePicker
|
Sebuah tombol yang digunakan untuk memilih waktu (jam, menit, detik)
|
WebViewer
|
Sebuah komponen untuk melihat web pages
|
5. Kemudian lakukan drag and drop palette yang ingin digunakan pada menu, dan susun dengan keinginan masing-masing.
Berikut pallete yang dibutuhkan pada Screen 1
No
|
Komponen
|
Bagian
|
1
|
VerticalScrollArrangement
|
Layout
|
2
|
GoogleMapLabel
|
User Interface>Label
|
3
|
InstructionLabel
|
User Interface>Label
|
4
|
List Picker
|
User Interface
|
5
|
HorizontalArrangement
|
User Interface
|
6
|
AddLocationButton
|
User Interface>Button
|
7
|
LocationHelpButton
|
User Interface>Button
|
8
|
VerticalArrangement1
|
Layout
|
9
|
EnterAddressLabel
|
User Interface>Label
|
10
|
EnterAddressText
|
User Interface>TextBox
|
11
|
HorizontalArrangement
|
Layout
|
12
|
SubmitButton
|
User Interface>Button
|
13
|
CancelButton
|
User Interface>Button
|
14
|
VerticalArrangement
|
Layout
|
15
|
SelectedAddressLabel
|
User Interface>Label
|
16
|
AddressForMapLabel
|
User Interface>Label
|
17
|
ViewOnMapButton
|
User Interface>Button
|
18
|
MyLocationButton
|
User Interface>Button
|
19
|
TinyDB
|
Storage
|
20
|
Notifier
|
User Interface
|
21
|
ActivityStarter
|
Connectify
|
22
|
LocationSensor
|
Sensor
|
6. Setelah selesai didesain masuk ke menu blocks pada pojok kanan atas, kemudian pilih blok-bloknya dan susun sesuai gambar dibawah.
Screen 1
No comments:
Post a Comment