Membuat Aplikasi Hello World versi Website
Pada bagian ini akan dicontohkan pembuatan aplikasi “Hello World” yang nantinya akan diunggah ke PhoneGap Build. Untuk aplikasi ini kita akan menggunakan bootstrap sebagai framework UI. Bootstrap digunakan karena simpel dan tentunya sudah banyak yang familiar.
Langsung saja download master dari Bootstrap yang dapat di download pada website https://getbootstrap.com/. Pada latihan ini bootstrap yang digunakan adalah versi v4.0.0. Selanjutnya ikuti langkah-langkah berikut untuk membuat aplikasi “Hello World”
Pertama – Buat folder untuk menempatkan aplikasi yang akan dibuat. Folder bebas mau dibuat di drive mana saja. Extract file download master bootstrapnya. File/folder yang dibutuhkan terdapat di folder “dist”, silakan copykan semua folder/file yang ada di dalam folder “dist”. Terdapat 2 folder yaitu css dan js. Sebenarnya tidak semua file kita butuhkan, tetapi untuk sementara biarkan semua file tercopy. Setelah itu copykan 2 file js yang ada di folder assets/js/vendor ke dalam aplikasi kita pada folder js. File tersebut adalah jquery-slim.min.js dan popper.min.js.
Kedua – Buat file html baru di root aplikasi, buat dengan nama index.html. Setelah itu lengkapi kodenya sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello World App</title>
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col">
<h3 class="text-center">Hello World</h3>
</div>
</div>
<br>
<div class="row">
<div class="col">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profil</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Kontak</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<br>
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="card">
<div class="card-body">
Ini merupakan aplikasi pertamaku 🙂
Semoga Belajarku bermanfaat
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="card">
<div class="card-body">
<table class="table">
<tr>
<td>Nama</td>
<td>:</td>
<td>Mohammad Reza Maulana</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>STMIK Widya Pratama Pekalongan</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class="card">
<div class="card-body">
<table class="table">
<tr>
<td>
Email <br>
<b>reza.stmikwp@gmail.com</b>
</td>
</tr>
<tr>
<td>
Kantor <br>
<b>Jl Patriot No.25 Pekalongan</b>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ketiga – Setelah selesai, jalankan menggunakan browser, disini menggunakan Chrome. Untuk membuat tampilan menjadi mobile, tekan F12 pada keyboard untuk memunculkan Developer Tools. Setelah itu klik “Toogle Device Toolbar” yang terletak di sebelah atas Developer Tools untuk membuat tampilan mobile.
Setelah aplikasi jadi, aplikasi siap untuk dikompilasi melalui PhoneGap Build. Akan tetapi sebelum melakukan kompilasi kita perlu melakukan setting projek kita untuk pengaturan mobilenya seperti, versi sistem operasi, author, nama aplikasi, icon aplikasi dan masih banyak pengaturan lainnya. Tahapan ini akan dijelaskan di bagian selanjutnya.
Konfigurasi Projek sebelum Build (config.xml)
Konfigurasi projek sangat penting untuk dilakukan karena ini berkaitan dengan pengaturan-pengaturan dan properti dari aplikasi yang kita buat. Seperti yang dijelaskan sebelumnya kita perlu melakukan pengaturan projek. Dalam hal ini kita hanya perlu membuat satu file baru dengan format xml dan dengan nama config.xml. File config.xml ini harus berada pada root aplikasi kita.
Pengaturan file config.xml secara otomatis akan menjadi properti dari projek aplikasi yang kita buat. Penulisan di dalam config.xml menganut spesifikasi dari W3C Widget. Hal ini memudahkan developer melakukan pengaturan metadata terhadap aplikasi yang kita buat. config.xml ini akan dibahas lebih lanjut pada pembahasan di artikel lain.
Keempat – Langsung saja kita buat file dengan nama config.xml dan diletakkan pada root aplikasi kita.
Setelah kita buat file config.xml berikutnya kita mulai menulis kode di dalamnya. Lengkapi kodenya sebagai berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.stmikwp.helloworld"
versionCode = "10"
version = "1.0.0" >
<!-- versionCode is optional and Android only -->
<name>Hello World App</name>
<description>
Ini merupakan contoh aplikasi Hello World.
</description>
<author href="https://stmik-wp.ac.id" email="reza.stmikwp@gmail.com">
Mohammad Reza Maulana
</author>
</widget>
Di dalam file config.xml terdapat beberapa pengaturan. Sedikit akan kita ulas untuk pengaturan aplikasi tersebut. <?xml version=”1.0″ encoding=”UTF-8″?> ini merupakan pengaturan versi xml. Kemudian tag widget merupakan ketentuan karena kita menggunakan spesifikasi W3C widget yang sudah disampaikan sebelumnya. Di dalam tag pembuka widget terdapat berberapa propertis, yaitu:
- xmlns dan xmlns:gap : merupakan namespace dari widget aplikasi, secara default bisa digunakan seperti yang tertulis di contoh
- id: identifier unik untuk aplikasi, biasanya isi dari id merupakan reverse dari website milik developer/aplikasi.
- versionCode: bersifat opsional ketika membangun aplikasi android, lebih detail bisa lihat di https://developer.android.com/studio/publish/versioning
- version: digunakan untuk versi rilis dari aplikasi, saran dari phonegap gunakan 3 nomer misal 0.0.1 dimana menandakan “Mayor.Minor.Patch” dari versi aplikasi yang dibuat
Kemudian ada tag name menunjukkan nama dari aplikasi. Tag description digunakan untuk menulis deskripsi aplikasi. Dan yang terakhir ada tag author untuk menuliskan yang membuat aplikasi, dimana di dalamnya terdapat dua propertis di tag pembuka yaitu link website dan alamat email.
Sekarang sudah selesai untuk pengaturan projek aplikasi dan siap untuk dikompilasi di PhoneGap Build. Pada bagian selanjutnya akan dijabarkan bagaimana menggunakan PhoneGap Build untuk mengkompilasi aplikasi kita dan siap untuk diinstal di smartphone.
Build App
Bagian kompilasi (build app) merupakan bagian penting dimana aplikasi yang tadinya berbasis web dijadikan aplikasi yang terkesan native di smartphone kita. Hasil dari kompilasi ini nantinya menjadi file installer dari target platform tujuan. Misal kita buat aplikasi android, maka akan menghasilkan file dengan ekstensi apk.
Langsung saja ikuti langkah-langkah berikut untuk mengkompilasi aplikasi kita:
Kelima – Login ke PhoneGap Build di https://build.phonegap.com/. Setelah login akan diarahkan ke beranda dari build aplikasi seperti pada postingan “Berkenalan dengan PhoneGap Build“
Keenam – Kompres aplikasi kita sehingga menjadi ekstensi zip. Posisi kompres adalah di root aplikasi, jangan keluar dari root aplikasi
Ketujuh – Setelahnya kembali lagi ke Phonegap Build. Terdapat dua pilihan sumber aplikasi yang akan dibuild, dari repository atau private (upload langsung). Untuk pertama kita bisa upload menggunakan private, tetapi untuk selanjutnya tidak bisa menambah projek private lagi karena kita menggunakan versi gratis dan dibatasi satu projek private. Pilih “Upload a .zip file” kemudian pilih aplikasi yang sudah kita kompres tadi. Tunggu sampai proses upload selesai.
Kedelapan – Setelah selesai upload maka akan muncul “Ready to Build” jika aplikasi tidak terjadi masalah. Jika terdapat masalah biasanya akan terdapat pemberitahuan masalahnya apa dan harus diperbaiki. Klik tombol “Ready to Build” maka akan melakukan proses kompilasi aplikasi.
Kesembilan – Jika proses kompilasi selesai maka proses kita sudah selesai dan siap untuk didownload kemudian diinstal pada smartphone. Secara default terdapat tiga platform yang muncul. Biasanya yang berhasil dikompilasi adalah platform Android dan Windows. Sedangkan iOS tidak, hal ini disebabkan karena kita tidak menyertakan “signing key”. tampilan halaman dari hasil build aplikasi kurang lebih seperti pada Gambar 14. Jika beda pilih salah satu platform yang error dan nanti akan diarahkan ke halaman tersebut.
Terakhir silakan download aplikasi di tombol apk yang berwarna biru. Kemudian instal di smartphone. Kurang lebih hasilnya setelah diinstal seperti pada Gambar 19. Perlu diketahui untuk hasil file apk masih dalam versi debug belum versi release. Sehingga untuk menginstal di smartphone perlu pengaturan izin instal dari sumber eksternal yang tidak diketahui. Tiap masing-masing vendor smartphone berbeda-beda caranya. Anda bisa browsing bagaimana cara melakukan pengaturan tersebut.
Akhirnya selesai juga proses dari awal sampai akhir untuk pembuatan aplikasi Hello World yang memanfaatkan PhoneGap Build. Happy Coding 🙂
