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





0 0 vote
Article Rating
janeiro 17, 2020
Subscribe
Notify of
guest
13 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Marcio
Marcio
1 ano atrás

Bem legal e bem didático.

Leonardo Scorza
1 ano atrás
Reply to  Marcio

Muito obrigado Marcio 🙂

gustavoi
gustavoi
1 ano atrás

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
1 ano atrás
Reply to  gustavoi

Dá pra fazer também 🙂

gustavoi
gustavoi
1 ano atrás

como ?

Leonardo Scorza
1 ano atrás
Reply to  gustavoi

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

Joao
Joao
7 meses atrás

Muito bom, ta de parabéns, seria possível adaptar par o próprio app ler as respostas de um gabarito ?

Leonardo Scorza
7 meses atrás
Reply to  Joao

Obrigado João 🙂
É possível fazer isso, mas você precisa de um esforço relativamente maior.

Gabriela Teixeira
Gabriela Teixeira
7 meses atrás

Não consigo abrir o aplicativo no celular. Utilizei um Qr code normal teria que instalar algum app específico?

Gabriela Teixeira
Gabriela Teixeira
7 meses atrás

Consegui iniciar o aplicativo, porém aparece um erro de “Possible Unhabdled Promise Rejection (id:0): TypeError: undefined is not an object (evaluating ‘text.data.trim’)”. Algume pode me ajudar ?

Leonardo Scorza
7 meses atrás

Olá Gabriela, tudo bem?
Pelo erro, parece que o software não está conseguindo extrair o texto da imagem (por isto está retornando null)
Na parte (text.data.trim) tente deixar apenas (text) para verificar o retorno.

Gabriela Teixeira
Gabriela Teixeira
4 meses atrás

Teria como utilizar ocr sem utilização de servidor, fazer totalmente local no celular? Alguma dica pra extrair texto utilizando recursos que podem ficar totalmente internos no celular?

Carolina
Carolina
3 meses atrás

Boa noite,

Existe a possibilidade de fazer o app totalmente independente de servidor? Apenas com aplicação mobile?

Obrigada.

Feito com s2 por OneBitCode
13
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: