Membuat Project Baru Pada App Inventor

Setelah anda mengenal fitur app inventor, maka sekarang saatnya anda mulai membuat sebuah project aplikasi baru dengan memanfaatkan jenis komponen yang ada pada bagian Palette.
Untuk membuat sebuah aplikasi android menggunakan app inventor, setidaknya 4 tahapan yang harus kita lakukan, yaitu:

1. Membuat desain tampilan aplikasi melalui mode Designer (Design View)
2. Menentukan perilaku/behavior yang akan diterapkan pada komponen yang digunakan, melalui fitur Blocks Editor
3. Menguji coba project yang dibuat menggunakan perangkat Handphone/Emulator
4. Menyimpan project dan mendownload apk-nya

Ok, guys.. Kali ini kita akan membuat sebuah aplikasi android bernama “TalkToMero” :).
Pada aplikasi ini user akan diminta untuk mengetikkan sebuah kata/kalimat. Selanjutnya user menekan tombol “ucapkan”, dan handphone akan mengeluarkan suara yang sesuai dengan teks yang telah diinputkan oleh user sebelumnya. Misalnya, jika kita mengetikkan teks “Belajar Android”, maka setelah kita menekan tombol “ucapkan”, HP android anda akan mengucapkan teks “Belajar Android”. Begitu pula dengan teks yang lain. Berikut screenshot aplikasi yang akan kita buat:

 Gambar 1

Mari kita lakukan 4 tahapan di atas satu per satu berikut:
1. Membuat Desain Aplikasi
Untuk membuat desain aplikasi, kita lakukan melalui fitur/mode Designer. Fitur/mode designer merupakan mode standard yang tampil saat kita masuk ke dashboard app inventor.

 Gambar 2

Nah, jika kita perhatikan desain tampilan aplikasi di atas, maka terdiri atas beberapa jenis komponen berikut:

1. Komponen Screen: Tempat Background dan komponen lain berada
2. Komponen Label (text) : untuk teks “Ketikkan teks anda di sini:”
3. Komponen Textbox : Untuk inputan teks/kalimat
4. Komponen Button : Untuk tombol “Ucapkan”
5. Komponen Media (suara) : Untuk mengeluarkan suara

Marilah kita mulai membuat aplikasi tersebut satu per satu (pelan-pelan saja ya… bismillah.. :P) :
1. Pastikan anda sudah login dan berada pada dashboard App Inventor anda.
2. Klik tombol Start New Project atau Pilih menu Projects > Start New Project dan isikan nama project yang akan dibuat.

 Gambar 3

Maka sebuah screen1 baru (kosong) siap untuk anda gunakan. Perlu anda tahu, bahwa saat anda membuat sebuah proyek baru, maka sebuah komponen Screen akan ditambahkan pada bagian Components. Itu berarti saat ini anda telah membuat 1 komponen dari 5 komponen yang harus anda buat.

 Gambar 4 

3. Selanjutnya, kita tinggal mengatur Screen1 tersebut supaya sesuai dengan tampilan aplikasi yang akan dibuat. Maka, yang harus kita lakukan adalah menambahkan background gambar, mengganti nama screen1 menjadi “TalkToMero” dan mengatur perataan objek pada screen (tengah dan atas). Ikuti langkah berikut:

• Menambahkan background berupa gambar : Klik pada screen1 dan lihat pada bagian Properties.
  • Klik “none” pada kolom BackgroundImage. 
  • Selanjutnya klik tombol Upload file untuk mengunggah gambar yang akan dijadikan Background aplikasi. Proses pengunggahan gambar akan memakan waktu sesuai dengan ukuran gambar yang anda unggah. Semakin besar ukuran gambar yang diunggah, maka akan semakin lama uploding-nya. Jadi, sebaiknya gambar yang diunggah memiliki ukuran yang kecil saja..
  • Gambar yang telah diunggah akan disimpan pada server App Inventor. Ohya, untuk gambar background seperti tampilan di atas, anda bisa mendownloadnya di sini.
• Mengganti nama “Screen1″ menjadi “TalkToMero” : Masih pada properties Screen, pada kolom Title (di bagian bawah), Editlah teks “Screen1″ menjadi “TalkToMero”.
• Mengatur perataan Screen : Masih pada properties Screen, pada aplikasi di atas, terlihat bahwa perataan objek/komponen berada di bagian tengah dan atas screen, maka pada AlignHorizontal > pilih Center dan AlignVertical > pilih Top).

 Gambar 5

4. Lanjut pada komponen 2, yaitu memasukkan teks “Ketikkan teks anda di sini:”. Ikuti langkah berikut:

• Pada bagian Palette > User Interface, Drag pada komponen Label dan drop pada screen, maka pada daftar Components akan bertambah dengan “Label1″.
• Selanjutnya pada bagian properties > Text > gantilah teks “Text for Label1″ dengan “Ketikkan teks anda di sini :”
• Editlah warna teks dan background teks pada bagian TextColor dan BackgroundColor (lihat gambar 5), sesuai dengan warna yang diinginkan
• Jika diperlukan untuk mengubah besar huruf, anda bisa mengubahnya pada bagian FontSize
• Selanjutnya, anda harus mengubah nama “Label1″ pada daftar components dengan nama yang mudah dimengerti, misalnya “Label1″ menjadi “Lbl_KetikTeks” atau nama lain yang mudah untuk difahami. Penggantian nama ini sangat penting, terutama ketika kita sudah bekerja pada Blocks editor, untuk memudahkan kita memilih komponen yang akan kita beri perilaku (behavior).
• Untuk mengganti nama komponen, klik komponen yang dimaksud, dan pilih tombol Rename (pada bagian bawah daftar components – lihat gambar 5).
• Pada kotak dialog Rename > New Name > Ketikkan nama label yang baru 

Gambar 6

5. Untuk membuat komponen 3 (membuat kotak teks), lakukan cara yang sama dengan langkah no.4 untuk jenis komponen TextBox. Selanjutnya lakukan pengaturan pada bagian properties dan gantilah nama komponen “TexBox1″ menjadi “Kotak_Teks”.

• Pada properties > Hint > Hilangkan teks “Hint for TextBox1″, agar saat aplikasi dijalankan pada kotak teks tidak terdapat kalimat tersebut.
• Lakukan pengaturan tampilan lainnya sesuai dengan keinginan anda

6. Selanjutnya untuk komponen 4 (membuat Tombol “Ucapkan”), lakukan cara yang sama dengan langkah no.4 untuk jenis komponen Button dan lakukan pengaturan tombol pada bagian properties.

• Mengubah bentuk Button : Pada bagian Properties > Shapes > Pilih bentuk Button Rounded.

Gambar 7

• Mengubah warna Button : Masih pada Properties > BackgroundColor > Pilih warna yang diinginkan.
• Mengubah teks pada Button : Properties > Text > Ganti “Text for Button1″ dengan “Ucapkan”
• Jangan lupa untuk mengubah nama komponen text “Button1″ dengan “Btn_ucapkan” ya..  

7. Membuat komponen ke 5, memasukkan media suara, lakukan cara yang sama dengan langkah sebelumnya untuk jenis komponen Media > TextToSpeech. Ketika anda memasukkan komponen media TextToSpeech pada screen, maka media tersebut akan diletakkan pada bagian bawah screen (tidak terlihat pada screen), seperti yang terlihat pada gambar 8 berikut:

Gambar 8

• Jangan lupa untuk mengganti nama komponen TextToSpeech1 pada daftar Components dengan nama lain, misalnya “Suara”, atau nama lainnya.

Nah, setelah semua komponen telah dibuat, maka hasil akhir dari desain aplikasi tersebut setidaknya seperti gambar berikut:

Langkah berikutnya adalah memberikan perilaku (behavior) pada komponen pada tombol “ucapkan” supaya ketika kita menekan tombol tersebut, akan menyuarakan teks yang telah kita ketikkan pada kotak teks.

Menguji Coba Project Pada HP Android

Sebelum melangkah ke tahap berikutnya, yaitu memberi event pada komponen, ada baiknya kita mengetest terlebih dahulu, apakah desain aplikasi yang telah kita buat bisa dijalankan pada perangkat HP android kita?
Untuk melakukan uji coba ini, kita perlu menghubungkan project (pada komputer) yang telah kita buat dengan perangkat HP android kita. Ada 3 cara yang bisa kita lakukan untuk ini, yaitu:

1. Melalui AI Companion, dengan cara menghubungkan perangkat komputer dan HP melalui koneksi Wi-Fi
2. Melalui Emulator atau simulasi perangkat HP android
3. Melalui kabel USB
Saat ini saya ingin menguji menggunakan cara 1, yaitu melalui AI Companion, yang menurut saya lebih mudah, asalkan kedua perangkat tersebut terhubung pada wi-fi dalam satu jaringan.
Ok..langsung aja ya..
Hal yang perlu disiapkan adalah :

• Sebuah aplikasi bernama MIT AI2 Companion pada HP android anda. Jika belum ada, silahkan mendownload terlebih dahulu melalui Play Store dan menginstal-nya.
• Setelah anda menginstalnya, maka shortcut MIT AI2 Companion akan tampil pada HP Android anda (gambar kiri) dan jika dijalankan akan terlihat seperti pada gambar kanan berikut.

Langkah berikutnya adalah:
1. Pastikan project “TalkToMero” yang telah dibuat sebelumnya sudah terbuka. Selanjutnya pilih menu Project > AI Companion.

Maka sebuah code akan tampil dan anda diminta untuk memasukkan code tersebut pada aplikasi MIT App Inventor 2 (di HP).

Jalankan MIT AI2 Companion pada HP Android anda dan masukkan code tersebut.

Atau anda bisa memilih tombol “Scan QR code” yang tampil pada HP android anda, dan lakukan scanning code pada layar monitor.

Jika kedua  perangkat telah terhubung, maka kotak dialog yang berisi code (pada layar monitor) tersebut akan hilang dan pada perangkat HP android anda akan tampil project aplikasi anda yang tampilannya sama persis dengan yang terlihat di layar monitor.

Selanjutnya anda bisa mencoba aplikasi anda dengan memasukkan teks pada kotak teks dan menekan tombol “ucapkan” supaya keluar suaranya.
Eiiiitsss… suaranya nggak bakal muncul / terdengar, kan kita belum memberi event pada komponen tombol??!!  Nah..supaya aplikasi yang kita buat dapat dijalankan sesuai dengan keinginan kita, maka kita harus mengaturnya pada Blocks viewer. Ikuti tulisan saya selanjutnya ya..  Bekerja Pada Blocks Viewer App Inventor