82 Gambar 73. Menu Connect > AI Companion pada APP Inventor Gambar 74. Simulasi app project menggunakan AI Companion Klik tombol Button Speech pada app di AI Companion dan perhatikan apa yang terjadi. Sesuaikah program yang dibuat seperti alur algoritma yang telah dirancang sebelumnya? C. Penutup 1. Rangkuman Konsep penanganan input dan output adalah konsep dasar dan konsep inti dalam pemrograman komputer. Penanganan input yang baik, untuk kemudian diprogram sesuai dengan kebutuhan dan kemudian output memberikan respon yang tepat, cepat sesuai dengan kebutuhan user adalah prinsip membuat program yang baik. Pada bab ini, mahasiswa diajak memahami konsep dan prinsip pembuatan program tersebut dengan menyelesaikan studi kasus TextToSpeech.
83 2. Evaluasi dan Kunci Jawaban a. Pada Palette Sensors terdapat modul AccelerometerSensor. Gunakan modul tersebut untuk membuat program “Goyang Suara”. Jika perangkat handphone digoyang, maka program mengatakan “Stop, jangan digoyang” 1) Rancang algoritma penyelesaian kasus yang dijelaskan pada point a. 2) Buat program apk sesuai algoritma yang telah dirancang. b. Pada Palette Sensors terdapat modul BarcodeScanner. rancang studi kasus input – output sederhana dengan menggunakan modul BarcodeScanner tersebut. c. Buat kelompok, rancang studi kasus input – output sederhana. Rancang penyelesaiannya. Hasil rancangan dibuat dalam bentuk ppt untuk selanjutnya dipresentasikan dan didiskusikan bersama-sama. 3. Tindak lanjut Bila sudah mampu menggunakan App Inventor untuk merancang program kasus sederhana dan aktif diskusi kelas maka anda sudah sudah memahami bab ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
84 BAB 6 Program Statis dan Program Dinamis A. Pendahuluan 1. Deskripsi singkat cakupan materi Program yang bersifat statis tidak memberikan fasilitas kepada user untuk memberikan input secara langsung kepada sistem. User harus memiliki pengetahuan programming untuk input dengan cara mengubah kode program. Oleh karena kelemahan tersebut, saat ini tidak ada lagi program yang bersifat statis. Mahasiswa perlu memiliki pengetahuan untuk penanganan objek input yang baik, sehingga mampu membuat program yang bersifat dinamis. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu membuat program sederhana untuk penanganan objek input yang diberikan oleh user secara dinamis. B. Penyajian 1. Studi kasus program dinamis Dengan memperhatikan komponen input pada studi kasus yang telah dibuat pada bab sebelumnya, yaitu app TextToSpeech dan app GoyangSuara adalah contoh program statis. Program statis, biasa juga disebut hard-code programming adalah program yang komponen inputnya didefinisikan langsung pada kode program. Pada app TextToSpeech kalimat yang akan dikonversi dalam bentuk suara dituliskan pada blok program. Dengan demikian user tidak bisa mengganti/ merubah kalimat yang ingin disuarakan tersebut. Bukankah demikian? Lain halnya, apabila user diberikan fasilitas untuk mengetikkan kalimat yang ingin disuarakan. Kemudian tombol di-klik, kalimat yang
85 diketikkan tersebut disuarakan. Dengan demikian, user dapat sesuka hati merubah kalimat yang akan dikonversi menjadi suara. Hal demikian inilah yang disebut dengan program yang dinamis. Tugas diskusi kelas Jadi apa yang dimaksud dengan program dinamis? Apa usulan anda untuk merubah app TextToSpeech menjadi program yang dinamis? Masih ingatkan saudara dengan algoritma kalkulator penjumlahan yang dibahas pada bab sebelumnya? Ya, jika contoh kasus ini dibuat programnya, maka ini juga menjadi salah satu contoh program yang dinamis. Untuk lebih memahami konsep penanganan input yang dinamis, mari kita praktek membuat app penjumlahan sederhana tersebut. Pembuatan program mengikuti algoritma yang telah dibuat pada bab sebelumnya. Langkah pembuatan app CalcSederhana adalah sebagai berikut: 1. Akses alamat APP Inventor 2: http://ai2.appinventor.mit.edu/ 2. Login dengan menggunakan akun gmail yang dimiliki. 3. Setelah berhasil login, buat project baru, dengan cara klik button Start New Project. Beri nama project baru ini dengan CalcSederhana. 4. Setelah berhasil membuat project baru, APP Inventor akan menampilkan layar worksheet kosong. Project siap dikerjakan mengikuti tahapan algoritma yang telah dibuat. 5. Berdasarkan algoritma, tahapan pertama setelah mulai adalah: deklarasi variable a, b dan hasil sebagai integer. Kemudian dilanjutkan dengan input variable a, kemudian dilanjutkan lagi dengan input variable b. 6. Berdasarkan penjelasan potongan algoritma di atas, rancangan antar muka adalah sebagai berikut -> user input variable a dan variable b melalui komponen textbox.
86 Gambar 75. Rancangan halaman designer app CalcSederhana 7. Gambar 75 memperlihatkan komponen-komponen yang ditambahkan pada halaman designer. Berikut adalah penjelasan singkat komponen yang digunakan: a. Horizontal Arrangement. Gambar 75 memperlihatkan project CalcSederhana menggunakan dua buah komponen Horizontal Arrangement. Komponen Horizontal Arrangement termasuk Palette kategori layout, artinya komponen ini digunakan untuk pengaturan tata letak komponen lainnya. Terlihat pada Gambar 75, terdapat dua komponen HorizontalArrangement. Pada masing-masing HorizontalArrangement terdapat dua komponen, yaitu Label (untuk menampilkan tulisan “Bilangan1” dan “Bilangan2”) dan Textbox sebagai media untuk menerima input bilangan yang akan dijumlahkan oleh user. b. Pada komponen TextboxBil1 properties Hint diisi “Inputkan bilangan pertama” dan pada komponen TextboxBil2 properties Hint diisi “Inputkan bilangan kedua”. Pengaturan properties ini berfungsi untuk menampilkan pesan/ informasi pada textbox sebelum data diinputkan. c. Button. Tombol atau button yang diperlihatkan pada Gambar 75 berfungsi untuk menerima input, yaitu perintah eksekusi untuk menjumlahkan. d. HorizontalArrangement3 dan LabelOutput. Penjelasan dua komponen ini sengaja dipisahkan, karena memang terdapat sedikit kekhususan. Jika diperhatikan pada Gambar 75 di bagian viewer
87 (sebelah kiri), tidak terlihat penampakan komponen HorizontalArrangement3 dan LabelOutput, padahal kedua komponen tersebut ada daftar Components (Gambar 75 sebelah kanan). Tidak tampaknya komponen HorizontalArrangement3 dan LabelOutput di layar viewer dikarenakan pengaturan visible pada properties HorizontalArrangement3 di-unchecked (lihat Gambar 76). Mengapa harus di un-visible? Hal ini karena kebutuhan programming untuk tampilan output. Jadi skenarionya, pada saat user input bilangan yang akan dijumlah, output belum terlihat dilayar. Setelah user klik tombol Jumlahkan, barulah output tersebut muncul dan menampilkan hasil penjumlahan. Gambar 76. Pengaturan properties untuk komponen HorizontalArrangement3 Berdasarkan komponen pada Gambar 75, Tabel 4 memperlihatkan pengaturan properties komponen yang digunakan untuk project CalcSederhana ini.
88 Tabel 4. Komponen dan pengaturan properties project CalcSederhana Komponen Properties Nilai diinputkan Screen1 - - HorizontalArrangement1 Width Fill Parent Label1 Text Bilangan 1 TextBoxBil1 Hint Inputkan bilangan pertama HorizontalArrangement2 Width Fill Parent Label2 Text Bilangan 2 TextBoxBil2 Hint Inputkan bilangan kedua ButtonJml Width Fill Parent Text Jumlahkan HorizontalArrangement3 Width Fill Parent Visible unchecked LabelOutput - - 8. Langkah berikutnya, mengerjakan program pada bagian proses, yaitu menjumlahkan bilangan yang diinputkan oleh user. Untuk itu, klik halaman Blocks untuk menyusun codeblock program CalcSederhana ini. Logika program yang akan dibuat adalah seperti ini: Ketika user klik tombol “Jumlahkan” -> get bilangan1 dan bilangan2 yang diinputkan dan simpan pada variabel a dan variable b. Kemudian jumlahkan nilai yang disimpan variable a dan variable b tersebut -> tampilkan sebagai output. 9. Pembahasan rancangan blok program yang diperlihatkan pada Gambar 77 (blok app CalcSederhana) didasarkan pada skema algoritma yang telah dirancang sebelumnya. Juga berdasarkan logika program yang dituliskan pada langkah 8 di atas.
89 Gambar 77. Blok program CalcSederhana 10. Blok program yang berwarna orange, merupakan block built-in variables. Fungsinya untuk deklarasi dan menangani variable yang digunakan. Pada algoritma, disebutkan bahwa CalcSederhana menggunakan tiga buah variable integer, yaitu variable a, variable b dan variable hasil. Tiga buah block program: “initialize global” pada Gambar 77 tersebut adalah cara mendeklarasikan variable a, variable b dan variable hasil sebagai variable integer. 11. Blok program yang berwarna coklat (atau blok when ButtonJml.Click do …..) adalah blok untuk menangani event ketika tombol ButtonJml diklik. 12. Ketika tombol ButtonJml di-klik, maka program harus menangkap (get bilangan1 dan bilangan2 yang diinputkan) dan simpan pada variabel a dan variable b. Ini diekspresikan dengan blok program dan 13. Algoritma selanjutnya adalah: jumlahkan nilai yang disimpan variable a dan variable b. Ini diekspresikan dengan blok program 14. Selanjutnya adalah pembuatan blok program untuk penanganan output hasil. Pada awal desain antar muka di halaman designer, komponen HorizontalArrangement3 dan LabelOutput diset hidden (tersembunyi) karena akan difungsikan untuk penanganan output.
90 Oleh karena itu, ekspresi blok program yang adalah seperti berikut: Aktifkan visible komponen HorizontalArrangement3 kemudian set LabelOutput.Text dengan variabel hasil. 15. Semua alur algoritma telah dibuat blok programnya. Saatnya simulasi dan testing di perangkat smartphone. Namun sebelumnya, jangan lupa untuk save project. 2. Testing Program Testing project yang akan dibahas pada sub-bab ini menggunakan teknik AI Companion, seperti yang telah dibahas pada bab sebelumnya. Klik menu AI Companion pada laptop yang menjalankan APP Inventor online (lihat Gambar 78). Gambar 78. Menu AI Companion untuk simulasi dan testing app Gambar 79. Scan QR-Code yang tampil dengan AI Companion pada smartphone Android.
91 Kemudian scan QR-Code yang tampil pada APP Inventor online dengan app AI Companion pada smartphone Android (lihat Gambar 79). Tunggu proses loading hingga selesai, maka AI Companion akan menampilkan app hasil desain, seperti yang ditunjukkan pada Gambar 80. Gambar 80. App hasil rancangan tampil melalui AI Companion Kemudian isikan bilangan pertama dan bilangan kedua kemudian klik tombol Jumlahkan, seperti yang ditunjukkan pada Gambar 81. Maka output hasil penjumlahan akan muncul di bawah tombol Jumlahkan, pada komponen HorizontalArrangement3 (lihat Gambar 82). Gambar 81. Isikan bilangan yang akan dijumlahkan dan klik tombol Jumlahkan Gambar 82. Tampilan output hasil penjumlahan
92 C. Penutup 1. Rangkuman APP Inventor menyediakan komponen input yang lengkap. Studi kasus app CalcSederhana dengan jelas memperlihatkan perbedaan konsep program dinamis dibandingkan dengan app TextToSpeech dan app GoyangSuara yang bersifat statis. 2. Evaluasi dan Kunci Jawaban Untuk memantapkan pemahaman anda, silahkan dilihat kembali flowchart yang telah dikerjakan pada bab 3 terdahulu, kemudian buatlah program .apk-nya: a. Apk menghitung luas segitiga b. Apk menghitung keliling segitiga c. Apk untuk menentukan nilai terbesar dari 2 buah bilangan yang diinput-kan d. Apk untuk menentukan apakah bilangan yang di-input adalah bilangan ganjil atau bilangan genap. e. Apk untuk mengubah satuan waktu yang di-input-kan dari detik ke satuan jam dan menit f. Apk 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 merancang program dengan input dan output yang dinamis dengan tetap didahului oleh perancangan algoritma untuk penyelesaian masalah dan aktif diskusi kelas maka anda sudah sudah memahami bab ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
93 BAB 7 Penanganan Statemen Logika pada APP Inventor A. Pendahuluan 1. Deskripsi singkat cakupan materi Logic statement atau percabangan logika biasa digunakan untuk control handling atau conditional handling untuk kepentingan pengambilan suatu keputusan. Contoh sederhana conditional handling adalah penentuan bilangan ganjil dan genap. Penanganan pengambilan keputusan sangat penting dipelajari jika ingin menguasai kemampuan pemrograman. Banyak kasus yang merupakan penyelesaian masalah penentuan keputusan. Pada bab ini, mahasiswa diajak untuk memahami penggunaan percabangan logika pada pemrograman komputer. Studi kasus yang dijelaskan pada bab ini adalah untuk menangani permasalahan penentuan bilangan ganjil dan genap. Di akhir bab, mahasiswa diminta untuk menyelesaikan permasalahan conditional handling yang tingkat kompleksitasnya lebih tinggi. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu membuat program sederhana untuk penanganan kasus dengan percabangan logika. B. Penyajian Statemen logika atau percabangan logika biasa digunakan untuk control handling atau conditional handling. Conditional handling digunakan untuk pengambilan suatu keputusan (Gajewski, 2018). Pengambilan keputusan berguna untuk menangani pilihan yang mempunyai dua atau lebih alternatif tindakan. Dalam hal ini, pemilihan alternatif tindakan bergantung pada suatu kondisi. Mengacu pada penjelasan fungsi codeblock pada table 3, terdapat beberapa codeblock APP Inventor yang memiliki
94 fungsi conditional handling. Gambar 83 memperlihatkan beberapa codeblock utama untuk fungsi conditional handling. Gambar 83. Codeblock APP Inventor untuk conditional handling Tugas Mahasiswa Bersama teman satu kelompok, buatlah daftar kasus/ permasalahan yang merupakan kasus conditional handling. Kemudian lakukan diskusi kelas untuk mendapatkan gambaran contoh kasus conditional handling. Mari selesaikan permasalahan penentuan bilangan ganjil/genap sebagai studi kasus conditional handling. Deskripsi permasalahan adalah: jika program diberikan input sebuah bilangan maka program kemudian menampilkan output berupa keputusan apakah bilangan tersebut adalah bilangan ganjil atau bilangan genap. Tugas Mahasiswa Susun algoritma program ganjil/ genap dengan menggunakan aplikasi flowgorith, kemudian lakukan simulasi, setelah itu lakukan diskusi kelas Setelah membuat simulasi flowgorithm algoritma ganjil/ genap sukses, lanjutkan dengan perancangan app ganjilGenap. Yang ditampilkan dan dibahas pada bab ini mungkin bisa sedikit berbeda dengan algoritma rancangan mahasiswa, namun secara garis besar, tidak akan berbeda secara fungsional.
95 Gambar 84. Rancangan user interface dan komponen pada halaman designer Gambar 84 memperlihatkan rancangan tampilan antar muka (user interface) dan pada Gambar 84 sebelah kanan memperlihatkan komponenkomponen yang digunakan untuk membuat app ganjilGenap. Tabel 5 memperlihatkan pengaturan properties komponen yang digunakan untuk project app ganjilGenap ini. Tabel 5. Pengaturan komponen dan properties app ganjilGenap Komponen Properties Nilai diinputkan Screen1 Title Cek Ganjil-Genap VerticalArrangement1 Width Fill Parent Label1 Text Inputkan Angka: TextBoxBil Width Fill Parent Hint Inputkan angka yang akan dijumlahkan HorizontalArrangement2 AlignHorizontal Center:3
96 Komponen Properties Nilai diinputkan Width Fill Parent Visible Unchecked LabelOutput - - HorizontalArrangement1 AlignHorizontal Center:3 Width Fill Parent ButtonCek Text Cek Pengaturan properties yang perlu dijelaskan lebih detail adalah sebagai berikut: a. Memberi nama title pada komponen Screen1. Caranya, isi komponen title (perhatikan Gambar 85). Gambar 85 sebelah kanan memperlihatkan user interface dengan title screen seperti yang telah diinputkan sebelumnya. Gambar 85.Memberi nama title pada screen. b. Komponen pertama yang digunakan VerticalArrangement1. Komponen ini dipilih karena ingin menempatkan Label1 di atas Textbox (disusun secara vertikal). Kemudian atur lebar komponen VerticalArrangement1. Lebar VerticalArrangement1 diatur agar mengikuti lebar layar monitor secara penuh (lihat Gambar 86). Setingan ini saya pilih karena selera estetika yang dirasa paling pas saat desain user interface. Jika anda memiliki ide perancangan yang lebih baik dan lebih menarik, silahkan diterapkan pada studi kasus ini.
97 Gambar 86. Mengatur lebar VerticalArrangement1 c. Didalam VerticalArrangement1 ditempatkan komponen Label. Komponen ini fungsinya sebagai penginformasi kepada user. Caranya isikan “Inputkan Angka pada properties Text (lihat Gambar 87). Gambar 87. Mengganti tulisan pada komponen Label d. Komponen selanjutnya yang masih berada di dalam VerticalArrangement1 adalah TextBoxBil. TextBoxBil difungsikan sebagai komponen penerima input dari user. Pengaturan properties pada komponen TextBoxBil adalah seperti diperlihatkan pada Gambar 88. Lebar kolom textbox mengikuti lebar parent (VerticalArrangement1) dan properties Hint diisi dengan kalimat “Inputkan angka yang akan dijumlahkan” (lihat Gambar 88). Properties Hint berfungsi untuk memberikan bantuan informasi kepada user mengenai apa yang harus diinputkan pada textbox tersebut. Gambar 88. Pengaturan properties VerticalArrangement1 Setelah melakukan pengaturan VerticalArrangement1, Label1 dan TextBoxBil selanjutnya lakukan pengaturan codeblock untuk inisiasi variable input. Pengaturan ini dipaparkan pada bagian penjelasan codeblock poin (a).
98 e. Komponen selanjutnya yang digunakan adalah HorizontalArrangement2. Pada komponen ini nantinya akan ditempatkan LabelOutput yang difungsikan untuk menampilkan output, yaitu berupa keputusan apakah bilangan yang diinputkan adalah bilangan ganjil/ bilangan genap. Karena akan difungsikan sebagai penampung output, maka setting default komponen ini di-hidden terlebih dahulu. Baru akan ditampilkan ketika tombol ButtonCek diklik. Properties yang diatur pada komponen ini adalah AlignHorizontal, Width dan Visible (lihat Gambar 89) Gambar 89. Pengaturan properties komponen HorizontalArrangement2 Setelah semua komponen app ganjilGenap ditata dan ditempatkan pada halaman designer dengan mengikuti panduan Tabel 5, maka langkah selanjutnya adalah melakukan perancangan codeblock pada halaman blocks. Berikut adalah penjelasan perancangan codeblock yang telah disesuaikan dan didasarkan mengikuti flowchart cek ganjil/ genap. a. Langkah pertama algoritma cek ganjil/ genap adalah inisiasi atau deklarasi variable angka (variable input) sebagai integer/ numerik.
99 Dengan menggunakan codeblock variable, drag and drop codeblock initialize global ke layar viewer. Kemudian pasangkan dengan codeblock 0 (zero) yang ada pada codeblock numeric untuk deklarasi bahwa variable angka ini adalah variable numeric. Untuk detail lihat Gambar 90. Gambar 90. Codeblock deklarasi variable angka sebagai numerik b. Codeblock berikutnya adalah pengaturan proses ketika tombol ButtonCek diklik (Gambar 91 -- kiri). Codeblock when ButtonCek.Click terdapat pada Screen1 bagian bawah, pada komponen HorizontalArrangement1 (Gambar 91 -- kanan). Gambar 91. Codeblock When button Click c. Ketika tombol ButtonCek di klik maka program harus menangkap (get) bilangan yang diinputkan user pada kolom textbox dan disimpan pada variable angka (set data variable). Codeblock ini ada pada kelompok variables, drag and drop codeblock set global variable to ke layar viewer. Kemudian pasang dengan codeblock TextBoxBil.Text (lihat Gambar 92). Codeblock TextBoxBil.Text ada di kelompok komponen TextBoxBil (lihat Gambar 93). Gambar 92. Codeblock set data variable dengan bilangan yang diinput
100 Gambar 93. Letak codeblock TextBoxBil.Text d. Setelah variable angka terisi dengan bilangan yang diinput user pada textbox, langkah selanjutnya cek sisa pembagian (-- disebut dengan modulo) variable angka dengan angka dua. Codeblock untuk pengecekan condition modulo variable angka dibagi 2 adalah 1, dapat dilihat pada Gambar 94. Gambar 94. codeblock cek condition modulo variable angka dibagi 2 adalah 1 e. Selanjutnya menyusun codeblock yang dieksekusi ketika kondisi if -> true lalu menampilkan output, yaitu “bilangan ganjil”. Codeblock-nya bisa dilihat pada Gambar 95. Gambar 95. Codeblock untuk penanganan output kondisi if true Karena codeblock pada Gambar 95 di atas akan dieksekusi kondisi if -> true maka codeblock tersebut ditempatkan pada blok then. Ingat kembali pada saat perancangan komponen HorizontalArrangement2 di halaman designer yang direncanakan untuk penanganan output. Komponen tersebut di-set un-visible saat app baru dijalankan. Karena itu, agar output dapat dilihat oleh user pada
101 saat tombol di-klik, maka perlu di-coding pada codeblock agar visible kembali. Codeblock baris pertama adalah untuk pengaturan agar komponen HorizontalArrangement2 kembali visible. Kemudian codeblock baris kedua dan baris ketiga untuk pengaturan komponen LabelOuput. f. Sedangkan untuk penanganan output yang dieksekusi ketika kondisi if false ditampilkan pada Gambar 96 dan ditempatkan pada blok else. Gambar 96. Codeblock untuk penanganan output kondisi if false Keseluruhan rancangan codeblock app ganjilGenap standar berdasarkan flowchart dapat dilihat pada Gambar 97. Gambar 97. Keseluruhan codeblock app ganjilGenap Mahasiswa dapat saja merancang codeblock yang berbeda dengan yang ditampilkan. Khususnya apabila mahasiswa mengatur estetika tampilan antar muka yang lebih baik daripada yang dicontohkan pada buku ini. Namun secara prinsip tidak akan jauh berbeda.
102 Setelah simpan project, saatnya melakukan simulasi dan testing dengan bantuan aplikasi AI Companion. Klik menu Connect > AI Companion pada APP Inventor Online, kemudian scan QR-Code yang muncul menggunakan app AI Companion pada smartphone Android. Tunggu beberapa saat hingga prosentasi 100% dan app ganjilGenap tampil pada smartphone Android (lihat Gambar 98 dan Gambar 99). Gambar 98. Simulasi dan testing app menggunakan AI Companion Gambar 99. Tampilan app ganjilGenap di AI Companion smartphone Gambar 100. Tampilan app ganjilGenap ketika diinput angka 51 dan diklik tombol cek
103 Gambar 100 dan Gambar 101 memperlihatkan ketika app ganjilGenap diujicoba dengan menginputkan bilangan 51 dan bilangan 100. Berdasarkan kedua gambar ujicoba system, terlihat bahwa app yang dirancang mampu memberikan output yang sesuai. Bilangan 51 dinyatakan sebagai bilangan ganjil dan bilangan 100 yang diinputkan dinyatakan sebagai bilangan genap. Gambar 101. Tampilan app ganjilGenap ketika diinput angka 100 dan diklik tombol cek C. Penutup 1. Rangkuman APP Inventor sangat membantu dan membuat pemecahan masalah penentuan bilangan ganjil-genap menjadi terlihat menyenangkan. Setelah algoritma pemecahan masalah ditetapkan, pembangunan program dapat dilakukan dengan cepat. Rancangan tampilan antar muka di halaman designer dan pembangunan kode program yang “hanya” drag and drop dapat dilakukan dengan cepat. Berikutnya setelah app terbentuk, hasil simulasi dan testing dengan bantuan AI Companion memperlihatkan bahwa aplikasi yang dibangun mampu memecahkan permasalahan. Bilangan yang diinputkan oleh user dapat ditentukan ganjil atau genap dengan tepat. 2. Evaluasi dan Kunci Jawaban Untuk memantapkan pemahaman anda, silahkan kerjakan tugas berikut:
104 1) Rancang algoritma dan app yang mampu melakukan pengecekan sebuah pada sebuah textbox. Jika textbox tersebut kosong (tidak terisi karakter apapun) maka tampilkan sebuah notifikasi. Begitupun sebaliknya, jika pada textbox terdapat isian tampilkan sebuah alert yang lain. 2) App Body Mass Index (BMI) Deskripsi Masalah: BMI adalah sebuah index yang menyatakan perbandingan antara massa tubuh manusia dewasa dengan tinggi badan. Index ini secara umum dapat digunakan untuk menyatakan seseorang mempunyai kondisi tubuh gemuk, ideal ataupun kurus. Rumus BMI adalah = _ℎ … … ( ) () 2 … … ( ) Output keputusan BMI, berdasarkan parameter berikut: BMI Keputusan < 18.5 Kurus 18.5 sd < 25 Ideal 25 sd < 30 Kegemukan > 30 Gendut 3) Buatlah App yang menangani login. Deskripsi permasalahan: Jika username dan password yang diinputkan benar maka program redirect ke halaman (screen) baru, sedangkan jika username dan password yang diinputkan keliru maka program menampilkan pesan error. 4) Buatlah App dari kasus/ permasalahan conditional handling yang anda usulkan pada diskusi kelas di awal bab ini.
105 3. Tindak lanjut Bila sudah mampu menerapkan logika if untuk menyelesaikan permasalahan dan aktif diskusi kelas maka anda sudah memahami bab ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
106 BAB 8 Penanganan Statemen Logika Tingkat Lanjut A. Pendahuluan 1. Deskripsi singkat cakupan materi Berbeda dengan logika IF satu tingkat yang hanya mampu menangani conditional handling sederhana, bab ini mengajak mahasiswa untuk mempelajari penanganan statemen logika tingkar lanjut. Contoh permasalahan yang menjadi studi kasus adalah login dengan banyak kategori user. Di akhir bab, disediakan kasus conditional handling lain untuk mengasah kemampuan mahasiswa dalam problem solving dan sekaligus perancangan software. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu membuat program sederhana untuk penanganan kasus dengan logika perulangan tingkat lanjut. B. Penyajian Logika conditional handling yang telah dibahas pada bab sebelumnya adalah if conditional sederhana. Hanya menggunakan fungsi if satu tingkat. Bab ini akan mengajak untuk memahami if conditional yang lebih kompleks, yaitu dengan menggunakan fungsi if bertingkat (nested if). Contoh kasus yang menjadi pokok permasalahan adalah: login dengan kategori user. Deskripsinya: app login_berkategori memiliki dua buah textbox untuk menerima input username dan password. Kemudian terdapat komponen spinner untuk memilih kategori user, yaitu: direktur, manajer produksi, kepala gudang, dan kasir. Ketika username dan password yang diinputkan keliru maka program akan menampilkan pesan
107 error. Kemudian ketika username dan password benar maka program akan akan redirect pada screen yang bersesuaian dengan kategori user yang dipilih. Jika username, password dan kategori user: direktur benar maka program akan redirect pada screen direktur. Kemudian jika username, password dan kategori user: kepala gudang benar maka program akan redirect pada screen kepala gudang, dan begitu seterusnya. Tugas Mahasiswa Rancanglah algoritma app login_berkategori sambil bermain game. Gamenya adalah: 1. Pause waktu pengerjaan algoritma setiap 10 menit. 2. Undi nomor presensi mahasiswa, mahasiswa yang beruntung diminta menampilkan flowchart-nya ditayangan LCD Proyektor. 3. Undi nomor presensi mahasiswa lagi, mahasiswa kedua yang beruntung ini diminta mengomentasi flowchart yang ditampilkan sembari membandingkan dengan flowchart yang sedang dikerjakannya. Game ini dilakukan berulang hingga flowchart selesai dibahas. Selanjutnya mari kita buat app login_berkategori berdasarkan flowchart yang telah dirancang. Sesuai flowchart yang telah dirancang, app ini menggunakan banyak screen. Gambar 102 memperlihatkan banyaknya screen yang ditambahkan. Gambar 102. Screen pada app login_berkategori
108 Screen utama adalah Screen1 (tidak bisa di-rename). Sedangkan screen lainnya ditambahkan ke project dengan klik tombol Add Screen. Sekarang kita fokuskan dulu pada perancangan designer dan blocks pada Screen1. Tambahkan komponen pada halaman Screen1 seperti yang terlihat pada Gambar 103 bagian sebelah kanan. Kemudian lakukan penataan tata letak dan tampilan antar muka (user interface) seperti yang terlihat pada Gambar 103 bagian sebelah kiri. Gambar 103. Desain dan komponen pada halaman Screen1 Aturlah properties komponen-komponen yang telah ditambahkan untuk project app login_berkategori, seperti yang ditampilkan pada Tabel 6.
109 Tabel 6. Pengaturan komponen dan properties app login_berkategori Komponen Properties Nilai diinputkan Screen1 Title Industri Obat dan Jamu AlignHorizontal Center:3 AppName SI Obat dan Jamu BackgroundImage Tambahkan file image untuk background Title Industri Obat dan Jamu Image1 Tambahkan image sebagai logo (pada studi kasus menggunakan file logo USB) Height 10percent Width 60percent VerticalArrangement1 Width Percent: 95 % HorizontalArrangement1 Width Fill Parent Label1 Text Username: Username (Textbox) Width Fill Parent HorizontalArrangement2 Width Fill Parent Label2 Text Password: Password (Textbox) - - HorizontalArrangement3 AlignHorizontal Center:3 Width Fill Parent Label3 Text Hak Akses: SpinnerAkses ElementsFromString direktur, Manajer Produksi, Kepala Gudang, Kasir Login (Button) Text Login Label4 Text Anda belum punya akun? Daftar disini TextColor red Register (Button) Text Register Notifier1 (invisible) - - Setelah selesai menambahkan komponen, mengatur properties -nya dan menata tampilkan user interface halaman designer, maka langkah
110 selanjutnya adalah mengatur codeblock yang diperlukan pada halaman blocks. Sesuai flowchart yang telah dirancang, pertama tambahkan codeblock untuk deklarasi variable dan sekaligus penanganan input dari user. Ada tiga buah input yang perlu ditangani, yaitu username, password dan hak-akses. Gambar 105 memperlihatkan codeblock untuk deklarasi variable username, variable password, serta Gambar 105 memperlihatkan codeblock untuk penanganan input hak-akses. Gambar 104. Codeblock untuk deklarasi variable Gambar 105. Codeblock untuk input handle Codeblock deklarasi variable username dan variable password diambil dari codeblock built-in kategori variables. Sedangkan, karena input hak-akses menggunakan komponen spinner (combo-box), maka untuk menambahkan codeblock penanganan input hak-akses tersebut diambil dari komponen spinner, yaitu block when.Spinner1.AfterSelecting. Drag and drop codeblock tersebut ke halaman viewer. Kemudian pada codeblock when.Spinner1.After Selecting ditempatkan codeblock untuk menangkap input spinner yang dipilih oleh user, yaitu block set.Spinner1.Selection to dan block get Selection (lihat Gambar 105). Gambar 106. codeblock when.login.Click
111 Perancangan selanjutnya adalah untuk mengatur proses ketika tombol login di-klik. Tambahkan codeblock when.login.Click. Codeblock tersebut diambil dari komponen button login (Lihat Gambar 106). Berikutnya, tangkap input username dan password kemudian simpan pada variable username dan variable password yang telah dideklarasikan sebelumnya. Codeblock untuk proses ini dengan menggunakan block set Global variable to, yang ada pada kategori variables. Selanjutnya, rename codeblock set Global variable to dengan nama variable username dan password. Kemudian pasangkan dengan codeblock username.Text dan codeblock password Text agar username dan password yang diinputkan dapat disimpan pada variable username dan variable password (lihat Gambar 107). Gambar 107. Penanganan variabel username dan password yang diinputkan Gambar 108. Ditambah codeblock logika IF Ketika tombol button login di-klik, maka terdapat pengecekan autentifikasi username, password dan hak-akses yang diinputkan user. Logika IF dapat digunakan untuk melakukan pengecekan autentifikasi yang dimaksud. Codeblock logika IF terdapat pada kelompok Built-in kategori Control (lihat Gambar 55). Drag and drop codeblock if.. then.. ke halaman viewer di dalam block when.login.Click (Lihat Gambar 108).
112 Selanjutnya, menambahkan proses autentifikasi login user pada codeblock logika IF. Sesuai dengan yang telah dijelaskan pada deskripsi masalah bahwa user terdiri dari 4 kategori, yaitu kasir, kepala gudang, manajer produksi dan direktur maka proses pengecekan autentifikasi pun akan dilakukan sebanyak 4 kali. Artinya, terdapat perulangan pengecekan logika IF sebanyak 4 kali. Adapun yang dimaksud dengan autentifikasi login user adalah memeriksa apakah yang diinputkan user pada kolom hak-akses, kolom username, dan pada kolom password sudah sesuai dengan yang seharusnya. Sebagai contoh, Tabel 7 memperlihatkan isian yang harus diinputkan oleh user kasir ketika akan login tersebut adalah kasir. Tabel 7. Parameter autentifikasi login user kategori: kasir Parameter Inputan Hak-akses kasir Username kasirusb Password kasir123 Codeblock untuk melakukan pengecekan autentifikasi user seperti pada Tabel 7 adalah seperti yang diperlihatkan pada Gambar 109. Gambar 109. Codeblock pengecekan autentifikasi user Selanjutnya adalah perancangan codeblock jika kondisi IF = true. Jika true maka app redirect (open screen) ke screen kasir. Codeblock untuk pernyataan tersebut adalah open another screen screenName, yang ada pada kelompok Built-in kategori Control (lihat Gambar 55). Kemudian tambahkan codeblock text untuk menuliskan “ScreenKasir” sesuai dengan add screen yang telah ditambahkan. Codeblock ini ditempatkan pada block then pada codeblock IF (lihat Gambar 110).
113 Gambar 110. Codeblock redirect ke ScreenKasir untuk kondisi IF=true Berikutnya, karena masih terdapat proses pengecekan autentifikasi user yang lain, yaitu: kepala gudang, manajer produksi dan direktur, maka perlu merubah codeblock IF-Then menjadi IF bertingkat, yaitu: IF – Then - Else IF – Then – Else IF – Then - Else.. Caranya, klik icon setting (bergambar icon gear warna biru), kemudian tambahkan (drag n drop) blok Else If dan Else. Gambar 111 sebelah kiri memperlihatkan proses penambahan blok Else If dan Else, sedangkan Gambar 111 sebelah kanan memperlihatkan hasilnya. Gambar 111. Menambah logika IF dan kondisi else pada codeblock IFThen Setelah codeblock nested IF (atau IF bertingkat) siap, maka berikutnya kita siapkan proses pengecekan autentifikasi user yang lain (kepala gudang, manajer produksi dan direktur). Tambahkan pula codeblock pada block Then yang mengatur ketika kondisi IF = true, yaitu app redirect (open screen) ke screen yang bersesuaian. Gambar 112 memperlihatkan keseluruhan rancangan codeblock pada screen1 atau screen utama.
Gambar 112. Codeblock
114 halaman Screen1 (Screen utama)
115 Setelah selesai melakukan perancangan halaman designer dan halaman blocks pada Screen1, langkah selanjutnya adalah melakukan desain user interface untuk screen lain yang ditunjukkan pada Gambar 102. Pada studi kasus login_kategori ini, perancangan screen lain ini berguna untuk redirect screen yang dieksekusi pada block then (perhatikan codeblock pada Gambar 112). Setelah semua screen yang ditunjukkan pada Gambar 102, telah dirancang user interface dan codeblock-nya, maka langkah berikutnya adalah testing app. Metode ujicoba yang akan dibahas pada bab ini adalah dengan menggunakan free online emulator, yaitu : http://apkonline.net/. Jika anda lupa apa itu online emulator, silahkan baca kembali Bab 4, subbab simulasi dan testing app. Langkah pertama untuk testing app dengan apkonline.net adalah build apk dari project login_kategori yang sedang dikerjakan. Caranya klik menu Build > App (save .apk to my computer) -- lihat Gambar 113. Gambar 113. Build file installer android (ekstensi .apk)
116 Setelah didapatkan file .apk kemudian buka browser dan ketikkan alamat http://apkonline.net/, kemudian pilih menu My Apk manager & Apk upload. Pilih file .apk yang telah didapatkan kemudian upload ke apkonline.net (lihat Gambar 114). Gambar 114. Upload file .apk pada online emulator http://apkonline.net Gambar 115 sampai dengan Gambar 118 memperlihatkan hasil ujicoba App. Gambar 115 memperlihatkan user interface dari halaman home screen ketika App dijalankan. Tampilan pada Gambar 115 terlihat sama seperti penataan dan rancangan pada designer sebelumnya. Kemudian pada home screen tersebut disimulasikan dengan menginputkan username dan password yang tidak sesuai, maka Gambar 116 memperlihatkan ada notifikasi yang muncul dan memberikan informasi bahwa terjadi kegagalan login. Ini memperlihatkan bahwa codeblock proses autentifikasi berjalan sukses. Kemudian app diujicoba dengan input username, password dan hak-akses yang benar. Gambar 117 memperlihatkan ketika user sukses login sebagai kepala gudang dan
117 Gambar 118 memperlihatkan tampilan ketika user sukses login sebagai kasir. Gambar 115. Tampilan home screen dari App login_kategori
118 Gambar 116. Ujicoba ketika diinput username dan password yang keliru Gambar 117. Tampilan ketika ujicoba login sebagai kepala gudang berhasil
119 Gambar 118. Tampilan ketika ujicoba login sebagai kasir berhasil C. Penutup 1. Rangkuman Membuat program untuk studi kasus statemen logika tingkat lanjut dengan menggunakan APP Inventor sangat menyenangkan. Penggunaan konsep codeblock dan drag and drop block merubah paradigma coding menjadi seperti bermain puzzle. Menantang namun tidak menyebabkan user kesulitan karena belum mengenal bahasa script coding. Konsep designer dan konsep blocks juga sangat membantu. User menjadi tahu codeblock mana yang perlu dipasangkan karena memahami bahwa codeblock akan berkaitan dengan komponen yang di-add pada halaman designer. Penjabaran studi kasus login_kategori bahwa perancangan codeblock tidak rumit dan tidak sulit. Hasil simulasi dan testing juga memperlihatkan bahwa perancangan user interface dan codeblock telah
120 berjalan sesuai algoritma. Prilaku app memperlihatkan bahwa fungsi program telah berjalan sesuai dengan proses bisnis yang dirancang. 2. Evaluasi dan Kunci Jawaban Untuk memantapkan pemahaman anda, silahkan kerjakan tugas berikut: a. Kategori umur: < 9 bulan: bayi < 3 tahun : batita < 5 tahun : balita < 10 tahun : anak-anak < 15 tahun : remaja 15 – 25 tahun : dewasa Teruskan sampai kategori lansia b. Konversi nilai skala 100 menjadi nilai huruf A s/d E c. Konversi nilai skala 100 menjadi nilai huruf A s/d E dan penentuan lulus atau tidak. Lulus adalah minimal nilai C. 3. Tindak lanjut Bila sudah mampu menerapkan if yang lebih kompleks untuk menyelesaikan permasalahan yang diberikan maka anda sudah memahami materi ini. Anda dapat melanjutkan mempelajari bab selanjutnya.
121 BAB 9 Penanganan Statemen Perulangan pada APP Inventor A. Pendahuluan 1. Deskripsi singkat cakupan materi Apa itu perulangan? Intinya adalah sebuah teknik programming untuk mengulang suatu proses sebanyak beberapa kali. Daripada menggunakan script/ coding biasa yang diulang-ulang, maka teknik looping menjadi sangat efisien untuk digunakan. Contoh kasus, seperti deret bilangan atau deret perkalian akan lebih efisien jika programming-nya menggunakan teknik looping. Pada bab ini akan mempelajari penyelesaian masalah deret dengan menggunakan teknik perulangan dan pada soal latihan, yaitu kasus menentukan bilangan prima adalah contoh kasus yang menggunakan metode looping dan juga metode IF then. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu membuat program sederhana untuk penanganan kasus dengan logika perulangan. B. Penyajian Perulangan atau disebut sebagai looping adalah instruksi khusus dalam algoritma dan/atau bahasa pemrograman untuk mengulang satu atau lebih process sebanyak beberapa kali (Hartono, 2006). Kegunaan menggunakan fungsi perulangan adalah: jika menggunakan script biasa untuk penanganan proses yang berulang maka akan memakan banyak memori, tetapi dengan looping kita dapat melakukannya dengan memori yang sedikit dan waktu yang singkat. Gambar 119 memperlihatkan contoh penggunaan looping, yaitu membuat daftar perkalian bilangan. Dengan
122 menggunakan fungsi perulangan, cukup dengan 4 sd 6 baris script program untuk membuat daftar perkalian tersebut. Bahkan jika daftar perkalian tersebut diperpanjang hingga 1000 baris, tetap dapat dibuat dengan 4 sd 6 baris script program saja. Gambar 120 memperlihatkan codeblock yang tersedia pada APP Inventor untuk menangani kasus perulangan, yaitu codeblock for each from.., for each .. in list do dan while do. Apa perbedaan diantara ketiga codeblock tersebut? ------> Tugas Mahasiswa Gambar 119. Contoh perulangan sederhana (sumber: duniailkom.com) Gambar 120. Codeblock untuk menangani statemen perulangan Untuk bahan praktik penanganan looping, kita akan membuat project deret bilangan dengan selisih diantara dua bilangan yang
123 programmable sebagai studi kasus. Jadi deskripsi masalah kasusnya adalah sebagai berikut: pada user interface (UI) APP, ada textbox yang menerima input bilangan awal, textbox bilangan akhir dan textbox selisih diantara bilangan yang diulang. Ketika tombol Proses di-klik, maka APP akan menampilkan deretan bilangan berulang dengan nilai awal, nilai akhir dan selisih lompatan diantara dua bilangan sesuai dengan yang telah diinput oleh user. Tugas Mahasiswa Pilih tiga orang mahasiswa yang beruntung, minta untuk merancang flowchart APP deretbilangan secara bersama-sama dilayar projector. Teman-teman mahasiswa yang lain wajib memberikan penilaian dan kajian terhadap flowchart yang dirancang. Gambar 121 memperlihatkan desain user interface APP deretbilangan, sedangkan Gambar 122 memperlihatkan komponen yang digunakan untuk desain user interface seperti Gambar 121. Gambar 121. Desain user interface APP deretbilangan
124 Gambar 122. Komponen yang digunakan untuk desain UI APP deretbilangan Untuk penyesuaian properties pada setiap komponen, Tabel 8 memperlihatkan pengaturan yang dilakukan pada contoh. Tabel 8. Pengaturan komponen dan properties app deretbilangan Komponen Properties Nilai diinputkan Screen1 AppName KontrolFor Title Eksperimen dengan for AlignHorizontal Center:3 LabelAwal Text Nilai awal: TextBoxAwal Hint Nilai awal LabelAkhir Text Nilai akhir: TextBoxAkhir Hint Nilai akhir LabelLangkah Text Nilai kenaikan atau penurunan: TextBoxLangkah Hint Nilai kenaikan atau penurunan HorizontalArrangement1 AlignHorizontal Center:3 Width Fill Parent Visible Unchecked ButtonProses Text Proses ButtonReset Text Reset LabelHasil Text Cek
125 Setelah pengaturan dan penataan tata letak user interface (UI) di halaman designer, tahap berikutnya dilanjutkan dengan perancangan codeblock sesuai dengan flowchart yang telah ditetapkan. Berdasarkan flowchart, Gambar 123 memperlihatkan codeblock untuk penanganan perulangan APP deretbilangan. Ada dua codeblock utama, yaitu untuk handling ketika tombol process di-klik dan ketika tombol reset di-klik. Pada contoh kasus kali ini, codeblock for each from.. yang digunakan untuk menangani perulangan dan selisih lompatan diantara dua bilangan yang diinputkan user. Gambar 123. Codeblock APP deretbilangan Setelah codeblock selesai dirancang dengan panduan flowchart yang telah ditetapkan, tahap berikutnya adalah melakukan simulasi dan ujicoba. Metode simulasi yang akan dicontohkan pada kali ini adalah dengan mendownload file .apk. Kemudian file .apk tersebut di-install pada smartphone Android. Gambar 124 memperlihatkan menu download apk dan progress bar ketika menunggu file .apk di-build.
126 Gambar 124. Simulasi dan ujicoba dengan download file .apk Gambar 125 memperlihatkan jendela proses penyimpanan (saving) file .apk ke komputer. Gambar 125. Proses simpan file KontrolFor.apk Setelah file KontrolFor.apk tersimpan di komputer, pindahkan file tersebut ke perangkat smartphone Android. Gambar 126 memperlihatkan proses transfer file menggunakan koneksi Bluetooth. Anda bisa saja menggunakan teknik lain untuk transfer file, misalkan USB Cable, email, dll.
127 Gambar 126. Transfer file KontrolFor.apk ke smartphone menggunakan koneksi bluetooth Gambar 127. File KontrolFor.apk pada File Manager smartphone Setelah file KontrolFor.apk selesai di-transfer ke smartphone, buka App File Manager dan cari file KontrolFor.apk. Gambar 127 memperlihatkan file KontrolFor.apk pada layar jendela App File Manager.
128 Gambar 128. Proses install APP deretbilangan di smartphone. Klik file KontrolFor.apk tersebut maka OS Android smartphone anda akan memulai proses instalasi App deretBilangan (lihat Gambar 128). Setelah proses instalasi selesai, jalankan App deretBilangan, maka smartphone akan memperlihatkan tampilan home screen App, seperti yang diperlihatkan pada Gambar 129.
129 Gambar 129. Tampilan homescreen APP deretbilangan Gambar 130 memperlihatkan tampilan saat App diuji coba. Gambar 130 sebelah kiri adalah tampilan ketika kolom nilai awal, nilai akhir dan nilai kenaikan/ penurunan diisi dan tombol proses di-klik. Hasil perulangan terlihat di layar bagian bawah. Sementara Gambar 130 sebelah kanan adalah ketika tombol reset di-klik. Terlihat bahwa semua kolom input dan layar output menjadi bersih kembali.
130 Gambar 130. Tampilan ketika klik tombol proses dan tombol reset C. Penutup 1. Rangkuman Kasus deret bilangan menjadi mudah diselesaikan dengan bantuan APP Inventor. Pemrograman untuk menyelesaikan permasalahan ini menjadi terlihat menyenangkan. Setelah algoritma ditetapkan, pembangunan program dapat dilakukan dengan cepat. Rancangan tampilan antar muka (user interface) di halaman designer dan pembangunan kode program yang “hanya” drag and drop dapat dilakukan dengan cepat. Setelah rancangan UI dan codeblock app selesai dibangun, hasil simulasi dan ujicoba, yang pada bab ini dijelaskan dengan cara install pada perangkat smartphone, memperlihatkan bahwa aplikasi yang dibangun mampu memecahkan permasalahan. Perulangan deret bilangan yang ditampilkan App sesuai dengan nilai-nilai yang diinputkan oleh user.