Cara Memulai Menggunakan App Inventor untuk Android

Revo Flasher Setelah sebelumnya di bahas 10 Aplikasi Android terbaik Google TV berikut ini adalah Cara Memulai Menggunakan App Inventor untuk Android. Untuk menggunakan App Inventor ada beberapa hal yang harus di siapkan terlebih dahulu, yaitu :

1. > Memiliki Account Gmail terlebih dahulu, dan masuk –Log In  ke  http://www.appinventorbeta.com http://beta.appinventor.mit.edu/ , apabila anda belum memiliki Account Gmail maka terlebih dahulu mendaftar pada http://www.gmail.com
2. > Setelah masuk anda akan diminta untuk membaca & menyetujui term of service dari google, klik pada tombol I accept the terms of service.

Gb. Term Of  Service

  

Untuk memulai App Inventor :

1.      Miliki Account gmail, http://www.gmail.com

2.      Masuk ke http://www.appinventorbeta.com http://beta.appinventor.mit.edu/

3. 3. Download & Install Java 6 (1.6) dari http://www.java.com
4. 4. Download & Install AppInventor_Setup_Installer_v_1_2.exe http://www.appinventorbeta.com/learn/setup/setupwindows.html 
5. 
   
6. http://beta.appinventor.mit.edu/learn/setup/setupwindows.html
7. 5. Install & Setting driver HP Android apabila ada
8. 6. Have fun with App Inventor .. :D

3. > anda akan dibawa ke halaman App Inventor Setup, dimana terdapat dua tahapan dasar pada setup yaitu :
1. Pada platform windows, - apabila anda menggunakan Linux anda bisa download App Inventor setup untuk Linux :

v     Setup Komputer, yaitu memiliki komputer PC dgn syarat untuk Windows. Sistem Operasi Windows yang didukung Windows XP, Windows Vista, Windows 7

v     Telah menginstall Browser minimal Google Chrome 4.0 – rekomendasi  , Apple Safari 5.0 , Microsoft Internet Explorer 7, Mozilla Firefox 3.6

v     Menginstall Java 6– java 1.6, bisa juga java 1.7 yg bisa download di http://www.java.com,

v     Kemudian install AppInventor_Setup_Installer_v_1_2.exe yg bisa di download di http://www.appinventorbeta.com/learn/setup/setupwindows.html
http://beta.appinventor.mit.edu/learn/setup/setupwindows.html

Gb. App Inventor Setup

2. Setup lingkungan Developing, yaitu :

v     Menggunakan Emulator,: pada penggunaan emulator tidak memerlukan setup diawal, karena tinggal diaktifkan dari blok editor.

v     Menggunakan Handset Android. - Kalau tidak ingin mengesetnya kita bisa langsung melakukan developing.

Setup Handset Android

Tahap ini dilakukan apabila anda ingin langsung mencoba hasil develop anda ke handset android. Pertama anda harus memiliki kabel data USB, dan menginstall driver handset Android anda. Hampir semua handset android di dukung oleh App Inventor, dan pastikan juga anda telah memiliki memory SD Card yang terpasang.

Setelah itu setting pada handset kita :

1.      Masuk pada home screen

2.      Pilih Setting > applications

3.      Pada Unkown sources di ceklist

Gb. Setting

4.      Pilih Development, ceklist pada USB Debugging dan Stay Awake 

Gb. Setting

Setelah itu koneksikan Handset anda dgn kabel USB Data ke komputer – dalam keadaan screen unlock, hingga akan muncul dua pesan notifikasi pada atas layar yaitu :

v     USB Connected, yang berarti handset telah terhubung ke komputer.

v     USB Debugging Connected, yang membuat App Inventor di komputer mengontrol handset.

Sampai disini berarti handset android kita telah siap untuk digunakan untuk mencoba aplikasi yang kita buat dengan App Inventor.

     Catatan :

Perlu diingat apabila anda menggunakan browser Mozila firefox agar semua berjalan lancar, apabila kita menggunakan fasilitas script  - NoScript extension , dan juga apabila ada firewall yang aktif, silahkan di konfigurasikan apabila mengganggu atau menghalangi koneksi developing. App Inventor akan mencari Setup secara otomatis, tapi apabila ada pertanyaan path lokasi App Inventor biasanya ada pada C:\Program Files\AppInventor\commands-for-Appinventor.

4. > Setelah semua konfigurasi dan setting selesai, anda bisa langsung masuk ke lingkungan developing dengan melalui http://www.appinventorbeta.com http://beta.appinventor.mit.edu/ - apabila tadi masih login anda langsung akan dibawa ke jendela developing :

 Gb. Jendela Developing

5. Klik pada New, dan mulai projek baru misal dengan nama Helloworld, kemudian klik pada tombol OK

  

Gb. Membuat Projek Baru

6. Maka akan terlihat langsung projek kita

Gb. Projek Baru

Lingkungan Kerja App Inventor

Sebelum kita melanjutkan untuk memulai developing, kita mengenal terlebih dahulu lingkungan kerja pada App Inventor yang terdiri dari :

1. Komponen Desainer – Component Designer yang berjalan pada Browser, digunakan untuk memilih komponen dan mengatur property.

Gb. Komponen desainer

Komponen desainer , terdiri dari :

1. Viewer             : untuk menempatkan komponen dan mengaturnya sesuai tampilan yang diinginkan.
2. Pallete              : adalah list dari komponen yang bisa dipakai
3. Component list : merupakan tempat list komponen dari projek yang kita pakai
4. Media              : mengambil media audio dan gambar untuk projek kita
5. Properties         : ketika anda klik komponen pada viewer maka propertiesnya akan terlihat pada panel ini

2. Blok Editor – Blocks Editor berjalan diluar browser, dimana digunakan untuk membuat dan mengatur behaviour dari komponen yang kita pilih pada komponen desainer.

Gb. Blocks Editor

3. Emulator , digunakan untuk menjalankan dan mengetest aplikasi yang kita bangun. Ini sangat bermanfaat apabila kita belum menggunakan handset langsung, karena Emulator Android ini telah terintegrasi dengan baik.

Gb. Emulator

Ketiga Lingkungan kerja diatas, akan bisa tampil secara bersamaan dan secara bergantian juga berpindah kita akan menggunakannya dalam membuat aplikasi android dengan App Android.

Contoh Aplikasi Android WildLife Show App Inventor

Revo Flasher - Setelah artikel sebelumnya sudah dibahas  Cara Memulai Menggunakan App Inventor untuk Android Berikut ini adalah terjemahan bebas dari tutorial dari situs appinventorblocks , filosofi reused kita pakai disini biar hemat waktu, so silahkan untuk mempelajarinya :)

Pada projek WildLifeShow ini kita berlatih belajar App Inventor sederhana, dengan nama aplikasinya WildLifeShow, sebuah aplikasi sederhana untuk melihat gambar dan juga mengeluarkan suara. Jadi kita akan berlatih bagaimana memasukkan gambar, menggunakan tombol/button, dan juga menangani suara/sound.

      

    

     

1. Klik  pada tombol New

2. Beri nama projek, disini akan kita namakan WildLifeShow

    

3. Drag komponen VerticalArrangement  ke layar Screen1, ini akan kita gunakan untuk mendisplay gambar

     

4. Kita bisa mengatur properti dari komponen VerticalArrangement1 yang kita tempatkan pada screen, Width berarti lebar, kita set penuh, sedangkan tingginya 350 pixel, tidak penuh satu layar karena kita akan menempatkan tombol pada layar

5. Drag komponen Image, dan masukkan kedalam komponen VerticalArrangement1 

    Get a Label component and place it below VerticalArrangement1. Take note of the name of our Label component which is automatically set to Label1.

6. Masukkan komponen Label, ini untuk teks keterangan

7. Properti dari label yang kita seting , yaitu font bold, kemudian teks “Tap On A Button To Hear Them” , posisi teks Center, warna dari teks biru, dan Width Fill parent

     

   

8. Sekarang kita masukkan komponen HorizontalArrangement  , yang akan kita gunakan untuk menempatkan tombol.

     

   9. Masukkan tiga buah tombol/ button kedalam  HorizontalArrangement1

     

     

10. Seting properti dari tombol :

• §         Teks Button1 : Elephant, Width : Fill parent, TextAligment ke Center dan Font Bold
• §         Teks Button1 : Bird, Width : Fill parent, TextAligment ke Center dan Font Bold
• §         Teks Button1 : Penguin, Width : Fill parent, TextAligment ke Center dan Font Bold

11. Karena kita akan menggunakan suara, maka ambil komponen Player dan masukkan di Screen1 bebas dimanapun,. Karena merupakan komponen non-visible, komponen Player secara otomatis akan ditempatkan dibawah jendela Screen1.

     

.

12. Sekarang kita akan merubah title Screen1 ke WildLifeShow.

     

13. Sekarang kita akan masukkan file gambar dan suara kedalam projek, dari menu media, upload file-file tersebut satu persatu. 

• Elephant.wav
• Bird.wav
• Penguin.wav

     

14. Sehingga akan terlihat seperti ini :

     

15. Kita telah selesai pada tahap mendesain komponen, sekarang kita akan memberikan behaviour agar komponen-komponen tersebut bisa berfungsi. Klik pada Open the Block Editor   

     

16. Tunggu beberapa saat, hingga muncul jendela Block Editor. Pada tab My Blocks, akan terlihat komponen-komponen apa saja yang sudah kita tempatkan pada jendela desainer. Sekarang kita akan mensetting fungsi tombol, yaitu pada Button1.

     

17. Secara fungsi kita menginginkan ketika tombol 1 ditekan maka gambar pertama akan muncul, maka ambil dari block set Image1.picture pada komponen image. Kemudian tempatkan didalam block Button1.Click yang ada.

     

18. Ini baru block pemanggil gambar, sedangkan gambarnya sendiri dgn nama elephant.png, maka dari tab Built-in ambil block text, masukkan kedalam block set Image1.Picture. Selanjutnya set teks ke elephant.png, untuk mengacu pada gambar yang telah kita siapkan.

    

     

     

   

     

19. Langkah selanjutnya, karena kita juga menginginkan ketika tombol diklik terdapat suara, maka tempatkan blok set player1.source to, tempatkan block acuan suara elephant.wav. Dan terakhir, pasang block player1.start, block ini adalah ketika tombol Button1 ditekan maka akan menyalakan suara yang kita set.

     

     

20. Lakukan langkah-langkah tersebut untuk, tombol 2 dan tombol 3 , sehingga akan terlihat seperti ini

     

21. OK, sudah selesai, package ke phone, baik emulator maupun langsung dicoba ke handphone, apabila ke emulator kita harus memulai emulator terlebih dahulu, dari menu New Emulator.

     

    

    

  

      

• Projek ini beserta projek-projek lain bisa anda download pada appinventorblocks 
• Untuk mencobanya di App Inventor Online Beta MIT App Inventor online 
• Mencobanya di App Inventor Offline baca-baca disini App Inventor Offline
• Buku App Inventor pemrograman tanpa kode program lihat disini

    

Solusi Android Bootloop File System Error

Revo Flasher - Solusi Android Bootloop File System Error , Memperbaiki Android yang Bootloop Karena Kerusakan File System , Mungkin akan lebih mudah persoalannya bila error / bootloop yang terjadi bukan karena kesalahan system melainkan kesalahan konfigurasi. Misalnya salah install font Android menggunakan Font Changer. Tinggal di wipe melalui recovery atau CWM Recovery insya allah semuanya cepat terselesaikan karena yang salah hanyalah konfigurasinya saja. Tapi lain urusan bila yang rusak itu file system. Biarpun di wipe tidak mungkin sembuh karena kerusakan file system biasanya terjadi karena kesalahan value didalam suatu file.

Salah satu cara yang paling mudah untuk memperbaiki masalah ini yaitu install ulang ROM. Namun ada tapi nya lagi. Kasusnya lumayan ribet juga karena selain semua aplikasi, sms, contact, dan lain-lain akan hilang (karena di wipe) cara-cara flashing ROM Android lumayan membingungkan bagi orang yang masih awam. Terlebih untuk smartphone lokal seperti Cross, Mito, Nexcom, GTab, Andromax, dan lain-lain sangat sulit untuk mendapat mentahan firmware.

Untuk kerusakan isi system, di wipe pun tidak mungkin bisa terselesaikan. Karena alasannya itu tadi. Betul? Dengan menginstall ROM baru, kemungkinan berhasil sudah tentu. Tapi akan ada beberapa persoalan yang bakalan muncul.

1. Semua data anda akan hilang (aplikasi, sms, contact, konfigurasi). *Berlaku untuk ROM baru, bukan ROM Backupan dari CWM
2. Android anda akan ketambahan file system yang ada didalam ROM yang baru. Aplikasi-aplikasi system yang sudah anda hapus akan kembali lagi. *Berlaku untuk ROM baru, bukan ROM Backupan dari CWM
3. Prosesnya tidak efisien karena prinsipnya kita 'menumpuk' kesalahan-kesalahan system yang sekarang dengan ROM yang baru. Jadi bila hanya build.prop nya saja yang rusak, dengan kita menginstall ROM yang baru maka semuanya akan di re-generasi ulang (tidak hanya build.prop nya)

Untuk memudahkan itu semua, saya mengambil jalan pintas. Prinsipnya memang sama yaitu menumpuk file lama dengan file yang baru misal bila build.prop lama rusak kita ganti dengan build.prop yang normal yang kita miliki. Jadi hanya satu file itu saja yang diganti, tidak secara keseluruhan dan tentunya ini tanpa wipe data / factory reset.

Memperkenalkan, Simple Flashable Restore V1.

Simple Flashable Restore V1 adalah flashable zip yang saya buat guna memudahkan kita dalam me-restore file system.

Memang ini sepele tapi ini amat sangat membantu :p

Cara kerjanya tinggal di flash saja seperti biasa lewat CWM Recovery dengan sedikit instruksi yang harus anda baca.

Step by Step Menggunakan Simple Flashable Restore V1

• Sebelum anda melakukan flashing Simple Flashable Restore V1, persiapkan dulu sebuah file yang masih fresh dan tidak rusak. Misal di Android anda yang rusak itu framework-res.apk nya, persiapkan framework-res.apk yang masih normal. Lantas darimana kita mendapatkannya? Itu sesuka-suka anda. Bila anda memiliki file backupannya, bisa digunakan. Atau kalau custom ROM lah yang sedang anda pakai juga lebih mudah lagi. Tinggal ambil framework-res.apk nya dari instalan custom ROM tersebut lalu copy. Atau kalau perlu minta lah framework-res.apk ke teman anda :p
• Download  Simple Flashable Restore V1 disini
• Ekstrak semua isinya (folder META-INF dan system) kedalam komputer lalu buka folder system nya

• Didalam folder system, akan anda lihat folder-folder dasar yang mungkin familiar bagi anda. Selanjutnya masuk kan file yang akan anda inject sesuai dengan tempatnya, kalau file aplikasi di folder app, kalau framework-res.apk di folder framework, sesuaikan dengan yang anda butuhkan.

Sebagai contoh saja, katakan Android saya tidak bisa booting karena Boot Animation nya rusak. Maka saya harus menggantinya dengan yang baru. Jadi saya harus memasukkan bootanimation.zip kedalam folder media.

Tapi saya juga ingin menginject suatu aplikasi ke folder app. Namanya CacheMate.

Ya sudah caranya tinggal copy seperti biasa saja kedalam foldernya. Tidak perlu rubah permissions apapun karena sudah diatur oleh binary.

• Selesai, sekarang jadikan zip kedua folder tadi (META-INF dan system) memakai WinRAR atau 7ZIP atau software compressor yang lain. Terserah mau anda kasih nama apa.

• Terakhir, eksekusi menggunakan CWM Recovery. Saya memakai CWM versi 6.0.3.2 berhasil

 Hasilnya sebagai berikut :

Sebelum inject CacheMate melalui CWM Recovery

Sesudah inject CacheMate melalui CWM Recovery

CacheMate.apk di folder /system/app/

Jadi sekarang anda tidak perlu khawatir lagi bila anda salah mengedit suatu file didalam system. Tinggal inject menggunakan Simple Flashable Restore V1 maka semuanya akan kembali normal.

Yang terpenting sebelum anda memulai kegiatan modding, pastikan anda sudah memiliki backupan (apapun itu) untuk menghindari hal yang tidak anda ingini.

Dan satu lagi. Gunakan flashable zip diatas dengan bijak. Masukan positif dari anda sangat saya tunggu.

Happy modding..

Baca bagian daftar isi untuk tutorial menarik lainnya atau masuk ke page Curhat Android untuk bertanya / berdiskusi soal android atau masuk ke page Request Android untuk request Tutorial ataupun Review.