T1__Full text Institutional Repository | Satya Wacana Christian University: Penggunaan Teknologi Xamarin Berbasis MVC: Studi Kasus Pemesanan Makanan T1 Full text
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
Salatiga
Januari 2017
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
(fitur pesan yang dapat membantu mengingat sesuatu) dan sebagainya. Kemudian
muncul generasi smartphone atau ponsel pintar dengan kecenderungan seperti
ponsel biasa, namun memiliki kemampuan-kemampuan seperti PDA. Smartphone
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 share code across multiple platforms.
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.
Menurut William Christanto Suyanto, 2011. Dalam penelitiannya yang
berjudul “Perancangan dan implementasi sistem reservasi foodcourt berbasis web
dengan memanfaatkan koneksi wifi”[3] menyimpulkan bahwa koneksi wifi dapat
dianfaatkan untuk merancang sistem reservasi berbasis web dan proses
pemesanan dapat dilakukan menggunakan handphone supaya lebih efektif.
Xamarin
Xamarin adalah unik karena menggabungkan semua kekuatan platform
(Android, iOS dan Windows App) dan menambahkan sejumlah fiturnya
sendiri[4], yaitu: (1) Complete Binding 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) Mobile Cross Platform Support.
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
Gambar 1 Tahapan 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.
Database
(Sqlite)
Model
Controller
View
Webservice
(PHP)
Database
Server
(MYSQL)
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, sequence diagram, dan
class diagram.
Pada use case diagram, pengguna terlebih dahulu terdaftar dalam sistem
untuk dapat mengakses semua fitur yang disediakan oleh aplikasi. Pengguna dapat
mengakses beberapa menu antara lain: lihat data makanan, memesan makanan,
dan lihat tagihan. Pengguna dapat mengakses menu dalam aplikasi mobile setelah
melakukan login ke dalam sistem.
Activity Diagram 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
tampilkan register
user
register
mengisi data diri
register user
menambah
data user
Invalid
Cek user
valid
sukses register
Selesai
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
register berhasil dilakukan. Namun jika data yang dimasukan sudah ada, sistem
akan menampilkan pemberitahuan kepada user bahwa register telah gagal.
Pembeli Login Activity
Pembeli
Aplikasi Mobile
Web Service
Mulai
tampilkan login
user
Login
mengisi username
dan password
Login user
Invalid
Yes
ambil data
user
Cek user
Daftar Pesanan
valid
tampilkan menu
makanan
No
No
Pilih menu
makanan
tampilkan jumlah
pesan
Yes
masukan jumlah
pesan
Database (Sqlite)
simpan data pesanan
tampilkan data
pesanan
Database (Sqlite)
Hapus data
pesanan
No
Yes
hapus data pesanan
No
Order pesanan
Yes
order user
tambah data
order
sukses order
Database (Sqlite)
hapus semua data
pesanan
tampilkan toast
sukses order
Selesai
Gambar 5 Rancangan Activity Diagram Order user pada Aplikasi Mobile
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.
Pembeli
Aplikasi Mobile
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 Rancangan Sequence Diagram Register User pada Aplikasi Mobile
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.
Pembeli
Aplikasi Mobile
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 Sequence Diagram 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
dan password yang dimasukkan pengguna, controller akan meneruskan data
tersebut ke model untuk selanjutnya dicek dalam tabel di database. Data
pengguna yang didapatkan akan dikembalikan ke controller dan diteruskan ke
aplikasi Mobile. Aplikasi desktop akan menampilkan daftar menu masakan ke
pengguna.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
pilih menu
mengarahkan
cek data order
cek data order
return data order
return data order
return data order
Tampilkan jumlah pesan
mengisi
jumlah pesanan
mengarahkan
menambah data order
menambah data order
return data order
return data order
return data order
Gambar 8 Rancangan Sequence Diagram insert Order ke Daftar Pesan pada Aplikasi Mobile
Gambar 8 menjelaskan mengenai rancangan sequence diagram insert Order
ke Daftar Pesan, dimulai dengan memilih menu pada daftar menu yang
ditampilkan. Saat pengguna memilih salah satu menu, aplikasi Mobile akan
menghubungi controller dengan membawa idFood dan diteruskan ke Model untuk
selanjutnya dicek di dalam database local. Jika data dengan id tersebut masih
kosong maka akan ditampilkan dialog jumlah pesan dengan nilai default nol.
Setelah pengguna memasukan jumlah pesanan, aplikasi akan menyimpan kedalam
tabel order sebagai tempat penyimpanan sementara sebelum dikirim ke database
server.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
pilih menu yang diubah
mengarahkan
cek data order
cek data order
return data order
return data order
return data order
Tampilkan jumlah pesan
mengisi
jumlah pesanan
mengarahkan
mengubah data order
mengubah data order
return data order
return data order
return data order
Gambar 9 Rancangan Sequence Diagram 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
dan diteruskan ke Model untuk selanjutnya dicek di dalam database local. Jika
data dengan id tersebut ada maka akan ditampilkan dialog jumlah pesan dengan
nilai jumlah pesanan sesuai yang terdapat pada database local. Setelah pengguna
mengubah jumlah pesanan, aplikasi akan menyimpan kembali kedalam tabel
order.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
pilih daftar pesanan
mengarahkan
ambil data order
ambil data order
return data order
return data order
tampil daftar pesanan
return data order
hapus pesanan
mengarahkan
hapus data order
hapus data order
return data order
return data order
return data order
Gambar 10 Rancangan Sequence Diagram 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
database local. jika data dengan id yang sama ada, maka aplikasi mobile akan
melakukan penghapusan data dengan id tersebut.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
Tabel Order (Server)
pilih daftar pesanan
mengarahkan
ambil data order
ambil data order
return data order
return data order
tampil daftar pesanan
return data order
order pesanan
mengarahkan
kirim data order
kirim data order
return sukses
return sukses
delete all data order
delete all data order
return data order
return data order
return data order
toast sukses order
Gambar 11 Rancangan Sequence Diagram Send Data Pesanan ke Database Server 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
Class diagram yang digunakan dalam aplikasi mobile dapat dilihat pada gambar
12.
Food Delivery
Food
User
Orders
- IdFood : int
- Nama : string
- Harga : int
- Foto : string
- IdUser : int
- Nama : string
- alamat : string
- telp : string
- username : string
- password : string
- idOrder : int
- idUser : int
- idFood : int
- namaFood : string
- jumlah : int
- harga : int
- total : int
Controller
+ return json()
+ upload json()
+ insert()
+ update()
+ delete()
Lihat Data Food
Lihat Data Orders
+ read
+ read
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.
Aplikasi mobile digunakan untuk memesan makanan melalui menu yang
disediakan. Karena pemesanan membutuhkan data pengguna yang memesan,
maka fitur register user baru dan login dibutuhkan. Fitur login akan memberikan
identitas kepada pengguna ketika memesan makanan (atas nama siapa makanan
yang dipesan). Berikut tampilan desain menu pada gambar 13.
a
b
c
d
e
f
g
Gambar 13 Desain Menu Aplikasi Mobile
Gambar 13 a merupakan menu awal pada aplikasi mobile. Pada menu awal
ini, pengguna yang tidak memiliki username dan password harus mendaftar
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
Kondisi
Pengujian
Hasil yang
diharapkan
Hasil Uji
Status
Proses
register
Register
berhasil
Register berhasil
Sesuai
Register gagal
Register gagal
Sesuai
Login berhasil
Login berhasil
Sesuai
Login gagal
Login gagal
Sesuai
Proses
login
Username :
terisi
Password :
terisi
Username :
sudah ada
Username :
benar
Password :
benar
Username :
salah
Password :
Daftar
menu
makanan
Pilih item
menu
makanan
Tombol
save pada
jumlah
pesan
Daftar
pesanan
makanan
Tombol
order
benar
Username :
benar
Password :
salah
Ada daftar
menu
makanan
Memilih
menu
makanan
Menekan
tombol save
Ada daftar
pesanan
makanan
Menekan
tombol order
Login gagal
Login gagal
Sesuai
Data menu
makanan
ditampilkan
Jumlah menu
pesan
ditampilkan
Data pesanan
dimasukan
kedaftar
pesanan
makanan
Data pesanan
makanan
ditampilkan
Data pesanan
makanan
terkirim
Data menu
makanan
ditampilkan
Jumlah menu pesan
ditampilkan
Sesuai
Data pesanan
dimasukan kedaftar
pesanan makanan
Sesuai
Data pesanan
makanan
ditampilkan
Data pesanan
makanan terkirim
Sesuai
Sesuai
Sesuai
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
1
2
3
1
2
3
TAMPILAN
Perpaduan warna pada aplikasi
terlihat bagus
Penempatan tombol pada menu utama
bagus
Tampilan aplikasi secara keseluruhan
terlihat menarik
KEMUDAHAN
Aplikasi dapat digunakan dengan
mudah
Pilihan menu yang tersedia mudah
dimengerti
Aplikasi ini dapat menghemat waktu
dalam mendapatkan informasi yang
dibutuhkan
SS
S
N
TS STS
Hasil
3
10
1
0
0
82.86%
2
12
0
0
0
82.86%
4
8
2
0
0
82.86%
6
8
0
0
0
88.57%
4
9
1
0
0
84.29%
3
9
2
0
0
81.43%
1
2
3
4
FUNGSI
Aplikasi dapat berjalan dengan baik
Semua menu dapat menampilkan
informasi yang diperlukan
Informasi yang ditampilkan lengkap
Aplikasi dapat digunakan untuk
pemesanan makanan
5
4
9
8
0
2
0
0
0
0
87.14%
82.86%
3
6
6
7
5
1
0
0
0
0
77.14%
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.
[7]. Nugroho, Adi. 2010. Rekayasa Perangkat Lunak Berorientasi Objek dengan
Metode USDP. Yogyakarta : Andi.
(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
Salatiga
Januari 2017
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
(fitur pesan yang dapat membantu mengingat sesuatu) dan sebagainya. Kemudian
muncul generasi smartphone atau ponsel pintar dengan kecenderungan seperti
ponsel biasa, namun memiliki kemampuan-kemampuan seperti PDA. Smartphone
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 share code across multiple platforms.
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.
Menurut William Christanto Suyanto, 2011. Dalam penelitiannya yang
berjudul “Perancangan dan implementasi sistem reservasi foodcourt berbasis web
dengan memanfaatkan koneksi wifi”[3] menyimpulkan bahwa koneksi wifi dapat
dianfaatkan untuk merancang sistem reservasi berbasis web dan proses
pemesanan dapat dilakukan menggunakan handphone supaya lebih efektif.
Xamarin
Xamarin adalah unik karena menggabungkan semua kekuatan platform
(Android, iOS dan Windows App) dan menambahkan sejumlah fiturnya
sendiri[4], yaitu: (1) Complete Binding 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) Mobile Cross Platform Support.
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
Gambar 1 Tahapan 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.
Database
(Sqlite)
Model
Controller
View
Webservice
(PHP)
Database
Server
(MYSQL)
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, sequence diagram, dan
class diagram.
Pada use case diagram, pengguna terlebih dahulu terdaftar dalam sistem
untuk dapat mengakses semua fitur yang disediakan oleh aplikasi. Pengguna dapat
mengakses beberapa menu antara lain: lihat data makanan, memesan makanan,
dan lihat tagihan. Pengguna dapat mengakses menu dalam aplikasi mobile setelah
melakukan login ke dalam sistem.
Activity Diagram 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
tampilkan register
user
register
mengisi data diri
register user
menambah
data user
Invalid
Cek user
valid
sukses register
Selesai
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
register berhasil dilakukan. Namun jika data yang dimasukan sudah ada, sistem
akan menampilkan pemberitahuan kepada user bahwa register telah gagal.
Pembeli Login Activity
Pembeli
Aplikasi Mobile
Web Service
Mulai
tampilkan login
user
Login
mengisi username
dan password
Login user
Invalid
Yes
ambil data
user
Cek user
Daftar Pesanan
valid
tampilkan menu
makanan
No
No
Pilih menu
makanan
tampilkan jumlah
pesan
Yes
masukan jumlah
pesan
Database (Sqlite)
simpan data pesanan
tampilkan data
pesanan
Database (Sqlite)
Hapus data
pesanan
No
Yes
hapus data pesanan
No
Order pesanan
Yes
order user
tambah data
order
sukses order
Database (Sqlite)
hapus semua data
pesanan
tampilkan toast
sukses order
Selesai
Gambar 5 Rancangan Activity Diagram Order user pada Aplikasi Mobile
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.
Pembeli
Aplikasi Mobile
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 Rancangan Sequence Diagram Register User pada Aplikasi Mobile
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.
Pembeli
Aplikasi Mobile
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 Sequence Diagram 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
dan password yang dimasukkan pengguna, controller akan meneruskan data
tersebut ke model untuk selanjutnya dicek dalam tabel di database. Data
pengguna yang didapatkan akan dikembalikan ke controller dan diteruskan ke
aplikasi Mobile. Aplikasi desktop akan menampilkan daftar menu masakan ke
pengguna.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
pilih menu
mengarahkan
cek data order
cek data order
return data order
return data order
return data order
Tampilkan jumlah pesan
mengisi
jumlah pesanan
mengarahkan
menambah data order
menambah data order
return data order
return data order
return data order
Gambar 8 Rancangan Sequence Diagram insert Order ke Daftar Pesan pada Aplikasi Mobile
Gambar 8 menjelaskan mengenai rancangan sequence diagram insert Order
ke Daftar Pesan, dimulai dengan memilih menu pada daftar menu yang
ditampilkan. Saat pengguna memilih salah satu menu, aplikasi Mobile akan
menghubungi controller dengan membawa idFood dan diteruskan ke Model untuk
selanjutnya dicek di dalam database local. Jika data dengan id tersebut masih
kosong maka akan ditampilkan dialog jumlah pesan dengan nilai default nol.
Setelah pengguna memasukan jumlah pesanan, aplikasi akan menyimpan kedalam
tabel order sebagai tempat penyimpanan sementara sebelum dikirim ke database
server.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
pilih menu yang diubah
mengarahkan
cek data order
cek data order
return data order
return data order
return data order
Tampilkan jumlah pesan
mengisi
jumlah pesanan
mengarahkan
mengubah data order
mengubah data order
return data order
return data order
return data order
Gambar 9 Rancangan Sequence Diagram 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
dan diteruskan ke Model untuk selanjutnya dicek di dalam database local. Jika
data dengan id tersebut ada maka akan ditampilkan dialog jumlah pesan dengan
nilai jumlah pesanan sesuai yang terdapat pada database local. Setelah pengguna
mengubah jumlah pesanan, aplikasi akan menyimpan kembali kedalam tabel
order.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
pilih daftar pesanan
mengarahkan
ambil data order
ambil data order
return data order
return data order
tampil daftar pesanan
return data order
hapus pesanan
mengarahkan
hapus data order
hapus data order
return data order
return data order
return data order
Gambar 10 Rancangan Sequence Diagram 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
database local. jika data dengan id yang sama ada, maka aplikasi mobile akan
melakukan penghapusan data dengan id tersebut.
Pembeli
Aplikasi Mobile
Controller
Model
Tabel Order (Sqlite)
Tabel Order (Server)
pilih daftar pesanan
mengarahkan
ambil data order
ambil data order
return data order
return data order
tampil daftar pesanan
return data order
order pesanan
mengarahkan
kirim data order
kirim data order
return sukses
return sukses
delete all data order
delete all data order
return data order
return data order
return data order
toast sukses order
Gambar 11 Rancangan Sequence Diagram Send Data Pesanan ke Database Server 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
Class diagram yang digunakan dalam aplikasi mobile dapat dilihat pada gambar
12.
Food Delivery
Food
User
Orders
- IdFood : int
- Nama : string
- Harga : int
- Foto : string
- IdUser : int
- Nama : string
- alamat : string
- telp : string
- username : string
- password : string
- idOrder : int
- idUser : int
- idFood : int
- namaFood : string
- jumlah : int
- harga : int
- total : int
Controller
+ return json()
+ upload json()
+ insert()
+ update()
+ delete()
Lihat Data Food
Lihat Data Orders
+ read
+ read
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.
Aplikasi mobile digunakan untuk memesan makanan melalui menu yang
disediakan. Karena pemesanan membutuhkan data pengguna yang memesan,
maka fitur register user baru dan login dibutuhkan. Fitur login akan memberikan
identitas kepada pengguna ketika memesan makanan (atas nama siapa makanan
yang dipesan). Berikut tampilan desain menu pada gambar 13.
a
b
c
d
e
f
g
Gambar 13 Desain Menu Aplikasi Mobile
Gambar 13 a merupakan menu awal pada aplikasi mobile. Pada menu awal
ini, pengguna yang tidak memiliki username dan password harus mendaftar
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
Kondisi
Pengujian
Hasil yang
diharapkan
Hasil Uji
Status
Proses
register
Register
berhasil
Register berhasil
Sesuai
Register gagal
Register gagal
Sesuai
Login berhasil
Login berhasil
Sesuai
Login gagal
Login gagal
Sesuai
Proses
login
Username :
terisi
Password :
terisi
Username :
sudah ada
Username :
benar
Password :
benar
Username :
salah
Password :
Daftar
menu
makanan
Pilih item
menu
makanan
Tombol
save pada
jumlah
pesan
Daftar
pesanan
makanan
Tombol
order
benar
Username :
benar
Password :
salah
Ada daftar
menu
makanan
Memilih
menu
makanan
Menekan
tombol save
Ada daftar
pesanan
makanan
Menekan
tombol order
Login gagal
Login gagal
Sesuai
Data menu
makanan
ditampilkan
Jumlah menu
pesan
ditampilkan
Data pesanan
dimasukan
kedaftar
pesanan
makanan
Data pesanan
makanan
ditampilkan
Data pesanan
makanan
terkirim
Data menu
makanan
ditampilkan
Jumlah menu pesan
ditampilkan
Sesuai
Data pesanan
dimasukan kedaftar
pesanan makanan
Sesuai
Data pesanan
makanan
ditampilkan
Data pesanan
makanan terkirim
Sesuai
Sesuai
Sesuai
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
1
2
3
1
2
3
TAMPILAN
Perpaduan warna pada aplikasi
terlihat bagus
Penempatan tombol pada menu utama
bagus
Tampilan aplikasi secara keseluruhan
terlihat menarik
KEMUDAHAN
Aplikasi dapat digunakan dengan
mudah
Pilihan menu yang tersedia mudah
dimengerti
Aplikasi ini dapat menghemat waktu
dalam mendapatkan informasi yang
dibutuhkan
SS
S
N
TS STS
Hasil
3
10
1
0
0
82.86%
2
12
0
0
0
82.86%
4
8
2
0
0
82.86%
6
8
0
0
0
88.57%
4
9
1
0
0
84.29%
3
9
2
0
0
81.43%
1
2
3
4
FUNGSI
Aplikasi dapat berjalan dengan baik
Semua menu dapat menampilkan
informasi yang diperlukan
Informasi yang ditampilkan lengkap
Aplikasi dapat digunakan untuk
pemesanan makanan
5
4
9
8
0
2
0
0
0
0
87.14%
82.86%
3
6
6
7
5
1
0
0
0
0
77.14%
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.
[7]. Nugroho, Adi. 2010. Rekayasa Perangkat Lunak Berorientasi Objek dengan
Metode USDP. Yogyakarta : Andi.