MIT App Inventor 2 5.

Menu Designer untuk mendisain aplikasi kita dalam

pengaturan layout, tombol, gambar dan lain-lain.
6. Block akan berisi logika dari aplikasi kita.
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” dalam membuat aplikasi, dan
secara sederhana kita bisa menyebutnya tanpa menuliskan
kode program / coding.
Sebelum memulai pembuatan disini ada beberapa menu yang
perlu di ketahui :
1. Project (warna hitam) -> adalah menu awal berisi antara
lain start new project, save project, Delete Project.
2. Connect (merah) -> menu untuk menghubungkan
project kita dengan menggunakan media antara lain.
 Sebelum memulai pembuatan Aplikasi kita harus
MIT App Inventor Companiaon (bisa didownload di
mempunyai akun Gmail terlebih dahulu. Karena MIT App
Google Playstore). Berfungsi sebagai emulator untuk
Inventor dibuat oleh google lalu dikembangkan oleh MIT.
project kita. Jadi kita bisa langsung mencoba aplikasi
yang kita buat tanpa harus mendownloadnya terlebih  Masuk web MIT App Inventor
dahulu. http://appinventor.mit.edu/explore/ setelah itu klik Create
3. Build (kuning)-> menu untuk download aplikasi kita. apps! (pojok kanan atas diweb)
Dengan save project kita kekomputer. Atau melalui scan  Menu Projects klik Start new Project lalu beri nama project
Barcode yang akan menuju ke link download yang bisa kalian misalnya kali ini kita akan membuat aplikasi agar
langsung di download dari Smartphone. dapat berbicara menggunakan beberapa media. Sebut saja
4. (biru) -> untuk menambah screen dan menghapus dengan Aplikasi Talk to Me.
screen jika membutuhkan beberapa screen.
 Merubah Text menjadi suara.
Designer akan membutuhkan :
Palette -> User Interface -> Button
Palette -> Media -> TextToSpeech
Dengan cara drag n drop di viewer.
Di Menu Components kita ganti nama tombol tadi, dengan cara
rename. Missal. Click Me! Menu Propertis berguna untuk
merubah tombol / button yang kita masukkan tadi. Ada
beberapa menu contohnya mengganti background, warna,
ukuran, atau text pada tombol.
 Setelah itu pindah di Menu Blocks (pojok kanan atas) untuk
mengisi logic dari tombol tadi.
 Klik Button tadi (Click Me!) lalu pilih Click_me!.click. dengan
cara drag n drop.
 Lalu Klik TextToSpeech dan pilih call TextToSpeech.speech
lalu pasang pada blok button Click me tadi. Seperti gambar
dibawah ini.
 Setelah itu pada menu Block pojok kiri pilih text. Drag n drop
blok yang kosong.
 Isi Blok tersebut dengan kata. Yang nantinya akan
dikeluarkan menjadi suara.
 Misalnya hello.
 lalu kita coba dengan app inventor companion yang telah
didownload lagi. Atau disave menjadi apk.
 Dan saat kita menekan tombol akan mengeluarkan suara
Hello.
Selanjutnya Kita akan memasukkan TextBox, agar kita
bisa mengeluarkan suara dengan inputan yang kita
masukkan tanpa merubah logic di blocks.
 Pertama kembali ke menu Designer lalu tambahkan TextBox
di menu pallete.
 Lalu kembali ke menu Blocks.
 Message yang berisi blok text tadi kita hapus terlebih dahulu
 Lalu klik textbox dimenu Blocks.
 Masukkan TextBox.text drag ke blok message.
 Kita bisa memasukkan kata melalui TextBox tadi lalu ketika
diklik akan membaca isi dari textbox yang kita isikan.
Membuat Smartphone kita mengeluarkan suara ketika
digoyangkan
 Di Menu Desainer kita akan menambahkan Pallate ->
Sensor -> AccelerometerSensor
 Lalu langkah di menu blocks
 Pilih AccelerometerSensor ->
AccelerometerSensor.Shaking
 Selanjutnya isi dengan blok dari TextToSpeech.Speak
 Lalu isi message dengan Text.
 Misalnya Do not shake me. Jadi setiap kita
menggoyangkan smartphone kita, maka akan keluar suara
do not shake me.
Mengubah Suara menjadi Text menggunakan Speech
Recognizer
 Sebelum mulai kita masukkan beberapa media yaitu :
Pallate -> User Interface -> Button: untuk memanggil fitur
SpeechRecognizer
Pallate -> User Interface -> Label: yang nanti akan berisi hasil
suara menjadi text
Pallete -> Media -> SpeechRecognizer
 Berikutnya kita masuk ke menu Blocks.
 Lalu pilih Button -> button.click
 Selanjutnya pilih SpeechRecognizer pilih
SpeechRecognizer.GetText dan pasangkan di Button.
Seperti gambar dibawah ini
 logic ini akan berfungsi untuk memanggil fitur
SpeechRecognizer yang di sediakan oleh MIT App Inventor
2.
 Selanjutnya kita pilih SpeechRecognizer ->
SpeechRecognizer.AfterGettingText (setelah mendapatkan
text apa yang akan dilakukan)
 Kita set label tadi dengan pilih label lalu klik -> label.text
 Pilih SpeechRecognizer -> SpeechRecognizer.Result. Jadi
label yang ada di Designer akan di set menjadi hasil dari
pengenalan suara yang telah direkam tadi. Seperti
digambar berikut.
Membuat Aplikasi untuk Merekam Suara
 Ada Beberapa media yang akan di tambahkan di Menu
Designer:
Pallete -> User Interface -> Button (2 tombol : tombol Record
untuk memulai merekam, dan tombol Play untuk memulai
hasil rekaman.
Pallete -> Media -> Sound Recorder
Pallete -> Media -> Player : untuk memainkan hasil rekaman.
Pallete -> Storage -> TinyDB (database) : berfungsi untuk
menyimpan hasil rekaman.
 Selanjutnya pindah ke menu Blocks
 Pilih Button recorder : Button -> Touch Down : tombol akan
melakukan perintahnya ketika disentuh.
 Lalu Pilih SoundRecorder : call SoundRecorder.Start
pasang ke Button Touch Down.
 Selanjutnya kita tambahkan warna agar ketika ditekan dan
memulai perintah tombol akan berubah warna sebagai
tanda tombol berfungsi. Dengan cara klik button recorder
tadi lalu cari set button (recorder).BackgroundColor. lalu
pilih di menu blok color beri warna sesuai keinginan kalian.
 Pilih Button Recorder lagi : Button.TouchUp : tombol akan
melakukan perintah ketika dilepas / tidak disentuh.
 pilih SoundRecorder lalu pilih call Soundrecorder.Stop. jadi
ketika button dilepas berarti rekaman suara akan berhenti.
 Kita juga akan menambahkan background color agar kita
bisa tau saat SoundRecorder telah berhenti.
 Langkah selanjutnya adalah menyimpan hasil rekaman tadi
di TinyDB
 pertama pilih Blok SoundRecorder. Lalu Pilih when
SoundRecorder.AfterSoundRecorded : Fungsi ini berarti
setalah SoundRecorder berjalan dia akan melakukan apa?
 Lalu kita isi dengan TinyDB -> Call TinyDB.StoreValue :
yang berarti kita memanggil TinyDB tadi dengan perintah
Menyimpan Nilai yang dalam konteks ini adalah hasil
rekaman tadi.
 Didalam tag kita isi dengan Rekaman (contoh) tag berupa
Text. Tag berfungsi sebagai Key/id (misalnya Id Makanan :
isinya adalah roti, nasi, mie, dsb)
 ValueToStore kita isi dengan sound. Yang berarti hasil
yang kita simpan adalah suara yang kita rekam tadi.
Dengan cara mengarahkan cursor ke sound diatas perintah
do, lalu akan keluar pop up seperti contoh dibawah.
 Langkah berikutnya pilih SoundRecorder. Lalu pilih
SoundRecorder.StartedRecording.
 Lalu pilih SoundRecorder set
SoundRecorder.SaveRecording to
 diisi dengan menu Player -> Player.Source
 Fungsi ini berarti ketika SoundRecorder mulai merekam,
dia akan mengatur rekaman lalu dikirim ke Player.

 Langkah terakhir kita akan memanggil hasil rekaman tadi

dengan tombol play.
 Pilih button Play -> pilih Button.click
 Lalu isi blok dengan Player -> set Player.Source
 Lalu panggil TinyDb masukkan di blok player.source tadi
dengan tag yang sama yaitu rekaman.
 Kosongan valueIfTagNotThere: ini berarti jika tag yang kita
masukkan tidak ada, maka kita bisa mengisi langsung
disini.
 Lalu panggil Player : Player -> call Player1.Start dan
pasangkan di bawah blok sebelumnya. Seperti contoh
dibwah ini.