3 min read Android

Programming Aplikasi Android Dengan HTML 5 :Membuat Sample Project

Programming Aplikasi Android Dengan HTML 5 :Membuat Sample Project

Pada tulisan kedua ini , akan di jelaskan bagaimana memulai membuat proyek baru pada Crosswalk, Melakukan Compiling dan melakukan testing pada emulator maupun langsung pada device developer. Selamat Menikmati 🙂

Yang harus dipersiapkan :
  1. Crosswalk Framework download di sini (Crosswalk Cordova, ARM)
  2. Text Editor , seperti Brackets
1. Membuat project crosswalk baru : 

Ekstrak Crosswalk ke dalam folder, dalam hal ini saya ekstrak ke C:/ , rename folder hasil ekstrak(contoh : crosswalk-cordova-7.36.154.13-arm) menjadi crosswalk agar memudahkan.
Capture

buka Command Prompt lalu lakukan change directory ke dalam folder crosswalk/bin.
contoh command : cd C:/crosswalk/bin

Capture

Create Project baru dengan mengetik

create project_directory package_name project_name

project_directory adalah nama folder dimana project akan dibuat
package_name adalah nama package android, biasanya berformat com.namaperusahaan.namaaplikasi klik disini untuk melihat detail format & fungsi package_name.
project_name adalah nama aplikasi yang anda buat.

sebagai contoh, ketik perintah berikut :

create testproject com.test.testproject testproject

Capture

Masuk kedalam proyek yang telah dibuat , ketikan perintah berikut :
cd testproject

selamat , anda telah berhasil membuat project pada crosswalk.

2. Melakukan coding pada aplikasi

Buka file explorer, lalu masuk kedalam directory www project ( C:/crosswalk/bin/testproject/assetswww )

Capture

Crosswalk adalah framework wrapper HTML, sehingga development pun dilakukan dengan mengubah HTML/JS/CSS. index.html akan otomatis di tampilkan saat aplikasi dijalankan.

sebagai contoh , ubah index.html menjadi script di bawah ini

<html>

<head></head>

<body>

<h1>Hallo Crosswalk</h1>

</body>

</html>

Capture

selamat , anda telah mengetahui cara mengubah HTML pada aplikasi crosswalk !

3. Membuat android emulator

Emulator digunakan untuk testing, kelebihan menggunakan emulator adalah anda tidak membutuhkan device.

Buka Android Device Manager dengan mengetik android avd pada command prompt,

Capture

Akan terbuka AVD Manager , klik create

Capture

Pada dialog yang terbuka, isi sebagai berikut, lalu klik ok
Capture

Pilih Android Virtual Device yang baru di buat lalu klik create, tunggu hingga emulator menampilkan home android
Capture

Selamat , anda telah berhasil melakukan instalasi dan menjalankan android emulator !

4. Compiling dan run aplikasi crosswalk pada emulator

Untuk melakukan testing pada emulator , ketik perintah di command prompt (current directory pada commandprompt : C:/crosswalk/bin/testproject/cordova , lakukan cd apabila belum sama )  run

Capture

Emulator akan otomatis terbuka apa bila belum terbuka, dan aplikasi akan dijalankan
Capture

selamat ! anda telah berhasil membuat dan menjalakan aplikasi crosswalk di android 🙂

5. Testing pada device : 

Ikuti tutorial ini untuk setup debug pada handphone android anda.

Koneksikan device anda dengan komputer, lalu lakukan run aplication seperti diatas, crosswalk akan secara otomatis memilih device anda apabila tersedia.

6. Selesai

Anda telah berhasil melakukan pembuatan project, memodifikasi kode, melakukan compiling dan testing menggunakan device maupun emulator pada crosswalk. Pada tutorial selanjutnya akan di jelaskan mengenai tutorial-tutorial lanjutan membuat aplikasi mobile berbasis web. Mohon maaf apabila ada kesalahan dalam tutorial, silahkan sampaikan kesalahan melalui comment box yang telah di sediakan, Happy Coding ~

Sumber : Crosswalk

Penulis :
Gilang Charismadiptya Prashasta
——————————
Silahkan copy artikel namun harus di sertai link ke blog ini.

gilang

gilang