,

FitLogr: aplicativo web para registro de treinos na academia

O FitLogr é um aplicativo web em que usuários cadastrados podem registrar seus treinos na academia e acompanhar seu histórico e sua evolução na atividade física.

Desenvolvi este projeto full-stack após enfrentar problemas técnicos com o aplicativo mobile gratuito que usava para anotar meus treinos. Ou seja, os bugs me faziam perder tempo e minha concentração entre os exercícios na academia.

Além disso, criar o FitLogr foi uma oportunidade de estudar e rever tecnologias que já estudei, mas que sofreram alterações nos últimos anos. E também desenvolver mais um projeto ligado à utilização no mundo real.

O FitLogr possui duas partes. O front end utiliza React com framework Next.js, além do Tailwind CSS para o design das telas. Já o back end consiste em uma API RESTful desenvolvida utilizando Java e Spring Boot, com os frameworks Spring Security, Spring Data e Spring HATEOAS, e banco de dados MariaDB.

Por conta do manifest.json, o web app pode ser instalado em smartphones ao adicioná-lo à tela inicial do dispositivo pelo navegador, e daí ser utilizado como se fosse um aplicativo convencional.

Ambas as partes do FitLogr rodam em contêineres no Google Cloud Run. A API se comunica com o banco de dados MariaDB localizada em uma máquina virtual do Compute Engine.

Tanto os códigos-fonte da API RESTful e do front end do FitLogr estão disponíveis em repositórios no meu GitHub, e a versão ao vivo funcionando neste endereço.

Features do FitLogr

  • Design simples e sem distrações. O foco é no exercício, e não no celular.
  • Login via GitHub ou utilizando login e senha (a autenticação de usuário de demonstração utiliza este método).
  • Autenticação e autorização via JWT
  • Possibilidade de continuar o treino de onde parou após navegar por outras telas do FitLogr ou fechar a aplicação.
  • Visualização das cargas e repetições de exercício em treinos anteriores.
  • Cálculo e visualização do One Repetition Max (1RM) de um exercício no treino atual e nos últimos treinos, utilizando a fórmula de Brzycki.
  • Lista de exercícios disponíveis controlada por administradores para consistência de dados.
  • Três categorias de usuários: administrador, membro e demonstração.
  • Uso de políticas CORS na API para bloquear solicitações fora do ambiente usado pelo front end.
Tela de boas-vindas no FitLogr com os últimos treinos cadastrados em design mobile-first

Login com GitHub

Um dos desafios foi o login com a conta no GitHub e o padrão OAuth. Apesar do Spring Security oferecer suporte, o contexto de ser uma API e, portanto, sem ligação direta com o usuário pelo front end inviabilizou o seu uso.

A solução foi lidar manualmente com as etapas da autenticação via OAuth. Primeiramente, ao receber a autorização, o GitHub redireciona o usuário para uma rota no front end com um código usado em uma requisição à API.

Em seguida, a API recebe esse código e consulta o GitHub para trocá-lo por um token usado para acessar as informações do usuário.

Dessa forma, a API do FitLogr verifica se já existe um usuário cadastrado no banco de dados com o ID do GitHub. Se não houver, o algoritmo registra o usuário com as informações obtidas. Em ambos os casos, a API retorna um token JWT como credencial do usuário para as futuras requisições do front end.

Gerenciamento de dados

Outro desafio foi lidar com os registros de sets e exercícios realizados durante o treino. Por design, a ordem de aparição no objeto JSON é o referencial da sequência de exercícios e sets para a inserção no banco de dados, nas colunas exercise_order e set_order. Veja um exemplo de uma requisição GET de um treino de um usuário:

{
   "id": "eca697ce-63bc-493e-8878-852cf54c4283",
   "user": "3838297d-19cb-43a1-9b2c-dc6eae6a0cf7",
   "date": "2024-01-01T19:54:06.693696Z",
   "name": "Treino de adaptação",
   "comment": "Meu primeiro treino",
   "duration": 60,
   "totalLifted": 100,
   "exercises": [
      {
         "id": "6e971d1a-c8a0-4263-ab9f-c6b75a639d4d",
         "name": "Supino Reto",
         "target": "Chest",
         "equipment": "Barbell",
         "sets": [
            {
               "type": "STANDARD",
               "weight": 20,
               "reps": 5
            }
         ]
      }
   ]
}

Assim, na exibição do treino cadastrado e na tela de edição, a API faz a query no banco de dados usando as colunas de ordenação para construir o JSON na sequência correta.

No processo de edição de treino já cadastrado, analisar todos os dados inseridos, alterados ou removidos exigiria mais do algoritmo. Os dados são centralizados em torno dos sets, fazendo referência às tabelas de exercícios e de metadados do treino (como duração, anotações e data do treino).

Por isso, ao editar um treino, a API do FitLogr remove todos os dados antigos e depois insere os atualizados, mantendo a referência à chave primária da tabela com os metadados do treino. Assim, o sistema evita esforços desnecessários de processamento das informações.

Avatar de Matheus Misumoto

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.