Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: utilizando Web API

React Native: utilizando Web API

Conhecendo a Web API - Apresentação

André: Olá eu sou o André Cunha, instrutor de Mobile aqui da Alura e aqui comigo nesse vídeo de introdução está a Natália. Nesse curso, vamos aprender a como fazer um aplicativo que se comunica com o serviço externo online, as nossas famosas Web API.

Natalia: *André, vale lembrar também que para esse curso temos alguns pré-requisitos. É muito importante que você já tenha trabalhado com *hooks, que você também já conheça navegação entre telas e também já tenha utilizado a flat list, porque vamos utilizar isso nesse curso, mas não será mostrado tão a fundo, porque já foi ensinado em cursos anteriores.

Lembrando que esse curso vai ser dado inteiramente pelo André, então ele vai fazer parte da formação inicial de React Native, espero que gostem. Então, é com você André.

André: Valeu Nat. Vamos ver um pequeno spoiler desse projeto? Esse aqui é o Alura Hub, a empresa Alura nos contratou para desenvolvermos esse aplicativo, que irá se comunicar com o serviço externo da Alura, ou seja, uma Web API da Alura, para poder ler os dados dos funcionários da Alura. Vamos poder também atualizar essas informações, até mesmo deletar se for preciso.

Na tela "Perfil" vamos poder buscar por um usuário pelo login. Vou digitar um usuário aqui que existe, “andreocunha”. A informação está vindo de um serviço externo online: ele puxou todas as informações sobre o André, o nome completo, o e-mail, a foto e também os repositórios.

Os repositórios são os projetos que o André desenvolveu enquanto trabalhava aqui na Alura. Se clicarmos em "Ver os repositórios", localizado acima da barra de busca, podemos ver a lista desses projetos. Podemos clicar em um projeto e, ao sermos direcionados para outra tela, podemos atualizar o nome do projeto, se quisermos. Vamos apagar o "2" ao final de "api-escola 2" e clicar em “Salvar”, na parte inferior da tela. Voltamos para a lista de repositórios e um pop-up aparece confirmando que salvou.

Essa informação está sendo salva online em um banco de dados por meio da Web API. Também podemos criar um novo repositório, clicando no botão "Adicionar novo repositório" na parte superior da tela. Vamos clicar nele para fazermos um teste. O nome será "teste" e vou colocar "10 de fevereiro" na data de criação. Vou clicar no botão “Criar”, que está abaixo do campo de data, e ele criou um novo repositório para o André. Vamos poder também deletar esse repositório.

Isso tudo será dado nesse curso. Você vai aprender como que funcionará esse fluxo para fazermos uma requisição para uma Web API, e poderemos fazer esse belíssimo aplicativo. Espero que você tenha gostado. Venha comigo para aprender mais.

Conhecendo a Web API - O que é uma API?

Agora que vimos o que será abordado nesse curso e como será a nossa aplicação, vamos entender o que é uma Web API? A palavra API significa, Application Program Interface, ou Interface de Programação de Aplicações, nada mais é do que uma solução que nos permite conectar um serviço externo com o nosso aplicativo.

Na prática, como que funciona uma Web API? Vamos supor que dispositivos como um celular, um tablet ou um computador quer acessar a plataforma da Alura e ver os cursos que tem lá. Para isso, esses dispositivos vão fazer uma chamada para uma API, no caso, uma requisição, pedindo os dados dos cursos.

A API, por sua vez, vai se comunicar com o servidor, que você pode interpretar como se fosse um computador. Então lá nesse computador estão salvos os dados e ele que vai processar tudo.

A API então vai pegar essa requisição e vai enviar para o servidor para ele fazer o processamento dos dados. Feito o processamento, o servidor vai retornar um resultado para API, que retorna a resposta para os dispositivos, que vão exibir os cursos, os nomes dos cursos, o tempo de duração e por aí vai.

E como que vem essa resposta da Web API? Se por exemplo, fizermos uma requisição de um curso específico, ela vai vir mais ou menos nesse estilo: vai ter o nome, “React Native”, o tempo_estimado, que é de 10 horas. Esse formato é o JSON, mas não necessariamente uma Web API retorna um JSON. Porém, na grande maioria, e no curso que vamos trabalhar aqui, o resultado será um JSON.

Quais tipos de requisições conseguimos fazer com uma Web API? Existem 4 principais requisições e são elas que vamos trabalhar nesse curso, que é o nosso famoso CRUD. O “C” vem de create, onde podemos criar uma nova formação. Vamos supor que um novo curso está sendo criado na Alura, então poderemos fazer uma requisição para API da Alura para salvar essas informações novas do curso.

Poremos fazer uma leitura também, com o read, pegando os dados dos cursos que já existem na Alura. Podemos fazer um update para atualizar essas informações e, claro, um delete para poder apagar algo do sistema.

Por que devemos utilizar uma Web API? Uma grande vantagem de uma Web API é que permitir que, por exemplo, dispositivos diferentes como um celular e um computador, acessem a mesma plataforma e consigam enviar informações que vão retornar da mesma forma. Então, supondo que você altere sua foto de perfil na Alura, ela vai ser refletida no site caso você abra no computador também. Aqui temos dispositivos diferentes trabalhando com os mesmos dados.

Uma outra grande vantagem, é caso você perca seu celular, se ele quebrar ou você tiver que trocar ele, todo o aplicativo que você tinha uma informação que você salvou lá, vai ser recuperada para o novo dispositivo quando você instalar esse aplicativo. Essa é uma grande vantagem caso você utilize aplicativos que precisem carregar informações de outros celulares.

Uma desvantagem é que você precisa estar conectado na Internet para fazer a comunicação com a Web API. Caso não esteja conectado, existem soluções que permitem salvarmos essas informações no aplicativo e depois recuperar. Porém, nesse curso em específico, não vamos abordar isso.

No dia a dia temos vários aplicativos que trabalham com Web API, por exemplo, o Instagram. Quando você posta uma foto, ou quando chega um stories para você, isso está acontecendo devido a uma Web API, que está rolando ali por trás. Ela está pegando as informações do servidor do Instagram e carregando no seu aplicativo. Mesma coisa com o Facebook e até mesmo do WhatsApp. Quando você envia uma mensagem para alguém e essa mensagem sai do seu celular para o celular da outra pessoa, isso tudo pela comunicação com uma Web API.

Vamos ver na prática uma Web API funcionando? Se você acessar no seu navegador, essa URL, "api.github.com/users/andreocunha", é uma API pública do GitHub que vai retornar informações sobre o meu usuário do GitHub, que é aquela plataforma que podemos hospedar códigos e salvar os nossos projetos.

Então se eu clicar em “Enter” aqui, ele carrega para nós o JSON com as minhas informações do GitHub. Aqui tem o meu login, meu ID, tem a minha foto que, se eu clicar no link dela, consigo abri-la. O ID aqui podemos fazer uma analogia com o CPF: cada pessoa em um país tem um CPF único, da mesma forma como o ID dessa plataforma, que é o GitHub, vai ser único por usuário. É uma forma de identificar cada usuário de uma forma bem específica.

Tem outras informações aqui e se você tentar acessar essa URL no seu computador, provavelmente ela não vai estar colorida assim. Só está colorida no meu navegador porque eu instalei essa extensão chamada JSON viewer, que faz esse tratamento caso abrirmos uma API no navegador.

Existem outras APIs públicas. A própria Alura tem uma API pública, que, se você quiser testar, conseguirá ver todos os cursos que têm na plataforma, informações sobre eles, o tempo estimado daquele curso, e assim por diante.

Existe também uma API pública no GitHub, com várias APIs públicas. Caso você tenha curiosidade, ou queira fazer um projeto depois que terminar esse curso, com matemática diferente, sobre animais por exemplo, você pode acessar aqui e ver por exemplo uma API sobre cachorros, que vai retornar uma foto de um cachorro.

Essas APIs elas são públicas, então você pode utilizá-las, mas não necessariamente quer dizer que elas vão funcionar quando você estiver fazendo esse curso. Pensando nisso, nós não vamos utilizar uma pública nesse curso, e sim uma API própria que vai rodar no computador.

Nesse vídeo nós vimos como funciona uma API e porque devemos utilizá-la. Nos próximos vídeos vamos criar nossas próprias APIs, e rodá-las no nosso computador, fazendo as requisições para testá-las.

Conhecendo a Web API - Fake API vs API

Agora que entendemos o que é uma Web API e porque vamos utilizar neste curso, vamos entender a diferença entre uma Fake API, e uma API normal. Nós não utilizaremos uma API pública nesse curso, porque pode ser que, quando você estiver fazendo esse curso, ela não esteja mais pública, não esteja mais online ou não esteja funcionando como deveria.

Então, para não contar com fator sorte, nós vamos usar uma API que rode no nosso computador. Por que nós não vamos usar uma API de verdade no nosso computador e sim uma Fake API? O que é uma Fake API?

Uma Fake API nada mais é do que uma simulação de uma API normal. Então se fizermos uma requisição, pedir os dados, em formato JSON, ela vai nos retornar o formato JSON como esperado. Também poderemos salvar, editar e até deletar informações, porém nós não vamos precisar nos preocupar com o código que está por trás de uma API.

Uma coisa que nós não mostramos é: o que tem por trás de uma API? Só para você ter uma ideia, uma API tem todo um código de back-end. Isso aqui é um exemplo de uma API, onde temos uma rota, temos vários tratamentos e autenticações. Então esse curso não é focado em criar uma API. Para não gastarmos muito tempo fazendo isso, vamos usar algo que simule uma API, como ela deveria funcionar.

Para isso, vamos utilizar uma biblioteca chamada JSON Server. Esse aqui é o GitHub, onde estão todas as informações e documentação dessa biblioteca. Como podemos ver aqui, ela vai nos retornar um JSON, igual uma API normal retornaria. Vamos ter a liberdade, além disso, de criar um arquivo com essas informações, poder modificar do jeito que nós queremos para que funcione bem nesse curso.

Então nesse vídeo entendemos o que é uma Fake API e porque que vamos utilizá-la. No próximo vídeo vamos criar nossa Fake API e simular as requisições, ou seja, pedir dados, editar dados e salvar dados. Nos vemos na próxima.

Sobre o curso React Native: utilizando Web API

O curso React Native: utilizando Web API possui 96 minutos de vídeos, em um total de 37 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