Cara Menginstall Phonegap untuk Android Apps Development

Screens are small, apps are big, and life as we know it is on its head again. In a world that’s increasingly social and open, mobile apps play a vital role, and have changed the focus from what’s on the Web, to the apps on our mobile device. Mobile apps are no longer an option, they’re an imperative. You need a mobile app, but where do you start?

Sebenarnya build hybrid apps itu gampang aja kok, yg penting adalah bisa sampai running appsnya, jadi prepare apa apa saja yang kita butuhkan. Like node.js, ants, phonegap dll.

Ini singkat saja ya, hehe, untuk instalasi phonegap sampai bisa run di android Emulator.

  1. Yang pertama dan utama, wajib punya android sdk.  Kalau belum punya, bisa download di http://developer.android.com/sdk/index.html –
  2. Java SDK latest version
  3. Install node.js, ini disini -> http://nodejs.org/download/
  4. Install phonegap, liat docsnya phonegap nih -> http://phonegap.com/install/
    1. Setelah berhasil install nodejs, lalu buka nodejs command prompt.. emm, ini command promt nya node js ya, jadi ntar setelah install nodejs, trs search aja command prompt dari start menu, pilih yg nodejs command prompt.
    2.  Kemudian Jalankan : npm install -g phonegap , ntar dia ngedownload, tunggu aja sampe selesai.
    3. Create apps? Liat lebih lengkapnya di CLI interface ini : http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface
    4. Contoh create project, misal saya buat di drive D, masuk ke dir D, so

      C:\Users\Feni\ D:
      D:\ phonegap create hello com.example.hello HelloWorld
      Cek d drive D, akan ada folder hello 😀

      Oke, sampai sini udah berhasil install phonegap dan create project helloworld di drive D. Yang selanjutnya caranya biar bisa run d emulator kitah 😀

  5. Oiya, download juga  http://ant.apache.org/, extract aja di C:\.
    Dan ini dia link downloadnya => http://www.mediafire.com/download/0v4cmor7s2188m2/apache-ant-1.9.3-bin.zip
  6. Kalo udah add path nya di ->
    Buka explorer, klik kanan My computer -> Properties -> Advanced System Settings -> Pilih Tab Advaced -> Klik Environtment variables.
    1. Saya menambahkan 3 path untuk Android SDK, ants,sama java sdk tadi 😀
    2. Caranya, klik new aja, terus isikan variable name dan value nya:

    Misal kaya punya saya ini :

    ANDROID_HOME itu path ke sdknya, misal punya saya ,
    [variable name -> value], seperti dibawah ini:
    D:\Masandro Dev\adt-bundle-windows-x86-20130917\sdk
    JAVA_HOME -> C:\Program Files (x86)\Java\jdk1.6.0_22
    ANT_HOME -> C:\apache-ant-1.9.3

    And finally, EDIT variable PATH, valuenya menjadi :

    C:\Users\Feni\AppData\Roaming\npm;%JAVA_HOME%\bin;%ANT_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

    Perhatikan ada tambahan2 dibelakangnya, /bin dan untuk ANDROID_HOME di tambah dua kali, untuk tools sama platform-tools 😀

    Kalo udah, saatnya mencoba menjalankan di emulator kita.  Kalo download yg bundle dari developer.android.com ada AVD nya, bisa add player dan play emulator seperti biasa dari situ.

    Tapi kalo saya lebih suka pake emulator dari Genymotion, lebih ringan dan lebih cepat soalnya 😀 Caranya tinggal mampir aja ke genymotion.com – register, kemudian download genymotion, kalo temen2 pake windows, pilih yg sekalian bundlded sama VirtualBoxnya.

    Install, kemudian login. Lalu klik +Add, nanti akan muncul list device yg disediakan oleh genymotion, pilih kemudiandownload emulator sesuai yang temen2 inginkan, banyak kok pilihannya. 🙂  Ini screenshot punya saya 😀

    Kalo udah, pilih emulator yg mau dijalankan , lalu Play , terus buka command prompt.
    Masuk ke dir project yang kita buat tadi, kalo saya berarti :

    D:\hello>

    Lalu jalankan perintah :

    D:\hello> phonegap platform add android

    D:\hello> phonegap run android

    tunggu beberapa saat, nanti dia akan nginstall ke emulator kita, ingat, emulatornya harus udah jalan dulu ya ^_^

    sampe sini sih harusnya udah bisa, muncul splash screen helloworld gitu. Oke, kurang lebih seperti ini:


    Selamat Mencoba ^_^

  7. Oya, buat yg mau develop, disini saya pake jquery, tp agak berat ya kalo buat mobile apps.
    Saran saya , bisa coba pake AngularJS atau Backbonejs + Topcoat.css , oh yaa.. ada OnsenUI itu juga keren banget, ringan, great UX,  HTML5 UI Framework, Onsen work with jquery and angularJS, nah , keren kan. Saya udah nyoba, dan emang simple n easy to use, nice design, multiscreen support.Great.

    Oiya satu lagi, ada ionic framework , masih beta sih, but i keep my eyes on it. Ini juga bakal keren nih 😀

 

Advertisements

2 thoughts on “Cara Menginstall Phonegap untuk Android Apps Development

  1. Pingback: Onsen UI vs Ionic Framework for Hybrid Mobile Apps | Live, Laugh, Love ~~ My Code

  2. Pingback: Create Simple Accordion with ionic and angular | Live, Laugh, Love ~~ My Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s