Anda di halaman 1dari 9

Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

IMPLEMENTASI JSON PARSING


PADA APLIKASI MOBILE E-COMMERCE
Studi Kasus : CV V3 Tekno Indonesia
Bhakti Destian Wijaya1, Fenty E.M.A2, dan Andrew Fiade 3
1,2,3
Program Studi Teknik Informatika, Fakultas Sains dan Teknologi
Universitas Islam Negeri Syarif Hidayatullah Jakarta
1
destian.bhakti@gmail.com
2
fenty.eka@uinjkt.ac.id
3
andrew_fiade@uinjkt.ac.id

Abstrak: Sistem operasi Android saat ini merupakan salah satu dari sekian banyak sistem operasi pada
smartphone yang sedang mengalami pertumbuhan pesat di dunia, khususnya di Indonesia. CV Vitiga
Tekno Indonesia bergerak di bidang pemasaran gadget membutuhkan media marketing yang dapat
diakses secara online selain website yaitu melalui smartphone. Oleh karena itu penelitian ini berfokus
pada bagaimana membuat aplikasi mobile e-commerce pada smartphone Android, dengan cara
mengambil data yang berasal dari website, dan kemudian ditampilkan ke dalam sebuah aplikasi,
menggunakan metode HTTP Connection dan JSON Parsing. Pembuatan aplikasi menggunakan bahasa
pemrograman Java, dengan bantuan tools IDE Eclipse dan MySQL untuk database server. JSON
berkomunikasi melalui Application Program Interface (API) bertujuan untuk menghubungkan aplikasi
mobile dengan database yang ada di dalam server. Pada penelitian ini API ialah kumpulan source code
PHP, yang isinya adalah query untuk mengambil data dari website, yang hasilnya di-encode ke dalam
bentuk JSON.
Kata Kunci: Mobile e-commerce, JSON Parsing, Application Program Interface (API).

Abstract: Nowadays, Android operating sistem is marketing untuk menjangkau para konsumennya.
one of the existing operating systems on
Dengan bertumbuh pesatnya sistem operasi
smartphones that growing rapidly. CV Vitiga
Tekno Indonesia is a company in the marketing Android, CV V3 Tekno Indonesia ingin
gadget requires marketing media that can be
mempunyai sistem dan media marketing yang baru
accessed online via smartphone. Therefore, this
research focuses on how to make a mobile e- selain website.
commerce application on the Android
smartphone, by taking data that comes from a
website, and then show into a user as an
application, using the HTTP Connection method
through JSON Parsing. The mobile e-commerce
application is built using java programming
language / IDE Eclipse and MySQL tools for the
database server. JSON, communicates through
Application Program Interface (API), aims to
connect mobile applications with the existing Gambar 1. Peningkatan transaksi perdagangan gadget selama
database on the server. In this study, API is a tahun 2013 melalui www.vitigaon.com
collection of queries that retrieve data from the
website in PHP language. The results are
encoded into JSON form. Berdasarkan Gambar 1, diketahui bahwa
Keywords: Mobile e-commerce, JSON parsing, selama tahun 2013 ada peningkatan transaksi
Application Program Interface (API).
perdagangan gadget melalui website. Hal ini
I. PENDAHULUAN menunjukkan adanya minat konsumen yang cukup
Saat ini, CV V3 Tekno Indonesia adalah sebuah besar untuk bertransaksi secara online. Oleh karena
perusahaan yang menjual berbagai macam gadget itu, perlu dilakukan terobosan baru untuk memberi
dan menggunakan website sebagai media kemudahan konsumen bertransaksi melalui

www.ejournal.unib.ac.id 1
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

smartphone yaitu dengan membuat aplikasi Berdasarkan latar belakang tersebut diatas,
berbasis Android tentang vitigaon.com. Aplikasi maka tujuan penelitian ini adalah membuat sebuah
ini dibuat dengan mengacu pada database website aplikasi mobile e-commerce pada smartphone
vitigaon.com sehingga data yang ditampilkan akan Android, dengan menerapkan JSON parsing untuk
sama dengan yang ada di website. menampilkan data dari website. Pada aplikasi yang
Aplikasi e-commerce yang diakses atau diinstal dibuat, terdapat sistem transaksi Business-To-
pada smartphone disebut juga mobile e-commerce. Business (B2B) dan Business-To-Consumer (B2C).
Aplikasi ini memakai teknologi JSON Parsing Sistem B2B terjadi antara CV V3 Tekno Indonesia
yang ada di dalam android melalui HTTP dengan mitra bisnisnya (para Reseller) dan B2C
Connection. Sehingga aplikasi website yang ada adalah antara CV V3 Tekno Indonesia dengan
saat ini dapat terintegrasi dengan aplikasi yang ada pengguna akhir barang dagangan.
di handset. Hal ini menyebabkan jika terjadi Sebelum melaksanakan penelitian dilakukan
perubahan data di dalam sisi aplikasi website, jajak pendapat kepada 50 orang pengguna
perubahan data tersebut terjadi pada aplikasi smartphone yang diantaranya adalah konsumen
handset. Dibandingkan dengan hanya sekedar CV V3 Tekno Indonesia, mengenai perlu
menggunakan webview, tentunya JSON Parsing dibuatnya aplikasi mobile e-commerce untuk
akan lebih unggul dari segi resource yang memudahkan transaksi. Hasilnya adalah 64%
dikeluarkan ketika memuat content yang berasal responden menjawab perlu adanya aplikasi yang
dari aplikasi website. menunjang transaksi perdagangan di smartphone.
Webview adalah sebuah component yang ada di Dengan demikian hasil penelitian ini diharapkan
dalam sistem operasi Android yang berfungsi dapat membuktikan manfaat JSON Parsing pada
untuk memuat sebuah tampilan website ke dalam pembuatan aplikasi mobile e-commerce baik bagi
bentuk tampilan mobile web. Webview pemilik bisnis maupun kosumennya.
menampilkan secara serupa dengan tampilan
II. LANDASAN TEORI
sesungguhnya di desktop. Webview memuat sendiri
2.1. Sekilas Tentang JSON (Java Script Object
semua atribut yang ada di website seperti button,
Notation)
text, image dan lain sebagainya dengan format
JSON (Java Script Object Notation) adalah
HTML. Tentunya aktifitas ini memerlukan
format pertukaran data yang bersifat ringan,
konsumsi data yang lebih banyak. Berbeda dengan
disusun oleh Douglas Crockford. Fokus JSON
JSON Parsing dalam HTTP Connection, tampilan
adalah pada representasi data di website
yang baru dari sisi aplikasi mobile dapat dibuat
[1][2][4][5]. JSON dirancang untuk memudahkan
dengan cara memilih sendiri data atau informasi
pertukaran data pada situs dan merupakan
apa saja yang ingin ditampilkan pada aplikasi.
perluasan dari fungsi-fungsi javascript.
Dengan demikian pada saat aplikasi berjalan,
Contoh teks php dalam memformat hasil query
aplikasi hanya akan memuat jenis content yang
berupa format JSON:
sudah ditentukan dan tidak akan memuat content
<?php
dari website secara keseluruhan persis seperti
include_once("conn.php");
website aslinya.
$sql = "SELECT * FROM penjualan";

2 www.ejournal.unib.ac.id
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

$query = mysql_query($sql); Pada penelitian ini API ialah kumpulan source


$data = array(); code berbasis PHP, yang isinya adalah Query
while($row=mysql_fetch_object($query)) untuk mengambil data dari website, yang hasilnya
{$data[] = $row;} di-encode ke dalam bentuk JSON. Pada saat
$response aplikasi mobile mengirimkan request untuk
array('status'=>"Ok",'item'=>$data); menampilkan data (SELECT * FROM) dari
echo json_encode($response) website, API akan meneruskannya sesuai dengan
?> Query yang tepat untuk menampilkan data
Luaran JSON dari kode diatas adalah sebagai (SELECT * FROM). Setelah data diambil,
berikut : kemudian di- ENCODE ke dalam bentuk JSON,
{"status":"Ok","item":[{"id":"1","bulan":"Janu dan diteruskan ke dalam aplikasi mobile. Di dalam
ari","total":"700"},{"id":"2","bulan":"Februari","t aplikasi mobile, JSON tersebut di-parsing ke
otal":"400"},{"id":"3","bulan":"Maret","total":"20 dalam bentuk yang kita inginkan, misalnya dalam
0"},{"id":"4","bulan":"April","total":"800"},{"id": bentuk list. Gambar 2 menunjukkan arsitektur
"5","bulan":"Mei","total":"700"},{"id":"6","bulan JSON parsing.
":"Juni","total":"230"},{"id":"7","bulan":"Juli","t
otal":"400"},{"id":"8","bulan":"Agustus","total":"
350"},{"id":"9","bulan":"September","total":"800"
},{"id":"10","bulan":"Oktober","total":"350"},{"id
":"11","bulan":"November","total":"400"},{"id":"
12","bulan":"Desember","total":"600"}]}

2.2. JSON parsing


Penggunaan JSON Parsing dalam HTTP
Connection ini bertujuan untuk memberi Gambar 2. Arsitektur JSON parsing

kemudahan bagi user ketika menggunakan aplikasi


III. ANALISIS SISTEM BERJALAN
ini. Dengan adanya JSON Parsing dalam HTTP
Pada Gambar 3 menunjukkan sistem yang saat
Connection, informasi yang ada didalam website
ini berjalan di CV V3 Tekno Indonesia. Saat ini,
dapat ditampilkan di dalam sebuah aplikasi
perusahaan menggunakan website sebagai media e-
mobile[3]. Hal ini menyebabkan aplikasi mobile
commmerce untuk menjangkau pelanggannya.
tidak perlu menampilkan seluruh content yang ada
Calon pembeli dapat mengakses website
didalam website seperti halnya pada mobile web
perusahaan untuk melakukan transaksi maupun
browser. Aplikasi android akan memilih jenis
hanya sekedar melihat item. Di dalam website tidak
konten yang ingin ditampilkan, seperti halnya
tersedia fitur review item yang lebih lengkap
gambar, item description, dan lain-lain.
sehingga calon pembeli dapat melihat review item
Dalam JSON Parsing, kita membutuhkan API
melalui mesin pencari Google. Setelah melakukan
(Application Program Interface) yang berfungsi
pemesanan, pembeli melakukan konfirmasi
untuk menghubungkan antara aplikasi mobile dan
pembayaran dengan cara menelpon langsung ke
aplikasi website[3].
Customer Service dari CV V3 Tekno Indonesia,

www.ejournal.unib.ac.id 3
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

ataupun melalui e-mail yang berisikan bukti 1. Semua kegiatan yang ada di dalam e-commerce
pembayaran yang di upload. Setelah itu CV V3 (order, konfirmasi pembayaran, permintaan
Tekno Indonesia meresponnya dengan cara status) dapat dilakukan di dalam satu aplikasi
mencocokannya dengan data di database. (mobile).
2. Data yang ditampilkan di dalam aplikasi
berasal dari database website vitigaon.com.
sehingga data yang ada di dalam website sama
dengan data yang ditampilkan di aplikasi
mobile.
3. Data exchange menggunakan format JSON
dengan metode Parsing dalam HTTP

Gambar 3. Rich Picture Sistem Berjalan


Connection
4. Pembayaran dilakukan dengan cara transfer.
Berdasarkan rich picture sistem yang berjalan
5. Konfirmasi pembayaran dilakukan dengan cara
pada saat ini, penulis melakukan sebuah analisa
mengisi form didalam aplikasi
terkait permasalahan yang ada.
6. Permintaan status transaksi dilakukan di dalam
1. Dengan tampilan website yang statis seperti
aplikasi dengan mengirimkan nomor invoice-
pada saat ini, para calon pembeli akan kesulitan
nya.
ketika mengakses websitenya lewat mobile
phone, khususnya Android. Sehingga penulis
berkesimpulan, perlu dibangun sebuah aplikasi
berbasis Android untuk menjangkau calon
pembeli yang mengaksesnya lewat mobile
phone.
2. Dengan website yang ada pada saat ini, hanya
terdapat fitur pemesanan saja. Sehingga
kegiatan lain yang termasuk di dalam e-
commerce, seperti halnya konfirmasi
pembayaran, dan permintaan status transaksi,
tidak dapat dilakukan di dalam satu aplikasi Gambar 4. Rich Picture Sistem Usulan

(aplikasi). Sehingga penulis berkesimpulan


4.2 Metode Pembayaran
perlu di buat sejumlah fitur seperti konfirmasi
Pada saat pembeli telah selesai melakukan
pembayaran, permintaan status, dan review item
transaksi, pembeli akan mendapatkan email
yang akan ada di dalam satu aplikasi (mobile).
konfirmasi dari vitigaon.com berupa detail pesanan
IV. EKSPERIMEN dan jumlah harga beserta nomor Invoice-nya.
4.1 Gambaran Sistem Yang Diusulkan Kemudian pembayaran dilakukan dengan cara
Berdasarkan analisis yang dilakukan, penulis transfer bank sesuai yang tertera di invoice. Pada
mengusulkan sebuah sistem yang baru dengan saat transfer, pembeli diharuskan mengirim
penjelasan sebagai berikut (Gambar 4): sejumlah uang sesuai dengan total transaksi yang

4 www.ejournal.unib.ac.id
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

dilakukan ditambah dengan nomor invoice 3 digit Berdasarkan Gambar 5 mengenai arsitektur
dibelakangnya. Contoh penulisan jumlah yang aplikasi, secara umum gambaran sistem sebagai
harus ditransfer oleh pembeli dapat dilihat pada berikut :
Tabel 1. - Aplikasi menampilkan data dari website
Tabel 1. Contoh Jumlah Pembayaran dengan metode GET
Jumlah transaksi Invoice Jumlah yang - Aplikasi mengirim data pesanan (order),
number harus di transfer
konfirmasi pembayaran dan status order
Rp. 4.000.000 111 Rp. 4.000.111
dengan metode POST
Hal ini bertujuan untuk memudahkan - Aktivitas create dan see review menggunakan
vitigaon.com dalam melacak pembeli yang sudah metode POST dan GET secara bergantian.
melakukan transfer. Selanjutnya vitigaon.com akan - Proses pendaftaran (register) dan masuk ke
mengecek apakah sesuai dengan form konfirmasi aplikasi (login) menggunakan metode POST
yang telah di isi oleh pembeli jika sudah dan GET.
melakukan pembayaran.
4.5 Perancangan sistem
4.3 Perancangan entitas 4.5.1 Menentukan Aktor dan Membuat Use Case
Pada tahap ini dirancang dan ditentukan entitas- Tabel 2. Identifikasi Aktor

entitas yang terdapat di dalam sistem. Entitas- No Aktor Deskripsi


1 Buyer
Pengguna aplikasi yang
entitas tersebut adalah :
berperan sebagai pembeli
1. Seller (vitigaon.com) yang membeli product
dalam satuan eceran.
2. User untuk Reseller
(B2C)
3. User untuk grosir 2 Reseller Pengguna aplikasi yang
berperan sebagai pembeli
4. Kategori item
yang membeli product
5. Object item dalam satuan grosir. (B2B)
6. Cart Reseller dapat melihat tutorial penggunaan

7. Tutorial aplikasi, review dari gadget yang ada didalam

8. Review aplikasi, dan juga dapat login ke dalam aplikasi


atau daftar sebagai user jika belum terdaftar.
4.4 Perancangan Arsitektur Aplikasi Reseller juga dapat melihat previlege bila menjadi
user dengan level Reseller (Gambar 6).

System

Tampil Tutorial Aplikasi

Tampil Previlege

Tampil Review

<<include>>
<<include>>
Tampil Log In
Reseller
Tampil Register
Tampil Log Out

Gambar 5. Arsitektur aplikasi

Gambar 6. Usecase Diagram Reseller Bagian 1

www.ejournal.unib.ac.id 5
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

System informasi yang ditampilkan di dalam aplikasi yang


<<include>>
Tampil Detail Item
Tampil Add To Cart
dibuat, sama dengan yang ditampilkan di aplikasi
<<include>>

<<include>> Tampil Item Berdasarkan Kategori


website. Sehingga transaksi yang sedang

Tampil Kategori
berlangsung di aplikasi web maupun mobile dapat
Tampil Ubah Password berjalan langsung secara real time dan tersimpan di
Reseller
<<include>> Tampil Edit Cart

Tampil Trolley Tampil Form Pemesanan


dalam satu database.
Tampil Detail User
<<include>>
Tampil Delete Cart

<<include>>
Berikut adalah rincian database yang penulis
Tampil Status Pemesanan <<include>>
Tampil Send Pemesanan
Tampil Order Pesanan <<include>> gunakan :
<<extend>>
Tampil Cari ID

Nama database : vitigaDB


Gambar 7. Usecase Diagram untuk Reseller bagian 2 Lokasi database : www.vitigaon.com
Setelah login, proses yang terjadi sebagai berikut Jumlah tabel : 8 tabel
(Gambar 7):
4.5.4 Pembuatan API (Application Program
- Reseller dapat melihat bermacam-macam
Interface)
kategori untuk memulai transaksi. Setelah
Application Program Interface (API) bertujuan
sesuai dengan keinginan, reseller dapat
untuk menghubungkan aplikasi mobile dengan
menambahkan item yang dipilihnya ke dalam
database yang ada di dalam server. API ini
sebuah cart. Ketika sudah selesai dalam
nantinya untuk memenuhi seluruh jenis fungsi
memilih item untuk dibeli, reseller dapat
yang dibutuhkan di dalam aplikasi. Seperti fungsi
melanjutkan ke proses berikutnya yaitu tampil
tampil item, fungsi edit item, fungsi POST
trolley.
transaksi, dan lain sebagainya[5]. API ini pada
- Di dalam proses trolley ini, reseller dapat
akhirnya akan di-hosting secara online sehingga
mengedit dan menghapus cart nya jika ingin
dapat diakses secara online (Gambar 8).
membatalkan transaksi. Setelah selesai, reseller
dapat memesan barang dengan cara mengisi
form pemesanan yang disediakan oleh aplikasi.
- Kemudian data dari form pemesanan tersebut
akan masuk ke dalam database aplikasi. Selain
itu reseller juga dapat mengedit user profilnya
seperti mengganti password yang baru untuk
proses log in. Reseller juga dapat melihat status
pengiriman atau pemesanan dengan cara
memasukan ID transaksi. Gambar 8. Rancangan Interface

4.5.2 Perancangan database 4.5.5 Implementasi JSON Parsing


Database yang digunakan adalah database 1. Aplikasi mobile ingin menampilkan data
yang ada pada server aplikasi website produk dari database website. Yang pertama
vitigaon.com, yang telah ditambahkan sesuai kali di lakukan, adalah membuat API. API
dengan kebutuhan untuk fitur tambahan pada berisi Query SELECT*FROM. Seperti di
aplikasi mobile. Dengan demikian, data dan bawah ini :

6 www.ejournal.unib.ac.id
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

akan dilanjutkan ke dalam aplikasi mobile untuk


di-parse. Caranya sebagai berikut: dari sisi aplikasi
android, yang pertama di lakukan adalah
menentukan tampilan antarmuka untuk
menampilkan JSON yang akan di-parsing
nantinya.

Source code tersebut berbasis PHP, berisikan


Query SELECT, dan jika data ditemukan, data di
echo ke dalam bentuk JSON (echo
json_encode).
Jika source code tersebut dijalankan, maka
akan tampil JSON code seperti di bawah ini :

Kemudian ketika dibangun lagi sebuah Class yang


akan digunakan untuk proses parsing

maka terbentuk class dengan METHOD JSON


parser, dan dengan proses inisialisasi dari API
dalam bentuk URL.
Kemudian, ketika dibuat sebuah class yang
akan dieksekusi kemudian ketika proses
Ini adalah bentuk JSON dari data hasil Query Connecting ke dalam database:
dari API yang di buat. Selanjutnya, JSON code ini

www.ejournal.unib.ac.id 7
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

Class tersebut berisikan 3 method :


- onPreExecute : adalah metode yang akan di
proses sebelum proses koneksi dilakukan.

- doInBackGround : adalah metode yang akan di


proses di dalam background aplikasi. Disinilah
Gambar 9 adalah hasil akhir tampilan mobile
proses PARSING terjadi.
application.

I Phone 4s

300.000

Mac Book Pro

600.000
MacBook Air

800.000

OS X Lion

100.000

- onPostExecute : adalah metode yang akan di Gambar 9. Tampilan Mobile Application

proses setelah Parsing dilakukan.


4.6 Implementasi
4.6.1 Instalasi API ke Internet
Tahap ini, API (Application Program Interface)
yang dibuat diinstal ke dalam hosting internet.
Proses ini dilakukan dengan tujuan API dapat
berjalan secara online. API di-hosting ke dalam
server website dari vitigaon.com. Sehingga untuk
mengakses nya dapat melalui URL :
vitigaon.com/API .

8 www.ejournal.unib.ac.id
Jurnal Pseudocode, Volume 2 Nomor 1, Februari 2015, ISSN 2355 5920

4.6.2 Instalasi Aplikasi ke dalam Handset f) Proses konfirmasi pembayaran dapat


Proses ini dilakukan untuk mengetahui apakah berjalan sesuai dengan harapan
aplikasi yang dibuat dapat berjalan di perangkat g) Proses meminta status transaksi dapat
sesungguhnya. Berikut adalah proses instalasi berjalan sesuai dengan harapan.
aplikasi ke dalam handset.
V. KESIMPULAN DAN SARAN
5.1 Kesimpulan
Berdasarkan hasil penelitian diperoleh
kesimpulan:
1. Aplikasi mobile e-commerce yang
dikembangkan oleh CV V3 Tekno
menggunakan data yang berasal dari satu
database yang sama, yaitu yang digunakan
oleh website.
2. Manipulasi data yang berasal dari database
Gambar 10. Instalasi di Handset
vitigaon.com dilakukan dengan data exchange
4.6.3 Pengujian Blacbox
dalam format JSON, yang kemudian di-parse
Pengujian Black Box dilakukan untuk
ke dalam aplikasi Android.
mengetahui apakah fungsi dan alur aplikasi dapat
berjalan sesuai dengan harapan. 5.2 Saran
1. Fungsi register account dapat berjalan sesuai 1. Dalam aplikasi ini, diharapkan adanya fitur
dengan harapan. dimana user / buyer dapat melihat sendiri
2. Proses log in untuk masing-masing user dapat status transaksinya sehingga tidak
berjalan sesuai dengan harapan. memerlukan fitur kirim SMS untuk
3. Proses menampilkan halaman Reseller dan melakukannya.
halaman buyer masing-masing dapat berjalan 2. Diharapkan dalam aplikasi ini terdapat fitur
sesuai dengan harapan. upload gambar ketika ingin melakukan
4. Proses transaksi buyer dan transaksi Reseller konfirmasi pembayaran.
dapat berjalan sesuai dengan harapan, di
REFERENSI
antaranya :
[1] Chasseur, Craig., Li, Y., dan Patel, Jm. Enabling JSON
a) Proses tampil kategori dapat berjalan sesuai Document Stores in Relational Systems. Sixteenth
International Workshop on the Web and Databases
dengan harapan (WebDB 2013). 2013.
b) Proses memilih item dapat berjalan sesuai [2] Google. Package Summary. HTTP://developer.android.
com/reference/android/app/package-summary.html di akses
dengan harapan. pada 10 September 2014. 2014.

c) Proses edit trolley dapat berjalan sesuai [3] Peng, Dunlu., Cao, Lidong., dan Xu, Wenjie. Using JSON
for Data Exchanging in Web Service Application. Journal
dengan harapan. of Computational Information Sistem, volume 16, page
5883-5890. 2011.
d) Proses mengirim pesanan dapat berjalan
[4] Safaat, Nazruddin. Android (Pemograman Aplikasi Mobile
sesuai dengan harapan Smartphone dan Tablet PC Berbasis Android). Informatika,
Bandung. 2011.
e) Proses menerima email konfirmasi dapat
[5] W3Schools, JSON Tutorial, 2013,
berjalan sesuai dengan harapan. HTTP://www.w3schools.com/json/. 2013..

www.ejournal.unib.ac.id 9