Home » android » phonegap » Aplikasi Android Konversi Jarak Mil Menggunakan Phonegap

Aplikasi Android Konversi Jarak Mil Menggunakan Phonegap

in , - on 01:07 - No comments
Aplikasi konverter jarak yang ada di Google Play memang sudah sangat banyak. Dari semua aplikasi Android tersebut memang sudah dibuat sedemikian rupa sehingga pengguna dimudahkan untuk mengkonversi dari suatu satuan jarak ke satuan yang lain. Dengan menggunakan kombinasi HTML, CSS dan Javascript sederhana, sebenarnya kita pun bisa membuat aplikasi semacam itu. Tentunya memanfaatkan framework Phonegap.
android konversi mil km
Konversi Mil
Tutorial kali ini, saya akan memaparkan bagaimana membuat aplikasi konverter sangat sederhana yakni konverter satuan Mil ke Kilometer (KM). Disini kita hanya membutuhkan beberapa baris kode Javascript yang dikombinasikan dengan basis input HTML. Sebelum beranjak ke tutorial, penulis akan merangkum cara kerja aplikasi tersebut.
  • User melakukan input angka satuan Mil dari form input HTML yang telah kita buat.
  • Dari masukan angka tersebut, kita akan membuat file submit.js untuk mengkalkulasi hitungan Mil ke KM
  • Jika input angka valid yang dimasukkan sama dengan 0 (nol), maka akan muncul notifikasi kesalahan
  • Jika input angka valid yang dimasukkan lebih dari 0 (nol), misalnya 1 (satu). Maka notifikasi hasil konversi Mil ke Kilo Meter akan dimunculkan.

Tutorial

1Pertama-tama kita akan membuat project menggunakan Eclipse dan plugin MDS Applaud. Anda bisa membaca tutorial mengenai pembuatan project Phonegap menggunakan MDS Applaud di artikel saya yang berjudul Membuat Project MDS Applaud. Berikut adalah konfigurasi project untuk tutorial kali ini yang saya beri nama aplikasi Konversi Mil :
  • Project Name : Konversi Mil
  • Package Name : com.mkhuda.konversimil
  • Phonegap Version : Phonegap versi 1.9.0
  • Built Target : Android 2.1
2Setelah kita membuat project sebagaimana konfigurasi di atas. Karena build target kita adalah Android 2.1, maka kita harus mengedit terlebih dahulu file AndroidManifest.xml kita dengan menghapus atribut xLargeScreens pada tag <support-screen>, agar error code hilang.
Hapus Atribut xLargeScreens
Hapus Atribut xLargeScreens
3And then, lets write the submit.js ! File submit.js ini merupakan nyawa dari konverter yang akan kita buat nanti. Di dalamnya berupa source code algoritma sederhana untuk mengkonversi jarak mil ke kilometer. Perlu kita ketahui bahwa 1 Mil = 0.6 sekian KiloMeter. Anda bisa mencarinya di search engine Google jika tidak percaya :D . Baiklah, berikut adalah source code file submit.js yang saya buat : (Silahkan di copy paste)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 

function fnHitung() {




    var angka = document.getElementById('inputku').value;




    if (document.getElementById('inputku').value == "") {




        alert("Jangan Dikosongi");




        document.getElementById('inputku').focus();




        return false;




    }




    else




        if (angka >= 1) {




          var hasil;




          hasil = angka*0.6;




          alert(angka+" Mil = "+hasil+" Kilometer");




        document.getElementById('inputku').focus();




        document.getElementById('inputku').value = tandaPemisahTitik(angka) ;




        return false; 




        }




}
view raw gistfile1.js hosted with ❤ by GitHub
File submit.js mempunyai satu function bernama fnHitung(); fungsi ini akan mengambil angka dari form input, dan mengkalkulasi angka dengan perkalian konversi mil ke kilometer. Sangat sederhana.
4Setelah membuat script di atas, selanjutnya kita akan membuat file index.html yang di dalamnya sudah terinclude file submit.js di bagian header. Berikut adalah form input yang saya buat di dalam tag <body>. Berikut adalah form input yang harus Anda ketik atau copy paste-kan ke Eclipse:
1 2 3 4 5 6 7 8 9 10 

<body onload="init();" id="stage" class="theme">




    <div id="angka">




    <div id="input">




    <center><h1>Aplikasi Konverter Mil ke KM</h1></center>




    <center><h3>Powered by Phonegap</h3></center>




     <input type="number" id="inputku">




    <input name="submit" tabindex="32" type="submit" id="submit" onclick="fnHitung()" value="Convert">




    </div>




 </div>




</body>
view raw index.html hosted with ❤ by GitHub
Berikut adalah hasil kompilasi pada perangkat Android langsung :
hasil aplikasi android konversi mil
Hasil Uji Coba
Untuk file lengkapnya sudah saya sertakan di dalam paket .zip source code. Di dalam paket tersebut berisi project aplikasi konversi ini yang terdiri dari file .APK, index.html, style.css, dan submit.js. Selamat mencoba !
Labels: ,

Post a Comment