Alice - Interceptando suas requisições HTTP se forma simples
Tags: alice, interceptors, http, dio
Published: 2024-04-20 03:57:51


Fala Devs, blz?? É comum no ciclo de vida de desenvolvimento de um aplicativo ele passar por um processo de testes de usuário antes de ser disponibilizado nas lojas e é comum que bugs sejam encontrados. Muitas vezes esses bugs podem não estar no aplicativo e sim na API que está integrada e para que nosso colega desenvolvedor backend consiga reproduzir o erro precisamos passar qual a requisição que estamos realizando e que ocorreu erro para simular o erro do lado do servidor.

Para isso, muitas vezes precisamos depurar o aplicativo e tentar reproduzir o erro que o usuário realizou para conseguir interceptar qual a requisição que está sendo enviada, um baita trabalhão!

Não seria ótimo assim que o usuário que está testando a aplicação assim que encontrasse o erro pudesse recuperar a requisição (como consegue no DevTools do Google Chrome) e ao relatar o problema já nos informasse qual foi a requisição?

Existe um package que acho essencial para qualquer projeto e que faz exatamente isso, o alice_lightweight ([https://pub.dev/packages/alice_lightweight](https://pub.dev/packages/alice_lightweight))

Após instalar o alice em seu projeto a primeira tarefa que temos que fazer é criar uma instancia do Alice em nosso projeto, no caso para conseguirmos injetar a dependência nas classes subsequentes (como estou fazendo no AppController)

![](https://cdn-images-1.medium.com/max/800/1*AFNwEpqWn0MBCyaTH-RX-Q.png)

Também vamos criar a instancia do HTTP Client de nossa preferência, no caso estou usando o DIO, e necessitamos adicionar o interceptador que o alice nos oferece interceptors já prontos dos principais HTTP Clients:

> · Dio
> · HttpClient do dart:io package
> · Http do http/http package
> · Chopper
> · Generic HTTP cliente

No caso podemos adicionar uma condição parra adicionar o interceptor somente quando o aplicativo estiver para teste para que o aplicativo em produção não mostre esses logs.

![](https://cdn-images-1.medium.com/max/800/1*OGcSnozYY099gTPDFe8rgQ.png)

Em nosso MaterialApp precisamos adicionar o navigatorKey do alice

![](https://cdn-images-1.medium.com/max/800/1*ePof1tVggqp8qnDrBk5FAQ.png)

Para abrir a tela de relatório basta na tela recuperarmos a instancia do Alice que configuramos no MaterialApp e chamar a função o showInspector().

![](https://cdn-images-1.medium.com/max/800/1*ywymEnL58RcyK3WLMNhgJw.png)

O resultado será o seguinte

![](https://cdn-images-1.medium.com/max/800/1*pN5xBv-d2d-rUhJ_PWO8zA.gif)

### BONUS!!

Uma forma legal e bastante útil de apresentarmos esses relatórios e através de push notifications, ou seja, toda hora que o usuário fizer uma requisição na API iremos disparar um push notification para o dispositivo. Para isso utilizaremos o pacote flutter_local_notifications (flutter_local_notifications).

Leia a documentação e faça toda a configuração do Android e iOS é muito simples.

Em seguida iremos criar uma classe responsável por gerenciar os push notifications, chamaremos de LocalNotificationService.

Primeiro vamos criar o método de inicialização precisamos configurar tanto a inicialização do Android quanto do iOs.

![](https://cdn-images-1.medium.com/max/800/1*x5YUplcClAOTDoymzqckGA.png)

Depois vamos montar o método responsável por disparar as notificações

![](https://cdn-images-1.medium.com/max/800/1*l6u-xWY4RPETufBlqB5ZMw.png)

E finalmente fazemos o método que irá abrir o relatório do alice quando o push notification for aberto.

![](https://cdn-images-1.medium.com/max/800/1*FpIt--wTngHnPNgIAZG_qQ.png)

{% gist https://gist.github.com/toshiossada/3099ef863f741f4585eaebe98bbf86d9 file=local_notification_service.dart %}

Para finalizar no meu MaterialApp apenas preciso recuperar a instancia do LocalNotificationService e invocar o método de inicialização.

![](https://cdn-images-1.medium.com/max/800/1*9Xbc4XSe1I_BetzDMVhNmA.png)

E voila! O resultado que teremos é a seguinte.

![](https://cdn-images-1.medium.com/max/800/1*b6Q-nzDiaGaamcNp9fLZ6Q.gif)

Legal ne? Isso facilitou bastante minha vida e aposto que irá ajudar bastante.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obcg0d2y00yddve9quky.png)


Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil