Beruflich Dokumente
Kultur Dokumente
Jorge Moreno
En este manual se describen los pasos para poder implementar un lector de cdigos QR en el sistema operativo Android usando la API de zxing en Cordova
Shynka Software
03/10/2013
Contenido
Pre-requisitos: ..................................................................................................................................... 2 Creando la Aplicacin: ......................................................................................................................... 3 Instalar el Plugin BarcodeScanner ....................................................................................................... 5 Ejecutar el LectorQR:........................................................................................................................... 8 Probar Aplicacin: ............................................................................................................................. 10 Bibliografa ........................................................................................................................................ 14
Pre-requisitos:
Para poder ejecutar este ejemplo se deben cumplir estos requisitos: Tener Instalado y configurado NodeJs (NodeJs.org). Tener instalado y configurado Cordova (Apache Cordova) Tener instalado y configurados Android (SDK) (Android SDK, Gua Instalacin Android).
Creando la Aplicacin:
En este paso se procede a crear la aplicacin por medio de comandos en la terminal. Abril la terminal, para eso vamos al men inicio y en el cuadro buscar digitamos CMD, luego abrimos el programa encontrado
En este caso se cre una aplicacin llamada LectorQr. Cambiamos de carpeta, dirigindonos a la anteriormente creada
Compilamos la aplicacin
En la pgina que se abre, dar clic en el botn Download ZIP, para poder descargar el proyecto. Tras la descarga, se descomprime el archivo y verificamos que contenga algo como en la siguiente imagen.
Nos dirigimos a la carpeta de nuestro proyecto (LectorQr) ,ingresamos a la carpeta plugins y creamos una nueva carpeta nombrada com.phonegap.plugins.barcodescanner, quedando una estructura como la que sigue:
Regresamos a la carpeta que obtuvimos de descomprimir el proyecto descargado desde git y copiamos las carpetas todo el contenido, exceptuando la carpeta spec
Ejecutamos el siguiente comando para instalar el Plugin en cordova, para eso, desde el terminal y en la carpeta del proyecto ejecutamos este cdigo:
plugman --plugins_dir plugins --plugin com.phonegap.plugins.barcodescanner --platform android --project platforms\android plugman install --plugins_dir plugins --plugin com.phonegap.plugins.barcodescanner -platform android --project platforms\android
Ejecutar el LectorQR:
Vamos a modificar el cdigo del proyecto, de tal manera que al usuario dar clic en un botn que nosotros crearemos, podremos abrir el lector de cdigo listo a escanear Abrimos el archivo index.html con nuestro editor favorito, el archivo index.html se encuentra en la carpeta www de nuestro proyecto
Dentro del archivo index.html eliminamos todo su contenido y pegamos el siguiente cdigo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Qr Reader</title> </head> <body> <div class="app"> <h1>Qr Reader</h1> <div id="deviceready" class="blink"> <input name="btnLeer" type="button" onClick="leer()" height="10px" width="10px" value="Leer"> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script src="barcodescanner.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); function leer() { cordova.plugins.barcodeScanner.scan( function (result) { alert("We got a barcode\n" +
"Result: " + result.text + "\n" + "Format: " + result.format + "\n" + "Cancelled: " + result.cancelled); }, function (error) { alert("Scanning failed: " + error); } ); } </script> </body> </html>
Luego de eso, procedemos a copiar el archivo barcodescanner.js que se encuentra en la carpeta www del proyecto descargado y descomprimido de Git, y lo pegamos en la carpeta www de nuestro proyecto
Probar Aplicacin:
Luego de haberse realizado los cambios en el archivo index.html, se procede a compilar el cdigo nuevamente, mediante la consola
Abrimos el proyecto con Eclipse (descargado e instalado con anterioridad si se sigui la gua de Como Inicia en Android). Para abrir el proyecto, seguimos los pasos descritos a continuacin: Abrimos Eclipse, y luego creamos un nuevo proyecto, para eso damos clic en File -> New -> Project
Damos clic en Browse y nos dirigimos a la carpeta donde est el proyecto, una vez ubicados hay vamos a la carpeta platforms y damos clic en Aceptar
Listo, ahora basta con correr el programa. Advierto que la aplicacin solo la pude probar correctamente en un dispositivo fsico, no la pude probar en un emulador. Aqu pueden ver imgenes de la aplicacin corriendo en un Samsung Galaxy Nexus.
Bibliografa
Willoughby, R. (s.f.). Git. Recuperado el 3 de 10 de 2013, de https://github.com/wildabeast/BarcodeScanner