Sie sind auf Seite 1von 15

Lector de Cdigos QR en Android con Cordova

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

Creamos la aplicacin con los comandos de cordova:

En este caso se cre una aplicacin llamada LectorQr. Cambiamos de carpeta, dirigindonos a la anteriormente creada

Agregamos la plataforma de Android al proyecto

Compilamos la aplicacin

Instalar el Plugin BarcodeScanner


Para instalar el Plugin en nuestra aplicacin, primero debemos descargar el cdigo, el cual se encuentra en esta direccin.

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

Pegamos el contenido dentro de la carpeta com.phonegap.plugins.barcodescanner creada con anterioridad

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

En el que recibiremos el mensaje de installed si todo ha ocurrido bien.

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

Creamos un nuevo proyecto de Android desde cdigo existente

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

Escogemos el proyecto y damos clic en finalizar

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

Das könnte Ihnen auch gefallen