Avalados por :
Integração do ZXing para digitalizar códigos no SAPUI5: Guia passo a passo
- Creado 01/03/2024
- Modificado 01/03/2024
- 11 Vistas
0
Cargando...
SAPUI5 tem um módulo que permite escanear códigos de barras (1D, 2D)
Se for necessário usar essa funcionalidade em um navegador da web, devemos usar módulos JS externos para escanear e decodificar os códigos, como:
*há muitos projetos de código aberto no GitHub com essa funcionalidade, listarei apenas alguns deles
O último é a melhor opção se for necessário trabalhar com diferentes formatos (códigos de barras, códigos QR, códigos 2D (PDF417, DataMatrix ...)) - por isso escolhi essa biblioteca para integrar em minha aplicação SAPUI5.
Repositório no GitHub
Para iniciar o processo de escaneamento na aplicação, você precisará de:
O processo de análise e decodificação será repetido, se o formato for reconhecido corretamente, o callback "Escaneado" será chamado com o texto decodificado e o tipo de código {texto: 'Cadeia', formato: Número}.
A melhor maneira de usar o ZXing em sua aplicação SAPUI5 é criar um controle personalizado com todos os elementos necessários.
Eu criei um exemplo desse projeto GitHub
Lá você pode encontrar o aplicativo de exemplo com o controle personalizado
sap.ndc.BarcodeScanner
, mas tem uma limitação: este módulo usa uma biblioteca nativa que só está disponível através do Cliente SAP Fiori (aplicativo móvel para Android/iOS).
Se for necessário usar essa funcionalidade em um navegador da web, devemos usar módulos JS externos para escanear e decodificar os códigos, como:
*há muitos projetos de código aberto no GitHub com essa funcionalidade, listarei apenas alguns deles
- QuaggaJS (códigos de barras 1D);
- Quirc (códigos QR);
- ZXing-JS (leitor de códigos múltiplos).
O último é a melhor opção se for necessário trabalhar com diferentes formatos (códigos de barras, códigos QR, códigos 2D (PDF417, DataMatrix ...)) - por isso escolhi essa biblioteca para integrar em minha aplicação SAPUI5.
Características do ZXing
Repositório no GitHub
- Detecta automaticamente o tipo de código e o decodifica;
- Uma ampla lista de formatos suportados (EAN-8, EAN-13, Code 39, Code 128, ITF, RSS-14, QR, Data Matrix, PDF 417).
Adicionando à aplicação SAPUI5
- Baixe o código compilado de UNPKG (ou adicione-o como dependência no package.json, mas nesse caso precisará compilar o projeto a partir das fontes);
-
Coloque-o no diretório do projeto (por exemplo, na pasta
lib)
-
Adicione as dependências ao
manifest.jsonemsap.ui5.resources.js
- Use as funcionalidades do ZXing! (objeto global ZXing)
Trabalhando com o ZXing
Para iniciar o processo de escaneamento na aplicação, você precisará de:
-
Elemento de vídeo HTML (para mostrar um fluxo de vídeo de um dispositivo);
-
Inicialização do ZXing: crie o objeto decodificador - você pode escolher o modo: Código de barras, Código QR, PDF417, MultiFormat, ...;
-
Selecione a fonte de vídeo (pode ser uma das câmeras do dispositivo) - use o método do ZXing
listVideoInputDevicespara obter a lista de dispositivos disponíveis;
-
Inicie a busca e decodificação - usando
decodeFromVideoDevice;
O processo de análise e decodificação será repetido, se o formato for reconhecido corretamente, o callback "Escaneado" será chamado com o texto decodificado e o tipo de código {texto: 'Cadeia', formato: Número}.
Exemplo de controle
A melhor maneira de usar o ZXing em sua aplicação SAPUI5 é criar um controle personalizado com todos os elementos necessários.
Eu criei um exemplo desse projeto GitHub
Lá você pode encontrar o aplicativo de exemplo com o controle 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?