BeAPT
Plataforma de gestão de treinos para atletas de alta competição
Daniel Sousa8160334
Daniel Sousa
Front-end
Competências
React
Angular
Sass
Chakra UI
Bootstrap
NodeJS
Percurso Académico
Curso Profissional Técnico de Gestão de Equip. Informáticos
CTeSP Informática de Gestão
Licenciatura Engenharia Informática
BeAPT
Plataforma de gestão de treinos para atletas de alta competição
Daniel Sousa8160334
1
Daniel Sousa
Front-end
Competências
React
Angular
Sass
Chakra UI
Bootstrap
NodeJS
Percurso Académico
Curso Profissional Técnico de Gestão de Equip. Informáticos
CTeSP Informática de Gestão
Licenciatura Engenharia Informática
2
Estrutura
1
Entidade de Acolhimento
Jimmy Boys
2
Projeto
BeAPT
3
Utilizadores
Quem são e quais funcionalidades dispõem?
4
Arquitetura Conceptual
Quais são as "camadas" do projeto?
5
Tecnologias & Ferramentas
Tecnologias & Ferramentas utilizadas durante o desenvolvimento
6
GraphQL
Uso do Apollo Client
7
Componentes React
Reutilização de componentes e propriedades
8
Resultados
O que foi desenvolvido?
9
Trabalhos Futuros
Pontos a implementar ou a melhorar futuramente
3
4
5
Utilizadores
Quem são? Que funcionalidades podem usufruir?
Atletas
Frontoffice
- Definição do objetivo a atingir e do desafio a realizar;
- Edição dos seus dados pessoais;
- Consulta e carregamento de treinos realizados;
- Visualização da sua evolução graficamente.
Treinadores
Backoffice
- Criação de treinos modelo;
- Consulta de dados pessoais e biométricos dos atletas;
- Consulta de treinos realizados e por realizar dos atletas;
- Visualização gráfica da evolução dos atletas.
6
Arquitetura Conceptual
7
Tecnologias & Ferramentas
Tecnologias, Ferramentas e Dependências utilizadas no projeto
Tecnologias
React
TypeScript
Sass
GraphQL
Apollo
TypeORM
PostgreSQL
Ferramentas
Visual Studio Code
Yarn
Dependências
Stripe
Strava
8
GraphQL
Uso do Apollo Client
const client = new ApolloClient({ uri: 'https://localhost:3333/graphql', cache: new InMemoryCache(), });const client = new ApolloClient({ uri: 'https://localhost:3333/graphql', cache: new InMemoryCache(), });
const GET_ATHLETES_BY_SPORT = gql` query getAllAthletes($sport: String) { getAllAthletes(sport: $sport) { name plans { id name } } } ` const { loading, error, data } = useQuery( GET_ATHLETES_BY_SPORT, {variables: { sport: 'btt' }} );const GET_ATHLETES_BY_SPORT = gql` query getAllAthletes($sport: String) { getAllAthletes(sport: $sport) { name plans { id name } } } ` const { loading, error, data } = useQuery( GET_ATHLETES_BY_SPORT, {variables: { sport: 'btt' }} );
GraphQL: Vantagens & Desvantagens
Obtenção de todos os dados necessários apenas num pedido, sem dados desnecessários;
Tempos de resposta reduzidos;
Curva de aprendizagem elevada;
Todas as respostas são devolvidas com Status Code 200;
Armazenamento em cache mais complexo.
9
Componente Button
Propriedade modifier
- Valores Possíveis:
alt-primary,infoedanger
<Button modifier="alt-primary" rounded> Button com Modifier </Button><Button modifier="alt-primary" rounded> Button com Modifier </Button>
<Button modifier="info" rounded> Button com Modifier </Button><Button modifier="info" rounded> Button com Modifier </Button>
<Button modifier="danger" rounded> Button com Modifier </Button><Button modifier="danger" rounded> Button com Modifier </Button>
<Button> Button sem Modifier </Button><Button> Button sem Modifier </Button>
10
Solução Desenvolvida
11
Trabalho Futuro
Pontos a melhorar ou a realizar
Biblioteca de Componentes
Realização de Testes
12