Membuat Aplikasi Mobile Android menggunakan Sencha Touch dan Apache Cordova Part 1

Pada tulisan ini saya akan menjelaskan proses untuk membuat aplikasi mobile berbasis Android menggunakan Sencha Touch 2.4 dan Apache Cordova.

Apache Cordova atau Phonegap ?

Beberapa waktu yang lalu ada seorang kawan yang menanyakan perbedaan antara Cordova dan Phonegap. Jadi pada awal nya Cordova dan  Phonegap merupakan satu produk yang sama yang berfungsi untuk membantu developer untuk membuat mobile app (Android/iOS) menggunakan teknologi web seperti HTML, Javascript dan CSS. Apache Cordova/Phonegap menyediakan device API yang memudahkan developer untuk mengakses fungsi-fungsi native device seperti Kamera, GPS, Akselerometer dan lain-lain dari Javascript.  Phonegap di kembangkan oleh Nitobi dan kemudian pada tahun 2011 dibeli oleh Adobe semenjak itu pula ada versi open source dari Phonegap yang diberi nama Cordova, sedangkan Adobe juga mengembangkan Phonegap Build sebagai layanan berbasis service untuk membangun (packaging)  mobile app di Cloud.

Link Apache Cordova | Dokumentasi API

Prasyarat Pengembangan :

1. Install NodeJS

2. Install Java SDK

3. Install Ruby

4. Install Compass

5. Download dan Install Android SDK

6. Download Ant, lalu setup path ANT_HOME

7. Download dan Install Sencha CMD

8. Download Sencha Touch terbaru.

9. Install Cordova setelah menginstall NodeJS

npm install -g cordova

 

Starting Point: Basic Sencha Touch App

1. Setelah Sencha touch berhasil di download lalu di extract, misal :

C:\wamp\www\touch-2.4.1

2. Masuk ke folder diatas lalu lewat console/command prompt ketikkan perintah sencha cmd untuk generate project sencha :

 sencha generate app TestingApp ..\TestingApp

CaptureSenchaGenerateApp

 

 

 

 

perintah diatas artinya kita membuat project mobile baru bernama TestingApp, akan muncul folder baru

 C:\wamp\www\TestingApp

 

3. Masuk ke folder TestingApp, lalu ketik perintah untuk menambahkan Apache Cordova kedalam project

sencha cordova init com.mydomain.testingapp TestingApp

CaptureCordovaInit

 

 

perintah di atas untuk menambahkan com.mydomain.testingapp sebagai AppID dan TestingApp sebagai AppName

Kemudian edit file app.json untuk merubah konfigurasi saat build

“builds”: {
“web”: {“default”: true},
“native”: {
“packager”: “cordova”,
“cordova” : {
“config”: {
// Uncomment the line below and add the platforms you wish to build for
“platforms”: “android”,
“id”: “com.mydomain.testingapp”,
“name”: “TestingApp”
}
}
}
},

4. Menambahkan support platform Android dengan masuk ke folder cordova C:\wamp\www\TestingApp\cordova

cordova platform add android

CordovaAddPlatform

 

 

 

 

 

5. Build Project

kembali ke folder awal C:\wamp\www\TestingApp , lalu ketikkan perintah :

sencha app build native

perintah di atas untuk melakukan build dari source sencha touch ke cordova

kemudian masuk kembali ke folder cordova, dan ketikkan perintah :

cd cordova

cordova build android

cordova run android

perintah di atas untuk melakukan build aplikasi android, sebaiknya sebelumnya sudah membuka emulator android.

CaptureEmulator

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>