Penggunaan Teknologi Xamarin Berbasis MVC (Studi Kasus : Pemesanan Makanan)
Artikel Ilmiah
Diajukan Kepada
Fakultas Teknologi Informasi
Untuk Memperoleh Gelar Sarjana Komputer
Oleh:
Titan Fadardien Fahmi Yusron
NIM : 672014606
Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Penggunaan Teknologi Xamarin Berbasis MVC (Studi Kasus : Pemesanan Makanan)
1)
Titan Fadardien Fahmi Yusron, 2) Felix David
Fakultas Teknologi Informasi Program Studi Teknik Informatika Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: 1) 672014606@student.uksw.edu, 2) felix@staff.uksw.edu
Abstract
Xamarin is a software that is used to create C# based multi-platform mobile application. By using basic C# programming language and implementing shared codebase method, developers could use Xamarin to develop iOS, Android and Windows applications with native user interfaces and shared code across multiple platforms. In this study, the writer tries to apply Xamarin technology to MVC-based food order application. The applications that are built using MVC can run well on Android platform. Futhermore, the writer concludes that Xamarin technology can be applied into food order application.
Keywords : Food Order Application, MVC, Xamarin.
Abstrak
Xamarin merupakan software yang digunakan untuk membuat aplikasi mobile
multi platform (Windows App, Android dan iOS) berbasis C#. Dengan dasar
bahasa pemograman C# dan mengimplemetasikan metode shared codebase,
developers dapat menggunakan Xamarin untuk menggembangkan aplikasi
native iOS, Android, dan Windows dengan native user interfaces dan share
code across multiple platforms. Pada penelitian ini, penulis mencoba
menerapkan teknologi Xamarin kedalam aplikasi pemesanan makanan berbasis MVC. Aplikasi yang dibangun menggunakan MVC dapat berjalan dengan baik pada platform Android. Jadi penulis menyimpulkan bahwa teknologi Xamarin dapat diterapkan ke dalam aplikasi pemesanan makanan.
Kata Kunci : Aplikasi Pemesanan Makanan, MVC, Xamarin.
1. Pendahuluan
Saat ini ponsel tidak hanya berfungsi sebagai sarana telekomunikasi, namun telah beralih menjadi gadget (perangkat elektronik kecil yang memiliki fungsi khusus) yang mampu melakukan banyak hal. Generasi tersebut dimulai semenjak adanya PDA (Personal Digital Assistant) yang memiliki kemampuan seperti membaca dan mengirim email, menjalankan berbagai macam aplikasi, reminder
dapat digolongkan berdasarkan jenis sistem operasi (OS) yang digunakan yaitu Windows Phone, Symbian, Android, Bada, Blackberry OS, Firefox OS, MeeGo, Palm OS, WebOS dan iOS. Sistem operasi Windows Phone umumnya menggunakan bahasa pemrograman C# sedangkan Android dan iOS memiliki bahasa pemrograman yang berbeda. Untuk mengatasi hal itu Xamarin Inc membuat alat pengembangan yang bernama Xamarin yang memungkinkan pengembang dapat membangun aplikasi di berbagai platform (perangkat lunak yang digunakan di sistem operasi) dengan menggunakan bahasa C#.
Xamarin adalah perusahaan software yang terletak di San Francisco, California dan berdiri semenjak Mei 2011. Engginer yang bergerak di perusahaan ini adalah yang membuat Mono, MonoTouch dan Mono for Android yang ketiganya merupakan cross-platform (perangkat lunak yang digunakan di sistem operasi yang berbeda) dan dapat di implementasikan ke Common Language Infrastructure (CLI) dan Common Language Specifications (atau yang biasa disebut Microsoft .NET).
Dengan dasar bahasa pemograman C# dan mengimplemetasikan metode
shared codebase, developers dapat menggunakan Xamarin untuk
menggembangkan aplikasi native iOS, Android, dan Windows dengan native user interfaces dan sharecodeacrossmultipleplatforms.
Perkembangan teknologi ini juga berpengaruh terhadap segala bidang aspek, Salah satunya yaitu bisnis makanan. Bisnis makanan sekarang ini tidak terbatas pada pemesanan ditempat tetapi juga dapat dipesan secara online. Berdasarkan perkembangan tersebut, penulis mencoba menggunakan Xamarin sebagai teknologi pemrograman kedalam aplikasi pemesanan makanan berbasis MVC.
2. Kajian Pustaka
Penelitian ini melibatkan beberapa referensi pendukung. Penelitian yang berjudul “Xamarin for Android Application” yang ditulis oleh Ankid Chandna dan Neetu Sharma, Research Scholar, HOD, Department of Computer Science and Engineering, Ganga Institute of Technology and Management Kablana, membahas mengenai aplikasi pemutar video dan audio[1]. Aplikasi diuji coba dan mendapatkan kesimpulan bahwa aplikasi pemutar video dan audio dapat berjalan dengan baik menggunakan Xamarin sebagai alat pembuatnya.
Menurut Agung Ristiono, 2009. Dalam penelitiannya yang berjudul “Perancangan Aplikasi Mobile Web Pemesanan Barang Pada Minimarket (studi kasus : Toko Sinar Mulya)”[2] tentang perancangan sebuah aplikasi web yang dapat membantu proses transaksi pemesanan barang terhadap produk-produk pada sebuah mini market. Aplikasi ini dirancang menggunakan PHP dan MySQL sebagai databasenya untuk mengantisipasi pengelolaan data barang dalam skala besar.
Xamarin
Xamarin adalah unik karena menggabungkan semua kekuatan platform (Android, iOS dan Windows App) dan menambahkan sejumlah fiturnya sendiri[4], yaitu: (1) CompleteBinding for the Underlying SDKs. (2) Objective-C, Java, C, and C++ Interop. (3) Modern Language Constructs. (4) Amazing Base Class Library (BCL). (5) Modern Integrated Development Environment (IDE). (6) MobileCrossPlatformSupport.
JSON
JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer[5].
Web Service
Web service merupakan sistem perangkat lunak yang mampu diakses lintas
platform dan bahasa pemrograman yang netral serta sebuah mekanisme komunikasi yang independen, biasanya web service (layanan web) disediakan oleh laman web untuk menyediakan layanan informasi pada sistem lain yang melakukan request, sehingga dua buah sistem atau lebih dapat berkomunikasi melalui layanan web tersebut[6].
3. Metodologi Penelitian
Penelitian ini dilakukan dalam lima tahapan, yaitu analisis dan pengumpulan data, perancangan sistem yang meliputi perancangan proses, perancangan arsitektur, perancangan database, dan perancangan antarmuka aplikasi, pembuatan aplikasi, pengujian dan analisis hasil pengujian, dan penulisan hasil penelitian.
TAHAPAN TUJUAN
LANGKAH 1 Analisis Data dan Pengumpulan
Informasi
LANGKAH 2
Perancangan Sistem meliputi :
· Perancangan Proses (UML).
· Perancangan Arsitektur.
· Perancangan Database.
· Perangangan Antarmuka Aplikasi
LANGKAH 3 Pembuatan Aplikasi
LANGKAH 4 Pengujian dan Analisis Hasil Pengujian
LANGKAH 5 Penulisan Laporan Hasil Penelitian
Dalam tahap perancangan sistem, dilakukan desain sistem dan perangkat lunak untuk menggambarkan proses kerja aplikasi. Aplikasi mobile digunakan oleh pelanggan, aplikasi ini memiliki fitur untuk memesan makanan secara online. Aplikasi mobile ini dibuat dengan teknologi terbaru yaitu Xamarin dan diimplementasikan pada Android, Android dipilih karena pengguna smartphone
Android sebagai alat komunikasi lebih banyak daripada platform lainnya.
Gambar 2 Arsitektur Sistem
Gambar 2 menjelaskan mengenai Arsitektur Sistem. Mobile Device harus terkoneksi dengan internet untuk mengakses web service yang ada diserver dan terhubung ke database.
Model Controller View
Webservice (PHP)
Database Server (MYSQL) Database
(Sqlite)
Gambar 3 Arsitektur Aplikasi
Gambar 3 menjelaskan mengenai Arsitektur Aplikasi yang berjalan di
Mobile. Aplikasi Mobile menggunakan struktur Model View Controller (MVC). Model berisi struktur data, View merupakan tampilan yang diperlihatkan ke user dan Controller merupakan jembatan antara view dan model.
Pemodelan aplikasi pada penelitian ini menggunakan UML (Unified Modelling Language). UML adalah bahasa pemodelan untuk sistem atau perangkat lunak yang berparadigma berorientasi objek[7]. Pemodelan pada aplikasi ini terdiri dari use case diagram, activity diagram, sequencediagram, dan
classdiagram.
dan lihat tagihan. Pengguna dapat mengakses menu dalam aplikasi mobile setelah melakukan login ke dalam sistem.
ActivityDiagram merupakan gambaran dari aktifitas dari sistem yang sedang dirancang dari awal proses sampai dengan akhir, dibagi menjadi 2 yaitu Rancangan Register User Activity pada gambar 4 dan Rancangan Order User Activity pada gambar 5
Pembeli Register Activity
Pembeli Aplikasi Mobile Web Service
Mulai
register tampilkan register
user
mengisi data diri
register user menambah
data user
Invalid
sukses register
valid
Selesai
Cek user
Gambar 4 Rancangan Activity Diagram Register user pada Aplikasi Mobile
Gambar 4 merupakan rancangan activity diagram dalam proses register user baru yang digunakan aplikasi mobile. Aktivitas dimulai saat pengguna melakukan
register ke dalam sistem, sistem akan menampilkan form register. Adapun data yang harus diisi berupa data diri pengguna. Setelah pengguna selesai mengisi data diri pada form register, sistem akan melakukan proses register melalui web service. Jika data yang dimasukan belum tersedia, sistem akan menambahkan user
baru ke dalam database dan menampilkan perberitahuan kepada user bahwa
Pembeli Login Activity
Pembeli Aplikasi Mobile Web Service
Mulai
Login tampilkan login
user
mengisi username dan password
Login user ambil data
user
order user tambah data
order
Gambar 5 merupakan rancangan activity diagram Order user pada Aplikasi
Mobile. Pengguna terlebih dahulu melakukan login dengan mengisi username dan
password. Kemudian sistem akan melakukan validasi terhadap username dan
password tersebut. Jika data yang dimasukan benar, sistem akan menampilkan menu makanan dan pengguna dapat memilih menu makanan yang ditampilkan. Jika pengguna memilih salah satu menu, sistem akan menampilkan dialog jumlah pesan. Kemudian pengguna memasukan jumlah pesanan dan disimpan kedalam
database (local). Pengguna dapat mengubah jumlah pesanan dengan memilih menu makanan yang akan dirubah. Jumlah pesanan akan ditampilkan kembali pada dialog jumlah pesan. Semua data pesanan dapat dilihat dan dihapus melalui menu daftar pesanan. Jika pengguna menghapus data pesanan, data yang ada didalam database (local) akan dihapus oleh sistem. Setelah pengguna selesai memilih menu makanan yang pesan, sistem akan melakukan pengiriman data pesanan ke database (online). Jika pengiriman data berhasil, sistem akan menghapus semua data didalam database (local) dan menampilkan perberitahuan bahwa pemesanan sukses dilakukan.
Sequence diagram menggambarkan tentang proses interaksi yang terjadi dalam suatu sistem yang disusun dalam satu serial waktu. Sequence diagram
secara khusus menjabarkan behavior sebuah skenario tunggal dan menunjukkan sejumlah obyek contoh dan pesan yang melewati obyek-obyek yang terdapat dalam use case. Sequence yang terjadi dalam penelitian ini dapat dilihat pada Gambar 6 sampai Gambar 11.
Aplikasi Mobile
Pembeli Controller Model Tabel User
Register
Tampilkan Register User
mengisi data diri
mengarahkan
menambah data user
menambah data user return sukses return sukses
return sukses toast sukses create user
Gambar 6 menjelaskan mengenai rancangan sequence yang terjadi dalam aplikasi mobile saat pengguna melakukan register user baru. Dengan mengisi data diri. Aplikasi Mobile akan menghubungi controller di server dengan menyertakan data diri yang dimasukkan pengguna, controller akan meneruskan data tersebut ke
model untuk selanjutnya disimpan kedalam database server kemudian dikembalikan ke controller dan diteruskan ke aplikasi Mobile berupa pemberitahuan register sukses. Setelah pengguna sukses mendaftarkan diri, pengguna dapat melakukan login kedalam sistem.
Aplikasi Mobile
Pembeli Controller Model Tabel User
Login
Tampilkan Login User
mengisi username dan password
mengarahkan
ambil data user
ambil data user return data user return data user
return data user tampikan menu makanan
Gambar 7 Rancangan SequenceDiagram Login User pada Aplikasi Mobile
Gambar 7 menjelaskan mengenai rancangan sequence diagram proses login user, yang dimulai dengan proses login pengguna ke dalam sistem. Aplikasi
Mobile akan menghubungi controller di server dengan menyertakan username
Aplikasi Mobile
Pembeli Controller Model Tabel Order (Sqlite)
pilih menu
Tampilkan jumlah pesan mengisi jumlah pesanan
mengarahkan
menambah data order
menambah data order return data order return data order
return data order mengarahkan
cek data order
cek data order return data order return data order
return data order
Gambar 8 Rancangan SequenceDiagram insert Order ke Daftar Pesanpada Aplikasi Mobile
Aplikasi Mobile
Pembeli Controller Model Tabel Order (Sqlite)
pilih menu yang diubah
Tampilkan jumlah pesan mengisi jumlah pesanan
mengarahkan
mengubah data order
mengubah data order return data order return data order
return data order mengarahkan
cek data order
cek data order return data order return data order
return data order
Gambar 9 Rancangan SequenceDiagram Ubah Jumlah Pesanan pada Aplikasi Mobile.
Gambar 9 menjelaskan mengenai proses mengubah jumlah pesanan pada makanan yang sudah dipesan (masuk di database local). Dengan urutan pengguna memilih makanan yang akan diubah pada daftar menu. Saat pengguna memilih menu, aplikasi Mobile akan menghubungi controller dengan membawa id food
Aplikasi Mobile
Pembeli Controller Model Tabel Order (Sqlite)
pilih daftar pesanan
mengarahkan
ambil data order
ambil data order return data order return data order
return data order
mengarahkan
hapus data order
hapus data order return data order return data order
return data order tampil daftar pesanan
hapus pesanan
Gambar 10 Rancangan SequenceDiagram Melihat dan Menghapus Data Pesanan pada Aplikasi
Mobile.
Gambar 10 menjelaskan mengenai proses melihat data pesanan dengan memilih menu order pada daftar menu. Setelah pengguna memilih menu order, aplikasi mobile akan mengakses controller untuk mendapatkan daftar pesanan yang ada didatabase local untuk ditampilkan ke pengguna. Jika pengguna tidak jadi melakukan pembelian pada salah satu pesanan maka, pengguna memilih menu yang akan dihapus. Setelah menu dipilih, aplikasi mobile akan mengakses
controller dengan membawa id food ke model untuk selanjutnya dicek di dalam
Aplikasi Mobile
Pembeli Controller Model Tabel Order (Sqlite)
pilih daftar pesanan
mengarahkan
ambil data order
ambil data order
return data order
return data order
return data order
mengarahkan
kirim data order
kirim data order
return sukses
return sukses
return data order tampil daftar pesanan
order pesanan
Tabel Order (Server)
delete all data order
return data order
delete all data order
return data order
toast sukses order
Gambar 11 Rancangan SequenceDiagram Send Data Pesanan ke DatabaseServer pada Aplikasi
Mobile.
Gambar 11 menjelaskan mengenai proses mengirim pesanan ke Database server didalam daftar menu order. Setelah pengguna memilih order. Aplikasi
mobile Akan mengakses controller dengan membawa list data pesanan ke model untuk diteruskan ke tabel Order di database server melalui web service. Jika data berhasil disimpan maka, semua data yang ada di database local dihapus. Dan aplikasi mobile akan mengirimkan toast berupa informasi pemesanan sukses dilakukan.
Class diagram dalam UML menggambarkan mengenai struktur dari sistem dengan menampilkan class, attribut, operasi, dan relasi antar obyek. Rancangan
Food Delivery
Gambar 12 Rancangan Class Diagram Aplikasi Mobile
Terdapat dua buah kontrol yang ada dalam aplikasi mobile, lihat data Food, dan lihat data Orders. Kontrol yang ada digunakan untuk berinteraksi dengan
entity melalui controller yang menangani proses permintaan dan pengiriman data.
4. Hasil dan Pembahasan
Penelitian ini menghasilkan aplikasi pemesanan makanan menggunakan
mobile Android, yang memiliki fitur memesan makanan secara online. Pada penelitian ini sistem diuji dengan sistem operasi Android. Berikut adalah tampilan aplikasi yang telah dibuat.
a b c
d e f
g
Gambar 13 Desain Menu Aplikasi Mobile
melalui tombol sign up. Tampilan setelah pengguna memilih tombol sign up
seperti pada gambar 13 b. Pada tampilan ini, pengguna diharuskan mengisi data diri sesui kolom yang disediakan. Adapaun data yang harus diisi berupa name,
address, phone, username dan password. Setelah mengisi data tersebut, pengguna memilih tombol save untuk mendaftarkan diri dan tombol cancel untuk kembali ketampilan sebelumnya. Pengguna yang sudah register dapat login melalui tombol sign in dengan mengisi username dan password pada kolom yang disediakan. Tampilan setelah pengguna memilih tombol sign in seperti pada gambar 13 c. Jika pengguna berhasil login ke dalam aplikasi, maka tampilan menu utama akan ditampilkan seperti pada gambar 13 d. Pengguna dapat memilih menu yang ditampilkan dengan menekan salah satu menu makanan yang akan dipesan dan dialog jumlah pesan akan ditampilkan sesuai dengan jenis makanan yang dipilih. Pengguna memasukan jumlah pesanan kedalam dialog jumlah pesan seperti pada gambar 13 e. Pengguna yang sudah selesai memilih menu makanan, dapat melihat semua data pesanan melalui menu order(icon cart) seperti pada gambar 13 f. Jika pengguna ingin membatalkan salah satu pesanan, maka pengguna dapat menghapus menu yang dipesan dengan menekan tombol delete
pada menu yang dipilih. Maka konfirmasi menghapus menu akan ditampilkan seperti pada gambar 13 g. Jika pengguna memilih yes maka menu pesanan yang dipilih akan terhapus dan jika memilih no maka akan kembali ke menu order. Pengguna yang sudah selesai dengan menu yang diinginkan, dapat memilih tombol order untuk mengirim menu yang dipesan.
Hasil Pengujian
Sistem yang dibangun selanjutnya diuji dengan menggunakan metode Black box testing. Pengujian yang dilakukan antara lain : (1) proses register; (2) proses
login, (3) Daftar menu makanan; (4) Pilih item menu makanan; (5) Tombol save
pada jumlah pesan; (6) Daftar pesanan makanan; (7) Tombol order. Tabel 1 menunjukan hasil black box testing.
Tabel 1 Hasil Black Box Testing
Poin Pengujian
Kondisi Hasil yang diharapkan
Register berhasil Sesuai
Username : sudah ada
Register gagal Register gagal Sesuai
Proses
Login berhasil Login berhasil Sesuai
Username : salah Password :
benar Username : benar Password : salah
Login gagal Login gagal Sesuai
Daftar
Pengujian kepengguna dilakukan dengan membagi kuisioner kepada empat belas responden untuk mengetahui pendapat tentang aplikasi pemesanan makanan. Kuisioner memiliki sepuluh pertanyaan dalam skala Likert dengan lima skala yaitu Sangat Setuju (SS), Setuju (S), Netral (N), Tidak Setuju (TS), dan Sangat Tidak Setuju (STS). Berikut Hasil dari perhitungan skala Likert pada Tabel 2.
Tabel 2 Hasil Perhitungan Skala Likert
NO PERTANYAAN SS S N TS STS Hasil
TAMPILAN 1 Perpaduan warna pada aplikasi
terlihat bagus
3 10 1 0 0 82.86%
2 Penempatan tombol pada menu utama bagus
2 12 0 0 0 82.86%
3 Tampilan aplikasi secara keseluruhan terlihat menarik dalam mendapatkan informasi yang dibutuhkan
FUNGSI
1 Aplikasi dapat berjalan dengan baik 5 9 0 0 0 87.14% 2 Semua menu dapat menampilkan
informasi yang diperlukan
4 8 2 0 0 82.86%
3 Informasi yang ditampilkan lengkap 3 6 5 0 0 77.14% 4 Aplikasi dapat digunakan untuk
pemesanan makanan
6 7 1 0 0 87.14%
5. Simpulan
Berdasarkan dari aplikasi yang dibuat, maka dapat ditarik kesimpulan dari penelitian ini : (1) Aplikasi Pemesanan Makanan berbasis MVC dapat berjalan baik pada platform Android dengan menggunakan teknologi Xamarin. (2) Teknologi Xamarin menyediakan library (.NET Nugets) sendiri, untuk mendukung developer dalam membuat aplikasi. (3) Teknologi LINQ (Language Integrated Query) didalam Xamarin, memudahkan untuk mencari data yang diinginkan (dalam kasus menghapus data pada daftar menu pesanan). (4) Android
Manifest Memiliki kelebihan sendiri yaitu, dengan disediakannya kebutuhan
permission aplikasi sehingga, developer tidak perlu membuat kode permission
secara manual. (5) Teknologi Xamarin memiliki animasi transisi antar activity
sehingga, saat perpindahan dari satu activity ke activity yang lain memberikan efek animasi seperti yang ditentukan oleh developer. (6) Resource yang digunakan cukup besar untuk membuat aplikasi. (7) Library yang digunakan harus diunduh secara online (tidak dapat diduplikat).
6. Daftar Pustaka
[1]. Chandna, Ankit, Neetu Sharma. 2015. Xamarin for Android Application. International Journal of Computer Science and Mobile Computing.
[2]. Ristiono, Agung. 2009 . Perancangan Aplikasi Mobile Web Pemesanan Barang pada Minimarket, Salatiga : Fakultas Teknologi Informasi. Universitas Kristen Satya Wacana.
[3]. Suyanto, William Christanto. 2011 . Perancangan dan Implementasi Sistem Reservasi Foodcourt berbasis web dengan Memanfaatkan Koneksi WiFi, Salatiga : Fakultas Teknologi Informasi. Universitas Kristen Satya Wacana. [4]. Xamarin. 2016. Introduction to Mobile Development. https://
developer.xamarin.com/guides/cross-platform/getting_started/ introduction_to_mobile_development/. diakses tanggal 30 Juli 2016. [5]. Sidik, Betha. 2012. Pemrograman PHP. Bandung : Informatika Bandung. [6]. Kreger, H. 2001. Web-Services Conceptual Architecture (WSCA 1.0).
USA: IBM Software Group.
