Tornei a descrição do meu perfil no TabNews dinâmica!

Olá a todos! Espero que estejam bem 🙂.

Tenho trabalhado em um projeto pessoal semelhante à aqueles painéis com estatísticas no GitHub como o github-readme-stats, porém com as estatísticas do Duolingo, você pode conferir em duolingo-streak-tracker, ele ainda não está pronto porque procrastinei tive algumas dificuldades, porém já possui uma API que exibe as principais informações do usuário e isso já me bastava. Decidi então, tornar a descrição do meu perfil no TabNews dinâmico com a ofensiva do Duolingo.

Não querendo me gabar 😜, mas tenho uma ofensiva com mais de 700 dias 🔥. Me orgulho um pouco disso e pretendo fazer um post aqui com todas as minhas considerações sobre a plataforma (lembrete pessoal para editar e linkar aqui).

Etapas

1. Buscar os dados do usuário no Duolingo
2. Login no TabNews
3. Editar o perfil no TabNews
4. Executar todos os dias

1. Buscando os dados do Duolingo

Pesquisando sobre API do Duolingo, não encontrei nenhuma implementação oficial, porém achei um repositório em Python onde consigo encontrar os principais endereços, e bom o endereço basicamente é isso: https://www.duolingo.com/2017-06-30/users?username={username} podendo filtrar por alguns campos onde no final utilizei estes: &fields=users{username,streak,courses,id,name,picture,totalXp}

Resultado da requisição na API:

// https://www.duolingo.com/2017-06-30/users?username=marlonangeli&fields=users{username,streak,courses,id,name,picture,totalXp}
{
    "streak": 703,
    "picture": "//simg-ssl.duolingo.com/avatars/649919781/1KGSgo2dX-",
    "name": "Marlon Angeli",
    "totalXp": 47571,
    "username": "marlonangeli",
    "courses": [
        ...
    ],
    "id": 649919781
}

Com isso já tinha tudo o que precisava, assim, criei um projeto com Next.js, que é o framework que estou aprendendo atualmente e subi na Vercel, você pode encontrar em: https://duolingo-tracker.marlonangeli.com.br/.

• Etapa 1

2. Login no TabNews

Foi extremamente fácil, busquei por “documentação TabNews” e encontrei um post bem detalhado feito pelo GabrielSozinho, Documentação da API do TabNews.
Lá encontrei o endpoint e os campos que precisava pra fazer a requisição, que ficou assim:

const response = await fetch("https://www.tabnews.com.br/api/v1/sessions", {
  method: 'POST',
  headers: {
		'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: email,
    password: password,
  }),
});

Na resposta, vem um token que deve ser adicionado nas outras requisições como um Cookie.

• Etapa 2

3. Editar o perfil no TabNews

Funcionalidade relativamente recente, aqui está o PR do merge #1470. Porém, não estava completo na documentação do post acima, fui procurar então no próprio código do TabNews, por que lembro do Filipe mencionar que os testes são como uma documentação do software, e bom, funcionou 🙂. Abaixo o trecho de código no arquivo de testes:

test('Patching itselt with a "description" containing a valid value', async () => {
	const defaultUser = await orchestrator.createUser();
	await orchestrator.activateUser(defaultUser);
	const defaultUserSession = await orchestrator.createSession(defaultUser);
	
	const response = await fetch(`${orchestrator.webserverUrl}/api/v1/users/${defaultUser.username}`, {
	  method: 'patch',
	  headers: {
	    'Content-Type': 'application/json',
	    cookie: `session_id=${defaultUserSession.token}`,
	  },
	
	  body: JSON.stringify({
	    description: 'my description',
	  }),
	});

	...

E vualá, só ajustar um pouco e estava pronto.

• Etapa 3

4. Executar todos os dias

Pensei em GitHub Actions, porém acabei escolhendo o Pipedream pois já tenho algumas automações por lá e é possível executar código Node e Python.

É muito simples e parecido com outras plataformas, configura um trigger e vai adicionando passos.

Após criar um Workflow, é preciso configurar um trigger, que vai acionar a automação, como eu só quero executar uma vez por dia, configurei para executar diariamente às 22h, é possível configurar mais vezes porém existe um limite de crédito devido às outras automações.

Para não deixar as senhas de Login no TabNews expostas no código, utilizei um DataStore que é basicamente um .env, acabei vendo depois sobre as variáveis de ambiente mas aí já estava tudo pronto hehe 😅. Adicionei então a ação de buscar do DataStore, assim, consigo acessar com steps.get_record_or_create.$return_value.<valor>.

Próximo passo, adicionar o código Node.

Para o post não ficar gigante demais e conseguir manter atualizado, adicionei o código neste Gist, mas não há segredo, apenas executa as requisições, não é preciso ser um super código para isso.

Após isso é só testar e corrigir eventuais erros.

• Etapa 4

O resultado vocês podem encontrar no meu perfil e conferir em https://www.duolingo.com/profile/marlonangeli

---

Espero que tenham gostado e, principalmente, tenham pensado em alguma outra ideia para aplicar nos perfis de vocês. Esse “projetinho” em si foi uma ideia boba, mas que me fez criar uma API, lidar com CORS, com tratamento de erros, ler documentação e mais outras, porém o principal, brincar com o que eu gosto, no meu caso foi o Duolingo, porém as possibilidades são infinitas.

Abraço a todos! 🫶