1
APLIKASI LOCATION BASED SERVICE MUSEUM DI JAKARTA BERBASIS ANDROID DENGAN FLUTTER
Muhammad Trialdi1
Evans Winanda Wirga, ST., MMSI2
Program Studi Teknik Informatika - Fakultas Teknologi Industri Universitas Gunadarma
[email protected]1 [email protected]2
ABSTRAK
Museum adalah lembaga, tempat penyimpanan, perawatan, pengamanan dan pemanfaatan benda-benda bukti materiil hasil budaya manusia serta alam dan lingkungannya guna menunjang upaya perlindungan dan pelestarian kekayaan budaya bangsa. Penulisan ilmiah ini membahas tentang langkah-langkah yang dilakukan dalam pembuatan Aplikasi Location Based Service Museum di Jakarta Berbasis Android Dengan Flutter. Metode yang digunakan dalam pembuatan aplikasi ini menggunakan metode SDLC (System Development Life Cycle) yang terdiri dari beberapa tahap yaitu perencanaan, perancangan, implementasi, dan pengujian. Pembuatan aplikasi smartphone berbasis android ini menggunakan visual studio code sebagai text editor dengan bahasa pemrograman dart yang menggunakan framework flutter serta android studio sebagai emulator. Berdasarkan hasil pengujian, aplikasi ini dapat berjalan baik pada smartphone dengan spesifikasi yaitu Android 10 dan 11 dengan ukuran layar 5,6 - 6,4 Inch.
Kata Kunci : Aplikasi, Android, Location Based Service (LBS), Museum, Flutter.
1 PENDAHULUAN
Teknologi pada saat ini tidak dapat dipisahkan dari kehidupan masyarakat. Teknologi juga mengalami kemajuan pesat salah satunya adalah
aplikasi. Populasi aplikasi yang mengalami kemajuan yaitu Android.
Salah satunya adalah aplikasi yang memanfaatkan fungsi dari lokasi dengan menggunakan GPS (Global Positioning
2 System) atau biasa disebut dengan Location Based Service (LBS).
Berdasarkan permasalahan tersebut maka penulisan ini akan mengemukakan suatu aplikasi berbasis Android yaitu "Aplikasi Location Based Service Museum di Jakarta Berbasis Android Dengan Flutter" yang menggunakan text editor visual studio code dengan bahasa pemrograman dart serta menggunakan framework flutter.
2 TINJAUAN PUSTAKA 2.1 Museum
Berdasarkan Peraturan Pemerintah RI No. 19 Tahun 1995, Museum adalah lembaga, tempat penyimpanan, perawatan, pengamanan dan pemanfaatan benda-benda bukti materiil hasil budaya manusia serta alam dan lingkungannya guna menunjang upaya perlindungan dan pelestarian kekayaan budaya bangsa.[3]
2.2 Aplikasi Mobile
Menurut Pressman dan Bruce, aplikasi mobile adalah aplikasi yang telah dirancang khusus untuk platform mobile (misalnya iOS, Android, atau windows mobile) aplikasi mobile memiliki user interface dengan
mekanisme interaksi unik yang disediakan oleh platform mobile.[4]
• Android
Android adalah sistem operasi open source berbasis linux yang dirancang untuk perangkat dengan layar sentuh seperti smartphone dan komputer tablet.[11]
Adapun sasaran versi android yang akan digunakan dalam pembuatan aplikasi dan penulisan ilmiah kali ini sebagai berikut:
• Android Pie
• Android 10
• Android 11
2.3 Android Studio
Android Studio merupakan Integrated Development Environment (IDE) untuk sistem operasi Android, yang dibangun berdasarkan IntelliJ IDEA dan didesain khusus untuk melakukan pengembangan aplikasi Android.[5][14]
2.3.1 IDE (Integrated Development Enviroment)
Integrated Development Environment (IDE) adalah program
3 komputer untuk digunakan sebagai lingkungan pengembangan yang memiliki beberapa fasilitas yang diperlukan dalam pembangunan perangkat lunak.[12]
2.3.2 Android SDK (Software Development Kit)
Android Software Development Kit (SDK) merupakan tools yang digunakan oleh para developer sebagai alat bantu dan API (Application Programming Interface) untuk membuat dan mengembangkan aplikasi berbasis Android.[14]
2.4 GPS (Global Positioning System)
GPS (Global Positioning System) adalah sistem navigasi berbasis satelit untuk penentuan posisi yang dikembangkan dan dikelola oleh Departemen Pertahanan Amerika.
Sistem ini didesain untuk menentukan letak, kecepatan, arah, dan waktu, secara berkesinambungan di seluruh dunia.[9]
2.4.1 LBS (Location Based Services) LBS (Location Based Services) adalah layanan berbasis lokasi atau istilah umum yang sering digunakan
untuk menggambarkan teknologi yang digunakan untuk menemukan lokasi perangkat yang pengguna gunakan.
Layanan ini menggunakan teknologi global positioning service (GPS) dan cell-based location dari Google.[2]
2.4.2 Google Maps
Google Maps adalah sebuah layanan pemetaan yang memberikan citra berupa gambar dari peta global virtual secara gratis dan online yang disediakan oleh perusahaan Google.
2.4.3 Google Maps API
Google Maps API adalah sekumpulan komponen untuk melakukan berbagai fungsi terkait aplikasi pemetaan yang diberikan oleh Google kepada para pengguna untuk memanfaatkan layanan-layanan yang ditawarkan oleh Google Maps setelah melakukan registrasi dan mendapatkan Google Maps API Key.[7]
2.5 Figma
Figma adalah salah satu aplikasi design berbasis cloud, dengan fitur tambahan yang diaktifkan oleh aplikasi desktop untuk macOS dan Windows sehingga bisa digunakan secara offline.[8]
4 2.6 StarUML
StarUML adalah perangkat lunak yang digunakan untuk melakukan permodelan yang mendukung UML (Unified Modelling Languange). UML merupakan suatu metode visual yang digunakan sebagai sarana perancangan sistem berbasis objek dalam pemodelan.
2.7 Visual Studio Code
Visual Studio Code adalah perangkat lunak bersifat open source untuk menyunting kode atau bisa dikatakan sebagai text editor yang dikembangkan oleh Microsoft dan dapat digunakan pada sistem operasi Windows, Linux dan MacOS.
2.8 Dart
Dart adalah bahasa pemrograman general-purpose yang dikembangkan oleh Google. Bahasa ini bisa digunakan untuk membuat aplikasi Android, front-end web, IoT, backend (CLI), maupun Game.
2.9 Flutter
Flutter adalah sebuah framework bersifat open source yang diciptakan oleh Google untuk membuat aplikasi mobile. Flutter sendiri merupakan
Software Development Kit (SDK) yang bisa membantu developer dalam membuat aplikasi mobile cross platform (Android dan iOS).[1][10]
2.10 Struktur Navigasi
Struktur Navigasi adalah struktur atau alur dari suatu program yang merupakan sebuah rancangan hubungan (rantai kerja) dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen dengan pemberian perintah dan pesan.
Menurut Evi dan Malabay, ada 4 (empat) macam bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan aplikasi, yaitu struktur navigasi linier, struktur navigasi hirarki, struktur navigasi non linier, dan struktur navigasi campuran.[13]
2.11 Pengujian Black Box
Pengujian Black Box atau yang sering dikenal dengan sebutan pengujian fungsional merupakan metode pengujian perangkat lunak yang digunakan untuk menguji perangkat lunak tanpa mengetahui struktur internal kode atau Program.[6]
5 3 PEMBAHASAN
3.1 Perencanaan Aplikasi
Secara garis besar aplikasi yang dibuat akan dimulai dengan tampilan awal SplashScreen yang berdurasi selama beberapa detik sebelum masuk ke dalam menu home. Didalam menu home terdapat dua pilihan menu yaitu daftar wilayah dan Profile.
3.2 Spesifikasi Hardware dan Software
Spesifikasi perangkat yang digunakan dalam pembuatan aplikasi location based service museum di Jakarta adalah sebagai berikut:
Spesifikasi Hardware:
• Laptop Asus A442URR dengan spesifikasi sebagai berikut:
• Processor CPU Intel®
Core™ i5-8250U
• Intel® UHD Graphics 620
• Nvidia GeForce 930MX
• RAM 8GB
• SSD Samsung Evo 870 250GB
Spesifikasi Software:
• Windows 10 Home Single Language 64-bit
• Android Studio 4.1.3
• Visual Studio Code
• StarUML
• Figma
3.3 Perancangan Aplikasi
Pada tahap ini rancangan aplikasi menggunakan Struktur Navigasi, diagram UML, dan perancangan antarmuka aplikasi. Tahap perancangan aplikasi sangat penting karena tahap ini memberikan gambaran tentang aplikasi yang akan dibuat.
3.3.1 Struktur Navigasi
Struktur navigasi aplikasi location based service museum di Jakarta bertujuan untuk menceritakan alur atau struktur dari aplikasi tersebut.
Struktur navigasi pada aplikasi ini menggunakan struktur navigasi hirarki.
Gambar 3.1 merupakan struktur dari aplikasi yang akan dibuat.
Gambar 3.1 Struktur Navigasi Aplikasi LBS Museum Jakarta
6 3.3.2 Use Case Diagram
Use case diagram digunakan untuk menggambarkan scenario hubungan antara user dengan menu- menu yang ada pada aplikasi. Gambar 3.2 merupakan use case diagram dari aplikasi yang akan dibuat.
Gambar 3.2 Use Case Diagram Aplikasi LBS Museum Jakarta
3.3.3 Activity Diagram
Activity diagram digunakan untuk memodelkan proses-proses yang terjadi pada aplikasi location based service museum di Jakarta. Runtutan proses dari aplikasi digambarkan secara vertical. Gambar 3.3, dan Gambar 3.4 merupakan activity diagram dari aplikasi yang dibuat.
Gambar 3.3 Activity Diagram Memilih Museum
Gambar 3.4 Activity Diagram Memilih Menu Profile
3.3.4 Perancangan Antarmuka Aplikasi
Perancangan antar muka aplikasi digunakan untuk mengetahui proses yang berjalan pada aplikasi. Tampilan rancangan aplikasi dibuat menggunakan Figma. Rancangan aplikasi ini akan meliputi berbagai tampilan yang
7 mendukung kebutuhan dari aplikasi ini.
Beberapa rancangan tampilan pada aplikasi location based service museum di Jakarta dijelaskan satu persatu sebagai berikut:
3.3.4.1 Perancangan Tampilan SplashScreen
Tampilan splashscreen adalah tampilan awal pada saat membuka aplikasi. Tampilan splashscreen ini berisi image icon atau logo aplikasi yang muncul saat membuka suatu laman pada aplikasi. Gambar 3.5 merupakan rancangan tampilan splashscreen pada aplikasi.
Gambar 3.5 Rancangan Tampilan SplashScreen
3.3.4.2 Perancangan Tampilan Menu Home
Menu home adalah menu yang tampil setelah tampilan splashscreen selesai. Menu home atau menu utama ini terdapat dua button menu didalamnya yaitu menu daftar wilayah dan menu profile. Rancangan tampilan dibuat seperti Gambar 3.6 dibawah ini.
Gambar 3.6 Rancangan Tampilan Menu Home
3.3.4.3 Perancangan Tampilan Menu Daftar wilayah
Menu daftar wilayah adalah menu yang digunakan untuk menampilkan daftar wilayah yang dapat dipilih oleh user saat ingin mencari museum. Gambar 3.7 merupakan rancangan tampilan menu daftar wilayah pada aplikasi.
8 Gambar 3.7 Rancangan Tampilan
Menu Daftar Wilayah
3.3.4.4 Perancangan Tampilan Menu Error
Menu error adalah menu yang digunakan untuk menampilkan informasi mengenai lokasi atau map yang dicari tidak ditemukan. Gambar 3.8 merupakan rancangan tampilan menu error pada aplikasi.
Gambar 3.8 Rancangan Tampilan Menu Error
3.3.4.5 Perancangan Tampilan Menu Profile
Menu profile adalah menu yang digunakan untuk menampilkan informasi mengenai dari pembuat aplikasi. Gambar 3.9 merupakan rancangan tampilan menu profile pada aplikasi.
Gambar 3.9 Rancangan Tampilan Menu Profile
3.4 Pengkodean Aplikasi
Pengkodean aplikasi adalah tahap pembuatan aplikasi dengan menggunakan visual studio code sebagai text editor, android studio sebagai emulator, dan bahasa pemrograman dart dengan framework flutter. Adapun Langkah-langkah yang dilakukan sebagai berikut:
9 3.4.1 Pembuatan Project Aplikasi
Langkah pertama yang harus dilakukan dalam pembuatan aplikasi ini adalah membuat project baru di visual studio code dengan masuk terlebih dahulu kedalam aplikasi visual studio code pilih terminal lalu pilih new terminal. Setelah masuk pada menu terminal ketik perintah “flutter create nama_project”.
3.4.2 Pembuatan Tampilan SplashScreen
Tampilan splashcreen adalah halaman awal dari aplikasi yang menampilkan logo aplikasi yang akan berlangsung selama beberapa detik sesaat sebelum user masuk pada menu home ketika user pertamakali menjalankan aplikasi. Berikut adalah potongan kode program yang
dimasukkan kedalam
launch_background.xml.
Pada potongan kode diatas terdapat kode untuk mengatur warna background, posisi, dan memasukkan image logo dari splashscreen.
Tampilan layout splashscreen pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.10.
Gambar 3.10 Tampilan Halaman SplashScreen
3.4.3 Pembuatan Tampilan Menu Home
Tampilan menu home merupakan halaman utama dari aplikasi.
Berikut adalah potongan kode program yang dimasukkan kedalam home_page.dart.
10 Pada potongan kode diatas yaitu menu home yang melakukan import dari beberapa file. Pada menu ini terdapat 2 button yang dapat dipilih oleh user untuk melanjutkan pada menu selanjutnya.
Tampilan layout menu home pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.11.
Gambar 3.11 Tampilan Menu Home
3.4.4 Pembuatan Tampilan Menu Daftar wilayah
Tampilan menu daftar wilayah adalah tampilan yang digunakan untuk menampilkan 5 wilayah kota yang ada di Jakarta. Berikut adalah potongan kode program yang dimasukkan kedalam daftar_wilayah.dart.
Pada potongan kode diatas terdapat 5 image button yang dapat diklik untuk melanjutkan ke menu daftar museum yang berada pada kota tersebut
Tampilan layout menu daftar wilayah pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.12.
11 Gambar 3.12 Tampilan Menu Daftar
Wilayah
3.4.4.1 Pembuatan Tampilan Menu Daftar Museum
Tampilan menu daftar museum digunakan untuk menampilkan 6 daftar museum. Berikut adalah salah satu potongan kode program yang dimasukkan kedalam menu daftar museum yaitu selatan_page.dart.
Pada potongan kode diatas terdapat image button yang dapat dipilih untuk melanjutkan ke menu detail
museum. Kemudian ada button back untuk Kembali pada menu sebelumnya.
Tampilan layout menu daftar museum pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.13.
Gambar 3.13 Tampilan Menu Daftar Museum
3.4.4.2 Pembuatan Tampilan Menu Detail Meseum
Tampilan menu detail musem digunakan untuk menampilkan informasi mengenai museum yang bersangkutan. Pada menu ini terdapat 5 buah foto koleksi museum yang dapat discroll secara horizontal dan terdapat image button map yang jika diklik akan membuka aplikasi google maps untuk menampilkan map.
12 Berikut adalah salah satu potongan kode program detail museum yang dimasukkan kedalam museum_betawi.dart.
Pada potongan kode diatas terdapat pengkondisian yang berfungsi untuk membuka url yang sudah dimasukkan kedalam kode, apabila url tidak ditemukan maka aplikasi akan menampilkan halaman menu error.
Tampilan layout salah satu menu detail museum pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.14.
Gambar 3.14 Tampilan Menu Detail Museum
3.4.4.3 Tampilan Menu Google Maps Tampilan menu google maps digunakan untuk memberikan informasi mengenai lokasi dari museum yang ada pada kawasan yang di pilih. Tampilan ini akan terbuka jika user mengklik icon map pada menu detail museum.
Tampilan layout menu google maps pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.15.
Gambar 3.15 Tampilan Menu Google Maps
3.4.4.4 Pembuatan Tampilan Menu Error
Tampilan menu error digunakan untuk memberikan informasi jika map atau lokasi yang dicari tidak ada. Berikut adalah potongan kode program detail museum yang dimasukkan kedalam error_page.dart.
13 Pada potongan kode diatas terdapat pesan error berupa gambar.
Kemudian membuat button back untuk kembali ke menu home.
Tampilan layout menu error pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.16.
Gambar 3.16 Tampilan Menu Error
3.4.5 Pembuatan Tampilan Menu Profile
Tampilan menu profile digunakan untuk memberikan informasi mengenai data diri dari pembuat aplikasi kepada user. Berikut adalah potongan kode program profile yang dimasukkan kedalam profile_page.dart.
Pada potongan kode diatas terdapat text dan image untuk pas foto.
Kemudian membuat button back untuk kembali ke menu home.
Tampilan layout menu profile pada aplikasi location based service museum di Jakarta dapat dilihat pada Gambar 3.17.
14 Gambar 3.17 Tampilan Menu Profile
3.5 Pengujian Aplikasi
Tahap pengujian adalah tahap terakhir dalam pembuatan aplikasi untuk menguji kelayakan dari aplikasi ini. Pada tahap ini, pengujian aplikasi menggunakan berbagai macam perangkat smartphone berbasis android yang memiliki spesifikasi berbeda-beda.
Pengujian aplikasi menggunakan metode blackbox dan uji portabilitas.
3.5.1 Pengujian Metode Blackbox Pengujian metode blackbox dilakukan untuk mengetahui apakah fungsi yang diberikan pada aplikasi menghasilkan hasil sesuai dengan tujuan yang ingin dicapai. Uji coba dilakukan terhadap semua menu yang terdapat dalam aplikasi. Berdasarkan hasil pengujian menggunakan metode
blackbox terhadap aplikasi location based service museum di Jakarta hasilnya semua menu dapat berfungsi dengan baik.
3.5.2 Pengujian Portabilitas
Pengujian portabilitas dilakukan untuk menguji kelayakan dari aplikasi apakah fungsi yang diberikan pada aplikasi menghasilkan hasil sesuai dengan tujuan yang ingin dicapai pada berbagai macam perangkat smartphone berbasis android yang memiliki spesifikasi yang berbeda-beda. Uji coba dilakukan terhadap semua menu yang terdapat dalam aplikasi. Berdasarkan pengujian yang telah dilakukan hasilnya adalah semua fungsinya dapat berjalan dengan baik, tetapi untuk tampilan layout dengan android versi 8 kebawah menjadi acak terutama pada menu home.
4 KESIMPULAN DAN SARAN 4.1 Kesimpulan
Dari hasil uji coba aplikasi yang telah dilakukan dengan metode blackbox dan portabilitas pada beberapa perangkat smartphone berbasis android dengan spesifikasi yang berbeda-beda, dapat disimpulkan bahwa aplikasi location based service museum di Jakarta dapat
15 digunakan sesuai dengan tujuan penulisan, yaitu untuk memberikan informasi mengenai museum, koleksi museum, dan mencari lokasi museum dalam peta yang ada di kota Jakarta kapan saja melalui smartphone.
Aplikasi ini berhasil dijalankan pada 5 smartphone yang berbeda-beda.
Pada percobaan portabilitas menunjukan bahwa aplikasi ini berjalan optimal pada ukuran layar 5,6 Inch – 6,4 Inch dengan versi android 10 dan 11. Untuk smartphone Asus Zenfone 2 Z00AD, yang memiliki ukuran layar 5,5 Inch dan versi android 6.0 (Marshmallow) terdapat kendala pada aplikasi berupa tampilan layout untuk border menu profile dan daftar wilayah mejadi acak.
Kemudian minimun spesifikasi yang dibutuhkan untuk menjalankan aplikasi ini adalah android versi 6.0 (Marshmallow).
4.2 Saran
Aplikasi location based service museum di Jakarta dalam penulisan ini telah selesai dibuat, namun masih perlu perbaikan dan penyempurnaan. Aplikasi ini dapat dikembangkan dengan menambahkan fitur yaitu untuk melakukan pemesanan tiket secara
online langsung melalui aplikasi.
Aplikasi ini belum menampilkan semua museum terutama yang berada di Jakarta, dan masih memungkinkan untuk diperbanyak pada pengembagan aplikasi berikutnya.
DAFTAR PUSTAKA
[1] Abdullah, A. Y. (2020, April 17). Kenapa Flutter Layak Kamu Pelajari: 3 Alasan.
Retrieved from dicoding:
https://www.dicoding.com/blog/kenapa -flutter/
[2] Abidin, R. (2016, April 27). Pengertian Location Based Services (LBS) dan Komponennya. Retrieved from Tekno Jurnal:
https://teknojurnal.com/pengertian- location-based-services-lbs-dan- komponennya
[3] Asmara, D. (2019). PERAN MUSEUM
DALAM PEMBELAJARAN
SEJARAH. Jurnal Pendidikan Sejarah dan Riset Sosial Humaniora, II, 10-20.
[4] Aulia, F. Y., & Yuldinawati, L. (2018).
ANALISIS FAKTOR
KONFIRMATORI MOTIVASI PADA PENGGUNA APLIKASI TAKSI ONLINE DI WILAYAH BANDUNG.
e-Proceeding of Management, V, 51-58.
[5] Juansyah, A. (2015). PEMBANGUNAN APLIKASI CHILD TRACKER BERBASIS ASSISTED – GLOBAL POSITIONING SYSTEM (A-GPS) DENGAN PLATFORM ANDROID.
Jurnal Ilmiah Komputer dan Informatika (KOMPUTA), I, 1-8.
[6] Kurniawati, P. (2018, October 28). Pengujian Sistem. Retrieved from Skyshi:
https://medium.com/skyshidigital/peng ujian-sistem-52940ee98c77
[7] Mahdia, F., & Noviyanto, F. (2013).
PEMANFAATAN GOOGLE MAPS API UNTUK PEMBANGUNAN SISTEM INFORMASI MANAJEMEN BANTUAN LOGISTIK PASCA
16 BENCANA ALAM BERBASIS MOBILE WEB. Jurnal Sarjana Teknik Informatika, I, 162-171.
[8] Muhyidin, M. A., Sulhan, M. A., & Sevtiana, A. (2020). PERANCANGAN UI/UX APLIKASI MY CIC LAYANAN
INFORMASI AKADEMIK
MAHASISWA MENGGUNAKAN APLIKASI FIGMA. JURNAL DIGIT, X, 208~219.
[9] Perkasa, P. (2019). PENGGUNAAN GLOBAL POSITIONING SYSTEM (GPS) UNTUK DASAR SURVEY PADA MAHASISWA. Jurnal Pendidikan Teknologi dan Kejuruan BALANGA, VII, 22-33.
[10] Ramadha, P. H., Kartiko, C., & Prasetiadi, A. (2020). Monitoring Kualitas Air Tambak Udang Menggunakan NodeMCU, Firebase, dan Flutter.
Jurnal Teknik Informatika dan Sistem Informasi Volume 6 Nomor 1 April 2020, VI, 102-114.
[11] Salbino, S. (2014). Buku Pintar Gadget Android untuk Pemula. (H. Budiman, Ed.) Jakarta: Kunci Komunikasi.
[12] Silva, M. D. (2017, Maret 8). Pengenalan IDE (Integrated Development Environment). Retrieved from Telkom University:
https://fit.labs.telkomuniversity.ac.id/p engenalan-ide-integrated-development- environment/
[13] Syarwani, S. L. (2017). SISTEM INFO RMASI PENJUALAN BERBASIS WEB
PADA CV PINASTHIKA
KHATULISTIWA KUBU RAYA. AMIK BSI Pontianak. Pontianak: Tidak Diterbitkan.
[14] Wibowo, D. C. (2019, May 30). Apa itu Android Studio dan Android SDK?
Retrieved from dicoding:
https://www.dicoding.com/blog/apa- itu-android-studio-dan-android-sdk/
