diff --git a/docs/src/content/docs/pt/challenges/angular/5-crud.md b/docs/src/content/docs/pt/challenges/angular/5-crud.md new file mode 100644 index 0000000..9d8b3a4 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/5-crud.md @@ -0,0 +1,50 @@ +--- +title: 🟢 Aplicação Crud +description: Desafio 5 é sobre refatorar uma aplicação crud is about refactoring a crud application +author: thomas-laforge +challengeNumber: 5 +command: angular-crud +sidebar: + order: 2 +--- + +## Informação + +Comunicar e ter um estado global/local em sincronia com seu backend é o coração de qualquer aplicação. Você necessitará dominar as seguintes melhores práticas para construir aplicações Angular fortes e confiáveis. + +## Declaração + +Neste exercício, você tem uma pequena aplicação CRUD, que tem uma lista de TODOS, atualiza e exclui alguns todos. + +Atualmente temos um exemplo funcional, mas cheio de más práticas. + +### Passo 1: refatorar com melhores práticas + +O que você precisará: + +- Evite **any** como um tipo. Use Interface para aproveitar o sistema de tipos do Typescript para evitar erros +- Use um **serviço separado** para todas suas chamadas http e use um **Signal** para sua lista de todos +- Não **mute** em seus dados + +```typescript +// Evite isto +this.todos[todoUpdated.id - 1] = todoUpdated; + +// Prefira algo assim, mas precisa melhorar, porque queremos manter a mesma ordem. +this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated]; +``` + +### Passo 2: Melhore + +- Adicione um botão **Deletar**: _Documentação de API falsa_ +- Lide com **erros** corretamente. _(Globalmente)_ +- Adicione um indicador de **carregamento** global. _Você pode usar MatProgressSpinnerModule_ + +### Passo 3: Manutenibilidade!! adicione alguns testes + +- Adicione 2/3 testes + +### Step 4: Incrível!!! domine seu estado. + +- Use o **componente store do ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** ou **ngrx/signal-store** como estado local de seu componente. +- Tenha um indicador de carregamento/erro **localizado**, e.g. apenas no Todo sendo processado e **desabilite** todos os botões do Todo processado. _(Dica: você precisará criar um ItemComponent)_