React: integrando seu projeto React com APIs

Aquela sobre o AlFood - Apresentação

Vamos trabalhar na Alfood, olha a missão que temos para hoje, se você decidir aceitá-la. Vamos pegar um site que é estático, não tem nenhum dinamismo, ele tem uma listagem seca. Então, olha o que ele faz.

Ele tem uma página inicial e ele diz uma lista de restaurante e, para cada restaurante, ele tem uma lista de pratos. Tem mais alguns outros, um restaurante chamado Agarikov e os pratos cadastrados, alguns restaurantes sem pratos.

E o estado inicial não tem nada preparado para aumentar esse número de pratos do restaurante. Então, ele estava estático no código, direto no código, direto na fonte. Ele tinha um array no componente no React.

E o que vamos fazer para poder transformar o site em algo mais dinâmico é trabalhar na área administrativa. Vamos remover toda a parte estática e dizer para o usuário como ele pode fazer para cadastrar novos restaurantes ou remover algum restaurante antigo e vamos dar para ele uma rotina de administração, ou seja, uma área administrativa.

Ele cadastra um restaurante e, automaticamente, aparece na vitrine do site. E como fazemos isso? Vamos colocar para rodar uma API que ela fica rodando, no nosso caso, num ambiente de desenvolvimento na porta 8000.

Então, é uma API pronta que está com o container do DOC que nós subimos para colocar ela para funcionar e temos todos os mecanismos, todos os endpoints necessários para produzir essa área administrativa.

O que temos pela frente? Olhando no código, eu vou soltar um monte de spoiler. No nosso VS Code, vamos ter uma instância do Axios, por exemplo. O Axios vai ser a biblioteca que vamos utilizar para fazer essas requisições.

E o que vamos fazer com essa Lib mega conhecida e mega poderosa? Por exemplo, na administração de pratos, vamos ter um formulário que vamos ter que manipular uma imagem, pegar um input de imagem para enviar para o backend.

Vamos ter que listar restaurantes, enfim, vamos o tempo todo fazer coisas do tipo .get ou .post, também um ponto .delete. Então, vamos fazer várias operações HTTP utilizando o Axios.

Qual é a missão para hoje? Transformar um site, que antes era estático, num CMS, numa área administrativa. E vamos eliminar a necessidade de ter uma pessoa desenvolvedora atualizando ele.

Nós entregamos par ao usuário uma funcionalidade bem completa, onde ele pode pegar ele mesmo e cadastrar novos restaurantes e cadastrar novos pratos. Vamos fazer isso? Vem comigo!

Aquela sobre o AlFood - Iniciando o projeto

Vamos trabalhar no Alfood, essa aplicação que é bonita, porém, hoje ela está estática, ela não tem conteúdo dinâmico. Ou seja, está tudo hard code, que falamos, ou seja, foi feito na unha, na mão, na força e na raça.

No meu caso, eu já fiz o download do projeto, está na minha área de trabalho, na pasta "alfood", eu vou abrir o terminal, vou entrar na pasta e vou colocar o projeto para rodar.

Abri o terminal, entrei no meu Desktop, entrei na pasta do Alfood, vou abrir o VS Code nessa pasta. Eu fiz pelo terminal, mas você pode fazer pela interface, também, e fazer o “OPEN FOLDER”, o "abrir pasta", clicando na opção “File” na barra de ferramentas superior.

Vou voltar para o terminal e vou pedir para o npm instalar para mim as dependências desse projeto. Isso, às vezes, demora. Não tem problema, uma hora ele vai terminar. Quando ele terminar, você está pronto para executar a aplicação.

E o comando para executar essa aplicação é npm start. Ele vai preparar o React e vai subir a aplicação. Vou abrir o meu navegador e vou acessar localhost:3000. E aparece no navegador a aplicação, o site do Alfood.

Repara que ele tem um banner bonito no começo, fala um pouco fazendo uma chamada para ser parceiro, tem um telefone, tem uns cards falando de “café da manhã”, “almoço”, “jantar”, “sobremesa”, “conheça os melhores restaurantes”, “clique aqui”.

Vou clicar e o link me levou para a página de restaurante. Tem as sessões Lyllys Café, Sugiro Sushi, Cantina da Escola e cada restaurante tem uma lista de pratos. O prato tem que ter uma imagem, um título, uma tag de categoria e uma pequena descrição.

É isso que temos para trabalhar hoje. Agora, vamos por debaixo dos panos, under the hood, vamos dar uma olhada e ver o que tem de código pronto para nós. Voltando no VS Code, no arquivo "App.tsx", onde está definindo duas rotas que acabamos de acessar.

A Home, que fala um pouco do Alfood e o que tem disponível, que tem desde Café da Manhã até Sobremesa, e a lista de Restaurantes em si, que tem os restaurantes cadastrados e os pratos disponíveis.

O que mais temos? Vamos dar uma olhada na Home pelo VS Code, o que mais ela tem? No código está a estrutura, repara: tenho a <NavBar />, tenho <Banner />, tenho bastante HTML, nada de muita novidade para nós.

O que mais temos? VitrineRestaurantes, vamos dar uma olhada nesse componente, também. Ele está bem bacana, <NavBar />, <Banner />, <ListaRestaurantes />, <Rodapé />.

Vamos dar uma olhada no <ListaRestaurantes />, que está dentro de VitrineRestaurantes. Entrei. Repara onde está a parte estática do site: ele tem uma lista de restaurantes feita na mão, um JSON com todos os restaurantes.

Temos o Lillys Cafe, temos o Sugiro Sushi, o que mais temos? Cantina da Escola. Então, se hoje entrasse outro restaurante, teria que uma pessoa desenvolvedora baixasse o projeto, clonasse ele, colocasse para rodar e vir nessa parte do código e começar a criar o restaurante novo.

E quais são os campos que o restaurante tem? Ele tem o ID, então, o desenvolvedor teria que vir abaixo e criar id: 4 e, sucessivamente, continuar as demais propriedades.

Teria que ter o nome, vamos cadastrar um bonito, vou chamar de nome: “Café Itália” e embaixo teria que ter uma lista de pratos, também. Vamos deixar essa lista vazia.

Teria que ser mais ou menos assim, se salvarmos e voltarmos na listagem pelo navegador, o Café Itália deve aparecer no final. E podemos copiar no código, na cara dura, um prato de um restaurante qualquer.

Vou copiar o “Combinado de 8 peças” e vou colar dentro de pratos do ”Café Itália” só para aparecer alguma coisa na Home do navegador. Copiei e colei e no navegador aparece o Combinado de 8 peças.

Repara que seria um trabalho mega braçal ficar criando um monte pratos e restaurantes na mão. Imagina a trabalheira fazer isso só para poder cadastrar um prato ou um restaurante novo.

E o inverso, também. Para remover ou editar alguma coisa, teríamos que ter uma pessoa desenvolvedora disponível só para isso. E não é bem isso que queremos, o que queremos é plugar essa aplicação numa API e o usuário vai poder cadastrar restaurantes, editar, excluir, fazer todas as operações tanto com os restaurantes, tanto com os pratos de cada restaurante.

É isso que iremos fazer, tem bastante coisa pela frente e, então, vamos começar analisando a API. No próximo vídeo vamos colocar a API para rodar e ver o que tem disponível para começarmos a usar e a trazer dinamismo para essa aplicação. Eu te espero lá!

Aquela sobre o AlFood - Iniciando a API

Acesso à documentação do axios: github.com/axios/axios

Acesso à API : restaurantes_api-master ou baixe diretamente aqui

Já temos a aplicação base rodando, já funcionando, já está bonita, está preparada para receber as nossas alterações, vamos dar uma olhada para vermos o que temos na API.

Vou abrir na minha área de trabalho, eu já fiz o download dessa API, o arquivo "restaurantes_api-master", já fiz o download, vamos colocar para rodar. Vou voltar no terminal, vou pedir uma aba nova, vou entrar no Desktop novamente e vai ter o arquivo "restaurantes_api-master".

Sem mistério nenhum, precisamos ter o Docker instalado e rodando na máquina e rodar dois comandos. O primeiro deles é o docker-compose build; esse primeiro comando pode demorar um pouco mais.

Ele vai baixar as imagens do Docker que ele precisa, vai configurar todo o container da nossa aplicação e, quando eu terminar, ele vai estar disponível para fazermos um docker-compose up.

Ou seja, é pegar a máquina, o container que ele preparou e colocar, de fato, para rodar. Isso pode demorar um pouco, no meu caso foi rápido porque eu já tinha feito antes para deixar rápido na hora da gravação do vídeo.

E o que eu vou fazer agora é um docker-compose up. Já fiz o build, já construí o que precisava e agora vou colocar ele para rodar. Já está rodando; como eu sei que está funcionando?

Eu vou acessar o navegador na porta 8000, porque o código está me indicando que ele está ouvindo na porta 8000. Então, digito na barra de pesquisa do navegador "localhost: 8000".

Em "localhost: 8000" está toda a documentação da API que está disponível para nós. Se repararmos tem dois grandes blocos, o primeiro, que é onde vamos começar a utilizar, é a parte de pratos, restaurantes e pratos de um restaurante específico. De início, é o que vamos precisar.

Se fizermos uma simulação, vou expandir a parte de pratos, vou pedir um try it out clicando no botão na parte superior direita da tela, porque eu quero experimentar e vou clicar no botão “Execute”, para ele executar para mim.

Esse comando já me diz tudo o que tem disponível em relação aos pratos. Me diz quantos são, me diz um link para a próxima página, ou seja, a lista está paginada e me traz os resultados dos pratos.

A mesma coisa para os restaurantes, vamos experimentar? No /v1/restaurante/ eu posso fazer um try it out clicando no botão e depois clicar em "Execute".

A resposta me diz que ele fez um GET na URL e o resultado é que tem 10 restaurantes cadastrados, a next tem um link já para a próxima página, o link para a página anterior é null, ou seja, ela não existe porque eu estou na página 1 e me dá o results que é um array de restaurante.

O que temos que fazer é de alguma forma conectar o React com essa API. Vamos fazer isso? Para começar a fazer e começar a desenvolver essa lista de restaurante, vamos para o VS Code, vou abrir o terminal dentro do VS Code e vou pedir para o npm install instalar para mim, se você for preguiçoso igual mim, você pode usar npm i e ele já até me sugeriu o que eu queria, que é instalar o Axios. Eu quero instalar, nessa aplicação, o Axios.

Enquanto ele vai instalando, vamos dar uma olhada no que o Axios faz. Vou no meu navegador, vou abrir uma aba nova e vou pesquisar “axios” no google e vou pegar a documentação do Axios.

Repare que a documentação do axios está no GitHub "github.com/axios/axios" e está toda a documentação dela, tudo que o Axios tem de poderoso, que é uma biblioteca muito utilizada para se fazer requisições desse tipo, de fazer requisições à APIs.

E o que queremos, basicamente, é um exemplo de como obter esses dados. Repara que a própria documentação da API nos diz o que temos que fazer, ou seja, temos que fazer um GET dos pratos, um GET dos restaurantes.

Olhando a documentação na parte de requisição de GET, logo nos primeiros exemplos já diz como fazemos para trabalhar com Axios. Pegamos o Axios, por favor .get, ou seja, por favor, obtenha para mim. Neste caso do exemplo está pedindo o user, no nosso caso vamos pedir a lista de restaurantes no "http://localhost:8000/api/v1/restaurantes/".

E ele vai trabalhar com promessas, ou seja, uma requisição desse tipo é assíncrona. Ela pode levar 1 segundo, meio segundo, 0.1 segundo, então, isso depende da velocidade da internet, da carga que o servidor está recebendo. Então, isso varia.

E pior, ela pode falhar. Então, o Axios vai nos entregar uma promessa de que aquela requisição vai ser feita. Falamos assim “Axios, obtenha a lista de restaurantes para mim”, ele vai falar “Ok, vou tentar. Se der certo, eu aviso. Se der errado, eu te comunico”.

Como fazemos para fazer esse "Se der certo", "Se der errado"? No caso do JavaScript, trabalhando com promessas nós vamos ter um .then, ou seja, no caso de sucesso, vamos ter acesso à resposta do servidor. E o .catch se der errado, vamos capturar o erro e podemos tratar e avisar para o usuário, amigavelmente, que ocorreu o problema.

Agora que já temos a API rodando e o Axios instalado no projeto, nós estamos pronto para, de fato, começar a rodar e obter essa lista, não mais de forma estática, mas, o que vier retornado da API. Vamos lá, está na hora de rodar isso.

Sobre o curso React: integrando seu projeto React com APIs

O curso React: integrando seu projeto React com APIs possui 144 minutos de vídeos, em um total de 56 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

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

• Aquela sobre o AlFood
• Aquela sobre o Admin Alfood
• Aquela sobre PUT e DELETE
• Aquela sobre refatoração
• Aquela sobre layout
• Aquela sobre o FormData