32 Paragraf di atas adalah contoh algoritma memasak telur dadar yang disajikan dalam bentuk deskripsi. Bentuk lain penyajian algoritma memasak telur dadar bisa dalam bentuk prosedur, seperti berikut: Prosedur memasak telur dadar adalah sebagai berikut: Alat yang perlu disiapkan terlebih dahulu: kompor gas, wajan, sotil dan piring. Bahan yang perlu disiapkan terlebih dahulu: telor ayam satu butir, garam sejumput, minyak goreng 30 mL. Tahapan memasak telur dadar: 1. Mulai 2. Panaskan minyak goreng pada wajan hingga suhu ± 70o C. 3. Pecahkan telur, masukkan ke dalam wajan. 4. Goreng telor hingga matang. Cek kondisi telur dadar matang 5. Kalau telor sudah matang kelangkah 6, kalau belum kembali kelangkah 4 6. Angkat telor dan letakkan di piring. 7. Selesai Contoh algoritma adalah sebagai berikut: Algoritma Kelulusan_mhs. Diberikan nama dan nilai mahasiswa, jika nilai tersebut lebih besar atau sama dengan 60 maka mahasiswa tersebut dinyatakan lulus, jika nilai lebih kecil dari 60 maka dinyatakan tidak lulus. 1. baca nama dan nilai mahasiswa. 2. jika nilai >= 60 maka keterangan = lulus tetapi jika tidak keterangan = tidak lulus. 3. tulis nama dan keterangan Tugas Mahasiswa 1) Anda diminta membuat algoritma memasak mie goreng indomie telur yang lezat. 2) Anda diminta menyempurnakan algoritma berikut: Input: Gula, Kopi dan Air panas Proses 1: Gula, Kopi dan Air Panas dimasukkan ke dalam cangkir. Proses 2: Gula, Kopi dan Air Panas diaduk hingga rata. Pengetesan Rasa : Jika rasa sudah pas, lanjutkan ke
33 output, jika belum kembali ke proses 1. Output : Secangkir Kopi Panas 3) Apakah anda masih ingat cara menghitung luas bujur sangkar? Variabel apa saja yang diperlukan untuk melakukan perhitungan? Apa rumus menghitung bujur sangkar? Baiklah, jika anda bisa menjawab pertanyaan ini, maka anda bisa membuat algoritma menghitung luas bujur sangkar. 4) Jika anda mampu menyusun algoritma luas bujur sangkar dengan benar, maka anda pun bisa menyusun algoritma luas persegi Panjang dengan benar. Buatlah algoritma tersebut. Sampai pada tahapan ini, anda sudah mulai memahami bagaimana menyusun algoritma dengan benar. Namun apakah anda sadar, apabila anda bekerja sama dengan programmer asing, apakah mereka memahami algoritma yang anda susun? Mengapa mereka tidak bisa memahaminya? Padahal algoritma yang anda buat, benar secara fungsional dan juga benar secara procedural? Mengapa programmer asing tersebut tidak bisa memahami algoritma anda? Tugas Mahasiswa Diskusikan permasalahan ini hingga dapat diambil kesimpulan, dimana titik permasalahan yang harus diatasi. Mengapa programmer asing tersebut tidak bisa memahami algoritma anda? 2. Flowchart Flowchart (Diagram alir) adalah sebuah jenis diagram yang mewakili algoritma, alir kerja atau proses, yang menampilkan langkah-langkah dalam bentuk simbol-simbol grafis, dan urut-urutannya dihubungkan dengan panah (Myers, 1986). Flowchart digunakan untuk dokumentasi yang menggambarkan proses dan urut-urutan yang dirancang. Karena dirancang dalam bentuk visual, maka flowchart memiliki keunggulan dalam merepresentasikan algoritma. Karena itu, standar internasional untuk penyusunan algoritma tidak dengan kalimat, akan tetapi dibuat secara
34 visual dengan bantuan simbol-simbol baku yang memiliki arti, yaitu dalam bentuk flowchart. Simbol tersebut, dapat dilihat pada Tabel 1. Sebagai langkah awal dari programming, kita memang diwajibkan untuk bisa menguraikan permasalahan ke dalam bentuk algoritma agar lebih mudah diselesaikan dalam program. Seperti yang telah disampaikan diatas, agar algoritma yang disusun bersifat universal, tidak terbatasi oleh bahasa, tidak menimbulkan beda persepsi (ambigu) atau multi tafsir dan sesuai dengan standar internasional maka algoritma dibuat dalam bentuk flowchart dengan label/ istilah menggunakan bahasa Inggris. Flowchart merupakan bagan alir yang menggambarkan urutan logika dari suatu prosedur pemecahan masalah. Tabel 1. Simbol dan definisi flowchart Simbol Definisi (terminal symbol), menunjukkan awal dan akhir dari program (preparation symbol), memberikan niai awal pada suatu variabel atau counter (processing symbol), menunjukkan pengolahan aritmatika dan pemindahan data (input/output symbol), menunjukkan proses input atau output (decision symbol), untuk mewakili operasi perbandingan logika, atau untuk proses seleksi (adanya syarat) (predefined process symbol), proses yang ditulis sebagai sub program, yaitu prosedur/ fungsi (connector symbol), penghubung pada halaman yang sama (off page connector symbol), penghubung pada halaman yang berbeda.
35 Simbol Definisi Arah proses Contoh Flowchart 1. Flowchart untuk menentukan keputusan Anda pada saat akan pergi 2. Flowchart untuk menjumlahkan dua buah data.
36 C. Penutup 1. Rangkuman Antar muka (interface) flowgorithm yang cukup sederhana dan mudah dipahami. Untuk mulai membuat algoritma, kita cukup klik kanan mouse pada garis panah flowchart template yang telah tersedia, setelah itu akan tampil wizard untuk memilih flowchart shape yang tersedia. Seluruh simbol yang merupakan komponen penyusun flowchart tersedia dalam program flowgorithm. Tampilan antar muka flowgorithm sangat membantu dalam penyusunan algoritma dalam bentuk flowchart. 2. Evaluasi dan Kunci Jawaban Buatlah algoritma kelulusan mahasiswa yang menjadi contoh kasus pada sub-bab pendahuluan algoritma dengan menggunakan aplikasi flowgorithm. 3. Tindak lanjut Bila sudah mampu menggunakan konsep algoritma untuk menyelesaikan kasus sederhana dan aktif diskusi kelas maka anda sudah memahami bab ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
37 BAB 3 Algoritma dengan Flowgorithm A. Pendahuluan 1. Deskripsi singkat cakupan materi Bagian ini memberikan pemahaman penggunaan flowgorithm dengan studi kasus pembuatan algoritma kalkulator penjumlahan sederhana. Penjelasan langkah per langkah dengan langsung studi kasus diharapkan mempercepat pemahaman mahasiswa dalam membuat algoritma (flowchart) menggunakan flowgorithm. Bab ini juga memperlihatkan cara eksekusi algoritma/ flowchart yang telah dibuat pada flowgorithm. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu menggunakan Flowgorithm untuk membuat algoritma/ flowchart untuk penyelesaian kasus pemrograman sederhana. B. Penyajian Bab ini akan membahas pemecahan masalah dengan menggunakan algoritma, yang dalam penyusunannya menggunakan tools Flowgorithm. Sebagai contoh, kita akan membuat algoritma kalkulator penjumlahan sederhana. Jadi, pada kasus pertama ini, kita diminta membuat sebuah kalkulator sederhana yang mampu menjumlahkan dua buah bilangan. Mari kita lakukan. Langkah pertama kita arahkan mouse pada garis koneksi main menuju end, ketika kursor berada di atas garis konektor, garis berubah warna. Klik kanan mouse pada garis konektor tersebut (lihat Gambar 31) untuk menambah shape algoritma.
38 Gambar 31. Klik kanan pada garis konektor untuk insert shape. Agar kalkulator mampu menjumlahkan, maka kalkulator tersebut perlu mendapat input berupa angka (numeric). Maka pada algoritma yang kita susun perlu ada deklarasi variable yang akan diinputkan, yaitu variable numerik dan tipe numeric-nya. Tujuannya agar program yang kita buat tersebut tahu. Jika diinput angka maka akan disimpan dalam variable, namun jika diinput selain angka maka akan muncul pesan error. Pada flowgorithm untuk deklarasi variable dilakukan dengan memilih kotak declare (lihat Gambar 32). Gambar 32.Deklarasi variable input Klik kanan pada panah
39 Karena tujuan program adalah menjumlahkan dua buah bilangan, maka kita perlu mendeklarasi tiga buah variable numeric. Caranya, double click pada kotak declare yang baru saja kita tambahkan. Maka akan muncul wizard declare properties seperti pada Gambar 32. Pada kotak dialog declare properties, kita diharuskan mengisi variable names dan type. Sementara check list array untuk sementara bisa kita abaikan terlebih dahulu, akan dijelaskan kemudian. Seperti telah disebutkan sebelumnya, kita perlu deklarasi tiga buah variable numeric, dua sebagai variable input (kita beri nama variable a dan b) dan satu sebagai variable output (kita beri nama variable hasil). Sebelum kita lanjutkan, anda perlu memahami tipe variable yang perlu diisi pada kotak dialog declare properties . Seperti yang kita lihat pada Gambar 32, tipe variable dibedakan menjadi empat kategori: integer, real, boolean dan string. Dalam bahasa pemrograman, tipe data integer adalah tipe data numeric yang terdiri dari angka bulat (tidak mengandung pecahan atau decimal) -- (Gajewski, 2018). Tipe data real adalah tipe data numeric yang mengijinkan ada nilai pecahan atau decimal. Sedangkan tipe data boolean adalah tipe data yang hanya terdiri dari dua buah nilai, yaitu true atau false. Terakhir, tipe data string adalah tipe data yang menyimpan barisan karakter dan symbol. Karena sifatnya ini, tipe data sting sering dimanfaatkan untuk deklarasi variable yang berisi kalimat. Gambar 33.Deklarasi variable kalkulator penjumlahan
40 Untuk kasus kalkulator penjumlahan yang sedang kita rancang algoritmanya, tipe data variable input (var a dan b) serta tipe data variable output (var hasil) bisa kita set sebagai integer (lihat Gambar 33). Jika memang demikian, maka nantinya kalkulator penjumlahan kita hanya mampu menjumlahkan bilangan bulat (tanpa pecahan) saja. Namun jika kita ingin agar kalkulator kita bisa menjumlahkan baik bilangan bulat maupun bilangan decimal, maka tipe data variable a, b, dan hasil kita set sebagai variable real (lihat Gambar 34). Gambar 34.Deklarasi tipe variable kalkulator penjumlahan dengan tipe real Selanjutnya kita definisikan input, yaitu variable a dan variable b. Caranya, klik kanan pada garis konektor setelah tahap deklarasi, kemudian pilih input (lihat Gambar 35). Kemudian double click pada kotak input yang tampil, maka akan muncul kotak dialog input properties, seperti yang diperlihatkan pada Gambar 35. Isikan nama variable input pada kotak yang tersedia.
41 Gambar 35.Definisi variable input pada algoritma kalkulator penjumlahan Ulangi sekali lagi untuk mendefinisikan variable input b, dengan cara seperti yang telah disampaikan sebelumnya (lihat Gambar 35 sebagai panduan). Setelah anda definisikan variable a dan variable b, maka hasilnya akan seperti potongan algoritma seperti Gambar 36. Gambar 36. Potongan algoritma kalkulator penjumlahan dengan deklarasi tipe variable dan variable input (var a dan var b) Sampai disini kita telah membuat algoritma kalkulator penjumlahan sampai tahap definisi input (Gambar 36). Klik kanan
42 Langkah selanjutnya kita definisikan proses penjumlahan dua buah variable yang telah diinputkan. Caranya, klik kanan pada garis konektor terakhir, kemudian pada kotak dialog yang muncul pilih Assign (lihat Gambar 37). Selanjutnya pada flowchart algoritma yang kita susun akan muncul kotak Assign, klik dua kali pada kotak tersebut untuk memunculkan kotak dialog assignment properties (lihat Gambar 38). Selanjutnya lengkapi isian yang diminta pada kotak dialog. Kotak isian variable, diisi dengan nama variable output yang telah kita definisikan sebelumnya. Sedangkan pada kotak isian expression, diisi dengan rumus penjumlahan variable a dan variable b (lihat Gambar 38). Gambar 37. Menampilkan kotak process pada algoritma kalkulator penjumlahan Klik kanan Klik 2x
43 Gambar 38. Kotak dialog untuk definisi process penjumlahan yang harus dijalankan Setelah proses penjumlahan didefinisikan maka langkah selanjutnya adalah definisikan output untuk menampilkan output hasil penjumlahan. Caranya, klik kanan pada garis konektor terakhir, kemudian pada kotak dialog yang muncul pilih Output (lihat Gambar 39). Selanjutnya klik dua kali pada shape output yang muncul untuk mendefinisikan variable output, yaitu variable hasil yang akan ditampilkan (lihat Gambar 39 sebelah kanan).
44 Gambar 39. Menambah shape output pada algoritma penjumlahan Adapun hasil akhir algoritma penjumlahan yang kita buat adalah seperti yang ditunjukkan pada Gambar 40. Gambar 40. Flowchart (algoritma) penjumlahan sederhana Klik kanan pada panah Klik 2x
45 Sekarang saatnya yang menarik dalam penggunaan software flowgorithm untuk membuat algoritma. Yaitu, software ini menyediakan icon run untuk mengeksekusi algoritma yang telah kita buat (lihat Gambar 41). Gambar 41. Icon menu run Gambar 42. Kotak dialog eksekusi algoritma yang telah dibuat Gambar 42 adalah hal yang menyenangkan dalam proses pembuatan algoritma dengan menggunakan flowgorithm. Flowgorithm menyediakan kotak dialog untuk running (eksekusi) algoritma yang telah disusun. Kotak dialog tampil setelah kita klik icon run (lihat Gambar 41). Flowgorithm melengkapi kotak dialog running dengan perintah yang harus kita lakukan. Perintah tersebut dapat dilihat pada bagian kiri bawah (lihat Gambar 42). Sesuai dengan perintah kita diminta untuk menginputkan sebuah nilai integer untuk variable a, kemudian tekan tombol enter. Gambar 43 memperlihatkan ketika kita (user) menginputkan angka 8 untuk diinisiasi sebagai value of variable a. Sebagaimana algoritma yang
46 telah dibuat, setelah input nilai untuk variable a maka dilanjutkan dengan input nilai untuk variable b (lihat Gambar 44). Pada Gambar 44 pula terlihat bahwa setelah user input nilai, maka algoritma menampilkan output berupa hasil penjumlahan variable a dan variable b. Kita lihat, flowgorithm menampilkan hasil 17 yang merupakan hasil penjumlahan 8 dan 9. Sampai di sini, kita telah membuktikan bahwa algoritma yang dibuat, telah sesuai tujuan, yaitu mampu menjumlahkan dua bilangan yang diinputkan dengan benar. Gambar 43. Ketika user input nilai saat running algoritma
47 Gambar 44. Ketika user telah input nilai untuk semua variable dan kemudian flowgorithm menampilkan output. Untuk memahami lebih lanjut tentang penggunaan flowgorithm untuk membuat algoritma, silahkan anda kerjakan tugas perancangan algoritma berikut: 1. Rancang algoritma untuk membuat kalkulator perkalian. Kalkulator yang dibuat harus mampu menghitung perkalian dengan angka minus. 2. Rancang algoritma untuk membuat kalkulator pembagian. Kalkulator yang dibuat harus mampu menghitung pembagian dengan angka pecahan. C. Penutup 1. Rangkuman Kunci penting dalam pembuatan algoritma pemrograman adalah definisi yang jelas pada bagian input, bagian proses dan terakhir bagian output. Pada studi kasus yang diberikan, yaitu kalkulator penjumlahan mahasiswa dapat melihat bahwa flowgorithm useful dalam membantu analis system memecahkan permasalahan. Flowgorithm juga terbukti sangat powerful karena dilengkapi dengan fasilitas execution algorithm.
48 Mahasiswa dapat cek dan melihat langsung bagaimana kerja algoritma yang telah dirancang tersebut. 2. Evaluasi dan Kunci Jawaban Untuk memantapkan pemahaman anda, silahkan kerjakan tugas berikut: 1. Disediakan pseudo-code untuk menghitung luas segitiga sebagai berikut: Psedocode: 1. Mulai 2. Masukkan alas, tinggi 4. Luas Segitiga=0.5*alas*tinggi 5. Cetak Luas Segitiga 6. Selesai Buatlah flowchartnya. 2. Disediakan pseudo-code untuk menghitung keliling segitiga sebagai berikut: Psedocode: 1. Mulai 2. Inputkan alas, tinggi 3. Hitung sisi miring (R) R =(akar) alas2 + tinggi2 4. Hitung keliling Keliling=alas+tinggi+R 5. Tulis keliling 6. selesai Buatlah flowchartnya.
49 3. Pada pseudo-code kali ini user terlebih dahulu diminta untuk memilih apakah akan menghitung luas segitiga atau menghitung keliling segitiga. Lengkapnya adalah seperti berikut: Psedocode: 1. Mulai 2. Input alas, tinggi 3. Input pilihan : luas segitiga atau keliling segitiga 4. Cek pilihan, jika luas segitiga: 3a. Luas Segitiga=0.5*alas*tinggi 3b. Cetak Luas Segitiga 3c. Selesai 4. Jika pilihan keliling segitiga: 4a. Hitung sisi miring (R) R =(akar) alas2 + tinggi2 4b. Hitung keliling Keliling=alas+tinggi+R 4c. Cetak keliling 4d. selesai Buatlah flowchartnya. 4. Buatlah flowchart untuk menentukan nilai terbesar dari 2 buah bilangan yang diinputkan 5. Buatlah flowchart untuk menentukan apakah seorang sales mendapatkan bonus atau tidak. Jika sales mampu menjual 3 barang atau lebih maka ia berhak mendapatkan bonus. 6. Buat algoritma (Flowchart) untuk menentukan apakah bilangan yang diinput adalah bilangan ganjil atau bilangan genap. 7. Buat algoritma (Flowchart) untuk mengubah satuan waktu yang diinputkan dari detik ke satuan jam dan menit
50 8. Buat algoritma (Flowchart) untuk konversi derajat celcius menjadi derajat Kelvin. 9. Buat algoritma (Flowchart) yang membantu user untuk memilih apakah akan mengkonversi derajat celcius menjadi derajat Fahrenheit ATAU konversi derajat celcius menjadi derajat Kelvin. 3. Tindak lanjut Bila sudah mampu menggunakan tools flowgorithm untuk merancang algoritma pemecahan masalah dan aktif diskusi kelas maka anda sudah memahami bab ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
51 BAB 4 APP Inventor A. Pendahuluan 1. Deskripsi singkat cakupan materi Bab ini mengajak untuk mempelajari menu-menu dasar APP Inventor untuk membuat apps Android. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu menyebutkan menu-menu dasar APP Inventor sebagai persiapan membuat program sederhana yang sebelumnya telah dirancang algoritma/ flowchartnya. B. Penyajian Seperti yang telah disampaikan pada bab sebelumnya APP Inventor adalah sebuah programming tools untuk membuat aplikasi android. APP Inventor bisa digunakan secara online dan offline. Mari kita pelajari lebih lanjut menu, tombol dan fungsi-fungsi APP Inventor dalam membuat apps Android. 1. Memulai Project Baru Langkah pertama untuk mengakses MIT App Inventor secara online, kita mengunjungi laman http://ai2.appinventor.mit.edu. Ini adalah homepage MIT App Inventor. Untuk mulai menggunakan App Inventor versi online, kita harus: Login menggunakan Akun Google (lihat Gambar 45).
52 Gambar 45.Halaman login untuk akses APP Inventor versi online Setelah sukses login, APP Inventor akan menampilkan halaman My Project. Halaman My Project adalah halaman yang menampilkan daftar/ list project yang pernah kita buat. APP Inventor menyimpan file-file project kita secara cloud. Gambar 46 memperlihatkan daftar project yang tersimpan pada akun setelah login. Gambar 46.Halaman My Project pada APP Inventor Untuk membuat project baru, maka langkah berikutnya adalah klik menu Projects > Start New Project, kemudian beri nama project yang ingin kita buat.
53 Gambar 47.Menu untuk membuat project baru 2. Halaman Designer Setelah sukses membuat nama project baru, APP Inventor akan menampilkan halaman worksheet kosong, yaitu halaman designer dan halaman bloks (lihat Gambar 48 dan Gambar 49). Gambar 48.Halaman designer Gambar 49.Halaman Blocks
54 Pada halaman designer terdapat beberapa jendela seperti Palette, Viewer, Components, Media, dan Properties. Tools tersebut berfungsi untuk mendesain tampilan aplikasi android sesuai keinginan. a. Palette merupakan jendela tempat mengambil komponen-komponen yang dikategorikan dalam beberapa kategori untuk dimasukkan dalam aplikasi yang dibuat. Terdapat kategori User Interface, Layout, Media, Drawing and Animation, Maps, Sensors, Social, Storage, Connectivity, LEGO MINDSTORMS, Experimental, dan Extension. b. Viewer merupakan tempat untuk mengatur tampilan komponen pada aplikasi nantinya. c. Components merupakan tempat untuk mengatur komponen-komponen yang telah diletakkan di viewer, seperti misalnya mengganti nama komponen, dan menghapus komponen. d. Properties merupakan tempat untuk mengatur properti layar, dan komponen-komponen yang digunakan pada aplikasi yang sedang dibuat seperti lebar, tinggi, warna latar, besar huruf, dll. e. Media merupakan tempat untuk mengunggah gambar untuk digunakan pada aplikasi yang sedang dibuat. Selanjutnya mari kita fokus mempelajari komponen-komponen Palette yang berada di bagian sebelah kiri layar. Gambar 50 memperlihatkan kategorisasi komponen-komponen Palette yang dapat ditambahkan ke layar viewer. Anda bisa mengeksplorasi fungsi dari setiap komponen dengan meng-klik icon ? pada setiap komponen. Adapun penjelasan fungsi setiap komponen Palette dituliskan pada Tabel 2.
55 Gambar 50. Ada banyak komponen pada Palette APP Inventor Tabel 2. Keterangan fungsi Palette pada APP Inventor Simbol Nama Fungsi Kategori User Interface Button Dapat mendeteksi ketukan, hold down ketika pengguna menekan tombol, atau ketika pengguna melepas tombol. Ketika button mendeteksi salah satu dari hal tersebut, button akan menjalankan perintah. Checkbox Dapat mendeteksi ketukan dari pengguna dan mengganti state-nya menjadi true/false (boolean). Date Picker Memunculkan kalender untuk memilih tanggal. Image Memasukkan gambar dalam aplikasi. Label Menampilkan teks dalam aplikasi.
56 Simbol Nama Fungsi List Picker Menampilkan list yang dapat dipilih oleh pengguna ketika pengguna menekan list. List View Menampilkan list. Notifier Memunculkan pesan/peringatan pop-up pada aplikasi. Pesan dapat hilang secara otomatis, atau harus menerima input dari pengguna terlebih dahulu baru menghilang. Password Text Box Menyediakan textbox yang menyembunyikan teks yang dimasukkan. Slider Menyediakan progress bar yang dapat digeser. Spinner Menampilkan pop-up list dengan elemen yang dapat dipilih ketika ditekan. Text Box Menyediakan area untuk mengetik teks. Time Picker Memunculkan jam untuk memilih waktu. Web Viewer Menyediakan area yang dapat menampilkan laman web. Kategori Layout Simbol Nama Fungsi Horizontal Arrangement Menyusun komponen secara horizontal. Horizontal Scroll Arrangement Menyusun komponen secara horizontal, namun jika lebar komponen melebihi lebar komponen ini, maka dapat digeser (scroll). Table Arrangement Membuat tabel. Vertical Arrangement Menyusun komponen secara vertikal. Vertical Scroll Arrangement Menyusun komponen secara vertikal, namun jika tinggi komponen melebihi tinggi komponen ini, maka dapat digeser (scroll). Kategori Media Simbol Nama Fungsi Camcorder Mengaktifkan kamera HP dan merekam. Camera Mengaktifkan kamera HP dan memotret.
57 Simbol Nama Fungsi Image Picker Menampilkan galeri pada aplikasi. Pengguna dapat memilih gambar yang akan disimpan dari galeri yang ditampilkan. Player Memainkan musik/audio dan mengatur vibrasi HP. Sound Memainkan musik/audio dan mengatur vibrasi HP dalam interval waktu tertentu. Sound Recorder Merekam suara. Speech Recognizer Mengkonversi suara menjadi teks menggunakan fitur speech recognition pada HP. Text to Speech Mengkonversi teks menjadi suara. Pitch dan kecepatan pembacaan dapat diatur. Video Player Memutar video serta menampilkan pengaturannya. Yandex Translate Menerjemahkan teks dari satu bahasa ke bahasa yang lainnya. Kategori Drawing and Animation Simbol Nama Fungsi Ball Sprite bola yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas. Canvas Kanvas tempat sprite berinteraksi dengan pengguna atau dengan sprite lainnya, atau tempat pengguna menggambar. Image Sprite Sprite gambar yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas. Kategori Maps Simbol Nama Fungsi Circle Memvisualisasikan lingkaran dengan radius tertentu (dalam meter) pada koordinat tertentu. Dapat juga digunakan untuk menjalankan program ketika pengguna berada di suatu area. Feature Collection Mengelompokkan fitur-fitur Maps. Event yang terjadi pada salah satu komponen pada kelompok tersebut, akan memicu event pada komponenkomponen lainnya. Line String Menggambar garis pada peta. Map Menampilkan peta pada layar aplikasi. Marker Memberi tanda pada suatu lokasi di peta.
58 Simbol Nama Fungsi Polygon Membuat perimeter pada peta. Rectangle Merupakan polygon dengan garis lintang dan garis bujur untuk batas utara, selatan, timur, dan barat. Jika sudut segiempat dipindahkan, maka informasi koordinat akan diperbaharui. Kategori Sensors Simbol Nama Fungsi Accelerometer Sensor Mendeteksi goyangan dan percepatan dalam m/s2. Barcode Scanner Membaca barcode. Gyroscope Sensor Mengukur kecepatan sudut dalam derajat/detik. Location Sensor Menyediakan informasi geografis seperti koordinat, ketinggian, kecepatan, dan alamat. Dapat juga mengkonversi alamat menjadi koordinat. Near Field Memungkinkan aplikasi mengaktifkan fitur komunikasi jarak dekat (NFC). Orientation Menentukan orientasi HP. Pedometer Menentukan banyaknya langkah, dan jarak yang ditempuh. Proximity Sensor Mengukur jarak antara objek dengan layar HP. Kategori Social Simbol Nama Fungsi Contact Picker Menampilkan list berisi kontak ketika ditekan. Email Picker Menampilkan list berisi email ketika pengguna mengetikkan kata kunci ataupun email dari orang yang dituju. Phone Call Melakukan panggilan telepon. Phone Number Picker Menampilkan list berisi nomor kontak pada layar HP. Sharing Memungkinkan pertukaran berkas atau pesan antara satu aplikasi dengan aplikasi lainnya yang terdapat pada HP. Texting Mengirim pesan teks ke suatu nomor kontak.
59 Simbol Nama Fungsi Twitter Memungkinkan komunikasi dengan Twitter sehingga pengguna dapat membuat tweet, melihat tweet, dll. Kategori Storage Simbol Nama Fungsi File Menerima atau mengirim berkas. Dapat juga digunakan untuk membaca atau menulis berkas. Fusiontables Control Memungkinkan komunikasi dengan Google Fusion Table. Google Fusion Table dapat menyimpan, membagikan, query, dan memvisualisasikan tabel data. TinyDB Menyimpan data untuk aplikasi sehingga ketika aplikasi ditutup, dan kemudian dibuka kembali, data masih tersimpan. TinyWebDB Menyimpan data pada web. Kategori Connectivity Simbol Nama Fungsi Activity Starter Memanggil aplikasi lain. Bluetooth Client Membuat aplikasi sebagai Bluetooth client. Bluetooth Server Membuat aplikasi sebagai Bluetooth server. Web Memungkinkan aplikasi untuk berinteraksi dengan web dan menyediakan fungsi untuk HTTP GET, POST, PUT, dan DELETE. Kategori Experimental Simbol Nama Fungsi CloudDB Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan software Redis. FirebaseDB Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan Firebase. Selanjutnya, mari kita mempelajari cara menambah komponen, mendesain layout antar muka, dan melakukan setting properties tambahan. Sebagai bahan studi kasus, kita akan menambahkan dua buah tombol yang diletakkan secara berdampingan. Bagaimana caranya?
60 Gambar 51. Studi kasus, add dua buah tombol secara berdampingan Lihat pada Gambar 51 pada bagian Components, untuk menambahkan dua buah tombol secara berdampingan, diperlukan komponen layout HorizontalArrangement. Komponen HorizontalArrangement ada pada kelompok Palette Layout (lihat Gambar 51 sebelah kiri). Drag and drops komponen HorizontalArrangement tersebut hingga ke layar bagian viewer. Jika sukses, pada kolom bagian Components, akan muncul komponen HorizontalArrangement. Untuk melakukan setting lebih lanjut, pada layar Components klik HorizontalArrangement. Kemudian lihat pada layar sebelah kanan, pada kolom bagian Properties (lihat Gambar 52). Apabila lebar komponen ingin full satu layar, maka aturlah pada properties width -> pilih fill parent. Demikian pula apabila ingin memberi warna background, aturlah pada properties BackgroundColor (lihat Gambar 52).
61 Gambar 52.Menu properties untuk komponen HorizontalArrangement Selanjutnya kita akan menambahkan tombol pertama. Caranya, Drag and drops komponen button dan arahkan ke dalam komponen HorizontalArrangement di layar viewer. Komponen button dapat kita temukan pada bagian Palette yaitu di User Interface. Seperti sebelumnya, jika sukses, pada kolom bagian Components, akan muncul komponen Button1. Selain itu, pada layar viewer akan tampak muncul kotak tombol (lihat Gambar 51). Ulangi langkah yang sama, untuk menambah komponen Button2. Jika tidak ada kendala, maka pada kolom bagian Components, akan muncul komponen Button2 dan pada layar viewer akan tampak muncul kotak tombol kedua (lihat Gambar 51).
62 Gambar 53. Tombol Rename dan tombol Delete pada kolom Components. Agar pada proses selanjutnya tidak mengalami kesulitan, karena bingung dengan nama Button1, Button2, hingga mungkin Button 20. Karena jumlahnya banyak, kita lupa untuk keperluan apa saja button tersebut. Maka sangat dianjurkan nama komponen tersebut diganti (di-rename) sesuai dengan fungsinya. Gambar 53 memperlihatkan tombol Rename dan tombol Delete untuk keperluan penyesuaian komponen yang diperlukan. Pada saatnya nanti, mungkin kita akan membuat program yang berpindah dari satu screen ke screen berikutnya. Misalkan: pada Apps Facebook berpindah dari screen login yang kemudian redirect ke screen homepage. Artinya kita mungkin perlu membuat program yang multiscreen. Gambar 54.Membuat aplikasi multi-screen Gambar 54 memperlihatkan tombol Add Screen untuk menambah screen. Gambar 54 memperlihatkan pula contoh Apps yang mempunyai dua buah screen, yaitu Screen1 dan Screen2. 3. Halaman Blocks Gambar 55 memperlihatkan halaman Blocks sebagai halaman “coding” pada APP Inventor. Perhatikan pada kolom Blocks pada Gambar 55 sebelah kiri bagian bawah. Disana sudah terlihat komponen-komponen yang sebelumnya telah ditambahkan pada halaman designer. Selain itu, pada halaman blocks terdapat beberapa codeblock yang berfungsi untuk memprogram aplikasi android sesuai yang diinginkan, yang
63 terbagi dalam beberapa kelompok, yaitu: Control, Logic, Math, Text, Lists, Colors, Variables, dan Procedures (built-in – lihat Gambar 55 sebelah kiri atas). Untuk menggunakan codeblock tersebut lakukan drag and drop blocks yang dibutuhkan ke layar viewer. Sedangkan Tabel 3 memberikan penjelasan singkat fungsi codeblock pada APP Inventor. Gambar 55.Modul Blocks pada APP Inventor Tabel 3. Penjelasan fungsi codeblock pada APP Inventor Blok Kode Fungsi Kategori Experimental If kondisional. Perintah ini digunakan untuk mengeksekusi blok yang ada pada then jika kondisi if bernilai true. Namun jika kondisi “if” false maka blok program setelah if yang dieksekusi
64 Blok Kode Fungsi If-else kondisional. Jika kondisi “if” memenuhi syarat, maka blok yang ada setelah “then” dieksekusi. Namun jika kondisi “if” tidak memenuhi syarat maka blok pada else dieksekusi. If-else if kondisional. Jika kondisi “if” pertama memenuhi syarat, maka blok yang ada pada “then” pertama dieksekusi. Namun jika kondisi “if” pertama tidak memenuhi syarat maka dilakukan pengecekan kondisi “if” kedua, jika memenuhi syarat, maka blok yang ada pada “then” kedua dieksekusi. Looping dari angka pertama hingga angka terakhir dengan suatu interval. Maka gambar disamping berarti loop dari angka 1 hingga 5 dengan interval 1: 1, 2, 3, 4, 5. Block program yang di-looping adalah yang ada di dalam do For bertingkat. Untuk setiap objek dalam list, dilakukan looping. Block program yang di-looping adalah yang ada di dalam do Jika nilai test true, maka loop while berjalan. Block program yang di-looping adalah yang ada di dalam do Untuk membuka layar baru yang namanya tertera pada blok ini Untuk membuka layar baru yang Namanya tertera pada blok screenName. Blok ini mengatur sebuah nilai variable yang diberikan pada bagian startValue.Nilai ini bisa digunakan oleh layar berikutnya yang dibuka. akses nilai yang diberikan oleh block open another screen with start value atau block close screen with value, yang mana nilai ini dapat digunakan untuk memberikan nilai atau digunakan untuk penyeleksian kondisi. Digunakan untuk menutup layar. Dan kembali pada layar sebelumnya.
65 Blok Kode Fungsi Untuk mengakhiri dan menutup aplikasi yang sedang dijalankan Kategori Logic Blok Kode Fungsi Boolean true/false. Blok true -> memberikan nilai true. Biasa digunakan pada blok logika if Jika dipasangkan dengan true/false maka true menjadi false, dan false menjadi true. Memeriksa apakah satu objek sama dengan/tidak sama dengan objek di kanan. Jika sesuai kriteria, maka blok akan bernilai true, dan false jika tidak sesuai. Kalau argumen itu berbentuk karakter/kalimat, bernilai sama (=) jika kalimat/karakter itu memiliki kesamaan setiap karakter dan memiliki urutan yang sama persis contohnya Banana dan banana bukanlah termasuk hal yang sama. Pada logika and jika kedua syarat terpenuhi, maka nilainya menjadi true. Sedangkan pada logika or, jika salah satu syarat atau keduanya terpenuhi, maka nilainya menjadi true. Kategori Math Blok Kode Fungsi Digunakan untuk menginput angka. Digunakan untuk membandingkan dua angka. Perbandingan dapat berupa sama dengan, tidak sama dengan, lebih dari, kurang dari, lebih dari sama dengan, dan kurang dari sama dengan.
66 Blok Kode Fungsi Operasi matematika dasar, yaitu tambah, kurang, kali, bagi, pangkat, dan modulus. Variabel atau operan yang akan dijumlahkan atau dikali bisa diatur dengan klik icon seting yang berbentuk roda gigi biru. Operasi pangkat menggunakan tanda topi ( ^ ) Modulo adalah operasi untuk mendapatkan nilai sisa pembagian Operasi akar kuadrat. Selain operasi akar kuadrat bisa juga untuk operasi nilai absolut dan lainnya Mengambil nilai integer secara acak dari range yang ditentukan. Operasi trigonometri sin, cos, tan. Operasi untuk mengetahui apakah nilai yang dikembalikan berbentuk numeric Kategori Text Blok Kode Fungsi Teks kosong. Digunakan untuk memasukkan argumen berupa kalimat (alpabet, angka, dan karakter spesial). Pada App Inventor yang dimasukkan ke dalam block ini akan diperlakukan seperti kalimat/ string. Menggabungkan dua atau lebih teks. Tanda gear berwarna biru memiliki fungsi untuk mengatur jumlah pair yang akan di-join. Memeriksa jika teks kosong atau tidak. Memeriksa apakah ada bagian tertentu dalam suatu teks.
67 Blok Kode Fungsi Memisahkan teks pada penanda tertentu dan membuatnya menjadi list. Memisahkan teks berdasarkan tanda spasi Operasi untuk mengembalikan kalimat yang dipasangkan pada blok ini menjadi bentuk uppercase atau downcase. Blok untuk menghitung jumlah karakter (termasuk spasi) pada kalimat Kategori List Blok Kode Fungsi Membuat list kosong. Membuat list. Menambahkan elemen pada list. Memeriksa apakah ada elemen tertentu pada list. Memeriksa banyaknya elemen pada list. Memeriksa apakah list kosong atau tidak. Mengambil elemen dari suatu list. Menghapus elemen dari suatu list. Kategori Color Blok Kode Fungsi
68 Blok Kode Fungsi Memilih opsi warna Membuat warna sendiri dengan menggunakan kode RGB warna. Kategori variables Blok Kode Fungsi Membuat suatu variabel global. mendapatkan nilai dari variable yang tertera. Menetapkan/ set isi dari variabel global. Kategori procedure Blok Kode Fungsi Membuat suatu prosedur. Ketika anda sudah membuat procedure block, misal diberi nama prosedur “jumlahkan” maka APP Inventor akan membuat block call prosedur “jumlahkan” untuk memanggil procedure tersebut. Membuat suatu fungsi yang mengembalikan hasil tertentu. Misalkan, dibutuhkan sebuah kondisi, jika button1 diklik maka lakukan sesuatu. Gambar 56 memperlihatkan teknis programming-nya. Klik pada komponen button1 maka akan muncul block program standar, sesuai dengan komponen yang dipilih. Menyesuaikan dengan kasus, yaitu jika
69 button1 diklik maka … -> kita drag and drop block When button1.Click do …… (lihat Gambar 56). Gambar 56. Blocks program pada komponen Button1 4. Simulasi dan Testing App Seperti telah disampaikan pada bab sebelumnya, ada tiga cara untuk men-simulasi dan testing App yang telah di-build, yaitu dengan menggunakan aplikasi AI Companion, dengan menggunakan Emulator dan melalui koneksi USB (lihat Gambar 57) Gambar 57. Cara simulasi dan testing app yang di-built Untuk simulasi dan testing dengan menggunakan menu AI Companion, sebelumnya memerlukan proses instalasi App AI Companion terlebih dahulu pada perangkat smartphone Android yang digunakan. App
70 AI Companion dapat di-download di Google Play dan digunakan secara free. Penjelasan lebih lanjut yang disertai dengan contoh studi kasus akan disampaikan secara detail pada bab selanjutnya. Menu simulasi dan testing berikutnya yang akan dibahas pada buku ini adalah menu Emulator. aiStarter adalah aplikasi android emulator disediakan oleh APP Inventor. aiStarter harus diinstall terlebih dahulu sebelum dapat digunakan. Poin keunggulan utama menggunakan emulator aiStarter adalah tidak memerlukan smartphone Android untuk simulasi dan testing App yang di-built. Penjelasan teknis secara detail dapat dibaca dan dipelajari pada URL: http://appinventor.mit.edu/explore/ai2/setupemulator.html Selain emulator aiStarter yang harus di-install terlebih dahulu, buku ini juga menggunakan free online emulator untuk simulasi dan testing App. Salah satu emulator online terbaik dan gratis bisa diakses pada alamat URL: https://www.apkonline.net/. Gambar 58 memperlihatkan user interface apkonline.net. Pada menu Android Emulator terdapat sub menu Upload & run your Apk yang dapat digunakan untuk simulasi dan testing. Gambar 58.free online emulator untuk simulasi dan testing App Agar dapat simulasi dan testing menggunakan apkonline.net, maka perlu men-download project menjadi file .apk terlebih dahulu. Gambar 59 memperlihatkan menu Build > App (save .apk to my computer) untuk mendapatkan file .apk project yang sedang dikerjakan.
71 Gambar 59.Menyimpan project menjadi file .apk 5. Share your Apk atau Upload Apk ke Google Play Nugraha (2014) pada artikelnya yang dimuat pada halaman website teknojurnal.com memaparkan cara untuk share your apk dengan cara upload Apk ke Google Play. Untuk dapat upload apk hasil karya kita ke Google Play, langkah pertama adalah akses url: https://play.google.com/apps/publish/ Gambar 60. Tahap pendaftaran sebagai Developer Google Setelah baru pertama akses url tersebut di atas, Gambar 60 memperlihatkan bahwa Google mengarahkan untuk sign-in atau mendaftar
72 sebagai developer Google. Ada empat tahap yang harus diselesaikan saat proses pendaftaran. Nugraha (2014) menyebutkan tidaklah sulit untuk merilis aplikasi (.apk) di Google Play, namun persyaratan membayar registration fee menggunakan kartu kredit menjadi unsur penghambat bagi kebanyakan orang Indonesia. C. Penutup 1. Rangkuman Secara umum, pemrograman dengan tools APP Inventor terbagi menjadi dua tahapan programming, yaitu desain tampilan antar muka dan pengaturan blocks program. Desain tampilan antar muka dilakukan pada modul designer, sedangkan pengaturan blocks program dilakukan pada modul Blocks. Setelah pengenalan menu dasar APP Inventor yang menjadi pokok bahasan bab ini, diharapkan mahasiswa telah memiliki pengetahuan dasar mengoperasikan APP Inventor untuk membuat program sederhana. 2. Evaluasi dan Kunci Jawaban Buat kelompok, tentukan ide program sederhana. Rancang skenario aksi program. Kemudian desain tampilan antar mukanya. Setelah itu, tentukan blok program – blok program yang kiranya akan digunakan. Presentasikan hasilnya dan lakukan diskusi kelas. 3. Tindak lanjut Bila sudah mampu menunjukkan dengan tepat menu untuk desain user interface dan menu untuk perancangan codeblock dalam rangka memecahkan masalah maka anda sudah sudah memahami bab ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
73 BAB 5 Input dan Output Handler pada APP Inventor A. Pendahuluan 1. Deskripsi singkat cakupan materi Bagian ini mengajak memahami implementasi pemrograman dalam penanganan input dan output. Pada studi kasus, dicontohkan bagaimana “memprogram” tombol sebagai bagian dari komponen input. Sedangkan media suara menjadi komponen output. Program yang dibuat juga diselaraskan dengan konsep algoritma. Artinya, membuat program tidak terlepas dari perancangan algoritma. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu membuat program sederhana untuk penanganan objek input dan output. B. Penyajian 1. Pengantar Input dan Output Definisi Input (masukan) adalah aktifitas user (pengguna) dengan program komputer yang memungkinkan user memberikan (baca: menginputkan) data ke dalam program (Kadir, 2013). Input berfungsi sebagai media untuk memasukkan data dari luar system ke dalam program untuk kemudian diolah. Sedangkan definisi Output (keluaran) adalah respon program dalam mengeluarkan informasi untuk user (Kadir, 2018a). Informasi yang dikeluarkan oleh program bisa berupa tampilan di layar monitor, cetak ke printer, suara, video dan lain sebagainya. Gambar 61 memperlihatkan sebagian contoh komponen input pada pemrograman Android dengan APP Inventor. Pada gambar tersebut diperlihatkan komponen:
74 a. Textbox untuk input username. b. PasswordTextBox untuk input password. c. Button untuk input aksi eksekusi (enter). Gambar 61. Contoh komponen input pada pemrograman Android dengan APP Inventor Gambar 62 memperlihatkan sebagian contoh komponen input dan juga komponen output pada pemrograman Android dengan APP Inventor. Pada Gambar 62 bagian kiri memperlihatkan komponen input dan Gambar 62 bagian kanan adalah contoh output berupa tampilan dilayar monitor. Gambar 62 tersebut sekaligus memperlihatkan proses dari input yang diberikan user dan respon program ketika yang di-input-kan tersebut success. Gambar 62. Contoh komponen input (kiri) dan komponen output (kanan) pada pemrograman Android dengan APP Inventor
75 2. Studi kasus konsep input dan output Pada bagian ini, akan dipraktekkan pembuatan aplikasi Android yang mengimplementasikan konsep input dan output sederhana. Deskripsi permasalahan adalah sebagai berikut: Anda diminta membuat sebuah program Android yang dapat dijalankan melalui perangkat smartphone Android. User akan memberikan input kepada system melalui sebuah tombol. Kemudian system mengeluarkan output berupa suara yang berbicara “Halo ini adalah aplikasi android karya pertama”. Seperti penjelasan deskripsi di atas, aplikasi yang akan dibuat akan diberi nama: TexttoSpeech. Adapun komponen input yang akan digunakan adalah: tombol. Sedangkan komponen output-nya adalah: suara (sound). Mari kita susun algoritma program terlebih dahulu. Adapun psedocode-nya adalah seperti berikut: 1. Mulai 2. Input -> user klik tombol 3. Proses -> konversi text to speech: “Halo ini adalah aplikasi android karya pertama” 4. Output -> play sound 5. Selesai Tugas Mahasiswa Konversi psedo-code tersebut menjadi bentuk flowchart. 1. Contoh yang akan dilakukan pada praktikum kali ini adalah membuat aplikasi TexttoSpeech. Adapun langkah pembuatan TexttoSpeech dengan menggunakan APP Inventor versi online adalah sebagai berikut: 2. Akses alamat APP Inventor 2: http://ai2.appinventor.mit.edu/ 3. Login dengan menggunakan akun gmail yang dimiliki. 4. Setelah berhasil login, buat project baru, dengan cara klik button Start New Project. Beri nama project baru ini dengan TexttoSpeech.
76 5. Setelah berhasil membuat project baru, APP Inventor akan menampilkan layar worksheet kosong. Project siap dikerjakan mengikuti tahapan algoritma yang telah dibuat. 6. Berdasarkan algoritma, tahapan pertama setelah mulai adalah: Input -> user klik tombol. Berarti kita perlu menambahkan komponen button ke layar viewer. 7. Klik dan tahan “Button” di Palette. Drag and drop ke layar viewer (lihat Gambar 63). Guna button tersebut adalah sebagai sarana input ke dalam system. Pada studi kasus yang sedang dikerjakan ini, fungsi tombol ini adalah sarana user untuk memberi tahu program kapan “dia” harus speech the text. Gambar 63. Menambah komponen input -> button 8. Rename Button1 menjadi ButtonSpeech (lihat Gambar 64). Gambar 64. Rename nama button 9. Ganti label pada button tersebut menjadi “Talk to Me”. Caranya, klik pada komponen Button1 pada layar viewer, kemudian pada layar
77 properties cari pengaturan Text. Pada keadaan default, isian pada Text adalah: Text for Button1 (lihat Gambar 65). Gambar 65.Memberi label button Ganti tulisan Text for Button1 tersebut menjadi “Talk to Me”. Selanjutnya fokus pada tahapan algoritmanya, yaitu: Input -> user klik tombol artinya kita perlu melakukan programming bahwa ketika user klik tombol ButtonSpeech lakukan tahapan proses. Untuk itu kita harus pindah ke halaman Blocks untuk membuat block programmingnya. Gambar 66. block programming: ketika user klik tombol ButtonSpeech 10. Gambar 66 memperlihatkan layar Blocks. Perhatikan pada sebelah kiri layar, terdapat komponen ButtonSpeech, klik pada komponen tersebut maka akan muncul block program seperti yang ditunjukkan oleh Gambar 66. Untuk programming ketika user klik tombol, maka drag and drop block When ButtonSpeech.Click do …… ke layar viewer. Hasilnya seperti diperlihatkan pada Gambar 67.
78 Gambar 67. Block When ButtonSpeech.Click do …… di tampil layar viewer Sampai pada langkah ini, pengaturan untuk tahapan algoritma: Input -> user klik tombol, sudah selesai. 11. Programming selanjutnya adalah menyelesaikan tahapan algoritma: Proses -> konversi Text to Speech. Untuk proses konversi Text to Speech APP Inventor sudah menyediakan komponen tersebut, letaknya di Palette kategori media. Gambar 68 memperlihatkan komponen TextToSpeech di Palette kategori media. Drag and drop komponen tersebut ke layar viewer. Setelah dilepaskan, pada layar viewer tidak menghasilkan perubahan apapun, namun, pada layar Components daftar komponen bertambah satu, yaitu komponen TextToSpeech (lihat Gambar 68). 12. Langkah selanjutnya, masih proses menyelesaikan tahapan algoritma: Proses -> konversi Text to Speech: “Halo ini adalah aplikasi android karya pertama”. Selanjutnya kita berpindah ke layar Blocks untuk membuat block programming-nya.
79 Gambar 68.Add komponen TextToSpeech 13. Dari layar Blocks sebelah kiri, klik komponen TextToSpeech, maka APP Inventor akan menampilkan blok program yang bersesuaian. Karena yang dibutuhkan menyuarakan tulisan, maka drag and drop blok call TextToSpeech.Speak message……. ke layar viewer. Drag and drop di bagian dalam blok program When ButtonSpeech.Click (lihat Gambar 69). Gambar 69. Menambah block Call TextToSpeech1.Speak message …… di layar viewer 14. Langkah selanjutnya adalah menambahkan tulisan yang akan dikonversi menjadi speech. Caranya, klik pada komponen Text di bagian layar built-in. APP Inventor blok program yang bersesuaian (lihat Gambar 70).
80 Gambar 70. Add blok program Text ke layar viewer 15. Kemudian, ketikkan tulisan “Halo ini adalah aplikasi android karya pertama” pada blok program text (lihat Gambar 71). Gambar 71. Ketik tulisan yang ingin dikonversi menjadi speech pada blok text 16. Penyusunan blok kode program di atas, sekaligus mengatur output program, yaitu berupa suara yang “speech” kalimat pesan. Dengan demikian, rancangan program telah selesai. Semua alur algoritma telah dibuat programnya. 17. Simpan project tersebut. 3. Testing Program Sekarang, saatnya simulasi dan testing project yang telah dibuat. Teknik simulasi dan testing yang akan dibahas pada sub-bab ini menggunakan teknik AI Companion, seperti yang telah dibahas pada bab sebelumnya. Jadi pastikan app AI Companion telah ter-install pada perangkat smartphone Android yang akan digunakan untuk testing. Berikutnya, pastikan perangkat smartphone dan laptop/ PC yang sedang menjalankan APP Inventor terkoneksi dengan jaringan internet yang stabil.
81 Langkah pertama, jalankan app AI Companion pada perangkat smartphone Android. Gambar 72 memperlihatkan tampilan AI Companion di smartphone. Gambar 72. Tampilan AI Companion di perangkat smartphone Android Setelah semua siap, langkah berikutnya, pada APP Inventor klik menu Connect > AI Companion maka akan muncul wizard yang menampilkan QR-Code dan juga kode (lihat Gambar 73). QR-Code yang tampil pada layar laptop/ PC kemudian kita scan dengan AI Companion pada perangkat smartphone Android. Atau bisa juga dengan mengetikkan kode yang tampil pada wizard, kemudian klik tombol connect with code seperti yang terlihat pada Gambar 72. Tunggu beberapa saat, jika tidak ada error dan tidak ada kendala koneksi jaringan, maka AI Companion pada perangkat smartphone Android akan menampilkan antar muka app seperti yang telah dirancang (seperti bisa dilihat pada Gambar 74).