MIT App Inventor 2 blok

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. MIT App Inventor Companiaon (bisa didownload di Google Playstore). Berfungsi sebagai emulator untuk project kita. Jadi kita bisa langsung mencoba aplikasi yang kita buat tanpa harus mendownloadnya terlebih dahulu. 3. Build (kuning)-> menu untuk download aplikasi kita. Dengan save project kita kekomputer. Atau melalui scan Barcode yang akan menuju ke link download yang bisa langsung di download dari Smartphone. 4. (biru) -> untuk menambah screen dan menghapus screen jika membutuhkan beberapa screen.

 Sebelum memulai pembuatan Aplikasi kita harus mempunyai akun Gmail terlebih dahulu. Karena MIT App Inventor dibuat oleh google lalu dikembangkan oleh MIT.  Masuk web MIT App Inventor http://appinventor.mit.edu/explore/ setelah itu klik Create apps! (pojok kanan atas diweb)  Menu Projects klik Start new Project lalu beri nama project kalian misalnya kali ini kita akan membuat aplikasi agar dapat berbicara menggunakan beberapa media. Sebut saja dengan Aplikasi Talk to Me.

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.

 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

 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.

 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.

 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.

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

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.

 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.

 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

 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.