RANCANG BAGUN APLIKASI MOBILE eKATALOG BERBASIS IOS SEBAGAI MEDIA BANTU

PENGENALAN PRODUK MIULAN

DESIGN AND DEVELOP MOBILE APPLICATION eKATALOG BASED ON IOS TO INTRODUCE MIULAN HIJAB PRODUCT

Ashari Juang

Mahasiswa Jurusan Teknik Informatika, Universitas Dian Nuswantoro email : asharijuang@me.com

Abstrak: Miulan Hijab adalah produsen hijab dan busana muslim untuk perempuan. Rata-rata

konsumennya untuk saat ini adalah mereka yang aktif menggunakan social media. Media sosial

seperti twitter dan facebook menampilkan produk bersifat timeline (berdasarkan urutan waktu

terkini) sehingga sulit memperlihatkan produk yang terorganisir dengan baik. Ditambah website

miulanhijab.com digunakan sebagai landing page, atau media pemasaran. Tetapi website tersebut

tidak memiliki tampilan optimal jika dibuka menggunakan perangkat iOS. Usaha Miulanhijab kini

sedang berkembang pesat, Miulan membutuhkan media-media alternatif untuk mengembangkan

merek dan usahanya kepada segmen yang lebih tinggi. Jenis penelitian yang digunakan pada tugas

akhir ini merupakan penelitian rekayasa berupa forward engineering. Forward engineering: rekayasa

life cycle dimulai dari plan, analysis, construct, hingga applied. Laporan Penelitian ini akan

menjelaskan bagaimana cara mengembangkan sebuah aplikasi mobile dengan platform iOS sebagai

media bantu pengenalan produk miulan hijab. Kontribusi yang diharapkan adalah memberikan

rancangan untuk pengembang aplikasi mobile ekatalog berbasis iOS. Hal-hal yang telah dilakukan

dan apa yang belum dilakukan terkait pengembangan pada aplikasi ini akan diulas dalam laporan.

Kata Kunci : IOS, Miulan Hijab, eKatalog, Aplikasi Mobile.

Abstract: Miulan Hijab is hijab and muslim clothing manufacturer for women . Average consumer today is for

those who are actively using social media . Social media like facebook and twitter the timeline display products

are ( in order of current time ) so difficult shows a well-organized product .Plus the website miulanhijab.com

used as a landing page , or media marketing . But the website does not have an optimal view when opened

using an iOS device. Her business is now growing rapidly , Miulan require alternative media to develop a brand

and its business to a higher segment. The research used in this thesis is a form of forward engineering

engineering research . Forward engineering : engineering life cycle begins from the plan , analysis , construct ,

until applied. This final report will explain how to develop a mobile app with the iOS platform as the

introduction of auxiliary media products miulan hijab . Contribution is expected to provide a design for a mobile

application developer based eKatalog iOS . The things that have been done and what has not been done related

to the development of this application will be reviewed at the end of the report .

Keywords: IOS, Miulan Hijab, eKatalog, Mobile Applications.

PENDAHULUAN Miulan adalah produsen hijab dan busana muslim untuk perempuan. Sebagai produsen yang sedang berkembang pesat, Miulan memasarkan produknya dengan memanfaatkan sosial media. Pemasaran miulan dilakukan menggunakan online shop, serta gencar promosi melalui sosial media, seperti facebook dan twitter. Rata-rata konsumennya untuk saat ini

adalah mereka yang aktif menggunakan sosial

media, dari usia remaja, dan dari kalangan

menengah. Dari data yang didapat dari miulan

hijab menyebutkan konsumen mereka saat ini

adalah kalangan berpenghasilan menengah

dan usia remaja. Miulan harus memikirkan

media-media alternatif untuk

mengembangkan merek dan usaha kepada

segmen yang lebih tinggi.

Salah satu hipotesa yang teruji dalam artikel pada Journal Of Interactive Marketing tahun 2011 menyebutkan "Menggunakan aplikasi mobile bermerk dapat meningkatkan merek dan meningkatkan pembelian". Dalam artikel tersebut menegaskan bahwa menggunakan aplikasi ini memiliki dampak persuasif yang positif, meningkatkan minat pada merek dan juga kategori produk merek. Relevansi kategori produk memiliki perbedaan, meskipun dalam prakteknya akan sulit untuk meyakinkan orang untuk men-download aplikasi untuk relevansi rendah produk produk. Dua sistem operasi mobile yang paling populer adalah iOS dan android. Berdasarkan hasil survey yang ditulis oleh Fortune CNN mengenai Apple(iOS) dan Samsung(Android) menunjukan bahwa pengguna iOS lebih banyak dari kalangan berpendidikan tinggi, memiliki pendapatan tinggi, dan telah dewasa dibandingkan dengan Samsung (Android) [1]. Apple iOS memiliki 4 layer dimana

Core OS Berada pada layer bawah dan Core

services pada layer kedua dari bawah. Mereka

dengan baik memberikan dukungan dasar

untuk aplikasi mobile seperti database dan

networking support [2]. Sistem operasi ini

memiliki portal penyedia aplikasi mobile dan

konten digital yang disebut AppStore.

Tinjauan Pustaka SDLC

Software Development LifeCycle

(SDLC) adalah siklus hidup pengembangan

sistem yang terdapat didalam rekayasa

perangkat lunak. Lahan dan Perumahan

Permukiman. Tahapan Pengembangan dibagi

menjadi 4 tahap yaitu :

a. Perencanaan

Tahap awal untuk memahami

mengapa sebuah sistem harus dibangun.

Pada fase ini diperlukan analisa kelayakan

dengan mencari data atau melakukan

proses information gathering kepada

pengguna.

b. Analisa

Fase analisa adalah sebuah proses

investigasi terhadap sistem yang sedang

berjalan dengan tujuan untuk

mendapatkan jawaban mengenai

pengguna sistem, cara kerja sistem dan

waktu penggunaan sistem. Dari proses

analisa ini akan didapatkan cara untuk

membangun sistem baru.

c. Rancangan SDLC

Merancang input dalam bentuk

dokumen masukan pada rancangan layout

sistem. Merancang bentuk laporan dan

dokumen-dokumen untuk sistem yang

baru berdasarkan sistem yang sudah ada

atau desain sistem baru. Merancang

submenu (form) pada rancangan layout

sistem.

d. Implementasi SDLC

Melakukan kegiatan pembuatan

spesifikasi sistem dalam bentuk rancangan

kedalam kegiatan sebenarnya dengan

sistem yang telah disepakati bersama

(management dan pengembang).

Aplikasi Mobile

Aplikasi merupakan perangkat lunak

yang berjalan mandiri yang menjawab

kebutuhan bisnis yang terperinci. Setiap

aplikasi berjalan pada sistem operasi seperti

windows, OSX, Ubuntu, dsb. Kini sistem

operasi tidak hanya digunakan pada komputer

atau laptop saja akan tetapi sistem operasi

juga digunakan pada mobile (smartphone)

karena sudah memiliki CPU, Memory dan

perangkat-perangkat lain layaknya sebuah

komputer.

Katalog digital atau eKatalog

Sebuah dokumen maupun informasi

digital yang dibuat untuk memudahkan calon

pelanggan untuk mempelajari sebuah produk

atau layanan secara interaktif dapat disebut

sebagai Katalog Digital [3]. Katalog Digital

merupakan bagian dari strategi pemasaran

(push), dimana email salah satu strategi

digunakan sebagai media distribusi pesan

promosi. Agar dapat menyentuh pelanggan

serta calon pelanggan secara tepat dan

spesifik, maka katalog harus dibuat pada

media digital yang tepat. Salah satu media

digital tersebut adalah Aplikasi Mobile.

Sebuah aplikasi mobile yang dapat di jalankan

pada perangkat telepon dengan mobilitas

tinggi sehingga mudah dibawa kemanapun.

Berbagai informasi produk seperti gambar,

keterangan bahan, harga dan notifikasi dapat

ditampilkan dalam sebuah aplikasi mobile.

Apple Device

Perusahaan apple telah mengeluarkan

berbagai jenis produk, beberapa orang

menyebutnya dengan iDevice. Produk yang

paling banyak dikenal meliputi perangkat

personal komputer dan server (Mac Pro),

Laptop atau sering disebut (MacBook), Mobile

(iPhone), Tablet (iPad) hingga perangkat

pemutar musik (iPod dan iPod Touch).

Iphone adalah jajaran ponsel pintar

yang dirancang dan dipasarkan oleh Apple

Incorporation. Apple memiliki riwayat

percobaan dan kegagalan sampai rilis dari

iPhone, dimana merupakan mobile yang

benar-benar mengubah perkembangan

mobile device. Pada tahun 1988, Apple mulai

perkembangan Newton versi awal dari PDA

tablet. Proyek pertama adalah Newton

Message Pad 100, dirilis pada bulan Agustus

1993 dan yang terakhir adalah MessagePad

2100, dirilis pada bulan November 1997. Garis

produk kemudian berhenti saat kembalinya

Steve Jobs ke Apple pada tahun 1997 [4].

Apple Device

Salah satu bahasa pemrograman

berbasis obyek pertama modern dan luas

(diseminasi) adalah Smalltalk [5]. Smaltalk

dikembangkan pada 1970-an di Xerox PARC di

bawah kepemimpinan Alan Kay dan mulai

dikenal secara luas pada tahun 1980. Tujuan

Objective-C diciptakan oleh Brad Cox dan Tom

Love pada 1986 adalah untuk membangun

baris program seperti Smalltalk dan perilaku

menggunakan C. Objective-C telah dilisensi

oleh NeXT pada tahun 1988 dan merupakan

dasar untuk perusahaan framework aplikasi

API dan NeXTStep. Akhirnya NeXT dan Apple

bergabung sehingga framework aplikasi NeXT

berkembang menjadi Cocoa, dimana

framework ini digunakan untuk aplikasi OS X.

Hingga akhirnya Objective-C digunakan

sebagai bahasa pemrograman dasar untuk

iOS.

Parse.com

Parse adalah penyedia layanan cloud

untuk banyak platform seperti iOS, Android,

Javascript, Windows 8, Windows Phone 8 dan

OS X. Dengan parse, developer dapat

menambahkan layanan backend yang terukur

dan kuat dalam waktu beberapa menit dan

meluncurkan aplikasi dengan fitur lengkap

dalam waktu singkat tanpa perlu khawatir

tentang management server [6]. Parse

menyediakan solusi backend lengkap untuk

aplikasi mobile. Tujuannya adalah untuk

benar-benar menghilangkan kebutuhan dalam

hal menulis kode server atau

mempertahankan server. Parse menawarkan

push notification, integrasi dengan social

media, penyimpanan data dan kemampuan

untuk menambah logika yang dapat

dimodifikasi untuk layanan aplikasi yang akan

dibuat dengan Cloud Code.

Parse mengoperasikan sejumlah high-

throughput, I/O cluster pada MongoDB

intensif dan diperlukan untuk meningkatkan

skalabilitas serta kecepatan. Parse menangani

manajemen akun pengguna, penyimpanan

data dan disk caching untuk pelanggan dan

penggunaan yang dapat berfluktuasi setiap

hari [7].

Gambar 1: Layanan Parse mobile

METODE PENELITIAN Jenis penelitian yang digunakan pada

tugas akhir ini merupakan penelitian rekayasa

berupa forward engineering. Forward

engineering: rekayasa life cycle dimulai dari

plan, analysis, construct, hingga applied [8].

Hasil dari penelitian berupa rancangan dan

produk aplikasi yang teruji (Simulator dan

Device).

Penelitian ini dibatasi pada ruang

lingkup pengembangan aplikasi mobile katalog

berbasis iOS untuk Miulan Hijab guna

mengenalkan produk-produk Miulan Hijab.

Perangkat yang akan digunakan untuk

mensimulasikan aplikasi katalog adalah iPad

dan iPod Touch. Penelitian dilakukan mulai

bulan Oktober 2013 dan pengambilan data

dilakukan di Butik Miulan Hijab, Jalan Gedung

Batu Selatan No 88 Semarang Jawa Tengah.

Data penelitian yang digunakan untuk

memenuhi tahap planning dan analisis. Jenis

data yang digunakan dalam penelitian ini

adalah data primer (langsung). Data primer

merupakan data yang diperoleh secara

langsung dari objek yang diteliti. Data dan

informasi diperoleh langsung dari hasil

wawancara dan observasi. Data-data hasil

wawancara diantaranya kategori produk,

harga produk, keterangan produk dan

distributor. Sedangkan data hasil observasi

berupa posting pada social media, jumlah

follower dan feedback yang didapat setiap

posting yang dilakukan.

METODE PENGEMBANGAN Perencanaan

Pada tahap perencanaan didasarkan

pada hasil wawancara yang dilakukan kepada

pemilik merek dan usaha Miulan Hijab.

Aplikasi mobile eKatalog dikembangkan untuk

memenuhi kebutuhan informasi produk

Miulan Hijab untuk segmen pengguna kelas

atas (pengguna iOS) serta digunakan untuk

meningkatkan brand Miulan Hijab melalui

aplikasi mobile. Segmentasi pasar Miulan

Hijab selama ini adalah dari kalangan ekonomi

menengah.

Platform yang digunakan adalah

perangkat mobile dengan sistem operasi iOS

(iphone, ipad, dan ipod touch). Pemilihan iOS

didasakan pada hasil survey yang ditulis oleh

Fortune CNN mengenai Apple(iOS) dan

Samsung(Android) menunjukan bahwa

pengguna iOS lebih banyak dari kalangan

berpendidikan tinggi, memiliki pendapatan

tinggi, dan telah dewasa dibandingkan dengan

Samsung (Android) [1].

Analisa

Tahap analisis menjawab pertanyaan-

pertanyaan tentang siapa yang akan

menggunakan sistem, apa yang dilakukan

sistem, di mana dan kapan akan digunakan.

Tahapan ini memiliki tiga langkah, yaitu:

1. Current System

Pengenalan produk Miulan Hijab

menggunakan social media seperti twitter.

Miulan Hijab memiliki website yang

berisikan informasi produk dan info-info

penunjang lainnya (contact person,

address). Akun twitter @miulanhijab aktif

memberikan info-info promosi dan pesan-

pesan kepada para pengikutnya.

Analisa pada website miulanhijab.com

dilakukan untuk mendapatkan gambaran

spesifikasi dan fitur-fitur yang digunakan

pada aplikasi mobile tersebut.

Miulanhijab.com adalah website resmi

yang dikelola oleh usaha Miulan Hijab.

Beberapa website lain yang sejenis

merupakan bagian dari cara reseler atau

agen yang membantu penjualan produk

miulan hijab.

Gambar 2: Website miulanhijab.com

Gambar 3: Produk miulan tampil di website.

2. Requirment

Berdasarkan analisa tersebut dapat

didefinisikan kebutuhan dan fitur untuk

aplikasi Miulan Hijab sebagai berikut:

Aplikasi eKatalog menampilkan berbagai

jenis produk dan promo Miulan Hijab,

menyebarkannya pada jejaring sosial,

membaca timeline akun sosial Miulan Hijab

dan memberikan informasi lain terkait

usaha Miulan Hijab (alamat dan

distributor).

3. Combine

Selain fitur-fitur dalam system

requirement, konten dari akun social

Miulan Hijab akan dimasukan menjadi

salah satu fitur dalam aplikasi mobile

eKatalog Miulan Hijab mendampingi fitur

utama aplikasi yakni pengenalan produk-

produk Miulan Hijab.

Layout aplikasi mobile akan

menyesuaikan dengan website

miulanhijab.com yang sudah ada

sebelumnya. Begitu juga dengan

penggunaan warnaantar muka aplikasi

menyesuaikan dengan website.

Desain

Tahap desain memutuskan bagaimana

sistem akan beroperasi, dalam hal perangkat

keras, perangkat lunak dan infrastruktur

jaringan, antarmuka pengguna, formulir,

laporan dan program-program tertentu,

database, serta file yang akan dibutuhkan.

Gambar 4: Use Case Diagram Miulanhijab.

Activity Diagram menggambarkan

berbagai alir aktivitas dalam sistem yang

sedang dirancang, bagaimana masing- masing

alir berawal, decision yang mungkin terjadi,

dan bagaimana mereka berakhir.

Gambar 5: Activity Diagram lihat lookbook.

Gambar 6: Activity Diagram lihat timeline.

Gambar 7: Activity Diagram lihat kategori dan produk.

Gambar 8: Class Diagram MiulanHijab.

Class diagram menggambarkan

keadaan (atribut/properti) suatu sistem

sekaligus menawarkan layanan untuk

memanipulasi keadaan tersebut

(metoda/fungsi).

Gambar 10: Sequance Diagram Akses Data Cloud Storage.

Implementasi

Melakukan kegiatan pembuatan

spesifikasi sistem dalam bentuk rancangan

kedalam kegiatan sebenarnya (aplikasi)

dengan sistem yang telah disepakati bersama.

Pada tahapan ini akan mengubah rancangan

use case dan storyboard ke dalam bentuk

aplikasi. Penulisanbaris program dilakukan

menggunakan tool XCode dengan bahasa

pemrograman Objective-C. Aplikasi akan

Gambar 9: Sequance Diagram Lihat Kategori dan Produk.

disimulasikan pada iOS simulator dan diujikan

pada perangkat IPad dan Ipod Touch.

Create Apple Certificate digunakan

untuk menandai mac atau computer yang kita

gunakan untuk mengembangkan aplikasi.

Pertama kita akan membuat pengajuan

certificate pada halaman apple developer.

Gambar 11: Request Certivicate

Setelah membuat certificate, yang

perlu dilakukan adalah membuat application

ID. Setiap aplikasi yang dibuat untuk

keperluan test pada hardware IOS harus

terdaftar. Mendaftarkan application ID dapat

dilakukan pada halaman apple developer.

Gambar 12: Create App ID

Setiap device IOS yang akan

digunakan untuk mengembangkan applikasi

atau digunakan untuk menguji aplikasi harus

didaftarkan terlebih dahulu. Pendaftaran

device dapat dilakukan pada halaman apple

developer. Apple memperbolehkan untuk

mendaftarkan hanya 100 device.

Untuk mendaftarkan perangkat IOS,

yang dibutuhkan adalah UDID atau unique

device identifier. UDID adalah kode unik yang

melekat pada perangkat apple. Kode ini dapat

dilihat menggunakan aplikasi Itunes baik pada

windows maupun macintosh.

Gambar 13: Register Device ID

Membuat aplikasi menggunakan tool

atau IDE ( Integrated Development

Environment) khusus dan hanya dapat

dijalankan di atas system operasi Macintosh

OSX. Xcode dapat di unduh pada halaman

apple developer. Pada tugas akhir ini, Penulis

menggunakan Xcode Versi 5.0.

Untuk membuat project baru,

jalankan aplikasi Xcode kemudian pada

welcome screen pilih menu create a new

Xcode project. Pilih Ios application kemudian

single view application dan pilih tombol next.

Pada form project option inputkan

mana project dengan “miulanhijab”,

Organization “sabaklab”, company identifier

dengan “com.sabak”, dan pada bagian devices

pilih universal. Kemudian dilanjutkan dengan

memilih tombol next. Setelah next, xcode

akan menampilkan finder dan menentukan

dimana file project akan disimpan.

Gambar 14: Xcode Project.

Kemudian menulis class pada project.

Pilih topbar menu, new, file atau dapat

mengunakan shortcut pada keyboard

(Command+N). Berikan nama class dan pilih

subclass nya. Xcode otomatis akan membuat

file header .h dan implementasinya .m.

Ada beberapa subclass of yang dapat

digunakan secara default seperti

UIViewController digunakan untuk mengatur

tiap scane pada storyboard. Kemudian

UITableViewController digunakan untuk

mengatur tampilan atau object table.

Gambar 15: Contoh penulisan Objective-c class.

Hasil Pembahasan

Untuk menjalankan aplikasi pada IOS

Simulator, yang perlu diperhatikan adalah

pemilihan tipe device-nya. Pilih menu active

schema dan ubah menjadi ipad, seperti pada

gambar dibawah ini. Kemudian pilih Versi IOS

yang digunakan misalnya IOS 7.0.

Gambar 16: Miulan Hijab pada iOS Simulator.

Gambar 17: Resource yang digunakan oleh App.

Proses akan sedikit berbeda ketika

kita mengujikan aplikasi ke dalam device

hardware yang sebenarnya. Pengujian aplikasi

hanya dapat dilakukan pada perangkat atau

device yang telah didaftarkan pada halaman

apple developer.

Hubungkan perangkat IOS yang sudah

terdaftar menggunakan kable data original.

Beberapa pengalaman, ketika menggunakan

kable data non original maka macintosh sulit

untuk mengenali perangkat IOS. Kemudian

setelah berhasil menghubungkan perangkat

dengan macintosh untuk pertama kalinya,

maka Xcode akan membuka jendela Organizer

Device.

Gambar 18: Running App on Device.

Xcode akan melakukan proses

building, running, kemudian mengirimkan

aplikasi ke hardware IOS (Ipod Touch) dan

menjalankan apikasinya.

Gambar 19: Aplikasi miulanhijab berjalan pada device.

KESIMPULAN & REKOMENDASI

Kesimpulan Berdasarkan hasil pembahasan Tugas

Akhir mengenai Rancang Bangun Aplikasi

Mobile eKatalog Berbasis IOS Untuk

Mengenalkan Produk Miulan Hijab, maka

Penulis dapat mengambil kesimpulan sebagai

berikut :

1. Aplikasi mobile ekatalog miulanhijab

memiliki fitur-fitur yang digunakan untuk

memberikan informasi kepada pengguna

mengenai produk dan layanan miulanhijab.

Pada tahap perancangan langkah-langkah

pengembangan aplikasi mobile

menggunakan mdodel life cycle atau SDLC.

Dimulai dari perencanaan, analisis,

perancangan, dan implementasi.

2. Aplikasi mobile MiulanHijab dapat bekerja

optimal pada perangkat iOS (Ipad dan

Iphone/Ipod Touch). Hal ini dibuktikan

dengan menjalankan pada Ipad 2 3G dan

Ipod Touch 4 yang memiliki ukuran layar

berbeda antara keduanya.

Aplikasi miulanhijab dapat

memberikan gambaran kepada pengguna atau

calon pelanggan tentang produk dan layanan

yang diberikan miulan hijab melalui aplikasi

mobile.

Future Work

1. Penelitian mengenai efektifitas

penggunaan resource Memory dan CPU

dalam menangani request dan response

data online, ditinjau dari code program dan

algoritma yang digunakan.

2. Penelitian mengenail efektifitas model

pengembangan yang digunakan (SDLC),

serta kondisi dimana diharuskan untuk

menambah fitur ketika tahapan

pengembangan sudah menginjak tahap

implementasi.

3. Penelitian mengenai efektifitas waktu

pengembangan yang dibutuhkan untuk

membangun aplikasi miulanhijab

menggunakan model SDLC dibandingkan

menggunakan model yang lain seperti, XP

(Extrem Programing, Protottype, Agile).

Daftar Pustaka

[1] P. E. Dewitt. (2013, ) CIRP survey: Where Apple

and Samsung get their customers. [Online].

http://tech.fortune.cnn.com/2013/08/19/apple-

samsung-survey-cirp/

[2] C. Liua, Q. Zhua, K. A. Holroydb, and E. K. Seng,

"Status and trends of mobile-health applications

for iOS devices: A developer’s perspective,"

Journal Of Systems and Software, vol. 84, no. 11,

pp. 2022-2033, Nov. 2011.

[3] Anonymous. (2013, ) Wikipedia Digital

Marketing. [Online].

http://en.wikipedia.org/wiki/Digital_marketing

[4] S. Morrissey, iOS Forensic Analysis for iPhone,

iPad and iPod touch, M. Lowman, Ed. USA:

Apress, 2010.

[5] M. Neuburg, iOS 7 Programing Fundamentals, R.

Rachel, Ed. Sebastopol: O'Reilley, 2013.

[6] Anonymous. (2013, ) Parse. [Online].

https://parse.com/about

[7] Anonymous. (2013, ) Amazon Web Service |

AWS Case Study: Parse. [Online].

http://aws.amazon.com/solutions/case-

studies/parse/

[8] I. E. Jazi and W. P. Aris, "Karakteristik

Metodologi Penelitian Bidang Ilmu Komputer

(IK) Berlandaskan Pendekatan Positivistik,"

Jurnal Sains&Matematika (JSM), vol. 17, no. 2,

pp. 115-120, Apr. 2009.