3 Fungsi Utama Perangkat Lunak 4 Spesifikasi Kebutuhan Pengembangan Program

8 akan diberikan sebuah daftar nama-nama lapangan basket yang tersedia di wilayah tersebut. Menu yang kedua merupakan cabang olahraga bulutangkis, yang ketiga merupakan cabang olahraga futsal, sedangkan menu keempat adalah cabang olahraga renang. Proses pencarian tempat olahraga yang dilakukan pada keempat cabang tersebut sama, yaitu pengguna akan diberikan enam wilayah yang terdapat di Bogor, kemudian setelah memilih wilayah pengguna akan mendapatkan daftar berupa nama-nama lapangan olahraga yang terdapat di wilayah tersebut. Menu yang kelima merupakan menu exit yang berguna untuk keluar dari sistem tersebut. Hasil desain dari prototipe dapat dilihat pada Gambar 4. Setelah melakukan desain prototipe, dilakukan diskusi dengan pengguna. Karena hasil dari tahap pada Siklus A telah sesuai dengan keinginan pengguna maka dilanjutkan ke tahap Siklus B. 3.2 Siklus B 3.2.1 Siklus B - Iterasi Pertama a Mengkodekan Sistem Operasional Setelah kebutuhan data dan desain dari prototipe sesuai dengan keinginan dari pengguna, maka tahap selanjutnya adalah mengkodekan sistem operasional. Dalam proses mengkodekan sistem operasional, terdapat dua komponen yang digunakan dalam App Inventor yaitu App Inventor Designer dan App Inventor Blocks Editor. Gambar 4 Mock up fungsi menu utama 9 Gambar 5 Interface App Inventor Gambar 5 menunjukkan tahap awal dalam mememulai proses pengkodean dengan membuka website http:beta.appinventor.mit.edu. Kemudian membuat project dengan klik menu “New” untuk membuat project baru, namun sebelumnya harus mendaftarkan account pada Google. Cara mendapatkan account pada Google yaitu dengan create account pada alamat https:accounts.google.comSignUp. Selanjutnya setelah membuat project akan ditampilkan App Inventor Designer. App Inventor Designer berfungsi untuk merancang user interface dari program yang akan dikembangkan. Proses desain akan dilakukan pada screen yang telah disediakan oleh App Inventor. Gambar 6 merupakan proses pembuatan desain menu utama. Komponen yang dibutuhkan dalam merancang user interface pada screen 1 ialah Button dari palette basic. Terdapat komponen button berguna untuk membuka screen 2, screen 3, screen 4, dan screen 5. Setelah membuat desain pada screen 1 selesai, selanjutnya tahap menyusun block editor screen 1 dengan menggunakan App Inventor Blocks Editor. App Inventor Blocks Editor berfungsi untuk menyusun logika-logika pemrograman pada aplikasi ini. Pada Gambar 7 terdapat beberapa rangkaian puzzle yang merupakan hasil block editor yang dibutuhkan pada screen 1. Apabila pengguna memilih Button1.Click, pengguna akan menuju ke screen 2. Setelah itu di screen 2 akan ditampilkan beberapa wilayah Kecamatan yang terdapat di Bogor. Proses yang dilakukan oleh Button2.Click hampir sama dengan Button1.Click pengguna akan mendapatkan beberapa wilayah Kecamatan yang terdapat di Bogor. Gambar 6 Desain menu utama