O consumo de API (Application Programming Interface) é uma das funcionalidades mais comuns a serem desenvolvidas durante a produção de um aplicativo. Quem nunca precisou obter os dados de um usuário, carregar informações sobre produtos ou armazenar um comentário, por exemplo?
Independentemente da linguagem, framework ou plataforma para qual o app esteja sendo implementado, todo programador, de modo geral, faz uso de alguma biblioteca para a manipulação de API. Sendo assim, em Flutter, seria interessante também conhecer alternativas para obtenção daquele dado, via HTTP, que seu amigo desenvolvedor do back-end jura que já está disponível na API (kkkkkkk). Com esse objetivo, neste post, farei a apresentação do Dio.
O Dio é um cliente HTTP para Dart, que suporta interceptores, download de arquivo, timeout, entre outras funcões. Para exemplificar o seu funcionamento, neste post, faremos a implementação de requisição e envio de informações em um app em Flutter.
Vamos ao código!
Primeiramente, importamos o Dio em nosso projeto Flutter adicionando a linha abaixo na seção dependencies do arquivo pubspec.yaml:
Com o Dio importado, podemos partir para a nossa implementação. A ideia consiste em carregar a foto, o nome e o email de um usuário e exibi-los no centro da tela do dispositivo. Além disso, também executaremos o envio de dados a um servidor.
Como fonte de dados, utilizaremos o Reqres.in, um site de dados fake que disponibiliza API para testes de front-end. Sendo assim, ele funcionará como nosso back-end e servirá tanto para consumirmos dados quanto para enviarmos informações e recebermos as respostas.
Sabendo disso, implementamos o método initState da nossa classe do tipo Stateful da seguinte forma:
No trecho de código acima, usamos a classe BaseOptions para inserirmos as principais configurações a serem utilizadas nas requisições. No exemplo foram declarados a baseUrl, a qual contém o endpoint da API e o connectTimeout de 5000 milisegundos. Por fim, as options são atribuídas a instância do Dio.
Com o Dio já inicializado, podemos partir para a chamada à API. Para isso, criamos dois métodos, o getProfile e o submitUser. O getProfile tem como objetivo obter os dados do perfil de um usuário. Por sua vez, o submitUser envia, via POST, os dados do usuário junto com sua profissão para o servidor. É importante mencionar que ambos os métodos são assíncronos, uma vez que dependem do retorno da resposta do servidor e devem ser executados em background. O código fonte desses dois métodos pode ser visto abaixo:
O método getProfile obtém os dados do usuário por meio de uma requisição GET ao respectivo endereço do Reqres.in. A variável count atribuída à URL, ao ser incrementada, serve apenas para receber um novo usuário diferente do obtido anteriormente. A resposta a essa chamada é armazenada numa instância da classe Response, a qual é usada para atualizar a foto e os campos dos dados do usuário.
O método submitUser foi implementado para enviar os dados do usuário ao servidor. Os dados a serem enviados são o nome e a profissão (job) do usuário, sendo que este último é inserido manualmente por meio de um TextField. Eles são atribuídos ao campo data da instância do Dio e destinados ao servidor via POST. Como resposta, essa chamada recebe um JSON contendo as informações resultantes da criação do novo usuário. Esse JSON é exibido na tela do app após o recebimento da resposta.
A invocação dos métodos getProfile e submitUser é feita por meio de MaterialButton, nomeados de “Obter Perfil!” e “Enviar!”, respectivamente. Como o objetivo deste post não é mostrar o desenvolvimento da interface, e sim, focado no Dio, não irei detalhar os widgets usados na implementação da tela. Sendo assim, segue abaixo o gif que apresenta o funcionamento do nosso app:
Bom, é isso.
Espero ter conseguido apresentar o Dio e ajudado a dar uma noção de como utilizá-lo.
Para ver o código fonte completo do projeto que foi desenvolvido neste post acesse: https://github.com/luizmarcus/Flutter/tree/master/exemplo_dio
Qualquer dúvida, deixa um comentário.
Olá!
Gostei muito do tutorial, vai me ajudar bastante, mas fiquei com uma dúvida, onde que você definiu o banco de dados que irá salvar os perfis? Baixei os arquivos do seu github, dei uma olhada, porém não achei onde você define o caminho para o banco.
Olá, Ingrid.
Obrigado pelo elogio! ?
No post, eu usei o Reqres.in para simular uma API. Tanto o exemplo de GET quanto o POST feitos no post foram feitos para o Reqres.in. Sendo assim, não precisei fazer uso de nenhum banco de dados.
Entendi, mas se no caso eu usasse outra API? Onde eu configuraria o banco? Estou estudando flutter/dart e quero fazer uns testes de cadastro de usuário que mesmo não tendo internet ele possa se cadastrar (e depois quando conectar o cadastro é enviado automaticamente para um banco). Ou pelo dio não tem como configurar um banco para receber os dados?
Entendi seu problema, Ingrid.
Quando o usuário se cadastrar e o app estiver sem Internet, seu app pode armazenar as informações localmente (no dispositivo do usuário) usando o SharedPreferences ou o Floor.
Assim que o dispositivo estiver com Internet, o app utiliza o Dio em background para chamar sua API e enviar o cadastro para o seu servidor. Nesse seu servidor é que estaria o banco de dados.
Qualquer dúvida, é só perguntar.
E aew Luiz, kra primeiramente meus parabéns.
Foi o primeiro artigo que realmente falou de API Rest sem ser o tradicional firebase ou só alimentação por get.
Gostaria de te perguntar duas coisas.
1º Qual a diferença do http e do Dio?
2° Criei uma API Rest para brincar e que posso colocar no Github onde ao logar ele me retorna o JWT Token, como faço para guardar no app e usar para consulta e tudo mais já que para cadastros ele deve me retornar esses dados.
Mais uma vez parabéns pelo artigo e desde já muito obrigado pela resposta.
E ae Felipe! Obrigado pelos parabéns! =)
Vou tentar responder suas perguntas separadamente:
1º A biblioteca HTTP no Flutter é muito básica, enquanto que a Dio é mais completa já que possui suporte a timeout, interceptor e manipulação de erros, por exemplo. No caso de consumo de API Rest, na minha opinião, é indicado o uso da Dio.
2º Pelo que eu entendi, você quer armazenar o token que retornou da requisição, não é? Se for isso, você pode armazenar o token localmente (no dispositivo) usando o SharedPreferences ou o Floor.
Espero ter ajudado.
Fala Luiz beleza?
Primeiramente parabens!
Uma duvida, eu consigo usar isso para um web service?
Beleza, Carlos! Obrigado!
Você consegue usar a Dio para consumir um Web Service, sim!
Espero ter ajudado.
Vc tem algum tutorial ou artigo que tenha esse conteúdo de como fazer essa comunicação com o web service?