Tutorial Membuat Multiple
Screen dan Database
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. APP Inventor adalah sebuah aplikasi builder untuk membuat aplikasi yang berjalan di sistem operasi Android yang disediakan oleh googlelabs. Jadi kalian harus punya account google dulu untuk bisa masuk ke home app inventor. App Inventor ini sedikit berbeda dengan app builder lain seperti (sebut saja e**ipse). Dengan App Inventor kita tidak pernah menemui kasus para developer uring-uringan gara-gara aplikasi yang dibuat nggak jalan, dan ternyata itu hanya karena kesalahan sintak kurang tanda semicolon (;). App Inventor ini menggunakan teknik visual programming, berbentuk seperti susunan puzzle-puzzle yang memiliki logika tertentu.
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” yang merupakan simbol-simbol perintah dan fungsi –event handler tertentu dalam membuat aplikasi, dan secara sederhana kita bisa menyebutnya tanpa menuliskan kode program –coding less.
Tidak hanya App Invertor tapi untuk membuat aplikasi ini terkesan lebih nyata kita akan menggunakan sebuah software leapdroid. LeapDroid? Mungkin agak sedikit asing dengan namanya. LeapDroid ini merupakan salah satu emulator yang belum banyak dikenal. LeapDroid ini memiliki tampilan yang sama dengan emulator lainnya. Lah kok bisa? ,namun dengan tampilannya yang sama LeapDroid ini memiliki perbedaan dengan emulator lainnya. emulator ini memiliki keunggulan yaitu ringan, dan mudah digunakan. Dan lebih bagusnya lagi LeapDroid ini memiliki stabilitas yang bagus untuk PC/Laptop kita.
Pada kali ini saya akan membuat Aplikasi Multiple Screen Dan Database sederhana untuk menampilkan text yang diinputkan dan ditambahkan dengan mengganti warna text serta background.
Untuk Proses Pembuatan multiple screen silahkan mengikuti langkah-langkah berikut :
Untuk membuat aplikasi multiple screen ini, kita harus melaksanakan 2 tahap besar, yaitu tahap pertama mendesain tampilan aplikasi pada menu "Desain", Sedangkan tahap kedua yaitu membuat block untuk menjalankan aplikasi di menu "Block" pada aplikasi MIT App Inventor.
1. Membuka Aplikasi MIT App Invertor
MIT App Inventor sebenarnya bisa dijalankan secara online maupun offline. Namun ada perbedaan mendalam antara keduanya, khususnya dalam hal instalasi dan konfigurasi . Ada serangkaian proses yang cukup panjang untuk menginstal MIT App Inventor dan menggunakannya secara offline. Namun untuk sarana pembelajaran, sebaiknya Anda mulai dari versi onlinenya saja. Setidaknya Anda tidak perlu pusing dengan proses instalasi yang rumit dan bisa langsung mulai membuat aplikasi Android.
Untuk mengakses MIT App Inventor online, Anda bisa mengunjungi appinventor.mit.edu. Ini adalah homepage MIT App Inventor. Di sini Anda akan dihadapkan pada berbagai informasi seputar App Inventor, termasuk program-program pendidikan yang terkait dengannya. Sebelum menjalankan MIT App Inventor, pilih menu get started untuk mempelajari lebih jauh tentang tata cara memulai menggunakan aplikasi ini. Untuk mengakses aplikasi MIT App Inventor,dari sini Anda bisa langsung mengklik tautan "create apps" yang mengarah ke ai2.appinventor.mit.edu.
2. Login dengan Akun Google
Saat pertama kali mengakses MIT App Inventor, pengguna akan diminta untuk login dengan akun Google miliknya. Masukkan username dan password akun Google Anda, setelah itu Anda akan diarahkan ke halaman permission request yang berisi permintaan izin untuk mengakses beberapa informasi akun Google Anda. Di sini cukup pilih Allow, setujui terms of service yang muncul setelahnya dan aplikasi MIT App Inventor akan terbuka.
3. Mulai Membuat Project Baru
4. Maka akan tampil jendela pertama dari APP Inventor
5. Buatlah desain screen android seperti gambar berikut:
Komponen yang dibutuhkan untuk desain gambar1 adalah :
- label1 untuk text judul tampilan
- HorizontalArrangement + 4label
- Canvas
- HorizontalArrangement + 2button + ListPicker
- TinyDB
Susun semua komponen sesuai tampilan gambar1, dan lakukan pengubahan nama komponen untuk memudahkan pengerjaan dalam membuat blocks.
6. Membuat Blocks aplikasi
- klik screen1 -> pilih puzzel seperti gambar dibawah
- klik TinyOB1 -> seret 2 puzzel call ke puzzel screen1 ->
- untul puzzel call1 (0,dan text black) -> call2 (black, global current)
note:
- puzzel biru (0) : blocks -> build-in -> match ->0
- puzzel nila ("text" : blocks -> build-in -> text -> " "
- puzzel orange : blocks -> build-in -> variables -> get
untuk pembuatan langkah-langkah desain diatas bisa liat tabel dibawah:
7. Pilihlah addscreen untuk menambah screen
8. Membuat screen kedua dengan desain seperti gambar di bawah ini
9. Untuk membuat desain pada gambar di atas dengan mengikuti langkah ini
note:
- puzzel biru (0) : blocks -> build-in -> match ->0
- puzzel nila ("text" : blocks -> build-in -> text -> " "
- puzzel orange : blocks -> build-in -> variables -> get
untuk pembuatan langkah-langkah desain diatas bisa liat tabel dibawah:
7. Pilihlah addscreen untuk menambah screen
8. Membuat screen kedua dengan desain seperti gambar di bawah ini
9. Untuk membuat desain pada gambar di atas dengan mengikuti langkah ini
10. Apabila desain telah siap, maka yang dilakukan yaitu membuat Blocks aplikasi
- klik screen1 -> pilih puzzel seperti gambar dibawah
- klik TinyOB1 -> seret 2 puzzel call ke puzzel screen1 ->
- untul puzzel call1 (0,dan text black) -> call2 (black, global current)
note:
- puzzel biru (0) : blocks -> build-in -> match ->0
- puzzel nila ("text" : blocks -> build-in -> text -> " "
- puzzel orange : blocks -> build-in -> variables -> get
11. Setting untuk menampilkan Screen2
- Klik button2 (OpenBP) -> pilih OpenBP clik -> ikuti untuk puzzel lanjutan seperti gambar dibawah
- puzzel biru (0) : blocks -> build-in -> match ->0
- puzzel nila ("text" : blocks -> build-in -> text -> " "
- puzzel orange : blocks -> build-in -> variables -> get
11. Setting untuk menampilkan Screen2
- Klik button2 (OpenBP) -> pilih OpenBP clik -> ikuti untuk puzzel lanjutan seperti gambar dibawah
note untuk puzzel:
- make a list: blocks -> build-in -> lists
12. Susun lah blocks pada screen 2 seperti gambar di bawah ini
- make a list: blocks -> build-in -> lists
12. Susun lah blocks pada screen 2 seperti gambar di bawah ini
13. Susunlah Blocks tombol test color
14. Buatlah Blocks setelah memilih Notifier dan Blocks setelah input text di Notifier
15. Buatlah Blocks untuk mereset Canvas
16. Simpan aplikasi yang telah di buat
Build -> app(save.apk to my computer) -> tunggu sampai proses 100% dan apk terdownload.
17. Buka aplikasi Leapdroid -> copykan file apk yang telah disimpan dan didownload -> instal -> Open
Hasil nya akan seperti tampilan berikut :
Sekian
Semoga Bermanfaat :)
Komentar
Posting Komentar