i
IMPLEMENTASI PHONEGAP JQUERY MOBILE DAN WEB API DALAM PEMBUATAN APLIKASI PERIKLANAN BERBASIS ANDROID LAPORAN TUGAS AKHIR
Ditulis Sebagai Salah Satu Syarat Untuk Menyelesaikan Pendidikan Program Diploma 3 Oleh
M. KHAIRUL RAMADHAN 1205112035
PROGRAM STUDI TEKNIK KOMPUTER JURUSAN TEKNIK KOMPUTER DAN INFORMATIKA POLITEKNIK NEGERI MEDAN MEDAN 2015
iii
ABSTRAK Sistem operasi Smartphone yang mendominasi antara lain Android, iOS, Blackberry dan Windows Phone. Setiap sistem operasi memiliki bahasa pemrograman native sendiri-sendiri yang berarti aplikasi yang berjalan di Android tidak bisa berjalan di sistem operasi lainnya, begitu juga sebaliknya. Hal ini tentu saja akan cukup merepotkan seorang developer yang hanya paham satu jenis bahasa pemrograman apabila dia ingin membuat aplikasi pada masing-masing platform. Sehingga, dimasa yang akan datang diperlukan sebuah bahasa pemrograman yang dapat berjalan di semua sistem operasi Smartphone. Phonegap merupakan sebuah framework opensource untuk membangun aplikasi mobile cross-platformdengan menggunakan HTML5, Javascript dan CSS. Artinya dengan bahasa tersebut developer aplikasi mobile dengan lintas-platform, dapat berjalan di Android, Iphone, Windows Phone dan Blackberry dengan sekali coding dan tanpa perlu menggunakan bahasa native dari setiap platform mobile tersebut. Kata kunci: cross-patform, teknologi, smartphone
iii
iv
KATA PENGANTAR
Puji dan syukur penulis panjatkan kehadirat Allah SWT atas rahmat dan hidayah yang Allah berikan, sehingga penulis dapat menyelesaikan laporan Tugas Akhir ini dengan judul “Implementasi Phonegap Jquery Mobile Dan Web Api Dalam Pembuatan Aplikasi Periklananberbasis Android”. Laporan Tugas Akhir dibuat sebagai salah satu syarat akademis yang harus ditempuh untuk menyelesaikan Program Diploma 3 (tiga) pada Program Studi Teknik Komputer (Computer Engineering) Jurusan Teknik Komputer Informatika Politeknik Negeri Medan. Dalam laporan Tugas Akhir ini, penulis merancang dan membuat Aplikasi Pemesanan Makanan yang berfungsi untuk membantu mempermudah agar user (pelayan) dapat meningirim langsung pesanan makanan ke koki tanpa harus mengantarnya terlebih dahulu ke dapur. Aplikasi ini diharapkan dapat berjalan dengan baik, sehingga aplikasi yang dibuat dapat membantu mengatasi masalah waktu pelanggan yang menunggu terlalu lama melalui smartphone berbasis Android. Dalam mewujudkan laporan ini, penulis banyak mendapat bimbingan, saran dan bantuan baik berupa tenaga, materi maupun dorongan semangat dari berbagai pihak yang sangat bermanfaat bagi penulis. Pada kesempatan ini, penulis ingin mengucapkan banyak terima kasih kepada: 1. M. Syahruddin, S.T., M.T., selaku Direktur Politeknik Negeri Medan.
iv
v
2. Ferry Fachrizal, S.T., M. Kom selaku Ketua Jurusan Teknik Komputer Informatika 3. Zakaria Sembiring, S.T., M.Sc. selaku Kepala Program Studi Teknik Komputer. 4. Kadri Yusuf, S.T., M.Kom. selaku dosen pembimbing dalam penyelesaian laporan Tugas Akhir ini. 5. Eviliana Sembiring, selaku Administrasi Program Studi Teknik Komputer yang telah membantu penulis untuk menyelesaikan administrasi. 6. Trimakasih kepada kak Nuri Pramitha Hidayani yang telah membantu dan memberi saran dalam menyelesaikan Tugas Akhir ini. 7. Keluarga penulis, terutama untuk Ibunda Misnah dan Ayahanda Suparman yang telah banyak memberi dukungan moril dan materil serta doa yang tiada hentinya kepada penulis dalam menyelesaikan laporan Tugas Akhir ini. 8. Kepada ketiga kakanda tersayang Edi Syahputera, Yeni Maya Sari, Dimas Hasannudin yang banyak memberikan saran dan dukungan serta doa untuk penulis dalam menyelesaikan laporan Tugas Akhir ini. 9. Seluruh teman-teman penulis di CE-6A’12, khususnya Ardhi Hidayat, Petrus A.T, Basri Habibie, M. Nurkholish. Terima kasih buat bantuan, dukungan, hiburan dan semuanya yang sudah kalian berikan kepada penulis. 10. Sahabat serta teman-teman penulis Alumni SMA Negeri 3 Medan angkatan 2009. Terimakasih atas doa dan dukungannya. 11. Terima kasih kepada Tasnim Fatharani Rachman yang selalu menemani dan memberikan motivasi dalam menyelesaikan tugas akhir penulis.
v
vi
12. Trima kasih kepada alumni Andri Situmorang, Chairinisa Napitupulu, Bento Aditya Hadibroto. Trima kasih buat dukungan dan bantuan yang kakak dan abang berikan kepada penulis. Walaupun penulis sudah berusaha semaksimal mungkin, penulis menyadari bahwa Tugas Akhir ini masih terdapat kekurangan yang masih perlu diperbaiki. Untuk itu penulis mengharapkan saran dan kritik yang bersifat membangun dari para pembaca. Akhir kata, penulis berharap semoga Laporan Tugas Akhir ini dapat lebih sempurna dan dapat memberi manfaat bagi penulis dan para pembaca umumnya.
Medan, 27 Agustus 2015 Penulis,
M Khairul Ramadhan NIM 1205112035
vi
vii
DAFTAR ISI
LEMBAR PERSETUJUAN..................................................................................... i LEMBAR PENGESAHAN .................................................................................... ii ABSTRAK ............................................................................................................. iii KATA PENGANTAR ........................................................................................... iv DAFTAR ISI .......................................................................................................... vi DAFTAR GAMBAR ............................................................................................. xi DAFTAR TABEL ................................................................................................. xii BAB 1 PENDAHULUAN ...................................................................................... 1 1.1
Latar Belakang Masalah ........................................................................... 1
1.2
Perumusan Masalah .................................................................................. 1
1.3
Batasan Msalah ......................................................................................... 2
1.4
Tujuan Tugas Akhir.................................................................................. 2
1.5
Manfaat Tugas Akhir ................................................................................ 3
1.6
Metode Pelaksanaan Tugas Akhir ............................................................ 3
1.6.1
Persiapan ........................................................................................... 3
1.6.2
Pengumpulan Data ............................................................................ 3
1.6.3
Perancangan Sistem .......................................................................... 4
1.6.4
Pembuatan Aplikasi Berbasis Android ............................................. 4
vii
viii
1.7
Metode Tugas Akhir ................................................................................. 5
1.7.1
BAB 1 PENDAHULUAN ................................................................ 5
1.7.2
BAB 2 LANDASAN TEORI ............................................................ 5
1.7.3
BAB 3 PERANCANGAN APLIKASI ............................................. 5
1.7.4
IMPLEMENTASI DAN PENGUJIAN ............................................ 5
1.7.5
SIMPULAN DAN SARAN .............................................................. 6
1.8
Sumber-sumber Daya ............................................................................... 6
BAB 2 LANDASAN TEORI .................................................................................. 7 2.1
Android ..................................................................................................... 7
2.1.1
Perkembangan Android ..................................................................... 7
2.1.2
Arsitektur Android ............................................................................ 9
2.2
NodeJS.................................................................................................... 14
2.3
Phonegap ................................................................................................ 15
2.3.1
Cara Kerja Phonegap....................................................................... 16
2.4
Jquery Mobile ......................................................................................... 17
2.5
Web API (Application Programming Language) .................................. 18
2.6
Database ................................................................................................. 19
2.6.1
NoSQL (Not Only SQL) ................................................................. 23
2.6.2
MongoDB........................................................................................ 31
2.7
UML (Unified Modeling Language) ...................................................... 35
viii
ix
2.8.1
Konsep Dasar UML ........................................................................ 35
BAB 3 PERANCANGAN APLIKASI ................................................................. 40 3.1
Analisis Kebutuhan ................................................................................ 40
3.2
Metode Pengumpulan Data .................................................................... 40
3.3
Penyelesaian Masalah ............................................................................. 40
3.4
Kebutuhan Pembuatan Aplikasi ............................................................. 41
3.5
Arsitektur Aplikasi ................................................................................. 42
3.6
Perancangan Aplikasi ............................................................................. 42
3.6.1
Block Diagram ................................................................................ 42
3.6.2
Usecase Diagram ............................................................................. 43
3.6.3
Aktivity Diagram ............................................................................ 43
3.7
Perancangan Antarmuka Aplikasi .......................................................... 45
BAB 4 IMPLEMENTASI DAN PENGUJIAN .................................................... 47 4.1
Implementasi .......................................................................................... 47
4.1.1
Implementasi Antarmuka ................................................................ 47
4.2
Pengujian Data dari Web API ................................................................ 49
4.3
Lingkungan Pengujian ............................................................................ 50
4.3.1
Pengujian Melalui Web Browser .................................................... 50
4.4
Kelebihan Aplikasi ................................................................................. 51
4.5
Kekurangan Aplikasi .............................................................................. 51
ix
x
BAB 5 SIMPULAN DAN SARAN ..................................................................... 52 5.1
Simpulan ................................................................................................. 52
5.2
Saran ....................................................................................................... 52
DAFTAR PUSTAKA ........................................................................................... 53
x
xi
DAFTAR GAMBAR
Gambar
Halaman
2.1
Fungsi JavaScript menjalankan instance dari server .............................. 20
2.2
Menunjukan Kompleksitas Pada Database Relational............................ 33
2.3
Contoh NoSQL ....................................................................................... 34
3.1
Arsitektur Aplikasi .................................................................................. 47
3.2
Block Diagram Proses Data .................................................................... 47
3.3
Use Case Diagram Infoo ......................................................................... 48
3.4
Activity Diagram Infoo ........................................................................... 49
4.1
Halaman Menu Utama ............................................................................ 52
4.2
Halaman Daftar Iklan .............................................................................. 53
4.3
Informasi Iklan ........................................................................................ 53
4.4
Halaman Tentang Penulis ....................................................................... 54
xi
xii
DAFTAR TABEL
Tabel
Halaman
2.1
Contoh Konsep Dasar UML (Unified Modeling Langiage) ................... 40
2.2
Use case Diagram .................................................................................... 41
2.3
Activity Diagram ..................................................................................... 43
3.1
Rancangan antarmuka Aplikasi............................................................... 50
4.1
Tabel Pengujian web API........................................................................ 55
xii
BAB 1 PENDAHULUAN 1.1
Latar Belakang Masalah Sistem operasi Smartphone yang mendominasi antara lain Android, iOS,
Blackberry dan Windows Phone. Setiap sistem operasi memiliki bahasa pemrograman native sendiri-sendiri yang berarti aplikasi yang berjalan di Android tidak bisa berjalan di sistem operasi lainnya, begitu juga sebaliknya[1]. Hal ini tentu saja akan cukup merepotkan seorang developer yang hanya paham satu jenis bahasa pemrograman apabila dia ingin membuat aplikasi pada masing-masing platform. Sehingga, dimasa yang akan datang diperlukan sebuah bahasa pemrograman yang dapat berjalan di semua sistem operasi Smartphone[1]. Berdasarkan latar belakang diatas penulis berinisiatif untuk membuat aplikasi iklan berbasis android dengan menggunakan pemrograman HTML, CSS dan Javascript dengan hanya sekali coding untuk dapat berjalan cross-palatform. Aplikasi di bangun dengan menggunakan teknologi phonegap sebagai pembungkus aplikasi. Jquery Mobile digunakan dalam pembuatan template dan Web API sebagai penyedia data dan input data untuk bertukar data dengan aplikasi.
1.2
Perumusan Masalah Berdasarkan latar belakang masalah yang sudah dikemukakan, maka rumusan
masalah yang dikaji dalam tugas akhir ini adalah:
1
2
1. Bagaimana merancang aplikasi iklan berbagai platform dengan hanya sekali coding menggunakan teknologi Phonegap? 2. Bagaimana mendesain template aplikasi iklan menggunakan JQueryMobile? 3. Bagaimana cara intergasi data antara Web API dengan Aplikasi iklan?
1.3
Batasan Msalah Batasan masalah yang dibahas dalam tugas akhir ini adalah:
1.
Sistem operasi yang digunakan adalah sistem operasi Android minimal versi 2.2.
2.
Iklan yang akan di tampilkan hanya wilayah Kota Medan.
3.
Aplikasi tidak menggunakan pilihan kategori.
4.
Aplikasi tidak mengakses hardware.
5.
Web API dibangun menggunakan Express framework.
6.
Web API hanya digunakan sebagai penyedia data dan input data iklan.
1.4
Tujuan Tugas Akhir Tujuan dari tugas akhir ini adalah untuk mempermudah masyarakat untuk
mendapatkan informasi iklan dan nomor telepon perusahaan yang akurat. Dan juga mempermudah developer dalam pembuatan aplikasi mobile diberbagai platform menggunakan teknologi phonegap dan mengimplementasikan JQuery Mobile sebagai desain template aplikasi.
2
3
1.5
Manfaat Tugas Akhir Manfaat dari tugas akhir ini adalah untuk memberikan alternatif dan
kemudahan bagi developer dalam pembuatan aplikasi Smartphone cross-platform, tanpa perlu keahlian pada bahasa pemrograman native masing-masing platform.
1.6
Metode Pelaksanaan Tugas Akhir Langkah-langkah yang akan digunakan dalam pembuatan tugas akhir ini
adalah: 1.6.1
Persiapan Dalam penyusunan Tugas Akhir ini penulis melakukan berbagai kegiatan
persiapan antara lain: 1. Meminta persetujuan judul kepada Dosen Pembimbing dan Kepala Prodi untuk dapat membuat aplikasi dari judul yang telah diajukan. 2. Menginstal software-software yang dibutuhkan dalam
merancang dan
membuat aplikasi ini, seperti: -
Instalasi SDK android
-
Nodejs
-
Instalasi MongoDB
3. Mencari informasi seputar aplikasi pemesanan sebagai referensi dalam merancang dan membuat aplikasi ini. 1.6.2
Pengumpulan Data Adapun teknik pengumpulan datayang digunakan antara lain :
Studi Literatur
3
4
-
Pencarian dan pengumpulan bahan pustaka baik berupa buku, artikel, referensi dan sumber lain yang berhubungan dengan topik Tugas Akhir.
-
Pencarian materi mengenai Phonegap, JQuery Mobile, Web API dan teori pemograman untuk membuat aplikasi menggunakan teknologi phonegap.
1.6.3
Perancangan Sistem Setelah mendapatkan informasi yang diperlukan, langkah selanjutnya
adalah melakukan perancangan aplikasi iklan berbasis android. Teknologi yang digunakan adalah Phonegap sebagai pembungkus aplikasi dan untuk pembuatan template memanfaatkan JQuery Mobile, selanjutnya agar aplikasi mendapatkan informasi yang akurat dilakukan pembuatan Web API menggunakan codeigniter framework sebagai penyedia data yang diperlukan aplikasi. Dan untuk editor digunakan notepad++. Kemudian dilakukan perancangan sebagai berikut:
1.6.4
Perancangan model UML (Unifed Modelling Language)
Perancangan halaman antar muka (user interface)
Perancangan Database.
Perancangan Algoritma Pemrograman.
Pembuatan Aplikasi Berbasis Android Melalui hasil perancangan, penulis akan membuat aplikasi iklan berbasis
android dengan menggunakan metode teknologi phonegap dimana bahasa pemrograman yang akan digunakan adalah HTML5 dan CSS, template aplikasi
4
5
akan di bangun menggunakan JQuery Mobile framework. Selanjutnya akan membangun Web API sebagai pusat data dan pertukaran data dengan aplikasi.
1.7
Metode Tugas Akhir
1.7.1 BAB 1 PENDAHULUAN Bab ini berisi penjelasan mengenai latar belakang pemilihan judul, batasan masalah, manfaat dan tujuan tugas akhir, sasaran perancangan aplikasi dan metode pelaksanaan tugas akhir. 1.7.2
BAB 2 LANDASAN TEORI Bab ini berisi landasan teori yang menjadi referensi utama dalam penulisan
tugas akhir. Teori yang dibahas berhubungan dengan aplikasi yang akan dibuat dan juga yang digunakan untuk kepentingan analisis dan perancangan aplikasi. 1.7.3
BAB 3 PERANCANGAN APLIKASI Bab ini membahas analisis dan perancangan sistem. Tahap analisis
menggambarkan dan menjabarkan kegiatan yang dilakukan pada sistem yang sedang berjalan sedangkan tahap perancangan aplikasi seperti perancangan tampilan aplikasi dan algoritma pemrograman. 1.7.4
IMPLEMENTASI DAN PENGUJIAN Bab ini membahas hasil dan pembahasan aplikasi yang dikerjakan seperti
hasil dari aplikasi yang dibangun dan pembahasan system berupa penjabaran dari setiap tampilan aplikasi, kelebihan dan kekurangan aplikasi yang dirancang.
5
6
1.7.5
SIMPULAN DAN SARAN Bab ini menjelaskan hasil akhir dari semua penulisan yang dikerjakan yaitu
simpulan dan saran yang berisi masukan untuk mengembangkan dan melengkapi aplikasi yang sudah dibangun di masa yang mendatang.
1.8
Sumber-sumber Daya Berikut ini merupakan hal-hal yang diperlukan untuk membuat aplikasi
pemesanan makanan dari pelayan ke koki berbasis android. 1)
Instalasi SDK Manager Android 2.2 dipergunakan sebagai platform android dan menggunakan emulator android.
2)
Nodejs
3)
Framework Phonegap sebagai pembungkus aplikasi multi-platform juga agar dalam pembuatan aplikasi dapat menggunakan bahasa HTML5 CSS dan Javascript.
4)
Framework Jquery Mobile digunakan untuk membuat template aplikasi.
5)
Notepad++ sebagai editor yang digunakan dalam pemrograman pembuatan aplikasi.
6)
MongoDB sebagai database aplikasi
7)
Sumber-sumber pustaka, seperti buku-buku panduan, e-book, contoh-contoh program dan lain-lain.
6
