HTML adalah bahasa markup yang digunakan untuk membuat halaman web, dan memiliki format .htm atau .html yang biasanya selalu diawali dengan tag <html> dan </html> sebagai penutup. Kenapa HTML? HTML adalah markup language yang multiplatform, artinya bisa dibuka dimana saja, asalkan memiliki web browser, termasuk di mobile device. Nah, di sesi ini saya akan membahas cara untuk membuat HTML sebagai native application, artinya bisa dibuka sebagai aplikasi tanpa harus membuka web browser.
Sebelum memulai menegangkan jari tangan, persiapkan dulu beberapa aplikasi yang dibutuhkan:
- Download dan Install Eclipse Classic disini http://www.eclipse.org/downloads/
- Download dan Install Android SDK disini http://developer.android.com/sdk/index.html
- Tutorial installasi Android SDK ada disini http://belajardroid.com/component/k2/item/143-install-android-sdk
- Download dan Install ADT Plugin untuk Eclipse disinihttp://developer.android.com/sdk/eclipse-adt.html#installing
- Tutorial Install ADT Plugin untuk Eclipse bisa dibaca disinihttp://belajardroid.com/component/k2/item/144-install-eclipse-dan-adt
- Download dan Extract Cordova terbaru disini http://phonegap.com/download
Setup New Project
- Buka Eclipse lalu pilih File -> New -> Project... kemudian pilih Android -> Android Project
- Isi Project Name dengan nama project sesuai keinginan, dan biarkan opsi untuk tidak diubah. Disini saya mengisinya dengan HelloHTML sebagai Project Name.
- Pilih SDK Build Target, fungsinya untuk memilih SDK mana yang akan digunakan sebagai compiler.
- Selanjutnya adalah pengisian Package Name, Activity dan pemilihan Minimum SDK.
- Isi Package name, pengisian bebas, hindari spasi dan special character, kecuali titik. Package name nantinya akan menjadi nama file package/aplikasi.
- Untuk Create Activity, biarkan saja apa adanya.
- Pilih Minimum SDK target, disini minimum SDK adalah target SDK mana yang akan kita gunakan, atau versi minimal OS untuk menjalankan project. Disini saya masih menggunakan SDK level 10, atau untuk OS 2.3.3.
- Setelah langkah diatas selesai, buka folder Project dan folder Cordova (PhoneGap) yang sudah diekstrak, lalu ikuti langkah berikut:
- Di root folder project, buatlah folder baru dengan nama libs
- Buka folder assets di root folder project tadi,dan buatlah folder baru dengan nama wwwdidalamnya.
- Copy file cordova-2.0.0.js dari folder phonegap (cordova) ke folder assets/www dan foldercordova-2.0.0.jar ke folder libs
- Copy folder xml yang ada di phonegap ke folder res yang ada di project.
- Refresh project dengan menekan tombol F5, atau klik kanan > Refresh. Selanjutnya adalah menambahkan file cordova-2.0.0.jar ke Build Path project. Klik kanan di Project yang dikembangkan, pilih Build Path > Configure Build Path...
Setelah Window baru terbuka, klik tab Libraries dan klik tombol Add JARs... lalu di folder Project, buka folder libs dan pilih cordova-2.0.0.jar lalu klik OK dan tutup dialognya dengak klik OK sekali lagi.
- Selanjutnya, edit file java yang ada di folder src didalam project, kemudian ikuti langkah berikut ini:
- tambahkan import org.apache.cordova.*; setelah import android.app.Activity; import android.os.Bundle;
- Ubah Activity menjadi DroidGap
- Ubah setContentView(R.layout.main); menjadisuper.loadUrl("file:///android_asset/www/index.html");
- Lalu save.
- Klik kanan AndroidManifest.xml dan buka dengan Text Editor, lalu tambahkan tag dibawah ini diantara <uses-sdk> dan <application>
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" /> - Tambahkan android:configChanges="orientation|keyboardHidden" didalam tag <activity>agar nantinya aplikasi support device orientation.
Jadi seperti inilah kira-kira file AndroidManifest.xml setelah 'dinodai':
- Buatlah file index.html di folder assets/www dan untuk percobaan, copy tag ini ke file tersebut
<!DOCTYPE HTML> <html> <head> <title>Cordova</title> <script type="text/javascript" charset="utf-8" src="/cordova-1.9.0.js"></script> </head> <body> <h1>Hello World</h1> <h2>BelajarDroid was here</h2> </body> </html>
- Selanjutnya kita deploy project ke android emulator, klik kanan Projectnya, pilih Run As > Android Application. Untuk deploy ke device, koneksikan device dengan USB, dan pastikan Debug mode di device sudah diaktifkan (Settings > Applications > Development)
Kalau tidak bisa masuk debug mode, pastikan eclipse telah mengenali direktori Android SDK di PC, cek ke menu Window > Preference > Android lalu browse direktori Android SDK berada.
Tips: Gunakanlah HTML text editor lain seperti notepad++ untuk mengedit file index.html, tidak disarankan dengan text editor bawaan eclipse standard, karena kurang nyaman digunakan.
0 komentar:
Posting Komentar