Aprende en Comunidad
Avalados por :
Integración de ZXing para escanear códigos en SAPUI5: Guía paso a paso
- Creado 01/03/2024
- Modificado 01/03/2024
- 64 Vistas
0
Cargando...
SAPUI5 tiene un módulo que permite escanear códigos de barras (1D, 2D)
Si es necesario utilizar esta funcionalidad en un navegador web, debemos usar módulos JS externos para escanear y decodificar los códigos, como:
*hay muchos proyectos de código abierto en GitHub con esta funcionalidad, listaré solo algunos de ellos
El último de ellos es la mejor opción si se necesita trabajar con diferentes formatos (códigos de barras, códigos QR, códigos 2D (PDF417, DataMatrix ...)) - por eso elegí esta biblioteca para integrarla en mi aplicación SAPUI5.
Repositorio en GitHub
Para iniciar el proceso de escaneo en la aplicación, necesitarás:
El proceso de análisis y decodificación se repetirá, si el formato se reconoce correctamente, se llamará al callback "Escaneado" con el texto decodificado y el tipo de código {texto: 'Cadena', formato: Número}.
La mejor manera de usar ZXing en tu aplicación SAPUI5 es crear un control personalizado con todos los elementos necesarios.
He creado un ejemplo de dicho proyecto GitHub
Allí puedes encontrar la aplicación de ejemplo con el control personalizado
sap.ndc.BarcodeScanner
, pero tiene una limitación: este módulo utiliza una biblioteca nativa que solo está disponible a través del Cliente SAP Fiori (aplicación móvil para Android/iOS).
Si es necesario utilizar esta funcionalidad en un navegador web, debemos usar módulos JS externos para escanear y decodificar los códigos, como:
*hay muchos proyectos de código abierto en GitHub con esta funcionalidad, listaré solo algunos de ellos
- QuaggaJS (códigos de barras 1D);
- Quirc (códigos QR);
- ZXing-JS (lector de códigos múltiples).
El último de ellos es la mejor opción si se necesita trabajar con diferentes formatos (códigos de barras, códigos QR, códigos 2D (PDF417, DataMatrix ...)) - por eso elegí esta biblioteca para integrarla en mi aplicación SAPUI5.
Características de ZXing
Repositorio en GitHub
- Detecta automáticamente el tipo de código y lo decodifica;
- Una amplia lista de formatos compatibles (EAN-8, EAN-13, Code 39, Code 128, ITF, RSS-14, QR, Data Matrix, PDF 417).
Agregar a la aplicación SAPUI5
- Descarga el código compilado desde UNPKG (o agrégalo como dependencia en package.json, pero en este caso necesitarás compilar el proyecto desde las fuentes);
-
Colócalo en el directorio del proyecto (por ejemplo, en la carpeta
lib)
-
Agrega las dependencias al
manifest.jsonensap.ui5.resources.js
- ¡Usa las características de zxing! (objeto global ZXing)
Trabajando con ZXing
Para iniciar el proceso de escaneo en la aplicación, necesitarás:
-
Elemento de video HTML (para mostrar un flujo de video desde un dispositivo);
-
Inicialización de ZXing: crea el objeto decodificador - puedes elegir el modo: Código de barras, Código QR, PDF417, MultiFormat, ...;
-
Selecciona la fuente de video (puede ser una de las cámaras del dispositivo) - usa el método de ZXing
listVideoInputDevicespara obtener la lista de dispositivos disponibles;
-
Comienza la búsqueda y decodificación - usando
decodeFromVideoDevice;
El proceso de análisis y decodificación se repetirá, si el formato se reconoce correctamente, se llamará al callback "Escaneado" con el texto decodificado y el tipo de código {texto: 'Cadena', formato: Número}.
Ejemplo de control
La mejor manera de usar ZXing en tu aplicación SAPUI5 es crear un control personalizado con todos los elementos necesarios.
He creado un ejemplo de dicho proyecto GitHub
Allí puedes encontrar la aplicación de ejemplo con el control personalizado
ExtScanner
Pedro Pascal
Se unió el 07/03/2018
Facebook
Twitter
Pinterest
Telegram
Linkedin
Whatsapp
Sin respuestas
No hay respuestas para mostrar
Se el primero en responder
contacto@primeinstitute.com
(+51) 1641 9379
(+57) 1489 6964
© 2024 Copyright. Todos los derechos reservados.
Desarrollado por Prime Institute
Hola ¿Puedo ayudarte?