diff --git a/.github/ISSUE_TEMPLATE/translations_checklist.md b/.github/ISSUE_TEMPLATE/translations_checklist.md index f55f519f..1bbd070e 100644 --- a/.github/ISSUE_TEMPLATE/translations_checklist.md +++ b/.github/ISSUE_TEMPLATE/translations_checklist.md @@ -67,3 +67,4 @@ assignees: '' - [ ] state-management README - [ ] state-management assignment - [ ] solution base README + - [ ] API base README diff --git a/3-terrarium/1-intro-to-html/assignment.md b/3-terrarium/1-intro-to-html/assignment.md index d74b60b4..349b6b06 100644 --- a/3-terrarium/1-intro-to-html/assignment.md +++ b/3-terrarium/1-intro-to-html/assignment.md @@ -8,4 +8,4 @@ Imagine you are designing, or redesigning, your personal web site. Create a grap | Criteria | Exemplary | Adequate | Needs Improvement | | -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -| | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed | \ No newline at end of file +| | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed | diff --git a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md new file mode 100644 index 00000000..b57d52b2 --- /dev/null +++ b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md @@ -0,0 +1,231 @@ +# Projeto terrario Parte 1: Introdução a HTML + +![Introdução a HTML](/sketchnotes/webdev101-html.png) +> Esboço por [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz Pré-aula + +[Quiz pré-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15) + +### Introdução + +HTML, ou Linguagem de Marcação de Hypertexto, é o 'esqueleto' da web. Se CSS 'veste' o seu HTML e JavaScript o dá vida, HTML é o corpo de sua aplicação web. A própria sintaxe HTML reflete isso, ao passo que ela inclui tags "head" (cabeça), "body" (corpo), e "footer" (rodapé). + +Nesta lição, usaremos HTML para fazer o layout do 'esqueleto' da interface do nosso terrário virtual. Terá um título e três colunas: uma coluna à direita e outra à esquerda, onde vivem as plantas arrastáveis, e uma área central que será o verdadeiro terrário de aspecto de vidro. Ao final desta lição, você poderá ver as plantas nas colunas, mas a interface parecerá um pouco estranha; não se preocupe, na próxima seção você adicionará estilos CSS à interface para torná-la mais bonita. + +### Tarefa + +Em seu computador, crie uma pasta chamada 'terrario' e, dentro dela, um arquivo chamado 'index.html'. Você pode fazer isso no Visual Studio Code depois de criar sua pasta terrarium, abrindo uma nova janela do VS Code, clicando em 'abrir pasta' e navegando até sua nova pasta. Clique no pequeno botão 'arquivo' no painel do Explorer e crie o novo arquivo: + +![explorer no VS Code](../images/vs-code-index.png) + +Ou + +Use esses comando no seu git bash: +* `mkdir terrarium` +* `cd terrarium` +* `touch index.html` +* `code index.html` ou `nano index.html` + +> Os arquivos index.html indicam a um navegador que ele é o arquivo padrão em uma pasta; URLs como `https://anysite.com/test` podem ser construídas usando uma estrutura de pasta incluindo uma pasta chamada` test` com `index.html` dentro dela; `index.html` não precisa ser mostrado em uma URL. + +--- + +## O DocType e as tags HTML + +A primeira linha de um arquivo HTML é seu DocType. É um pouco surpreendente que você precise ter essa linha bem no topo do arquivo, mas ela diz aos navegadores mais antigos que o navegador precisa renderizar a página em um modo padrão, seguindo a especificação HTML atual. + +> Dica: no VS Code, você pode passar o mouse sobre uma tag e obter informações sobre seu uso nos guias de referência do MDN. + +A segunda linha deve ser a tag de abertura da tag ``, seguida agora por sua tag de fechamento ``. Essas tags são os elementos-raiz da sua interface. + +### Tarefa + +Adicione essas linhas ao topo do seu arquivo `index.html`: + +```HTML + + +``` + +✅ Existem alguns modos diferentes que podem ser determinados definindo o DocType com uma string de consulta: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Esses modos costumavam suportar navegadores muito antigos que não são normalmente usados ​​hoje em dia (Netscape Navigator 4 e Internet Explorer 5). Você pode seguir a declaração doctype padrão. + +--- + +## A 'cabeça' do documento + +A área do 'cabeçalho' do documento HTML inclui informações cruciais sobre sua página da web, também conhecidas como [metadados] (https://developer.mozilla.org/docs/Web/HTML/Element/meta). No nosso caso, informamos ao servidor da web para o qual esta página será enviada para ser renderizada, estas quatro coisas: + +- o título da página +- metadados da página, incluindo: + - o 'conjunto de caracteres', informando sobre qual codificação de caracteres é usada na página + - informações do navegador, incluindo `x-ua-compatible`, que indica que o navegador IE = edge é compatível + - informações sobre como a janela de visualização deve se comportar quando é carregada. Definir a janela de visualização para ter uma escala inicial de 1 controla o nível de zoom quando a página é carregada pela primeira vez. + +### Tarefa + +Adicione um bloco 'head' ao seu documento entre a tag `` inicial e a final. + +```html + + Bem-vindo ao meu terrário virtual + + + + +``` + +✅ O que aconteceria se você definir uma metatag de janela de visualização como esta: ``? Leia mais sobre a [janela de exibição](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag). + +--- + +## O `corpo` do documento + +### Tags HTML + +Em HTML, você adiciona tags ao seu arquivo .html para criar elementos de uma página da web. Cada tag geralmente possui uma tag de abertura e de fechamento, como esta: `

olá

` para indicar um parágrafo. Crie o corpo da sua interface adicionando um conjunto de tags `` dentro do par de tags ``; sua marcação agora se parece com isto: + +### Tarefa + +```html + + + + Bem-vindo ao meu terrário virtual + + + + + + +``` + +Agora, você pode começar a construir sua página. Normalmente, você usa tags `
` para criar os elementos separados em uma página. Vamos criar uma série de elementos `
` que conterão imagens. + +### Imagens + +Uma tag html que não precisa de uma tag de fechamento é a tag ``, porque ela tem um elemento `src` que contém todas as informações que a página precisa para processar o item. + +Crie uma pasta em seu aplicativo chamada `images` e nela, adicione todas as imagens da [pasta de código fonte](../solution/images); (são 14 imagens de plantas). + +### Tarefa + +Adicione essas imagens de plantas em duas colunas entre as tags ` `: + +```html +
+
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+
+``` + +> Nota: Spans vs. Divs. Divs são considerados elementos de 'bloco' e Spans são 'embutidos'. O que aconteceria se você transformasse esses divs em spans? + +Com essa marcação, as plantas agora aparecem na tela. Parece muito ruim, porque eles ainda não foram estilizados usando CSS, e faremos isso na próxima lição. + +Cada imagem possui um texto alternativo que aparecerá mesmo se você não puder ver ou renderizar uma imagem. Este é um atributo importante a ser incluído para acessibilidade. Aprenda mais sobre acessibilidade em aulas futuras; por enquanto, lembre-se de que o atributo alt fornece informações alternativas para uma imagem se um usuário por algum motivo não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou se o usuário usar um leitor de tela). + +✅ Você notou que cada imagem tem a mesma tag alt? Esta é uma boa prática? Por que ou por que não? Você pode melhorar este código? + +--- + +## Marcação semântica + +Em geral, é preferível usar 'semântica' significativa ao escrever HTML. O que isso significa? Isso significa que você usa tags HTML para representar o tipo de dados ou interação para a qual foram projetadas. Por exemplo, o texto do título principal em uma página deve usar uma tag `

`. + +Adicione a seguinte linha logo abaixo da tag `` de abertura: + +```html +

Meu Terrário

+``` + +Usar marcação semântica, como ter cabeçalhos `

` e listas não ordenadas renderizadas como `
    `, ajuda os leitores de tela a navegar por uma página. Em geral, os botões devem ser escritos como `

`: + +```html +
+
+
+
+
+
+
+
+
+``` + +✅ Mesmo que você tenha adicionado essa marcação à tela, você não vê absolutamente nada renderizado. Porque? + +--- + +## 🚀Desafio + +Existem algumas tags 'mais antigas' selvagens em HTML que ainda são divertidas de brincar, embora você não deva usar tags obsoletas, como [essas tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) na sua marcação. Ainda assim, você pode usar a velha tag `` para fazer o título h1 rolar horizontalmente? (se o fizer, não se esqueça de removê-lo depois) + +## Quiz Pós-aula + +[Quiz pós-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16) + +## Revisão e autoestudo + +HTML é o sistema de blocos de construção 'testado e comprovado' que ajudou a construir a web no que ela é hoje. Aprenda um pouco sobre sua história estudando algumas tags antigas e novas. Você consegue descobrir por que algumas tags foram descontinuadas e outras adicionadas? Quais tags podem ser introduzidas no futuro? + +Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa). + + +## Atribuiçao + +[Pratique seu HTML: Construa uma maquete de blog](assignment.pt-BR.md) diff --git a/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md b/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md new file mode 100644 index 00000000..36b465ea --- /dev/null +++ b/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md @@ -0,0 +1,11 @@ +# Pratique seu HTML: Construa uma maquete de blog + +## Instruções + +Imagine que você está projetando ou redesenhando seu site pessoal. Crie uma maquete gráfica do seu site e anote a marcação HTML que você usaria para construir os vários elementos do site. Você pode fazer isso no papel e digitalizá-lo ou usar o software de sua escolha, apenas certifique-se de codificar manualmente a marcação HTML. + +## Rubrica + +| Critérios | Exemplar | Adequado | Necessidades Melhoria | +| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| | Um layout de blog é representado visualmente com pelo menos 10 elementos de marcação exibidos | Um layout de blog é representado visualmente com cerca de 5 elementos de marcação exibidos | Um layout de blog é representado visualmente com no máximo 3 elementos de marcação exibidos | diff --git a/3-terrarium/2-intro-to-css/translations/assignment.pt.md b/3-terrarium/2-intro-to-css/translations/assignment.pt.md new file mode 100644 index 00000000..1ac270c2 --- /dev/null +++ b/3-terrarium/2-intro-to-css/translations/assignment.pt.md @@ -0,0 +1,11 @@ +# Refatoração de CSS + +## Instruções + +Reestilize seu terrário usando Flexbox ou CSS Grid e faça screenshots para mostrar que você o testou em diversos navegadores. Pode ser necessário modificar a marcação , então, crie uma nova versão da aplicação com a arte pronta para sua refatoração. Não se preocupe em tornar os elementos arrastáveis; Apenas refatore o HTML e o CSS por enquanto. + +## Rubrica + +| Criterio | Exemplar | Adequado | Precisa de melhoria | +| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ | +| | Apresente um terrário completamente reestilizado usando Flexbox ou CSS Grid | Reestilize algum dos elementos | Falha ao reestilizar o terrário em tudo | diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.pt.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.pt.md index a78e892f..77b5f87d 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.pt.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.pt.md @@ -1,11 +1,11 @@ -# Trabalhar um pouco mais com o DOM +# Trabalhe um pouco mais com a DOM ## Instruções -Investigue o DOM um pouco mais 'adotando' um elemento DOM. Visite [lista de interfaces DOM da MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) e escolha uma. Encontre-o sendo usado em um site da web e escreva uma explicação de como ele é usado. +Pesquise a DOM um pouco mais 'adotando' um elemento DOM. Visite a [lista de interfaces DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) do MDN e escolha uma. Encontre-o em um web site e escreva uma explicação de como ele é usado. ## Rubrica -| Critérios | Exemplar | Adequado | Precisa de melhoria | +| Criterio | Exemplar | Adequado | Precisa de melhoria | | -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | -| | A redação do parágrafo é apresentada, com exemplo | A redação do parágrafo é apresentada, sem exemplo | Nenhum artigo é apresentado | +| | A redação do parágrafo é apresentada com exemplo | redação do parágrafo é apresentada sem exemplo | Nenhum texto é apresentado | diff --git a/3-terrarium/translations/README.pt-BR.md b/3-terrarium/translations/README.pt-BR.md new file mode 100644 index 00000000..84b0a4ac --- /dev/null +++ b/3-terrarium/translations/README.pt-BR.md @@ -0,0 +1,31 @@ +# Meu Terrário: Um projeto para aprender HTML, CSS, e manipulação DOM usando JavaScript 🌵🌱 + +Uma pequena meditação de código de arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode construir uma interface web, esilizá-la, e adiconar uma interação. + +![Meu Terrário](../images/screenshot_gray.png) + +# Lições + +1. [Introdução à HTML](../1-intro-to-html/translations/README.pt-BR.md) +2. [Introdução à CSS](../2-intro-to-css/README.md) +3. [Introdução à DOM e fechamentos JS](../3-intro-to-DOM-and-closures/README.md) + +## Créditos + +Escrito com ♥️ por [Jen Looper](https://www.twitter.com/jenlooper) + +O terrário criado via CSS foi inspirado na jarra de vidro de Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). + +A arte do curso foi desenhada à mão por [Jen Looper](http://jenlooper.com) using Procreate. + +## Implante o seu Terrário + +Você pode implantar ou publicar seu terrario na web usando o Azure Static Web Apps. + +1. Fork este repositório + +2. Pressione este botão + +[![Implemente para o botão Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp) + +3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo ou a raiz de sua base de código como `/ solution`. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório "forkado" que ajudará o serviço de construção de aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL. diff --git a/7-bank-project/2-forms/translations/README.fr.md b/7-bank-project/2-forms/translations/README.fr.md new file mode 100644 index 00000000..92264002 --- /dev/null +++ b/7-bank-project/2-forms/translations/README.fr.md @@ -0,0 +1,301 @@ +# Créer une application bancaire Partie 2: Créer un formulaire de connexion et d'inscription + +## Quiz préalable + +[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/43?loc=fr) + +### Introduction + +Dans presque toutes les applications Web modernes, vous pouvez créer un compte pour avoir votre propre espace privé. Comme plusieurs utilisateurs peuvent accéder à une application Web en même temps, vous avez besoin d'un mécanisme pour stocker les données personnelles de chaque utilisateur séparément et sélectionner les informations à afficher. Nous n'expliquerons pas comment gérer [l'identité de l'utilisateur en toute sécurité](https://en.wikipedia.org/wiki/Authentication) car il s'agit d'un sujet étendu en soi, mais nous veillerons à ce que chaque utilisateur puisse créer un (ou plusieurs) compte bancaire sur notre application. + +Dans cette partie, nous utiliserons des formulaires HTML pour ajouter une connexion et une inscription à notre application Web. Nous verrons comment envoyer les données à une API serveur par programmation, et finalement comment définir des règles de validation de base pour les entrées utilisateur. + +### Prérequis + +Vous devez avoir terminé les [modèles HTML et routage](../../1-template-route/translations/README.fr.md) d'une application Web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org/fr) et [exécuter l'API du serveur](../../api/translations/README.fr.md) localement afin de pouvoir envoyer des données pour créer des comptes. + +**Prenez note** +Vous aurez deux terminaux fonctionnant en même temps comme indiqué ci-dessous. +1. Pour l'application bancaire principale, nous avons intégré la leçon [Modèles HTML et routage](../../1-template-route/translations/README.fr.md) +2. Pour l'[API du serveur Bank APP](../../api/translations/README.fr.md), que nous avons configuré ci-dessus. + +Vous avez besoin que les deux serveurs soient opérationnels pour suivre le reste de la leçon. Ils écoutent sur différents ports (port `3000` et port `5000`) donc tout devrait bien fonctionner. + +Vous pouvez tester que le serveur fonctionne correctement en exécutant cette commande dans un terminal : + +```sh +curl http://localhost:5000/api +# -> devrait renvoyer "Bank API v1.0.0" comme résultat +``` + +--- + +## Formulaire et contrôles + +L'élément `
` encapsule une section d'un document HTML où l'utilisateur peut saisir et soumettre des données avec des contrôles interactifs. Il existe toutes sortes de contrôles d'interface utilisateur (UI) qui peuvent être utilisés dans un formulaire, les plus courants étant les éléments `` et ` +
+``` + +En utilisant l'attribut `value`, nous pouvons définir une valeur par défaut pour une entrée donnée. +Notez également que l'entrée pour `balance` a le type `number`. Est-ce que ça a l'air différent des autres entrées ? Essayez d'interagir avec lui. + +✅ Pouvez-vous naviguer et interagir avec les formulaires en utilisant uniquement un clavier ? Comment feriez-vous cela? + +## Soumission des données au serveur + +Maintenant que nous avons une interface utilisateur fonctionnelle, la prochaine étape consiste à envoyer les données à notre serveur. Faisons un test rapide avec notre code actuel : que se passe-t-il si vous cliquez sur le bouton *Connexion* ou *S'inscrire* ? + +Avez-vous remarqué le changement dans la section URL de votre navigateur ? + +![Capture d'écran du changement d'URL du navigateur après avoir cliqué sur le bouton S'inscrire](../images/click-register.png) + +L'action par défaut pour un `
` consiste à soumettre le formulaire à l'URL du serveur actuel à l'aide de la [méthode GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3 ), en ajoutant les données du formulaire directement à l'URL. Cette méthode a cependant quelques défauts : + +- Les données envoyées sont de taille très limitée (environ 2000 caractères) +- Les données sont directement visibles dans l'URL (pas génial pour les mots de passe) +- Cela ne fonctionne pas avec les téléchargements de fichiers + +C'est pourquoi vous pouvez le modifier pour utiliser la [méthode POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) qui envoie les données du formulaire au serveur dans le corps de la requête HTTP, sans aucune des limitations précédentes. + +> Alors que POST est la méthode la plus couramment utilisée pour envoyer des données, [dans certains scénarios spécifiques](https://www.w3.org/2001/tag/doc/whenToUseGet.html) il est préférable d'utiliser la méthode GET, lorsque l'on implémente un champ de recherche par exemple. + +### Tâche + +Ajoutez les propriétés `action` et `method` au formulaire d'inscription : + +```html + +``` + +Essayez maintenant d'enregistrer un nouveau compte avec votre nom. Après avoir cliqué sur le bouton *S'inscrire*, vous devriez voir quelque chose comme ceci : + +![Une fenêtre de navigateur à l'adresse localhost:5000/api/accounts, affichant une chaîne JSON avec des données utilisateur](./images/form-post.png) + +Si tout se passe bien, le serveur doit répondre à votre demande avec une réponse [JSON](https://www.json.org/json-fr.html) contenant les données de compte qui ont été créées. + +✅ Essayez de vous enregistrer à nouveau avec le même nom. Que se produit'il? + +## Soumettre des données sans recharger la page + +Comme vous l'avez probablement remarqué, il y a un léger problème avec l'approche que nous venons d'utiliser : lors de la soumission du formulaire, nous sortons de notre application et le navigateur redirige vers l'URL du serveur. Nous essayons d'éviter tous les rechargements de pages avec notre application Web, car nous créons une [Application à page unique (SPA)](https://en.wikipedia.org/wiki/Single-page_application). + +Pour envoyer les données du formulaire au serveur sans forcer le rechargement de la page, nous devons utiliser du code JavaScript. Au lieu de mettre une URL dans la propriété `action` d'un élément ``, vous pouvez utiliser n'importe quel code JavaScript précédé de la chaîne `javascript:` pour effectuer une action personnalisée. L'utiliser signifie également que vous devrez implémenter certaines tâches qui étaient auparavant effectuées automatiquement par le navigateur : + +- Récupérer les données du formulaire +- Convertir et encoder les données du formulaire dans un format approprié +- Créer la requête HTTP et l'envoyer au serveur + +### Tâche + +Remplacez le formulaire d'inscription `action` par : + +```html + +``` + +Ouvrez `app.js` ajoutez une nouvelle fonction nommée `register` : + +```js +function register() { + const registerForm = document.getElementById('registerForm'); + const formData = new FormData(registerForm); + const data = Object.fromEntries(formData); + const jsonData = JSON.stringify(data); +} +``` + +Ici, nous récupérons l'élément de formulaire à l'aide de `getElementById()` et utilisons l'assistant [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) pour extraire les valeurs des contrôles de formulaire en tant qu'ensemble de paires clé/valeur. Ensuite, nous convertissons les données en un objet normal à l'aide de [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) et enfin sérialisons les données en [JSON](https://www.json.org/json-fr.html), un format couramment utilisé pour échanger des données sur le Web. + +Les données sont maintenant prêtes à être envoyées au serveur. Créez une nouvelle fonction nommée `createAccount` : + +```js +async function createAccount(account) { + try { + const response = await fetch('//localhost:5000/api/accounts', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: account + }); + return await response.json(); + } catch (error) { + return { error: error.message || 'Unknown error' }; + } +} +``` + +A quoi sert cette fonction ? Tout d'abord, notez le mot-clé `async` ici. Cela signifie que la fonction contient du code qui s'exécutera [**asynchrone**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Lorsqu'il est utilisé avec le mot-clé `await`, il permet d'attendre l'exécution du code asynchrone - comme attendre la réponse du serveur ici - avant de continuer. + +Voici une vidéo rapide sur l'utilisation de `async/await` : + +[![Async et Await pour la gestion des promesses](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async et Await pour la gestion des promesses") + +> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur async/await. + +Nous utilisons l'API `fetch()` pour envoyer des données JSON au serveur. Cette méthode prend 2 paramètres : + +- L'URL du serveur, donc on remet `//localhost:5000/api/accounts` à ce niveau. +- Les paramètres de la requête. C'est là que nous définissons la méthode sur `POST` et fournissons le `body` de la requête. Comme nous envoyons des données JSON au serveur, nous devons également définir l'en-tête `Content-Type` sur `application/json` afin que le serveur sache comment interpréter le contenu. + +Comme le serveur répondra à la demande avec JSON, nous pouvons utiliser `wait response.json()` pour analyser le contenu JSON et renvoyer l'objet résultant. Notez que cette méthode est asynchrone, nous utilisons donc le mot-clé `await` ici avant de revenir pour nous assurer que toutes les erreurs lors de l'analyse sont également détectées. + +Ajoutez maintenant du code à la fonction `register` pour appeler `createAccount()`: + +```js +const result = await createAccount(jsonData); +``` + +Comme nous utilisons ici le mot-clé `await`, nous devons ajouter le mot-clé `async` avant la fonction register: + +```js +async function register() { +``` + +Enfin, ajoutons quelques logs pour vérifier le résultat. La fonction finale devrait ressembler à ceci: + +```js +async function register() { + const registerForm = document.getElementById('registerForm'); + const formData = new FormData(registerForm); + const jsonData = JSON.stringify(Object.fromEntries(formData)); + const result = await createAccount(jsonData); + + if (result.error) { + return console.log('An error occurred:', result.error); + } + + console.log('Account created!', result); +} +``` + +C'était un peu long mais nous y sommes arrivés ! Si vous ouvrez vos [outils de développement de navigateur](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) et essayez d'enregistrer un nouveau compte, vous ne devriez voir aucun changement sur la page Web, mais un message s'affichera. apparaissent dans la console confirmant que tout fonctionne. + +![Capture d'écran montrant le message de journal dans la console du navigateur](../images/browser-console.png) + +✅ Pensez-vous que les données sont envoyées au serveur en toute sécurité ? Et si quelqu'un était capable d'intercepter la demande ? Vous pouvez en savoir plus sur [HTTPS](https://fr.wikipedia.org/wiki/HTTPS) pour en savoir plus sur la communication de données sécurisée. + +## La validation des données + +Si vous essayez d'enregistrer un nouveau compte sans définir de nom d'utilisateur au préalable, vous pouvez voir que le serveur renvoie une erreur avec le code d'état [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).). + +Avant d'envoyer des données à un serveur, il est recommandé de [valider les données du formulaire](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) au préalable lorsque cela est possible, pour vous assurer d'envoyer une demande valide. Les contrôles de formulaires HTML5 fournissent une validation intégrée à l'aide de divers attributs : + +- `required` : le champ doit être rempli sinon le formulaire ne peut pas être soumis. +- `minlength` et `maxlength` : définit le nombre minimum et maximum de caractères dans les champs de texte. +- `min` et `max` : définit la valeur minimum et maximum d'un champ numérique. +- `type` : définit le type de données attendu, comme `numéro`, `e-mail`, `fichier` ou [autres types intégrés](https://developer.mozilla.org/docs/Web/HTML/Element/input). Cet attribut peut également modifier le rendu visuel du contrôle de formulaire. +- `pattern` : permet de définir un pattern d'[expression régulière](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) pour tester si les données saisies sont valides ou non. + +> Astuce : vous pouvez personnaliser l'apparence de vos contrôles de formulaire selon qu'ils sont valides ou non en utilisant les pseudo-classes CSS `:valid` et `:invalid`. + +### Tâche + +Il y a 2 champs obligatoires pour créer un nouveau compte valide, le nom d'utilisateur et la devise, les autres champs étant facultatifs. Mettez à jour le code HTML du formulaire, en utilisant à la fois l'attribut `required` et le texte du libellé du champ: + +```html + + +... + + +``` + +Bien que cette implémentation de serveur particulière n'impose pas de limites spécifiques sur la longueur maximale des champs, il est toujours recommandé de définir des limites raisonnables pour toute entrée de texte utilisateur. + +Ajoutez un attribut `maxlength` aux champs de texte : + +```html + +... + +... + +``` + +Maintenant, si vous appuyez sur le bouton *S'inscrire* et qu'un champ ne respecte pas une règle de validation que nous avons définie, vous devriez voir quelque chose comme ceci : + +![Capture d'écran montrant l'erreur de validation lors de la tentative de soumission du formulaire](../images/validation-error.png) + +Une validation comme celle-ci effectuée *avant* l'envoi de données au serveur est appelée validation **côté client**. Mais notez qu'il n'est pas toujours possible d'effectuer toutes les vérifications sans envoyer les données. Par exemple, nous ne pouvons pas vérifier ici si un compte existe déjà avec le même nom d'utilisateur sans envoyer de requête au serveur. Une validation supplémentaire effectuée sur le serveur est appelée validation **côté serveur**. + +Généralement, les deux doivent être implémentés, et bien que l'utilisation de la validation côté client améliore l'expérience utilisateur en fournissant un retour instantané à l'utilisateur, la validation côté serveur est cruciale pour s'assurer que les données utilisateur que vous manipulez sont saines et sûres. + +--- + +## 🚀 Challenge + +Afficher un message d'erreur dans le code HTML si l'utilisateur existe déjà. + +Voici un exemple de ce à quoi peut ressembler la page de connexion finale après un peu de style : + +![Capture d'écran de la page de connexion après l'ajout de styles CSS](../images/result.png) + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/44?loc=fr) + +## Révision et étude personnelle + +Les développeurs sont devenus très créatifs dans leurs efforts de création de formulaires, en particulier en ce qui concerne les stratégies de validation. Découvrez les différents flux de formulaires en parcourant [CodePen](https://codepen.com); pouvez-vous trouver des formulaires intéressants et inspirants ? + +## Affectation + +[Concevez votre application bancaire](assignment.fr.md) diff --git a/7-bank-project/2-forms/translations/assignment.fr.md b/7-bank-project/2-forms/translations/assignment.fr.md new file mode 100644 index 00000000..88e164e1 --- /dev/null +++ b/7-bank-project/2-forms/translations/assignment.fr.md @@ -0,0 +1,13 @@ +# Stylisez votre application bancaire + +## Instructions + +Créez un nouveau fichier `styles.css` et ajoutez un lien vers celui-ci dans votre fichier `index.html`. Dans le fichier CSS que vous venez de créer, ajoutez des éléments de style pour que les pages *Login* et *Dashboard* aient un aspect agréable et soigné. Essayez de créer un thème de couleurs pour donner à votre application sa propre image de marque. + +> Conseil : vous pouvez modifier le HTML et ajouter de nouveaux éléments et classes si nécessaire. + +## Rubrique + +| Critères | Exemplaire | Adéquat | Besoin d'amélioration | +| -------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| | Toutes les pages sont propres et lisibles, avec un thème de couleurs cohérent et les différentes sections se détachant correctement. | Les pages sont stylisées mais sans thème ou avec des sections non clairement délimitées. | Les pages manquent de style, les sections sont désorganisées et les informations sont difficiles à lire. | diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 00000000..9e5b4f6a Binary files /dev/null and b/images/favicon.png differ diff --git a/index.html b/index.html index 202a4877..c7868a1a 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,12 @@ - Document + Web Dev for Beginners - + +