TUGAS SOFTSKILL: 2015

3. PERANCANGAN DAN IMPLEMENTASI

3.1 Gambaran Umum Aplikasi

Aplikasi ini dibuat untuk membanu pengguna menemukan lokasi skatepark terbaik di Indonesia. Aplikasi ini terdiri beberapa menu, yaitu adalah menu Lokasi Skatepark, Toko Skateboard, Mari Bermain, dan Tentang. Dalam menu Lokasi Skatepark berisi 10 pilihan skatepark terbaik di Indonesia, dan didalamnya terdapat informasi serta lokasi yang dilengkapi dengan GPS. Pada menu Toko Skateboard terdiri dari 8 pilihan toko skateboard yang dapat dipilih salah satunya. Didalam menu Mari Bermain terdapat 4 pilihan mengenai konten tambahan yaitu, Perlengkapan dasar, Teknik Dasar, Komunitas, dan Event. Dalam submenu Teknik Dasar berisi 7 pilihan yang berisi informasi teknik-teknik dasar dalam bermain skateboard, sedangkan didalam submenu Komunitas terdapat 4 pilihan yang berisi informasi komunitas skateboard. Menu Tentang berisikan informasi pembuat aplikasi. Terakhir adalah menu Keluar yang dapat digunakan untuk keluar dari aplikasi.

Langkah awal pembuatan aplikasi ini adalah membuat skema penggambaran urutan pembuatan aplikasi. Pembuatan aplikasi ini menggunakan Java SE sebagai kompilasi dan compatible aplikasi android dan SDK (System Development Kit) sebagai alat bantu atau penunjang sistem, gambar 3.1 berikut ini adalah gambar tahapan perancangan program :

Gambar 3.1 Tahapan perencanaan program

Tahapan untuk melakukan perancangan pembuatan aplikasi di deskripsikan sebagai berikut :

1. Pengumpulan data dan perencanaan

Tahapan pertama yaitu mengumpulkan data atau informasi yang diperlukan dan berkaitan dengan materi yang dibahas, yaitu :

ü Bahasa Pemrograman Java

ü Eclipse Luna

ü Sistem Operasi Android

ü 10 Lokasi Skatepark Terbaik di Indonesia

ü Informasi dan Lokasi Skateshop di Indonesia

ü Dan Hal-hal lain yang berhubungan dengan skateboard

2. Perancangan

Tahapan ini meliputi pembuatan desaign struktur navigasi dari aplikasi yang akan dibuat, sebagai bahan acuan membuat sebuah program aplikasi yang mudah untuk dioperasikan oleh pengguna.

3. Implementasi

Tahapan implementasi ini dilakukan pembuatan aplikasi secara keseluruhan, meliputi proses pembuatan aplikasi secara keseluruhan dan bersifat global, meliputi proses pembuatan kode program / coding pada Eclipse Luna.

4. Pengujian

Tahapan terakhir yaitu melakukan sebuah ngujian pengujian, yang pertama harus dilakukan proses uji coba aplikasi pada emulator android, hal ini dilakukan untuk melihat proses aplikasi apakah sesuai dengan sebagaimana fungsinya, tahapan yang kedua lakukan uji coba smartphone yang berbasis android untuk melihat kebenaran pada emulator tersebut dan sesuai dengan sebagaimana fungsinya. Karna pada saat pengujian ini kita dapat menganalisa kesalahan-kesalahan yang terjadi pada program atau aplikasi untuk mengubah sesuai sebagaimana dengan mestinya dan fungsi – fungsinya.

3.2 Struktur Navigasi

Struktur navigasi ini merupakan langkah awal dari proses pembuatan aplikasi. Struktur navigasi yang digunakan dalam penulisan ini adalah struktur navigasi hirarki karena tampilan pada menu utama disebut master page (halaman utama satu), halaman tersebut mempunyai halaman percabangan yang disebut slave page (halaman pendukung). Dalam struktur navigasi dijelaskan gambaran umum dari aplikasi Informasi Lokasi Skatepark Terbaik Di Indonesia seperti Gambar 3.2.

Gambar 3.2 Struktur Navigasi

3.3 Perancangan Proses

Pada aplikasi ini, terdapat 3 diagram perancangan proses yaitu Use Case Diagram, Activity diagram dan Sequence Diagram.

3.3.1 Use Case Diagram

Diagram use case model berfungsi untuk mendeskripsikan interaksi antara user dan sistem. Diagram Use Case mempunyai 2 komponen, yaitu Use Case dan Actor.

Gambar 3.3 Use Case Diagram

3.3.2 Activity Diagram

Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram mempunyai 14 komponen, yaitu ActionState, SubactivityState, InitialState, Synchronization, Decision, Flow Final, Object Flow, Signal Accept State, Signal Send State, Transition, SelfTransition, Swimlane (Vertical) dan Swimlane (Horizontal).

3.3.2.1 Activity Diagram Pada Menu Lokasi Skatepark

Activity diagram pada menu Lokasi Skatepark menjelaskan alur pada menu Lokasi Skatepark dan dapat dilihat pada gambar 3.4

Gambar 3.4 Activity Diagram Menu Lokasi Skatepark

3.3.2.2 Activity Diagram Pada Menu Toko Skateboard

Activity diagram pada menu Toko Skateboard menjelaskan alur pada menu Toko Skateboard dan dapat dilihat pada gambar 3.5

Gambar 3.5 Activity Diagram Menu Toko Skateboard

3.3.2.3 Activity Diagram Pada Menu Mari Bermain

Activity diagram pada menu Mari Bermain menjelaskan alur pada menu Mari Bermain dan dapat dilihat pada gambar 3.6.

Gambar 3.6 Activity Diagram Menu Mari Bermain

3.3.2.4 Activity Diagram Pada Menu Tentang

Activity diagram pada menu Tentang menjelaskan alur pada menu Tentang dan dapat dilihat pada gambar 3.7.

Gambar 3.7 Activity Diagram Menu Tentang

3.3.3 Sequence Diagram

Diagram Sequence dapat dipergunakan pada tahapan analisis maupun perancangan(desaign). Diagram Sequence mempunyai 4 komponen, yaitu actor, System Box, Timelines dan Interactions. Pada aplikasi ini terdapat beberapa diagram sequence, seperti diagram sequence pada menu Lokasi Skatepark, Base Skatepark, Toko Skateboard, Endonesie Skateshop, Mari Bermain, Perlengkapan Dasar, Teknik Dasar, Ollie, Komunitas, Komunitas Taman Honda Tebet, Event, dan Tentang.

3.3.3.1 Sequence Diagram Pada Menu Lokasi Skatepark

Sequence diagram pada menu Lokasi Skatepark menampilkan menu pilihan 10 lokasi skatepark seperti pada gambar 3.8.

Gambar 3.8 Sequence Diagram Menu Lokasi Skatepark

3.3.3.2 Sequence Diagram Pada Halaman Base Skatepark

Sequence diagram pada halaman Base Skatepark menampilkan informasi, alamat, serta peta seperti pada gambar 3.9.

Gambar 3.9 Sequence Diagram Halaman Base Skatepark

3.3.3.3 Sequence Diagram Pada Menu Toko Skateboard

Sequence diagram pada menu Toko Skateboard menampilkan menu pilihan 8 lokasi toko skateboard seperti pada gambar 3.10

Gambar 3.10 Sequence Diagram Menu Toko Skateboard

. 3.3.3.4 Sequence Diagram Pada Halaman Endonesie Skateshop

Sequence diagram pada halaman Endonesie Skateshop menampilkan informasi dan peta seperti pada gambar 3.11.

Gambar 3.11 Sequence Diagram Halaman Endonesie Skateshop

. 3.3.3.4 Sequence Diagram Pada Menu Mari Bermain

Sequence diagram pada halaman Menu Bermain menampilkan menu pilihan 4 button konten tambahan seperti pada gambar 3.12.

Gambar 3.12 Sequence Diagram Menu Mari Bermain

3.3.3.5 Sequence Diagram Pada Menu Perlengkapan Dasar

Sequence diagram pada halaman Perlengkapan Dasar menampilkan halaman berisi informasi Perlengkapan Dasar seperti pada gambar 3.13.

Gambar 3.13 Sequence Diagram Menu Perlengkapan Dasar

3.3.3.6 Sequence Diagram Pada Menu Teknik Dasar

Sequence diagram pada Menu Teknik Dasar menampilkan 7 pilihan menu Teknik Dasar seperti pada gambar 3.14.

. Gambar 3.14 Sequence Diagram Menu Teknik Dasar

3.3.3.6 Sequence Diagram Pada Halaman Ollie

Sequence diagram pada halaman Ollie Menampilkan halaman berisi informasi seperti pada gambar 3.15.

Gambar 3.15 Sequence Diagram Menu Olie

3.3.3.7 Sequence Diagram Pada Menu Komunitas

Sequence diagram pada Menu Komunitas menampilkan 4 pilihan menu Komunitas seperti pada gambar 3.16.

Gambar 3.16 Sequence Diagram Menu Komunitas

3.3.3.8 Sequence Diagram Pada Halaman Komunitas Taman Honda Tebet

Sequence diagram pada halaman Komunitas Taman Honda Tebet Menampilkan halaman berisi informasi seperti pada gambar 3.17.

Gambar 3.17 Sequence Diagram Halaman Komunitas Honda Tebet

3.3.3.9 Sequence Diagram Pada Menu Event

Sequence diagram pada Menu Event menampilkan halaman berisi informasi seperti pada gambar 3.18.

Gambar 3.18 Sequence Diagram Menu Event

3.3.3.10 Sequence Diagram Pada Menu Tentang

Sequence diagram pada Menu Tentang menampilkan halaman berisi informasi pembuat aplikasi seperti pada gambar 3.19.

Gambar 3.19 Sequence Diagram Menu Tentang

3.4 Rancangan Tampilan Aplikasi

Rancangan tampilan aplikasi merupakan tahapan yang harus dikerjakan sebelum membuat suatu aplikasi. Rancangan tampilan ini menggambarkan keterkaitan antara setiap halaman dan juga menjelaskan arah komunikasinya. Rancangan tampilan aplikasi bertujuan agar program atau aplikasi yang dihasilkan terlihat lebih menarik, mudah dimengerti dan dioperasikan. Pada rancangan awal aplikasi ini terdiri dari halaman pembuka (splash screen), halaman menu utama halaman lokasi skatepark, halaman toko skateboard, halaman mari bermain, halaman informasi lokasi skatepark, halaman informasi toko skateboard, serta halaman tentang.

3.4.1 Rancangan Halaman Pembuka

Halaman splash screen atau yang biasa disebut dengan halaman pembuka adalah halaman yang tampil sesaat sebelum halaman menu utama ditampilkan. Di halaman ini menampilkan gambar dan loading. Apabila loading telah selasai, maka akan tampil halaman menu utama dari aplikasi ini. Gambar 3.20 berikut ini adalah rancangan halaman splash screen.

Gambar 3.20 Rancangan Tampilan Splash Screen

Keterangan gambar :

- Background = Gambar layar belakang

- Spinner = Tampilan loading

3.4.2 Rancangan Halaman Menu Utama

Halaman menu utama adalah halaman pertama dari aplikasi ini setelah menampilkan halaman pembuka atau splash screen. Pada rancangan halaman menu utama ini berisikan lima button pilihan yang dapat dipilih, jika user memilih lokasi skatepark maka akan tampil sepuluh button lokasi skatepark. Jika user memilih toko skateboard maka akan tampil 8 button toko skateboard, jika user meilih button mari bermain maka akan tampil 4 button konten tambahan, jika user memilih button tentang maka akan tampil informasi pembuat aplikasi, dan jika user memilih keluar maka akan tampil message box yang member persetujuan apakah user akan keluar dari aplikasi ini atau tidak. Gambar 3.21 berikut ini adalah rancangan halaman menu utama.

Gambar 3.21 Rancangan Halaman Menu Utama

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Button 1 = Lokasi skatepark

- Text view 1 = Berisi tulisan “Lokasi Skatepark”

- Button 2 = Toko Skateboard

- Text view 2 = Berisi tulisan “Toko Skateboard”

- Button 3 = Mari bermain

- Text view 3 = Berisi tulisan “Mari Bermain”

- Button 4 = Tentang

- Text view 4 = Berisi tulisan “Tentang”

- Button 5 = Keluar

- Text view 5 = Berisi tulisan “Keluar”

- Background = Gambar layar belakang

3.4.3 Rancangan Halaman Lokasi Skatepark

Jika user memilih menu Lokasi Skatepark yang terdapat di halaman utama, maka akan menampilkan halaman seperti gambar 3.22, dimana didalam halaman tersebut terdapat 10 pilihan menu lokasi skatepark terbaik di Indonesia.

Gambar 3.22 Rancangan Lokasi Skatepark

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Button 1 = Base Skatepark

- Button 2 = Bloodbath Skatepark

- Button 3 = Buqiet Skatepark

- Button 4 = Donkey Skatepark

- Button 5 = Greenpark Skatepark

- Button 6 = Ketabang Skatepark

- Button 7 = Predator Skatepark

- Button 8 = Puink Skatepark

- Button 9 = SDC Skatepark

- Button 10 = Wonder Skatepark

- Background = Gambar layar belakang

3.4.4 Rancangan Halaman Toko Skateboard

Jika user memilih menu Toko Skateboard yang terdapat di halaman utama, maka akan menampilkan halaman seperti pada gambar 3.23, dimana didalam menu toko skateboard tersebut terdapat pilihan 8 nama Toko skateboard yang terletak di Indonesia. Gambar 3.23 berikut ini adalah rancangan halaman Toko Skateboard.

Gambar 3.23 Rancangan Halaman Toko Skateboard

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Button1 = Endonesie Skateshop

- Button2 = Heaven Skateshop

- Button3 = Hobbies Skateshop

- Button4 = Hybrid Skateshop

- Button5 = Linecoltd Skateshop

- Button6 = Owlvetica Skateshop

- Button7 = Wonder Skateshop

- Button8 = Zie Skateshop

- Background = Gambar layar belakang

3.4.5 Rancangan Halaman Mari Bermain

Jika user memilih menu Mari Bermain yang terdapat di halaman Utama, maka akan menampilkan halaman seperti gambar 3.24, dimana didalam halaman Mari Bermain tersebut terdapat empat pilihan menu konten tambahan. Gambar 3.24 berikut ini adalah rancangan halaman Mari Bermain.

Gambar 3.24 Rancangan Halaman Mari Bermain

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Button1 = Perlengkapan dasar

- Button 2 = Teknik dasar

- Button 3 = Komunitas

- Button 4 = Event

- Background = Gambar layar belakang

3.4.6 Rancangan Halaman Tentang

Jika user memilih menu Tentang pada halaman Mari Bermain maka akan tampil informasi singkat pembuat aplikasi. Gambar 3.25 adalah rancangan halaman Tentang.

Gambar 3.25 Rancangan Halaman Tentang

Keterangan gambar :

- Title = Judul atau class java yang sedang aktif

- Textview1 = Judul Tulisan “Tentang Pembuat Aplikas”

- Textview2 = Berisi informasi singkat pembuat aplikasi

- Textview3 = Berisi Tulisan

andrewsantiagoo@gmail.com

- Textview4 = Berisi Tulisan

“andrewsantiagoo.blogspot.com”.

- Textview5 = Berisi Tulisan “@endrusantiago”

- Imageview 1 = Berisi foto Pembuat Aplikasi

- Imageview 2 = Berisi gambar icon Gmail

- Imageview 3 = Berisi gambar icon Blogspot

- Imageview 4 = Berisi gambar icon Twitter

- Background = Gambar layar belakang

3.4.7 Rancangan Tampilan Halaman Submenu Pada Lokasi Skatepark

Apabila user memilih button Lokasi skatepark dan memilih salah satu button skatepark yang terdapat disana maka akan tampil informasi singkat seputar skatepark, alamat serta button untuk mencari lokasi yang tersambung dengan gps. Rancangan tampilannya seperti pada gambar 3.26.

Gambar 3.26 Rancangan Tampilan Halaman salah satu lokasi Skatepark

Keterangan gambar :

- Title = Judul atau class yang sedang aktif.

- Image view 1 = Berisi gambar Skatepark.

- Text view 1 = Berisi Judul Bertuliskan “Info Lokasi”.

- Text view 2 = Berisi informasi skatepark.

- Text view 3 = Berisi judul kedua bertuliskan “Alamat”.

- Text view 4 = Berisi alamat skatepark.

- Button 1 = Berisi button bergambar icon lokasi yang tersambung dengan gps.

- Text view 5 = Berisi tulisan “cari lokasi”.

- Background = Gambar layar belakang

3.4.8 Rancangan Tampilan Halaman Submenu Pada Toko Skateboard

Apabila user memilih menu Toko Skateboard dan memilih salah satu pilihan toko skateboard yang terdapat disana maka akan tampil alamat serta button untuk mencari lokasi yang tersambung dengan gps. Rancangan tampilannya seperti pada gambar 3.27.

Gambar 3.27 Rancangan Tampilan Halaman salah satu toko Skateboard

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Text view 1 = Berisi nama toko skateboard.

- Image view 1 = Berisi foto toko skateboard

- Text view 2 = Berisi alamat toko skateboard

- Button 1 = Berisi gambar icon lokasi yang tersambung dengan gps

- Textview3 = Berisi tulisan “cari lokasi”.

- Background = Gambar layar belakang

3.4.9 Rancangan Tampilan Halaman Perlengkapan Dasar

Apabila user memilih menu Mari Bermain maka akan tampil halaman yang berisi 4 pilihan tentang konten tambahan, salah satunya adalah perlengkapan dasar yang berisi informasi-informasi perlengkapan apa saja yang harus dipakai saat bermain skateboard, rancangan tampilan halaman perlengkapan dasar seperti pada gambar 3.28.

Gambar 3.28 Rancangan Tampilan Halaman Perlengkapan Dasar

Keterangan gambar :

- Title = Judul atau class yang sedang aktif.

- Image view 1 = Berisi gambar perlengkapan dasar.

- Text view 1 = Berisi penjelasan secara umum

- Text view 2 = Berisi tulisan “helm”.

- Image view 2 = Berisi gambar helm.

- Textview3 = Berisi penjelasan kegunaan helm.

- Text view 4 = Berisi tulisan “Pelindung Tangan”.

- Image view 3 = Berisi gambar pelindung tangan.

- Text view 5 = Berisi penjelasan kegunaan pelindung tangan

- Text view 6 = Berisi tulisan “pelindung sikut”.

- Image view 4 = Berisi gambar pelindung sikut”.

- Text view 7 = Berisi penjelasan kegunaan pelindung sikut.

- Text view 8 = Berisi tulisan “pelindung lutut”.

- Image view 5 = Berisi gambar pelindung lutut.

- Text view 9 = Berisi penjelasan kegunaan pelindung lutut.

- Text view 10 = Berisi pesan dalam bermain skateboard

- Background = Gamabar laya belakang

3.4.10 Rancangan Tampilan Halaman Teknik Dasar

Apabila user memilih menu Mari Bermain maka akan tampil halaman yang berisi 4 pilihan tentang konten tambahan salah satunya adalah Teknik Dasar yang berisi 7 teknik-teknik dasar dalam bermain skateboard rancangan tampilan halaman perlengkapan dasar seperti pada gambar 3.29.

Gambar 3.29 Rancangan Tampilan Halaman Teknik Dasar

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Button 1 = Ollie

- Button 2 = Kickflip

- Button 3 = Indy

- Button 4 = Impossible

- Button 5 = Grind

- Button 6 = Invert

- Button 7 = Manual

- Background = Gambar layar belakang

3.4.11 Rancangan Tampilan Halaman Submenu Pada Teknik Dasar

Apabila user memilih menu Teknik Dasar dan memilih salah satu teknik dasar yang terdapat disana maka akan tampil informasi singkat seputar teknik dasar dalam bermain skateboard. Rancangan tampilannya seperti pada gambar 3.30.

Gambar 3.30 Rancangan Tampilan Halaman Submenu Teknik Dasar

Keterangan gambar :

- Title = Judul atau class yang sedang aktif.

- Text view 1 = Judul halaman teknik dasar.

- Image view 1 = Berisi gambar teknik dasar yang dipilih.

- Text view 2 = Berisi Informasi tentang teknik dasar yang dipilih.

- Background = Gambar layar belakang

3.4.12 Rancangan Tampilan Halaman Komunitas

Apabila user memilih menu mari bermain maka akan tampil halaman yang berisi 4 pilihan konten tambahan salah satunya adalah Komunitas yang berisi 4 pilihan komunitas skateboard. rancangan tampilan halaman perlengkapan dasar seperti pada gambar 3.31.

Gambar 3.31 Rancangan Tampilan Halaman Komunitas

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Button 1 = Komunitas Taman Honda Tebet

- Button 2 = Komunitas Skateboarding UBL

- Button 3 = Surabaya Skateboard

- Button 4 = Malang Skateboard Scene

- Background = Gambar layar belakang pada halaman komunitas

3.4.13 Rancangan Tampilan Halaman Submenu Pada Halaman Komunitas

Apabila user memilih button Komunitas dan memilih salah satu button Komunitas yang terdapat disana maka akan tampil informasi seputar komunitas skateboard. Rancangan tampilannya seperti pada gambar 3.32.

Gambar 3.32 Rancangan Tampilan Halaman Komunitas

Keterangan gambar :

- Tittle = Judul atau class yang sedang aktif

- Text view 1 = Judul halaman berisi nama komunitas yang dipilih

- Imag eview 1 = Berisi foto komunitas yang dipilih

- Textview2 = Berisi informasi komunitas yang dipilih

- Image view 2-5 = Berisi gambafoto-foto komu nitas yang dipilih

- Text view 3 = Berisi tulisan “Para Skateboarders sedang menunjukan aksinya”.

- Background = Gambar layar belakang

3.4.14 Rancangan Tampilan Halaman Event

Apabila user memilih Menu Mari Bermain maka akan tampil halaman yang berisi 4 pilihan konten tambahan salah satunya adalah event yang berisi informasi kalender event-event nasional. Rancangan tampilan halaman perlengkapan dasar seperti pada gambar 3.33.

Gambar 3.33 Rancangan Tampilan Halaman event

Keterangan gambar :

- Title = Judul atau class yang sedang aktif

- Text view 1 = Berisi penjelasan halaman event

- Imag eview 1 = Berisi gambar kalender event nasional

- Background = Gambar layar belakang.

3.5 Langkah Pembuatan Program

Pada tahap pembuatan program , diperlukan perangkat lunak pendukung untuk membuat aplikasi layanan berbasis lokasi, diantaranya yaitu Java Development kit, Eclipse Integrated Development Environment, Android Software Development Kit, dan Android Development Tools.

3.6 Instalasi Perangkat Lunak

Untuk mendukung pembuatan aplikasi sederhana ini dibutuhkan beberapa software yang perlu di install kedalam sistem, yaitu antara lain:

· Android SDK

· Eclipse Luna

· Java SE 1.6

Setelah beberapa software tersebut diunduh, selanjutnya install software tersebut dengan langkah-langkah dibawah ini:

1. Instalasi Java SE 1.6

2. Extract Eclipse yang sudah diunduh

3. Instalasi Android SDK dengan cara hanya mengekstrak file Android SDK ke direktori mana saja.

Setelah selesai, kemudian instalasi ADT atau plugin Eclipse dengan cara buka Eclipse à Menu Help à Software Update.

Gambar 3.34 Add ADT Plugins

5. Setelah itu menghubungkan Android SDK dengan Eclipse dengan cara buka Eclipse à Menu Windows à Preference à Pilih Android à Browse Android SDK à kemudian Apply à sehingga muncul banyak platform yang telah diunduh paket-paket sebelumnya.

Gambar 3.35 Platform Android

6. Selanjutnya membuat AVD dengan cara buka Eclipse à Menu Window à AVD Manager à klik New untuk membuat AVD.

Gambar 3.36 AVD Manager

7. Setelah semua aplikasi diinstall, maka langsung ke pembuatan program. Buka IDE Eclipse kemudian aka nada tampilan pilihan workspace yang akan digunakan.

3.6.1 Langkah Pembuatan Project Pada Eclipse

Jalankan IDE Eclipse kemudian pilih Menu File à New à Android Application Project. Setelah itu akan muncul jendela New Android Application untuk membuat nama project, kemudian isi sebagai berikut:

· Application Name (untuk member nama aplikasi)

· Project Name (untuk member nama project)

· Package Name (untuk memberi nama Package)

· Minimum Required SDK (target platform minimal yang akan disupport aplikasi)

· Target SDK (untuk memilih SDK yang menjadi target jalannya program)

· Compile With (untuk mengcompile dengan SDK yang dibutuhkan)

· Theme (untuk menambahkan tema)

Gambar 3.37 Pembuatan Project

· Configure Project (untuk pengaturan projek)

Gambar 3.38 Configure Project

· Configure Launcher icon(untuk mengaturan icon pada aplikasi)

Gambar 3.39 Configure Launcher Icon

Setelah pengisian pada jendela New Android Application selesaikemudian pilih finish. Kemudian pada Project Explorerterdapat beberapa elemen-elemen yang ada pada program. Pada susunannya file java berada pada folder src, file generate java file (R.java) berada pada folder gen, file xml berada pada folder res(layout.values), dan file android manifest.xml serta default properties.

$Description: E:\asal.png$

Gambar 3.40 Elemen-elemen Project

Pada file src à com.example.asalà MainActivity,java adalah file java atau activity yang sebelumnya telah dibuat, Activity merupakan basic class untuk sebuah user interface. Pada activity terdapat sebuah method onCreate yang berfungsi memanggil setContentView. Kemudian setContentView memanggil sebuah file yaitu activity_main.xml (R.layout.main).

$Description: E:\main.png$

Gambar 3.41 Tampilan Program.java

Main.xml merupakan user interface pada aplikasi Android Pada source main.xml bahwa untuk menampilkan text adalah dengan kode android:text=”@string/hello” kode tersebut menjelaskan bahwa android:text berasal dari string.xml pada direktori res/values, melalui pointer yang berada pada file R.java

$Description: E:\mainxml.png$

Gambar 3.42 Tampilan activity_main.xml

File R.java sebuah class yang digenerate oleh sistem secara otomatis, yang berisikan text dan elemen user interface dan tidak diperkenankan diubah secara langsung.

$Description: E:\r.png$

Gambar 3.43 Tampilan R.java

Kemudian string yang ditunjukan adalah string yang berada dalam file strings.xml, string dalam file ini nantinya akan ditampilkan ke user interface.

$Description: E:\string.png$

Gambar 3.44 Tampilan strings.xml

Setelah itu menjalankan program dengan cara klik kanan pada project à Run As à Android application, atau dengan cara singkat yaitu dengan klik tombol Run

atau bisa dengan menekan CTRL + F11.

Pada saat menjalankan program membutuhkan waktu beberapa menit untuk proses loading dissimulator. Kemudian akan muncul output program.

Gambar 3.45 Tampilan output

3.6.2 Pembuatan Tampilan Halaman Pembuka

Membuat halaman pembuka pada res è pilih file utuk desain halaman pembuka dan file ini harus berekstensi .xml dan isi pada halaman pembuka yaitu text, image view, dan progress bar dan untuk codingan pada java dapat dilihat pada listing program dan hasilnya seperti pada gambar 3.23

Gambar 3.46 Tampilan Halaman Pembuka

3.6.3 Pembuatan Tampilan Menu Utama

Halaman ini dibuat pada res è pilih new file yang berekstensi .xml pada halaman ini berisikan button yang diberi background gambar untuk lebih jelas dalam hal coding lihat pada listing program dan hasil dapat dilihat pada gambar 3.47

Gambar 3.47 Tampilan Halaman Menu Utama

3.6.4 Pembuatan Tampilan Base Skatepark

Halaman ini dibuat pada res è pilih new file yang berekstensi .xml desain pada halaman ini berisikan button yang diberi background gambar untuk lebih jelas lihat pada listing program dan hasil rancangan dapat dilihat pada gambar 3.48.

Gambar 3.48 Tampilan Base Skatepark

3.6.5 Tampilan Menu Toko Skateboard

Halaman ini dibuat pada res è layout dan pilih new file yang berekstensi .xml dan halaman ini berisikan button yang diberi background gambar dan halaman ini terdapat horizontal scroll view untuk menggeser layar ke kanan dan ke kiri untuk codingan dapat dilihat pada listing program dan hasil rancangan dapat dilihat pada gambar 3.49

Gambar 3.26 Tampilan Menu Bekasi Utara

3.6.6 Tampilan Menu Bekasi Selatan

$Description: D:\#### PENULISAN ILMIAH ####\INGRID CATHARINA\EMULATOR\6.png$

Gambar 3.27 Tampilan Menu Bekasi Selatan

3.6.7 Pembuatan Tampilan Informasi SMA

Halaman ini dibuat pada res è layout dan pilih new file yang berekstensi .xml dan halaman ini berisikan text view dan text image yang diberi background gambar dan halaman ini berisikan informasi-informasi tentang SMA.

$Description: D:\#### PENULISAN ILMIAH ####\INGRID CATHARINA\EMULATOR\5.png$

Gambar 3.28 Tampilan Informasi SMA

3.5.8 Pembuatan Tampilan Menu Bantuan

Halaman ini dibuat pada res è layout dan pilih new file yang berekstensi .xml dan halaman ini berisikan button yang diberi background gambar dan beberapa textview untuk codingan lihat listing program dan hasil rancangan lihat pada gambar 3.29

$Description: D:\#### PENULISAN ILMIAH ####\INGRID CATHARINA\EMULATOR\8.png$

Gambar 3.29 Tampilan Menu Bantuan

3.5.9 Pembuatan Tampilan Menu Tentang

Halaman ini dibuat pada res è layout dan pilih new file yang berekstensi .xml dan halaman ini berisikan button yang diberi background gambar, beberapa image view dan beberapa text view untuk condingan dapat dilihat pasa listing program dan hasil rancangan pada gambar 3.30

$Description: D:\#### PENULISAN ILMIAH ####\INGRID CATHARINA\EMULATOR\9.png$

Gambar 3.30 Tampilan Menu Tentang

3.6 Uji Coba Aplikasi Pada Simulator Android Virtual Device

Untuk mencoba aplikasi apakah bisa digunakan di telepon genggam atau tidak harus diuji coba dahulu pada simulator android virtual device. Android virtual device adalah sebuah simulator untuk menjalankan program aplikasi android yang dibuat oleh programer atau development android. Software ini mirip sekali dengan telepon genggan berbasis android mulai dari tampilan ataupun cara pemakaiannya. Android Virtual Device juga sebagai alat ukur apakah program yang dibuat layak digunakan untuk telepon genggam yang berbasis android sesungguhnya.

Langkah-langkah membuat simulator Android Virtual Device :

- Klik menu Windows

- Klik AVD Manager

- Klik New

- Isikan AVD nama : emulator

- Isikan Device : 3.7” QVGA slider (240 x 432 : ldpi)

- Isikan target : Google APIs(Google Inc.) – API Level 8

- Setelah selesai klik create AVD

Langkah-langkah menjalankan simulator yang sudah dibuat :

- Klik kanan pada program yang akan dijalankan

- Klik Run As

- Klik Android Application

Gambar 3.31 Android Virtual Devic

3.6.1 Tampilan Menu Halaman Pembuka

Membuat AVD untuk simulator menjalankan program sudah dibuat, dan setelah dijalankan maka akan menucul tampilan halaman pembuka, yang bisa dilihat pada gambar 3.32

Gambar 3.32 Tampilan Halaman Pembuka

3.6.2 Tampilan Menu Utama

Dalam tampilan menu utama terdapat beberapa menu pilihan untuk mengakses menu lain yang dapat dipilih dengan menggunakan simulator.

Gambar 3.33 Tampilan Menu Utama

3.6.3 Tampilan Menu Lokasi Skatepark

Dalam menu Lokasi Skatepark, pengguna dapat memilih 10 lokasi skatepark yang diinginkan. Setelah salah satu lokasi skatepark dipilih maka pengguna dapat melihat informasi skatepark, alamat serta tombol untuk mencari lokasi yang tersambung dengan gps, seperti pada gambar 3.34

Gambar 3.34 Tampilan Menu Lokasi Skatepark

Tampilan – tampilan selanjutnya dapat dilihat pada listing program yang tertera pada lampiran A.

3.7 Uji Coba Pada Telpon Genggam Berbasis Android

Berikut ini akan ditampilkan tabel 3.1 untuk melihat uji coba pada telpon genggam yang berbasis android.

Tabel 3.1: Uji Coba

Merk Handphone	OS	Ukuran Layar	Keterangan
Lenovo A328	Android 4.2.2	4.5 Inch	Aplikasi berjalan dengan baik
Samsung Galaxy Star Plus GT-S7262	Android 4.2.0	4.0 Inch	Aplikasi berjalan dengan baik
Advan T5-A	Android 4.0.4	8.0 Inch	Aplikasi berjalan dengan baik

Monday, July 6, 2015

PI