This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Modul
Pemrograman Mobile

Oleh

Rudy Eko Prasetya, S.Kom

i
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

KATA PENGANTAR
Segala puji hanya milik Allah SWT. Shalawat dan salam selalu tercurahkan kepada Rasulullah
SAW. Berkat limpahan dan rahmat-Nya penyusun mampu menyelesaikan modul pemorgraman mobile
ini.

Dalam beberapa tahun terakhir, penggunaan perangkat teknologi nirkabel atau smartphone telah
tumbuh secara eksponensial. Sebagian besar orang kini dapat mengakses sistem informasi kabel di mana
saja dan kapan saja menggunakan perangkat smartphone diaktifkan oleh baterai. Hal ini dimungkinkan
dengan perkembangan teknologi komunikasi yang cepat. Metode pengembangan menggunakan metode
native dengan Android Studio dirasa sangat berat karena membutuhkan resource dan perangkat hardware
yang mumpuni. Maka dari itulah penulis menyusun Modul pemrograman Mobile dengan fokus dengan
menggunakan metode hybrid yang bisa menjadi solusi untuk masalah tersebut.

Dalam penyusunan modul, tidak sedikit hambatan yang penulis hadapi. Namun penulis menyadari
bahwa kelancaran dalam penyusunan materi ini tidak lain berkat bantuan, dorongan, dan bimbingan orang
tua, dosen dan guru lainnya sehingga kendala-kendala yang penulis hadapi teratasi.

Modul ini disusun agar pembaca dapat memperluas pemrograman mobile dengan metode hybrid,
yang kami sajikan berdasarkan pengamatan dari berbagai sumber informasi, referensi, dan komunitas.
Modul ini di susun oleh penyusun dengan menggunakan Silabus Mata Pelajaran Pemrograman Web dan
Perangkat Bergerak Kurikulum 2013 revisi 2018. Semoga Modul ini dapat memberikan wawasan yang lebih
luas dan menjadi sumbangan pemikiran kepada pembaca khususnya para siswa SMK jurusan Rekayasa
Perangkat Lunak.

Malang, Agustus 2019

Penulis

Rudy Eko Prasetya, S.Kom

ii
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

DAFTAR ISI

Halaman Judul ....................................................................................................................................... i

Kata Pengantar ...................................................................................................................................... ii
Daftar Isi ............................................................................................................................................... ii

BAB I KONSEP TEKNOLOGI MOBILE

A. Konsep Teknologi Mobile ................................................................................................................. 2
B. Sistem Operasi Mobile ...................................................................................................................... 5
C. Perangkat Pengembangan Aplikasi Mobile........................................................................................ 9
D. Metode Pengembangan Aplikasi Mobile ........................................................................................... 11

BAB II TOOL PENGEMBANGAN APLIKASI MOBILE

A. Tool Pengembangan Aplikasi Mobile................................................................................................ 15
B. Installasi Perangkat Pengembangan Aplikasi Mobile ......................................................................... 16
1. NodeJS .............................................................................................................................................. 17
2. Cordova ............................................................................................................................................. 18
3. JDK(Java Development Kit) .............................................................................................................. 18
4. Ant .................................................................................................................................................... 20
5. ADT (Android Development Tool) .................................................................................................... 22
C. Uji Coba Perangkat Pengembangan Aplikasi Mobile ......................................................................... 24

BAB III DESAIN APLIKASI MOBILE

A. Menggunakan Aplikasi Mockup........................................................................................................ 29
B. Desain Aplikasi Mobile dengan Framework7 .................................................................................... 32
1. Installasi Framework7........................................................................................................................ 32
2. Konsep Layout Framework7 .............................................................................................................. 34
3. Integrasi Desain Aplikasi Mobile dengan Framework7 ..................................................................... 35

BAB IV APLIKASI MOBILE MULTIWINDOW

A. Konsep Aplikasi Multiwindows ........................................................................................................ 42
B. Multiwindows dengan Framwork7 .................................................................................................... 43
C. Membuat Aplikasi Multiwindows ..................................................................................................... 43

BAB V PENGGUNAAN KODE APLIKASI MOBILE

A. Konsep Alur Pengkodean Aplikasi Mobile ........................................................................................ 50
B. Prosedur Pengkodean Aplikasi Mobile .............................................................................................. 52
1. Membuat Aplikasi Kalkulator ............................................................................................................ 56
2. Menguji Aplikasi Kalkulator.............................................................................................................. 59

BAB VI KONSEP USER INTERFACE

A. Konsep User Interface Aplikasi Mobile ............................................................................................. 62
B. Prosedur Pengelolaan Input User ....................................................................................................... 63
1. Membuat Aplikasi Pengelolaan Input User ........................................................................................ 63
2. Menguji Aplikasi Pengelolaan Input User .......................................................................................... 68

BAB VII LIBRARY DAN PLUGIN

A. Library dalam Cordova ..................................................................................................................... 70
B. Mengembangkan Aplikasi Mobile dengan Library ............................................................................ 71
1. Membuat Aplikasi Menggunakan Plugin GPS ................................................................................... 72
iii
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

2. Menguji Aplikasi ............................................................................................................................... 74

BAB VIII DATABASE WEBSERVICE

A. Database dalam Aplikasi Mobile ....................................................................................................... 77
B. API dan Webservice .......................................................................................................................... 78
C. JSON (Javascipt Object Nation) ........................................................................................................ 79
D. Membuat Aplikasi Mobile dengan Webservice ................................................................................. 80
1. Membuat WebService dengan PHP dan MYSQL............................................................................... 80
2. Membuat Aplikasi Mobile yang Terkoneksi dengan WebService ....................................................... 84
3. Menguji Aplikasi yang sudah dibuat .................................................................................................. 94

DAFTAR PUSTAKA........................................................................................................................... 96

TENTANG PENULIS

iv
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Konsep
Teknologi
Mobile

Sistem Operasi
Mobile
Pemrograman
Mobile Metode
Pengembangan
Aplikasi Mobile
Perangkat Lunak
Pengembang
Aplikasi Mobile

1
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.25. Memahami teknologi pengembangan aplikasi

mobile
4.25. Mempresentasikan teknologi pengembangan
aplikasi mobile
Judul Konsep Teknologi Mobile

BAB I

Konsep Teknologi Mobile

Pokok Bahasan

1. Konsep Teknologi Aplikasi Mobile

2. Sistem Operasi perangkat Mobile
3. Metode Pengembangan Aplikasi Mobile
4. Perangkat Lunak Pengembangan Aplikasi Mobile

Indikator Ketercapaian Kompetensi

3.25.1 Menjelaskan konsep teknologi aplikasi mobile.

3.25.2 Menjelaskan sistem operasi perangkat mobile.
3.25.3 Menjelaskan penggunaan perangkat lunak pengembang aplikasi mobile.
4.25.1 Mempresentasikan konsep teknologi pengembang aplikasi mobile

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Menjelaskan konsep teknologi aplikasi mobile sesuai dengan kaidah teori dasar aplikasi mobile dengan
benar.
2. Menjelaskan sistem operasi perangkat mobile sesuai dengan standar sistem operasi mobile dengan tepat.
3. Menjelaskan penggunaan perangkat lunak pengembang aplikasi mobile sesuai dengan standar
pengembangan aplikasi mobile dengan tepat.
4. Menunjukkan konsep teknologi pengembang aplikasi mobile sesuai dengan kaidah konsep aplikasi
mobile dengan cermat

A. Konsep Teknologi Mobile.

Sistem komputasi mobile/mobile computing system adalah sistem komputasi yang dapat dengan
mudah dipindahkan secara fisik dan kemampuan komputasi yang dapat digunakan ketika mereka sedang
dipindahkan. Contohnya adalah laptop, personal digital assistant (PDA), dan ponsel. Dengan membedakan
sistem komputasi mobile dari sistem komputasi lain kita bisa mengidentifikasi perbedaan dalam kinerja
bagaimana dirancang, digunakan dan diatur dalam pembuatan sistem tersebut. Ada beberapa hal yang sistem
komputasi mobile dapat melakukan apa yang tidak dapat dilakukan oleh system komputasi yang
statis/stasioner. Mobile computing device tidak selalu harus terhubung dengan jaringan telekomunikasi.
Kalkulator, HP, laptop, netbook bisa dikategorikan sebagai perangkat mobile computing.
2
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Berbicara mengenai mobile computing tidak terlepas dari dunia telekomunikasi bergerak/mobile
communication meski cakupan mobile computing tidak hanya ada pada komunikasi mobile, Karena itu
pembahasan awal ini akan dititik beratkan pada teknologi komunikasi mobile dan untuk selanjutnya akan
dibahas mengenai aplikasi mobile.

Dalam beberapa tahun terakhir, penggunaan perangkat teknologi nirkabel telah tumbuh secara
eksponensial. Sebagian besar orang kini dapat mengakses sistem informasi kabel di mana saja dan kapan
saja menggunakan perangkat portable ukuran komputer nirkabel diaktifkan oleh baterai (notebook misalnya,
PC tablet, pribadi digital asisten (PDA) dan GPRS-enabled telepon selular). Hal ini dimungkinkan dengan
perkembangan teknologi komunikasi yang cepat. Cara perangkat komputasi portable berkomunikasi dengan
server stasioner pusat melalui saluran nirkabel dan menjadi bagian terpadu dari lingkungan komputasi
terdistribusi yang ada.

Data Rate
Kualitas
Kapasitas
Layanan

Gambar 1.1 Generasi Sistem Selular

Teknologi telekomunikasi bergerak (mobile technology) juga mengalami perkembangan yang sangat
cepat dimulai dengan layanan yang kita kenal 1G sampai dengan 4G dan bahwakan 5G..

Generasi Pertama Telekomunikasi Bergerak (1G)

Tidak sampai setahun teknologi komunikasi baru mulai dioperasikan di Indonesia yang kita
kenal dengan teknologi AMPS (Advanced Mobile Phone System) salah satu operatornya adalah
PT.Komselindo. AMPS digolongkan dalam generasi pertama teknologi telekomunikasi bergerak
yang menggunakan teknologi analog dimana AMPS bekerja pada band frekuensi 800 Mhz dan
menggunakan metode akses FDMA (Frequency Division Multiple Access). Saat itu kita sudah
memakai handphone tetapi masih dalam ukuran yang relatif besar dan baterai yang besar karena
membutuhkan daya yang besar.

Generasi Kedua Telekomunikasi Bergerak (2G)

Perbedaan utama pada generasi 1G dan 2G adalah , bila 1G menggunakan teknologi analog
sedangkan 2G sudah menggunakan teknologi digital dan juga generasi 1G hanya dapat mengirimkan

3
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

suara, sedangkan generasi 2G dapat mengirimkan suara dan mengirimkan data berupa short massage
service.

Generasi kedua-setengah Telekomunikasi Bergerak (2.5G)

Pada generasi ini muncul teknologi GPRS. Teknologi GPRS (General Packet Data Radio
Services) pertama sekali diperkenalkan oleh PT.Indosat Multi Media (IM3) pada tahun 2001 di
Indonesia. Secara teoritis kecepatan akses data yang dicapai dengan menggunakan GPRS adalah
sebesar 115 Kbps dengan throughput yang didapat hanya 20 – 30 kbps. GPRS juga memungkinkan
untuk dapat berkirim MMS (Mobile Multimedia Message) dan juga menikmati berita langusng dari
Hand Phone secara real time. Pemakaian GPRS lebih ditujukan untuk akses internet yang lebih
flexible dimana saja, kapan saja, kita dapat melakukannya asalkan masih ada sinyal GPRS.

Setelah itu ada lagi teknologi yang disebut dengan EDGE (EnhancedData for
Global Evolusion) yang hanya sempat diimplementasikan oleh PT.Telkomsel dan lewat begitu saja
dan hanya terdengar gemanya ketika ujicoba melihat liputan 6 SCTV dari handphone yang dilihat
langusng oleh meteri perhubungan saat itu. kecepatan akses data dengan teknologi ini mencapai 3-4
kali kecepatan yang didapat di GPRS.

Generasi ketiga Telekomunikasi Bergerak (3G)

Beberapa tahun lalu ramai dibicarakan tentang generasi ketiga teknologi bergerak atau yang
sering disebut 3G. Teknologi 3G didapatkan dari dua buah jalur teknologi telekomunikasi bergerak.
Pertama adalah kelanjutan dari teknologi GSM/GPRS/EDGE dan yang kedua kelanjutan dari
teknologi CDMA (IS-95 atau CDMAOne). Perbedaan mendasar dapat dirasakan pada kecepatan
transfer data yang simultan baik data voice maupun non-voice.

Seperti download informasi, pertukaran email dan pesan instan. UMTS(Universal Mobile
Telecommunication Service) merupakan lanjutan teknologi dari GSM/GPRS/EDGE yang merupakan
standard telekomunikasi generasi ketiga dimana salah satu tujuan utamanya adalah untuk
memberikan kecepatan akses data yang lebih tinggi dibandingkan dengan GRPS dan EDGE.

Salah satu contoh layanan yang paling terkenal dalam 3G adalah video call dimana gambar
dari teman kita bicara dapat dilihat dari handphone 3G kita. Layanan lain adalah video
conference, video streaming, baik untuk Live TV maupun video portal, Video Mail, PC to Mobile,
serta Internet Browsing.

Generasi keempat Teknologi Telekomunikasi Bergerak (3.5G dan 4G)

Untuk meningkatkan kecepatan akses data yang tinggi dan full mobile maka standar IMT-
2000 di tingkatkan lagi menjadi 10Mbps, 30Mbps dan 100Mbps yang semula hanya 2Mbps pada
layanan 3G. Kecepatan akses tersebut didapat dengan mengguanakan teknologi OFDM (Orthogonal
Frequency Division Multiplexing) dan Multi Carrier.

4G mengacu pada generasi keempat dari standar selular wireless. 4G merupakan suksesor
dari 3G dan 2G. Tata nama dari generasi-generasi ini mengacu pada perubahan pada sifat dasar
layanan dan band frekuensi yang baru. Yang pertama adalah transmisi analog (1G) ke digital (2G).
Kemudian diikuti dengan 3G yang mendukung multi media dengan kecepatan transmisi sedikitnya
200kbit/s dan akan diikuti oleh 4G, yang merujuk pada jaringan IP packed-switched, akses mobile
ultra-broadband(kecepatan gigabit) dan transmisi multi-carrier.
4
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

B. Sistem Operasi Mobile

Sistem operasi mobile adalah software utama yang melakukan manajemen dan kontrol terhadap
hardware secara langsung serta manajemen dan mengontrol software-software lain sehingga software-
software lain tersebut dapat bekerja.

Sehingga suatu sistem operasi mobile akan bertanggung jawab dalam mengoperasikan berbagai
fungsi dan fitur yang tersedia dalam perangkat ponsel tersebut seperti, schedulling task, keyboard, WAP,
email, text message, sinkronisasi dengan aplikasi dan perangkat lain, memutar musik, camera, dan
mengontrol fitur-fitur lainnya.

Selain berfungsi untuk mengkontrol sumber daya hardware dan software ponsel seperti keypad,
layar, phonebook, baterai, dan koneksi ke jaringan, sistem operasi juga mengontrol agar semua aplikasi bisa
berjalan stabil dan konsisten. Sistem operasi harus dirancang fleksibel sehingga para software developer
lebih mudah menciptakan aplikasi-aplikasi baru yang canggih.

Apple IOS

Gambar 1.2 Logo iOS.

Sumber : https://id.wikipedia.org/wiki/Berkas:IOS_logo.svg

iOS adalah sistem operasi mobile Apple. Dikembangkan awalnya untuk iPhone, kemudian
telah digunakan juga pada iPod Touch, iPad dan Apple TV. Apple tidak mengizinkan OS untuk
dijalankan pada hardware pihak ketiga. Interface pengguna iOS didasarkan pada konsep manipulasi
langsung, menggunakan gerakan multi-touch. Elemen kendali Interface terdiri dari slider, switch,
dan tombol.

Interaksi dengan OS mencakup gerakan seperti menggesekkan, penyadapan, mencubit, dan

sebaliknya mencubit. Akselerometer internal digunakan oleh beberapa aplikasi untuk merespon
guncangan perangkat (satu hasil yang umum adalah membatalkan perintah) atau berputar dalam
mode tiga dimensi (satu hasil yang umum adalah beralih dari portrait ke modus landscape). Dalam
IOS, ada empat lapisan abstraksi: Core OS layer, Core Services layer, Media layer, dan Cocoa
Touch layer. Sistem operasi membutuhkan sekitar 500 megabyte penyimpanan perangkat, bervariasi
untuk setiap perangkat yang diimplementasikan.

Kelebihan:

– Multitasking.

5
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

– Navigasi mudah.
– Terintegrasi penuh dengan OS Apple yang lain.
– Dukungan multimedia sangat baik.
– User Interface yang interaktif.
– Tersedia AppStore untuk memenuhi kebutuhan user.
– Mendukung GPS.

Kekurangan:

– Tidak support flash (Safari Mobile).

– Penempatan antena kurang baik.
– Standar aplikasi pengembang sangat ketat.

Android

Gambar1.3 Logo Android

Sumber : https://id.wikipedia.org/wiki/Berkas:Android_robot_2014.svg

Android adalah sistem operasi untuk telepon seluler yang berbasis Linux. Android
menyediakan platform terbuka bagi para pengembang buat menciptakan aplikasi mereka sendiri
untuk digunakan oleh bermacam peranti bergerak. Awalnya, Google Inc. membeli Android Inc.,
pendatang baru yang membuat peranti lunak untuk ponsel. Kemudian untuk mengembangkan
Android, dibentuklah Open Handset Alliance, konsorsium dari 34 perusahaan peranti keras, peranti
lunak, dan telekomunikasi, termasuk Google, HTC, Intel, Motorola, Qualcomm, T-Mobile, dan
Nvidia.

Pada saat perilisan perdana Android, 5 November 2007, Android bersama Open Handset
Alliance menyatakan mendukung pengembangan standar terbuka pada perangkat seluler. Di lain
pihak, Google merilis kode–kode Android di bawah lisensi Apache, sebuah lisensi perangkat lunak
dan standar terbuka perangkat seluler.

Kelebihan:

– Open source.
– Multitasking.
– Kemudahan dalam notifikasi.
– Mendukung banyak hardware mobile.
– Management widget yang flexibel.
6
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

– Tersedia banyak aplikasi pendukung.

– Dukungan penuh dari Google.
– User Interface yang interaktif.
– Telah mendukung HTML5.
– Tersedia Android Market untuk memenuhi kebutuhan user.
– Mendukung GPS.

Kekurangan:

– Harus terus update untuk memperbaiki bug.

– Banyak terpampang iklan dalam aplikasi.
Windows Phone

Gambar 1.4 Logo Wondows Phone

Sumber : https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Windows_Phone_8_logo_and_wordmark.svg/240px-
Windows_Phone_8_logo_and_wordmark.svg.png

Windows Mobile adalah salah satu sistem operasi (OS) mobile yang dikembangkan oleh
Microsoft dan di desain untuk digunakan pada smartphone dan perangkat nirkabel lainya. Versi saat
ini disebut ‘Windows 7 Mobile’. OS ini berbasis pada Windows CE 7 Kernel, dan fitur-fiturnya
dikembangkan menggunakan Microsoft Windows API. Windows Mobile didesain sedemikian rupa
agar mirip dengan versi Windows Desktop. Sebagai tambahan, third party software development
tersedia untuk Windows Mobile. Pertama kali dirilis sebagai sistem operasi Pocket PC 2000,
kebanyakan perangkat Windows Mobile dilengkapi dengan Stylus Pen, yang mana di gunakan untuk
memasukan perintah-perintah dengan cara men-tap-nya di layar.

Kelebihan:

– Dukungan penuh dari Microsoft.

– Aplikasi office yang lengkap.
– Tersedia Android Market untuk memenuhi kebutuhan user.
– Tersedia fitur Find My Phone untuk mengetahui lokasi ponsel anda.
– Tersedia fitur Live Tiles untuk memberikan informasi pada homescreen ponsel anda.

Kekurangan:

– Mudah terserang malware.

– Keterbatasan multitasking (hanya untuk aplikasi tertentu).
– Aplikasi bawaan dari sistem kurang memadai (tidak ada file transfer bluetooth, Windows
Explorer, Silverlight).
– Tidak mendukung internet tethering.

7
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Blackberry

Gambar 1.5 Logo Blackberry

Sumber : https://id.wikipedia.org/wiki/Berkas:Blackberry_Logo.svg

BlackBerry OS adalah sistem operasi mobile yang dikembangkan RIM yang mendukung
layanan multitasking untuk produk BlackBerry. BlackBerry diperkenalkan tahun 1997 oleh
Perusahaan Kanada, Research in Motion(RIM) yang mampu menyampaikan informasi jaringan data
nirkabel. BlackBerry mulai dikenalkan di Indonesia pada Desember 2004 oleh operator di Indonesia.
Pasar BlackBerry mulai diramaikan oleh berbagai operator dengan menyediakan berbagai pilihan
layanan seperti BlackBerry Internet Service dan BlackBerry Enterprise Server.

BES+ adalah layanan gabungan dari BES dan BIS, ditujukan bagi pelanggan korporasi
sehingga pelanggan dapat menerima dan mengirim email kantor yang berbasis Microsoft Exchange,
Novel Wise, Lotus Domino dan 10 akun e-mail berbasis POP3/IMAP melalui telepon genggam.
Sejauh ini, fasilitas BlackBerry memang baru dimanfaatkan oleh para pengguna pribadi dan
korporasi, belum merambah hingga bidang pemerintahan dan intelijen seperti di negara-negara lain.

Kelebihan:

– Fungsi BBM yang digunakan untuk chatting antar blackberry.

– Customize Theme untuk user level untuk mendesign thema blackberrynya sendiri.
– Fungsi geotag pada blackberry berGPS yang berisikan informasi.
– Tampilan akses multimedia yang sangat nyaman untuk digunakan.
– Fitur firewallnya,sangat efektif dalam memblok sms/mms/phone call yang tidak kita
inginkan.
– System full backup/recover mempermudah user dalam membackup data-data penting.

Kekurangan:

– Belum mendukung conference call.

– Tidak ada aplikasi native untuk menerima dan mengirimkan fax.
– Spell check yang membantu pengecekan kesalahan ketik hanya dapat berjalan jika selesai
diketik semua.
– Sinkronisasi antara email di blackberry dan server kurang maksimal.
– Browser bawaan blackberry tidak sempurna menampilkan webpage ber-javascript dan
animasi.

8
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Symbian

Gambar 1.6 Logo SymbianOS

Sumber : https://kaaeka.files.wordpress.com/2012/03/img_28111_symbian_os.jpg

Symbian OS adalah sistem operasi tak bebas yang dikembangkan oleh Symbian Ltd. Saat ini
Symbian OS banyak telah banyak digunakan oleh berbagai vendor produk peralatan komunikasi
mobile pada berbagai jenis produk mereka yang bervariasi. Variasi dari sisi hardware ini dimana
Symbian OS diimplementasi dapat dimungkinkan karena sistem operasi ini memiliki antarmuka
pemprograman aplikasi (Application Programming Interface; API). API mendukung terhadap
komunikasi dan tingkah laku yang umum pada hardware yang dapat digunakan oleh objek aplikasi
lain. Hal ini dimungkinkan karena API merupakan objek antarmuka yang didefenisikan pada level
aplikasi, yang berisikan prosedur dan fungsi (dan juga variabel serta struktur data) yang
mengelola/memanggil kernel dimana sebagai penghubung antara software dan hardware. Dengan
adanya standar API ini membantu pihak pengembang untuk melakukan penyesuaian atas aplikasi
yang dibuatnya agar dapat diinstal pada produk telepon bergerak yang bermacam-macam.

Kelebihan:

– Sistem stabil.
– Hemat Baterai.
– Mendukung video call.
– User Friendly.
– Banyak dukungan aplikasi.

Kekurangan:

– Interface yang statis.

– Mudah terserang malware.

C. Perangkat Pengembangan Aplikasi Mobile

Ada banyak pilihan bahasa yang dapat kita gunakan untuk membuat sebuah aplikasi mobile. Berikut
kami ringkas bahasa-bahasa pemrograman yang dapat dipakai untuk membuat aplikasi mobile.

Android

Java

Menurut TIOBE Index, Java merupakan bahasa pemrograman paling populer pada bulan Juni
2017. Jika pembaca ingin membuat aplikasi Android maka Java adalah pilihan terbaik saat ini. Java

9
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

memiliki komunitas yang sangat lah besar, baik di dunia maupun di Indonesia. Di Indonesia sendiri
Java bahkan memiliki grup facebook dengan anggota terbesar setelah PHP. Dengan adanya
komunitas yang besar kita tidak akan kesulitan untuk mencari jawaban saat menemukan kesulitan.

Kotlin

Kotlin merupakan bahasa yang didesain dan dikembangkan oleh JetBrains, perusahaan asal
Ceko yang mengembangkan berbagai IDE populer seperti IntelliJ IDEA, PyCharm, RubyMine,
PhpStorm, dll. Bahkan Android Studio yang dipakai setiap programmer Android professional
merupakan IDE yang dikembangkan di atas IDEA. Pada bulan Mei yang lalu di event Google I/O
2017, tim Android Google secara resmi mengumumkan dukungan penuh untuk bahasa pemrograman
Kotlin untuk membuat aplikasi Android.

Kotlin dikembangkan untuk mengatasi kekurangan-kekurangan yang dimiliki oleh Java.

Selain itu, salah satu fitur paling penting dari Kotlin adalah bahasa ini dapat dipakai bersamaan
dengan Java dalam satu aplikasi yang sama.

iOS

Swift

Jika pembaca ingin mengembangkan aplikasi untuk iOS, sistem operasi untuk iPhone dan
iPad, maka Swift merupakan opsi yang akan pembaca pilih. Bahasa ini diperkenalkan pada tahun
2014 dan dirilis source code-nya pada tahun 2015. Swift sangat populer diantara developer iOS
terutama untuk startup.

Apple telah menambahkan fitur-fitur keren ke bahasa nini seperti sintaks yang sederhana,
dapat memberitahu programmer asal error yang terjadi, dll. Usaha keras Apple untuk
mempromosikan Swift menunjukkan bahwa mereka ingin bahasa ini menjadi bahasa utama bagi
ekosistem iOS.

Objective-C

Sebelum adanya Swift, Objective-C merupakan bahasa yang dipakai untuk iOS. Meski Swift
sudah hampir mengambil alih sebagai bahasa utama pemrogramaan iOS, masih banyak proyek iOS
yang bergantung pada kode-kode Objective-C. Oleh karena itu transisi dari Objective-C ke Swift
akan berlangsung agak lambat dan pembaca mungkin akan butuh kedua bahasa untuk beberapa
proyek aplikasi.

Cross-Platform

JavaScript

Bahasa pemrograman yang sangat populer dikalangan web developer ini juga menjadi salah
satu bahasa yang bisa kita pakai untuk membuat aplikasi mobile. Framework JavaScript yang paling
populer untuk membuat aplikasi mobile adalah Ionic 2 dan React Native. Menggunakan salah
satu framework ini akan memperbolehkan kita mempublikasi aplikasi yang berjalan di iOS dan
Android dari satu sumber.

TypeScript

10
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

TypeScript adalah superset dari JavaScript yang menawarkan keamanan lebih lewat
opsi static typing. Bahasa ini memberikan dukungan yang lebih baik untuk menulis aplikasi berskala
besar. TypeScript memungkinkan developer menulis aplikasi mobile cross platform menggunakan
frameowrk seperti NativeScript.

C# adalah bahasa pemrograman untuk Windows Mobile. Sintaksnya sangat mirip dengan
C++ dan Java. Microsoft, pengembangnya, mengadopsi beberapa fitur Java untuk menyederhanakan
arsitektur C# sembari menjaga desain tetap mirip dengan C++. C# juga memiliki komunitas yang
cukup besar dan aktif. C Sebagai salah satu bahasa paling populer menurut indeks TIOBE sama
seperti Java, bahasa C memiliki komunitas developer yang berpengalaman. Bahasa C dapat dipakai
untuk membuat aplikasi mobile dengan Android NDK (Native Development Kit).

C++

Jika pembaca fmiliar dengan C, maka besar kemungkinan pembaca akan suka menulis dan
membaca kode C++. C++ adalah pengembangan dari bahasa C yang menambahkan fitur high-
level dan dukungan untuk pemrograman berorientasi objek. C++ juga menjadi bahasa favorit
developer Android NDK juga bahasa yang dipakai untuk mengembangkan aplikasi Tizen juga
Windows Mobile.

Python

Bahasa yang populer karena mudah dipelajari ini juga memungkinkan kita untuk menulis
aplikasi mobile. Jika pembaca sudah terbiasa menulis kode Python, framework Kivy dapat pembaca
pilih untuk mengembangkan aplikasi mobile.

Ruby

Ruby tak hanya Rails, bahasa ini juga bisa dipakai untuk menulis aplikasi mobile.
RubyMotion merupakan framework Ruby yang sangat baik untuk membuat aplikasi mobile yang
native dan cross platform.

D. Metode Pengembangan Aplikasi Mobile

Di ranah pengembangan aplikasi mobile, akan sering mendengar istilah seperti aplikasi native atau
aplikasi web, atau bahkan aplikasi hybrid. Ketika memutuskan jenis aplikasi yang dibangun memanglah
penting. Banyak faktor-faktor yang harus dipertimbangkan dan disesuaikan dengan bisnis. Aplikasi jenis
native atau hybrid biasanya memiliki pengalaman produk yang lebih baik pada perangkat mobile dan dapat
didistribusikan di toko-toko aplikasi. Namun sayangnya dari sisi budget lebih mahal dibanding aplikasi web.
Periksalah prioritas bisnis yang akan kamu rencanakan saat ini dan ambil pilihan yang terbaik.

11
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Native

Gambar 1.7 Contoh Aplikasi Native

Sumber : http://www.ajnnews.com/wp-content/uploads/2013/09/web-apps-276x300.png

Aplikasi native adalah aplikasi yang dibangun dengan bahasa pemrograman yang spesifik
untuk platform tertentu. Contoh populernya yakni penggunaan bahasa pemrograman Objective-C
atau Swift untuk platform iOS (Apple). Adapun platform Android yang menggunakan bahasa
pemrograman Java.

Membangun aplikasi native harus menyediakan pengalaman produk yang optimal pada
perangkat mobile. Meskipun begitu, budget yang tinggi dibutuhkan untuk membangun aplikasi cross
platform yang mampu mempertahankan aplikasi native tetap update.

Hybrid

Gambar 1.8 Metode Hybrid

Sumber : https://s3.amazonaws.com/dfc-wiki/en/images/c/c2/Native_html5_hybrid.png

Aplikasi hybrid adalah aplikasi web yang ditransformasikan menjadi kode native pada
platform seperti iOS atau Android. Aplikasi hybrid biasanya menggunakan browser untuk
mengijinkan aplikasi web mengakses berbagai fitur di device mobile seperti Push Notification,
12
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Contacts, atau Offline Data Storage. Beberapa tools untuk mengembangkan aplikasi hybrid antara
lain Phonegap, Rubymotion dan lain-lain.

Keuntungan membangun aplikasi hybrid diantaranya pemeliharaan project menjadi semakin

mudah jika dibandingkan dengan aplikasi native. Aplikasi hybrid juga, bisa dibangun secara cepat
untuk keperluan cross platform dan dana yang bisa menjadi lebih hemat jika dibandingkan dengan
native.

Web Mobile

Gamber 1.9 perbedaan metode web mobile

Sumber : https://socialwebbiz.files.wordpress.com/2011/09/appsillustrated_nativewebhybrid.jpg

Aplikasi web bisa menjadi pilihan yang terbaik untuk membangun produk yang diinginkan.
Karena benar-benar minim persyaratan, dengan kata lain akses ke fitur dari perangkat mobile seperti
Push Notification tidak diperlukan. Aplikasi web bisa menjadi pilihan yang murah dari sisi budget.
Namun sayangnya, aplikasi web tidak bisa didistribusikan melalui toko aplikasi native seperti App
Store atau Google Play.

Latihan Soal

1. Apakah yang dimaksud dengan teknologi mobile itu?

2. Jelaskan metode komunikasi data dalam aplikasi mobile !
3. Jelaskan fungsi sistem operasi pada perangkat mobile beserta 3 contohnya?
4. Apakah kelebihan dan kekurangan sistem operasi Android !
5. Jelaskan kelebihan dan kekuranan dari masing-masing metode pengembangan aplikasi mobile!

13
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Install NodeJS

Install Apache
Cordova

Tool Installasi Tool

Pengembangan pengembang Install Java
Aplikasi Mobile aplikasi Mobile
Desain Aplikasi
Mobile
Uji coba Aplikasi
Install Ant
Mobile

Install Android
SDK

14
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.26 Menerapkan teknik desain aplikasi mobile

4.26 Membuat desain aplikasi berbasis mobile
Judul Desain Aplikasi Mobile

BAB II

Tool Pengembangan Aplikasi Mobile

Indikator Ketercapaian Kompetensi

3.26.1 Menjelaskan prosedur instalasi tools pengembang aplikasi mobile.

3.26.2 Menjelaskan kebutuhan perangkat keras untuk tools pengembang aplikasi mobile.
4.26.1 Menguji hasil aplikasi berbasis mobile.

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Menjelaskan prosedur instalasi tools pengembang aplikasi mobile sesuai dengan prosedur installasi
aplikasi cordova dengan tepat.
2. Menjelaskan kebutuhan perangkat keras untuk tools pengembang aplikasi mobile sesuai kaidah
konsep pengembangan aplikasi mobile dengan tepat.
3. Menguji hasil aplikasi berbasis mobile sesuai dengan desain yang telah dibuat dengan teliti.

A. Tool Pengembang Aplikasi Mobile.

Apache Cordova (dulunya adalah PhoneGap) adalah framework pengembangan aplikasi mobile yang
awalnya dibuat oleh perusahaan bernama Nitobi. Pada tahun 2011 kemudian Adobe System membeli
perusahaan tersebut, dan menyerahkan pengembangan open source kepada Apache Software Foundation
dengan nama baru Apache Cordova. Apache Cordova memungkinkan pengembang untuk membuat aplikasi
mobile dengan menggunakan CSS3, HTML5 dan JavaScript daripada menggunakan API yang spesifik
untuk masing-masing platform seperti Java untuk Android, Swift untuk iOS dan C# untuk Windows Phone.
Dengan satu kode sumber yang sama, Apache Cordova dapat membungkus aplikasi agar dapat berjalan di
banyak jenis device.

Gambar 2.1 Logo apache cordova

Sumber : https://cordova.apache.org/static/img/artwork/cordova_logo_normal_dark_large.png

15
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Pada apache cordova ini menawarkan beberapa fitur-fitur yang cukup menarik bagi developer di
antaranya adalah :

1. Dalam aplikasi apache cordova ini terdapat fitur multi-platform yang di mana kita bisa membuat
suatu aplikasi berbasis mobile di beberapa jenis operasi sistem pada mobile phone, pada aplikasi
pengembangan mobile lainnya yang tidak memiliki fitur ini, ketika kita membuat suatu aplikasi
berbasis android, maka aplikasi tersebut hanya support pada mobile phone yang di mana operasi
sistemnya menggunakan Android. Jika ingin aplikasi kita tersebut ingin berjalan di sistem operasi
lain, kita harus membuat aplikasi yang lain menggunakan aplikasi pengembang lainnya yang suport
dengan operasi sistem yang kita inginkan. Maka dari itu fitur dari apache ini sangat berguna sekali
bagi pengembang aplikasi mobile, karna kita tidak perlu susah susah untuk membuat suatu aplikasi
yang support di sistem operasi lainnya.
2. Pada apache cordova ini menggunakan bahasa pemrograman HTML, CSS3 dan JavaScript yang
dimana kita tidak perlu mempelajari bahasa pemrograman lainnya yang terpisah, seperti pada
aplikasi android studio, di sana kita menggunakan bahasa pemrograman JavaScript, akan tetapi
untuk library nya berbeda dengan JavaScript pada umumnya, jadi kita perlu mempelajari bahasa
pemrograman tersebut agar dapat menggunakan aplikasi android tersebut dengan baik.
3. Pada aplikasi cordova ini memudahkan kita untuk mengatur interface / penampilan pada sebuah
aplikasi yang akan kita buat, karna pada apache cordova ini terdapat bahasa pemrograman CSS3 dan
HTML, jadi kita dengan mudah mengatur interface suatu aplikasi dengan menggunakan css dan
HTML tersebut, dan juga kita dapat dengan mudah mengatur icon dan gambar lain-lainnya pada
aplikasi tersebut.
4. Karena di kembangkan dengan bahasa web standart, akan tetapi aplikasi tersebut tidak jauh berbeda
dengan aplikasi native lainnya dalam pemasangan aplikasi tersebut.

Selain adanya kelebihan, pasti ada pula kekurangan-kekurangan yang terdapat pada aplikasi ini,
antara lain :

a. Ketika kita selesai membuat suatu aplikasi, terdapat kemungkinan terjadi nya reverse-
engineering, yang di mana aplikasi yang sudah kita buat ini dapat terjadinya pengeditan kode
oleh pengguna aplikasi kita.
b. Karna plugin yang terdapat di aplikasi apache cordova ini di kembangkan oleh kontributor yang
berbeda-beda, maka ada kemungkinan besar nya perkembangan plugin tersebut akan terhenti
(tidak berkembang ).
c. Dokumentasi pada aplikasi ini terbilang cukup minim, jadi terdapat kesulitan bagi pengembang
dalam bagian dokumentasi aplikasi tersebut.
d. Berkemungkinan untuk jalannya hybrid app yang lebih lama di bandingkan dengan aplikasi-
aplikasi native lainnya.

B. Installasi Perangkat Pengembangan Aplikasi Mobile.

Apache Cordova diinstal menggunakan Node Package Manager (NPM). Maka dari itu terlebih
dahulu kita install Node JS. Jika belum terinstall NodeJS, silakan install terlebih dahulu.

16
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Installasi NodeJS

Gambar 2.2 Logo NodeJS

Sumber :https://static.cdn-cdpl.com/wp-images/2015/03/nodejs-green-image(700x350-crop).png

kita mengenal JavaScript sebagai client side scripting, sekarang JavaScript sudah ada untuk server
side scriptingnya juga. Dialah Node.js. Artinya sekarang Kamu bisa membangun layanan web
menggunakan bahasa JavaScript. Node.js punya NPM atau Node Package Manager, yaitu
managemen paket librari untuk Node.js. NPM memudahkan pengembang untuk membagikan librari
dan aplikasi node, sehingga orang lain dapat dengan mudah memasang dan menghapus librari pada
programnya.

a) Install di windows
Untuk instalasi di Windows, Kamu cukup mengunduh installer yang telah disediakan untuk
Windows. Buka halaman download Node.js dan klik tautan unduhan untuk Windows
Installer. Jalankan installer dan ikuti panduannya seperti menginstal aplikasi lainnya pada
Windows.

Gambar 2.3 laman download NodeJS

b) Install di MacOS

Sama seperti di Windows, untuk instalasi di Mac OS pun Kamu cukup

mengunduh installer yang telah disediakan untuk Mac OS. Buka halaman download Node.js
dan klik tautan unduhan untuk Macintosh Installer. Jalankan installer dan ikuti panduannya
seperti menginstal aplikasi pada umumnya.

c) Install di Linux

Untuk instalasi di Ubuntu, lebih mudah menggunakan Package Manager. Langkah-langkah

berikut dapat diterapkan pada Ubuntu 14.04 LTS ke atas dan Debian 8 ke atas. Selain itu juga
dapat diterapkan pada distribusi turunannya seperti Linux Mint 17, Elementary OS Freya dan
Trisquel 7.

17
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Pada terminal jalankan perintah berikut:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -

sudo apt-get install -y nodejs

sudo apt-get install -y build-essential

Adapun untuk instalasi di distribusi linux lainnya, Kamu bisa merujuk ke halaman panduan
instalasi langsung di website Node.js disini.

Cek Hasil Instalasi

Untuk memastikan NodeJS sudah terinstal dengan baik dan sudah terdaftar di path (untuk
Windows), buka jendela baru terminal atau cmd lalu ketikkan perintah berikut:

node -v

npm –v

Kedua perintah di atas berfungsi untuk mengecek nomor versi nodejs dan npm. Apabila
nomor versi muncul maka itu artinya nodejs dan npm sudah siap digunakan.

Installasi Cordova

buka aplikasi terminal atau command prompt lalu ketikkan perintah berikut:

npm install -g cordova

Instalasi membutuhkan koneksi internet. Tunggu proses instalasi dan bila telah selesai, tes hasil
instalasi dengan perintah berikut:

cordova –v

Bila muncul nomor versi, itu artinya sudah berhasil menginstal Cordova!

Installasi JDK (Java Delopment Kits)

Untuk export ke package Android, kita membutuhkan Android SDK. Android SDK juga
membutuhkan Java Development Kit atau JDK. Untuk mengecek apakah JDK sudah terinstal di
komputermu, ketikkan perintah berikut:

javac –version

18
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kalo belum terinstal, ikuti langkah-langkah berikut untuk menginstal JDK:

Unduh Java SE JDK (Standard Edition) dari

website Oracle: http://www.oracle.com/technetwork/java/javase/downloads/index.html.

Gambar 2.4 Web download JDK

Klik tombol Java SE Downloads untuk menampilkan daftar unduhan. Klik radio Accept License
Agreement lalu klik tautan Windows x86 bila komputermu 32bit dan Windows x64 bila komputer
64bit.

a. Mulai instalasi JDK. Pastikan Kamu mengingat dimana folder JDK ini tersimpan karena akan
kita daftarkan pada PATH di Windows.
b. Setelah proses instalasi selesai, update path dengan lokasi instalasi JDK agar JDK dapat
dikenali di command line. Buka Control Panel, pilih System and Security, pilih System,
pilih Advanced System Settings, akan muncul jendela System Properties. Pada tab
Advanced klik tombol Environment Variables.

19
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 2.5 Environtment Variable

c. Pada jendela Environment Variables bagian list user variables, pilih variable PATH lalu klik
tombol Edit. Pada bagian akhir Variable value, tambahkan path folder tempat JDK
disimpan, dalam kasus di komputer saya pathnya adalah ;C:\Program
Files\Java\jdk1.7.0_71\bin. Kita pisahkan path value sebelumnya dengan path baru JDK kita
dengan titik koma. Klik tombol OK pada jendela Edit.
d. Selanjutnya buat variable dengan mengklik tombol New.., pada bagian Variable name isi
dengan JAVA_HOME(jika variabel ini sudah ada, maka pilih dan klik tombol Edit), lalu
pada bagian Variable value isi path folder JDK seperti langkah sebelumnya dengan tanpa
diakhiri folder \bin. Dalam kasus di komputer yang saya gunakan adalah ;C:\Program
Files\Java\jdk1.7.0_71. Klik tombol OK.

Gambar 2.6 User variabel

e. Klik tombol OK lagi untuk menutup jendela Environment Variable.
f. Sekarang tes hasil instalasi. Buka jendela terminal atau cmd baru lalu ketik perintah

javac -version

Kalo muncul nomor versi, itu tandanya JDK sudah siap digunakan.
g. Jika tidak muncul, bisa direstart untuk booting ulang komputer.

Installasi Ant

Apache Ant adalah library Java dan command line tool untuk mengatur proses pembangunan aplikasi
Java. Ant sudah menyediakan beberapa task seperti proses kompilasi, assembling, testing dan

20
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

menjalankan aplikasi Java. Ant ini nantinya akan digunakan oleh Cordova dan Android SDK untuk
membangun aplikasi. Untuk proses instalasi Ant, ikuti langkah-langkah berikut:

a. Pada halaman http://ant.apache.org/bindownload.cgi, unduh versi terbaru Ant yang

berekstensi .zip seperti apache-ant-1.9.7-bin.zip.
b. Ekstrak file .zip tersebut di tempat yang Kamu inginkan. Saya mengekstrak file tersebut di
direktori D:\ sehingga pathnya menjadi D:\apache-ant-1.9.7.
c. Masukkan path folder Ant ke dalam variable PATH pada sistem Windows, seperti yang kita
lakukan saat menambahkan path JDK pada step sebelumnya. Buka Control Panel,
pilih System and Security, pilih System, pilih Advanced System Settings, akan muncul
jendela System Properties. Pada tab Advanced klik tombol Environment Variables.

Gambar 2.7 Environtment Variable

d. Pada jendela Environment Variables bagian list user variables, pilih variable PATH lalu klik
tombol Edit. Pada bagian akhir Variable value, tambahkan path folder Ant, dalam kasus di
komputer saya pathnya adalah ;D:\apache-ant-1.9.7\bin. Kita pisahkan path value
sebelumnya dengan path baru Ant dengan titik koma. Klik tombol OK pada jendela Edit.
e. Selanjutnya buat variable dengan mengklik tombol New.., pada bagian Variable name isi
dengan ANT_HOME(kalo variabel ini sudah ada, maka pilih dan klik tombol Edit), lalu
pada bagian Variable value isi path folder Ant seperti langkah sebelumnya dengan tanpa
diakhiri folder \bin. Dalam kasus di komputer saya adalah ;D:\apache-ant-1.9.7. Klik tombol
OK.
f. Klik tombol OK lagi untuk menutup jendela Environment Variable.
g. Sekarang tes hasil instalasi. Buka jendela terminal atau cmd baru lalu ketik perintah

ant -version

Kalo muncul nomor versi, itu tandanya JDK sudah siap digunakan.

21
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Installasi Android SDK Tools

Android SDK Tools digunakan oleh Cordova untuk membangun aplikasi Android. Kalo Kamu sudah
pernah menginstall Android Studio, maka Kamu tinggal mencatat dimana letak folder instalasi
Android SDKnya. Kalo belum, kita cukup mengunduh dan menginstal Android SDK Tools. Ikuti
langkah-langkah berikut untuk menginstalnya:

a. Buka halaman http://developer.android.com/sdk/index.html dan pada bagian Download pilih

yang Get just the command line tools only dan klik tautan download yang zip, seperti sdk-
tools-windows-4333796.zip.

Gamber 2.8 laman android SDK

b. Ekstraklah instdan catat path dimana Kamu ekstrak.

Gamber 2.9 hasil ekstrak android SDK

c. Daftarkan path Android SDK pada variable PATH seperti pada step
sebelumnya. Buka Control Panel, pilih System and Security, pilih System, pilih Advanced
System Settings, akan muncul jendela System Properties. Pada tab Advanced klik
tombol Environment Variables..
d. Pada jendela Environment Variables bagian list user variables, pilih variable PATH lalu klik
tombol Edit. Pada bagian akhir Variable value, tambahkan path folder tools dan platform-
tools Android SDK, dalam kasus di komputer saya path toolsnya adalah dan path platform-
toolsnya adalah ;C:\Program Files (x86)\Android\android-sdk\platform-tools. Kita
pisahkan antar path value dengan titik koma. Klik tombol OK pada jendela Edit.
e. Klik tombol OK lagi untuk menutup jendela Environment Variable.
f. Tes hasil instalasi dengan memanggil perintah pada jendela baru cmd:

adb version

22
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Perintah ini akan menampilkan nomor versi Android Debug Bridge.

g. Langkah terakhir adalah menginstall versi SDK yang dibutuhkan oleh Cordova. Panggil
perintah android pada command line untuk memunculkan jendela Android SDK Manager.
Akan muncul daftar ceklis apa saja yang harus diinstal dan diupdate dari Android SDK. Saat
pertama kali menjalankan Android SDK Manager ini, akan ada beberapa bagian yang secara
default terceklis. Biarkan seperti itu lalu klik tombol Install n Package.. Aplikasi akan
mengunduh dan menginstal sejumlah SDK yang wajib diinstal. Saat tulisan ini dibuat versi
Cordova terakhir adalah versi 6.1 dan dia memerlukan SDK Android 6.0.

Gambar 2.9 Android SDK Manager

Sumber : http://marimengetahuiandroid.blogspot.com/2016/03/cara-install-sdk-android.html

h. Kedepannya seiring perkembangan Cordova mungkin versi SDK yang diperlukan oleh
Cordova juga akan meningkat. Kita bisa menyesuaikan kebutuhan dengan menginstal SDK
yang diperlukan seperti pada langkah di atas. Atau Untuk menginstall dengan command line
bisa dengan memanggil perintah pada jendela baru cmd ketikan perintah

sdkmanager "platform-tools""platforms;android-28"

Gamber 2.10 proses install android SDK

23
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

C. Uji Coba Perangkat Pengembangan Aplikasi Mobile.

Sekarang saatnya mencoba membuat aplikasi Android berbasis HTML5 dengan Cordova. Disini
saya menggunakan linux ubuntu yang sudah terinstall aplikasi cordova, prosedur dan perintahnya sama
karena menggunakan CLI. Disini saya membuat folder kerja di Desktop dengan nama folder cordova.

Gambar 2.11 folder kerja

karena perintah daasar cordova banyak menggunakan CLI maka. Anda harus paham minimal
perintah input dan output di command line. Untuk membuat project pertama dengan Cordova, buka
command line lalu ketikkan perintah seperti berikut:

cordova create firstApp com.example.firstapp FirstApp

Gambar 2.12 perintah membuat project baru

Perintah cordova create berfungsi untuk membuat initial project cordova. Parameter pertama adalah nama
path folder project, parameter kedua adalah indentifier aplikasi, dan parameter ketiga adalah nama aplikasi.
Perintah ini akan membuatkan folder dengan nama firstApp yang berisi file-file configurasi untuk
membangun aplikasi. Setidaknya ada 4 folder yang disiapkan, yakni folder hooks, platforms, plugins,
dan www, serta satu file config.xml. Aplikasi HTML kita disimpan di folder www. Setelah membuat
project, folder www sudah berisi contoh file html. Kamu bisa mengecek isinya atau membukanya melalui
browser. Tapi bila kita membuka file html langsung di browser, akan ada beberapa aplikasi javascript yang
tidak dapat berjalan, karena lingkungan kerja aplikasi berbeda dengan lingkungan kerja browser biasa.

Gambar 2.13 isi folder kerja

24
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Untuk dapat melihat hasil simulasi aplikasi kita dengan baik, kita harus membukanya melalui emulator.
Pada jendela command line, masuk ke folder project lalu jalankan perintah berikut:

cordova platform add browser

Gambar 2.13 perintah tambah platform browser

Perintah di atas berfungsi untuk menambahkan library yang diperlukan untuk dapat berjalan di suatu
platform, dalam kasus di atas adalah platform browser. Dibutuhkan koneksi internet untuk menginstal
library tersebut. Setelah selesai, jalankan perintah berikut untuk menjalankan aplikasi pada browser:

cordova run browser

Gambar 2.14 perintah cordova untuk simulasi ke browser

25
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Perintah ini akan membuka browser dan menjalankan aplikasi dengan baik. Hingga titik ini Kamu bisa
mulai mengembangkan aplikasi yang Kamu inginkan menggunakan HTML5, CSS dan JavaScript. Kamu
dapat menggunakan JavaScript library seperti jQuery atau JavaScript framework seperti Ionic atau
Framework7.Kita juga dapat membuat style sendiri atau menggunakan CSS framework
seperti Bootstrap dan Foundation. Untuk keluar dari emulator browser, tekan tombol Ctrl + C pada
keyboard. Kamu bisa sedikit bermain-main dengan kode html yang sudah ada, misalnya mengganti konten
tag.

Sekarang kita akan membuild aplikasi web kita ke dalam bentuk file .apk yang nantinya bisa diinstalkan ke
handphone Android. Pertama-tama kita tambahkan dulu library yang diperlukan untuk dapat membuild ke
platform android. Jalankan perintah berikut untuk menambahkan platform:

cordova platform add android

Gambar 2.15 perintah tambah platform android

Kemudian jalankan perintah berikut untuk membuild:

cordova build android

Gambar 2.16 perintah build ke APK

26
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder
project firstApp\platforms\android\build\outputs\apk\ dengan nama file android-debug.apk. Kamu bisa
mencoba menyalin file tersebut ke dalam handphone smartphone Android dan menginstalnya. Pastikan
mode developer sudah diaktifkan di handphone Androidnya.

Gambar 2.17 Hasil build APK

Latihan Soal

1. Apakah kelemahan dari pengembangan metode hybrid dengan menggunakan Apache Cordova?
2. Sebutkan software apa saja yang harus di install untuk membuat aplikasi hybrid?
3. Perintah apa saja yang digunakan oleh apache cordoba dalam membuat aplikasi mobile?
4. Jelaskan langkah-langkah installasi apache cordova?

27
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Menggunakan Installasi
Aplikasi Mockup Framework7
Desain Aplikasi
Mobile
Memerapkan
desain dengan Konsep Layout
Framework 7

Desain Aplikasi
Mobile dengan
Framework7

28
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.26 Menerapkan teknik desain aplikasi mobile

4.26 Membuat desain aplikasi berbasis mobile
Judul Desain Aplikasi Mobile

BAB III

Desain Aplikasi Mobile

Indikator Ketercapaian Kompetensi

4.26.2 Merancang aplikasi berbasis mobile dengan tools pengembang.

4.26.3 Membuat aplikasi mobile menggunakan tools pengembang.
4.26.4 Menguji hasil aplikasi berbasis mobile.

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Merancang aplikasi berbasis mobile dengan tools pengembang sesuai standar rancangan aplikasi
mobile dengan cermat.
2. Membuat aplikasi mobile menggunakan tools pengembang sesuai dengan desain yang dibuat dengan
teliti.
3. Menguji hasil aplikasi berbasis mobile sesuai dengan desain yang telah dibuat dengan teliti.

A. Menggunakan Aplikasi Mockup.

Salah satu kebutuhan yang penting di dalam penyampaian informasi adalah mock up desain. Melalui
mock up, Anda dapat melihat visualisasi calon aplikasi Anda secara nyata sehingga Anda dapat memberikan
masukan kepada desainer jika tampilan mock up dirasa belum sesuai dengan permintaan sebelumnya.

Mock up selain disebut sebagai visualisasi sebuah konsep desain, bisa juga disebut sebagai gambaran
nyata rancangan produk, atau preview sebuah ide yang terlihat seperti wujud aslinya. Anda bisa melihat
seperti apa preview dari rancangan halaman web yang akan dibuat. Hal ini akan persis seperti aslinya, hanya
saja masih belum memakai aplikasi web dan ini dalam bentuk layout.

Adapun fungsi membuat mock up adalah sebagai berikut

1 Media presentasi proyek desain aplikasi.

2 Menampilkan konsep desain yang akan ditawarkan, seakan-akan nyata.
3 Pedoman teknis untuk merancang halaman.
4 Kontrol agar tampilan desain yang dibuat tak melenceng dari rencana awal.
5 Memudahkan Anda mendapat gambaran konsep aplikasi.

29
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Ada berbagai macam aplikasi untuk membuat mockup, seperti AdobeXD, Balsamiq, Adobe Ilustrator, corel
photoshop dan lainnya. Disini kita menggunakan aplikasi mockup online dari https://moqups.com/. Aplikasi
ini berbasiskan cloud computing yang menggunakan internet sebagai media penyimpanan dan
operasionalnya. Namun karena kita menggunakan versi Free jadi maksimal kita bisa membuat 1 project saja.

Gambar 3.1 website moqups.com

Sebelum menggunakannya anda bisa daftar atau sign up terlebih dahulu dengan klik tombil Create a FREE
Account kemudian anda diminta untuk memasukan email anda yang aktif beserta passwordnya. Jika anda
sudah memiliki akun bisa langsung melakukan login dengan akun anda

Gambar 3.2 form login moqups.com

Kemudian Anda bisa membuat project baru dengan cara klik Blank Project atau bisa memilih contoh
template yang sudah disediakan.

Gambar 3.3 welcome screen moqups.com

30
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Pada lembar kerjanya memiliki beberapa tool yang bisa digunakan untuk membuat rancangan atau desain
aplikasi yang ingin kita buat. Berikut penjelasan dari lembar kerja moqups.com

4
5
2

Gambar 3.4 IDE moqups.com

(1). Worksheet atau lembar kerja : tempat dimana kita meletakkan komponen atau desain mockup
yang akan kita buat. Dalam suatu worksheet terdiri dari beberapa page atau laman yang nantinya
bisa kita link agar navigasi bisa disimulasikan secara nyata
(2). Component Pallete : merupakan kumpulan komponen desain mockup yang bisa digunakan
dalam membuat suatu desain mockup, seperti form, button, card dan berbagai macam simbol dan
elemen untuk membuat desain
(3). Properties : berfungs untuk mengatur berbagai macam konfigurasi ditiap komponen yang
digunakan, sepeti warna, font, ukuran dan sebagainya.
(4). Menu bar : berisi menu-menu untuk mengatur lembar kerja agar sesuai dengan apa yang kita
inginkan, seperti mengubah nama project, merubah nama page atau laman, memperbesar
worksheet, undo, redo dan lainnya.
(5). Preview button: berfungsi untuk meninjau hasil desain kita secara simulasi agar konsep desain
yang kita buat bisa tergambarkan secara nyata

Gambar 3.5 contoh desain mockup aplikasi mobile

31
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

B. Desain Aplikasi Mobile Dengan Framework 7.

Gambar 3.6 website framework7.io

Framework7 merupakan HTML framework yang dapat membantu kita untuk membuat dan
mengembangkan sebuah aplikasi hibrid untuk Android dan iOS. Framework7 ini terbentuk di tahun 2014
dan memiliki lisensi MIT. Meskipun belum begitu hits dan hanya fokus untuk aplikasi Android dan iOS
saja,namun Framework7 memiliki dokumentasi yang cukup baik untuk membantu para developer yang
ingin mempelajari framework ini. Disini kita akan menggunakan framework7 versi 1.0.

1. Installasi Framework 7
Untuk memulai menggunakan framework 7 pertama kita harus download bundling nya terlebih
dahulu di https://github.com/framework7io/framework7/tree/v1

Gambar 3.7 laman untuk download framework7

Untuk memulai mengunduh klik Clone or Download, maka akan mendapatkan file zip yang
berisi master dari framework7 seperti dibawah ini.

32
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 3.8 file Framework7.zip

Untuk contoh dan file master ada pada folder dist. Didalam folder itu ada folder utama yaitu css,
js, img. Untuk memulai intergrasi dengan cordova langkahnya adalah
a. Buka command line kemudian masuk ke directory kerja Cordova semisal dokumen kerja
kita ada di Document, perintahnya adalah

cd Documents/cordova

b. Buat project baru semisal coba dengan perintah, tambahkan pula platform yang kita
gunakan untuk mengembangkan aplikasi mobile kita.

cordova create coba com.example.coba

c. Copykan folder css, img, dan js yang ada pada folder master Framework7 di distyang
sudah di ekstrak, kedalam folder wwwdidalam folder coba. Jika muncul konfirmasi
replace klik OK

Gambar 3.9 memasukan master framework7

d. Buka file index.html didalam folder project anda dengan text editor (notepad++, sublime,
dreamwearver dll). untuk CSS yang perlu di masukan adalah file
framework7.material.min.css yang berfungsi untuk standar CSS framework7,
framework7.material.colors.css untuk style warna, dan my-app.css untuk memberikan
custom css yang kita buat sendiri. Jika anda menginginkan membuat desain untuk
33
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

aplikasi iOS, pada CSS bisa dipilih file CSS framework7.ios.min.css dan
framework7.ios.colors.css. sedangkan untuk file JS atau javascript yang dibutuhkan
hanya framework7.min.js untuk standar javascript framework7 dan my-app.js yang
berfungsi untuk memasukan file javascript yang kita gunakan. Tambahkan kode untuk
include kan CSS dan JS dari framework7 seperti dibawah ini pada file index.html anda.

Menyisipkan CSS Framework7

Menyisipkan JS Framework7

Gambar 3.10 include CSS dan JS framework7 di index.html

2. Konsep Layout Framework 7

Sebelum mendesain aplikasi dengan framework 7 ada baiknya kita mengerti bagaimana konsep
layout yang terapkan.

Gambar 3.11 konsep layout framework 7

Pada dasarnya karena framework 7 menggunakan HTML sebagai dasarnya, maka strukturnya
tidak jauh beda. Framework 7 menggunakan tag DIV dengan atribut class untuk membuat desain
layout aplikasi mobile yang diletakkan didalam tag BODY. Untuk div class yang pertama adalah
VIEWS yang digunakan untuk mendefiniskan lembar layout aplikasi, kemudian didalamnya ada
tag div class VIEW VIEW-MAIN selanjutnya diikuti oleh div class NAVBAR sebagai kode
untuk membuat navbar dan menu, kemudian TOOLBAR sebagai menu tambahan aplikasi
34
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

mobile. Dilanjutkan dengan CONTENT PAGE yang berisi isi atau konten dari tampilan yang
kita inginkan.

3. Integrasi Desain Aplikasi Mobile dengan Framework 7

Sebagai contoh ada suatu desain mockup yang ingin kita kembangkan menjadi aplikasi mobile.
Dimana mockup tersebut adalah suatu aplikasi android yang menggunakan side panel atau menu
samping sebagai menu utamanya. Seperti dibawah ini

Gambar 3.12 mockup aplikasi android 1 halaman

Sebelumnya anda buka terlebih dahulu file my-app.js yang ada pada folder JS di project anda
lakukan sedikit perubahan pada baris berikut

Gambar 3.13 edit file my-app.js

Penambahan parameter swipePanel: ‘left’ digunakan agar menu panel samping bisa muncul
dengan menggunakan gestur geser layar dari arah kiri. Sedangkan opsi material: true digunakan
untuk style atau Platform yang kita gunakan adalah material design tentunya material design
merupakan layout dari aplikasi Android. Sedangkan kode untuk membuat mockup diatas dalam
kode HTML file index.php adalah sebagai berikut

35
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 3.14 Kode HTML untuk aplikasi android 1 halaman

Untuk Penjelasan perbaris dari Kode HTML diatas adalah sebagai berikut

36
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 3.15 Potongan Kode HTML untuk aplikasi android 1 halaman

Kode diatas mengandung tag HTML dasar seperti head, title, meta , untuk memasukan judul
menggunakan tag title, sedangkan meta digunakan untuk identifikasi format konten dari halaman
web yang akan dibuat. Yang paling penting adalah kode untuk menyisipkan CSS dasar dari
framework 7 pada bagian tag <link rel>. Dimana file framework7.material.min.css,
framework7.material.colors.css, dan my-app.css harus dimasukan.

Gambar 3.16 Potongan Kode HTML untuk aplikasi android 1 halaman

37
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Untuk properties class = “theme-blue”pada tag body digunakan untuk memberikan tema warna
yang kita gunakan. Seperti misal jika kita ingin menggunakan warna merah maka class nya
adalah theme-red. Untuk tag <div class=”views”> merupakan elemen utama dalam layout
framework7. Didalamnya mengandung <div class=”view view-main”> dan tag<div
class=”pages”> untuk membentuk suatu halaman. Untuk <div class=”navbar”> digunakan
untuk membuat navbar atas aplikasi, dimana ada link <a href=”#” class=”link icon-only open-
panel”>yang digunakan untuk tombol untuk membuka menu samping.

Gambar 3.17 Kode untuk membuat NavBar

Untuk side panel atau panel samping yang nantinya akan muncul ketika di klik icon bars.
Kodenya adalah sebagai berikut

Gambar 3.18 Kode untuk membuat SidePanel

Pada side panel juga bisa diberika tag href untuk memberikan navigasi ke halaman yang lainnya

38
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 3.19 Kode untuk membuat Konten

<div data-page=”index” class=”page”> merupakan kode yang berfungsi untuk memberikan

konten dalam layout. Pada bagian properties data-page=”index” index adalah nama file kita.
Secara default framework 7 memanggil halaman dengan cara menyisipkan isi atau konten
kedalam file index.html dengan teknologi AJAX. Jadi saat membuat halaman lain kita tidak perlu
menuliskan semua tag kode (Seperti html, head, title, body). Hanya cukup pada tag <div
class=”data-page”>. Sehingga nama data-page harus sama dengan nama file yang kita buat.

Untuk tag <div class=”page-content”> digunakan untuk memberikan isi dalam page. Seperti
text, tombol, gambar dan lainnya. Tag-tag html seperti img, button, ul, p, form bisa disisipkan
pada bagian ini.

Gambar 3.20 Kode untuk menyisipkan javascript framework7

Kode diatas untuk file JS atau javascript framework7.min.js untuk standar javascript
framework7 dan my-app.js yang berfungsi untuk memasukan file javascript yang kita
gunakan. Kita juga bisa menyisipkan file library javascript yang lain seperti googleMap API
untuk membuat aplikasi dengan peta digital.

Latihan Soal

1. Apakah yang dimaksud mockup itu?

2. Jelaskan kegunaan dari mockup dalam mengembangkan aplikasi mobile!
3. Sebutkan contoh aplikasi yang bisa digunakan untuk membuat mockup aplikasi mobile?
4. Jelaskan secara singkat langkah install framework 7 dalam membangun aplikasi mobile!

39
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

5. Buatlah aplikasi mobile dengan menggunakan cordova dan framework 7 berdasarkan desain mockup
berikut ini

40
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Konsep
MultiWindows

Multiwindows
Aplikasi Mobile
dengan
Multiwindows
Framework7
Membuat
Aplikasi
MultiWindows

41
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.27. Menerapkan teknik desain aplikasi multi

window
4.27. Membuat desain aplikasi multi window
Judul Multiwindow dalam aplikasi Mobile

BAB IV

Aplikasi Mobile Multiwindow

Indikator Ketercapaian Kompetensi

3.27.1 Menjelaskan konsep teknik desain aplikasi multiwindow mobile.

3.27.2 Menerapkan disain multiwindow dalam aplikasi mobile.
4.27.1 Merancang aplikasi mobile multiwindow.

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Menjelaskan konsep teknik desain aplikasi multiwindow mobile sesuai standar aplikasi mobile dengan
tepat.
2. Menerapkan disain multiwindow dalam aplikasi mobile sesuai desain yang dibuat dengan cermat.
3. Merancang aplikasi mobile multiwindow sesuai kaidah desain aplikasi mobile dengan teliti.

A. Konsep Aplikasi Multiwindows.

Dalam suatu aplikasi tidak hanya terdiri dari satu laman atau window saja. Hal ini terkait dengan
berapa banyak fungsional yang ada pada aplikasi tersebut. Sehingga semakin kompleks aplikasi yang kita
buat maka semakin banyak pula laman atau window yang ada pada aplikasi tersebut. Aplikasi Multiwindow
adalah aplikasi yang memiliki 2 atau lebih laman atau window yang saling terhubung satu dengan lainnya
sehingga membentuk suatu kesatuan sistem aplikasi. Biasanya penghubung antara halaman atau window
tersebut adalah suatu komponen atau link, minimal ada tombil back dalam tiap window.

Gambar 4.1 contoh aplikasi mobile multiwindow

42
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

B. Multiwindows dengan Framework7.

Seperti yang pernah dibahas pada bab sebelumnya bahwa, Secara default framework 7 memanggil
halaman dengan cara menyisipkan isi atau konten kedalam file index.html dengan teknologi AJAX. Jadi saat
membuat halaman lain kita tidak perlu menuliskan semua tag kode (Seperti html, head, title, body). Hanya
cukup pada tag <div class=”data-page”>. Sehingga nama data-page harus sama dengan nama file yang kita
buat. Untuk tag <div class=”page-content”> digunakan untuk memberikan isi dalam page. <div data-
page=”index” class=”page”> merupakan kode yang berfungsi untuk memberikan konten dalam layout.
Pada bagian properties data-page=”index” index adalah nama file kita.

C. Membuat Aplikasi MultiWindows.

Studi kasus membuat aplikasi multi windows seperti contoh mockup dibawah ini. Dimana nanti kita
membuat 3 window atau laman yaitu, index atau home, profil dan about.

Gambar 4.2 desain aplikasi mobile multiwindow

Untuk membuat aplikasi seperti diatas kita buka project kita sebelumnya, dimana kita membuat aplikasi
mobile 1 lama dengan framework 7, berikut kodenya

43
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 4.3 Kode project Bab sebelumnya

Dalam project tersebut kita menggunakan menu Side Panel yang akan muncul dari kiri, agar menu tersebut
terhubung dengan laman atau window lain, maka perlu memberikan target atau link ke halaman lainnya.
Berikut adalah kode dari menu side panelnya

Gambar 4.4 Kode untuk membuat link SidePanel

44
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Perlu diperhatikan bahwa pada kode <a href=”profil.html” class=”link close-panel”> profil.html adalah
halaman tujuan yang akan di panggil, begitu pula dengan menu yang lain seperti home yang mengarah
kembali ke index.html dan about yang mengarah ke halaman about.html. Sedangkan Class=”link close-
panel” merupakan properti framework7 yang akan menangani pemanggilan laman dengan menggunakan
ajax, untuk class close-panel digunakan agar ketika menu atau link di klik, maka side panel akan menutup.

Gambar 4.5 Kode untuk laman profil.html

Pada kode diatas tidak perlu dimulai dengan tag html standar seperti head, title, body. Seperti yang pernah
dibahas pada bab sebelumnya bahwa, Secara default framework 7 memanggil halaman dengan cara
menyisipkan isi atau konten kedalam file index.html dengan teknologi AJAX. Jadi saat membuat halaman
lain kita tidak perlu menuliskan semua tag kode. Kode dimulai dengan membuka tag <div data-
page=”profil” class=page> dalam properti div data-page=”profil”, isi dari data-page harus sama
dengan nama file kita tanpa ada ekstensi html. Semisal disini kita membuat nama file profil.html maka
dalam kode data-page=”profil”. Dalam layout laman profil yang saya buat ini menggunakan desain card
yang mirip dengan layout halaman profil facebook. Dimana anda bisa ambil contoh kode yang ada pada
dokumentasi framework 7 di https://v1.framework7.io/docs/cards.html.
Dalam tag <img src="https://picsum.photos/200/?random" width="34" height="34">saya menggunakan
gambar yang saya ambil dari random image yang berasal dari https://picsum.photos/images. Anda bisa
memasukan gambar sendiri dari file gambar yang ada pada komputer lokal anda. Namun terlebih dahulu
anda harus memasukan file gambar tersebut dalam folder img yang ada pada folder www di project anda.
Seperti misal anda memasukan file fotoku.jpg di folder img maka kodenya menjadi <img
src="img/fotoku.jpg" width="34" height="34"> anda bisa menyesuaikan dimensi dengan mengubah
properti lebar / width atau tinggi / height di tag tersebut. Jika sudah selesai simpan dengan nama profil.html.
Kemudian lakukan ujicoba dengan menjalankan aplikasi anda di browser emulator dan klik link yang
menuju ke halaman profil.

45
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 4.6 Kode untuk laman about.html

Untuk kode laman about.html sama kodenya mirip dengan laman profil.html. Dimana kode dimulai dengan
membuka tag <div data-page=”abaut” class=page> dalam properti div data-page=”about”, berisi about
karena halaman ini akan disimpan dengan nama file about.html. Untuk tag <div class=”page-content”>
digunakan untuk memberikan isi dalam page. Seperti text, tombol, gambar dan lainnya. Tag-tag html seperti
img, button, ul, p dan headhing / h level bisa disisipkan pada bagian ini. Lakukan ujicoba dengan
menjalankan aplikasi anda di browser emulator dan klik link yang menuju ke halaman about kemudian ke
laman profil dan kembali ke lama home atau index. Anda bisa melakukan ujicoba ke perangkat smartphone
anda dengan menjalankan perintah berikut untuk menambahkan platform android jika belum ditambahkan:

cordova platform add android

Gambar 4.7 perintah tambah platform android

Kemudian jalankan perintah berikut untuk membuild:

cordova build android

Gambar 4.8 perintah build ke APK

46
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder
project firstApp\platforms\android\build\outputs\apk\ dengan nama file android-debug.apk. Kamu bisa
mencoba menyalin file tersebut ke dalam handphone smartphone Android dan menginstalnya. Pastikan
mode developer sudah diaktifkan di handphone Androidnya.

Gambar 4.9 Hasil build APK

Latihan

1 Apakah yang dimaksud dengan aplikasi mobile multiwindows

2 Jelaskan bagaimana framework7 menghubungkan antara laman satu dengan laman lainnya
3 Buatlah suatu aplikasi mobile dengan menggunakan framework7 dengan style layout untuk aplikasi
iOS. Dimana aplikasi tersebut memiliki 3 laman yaitu index.html, profil.html dan about.html.
dimana ditiap halaman ada tombil back untuk kembali ke index.html dan menu yang digunakan
adalah menu bottom toolbar yang berada dibawah seperti mockup dibawah ini

47
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Konsep Pengkodean
Alur Program Aplikasi
Mobile
Pengkodean Alur Membuat Kode
Program Aplikasi Program Aplikasi
Mobile Mobile Kalkulator
Prosedur Pengkodean
Alur Program Aplikasi
Mobile
Menguji Kode
Program Aplikasi
Mobile Kalkulator

48
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.28. Menerapkan pengkodean alur program dalam

aplikasi
4.2.8. Membuat kode program dalam aplikasi
Judul Kode Alur Aplikasi Mobile

BAB V

Penggunaan Kode Aplikasi Mobile

Indikator Ketercapaian Kompetensi

3.28.1 Menjelaskan prosedur pengkodean alur program dalam aplikasi mobile.

3.28.2 Menerapkan pengkodean alur program dalam aplikasi mobile.
4.28.1 Merancang aplikasi mobile dengan kode program.
4.28.2 Membuat kode program aplikasi mobile.
4.28.3 Menguji hasil program aplikasi mobile.

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Menjelaskan prosedur pengkodean alur program dalam aplikasi mobile sesuai standar kode aplikasi
mobile dengan tepat.
2. Menerapkan pengkodean alur program dalam aplikasi mobile sesuai dengan desain yang dibuat dengan
teliti.
3. Merancang aplikasi mobile dengan kode program sesuai dengan desain yang dibuat dengan cermat.
4. Membuat kode program aplikasi mobile sesuai dengan desain yang dibuat dengan cermat.
5. Menguji hasil program aplikasi mobile sesuai dengan desain yang dibuat dengan teliti.

A. Konsep Alur pengkodean Aplikasi Mobile.

Seperti yang sudah dijelaskan sebelumnya bahwa Framework7 menggunakan bahasa HTML, CSS
dan Javascript. Oleh karena itu anda harus memahami konsep dasar pengodean HTML , CSS dan Javascript.
Terutama javascript ini karena memegang peranan penting dalam membuat aplikasi mobile dengan
menggunakan Framework7. Untuk JS atau javascript berada di file my-app.js pada folder js.

49
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 5.1 Struktur Dasar file my-app.js

Untuk kode var myApp = new Framework7( ); digunakan untuk membuat objek baru untuk
inisialisasi penggunaan framework7. Kode var $$ = dom7 digunakan untuk simbol $$ digunakan DOM.
DOM(Document Object Model) adalah model data standar yang digunakan untuk melihat suatu halaman
html. DOM juga merupakan sebuah platform dan interface yang memperbolehkan pengaksesan dan
perubahan pada konten, struktur, dan style pada sebuah dokumen oleh program dan script. Pada model
DOM ini, setiap elemen html dipandang sebagai sebuah object. Setiap object bisa terdiri dari objek - objek
lain, sama halnya dengan dokumen html yang terdiri dari elemen root (elemen <html>), elemen root terdiri
dari elemen <head> dan elemen <body>, elemen <body> boleh jadi terdiri dari elemen <a>, <h1>, <p>,
dst. Elemen-elemen pada dokumen html membentuk sebuah object document yang merupakan objek dari
dokumen html itu sendiri.

Di dalam pemrograman OOP sebuah object memiliki property dan method, begitu juga elemen pada
dokumen html ini memiliki property yaitu nilai pada elemen html yang bisa ditetapkan atau dirubah
dan method yakni aksi yang dapat dilakukan pada elemen html.Contoh property yang biasa digunakan
ialah innerHTML yang digunakan untuk memperoleh atau merubah konten dari elemen html itu sendiri.
contoh misalnya getElementById(“id”) milik objek document yang digunakan untuk mengakses elemen
html dalam dokumen html berdasarkan id.

Dalam Jquery untuk mendapatkan nilai properti dari suatu object semisal suatu input form seperti <input
type=”text” id=”input_form” value=”siswa” class=”input-lg”> maka kodenya berikut

var x = $(‘#input_form’).val();

Kode diatas jika menggunakan DOM menjadi

var x = document.getElementById(‘input_form’).value();

50
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Jika dijalankan nilai dari variable x adalah siswa, Jquery membuat penulisan kode DOM menjadi lebih
efisien dan singkat. Dari kode tersebut di untuk memperoleh isi dari objek dengan id input form Jquery
cukup menambahkan tanda #(pagar) diikuti dengan nama ID pada elemen yang ingin dimanipulasi. Selain
itu Jquery juga bisa menanipulasi dengan menggunakan Class dari elemen atau objek yaitu dengan
menggunakan tanda . (titik). contoh kodenya seperti dibawah ini

var x = $(‘.input_lg’).val();

Bila contoh kasus diatas dibuat dengan menggunakan DOM7 miliknya framework7 maka akan menjadi

var x = $$(‘#input_form’).val( ); //untuk memanggil dengan ID elemen

var x = $$(‘.input_lg’).val( ); //untuk memanggil dengan Class elemen

Bisa diperhatikan dalam Javascript di framework 7 tidak jauh berbeda dengan penggunaan Jquery. Cukup
dengan menggunakan tanda $$ didepan elemen yang ingin dimanipulasi.

// Add view

var mainView = myApp.addView('.view-main', {

// untuk dinamis navbar

dynamicNavbar: true

});

Sedangkan untuk diatas digunakan untuk mengkonfigurasi default view atau windows yang digunakan
dalam aplikasi yang kita buat. Yaitu menggunakan class dengan nama view-main yang ada pada file
index.html di <div class= “view view-main”> Kode ini secara default ada pada file my-app.js

// memanggil halaman lain

myApp.onPageInit('index', function (page) {

});

Kode diatas digunakan untuk menjalakan suatu javascript pada halaman tertentu. Semisal kita mengingkan
pada halaman index.html dimunculkan suatu animasi loading, maka dibuatlah seperti kode diatas dalam file
my-app.js

B. Prosedur Pengkodean Aplikasi Mobile.

Seperti dijelaskan sebelumnya Framework7 tidak menggunakan library pihak ketiga mana pun,
bahkan untuk manipulasi DOM. Ini memiliki perpustakaan DOM7 yang menggunakan metode untuk

51
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

manipulasi DOM. Anda tidak perlu mempelajari sesuatu yang baru, penggunaannya sangat sederhana karena
memiliki sintaks yang sama dengan pustaka jQuery yang terkenal dengan dukungan metode yang paling
populer dan banyak digunakan seperti jQuery.

Contoh penulisan fungsi DOM7 dalam framework 7

$$('#tombol1').on('click', function (e) { //jika button dengan ID tombol 1 tersebut diklik

alert(‘Hallo apakabar ?’); //maka akan muncul window dengan isian Hallo apakabar?

});

Berikut adalah daftar DOM7 yang sering digunakan dalam mengembangkan aplikasi Hybrid dengan
menggunakan framework7

Tabel 5.1

Daftar sintak DOM7

Kode Kegunaan
.addClass(className) Menambah class pada suatu elemen
//Add "intro" class to all paragraphs
$$('p').addClass('intro');

.removeClass(className) Menghapus class suatu elemen

//Add "big" class from all links with "big" class
$$('a.big').removeClass('big');

.prop(propName) Mengambil suatu properti dari suatu elemen

var isChecked = $$('input').prop('checked');

.prop(propName, propValue) Set properti dari elemen

//Make all checkboxes checked
$$('input[type="checkbox"]').prop('checked', true);

.attr(attrName) Mengambil suatu atribut elemen

<ahref="http://google.com">Google</a>

var link = $$('a').attr('href'); //-> http://google.com

.attr(attrName, attrValue) Set atribut elemen

//Set all links to google

$$('a').attr('href', 'http://google.com');

52
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kode Kegunaan
.removeAttr(attrName) Menghapus suatu atribut elemen
//Remove "src" attribute from all images
$$('img').removeAttr('src');

.val() Mengambil atau memberikan nilai suatu elemen

<inputid="myInput"type="text"value="Lorem ipsum"/>

var inputVal = $$('#myInput').val(); //-> 'Lorem ipsum'

$$('input#myInput').val('New value here');

.on(eventName, handler, useCapture) Menambah event atau method pada elemen yang
dipilih
$$('a').on('click', function (e) {

console.log('clicked');

});

$$('input[type="text"]').on('keyup keydown change click',

function (e) {

console.log('input value changed');

});

Ada beberapa event yang biasa digunakan seperti

click, keyup, keydown, keypress, dan sebagainya

.hide() Menyembunyikan elemen

//hide all paragraphs

$$('p').hide();

.show() Menampilkan elemen yang hidden

//show all paragraphs

$$('p').show()

.html() Digunakan untuk mengambil atau mensetting konten

HTML dari suatu elemen
.append(HTMLString) Digunakan untuk insert konten HTML dalam suatu
elemen
$$.each(object/array, callback) Fungsi iterator generik, yang dapat digunakan untuk

53
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kode Kegunaan

beralih pada kedua objek dan array. Array dan objek

mirip array dengan properti panjang (seperti objek
argumen fungsi) diulang dengan indeks numerik,
dari 0 hingga -1. Objek lain diulangi melalui properti
yang disebutkan namanya

var fruits = ['Apple', 'Orange', 'Pineapple', 'Bannana'];

$$.each(fruits, function(index, value) {

alert(index + ': ' + element); }

);

//This produces 4 alerts:

0: Apple

1: Orange

2: Pineapple

3: Bannana

$$.parseUrlQuery(url) uraikan url untuk dapatkan parameter

var query =
$$.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); //-> {id: 5, foo: 'bar'}

$$.ajax(parameters) Untuk mengambil data dari server dengan metode

Ajax

$$.ajax({

url: "http://server.com/lakukan_proses.php",

type: "POST",

data: “nilai1=”+nilai1+”&nilai2=”+nilai2,

success: function(html){

$$('#loading').hide();

alert(html);

});

$$.get(url, data, success, error) Load data dari server dengan metode GET

54
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kode Kegunaan

$$.get('blog-post.php', {foo:'bar', id:5}, function(data) {

$$('.articles').html(data); console.log('Load was
performed'); });

$$.post(url, data, success, error) Mengirimkan data ke server dengan metode POST

$$.post('auth.php', {username:'foo', password: 'bar'},

function(data){ $$('.login').html(data); console.log('Load
was performed'); });

$$.getJSON(url, data, success, error) Load JSON data dari server menggunakan sebuah
GET HTTP request

$$.getJSON('items.json', function(data) {
console.log(data); });

1 Membuat Aplikasi Kalkulator.

Untuk praktikum silahkan buka project aplikasi multiwindows yang dahulu pernah dibuat.
Kemudian tambahkan link dan laman untuk laman math.html. Berikut adalah contoh gamabr
mockupnya

Gambar 5.1 Mockup Apps Kalkulator

Berikut adalah kode untuk menambahkan menu atau linkdi sidePanel ke laman math.html

55
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 5.2 Kode untuk membuat link SidePanel ke laman math.html

Kemudian dibuat laman baru dengan nama file math.html dengan kode dibawah ini

Gambar 5.3 Kode untuk laman math.html

Seperti yang pernah dibahas pada bab sebelumnya bahwa, Secara default framework 7
memanggil halaman dengan cara menyisipkan isi atau konten kedalam file index.html dengan
teknologi AJAX. Jadi saat membuat halaman lain kita tidak perlu menuliskan semua tag kode
(Seperti html, head, title, body). Hanya cukup pada tag <div class=”data-page”>. Sehingga

56
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

nama data-page harus sama dengan nama file yang kita buat. Untuk tag <div class=”page-
content”> digunakan untuk memberikan isi dalam page. <div data-page=”math”
class=”page”> merupakan kode yang berfungsi untuk memberikan konten dalam layout.
Pada bagian properties data-page=”math” math.html adalah nama file kita. Berikut
penjabarannya.

Gambar 5.4. potongan kode laman math.html input form

Potongan kode diatas digunakan untuk membuat form input untuk memasukan angka 1 dan
angka 2 yang nantinya akan dicari hasil perkaliannya. Yang perlu diperhatikan disini adalah
ID ditiap elemen. Pada bab sebelumnya dijelaskan bahwa framework7 bisa mengambil nilai
dari elemen dengan menggunakan ID atau CLASS dari elemen tersebut. <input type="text"
placeholder="0" id="angka2"> ini nanti akan diambil nilainya berdasarkan ID nya. Jangan
sampai dalam satu laman ada elemen dengan ID sama. Karena akan menyebabkan error pada
JS nya.

Gambar 5.5. potongan kode untuk laman math.html untuk form hasil dan tombol

Potongan kode diatas untuk membuat tombol untuk eksekusi perkalian dan tombol reset nilai
angka1 dan angka2. Kalau diperhatika pada kode <a href="#" id="kali" class="button

57
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

button-fill button-raised color-red">Kalikan</a> terdapat ID elemen href yang bernama

“kali” ini nanti akan dijadikan function dalam file my-app.js untuk memproses operator
perkaliannya. Demikian pula pada elemen input <input type="text" placeholder="0"
id="hasil"> terdapat dengan nama ID “hasil” yang nantinya akan digunakan untuk
menampung hasil perkalian angka1 dan angka2. Buka file my-app.js anda kemudian
tambahkan kode yang dikotak merah sehingga seperti dibawah ini.

Gambar 5.5. potongan kode untuk file my-app.js

Untuk kode myApp.onPageInit('math', function (page) {}); digunakan untuk menginisialisasi method
akan berjalan pada laman math.html. $$('#kali').on('click',function(){}); kode ini berfungsi
memberikan event ketika tombol dengan ID kali di klik. Sedangkan kode var
angka1=$$('#angka1').val(); untuk mengambil nilai dari form input dan kode
$$('#hasil').val(angka1*angka2); untuk mengkalikan hasil dan menampilkannya di form Hasil.

2 Menguji Aplikasi Kalkulator.

Lakukan ujicoba dengan menjalankan aplikasi anda di browser emulator dengan perintah cli
cordova:

cordova run browser

Anda bisa melakukan ujicoba ke perangkat smartphone anda dengan menjalankan perintah
berikut untuk menambahkan platform android jika belum ditambahkan:

58
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

cordova platform add android

Kemudian jalankan perintah berikut untuk membuild:

cordova build android

Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder
project firstApp\platforms\android\build\outputs\apk\ dengan nama file android-
debug.apk. Kamu bisa mencoba menyalin file tersebut ke dalam handphone smartphone
Android dan menginstalnya. Pastikan mode developer sudah diaktifkan di handphone
Androidnya.

Gambar 4.9 Hasil build APK

Latihan

1 Buatlah apps dengan menggunakan cordova dan framework7 untuk

a. menghitung perkalian 2 angka
b. menghitung penjumlahan 2 angka
c. menghitung pembagian 2 angka
d. menghitung pengurangan 2 angka
2 Buatlah apps dengan menggunakan cordova dan framework7 untuk mencari
a. Volume Bola
b. Luas Tabung
c. Volume Kerucut
3 Buatlah apps dengan menggunakan cordova dan framework7 untuk menghitung pajak penghasil
seseorang dengan ketentuan
a. Jika penghasilan selama 1 tahun lebih dari 100.000.000 maka dipotong pajak 10%
b. Jika penghasilan selama 1 tahun lebih dari 50.000.000 maka dipotong pajak 5%
c. Selain itu tidak dipotong Pajak

59
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Konsep User
Interface Membuat
User Interface Aplikasi Input
Prosedur User
Pengelolaan
Input User Menguji Kode
Aplikasi Input
User

60
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.29.Menerapkan teknik pengolahan input user

4.29.Membuat antar muka input user pada aplikasi
Judul Konsep User Interface

BAB VI

Konsep User Interface

Indikator Ketercapaian Kompetensi

3.29.1 Menjelaskan prosedur teknik pengolahan input dari pengguna (user).

3.29.2 Menerapkan kode program untuk mengolah input pengguna.
3.29.3 Menerapkan kode program antar muka untuk mengolah input user.
4.29.1 Merancang program aplikasi mobile untuk mengolah inputan pengguna menggunakan antar muka.
4.29.2 Membuat kode program untuk mengolah inputan dengan aplikasi antar muka.

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Menjelaskan prosedur teknik pengolahan input dari pengguna (user) sesuai konsep User Interface
dengan tepat.
2. Menerapkan kode program untuk mengolah input pengguna sesuai prosedur teknik pengolahan input
dengan cermat.
3. Menerapkan kode program antar muka untuk mengolah input user sesuai konsep unser interface dengan
cermat.
4. Merancang program aplikasi mobile untuk mengolah inputan pengguna menggunakan antar muka sesuai
kaidah konsep user interface dengan teliti.
5. Membuat kode program untuk mengolah inputan dengan aplikasi antar muka sesuai dengan desain yang
dibuat dengan teliti.

A. Konsep User Interface Aplikasi Mobile.

User Interface (UI) atau Antarmuka penggunan merupakan bentuk tampilan grafis yang
berhubungan langsung dengan pengguna (user). Antarmuka pengguna berfungsi untuk menghubungkan
antara pengguna dengan sistem operasi, sehingga komputer tersebut bisa digunakan. Tujuan dari interaksi
antara manusia dan mesin pada antarmuka pengguna adalah pengoperasian dan kontrol mesin yang efektif,
dan umpan balik dari mesin yang membantu operator dalam membuat keputusan operasional. Bahasa
gampangnya yaitu UI Design adalah bagaimana suatu website atau aplikasi yang kamu buat terlihat seperti
apa. Orang biasa menyebutnya sebagai tampilan atau desain sebuah website.

61
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Ada juga istilah UX (User Experience) yaitu Proses meningkatkan kepuasan pengguna (pengguna
aplikasi, pengunjung website) dalam meningkatkan kegunaan dan kesenangan yang diberikan dalam
interaksi antara pengguna dan produk. Bahasa gampangnya, UX Design itu proses membuat sebuah website
atau aplikasi yang kamu buat menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan
oleh pengguna.

Gambar 6.1 Perbedaan UI(User Interface) dan UX(User Experience)

Sumber : https://miro.medium.com/max/1200/1*zlA2QdhQ-Sp038eMg8weWw.png

Banyak orang yang salah kaprah bahwa UI sama UX itu adalah suatu hal yang sama. Pada faktanya
UX dan UI itu berbeda, namun satu sama lain saling berhubungan. Pada dasarnya, User Experience adalah
tentang “memahami penggunamu”. Tujuan UX adalah mencari tahu siapa mereka, apa yang mereka capai
dan apa cara terbaik bagi mereka untuk melakukan “sesuatu”. UX berkonsentrasi pada bagaimana sebuah
produk terasa dan apakah itu memecahkan masalah bagi pengguna. Sedangkan User Interface adalah
bagaimana suatu website atau aplikasi yang kamu buat terlihat dan berbentuk seperti apa. Hal tersebut
mencakup Layout (tata letak), Visual Design (desain visual) dan Branding.

B. Prosedur Pengelolaan Input User.

1. Membuat Aplikasi Pengelolaan Input
Untuk praktikum kita akan membuat aplikasi sesuai dengan mockup dibawah ini

Gambar 6.2 mockup desain user interface

62
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Pertama kita buat project baru di cordova dengan nama project user_interface dengan perintah cli
cordova

cordova create user_interface com.example.ui UserInterface

Kemudian untuk menyisipkan CSS dan JS dari framework7 berikut kodenya

Gambar 6.3 Kode untuk menyisipkan CSS framework7

Dari kode diatas menggunakan style untuk material design serta memasukan CSS font-awesome
(sumber : http://fontawesome.com). Font awesome digunakan memberikan icon pada aplikasi
yang akan kita buat.

Gambar 6.4 Kode untuk menyisipkan JS Framework7

Untuk menyisipkan file Javascript ditambahkan di baris paling bawah sebelum tag body penutup.

63
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 6.5 Kode untuk laman index.html

Pada laman index.html disini menggunakan menu di toolbar yang terletak dibawah. Untuk kode
laman form.html adalah sebagai berikut

64
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 6.6 Kode untuk laman form.html

Untuk kode html dalam menampilkan hasil dari form yang akan ditampilkan dalam layout
popup adalah sebagai berikut:

65
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 6.7lanjutan kode untuk popup di laman form.html

Kode diatas masih dalam file form html dimana letaknya masih didalam tag <div class =”page”
data-page=”form”>. popup diatas akan tampil saat di klik simpan. Maka untuk memanggil
popup agar muncul berikut kodenya tombol simpan <a href="#" class="button button-fill button-
raised color-indigo open-popup" data-popup=".popup-hasil" id="simpan">SIMPAN</a>. Pada
tag a href untuk tombol simpan, kode untuk memanggil popup adalah data-popup=.popup-hasil
dimana yang dipanggil adalah class dari tag div <div class=popup popup-hasil>. Untuk kode
yang menangani event ketika tombol simpan di klik ada pada file my-app.js berikut ini

Gambar 6.8kode untuk file my-app.js

Struktur kode file my-app.js diatas sama dengan struktur aplikasi yang sebelumnya dibuat. Pada
kode myApp.onPageInit('form', function (page) {}); digunakan untuk event handle saat laman
66
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

form dimuat. Untuk kode $$('#simpan').on('click', function(){}); digunakan untuk event handle
saat tombol dengan ID simpan di klik. Dari dari form diambil berdasarkan ID dari tiap element
form. Semisal untuk kode input form <input type="text" name="nama" id="nama">pada file
form.html, maka untuk mengambil nilai dari form tersebut kode javascriptnya adalah var nama =
$$('#nama').val();. Kemudian tiap variable yang menyimpan tiap data form akan ditampilkan
pada popup dengan elemen ID yang sudah ditentukan pula. Semisal kode
$$('#hasil_nama').html(nama); akan menampilkan isi dari variable nama pada elemen <p
id="hasil_nama"></p>dengan ID hasil_nama. Begitu halnya dengan ID elemen yang lain pada
popup yang akan menampilkan isi dari form.

2. Menguji Aplikasi Pengeloaan Input

Lakukan ujicoba dengan menjalankan aplikasi anda di browser emulator dengan perintah cli
cordova:

cordova run browser

Anda bisa melakukan ujicoba ke perangkat smartphone anda dengan menjalankan perintah
berikut untuk menambahkan platform android jika belum ditambahkan:

cordova platform add android

Kemudian jalankan perintah berikut untuk membuild:

cordova build android

Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder
project firstApp\platforms\android\build\outputs\apk\ dengan nama file android-
debug.apk. Kamu bisa mencoba menyalin file tersebut ke dalam handphone smartphone
Android dan menginstalnya. Pastikan mode developer sudah diaktifkan di handphone
Androidnya.

Gambar 4.9 Hasil build APK

67
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Library dalam
Cordova
Membuat Aplikasi
Library dan Plugin dengan plugin
Mengembangkan GPS
Aplikasi Mobile
dengan Library
Menguji Aplikasi
GPS

68
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.32. Mengevaluasi penggunaan library pada

aplikasi mobile
4.32. Memodifikasi aplikasi mobile menggunakan
library

Judul Library dan Plugin

BAB VII

Library dan Plugin

Indikator Ketercapaian Kompetensi

3.32.1. Menjelaskan penggunaan library dalam membuat aplikasi mobile.

3.32.2. Menerapkan library dalam aplikasi berbasis mobile.
3.32.3. Merancang program aplikasi mobile dengan menggunakan library.
3.32.4. Membuat kode program aplikasi mobile dengan library.
3.32.5. Menguji hasil program aplikasi mobile dengan library.
3.32.6. Mengembangkan aplikasi mobil dengan menggunakan library.

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Menjelaskan penggunaan library dalam membuat aplikasi mobile sesuai kaidah plugin dalam
cordova dengan tepat.
2. Menerapkan library dalam aplikasi berbasis mobile sesuai dengan fungsi library dengan tepat.
3. Merancang program aplikasi mobile dengan menggunakan library sesuai dengan fungsi library
dengan teliti.
4. Membuat kode program aplikasi mobile dengan library sesuai dengan fungsi library dengan cermat.
5. Menguji hasil program aplikasi mobile dengan library sesuai prosedur pengujian aplikasi mobile
dengan teliti.
6. Mengembangkan aplikasi mobil dengan menggunakan library sesuai dengan fungsi library cordova
dengan cermat.

A. Library dalam Cordova.

Gambar 7.1 logo plugin cordova

Sumber : https://cordova.apache.org/static/img/pluggy.png

69
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Library adalah kumpulan kode yang biasanya terkumpul dalam sebuah namespace/ module/ package
(tergantung anda menggunakannya di bahasa pemrograman apa) yang dapat di import/ reuse ke program
lain. Dalam cordova library disebut sebagai Plugin. Plugin adalah kode tambahan yang menyediakan
interface JavaScript ke komponen native. Plugin memungkinkan aplikasi Anda untuk menggunakan
kemampuan perangkat native. Contoh plugin dalam cordova yang sering digunakan adalah GPS, camera,
maps, dan QR Code reader. Daftar plugin atau library cordova beserta dokumentasi cara penggunaannya
bisa di akses di https://cordova.apache.org/plugins/

Gambar 7.2 situs plugin cordova

Perintah cli untuk menambah suatu plugin atau library dalam project cordova kita adalah

cordova plugin add nama_plugin

cordova platform add cordova-plugin-camera

B. Mengembangkan Aplikasi Mobile dengan Library

1. Membuat Aplikasi menggunakan plugin GPS
Desain mockup untuk aplikasi yang akan dibuat adalah sebagai berikut

Gambar 7.3 mockup aplikasi GPS

70
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Aplikasi diatas dibuat dengan 3 laman, itu index.html, gps.html dan about.html masing-
masing di bisa diakses di menu toolbar bawah. Untuk menambahkan plugin GPS di folder
project cordova perintah cli nya adalah

cordova platform add cordova-plugin-geolocation

Lakukan integrasi dengan framework 7 untuk membuat tampilan lebih menarik. Kode untuk
laman index.html adalah sebagai berikut :

Gambar 7.4 kode laman index.html

Dalam aplikasi ini dikarena nanti akan menampilkan lokasi dari GPS ke dalam google map, maka dibutuhka
JQuery JS dan API Key dari google Map. Anda bisa mendapatkan JQuery JS di http://jquery.com kemudian
anda masukan file hasil download kedalam folder js di project anda. Untuk mendapatkan API Key anda bisa
71
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

ke https://developers.google.com/maps/documentation/javascript/get-api-key kemudian anda login dengan

akun google anda selanjutnya akan diberikan API key yang bisa dimasukan ke kode <script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA"></script>dilaman index.html.
Beirkut untuk kode laman gps.html.

Gambar 7.5 kode laman gps.html

Pada laman gps.html ada kode <input type="text" placeholder="-" id="lokasi_anda"> yang digunakan
untuk menampung hasil lokasi yang terdeteksi oleh GPS. Sedangkan kode <div class="content-block inset"
id="gpsMap" style="height: 80%;"></div>merupakan tempat untuk menampilkan map sesuai dengan
lokasi GPS. Berikut kode untuk file my-app.js nya

72
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 7.6 kode file my-app.js

Pada kode myApp.onPageInit('gps', function(page){}); digunakan event handle ketika laman gps tampil.
Untuk kode var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
digunakan untuk inisialisasi plugin GPS cordova. Kode untuk mengambil koordinat dari gps adalah var
posisi_now=position.coords.latitude+','+position.coords.longitude; kemudian ketika sudah
mendapatkan koordinat maka dengan kode geocoder.geocode({'address':posisi_now}) diubah ke format
google map.
Kemudian koordinat di render ke laman gps .html di elemen <div class="content-block inset"
id="gpsMap" style="height: 80%;"></div>dengan kode var map = new
google.maps.Map(document.getElementById("gpsMap"), mapOptions);

2. Menguji Aplikasi

Lakukan ujicoba dengan menjalankan aplikasi anda di browser emulator dengan perintah cli cordova:

73
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

cordova run browser

Anda bisa melakukan ujicoba ke perangkat smartphone anda dengan menjalankan perintah berikut
untuk menambahkan platform android jika belum ditambahkan:

cordova platform add android

Kemudian jalankan perintah berikut untuk membuild:

cordova build android

Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder
project firstApp\platforms\android\build\outputs\apk\ dengan nama file android-debug.apk. Kamu
bisa mencoba menyalin file tersebut ke dalam handphone smartphone Android dan menginstalnya.
Pastikan mode developer sudah diaktifkan di handphone Androidnya dan GPS anda aktif.

Gambar 7.7 Hasil build APK

Latihan Soal

1. Apakah yang kegunaan library dalam pengembangan aplikasi mobile?

2. Perintah cordova untuk memasukan library atau plugin adalah?
3. Buatlah aplikasi untuk menampilkan kota tempat tinggal ada dalam google map!
4. Buatlah aplikasi untuk mencari suatu tempat yang nantinya akan ditampilkan di google map!
5. Buatlah aplikasi untuk menghitung jarak 2 tempat dalam satuan kilo meter dengan menggunakan google
map API!

74
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

PETA KONSEP

Database dalam
Aplikasi Mobile

API dan WebService

Database dan
WebService
Membuat WebService
JSON (JavaScript
dengan PHP dan
Object Nation)
MySQL

Membuat Aplikasi Membuat Aplikasi

Mobile dengan Mobile terkoneksi
WebService dengan Webservice

Menguji Aplikasi
Mobile yang
terkoneksi dengan
webservice

75
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Kompetensi Dasar 3.33. Menerapkan konektifitas aplikasi mobile

dengan web
4.33. Membuat koneksifitas aplikasimobile
dengan web

Judul Database Web Service

BAB VIII

Database Web Service

Indikator Ketercapaian Kompetensi

3.33.1 Menjelaskan prosedur konektifitas aplikasi mobile dengan web.

3.33.2 Menerapkan aplikasi konektor dalam program aplikasi mobile dengan web.
4.33.1 Merancang program konektifitas aplikasi mobile dengan web.
4.33.2 Membuat kode program koneksi aplikasi mobile dengan web.

Tujuan Pembelajaran

Setelah mempelajari materi dalam bab ini, peserta didik diharapkan mampu:

1. Menjelaskan prosedur konektifitas aplikasi mobile dengan web sesuai kaidah database dengan tepat.
2. Menerapkan aplikasi konektor dalam program aplikasi mobile dengan web sesuai koneksi database
dalam aplikasi mobile dengan cermat.
3. Merancang program konektifitas aplikasi mobile dengan web sesuai dengan database yang dibuat
dengan teliti.
4. Membuat kode program koneksi aplikasi mobile dengan web sesuai dengan database yang dibuat
dengan teliti.

A. Database dalam Aplikasi Mobile.

Gambar 8.1Kegunaan database dalam Aplikasi Mobile

Sumber : http://tutorial.atmaluhur.ac.id/wp-content/uploads/2015/11/jjj.png

76
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Basis Data terdiri dari kata basis dan data. Basis dapat diartikan sebagai markas atau gudang.
Sedangkan data adalah catatan atas kumpulan fakta dunia nyata yang mewakili objek seperti manusia,
barang, hewan, konsep, peristiwa dan sebagainya yang diwujudkan dalam bentuk huruf, angka, simbol,
gambar, teks, bunyi atau kombinasinya.Sebagai suatu kesatuan maka pengertian basis data atau biasa disebut
database Himpunan kelompok data yang saling terhubung dan diorganisasi sedemikian rupa supaya kelak
dapat dimanfaatkan kembali secara cepat dan mudah.

Dalam pengembangan aplikasi database digunakan sebagai tempat atau wadah data dalam proses
pengolahan informasi. Secara garis besar dalam pengembangan aplikasi mobile perlu adanya database baik
yang berada didalam perangkat mobile menggunakan SQL Lite atau database eksternal menggunakan API
atau webservice

B. API dan Webservice

API adalah singkatan dari Application Programming Interface, dan memungkinkan developer untuk
mengintegrasikan dua bagian dari aplikasi atau dengan aplikasi yang berbeda secara bersamaan. API terdiri
dari berbagai elemen seperti function, protocols, dan tools lainnya yang memungkinkan developers untuk
membuat aplikasi. Tujuan penggunaan API adalah untuk mempercepat proses development dengan
menyediakan function secara terpisah sehingga developer tidak perlu membuat fitur yang serupa. Penerapan
API akan sangat terasa jika fitur yang diinginkan sudah sangat kompleks, tentu membutuhkan waktu untuk
membuat yang serupa dengannya. Misalnya: integrasi dengan payment gateway. Terdapat berbagai jenis
sistem API yang dapat digunakan, termasuk sistem operasi, library, dan web.

Gambar 8.2arsitektur API

API yang bekerja pada tingkat sistem operasi membantu aplikasi berkomunikasi dengan layer dasar dan
satu sama lain mengikuti serangkaian protokol dan spesifikasi. Contoh yang dapat menggambarkan
spesifikasi tersebut adalah POSIX (Portable Operating System Interface). Dengan menggunakan standar
POSIX, aplikasi yang di-compile untuk bekerja pada sistem operasi tertentu juga dapat bekerja pada sistem
lain yang memiliki kriteria yang sama. Software library juga memiliki peran penting dalam menciptakan
compatibility antar sistem yang berbeda.
Aplikasi yang berinteraksi dengan library harus mengikuti serangkaian aturan yang ditentukan oleh
API. Pendekatan ini memudahkan software developer untuk membuat aplikasi yang berkomunikasi dengan
berbagai library tanpa harus memikirkan kembali strategi yang digunakan selama semua library mengikut
API yang sama. Kelebihan lain dari metode ini menunjukkan betapa mudahnya menggunakan library yang
sama dengan bahasa pemrograman yang berbeda.
Seperti namanya, Web API dalam diakses melalui protokol HTTP, ini adalah konsep bukan teknologi.
Kita bisa membuat Web API dengan menggunakan teknologi yang berbeda seperti PHP, Java, .NET, dll.

77
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Misalnya Rest API dari Twitter menyediakan akses read dan write data dengan mengintegrasikan twitter
kedalam aplikasi kita sendiri.
Untuk membuat Web API, beberapa hal yang harus disediakan adalah:
1. Mendukung fungsi CRUD yang bekerja melalui HTTPprotocol dengan method GET, POST, PUT
dan DELETE
2. Memiliki response Accept Header dan HTTP status code
3. Response dengan format JSON, XML atau format apapun yang kamu inginkan. Akan tetapi kebanyak
digunakan kedalam format JSON.
4. Mendukung fitur MVC seperti routing, controllers, action results, filter, model, IOC container, dll.
5. Web API dapat berjalan di Apache atau web server lainnya yang didukung sesuai bahasa
pemrograman yang digunakan.

Web API seperti sebuah alamat web (end point) yang dibuat untuk menangani beberapa task sesuai
request yang diterima, juga terkadang memiliki parameter sebagai data yang dibutuhkan agar dapat
menampilkan hasil yang diinginkan, juga pada beberapa kasus untuk mengakses API dibutuhkan kode
otentikasi yang telah diizinkan untuk melihat data yang diinginkan. Semua rule ini ditentukan oleh
programmer yang membuatnya.
Perbedaan Antara web service dan API adalah sebagai berikut
1. Semua web service menggunakan API tapi tidak semua API digunakan sebagai web service
2. Web service memfasilitasi untuk melakukan interaksi antara dua perangkat atau aplikasi melalui
jaringan. Sedangkan API bertindak sebagai penghubung antara dua aplikasi berbeda sehingga bisa
berkomunikasi satu sama lain baik dengan ataupun tanpa jaringan.
3. Web service hanya menggunakan 3 style yaitu SOAP, REST, atau XML-RPC untuk berkomunikasi
sedangkan API dapat menggunakan style apapun.
4. Web service selalu membutuhkan jaringan untuk pengoperasiannya sedangkan API tidak selalu
memerlukan jaringan untuk operasinya.

Gambar 8.3Perbedaan WebService dan API

C. JSON (JavaScript Object Nation)

Gambar 8.4 Data JSON

78
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

JSON berfungsi untuk menampilkan data, mengolah data dengan bentuk JSON, dan dalam PHP, JSON
Merupakan salah satu cara yang mempermudah Programmers untuk Mengelola / Pengelolaan Database.
Kegunaan JSON adalah Output yang di Keluarkan untuk API pada request yang di sediakan lewat link API.
Dengan API Perangkat Android kita bisa terhubung dengan server, Dengan Kata Lain dari Android (client) -
> server yang akan mengirimkan sebuah parameter untuk penyimpanan data atau untuk yang lainnya. Untuk
membuat output JSON di PHP dengan cara membuat Variable Array yang memiliki key dan value, dan di
encode dengan json_encode. setelah itu baru di print echo agar keluar sebagai output.

Gambar 8.4Kode PHP untuk mengelola data JSON

Sumber : https://2.bp.blogspot.com/

D. Membuat Aplikasi Mobile dengan Web Service

1. Membuat Web Service dengan PHP dan MYSQL
Disini kita akan menggunakan webserver lokal dengan XAMPP untuk membuat webservice
bagi aplikasi mobile yang akan kita buat. Pertama kita buat database di phpmyadmin dengan
nama database “daftarsiswa”. Kemudian dalam database tersebut dibuat tabel diberikan nama
tb_kelas dengan struktur sebagai berikut

Gambar 8.5Struktur Tabel Kelas

Kemudian kita isi data dalam tabel siswa dengan data berikut ini

79
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.6isi data Tabel Kelas

Kemudian kita buat folder webapi didalam folder htdocs kita, sebagai tempat dari webservice
dari aplikasi mobile yang kita buat yang menggunakan PHP dan MYSQL.

Gambar 8.6membuat folder webapi di htdocs

Pertama kita akan file koneksi.php dengan kode sebagai berikut

Gambar 8.7isi data Tabel Kelas

Kemudian kita akan membuat webservice dengan nama file tampil_data.php untuk
menampilkan data kelas dalam format JSON. Kodenya adalah sebagai berikut

80
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.8file tampil_data.php

Jika file tersebut diakses di browser dengan url
http://localhost/webapi/tampil_data.phptampilannya sebagai berikut

Gambar 8.9tampilan data JSON dari file tampil_data.php

Selanjutnya kita akan membuat untuk webservice yang menangani operasi tambah data. Yaitu
dengan membuat file tambah_data.php berikut adalah kodenya

81
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.10 file simpan_data.php

Kemudian kita juga membuat untuk file webservice yang menangai operasi edit file. Kita buat
file dengan nama edit_data.php di dalam folder webapi dengan kode dibawah ini.

Gambar 8.11 file edit_data.php

Kemudian kita buat jua untuk operasi update data di file ubah_data.php dengan kode sebagai
berikut

82
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.11 file ubah_data.php

Sedangkan untuk menangani operasi hapus data kita buatkan file hapus_data.php dengan
kode sebagai berikut

Gambar 8.12 file hapus_data.php

2. Membuat Aplikasi Mobile yang Terkoneksi dengan WebService

Setelah kita membuat webservice sebagai API aplikasi kita dengan database MYSQL
selanjutnya kita akan membuat aplikasi mobile dengan cordova. Kita buat project baru dengan
nama appdb di cordova dengan perintah cli sebagai berikut

cordova create appdb com.example.ui AppDB

Jangan lupa kita tambahkan platform browser untuk uji coba aplikasi kita di localhost

cordova platform add browser

Desain mockup aplikasi yang akan kita buat adalah sebagai berikut ini

83
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.13 mockup appdb

Berikut ini adalah kode untuk laman index.html

84
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.13 kode file index.html

Saat di run dibrowser data belum muncul. Karena kita belum membuat koneksi ke web service,
yang nanti berada pada file my-app.js. Kemudian kita buat file tambah.html berikut kodenya.

Gambar 8.14 kode file tambah.html

85
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Selanjutnya kita buat untuk file yang menangani operasi edit data. Berikut adalah kode
edit.html

Gambar 8.15 kode file edit.html

Yang perlu menjadi perhatian disini adalah untuk ID elemen pada lamlan edit.html, pastikan
ID nya tidak sama dengan ID yang di laman tambah.html karena meskipun berbeda file
framework7 mengakses halaman tersebut dengan metode AJAX one page jadi dianggap 1 file
yang sama, sebagai contoh di laman tambah.html elemen untuk form nama_kelas sebagai
berikut <input type="text" placeholder="" name="nama_kelas" id="nama_kelas">
sedangkan untuk file edit.html adalah <input type="text" placeholder="" name="nama"
id="namaKelasEdit">. Jika dalam suatu aplikasi terdapat ID yang sama maka elemen tersebut
tidak akan dijalankan.

86
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Berikut adalah kode untuk laman hapus.html yang akan menangani operasi hapus data

Gambar 8.15 kode file hapus.html

Pada laman ini tidak ada form input dikarenakan proses hapus akan langsung ditangani oleh
file my-app.js sedangkan laman hapus ini sebagai event handle dari proses hapus saat tombol
hapus di klik user. Berikut adalah kode untuk file my-app.js

87
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.16 kode file my-app.js

Pada file my-apps.js terdapat beberapa fungsi untuk menangai setiap operasi CRUD database.
Berikut pada penjelasan dari masing-masing fungsi

88
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.17 fungsi laman index.html

Pada saat laman index.html tampil, maka fungsi

$$.getJSON('http://localhost/webapi/tampil_data.php', function(result){}); akan mengambil
data dari webservice yang kita buat yang ada di alamat URL
http://localhost/webapi/tampil_data.php.Anda juga bisa mengupload webservice tersebut ke
sebuah layanan hosting, semisal http://www.hostingku.com, maka cukup mengganti kode
tersebut dengan $$.getJSON('http://www.hostingku.com/tampil_data.php', function(result){});.
Kemudian hasil dari pemanggilan data tersebut disimpan dalam suaru variabel result. Kode
console.log(result); berfungsi untuk menampilkan hasil pada console log milik chrome, jalan
kan emulator browser di cordova dengan perintah

cordova run browser

Kemudian anda bisa membukan console log dengan cara klik kanan pada chome kemudian
pilih inspect atau dengan cara menekan tombol keyboard CTRL+SHIFT+I seperti tampilan
dibawah ini.

Gambar 8.18 console log di chrome

89
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Terlihat bahwa ada array object yang muncul di console log. Itu adalah file JSON dari
webservice kita, jika tidak muncul dalam console log maka ada kesalahan dalam kode kita.
Hasil dari data JSON yang diload akan di masukan dalam laman index.html dengan kode
$$('#data_tabel').append($$('<tr>') dst. Untuk aksi edit dan hapus sama dengan kita membuat
aplikasi web yaitu dengan menggunakan parameter url seperti <a
href="edit.html?id='+field.kode_kelas+'" class="button button-fill button-raised color-
orange"></a>untuk mengirimkan kode kelas yang akan di edit dalam URL parameter dengan
variable id. Begitu halnya untuk link ke laman hapus kodenya adalah sebagai berikut <a
href="hapus.html?id='+field.kode_kelas+'" class="button button-fill button-raised color-
red"></a>.

Gambar 8.19 fungsi laman tambah.html

Pada fungsi di laman tambah.html ketika button simpan di klik kode event yang digunakan
adalah $$('#simpan').on('click', function() {}); menggunakan ID elemen simpan karena kode
tombol simpan di laman tambah adalah <a href="#" class="button button-fill button-raised
color-red" id="simpan"> Simpan</a>. kode var kode_kelas=$$('#kode_kelas').val(); var
nama_kelas=$$('#nama_kelas); digunakan untuk menampung data dari masing-masng input
form. Kemudian variable tersebut di kirim dengan metode POST dengan menggunakan AJAX
dan diarahkan ke webservice kita dengan kode $$.ajax({});. untuk kode myApp.alert('Data
Berhasil Masuk'); digunakan untuk memunculkan notifikasi bahwa data sudah masuk.
Sedangkan kode mainView.router.loadPage('index.html'); digunakan agar setelah data masuk
kembali ke laman index.html

90
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.20 tampilan run browser berhasil tambah data

Gambar 8.21 fungsi untuk laman edit.html

Kode var page=e.detail.page; var id=page.query.id; berfungsi untuk mengambil URL

parameter yang dikirimkan saat link edit <a href="edit.html?id='+field.kode_kelas+'"
class="button button-fill button-raised color-orange"><i class="fa fa-pencil"></i></a> di
klik pada laman index.html. Data kode kelas tersimpan di variable id kemudian dijadian filter
untuk mengambil data ke webservice kita dengan kode
$$.getJSON('http://localhost/webapi/edit_data.php', {kode_kelas : id}, function (result) {}); .
tiap data JSON yang sudah diambil akan dimasukan ke dalam form edit contoh data nama kelas
akan tampil di form edit dengan kode $$('#namaKelasEdit').val(field.nama_kelas);Karena
elemen yang ada di laman edit adalah <input type="text" placeholder="" name="nama"
id="namaKelasEdit">. Berikut tampilan console log dari run browser saat di klik tombol edit
pada salah satu data.

91
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.22 fungsi update data untuk laman edit.html

Kode diatas untuk menangani proses update data ke database. Dimana masih dalam laman
edit.html, ketika elemen button dengan ID ubah di klik. Hal ini bisa dilihat di kode
$$('#ubah').on('click', function() {}); dimana pada laman edit.html kode untuk buttonya adalah
<a href="#" class="button button-fill button-raised color-red" id="ubah"> Edit</a>. Sama
halnya dengan fungsi simpan di laman tambah.html. Data dari form input ditampung dalam
masing-masing variable yang mewakili field dalam database. Semisal var
nama_kelas=$$('#namaKelasEdit').val(); untuk elemen <input type="text" placeholder=""
name="nama" id="namaKelasEdit"> . Tiap variable akan dikirimkan ke webservice yang
sudah kita buat di URL http://localhost/webapi/ubah_data.php dengan metode POST
menggunakan AJAX. Dalam fungsi ini jika update data berhasil maka akan memunculkan info
popup kodenya adalah myApp.alert('Data Berhasil DiUbah');

Gambar 8.23 tampilan run browser berhasil ubah data

Kode javascript untuk operasi hapus data adalah sebagai berikut

92
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Gambar 8.24 fungsi hapus data untuk laman hapus.html

Sama seperti fungsi edit data yang menggunakan query page untuk mengambil URL parameter
yang dikirm oleh laman index.html. Kode var page=e.detail.page; var id=page.query.id;
berfungsi untuk mengambil URL parameter yang dikirimkan saat link <a
href="hapus.html?id='+field.kode_kelas+'" class="button button-fill button-raised color-
red"><i class="fa fa-trash"></i></a> di eksekusi. Kemudian dengan AJAX menggunakan
metode GET dikirimkan ke webservice URL http://localhost/webapi/hapus_data.php

Gambar 8.25 tampilan run browser berhasil hapusdata

3. Menguji Aplikasi yang telah dibuat
Jika Anda ingin menguji aplikasi appdb ini dalam perangkat anda, kita harus mengupload
webservice yang kita buat kedalam sebuah web hosting, karena di perangkat android tidak
bisa terkoneksi ke localhost. Anda bisa memanfaatkan fasilitas http://000webhost.com atau
hosting provider kepercayaan anda. Jangan lupa merubah alamat URL webservice di file
my-app.js seperti yang dijelaskan sebelumnya.

Untuk build ke APK anda dengan menjalankan perintah berikut untuk menambahkan
platform android jika belum ditambahkan:

cordova platform add android

Kemudian jalankan perintah berikut untuk membuild:

cordova build android

93
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Setelah proses build selesai, Kamu dapat mengakses file .apk pada folder
project firstApp\platforms\android\build\outputs\apk\ dengan nama file android-
debug.apk. Kamu bisa mencoba menyalin file tersebut ke dalam handphone smartphone
Android dan menginstalnya. Pastikan mode developer sudah diaktifkan di handphone
Androidnya.

Gambar 7.7 Hasil build APK

94
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Daftar Rujukan

 Utomo, Priyo, 2013, Mobile web Programming HTML5, CSS3, Jquery,Yogyakarta:Andi Publisher
 Wahana, 2012, Java for Mobile Programming, Yogyakarta : Andi Publisher
 Damayanti, endah, 2013, Buku Pemrograman Web Kelas XI Semester 1, VEDC : Malang
 Damayanti, endah, 2013, Buku Pemrograman Web Kelas XI Semester 2, VEDC : Malang
 Modul 3 Profesional TKI KB 4 Pemrograman Basis Data Di (Diunduh 10 Mei 2019)
 E-book 24 Jam Pintar Pemrograman Android (Diunduh 10 Mei 2019)
 https://www.codepolitan.com/bahasa-bahasa-untuk-pemrograman-mobile-5975f838c2a24 (diunduh
31 Juli 2019)
 https://www.codepolitan.com/apa-bedanya-aplikasi-native-hybrid-dan-web (diunduh 31 Juli 2019)
 https://id.wikipedia.org/wiki/sistem-operasi-mobile(diunduh 31 Juli 2019)
 https://www.codepolitan.com/tutorial/membuat-aplikasi-android-berbasis-html5-cordova/ (diunduh
31 Juli 2019)
 https://v1.framework7.io/docs (diunduh 31 Juli 2019)

95
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Tentang Penulis
Syahdan, Seorang anak laki-laki.. lahir di Tulungagung 02 Desember 1990 tepatnya
hari minggu wage, Anak pertama dan terakhir ayah ibu dan ingin sekali belajar
sampai ke negara seberang.. (semoga bisa ya…). Kehidupan dimulai saat pendidikan
dimulai.. ibu selalu mendidik untuk selalu berbuat baik dan jangan sampai menyakiti
hati orang lain, dari TK , SD Ngadirejo 1, dan SMP Negeri 1 di kediri jawa timur,
(Bagaimana klo SMA..??) saya ndak pernah SMA, dulu bercita-cita jadi dokter
namun saya urungkan, karena kondisi ekonomi orang tua yang tidak mendukung,
akhirnya saya banting setir putar haluan ke SMK, Saya Lulusan SMK Negeri 1
Kediri (kediri juga..??) . Namun Tuhan itu adil, impian untuk menjadi dokter
akhirnya di wujudkan (Loohhh koq bisa..??) karena saya jadi dokter komputer, saya mengambil jurusan
Teknik Komputer Jaringan. dan Alhamdulillah Lulus di Tahun 2009.

setelah menuntut ilmu, saya mencoba untuk mengamalkannya… lulus dari SMK saya berkeinginnan untuk
kuliah, namun tetap berhadapan dengan masalah klasik, yaitu uang, namun klo ada kemauan pasti ada jalan,
alhamdulilah saya bekerja disalah satu toko komputer di kediri, dan berkat itu pula saya bisa mendaftar
kuliah PTS dikediri, yaitu Universitas Nusantara PGRI. Banyak hal yang bisa dipetik dalam menghadapi
kuliah dan kerja ini, khususnya dalam membagi waktu dan perasaan. Sedikit kesulitan pada Tahun Pertama
Alhamdulillah bisa diatasi.

Setelah belajar, Mengamalkan, kemudian ada jalan untuk menyampaikan kepada orang lain. Tepatnya
September 2010 saya mengajar, meski masih anak bawang dalam dunia pendidikan namun ndak ada
salahnya dicoba, karena belajar yang baik itu adalah belajar untuk menyampaikan ilmu kepada orang lain.
Fokus pembelajaran dan riset saya adalah web development (frontend dan backend), Android Development,
Linux SysAdmin, AI (Artificial Intelegent) dan lagi gandrung jua dengan IoT (internet Of Things)

Kritik dan saran anda semua dapat dikirimkan ke [email protected] atau di twitter
@rudyekoprasetya

96