Melanjutkan postingan saya sebelumnya kali ini kita akan belajar mengenai bagaimana cara membuat aplikasi berbasis apache cordova dengan menambahkan plugin yang kita ambil dari github. Bagi anda yang belum mengetahui apa itu apache cordova, anda dapat membaca penjelasannya di postingan saya yang sebelumnya Inslatasi Apache Cordova.
Kali ini kita akan membuat aplikasi qr code reader dengan apache cordova dan mengambil plugin untuk qr code dari github. Untuk membuat aplikasi ini di komputer anda harus terinstal aplikasi-aplikasi berikut :
1. Node JS
2. GIT
3. JDK (Disini saya memakai JDK versi 7)
4. Android SDK
5. Koneksi Internet
Jika anda belum mengetahui cara menginstal aplikasi-aplikasi tersebut, anda dapat membacanya di sini.
Jika semua peralatan sudah ada, kita tinggal memulai pembuatan aplikasi QR Code menggunakan Apache Cordova.
1. Ketikan perintah
cd c:/
cordova create AplikasiCordova io.cordova.hellocordova CordovaApp
2. Selanjutnya masuk ke folder aplikasi tersebut berada, ketik
cd AplikasiBaru
3. Menambahkan platform yang ingin dibangun.
Pada proses membuat aplikasi cordova, kita bisa memilih perangkat apa yang ingin kita support, karena kali ini kita membuat aplikasi android maka perintahnya adalah
cordova platform add android
Biarkan proses penambahan platform berjalan, kita juga bisa menambahkan platform lain contohnya
Cordova platform add browserCordova platform add blackbarryCordova platform add firefoxosCordova platform add windows
4. Jika proses telah selesai maka kita bisa membuka file html yang ada dan kita melakukan coding seperti halnya membangun sebuah website. Karena kita membuat project di folder C maka file html terletak di C:/AplikasiBaru/www/
Disana juga sudah terdapat folder css, img, dan, js yang sudah di generate oleh sistem.
5. Karena kita akan membuat aplikasi QR Reader yang pluginya kita ambil dari github, maka kita harus menambahkannya terlebih dahulu. Buka cmd yang tadi telah kita buka dan ketikan
cordova plugin add phonegap-plugin-barcodescanner
6. Jika plugin berhasil kita tambahkan selanjutnya saatnya membuat coding di halaman index.html.
Secara sederhana perintah javascript untuk melakukan scanning code adalah sebagai berikut:
cordova.plugins.barcodeScanner.scan(function (result) {
if(!result.cancelled)
{
alert("Barcode type is: " + result.format);
alert("Decoded text is: " + result.text);
}
else
{
alert("You have cancelled scan");
}
},
function (error) {
alert("Scanning failed: " + error);
}
);
Saya sudah membuat file html yang dapat anda copy paste pada project yang anda buat di rumah.
Index.html
<!DOCTYPE html><html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>QRCode Reader APP</title>
</head>
<body>
<center><a target="_blank" href="javascript:scan();" style="text-decoration: none"><button>Scan</button></a></center>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
function scan()
{
cordova.plugins.barcodeScanner.scan(
function (result) {
if(!result.cancelled)
{
alert("Decoded text is: " + result.text);
}
else
{
alert("You have cancelled scan");
}
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
</script>
</body>
</html>
7. Setelah itu kita harus membuat project QR Reader tersebut menjadi bentuk .apk agar dapat di instal di perangkat android. Untuk melakukan build agar project menjadi bentuk apk ketikan
cordova build android
Tunggu hingga proses selesai, dalam proses ini jika anda belum pernah melakukan build sebelumnya, maka prosesnya akan lebih lama karena komputer akan mendownload file terlebih dahulu yang digunakan untuk membuat project menjadi bentuk apk.
Jika sudah selesai, maka file apk yang sudah kita buat terletak di
C:\AplikasiBaru\platforms\android\build\outputs\apk
8. Anda dapat menginstal aplikasi ini secara langsung di android atau menggunakan emulator. Disini saya menggunakan bluestack untuk menjalankan aplikasi tersebut.
Berikut hasil akhir dari aplikasi yang kita buat :
Demikian tutorial mengenai membuat aplikasi QR Reader berbasis Apache Cordova, anda dapat mengembangkan sendiri aplikasi tersebut, menjadi aplikasi yang lebih bermanfaat.
EmoticonEmoticon