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.