Setting Phonegap untuk eclipse

Oke setelah kemarin saya menjelaskan apa itu phonegap di sini. Sekarang saya akan coba bagaimana cara untuk menggabungkan phonegap di eclipse, agar bisa langsung membuat kodingannya. Oya sebelum itu, untuk cara installasi eclipse dan Android Emulatornya bisa simak tulisan saya di sini http://imron02.blogspot.com.
Kalau anda sudah paham, sekarang adalah cara setting eclipse untuk phonegap.

  1. Buka dulu eclipsenya dan buatlah sebuah project untuk android. Caranya klik new lalu pilih Other atau CTRL + N sampai muncul seperti ini:
  2. Setelah itu klik menu pada Android. Dan pilih Android Application Project seperti gambar ini:
  3. Setelah itu klik next lalu isi seperti berikut (untuk contoh):
    Aplication Name: Example
    Project Name: Example
    Package Name: com.contoh.example
    Minimum Required SDK: API 8
    Target SDK: API 17
    Lebih jelasnya lihat gambar ini:
  4. Kemudian klik next terus sampai muncul untuk klik Finish. Sehingga pada bagian Package Explorer terdapat Project dengan nama Example. Lihat:
  5. Oya dalam contoh disini project dibuat di folder /home/usernamekamu/workspace. Dan setelah dibuka folder itu akan terlihat folder Example.

    $ cd
    $ ls workspace/

    Dan nanti hasilnya akan keluar seperti ini:

    Example/ .metadata/ MyUnpam/ Unpam/ UnpamMobile/

  6. Setelah itu klik kanan folder assets pada project Example, lalu pilih New dan pilih Folder. Lihat:
  7. Lalu nanti pada bagian project Example di bagian assets terdapat folder baru dengan nama www. Lihat:
  8. Lalu sekarang download dulu file phonegapnya di sini http://phonegap.com
  9. Misal file phonegap setelah di download, berada di folder /home/usernamekamu/Downloads/phonegap-2.5.0.zip. Lalu ekstrak file phonegap itu dengan perintah:

    $ cd /home/usernamekamu/Downloads
    $ unzip phonegap-2.5.0.zip

    Setelah di unzip, nanti akan ada folder baru dengan nama phonegap-2.5.0. Seperti ini hasilnya:

    $ ls /home/usernamekamu/Downloads
    phonegap-2.5.0 phonegap-2.5.0.zip

  10. Nanti di folder phonegap-2.5.0 itu, didalamnya ada beberapa file dan folder, yaitu changelog, doc, lib, LICENSE, README.md, dan VERSION. Lalu kita masuk ke folder lib ==> android. Sehingga kalau diketik di terminal akan seperti ini:

    $ cd /home/usernamekamu/Downloads/
    $ ls phonegap-2.5.0/lib/android/

    Maka nanti hasilnya akan tampak seperti ini:

    bin/               cordova-2.5.0.js   NOTICE             xml/
    changelog          example/           README.md        
    cordova-2.5.0.jar  LICENSE            VERSION          

  11. Lalu copy paste kan file cordova-2.5.0.js ke folder assets/www yang telah kita buat tadi.

    $ cp phonegap-2.5.0/lib/android/cordova-2.5.0.js   ~/workspace/Example/assets/www/

    Lalu coba refresh Eclispenya dengan menekan tombol f5, sehinggal di bagian folder www akan terdapat file yang telah kita copykan tadi.

  12. Lalu sekarang copy lagi file cordova-2.5.0.jar ke folder Example/libs.

    $ cp phonegap-2.5.0/lib/android/cordova-2.5.0.jar   ~/workspace/Example/libs/

    Lalu refresh lagi eclipsenya, sehinggal file cordova-2.5.0.jar ada di folder libs.

  13. Lalu klik kanan file cordova-2.5.0.jar itu dan pilih Build Path dan pilih Add to Build Path. Sehingga setelah klik itu akan muncul file cordova-2.5.0.jar di Referenced Library.
  14. Setelah itu copy juga folder xml dari phonegap ke project Example tadi. Tepatnya di folder Example/res/

    $ cp -r phonegap-2.5.0/lib/android/xml/   ~/workspace/Example/res/

    Lalu refresh lagi project Examplenya di eclipse, dan pastikan folder xml beserta isinya yaitu config.xml telah ada.

  15. Lalu sekarang edit file MainActivity.java. Lihat:
  16. Menjadi seperti ini:

    package com.contoh.example;

    import android.os.Bundle;
    import org.apache.cordova.*;

    public class MainActivity extends DroidGap
    {
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            // Set by in config.xml
            super.loadUrl(Config.getStartUrl());
            //super.loadUrl(“file:///android_asset/www/index.html”)
        }
    }

    Yang sebelumnya adalah:

    package com.contoh.example;

    import android.os.Bundle;
    import android.app.Activity;
    import android.view.Menu;

    public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
    }

    }

  17. Lalu buka file AndroidManifest.xml di project Example. Lihat:

    Dan lalu di bawah tulisan ini:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android&quot;
        package=”com.contoh.example”
        android:versionCode=”1″
        android:versionName=”1.0″ >

    Tambahkan tulisan ini:

    <supports-screens
            android:largeScreens=”true”
            android:normalScreens=”true”
            android:smallScreens=”true”
            android:resizeable=”true”
            android:anyDensity=”true”
            />

       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       

    Setelah itu jangan lupa save..

  18. Dan terakhir, silahkan anda buat file index.html di folder assets/www/ dan tulislah kodingan anda di sana..
Advertisements

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