mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
docs: translate more files
Translate projection challenge. Translate more guides: contribute, faq and create-challenge
This commit is contained in:
kabrunko-dev
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: 🟢 Projeção
|
||||
description: Desafio 1 é sobre aprender a projetar elementos DOM através de componentes
|
||||
author: thomas-laforge
|
||||
challengeNumber: 1
|
||||
command: angular-projection
|
||||
blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
|
||||
videoLink:
|
||||
link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
|
||||
alt: Projection video by Arthur Lannelucq
|
||||
flag: FR
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
## Informação
|
||||
|
||||
Em Angular, projeção de conteúdo é uma técnica poderosa para criar componente altamente personalizados. Usar e entender os conceitos do <b>ng-content</b> e <b>ngTemplateOutlet</b> pode melhorar significativamente sua habilidade na criação de componentes compartilháveis.
|
||||
|
||||
Você pode aprender tudo sobre <b>ng-content</b> [aqui](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments), desde projeção simples até casos mais complexos.
|
||||
|
||||
Para aprender sobre <b>ngTemplateOutlet</b>, você pode acessar a documentação [aqui](https://angular.io/api/common/NgTemplateOutlet) junto a alguns exemplos básicos.
|
||||
|
||||
Com essas duas ferramentas em mãos, você está pronto para realizar o desafio.
|
||||
|
||||
## Declaração
|
||||
|
||||
Você começará com uma aplicação totalmente funcional que inclui um _dashboard_, que possui um cartão de professor e de estudante. O objetivo é implementar o cartão de cidade.
|
||||
|
||||
Apesar da aplicação funcionar, a experiência do desenvolvedor (DX) está longe de estar otimizada. Toda vez que você precisar implementar um novo cartão, você terá que modificar o `card.component.ts`. Em projetos reais, esse componente pode ser compartilhado entre várias aplicações. O objetivo do desafio é criar um `CardComponent` que possa ser personalizado sem nenhuma modificação. Uma vez criado o componente, você pode começar a implementar o `CityCardComponent` e assegurar que não mexerá no `CardComponent`.
|
||||
|
||||
## Restrições
|
||||
|
||||
- Você <b>deve</b> refatorar o `CardComponent` e `ListItemComponent`.
|
||||
- A diretiva `NgFor` deve ser declarada e permanecer dentro do `CardComponent`. Você pode ficar instigado em querer movê-la para o `ParentCardComponent` como `TeacherCardComponent`.
|
||||
- `CardComponent` não deve conter nenhum `NgIf` ou `NgSwitch`.
|
||||
- CSS: tente evitar usar `::ng-deep` (motivo [aqui](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)). Ache uma maneira melhor para lidar com o CSS.
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: 🟠 InjectionToken
|
||||
description: Desafio 39 é sobre aprender o poder da injenção de dependências
|
||||
author: thomas-laforge
|
||||
challengeNumber: 39
|
||||
command: angular-injection-token
|
||||
sidebar:
|
||||
order: 118
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Informação
|
||||
|
||||
In this small application, we start with a `VideoComponent` containing a **1-second** timer. The development team decided to use a global constant to store the timer value: `DEFAULT_TIMER`. However, a few weeks later, the product team wants to add a new screen for phone calls called `PhoneComponent`, and we want to reuse the `TimerComponent`. However, the product team wants a timer of **2 seconds**. How can we achieve this?
|
||||
|
||||
## Statement
|
||||
|
||||
Currently, the timer is still 1 second for the `PhoneComponent`. The goal of this challenge is to change the timer value to 2 seconds for the `PhoneComponent`.
|
||||
|
||||
## Constraints
|
||||
|
||||
The use of `@Input` is forbidden. This example is basic, and using `@Input` could be a good option, but in more complex applications, the component we need to update can be deeply nested, making the use of `@Input` a really bad design.
|
||||
|
||||
## Hint
|
||||
|
||||
<details>
|
||||
<summary>Dica 1</summary>
|
||||
|
||||
Looking at this [blog post](https://itnext.io/stop-being-scared-of-injectiontokens-ab22f72f0fe9) can be of great help.
|
||||
|
||||
</details>
|
||||
20
docs/src/content/docs/pt-br/guides/contribute.md
Normal file
20
docs/src/content/docs/pt-br/guides/contribute.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Contribua
|
||||
description: Guia para contribuir
|
||||
sidebar:
|
||||
order: 4
|
||||
---
|
||||
|
||||
Você pode contribuir para este repositório das seguintes maneiras:
|
||||
|
||||
🔥 Criar um novo desafio seguindo as instruções [aqui](/pt-br/guides/create-challenge).
|
||||
|
||||
🔥 Responder desafios e submeter sua resposta (guia [aqui](/pt-br/guides/resolve-challenge)).
|
||||
|
||||
🔥 Comentar as soluções de outras pessoas dando _feedback_ construtivo e solidário.
|
||||
|
||||
🔥 Corrigindo erros de digitação (_typos_) ou erros de inglês na documentação.
|
||||
|
||||
🔥 Enviar um problema (_issue_) para sugerir novas ideias de desafios ou reportar um _bug_.
|
||||
|
||||
🔥 Patrocinar o projeto [aqui](https://github.com/sponsors/tomalaforge).
|
||||
54
docs/src/content/docs/pt-br/guides/create-challenge.md
Normal file
54
docs/src/content/docs/pt-br/guides/create-challenge.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Crie seu próprio desafio
|
||||
description: Guia para criar seu próprio desafio
|
||||
sidebar:
|
||||
order: 5
|
||||
---
|
||||
|
||||
Você tem uma ideia que gostaria de compartilhar, um _bug_ interessante que você está batendo a cabeça em um de seus projetos pessoais ou um truque no Angular que você descobriu. Todas essas possibilidades são um bom ponto de partida para criar um desafio e compartilhar a solução com as outras pessoas.
|
||||
|
||||
Mas como você pode criar esses desafios?
|
||||
|
||||
## Código _Boilerplate_
|
||||
|
||||
Para simplificar o processo, criei um gerador Nx que configurará todo código _boilerplate_ para você começar mais rápido. A maneira mais fácil é rodar, é usando o console Nx: vá para <b>Nx Console > generate > @angular-challenges/cli - challenge</b>
|
||||
|
||||
### Parâmetros
|
||||
|
||||
#### parâmetros obrigatórios
|
||||
|
||||
- <b>title</b>: O título que você desejar dar para seu desafio.
|
||||
:::note[Nota]
|
||||
O título deve ter no máximo 25 caracteres.
|
||||
:::
|
||||
|
||||
- <b>challengeDifficulty</b>: A dificuldade que você acredita que o desafio tem. Têm três níveis de dificuldade: 🟢 fácil / 🟠 médio / 🔴 difícil
|
||||
- <b>name</b>: Nome da aplicação Nx.
|
||||
:::note[Nota]
|
||||
Deve ser escrito em **kebab-case**.
|
||||
:::
|
||||
- <b>docRepository</b>: A categoria do seu desafio: Nx, Angular, Angular Performance, Rxjs, NgRx, Typescript.
|
||||
|
||||
#### parâmetros opcionais
|
||||
|
||||
- <b>directory</b>: Se você quiser que sua aplicação esteja localizada dentro de uma pasta específica de `apps`.
|
||||
- <b>addTest</b>: Se você quer adicionar configuração de testes.
|
||||
|
||||
### O que é criado
|
||||
|
||||
- O gerador criará todos os arquivos necessários para ter uma nova aplicação funcional. Todos esses arquivos serão criado dentro de `apps/${directory}/${name}`
|
||||
- Um arquivo Markdown com a configuração mínima será criado dentro de `docs/src/content/docs/challenges/${docRepository}`
|
||||
|
||||
## Criação do Desafio
|
||||
|
||||
A única coisa que falta é criar seu desafio. 🚀
|
||||
|
||||
:::danger[Perigo]
|
||||
Não esqueça de atualizar a documentação para introduzir seu desafio e providenciar suas instruções.
|
||||
:::
|
||||
|
||||
É sua vez de agir!!! 💪
|
||||
|
||||
## Submissão da Solução
|
||||
|
||||
Depois de uma semana mais ou menos, não esqueça de providenciar sua solução para seu desafio.
|
||||
17
docs/src/content/docs/pt-br/guides/faq.md
Normal file
17
docs/src/content/docs/pt-br/guides/faq.md
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: FAQ
|
||||
description: Respostas para perguntas
|
||||
sidebar:
|
||||
order: 7
|
||||
---
|
||||
|
||||
<details>
|
||||
<summary>Por que minha aplicação não roda ou por que eu encontro erros no meu terminal quando rodo `nx serve`?</summary>
|
||||
|
||||
Na maioria das vezes, o problema surge por que seu `node_modules` está desatualizado e você precisar atualizá-lo executando o comando `npm ci`.
|
||||
|
||||
Se a instalação fracassar, você pode resolver deletando o diretório `node_modules` através do comando `rm -rf node_modules` ou `npx npkill`, e depois executar `npm ci` novamente.
|
||||
|
||||
Se o problema persistir, por favor reporte ele [aqui](https://github.com/tomalaforge/angular-challenges/issues/new).
|
||||
|
||||
</details>
|
||||
Reference in New Issue
Block a user