20/12/2016

MembuatAplikasiAndroidBerbasisHTML5denganCordova

Membuat Aplikasi Android Berbasis HTML5 dengan Cordova

Toni Haryanto (https://www.codepolitan.com/coder/yllumi) di Android (https://www.codepolitan.com/category/android)

Apr 15, 2016

Membuat Halaman HTMLPertama

Sekarang saatnya mencoba membuat aplikasi Android berbasis HTML5 dengan Cordova. Hahaha.. persiapannya seabreg ya,
tapi worthed lah dengan hasil yang kita inginkan. Untuk membuat project pertama dengan Cordova, buka command line lalu
ketikkan perintah seperti berikut:
cordovacreatefirstAppcom.codepolitan.firstappFirstApp

Perintah cordovacreate 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
membuatkanfolder 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 langsungdi browser, akan ada beberapa aplikasi javascript
yang tidakdapat berjalan, karena lingkungan kerja aplikasi berbeda dengan lingkungan kerja browser biasa.
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:
https://www.codepolitan.com/tutorial/membuataplikasiandroidberbasishtml5cordova

1/5

20/12/2016

MembuatAplikasiAndroidBerbasisHTML5denganCordova

cordovaplatformaddbrowser

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 untukmenginstal library tersebut. Setelah selesai, jalankan
perintah berikut untuk menjalankan aplikasi pada browser:
cordovarunbrowser

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 AngularJS. Kamu juga dapat membuat style sendiri atau menggunakan
CSS framework seperti Bootstrap (https://www.codepolitan.com/tag/bootstrap/)dan Foundation
(http://foundation.zurb.com/).

Aplikasi berjalan dengan baik melalui emulator browser cordova

Untuk keluar dari emulator, tekan tombol Ctrl + C pada keyboard. Kamu bisa sedikit bermain-main dengan kode html yang
sudah ada, misalnya mengganti konten tag <h1>ApacheCordova</h1> dengan <h1>SelamatDatang!</h1> atau apapun yang
Kamu inginkan, lalu lihat hasilnya.

Artikel ini telah dibaca 46223 kali

#css (https://www.codepolitan.com/tag/css)

#Android (https://www.codepolitan.com/tag/android)

#javascript (https://www.codepolitan.com/tag/javascript)

#java (https://www.codepolitan.com/tag/java)

#html5 (https://www.codepolitan.com/tag/html5)

#aplikasi android (https://www.codepolitan.com/tag/aplikasi-android)

#cordova (https://www.codepolitan.com/tag/cordova)

https://www.codepolitan.com/tutorial/membuataplikasiandroidberbasishtml5cordova

2/5

20/12/2016

MembuatAplikasiAndroidBerbasisHTML5denganCordova

#mobile app (https://www.codepolitan.com/tag/mobile-app)

#jdk (https://www.codepolitan.com/tag/jdk)

#apache cordova (https://www.codepolitan.com/tag/apache-cordova)

#android sdk (https://www.codepolitan.com/tag/android-sdk)

#cara install android sdk (https://www.codepolitan.com/tag/cara-install-android-sdk)

#cara install apache ant (https://www.codepolitan.com/tag/cara-install-apache-ant)

#cara install jdk (https://www.codepolitan.com/tag/cara-install-jdk)

#apk (https://www.codepolitan.com/tag/apk)

#hybrid app (https://www.codepolitan.com/tag/hybrid-app)

Sekilas tentang Penulis

Toni Haryanto
Co-Founder Codepolitan and web programmer. Antusias pada teknologi web dan mikrokontroller. Baru lulus jadi sarjana. Sudah punya anak satu.
http://toharyan.blogspot.co.id (http://toharyan.blogspot.co.id)

Baca juga:

(https://www.codepolitan.com/aplikasi-crud-sederhana-menggunakan-android-studio-dengan-database-sqlite-57b6d14e04fa5-14500)
Aplikasi CRUD Sederhana Menggunakan Android Studio dengan Database SQLite (https://www.codepolitan.com/aplikasi-crud-sederhana-menggunakanandroid-studio-dengan-database-sqlite-57b6d14e04fa5-14500)

https://www.codepolitan.com/tutorial/membuataplikasiandroidberbasishtml5cordova

3/5

20/12/2016

MembuatAplikasiAndroidBerbasisHTML5denganCordova

(https://www.codepolitan.com/tutorial-android-cara-membuat-aplikasi-lampu-di-android)
Tutorial Android - Cara Membuat Aplikasi Lampu di Android (https://www.codepolitan.com/tutorial-android-cara-membuat-aplikasi-lampu-di-android)

(https://www.codepolitan.com/xamarin-android)
Membuat Aplikasi Android dengan Bahasa C# Menggunakan Xamarin (https://www.codepolitan.com/xamarin-android)

https://www.codepolitan.com/tutorial/membuataplikasiandroidberbasishtml5cordova

4/5

20/12/2016

MembuatAplikasiAndroidBerbasisHTML5denganCordova

6Comments

CodePolitan

Recommend 7

Share

Login

SortbyBest

Jointhediscussion
KhafidoIlZam3monthsago

setelahcreateproject,ituhasilfoldernyadimana?
1

Reply Share

pramudyabiima7daysago

https://uploads.disquscdn.com/...
Adayangtaupermasalahanyainienggakya??

Reply Share
anggriawananggriamonthago

https://uploads.disquscdn.com/...ganmautanyainifixnyagimanaya?udahsayamasukkanpathfolderantkePATHdandiANT_HOME,tapimasih
ayagitu."buildfailed"

Reply Share
emonyeon3monthsago

terimakasihbanyakmassebelumnya,tapipunyasayawakturunningcordovabuildandroidkokerroryahmas.Errornyasepertiini
https://uploads.disquscdn.com/...
ituyangkurangapayahmas.?makasihbanyaksebelumnya

https://www.codepolitan.com/tutorial/membuataplikasiandroidberbasishtml5cordova

5/5