Debugando chamadas a web no Android usando o Charles Proxy
Uma das principais atividades de um desenvolvedor mobile é fazer suas aplicações se comunicarem com um Web Service. A maioria dos aplicativos hoje em dia se comunica de alguma forma com um serviço de backend, portanto ter uma noção de como essas tecnologias funcionam é fundamental para executar um bom trabalho. Hoje eu falarei sobre como podemos utilizar uma ferramenta, o Charles Proxy, para visualizar, interromper e até editar as chamadas aos Web Services.
O que é o Charles Proxy?
O Charles Proxy, Charles para os íntimos, é uma ferramente paga (com 30 dias de uso grátis), que te permite monitorar as chamadas HTTP feitas pelo seu dispositivo (celular, Android ou iOS, ou computador). As chamadas podem ser visualizadas com todos os headers, parâmetros, métodos que são enviados, bem como as respostas recebidas de cada requisição. Estas respostas podem ser editadas, e assim podemos simular certas situações sem a necessidade de fazer o deploy de um serviço apenas para isso. Por conta disso, o Charles se torna uma excelente ferramenta durante o desenvolvimento de aplicativos que acessam serviços na web.
Configurando o Charles
Iremos utilizar o CinemaBuff como exemplo de como configurar o Charles a nível de aplicativo. O resto das configurações são a nível de dispositivo. A única configuração necessária em seus aplicativos será a criação de um arquivo xml na pasta res/xml. O arquivo pode ser nomeado como você quiser e deve ser parecer com esse aqui:
Assim, todos os certificados aceitos pelo usuário poderão acessar as configurações de rede de sua app (somente quando ela estiver em modo debug). Essa configuração só é necessária caso sua app seja destinado a versão do Android N ou superior (o que ultimamente é o caso da maioria dos aplicativos, já que a Play Store determina que devemos configurar a target version como a mais recente e já passamos da N faz tempo). Depois de criar o arquivo, basta adicioná-lo ao AndroidManifest.xml da aplicação:
Terminada as configurações do app, passaremos agora as configurações do Charles e do seu dispositivo.
Você pode baixar o Charles aqui, ele é um software pago, mas pode ser utilizado por alguns dias de teste. Se achar que vale a pena (devo dizer que vale) você pode comprar uma licença.
A tela inicial do Charles é bem simplificada, o painel da esquerda mostra as chamadas recebidas pelo programa e o painel da direita mostra os detalhes de uma chamada selecionada.
Para configurar o Charles você deve selecionar a opção, Proxy -> SSL Proxying Settings. A janela seguinte será exibida, certifique-se que a opção de habilitar o Proxy esteja selecionada e adicione uma Location com um host wildcard “*”.
Depois disso, selecione Proxy -> Proxy Settings e preencha os dados da seguinte forma:
Pronto, apenas com essas duas configurações o seu Charles está pronto para receber as chamadas. O próximo passo seria configurar o seu dispositivo para que ele envie as chamadas para o servidor de Proxy, a máquina onde o Charles está instalado. Certifique-se de que seu dispositivo esteja conectado na mesma rede que a máquina onde o Charles está instalado, anote o IP da sua máquina, no meu caso como estou no Windows utilizo o comando ipconfig no terminal:
Com o IP da máquina em mãos, devemos acessar as configurações de rede no seu dispositivo. Para isso, basta ir em Configurações -> Rede e Internet -> Wi-Fi. Selecione a rede em que está conectado com um Long Press e clique em Modificar Rede. Na janela que vai aparecer selecione Proxy -> Manual e preencha com as informações da sua máquina:
Depois que você clicar em “Salvar” uma mensagem aparecerá no Charles para que você autorize o dispositivo, caso isso não acontece desligue e religue o WiFi do dispositivo (não será necessário preencher tudo de novo):
A partir de agora o seu dispositivo se conecta através do Proxy (e as chamadas aparecem no Charles), portanto o Charles precisa estar rodando para que você tenha conexão no celular. Para desativar o Proxy basta seguir os passos anteriores e selecionar a opção “Nenhum” em Proxy, quando editar a rede.
Para que o Charles identifique as informações contidas na chamada é preciso instalar o Certificado do Charles no seu dispositivo. Para tanto, com ele conectado ao Charles, acesse chls.pro/ssl em qualquer browser. O Certificado será baixado e uma janela para instalação aparecerá, insira um nome para o certificado (sugestão Charles hehehe) e clique em OK:
Um problema que eu tive quando tentei configurar o Charles no meu dispositivo físico a primeira vez foi a não identificação automática do mesmo. Isso aconteceu porque meu computador estava configurado para não ser “discovarable” na rede e por isso, por mais que eu adicionasse ele como proxy em meu dispositivo, ele não era identificado de jeito nenhum. Ao mudar essa configuração tudo voltou a normal, portante certifique-se que seu computador esteja “discovarable” em sua rede.
Mapeando respostas
Uma das features mais interessantes e poderosas do Charles é a sua capacidade de mapear respostas de chamadas para arquivos locais. Dessa forma as chamadas realizadas pelo seu dispositivo são perfeitamente customizáveis e controláveis através do Charles.
O CinemaBuff faz uma chamada a API to The Movie Database assim que abrimos a app, isso pode ser visto no Charles:
Ao selecionarmos uma das request podemos ver tudo que foi passado de parâmetro e tudo que foi retornado (inclusive o json que forma os dados da lista principal de filmes na app):
Isso é ótimo porque podemos inspecionar os Headers que são trocados, os parâmetros que formam a request e o principal, podemos ver e editar a resposta.
Suponha que você deseja testar a reação do seu app a jsons errados ou vazios, para tanto basta selecionar a requisição que deseja mapear e clicar em Map Local. Na tela seguinte você poderá editar exatamente qual a requisição que deve ser enviada para obter a resposta que vem do arquivo. Se você quiser que o arquivo seja retornado, independente dos query params passados, basta limpar o campo query (e mesmo que seu Web Service tenha parâmetros obrigatórios, sua app ainda receberá a resposta mapeada do arquivo).
That is all folks! Agora, da próxima vez que você precisar verificar as chamadas que sua app fez para o Web Service, não precisará ficar monitorando os logs gerados, basta ativar o Charles e você terá total controle sobre o que sua app receberá.
