Proyecto AjpdSoft Software Libre y Artículos sobre Nuevas Tecnologías

Desarrollar aplicación lector de códigos de barras para Android con App Inventor

Os mostramos cómo, de forma muy sencilla y sin código Java, podemos crear una aplicación para dispositivos Android que lea códigos de barras. Para ello usaremos el API gratuita ZXing para Android. Como IDE de desarrollo para Android usaremos Google App Inventor. Publicamos el código en Google App Inventor de la aplicación AjpdSoft Lector Códigos de Barras Android.

Google App Inventor

Si no tienes conocimientos sobre Google App Inventor, es recomendable que leas el siguiente artículo donde explicamos paso a paso el entorno de desarrollo de Google App Inventor y cómo crear y compilar un proyecto:

Desarrollar aplicaciones Android con Google App Inventor de forma visual

ZXing

ZXing es un softeare de código abierto, se trata de una librería multi-formato 1D/2D para lector de código de barras implementada en Java. Permite decodificar códigos QR, Data Matrix y UPC. Permite ser usada para J2ME, J2SE, y Android.

Permite leer los siguientes tipos de códigos de barras:

UPC-A y UPC-E.
EAN-8 y EAN-13.
Código 39.
Código 93.
Código 128.
Código QR.
ITF.
Codabar.
RSS-14 (todas las variantes).
Data Matrix.
PDF 417 (calidad 'alpha').
Aztec (calidad 'alpha').

Diseño de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Una vez creado el proyecto App Inventor, añadiremos los siguientes componentes a lo que será la interfaz gráfica de la aplicación AjpdSoft Lector Códigos de Barras Android:

De la paleta "Screen Arrangement" añadiremos un "VerticalArrangement": en él introduciremos dos Label.
De la paleta "Basic" añadiremos un Label: lo arrastraremos dentro del VerticalArrangement anterior, lo dejaremos con la propiedad "Text" vacía. En la propiedad "Height" del Label introduciremos 50 pixels. Este Label sólo servirá para que el siguiente no aparezca pegado en la parte superior pues no queda estétimente bien.
De la paleta "Basic" añadiremos un Label: lo arrastraremos encima del VerticalArrangement anterior. En la propiedad "Text" introduciremos el texto "Requiere el API gratuita ZXing instalada". Simplemente servirá para mostrar un texto al usuario. La propiedad "Height" introduciremos 30 pixels para que el siguiente componente no quede pegado.
De la paleta "Basic" añadiremos un Button: arrastraremos el Button debajo del Label anterior. Este será el botón que ejecutará el lector de códigos de barras. Pulsaremos en "Rename" y le pondremos el nombre "btLeerCodigoBarras". En la propiedad "Text" del Button introduciremos "Leer código de barras". En la propiedad "Width" seleccionaremos "Fill parent".
De la paleta "Screen Arrangement" añadiremos un "TableArrangement" debajo del Button anterior. Lo usuaremos para introducir un Label y un TextBox donde mostraremos el código de barras leído. Por lo tanto en la propiedad "Columns" introduciremos el valor 2. En la propiedad "Width" seleccionaremos "Fill parent".
De la paleta "Basic" arrastraremos un Label dentro del TableArrangement anterior (en la primera columna). En la propiedad "Text" del Label introduciremos "Código". Desmarcaremos la propiedad "Visible" para que no aparezca hasta que no se lea el código de barras (lo haremos en la ventana del editor de bloques).
De la paleta "Basic" arrastraremos un TextBox a la segunda columna del TableArrangement anterior, junto al Label. Cambiaremos el nombre por "txtCodigoBarras". Desmarcaremos la propiedad "Visible" para que no aparezca hasta que no se lea el código de barras (lo haremos en la ventana del editor de bloques). También desmarcaremos la propiedad "Enabled" para que el cursor no quede en este cuadro de texto, si no hacemos esto, al ejecutar la aplicación el cursor aparecerá en este cuadro y se mostrará el teclado en pantalla, algo molesto porque no lo necesitamos.
Si queremos añadir un logo o imagen podremos arrastrar un "Image" de la paleta Basic. Subiremos la imagen pulsando el botón "Add" de la sección "Media". Tras subir la imagen, en la propiedad "Picture" seleccionaremos la imagen subida para que aparezca en nuestra aplicación Android. En nuestro caso hemos usado un "Canvas" en vez de un "Picture" para intentar alinear la imagen al centro que, estéticamente, queda mejor.
Como ejemplo hemos añadido un Buton al final con el nombre "btCerrar" para que el usuario pueda cerrar la aplicación.
El último componente, el más importante, es un componente no visual de la paleta "Other stuff" llamado "BarcodeScanner", lo hemos nombrado como "compLectorCodigoBarras". Este componente será el que lea el código de barras conectando con el API de ZXing.

La aplicación quedaría así en el diseñador de Google App Inventor:

El diseño que quedará en la aplicación Android:

Editor de Bloques de la aplicación AjpdSoft Lector Códigos de Barras Android en Google App Inventor

Una vez que hayamos realizado el diseño de la aplicación pulsaremos en el botón "Open the Blocks Editor" para abrir el editor de bloques (como indicamos aquí). A continuación explicaremos los bloques (piezas del puzle) que iremos añadiendo para los botones "btLeerCodigoBarras" y "btCerrar":

1. Programaremos una acción para cuando el usuario haga clic en el botón "Leer código de barras". Lo que queremos es que se haga una llamada al componente "BarcodeScanner" para que éste, a su vez, use el API de ZXing y muestre la ventana de captura de código de barras . Para ello, en el Blocks Editor de App Inventor, en la pestaña "My Blocks", pulsaremos sobre "btLeerCodigoBarras" (nuestro botón para leer el código de barras) y seleccionaremos la pieza del puzle "btLeerCodigoBarras.Click" correspondiente al evento Click (cuando el usuario hace clic en el botón):

Para indicar la acción a realizar cuando se haga clic en el botón, seleccionaremos "compLectorCodigoBarras" (componente correspondiente al BarcodeScanner), arrastraremos el "compLectorCodigoBarras.DoScan":

y lo uniremos a la pieza del puzle anterior "btLeerCodigoBarras.Click":

2. Ahora queremos recoger el valor devuelto por el componente "BarcodeScanner", si el usuario ha leído un código de barras, el componente debe recoger el valor de éste. Para mostrar el valor del código de barras leído añadiremos del componente "compLectorCodigoBarras" la pieza "compLectorCodigoBarras.AfterScan":

Como se puede observar, al añadir la pieza "compLectorCodigoBarras.AfterScan" lleva otra pieza encajada llamada "name result", en realidad es una variable que contendrá el valor del código de barras leído.

Ahora queremos que tras la lectura del código de barras (AfterScan) el valor se muestre en nuestro TextBox (txtCodigoBarras). Para ello pulsaremos en "My Blocks", seleccionaremos "txtCodigoBarras" y arrastraremos "txtCodigoBarras.Text" (la pieza "set"):

y encajaremos esta pieza en la pieza compLectorCodigoBarras.AfterScan:

Como último paso nos queda indicar qué texto aparecerá en "txtCodigoBarras.Text" y queremos que sea el código de barras leído. Para ello accederemos a "My Blocks", seleccionaremos "My definitions" y veremos una nueva definición creada automáticamente al añadir el "compLectorCodigoBarras.AfterScan" llamada "result" (se le puede cambiar el nombre). Seleccionaremos esta pieza:

y la arrastraremos y encajaremos en la parte derecha del "set txtCodigoBarras.Text":

3. Con estos sencillos pasos ya tendríamos la aplicación AjpdSoft Lector Códigos de Barras Android operativa, ya podríamos instalarla en nuestro móvil Android, instalar ZXing y probarla y ver que ya lee un código de barras y obtiene su valor. Pero, si recordamos, hemos ocultado el Label y el TextBox que muestra el código de barras, por lo tanto el usuario no lo verá. Lo que haremos ahora será indicar a nuestra aplicación que cuando se lea el código de barras se cambie la propiedad visible a "sí" (true) de estos dos componentes, para ello en "My Blocks" seleccionaremos "Label2" (que es el Label que muestra, símplemente, el texto "Código:") y arrastraremos la pieza "set Label2.Visible":

y la soltaremos y encajaremos encima de la pieza "set txtCodigoBarras.Text" (dentro de "compLectorCodigoBarras.AfterScan"). Para establecer el valor "True" (sí) a esta propiedad del Label2 accederemos a "Built-In", seleccionaremos "Logic" y arrastraremos la pieza "true" al final de la pieza "set Label2.Visible":

Quedando de la siguiente forma:

Repetiremos la misma operación para el caso del "set txtCodigoBarras.Visible":

Y también podremos hacerlo para la propiedad "Enabled" del "txtCodigoBarras", quedando la pieza "compLectorCodigobarras.AfterScan":

4. Por último podremos programar también el botón "btCerrar" para que al pulsarlo el usuario se cierre la aplicación Android. Para ello añadiremos (como ya hemos explicado anteriormente para el botón "btLeerCodigobarras") el evento (pieza) "btCerrar.Click":

Para indicar que se cierre la aplicación accederemos a "Built-In", seleccionaremos "Control":

y arrastraremos "call close application" a la pieza anterior "btCerrar.Click":

El editor de bloques finalizado para la aplicación AjpdSoft Lector Códigos de Barras Android quedará:

Compilar, empaquetar y generar el .apk para instalar en dispositivo Android

Una vez creado el diseño (interfaz gráfica) y creados los bloques (lógica de la aplicación) podremos compilarla y empaquetarla para generar el fichero apk para instalar en el dispositivo Android. En el siguiente artículo explicamos cómo hacerlo:

Abrir emulador, probar aplicación, compilar y empaquetar, instalar en dispositivo Android

Probar la aplicación AjpdSoft Lector Códigos de Barras Android en un dispositivo Android (Samsung Galaxy S)

Como hemos comentado, el componente BarcodeScanner de Google App Inventor requiere el API ZXing instalado en el móvil Android, para instalarlo (es gratuito) accederemos a Google Market: