Skip to content

Latest commit

 

History

History
43 lines (34 loc) · 3.58 KB

README.md

File metadata and controls

43 lines (34 loc) · 3.58 KB
Raw

gym-workout-list

Layout de telas

https://www.figma.com/file/n7m8odEMe0KxBLybz1Twau/GymApp?node-id=9%3A284

Repositorio de deploy

https://cleberprestes.github.io/buildteste/

Passo a passo do projeto

https://drive.google.com/file/d/1LnDXEo-9JTOHH7tQn7bGQErhsyKfC8ql/view?usp=sharing

  • Obs - O projeto salva e obtem dados através do JSon-server e localStorage. O ao carregar os dados do LocalStorage a aplicação demora alguns segundos para carregar, porque inicialmente busca carregar dados do JSon-Server, caso ele não esteja ativo carrega os dados disponiveis no localStorage.

Script para rodar o JSon-Sever

npm run server

Checklist

  • Criar o repositório no GitHub com a estrutura do Gitflow, ou seja, branches main e develop.

  • Criar branches feature a partir do branch develop para cada nova funcionalidade a ser implementada.

  • Usar algum framework CSS (Bootstrap, Materialize ou outro). Optei pelo Materialize.

  • Apresentar as telas com layout responsivo.

  • Usar componentes de algum framework CSS (Bootstrap, Materialize ou outro)

  • Apresentar as telas com layout responsivo usando ou não algum framework CSS.

  • Construir páginas web com o conceito de componentes. Componentes criados foram: Menu, Footer, Landpage, nametraining, traininiglist, newtraining, trainingdetail

  • Criar o layout da aplicação com componentes, ou seja, o cabeçalho e rodapé precisam ser componentes.

  • Usar pelo menos dois tipos de data-binding (Interpolation, Property Binding, Event Binding e Two Way Data Binding). Interpolation foram utilizados em varias partes, como exemplo no texto que apresenta a origem dos dados, se localStorage ou Json-sever. Two Way Data Binding foi utilizado para inserção de dados no form de cadastro dos treinos.

  • Passar dados via hierarquia de componentes, ou seja, usando @Input ou @Output. Foram utilizados para o titulo "Lista de Treinos". Foi criado um componente somente para essa funcionalidade.

  • Mapear componentes à rotas no módulo de rotas.

  • Criar navegação entre páginas por meio de rotas. São exemplos da navegação entre as paginas a implementação dos botões de voltar, Criar Treinos e Treinos Salvos.

  • Passar dados entre componentes que representam diferentes telas via parâmetros de rotas. Foi utilizado no botão detalhes para passar o id de um treino e exibir os detalhes dele no componente trainingdetail.

  • Validar campos do formulário com REGEX e apresentar os erros. Os campos validados foram o Nome do treino e o nome do Exercicio no componente newtraining.

  • Desabilitar o botão de submit enquanto o formulário está inválido. No componente newtraining o botão de Salvar só é habilitado se o formulario estiver válido.

  • Fazer requisições a API com tratamento da resposta com Promises ou Observables. Foi utilizado o Json-sever como API, o tratamento de resposta utilizado foi para o carregamento de dados do JSon-sever ou do localStorage.

  • Cadastrar uma entidade no Web Storage.

  • Cadastrar uma entidade no JSON Server.

  • Apresentar uma lista de dados com a diretiva estrutural ngFor.A lista de treinos cadastrados é mostrada utilizando a diretiva ngFor.

  • Usar a diretiva ngIf. A diretiva ngIf foi utilizada em varios lugares. Como exemplo no botão treinar que esconde ou mostra os botões de Novo treino e Treino Salvo.

*Obs não foi possivel a total implementação de acordo com projeto do figma, porque considerava a utilização de inputs dinamicos e uma estrutura bastante complexa no JSon. Portanto optou-se por uma estrura mais simples que atendesse os requisitos do projeto.