Você conhece aplicativos móveis para pedir comida. O cardápio, os preços e as informações sobre pedidos ficam armazenados em um banco de dados gerenciado por um aplicativo de back-end.

Para acessar estes dados o app móvel deve fazer uma solicitação de API para o aplicativo de back-end. O aplicativo de back-end responderá com as informações solicitadas. O app móvel então usa os dados para criar uma interface para pedir comida.

Neste tutorial, você aprenderá como fazer solicitações GET, POST, PUT e DELETE para APIs em um aplicativo React Native usando FetchAPI.

A web funciona através do envio e recebimento de dados através de uma vasta rede de dispositivos interconectados. Cada dispositivo conectado à web, seja um smartphone, um computador pessoal ou um servidor em um data center, possui um endereço IP único que permite sua identificação na rede.

As páginas web são hospedadas em servidores. Quando você digita um URL (como www.example.com) no seu navegador, o navegador solicita essa página ao servidor que a hospeda. O servidor, então, responde com os dados da página, que o navegador interpreta e exibe para você como uma página web visualmente formatada.

É aqui que o protocolo HTTP (Protocolo de Transferência de Hipertexto) entra em cena . HTTP é o protocolo fundamental utilizado para a transferência de dados na web. Ele define como as mensagens são formatadas e transmitidas, e quais ações os navegadores e servidores web devem tomar em resposta a vários comandos.

Por exemplo, quando você digita um URL no seu navegador, na realidade está enviando uma solicitação HTTP ao servidor que hospeda essa página web. Esta solicitação inclui várias informações, incluindo o tipo de solicitação (GET para solicitar dados de um recurso específico, POST para enviar dados a um recurso, etc.), o URL do recurso e quaisquer outros dados que o navegador escolha incluir (como cabeçalhos que fornecem mais informações sobre a solicitação).

O servidor, então, responde com uma mensagem HTTP própria, que inclui um código de status (como 200 para uma resposta bem-sucedida, 404 se o recurso não foi encontrado, etc.), os dados do recurso solicitado (se disponível) e quaisquer outros cabeçalhos que o servidor escolha incluir.

O navegador interpreta a resposta, exibe os dados recebidos para o usuário (se apropriado) e toma quaisquer outras ações necessárias com base no código de status e cabeçalhos da resposta.

Em resumo, a web funciona através da transferência de dados entre dispositivos por meio do protocolo HTTP. Este protocolo define como as solicitações e respostas são formatadas e tratadas, permitindo aos navegadores e dispositivos móveis e servidores se comunicarem eficientemente para entregar páginas web e serviços web.

Arquitetura Client / Server

Chrome DevTools

Vá para Expo Snack e crie um novo snack para iniciar um novo projeto React Native, então abra o arquivo App.js e limpe o conteúdo do arquivo.

Comece importando os hooks useState e useEffect do React, bem como os componentes Text, View e StyleSheet do React Native.

import {useState, useEffect} from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';

Em seguida, defina a função App do app. Dentro do corpo da função, definimos o estado dos dados como um array vazio, o estado de carregamento como verdadeiro e, por enquanto, retornamos um simples texto "Alô mundo".

export default function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  return (
    <View>
      <Text>Alô mundo</Text>
    </View>
  );
}

Em desenvolvimento de software, mock refere-se à técnica de simular o comportamento de objetos ou componentes reais durante testes unitários ou de integração. Essas técnicas permitem isolar partes específicas do código para testá-las de forma independente, sem depender de componentes externos ou complexos.

Um "mock" é um objeto simulado que substitui o comportamento de um objeto real em um determinado contexto de teste. O mock é programado para se comportar como o objeto real, respondendo a chamadas de métodos específicos e retornando resultados pré-determinados. No entanto, ele não executa a lógica real do objeto ou componente original.

Os mocks são especialmente úteis quando você precisa testar interações entre componentes e garantir que eles se comuniquem corretamente sem depender da implementação real. Eles permitem que você defina o comportamento esperado dos objetos dependentes e verifique se as chamadas de método foram feitas corretamente.

Além disso, os mocks também podem ser usados para simular cenários de erro ou comportamentos específicos que seriam difíceis de reproduzir com objetos reais. Isso permite testar como o sistema se comporta em situações excepcionais.

Existem várias bibliotecas e frameworks de teste que fornecem recursos para criação e uso de mocks, como o Mockito (para Java), o Jest (para JavaScript) e o unittest.mock (para Python). Essas ferramentas facilitam a criação de mocks e a verificação das interações durante os testes.

Os dados que vamos consumir no nosso app serão obtidos de uma API mock chamada JSONPlaceholder.

Esta API oferece seis recursos para ler, editar, atualizar ou excluir dados fazendo solicitações de API:

Uma solicitação API GET é um tipo de solicitação API usada para recuperar dados de um servidor. A solicitação é enviada por meio de um método HTTP GET e os dados são retornados na forma de um objeto JSON.

Vamos fazer uma solicitação GET em nosso aplicativo React Native. O endereço URL para obter todos os posts existentes no banco de dados do mock é: 

const url = "https://jsonplaceholder.typicode.com/posts"

Vamos usar a função fetch para executar a solicitação. A chamada à função fetch será feita dentro da função useEffect (como a chamada fetch dispara uma ação assíncrona, é necessário encapsular dentro do hook, que permite tratar os efeitos colaterais de forma adequada, como acontece sempre em chamadas de API):

useEffect(() => {
  fetch(url)
    .then((resp) => resp.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}, []);

A função useEffect aceita dois argumentos: uma função (neste caso, uma função assíncrona que busca dados de uma API) e um array que determina quando a função deve ser executada. Se o array estiver vazio (como neste exemplo, [ ]), a função será executada apenas uma vez após a renderização inicial, que acontece apenas uma vez durante o ciclo de execução do app. Se o array contiver alguma variável, a função será executada todas vez que houver alteração do valor desta variável. Para sabe mais sobre o hook useEffect, consulte a referência.

Por fim, renderizamos o post obtido da API:

<View style={styles.container}>
    {loading
      ? (<Text>Carregando...</Text>) 
      : (<FlatList
           data={data}
           renderItem={({ item }) => {
             return (
               <View style={styles.container}>
                <Text style={styles.title}>{item.title}</Text>
                <Text>{item.body}</Text>
               </View>
             );
           }}
         />)}
</View>

Portanto, se a solicitação da API ainda estiver em andamento, mostramos o texto "Carregando" em nosso aplicativo. Depois que os dados são recuperados, percorremos o array e renderizamos o título e o texto de cada postagem.

Por fim a estilização do componente:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
    marginTop: 30,
    borderTopWidth:1,
  },
  title: {
    fontSize: 30,
    fontWeight: "bold",
  },
});

Aqui está o resultado quando as postagens são retornadas da API.

Como você pode ver, buscamos com sucesso a lista de postagens da API e renderizamos cada uma delas em nosso aplicativo React Native.

Uma solicitação POST é um tipo de solicitação API usada para criar um recurso em um servidor web. Ela envia dados para o servidor no corpo da solicitação. Se os dados forem aceitos, o servidor responde com um código de sucesso e o recurso é criado ou atualizado.

Ao fazer uma solicitação POST com FetchAPI, você deve especificar o método como 'POST'. Aqui está um exemplo de um POST para o servidor falso do nosso aplicativo React Native:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    userId: 55,
    id: 101,
    title: "Post title",
    body: "Post body",
  }),
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(JSON.stringify(responseData));
  })
  .done();

O corpo (body) da solicitação deve sempre ser um objeto JSON, por isso chamamos a função JSON.stringify().

Depois que o servidor termina de processar a solicitação, ele envia uma resposta para informar se o recurso foi criado no servidor ou não (e por que falhou).

Uma solicitação PUT deve ser usada para atualizar um recurso específico no servidor.

Em uma solicitação PUT, você precisa especificar o ID do recurso que deseja atualizar no servidor, bem como os novos valores. Aqui está um exemplo que atualiza o título e o corpo da postagem no servidor:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    userId: 55,
    id: 101,
    title: "New Post title",
    body: "New Post body",
  }),
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(JSON.stringify(responseData));
  })
  .done();

Semelhante a uma solicitação POST, o servidor envia uma resposta para informar se o recurso foi atualizado no servidor ou não (e por que falhou).

Como você deve ter adivinhado, uma solicitação DELETE é usada para excluir um recurso específico de um servidor.

Em uma solicitação DELETE, você especifica apenas o ID do recurso que deseja excluir no servidor:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(JSON.stringify(responseData));
  })
  .done();

Depois que o servidor conclui o processamento da solicitação, ele envia uma resposta para informar se o recurso foi excluído do servidor ou não (e por que falhou).