Explorando o Consumo de APIs no Flutter com o Package Dio

Fala meus amigos, tudo blz? 😄.

Nesse artigo vamos aprender a consumir dados da internet em nosso aplicativo utilizando um package chamado dio o client HTTP mais famoso do mundo Flutter. 💙

Consumir dados da internet é a coisa mais básica que praticamente todo aplicativo vai ter, então vamos lá ✍🏻

O que são APIS ?

De forma geral uma API significa Application Programming Interface (interface de programação de aplicações, ou seja, é uma forma que permite a transmissão de dados entre um software e outro, utilizando APIS empresas conseguem abrir os dados e funcionalidades de seus aplicativos para desenvolvedores externos de terceiros, parceiros de negócios, sistemas etc.

Sendo assim, as APIs proporcionam interoperabilidade entre aplicações totalmente diferentes possibilitando uma integração entre dois ou mais sistemas.

O mais interessante é que quem consome a API não precisa se preocupar com os detalhes da implementação dessa API, um exemplo disso é uma aplicação mobile consumindo dados de uma api de clima para obter os dados sobre o tempo local.

O que é REST?

o conceito de REST (Representational State Transfer) é como um modelo de boas práticas de arquitetura de software que define uma série de requisitos para que as APIs sejam desenvolvidas. Uma API REST é uma API que está em conformidade com os princípios de design do REST.

Se você quiser aprender um pouco mais sobre esse tema acesse esse link.

O que é HTTP?

O HTTP (Hypertext Transfer Protocol ou Protocolo de Transferência de Hipertexto em português) é o protocolo principal de comunicação entre computadores no mundo, oferece aos usuários uma maneira de interagir com recursos da Web, como arquivos HTML, transmitindo mensagens de hipertexto entre clientes e servidores.

Métodos de solicitação HTTP

O HTTP utiliza métodos ou verbos de solicitação específicos para realizar várias tarefas como solicitar, criar, atualizar e deletar os dados, abaixo eu mostro os principais e mais utilizados.

GET Solicita e recupera dados do servidor
POST Adicionar ou cria dados no servidor;
PUT Atualizações de registros.
DELETE Excluir um registro especificado.
PATCH Atualiza ou modifica parcialmente um recurso.

Conhecendo o DIO

DIO é um Cliente HTTP para Dart e Flutter que trás uma experiência simples e robusta para os nossos aplicativos multiplataforma. Possui suporte para interceptores e headers personalizados, cancelamento de requisições, tempo limite, e muito mais.

Implementação do aplicativo de Games usando o DIO

Nesse exemplo, vamos criar um app bem simples de listagem de games consumindo alguns dados que estão na API RAWG. 🔗

RAWG API

Crie uma conta e pegue sua API Key para conseguir buscar os dados.

A ideia aqui é mostrar como é facil fazer essa integração para ter um aplicativo consumindo dados da internet sem muito trabalho.

Vamos começar adicionando a dependência ao nosso arquivo pubspec.yaml.

No momento desse artigo o mesmo se encontra em sua versão mais nova 5.6.0

dependencies:
  dio: ^5.6.0

Ou instale o pacote a partir da linha de comando com o Flutter:

$ flutter pub add dio

3. Agora, no seu código Dart, você pode importar o package:

import 'package:dio/dio.dart';

Sobre Boas Práticas

Quando nós vamos criar consumos de API geralmente é uma ótima prática usar o alguns design patterns como o Servi ce ou R eposito ry.

B asicamente esses padrões consistem em criarmos uma classe separada somente com a finalidade de acessar e buscar os dados do meio externo isso deixa as coisas mais organizadas, e mais bem definidas ajudando até mesmo com a manutenção futuramente em nosso aplicativo.

Service Pattern X Repository Pattern

Repositorios encapsulam a lógica necessária para acessar fontes de dados. Eles centralizam a funcionalidade comum de acesso a dados, oferecendo um nível adicional de abstração sobre o acesso a dados. Esse padrão é útil em situações em que o mecanismo de acesso aos dados podem mudar significativamente.

A finalidade da camada de serviço, por outro lado, é encapsular a lógica de negócios em um único local para promover a reutilização de código e a separação de interesses. Basicamente seria isolar uma tarefa específica em um outro objeto sendo assim assumindo uma responsabilidade muito estreita de realizar alguma atividade útil.

Nesse exemplo usaremos o padrão Repository 😉

Criando Nosso Repository para consumir dados da API 🛠️

Crie um repository chamado GamesRepository que vai conter a instância do Dio e métodos para fazer as requisições HTTP.

Veja o código completo abaixo:

class GamesRepository {
  final Dio dio;
  final String _apiKey = '';
  final String _baseUrl = 'https://api.rawg.io/api/games';

  GamesRepository(this.dio);

  Future<List<GameModel>> getGames() async {
    try {
      final response = await dio.get(
        _baseUrl,
        queryParameters: {
          'key': _apiKey,
        },
      );

      if (response.statusCode == 200) {
        return (response.data['results'] as List)
            .map((game) => GameModel.fromJson(game))
            .toList();
      } else {
        throw Exception('Erro ao obter games: Código ${response.statusCode}');
      }
    } on DioError catch (dioError) {
      throw Exception('Erro ao fazer a requisição: ${dioError.message}');
    }
  }
}

Se atente para API key onde você vai conseguir no site após realizar seu cadastro.

O principal objetivo do nosso repository é listar os games, convertendo os dados da API em modelos (GameModel) que podem ser usados no resto da aplicação.

O GamesRepository abstrai os detalhes de como os dados dos jogos são obtidos da API. Em vez de espalhar a lógica de requisição pela aplicação, ela fica centralizada no repositório.

Se você decidir mudar a fonte dos dados (por exemplo, mudar de uma API para um banco de dados local), você só precisaria alterar o repositório, sem impactar outras partes do código.

Aplicativo de games rodando

Acima temos o aplicativo rodando e trazendo os dados com sucesso ✅

Para a gerência de estado eu usei o Bloc, em um artigo futuro veremos sobre ele aqui também.

Aqui está o código completo caso queria ver como ficou todo o aplicativo. 👨🏻‍💻

Estrutura Básica do Games Repository

Model (GameModel): Representa a estrutura dos dados que você está manipulando, neste caso, um jogo.
Repository (GamesRepository): Contém a lógica de como obter, armazenar e manipular os dados (nesse caso, os jogos) de uma fonte externa, como uma API.

Vantagens do Padrão Repository

Modularidade: A lógica de acesso a dados é separada do restante da aplicação, facilitando a manutenção e evolução do código.
Testabilidade: Como o GamesRepository é uma camada separada, você pode testá-lo isoladamente, simulando a resposta da API e verificando se o repositório lida com os dados e erros corretamente.
Facilidade de Substituição: Se futuramente você quiser trocar a API que fornece os dados dos jogos, ou quiser implementar caching, você só precisa alterar o GamesRepository.

Referências

Conclusão ✅

Bom, eu particulamente acho muito simples consumir APIS com o Flutter, já vi e tentei em outras tecnologias de desenvolvimento móvel e a curva de aprendizado é bem maior rsrsr.

E para encerrar, uma dica valiosa, acredite em mim: envolva-se com a comunidade local de desenvolvedores. Aprenda com outros desenvolvedores: participar de eventos de tecnologia, palestrar e contribuir com conteúdos pode expô-lo a uma variedade de ideias, tecnologias e abordagens diferentes.

Isso pode enriquecer seu conhecimento e ampliar sua perspectiva sobre a indústria de desenvolvimento de software.

Conheça novas pessoas e faça networking nos eventos, pois isso pode abrir portas para novos contatos e oportunidades valiosas em sua carreira.

Obrigado por ler até aqui. 😁

Espero que você tenha gostado! Compartilhe-o com seus amigos e colegas!

Juntos, vamos construir apps incríveis que transformam o mundo!

Se tiver alguma dúvida ou contribuição me manda uma DM ou deixe nos comentários!

Me siga para estar sempre por dentro dos próximos artigos sobre desenvolvimento móvel 📲 🚀

🌐 Minhas redes sociais 🌐

GitHub | LinkedIn | Instagram | X (Twitter) | Medium

Ian Oliveira