Integrando a API do Google Cloud Vision com o React Native Expo | Detecção de Objetos | Tutorial e Demonstração
Índice
- Introdução
- Configurando o Projeto
- Utilizando a API do Google Cloud Vision
- Criando as Funções
- Obtendo a Chave de API
- Convertendo a Imagem
- Enviando a Requisição
- Analisando o Resultado
- Testando o Projeto
- Conclusão
Introdução
Olá pessoal! Meu nome é Rohit, e seja bem-vindo a mais um vídeo sobre o React Native Expo. Há alguns dias, uma desenvolvedora me enviou uma mensagem no Instagram. Ela estava tentando integrar a API do Google Cloud Vision com o React Native Expo, mas estava enfrentando alguns problemas. Por isso, estou aqui. Você pode ver a demonstração do projeto diretamente na sua tela. O projeto é bastante interessante, então, sem perder tempo, vamos começar!
Configurando o Projeto
Primeiro, vamos inicializar um novo projeto no Expo. Selecione o template em branco, dê um nome para a aplicação e continue para baixar as dependências. Neste projeto, vamos instalar três dependências externas: Expo Image Picker, Axios e Expo File System. Então, instale-as uma por uma. Você também pode ver isso na tela.
Você vai notar que estamos trabalhando com as versões mais recentes dessas dependências. É uma boa prática criar uma pasta separada e eu vou chamá-la de "source". Dentro desta pasta, crie um arquivo "index.js". É nele que escreveremos o código para a API do Vision.
Primeiro, importe todos os componentes necessários das dependências. Em seguida, importe o componente "DetectObject" para o arquivo "App.js". Agora, execute o aplicativo para verificar se tudo está funcionando corretamente. Perfeito! Agora vamos para o arquivo "index.js" e continuar escrevendo o código para a API do Vision.
Utilizando a API do Google Cloud Vision
Primeiro, temos um componente de função chamado "DetectObject". Ele possui alguns estados que são como variáveis para armazenar dados em nosso aplicativo. Um estado chamado "imageUri" irá armazenar o URI da imagem selecionada e o outro chamado "labels" irá armazenar as etiquetas dos objetos analisados.
Começamos implementando duas funções essenciais: "pickImage" e "analyzeImage". A função "pickImage" nos permite escolher uma imagem da galeria do nosso telefone, enquanto a função "analyzeImage" irá enviar essa imagem para a API do Google Cloud Vision para análise.
Na função "pickImage", usamos a biblioteca "ImagePicker" para abrir a nossa galeria e selecionar uma imagem. Quando temos a imagem, salvamos seu URI no estado "imageUri".
Uma coisa que esqueci é adicionar um plugin no arquivo app.json. Se você verificar a documentação oficial do Expo Image Picker, verá claramente o uso desse plugin no arquivo app.json. Então, simplesmente copie e cole isso no arquivo app.json.
Agora, a função "analyzeImage" faz a verdadeira mágica! Primeiro, verifica se temos uma imagem selecionada; caso contrário, nos lembra de escolher uma. Depois disso, precisamos de uma chave de API do Google Cloud Vision - é como um código secreto que nos permite usar a API.
Criando as Funções
Agora, vamos ler o arquivo de imagem do "imageUri" e convertê-lo para um formato chamado "base64". É apenas uma maneira diferente de representar a imagem em código.
Em seguida, criamos um objeto de dados de requisição que contém a imagem e o tipo de análise que queremos. Aqui, estamos usando "LABEL_DETECTION" para identificar objetos na imagem e pedimos no máximo 5 resultados.
Com todos os nossos dados prontos, os enviamos para a API do Google Cloud Vision usando a biblioteca "axios" - é como um mensageiro que entrega a nossa solicitação. Em seguida, recebemos os dados analisados e atualizamos o estado "labels" com os resultados.
No comando de retorno, temos um componente "View", que é como um contêiner que mantém tudo em nosso aplicativo. Dentro dele, temos um componente "Text" que exibe o título "Google Cloud Vision API Demo". Em seguida, temos uma declaração condicional. Isso significa que, se tivermos um "imageUri" (ou seja, se uma imagem for selecionada), ele exibirá um componente "Image" mostrando a imagem selecionada.
Abaixo disso, temos um componente "TouchableOpacity", que é como um botão clicável, com o texto "Escolha uma imagem...". Quando clicamos nele, ele chamará a função "pickImage" que explicamos anteriormente. Ao lado dele, temos outro componente "TouchableOpacity", desta vez com o texto "Analise a imagem.". Quando clicamos neste botão, ele disparará a função "analyzeImage" para analisar a imagem selecionada.
Por último, temos outra declaração condicional usando "{labels.length > 0 && ...}". Se tivermos algum "label" (ou seja, os resultados analisados), ele exibirá uma lista de componentes "Text" mostrando cada etiqueta.
Obtendo a Chave de API
Agora, vamos obter a chave de API do Google Cloud Vision. Acesse a Google Cloud Platform. No canto superior direito, clique na opção "console". Em seguida, clique no painel de controle.
Agora, vamos criar um novo projeto. No canto superior esquerdo, clique no ícone de seleção do projeto e clique em "Novo projeto". Em seguida, dê um nome ao seu projeto. Aqui, estou nomeando-o de "google vision test". Depois disso, clique em "Criar".
Aguarde alguns segundos. A Google Cloud Platform requer uma conexão de internet de Alta velocidade e minha internet está lenta. Após alguns segundos, o painel de controle do novo projeto será aberto automaticamente. Se não abrir, selecione o projeto na barra de notificações.
No lado esquerdo, clique em "APIs e serviços" e aguarde alguns segundos. Em seguida, clique em "Biblioteca". Role para baixo e clique em Cloud Vision API. Uma nova tela será aberta e você só precisa habilitar a Cloud Vision API aqui.
Espere alguns segundos e você verá o painel de controle de suas APIs e serviços. Em seguida, clique na opção de credenciais no lado esquerdo da tela. Depois, clique em "Criar credenciais" e em seguida, clique em "Chave da API".
Copie e cole esta chave da API em seu projeto. Não use minha chave, pois vou desativar este projeto após a gravação.
Convertendo a Imagem
Em seguida, lemos o arquivo de imagem do "imageUri" e o convertemos para um formato chamado "base64". É apenas uma maneira diferente de representar a imagem em código.
Enviando a Requisição
Agora, criamos um objeto de dados de requisição que contém a imagem e o tipo de análise que queremos. Aqui, estamos usando "LABEL_DETECTION" para identificar objetos na imagem e pedimos no máximo 5 resultados.
Com todos os nossos dados prontos, os enviamos para a API do Google Cloud Vision usando a biblioteca "axios" - é como um mensageiro que entrega a nossa solicitação.
Analisando o Resultado
Recebemos os dados analisados da API do Google Cloud Vision e atualizamos o estado "labels" com os resultados.
Na declaração de retorno, temos um componente "View", que é como um contêiner que mantém tudo em nosso aplicativo. Dentro dele, temos um componente "Text" que exibe o título "Google Cloud Vision API Demo".
Testando o Projeto
Agora é hora de testar nosso projeto! Vou selecionar uma imagem da galeria e vou analisá-la usando a API de visão.
Mas espere, quando clico no botão "Analisar Imagem", recebo uma mensagem de erro 403. Mas não cometemos nenhum erro, certo? Basicamente, o sistema exibe o erro "403 Proibido" quando você tenta acessar uma API sem ter permissão para realizar as ações necessárias pela API. Por exemplo, se você quiser criar uma Ordem de Trabalho, mas não tiver permissão para fazer isso, o sistema exibirá esse erro.
O que você quer dizer com "não tenho permissão para acessar a API"? A propósito, usei um Gmail diferente para a demonstração deste projeto. A partir da outra conta do Google Cloud, gerei outra chave de API e está funcionando muito bem. Você também pode ver isso na tela.
Às vezes, as alterações nas chaves de API ou permissões podem levar algum tempo para se propagar. Se você fez alterações recentemente em sua chave de API ou configurações da conta, aguarde alguns minutos e tente novamente.
Então é isso para este vídeo. Você pode ver que nosso projeto está funcionando bem e você está livre para usar e modificar o código de acordo com suas preferências e requisitos. Clique no botão de inscrição se este vídeo acrescentou algum valor. Vejo você no próximo vídeo sobre o React Native Expo! Até lá, feliz codificação!!
Conclusão
Neste vídeo, aprendemos como integrar a API do Google Cloud Vision com o React Native Expo. Configuramos o projeto, implementamos as funções necessárias, obtivemos uma chave de API, convertemos e enviamos a imagem para análise e analisamos os resultados. Agora você está pronto para usar essa integração em seus próprios projetos e aproveitar os recursos poderosos da API do Google Cloud Vision.