115 lines
4.4 KiB
Markdown
115 lines
4.4 KiB
Markdown
|
---
|
|||
|
|
title: iOS - Como utilizar os componentes Leitura de código de barras e QR Code?
|
|||
|
|
source: https://tdn.totvs.com/pages/viewpage.action?pageId=559498224
|
|||
|
|
path: \Plataforma Documentação técnica\Configuração\Mobile\iOS\iOS - Como utilizar os componentes Leitura de código de barras e QR Code.md
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Índice
|
|||
|
|
|
|||
|
|
- 1 [Objetivo](#iOSComoutilizaroscomponentesLeituradecódigodebarraseQRCode?-Objetivo)
|
|||
|
|
- 1.1 [Criando um formulário](#iOSComoutilizaroscomponentesLeituradecódigodebarraseQRCode?-Criandoumformulário)
|
|||
|
|
- 1.2 [Funcionamento do componente](#iOSComoutilizaroscomponentesLeituradecódigodebarraseQRCode?-Funcionamentodocomponente)
|
|||
|
|
- 1.3 [Confira na prática](#iOSComoutilizaroscomponentesLeituradecódigodebarraseQRCode?-Confiranaprática)
|
|||
|
|
- 1.3.1 [Exemplo de uso](#iOSComoutilizaroscomponentesLeituradecódigodebarraseQRCode?-Exemplodeuso)
|
|||
|
|
|
|||
|
|
## Objetivo
|
|||
|
|
|
|||
|
|
O objetivo deste guia é orientar o usuário a como utilizar os componentes Leitura de código de barras e o componente de leitura de QR Code em um formulário de workflow no My Fluig, bem como suas configurações e uso.
|
|||
|
|
|
|||
|
|
O componente de **leitura de código de barras** possui suporte as codificações 128C / GS1-128 / UCC/EAN-128 e EAN-13. E pode ser implementado ao formulário através do Fluig Studio.
|
|||
|
|
|
|||
|
|
Os passos e métodos abaixo podem ser usados tanto na implementação do componente de leitura de código de barras quanto para o componente de leitura de QR Code.
|
|||
|
|
|
|||
|
|
### Criando um formulário
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**01.** O primeiro passo será criar um formulário via fluig Studio, para isso basta seguir atentamente os passos das documentações [Fluig Studio](../../../Instalação e Atualização/Guia de instalação Fluig Studio.md) e [Desenvolvimento de formulários](../../../Recurso de Documentos (ECM)/Desenvolvimento de Formulários.md).
|
|||
|
|
|
|||
|
|
Pode ser interessante fazer a leitura das documentações [Configuração para uso inicial](../../../Desenvolvimento sobre a plataforma/Fluig Studio/Configuração para uso inicial do Fluig Studio.md)
|
|||
|
|
|
|||
|
|
[do Fluig Studio](../../../Desenvolvimento sobre a plataforma/Fluig Studio/Configuração para uso inicial do Fluig Studio.md) e [Guia de atualização Fluig Studio](../../../Instalação e Atualização/Guia de atualização Fluig Studio.md) para garantir seu correto funcionamento e garantir uma boa experiência.
|
|||
|
|
|
|||
|
|
**02.** Implementar o componente Leitura de código de barras ou o componente de leitura de QR Code no desenvolvimento do formulário.
|
|||
|
|
|
|||
|
|
### Funcionamento do componente
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
O componente de leitura do código de barras se baseia em **2 métodos** que devem ser incluídos dentro de uma tag **<script>** no formulário a ser usado.
|
|||
|
|
|
|||
|
|
- Esta função é interceptada nativamente pelo aplicativo e inicia a captura do código de barras via câmera.
|
|||
|
|
|
|||
|
|
**Método 1**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
function showBarcodeReader() {
|
|||
|
|
JSInterface.showBarcodeReader();
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
- Esta função é chamada pelo aplicativo para devolver para o formulário o valor lido pela câmera
|
|||
|
|
|
|||
|
|
**Método 2**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
function barCodeCallback(code) {
|
|||
|
|
// Lógica para utilização do código recebido
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Confira na prática
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- Assim que a câmera lê o código de barras o valor correspondente ao código é enviado ao *input* do campo do formulário em questão.
|
|||
|
|
|
|||
|
|
[
|
|||
|
|
Your browser does not support the HTML5 video element
|
|||
|
|
](/download/attachments/559498224/WhatsApp Video 2024-04-17 at 11.34.39.mp4)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
- Assim que a câmera lê o código de barras o valor correspondente ao código é enviado ao *input* do campo do formulário em questão.
|
|||
|
|
|
|||
|
|
[
|
|||
|
|
Your browser does not support the HTML5 video element
|
|||
|
|
](/download/attachments/559498224/Leitor de QRCode 1 FUNDO BRANCO.mp4)
|
|||
|
|
|
|||
|
|
#### Exemplo de uso
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
O exemplo abaixo pode ser utilizado para a implementação do componente de código de barras, quanto o componente de leitura de QR Code.
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<div class="form-input">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>Produto</label>
|
|||
|
|
<input type="text" class="form-control" name="textbox1" value="" placeholder="Toque aqui para ler o código de barra" data-size="big" onclick="readProduct(this)">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var campo = "";
|
|||
|
|
|
|||
|
|
function readProduct( mobj ) {
|
|||
|
|
campo = mobj;
|
|||
|
|
showBarcodeReader();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function showBarcodeReader() {
|
|||
|
|
JSInterface.showBarcodeReader();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function barCodeCallback(code) {
|
|||
|
|
// Lógica para utilização do código recebido
|
|||
|
|
campo.value = code;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
```
|