Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: integrando um App à Web API

React Native: integrando um App à Web API

Entendendo à integração com API - Apresentação

Olá! Eu sou o André Cunha, instrutor de Mobile, e te desejo boas-vindas a mais um curso de React Native!

Autodescrição: Sou um homem de pele parda, cabelo ondulado, castanho, escuro e curto, e olhos castanhos escuros também. Estou usando uma camiseta básica preta Ao fundo, há uma parede de madeira com iluminação azul clara.

Neste curso, você aprenderá a integrar uma aplicação mobile chamada Voll com uma Web API. Ao longo das aulas, aprenderemos a:

Para colocar tudo isso em prática, é esperado que você tenha feito, pelo menos, o curso anterior dessa formação. Nele, construímos do início a nossa aplicação mobile, com base em um design feito no Figma:

React Native: Construindo um App com Native-base

Também é esperado que você tenha feito o curso "React Native: utilizando Web API", porque focaremos bastante na prática no presente curso. Utilizaremos uma API que será fornecida para nós, feita em Node.js, e partiremos diretamente para a implementação da nossa aplicação.

Quer saber como faremos isso? Vem comigo!

Entendendo à integração com API - Conhecendo a API do projeto

Conforme comentado na introdução, nesse curso nós integraremos a versão mobile do nosso aplicativo Voll com uma Web API, realizando a troca de informação entre eles.

Para isso, na seção "Preparando o ambiente" desta aula, será fornecido para você o link para download do código da API que utilizaremos nas aulas. Na página do GitHub, você pode clicar no botão "Code" e baixar o arquivo ZIP ou fazer um Git clone na sua máquina.

Instalando e inicializando a API

Feito o download, precisamos instalar as dependências. Podemos fazer isso no VSCode ou apenas abrindo um terminal na pasta raiz do nosso projeto da API.

Com a pasta do projeto aberta no VSCode, abrimos o terminal e digitamos o comando:

npm install

Com isso, baixaremos todos os pacotes e dependências da API.

Após esse passo, não adentraremos o código da API, uma vez que nosso objetivo não é este. Como pessoas desenvolvedoras Mobile, não há necessidade de inspecionar o código desenvolvido por uma equipe especializada em Back-end para saber como proceder. Nós apenas utilizaremos essa API!

A pasta da API possui muitos arquivos. Para criar e inicializar o nosso banco de dados, precisaremos criar apenas um único arquivo. Você poderá notar o arquivo .env.example já existente na pasta, que possui o seguinte conteúdo:

DB_HOST="localhost"
DB_PORT=3306
DB_USER=root
DB_PASSWORD=suasenha
DB_DATABASE=testemed
SERVER_PORT=3000
SECRET=qualquercoisa
SECRET_KEY=criptografiaSenha

Faremos exatamente o mesmo que esse arquivo, mas sem o .example, apenas .env. Podemos apenas renomear esse arquivo pré-existente ou criar um novo arquivo e nomeá-lo como .env, que terá o mesmo conteúdo. Precisamos desse arquivo para fazer a nossa API funcionar!

No momento, vamos apenas renomear o arquivo existente conforme explicado e salvá-lo. Agora, temos a nossa API. Para executá-la, rodamos o seguinte comando no terminal:

npm start

Aguardamos uns instantes até ela ser executada. Temos o seguinte retorno:

Ou seja: nenhum erro foi encontrado e o servidor está rodando na porta 3000. Mas, e como testamos a nossa API?

Testando a API: Insomnia

Uma forma de testar é usando o próprio aplicativo. Mas, se pararmos para pensar, como o pessoal que desenvolveu essa API a testou?

Existem ferramentas específicas para testar uma Web API. A que utilizaremos nesse curso se chama Insomnia.

Link para baixar o aplicativo Insomnia na sua máquina. Disponível para Windows, Linux e MacOS.

Feito o download, teremos acesso a uma aplicação que permite nos comunicar com a nossa Web API e realizar as requisições. Se for a primeira vez que você abre o aplicativo do Insomnia, o diretório local provavelmente estará vazio, porque não possui nenhum projeto.

No caso do instrutor, por ter feito outras integrações com outras APIs, a página inicial exibe alguns cards de projetos. Mas, não tem problema se o seu aplicativo não exibir nada!

Agora, o que podemos fazer é criar um novo projeto no Insomnia, do zero. Mas, para facilitar o andamento do curso, deixamos disponível um arquivo JSON contendo todas as nossas rotas de teste para importar no Insomnia.

Então, clicamos no botão "Create > File" no canto superior direito do Insomnia. Isso abrirá o explorador de arquivos, em que procuraremos o arquivo voll.insomnia.json que acabamos de baixar. Damos um duplo clique no arquivo e ele será importado com sucesso.

Com isso, surgirá um novo card na página inicial do Insomnia chamado "Vollmed API". Clicando nele, uma nova página se abrirá. Na aba lateral esquerda, notaremos seis pastas:

Essas são as pastas que possuem os caminhos para nos comunicarmos com a nossa Web API.

Nesse curso, utilizaremos bastante as requisições referentes aos Pacientes, já que o aplicativo é do paciente. Então, clicando na pasta "Pacientes", serão exibidos vários arquivos. Cada arquivo desses indica, à sua esquerda, o tipo de requisição sendo feita para a Web API:

Temos o GET, o POST, o PUT, o DEL e o PTCH, que são diferentes tipos de requisição.

Para testar e verificar se nossa Web API está funcionando, vamos clicar no primeiro arquivo: Todos Pacientes. Com isso, a barra de texto na parte superior da tela, ao centro, será preenchida com:

GET localhost:3000/paciente

O número 3000 é a porta em que nossa API está rodando, e /pacientes é a rota para pegar todas as informações de pacientes salvas.

Na lateral direita dessa barra de texto temos o botão "Send" ("enviar"). Vamos clicar nele. Ao fazer isso, recebemos uma mensagem na aba direita da tela:

"Não encontramos pacientes!"

Como baixamos o projeto do zero, nosso banco de dados está limpo. É por isso que não temos nenhum paciente!

Mas, podemos testar criando um novo paciente. Para isso, clicamos no segundo arquivo: POST Cadastro Paciente. Notaremos que ele possui algumas informações (que poderemos mudar ao longo do nosso projeto):

{
    "cpf": "65147182055",
    "nome": "André",
    "email": "andre@email.com",
    "estaAtivo": true,
    "endereco": {
        "cep": 76541321,
        "rua": "Rua 9",
        "numero": 65,
        "complemento": "casa",
        "estado": "ES"
    }
    "senha": "1234",
    "telefone": 999999999,
    "possuiPlanoSaude": true,
    "planosSaude": [3, 2, 5],
    "imagem": "uma_bela_imagem.jpg"
}

Para o teste, apenas clicaremos no botão "Send". Com isso, receberemos do lado direito um preview com as mesmas informações, mas com alguns detalhes a mais:

{
    "cpf": "65147182055",
    "nome": "André",
    "email": "andre@email.com",
    "estaAtivo": true,
    "senha": "5ca5ce75..."
    "telefone": 999999999,
    "planosSaude": [
        "Amil",
        "Bradesco",
        "Biovida"
    ],
    "imagem": "uma_bela_imagem.jpg"
    "historico": null,
    "role": "PACIENTE"
    "possuiPlanoSaude": true,
    "endereco": {
        "cep": 76541321,
        "rua": "Rua 9",
        "numero": 65,
        "complemento": "casa",
        "estado": "ES"
        "id": "c99bd45a-cfbe..."
    }
    "id": "48f589b2...",
}

Surgiu um id, ou seja, um novo usuário foi criado com uma identificação única no sistema.

Se voltamos para o arquivo Todos Pacientes e dermos "Send" novamente, é retornado à direita um vetor com um único objeto, contendo as informações do paciente André, porque criamos apenas esse usuário.

Ou seja, a API conseguiu nos trazer informações do nosso banco de dados. Conferimos que a nossa Web API está funcionando e armazenando os dados!

Mas, onde está esse banco de dados?

Vamos voltar ao código da nossa Web API, no VSCode, para conferir um detalhe. Clicando na pasta "src", notaremos uma pasta chamada "database". Essa pasta contém um arquivo chamado database.sqlite.

O SQLite é um banco de dados local, que armazena todas as informações diretamente num arquivo. Se clicamos nesse arquivo, não conseguimos lê-lo. Precisamos de uma ferramenta específica para visualizar diretamente o dado salvo no banco de dados.

Mas, a título de curiosidade: se, por exemplo, você criou vários dados e quer deletar todos de uma vez, limpando o banco de dados, basta excluir o arquivo database.sqlite e rodar novamente a API com o comando npm start no terminal. Com isso será criado um novo banco de dados, limpo. Você poderá fazer novas requisições do zero!

Temos a nossa API rodando, a testamos com o Insomnia, e agora: como fazemos para integrar isso à nossa aplicação Mobile?

Veremos isso no próximo vídeo!

Entendendo à integração com API - Instalando o Axios

Nossa Web API já está rodando no computador! Usamos o aplicativo do Insomnia para realizar requisições para ela e testá-la. Conseguimos criar um usuário, novo paciente, e também retornar os pacientes cadastrados no nosso sistema.

Agora, precisamos fazer isso na nossa aplicação mobile, e existem várias formas de realizar essa comunicação. Poderíamos, por exemplo, utilizar o Fetch – nativo do JavaScript e funciona também no TypeScript.

Mas, nesse curso utilizaremos o Axios, uma biblioteca que facilita a comunicação para realizar requisições HTTP para uma Web API. Ela será bastante útil para nós, inclusive quando precisarmos tratar erros que podem acontecer quando fizermos alguma requisição.

Documentação do Axios para consulta.

Instalação do Axios

Para instalar essa biblioteca no nosso projeto da Voll mobile, rodaremos o seguinte comando no terminal do VSCode:

npm install axios

Aguardamos alguns instantes, até que a biblioteca seja instalada.

Conexão com a Web API

Feito isso, criaremos uma nova pasta dentro da pasta "src" chamada "servicos". Essa pasta conterá diversos arquivos referentes à comunicação com a nossa Web API.

O primeiro será a conexão direta. Então, criamos um novo arquivo dentro de "servicos" chamado api.ts, em que importaremos a nossa biblioteca do Axios:

api.ts

import axios from "axios";

Em seguida, criaremos uma variável chamada api que receberá axios.create(), uma função para podermos criar a conexão com a nossa Web API:

api.ts

const api = axios.create()

Vamos abrir chaves dentro dos parênteses e, dentro delas, escrever: baseURL: "". Entre as aspas, inserimos a URL da nossa Web API.

Antes, vamos reparar num detalhe: no Insomnia, a URL estava como "localhost:3000/" e, depois da barra, a rota em questão (de pacientes, no caso). Mas, não podemos usar o "localhost" no nosso projeto mobile, porque ele funciona para todas as aplicações rodando na máquina local. O emulador Android realmente emula um celular físico, que não está no computador, apesar de o acessarmos por ele.

Ou seja, a conexão com "localhost" não funcionará. Mas, já que esse celular emulado e o computador estão conectados na mesma rede de internet, precisamos encontrar o endereço IP desse computador e utilizá-lo para conectar com a nossa WebAPI.

Existem várias formas de encontrar o endereço IP do seu computador. No MacOS, nós clicamos no ícone de Wi-Fi na barra de tarefas e, em seguida, em "Ajustes de Wi-Fi". Nessa janela, clicamos na rede Wi-Fi em que estamos conectados e depois em "Ajustes de Rede...". Uma janela modal se abrirá exibindo as configurações de rede e, na parte inferior, o endereço IP da máquina. No computador do instrutor, a informação é a seguinte:

Endereço IP: 192.168.15.43

No Windows e no Linux, existem comandos que você pode rodar no terminal, como o ipconfig, que retornam o endereço IP da máquina.

Com esse endereço em mãos, voltamos ao código e, entre as aspas, escrevemos http:// e, depois da barra, colamos o endereço do nosso computador. Depois de um sinal de dois pontos, adicionamos também a porta em que a Web API está rodando (no caso, a porta 3000): http://192.168.15.43:3000.

Teremos, então:

api.ts

const api = axios.create({
  baseURL: "http://192.168.15.43:3000"
})

Agora, dentro da nossa variável api, temos a conexão com a nossa Web API.

Por fim, precisamos apenas exportar essa variável. Escrevemos ao final do código:

api.ts

export default api;

Temos um arquivo que se comunica diretamente com a nossa Web API!

Para testar essa conexão e verificar seu funcionamento, podemos, por exemplo, já integrá-la com a tela de login. Assim, podemos conferir se aquele usuário que criamos com o Insomnia permite o login direto na aplicação mobile.

Faremos esse teste no próximo vídeo. Até lá!

Sobre o curso React Native: integrando um App à Web API

O curso React Native: integrando um App à Web API possui 141 minutos de vídeos, em um total de 49 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React Native acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas