Formação Angular Monorepo

O intuito desse monorepo é manter todas as aplicações da formação Alura Angular em um único local e funcional.

Apliquei diversas outras ferramentas/tecnologias que não fazem parte da formação, mas as quais tinha vontade de aprendê-las, tais como:

Setup ⚙️

• Instale as dependencias npm install;

Apps (Overview) 🎥

Buscador de Livos

Aplicação que utiliza a API pública do Google para busca de livros.

Aqui apliquei técnicas de FRP(Functional reactive programming) e como utilizar a lib RXJS para trabalhar com streams de dados com observables e como combinar observables com os operadores do RxJS.

Além disso, foi implementado técnicas de acessibilidade com o Angular basenado-se na WCAG (diretrizes de acessibilidade).

demo_buscante.mp4

---

Memoteca

CRUDE simples de memórias e citações.

memoteca_app.mp4

teste_memoteca_e2e.mp4

---

Memorando TODO APP list

App de lista de tarefas simples para aplicar o conceito de animações com Angular.

memorando_app.mp4

---

Rodando os Apps 🛠️

• Buscador de Livos 📖 - npm run buscante-app;
• App Memoteca 📱 - npm run memoteca-app;
• Memorando com animações 🎥 - npm run memorando
• Todo APP ✅ - npm run todo-app;

Rodando os testes e2e de cada projeto com o Cypress:

• App Memoteca 📱 - npm run memoteca-e2e;
• Buscador de Livos 📖 - npm run buscante-e2e;
• Memorando com animações 🎥 - npm run memorando-e2e
• Todo APP ✅ - npm run todo-app-e2e;

Mais detalhes sobre essa formação da Alura (Guideline)

1. Explore as bases do Angular

   Mergulhando no universo do Angular, começando pela criação de aplicações usando a poderosa ferramenta Angular CLI. Aprendendo sobre estrutura de componentes e explorando os conceitos fundamentais, tais como templates, diretivas, services e injeção de dependências. Aprendendo como fazer a configuração de rotas da aplicação e aproveitando o poder do HTTPClient do Angular para executar operações CRUD no seu back-end. Além disso, vi construção de formulários e a aplicação de validações, utilizando as duas abordagens do angular - data driven (formulários reativos) e template driven - proporcionando uma base sólida para sua evolução.

   1. Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD
      1. Router;
      2. ActivatedRoute;
      3. Services com HttpClient;
      4. Injeção de dependências de props;
      5. E algumas diretivas básicas do Angular.
   2. Angular 14: evoluindo a aplicação (Projeto Biblioteca memórias)
      1. Formulários reativos com ReactiveFormsModule, FormGroup;
   3. Formulários orientados a templates (Alura books)

2. Gerencie o ciclo de vida de componentes e fluxo de dados reativos com a biblioteca RxJS

   Aperfeiçoe sua habilidade em controlar o comportamento dos componentes em várias fases de sua existência, desde a inicialização até a destruição, entendendo hooks do ciclo de vida como ngOnInit, ngOnChanges e ngOnDestroy.

   Aprofunde-se na utilização da biblioteca RxJS para programação reativa no Angular. Este passo detalha a criação de observables, a aplicação estratégica de operadores de transformação e combinação e a implementação de fluxos de dados assíncronos, proporcionando uma gestão eficiente de dados reativos em suas aplicações.

   1. Angular: Ciclo de vida (TODO App)
   2. Programação Reativa
   3. RxJS e Angular: programando de forma reativa

3. Melhore a experiência do usuário com animações e interações atrativas no Angular Aqui, você mergulhará no mundo das animações e interações envolventes para aprimorar significativamente a experiência de uso em aplicações Angular. Este passo não só ensinará técnicas de animação, mas também fornecerá insights sobre como gerenciar efetivamente o estado dos componentes para otimizar o desempenho e garantir a estabilidade da sua aplicação.

   1. A importância do motion design na experiência do usuário - Artigo
   2. Angular: torne sua aplicação interativa e personalizada com animações
   3. Como o Motion Design pode contribuir para a UX/UI
   4. Angular: aprimore suas técnicas de animação e crie interfaces ainda mais atraentes

4. Acessibilidade no Angular: aprimorando formulários, modais e rotas Neste último passo você aprenderá como melhorar a acessibilidade de uma aplicação utilizando o framework Angular. Serão abordadas melhorias na acessibilidade em aspectos como a navegação entre as rotas da aplicação, formulários, gerenciamento de foco e fornecimento de feedback auditivo às interações dos usuários. O curso propõe desafios para que você aplique os conhecimentos adquiridos.

   1. Fronteiras do Front-end | EP 08: Tour sobre Acessibilidade na web
   2. Acessibilidade web – Hipsters #21
   3. Acessibilidade no Angular: aprimorando formulários, modais e rotas

TODO (adicionais) ✅

Configurar

• Configurar um Monorepo NX para esses projetos (configurar projetos);
  • Buscante;
  • Memoteca;
  • Todo app;
  • Forms-reativos;
• Configurar estilos do PrimeNg para todos os APPS;
• Configurar Cypress;
• Configurar git hook husky Husky;
• Configurar JEST e testes unitários (alguns).

Desafios opcionais

• Animar outros projetos