Wednesday, December 17, 2014

Membuat Aplikasi Mobile Sederhana (Web Mobile Application)

iphone, android, windows phone
Mungkin sebagian orang sudah banyak yang mengenal PhoneGap, PhoneGap adalah sebuah framework yang digunakan untuk membuat aplikasi mobile berbasis HTML5, CSS, dan JavaScript.

Dengan membuat sebuah aplikasi berbasis mobile, maka kita sudah bisa build ke beberapa device sekaligus seperti iPhone, Android, dan Windows Phone.

Sekarang kita coba membuat aplikasi mobile untuk menampilkan website dengan sederhana (web mobile application).

File yang kita dibutuhkan untuk PhoneGap :
  1. Index.html
  2. Config.xml
  3. Icon.png
  4. Gambar splash.png

Membuat file index.html

<!doctype html>
<html>
    <body>
        <h1>DokyAsde Blog Mobile Apps</h1>
            <br />
            Klik gambar untuk menampilkan website<br/>
            <a href="http://dokyasde.blogspot.com">
                <img src="dokyasde_logo.jpg" border="0" width="100%" />
            </a>
            <br />
    </body>
</html>

Membuat file config.xml

<widget xmlns       = "http://www.w3.org/ns/widgets"
    xmlns:gap       = "http://phonegap.com/ns/1.0"
    xmlns:android   = "http://schemas.android.com/apk/res/android"
    id              = "com.dokyasde.blog"
    version         = "1.0.0">
      
    <!-- For more information about using config.xml, see
        https://build.phonegap.com/docs/config-xml -->
   
    <!-- this app will have no device api access -->
    <preference name="permissions" value="none"/>
    <icon src="dokyasde_icon.png" />
    <!-- kode untuk splash screen -->
    <!-- iOS -->
    <gap:splash src="dokyasde_splash.png" width="320" height="480" />
    <gap:splash src="dokyasde_splash.png" width="640" height="960" />
    <gap:splash src="dokyasde_splash.png" width="1024" height="768" />
    <gap:splash src="dokyasde_splash.png" width="768" height="1024" />
    <!-- Android -->
    <gap:splash src="dokyasde_splash.png" gap:platform="android" gap:density="ldpi" />
    <gap:splash src="dokyasde_splash.png" gap:platform="android" gap:density="mdpi" />
    <gap:splash src="dokyasde_splash.png" gap:platform="android" gap:density="hdpi" />
    <gap:splash src="dokyasde_splash.png" gap:platform="android" gap:density="xhdpi" />
    <!-- Windows Phone -->
    <gap:splash src="dokyasde_splash.jpg" gap:platform="winphone" />
    <name>Doky Asde blog</name>
    <description>
        Sharing tentang website, internet, jaringan, linux, mobile dan aplikasi.
    </description>
    <author href="https://dokyasde.blogspot.com" email="dokyasde@gmail.com">
        Doky Asde
    </author>
</widget>

Sediakan gambar splash dan icon.

Silahkan  buat file splash dan icon sesuai dengan keinginan anda, bisa menggunakan photoshop dan aplikasi lainnya.

Arsip file tersebut dengan extention zip.

Arsip file bisa menggunakan Winrar, IZArc, 7z, dan software arsip lainnya.

Build aplikasi dengan PhoneGap.

Setelah file diatas di arsip dengan ektensi zip, sekarang buka https://build.phonegap.com. Login dengan akun adobe, jika belum ada silahkan daftar terlebih dahulu.
  1. Upload file

    upload file
  2. Klik Ready to build

    buid phonegap
  3. Jika sudah selesai build, anda tinggal download file install dan coba jalankan diperangkat smartphone anda.(install sesuai dengan versi smartphone).

  4. Untuk iPhone anda harus memasukan sertifikat terlebih dahulu. Jika sudah rebuild aplikasi ios.
    Kalau behasil akan ditandai dengan tanda biru seperti gambar dibawah ini:


Download Project

Semoga Berhasil...