Tuesday, September 19, 2017
.NET, Xamarin

Crear lector de código de barras con Xamarin.Forms

>helibertoarias helibertoarias
enero 16, 2017

En este post vamos a crear un proyecto Xamarin.Forms para utilizar la cámara del móvil como un lector de código de barras con el apoyo de las librerías ZXing.

Qué haremos?

Crearemos un proyecto Xamarin.Forms de tipo PCL en Visual Studio Community Edition; a este le agregaremos las referencias Nuget para poder utilizar la cámara del móvil como un lector de código de barras. Luego se adicionan las implementaciones en iOS y Android para poder instanciar el lector de código de barras, esto se hará usando Dependency Services. Finalmente creamos una ViewPage y le adicionamos un botón para iniciar el proceso de lectura y un Entry para capturar el código leído.

Características técnicas

  • Visual Studio 2015 Community Edition Update 3 con Xamarin 4.2.2.11
  • Nuget 3.5.0.1484
  • Windows 10 x64
  • Versión Android 6 dispositivo físico

Tipos de códigos soportados por la librería

1D product 1D industrial 2D
UPC-A Code 39 QR Code
UPC-E Code 93 Data Matrix
EAN-8 Code 128 Aztec (beta)
EAN-13 Codabar PDF 417 (beta)
ITF
RSS-14
RSS-Expanded

0. Creando la solución

Este paso es totalmente opcional, y lo único que permite es que todos los paquetes de Nuget que descargues a la solución sean adicionados en un directorio en especifico y no en la carpeta packages ubicada siempre en el directorio en el que se halla la solución. Con esto lo que logras centralizar tus paquetes Nuget a nivel de solución de una mejor manera.

Para crear esta configuración especial vamos a crear en Visual Studio es una solución en blanco de la siguiente manera.

Solución en blanco

Creamos un archivo nuget.config el cual ubicamos en el mismo directorio donde esta el archivo de la solución. En el archivo se define la ruta absoluta en la que se quiere que sean copiados todas la referencias Nuget adicionadas a la solución. El contenido será el siguiente.

Omitir este paso ya que la rutas de los paquetes Nugets se crearan de manera absoluta lo cual puede traer problemas al mover la solución de directorio

1. Adicionado Xamarin.Forms

Adicionado a la solución un proyecto llamado AppBarCode de tipo Xamarin.Forms PCL (Portable Class Library).

Adicionando proyecto Xamarin.Forms

Adicionando proyecto Xamarin.Forms

Particularmente luego del paso anterior, procedo a dejar en la solución los proyecto de iOS, Android y el Portable; los demás los remuevo.

3. Actualizando Xamarin.Forms

Este paso es altamente recomendado para poder trabajar con las ultimas versiones disponibles de las librerías y evitar inconvenientes. Para ello actualizamos las referencias de Xamarin.Forms en toda la solución.

Actualizando paquete de la solución

Asegúrate que en la pestaña Updates este Xamarin.Forms instalado con la ultima versión, en caso contrario procede a instalarlo desde esta ventana Updates.

Actualizando Xamarin.Forms

Actualizando Xamarin.Forms

 

4. Instalando librerías ZXing

Para utilizar la cámara del móvil como un lector de código de barras vamos a instalar las librerías ZXing.Net.Mobile y ZXing.Net.Mobile.Forms en la solución.

Instalando librerías ZXing

5. Creando interface en proyecto portable

En el proyecto portable vamos a crear una carpeta a la que llamaremos Services. En esta le agregaremos la interface IQrCodeScanningService. Esta interface sera útil para trabajar la implementación especificas de la librería en cada plataforma a través de Dependency Services.

 

6. Configurando proyecto iOS

Creamos en el proyecto iOS una carpeta llamada Services y en este le adicionamos la clase QrCodeScanningService con la implementación de la plataforma actual.

 

 

Editamos el archivo AppDelegate.cs

 

7. Configurando proyecto Android

Al igual que en el proyecto iOS, adicionamos una carpeta Services y en este la clase QrCodeScanningService con la implementación para la plataforma actual.

 

Configurando permisos en el androdManifest.xml

 

Editamos el MainActivity.cs

 

8. Configurando proyecto portable

Luego de configurar el proyecto iOS y Android, procedemos a crear una vista desde la que tendremos un botón y una caja de texto. Al accionar el botón se activará la cámara del móvil para leer códigos de barras. Luego de leer un código se retorna a la pagina inicial y se podrá visualizar el texto leído.

Creamos una carpeta llamada ViewPage. Luego a esta le adicionaremos un item del tipo Forms Xaml Page.

Creando ScanPage

 

Editamos el archivo de la siguiente manera

 

También editamos el archivo ScanPage.xaml.cs. Colocamos un evento al botón para que active la cámara para escanear los códigos de barras, aquí nos apoyamos en el Dependency Services para instanciar la implementación de acuerdo a la plataforma que se este ejecutando la aplicación.

 

9. Ejecutando aplicación

Para la prueba utilice un dispositivo físico con Android 6 (Moto G segunda generación) al que se le habilitó las opciones de depuración. Para probar diversos códigos puedes usar un generador de código de barras online.

 

Interface lector de código

 

Captura de código

 

Descargar código fuente

 

(Visitado 1.382 veces, 4 visitas hoy)
Heliberto Arias
Mi nombre es Heliberto Arias y vivo en Barranquilla, Colombia. Soy desarrollador de software. He estado en el desarrollo de software desde el 2007. Cree este blog en 2013 para compartir lo que voy aprendiendo cada año, en el escribo de tecnologías Microsoft principalmente en C# (y aunque he usado VB declaro que lo detesto) y SQL Server desarrollado aplicaciones y servicios web entre otros.Me gustaría mucho si te suscribes a mis redes en Youtube, Google+, Twitter, e Instagram.

Comments

  • Aldo Vilardy
    Aldo Vilardy

    Hola, gracias por su aporte. Quería preguntar ¿La ejecución del proyecto para iOS la hizo usando la maquina virtual de macos sierra en virtualbox?

    Ene 23, 2017, 10:17 pm
    Responder
    • helibertoarias
      helibertoarias

      Aldo, Tengo pendiente ver como hacer la prueba de la cámara desde el macos sierra en virtualbox. Te comento al rato como me va.
      Saludos.

      Ene 26, 2017, 8:18 pm
      Responder
  • Enrique
    Enrique

    Hola, muchas gracias por su aporte, lo he probado con Android y funciona perfectamente, le agradeceria si pudiera indicar los aspectos relevantes para configurarlo en UWP para Windows 10 phone bajo este mismo esquema PCL.

    Mar 25, 2017, 1:56 am
    Responder
    • helibertoarias
      helibertoarias

      Hola Enrique, no lo he trabajado con UWP pero voy hacerle la revisión y te comento al rato.

      Mar 30, 2017, 6:22 pm
      Responder
  • Ale
    Ale

    Hola heliberto, te hago una consulta, desde Android, cuando se abre el Scanner y se quiere ir hacia atrás con el botón Back (el de android <), Xamarin arroja una excepción System.NullReferenceException: Object reference not set to an instance of an object. ¿Tuviste el mismo problema? Hay algo que tenga que tener en cuenta. Imagino que está intentando retroceder la página en lugar de cerrar el Scanner.

    Abr 26, 2017, 3:37 pm
    Responder
    • Ale
      Ale

      Recien veo que aprobaste el comentario. Encontré el problema, por si a alguien le es util. En la implementación en Android tenés:

      var scanResults = await scanner.Scan(optionsCustom);
      return scanResults.Text;

      Al presionar back, scanResults es null, y al pedirle .Text arroja una excepción. Lo corregí reemplazando el retorno con:

      return (scanResults != null) ? scanResult.Text : string.Empty;

      Jul 6, 2017, 12:52 pm
      Responder

Leave a Comment

Your email address will not be published.

Doce + 11 =

Login
Remember me
Lost your Password?
Password Reset
Login