Pemrogaman Multimedia

Tugas Pemrograman Multimedia 
Penulis  : Ramdoni F. Akbar
NMP     :  50408686
4IA06

CITY MAPS Android

Android merupakan platform lengkap mulai dari sistem operasi, aplikasi, tool developing, market aplikasi, dukungan vendor industri mobile, bahkan dukungan dari komunitas open system. Tentu ini merupakan keunggulan yang tidak dimiliki oleh platform lain. Dengan melihat perkembangan pada saat ini, Android telah menjadi kekuatan yang luar biasa.

Penulis tertarik untuk mengembangkan aplikasi yang berbasis Android, dan penulis mengambil tema GIS (Geographic Information System) untuk platform Android yaitu berupa Aplikasi Peta sederhana.

Integrasi teknologi mobile, GIS, dan GPS, menungkinkan berkembangnya aplikasi mobile GIS yang interaktif. Dukungan prosesor yang semakin canggih dan kapasitas memory yang sangat besar, menjadikan telepon selular menjadi mobile computer yang secara real-time dapat dijadikan sebagai alat navigasi, pemantau kepadatan lalulintas dan bencana alam, sistem pelacakan kendaraan dan lain sebagainya.

Batasan masalah yang penulis ambil dalam penulisan ini yaitu membuat aplikasi
CITY MAPs untuk mobile device platform Android yang menyajikan pemetaan dari 5 kota diantaranya Jakarta, Depok, Tangerang, Bekasi dan Bogor.

Aplikasi yang akan penulis buat adalah aplikasi pemetaan sederhana yang diharapkan mampu menghadirkan akses jalan – jalan di 5 kota besar Jakarta, Depok, Tangerang, Bekasi dan Bogor sehingga pengguna dapat melihat jalan yang ingin dilaluinya ke tempat tujuan tanpa harus membawa setumpuk lembaran peta.

Penulis menggunakan metode studi pustaka. Langkah singkat yang digunakan penulis dalam membuat aplikasi pemetaan dilengkapi dengan buku dan tutorial dari internet. Tahapan dalam pembuatan aplikasi terdiri dari diagram alur dan algoritma menggunakan UML, rancangan interface, pembuatan kode program, kompilasi, dan  implementasi.

Penulis membuat aplikasi ini menggunakan perangkat keras Laptop dengan spesifikasi processor Intel® Core™ i3-2350 CPU @  2.3GHz, memory (RAM) 2.00GB. System type 64-bit operating system. HDD 320GB dengan OS Windows Vista Ultimate service pack 2 dan menggunakan ponsel Android Galaxy mini versi Froyo 2.2. Perangkat lunak yang digunakan untuk membuat aplikasi ini berupa Eclipse Galileo, Android SDK, ADT, dan JDK 1.6.     

Struktur navigasi

         Struktur navigasi berfungsi untuk menceritakan struktur atau alur cerita dari suatu program. Struktur navigasi yang digunakan untuk membuat aplikasi CITY Maps  ini yaitu struktur navigasi hirarki. Berikut gambar 1 dari struktur navigasinya :

Gambar 1. Struktur Navigasi

Pada layar tampilan utama, penekan tombol ‘MENU’ pada keyboard device akan terlihat tiga menu didalamnya yaitu ‘CITY’ untuk menentukan peta kota yang diinginkan, ‘ABOUT’ merupakan keterangan singkat tentang aplikasi ini, dan ‘EXIT’ pilihan untuk menutup aplikasi. Untuk melihat peta pilih menu ‘CITY’ yang kemudian akan terlihat daftar nama kota yang disediakan. Setelah memilih 1 dari 5 nama kota, aplikasi akan membuka tampilan peta kota tersebut dan dilayar ini juga terdapat 2 pilihan menu, yaitu ‘Maps Mode’  berfungsi untuk memilih mode peta yang disediakan dan layar peta akan diperbaharui sesuai modus peta yang dipilih dan ‘Back’ untuk kembali ke tampilan utama.

Activity Diagram

Gambar 2. Activity Diagram

Gambar 2. adalah diagram aktivitas atau Activity diagram yang menunjukan alur aktivitas yang dapat dilakukan oleh pengguna. Alur diagram diawali dengan Initial State yang mengilustrasikan sebagai layar utama aplikasi saat di jalankan dan kemudian memilih menu, pada menu tersebut memiliki 3 buah state yaitu CITY, ABOUT dan EXIT. Garis lurus tebal adalah Transition (Fork) yaitu dari 1 masukan menjadi beberapa control flow. Final State atau titik akhir di tunjukan bila pengguna memilih menu EXIT. 

Rancangan User Interface

Perancangan antarmuka aplikasi ini hanya terdapat di tampilan halaman awal karena setiap halaman lainnya berupa tampilan peta yang di unduh langsung dari penyedia layanan peta.  Penyedia layanan yang digunakan dalam aplikasi CITY MAPs ini adalah OpenStreetMap (OSM) dan CloudMade (CM).

a. Rancangan Layar Utama

Layar Utama adalah tampilan awal setelah aplikasi dijalankan. Pada tampilan ini terdapat beberapa navigasi untuk mempermudah menggunakan aplikasi ini dan juga terdapat text berjalan dibagian atas layar yang berfungsi sebagai petunjuk penggunaan tombol ‘MENU’ untuk membuka tampilan menu. Navigasi ini menggunakan tombol “MENU” yang terdapat pada keyboard device. Setelah menu ini aktif, akan terlihat tiga tombol aktif yaitu ‘city’, ‘about’, dan ‘exit’. Seperti yang telah dijelaskan, menu – menu tersebut memiliki fungsi yang berbeda. Menu ‘city’ untuk memilih kota, ‘about’ untuk melihat keterangan singkat mengenai aplikasi ini, dan ‘exit’ untuk menutup aplikasi atau keluar dari aplikasi. Rancangan tampilan awal ini dapat dilihat pada gambar 3.

Gambar 3. Rancangan Tampilan Layar Utama

b. Rancangan Layar Menu CITY

          Layar  ini merupakan tampilan untuk memilih kota yang diinginkan, sesuai dengan nama kota yang telah disediakan.

Gambar 4.  Rancangan Tampilan Layar Pilih Kota

c. Rancangan Layar Peta

Gambar 5 Rancangan Tampilan Layar Peta

           

Tampilan pada gambar 5 merupakan tampilan layar peta sesuai dengan kota yang dipilih oleh pengguna pada halaman choise city. Mode peta yang digunakan adalah mode default  yaitu CloudMade. Menu Maps Mode berfungsi sebagai menu untuk merubah tampilan modus peta yang sedang aktif dan menu Back berfungsi untuk mengembalikan layar ke tampilan utama.

d. Rancangan Layar Menu Maps Mode

          Layar ini merupakan tampilan daftar mode peta yang tersedia untuk melihat peta. Menu ini aktif setelah pengguna masuk di dalam layar tampilan peta dan kemudian memilih menu ‘Maps Mode’.

Gambar 6. Rancangan Tampilan Layar Menu Maps Mode

Setelah pengguna memilih modus peta yang ada, aplikasi akan memperbaharui layar tampilan peta sesuai modus peta yang dipilih oleh pengguna.




Pembuatan Program 

Penulis membuat aplikasi CITY Maps menggunakan Eclipse Galileo dan Android SDK for Windows. Tools lainnya yang harus sudah ada sebelumnya adalah JDK 1.6 dan JRE 6, Karena android menggunakan bahasa pemrograman java. Sebagai langkah awal, jalankan eclipse dan buat project baru (Android Project).

Item yang harus dilengkapi saat membuat sebuah proyek baru, yaitu mengisi kolom nama proyek. Penamaan ini menjadi nama aplikasi yang kita buat. Item Contents merupakan pilihan sumber proyek yang akan dibuat, misalnya

apabila memilih Create new project in workspace maka kita membuat sebuah proyek baru dan menaruh file proyek yang akan kita buat dalam workspace eclipse. Sedangkan apabila kita memilih Create project from existing source yaitu mengambil file proyek yang sudah ada dan dimasukan ke dalam workspace. Untuk mengambil file proyek yang sudah ada, bila kita memilih Create project from existing source maka item use default location dan tombol browse akan aktif untuk menelusuri lokasi file proyek.

            Item build target berfungsi untuk menentukan versi aplikasi yang akan dibuat terhadap jenis vendor mobile device android atau untuk menyesuaikan/menentukan aplikasi dapat berjalan pada versi system operasi android yang mau dipakai. Pada kolom properties terdapat field Application name dan Create Activity diisi sesuai dengan nama aplikasi yang telah kita isi sebelumnya. Kemudian package name berfungsi sebagai pemberian nama hak cipta dalam aplikasi. Dan item Min SDK Version berfungsi untuk menentukan minimum OS yang dapat menjalankan aplikasi yang akan dibuat. Setelah itu pilih tombol finish.

            Setelah proyek baru terbuat dan berada pada jendela package explorer, selanjutnya memulai untuk pengkodean program. Class java befungsi untuk membangun algoritma pemrograman pada aplikasi dan class xml berfungsi untuk membangun tampilan antarmuka (interface).

a. Pembuatan Layar Utama

Dalam aplikasi ini layar utama akan terlihat saat pertama kali aplikasi dijalankan. Pembuatan layar utama dilakukan pertama kali dengan menggunakan eclipse galileo. Untuk memulai membuat layout pada layar utama,  masuk ke dalam folder  res pada proyek yang telah dibuat. Dalam folder res sudah terdapat file main.xml yang masih dalam kondisi kosong. Setelah membuka main.xml akan terlihat layar hitam. Langkah pertama yang dikerjakan menambahkan background, dalam menambahkan background perlu dilakukan penyisipan gambar dan membuat folder baru dengan nama drawable pada file proyek yang terdapat pada workspace. Seperti gambar  7.

Gambar 7. Penyisipan Gambar

Setelah penyisipan gambar selesai, kembali ke main.xml dan kemudian klik kanan pada layar hitam pilih properties lalu background, akan terlihat jendela untuk memilih file gambar yang telah disisipkan. Klik OK maka layar hitam telah berubah sesuai dengan gambar yang dipilih seperti yang tampak pada gambar 8

            Selanjutnya untuk memodifikasi lebih lanjut layout layar utama yaitu dengan menambahkan kode program pada main.xml, dengan mengklik main.xml yang berada disamping graphic layout maka akan terbuka jendela untuk menuliskan kode program. Diantaranya, penulis memodifikasi teks singkat berjalan yang ada pada layout main.xml dengan menggunakan kode program android:marqueeRepeatLimit="marquee_forever" android:singleLine="true"  android:ellipsize="marquee".  Isi dari main.xml dapat dilihat pada gambar 9.

Gambar 8. Layout Main.xml

Gambar 9. Kode Program Main.xml

Untuk mengatur posisi button dapat dilakukan setelah meletakannya dengan cara mengubahnya menjadi AbsoluteLayout langsung pada main.xml.

android:background="@drawable/backgr">

merupakan perintah untuk memuat gambar sebagai background yang berada pada folder drawable dan nama file backgr. Kemudian, widget textview yang memiliki id textLaunch dibuat tidak terlihat (invisible), isi teks ini yang dipakai untuk dibuat berjalan. Pengkodean teks berjalan ini (marquee) ditulis pada start.java sebagai berikut

Gambar 10. Kode Program Marquee pada Start.java

Aplikasi CITY MAPs ini tidak terlalu banyak menggunakan layout. Jumlah layout yang ada pada proyek ini berjumlah 3 buah kelas XML, yaitu main.xml, aboutpunya.xml dan helppunya.xml karena layar lainnya yang memuat peta mengambil langsung dari penyedia layanan peta di internet. 

Implementasi Aplikasi

Setelah aplikasi CITY MAPs di install, jalankan aplikasi ini dengan mengklik icon seperti gambar 11. 

Gambar 11. Icon Aplikasi CITY Maps

Dengan mengklik icon tersebut, maka layar tampilan awal aplikasi CITY MAPs akan terlihat. Untuk memulai menggunakan aplikasi ini dengan melakukan penekanan tombol ‘MENU’ yang ada pada ponsel maka akan terlihat 3 menu yaitu menu city, about dan exit. Gambar 12.

Gambar 12. Tampilan Utama Aplikasi

Gambar 13. Menu pada Layar Utama

Apabila memilih menu ‘city’ maka akan terlihat daftar nama kota yang tersedia pada aplikasi ini dengan mengklik salah satu nama dari daftar 5 kota tersebut maka aplikasi akan langsung membuka peta kota yang telah dipilih.

Gambar 14. Tampilan Daftar Nama Kota

Apabila pengguna memilih menu about, maka yang akan terlihat adalah daftar menu about application dan Navigation help. Sedangkan menu exit bila dipilih maka aplikasi akan tertutup (closing application).

Gambar 15. Tampilan Menu About

Gambar 16. Tampilan Peta Kota Jakarta