Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

React Native + Express: Criando um APP que extrai textos de fotos – Parte 2

 

Seja bem vindo(a) a segunda parte do artigo “como criar um APP Mobile (usando React Native + Express + Tesseract.js) que vai utilizar OCR para extração de textos de fotos tiradas com o APP“.

Na primeira parte nós desenvolvemos a API usando Express que recebe uma imagem como parâmetro e devolve os textos presentes nela via Json, nesta parte nós desenvolveremos um aplicativo com React Native que se irá se conectar a API para converter as frases das fotografias tiradas.

Caso você ainda não tenha concluída a parte 1, siga este tuturial antes de prosseguir, caso já tenha feito, venha com a gente finalizar esse APP incrível 😁

Obs: Já deixa um comentário e compartilha esse artigo se você estiver gostando desta série 💪

 

Nossas ferramentas

 

Para facilitar a criação do nosso App mobile com React Native nós vamos utilizar uma ferramenta chamada expo, com ela nós não precisaremos instalar o android studio para criar APPs para o android ou o xcode para criar APPs para o IOS como é de costume no React Native.

Além disso ela possui um APP mobile para que nós possamos testar facilmente os APPs desenvolvidos com ela, basta subir o servidor, apontar o APP para o QR Code apresentado e ver tudo funcionando.

Antes de prosseguir, baixe o APP do expo na Play Store ou Apple Store no seu mobile.

 

Preparando o Projeto

Vamos instalar o Expo, gerar um novo projeto utilizando ele e ver tudo funcionando no nosso mobile.

 

1 – Instale o react native rodando:

  • Este comando adiciona ao terminal (ou powershell) a CLI do expo (Command Line Interface ou interface de linha de comandos) desta forma poderemos chamar o comando expo no terminal.

2 – Crie o projeto rodando:

  • Ao rodar expo init o expo cria um projeto básico.

3 – Entre na pasta do projeto:

4 – Apenas para testarmos, coloque no App.js:

5 – Suba o projeto rodando:

6 – O expo vai abrir o projeto no browser e te dar um QR code, usando o APP dele, escaneie o código e veja o APP no seu mobile:

 

7 – Pronto, projeto criado, agora podemos seguir o desenvolvimento o/

 

 

Adicionando o componente da câmera

Para usar a câmera em nosso projeto, usaremos o component de câmera do expo, nesta parte vamos instalar ele e configurar o uso no nosso APP.

 

1 – Instale o component rodando:

2 – Para vermos o component em funcionamento vamos integrar ele no nosso App.js e permitir que o nosso APP mostre a câmera do celular, coloque no arquivo App.js:

  • Primeiro incluímos as dependências:
    – import { Camera } from ‘expo-camera’ : O component de camera que nos permiti tirar fotografias
    – import * as Permissions from ‘expo-permissions’ : Para solicitarmos a permissão na hora de usar a câmera
    – import { Ionicons} from ‘@expo/vector-icons’ : O Ionicons para utilizarmos os ícones no nosso APP (no caso o do botão da câmera)
  • Depois adicionamos no state o hasCameraPermission e o type, o primeiro para mostrar a tela da câmera apenas se tivermos a permissão e o segundo para selecionar a câmera da frente ou de trás
  • No componentDidMount solicitamos as permissões quando o APP inicia.
  • No takePicture tiramos a foto (quando o botão é clicado) e transformamos em base 64 (versão em caracteres da imagem)

3 – Suba o servidor:

4 – Acesso o APP pelo seu mobile como fizemos anteriormente (se necessário atualize a exibição do APP), você deve ver:

5 – Pronto, já realizamos a integração com a câmera.

 

 

Iniciando o Ngrok

Para que nosso APP consiga se conectar a API precisamos usar o ngrok que nos fornecerá um link público de acesso a nossa aplicação local, ao realizar esta seção será necessário o código desenvolvido na parte 1.

 

1 – Instale o Ngrok.

//Ubuntu

//Windows

2 – Em outro terminal entre no projeto da API

3 – Suba o projeto rodando:

4 – Em um outro novo terminal, inicie o ngrok:

// Ubuntu

// Windows

5 – Copie e guarde a url HTTPS que o ngrok fornecer (usaremos em breve):

6 – Pronto, agora nossa API já está disponível.

 

 

Conectando à API

Agora iremos conectar à API que criamos na parte 1 do artigo com o nosso APP React Native (expo):

 

1 – Instale o axios ao nosso cliente React Native:

2 – Crie a pasta “api”, nela colocaremos os arquivos relacionados a nossa api:

3 – Crie o arquivo api/ocr.js com o seguinte código:

  • Para enviar imagens através de uma api usando “form-data” precisamos criar um objeto contento o corpo dos dados a serem enviados, a função createFormData realiza essa função, recebendo o dado da foto e transformando isso em um objeto FormData.

4 – Substitua api_url pela url fornecida pelo ngrok.

 

Extraindo textos da imagem

Nosso APP já consegue tirar fotos e se conectar a API criada, agora adicionaremos a interação entre a interface e a API.

 

1 – Altere o arquivo App.js para o seguinte conteúdo:

  • Na função takePicture perceba que adicionamos um await tanto para a ação de tirar a foto quanto para o envio da foto a nossa api ao chamar a função handleUpload, isso é necessário porque uma requisição não é algo instantâneo, se não colocarmos o await as variáveis conteriam apenas <Promise pending>.

 

Incluindo um ícone de loading

Para melhorar a experiencia do usuário no nosso pequeno APP vamos adicionar um spinner que vai ficar rodando enquanto a foto é processada pela nossa API Express.

 

1 – Instale a biblioteca rodando:

 

2 – Altere o App.js para o seguinte conteúdo:

 

Testando o Projeto

 

1 – Suba o servidor:

2 – Acesse o APP no seu mobile (como anteriormente) e tire uma foto de algum texto curto (em um papel, parede, exceto tela do pc):

  • A iluminação, posição e etc vão influenciar na qualidade da extração do texto.
  • Não ficou perfeito mas conseguiu extrair os textos presentes 😁

3 – Pronto, nosso APP está totalmente funcional, parabéns por chegar até aqui o/

obs: Caso você tenha algum problema com o tamanho do arquivo, você pode configurar isto no arquivo config/storage.js da API.

 

Conclusão

Nesse artigo nós criamos um APP com React Native (expo) que consumiu uma API construída com Express e Tesseract (OCR), conseguimos finalizar nosso APP que tira fotos e extrai os textos com sucesso 😁

É possível fazer melhorias na extração dos textos através de uma configuração mais precisa do Tesseract e da imagem que está sendo enviada para a API, vale a pena pesquisar um pouco e melhorar o APP.

Se você gostou deste tutorial deixe um comentário (para que nós possamos criar mais) e compartilha ele com seus amigos e nos seus grupos de programação, muito obrigado por estar com a gente.

 

Grande abraço

Computer Engineer from Universidade Estadual do Maranhão - Brazil. Developed and contributed on multiple researches and projects on the fields: cloud computing, WebGIS, robotics, 3d printing, computer graphics, internet of things, user mobility in mobile communications, numerical methods, fuzzy logic, channel mobile radio, software engineering.

6
Deixe um comentário

avatar
2 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Leonardo ScorzagustavoiMarcio Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Marcio
Visitante
Marcio

Bem legal e bem didático.

Leonardo Scorza

Muito obrigado Marcio 🙂

gustavoi
Visitante
gustavoi

Bom seria se tivesse algum tipo de opção onde tivesse exemplo: 500 imagens cadastrada numa DB, ai tirariamos a foto, ele rastreava essa foto na db, e dizia o resultado com uma tag ou um texto do titulo da imagem

Leonardo Scorza

Dá pra fazer também 🙂

gustavoi
Visitante
gustavoi

como ?

Leonardo Scorza

Usando o Google Vision por exemplo: https://cloud.google.com/vision/