chore(i18n,curriculum): update translations (#43046)
This commit is contained in:
camperbot
GitHub
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `p` dovrebbe contenere le prime parole dell'ulteriore `kitty ipsum text`.
|
||||
Il tuo elemento `p` dovrebbe contenere le prime parole del testo aggiuntivo `kitty ipsum` fornito.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
|
||||
@ -51,7 +51,7 @@ Il tag `a` dovrebbe avere un attributo `href` impostato a "#footer".
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
Il tag `a` non dovrebbe avere un attributo `target`
|
||||
Il tag `a` non dovrebbe avere un attributo `target`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: target-html-elements-with-selectors-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Ora abbiamo una `document ready function`.
|
||||
Ora abbiamo una funzione `document ready`.
|
||||
|
||||
Ora scriviamo la nostra prima istruzione jQuery. Tutte le funzioni di jQuery iniziano con un `$`, di solito indicato come operatore di segno del dollaro, o "bling".
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ Os desafios anteriores cobriram como usar algumas das propriedades de animação
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
Neste caso, a animação irá parar depois de repetir 3 vezes, mas é possível fazer a animação rodar infinitamente definindo esse valor para `infinite`.
|
||||
Neste caso, a animação vai parar depois de repetir 3 vezes, mas é possível fazer a animação rodar infinitamente definindo esse valor para `infinite`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||
|
||||
# --description--
|
||||
|
||||
Neste desafio, você irá alterar a propriedade `opacity` (opacidade) de um elemento animado para que ele desapareça gradualmente ao atingir o lado direito da tela.
|
||||
Neste desafio, você vai alterar a propriedade `opacity` (opacidade) de um elemento animado para que ele desapareça gradualmente ao atingir o lado direito da tela.
|
||||
|
||||
Na animação exibida, o elemento redondo com o fundo gradiente se move para a direita na marca de 50% da animação na regra `@keyframes`.
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||
|
||||
O próximo esquema de layout que o CSS oferece é a posição `fixed`, que é um tipo de posicionamento absoluto que prende um elemento em relação à janela do navegador. Semelhante ao posicionamento absoluto, ele é usado com as propriedades de deslocamento CSS e também remove o elemento do fluxo normal do documento. Outros itens não "percebem" onde ele está posicionado, o que pode exigir alguns ajustes em algum lugar do layout.
|
||||
|
||||
Uma diferença chave entre os posicionamentos `fixed` e `absolute` é que o elemento com o posicionamento fixo não irá se mover quando o usuário rolar a página.
|
||||
Uma diferença chave entre os posicionamentos `fixed` e `absolute` é que o elemento com o posicionamento fixo não vai se mover quando o usuário rolar a página.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: set-the-font-weight-for-multiple-heading-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Você definiu a propriedade `font-size` de cada tag de título no último desafio. neste desafio você irá usar a propriedade `font-weight`.
|
||||
Você definiu a propriedade `font-size` de cada tag de título no último desafio. neste desafio você vai usar a propriedade `font-weight`.
|
||||
|
||||
A propriedade `font-weight` define a grossura ou finura dos caracteres de um texto.
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: improve-compatibility-with-browser-fallbacks
|
||||
|
||||
Ao trabalhar com CSS, você provavelmente terá problemas de compatibilidade entre navegadores em algum momento. É por isso que é importante pensar em um plano B para evitar possíveis problemas.
|
||||
|
||||
Quando o navegador analisa o CSS de uma página web, ele ignora todas as propriedades que não reconhece ou suporta. Por exemplo, se você usar uma variável CSS para atribuir uma cor de fundo em um site, o Internet Explorer irá ignorar a cor de fundo porque não oferece suporte a variáveis CSS. Nesse caso, o navegador usará qualquer outro valor que ele encontrar para essa propriedade. Se ele não conseguir encontrar nenhum outro valor definido para essa propriedade, ele reverterá para o valor padrão, que normalmente não é o ideal.
|
||||
Quando o navegador analisa o CSS de uma página web, ele ignora todas as propriedades que não reconhece ou suporta. Por exemplo, se você usar uma variável CSS para atribuir uma cor de fundo em um site, o Internet Explorer vai ignorar a cor de fundo porque não oferece suporte a variáveis CSS. Nesse caso, o navegador usará qualquer outro valor que ele encontrar para essa propriedade. Se ele não conseguir encontrar nenhum outro valor definido para essa propriedade, ele reverterá para o valor padrão, que normalmente não é o ideal.
|
||||
|
||||
Para evitar esse comportamento, você pode criar um plano B. E isso é tão fácil quanto fornecer outro valor que possua um suporte mais amplo. Dessa forma, um navegador mais antigo terá algo em que se apoiar, enquanto que um navegador mais recente interpretará qualquer estilo declarado posteriormente.
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `p` deve conter as palavras do texto `kitty ipsum text` fornecido.
|
||||
O elemento `p` deve conter as primeiras palavras do texto adicional `kitty ipsum` fornecido.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
|
||||
@ -51,7 +51,7 @@ A tag `a` deve ter o atributo `href` definido com o valor de "#footer".
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
A tag `a` não deve ter o atributo `target`
|
||||
A tag `a` não deve ter o atributo `target`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
|
||||
|
||||
# --description--
|
||||
|
||||
Quando um formulário é enviado, os dados vão para um servidor, e este, por sua vez, irá identificar os valores de cada input. Os inputs do tipo `radio` e `checkbox` têm seus valores identificados a partir do atributo `value`.
|
||||
Quando um formulário é enviado, os dados vão para um servidor, e este, por sua vez, vai identificar os valores de cada input. Os inputs do tipo `radio` e `checkbox` têm seus valores identificados a partir do atributo `value`.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Retorne o menor índice em que um valor (segundo argumento) deve ser inserido no
|
||||
|
||||
Por exemplo, `getIndexToIns([1,2,3,4], 1.5)` deve retornar `1` porque é maior que `1` (índice 0), mas menor que `2` (índice 1).
|
||||
|
||||
Da mesma forma, `getIndexToIns([20,3,5], 19)` deve retornar `2` pois uma vez que o array foi sorteado irá se parecer como `[3,5,20]` e `19` é menor que `20` (índice 2) e maior que `5` (índice 1).
|
||||
Da mesma forma, `getIndexToIns([20,3,5], 19)` deve retornar `2` pois uma vez que o array foi sorteado se parecerá com `[3,5,20]` e `19` é menor que `20` (índice 2) e maior que `5` (índice 1).
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: iterate-with-javascript-while-loops
|
||||
|
||||
Você pode rodar o mesmo código várias vezes usando um laço.
|
||||
|
||||
O primeiro tipo de laço que aprenderemos é chamado de laço `while` porque ele irá rodar enquanto uma condição específica for verdadeira e irá parar uma vez que a condição não for mais verdadeira.
|
||||
O primeiro tipo de laço que aprenderemos é chamado de laço `while` porque ele rodará enquanto uma condição específica for verdadeira e vai parar uma vez que a condição não for mais verdadeira.
|
||||
|
||||
```js
|
||||
var ourArray = [];
|
||||
|
||||
@ -22,13 +22,13 @@ myTest();
|
||||
console.log(loc);
|
||||
```
|
||||
|
||||
A chamada da função `myTest()` irá exibir a string `foo` no console. A linha `console.log(loc)` irá lançar um erro, já que `loc` não foi definido fora da função.
|
||||
A chamada da função `myTest()` vai exibir a string `foo` no console. A linha `console.log(loc)` vai lançar um erro, já que `loc` não foi definido fora da função.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O editor possui dois `console.log` para te ajudar a ver o que está acontecendo. Verifique o console enquanto codifica para ver como muda. Declare uma variável local `myVar` dentro de `myLocalScope` e rode os testes.
|
||||
|
||||
**Nota:** O console ainda exibirá `ReferenceError: myVar is not defined`, mas isso não causará falha nos testes.
|
||||
**Observação:** o console ainda exibirá `ReferenceError: myVar is not defined`, mas isso não causará falha nos testes.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ console.log(oneDown);
|
||||
console.log(threeArr);
|
||||
```
|
||||
|
||||
O primeiro `consol.log` exibirá o valor `6`, e o segundo irá exibir o valor `[1, 4]`.
|
||||
O primeiro `console.log` exibirá o valor `6`, e o segundo exibirá o valor `[1, 4]`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ Isto é um array o qual contém um objeto dentro dele. O objeto possui vários p
|
||||
}
|
||||
```
|
||||
|
||||
**Nota:** Você precisará colocar uma vírgula após cada objeto no array, a não ser que for o último objeto no array.
|
||||
**Observação:** você precisará colocar uma vírgula após cada objeto no array, a não ser que for o último objeto no array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ ourArray[0] = 15;
|
||||
|
||||
`ourArray` agora tem o valor `[15, 40, 30]`.
|
||||
|
||||
**Nota:** Não deve ter espaços entre o nome do array e os colchetes, como `array [0]`. Embora JavaScript é capaz de processar isso corretamente, isso pode causar confusão em outros programadores lendo o seu código.
|
||||
**Observação:** não deve ter espaços entre o nome do array e os colchetes, como `array [0]`. Embora JavaScript é capaz de processar isso corretamente, isso pode causar confusão em outros programadores lendo o seu código.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ switch(val) {
|
||||
}
|
||||
```
|
||||
|
||||
Todos os casos para 1, 2 e 3 irão produzir o mesmo resultado.
|
||||
Todos os casos para 1, 2 e 3 vão produzir o mesmo resultado.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -33,7 +33,7 @@ Escreva uma instrução para definir `answer` para os seguintes intervalos:
|
||||
`4-6` - `Mid`
|
||||
`7-9` - `High`
|
||||
|
||||
**Nota:** Você precisará ter uma instrução `case` para cada número no intervalo.
|
||||
**Observação:** você precisará ter uma instrução `case` para cada número no intervalo.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,13 +11,13 @@ dashedName: practice-comparing-different-values
|
||||
|
||||
Nos últimos dois desafios, aprendemos sobre o operador de igualdade (`==`) e o operador de igualdade estrita (`===`). Vamos fazer uma breve revisão e praticar usando esses operadores mais uma vez.
|
||||
|
||||
Se os valores sendo comparados não são do mesmo tipo, o operador de igualdade irá fazer a conversão de tipo e, então, avaliar os valores. No entanto, o operador de igualdade estrita irá comparar ambos os tipos de dados e os valores, sem converter de um tipo para outro.
|
||||
Se os valores sendo comparados não são do mesmo tipo, o operador de igualdade fará a conversão de tipo e, então, avaliará os valores. No entanto, o operador de igualdade estrita vai comparar ambos os tipos de dados e os valores, sem converter de um tipo para outro.
|
||||
|
||||
**Exemplos**
|
||||
|
||||
`3 == '3'` retorna `true` porque JavaScript faz a conversão de tipo de string para número. `3 === '3'` retorna falso porque os tipos são diferentes e não é feita a conversão de tipo.
|
||||
|
||||
**Nota:** Em JavaScript, você pode determinar o tipo de uma variável ou de um valor, com o operador `typeof`, como se segue:
|
||||
**Observação:** em JavaScript, você pode determinar o tipo de uma variável ou de um valor, com o operador `typeof`, como se segue:
|
||||
|
||||
```js
|
||||
typeof 3
|
||||
|
||||
@ -33,7 +33,7 @@ Aqui `badStr` lançará um erro.
|
||||
|
||||
Na string <dfn>goodStr</dfn> acima, você pode usar ambas as aspas com segurança ao usar a barra invertida `\` como um caractere de escapamento.
|
||||
|
||||
**Nota:** A barra invertida `\` não deve ser confundida com a barra comum `/`. Elas não fazem a mesma coisa.
|
||||
**Observação:** a barra invertida `\` não deve ser confundida com a barra comum `/`. Elas não fazem a mesma coisa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ Você começa com uma função `updateRecords` que recebe um objeto literal, `re
|
||||
- Se `prop` for `tracks` e `value` não for uma string vazia, adicione `value` ao final do array existente de `tracks` do álbum.
|
||||
- Se `value` for uma string vazia, remova a propriedade `prop` recebida do álbum.
|
||||
|
||||
**Nota:** Uma cópia do objeto `recordCollection` é usada para testes.
|
||||
**Observação:** uma cópia do objeto `recordCollection` é usada para testes.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ var myVar;
|
||||
myVar = 5;
|
||||
```
|
||||
|
||||
Primeiro, esse código cria uma variável chamada `myVar`. Em seguida, o código atribui `5` para `myVar`. Agora, se `myVar` aparece novamente no código, o programa irá tratar como se fosse `5`.
|
||||
Primeiro, esse código cria uma variável chamada `myVar`. Em seguida, o código atribui `5` para `myVar`. Agora, se `myVar` aparece novamente no código, o programa vai tratar como se fosse `5`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: understanding-boolean-values
|
||||
|
||||
Outro tipo de dado é o <dfn>Boolean</dfn>. Booleanos podem ser apenas dois valores: `true` ou `false`. Eles basicamente são interruptores pequenos, onde `true` é ligado e `false` é desligado. Esses dois estados são mutuamente exclusivos.
|
||||
|
||||
**Nota:** Valores booleanos nunca são escritos com aspas. As strings `"true"` e `"false"` não são Booleanos e não tem nenhum significado especial em JavaScript.
|
||||
**Observação:** valores booleanos nunca são escritos com aspas. As strings `"true"` e `"false"` não são Booleanos e não tem nenhum significado especial em JavaScript.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: word-blanks
|
||||
|
||||
# --description--
|
||||
|
||||
Nós vamos agora usar nosso conhecimento de strings para criar um "[Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)" estilo de jogo de palavras que chamamos de "Palavras em Branco". Você irá criar uma frase no estilo "Preencha os Espaços em Branco" (opcionalmente humorosa).
|
||||
Nós vamos agora usar nosso conhecimento de strings para criar um "[Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)" estilo de jogo de palavras que chamamos de "Palavras em Branco". Você criará uma frase no estilo "Preencha os Espaços em Branco" (opcionalmente humorosa).
|
||||
|
||||
Em um jogo "Mad Libs", você recebe frases com algumas palavras faltando, como substantivos, verbos, adjetivos e advérbios. Você então irá preencher os pedaços faltantes com palavras de sua escolha em uma forma que a frase completa faça sentido.
|
||||
Em um jogo "Mad Libs", você recebe frases com algumas palavras faltando, como substantivos, verbos, adjetivos e advérbios. Você então preencherá os pedaços faltantes com palavras de sua escolha em uma forma que a frase completa faça sentido.
|
||||
|
||||
Considere a frase - Era realmente **\_\_\_\_** e nós **\_\_\_\_** nós mesmos **\_\_\_\_**. Essa sentença possui três pedaços faltando - um adjetivo, um verbo e um advérbio, e nós podemos adicionar palavras de nossa escolha para completar. Em seguida, podemos atribuir a frase completa para uma variável como se segue:
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ function functionName() {
|
||||
}
|
||||
```
|
||||
|
||||
Você pode chamar ou <dfn>invocar</dfn> essa função ao usar seu nome seguido de parênteses, da seguinte forma: `functionName();` Cada vez que a função é chamada irá imprimir no console a mensagem `Hello World`. Todo o código entre as chaves será executado toda vez que uma função for chamada.
|
||||
Você pode chamar ou <dfn>invocar</dfn> essa função ao usar seu nome seguido de parênteses, da seguinte forma: `functionName();` Cada vez que a função é chamada imprimirá no console a mensagem `Hello World`. Todo o código entre as chaves será executado toda vez que uma função for chamada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: catch-arguments-passed-in-the-wrong-order-when-calling-a-function
|
||||
|
||||
# --description--
|
||||
|
||||
Continuando a discussão sobre chamada de funções, o próximo bug para prestar atenção é quando os argumentos de uma função são fornecidos na ordem incorreta. Se os argumentos forem de diferentes tipos, tal como uma função esperando um array e um inteiro, isso irá provavelmente lançar um erro de tempo de execução. Se os argumentos são do mesmo tipo (todos os inteiros, por exemplo), então a lógica do código não fará sentido. Certifique-se de fornecer todos os argumentos exigidos, na ordem adequada para evitar esses problemas.
|
||||
Continuando a discussão sobre chamada de funções, o próximo bug para prestar atenção é quando os argumentos de uma função são fornecidos na ordem incorreta. Se os argumentos forem de diferentes tipos, tal como uma função esperando um array e um inteiro, isso provavelmente lançará um erro de tempo de execução. Se os argumentos são do mesmo tipo (todos os inteiros, por exemplo), então a lógica do código não fará sentido. Certifique-se de fornecer todos os argumentos exigidos, na ordem adequada para evitar esses problemas.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ if (x = y) {
|
||||
}
|
||||
```
|
||||
|
||||
Nesse exemplo, o bloco de código dentro da instrução `if` irá rodar para qualquer valor de `y`, a não ser que `y` seja falso. O bloco de `else`, que nós esperamos ser executado aqui, não irá realmente rodar.
|
||||
Nesse exemplo, o bloco de código dentro da instrução `if` vai rodar para qualquer valor de `y`, a não ser que `y` seja falso. O bloco de `else`, que nós esperamos ser executado aqui, não vai realmente rodar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ function loopy() {
|
||||
|
||||
# --instructions--
|
||||
|
||||
A função `myFunc()` contém um laço infinito porque a condição de parada `i != 4` nunca será `false` (e então quebrar o laço) - `i` irá incrementar em 2 a cada iteração, e passa direto por 4 já que `i` é ímpar no início. Corrija o operador de comparação para que o laço só rode enquanto `i` for menor ou igual a 4.
|
||||
A função `myFunc()` contém um laço infinito porque a condição de parada `i != 4` nunca será `false` (e então quebrar o laço) - `i` vai incrementar em 2 a cada iteração, e passa direto por 4 já que `i` é ímpar no início. Corrija o operador de comparação para que o laço só rode enquanto `i` for menor ou igual a 4.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ O console da freeCodeCamp é apagado antes de cada execução de testes e, para
|
||||
|
||||
Se você gostaria de ver todos os logs em todos os testes, execute os testes e abra o console do navegador. Se preferir usar o console do navegador e quiser que ele imite o console da freeCodeCamp, coloque `console.clear()` antes de qualquer outra chamada ao `console`, para apagar o console do navegador.
|
||||
|
||||
**Nota:** `console.log` dentro de funções são impressas no console da freeCodeCamp toda vez que essas funções forem chamadas. Isso pode ajudar a depurar (ou debugar) funções que são chamadas durante os testes.
|
||||
**Observação:** `console.log` dentro de funções é impresso no console do freeCodeCamp toda vez que essas funções forem chamadas. Isso pode ajudar a depurar (ou debugar) funções que são chamadas durante os testes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Ambos o Chrome e o Firefox possui excelentes consoles JavaScript, também conhec
|
||||
|
||||
Você pode encontrar Developer tools no menu do seu Chrome ou Web Console no menu do Firefox. Se você estiver usando um navegador diferente, ou um telefone móvel, recomendamos fortemente mudar para o Firefox ou Chrome Desktop.
|
||||
|
||||
O método `console.log()`, o qual "imprime" a saída do que está nos seus parênteses no console, irá provavelmente ser a ferramenta de debug mais útil. Colocá-lo em pontos estratégicos no seu código pode te mostrar os valores intermediários de variáveis. É uma boa prática ter uma ideia do que deveria ser a saída antes de olhar o que é. Ter pontos de verificação para ver o status de seus cálculos ao longo do seu código ajudará a encontrar onde o problema está.
|
||||
O método `console.log()`, o qual "imprime" a saída do que está nos seus parênteses no console, provavelmente será a ferramenta de debug mais útil. Colocá-lo em pontos estratégicos no seu código pode te mostrar os valores intermediários de variáveis. É uma boa prática ter uma ideia do que deveria ser a saída antes de olhar o que é. Ter pontos de verificação para ver o status de seus cálculos ao longo do seu código ajudará a encontrar onde o problema está.
|
||||
|
||||
Aqui está um exemplo para imprimir a string `Hello world!` no console:
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ console.log(numArray);
|
||||
console.log(i);
|
||||
```
|
||||
|
||||
Aqui o console irá exibir os valores `[0, 1, 2]` e `3`.
|
||||
Aqui o console vai exibir os valores `[0, 1, 2]` e `3`.
|
||||
|
||||
Com a palavra-chave `var`, `i` é declarado globalmente. Então quando `i++` é executado, ele atualiza a variável global. Esse código é semelhante ao seguinte:
|
||||
|
||||
@ -37,9 +37,9 @@ console.log(numArray);
|
||||
console.log(i);
|
||||
```
|
||||
|
||||
Aqui o console irá exibir os valores `[0, 1, 2]` e `3`.
|
||||
Aqui o console vai exibir os valores `[0, 1, 2]` e `3`.
|
||||
|
||||
Este comportamento causará problemas se você criasse uma função e armazená-la para depois utilizar dentro de um laço `for` que utiliza a variável `i`. Isso se deve ao fato da função armazenada sempre irá se referir ao valor da variável global `i` atualizada.
|
||||
Este comportamento causará problemas se você criasse uma função e armazená-la para depois utilizar dentro de um laço `for` que utiliza a variável `i`. Isso se deve ao fato da função armazenada sempre vai se referir ao valor da variável global `i` atualizada.
|
||||
|
||||
```js
|
||||
var printNumTwo;
|
||||
@ -53,7 +53,7 @@ for (var i = 0; i < 3; i++) {
|
||||
console.log(printNumTwo());
|
||||
```
|
||||
|
||||
Aqui o console irá exibir o valor `3`.
|
||||
Aqui o console vai exibir o valor `3`.
|
||||
|
||||
Como você pode ver, `printNumTwo()` exibe 3 e não 2. Isso se deve ao fato do valor atribuído a `i` foi atualizado e `printNumTwo()` retorna a variável global `i` e não o valor que `i` tinha quando a função foi criada dentro do laço for. A palavra-chave `let` não segue este comportamento:
|
||||
|
||||
@ -70,7 +70,7 @@ console.log(printNumTwo());
|
||||
console.log(i);
|
||||
```
|
||||
|
||||
Aqui o console irá exibir o valor `2`, e um erro que `i is not defined (i não foi definido)`.
|
||||
Aqui o console vai exibir o valor `2`, e um erro que `i is not defined` (i não foi definido).
|
||||
|
||||
`i` não foi definido porque não foi declarado no escopo global. É declarado apenas dentro da declaração do laço `for`. `printNumTwo()` retornou o valor correto porque três variáveis `i` distintas com valores únicos (0, 1 e 2) foram criados com a palavra-chave `let` dentro da declaração do laço.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: create-a-javascript-promise
|
||||
|
||||
# --description--
|
||||
|
||||
Uma promessa em JavaScript é exatamente o que parece - você faz a promessa de que irá fazer uma tarefa, geralmente de forma assíncrona. Quando a tarefa é finalizada, ou você cumpriu a promessa ou falhou ao tentar. Por ser uma função construtora, você precisa utilizar a palavra-chave `new` para criar uma `Promise`. Ele recebe uma função, como seu arguemento, com dois parâmetros - `resolve` e `reject`. Esses métodos são usados para determinar o resultado da promessa. A sintaxe se parecesse com isso:
|
||||
Uma promessa em JavaScript é exatamente o que parece - você faz a promessa de que vai fazer uma tarefa, geralmente de forma assíncrona. Quando a tarefa é finalizada, ou você cumpriu a promessa ou falhou ao tentar. Por ser uma função construtora, você precisa utilizar a palavra-chave `new` para criar uma `Promise`. Ele recebe uma função, como seu arguemento, com dois parâmetros - `resolve` e `reject`. Esses métodos são usados para determinar o resultado da promessa. A sintaxe se parecesse com isso:
|
||||
|
||||
```js
|
||||
const myPromise = new Promise((resolve, reject) => {
|
||||
|
||||
@ -26,7 +26,7 @@ I am ${person.age} years old.`;
|
||||
console.log(greeting);
|
||||
```
|
||||
|
||||
O console irá exibir as strings `Hello, my name is Zodiac Hasbro!` e `I am 56 years old.`.
|
||||
O console vai exibir as strings `Hello, my name is Zodiac Hasbro!` e `I am 56 years old.`.
|
||||
|
||||
Muitas coisas aconteceram aqui. Primeiro, o exemplo utiliza crases, ou backticks em Inglês, (`` ` ``), ao invés de aspas (`'` ou `"`), ao redor da string. Segundo, note que a string tem mais de uma linha, tanto no código quanto na saída. Isso torna desnecessário inserir `\n` dentro das strings. A sintaxe `${variable}` usada acima é um espaço reservado (placeholder). Basicamente, você não terá mais que usar concatenação com o operador `+`. Para adicionar o valor de uma variável à string, você a envolve com `${` e `}`. Além de poder usar variáveis, você pode incluir outras expressões. Como por exemplo `${a + b}`. Essa nova maneira de criar strings te dá mais flexibilidade na hora de criar string complexas.
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ O console irá exibir um erro devido à reatribuição do valor de `FAV_PET`.
|
||||
|
||||
Como você pode ver, tentar reatribuir uma variável declarada com `const` lançará um erro. Você sempre deve nomear variáveis que você não quer reatribuir, usando a palavra-chave `const`. Isso ajuda quando você acidentalmente tenta reatribuir uma variável que deveria ser constante. Uma prática comum ao nomear constantes é colocar todas as letras em maiúsculas, com palavras separadas por sublinhado (underscore ou underline).
|
||||
|
||||
**Observação:** É comum que os desenvolvedores usem nomes de variáveis maiúsculas para valores imutáveis e minúsculas ou camelCase para valores mutáveis (objetos e arrays). Em um desafio posterior, você verá um exemplo de um nome de variável em minúsculo usado para um array.
|
||||
**Observação:** é comum que os desenvolvedores usem nomes de variáveis maiúsculas para valores imutáveis e minúsculas ou camelCase para valores mutáveis (objetos e arrays). Em um desafio posterior, você verá um exemplo de um nome de variável em minúsculo usado para um array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ var camper = 'David';
|
||||
console.log(camper);
|
||||
```
|
||||
|
||||
Aqui o console irá exibir a string `David`.
|
||||
Aqui o console vai exibir a string `David`.
|
||||
|
||||
Como você pode ver no código acima, a variável `camper` é originalmente declarada com o valor `James` e então substituída pelo valor `David`. Em uma aplicação pequena, você pode não encontrar esse tipo de problema, mas quando seu código se tornar maior, você pode acidentalmente sobrescrever uma variável que você não tinha a intenção. Como esse comportamente não lança nenhum erro, procurar e corrigir bugs se torna mais difícil.
|
||||
Para resolver esse potencial problema com a palavra-chave `var`, uma nova palavra-chave chamada `let` foi introduzida no ES6. Se você tentar substituir `var` por `let` nas declarações de variável do código acima, o resultado será um erro.
|
||||
@ -33,7 +33,7 @@ Esse erro pode ser visto no console do seu navegador. Então, diferente de `var`
|
||||
x = 3.14;
|
||||
```
|
||||
|
||||
O ´codigo acima irá exibir o erro: `x is not defined`.
|
||||
O codigo acima vai exibir o erro: `x is not defined`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: mutate-an-array-declared-with-const
|
||||
|
||||
Variáveis declaradas com `const` têm muitos casos de uso no JavaScript moderno.
|
||||
|
||||
Alguns desenvolvedores preferem criar todas suas variáveis usando `const`, a menos que eles saibam que irão precisar reatribuir o valor. Apenas nesse caso, eles usam `let`.
|
||||
Alguns desenvolvedores preferem criar todas suas variáveis usando `const`, a menos que eles saibam que vão precisar reatribuir o valor. Apenas nesse caso, eles usam `let`.
|
||||
|
||||
No entanto, é importante entender que objetos (incluindo arrays e funções) atribuídos a uma variável usando `const` ainda são mutáveis. Usar a declaração `const` só impede a reatribuição do identificador (nome) da variável.
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ obj.newProp = "Test";
|
||||
console.log(obj);
|
||||
```
|
||||
|
||||
As atribuições `obj.review` e `obj.newProp` não irão funcionar e o console irá exibir o valor `{ name: "FreeCodeCamp", review: "Awesome" }`.
|
||||
As atribuições `obj.review` e `obj.newProp` não vão funcionar e o console vai exibir o valor `{ name: "FreeCodeCamp", review: "Awesome" }`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ dashedName: reuse-javascript-code-using-import
|
||||
import { add } from './math_functions.js';
|
||||
```
|
||||
|
||||
Aqui, `import` irá encontrar a função `add` no arquivo `math_functions.js`, importar apenas essa função e ignorar o resto. O `./` diz ao import para procurar pelo arquivo `math_functions.js` no mesmo diretório que o arquivo atual. O caminho relativo do arquivo (`./`) e a extensão do arquivo (`.js`) são necessários ao usar import dessa forma.
|
||||
Aqui, `import` encontrará a função `add` no arquivo `math_functions.js`, importar apenas essa função e ignorar o resto. O `./` diz ao import para procurar pelo arquivo `math_functions.js` no mesmo diretório que o arquivo atual. O caminho relativo do arquivo (`./`) e a extensão do arquivo (`.js`) são necessários ao usar import dessa forma.
|
||||
|
||||
Você pode importar mais de um item do arquivo ao adicioná-los na instrução `import` dessa forma:
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ Na classe, crie um `getter` para obter a temperatura em Celsius e um `setter` pa
|
||||
|
||||
Lembre-se que `C = 5/9 * (F - 32)` e `F = C * 9.0 / 5 + 32`, aonde `F` é o valor da temperatura em Fahrenheit e `C` é o valor da mesma temperatura em Celsius.
|
||||
|
||||
**Nota:** Quando você implementa isso, você irá rastrar a temperatura dentro da classe em uma escala, ou Fahrenheit ou Celsius.
|
||||
**Observação:** quando você implementa isso, você vai rastrear a temperatura dentro da classe em uma escala, ou Fahrenheit ou Celsius.
|
||||
|
||||
Esse é o poder de um getter e um setter. Você está criando uma API para outro uso, que pode pegar o resultado correto independente de qual está rastreando.
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: diff-two-arrays
|
||||
|
||||
Compare dois arrays e retorne um novo array com qualquer item encontrado em apenas um dos dois arrays passados, mas não ambos. Em outras palavras, retorne a diferença simétrica de dois arrays.
|
||||
|
||||
**Nota:** Você pode retornar o array com seus elementos em qualquer ordem.
|
||||
**Observação:** você pode retornar o array com seus elementos em qualquer ordem.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -14,9 +14,9 @@ O primeiro argumento é a frase para realizar a busca e substituir.
|
||||
|
||||
O segundo argumento é a palavra que você substituirá (antes).
|
||||
|
||||
O terceiro argumento é com o que você irá substituir o segundo argumento (depois).
|
||||
O terceiro argumento é com o que você vai substituir o segundo argumento (depois).
|
||||
|
||||
**Nota:** Preserve a capitalização do primeiro caractere na palavra original quando você estiver substituindo. Por exemplo, se você quiser substituir a palavra `Book` com a palavra `dog`, deve ser substituído com `Dog`
|
||||
**Observação:** preserve a capitalização do primeiro caractere na palavra original quando você estiver substituindo. Por exemplo, se você quiser substituir a palavra `Book` com a palavra `dog`, deve ser substituído com `Dog`
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: seek-and-destroy
|
||||
|
||||
Você receberá um array inicial (o primeiro argumento na função `destroyer`), seguido por um ou mais argumentos. Remova todos os elementos da matriz inicial que são do mesmo valor que esses argumentos.
|
||||
|
||||
**Nota:** Você tem que usar os `argumentos` do objeto.
|
||||
**Observação:** você tem que usar os `arguments` do objeto.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Retorne `true` se a string fornecida for um palíndromo. Caso contrário, retorn
|
||||
|
||||
Um <dfn>palíndromo</dfn> é uma palavra ou frase que é dita da mesma maneira na ordem natural que na ordem inversa, ignorando pontuação, capitalização e espaçamento.
|
||||
|
||||
**Nota:** Você precisará remover **todos os caracteres não alfanuméricos** (pontuação, espaços e símbolos) e transforme tudo na mesma capitalização (letra em minúsculo ou maiúsculo) para verificar se determinada palavra ou frase é um palíndromo.
|
||||
**Observação:** você precisará remover **todos os caracteres não alfanuméricos** (pontuação, espaços e símbolos) e transforme tudo na mesma capitalização (letra em minúsculo ou maiúsculo) para verificar se determinada palavra ou frase é um palíndromo.
|
||||
|
||||
Vamos passar strings em diferentes formatos, como `racecar`, `RaceCarar` e `race CAR` entre outros.
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ Bird.prototype = Object.create(Animal.prototype);
|
||||
Bird.prototype.constructor = Bird;
|
||||
```
|
||||
|
||||
Como adicional do que é herdado da classe `Animal`, você deseja adicionar o comportamento que é único de objetos `Bird`. Aqui, `Bird` irá definir a função `fly()`. As funções são adicionadas ao `protótipo` `Bird` da mesma forma que qualquer função construtora:
|
||||
Como adicional do que é herdado da classe `Animal`, você deseja adicionar o comportamento que é único de objetos `Bird`. Aqui, `Bird` definirá a função `fly()`. As funções são adicionadas ao `protótipo` `Bird` da mesma forma que qualquer função construtora:
|
||||
|
||||
```js
|
||||
Bird.prototype.fly = function() {
|
||||
|
||||
@ -22,7 +22,7 @@ function Bird() {
|
||||
|
||||
O construtor define um objeto `Bird` com propriedades `name`, `color`, e `numLegs` definidos como Albert, blue e 2, respectivamente. Construtores seguem algumas convenções:
|
||||
|
||||
<ul><li>Construtores são definidos com a primeira letra do nome maiúscula para distinguir eles de outras funções que não são <code>constructors</code>.</li><li>Construtores usam a palavra-chave <code>this</code> para definir as propriedades do objeto que eles irão criar. Dentro do construtor, <code>this</code> referencia para um novo objeto quer irá ser criado.</li><li>Construtores definem propriedades e comportamentos em vez de retornar valores como outras funções podem fazer.</li></ul>
|
||||
<ul><li>Construtores são definidos com a primeira letra do nome maiúscula para distinguir eles de outras funções que não são <code>constructors</code>.</li><li>Construtores usam a palavra-chave <code>this</code> para definir as propriedades do objeto que eles criarão. Dentro do construtor, <code>this</code> referencia para um novo objeto quer vai ser criado.</li><li>Construtores definem propriedades e comportamentos em vez de retornar valores como outras funções podem fazer.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ Animal.prototype.eat = function() {
|
||||
};
|
||||
```
|
||||
|
||||
Este e o próximo desafio irá abordar como reutilizar métodos de `Animal` dentro de `Bird` e `Dog` sem ter de definir os métodos novamente. Ele utiliza uma técnica chamada herança. Este desafio cobrirá o primeiro passo: fazer uma instância do `supertype` (ou parente). Você já sabe uma forma de criar instâncias de `Animal` utilizando o operador `new`:
|
||||
Este e o próximo desafio vai abordar como reutilizar métodos de `Animal` dentro de `Bird` e `Dog` sem ter de definir os métodos novamente. Ele utiliza uma técnica chamada herança. Este desafio cobrirá o primeiro passo: fazer uma instância do `supertype` (ou parente). Você já sabe uma forma de criar instâncias de `Animal` utilizando o operador `new`:
|
||||
|
||||
```js
|
||||
let animal = new Animal();
|
||||
|
||||
@ -34,7 +34,7 @@ for (let property in duck) {
|
||||
console.log(ownProps);
|
||||
```
|
||||
|
||||
O console irá exibir o valor `["name", "numLegs"]`.
|
||||
O console vai exibir o valor `["name", "numLegs"]`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ console.log(duck.constructor === Bird);
|
||||
console.log(beagle.constructor === Dog);
|
||||
```
|
||||
|
||||
Ambas as chamadas a `console.log` irão exibir `true` no console.
|
||||
Ambas as chamadas a `console.log` vão exibir `true` no console.
|
||||
|
||||
Note que a propriedade `construtor` é uma referência a função construtora que criou a instância. A vantagem da propriedade `construtor` é que se torna possível verificar essa propriedade para descobrir qual o tipo do objeto. Aqui está um exemplo de como isso poderia ser utilizado:
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ As três chamadas a `match` retornam, na ordem, os valores: `["cat"]`, `["bat"]`
|
||||
|
||||
Capture todas as letras na string `quoteSample`.
|
||||
|
||||
**Nota:** Você quer encontrar tanto maiúsculas quanto minúsculas.
|
||||
**Observação:** você quer encontrar tanto maiúsculas quanto minúsculas.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ As quatro chamadas a `match` retornarão os seguintes valores, nesta ordem: `["b
|
||||
|
||||
Use classe de caracteres de vogais (`a`, `e`, `i`, `o`, `u`) na sua regex `vowelRegex` para encontrar todas as vogais na string `quoteSample`.
|
||||
|
||||
**Nota:** Você quer encontrar tanto maiúsculas quanto minúsculas.
|
||||
**Observação:** você quer encontrar tanto maiúsculas quanto minúsculas.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, Reac
|
||||
|
||||
**Especificação de usuário nº 7:** eu consigo ver um elemento com um `id="timer-label"` correspondente, e que contém a string indicando que uma sessão foi inicializada (por exemplo, "Sessão").
|
||||
|
||||
**Especificação de usuário nº 8:** eu consigo ver um elemento com `id="time-left"` correspondente. OBSERVAÇÃO: Pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (por exemplo, 25:00).
|
||||
**Especificação de usuário nº 8:** eu consigo ver um elemento com `id="time-left"` correspondente. OBSERVAÇÃO: pausado ou em execução, o valor nesse campo deve sempre ser exibido no formato `mm:ss` (por exemplo, 25:00).
|
||||
|
||||
**Especificação de usuário nº 9:** eu consigo ver um elemento clicável com `id="start_stop"` correspondente.
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO'
|
||||
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
**Nota:** Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` irá substituir a aba atual para garantir que o seu trabalho foi salvo.
|
||||
**Observação:** o Twitter não permite que links sejam carregados em um iframe. Tente usar o atributo `target="_blank"` ou `target="_top"` no elemento `#tweet-quote` se o seu tweet não carregar. `target="_top"` vai substituir a aba atual para garantir que o seu trabalho foi salvo.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Antes que nós possamos começar usando jQuery, nós precisamos adicionar alguma
|
||||
|
||||
Primeiro, adicione um elemento `script` no topo da sua página. Certifique-se de fechá-la na próxima linha.
|
||||
|
||||
Seu navegar irá rodar qualquer JavaScript dentro do elemento `script`, incluindo jQuery.
|
||||
O navegador vai rodar qualquer JavaScript dentro do elemento `script`, incluindo jQuery.
|
||||
|
||||
Dentro do seu elemento `script`, adicione esse código: `$(document).ready(function() {` ao seu `script`. Em seguida, feche-o na próxima linha (ainda dentro do elemento `script`) com: `});`
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: remove-an-element-using-jquery
|
||||
|
||||
Agora vamos remover um elemento HTML da sua página usando jQuery.
|
||||
|
||||
jQuery possui uma função chamada `.remove()` que irá remover completamente um elemento HTML
|
||||
jQuery possui uma função chamada `.remove()` que removerá completamente um elemento HTML
|
||||
|
||||
Remova o elemento `#target4` da sua página usando a função `.remove()`.
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: target-html-elements-with-selectors-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Agora temos um `$(document).ready(function () {`.
|
||||
Agora temos uma função `document ready`.
|
||||
|
||||
Agora vamos escrever nossa primeira declaração jQuery. Todas as funções do jQuery começam com um `$`, geralmente são referidas como um operador de sinal de dólar ou como bling.
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Adicione a classe `shake` a todos os botões com classe `.btn`.
|
||||
|
||||
Adicione a classe `btn-primary` ao botão com id `#target1`.
|
||||
|
||||
**Nota:** Você deve estar mirando apenas um elemento e adicionando apenas uma classe de cada vez. Ao todo, seus três seletores individuais acabarão adicionando as três classes `shake`, `animated` e `btn-primary` para `#target1`.
|
||||
**Observação:** você deve estar mirando apenas um elemento e adicionando apenas uma classe de cada vez. Ao todo, seus três seletores individuais acabarão adicionando as três classes `shake`, `animated` e `btn-primary` para `#target1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Para usar esse método, passe nas funções como argumentos, e imediatamente cha
|
||||
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
|
||||
```
|
||||
|
||||
**Nota:** Se você quiser omitir um dos argumentos do método `connect`, você passa `null` no lugar.
|
||||
**Observação:** se você quiser omitir um dos argumentos do método `connect`, você passa `null` no lugar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ O componente `Provider` permite que você forneça `state` e `dispatch` para seu
|
||||
|
||||
Nessas funções, você declara quais pedaços do state você quer ter acesso e quais criadores de ação você precisa ser capaz de despachar. Quando essas funções estiverem no lugar, você verá como usar o método `connect` do React Redux para conectá-los aos seus componentes em outro desafio.
|
||||
|
||||
**Nota:** Nos bastidores, o React Redux usa o método `store.subscribe()` para implementar `mapStateToProps()`.
|
||||
**Observação:** nos bastidores, o React Redux usa o método `store.subscribe()` para implementar `mapStateToProps()`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ React Redux fornece uma pequena API com dois principais recursos: `Provider` e `
|
||||
|
||||
O editor de código agora mostra todos os seus códigos Redux e React dos vários desafios passados. Inclui o store, actions e o componente `DisplayMessages`. O único novo pedaço é o componente `AppWrapper` na parte inferior. Use este componente de nível superior para renderizar o `Provider` de `ReactRedux`, e passar ao store do Redux como uma propriedade. Em seguida, renderize o componente `DisplayMessages` como filho. Quando você terminar, você deve usar seu componente React renderizado para a página.
|
||||
|
||||
**Nota:** Redux React está disponível como uma variável global aqui, então você pode acessar o Provider com notação de ponto. O código no editor aproveita isso e o define para uma constante `Provider` para você usar no método de renderização `AppWrapper`.
|
||||
**Observação:** o React Redux está disponível como uma variável global aqui, então você pode acessar o Provider com notação de ponto. O código no editor aproveita isso e o define para uma constante `Provider` para você usar no método de renderização `AppWrapper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Além de definir e atualizar `state`, você também pode definir métodos para o
|
||||
|
||||
Uma forma comum é explicitamente vincular `this` no construtor para que `this` torne-se vinculado aos métodos da classe quando o componente é inicializado. Você pode ter percebido que o último desafio usou `this.handleClick = this.handleClick.bind(this)` para o método `handleClick` no construtor. Em seguida, quando você chama uma função como `this.setState()` dentro do método da classe, `this` refere-se a classe e não será `undefined`.
|
||||
|
||||
**Nota:** A palavra-chave `this` é um dos aspectos mais confusos do JavaScript mas ele exerce uma papel importante em React. Embora o seu comportamento aqui é completamente normal, essas aulas não são o lugar para uma análise profunda de `this` portanto, por favor consulte outras aulas se o conteúdo acima for confuso!
|
||||
**Observação:** a palavra-chave `this` é um dos aspectos mais confusos do JavaScript mas ele exerce uma papel importante em React. Embora o seu comportamento aqui é completamente normal, essas aulas não são o lugar para uma análise profunda de `this` portanto, por favor consulte outras aulas se o conteúdo acima for confuso!
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ Defina uma nova constante `JSX` que renderiza uma `div` a qual contém os elemen
|
||||
|
||||
Um `h1`, um `p`, e uma lista não ordenada que contém três itens `li`. Você pode incluir qualquer texto que você quiser dentro de cada elemento.
|
||||
|
||||
**Nota:** Ao renderizar vários elementos como este, você pode envolver todos entre parênteses, mas não é estritamente necessário. Note também que este desafio usa uma tag `div` para encapsular todos os elementos filhos dentro de um único elemento pai. Se você remover a `div`, o JSX não será mais transpilável. Tenha isso em mente, uma vez que ele também será aplicado quando você retornar elementos JSX em componentes React.
|
||||
**Observação:** ao renderizar vários elementos como este, você pode envolver todos entre parênteses, mas não é estritamente necessário. Note também que este desafio usa uma tag `div` para encapsular todos os elementos filhos dentro de um único elemento pai. Se você remover a `div`, o JSX não será mais transpilável. Tenha isso em mente, uma vez que ele também será aplicado quando você retornar elementos JSX em componentes React.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ Quando o React encontra uma tag HTML personalizada que faz referência a outro c
|
||||
|
||||
No editor de código, há um simples componente funcional chamado `ChildComponent` e um componente de classe chamado `ParentComponent`. Componha as duas juntas ao renderizar o `ChildComponent` dentro do `ParentComponent`. Certifique-se de fechar a tag `ChildComponent` com uma barra avançada.
|
||||
|
||||
**Nota:** `ChildComponent` é definida com uma função de seta ES6, porque esta é uma prática muito comum ao usar React. No entanto, é do conhecimento geral que se trata apenas de uma função. Se você não estiver familiarizado com a sintaxe de função de seta, por favor, consulte a seção de JavaScript.
|
||||
**Observação:** `ChildComponent` é definida com uma arrow function do ES6, porque esta é uma prática muito comum ao usar React. No entanto, é do conhecimento geral que se trata apenas de uma função. Se você não estiver familiarizado com a sintaxe de função de seta, por favor, consulte a seção de JavaScript.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ O componente `MyForm` é definido com um `form` vazio com um manipulador de envi
|
||||
|
||||
Adicionamos um botão que envia o formulário. Você pode ver que tem o `type` definido como `submit` indicando que é o botão que controla o formulário. Adicione o elemento `input` no `form` e defina seus atributos `value` e `onChange()` como o último desafio. Você deve então completar o método `handleSubmit` para que ele defina a propriedade de estado `submit` do componente para o valor de entrada atual no `state`.
|
||||
|
||||
**Nota:** Você deve chamar o evento `event.preventDefault()` no manipulador de envio, para evitar o comportamento de envio de formulário padrão que atualizará a página web. Por conveniência, o comportamento padrão foi desabilitado aqui para impedir que atualizações redefinam o código do desafio.
|
||||
**Observação:** você deve chamar o evento `event.preventDefault()` no manipulador de envio, para evitar o comportamento de envio de formulário padrão que atualizará a página web. Por conveniência, o comportamento padrão foi desabilitado aqui para impedir que atualizações redefinam o código do desafio.
|
||||
|
||||
Finalmente cria uma tag `h1` após o `form` que renderiza o valor `submit` do `state` do componente. Em seguida você pode digitar no formulário e clicar o botão (ou pressionar enter), e você deve ver seu input renderizado na página.
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ Como um componente JSX representa HTML, você pode juntar vários componentes pa
|
||||
|
||||
O editor de código tem uma função chamada `MyComponent`. Complete essa função para que ela retorne um único elemento `div`, que contém alguma string de texto.
|
||||
|
||||
**Nota:** O texto é considerado filho do elemento `div`, portanto você não poderá usar uma tag de fechamento.
|
||||
**Observação:** o texto é considerado filho do elemento `div`, portanto você não poderá usar uma tag de fechamento.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: give-sibling-elements-a-unique-key-attribute
|
||||
|
||||
O último desafio mostrou como o método `map` é usado para renderizar dinamicamente um número de elementos com base na entrada do usuário. No entanto, faltou uma peça importante desse exemplo. Ao criar um array de elementos, cada um precisa de um atributo `key` definido com um valor único. React usa essas chaves para manter o controle de quais itens são adicionados, alterados ou removidos. Isso ajuda a tornar o processo de re-renderização mais eficiente quando a lista é modificada de qualquer forma.
|
||||
|
||||
**Nota:** As chaves só precisam ser únicas entre elementos irmãos, elas não precisam ser globalmente exclusivas na sua aplicação.
|
||||
**Observação:** as chaves só precisam ser únicas entre elementos irmãos, elas não precisam ser globalmente exclusivas na sua aplicação.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ A habilidade de definir props padrões é um recurso útil em React. A maneira d
|
||||
|
||||
O componente `ShoppingCart` agora renderiza um componente filho `Itens`. Este componente `Items` tem uma prop padrão `quantity` definida como o número inteiro `0`. Substitua a prop padrão passando o valor de `10` para `quantity`.
|
||||
|
||||
**Nota:** Lembre-se de que a sintaxe para adicionar uma prop a um componente fica semelhante à forma como você adiciona atributos HTML. No entanto, uma vez que o valor para `quantity` é um número inteiro, ele não irá entre aspas mas deve estar entre chaves. Por exemplo, `{100}`. Esta sintaxe diz para JSX interpretar o valor entre chaves diretamente como JavaScript.
|
||||
**Observação:** lembre-se de que a sintaxe para adicionar uma prop a um componente fica semelhante à forma como você adiciona atributos HTML. No entanto, uma vez que o valor para `quantity` é um número inteiro, ele não vai entre aspas mas deve estar entre chaves. Por exemplo, `{100}`. Esta sintaxe diz para JSX interpretar o valor entre chaves diretamente como JavaScript.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Você pode passar `state` como "props" para componentes filho, mas você não se
|
||||
|
||||
# --instructions--
|
||||
|
||||
Existem três componentes delineados no editor de código. O componente `MyApp` é o pai que irá renderizar os componentes filhos `GetInput` e `RenderInput`. Adicione o componente `GetInput` ao método de renderização no `MyApp`, então passe uma propriedade chamada `input` atribuída a `inputValue` do `state` do `MyApp`. Também crie uma propriedade chamada `handleChange` e passe o manipulador de evento `handleChange` para ele.
|
||||
Existem três componentes delineados no editor de código. O componente `MyApp` é o pai que vai renderizar os componentes filhos `GetInput` e `RenderInput`. Adicione o componente `GetInput` ao método de renderização no `MyApp`, então passe uma propriedade chamada `input` atribuída a `inputValue` do `state` do `MyApp`. Também crie uma propriedade chamada `handleChange` e passe o manipulador de evento `handleChange` para ele.
|
||||
|
||||
Em seguida, adicione `RenderInput` para o método render em `MyApp`, em seguida crie uma propriedade chamada `input` e passe o `inputValue` de `state` para ela. Depois de terminar, você será capaz de digitar no campo `input` no componente `GetInput`, que então chama o método manipulador em seu pai via props. Isso atualiza a entrada no `state` do pai, que é passado como "props" para ambos os filhos. Observe como os dados fluem entre os componentes e como a única fonte da verdade permanece o `state` do componente pai. Reconheço que esse exemplo é um pouco inventado, mas deve servir para ilustrar como dados e callbacks podem ser passados entre componentes React.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: render-a-class-component-to-the-dom
|
||||
|
||||
# --description--
|
||||
|
||||
Você talvez se lembre de usar a API do ReactDOM em um desafio anterior para renderizar elementos JSX para o DOM. O processo para renderizar componentes React ficará muito parecido. Os últimos desafios focaram em componentes e composição, então a renderização foi feita pra você nos bastidores. No entanto, nenhum código React que você escreva irá renderizar no DOM sem fazer uma chamada para a API do ReactDOM.
|
||||
Você talvez se lembre de usar a API do ReactDOM em um desafio anterior para renderizar elementos JSX para o DOM. O processo para renderizar componentes React ficará muito parecido. Os últimos desafios focaram em componentes e composição, então a renderização foi feita pra você nos bastidores. No entanto, nenhum código React que você escreva vai renderizar no DOM sem fazer uma chamada para a API do ReactDOM.
|
||||
|
||||
Aqui está uma atualização na sintaxe: `ReactDOM.render(componentToRender, targetNode)`. O primeiro argumento é o componente React que você deseja renderizar. O segundo argumento é o nó DOM onde você quer renderizar esse componente dentro.
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ Note que se você faz um componente stateful, nenhum outro componente está cien
|
||||
|
||||
No editor de código, `MyComponent` já é stateful. Defina uma tag `h1` no método de renderização do componente que renderiza o valor de `name` no state do componente.
|
||||
|
||||
**Nota:** O `h1` deve renderizar apenas o valor de `state` e nada mais. Em JSX, qualquer código que você escrever com chaves `{ }` será tratado como JavaScript. Então para acessar o valor do `state` basta incluir a referência em chaves.
|
||||
**Observação:** o `h1` deve renderizar apenas o valor de `state` e nada mais. Em JSX, qualquer código que você escrever com chaves `{ }` será tratado como JavaScript. Então para acessar o valor do `state` basta incluir a referência em chaves.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Outra aplicação de usar JavaScript para controlar sua visão renderizada é as
|
||||
|
||||
MyComponent contém um `boolean` em seu estado que rastreia se você deseja exibir algum elemento na interface do usuário ou não. O `button` alterna o estado deste valor. No momento, ele renderiza a mesma interface do usuário todas as vezes. Reescreva o método `render()` com uma instrução `if/else` para que se `display` for `true`, você retorna a marcação atual. Caso contrário, retorne a marcação sem o elemento `h1`.
|
||||
|
||||
**Nota:** Você deve escrever um `if/else` para passar nos testes. O uso do operador ternário não passará aqui.
|
||||
**Observação:** você deve escrever um `if/else` para passar nos testes. O uso do operador ternário não passará aqui.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ O editor de código tem a maioria do componente `MyToDoList` configurado. Parte
|
||||
|
||||
Dentro do `constructor`, crie um objeto `this.state` e defina dois estados: `userInput` deve ser inicializado como uma string vazia, e `toDoList` deve ser inicializado como um array vazio. Em seguida, exclua o comentário no método `render()` ao lado da variável `items`. Em seu lugar, mapeie sobre o array `toDoList` armazenado no estado interno do componente e renderize dinamicamente um `li` para cada item. Tente inserir a string `eat, code, sleep, repeat` dentro do `textarea`, depois clique no botão e veja o que acontece.
|
||||
|
||||
**Nota:** Você pode saber que todos os elementos filhos do irmão criados por uma operação de mapeamento como esta precisam ser fornecidos com um atributo `key` exclusivo. Não se preocupe, este é o tema do próximo desafio.
|
||||
**Observação:** você pode saber que todos os elementos filhos do irmão criados por uma operação de mapeamento como esta precisam ser fornecidos com um atributo `key` exclusivo. Não se preocupe, este é o tema do próximo desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: use-proptypes-to-define-the-props-you-expect
|
||||
|
||||
React fornece recursos úteis de checagem de tipos para verificar se os componentes recebem propriedades do tipo correto. Por exemplo, o seu aplicativo faz uma chamada de API para recuperar dados que você espera estar em um array, que é então passado para um componente como uma prop. Você pode definir `propTypes` no seu componente para exigir que os dados sejam do tipo `array`. Isso lançará um aviso útil quando os dados forem de qualquer outro tipo.
|
||||
|
||||
É considerada uma boa prática definir `propTypes` quando você sabe o tipo de uma "prop" antes do tempo. Você pode definir uma propriedade `propTypes` para um componente da mesma forma que você definiu `defaultProps`. Fazendo isso irá verificar se "props" de uma determinada chave estão presentes com um determinado tipo. Aqui está um exemplo para exigir o tipo `function` para uma propriedade chamada `handleClick`:
|
||||
É considerada uma boa prática definir `propTypes` quando você sabe o tipo de uma "prop" antes do tempo. Você pode definir uma propriedade `propTypes` para um componente da mesma forma que você definiu `defaultProps`. Fazer isso verificará se as "props" de uma determinada chave estão presentes com um determinado tipo. Aqui está um exemplo para exigir o tipo `function` para uma propriedade chamada `handleClick`:
|
||||
|
||||
```js
|
||||
MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }
|
||||
@ -18,7 +18,7 @@ MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }
|
||||
|
||||
No exemplo acima, a parte `PropTypes.func` verifica se `handleClick` é uma função. Adicionando `isRequired` diz ao React que `handleClick` é uma propriedade necessária para esse componente. Você verá um aviso se essa propriedade não for fornecida. Também observe que `func` representa `function`. Entre os sete tipos primitivos de JavaScript, `function` e `boolean` (escrito como `bool`) são os únicos dois que usam ortografia incomum. Além dos tipos primitivos, existem outros tipos disponíveis. Por exemplo, você pode verificar que uma prop é um elemento React. Por favor, consulte a [documentação](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) para todas as opções.
|
||||
|
||||
**Nota:** A partir do React v15.5.0, `PropTypes` é importado independentemente do React, como: `import PropTypes from 'prop-types';`
|
||||
**Observação:** a partir do React v15.5.0, `PropTypes` é importado independentemente do React, como: `import PropTypes from 'prop-types';`
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: use-the-lifecycle-method-componentwillmount
|
||||
|
||||
Componentes React tem vários métodos especiais que fornecem oportunidades de executar ações em pontos específicos do ciclo de vida de um componente. Esses são chamados métodos do ciclo de vida, ou ganchos do ciclo de vida, e permitem que você capture componentes em certos pontos do tempo. Isso pode ser antes que sejam renderizados, antes que eles atualizem, antes que eles recebam props, antes que eles desmontem e assim por diante. Aqui está uma lista de alguns dos principais métodos do ciclo de vida: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` As próximas aulas cobrirão alguns dos casos de uso básicos para estes métodos de ciclo de vida.
|
||||
|
||||
**Nota:** O método do ciclo de vida `componentWillMount` será descontinuado em uma versão futura de 16.X e removido na versão 17. [(Fonte)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
**Observação:** o método do ciclo de vida `componentWillMount` será descontinuado em uma versão futura de 16.X e removido na versão 17. [(Fonte)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Você pode projetar um componente de estado mais complexo combinando os conceito
|
||||
|
||||
O componente `Counter` mantém controle de um valor `count` em `state`. Existem dois botões que chamam os métodos `increment()` e `decrement()`. Escreva esses métodos para que o valor do contador seja incrementado ou decrementado por 1 quando o botão apropriado for clicado. Além disso, crie um método `reset()`, para que quando o botão reset é clicado, a contagem é definida como 0.
|
||||
|
||||
**Nota:** Certifique-se de não modificar o `className` dos botões. Lembre-se também de adicionar as ligações necessárias para os métodos recém-criados no construtor.
|
||||
**Observação:** certifique-se de não modificar o `className` dos botões. Lembre-se também de adicionar as ligações necessárias para os métodos recém-criados no construtor.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ O `store` do Redux é um objeto que contém e gerencia o `state` da aplicação.
|
||||
|
||||
Declare uma variável `store` e atribua-a ao método `createStore()`, passando no `reducer` como argumento.
|
||||
|
||||
**Nota:** O código no editor usa a sintaxe de argumento padrão ES6 para inicializar este estado para ter um valor de `5`. Se você não está familiarizado com os argumentos padrão, você pode se referir [ à seção ES6 no Curriculum](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions) que aborda este tópico.
|
||||
**Observação:** o código no editor usa a sintaxe de argumento padrão ES6 para inicializar este estado para ter um valor de `5`. Se você não está familiarizado com os argumentos padrão, você pode se referir [ à seção ES6 no Curriculum](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions) que aborda este tópico.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Você pode dizer ao store do Redux como lidar com vários tipos de ação. Digam
|
||||
|
||||
O editor de código tem um store, actions e criadores de actions configurados para você. Preencha a função `reducer` para lidar com várias ações de autenticação. Use a instrução do JavaScript `switch` no `reducer` para responder a diferentes eventos de ação. Este é um padrão para escrever reducers do Redux. O comando switch deve mudar acima de `action.type` e retornar o estado de autenticação apropriado.
|
||||
|
||||
**Nota:** Neste ponto, não se preocupe com imutabilidade do state, já que é pequeno e simples neste exemplo. Para cada ação, você pode retornar um novo objeto — por exemplo, `{authenticated: true}`. Além disso, não se esqueça de escrever um caso `default` na sua instrução switch que retorna o `state`atual. Isso é importante porque uma vez seu aplicativo tem vários redutores, todos eles são executados toda vez que uma ação é enviada, mesmo quando a ação não é relacionada a esse reducer. Nesses casos, você quer garantir que você retorna o `state` atual.
|
||||
**Observação:** neste ponto, não se preocupe com imutabilidade do state, já que é pequeno e simples neste exemplo. Para cada ação, você pode retornar um novo objeto — por exemplo, `{authenticated: true}`. Além disso, não se esqueça de escrever um caso `default` na sua instrução switch que retorna o `state`atual. Isso é importante porque uma vez seu aplicativo tem vários redutores, todos eles são executados toda vez que uma ação é enviada, mesmo quando a ação não é relacionada a esse reducer. Nesses casos, você quer garantir que você retorna o `state` atual.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Uma prática comum ao trabalhar com Redux é atribuir tipos de ação como const
|
||||
|
||||
Declare `LOGIN` e `LOGOUT` como valores `const` e os atribua às strings `'LOGIN'` e `'LOGOUT'`, respectivamente. Então, edite o `authReducer()` e os criadores de ação para fazer referência a essas constantes ao invés de valores string.
|
||||
|
||||
**Nota:** É uma convenção escrever constantes com todas as letras maiúsculas, e essa prática também é padrão no Redux.
|
||||
**Observação:** é uma convenção escrever constantes com todas as letras maiúsculas, e essa prática também é padrão no Redux.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a8b073d06fa14fcfde687aa
|
||||
title: Exercise Tracker
|
||||
title: Registrador de exercícios
|
||||
challengeType: 4
|
||||
forumTopicId: 301505
|
||||
dashedName: exercise-tracker
|
||||
@ -8,17 +8,17 @@ dashedName: exercise-tracker
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://exercise-tracker.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a este: <https://exercise-tracker.freecodecamp.rocks/>. Trabalhar nesse projeto vai fazer com que você escreva seu código usando um dos seguintes métodos:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) and complete your project locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clone [este repositório do GitHub](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) e complete o projeto localmente.
|
||||
- Use [nosso projeto inicial do Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) para completar o projeto.
|
||||
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should provide your own project, not the example URL.
|
||||
Você deve fornecer seu próprio projeto, não o exemplo de URL.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
@ -29,7 +29,7 @@ You should provide your own project, not the example URL.
|
||||
};
|
||||
```
|
||||
|
||||
You can `POST` to `/api/users` with form data `username` to create a new user. The returned response will be an object with `username` and `_id` properties.
|
||||
Você pode fazer a solicitação de `POST` para `/api/users` com dados do formulário `username` para criar um novo usuário. A resposta retornada será um objeto com as propriedades `username` e `_id`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -49,7 +49,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can make a `GET` request to `/api/users` to get an array of all users. Each element in the array is an object containing a user's `username` and `_id`.
|
||||
Você pode fazer uma solicitação de `GET` a `/api/users` para obter um array de todos os usuários. Cada elemento no array é um objeto que contém `username` e `_id` dos usuários.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -66,7 +66,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can `POST` to `/api/users/:_id/exercises` with form data `description`, `duration`, and optionally `date`. If no date is supplied, the current date will be used. The response returned will be the user object with the exercise fields added.
|
||||
Você pode fazer a solicitação de `POST` para `/api/users/:_id/exercises` com os dados do formulário `description`, `duration` e, como opção, `date`. Se nenhuma data for fornecida, a data atual será utilizada. A resposta retornada será o objeto do usuário com os campos de exercício adicionados.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -102,7 +102,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can make a `GET` request to `/api/users/:_id/logs` to retrieve a full exercise log of any user. The returned response will be the user object with a `log` array of all the exercises added. Each log item has the `description`, `duration`, and `date` properties.
|
||||
Você pode fazer uma solicitação de `GET` a `/api/users/:_id/logs` para obter um registro completo dos exercícios de qualquer usuário. A resposta retornada será o objeto de usuário com um array de `log` de todos os exercícios adicionados. Cada item do registro (log) terá as propriedades `description`, `duration` e `date`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -144,7 +144,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
A request to a user's log (`/api/users/:_id/logs`) returns an object with a `count` property representing the number of exercises returned.
|
||||
Uma solicitação para o registro (log) de um usuário (`/api/users/:_id/logs`) retornará um objeto com uma propriedade `count`, que representa o número de exercícios retornados.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -185,7 +185,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can add `from`, `to` and `limit` parameters to a `/api/users/:_id/logs` request to retrieve part of the log of any user. `from` and `to` are dates in `yyyy-mm-dd` format. `limit` is an integer of how many logs to send back.
|
||||
Você pode adicionar os parâmetros `from`, `to` e `limit` a uma solicitação para `/api/users/:_id/logs` para recuperar parte do registro de qualquer usuário. `from` e `to` são datas no formato `yyyy-mm-dd`. `limit` é um número inteiro de quantos registros devem ser enviados de volta.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c443edefaeb5bd0f
|
||||
title: File Metadata Microservice
|
||||
title: Microsserviço de metadados de arquivos
|
||||
challengeType: 4
|
||||
forumTopicId: 301506
|
||||
dashedName: file-metadata-microservice
|
||||
@ -8,21 +8,21 @@ dashedName: file-metadata-microservice
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://file-metadata-microservice.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a este: <https://file-metadata-microservice.freecodecamp.rocks/>. Trabalhar nesse projeto vai fazer com que você escreva seu código usando um dos seguintes métodos:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) and complete your project locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clone [este repositório do GitHub](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) e complete o projeto localmente.
|
||||
- Use [nosso projeto inicial do Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata) para completar o projeto.
|
||||
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field.
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
**HINT:** You can use the `multer` npm package to handle file uploading.
|
||||
**DICA:** você pode usar o pacote `multer` do npm para lidar com o envio de arquivos.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should provide your own project, not the example URL.
|
||||
Você deve fornecer seu próprio projeto, não o exemplo de URL.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
@ -34,7 +34,7 @@ You should provide your own project, not the example URL.
|
||||
};
|
||||
```
|
||||
|
||||
You can submit a form that includes a file upload.
|
||||
Você pode enviar um formulário que inclua o upload de arquivos.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -45,7 +45,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
The form file input field has the `name` attribute set to `upfile`.
|
||||
O campo entrada do arquivo de formulário tem o atributo `name` definido como `upfile`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -56,7 +56,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
When you submit a file, you receive the file `name`, `type`, and `size` in bytes within the JSON response.
|
||||
Ao enviar um arquivo, você recebe `name` (nome), `type` (tipo) e `size` (tamanho, em bytes) do arquivo dentro da resposta em JSON.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c443edefaeb5bdff
|
||||
title: Request Header Parser Microservice
|
||||
title: Microsserviço conversor de requisição de cabeçalho
|
||||
challengeType: 4
|
||||
forumTopicId: 301507
|
||||
dashedName: request-header-parser-microservice
|
||||
@ -8,17 +8,17 @@ dashedName: request-header-parser-microservice
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://request-header-parser-microservice.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a este: <https://request-header-parser-microservice.freecodecamp.rocks/>. Trabalhar nesse projeto vai fazer com que você escreva seu código usando um dos seguintes métodos:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-headerparser/) and complete your project locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clone [este repositório do GitHub](https://github.com/freeCodeCamp/boilerplate-project-headerparser/) e complete o projeto localmente.
|
||||
- Use [nosso projeto inicial do Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser) para completar o projeto.
|
||||
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should provide your own project, not the example URL.
|
||||
Você deve fornecer seu próprio projeto, não o exemplo de URL.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
@ -30,7 +30,7 @@ You should provide your own project, not the example URL.
|
||||
};
|
||||
```
|
||||
|
||||
A request to `/api/whoami` should return a JSON object with your IP address in the `ipaddress` key.
|
||||
Uma solicitação a `/api/whoami` deve retornar um objeto JSON com o seu endereço IP na chave `ipaddress`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -42,7 +42,7 @@ A request to `/api/whoami` should return a JSON object with your IP address in t
|
||||
);
|
||||
```
|
||||
|
||||
A request to `/api/whoami` should return a JSON object with your preferred language in the `language` key.
|
||||
Uma solicitação a `/api/whoami` deve retornar um objeto JSON com o seu idioma preferido na chave `language`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -54,7 +54,7 @@ A request to `/api/whoami` should return a JSON object with your preferred langu
|
||||
);
|
||||
```
|
||||
|
||||
A request to `/api/whoami` should return a JSON object with your software in the `software` key.
|
||||
Uma solicitação a `/api/whoami` deve retornar um objeto JSON com o seu software na chave `software`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c443edefaeb5bd0e
|
||||
title: URL Shortener Microservice
|
||||
title: Microsserviço redutor de URL
|
||||
challengeType: 4
|
||||
forumTopicId: 301509
|
||||
dashedName: url-shortener-microservice
|
||||
@ -8,21 +8,21 @@ dashedName: url-shortener-microservice
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://url-shortener-microservice.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Crie um aplicativo full stack em JavaScript que seja funcionalmente semelhante a este: <https://url-shortener-microservice.freecodecamp.rocks/>. Trabalhar nesse projeto vai fazer com que você escreva seu código usando um dos seguintes métodos:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-urlshortener/) and complete your project locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clone [este repositório do GitHub](https://github.com/freeCodeCamp/boilerplate-project-urlshortener/) e complete o projeto localmente.
|
||||
- Use [nosso projeto inicial do Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener) para completar o projeto.
|
||||
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your projects source code in the `GitHub Link` field.
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
**HINT:** Do not forget to use a body parsing middleware to handle the POST requests. Also, you can use the function `dns.lookup(host, cb)` from the `dns` core module to verify a submitted URL.
|
||||
**DICA:** não se esqueça de usar um middleware de análise do body para tratar as solicitações de POST. Você também pode usar a função `dns.lookup(host, cb)` do módulo central do `dns` para verificar um URL enviado.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should provide your own project, not the example URL.
|
||||
Você deve fornecer seu próprio projeto, não o exemplo de URL.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
@ -34,7 +34,7 @@ You should provide your own project, not the example URL.
|
||||
};
|
||||
```
|
||||
|
||||
You can POST a URL to `/api/shorturl` and get a JSON response with `original_url` and `short_url` properties. Here's an example: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}`
|
||||
Você pode postar um URL para `/api/shorturl` e obter uma resposta em JSON com as propriedades `original_url` e `short_url`. Aqui está um exemplo: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -56,7 +56,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
When you visit `/api/shorturl/<short_url>`, you will be redirected to the original URL.
|
||||
Quando você visitar `/api/shorturl/<short_url>`, será redirecionado para o URL original.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -88,7 +88,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If you pass an invalid URL that doesn't follow the valid `http://www.example.com` format, the JSON response will contain `{ error: 'invalid url' }`
|
||||
Se você passar um URL inválido que não siga o formato válido `http://www.example.com` , a resposta em JSON conterá `{ error: 'invalid url' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -27,7 +27,7 @@ Esse método é útil para separar as operações de servidor em pedaços menore
|
||||
|
||||
Na rota `app.get('/now', ...)`, encadeie uma função middleware e o handler final. Na função middleware, você deverá adicionar o tempo atual no objeto de requisição na chave `req.time`. Você pode usar `new Date().toString()`. No gerenciador, responda com um objeto JSON, pegando a estrutura `{time: req.time}`.
|
||||
|
||||
**Nota:** o teste não vai passar se você não encadear o middleware. Se você montar a função em algum outro lugar, o teste vai falhar, mesmo que o resultado final esteja correto.
|
||||
**Observação:** o teste não vai passar se você não encadear o middleware. Se você montar a função em algum outro lugar, o teste vai falhar, mesmo que o resultado final esteja correto.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ Outro jeito usual de obter a entrada do cliente é ao codificar os dados após o
|
||||
|
||||
Faça uma API de endpoint (URL), montada em `GET /name`. Responda com um documento JSON, pegando a estrutura `{ name: 'firstname lastname'}`. O parâmetros primeiro e último nome devem ser codificados em uma string de consulta como, por exemplo: `?first=firstname&last=lastname`.
|
||||
|
||||
**Nota:** no exercício seguinte, você vai receber dados de uma requisição POST, no mesmo caminho de rota `/name`. Se você quiser, poderá usar o método `app.route(path).get(handler).post(handler)`. Essa sintaxe permite a você encadear diferentes manipuladores do tipo verb no mesmo caminho de rota. Você vai economizar na digitação e ter um código mais limpo.
|
||||
**Observação:** no exercício seguinte, você vai receber dados de uma requisição POST, no mesmo caminho de rota `/name`. Se você quiser, poderá usar o método `app.route(path).get(handler).post(handler)`. Essa sintaxe permite a você encadear diferentes manipuladores do tipo verb no mesmo caminho de rota. Você vai economizar na digitação e ter um código mais limpo.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bed
|
||||
title: Meet the Node console
|
||||
title: Conhecer o console do Node
|
||||
challengeType: 2
|
||||
forumTopicId: 301515
|
||||
dashedName: meet-the-node-console
|
||||
@ -8,27 +8,27 @@ dashedName: meet-the-node-console
|
||||
|
||||
# --description--
|
||||
|
||||
Working on these challenges will involve you writing your code using one of the following methods:
|
||||
Trabalhar nesses desafios vai fazer com que você escreva seu código usando um dos seguintes métodos:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-express/) and complete these challenges locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-express) to complete these challenges.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clone [este repositório do GitHub](https://github.com/freeCodeCamp/boilerplate-express/) e complete esses desafios localmente.
|
||||
- Use [nosso projeto inicial do Replit](https://replit.com/github/freeCodeCamp/boilerplate-express) para completar esses desafios.
|
||||
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`.
|
||||
|
||||
During the development process, it is important to be able to check what’s going on in your code.
|
||||
Durante o processo de desenvolvimento, é importante poder verificar o que está acontecendo no código.
|
||||
|
||||
Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Replit, a terminal is open in the right pane by default.
|
||||
O Node é apenas um ambiente JavaScript. Como o JavaScript lado do client, você pode usar o console para exibir informações úteis de depuração. Em sua máquina local, você veria a saída do console em um terminal. No Replit, um terminal está aberto no painel direito por padrão.
|
||||
|
||||
We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur.
|
||||
Recomendamos que o terminal continue aberto enquanto você trabalha nesses desafios. Ao ler a saída no terminal, você poderá ver os erros que podem ocorrer.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modify the `myApp.js` file to log "Hello World" to the console.
|
||||
Modifique o arquivo `myApp.js` para registrar "Hello World" no console.
|
||||
|
||||
# --hints--
|
||||
|
||||
`"Hello World"` should be in the console
|
||||
`"Hello World"` deve estar no console
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bef
|
||||
title: Serve an HTML File
|
||||
title: Servir um arquivo HTML
|
||||
challengeType: 2
|
||||
forumTopicId: 301516
|
||||
dashedName: serve-an-html-file
|
||||
@ -8,7 +8,7 @@ dashedName: serve-an-html-file
|
||||
|
||||
# --description--
|
||||
|
||||
You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this:
|
||||
Você pode responder às solicitações com um arquivo usando o método `res.sendFile(path)`. Você pode colocá-lo dentro do manipulador de rota `app.get('/', ...)`. Nos bastidores, este método definirá os cabeçalhos apropriados para instruir o navegador sobre como lidar com o arquivo que você deseja enviar, de acordo com o tipo. Então, ele lerá e enviará o arquivo. Este método precisa de um caminho de arquivo absoluto. Recomendamos que use a variável global `__dirname` do Node para calcular o caminho assim:
|
||||
|
||||
```js
|
||||
absolutePath = __dirname + relativePath/file.ext
|
||||
@ -16,13 +16,13 @@ absolutePath = __dirname + relativePath/file.ext
|
||||
|
||||
# --instructions--
|
||||
|
||||
Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that we will use later…), with no style applied.
|
||||
Envie o arquivo `/views/index.html` como uma resposta para solicitações de GET para o caminho `/`. Ao ver sua aplicação ao vivo, você deverá perceber um grande título em HTML (e um formulário, que usaremos mais tarde…), sem nenhum estilo aplicado.
|
||||
|
||||
**Note:** You can edit the solution of the previous challenge or create a new one. If you create a new solution, keep in mind that Express evaluates routes from top to bottom, and executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string.
|
||||
**Observação:** você pode editar a solução do desafio anterior ou criar uma nova. Se você criar uma nova solução, tenha em mente que o Express avalia rotas de cima para baixo e executa o manipulador para a primeira correspondência. Você tem que deixar comentada a solução anterior, ou o servidor continuará respondendo com uma string.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your app should serve the file views/index.html
|
||||
O aplicativo deve servir o arquivo views/index.html
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf1
|
||||
title: Serve JSON on a Specific Route
|
||||
title: Servir JSON em uma rota específica
|
||||
challengeType: 2
|
||||
forumTopicId: 301517
|
||||
dashedName: serve-json-on-a-specific-route
|
||||
@ -8,17 +8,17 @@ dashedName: serve-json-on-a-specific-route
|
||||
|
||||
# --description--
|
||||
|
||||
While an HTML server serves HTML, an API serves data. A <dfn>REST</dfn> (REpresentational State Transfer) API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. These days, the preferred data format for moving information around the web is JSON. Simply put, JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted.
|
||||
Enquanto um servidor HTML serve arquivos em HTML, uma API serve dados. Uma API <dfn>REST</dfn> (Transferência de Estado Representacional) permite a troca de dados de uma maneira simples sem a necessidade de os clients saberem qualquer detalhe sobre o servidor. O client só precisa saber onde o recurso está (qual o seu URL) e a ação que quer realizar nele (o verbo). O verbo GET é usado quando você busca algumas informações, sem modificar nada. Hoje em dia, o formato de dados preferencial para mover informações pela web é o JSON. Simplificando, JSON é uma maneira conveniente de representar um objeto JavaScript como uma string, que então pode ser facilmente transmitido.
|
||||
|
||||
Let's create a simple API by creating a route that responds with JSON at the path `/json`. You can do it as usual, with the `app.get()` method. Inside the route handler, use the method `res.json()`, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes, it converts a valid JavaScript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure `{key: data}`. `data` can be a number, a string, a nested object or an array. `data` can also be a variable or the result of a function call, in which case it will be evaluated before being converted into a string.
|
||||
Vamos criar uma API simples, gerando uma rota que responda com JSON no caminho `/json`. Você pode fazer isso como de costume, com o método `app.get()`. Dentro do manipulador de rota, use o método `res.json()`, passando um objeto como um argumento. Este método fecha o loop de solicitação-resposta, retornando os dados. Nos bastidores, ele converte um objeto JavaScript válido em uma string. Em seguida, define os cabeçalhos apropriados para dizer ao navegador que você está servindo JSON e envia os dados de volta. Um objeto válido tem a estrutura usual `{key: data}`. `data` pode ser um número, uma string, um objeto aninhado ou um array. `data` também podem ser uma variável ou o resultado de uma chamada de função. Nesse caso, ele será avaliado antes de ser convertido em uma string.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Serve the object `{"message": "Hello json"}` as a response, in JSON format, to GET requests to the `/json` route. Then point your browser to `your-app-url/json`, you should see the message on the screen.
|
||||
Sirva o objeto `{"message": "Hello json"}` como uma resposta, no formato JSON, para solicitações de GET feitas à rota `/json`. Em seguida, aponte o navegador para `your-app-url/json`. Você deverá ver a mensagem na tela.
|
||||
|
||||
# --hints--
|
||||
|
||||
The endpoint `/json` should serve the json object `{"message": "Hello json"}`
|
||||
O `/json` do endpoint deve servir o objeto json `{"message": "Hello json"}`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bf0
|
||||
title: Serve Static Assets
|
||||
title: Servir ativos estáticos
|
||||
challengeType: 2
|
||||
forumTopicId: 301518
|
||||
dashedName: serve-static-assets
|
||||
@ -8,21 +8,21 @@ dashedName: serve-static-assets
|
||||
|
||||
# --description--
|
||||
|
||||
An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images).
|
||||
Um servidor HTML geralmente tem um ou mais diretórios acessíveis pelo usuário. Você pode colocar lá os recursos estáticos necessários para a aplicação (folhas de estilos, scripts e imagens).
|
||||
|
||||
In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets.
|
||||
No Express, você pode colocar esta funcionalidade usando o middleware `express.static(path)`, onde o parâmetro `path` é o caminho absoluto da pasta que contém os arquivos.
|
||||
|
||||
If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests.
|
||||
Se você não sabe o que é um middleware... não se preocupe. Discutiremos isso em detalhes mais tarde. Basicamente, middleware são funções que interceptam manipuladores da rota, adicionando algum tipo de informação. Um middleware precisa ser montado usando o método `app.use(path, middlewareFunction)`. O primeiro argumento, `path`, é opcional. Se você não passar esse argumento, o middleware será executado em todas as solicitações.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Mount the `express.static()` middleware to the path `/public` with `app.use()`. The absolute path to the assets folder is `__dirname + /public`.
|
||||
Monte o middleware `express.static()` para o caminho `/public` com `app.use()`. O caminho absoluto para a pasta de arquivos é `__dirname + /public`.
|
||||
|
||||
Now your app should be able to serve a CSS stylesheet. Note that the `/public/style.css` file is referenced in the `/views/index.html` in the project boilerplate. Your front-page should look a little better now!
|
||||
Agora, seu aplicativo deve ser capaz de servir uma folha de estilos de CSS. Observe que o arquivo `/public/style.css` é referenciado em `/views/index.html` no boilerplate do projeto. A página inicial deve estar um pouco melhor agora!
|
||||
|
||||
# --hints--
|
||||
|
||||
Your app should serve asset files from the `/public` directory to the `/public` path
|
||||
Seu aplicativo deve servir arquivos de ativos do diretório `/public` no caminho `/public`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bee
|
||||
title: Start a Working Express Server
|
||||
title: Iniciar um servidor de Express funcional
|
||||
challengeType: 2
|
||||
forumTopicId: 301519
|
||||
dashedName: start-a-working-express-server
|
||||
@ -8,9 +8,9 @@ dashedName: start-a-working-express-server
|
||||
|
||||
# --description--
|
||||
|
||||
In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, we need the app to be running in the background so we added this method in the `server.js` file for you.
|
||||
Nas duas primeiras linhas do arquivo `myApp.js`, você pode ver como é fácil criar um objeto do aplicativo Express. Este objeto tem vários métodos e você aprenderá muitos deles nestes desafios. Um método fundamental é o `app.listen(port)`. Ele diz ao servidor para que escute em uma determinada porta, colocando-o em estado de execução. Para fins de teste, precisamos que o aplicativo esteja sendo executado em segundo plano para que adicionemos este método no arquivo `server.js` para você.
|
||||
|
||||
Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler
|
||||
Vamos servir nossa primeira string! No Express, as rotas têm a seguinte estrutura: `app.METHOD(PATH, HANDLER)`. METHOD é um método http em letras minúsculas. PATH é um caminho relativo no servidor (pode ser uma string ou até mesmo uma expressão regular). HANDLER é uma função que o Express chama quando a rota tem correspondência. Os manipuladores têm o formato `function(req, res) {...}`, onde req é o objeto solicitado, e res é o objeto de resposta. Por exemplo, o manipulador
|
||||
|
||||
```js
|
||||
function(req, res) {
|
||||
@ -18,17 +18,17 @@ function(req, res) {
|
||||
}
|
||||
```
|
||||
|
||||
will serve the string 'Response String'.
|
||||
servirá a string 'Response String'.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Replit.
|
||||
Use o método `app.get()` para servir a string "Hello Express" para solicitações de GET que correspondam ao caminho `/` (root). Certifique-se de que seu código funciona olhando os logs e, em seguida, veja os resultados na pré-visualização se você estiver usando o Replit.
|
||||
|
||||
**Note:** All the code for these lessons should be added in between the few lines of code we have started you off with.
|
||||
**Observação:** todo o código para estas lições deve ser adicionado entre as poucas linhas de código que fornecemos para você no início.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your app should serve the string 'Hello Express'
|
||||
Seu aplicativo deve servir a string 'Hello Express'
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf7
|
||||
title: Use body-parser to Parse POST Requests
|
||||
title: Usar o body-parser para analisar solicitações de POST
|
||||
challengeType: 2
|
||||
forumTopicId: 301520
|
||||
dashedName: use-body-parser-to-parse-post-requests
|
||||
@ -8,9 +8,9 @@ dashedName: use-body-parser-to-parse-post-requests
|
||||
|
||||
# --description--
|
||||
|
||||
Besides GET, there is another common HTTP verb, it is POST. POST is the default method used to send client data with HTML forms. In REST convention, POST is used to send data to create new items in the database (a new user, or a new blog post). You don’t have a database in this project, but you are going to learn how to handle POST requests anyway.
|
||||
Além do GET, existe um outro verbo comum de HTTP, o POST. POST é o método padrão usado para enviar dados do client com formulários HTML. Na convenção de REST, POST é usado para enviar dados para criar novos itens no banco de dados (um novo usuário, ou um nova publicação no blog). Você não tem um banco de dados neste projeto, mas vai aprender como lidar com solicitações de POST, mesmo assim.
|
||||
|
||||
In these kind of requests, the data doesn’t appear in the URL, it is hidden in the request body. The body is a part of the HTTP request, also called the payload. Even though the data is not visible in the URL, this does not mean that it is private. To see why, look at the raw content of an HTTP POST request:
|
||||
Nesse tipo de solicitação, os dados não aparecem no URL. Eles estão ocultos no corpo da solicitação. O corpo (body) é uma parte da solicitação do HTTP, também chamada de payload. Mesmo que os dados não sejam visíveis no URL, isso não significa que sejam privados. Para saber o porquê, consulte o conteúdo bruto de uma solicitação de POST de HTTP:
|
||||
|
||||
```http
|
||||
POST /path/subpath HTTP/1.0
|
||||
@ -22,19 +22,19 @@ Content-Length: 20
|
||||
name=John+Doe&age=25
|
||||
```
|
||||
|
||||
As you can see, the body is encoded like the query string. This is the default format used by HTML forms. With Ajax, you can also use JSON to handle data having a more complex structure. There is also another type of encoding: multipart/form-data. This one is used to upload binary files. In this exercise, you will use a urlencoded body. To parse the data coming from POST requests, you have to install the `body-parser` package. This package allows you to use a series of middleware, which can decode data in different formats.
|
||||
Como você pode ver, o body é codificado como a string de consulta. Este é o formato padrão usado pelos formulários de HTML. Com o Ajax, você também pode usar JSON para tratar os dados tendo uma estrutura mais complexa. Existe também um outro tipo de codificação: multipart/form-data. Esta é usada para enviar arquivos binários. Neste exercício, você usará um body urlencoded. Para analisar os dados provenientes de solicitações de POST, você deve instalar o pacote `body-parser`. Este pacote permite que você use uma série de middleware, que pode decodificar os dados em diferentes formatos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Install the `body-parser` module in your `package.json`. Then, `require` it at the top of the file. Store it in a variable named `bodyParser`. The middleware to handle urlencoded data is returned by `bodyParser.urlencoded({extended: false})`. Pass the function returned by the previous method call to `app.use()`. As usual, the middleware must be mounted before all the routes that depend on it.
|
||||
Instale o módulo `body-parser` no `package.json`. Em seguida, faça o `require` dele no topo do arquivo. Armazene-o em uma variável chamada `bodyParser`. O middleware para manipular dados urlencoded é retornado por `bodyParser.urlencoded({extended: false})`. Passe a função retornada pela chamada do método anterior para `app.use()`. Como sempre, o middleware deve ser montado antes de todas as rotas que dependem dele.
|
||||
|
||||
**Note:** `extended` is a configuration option that tells `body-parser` which parsing needs to be used. When `extended=false` it uses the classic encoding `querystring` library. When `extended=true` it uses `qs` library for parsing.
|
||||
**Observação:** `extended` é uma opção de configuração que informa ao `body-parser` que a análise (parsing) precisa ser usada. Quando `extended=false` ele usa a biblioteca clássica de codificação, `querystring`. Quando `extended=true` ele usa a biblioteca `qs` para a análise.
|
||||
|
||||
When using `extended=false`, values can be only strings or arrays. The object returned when using `querystring` does not prototypically inherit from the default JavaScript `Object`, which means functions like `hasOwnProperty`, `toString` will not be available. The extended version allows more data flexibility, but it is outmatched by JSON.
|
||||
Ao usar `extended=false`, os valores podem ser apenas strings ou arrays. O objeto retornado ao usar `querystring` não herda prototipicamente do `Object` de JavaScript padrão, o que significa que funções como `hasOwnProperty` e `toString` não estarão disponíveis. A versão estendida permite mais flexibilidade aos dados, mas é superada por JSON.
|
||||
|
||||
# --hints--
|
||||
|
||||
The 'body-parser' middleware should be mounted
|
||||
O middleware 'body-parser' deve estar montado
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb3367417b2b2512bfb
|
||||
title: 'How to Use package.json, the Core of Any Node.js Project or npm Package'
|
||||
title: 'Utilizar o package.json, o centro de qualquer projeto do Node.js ou pacote npm'
|
||||
challengeType: 2
|
||||
forumTopicId: 301528
|
||||
dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package
|
||||
@ -8,19 +8,19 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa
|
||||
|
||||
# --description--
|
||||
|
||||
Working on these challenges will involve you writing your code using one of the following methods:
|
||||
Trabalhar nesses desafios vai fazer com que você escreva seu código usando um dos seguintes métodos:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-npm/) and complete these challenges locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-npm) to complete these challenges.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clone [este repositório do GitHub](https://github.com/freeCodeCamp/boilerplate-npm/) e complete esses desafios localmente.
|
||||
- Use [nosso projeto inicial do Replit](https://replit.com/github/freeCodeCamp/boilerplate-npm) para completar esses desafios.
|
||||
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`. Como opção, envie também um link para o código-fonte do projeto no campo `GitHub Link`.
|
||||
|
||||
The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the <head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
|
||||
O arquivo `package.json` é o centro de qualquer projeto do Node.js ou pacote do npm. Ele armazena informações sobre seu projeto, de modo semelhante ao que a seção <head> de um documento HTML usa para descrever o conteúdo de uma página da web. Ele consiste em um único objeto JSON, onde as informações são armazenadas em pares de chave-valor. Existem apenas dois campos obrigatórios: "name" e "version". Porém, é uma boa prática fornecer informações adicionais sobre o seu projeto que possam ser úteis para futuros usuários ou mantenedores.
|
||||
|
||||
If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges.
|
||||
Se você olhar a árvore de arquivos do projeto, você encontrará o arquivo package.json no nível superior da árvore. Este é o arquivo que você vai melhorar nos próximos desafios.
|
||||
|
||||
One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project.
|
||||
Uma das informações mais comuns neste arquivo é o campo `author`. Especifica quem criou o projeto e pode consistir em uma string ou um objeto com detalhes de contato ou outros. Um objeto é recomendado para projetos maiores, mas uma string simples como o exemplo a seguir já servirá para este projeto.
|
||||
|
||||
```json
|
||||
"author": "Jane Doe",
|
||||
@ -28,13 +28,13 @@ One of the most common pieces of information in this file is the `author` field.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add your name as the `author` of the project in the package.json file.
|
||||
Adicione seu nome como o `author` do projeto no arquivo package.json.
|
||||
|
||||
**Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,).
|
||||
**Observação:** lembre-se de que você está escrevendo JSON. Então, todos os nomes de campos devem usar aspas duplas (") e ser separados por uma vírgula (,).
|
||||
|
||||
# --hints--
|
||||
|
||||
package.json should have a valid "author" key
|
||||
O package.json deve ter uma chave "author" válida
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb5367417b2b2512c01
|
||||
title: Manage npm Dependencies By Understanding Semantic Versioning
|
||||
title: Gerenciar dependências do npm entendendo o versionamento semântico
|
||||
challengeType: 2
|
||||
forumTopicId: 301529
|
||||
dashedName: manage-npm-dependencies-by-understanding-semantic-versioning
|
||||
@ -8,23 +8,23 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning
|
||||
|
||||
# --description--
|
||||
|
||||
`Versions` of the npm packages in the dependencies section of your package.json file follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes projects can expect if they update.
|
||||
As `Versions` (versões) dos pacotes do npm na seção de dependências do seu arquivo package.json seguem o que chamamos de Semantic Versioning (SemVer), um padrão do setor para versionamento de software, com o objetivo de facilitar o gerenciamento de dependências. Bibliotecas, frameworks ou outras ferramentas publicadas no npm devem usar o SemVer para comunicar claramente que tipo de mudanças os projetos podem esperar caso eles atualizem.
|
||||
|
||||
Knowing SemVer can be useful when you develop software that uses external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things that worked yesterday suddenly don’t work today. This is how Semantic Versioning works according to the official website:
|
||||
Conhecer o SemVer pode ser útil quando você desenvolve um software que usa dependências externas (algo que você faz quase sempre). Um dia, seu entendimento desses números vai evitar que você introduza acidentalmente alterações que causem problemas em seu projeto, sem compreender por que as coisas que funcionaram ontem, de repente, não funcionam hoje. É assim que o Versionamento Semântico funciona de acordo com o site oficial:
|
||||
|
||||
```json
|
||||
"package": "MAJOR.MINOR.PATCH"
|
||||
```
|
||||
|
||||
The MAJOR version should increment when you make incompatible API changes. The MINOR version should increment when you add functionality in a backwards-compatible manner. The PATCH version should increment when you make backwards-compatible bug fixes. This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.
|
||||
A versão MAJOR (principal) deve incrementar quando você fizer alterações incompatíveis na API. A versão MINOR (secundária) deve incrementar quando adicionar funcionalidades retrocompatíveis. A versão PATCH deve incrementar quando você fizer consertos de bugs retrocompatíveis. Isso significa que PATCHes são correções de bugs e MINORs adicionam novas funcionalidades, mas nenhum deles quebra o que funcionava antes. Por fim, as MAJORs adicionam alterações que não funcionarão com versões anteriores.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the dependencies section of your package.json file, change the `version` of moment to match MAJOR version 2, MINOR version 10 and PATCH version 2
|
||||
Na seção de dependências do seu arquivo package.json, altere a `version` do moment para que corresponda à versão MAJOR 2, à versão MINOR 10 e à versão 2 de PATCH
|
||||
|
||||
# --hints--
|
||||
|
||||
"dependencies" should include "moment"
|
||||
As "dependencies" devem incluir o "moment"
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -43,7 +43,7 @@ In the dependencies section of your package.json file, change the `version` of m
|
||||
);
|
||||
```
|
||||
|
||||
"moment" version should be "2.10.2"
|
||||
A versão do "moment" deve ser a "2.14.0"
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb5367417b2b2512c04
|
||||
title: Remove a Package from Your Dependencies
|
||||
title: Remover um pacote de suas dependências
|
||||
challengeType: 2
|
||||
forumTopicId: 301530
|
||||
dashedName: remove-a-package-from-your-dependencies
|
||||
@ -8,21 +8,21 @@ dashedName: remove-a-package-from-your-dependencies
|
||||
|
||||
# --description--
|
||||
|
||||
You have now tested a few ways you can manage dependencies of your project by using the package.json's dependencies section. You have also included external packages by adding them to the file and even told npm what types of versions you want, by using special characters such as the tilde or the caret.
|
||||
Você agora já testou algumas maneiras de gerenciar as dependências do seu projeto usando a seção de dependências do package.json. Você também incluiu pacotes externos, adicionando-os ao arquivo e até dizendo ao npm quais tipos de versões você quer, usando caracteres especiais como o til ou o circunflexo.
|
||||
|
||||
But what if you want to remove an external package that you no longer need? You might already have guessed it, just remove the corresponding key-value pair for that package from your dependencies.
|
||||
Mas e se você quisesse remover um pacote externo do qual você não precisa mais? Você já deve ter adivinhado: apenas remova o par chave-valor correspondente a esse pacote das dependências.
|
||||
|
||||
This same method applies to removing other fields in your package.json as well
|
||||
Este mesmo método também se aplica à remoção de outros campos no seu package.json
|
||||
|
||||
# --instructions--
|
||||
|
||||
Remove the moment package from your dependencies.
|
||||
Remover o pacote do moment de suas dependências.
|
||||
|
||||
**Note:** Make sure you have the right amount of commas after removing it.
|
||||
**Observação:** certifique-se de que você tem a quantidade certa de vírgulas depois de removê-lo.
|
||||
|
||||
# --hints--
|
||||
|
||||
"dependencies" should not include "moment"
|
||||
As "dependencies" não devem incluir o "moment"
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb5367417b2b2512c02
|
||||
title: Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency
|
||||
title: Usar o til para usar sempre a última versão de patch de uma dependência
|
||||
challengeType: 2
|
||||
forumTopicId: 301532
|
||||
dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency
|
||||
@ -8,9 +8,9 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-
|
||||
|
||||
# --description--
|
||||
|
||||
In the last challenge, you told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases, you don’t want to miss bug fixes since they often include important security patches and (hopefully) don’t break things in doing so.
|
||||
No último desafio, você disse ao npm para incluir apenas uma versão específica de um pacote. Essa é uma maneira útil de congelar suas dependências, caso você precise garantir que diferentes partes do seu projeto permaneçam compatíveis entre si. Mas, na maioria dos casos de uso, você não quer perder as correções de erros, já que elas geralmente incluem correções de segurança importantes e (esperamos que) não quebrem nada ao fazer isso.
|
||||
|
||||
To allow an npm dependency to update to the latest PATCH version, you can prefix the dependency’s version with the tilde (`~`) character. Here's an example of how to allow updates to any 1.3.x version.
|
||||
Para permitir que uma dependência do npm atualize para a última versão de PATCH, você pode prefixar a versão da dependência com o caractere de til (`~`). Aqui está um exemplo de como permitir atualizações para qualquer versão 1.3.x.
|
||||
|
||||
```json
|
||||
"package": "~1.3.8"
|
||||
@ -18,15 +18,15 @@ To allow an npm dependency to update to the latest PATCH version, you can prefix
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the package.json file, your current rule for how npm may upgrade moment is to use a specific version (2.10.2). But now, you want to allow the latest 2.10.x version.
|
||||
No arquivo package.json, sua regra atual de como o npm pode atualizar o moment é usar uma versão específica (2.10.2). Mas agora, você deseja permitir a última versão de 2.10.x.
|
||||
|
||||
Use the tilde (`~`) character to prefix the version of moment in your dependencies, and allow npm to update it to any new PATCH release.
|
||||
Use o caractere de til (`~`) para prefixar a versão do momento em suas dependências e permitir que o npm atualize para qualquer versão de PATCH.
|
||||
|
||||
**Note:** The version numbers themselves should not be changed.
|
||||
**Observação:** os números da versão em si não devem ser alterados.
|
||||
|
||||
# --hints--
|
||||
|
||||
"dependencies" should include "moment"
|
||||
"dependencies" deve incluir o "moment"
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -45,7 +45,7 @@ Use the tilde (`~`) character to prefix the version of moment in your dependenci
|
||||
);
|
||||
```
|
||||
|
||||
"moment" version should match "~2.10.2"
|
||||
A versão do "moment" deve corresponder a "~2.10.2"
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb8367417b2b2512c11
|
||||
title: Delete Many Documents with model.remove()
|
||||
title: Excluir vários documentos com model.remove()
|
||||
challengeType: 2
|
||||
forumTopicId: 301538
|
||||
dashedName: delete-many-documents-with-model-remove
|
||||
@ -8,17 +8,17 @@ dashedName: delete-many-documents-with-model-remove
|
||||
|
||||
# --description--
|
||||
|
||||
`Model.remove()` is useful to delete all the documents matching given criteria.
|
||||
`Model.remove()` é útil para excluir todos os documentos que correspondem a determinados critérios.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modify the `removeManyPeople` function to delete all the people whose name is within the variable `nameToRemove`, using `Model.remove()`. Pass it to a query document with the `name` field set, and a callback.
|
||||
Modifique a função `removeManyPeople` para excluir todas as pessoas cujo nome esteja dentro da variável `nameToRemove`, usando `Model.remove()`. Passe-a a um documento de consulta com o campo `name` definido e uma função de callback.
|
||||
|
||||
**Note:** The `Model.remove()` doesn’t return the deleted document, but a JSON object containing the outcome of the operation, and the number of items affected. Don’t forget to pass it to the `done()` callback, since we use it in tests.
|
||||
**Observação:** `Model.remove()` não retorna o documento excluído, mas um objeto JSON que contém o resultado da operação e o número de itens afetado. Não se esqueça de passar o objeto para a função de callback `done()`, já que a usamos nos testes.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deleting many items at once should succeed
|
||||
Você deve ter sucesso na exclusão de vários itens
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb6367417b2b2512c06
|
||||
title: Install and Set Up Mongoose
|
||||
title: Instalar e configurar o Mongoose
|
||||
challengeType: 2
|
||||
forumTopicId: 301540
|
||||
dashedName: install-and-set-up-mongoose
|
||||
@ -8,21 +8,21 @@ dashedName: install-and-set-up-mongoose
|
||||
|
||||
# --description--
|
||||
|
||||
Working on these challenges will involve you writing your code using one of the following methods:
|
||||
Trabalhar nesses desafios vai fazer com que você escreva seu código usando um dos seguintes métodos:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) and complete these challenges locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose) to complete these challenges.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clone [este repositório do GitHub](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) e complete esses desafios localmente.
|
||||
- Use [nosso projeto inicial do Replit](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose) para completar esses desafios.
|
||||
- Use um construtor de site de sua escolha para completar o projeto. Certifique-se de incorporar todos os arquivos do nosso repositório no GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
|
||||
Quando terminar, certifique-se de que uma demonstração funcional do seu projeto está hospedada em algum lugar público. Em seguida, envie o URL para ela no campo `Solution Link`.
|
||||
|
||||
In this challenge, you will set up a MongoDB Atlas database and import the required packages to connect to it.
|
||||
Neste desafio, você vai configurar um banco de dados do MongoDB Atlas e importar os pacotes necessários para se conectar a ele.
|
||||
|
||||
Follow <a href='https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/' rel='noopener noreferrer' target='_blank'>this tutorial</a> to set up a hosted database on MongoDB Atlas.
|
||||
Siga <a href='https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/' rel='noopener noreferrer' target='_blank'>este tutorial</a> para configurar um banco de dados hospedado no MongoDB Atlas.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add `mongodb` and `mongoose` to the project’s `package.json`. Then, require mongoose as `mongoose` in `myApp.js`. Create a `.env` file and add a `MONGO_URI` variable to it. Its value should be your MongoDB Atlas database URI. Be sure to surround the URI with single or double quotes, and remember that you can't use spaces around the `=` in environment variables. For example, `MONGO_URI='VALUE'`. When you are done, connect to the database using the following syntax:
|
||||
Adicione `mongodb` e `mongoose` ao `package.json` do projeto. Depois, solicite o mongoose como `mongoose` no `myApp.js`. Crie um arquivo `.env` e adicione uma variável `MONGO_URI` a ele. Esse valor deve ser o URI de banco de dados do MongoDB Atlas. Não se esqueça de cercar o URI com aspas simples ou duplas. Lembre-se de que você não pode usar espaços ao redor de `=` em variáveis de ambiente. Por exemplo, `MONGO_URI='VALUE'`. Quando terminar, conecte-se ao banco de dados utilizando a seguinte sintaxe:
|
||||
|
||||
```js
|
||||
mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true });
|
||||
@ -30,7 +30,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }
|
||||
|
||||
# --hints--
|
||||
|
||||
"mongodb" dependency should be in package.json
|
||||
A dependência "mongodb" deve estar no package.json
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -45,7 +45,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }
|
||||
);
|
||||
```
|
||||
|
||||
"mongoose" dependency should be in package.json
|
||||
A dependência "mongoose" deve estar no package.json
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -60,7 +60,7 @@ mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true }
|
||||
);
|
||||
```
|
||||
|
||||
"mongoose" should be connected to a database
|
||||
O "mongoose" deve estar conectado a um banco de dados
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fb8367417b2b2512c0e
|
||||
title: 'Perform Classic Updates by Running Find, Edit, then Save'
|
||||
title: 'Realizar atualizações clássicas executando Find, Edit e Save'
|
||||
challengeType: 2
|
||||
forumTopicId: 301541
|
||||
dashedName: perform-classic-updates-by-running-find-edit-then-save
|
||||
@ -8,17 +8,17 @@ dashedName: perform-classic-updates-by-running-find-edit-then-save
|
||||
|
||||
# --description--
|
||||
|
||||
In the good old days, this was what you needed to do if you wanted to edit a document, and be able to use it somehow (e.g. sending it back in a server response). Mongoose has a dedicated updating method: `Model.update()`. It is bound to the low-level mongo driver. It can bulk-edit many documents matching certain criteria, but it doesn’t send back the updated document, only a 'status' message. Furthermore, it makes model validations difficult, because it just directly calls the mongo driver.
|
||||
Nos bons e velhos tempos, era isso que você precisava fazer se você quisesse editar um documento e ser capaz de usá-lo de algum modo (ou seja, enviando o documento de volta em uma resposta do servidor). O Mongoose tem um método dedicado à atualização: `Model.update()`. Ele está vinculado ao driver do mongo de nível mais baixo. Ele pode editar em massa muitos documentos que correspondem a certos critérios, mas não envia de volta o documento atualizado, apenas uma mensagem de 'status'. Além disso, ele dificulta as validações de modelo, porque apenas chama diretamente o driver do mongo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modify the `findEditThenSave` function to find a person by `_id` (use any of the above methods) with the parameter `personId` as search key. Add `"hamburger"` to the list of the person's `favoriteFoods` (you can use `Array.push()`). Then - inside the find callback - `save()` the updated `Person`.
|
||||
Modifique a função `findEditThenSave` para encontrar uma pessoa por `_id` (use qualquer um dos métodos acima) com o parâmetro `personId` como chave de pesquisa. Adicione `"hamburger"` à lista dos `favoriteFoods` da pessoa (você pode usar `Array.push()`). Em seguida, dentro do callback de find, use `save()` para salvar a `Person` atualizada.
|
||||
|
||||
**Note:** This may be tricky, if in your Schema, you declared `favoriteFoods` as an Array, without specifying the type (i.e. `[String]`). In that case, `favoriteFoods` defaults to Mixed type, and you have to manually mark it as edited using `document.markModified('edited-field')`. See [Mongoose documentation](https://mongoosejs.com/docs/schematypes.html#Mixed)
|
||||
**Observação:** isso pode ser complicado, se em seu Schema você declarou as `favoriteFoods` como um array, sem especificar o tipo (por exemplo, `[String]`). Nesse caso, `favoriteFoods` tem como padrão o tipo Mixed e você precisa marcá-lo manualmente como editado usando `document.markModified('edited-field')`. Consulte a [documentação do Mongoose](https://mongoosejs.com/docs/schematypes.html#Mixed)
|
||||
|
||||
# --hints--
|
||||
|
||||
Find-edit-update an item should succeed
|
||||
Você deve ter sucesso em encontrar, editar e atualizar um item
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5895f70df9fc0f352b528e68
|
||||
title: Authentication Strategies
|
||||
title: Estratégias de autenticação
|
||||
challengeType: 2
|
||||
forumTopicId: 301547
|
||||
dashedName: authentication-strategies
|
||||
@ -8,11 +8,11 @@ dashedName: authentication-strategies
|
||||
|
||||
# --description--
|
||||
|
||||
A strategy is a way of authenticating a user. You can use a strategy for allowing users to authenticate based on locally saved information (if you have them register first) or from a variety of providers such as Google or GitHub. For this project, we will set up a local strategy. To see a list of the hundreds of strategies, visit Passport's site [here](http://passportjs.org/).
|
||||
Uma estratégia é uma maneira de autenticar um usuário. Você pode usar uma estratégia para permitir que os usuários se autentiquem com base em informações salvas localmente (se você os tem registrados primeiro) ou em uma variedade de provedores, como o Google ou o GitHub. Para este projeto, vamos configurar uma estratégia local. Para ver uma lista das centenas de estratégias, visite o site do Passport [aqui](http://passportjs.org/).
|
||||
|
||||
Add `passport-local@~1.0.0` as a dependency and add it to your server as follows: `const LocalStrategy = require('passport-local');`
|
||||
Adicione `passport-local@~1.0.0` como uma dependência e adicione-a ao seu servidor da seguinte forma: `const LocalStrategy = require('passport-local');`
|
||||
|
||||
Now you will have to tell passport to **use** an instantiated LocalStrategy object with a few settings defined. Make sure this (as well as everything from this point on) is encapsulated in the database connection since it relies on it!
|
||||
Agora, você precisará dizer ao passport para **usar** um objeto LocalStrategy instanciado com algumas configurações definidas. Certifique-se de que isso (assim como tudo a partir desse ponto) esteja encapsulado na conexão do banco de dados, já que isso depende dela!
|
||||
|
||||
```js
|
||||
passport.use(new LocalStrategy(
|
||||
@ -28,17 +28,17 @@ passport.use(new LocalStrategy(
|
||||
));
|
||||
```
|
||||
|
||||
This is defining the process to use when we try to authenticate someone locally. First, it tries to find a user in our database with the username entered, then it checks for the password to match, then finally, if no errors have popped up that we checked for, like an incorrect password, the `user`'s object is returned and they are authenticated.
|
||||
Isso está definindo o processo a ser usado quando tentamos autenticar alguém localmente. Primeiro, há a tentativa de encontrar um usuário em nosso banco de dados com o nome de usuário inserido. Depois, verifica-se a senha correspondente e, em seguida, por fim, se nenhum erro tiver aparecido durante a verificação, como uma senha incorreta, o objeto `user` é retornado e autenticado.
|
||||
|
||||
Many strategies are set up using different settings, but generally it is easy to set it up based on the README in that strategy's repository. A good example of this is the GitHub strategy where we don't need to worry about a username or password because the user will be sent to GitHub's auth page to authenticate. As long as they are logged in and agree then GitHub returns their profile for us to use.
|
||||
Muitas estratégias são configuradas usando definições diferentes, mas geralmente é fácil fazer a configuração com base no README do repositório da estratégia. Um bom exemplo disso é a estratégia do GitHub, onde não precisamos nos preocupar com um nome de usuário ou senha, porque o usuário será enviado para a página de autenticação do GitHub para ser autenticado. Desde que estejam logados e que concordem com isso, o GitHub retorna seu perfil para que o vejamos.
|
||||
|
||||
In the next step, we will set up how to actually call the authentication strategy to validate a user based on form data!
|
||||
Na próxima etapa, vamos configurar como chamar realmente a estratégia de autenticação para validar um usuário com base nos dados do formulário!
|
||||
|
||||
Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point [here](https://gist.github.com/camperbot/53b495c02b92adeee0aa1bd3f3be8a4b).
|
||||
Envie sua página quando você achar que ela está certa. Se você encontrar erros, pode conferir o projeto concluído até este momento [aqui](https://gist.github.com/camperbot/53b495c02b92adeee0aa1bd3f3be8a4b).
|
||||
|
||||
# --hints--
|
||||
|
||||
Passport-local should be a dependency.
|
||||
Passport-local deve ser uma dependência.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -57,7 +57,7 @@ Passport-local should be a dependency.
|
||||
);
|
||||
```
|
||||
|
||||
Passport-local should be correctly required and setup.
|
||||
Passport-local deve ser solicitado e configurado corretamente.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5895f70df9fc0f352b528e69
|
||||
title: How to Use Passport Strategies
|
||||
title: Usar as estratégias do Passport
|
||||
challengeType: 2
|
||||
forumTopicId: 301555
|
||||
dashedName: how-to-use-passport-strategies
|
||||
@ -8,21 +8,21 @@ dashedName: how-to-use-passport-strategies
|
||||
|
||||
# --description--
|
||||
|
||||
In the `index.pug` file supplied, there is actually a login form. It has previously been hidden because of the inline JavaScript `if showLogin` with the form indented after it. Before `showLogin` as a variable was never defined, so it never rendered the code block containing the form. Go ahead and on the `res.render` for that page add a new variable to the object `showLogin: true`. When you refresh your page, you should then see the form! This form is set up to **POST** on `/login`, so this is where we should set up to accept the POST and authenticate the user.
|
||||
No arquivo `index.pug` fornecido, existe, na verdade, um formulário de login. Ele foi escondido antes por causa do JavaScript integrado `if showLogin` com o formulário indentado depois disso. Anteriormente, `showLogin` nunca foi definido como uma variável. Por isso, o bloco de código contendo o formulário nunca foi renderizado. No `res.render` daquela página, adicione uma nova variável para o objeto `showLogin: true`. Ao atualizar sua página, você deverá ver o formulário! Este formulário está configurado para o método **POST** em `/login`. Então, é aqui que devemos configurar para aceitar a solicitação de POST e autenticar o usuário.
|
||||
|
||||
For this challenge you should add the route `/login` to accept a POST request. To authenticate on this route, you need to add a middleware to do so before then sending a response. This is done by just passing another argument with the middleware before your `function(req,res)` with your response! The middleware to use is `passport.authenticate('local')`.
|
||||
Para este desafio, você deve adicionar a rota `/login` para aceitar uma solicitação de POST. Para autenticar nessa rota, você precisa adicionar um middleware que faça isso antes de enviar uma resposta. Isso é feito simplesmente passando outro argumento com o middleware antes de sua `function(req,res)` com sua resposta! O middleware a ser usado é o `passport.authenticate('local')`.
|
||||
|
||||
`passport.authenticate` can also take some options as an argument such as: `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. The response after using the middleware (which will only be called if the authentication middleware passes) should be to redirect the user to `/profile` and that route should render the view `profile.pug`.
|
||||
`passport.authenticate` também pode aceitar algumas opções como argumento, como: `{ failureRedirect: '/' }`, que é incrivelmente útil. Não se esqueça de acrescentá-lo também. A resposta depois de usar o middleware (que somente será chamado se o middleware de autenticação passar) deve ser redirecionar o usuário para `/profile`. Essa rota deve renderizar a visualização `profile.pug`.
|
||||
|
||||
If the authentication was successful, the user object will be saved in `req.user`.
|
||||
Se a autenticação for bem-sucedida, o objeto do usuário será salvo em `req.user`.
|
||||
|
||||
At this point, if you enter a username and password in the form, it should redirect to the home page `/`, and the console of your server should display `'User {USERNAME} attempted to log in.'`, since we currently cannot login a user who isn't registered.
|
||||
Neste ponto, se você digitar um nome de usuário e uma senha no formulário, ele deve redirecionar para a página inicial `/`. O console do servidor deve exibir `'User {USERNAME} attempted to log in.'`, já que, no momento, não podemos fazer login com um usuário que não está registrado.
|
||||
|
||||
Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point [here](https://gist.github.com/camperbot/7ad011ac54612ad53188b500c5e99cb9).
|
||||
Envie sua página quando você achar que ela está certa. Se você encontrar erros, pode conferir o projeto concluído até este momento [aqui](https://gist.github.com/camperbot/7ad011ac54612ad53188b500c5e99cb9).
|
||||
|
||||
# --hints--
|
||||
|
||||
All steps should be correctly implemented in the server.js.
|
||||
Todas as etapas devem ser corretamente implementadas no server.js.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +50,7 @@ All steps should be correctly implemented in the server.js.
|
||||
);
|
||||
```
|
||||
|
||||
A POST request to /login should correctly redirect to /.
|
||||
Uma solicitação de POST para /login deve redirecionar corretamente para /.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 589a8eb3f9fc0f352b528e72
|
||||
title: Implementation of Social Authentication III
|
||||
title: Implementar a autenticação social III
|
||||
challengeType: 2
|
||||
forumTopicId: 301558
|
||||
dashedName: implementation-of-social-authentication-iii
|
||||
@ -8,7 +8,7 @@ dashedName: implementation-of-social-authentication-iii
|
||||
|
||||
# --description--
|
||||
|
||||
The final part of the strategy is handling the profile returned from GitHub. We need to load the user's database object if it exists, or create one if it doesn't, and populate the fields from the profile, then return the user's object. GitHub supplies us a unique *id* within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project--it goes within the function that is the second argument for the new strategy, right below where `console.log(profile);` currently is:
|
||||
A parte final da estratégia é tratar do perfil retornado do GitHub. Precisamos carregar o banco de dados do usuário, se ele existir, ou criar um, se não existir. Além disso, temos que preencher os campos do perfil e, em seguida, retornar o objeto do usuário. O GitHub nos fornece um *id* único dentro de cada perfil que podemos usar para pesquisar e para serializar o usuário (já implementado). Abaixo, vemos um exemplo de implementação que você pode usar em seu projeto. Ele vai dentro da função, que é o segundo argumento para a nova estratégia, logo abaixo onde `console.log(profile);` está atualmente:
|
||||
|
||||
```js
|
||||
myDataBase.findOneAndUpdate(
|
||||
@ -38,15 +38,15 @@ myDataBase.findOneAndUpdate(
|
||||
);
|
||||
```
|
||||
|
||||
`findOneAndUpdate` allows you to search for an object and update it. If the object doesn't exist, it will be inserted and made available to the callback function. In this example, we always set `last_login`, increment the `login_count` by `1`, and only populate the majority of the fields when a new object (new user) is inserted. Notice the use of default values. Sometimes a profile returned won't have all the information filled out or the user will keep it private. In this case, you handle it to prevent an error.
|
||||
`findOneAndUpdate` permite pesquisar um objeto e atualizá-lo. Se o objeto não existir, ele será inserido e disponibilizado para a função de callback. Neste exemplo, sempre definimos o `last_login`, incrementamos a `login_count` em `1` e somente preenchemos a maioria dos campos quando um novo objeto (novo usuário) for inserido. Observe o uso dos valores padrão. Às vezes, um perfil retornado não terá todas as informações preenchidas. O usuário também pode mantê-las privadas. Neste caso, você faz o tratamento para evitar um erro.
|
||||
|
||||
You should be able to login to your app now--try it!
|
||||
Você deve poder acessar a aplicação agora - experimente!
|
||||
|
||||
Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point [here](https://gist.github.com/camperbot/183e968f0e01d81dde015d45ba9d2745).
|
||||
Envie sua página quando você achar que ela está certa. Se você encontrar erros, pode conferir o projeto concluído até este momento [aqui](https://gist.github.com/camperbot/183e968f0e01d81dde015d45ba9d2745).
|
||||
|
||||
# --hints--
|
||||
|
||||
GitHub strategy setup should be complete.
|
||||
A configuração da estratégia do GitHub deve estar concluída.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 58966a17f9fc0f352b528e6d
|
||||
title: Registration of New Users
|
||||
title: Registro de novos usuários
|
||||
challengeType: 2
|
||||
forumTopicId: 301561
|
||||
dashedName: registration-of-new-users
|
||||
@ -8,11 +8,11 @@ dashedName: registration-of-new-users
|
||||
|
||||
# --description--
|
||||
|
||||
Now we need to allow a new user on our site to register an account. On the `res.render` for the home page add a new variable to the object passed along--`showRegistration: true`. When you refresh your page, you should then see the registration form that was already created in your `index.pug` file! This form is set up to **POST** on `/register`, so this is where we should set up to accept the **POST** and create the user object in the database.
|
||||
Agora, precisamos permitir que um novo usuário em nosso site crie uma conta. Na `res.render` para a página inicial, adicione uma nova variável para o objeto passado, `showRegistration: true`. Ao atualizar sua página, você deve então ver o formulário de registro que já foi criado no arquivo `index.pug`! Este formulário está configurado para o método **POST** em `/register`. Então, é aqui que devemos configurar para aceitar a solicitação de **POST** e criar o objeto de usuário no banco de dados.
|
||||
|
||||
The logic of the registration route should be as follows: Register the new user > Authenticate the new user > Redirect to /profile
|
||||
A lógica da rota de registro deve ser a seguinte: registrar o novo usuário > autenticar o novo usuário > redirecionar para /profile
|
||||
|
||||
The logic of step 1, registering the new user, should be as follows: Query database with a findOne command > if user is returned then it exists and redirect back to home *OR* if user is undefined and no error occurs then 'insertOne' into the database with the username and password, and, as long as no errors occur, call *next* to go to step 2, authenticating the new user, which we've already written the logic for in our POST */login* route.
|
||||
A lógica da etapa 1, registrar o novo usuário, deve ser a seguinte: consultar banco de dados com um comando findOne > se o usuário for retornado, então ele existe e devemos redirecionar de volta para a página inicial *OU*, se o usuário retornar undefined e nenhum erro ocorrer, então 'insertOne' (inserir um) no banco de dados com o nome de usuário e senha. Desde que não haja erros, chamar *next* para ir para a etapa 2, autenticando o novo usuário, para o qual já escrevemos a lógica em nossa solicitação de POST para a rota */login*.
|
||||
|
||||
```js
|
||||
app.route('/register')
|
||||
@ -47,13 +47,13 @@ app.route('/register')
|
||||
);
|
||||
```
|
||||
|
||||
Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point [here](https://gist.github.com/camperbot/b230a5b3bbc89b1fa0ce32a2aa7b083e).
|
||||
Envie sua página quando você achar que ela está certa. Se você encontrar erros, pode conferir o projeto concluído até este momento [aqui](https://gist.github.com/camperbot/b230a5b3bbc89b1fa0ce32a2aa7b083e).
|
||||
|
||||
**NOTE:** From this point onwards, issues can arise relating to the use of the *picture-in-picture* browser. If you are using an online IDE which offers a preview of the app within the editor, it is recommended to open this preview in a new tab.
|
||||
**OBSERVAÇÃO:** a partir deste ponto, podem surgir problemas relacionados com o uso do navegador *picture-in-picture*. Se você estiver usando uma IDE on-line que oferece uma pré-visualização do aplicativo dentro do editor, é recomendável abrir esta pré-visualização em uma nova aba.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should register route and display on home.
|
||||
Você deve registrar a rota e exibi-la na página inicial.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -76,7 +76,7 @@ You should register route and display on home.
|
||||
);
|
||||
```
|
||||
|
||||
Registering should work.
|
||||
O registo deve dar certo.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -104,7 +104,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
Login should work.
|
||||
O login deve dar certo.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -153,7 +153,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
Logout should work.
|
||||
O logout deve dar certo.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -171,7 +171,7 @@ Logout should work.
|
||||
);
|
||||
```
|
||||
|
||||
Profile should no longer work after logout.
|
||||
O perfil não deve mais funcionar após o logout.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user