PEMROGRAMAN MULTIMEDIA – APLIKASI TRAVELING GUIDE DI KOTA BOGOR BERBASIS ANDROID

Nama : Andaru Amanda

NPM : 50408099

Kelas : 4IA06

Tugas pertama matakuliah Pemrograman Multimedia :

Aplikasi Android Travelling Guide to Bogor City atau WIsata Bogor adalah aplikasi info wisata yang dibuat dengan bahasa pemrograman Java untuk sistem operasi Android pada ponsel. Seperti halnya aplikasi pemandu di platform lainnya, aplikasi ini memiliki beberapa menu standar antara lain Where Are You Going, About dan  Exit. Pembuatan aplikasi ini terdiri dari beberapa tahapan. yaitu diagram alur dan  algoritma menggunakan UML, rancangan interface, pembuaan kode program, kompilasi, dan  implementasi. Dalam tahap diagram alur dan  algoritma menggunakan UML ini dimodelkan proses yang terjadi pada aplikasi. Tahap selanjutnya adalah rancangan interface dan  dilanjutkan dengan coding atau pembuatan kode program kemudian kompilasi kode program. Pada tahap implementasi,  aplikasi pemandu wisata di kota bogor yang dibuat akan dijalankan pada emulator Android 2.2 Dan  di install pada ponsel Android.

 

Diagram Alur dan  Algoritma

Dalam memodelkan proses yang terjadi pada rancangan sistem aplikasi Wisata Bogor akan dibuat kedalam bentuk model struktur navigasi untuk melihat alur dan  menu aplikasi serta bentuk model UML, yaitu Use Case Diagram dan  Activity Diagram.

 

Struktur Navigasi

      

Use Case Diagram

Gambar diatas menggambarkan Use Case Diagram menjelaskan bahwa terjadi interaksi antara pengguna dengan fungsionalitas sistem aplikasi pemandu wisata kota Bogor. Pengguna berhubungan dengan menu utama , peta dan  juga berhubungan dengan pilih wisata. Pada pilih wisata terdapat kaitan yang dengan view info, dan  view gambar.

         

Activity Diagram

Gambar diatas menjelaskan bahwa terdapat beberapa alir aktifitas dalam rancangan sistem aplikasi pemandu wisata. Alir berawal dari aktifitas halaman awal aplikasi. Setelah itu alir memiliki aktifitas paralel yang mungkin terjadi pada beberapa eksekusi, diantaranya aktifitas About, Where Are You Going dan  Exit. Aktifitas About hanya menampilkan kotak dialog lalu alirnya kembali ke aktifitas halaman awal. Sedan gkan aktifitas Exit keluar dari aplikasi. Aktifitas Where Are You Going akan menuju pada aktifitas Menu. Pada Menu ini terdapat decision untuk memeriksa apa saja pilihan yang terdaftar pada aplikasi ini, apabila pengguna memilih Option Wisata maka pengguna akan masuk ke halaman list objek wisata, atau jika pengguna memilih Bogor Map maka pengguna akan masuk kedalam akses google map Bogor. Saat tampilan informasi dan  gambar sedang dijalankan atau dilihat, pengguna dapat melakukan pemilihan objek wisata yang lain. Kemudian saat pengguna memilih aktifitas informasi dan  gambar maka pengguna dapat melakukan berbagai pilihan wisata yang diinginkan. Setelah aktifitas informasi dan  gambar, terdapat decision untuk menanyakan kepada pengguna apakah ingin memilih lagi. Jika ya maka pengguna dapat kembali pada aktifitas Menu atau jika tidak maka pengguna dapat keluar dari aplikasi dan  alur aktifitas akan berakhir di sini.

           

Rancangan Interface

Perancangan interface aplikasi Wisata Bogor ini terdiri dari perancangan menu utama aplikasi, rancangan tampilan About, rancangan tampilan Where Are You Going, rancangan tampilan Bogor Map, rancangan tampilan Option Wisata dan Objek Wisata.

Rancangan Menu Utama

Secara umum aplikasi Traveling Guide to Bogor City ini hanya menampilkan dua bagian, yaitu background dan  button. Gambar dibawah adalah Rancangan menu utama Wisata Bogor  :

Pada rancangan menu utama ini menampilkan halaman yang didalamnya terdapat tiga button yang tersedia dari Aplikasi Wisata Bogor yaitu About, Where Are You Going dan  Exit.

Rancangan Tampilan About

Pada rancangan ini terdapat tampilan kotak dialog yang akan tampil apabila pengguna memilih tombol About pada halaman menu utama.

Pada rancangan tampilan dialog About ini terdapat informasi aplikasi bagi para pengguna mengenai fitur menu dari jenis file wisata yang dapat di pilih. Dialog untuk tombol About ini dibuat dengan kotak dialog, Dialog ini akan muncul di depan layar menu utama dengan menggunakan pengaturan default Android.

Rancangan Tampilan Where Are You Going

Pada rancangan tampilan ini dibuat sedikit berbeda dengan menggunakan new layout. Pada new layout ini menampilkan tujuan kita. Tampilan Where Are You Going menggunakan 3 buah button  sehingga tampilan tersebut dapat diklik untuk masuk ke pilihan kita. Pada tampilan ini memiliki tiga buah tombol yang digunakan untuk menjalankan aplikasi, yaitu tombol Option Wisata, Bogor Map dan  Back. Tampilan Where Are You Going juga menggunakan background seperti menu utama sebelumnya.

Rancangan Tampilan Option Wisata

Pada rancangan tampilan ini menggunakan new layout sama seperti rancangan tampilan Where Are You Going. Tampilan Option Wisata menggunakan listview sehingga tampilan tersebut dapat digeser ke bawah dengan scroll. Tampilan ini memiliki satu buah button yang digunakan untuk kembali, yaitu tombol Back

             

Pembuatan Kode Program

Pada tahapan ini akan dijelaskan About pembuatan kode program aplikasi Wisata Bogor secara garis besar dengan menggunakan program Eclipse Galileo, Android SDK dan  ADT yang dimulai dari pengkodean menu utama, kotak dialog About, konten Bogor Map, menu Option Wisata, dan  Objek Wisata.

Pembuatan Menu Utama

Pada pemrograman Android untuk pembuatan program dan  tampilan dilakukan pada dua bagian yang berbeda. Untuk pembuatan tampilan layout dilakukan seluruhnya pada file XML. Pada bagian rancangan menu utama ini terbagi atas 2 bagian, yaitu tombol dan  background. Untuk membuat tombol dipergunakan file menu.xml yang terdapat pada folder layout. Lalu kode yang digunakan adalah sebagai berikut :

 

Pembuatan Kotak Dialog About

Pada tampilan About dibuat dengan gagasan bahwa jika pengguna menekan tombol About, maka akan muncul kotak dialog yang berisikan informasi mengenai aplikasi Wisata Bogor.

Pada pemrograman Android semua resource mulai dari gambar, layout, string, lagu dan  segala jenis resource lainnya selalu dilakukan pada file XML.

Oleh karena itu, dalam membuat kotak dialog About hanya dilakukan degan memodifikasi file Wisata.java pada folder src. Lalu dimasukkan kode berikut ini :

Pada dasarnya yang harus dilakukan hanyalah melakukan override pada method onCreate dan  mengatur layout yang digunakan pada kelas Wisata yang diambil dari folder res/layout berisi tampilan yang sudah dibuat pada file about.xml. Berikut ini output dari beberapa kode pembuatan kotak dialog About di atas.

Pembuatan Tampilan Daftar Objek Wisata

Tampilan ini terdiri atas listing java dan  xml yang di mana nanti keduanya saling berhubungan untuk membuat layout tampilan ini bisa digunakan, untuk xml-nya digunakan listing sebagai berikut. Widget adalah objek view yang bertugas sebagai sebuah antarmuka untuk interaksi dengan pengguna. Pada saat pengguna menekan tombol Option Wisata pada tampilan awal Where Are You Going, pengguna akan dibawa masuk ke dalam tampilan dengan berbagai pilihan wisata.

Seperti biasa untuk membuat widget tab, hal yang pertama perlu dilakukan adalah membuat file XML baru, yaitu main.xml di dalam folder layout lalu dimasukkan kode berikut ini :

Setelah melakukan pengkodean pada main2.xml kemudian lakukan pengkodean sederhana pada java seperti tampilan menu utama sebelumnya.

Maka output programnya akan seperti berikut ini.

Kemudian pembuatan listing program untuk peta (menu Bogor Map) pada java.

Selanjutnya adalah membuat aktifitas class java yang akan berkaitan dengan Main2.xml. Lalu penggalan kode yang digunakan adalah sebagai berikut :

Penggalan kode di atas adalah bahwa kelas menummenum merupakan subkelas dari kelas Wisata2 untuk membuat aktifitas tab.

Berikut ini output dari kodingan Class dan  Xml Daftar Objek Wisata di atas.

Di script ini ada pemanggilan resource dari folder values yang digunakan untuk membuat daftar-daftar objek pariwisata yaitu di ambil dari folder values yang bernama array.xml, di mana array wisata ini berisi berbagai macam daftar-daftar objek pariwisata yang nanti akan muncul. Berikut listingnya :

Untuk menangkap nilai pilihan yang di pilih, gunakan onItemClick. Ini menggunakan perintah If position yang dimana jika pengguna memilih salah satu daftar objeknya maka listing ini akan mengejar ke class java baru yang pengguna pilih tersebut. Berikut penggalan listingnya :

Pembuatan Tampilan Informasi dan  Gambar wisata

Tampilan ini menggunakan banyak file class java dan  file xml-nya. Ada 33 file class java dan  33 file xml yang berpasangan. Setiap 1 file class java berpasangan 1 file xml . Dimana setiap file class java dan  file xml listingnya hampir serupa.

Pembuatan Activity Pada Android Manifest

Untuk dapat mengaktifkan class-class baru yang telah dibuat, buat aktifitinya pada AndroidManifest.xml. Urutkan activity berdasarkan urutan tampilan. Lihat script berikut :

Tampilan pertama yang akan muncul ketika aplikasi dijalankan adalah Tampilan Awal, kemudian daftar yang berisi objek – objek pariwisata dilanjutkan dengan akitifitas info – info dan  gambar pariwisata yang diaktifkan sesuai dengan listing program di atas.

           

Kompilasi

Setelah membuat kode aplikasi Wisata Bogor perlu dilakukan kompilasi untuk mengetahui apakah kode tersebut berhasil dijalankan atau tidak. Untuk melakukan kompilasi dapat dilakukan dengan cara klik kanan pada projek aplikasi yang ingin dikompilasi di Eclipse lalu pilih Run as dan  selanjutnya pilih yang 1 Android Application. Jika proses kompilasi gagal maka akan muncul kotak dialog seperti pada gambar berikut ini.

Untuk mengetahui di mana letak kesalahan tersebut sehingga dapat diperbaiki ada pada tab Problems di bagian bawah Eclipse. Contohnya seperti gambar berikut ini.

Dan  jika proses kompilasi berhasil maka akan muncul emulator Android yang akan menampilkan hasil dari pembuatan kode aplikasi Wisata Bogor. Untuk mengetahui apakah proses kompilasi sudah berakhir dapat dilihat pada tab Concole di Eclipse. Contohnya seperti gambar berikut ini.

Jika kesalahan terdapat pada logika program, proses kompilasi tetap berhasil dilakukan dan  kesalahan akan terlihat saat aplikasi pada emulator dibuka, akan muncul pesan error seperti gambar di bawah ini.

                    

Implementasi

Setelah proses kompilasi berhasil dan  melihat hasilnya pada emulator Android, saatnya mengimplementasikan aplikasi Wisata Bogor pada ponsel Android. Pertama, sambungkan kabel data dari ponsel Android ke komputer. Lalu download dan  instal aplikasi APKInstaller pada komputer. Berikutnya install aplikasi Wisata Bogor ke dalam ponsel Android dengan klik ganda pada file bernama WisataBogor.apk yang terdapat di dalam folder bin di dalam projek Android, misalnya C:\WisataBogor\bin. Pada jendela APKInstaller yang muncul pilih tombol Install.

Tunggu sampai proses instalasi selesai.

Dan  sekarang ponsel Android telah ter instal aplikasi Wisata Bogor dan  siap digunakan.

                     

Panduan Penggunaan

Setelah aplikasi Wisata Bogor di instal, saatnya menggunakan aplikasi tersebut. Untuk membuka aplikasi Wisata Bogor klik ikon Wisata Bogor pada menu ponsel.

Pada halaman awal tekan tombol Where Are You Going untuk menuju ke aplikasi atau tekan tombol About  untuk melihat informasi yang berkenaan dengan aplikasi Wisata Bogor atau tekan tombol Exit untuk keluar dari aplikasi. Jika tombol About yang ditekan maka akan muncul kotak dialog seperti gambar berikut ini.

Jika tombol Where Are You Going yang dipilih, maka pengguna akan menuju ke dalam halaman seperti gambar berikut  ini.

Pada halaman Where Are You Going pengguna dapat memilih Option Wisata untuk melihat wisata mana yang dituju didalam memori ponsel Android.

Jika pengguna tidak memilih sebuah Option Wisata, berarti pengguna ingin memilih Bogor Map untuk mengetahui keberadaan kita di kota Bogor.

Jika pengguna ingin kembali ke halaman awal, maka pengguna dapat menekan tab Back dan  akan masuk ke halaman Utama.

Ketika salah satu daftar ini di pilih maka akan muncul tampilan info objek pariwisata yang di pilih, seperti gambar berikut ini .

Ketika button SEE MORE di pilih maka akan kembali ke tampilan yang tadi yaitu tampilan menu objek pariwisata, sedan gkan jika button icon Transportasi maka kotak dialog akan tampilan mengenai transportasi apa saja yang tersedia untuk kita berada menuju objek wisata tersebut.

Dan  jika pengguna memilih keluar dari aplikasi ini maka pengguna akan diarahkan ke halaman awal.

 

41 thoughts on “PEMROGRAMAN MULTIMEDIA – APLIKASI TRAVELING GUIDE DI KOTA BOGOR BERBASIS ANDROID

  1. terlalu keciil listing programnya dan kurang jelas step by step nya mbok dibuat versi pdf sama source-code sekalian… hehehe bwt bantu belajar

  2. Salam kenal gan.,

    sepertinya project ny menarik nh,. jadi pengen belajar buat aplikasi seperti ini

    Apakah saya boleh mnta softcopy PDF n source codeny gan? buat dipelajari dan mencoba”..
    Kalau boleh tolong bisa kirim ke email saya rico9866@yahoo.com

  3. Artikel yg sangat menarik,..terima kasih buat informasi nya gan.
    kalo boleh tau,..ne aplikasi harus diakses online apa offlne?…map nya keren itu pakai apa yah?

  4. permisii, aplikasi menarik nihh, boleh minta source codenya guna keperluan pengembangan skripsi visit bogor saya ? email : ke atikazulfah@ymail.com . bila ada codingan yg saya gunakan akan saya tambahkan di dapus sayaa terima kasih sebelumnya🙂

  5. apakah saya boleh minta file .apk nya….karena aplikasi yang anda buat sangat bagus dan cocok untuk aplikasi travelling temen saya orang asing yang kebetulan sedang ada di bogor..
    Silahkan kirmkan link ny atau file melalui email saya….
    aminvincent@gmail.com
    terima kasih…..saya harap anda membalas pesan ini dengan cepat…

  6. gan kalo boleh saya tau program ini ada penggambaran petanya gak? kalo ada untuk mengimport peta ke mobile sistem androidnya pake apa?? google map kah atau pake yang lain…

  7. gan kalo boleh saya tau program ini ada penggambaran petanya gak? kalo ada untuk mengimport peta ke mobile sistem androidnya pake apa?? google map kah atau pake yang lain…??

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s