APIs REST: integração prática com Flutter e Dart

Entendo a comunicação via API - Apresentação

Apresentando o curso e o instrutor

Olá! Gostaríamos de dar as boas-vindas a mais um curso de Flutter aqui na Alura. Meu nome é William Ezeia e estarei acompanhando vocês ao longo desta jornada, na qual integraremos nosso aplicativo de gestão administrativa de produtos da loja UseDev com APIs REST.

Audiodescrição: William é um homem pardo, com cabelo preto e barba preta.

Explicando os objetivos do curso

Durante o curso, conseguiremos criar métodos de listagem para exibir todos os itens na tela inicial da nossa loja. Além disso, abordaremos a parte de criação de produtos, incluindo o envio de arquivos utilizando um formulário e dados.

Além disso, nós faremos atualizações de produtos, obtendo informações de um produto por ID e também atualizando, trabalhando com regras, informações, tratamento de erros. Por fim, trabalharemos com a exclusão de itens e a abstração da API para não depender apenas de uma biblioteca.

Destacando a importância do uso de APIs

Vamos abordar muitos tópicos ao longo dessa jornada, e com isso, será possível aplicar bastante no dia a dia, pois o uso de API é uma das grandes responsabilidades na vida de uma pessoa desenvolvedora mobile.

Requisitos e convite para o curso

Para realizar este curso, não é necessário ter um conhecimento aprofundado em Flutter. É importante ter uma estrutura base, já ter desenvolvido algumas telas e entender um pouco sobre o conceito de API, mas não é preciso estar muito aprofundado, pois abordaremos tudo isso ao longo da jornada.

Convidamos você a participar do curso e esperamos encontrá-lo na próxima aula.

Entendo a comunicação via API - O que são APIs

Introduzindo o cenário de desenvolvimento

Vamos considerar o seguinte cenário: fomos contratados pela empresa Usedev para dar continuidade ao desenvolvimento do aplicativo administrativo da empresa. A Usedev é uma loja online que já possui um aplicativo para clientes, e agora estamos criando o aplicativo para administradores. Assumimos o desenvolvimento do aplicativo a partir deste momento.

Atualmente, já temos toda a parte de gestão de produtos criada, mas apenas visualmente. Podemos ver uma lista de produtos da loja, editar um produto, apagar um produto e criar um novo produto dentro da aplicação. No entanto, o aplicativo salva os dados apenas localmente, ou seja, dentro da memória do dispositivo. Isso significa que, se reiniciarmos o aplicativo, os dados serão perdidos. Além disso, se acessarmos o aplicativo em outro dispositivo, os dados não estarão salvos.

Explicando a necessidade de APIs

A partir de agora, precisamos começar a consumir APIs para configurar toda a comunicação e interações com um banco de dados. É isso que faremos ao longo deste curso. Antes de partirmos para a prática, é importante entendermos o que é uma API.

Para explicar o conceito de API, utilizamos o exemplo de um garçom. Em um restaurante, a comida, os dados e as informações que desejamos estão na cozinha. Não podemos simplesmente entrar na cozinha e pegar um prato do chef. Para intermediar essa interação entre nós e a cozinha, existe o garçom. Basicamente, chegamos ao garçom e pedimos, por exemplo, uma água com gás, gelo e limão. O garçom vai até a cozinha, pega o pedido e traz de volta para nós. Se quisermos um prato específico, o garçom envia a comanda, espera o prato ficar pronto e nos traz. Se decidirmos trocar ou cancelar o pedido, chamamos o garçom novamente para fazer a alteração. O garçom intermedia todas essas interações.

Descrevendo o funcionamento das APIs

Da mesma forma, uma API intermedia as requisições e os dados. Ela funciona intermediando as conexões entre os dispositivos, no nosso caso, o aplicativo, e o servidor, que é o banco de dados. Sempre que quisermos algo, pedimos para a API, que busca no servidor e nos traz de volta. A API intermedia essa conexão porque o aplicativo não consegue se conectar diretamente ao banco de dados no servidor.

Por exemplo, se quisermos uma lista de usuários ou produtos para nossa aplicação, pedimos à API que traga essa lista. Ela busca no servidor e retorna para nós. Existem alguns tipos de API, como a API REST, que é a que trabalharemos aqui. Também há APIs em GraphQL e outros tipos, mas a mais comum e utilizada no mercado é a API REST, que abordaremos ao longo deste curso.

Explorando os padrões da API REST

Basicamente, uma API REST trabalha com três padrões principais: as respostas sempre vêm no formato JSON, que é semelhante ao map que temos no Dart. Ou seja, os dados vêm estruturados com chaves e valores, onde as chaves são strings e os valores podem ser dinâmicos, como strings, inteiros, doubles, outros maps, etc. As chamadas são identificadas por URLs. Por exemplo, quando pedimos à API uma lista de produtos, temos uma URL específica que representa exatamente o que precisamos.

Quando trabalhamos com APIs, utilizamos URLs para acessar informações. Por exemplo, ao chamar a URL de um site seguido de "/produtos", obtemos as informações desejadas. Existem métodos específicos para realizar essas chamadas, assim como há diferentes maneiras de solicitar algo em um restaurante. Se quisermos pedir a conta, utilizamos um método específico para isso. Da mesma forma, temos métodos diferentes para chamar uma API.

Detalhando os métodos de requisição

Existem cinco métodos principais:

1. GET: Utilizado para buscar dados. Sempre que quisermos buscar informações, utilizamos o método GET, que realiza a chamada de dados.

2. POST: Usado para criar dados. Por exemplo, se temos uma lista de produtos e queremos adicionar um novo produto, utilizamos o método POST.

3. PUT/PATCH: Métodos utilizados para atualizar dados. A diferença entre eles é que o PUT atualiza toda a informação, enquanto o PATCH atualiza apenas um dado específico.

4. DELETE: Utilizado para apagar dados.

Embora esses métodos sejam o padrão recomendado, algumas empresas podem não segui-los à risca, utilizando, por exemplo, apenas POST ou GET para todas as operações. No entanto, seguiremos esse padrão para manter a clareza na utilização. Caso observemos alguém não seguindo esse padrão, é recomendável sugerir sua adoção.

Explicando os status de retorno das APIs

Além dos métodos, também temos os status de retorno das APIs. Ao definir a URL e o método conforme nossa necessidade, recebemos uma resposta que pode incluir dados e sempre retorna um status numérico, dividido em três grupos:

1. Status 200: Indica sucesso. Vai de 200 a 299. Os mais comuns são 200, utilizado quando obtemos dados com sucesso, e 201, que indica que algo foi criado ou alterado, geralmente usado com métodos de alteração como POST, PUT, PATCH e DELETE.

2. Status 400: Indica erro do cliente. Isso ocorre quando a chamada não atende às expectativas da API, como quando falta uma informação necessária. Por exemplo, ao tentar criar um produto sem fornecer o nome, recebemos um erro 400, indicando um BAD REQUEST. Um erro 404 ocorre quando a URL chamada não existe. Esses erros são de lógica ou implementação.

3. Status 500: Indica erro do servidor. É o mais complexo e perigoso, ocorrendo quando a API está fora do ar ou há problemas internos. Um erro 500 sugere que há um problema sério na API.

Para simplificar, podemos pensar nos status como um semáforo:

• Status 200: Verde, tudo está funcionando bem.
• Status 400: Amarelo, há um erro que pode ser corrigido.
• Status 500: Vermelho, um erro crítico que requer atenção.

Essa é a estrutura básica de uma API: um método, uma chamada via URL e um retorno. Agora, vamos partir para a prática.

Entendo a comunicação via API - Implementando sua primeira API

Implementando uma API Fake de Loja

Agora, vamos implementar uma API que utilizaremos, a Platsy Fake Store API, uma API pública com fins educacionais. O link será disponibilizado durante o curso, permitindo que a utilizemos em nosso contexto. A ideia é aplicar diretamente e entender como funciona a estrutura de consumo de uma API. Dentro dessa API, utilizaremos apenas a API de produto.

O que estamos visualizando é um Swagger, uma ferramenta que permite entender e visualizar como uma API funciona. Uma API é um link que, ao ser chamado, retorna informações. No entanto, sem entrar no código, não conseguimos ver a API. O Swagger foi criado pela comunidade para facilitar a visualização e o consumo da API, permitindo entender sua estrutura sem acessar o código diretamente.

Ao abrir o Swagger da API que utilizaremos, encontramos as APIs de produtos. Temos um método GET que lista os produtos, um POST que cria produtos, um GET que obtém um produto específico por identificador, semelhante a um CPF. Para obter informações de um produto específico, utilizamos o identificador. Há também o método PUT para atualizar informações do produto, DELETE para apagar, e outras APIs, como as que obtêm produtos relacionados ou por slug (link do produto). Não utilizaremos as APIs de usuários e outras.

Funcionamento da API de Produto

Para testar a API de produtos, acessamos a rota /produtos, que lista os produtos. Podemos definir um limite, especificando quantos itens queremos obter, por exemplo, 10 ou 5 itens. Também podemos definir um OFFSET, que determina a partir de qual item queremos começar, como os primeiros 5 itens ou do 5 ao 10.

Ao executar a API, fazemos uma chamada GET no link, passando os parâmetros LIMIT e OFFSET. O retorno é uma lista com os produtos conforme o contexto passado no link estruturado. Nossa tarefa é implementar essa chamada dentro da aplicação.

Início da Implementação

Começaremos com o método GET, seguido pelo POST e outras estruturas. Vamos abrir o VS Code para iniciar a implementação. A primeira etapa é configurar o projeto para consumir a API.

Existem alguns clients (clientes), que é a forma como chamamos a implementação dentro do Flutter para realizar chamadas por API. Precisamos de um cliente que funcione como uma rede web para chamar o link e fazer a aplicação funcionar. Entre os mais famosos, temos o HTTP, que é bastante conhecido, e o Dio, que também é muito popular na comunidade. O Dio é mais utilizado e oferece mais recursos, facilitando bastante em várias situações que o HTTP não cobre. Por isso, vamos utilizar o Dio, também devido à sua ampla adoção pela comunidade.

Para começar, precisamos adicionar o Dio ao nosso projeto. Vamos abrir o terminal e executar o seguinte comando:

flutter pub add dio

Isso deve ser executado aí também. No nosso caso, o Dio já está incluído nas dependências do projeto. Caso contrário, é necessário adicioná-lo. Com isso, já podemos utilizar o Dio na aplicação.

Vamos abrir a home page, que é a página inicial. Fecharemos os arquivos para facilitar a leitura e criaremos uma função. Por enquanto, não traremos toda a implementação, apenas faremos a chamada. Vamos criar uma função para simular essa chamada de API. Fecharemos outras funções para facilitar a leitura. A função será chamada void callApi() {}.

void callApi() {

}

Em seguida, vamos instanciar o Dio:

final dio = Dio();

Precisamos importar o pacote do Dio no arquivo para simular a chamada:

import 'package:dio/dio.dart';

Com o Dio instanciado, faremos a seguinte chamada GET para a API:

final result = await dio.get('https://api.escuelajs.co/api/v1/products');

Para que a função callApi funcione corretamente, precisamos torná-la assíncrona, pois estamos utilizando await:

Future<void> callApi() async {
    final dio = Dio();
    final result = await dio.get('https://api.escuelajs.co/api/v1/products');
}

Uma vez que temos o resultado, podemos imprimir result.data, que é o dado retornado pela aplicação:

print(result.data);

Além disso, também imprimiremos result.statusCode, que é o status da chamada:

print(result.statusCode);

Para uma melhor formatação, usaremos interpolação para formatar a saída:

print('Status: ${result.statusCode}');
print('Data: ${result.data.toString()}');

Com isso, em teoria, já temos a primeira chamada da nossa API. Vamos adicionar um botão no scaffold para simular a chamada. Na verdade, vamos alterar o botão de criação que temos, que atualmente chama a página de criar produto, para chamar essa API quando clicarmos nele:

onPressed: () => callApi(),

Vamos abrir o nosso debug console, limpá-lo e clicar em "novo produto". Com isso, ele acessará a API e, em seguida, retornará o resultado. O status retornado foi 200, e o dado, que é o resultado da requisição, foi uma lista com os produtos. Ou seja, temos um array com os itens da lista. É assim que conseguimos consumir as APIs dentro da nossa aplicação.

Agora, precisamos fazer essa aplicação direta para substituir a API dentro do nosso projeto. E é isso que faremos na próxima etapa.

Sobre o curso APIs REST: integração prática com Flutter e Dart

O curso APIs REST: integração prática com Flutter e Dart possui 112 minutos de vídeos, em um total de 32 atividades. Gostou? Conheça nossos outros cursos de Flutter 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:

• Entendo a comunicação via API
• Usando o método GET e POST
• Aprimorando com os métodos DELETE e PUT
• Construindo com boas práticas e padrões de projeto