Pemrograman Komputer dengan Flowgorithm dan APP Inventor

ADHIE TRI WAHYUDI PEMROGRAMAN KOMPUTER Menggunakan Flowgorithm dan App Inventor Pemrograman Komputer, pada era industri 4.0 merupakan materi yang diperlukan oleh para mahasiswa dalam mempersiapkan hard skill untuk berkompe si selepas bangku kuliah. Dunia manufacture ataupun perusahaan lainnya saat ini sangat bergantung pada sistem komputer dan otoma sasi dalam menjalankan operasionalnya. Di sisi lain, sistem informasi dan program aplikasi terus berkembang, dak hanya berbasis komputer dengan sistem operasi Windows, melainkan juga harus kompa bel dengan perangkat mobile berbasis sistem operasi Android. Adhie Tri Wahyudi Buku Pemrograman Komputer Menggunakan Flowgorithm Dan App Inventor ini ditulis dengan gaya bahasa tutorial dan studi kasus. Materi yang disajikan adalah perancangan algoritma dan mengubah algoritma menjadi program aplikasi Android. Buku ini disusun dari hasil peneli an dan adaptasi pendekatan cara mengajar kepada mahasiswa teknik non-informa ka dengan tujuan akhir mahasiswa memiliki kemampuan membuat sistem informasi dan program aplikasi berbasis Android. Karena itu, buku ini dirancang dengan bahasa yang sederhana dan dilengkapi dengan contoh kasus yang dijelaskan dengan gaya tutorial. Hal ini menjadi nilai plus buku ini karena para mahasiswa menjadi lebih mudah memahami dan mengiku materi yang diharapkan. Buku ini dilengkapi soal la han dengan bobot/ ngkat kesulitan yang telah disesuaikan untuk mengukur sejauh mana kemampuan mahasiswa dalam memahami materi. Pemrograman Komputer Menggunakan Flowgorithm dan App Inventor Anggota Asosiasi Penerbit Perguruan Tinggi Indonesia (IKAPI) Jln. Letjen. Sutoyo, Mojosongo, Jebres, Surakarta 57127 PEMROGRAMAN KOMPUTER Menggunakan Flowgorithm dan App Inventor Adhie Tri Wahyudi

i PEMROGRAMAN KOMPUTER MENGGUNAKAN FLOWGORITHM DAN APP INVENTOR Adhie Tri Wahyudi 2021 USB PRESS

ii Perpustakaan Nasional: Katalog Dalam Terbitan (KDT) Pemrograman Komputer Menggunakan Flowgorithm dan APP Inventor Hak Cipta © Adhie Tri Wahyudi, 2021 Penulis: Adhie Tri Wahyudi Penerbit: USB Press (Anggota IKAPI) Jl. Letjen. Sutoyo, Mojosongo, Jebres, Surakarta - 57127 Telp. 0271. 852518; Fax. 0271. 853275 ISBN: 978-623-92521-3-7 --Cetakan. 1,--Edisi. 1.--Surakarta: USB Press, 2021. 229 hlm, 15,5 x 23 cm Hak cipta dilindungi undang-undang All Right Reserved ----------------------------------------------------------------------------------------------------- Dilarang mengutip sebagian atau seluruh isi buku ini dengan cara apapun, termasuk dengan cara penggunaan mesin fotokopi, tanpa izin sah dari penerbit -----------------------------------------------------------------------------------------------------

iii KATA PENGANTAR DEKAN FAKULTAS TEKNIK Puji syukur kita panjatkan ke hadirat Allah SWT. Karena atas berkat limpahan Rahmat dan Karunia-NYA lah salah seorang rekan kami di Fakultas Teknik Universitas Setia Budi dapat menyelesaikan penyusunan dan penulisan buku ajar ini. Penghargaan dan ucapan terima kasih, kami sampaikan juga kepada pimpinan Universitas Setia Budi atas support berupa bantuan pendanaan dalam bagi penulis dalam pembuatan buku ajar ini. Maksud dan tujuan penulis dalam penyusunan buku ajar ini adalah sebagai bentuk ikhtiar penulis untuk mengembangkan, menerapkan ilmu pengetahuan dan selanjutnya menyebarluaskannya kepada masyarakat. Kami mendapatkan informasi bahwa materi - materi buku ajar ini telah diujicobakan pada proses pembelajaran tahun akademik 2019/2020. Hasilnya, progress pemahaman keilmuan mahasiswa yang meningkat pesat dan mempunyai kemampuan pemrograman yang cukup sebagai bekal akademisnya. Sebagai penutup, kami sampaikan selamat membaca dan belajar. Masukan, kritik dan saran pembaca silahkan kepada kami sehingga kami dapat melakukan perbaikan dan penyempurnaan. Surakarta, 8 Agustus 2021 Dekan Fakultas Teknik Universitas Setia Budi, Dr. Suseno, M.Si.

iv DAFTAR ISI Table of Contents KATA PENGANTAR DEKAN FAKULTAS TEKNIK ..................................................i DAFTAR ISI .................................................................................................iv DAFTAR GAMBAR............................................................................................ix BAB 1 Pendahuluan......................................................................................... 1 A. Pendahuluan ........................................................................................... 1 1. Kemampuan akhir yang diharapkan ............................................... 1 2. Deskripsi singkat cakupan materi ................................................... 1 B. Penyajian................................................................................................. 1 1. Pengenalan Komputer .................................................................... 1 2. Pengenalan Program/ Aplikasi........................................................ 5 3. Pengenalan Bahasa Pemrograman................................................. 7 4. Software (Tools) untuk Membuat Flowchart................................ 11 5. Pengenalan menu Flowgorithm.................................................... 14 6. Pengenalan APP Inventor ............................................................. 17 7. Bagaimana App Inventor Bekerja? ............................................... 20 C. Penutup................................................................................................. 28 1. Rangkuman ................................................................................... 28 2. Evaluasi dan Kunci Jawaban.......................................................... 29 3. Tindak lanjut.................................................................................. 29 Bab 2 Pengantar Algoritma........................................................................... 30 A. Pendahuluan ......................................................................................... 30 1. Deskripsi singkat cakupan materi ................................................. 30 2. Kemampuan akhir yang diharapkan ............................................. 30 B. Penyajian............................................................................................... 30 1. Pendahuluan Algoritma ................................................................ 30 2. Flowchart ...................................................................................... 33 C. Penutup................................................................................................. 36 1. Rangkuman ................................................................................... 36 2. Evaluasi dan Kunci Jawaban.......................................................... 36 3. Tindak lanjut.................................................................................. 36 BAB 3 Algoritma dengan Flowgorithm ......................................................... 37 A. Pendahuluan ......................................................................................... 37 1. Deskripsi singkat cakupan materi ................................................. 37 2. Kemampuan akhir yang diharapkan ............................................. 37 B. Penyajian............................................................................................... 37

v C. Penutup................................................................................................. 47 1. Rangkuman ................................................................................... 47 2. Evaluasi dan Kunci Jawaban.......................................................... 48 3. Tindak lanjut.................................................................................. 50 BAB 4 APP Inventor....................................................................................... 51 A. Pendahuluan ......................................................................................... 51 1. Deskripsi singkat cakupan materi ................................................. 51 2. Kemampuan akhir yang diharapkan ............................................. 51 B. Penyajian............................................................................................... 51 1. Memulai Project Baru .................................................................. 51 2. Halaman Designer........................................................................ 53 3. Halaman Blocks............................................................................. 62 4. Simulasi dan Testing App .............................................................. 69 5. Share your Apk atau Upload Apk ke Google Play ......................... 71 C. Penutup................................................................................................. 72 1. Rangkuman ................................................................................... 72 2. Evaluasi dan Kunci Jawaban.......................................................... 72 3. Tindak lanjut.................................................................................. 72 BAB 5 Input dan Output Handler pada APP Inventor ................................... 73 A. Pendahuluan ......................................................................................... 73 1. Deskripsi singkat cakupan materi ................................................. 73 2. Kemampuan akhir yang diharapkan ............................................. 73 B. Penyajian............................................................................................... 73 1. Pengantar Input dan Output ........................................................ 73 2. Studi kasus konsep input dan output........................................... 75 3. Testing Program........................................................................... 80 C. Penutup................................................................................................. 82 1. Rangkuman ................................................................................... 82 2. Evaluasi dan Kunci Jawaban.......................................................... 83 3. Tindak lanjut.................................................................................. 83 BAB 6 Program Statis dan Program Dinamis ................................................ 84 A. Pendahuluan ......................................................................................... 84 1. Deskripsi singkat cakupan materi ................................................. 84 2. Kemampuan akhir yang diharapkan ............................................. 84 B. Penyajian............................................................................................... 84 1. Studi kasus program dinamis....................................................... 84 2. Testing Program........................................................................... 90 C. Penutup................................................................................................. 92 1. Rangkuman ................................................................................... 92

vi 2. Evaluasi dan Kunci Jawaban.......................................................... 92 3. Tindak lanjut.................................................................................. 92 BAB 7 Penanganan Statemen Logika pada APP Inventor............................. 93 A. Pendahuluan ......................................................................................... 93 1. Deskripsi singkat cakupan materi ................................................. 93 2. Kemampuan akhir yang diharapkan ............................................. 93 B. Penyajian............................................................................................... 93 C. Penutup............................................................................................... 103 1. Rangkuman ................................................................................. 103 2. Evaluasi dan Kunci Jawaban........................................................ 103 3. Tindak lanjut................................................................................ 105 BAB 8 Penanganan Statemen Logika Tingkat Lanjut .................................. 106 A. Pendahuluan ....................................................................................... 106 1. Deskripsi singkat cakupan materi ............................................... 106 2. Kemampuan akhir yang diharapkan ........................................... 106 B. Penyajian............................................................................................. 106 C. Penutup............................................................................................... 119 1. Rangkuman ................................................................................. 119 2. Evaluasi dan Kunci Jawaban........................................................ 120 3. Tindak lanjut................................................................................ 120 BAB 9 Penanganan Statemen Perulangan pada APP Inventor................... 121 A. Pendahuluan ....................................................................................... 121 1. Deskripsi singkat cakupan materi ............................................... 121 2. Kemampuan akhir yang diharapkan ........................................... 121 B. Penyajian............................................................................................. 121 C. Penutup............................................................................................... 130 1. Rangkuman ................................................................................. 130 2. Evaluasi dan Kunci Jawaban........................................................ 131 3. Tindak lanjut................................................................................ 131 BAB 10 Penanganan List ............................................................................. 132 A. Pendahuluan ....................................................................................... 132 1. Deskripsi singkat cakupan materi ............................................... 132 2. Kemampuan akhir yang diharapkan ........................................... 132 B. Penyajian............................................................................................. 132 1. Menampilkan Isi Data List.......................................................... 133 2. Pencarian Isi Data List ................................................................ 136 3. Penambahan dan Penghapusan Isi Data List............................. 140 C. Penutup............................................................................................... 146 1. Rangkuman ................................................................................. 146

vii 2. Evaluasi dan Kunci Jawaban........................................................ 146 3. Tindak lanjut................................................................................ 147 BAB 11 Pengantar Database pada APP Inventor........................................ 148 A. Pendahuluan ....................................................................................... 148 1. Deskripsi singkat cakupan materi ............................................... 148 2. Kemampuan akhir yang diharapkan ........................................... 148 B. Penyajian............................................................................................. 148 1. File............................................................................................... 149 3. FusionTableControl..................................................................... 149 4. TinyDB ......................................................................................... 150 5. TinyWebDB.................................................................................. 150 6. CloudDB....................................................................................... 151 7. FirebaseDB .................................................................................. 151 C. Penutup............................................................................................... 152 1. Rangkuman ................................................................................. 152 2. Evaluasi dan Kunci Jawaban........................................................ 153 3. Tindak lanjut................................................................................ 153 BAB 12 Perancangan Database File dengan APP Inventor......................... 154 A. Pendahuluan ....................................................................................... 154 1. Deskripsi singkat cakupan materi ............................................... 154 2. Kemampuan akhir yang diharapkan ........................................... 154 B. Penyajian............................................................................................. 154 C. Penutup............................................................................................... 157 1. Rangkuman ................................................................................. 157 2. Evaluasi dan Kunci Jawaban........................................................ 158 3. Tindak lanjut................................................................................ 158 BAB 13 Perancangan Database Firebase dengan APP Inventor................. 159 A. Pendahuluan ....................................................................................... 159 1. Deskripsi singkat cakupan materi .............................................. 159 2. Kemampuan akhir yang diharapkan .......................................... 159 B. Penyajian............................................................................................. 159 1. Mendaftar akun Firebase............................................................ 160 2. Seting Firebase dan APP Inventor............................................... 160 3. Operasi CRUD.............................................................................. 168 C. Penutup............................................................................................... 201 1. Rangkuman ................................................................................. 201 2. Evaluasi dan Kunci Jawaban........................................................ 202 3. Tindak lanjut................................................................................ 203

viii Rencana Pembelajaran Semester (RPS)...................................................... 204 DAFTAR PUSTAKA ....................................................................................... 209

ix DAFTAR GAMBAR Gambar 1. Komputer ENIAC (sumber: Columbia.edu)............................. 2 Gambar 2. Komputer EDSAC dan PC Komputer tahun 2018 (Sumber: Youtube.com).......................................................................... 2 Gambar 3. Skema prinsip kerja komputer (Jhon, 1986)........................... 3 Gambar 4. Peran sistem operasi (sumber: id.wikipedia.org)................... 4 Gambar 5. edu.setiabudi.ac.id atau EduManage adalah contoh aplikasi berbasis web ........................................................................... 5 Gambar 6. SPSS sebagai contoh aplikasi desktop (sumber: ibm.com)..... 6 Gambar 7. WhatsApp Messenger sebagai contoh aplikasi berbasis mobile android (sumber: techbout.com) ............................... 7 Gambar 8. Bahasa Pemrograman (sumber: justcode.me) ....................... 8 Gambar 9. Perbedaan Bahasa Pemrograman (sumber: xsonarstandard920.weebly.com) ........................................... 9 Gambar 10. script code Javascript (sumber: petanicode.com) ................ 10 Gambar 11. Output dari script code Javascript pada Gambar 10 ............ 10 Gambar 12. Proses penerjemahan bahasa programming menjadi bahasa mesin (sumber: guru99.com)................................................ 11 Gambar 13. Beberapa tools untuk membuat flowchart........................... 12 Gambar 14. Algoritma luas persegi panjang dengan flowgorithm dan console eksekusi ketika algoritma tersebut dijalankan........ 13 Gambar 15. Halaman download Flowgorithm ......................................... 14 Gambar 16. Komponen utama algoritma/ flowchart............................... 15 Gambar 17. Antarmuka flowgorithm ....................................................... 16 Gambar 18. Metode drag-and-drop blok program pada AppInventor (sumber: appinventor.mit.edu) ............................................ 17 Gambar 19. Skema teknologi APP Inventor.............................................. 21 Gambar 20. Halaman My Project pada APP Inventor............................... 22

x Gambar 21. Modul designer pada APP Inventor...................................... 22 Gambar 22. Media pada APP Inventor..................................................... 23 Gambar 23. Modul bloks pada APP Inventor ........................................... 24 Gambar 24. Warning Alert dan Error Alert pada halaman Blocks APP Inventor................................................................................. 24 Gambar 25. Ketika tombol warning diaktifkan......................................... 24 Gambar 26. Teknik running atau testing project yang telah dibuat (sumber http://ai2.appinventor.mit.edu) ............................ 25 Gambar 27. Testing App yang sedang dibuat dengan bantuan aplikasi AI Companion (sumber: appinventor.mit.edu)......................... 26 Gambar 28. Android emulator pada APP Inventor beserta contoh testing App pada emulator (sumber: exploringbinary.com) ............ 27 Gambar 29. Skema koneksi USB untuk simulasi dan testing app project yang dibuat (sumber: appinventor.mit.edu) ........................ 28 Gambar 30. Compile app menjadi file .apk (sumber appinventor.mit.edu)28 Gambar 31. Klik kanan pada garis konektor untuk insert shape.............. 38 Gambar 32. Deklarasi variable input ........................................................ 38 Gambar 33. Deklarasi variable kalkulator penjumlahan .......................... 39 Gambar 34. Deklarasi tipe variable kalkulator penjumlahan dengan tipe real ........................................................................................ 40 Gambar 35. Definisi variable input pada algoritma kalkulator penjumlahan ......................................................................... 41 Gambar 36. Potongan algoritma kalkulator penjumlahan dengan deklarasi tipe variable dan variable input (var a dan var b) . 41 Gambar 37. Menampilkan kotak process pada algoritma kalkulator penjumlahan ......................................................................... 42 Gambar 38. Kotak dialog untuk definisi process penjumlahan yang harus dijalankan.............................................................................. 43 Gambar 39. Menambah shape output pada algoritma penjumlahan...... 44

xi Gambar 40. Flowchart (algoritma) penjumlahan sederhana ................... 44 Gambar 41. Icon menu run ..................................................................... 45 Gambar 42. Kotak dialog eksekusi algoritma yang telah dibuat .............. 45 Gambar 43. Ketika user input nilai saat running algoritma...................... 46 Gambar 44. Ketika user telah input nilai untuk semua variable dan kemudian flowgorithm menampilkan output....................... 47 Gambar 45. Halaman login untuk akses APP Inventor versi online.......... 52 Gambar 46. Halaman My Project pada APP Inventor .............................. 52 Gambar 47. Menu untuk membuat project baru..................................... 53 Gambar 48. Ada banyak komponen pada Palette APP Inventor.............. 55 Gambar 49. Studi kasus, add dua buah tombol secara berdampingan ... 60 Gambar 50. Menu properties untuk komponen HorizontalArrangement ............................................ 61 Gambar 51. Tombol Rename dan tombol Delete pada kolom Components....................................................................... 62 Gambar 52. Membuat aplikasi multi-screen ............................................ 62 Gambar 53. Modul Blocks pada APP Inventor.......................................... 63 Gambar 54. Blocks program pada komponen Button1 ........................ 69 Gambar 55. Cara simulasi dan testing app yang di-built.......................... 69 Gambar 56. free online emulator untuk simulasi dan testing App........... 70 Gambar 57. Menyimpan project menjadi file .apk................................... 71 Gambar 58. Tahap pendaftaran sebagai Developer Google..................... 71 Gambar 59. Contoh komponen input pada pemrograman Android dengan APP Inventor ............................................................ 74 Gambar 60. Contoh komponen input (kiri) dan komponen output (kanan) pada pemrograman Android dengan APP Inventor ............. 74 Gambar 61. Menambah komponen input -> button................................ 76 Gambar 62. Rename nama button ........................................................... 76

xii Gambar 63. Memberi label button........................................................... 77 Gambar 64. block programming: ketika user klik tombol ButtonSpeech.................................................................. 77 Gambar 65. Block When ButtonSpeech.Click do …… di tampil layar viewer78 Gambar 66. Add komponen TextToSpeech........................................ 79 Gambar 67. Menambah block Call TextToSpeech1.Speak message …… di layar viewer........................................................................... 79 Gambar 68. Add blok program Text ke layar viewer................................ 80 Gambar 69. Ketik tulisan yang ingin dikonversi menjadi speech pada blok text........................................................................................ 80 Gambar 70. Tampilan AI Companion di perangkat smartphone Android 81 Gambar 71. Menu Connect > AI Companion pada APP Inventor 82 Gambar 72. Simulasi app project menggunakan AI Companion .............. 82 Gambar 73. Rancangan halaman designer app CalcSederhana........ 86 Gambar 74. Pengaturan properties untuk komponen HorizontalArrangement3.......................................... 87 Gambar 75. Blok program CalcSederhana ........................................ 89 Gambar 76. Menu AI Companion untuk simulasi dan testing app........... 90 Gambar 77. Scan QR-Code yang tampil dengan AI Companion pada smartphone Android............................................................. 90 Gambar 78. App hasil rancangan tampil melalui AI Companion.............. 91 Gambar 79. Isikan bilangan yang akan dijumlahkan dan klik tombol Jumlahkan......................................................................... 91 Gambar 80. Tampilan output hasil penjumlahan..................................... 91 Gambar 81. Codeblock APP Inventor untuk conditional handling ........... 94 Gambar 82. Rancangan user interface dan komponen pada halaman designer................................................................................. 95 Gambar 83. Memberi nama title pada screen. ........................................ 96

xiii Gambar 84. Mengatur lebar VerticalArrangement1 .................... 97 Gambar 85. Mengganti tulisan pada komponen Label......................... 97 Gambar 86. Pengaturan properties VerticalArrangement1 ........ 97 Gambar 87. Pengaturan properties komponen HorizontalArrangement2.......................................... 98 Gambar 88. Codeblock deklarasi variable angka sebagai numerik .......... 99 Gambar 89. Codeblock When button Click............................................... 99 Gambar 90. Codeblock set data variable dengan bilangan yang diinput . 99 Gambar 91. Letak codeblock TextBoxBil.Text.............................. 100 Gambar 92. codeblock cek condition modulo variable angka dibagi 2 adalah 1............................................................................... 100 Gambar 93. Codeblock untuk penanganan output kondisi if true....... 100 Gambar 94. Codeblock untuk penanganan output kondisi if false...... 101 Gambar 95. Keseluruhan codeblock app ganjilGenap..................... 101 Gambar 96. Simulasi dan testing app menggunakan AI Companion ..... 102 Gambar 97. Tampilan app ganjilGenap di AI Companion smartphone102 Gambar 98. Tampilan app ganjilGenap ketika diinput angka 51 dan diklik tombol cek................................................................. 102 Gambar 99. Tampilan app ganjilGenap ketika diinput angka 100 dan diklik tombol cek................................................................. 103 Gambar 100. Screen pada app login_berkategori........................ 107 Gambar 101. Desain dan komponen pada halaman Screen1............... 108 Gambar 102. Codeblock untuk deklarasi variable .................................... 110 Gambar 103. Codeblock untuk input handle ............................................ 110 Gambar 104. codeblock when.login.Click..................................... 110 Gambar 105. Penanganan variabel username dan password yang diinputkan ........................................................................... 111

xiv Gambar 106. Ditambah codeblock logika IF ........................................... 111 Gambar 107. Codeblock pengecekan autentifikasi user .......................... 112 Gambar 108. Codeblock redirect ke ScreenKasir untuk kondisi IF=true113 Gambar 109. Menambah logika IF dan kondisi else pada codeblock IFThen................................................................................... 113 Gambar 110. Codeblock halaman Screen1 (Screen utama).................. 114 Gambar 111. Build file installer android (ekstensi .apk)........................... 115 Gambar 112. Upload file .apk pada online emulator http://apkonline.net116 Gambar 113. Tampilan home screen dari App login_kategori................. 117 Gambar 114. Ujicoba ketika diinput username dan password yang keliru118 Gambar 115. Tampilan ketika ujicoba login sebagai kepala gudang berhasil118 Gambar 116. Tampilan ketika ujicoba login sebagai kasir berhasil.......... 119 Gambar 117. Contoh perulangan sederhana (sumber: duniailkom.com) 122 Gambar 118. Codeblock untuk menangani statemen perulangan........... 122 Gambar 119. Desain user interface APP deretbilangan................... 123 Gambar 120. Komponen yang digunakan untuk desain UI APP deretbilangan ............................................................. 124 Gambar 121. Codeblock APP deretbilangan .................................... 125 Gambar 122. Simulasi dan ujicoba dengan download file .apk................ 126 Gambar 123. Proses simpan file KontrolFor.apk............................. 126 Gambar 124. Transfer file KontrolFor.apk ke smartphone menggunakan koneksi bluetooth ....................................... 127 Gambar 125. File KontrolFor.apk pada File Manager smartphone. 127 Gambar 126. Proses install APP deretbilangan di smartphone. ...... 128 Gambar 127. Tampilan homescreen APP deretbilangan ................. 129 Gambar 128. Tampilan ketika klik tombol proses dan tombol reset ....... 130 Gambar 129. Contoh List .......................................................................... 132

xv Gambar 130. Rancangan UI App List .................................................... 134 Gambar 131. Codeblock App List.......................................................... 134 Gambar 132. Tampilan homepage App List ......................................... 135 Gambar 133. Tampilan App List ketika tombol tampilkan di-klik135 Gambar 134. Antarmuka penambahan fasilitas search pada App List. 137 Gambar 135. Rancangan codeblock pencarian data ................................ 137 Gambar 136. Rancangan codeblock pencarian data ................................ 138 Gambar 137. Potongan codeblock pemeriksaan kata kunci pencarian dan action ketika kondisi if true................................................. 138 Gambar 138. Potongan codeblock aksi ketika kondisi IF False................. 139 Gambar 139. Tampilan ketika data ditemukan ........................................ 139 Gambar 140. Tampilan ketika data tidak ditemukan ............................... 139 Gambar 141. Rancangan antarmuka tambah dan hapus data App List140 Gambar 142. Rancangan codeblock ButtonTambah data List ............. 141 Gambar 143. Potongan codeblock untuk pengecekan yang diinput terhadap data List dan dilanjutkan aksi jika kondisi IF True142 Gambar 144. Potongan codeblock penanganan aksi jika kondisi IF False 142 Gambar 145. Rancangan codeblock ButtonHapus data List................ 142 Gambar 146. Potongan codeblock yang menangani aksi remove ketika kondisi IF False .................................................................... 143 Gambar 147. Tampilan ketika tombol Tampilkan di-klik..................... 143 Gambar 148. Data “Jakarta” dihapus ....................................................... 144 Gambar 149. Data “Jakarta” dicari pada data List.................................... 144 Gambar 150. Data “Jakarta” ditambahkan kembali pada List.................. 145 Gambar 151. Data “Surakarta” ditambahkan pada List ........................... 145 Gambar 152. Tombol Tampilkan di-klik ............................................... 145 Gambar 153. Output APP Quis yang diharapkan ................................... 146

xvi Gambar 154. Fasilitas database yang didukung oleh APP Inventor......... 149 Gambar 155. TinyDB (tag dan value)........................................................ 150 Gambar 156. Rancangan User Interface APP FileDB............................ 155 Gambar 157. Rancangan codeblock keseluruhan..................................... 155 Gambar 158. Tampilan ketika APP FileDB diujicoba ............................ 156 Gambar 159. File text.txt di internal storage smartphone....................... 157 Gambar 160. Halaman My Projects Firebase ........................................... 160 Gambar 161. Wizard create a project (beri nama project) ...................... 161 Gambar 162. Wizard create a project (Informasi fasilitas google analytics)161 Gambar 163. Wizard create a project (Lanjutan google analytics) .......... 162 Gambar 164. Informasi project telah berhasil dibuat .............................. 163 Gambar 165. Halaman console pada Firebase project............................. 163 Gambar 166. Menu Project settings......................................................... 164 Gambar 167. Halaman setting pada Firebase console project................. 164 Gambar 168. Menu properties pada komponen Firebase pada APP Inventor............................................................................... 165 Gambar 169. Halaman pengaturan database........................................... 165 Gambar 170. Plihan mode security untuk Realtime Database yang akan dibuat.................................................................................. 166 Gambar 171. Halaman Realtime database............................................... 167 Gambar 172. Menu properties pada komponen Firebase pada APP Inventor............................................................................... 167 Gambar 173. Properties project bucket................................................... 168 Gambar 174. Atur project bucket melalui codeblock............................... 168 Gambar 175. Desain user interface untuk registrasi user........................ 170 Gambar 176. Rancangan codeblock modul registrasi .............................. 172 Gambar 177. Tampilan user interface modul registrasi ........................... 173

xvii Gambar 178. Respon app ketika tombol Daftar diklik ......................... 174 Gambar 179. Respon app ketika tombol Daftar diklik sementara kolom username dan password kosong. ....................................... 174 Gambar 180. Tampilan layar Database Firebase ketika tombol Daftar pada app diklik .................................................................... 175 Gambar 181. Desain user interface untuk login user............................... 176 Gambar 182. Halaman setting firebase untuk project database ujicoba. 177 Gambar 183. Halaman menu realtime database untuk project database ujicoba................................................................................. 178 Gambar 184. Menu Media untuk upload image ...................................... 178 Gambar 185. Rancangan codeblock modul login ..................................... 179 Gambar 186. User Interface halaman login.............................................. 180 Gambar 187. Respon app ketika tombol login diklik............................ 181 Gambar 188. Respon app ketika username dan password dikenali ........ 181 Gambar 189. Respon app ketika password tidak dikenali........................ 182 Gambar 190. Skenario desain app shoppinglist .............................. 183 Gambar 191. Menu project setting .......................................................... 185 Gambar 192. Menu database tab data pada halaman firebase console . 186 Gambar 193. Tab rules menu database pada halaman firebase console 186 Gambar 194. FirebaseDB properties. Mengatur koneksi app dengan firebase ............................................................................... 187 Gambar 195. Menyiapkan data pada firebase database.......................... 187 Gambar 196. Rancangan codeblock untuk tes koneksi data antara app dengan firebase .................................................................. 188 Gambar 197. Tampilan app saat uji coba koneksi data dengan firebase. 189 Gambar 198. Penyesuaian rancangan codeblock agar data tampil di komponen listview.............................................................. 190

xviii Gambar 199. Tampilan app saat ujicoba menampilkan data firebase di komponen listview.............................................................. 191 Gambar 200. Penyesuaian codeblock agar hanya data tag saja yang tertampil pada listview ....................................................... 192 Gambar 201. Tampilan app saat uji coba prosedur extractData ...... 193 Gambar 202. rancangan codeblock untuk aktifkan tombol add............. 193 Gambar 203. Tampilan app saat mengetik krupuk di kolom textbox ...... 194 Gambar 204. Tampilan app setelah tombol add di-klik oleh user ........... 195 Gambar 205. Krupuk berhasil disimpan pada database firebase............. 195 Gambar 206. Rancangan codeblock untuk delete satu item data............ 196 Gambar 207. Tampilan app ketika ujicoba remove item ......................... 197 Gambar 208. Item “tempegodong” terhapus dari database firebase...... 197 Gambar 209. Rancangan codeblock untuk tombol clear list.................... 199 Gambar 210. Tampilan app saat ujicoba tombol clear list....................... 199 Gambar 211. Tampilan app setelah tombol accept pada notifikasi di-klik200 Gambar 212. upload suara klik mouse ekstensi .wav............................... 200 Gambar 213. Codeblock untuk efek suara click setiap ada perubahan data201 Gambar 214. Desain user interface app database perusahaan ............... 202

1 BAB 1 Pendahuluan A. Pendahuluan 1. Kemampuan akhir yang diharapkan Mahasiswa mampu: a. menjelaskan konsep computer, konsep system operasi dan program aplikasi, serta konsep tools untuk pemrograman. b. Menjelaskan ulang penggunaan menu aplikasi flowgorithm untuk membuat algoritma/ flowchart dan penggunaan menu aplikasi APP Inventor untuk membuat apps Android. 2. Deskripsi singkat cakupan materi Komputer terdiri dari perangkat input, proses, dan output. Software komputer dapat dibagi dalam dua kategori, yaitu: sistem operasi dan program aplikasi. User sebagai pengguna komputer ketika mengoperasikan program aplikasi (misal: Microsoft Word) dijembatani oleh system operasi (misal: Windows 10) untuk mengontrol perangkat keras komputer. App Inventor merupakan salah satu program aplikasi yang berfungsi sebagai tools pemrograman. Buku ini membahas pemanfaatan App Inventor untuk memprogram dan menghasilkan program apk yang dapat dijalankan pada perangkat Android. B. Penyajian 1. Pengenalan Komputer Kata komputer berasal dari bahasa Latin yaitu computare yang artinya menghitung. Dalam bahasa Inggris disebut to compute (Williams, 1997).

2 Gambar 1. Komputer ENIAC (sumber: Columbia.edu) Gambar 2. Komputer EDSAC dan PC Komputer tahun 2018 (Sumber: Youtube.com) Gambar 1 memperlihatkan salah satu computer generasi pertama yang dikenal dengan nama ENIAC (Electronic Numerical Integrator And Computer). ENIAC dikembangkan dan dibangun oleh Angkatan Darat USA untuk laboratorium penelitian persenjataan mereka dengan tujuan untuk menghitung sudut dan jarak tembakan senjata mortar. Pada Gambar 2 ditunjukkan salah satu komputer generasi pertama yang digunakan di Inggris pada tahun 1936. Komputer tersebut diberi nama EDSAC (Electronic Delay Storage Automatic Calculator). Komputer EDSAC dibuat untuk menghitung sebagaimana fungsi kalkulator sederhana dengan kemampuan menyimpan (storage) (Wilkes and Renwick, 1950). Sementara yang ditunjukkan pada Gambar 2 sebelah kanan adalah Personal Computer (PC) yang digunakan secara umum pada saat ini. Secara umum, definisi komputer diterjemahkan sebagai sekumpulan alat elektronik yang saling bekerja sama, dapat menerima data (input), mengolah data

3 (proses) dan memberikan informasi (output) serta terkoordinasi dibawah kontrol program yang tersimpan dimemorinya (Susanto, 2003). Prinsip kerja komputer dapat digambarkan pada Gambar 3. Seperti yang telah ditunjukkan pada Gambar 3, prinsip kerja komputer terbagi atas 3 golongan, yaitu perangkat input, perangkat pemroses, dan perangkat output. Ketiga kategori perangkat tersebut saling terintegrasi untuk melaksanakan perintah yang diberikan oleh user (pengguna komputer). Perintah yang diinputkan oleh user melalui input device, diolah oleh komponen CPU (Central Processing Unit) yang secara garis besar terdiri dari Processor dan Memory sehingga menghasilkan informasi yang ditampilkan pada output device. Proses pengolahan perintah dari input device menjadi informasi yang kemudian ditampilkan pada output device dijembatani oleh software (perangkat lunak) yang dikenal sebagai sistem operasi. Software secara umum dibagi menjadi dua kategori, yaitu “program aplikasi” dan “sistem operasi”. Gambar 3. Skema prinsip kerja komputer (Jhon, 1986) Program aplikasi adalah perangkat lunak yang digunakan oleh pengguna untuk menyelesaikan suatu tugas tertentu misalnya untuk hiburan, menyetel video, pengolah grafis, pengolah kata, pengolah angka, dll. (Gill, 2006). Sedangkan sistem operasi adalah perangkat lunak yang mengelola sumber daya perangkat keras komputer, melayani perintahperintah user dan menyediakan layanan umum untuk aplikasi perangkat

4 lunak (Gill, 2006). Sistem Operasi komputer paling popular yang digunakan saat ini adalah Windows yang diproduksi oleh Microsoft dan Linux yang merupakan system operasi open source. Sistem Operasi Linux terdapat banyak varian karena sifatnya yang open source (GNU General Public License atau GNU GPL). Seperti yang ditunjukkan pada Gambar 4, sistem operasi dapat diibaratkan sebuah jembatan yang menghubungkan antara brainware (user), software aplikasi dan hardware yang beraneka ragam jenis dan mereknya. Sistem operasi bertugas agar ketiga komponen komputer dapat saling berkomunikasi satu dengan lainnya. Sistem operasi pula yang bertugas mengendalikan serta mengkoordinasikan pengunaan hardware untuk berbagai program aplikasi, seperti misalkan memerintahkan printer bekerja atau memerintahkan monitor memutar film. Gambar 4. Peran sistem operasi (sumber: id.wikipedia.org) Tugas Mahasiswa Sebutkan tipe-tipe user. Kemudian, sebutkan beberapa software utama yang sering digunakan oleh tipe/ kategori user tersebut. Sebutkan pula sistem operasi dan hardware yang digunakan oleh user tersebut. Tugas yang telah dikerjakan, digunakan sebagai bahan diskusi kelas.

5 2. Pengenalan Program/ Aplikasi Program atau aplikasi dapat dikelompokkan menjadi beberapa kategori. Salah satunya, Yudistira (2011), membagi aplikasi menjadi tiga kategori, yaitu: aplikasi berbasis web, aplikasi desktop dan aplikasi mobile berbasis android atau Apple IOS (lihat Gambar 5, Gambar 6 dan Gambar 7). Seorang programmer biasanya akan menyesuaikan dengan kebutuhan user untuk menentukan jenis program apa yang kelak akan dibuat. Sebagai contoh, sistem informasi akademik Universitas Setia Budi (USB) yang kemudian dikenal dengan nama EduManage dibuat dalam bentuk aplikasi web (Gambar 5). Alasannya: menyesuaikan kebutuhan. Demi memudahkan mahasiswa yang akan registrasi semesteran, dosen yang akan upload nilai, pembimbing akademik yang akan approve mata kuliah yang diinput oleh mahasiswa bimbingannya, maka EduManage dibangun sebagai aplikasi web. Cukup membuka browser (baik dari PC ataupun dari smartphone) dan kemudian ketik alamat http://edu.setiabudi.ac.id/ maka EduManage pun dapat diakses dari seluruh wilayah di bumi ini. Gambar 5. edu.setiabudi.ac.id atau EduManage adalah contoh aplikasi berbasis web

6 Namun jika aplikasi atau program yang akan dibuat tidak memerlukan browser, bahkan cenderung tidak membutuhkan koneksi internet saat dijalankan, maka aplikasi dapat dibangun dalam bentuk desktop. Aplikasi ini memang wajib diinstall terlebih dahulu pada saat pertama kali akan digunakan. SPSS (Gambar 6), Microsoft Word, Microsoft Excel, Micrososft Powerpoint adalah contoh program aplikasi berbentuk desktop. Gambar 6. SPSS sebagai contoh aplikasi desktop (sumber: ibm.com) Seiring perkembangan jaman, dimana saat ini komputer PC, laptop, tablet dan handphone semakin compact dan integrated, maka aplikasi program pun ada yang dibuat versi mobile-nya, baik dalam bentuk mobile browser, android apk (-- apk adalah file instalasi di android OS) ataupun IOS ipa (-- ipa adalah file instalasi di IOS). Sebagai contoh WhatsApp Messenger atau WA yang merupakan aplikasi percakapan yang paling banyak digunakan. Dikutip dari Wikipedia (https://id.wikipedia.org/wiki/WhatsApp), awalnya WhatsApp dibuat untuk perangkat Apple IOS, namun untuk mengikuti perkembangan jaman, WhatsApp kini tersedia dalam bentuk Windows desktop, Mac desktop, aplikasi web, android dan windows phone. Bahkan ketika Blackberry serta Nokia phone masih berjaya, WhatsApp juga tersedia dalam bentuk Blackberry OS dan Symbian OS.

7 Gambar 7. WhatsApp Messenger sebagai contoh aplikasi berbasis mobile android (sumber: techbout.com) Tugas Mahasiswa Dengan memanfaatkan media internet, silahkan cari apa saja software/ aplikasi yang digunakan didunia manufaktur. 3. Pengenalan Bahasa Pemrograman Bahasa pemrograman termasuk perangkat lunak yang termasuk kategori program aplikasi. Bahasa pemrograman berisi serangkaian kode baik perintah maupun fungsi tertentu yang bertujuan untuk melakukan suatu algoritma. Bahasa pemrograman adalah bahasa tertentu yang digunakan oleh para programmer untuk membuat suatu aplikasi atau software pada computer (Yudistira, 2011). Tujuan bahasa program adalah untuk mempermudah dalam menjalankan perintah serangkaian kode program tertentu sesuai dengan keinginan pemrogram atau programmer (Hartono, 2006). Bahasa pemrograman memfasilitasi seorang programmer untuk secara spesifik apa yang akan dilakukan oleh komputer, bagaimana sebuah data disimpan dan ditransformasi menjadi informasi yang memiliki nilai manfaat. Manfaat bahasa program adalah untuk membantu mempermudah pekerjaan tertentu yang memerlukan otomatisasi.

8 Gambar 8. Bahasa Pemrograman (sumber: justcode.me) Usia bahasa pemrograman sama seperti usia mesin computer itu sendiri. Bahasa pemrogaman itu ditemukan pada tahun ditemukannya mesin komputer, mulai generasi yang paling pertama kali yaitu kode mesin yang langsung difungsikan untuk mengontrol hardware dan terus berkembang hingga saat ini. Bahasa pemrograman pada awal-awal tahun computer dikembangkan adalah bahasa mesin (machine language). Apa itu bahasa mesin? Komputer adalah makhluk digital yang hanya mengerti digit 1 dan digit 0 (binary). Komputer hanya mau menerima data dalam bentuk binary dan juga hanya bisa mengerti perintah dalam bentuk binary. Perintah dalam bentuk binary ini disebut dengan bahasa mesin (Wicaksono, 2009). Jadi programmer pada masa-masa awal terdahulu adalah programmer yang langsung membuat program dengan menuliskan perintah dalam kode 1 dan 0 (bahasa mesin). Layaknya bahasa manusia, setiap bahasa pemrograman memiliki tata tulis dan aturan tertentu. Bahasa pemrograman dapat diklasifikasikan menjadi tingkat rendah, menengah, dan tingkat tinggi (lihat Gambar 8). Pergeseran tingkat dari rendah menuju tinggi menunjukkan kedekatan terhadap ”bahasa manusia”. Menurut tingkat kedekatannya dengan bahasa manusia, bahasa pemrograman terdiri dari (Hartono, 2006):

9 1. Bahasa Mesin, yaitu memberikan perintah kepada komputer dengan memakai kode bahasa biner, contohnya 01100101100110. Lihat Gambar 9 untuk melihat contohnya. 2. Bahasa Tingkat Rendah, atau bahasa rakitan (Assembly), yaitu memberikan perintah kepada komputer dengan memakai kode-kode singkat (kode mnemonic), contohnya MOV, SUB, CMP, JMP, JGE, JL, LOOP, dsb. singkatan seperti STO yang berarti simpan (STORE) dan MOV yang artinya pindah (MOVE) 3. Bahasa Tingkat Menengah. Disebut tingkat menengah karena bisa masuk ke dalam bahasa tingkat tinggi maupun rendah. Contohnya bahasa C. 4. Bahasa Tingkat Tinggi, yaitu bahasa komputer yang memakai instruksi berasal dari unsur kata-kata bahasa manusia, contohnya begin, end, if, for, while, and, or, dsb. Contohnya bahasa Basic, Visual Basic, Pascal, Java, PHP. Lihat Gambar 10 dan Gambar 11. Gambar 9. Perbedaan Bahasa Pemrograman (sumber: xsonarstandard920.weebly.com) Gambar 10 memperlihatkan contoh kode pada bahasa pemrograman tingkat tinggi, yaitu Javascript. Seperti yang telah dijelaskan dibagian atas, bahasa pemrograman tingkat tinggi adalah kode program yang memiliki kedekatan dengan bahasa manusia (bahasa Inggris). Kode program yang ditampilkan seperti pada Gambar 10 adalah sebuah halaman website yang menampilkan tulisan “Hello World!” (lihat Gambar 11).

10 Gambar 10.script code Javascript (sumber: petanicode.com) Gambar 11.Output dari script code Javascript pada Gambar 10 Bahasa pemrograman tingkat tinggi memang membantu manusia untuk tidak perlu lagi menghafalkan kode biner. Namun apakah ada yang penasaran? Bagaimanakah sesungguhnya bahasa pemrograman tingkat tinggi bisa mengendalikan hardware sebagaimana bahasa mesin?

11 Gambar 12. Proses penerjemahan bahasa programming menjadi bahasa mesin (sumber: guru99.com) Gambar 12 memperlihatkan bagaimana bahasa pemrograman tingkat tinggi bekerja. Setiap bahasa pemrograman tingkat tinggi, seperti Java, C, PHP atau lainnya memiliki modul interpreter yang berfungsi menerjemahkan setiap kode dan sintaks menjadi bahasa level rendah. Kemudian interpreter berkomunikasi dengan system operasi untuk memerintahkan prosesor eksekusi kode program tersebut. 4. Software (Tools) untuk Membuat Flowchart Ms. Visio Edraw Max

12 Ms. Word Flowgorithm Gambar 13. Beberapa tools untuk membuat flowchart Ada beberapa tools yang dapat anda manfaatkan untuk membuat algoritma dalam bentuk flowchart. Seperti yang ditunjukkan pada Gambar 13, Anda bisa memanfaatkan menu insert - shape pada software Microsoft Word untuk menggambar flowchart. Hanya saja, berdasarkan pengalaman, cukup merepotkan apabila membuat flowchart yang panjang dengan menggunakan Ms. Word. Tidak ada fasilitas garis yang mengikuti shape jika kotak tersebut dipilih dan digeser. Sehingga jika kita menggeser shape, maka garis panahnya tertinggal. Butuh effort yang cukup untuk merapikannya kembali. Atau, anda juga bisa menggunakan software Microsoft Visio yang popular untuk menggambar flowchart. Atau, menggunakan software edraw-max yang kini menjadi saingan berat Visio. Visio dan Edraw-max memperbaiki kelemahan – kelemahan Ms. Word dalam membuat flowchart. Dengan menggunakan Visio dan Edraw-max membuat flowchart menjadi lebih mudah, lebih cepat dan lebih menyenangkan.

13 Gambar 14.Algoritma luas persegi panjang dengan flowgorithm dan console eksekusi ketika algoritma tersebut dijalankan Namun, sebagai perkembangan penyempurnaan modul kuliah ini, saya menemukan sebuah tools yang menarik, yaitu : flowgorithm (lihat Gambar 14). Yang alamat url-nya: http://www.flowgorithm.org. Yang unik dan terdengar menyenangkan adalah Flowgorithm bersifat gratis. Hal ini dinyatakan pada halaman depan di website Flowgorithm. Flowgorithm tidak hanya tersedia untuk anda pengguna system operasi Windows, tapi juga tersedia bagi pengguna Macintosh dan Linux. Pada saat buku ini dibuat, versi Flowgorithm yang dapat didownload adalah versi 2.21.1 (lihat Gambar 15). Flowgorithm adalah tools yang membantu untuk menyusun flowchart dengan berbasis dialog (Gajewski, 2018). Kelebihan Flowgorithm yang saya temukan, dibandingkan dengan aplikasi visio, adalah dapat algoritma yang kita buat dapat dieksekusi. Gambar 14 sebelah kiri memperlihatkan bagaimana kita merancang algoritma luas persegi panjang yang dibuat dengan flowgorithm. Sedangkan Gambar 14 sisi kanan

14 memperlihatkan console flowgorithm ketika mengeksekusi (running) algoritma yang telah dibuat. Dengan flowgorithm, kita bisa mengetahui apakah algoritma yang dibuat error atau tidak, dan sekaligus melihat bagaimana prilaku dan hasil akhir dari algoritma tersebut. Kelebihan penting lainnya, algoritma yang dibuat bisa diterjemahkan ke dalam berbagai bahasa pemrograman populer, seperti Java, PHP, JavaScript dan lain-lain. Gambar 15.Halaman download Flowgorithm Dengan memperhatikan berbagai kelebihan Flowgorithm, maka tools ini menjadi tools standar modul ini untuk membantu latihan pembuatan flowchart. 5. Pengenalan menu Flowgorithm Secara umum komponen flowchart (algoritma) dapat dilihat pada Tabel 1. Namun demikian, ada sedikit kekhususan symbol yang digunakan

15 pada program Flowgorithm. Berikut adalah penjelasan simbol utama yang digunakan di Flowgorithm (lihat Gambar 16): 1. Simbol terminal main. Untuk menandai awal dimulainya algoritma. 2. Simbol declarasi (declare). Untuk deklarasi/ definisi variable dan tipe data variable. 3. Simbol input. Untuk deklarasi variable-variabel yang harus di-input user ke dalam algoritma. 4. Simbol assign. Untuk deklarasi proses yang dijalankan dalam algoritma. 5. Simbol output. Untuk deklarasi output yang dihasilkan dari pengolahan proses. 6. Simbol terminal end. Untuk menandai akhir algoritma. Gambar 16. Komponen utama algoritma/ flowchart

16 Gambar 17.Antarmuka flowgorithm Gambar 17 memperlihatkan antar muka (interface) flowgorithm yang 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. Berdasarkan Gambar 17, terdapat empat kelompok shape dalam membuat algoritma dengan flowgorithm, yaitu shape input/output, shape variables, shape control dan shape looping. Shape input/ output terdiri dari dua buah shape, yaitu shape input dan shape output. Simbol input kita pilih jika ingin deklarasi variablevariabel yang harus di-input user ke dalam algoritma. Contoh jika ingin membuat algoritma kalkulator maka harus ada definisi variable input agar kalkulator dapat bekerja dengan benar. Sedangkan simbol output digunakan jika akan deklarasi variable output yang dihasilkan dari pengolahan proses. Shape variables terdiri dari dua buah shape, yaitu shape declare dan shape assign. Simbol declarasi (declare) digunakan untuk deklarasi/ definisi variable dan tipe data variable. Sedangkan simbol assign digunakan ketika akan deklarasi proses yang dijalankan dalam algoritma. 1 2

17 Shape control terdiri dari dua buah shape, yaitu shape if dan shape call. Shape looping terdiri dari tiga buah shape, yaitu shape for, shape while dan shape do. Makna dan penggunaan shape if, call, for, while dan do akan dijelaskan lebih lanjut pada bab selanjutnya. 6. Pengenalan APP Inventor Dari penjelasan di atas, telah disampaikan bahwa bahasa pemrograman tingkat tinggi mempunyai visi ingin memudahkan programmer dalam membuat program. Google Education dan MIT Center for Mobile Learning berusaha membuat seorang pemula menjadi tertarik dengan pemrograman tanpa harus mempelajari bahasa pemrogramannya terlebih dahulu. Atas dasar hal tersebut, Google Education dan MIT Center for Mobile Learning membuat sebuah antar muka grafis untuk IDE pemrograman Android. Visi yang dicanangkan adalah membuat pemula tertarik dan mampu membuat aplikasi Android semudah bermain LEGO atau PUZZLE (Wihidayat and Maryono, 2017). Pemula yang dimaksudkan, adalah usia dini. Karenanya, Google merancang sebuah programming tools menggunakan antar muka grafis dengan prinsip drag-and-drop blok program seperti memainkan Lego atau Puzzle. Misalnya seperti Gambar 18 dibawah ini, sebuah block program pada App Inventor untuk sebuah daftar warna, tanpa mengetik kode program bukan? Gambar 18.Metode drag-and-drop blok program pada AppInventor (sumber: appinventor.mit.edu)

18 App Inventor adalah sebuah tools pemrograman yang awalnya dikembangkan dan disediakan oleh Google, namun saat ini (tahun 2019) dikelola oleh Massachusetts Institute of Technology (MIT), universitas yang bergerak di bidang teknologi dan diakui di dunia. App Inventor bersifat open source, cloud-based service dan free. App Inventor memungkinkan kita untuk membangun dan mengembangkan aplikasi Android (Android mobile apps) dengan tampilan antarmuka grafis yang simpel. App Inventor bisa digunakan dalam dua versi: versi online dan versi offline. Lantas apa perbedaan App Inventor versi online dan App Inventor versi offline? Untuk menggunakan App inventor versi online, kita harus mempunyai akun Gmail. Kunjungi website App Inventor (http://ai2.appinventor.mit.edu), lalu daftar dengan akun Google, dan mulai belajar untuk membuat aplikasi Android. Keuntungan menggunakan App Inventor online adalah file-file proyek aplikasi Android yang kita buat disimpan pada penyimpanan Google Cloud. Jadi, kita bisa mengakses dan melanjutkan proyek dari mana saja, dengan menggunakan perangkat yang berbeda asalkan ada koneksi internet. Sementara, untuk menggunakan App Inventor versi offline, kita harus install App Inventor 2 offline server environment terlebih dahulu. File-file yang diperlukan tersedia di alamat https://sourceforge.net/projects/ai2u/ Satu-satunya perbedaan antara APP Inventor online dengan APP Inventor offline adalah kebutuhan akan koneksi internet. Pada APP Inventor online, dibutuhkan koneksi internet yang cukup stabil. Mengingat semua aktivitas dilakukan melalui browser, secara online. Sementara teknologi APP Inventor offline memanfaatkan fasilitas Java Development Kit (JDK). Sehingga setelah selesai menginstall, kita serasa memiliki sendiri server APP Inventor pada laptop/ komputer. Tanpa lagi tergantung pada koneksi internet. Namun demikian, yang akan dibahas pada buku ini adalah penggunaan APP Inventor secara online. Walaupun sangat tergantung pada koneksi internet yang stabil, kemudahan tanpa perlu instalasi yang cukup rumit adalah sesuatu yang menyenangkan.

19 Hal lain yang menyenangkan dari App Inventor adalah tool tersebut berbasis visual block programming, sehingga kita dapat membuat aplikasi tanpa mengetikkan satu kode apapun. Mengapa disebut visual block programming? Karena kita akan melihat, menggunakan, menyusun dan drag-drops “blok” yang merupakan simbol-simbol perintah dan fungsi event handler tertentu dalam membuat aplikasi, dan secara sederhana kita bisa menyebutnya tanpa menuliskan kode program (coding less). App inventor dibangun untuk kita yang baru mulai belajar membuat aplikasi android, namun untuk programmer tentu ada opsi-opsi advance untuk membuatnya sesuai dengan level kita. Apa Yang Bisa Kita Lakukan Dengan App Inventor? Semua tergantung dari orientasi awal anda, anda ingin membuat aplikasi dengan tujuan 1. Just for fun App inventor akan bisa menjadi sesuatu yang menyenangkan seperti halnya anda menyukai mengedit gambar, bermain puzzle, mengasah otak anda seperti mengisi TTS, membuat game sederhana, membuat aplikasi quis, membuat aplikasi seperti goyang Shopee atau belajar sebagai basis menguatkan kemampuan logika dapat dilakukan dengan mudah dan menyenangkan. 2. Learning tool Apapun profesi anda, entah seorang pelajar, mahasiswa, guru, dosen, teknisi, programmer atau anda hobi untuk mengotak-atik android, anda akan bisa menjadikan App Inventor sebagai tool belajar anda. Jika anda seorang guru atau dosen anda akan membuat app inventor menjadi alat pengajar yang hebat, karena visualisasi akan mempermudah siswa memahami dan menguasai apa yang anda ajarkan. Sebagai contoh: anda dapat mempelajari logika kerja dari aplikasi dengan menerapkan susunan blok pada tool itu. 3. Developer aplikasi Jika anda seorang pengembang aplikasi android, mulai dari membuat prototype, aplikasi untuk kebutuhan pribadi dan organisasi, atau

20 aplikasi serius yang bisa anda jual, apabila anda telah mencoba menggunakan App Inventor, anda akan merasakan betapa mudahnya, tentu disamping karena berbasis visual drag drops ini juga karena anda : Tidak perlu menghafal dan mengingat instruksi atau kode-kode program Komponen dan blok event tersedia dengan lengkap anda tinggal menggunakannya. Layaknya sebuah objek anda tinggal merangkainya dengan komponen dan blok yang sesuai fungsinya, tinggal meletakkanya seperti puzzle tinggal merubah propertinya, misal memberikan nilai angka untuk mengeset timer dan lain-lain. Event handler akan memudahkan anda dalam menangani setiap “kejadian” atau event yang anda ingin handle. Misal anda membuat sebuah aplikasi untuk menangani sms, dalam App Inventor anda tinggal mengambil drag and drops blok yang menangani event sms. Kelebihan App inventor. Tidak menggunakan coding/bahasa pemrograman seperti umumnya Menggunakan sistem drag and drop layaknya puzzle Mudah Tidak membutuhkan instalasi karena berbasis web Fitur yang cukup lengkap untuk pemula Kekurangan App Inventor. Tidak bisa full screen karena ada credit Masih ada beberapa komponen yang kurang lengkap Membutuhkan koneksi internet 7. Bagaimana App Inventor Bekerja? Framework visual programming ini terkait dengan bahasa pemrograman Scratch dari MIT, yang secara spesifik merupakan implementasi dari Open Block yang didistribusikan oleh MIT Scheller Teacher Education. Program yg diambil dari riset yang dilakukan oleh Ricarose Roque. App Inventor menggunakan Kawa Language Framework

21 dan Kawa’s dialect – yang di-develop oleh Per Bothner dan didistribusikan sebagai bagian dari GNU Operating System oleh Free Software Foundation sebagai compiler yang mentraslate visual block programming untuk diimplementasikan pada platform Android. Gambar 19. Skema teknologi APP Inventor Seperti terlihat pada Gambar 19, server Google APP Inventor menyediakan teknologi cloud untuk menyimpan project yang dibuat. Gambar 20 memperlihatkan project yang pernah dibuat dan disimpan oleh server Google APP Inventor.

22 Gambar 20.Halaman My Project pada APP Inventor Seperti yang telah ditunjukkan pada Gambar 19, tampilan user interface APP Inventor Online terbagi menjadi dua bagian, yaitu bagian designer dan blocks. Bagian designer merupakan modul APP Inventor yang membantu user dalam merancang tampilan antarmuka program, seperti menempatkan button, membuat textbox atau merubah tampilan background color. Gambar 21 memperlihatkan bagian designer yang dimaksud. Ada lima komponen dasar yang penting pada halaman designer, yaitu: Palette, Viewer, Component, Media dan Properties . Gambar 21.Modul designer pada APP Inventor

23 Seperti diperlihatkan pada Gambar 21, pada bagian sebelah kiri layar terdapat komponen-komponen user interface (pada APP Inventor diberi nama: Palette), seperti button (tombol), checkbox, textbox dan lain sebagainya. Palette ini bisa dipilih dan di-layout atau didesain pada bagian viewer sesuai dengan kebutuhan. Layar bagian viewer memperlihatkan hasil akhir tampilan antar muka program yang dirancang. Jika membutuhkan setting lebih lanjut, bisa menggunakan pengaturan properties yang berada di bagian sebelah kanan layar. Di bagian sebelah kanan, juga terdapat bagian layar yang memperlihat komponen Palette apa saja yang digunakan. Komponen ini akan dibahas lebih lanjut pada bab selanjutnya. Gambar 22.Media pada APP Inventor Komponen berikutnya pada halaman designer adalah Media. Gambar 22 memperlihatkan posisi Media pada halaman designer yang terletak di bawah dari kolom Component. Kolom Media digunakan untuk mengatur semua media komponen untuk mendukung aplikasi yang telah anda buat. Tipe media yang dapat ditambahkan ke dalam kolom media adalah gambar, clip art, musik, atau movie. Semua media ini bisa ditambahkan ke dalam project dengan syarat: besar file tidak boleh melebihi 5 MB. Setelah merancang tampilan antar muka, “source code” program dibuat pada halaman Bloks. Coding disini bukanlah mengetik kode program seperti layaknya bahasa pemrograman yang lain. Seperti yang telah disampaikan sebelumnya dan seperti yang ditunjukkan pada Gambar 23,

24 kode program pada APP Inventor disusun sebagaimana layaknya memasangkan puzzle. Drag and drop block program. Gambar 23.Modul bloks pada APP Inventor Gambar 24.Warning Alert dan Error Alert pada halaman Blocks APP Inventor Gambar 25. Ketika tombol warning diaktifkan Gambar 24 memperlihatkan simbol yang memberi tahu adanya peringatan (warning) dan simbol yang menginformasikan adanya error pada codeblock yang ditambahkan pada layar viewer. Angka yang mengikutinya adalah jumlah warning dan jumlah error yang terdeteksi. Sedangkan tanda segitiga atas dan segitiga bawah adalah tombol navigasi yang mengarahkan kepada codeblock yang bermasalah. Selanjutnya,

25 Gambar 25 memperlihatkan ketika tombol show warning di-klik. APP Inventor akan menambahkan simbol dan simbol pada codeblock yang bermasalah (perhatikan Gambar 25). Informasi ini sangat berguna dan sekaligus memudahkan programmer dalam melacak codeblock program yang bermasalah. Gambar 26. Teknik running atau testing project yang telah dibuat (sumber http://ai2.appinventor.mit.edu) Setelah user interface (tampilan antar muka) program didesain dan block program di-coding, saatnya melakukan testing dan running program. Seperti yang ditunjukkan pada Gambar 26, APP Inventor menyediakan tiga metode untuk testing atau simulation running program yang telah dibuat, yang dapat diakses melalui menu Connect. Ketiga cara tersebut yaitu: AI Companion, Emulator atau menggunakan USB. AI Companion (atau MIT AI2 Companion) adalah sebuah apk (atau aplikasi Android dan tersedia di Google Play) yang dibuat oleh Google dan MIT. Aplikasi AI Companion ini harus diinstall pada perangkat smartphone Android. Setelah diinstall, aplikasi ini berfungsi seperti live testing project (App) yang telah dibuat. Pilih menu AI Companion pada APP Inventor online kemudian scan QR Code yang muncul dengan menggunakan aplikasi AI Companion pada smartphone. Maka perangkat smartphone akan running App yang sedang dikerjakan. Dengan demikian user bisa simulasi dan testing project secara live pada perangkat smartphone dengan bantuan bantuan AI Companion (lihat Gambar 27). Gambar 27 sebelah kiri adalah tampilan app AI Companion di Google Play.

26 Gambar 27. Testing App yang sedang dibuat dengan bantuan aplikasi AI Companion (sumber: appinventor.mit.edu) Sedangkan menu Emulator berfungsi untuk simulasi dan testing app yang sedang dibuat apabila kita tidak memiliki perangkat smartphone Android. Android emulator yang disediakan APP Inventor, bekerja seperti perangkat Android smartphone pada layar komputer kita. Untuk dapat menggunakan menu emulator saat pertama kali, terlebih dahulu harus menginstall beberapa software pendukung. Apabila anda tertarik untuk menggunakan emulator, anda bisa mendapatkan petunjuk detail pada laman : http://appinventor.mit.edu/explore/ai2/setup-emulator.html. Pastikan laptop/ komputer anda memiliki kapasitas RAM minimal 4 GB atau lebih, dan juga terkoneksi pada jaringan internet dengan stabil. Apabila proses instalasi tidak mengalami kendala, maka anda akan melihat tampilan emulator seperti terlihat pada Gambar 28. Pada Gambar 28 sebelah kanan diperlihatkan contoh App yang sedang di-test dengan menggunakan emulator.

27 Gambar 28.Android emulator pada APP Inventor beserta contoh testing App pada emulator (sumber: exploringbinary.com) Terakhir, apabila kita tidak memiliki koneksi internet Wifi seperti persyaratan yang dibutuhkan, dapat menggunakan menu USB seperti yang ditunjukkan pada Gambar 26. Gambar 29 memperlihatkan skema koneksi antara laptop yang sedang akses APP Inventor dan perangkat smartphone yang menjalankan aplikasi AI Companion. Koneksi antara laptop dengan smartphone dihubungkan dengan kabel USB sebagai pengganti koneksi Wifi. Dengan demikian, user tetap dapat simulasi dan testing app project, walau mungkin ada beberapa proses yang tidak dapat berjalan, khususnya yang membutuhkan koneksi internet. Panduan detail untuk teknis koneksi USB bisa dipelajari pada laman: https://appinventor.mit.edu/explore/ai2/setup-device-usb.html

28 Gambar 29. Skema koneksi USB untuk simulasi dan testing app project yang dibuat (sumber: appinventor.mit.edu) Selain ketiga cara simulasi dan testing yang telah dijelaskan di atas, APP Inventor juga menyediakan teknik lain untuk ujicoba app. Yaitu dengan cara compile app menjadi file .apk yang kemudian dapat diinstall pada perangkat smartphone Android. Gambar 30 memperlihatkan menu Build > App (save .apk to my computer) untuk compile file .apk tersebut. Panduan lebih detail untuk compile file .apk bisa dipelajari pada laman: https://appinventor.mit.edu/explore/ai2/share.html Gambar 30. Compile app menjadi file .apk (sumber appinventor.mit.edu) Setelah .apk diinstall pada perangkat smartphone Android, user dapat mencoba dan mensimulasi jalannya app yang telah dirancang dan deprogram sebelumnya. C. Penutup 1. Rangkuman Yang menjadi target capaian pada buku ajar ini adalah mahasiswa mampu membuat program aplikasi sederhana berbasis Android. Program Android yang akan dihasilkan oleh mahasiswa termasuk kategori program mobile. Untuk dapat menghasilkan program yang baik, mahasiswa wajib

29 menguasai perancangan algoritma/ flowchart yang merupakan metode penyelesaian masalah dalam pemrograman komputer. Pada buku ini, Flowgorithm merupakan program aplikasi yang digunakan sebagai tools standar untuk perancangan algoritma. APP Inventor adalah framework visual programming yang dikembangkan oleh Google dan MIT. APP Inventor dapat digunakan sebagai tools untuk menghasilkan app yang dapat diimplementasikan pada platform Android. APP Inventor menyediakan modul designer untuk merancang tampilan antar muka app dan modul blocks untuk drag and drops blok program. APP Inventor terdapat tiga cara untuk simulasi dan testing app project yang dibuat. Selain itu, APP Inventor juga menyediakan menu compile app menjadi file .apk yang kemudian, file .apk tersebut dapat diinstall pada perangkat smartphone Android. 2. Evaluasi dan Kunci Jawaban a. Apakah smartphone yang kita pegang saat ini sudah termasuk kategori komputer? b. Apakah windows 10 dan Microsoft Power Point tergolong kategori software yang sama? c. Sebutkan kategori software yang akan dihasilkan dari pemrograman App Inventor. 3. Tindak lanjut Bila sudah mampu menjawab evaluasi mengenai teknologi komputer dan aktif dalam diskusi kelas maka anda sudah memahami bab ini dan dapat melanjutkan mempelajari bab selanjutnya.

30 Bab 2 Pengantar Algoritma A. Pendahuluan 1. Deskripsi singkat cakupan materi Algoritma adalah urutan atau langkah-langkah terstruktur dan terurut untuk menyelesaikan suatu permasalahan. 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. 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 visual dengan bantuan simbol-simbol baku yang memiliki arti, yaitu dalam bentuk flowchart. Flowgorithm adalah salah satu tools yang dapat membantu untuk menyusun flowchart dengan berbasis dialog. Kelebihan Flowgorithm adalah dapat algoritma yang kita buat dapat dieksekusi. 2. Kemampuan akhir yang diharapkan Mahasiswa mampu menjelaskan konsep algoritma untuk penyelesaian kasus sederhana dan mampu menjelaskan konsep penggunaan tools pembuatan flowgorithm untuk membuat algoritma dalam bentuk flowchart. B. Penyajian 1. Pendahuluan Algoritma Dalam pembuatan program komputer, sebelum membuat coding, seorang programmer akan selalu membuat algoritma dari suatu permasalahan yang akan dipecahkan. Bahkan tidak hanya programmer. Kita sebagai manusia biasa pun sebenarnya terbiasa membuat algoritma,

31 walaupun tidak kita sadari. Sebagai contoh, ketika kita mandi. Ada algoritma disana, diawali dengan sikat gigi, kemudian menyiramkan air untuk membasahi badan, bersabun, membilas sabun dengan air hingga bersih, dan diakhiri dengan berhanduk. Ya, itu adalah algoritma ketika kita mandi. Bahkan jika mau lebih detail, pada sub kegiatan mandi pun bisa dijabar algoritmanya. Misalnya, algoritma untuk sikat gigi. Atau algoritma menanak nasi. Atau algoritma memasak mie goreng. Semua memiliki urut-urutan langkah terstruktur untuk menyelesaikan permasalahan yang ada. Jadi, apa itu algoritma? Secara umum, algoritma adalah urutan atau langkah-langkah terstruktur dan terurut untuk menyelesaikan suatu permasalahan (Lau, 2018). Sehingga algoritma pemrograman komputer adalah urutan atau langkah-langkah untuk menyelesaikan permasalahan yang akan dibuat program komputernya. Oke, kita sudah mengenal algoritma. Akan tetapi, algoritma yang sudah kita pelajari memiliki satu kelemahan yang sangat fatal. Apa itu? Karena algoritmanya, terdiri dari susunan kalimat dan kalimat tersebut merupakan kalimat dalam bahasa Indonesia, maka hanya yang mengerti bahasa tersebut yang dapat memahami algoritma yang kita buat. Kelemahan lain yang mengikutinya, adalah pada sisi ambiguitas kata atau kalimat yang digunakan. Contoh : Algoritma memasak telor dadar untuk sarapan pagi. Pertama, kita harus mempunyai bahan untuk membuat telor dadar. Berdasarkan referensi dari Ibu, bahan yang diperlukan adalah telor ayam satu butir, garam sejumput, minyak goreng 30 mL. Sementara alat yang diperlukan adalah kompor gas, wajan, sotil dan piring. Setelah alat dan bahan tersedia maka langkah selanjutnya adalah panaskan minyak goreng pada wajan hingga suhu ± 70o C. Pecahkan telur, masukkan ke dalam wajan. Goreng hingga telur matang. Ciri telur dadar matang adalah putih telur berubah warna dari bening menjadi putih dan teksturnya kenyal. Kuning telur berubah tekstur dari cair menjadi padat dan kenyal. Jika telur sudah matang, angkat telur dan pindahkan ke dalam piring. Jika belum, tunggu hingga matang baru angkat dan pindahkan ke dalam piring.