Francisco Imanol Suarez
4 years ago
committed by
GitHub
commit
bdf0342ddc
@ -0,0 +1,340 @@
|
|||||||
|
# Créer un jeu à l'aide d'événements
|
||||||
|
|
||||||
|
## Quiz préalable
|
||||||
|
|
||||||
|
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21?loc=fr)
|
||||||
|
|
||||||
|
## La programmation événementielle
|
||||||
|
|
||||||
|
Lors de la création d'une application basée sur un navigateur, nous fournissons une interface utilisateur graphique (GUI) que l'utilisateur peut utiliser lorsqu'il interagit avec ce que nous avons construit. La façon la plus courante d'interagir avec le navigateur consiste à cliquer et à saisir divers éléments. Le défi auquel nous sommes confrontés en tant que développeur est que nous ne savons pas quand ils vont effectuer ces opérations!
|
||||||
|
|
||||||
|
[La programmation événementielle](https://en.wikipedia.org/wiki/Event-driven_programming) est le nom du type de programmation que nous devons faire pour créer notre interface graphique. Si nous décomposons un peu cette phrase, nous voyons que le mot clé ici est **événement**. [L'événement](https://www.merriam-webster.com/dictionary/event), selon le Merriam-Webster, est défini comme "quelque chose qui arrive". Cela décrit parfaitement notre situation. Nous savons qu'il va se passer quelque chose pour lequel nous voulons exécuter du code en réponse, mais nous ne savons pas quand cela se produira.
|
||||||
|
|
||||||
|
La façon dont nous marquons une section de code que nous voulons exécuter consiste à créer une fonction. Lorsque nous pensons à la [programmation procédurale](https://en.wikipedia.org/wiki/Procedural_programming), les fonctions sont appelées dans un ordre spécifique. La même chose va être vraie avec la programmation événementielle. La différence est **comment** les fonctions seront appelées.
|
||||||
|
|
||||||
|
Pour gérer les événements (clic sur un bouton, saisie, etc.), nous enregistrons des **écouteurs d'événements**("event listeners" en anglais). Un écouteur d'événement est une fonction qui attend qu'un événement se produise et s'exécute en réponse. Les écouteurs d'événement peuvent mettre à jour l'interface utilisateur, passer des appels au serveur ou faire tout ce qui doit être fait en réponse à l'action de l'utilisateur. Nous ajoutons un écouteur d'événement en utilisant [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), et en fournissant une fonction à exécuter.
|
||||||
|
|
||||||
|
> **REMARQUE:** Il convient de souligner qu'il existe de nombreuses façons de créer des écouteurs d'événement. Vous pouvez utiliser des fonctions anonymes ou en créer des nommées. Vous pouvez utiliser divers raccourcis, comme définir la propriété `click` ou utiliser `addEventListener`. Dans notre exercice, nous allons nous concentrer sur `addEventLister` et les fonctions anonymes, car c'est probablement la technique la plus couramment utilisée par les développeurs Web. C'est aussi le plus flexible, car `addEventListener` fonctionne pour tous les événements et le nom de l'événement peut être fourni en tant que paramètre.
|
||||||
|
|
||||||
|
### Les événements courants
|
||||||
|
|
||||||
|
Il y a [des dizaines d'événements](https://developer.mozilla.org/docs/Web/Events) que vous pouvez écouter lors de la création d'une application. Fondamentalement, tout ce qu'un utilisateur fait sur une page déclenche un événement, ce qui vous donne beaucoup de pouvoir pour vous assurer qu'il obtient l'expérience que vous désirez. Heureusement, vous n'aurez normalement besoin que d'une petite poignée d'événements. En voici quelques-uns courants (y compris les deux que nous utiliserons lors de la création de notre jeu) :
|
||||||
|
|
||||||
|
- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): L'utilisateur a cliqué sur quelque chose, généralement un bouton ou un lien hypertexte
|
||||||
|
- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button
|
||||||
|
- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event):
|
||||||
|
L'utilisateur a surligné du texte
|
||||||
|
- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): The user input some text
|
||||||
|
|
||||||
|
## Création du jeu
|
||||||
|
|
||||||
|
Nous allons créer un jeu pour explorer le fonctionnement des événements en JavaScript. Notre jeu va tester la compétence de frappe d'un joueur, qui est l'une des compétences les plus sous-estimées que tous les développeurs devraient avoir. Nous devrions tous nous entraîner à saisir ! Le déroulement général du jeu ressemblera à ceci :
|
||||||
|
|
||||||
|
- Le joueur clique sur le bouton de démarrage et se voit présenter une citation à saisir
|
||||||
|
- Le joueur tape la citation aussi rapidement qu'il le peut dans une zone de texte
|
||||||
|
- Au fur et à mesure que chaque mot est complété, le suivant est mis en évidence
|
||||||
|
- Si le joueur a une faute de frappe, la zone de texte est mise à jour en rouge
|
||||||
|
- Lorsque le joueur complète la citation, un message de réussite s'affiche avec le temps écoulé
|
||||||
|
|
||||||
|
Développons notre jeu et apprenons-en plus sur les événements !
|
||||||
|
|
||||||
|
### Structure de fichier
|
||||||
|
|
||||||
|
Nous aurons besoin de trois fichiers au total : **index.html**, **script.js** et **style.css**. Commençons par les mettre en place pour nous faciliter un peu la tâche.
|
||||||
|
|
||||||
|
- Créez un nouveau dossier pour votre travail en ouvrant une console ou une fenêtre de terminal et en exécutant la commande suivante :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Linux ou macOS
|
||||||
|
mkdir typing-game && cd typing-game
|
||||||
|
|
||||||
|
# Windows
|
||||||
|
md typing-game && cd typing-game
|
||||||
|
```
|
||||||
|
|
||||||
|
- Ouvrez Visual Studio Code
|
||||||
|
|
||||||
|
```bash
|
||||||
|
code .
|
||||||
|
```
|
||||||
|
|
||||||
|
- Ajoutez trois fichiers au dossier dans Visual Studio Code avec les noms suivants:
|
||||||
|
- index.html
|
||||||
|
- script.js
|
||||||
|
- style.css
|
||||||
|
|
||||||
|
## Créer l'interface utilisateur
|
||||||
|
|
||||||
|
Si nous explorons les exigences, nous savons que nous aurons besoin d'une poignée d'éléments sur notre page HTML. C'est un peu comme une recette, où nous avons besoin de quelques ingrédients :
|
||||||
|
|
||||||
|
- Quelque part pour afficher le texte que l'utilisateur doit saisir
|
||||||
|
- Un endroit pour afficher tous les messages, comme un message de réussite
|
||||||
|
- Une zone de texte pour la saisie
|
||||||
|
- Un bouton de démarrage
|
||||||
|
|
||||||
|
Chacun de ceux-ci aura besoin d'identifiants afin que nous puissions travailler avec eux dans notre JavaScript. Nous ajouterons également des références aux fichiers CSS et JavaScript que nous allons créer.
|
||||||
|
|
||||||
|
Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- A l'intrieur de index.html -->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Typing game</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Typing game!</h1>
|
||||||
|
<p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
|
||||||
|
<p id="quote"></p> <!-- Ceci affichera notre citation -->
|
||||||
|
<p id="message"></p> <!-- Ceci affichera chaque messages d'état -->
|
||||||
|
<div>
|
||||||
|
<input type="text" aria-label="current word" id="typed-value" /> <!-- La zone de texte pour la saisie -->
|
||||||
|
<button type="button" id="start">Start</button> <!-- Pour commencer le jeu -->
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lancer l'application
|
||||||
|
|
||||||
|
Il est toujours préférable de développer itérativement pour voir à quoi ressemblent les choses. Lançons notre application. Il existe une merveilleuse extension pour Visual Studio Code appelée [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) qui hébergera votre application localement et actualisera le navigateur chaque fois que vous enregistrez.
|
||||||
|
|
||||||
|
- Installez [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) en suivant le lien et en cliquant sur **Installer**
|
||||||
|
- Vous serez invité par le navigateur à ouvrir Visual Studio Code, puis par Visual Studio Code pour effectuer l'installation
|
||||||
|
- Redémarrez Visual Studio Code si vous y êtes invité
|
||||||
|
- Une fois installé, dans Visual Studio Code, cliquez sur Ctrl-Shift-P (ou Cmd-Shift-P) pour ouvrir la commande pallate
|
||||||
|
- Tapez **Live Server : Ouvrir avec Live Server**
|
||||||
|
- Live Server commencera à héberger votre application
|
||||||
|
- Ouvrez un navigateur et accédez à **https://localhost:5500**
|
||||||
|
- Vous devriez maintenant voir la page que vous avez créée !
|
||||||
|
|
||||||
|
Ajoutons quelques fonctionnalités.
|
||||||
|
|
||||||
|
## Ajouter le CSS
|
||||||
|
|
||||||
|
Avec notre HTML créé, ajoutons le CSS pour le style de base. Nous devons mettre en évidence le mot que le joueur doit taper et colorer la zone de texte si ce qu'il a tapé est incorrect. Nous allons le faire avec deux classes.
|
||||||
|
|
||||||
|
Créez un nouveau fichier nommé **style.css** et ajoutez la syntaxe suivante.
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* A l'intérieur de style.css */
|
||||||
|
.highlight {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: lightcoral;
|
||||||
|
border: red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ En ce qui concerne CSS, vous pouvez mettre en page votre page comme vous le souhaitez. Prenez un peu de temps et rendez la page plus attrayante :
|
||||||
|
|
||||||
|
- Choisissez une police différente
|
||||||
|
- Colorier les en-têtes
|
||||||
|
- Redimensionner les éléments
|
||||||
|
|
||||||
|
## JavaScript
|
||||||
|
|
||||||
|
Avec notre interface utilisateur créée, il est temps de concentrer notre attention sur le JavaScript qui fournira la logique. Nous allons décomposer cela en une poignée d'étapes:
|
||||||
|
|
||||||
|
- [Créer les constantes](#ajouter-les-constantes)
|
||||||
|
- [Écouteur d'événement pour démarrer le jeu](#ajouter-une-logique-de-démarrage)
|
||||||
|
- [Écouteur d'événement de saisie](#ajouter-une-logique-de-frappe)
|
||||||
|
|
||||||
|
Mais d'abord, créez un nouveau fichier nommé **script.js**.
|
||||||
|
|
||||||
|
### Ajouter les constantes
|
||||||
|
|
||||||
|
Nous allons avoir besoin de quelques éléments pour nous faciliter la programmation. Encore une fois, comme pour une recette, voici ce dont nous aurons besoin :
|
||||||
|
|
||||||
|
- Tableau avec la liste de toutes les citations
|
||||||
|
- Tableau vide pour stocker tous les mots de la citation actuelle
|
||||||
|
- Espace pour stocker l'index du mot que le joueur est en train de taper
|
||||||
|
- L'heure à laquelle le joueur a cliqué sur démarrer
|
||||||
|
|
||||||
|
Nous allons également vouloir des références aux éléments de l'interface utilisateur :
|
||||||
|
|
||||||
|
- La zone de texte (**typed-value**)
|
||||||
|
- L'affichage de la citation (**quote**)
|
||||||
|
- Le message (**message**)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// A l'intérieur de script.js
|
||||||
|
// toutes nos citations
|
||||||
|
const quotes = [
|
||||||
|
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
||||||
|
'There is nothing more deceptive than an obvious fact.',
|
||||||
|
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
|
||||||
|
'I never make exceptions. An exception disproves the rule.',
|
||||||
|
'What one man can invent another can discover.',
|
||||||
|
'Nothing clears up a case so much as stating it to another person.',
|
||||||
|
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
||||||
|
];
|
||||||
|
// stocker la liste de mots et l'index du mot que le joueur est en train de taper
|
||||||
|
let words = [];
|
||||||
|
let wordIndex = 0;
|
||||||
|
// l'heure de début
|
||||||
|
let startTime = Date.now();
|
||||||
|
// éléments de page
|
||||||
|
const quoteElement = document.getElementById('quote');
|
||||||
|
const messageElement = document.getElementById('message');
|
||||||
|
const typedValueElement = document.getElementById('typed-value');
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Allez-y et ajoutez plus de citations à votre jeu
|
||||||
|
|
||||||
|
> **REMARQUE:** Nous pouvons récupérer les éléments quand nous le voulons dans le code en utilisant `document.getElementById`. Du fait que nous allons nous référer régulièrement à ces éléments, nous allons éviter les fautes de frappe avec les littéraux de chaîne en utilisant des constantes. Des frameworks tels que [Vue.js](https://vuejs.org/) ou [React](https://reactjs.org/) peuvent vous aider à mieux gérer la centralisation de votre code.
|
||||||
|
|
||||||
|
Prenez une minute pour regarder une vidéo sur l'utilisation de `const`, `let` et `var`
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types de variables")
|
||||||
|
|
||||||
|
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les variables.
|
||||||
|
|
||||||
|
### Ajouter une logique de démarrage
|
||||||
|
|
||||||
|
Pour commencer le jeu, le joueur cliquera sur démarrer. Bien sûr, nous ne savons pas quand ils vont cliquer sur Démarrer. C'est là qu'un [écouteur d'événement](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) entre en jeu. Un écouteur d'événement nous permettra d'écouter si quelque chose se produit (un événement) et d'exécuter du code en réponse. Dans notre cas, nous voulons exécuter du code lorsque l'utilisateur clique sur démarrer.
|
||||||
|
|
||||||
|
Lorsque l'utilisateur clique sur **démarrer**, nous devons sélectionner un devis, configurer l'interface utilisateur et configurer le suivi pour le mot et la synchronisation actuels. Vous trouverez ci-dessous le JavaScript que vous devrez ajouter ; nous en discutons juste après le bloc de script.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// à la fin de script.js
|
||||||
|
document.getElementById('start').addEventListener('click', () => {
|
||||||
|
// obtenir une citation
|
||||||
|
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
||||||
|
const quote = quotes[quoteIndex];
|
||||||
|
// Mettre la citation dans un tableau de mots
|
||||||
|
words = quote.split(' ');
|
||||||
|
// réinitialiser l'index des mots pour le suivi
|
||||||
|
wordIndex = 0;
|
||||||
|
|
||||||
|
// Mises à jour de l'interface utilisateur
|
||||||
|
// Crée un tableau d'éléments "span" afin que nous puissions définir une classe
|
||||||
|
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
|
||||||
|
// Convertir en chaîne et définir comme innerHTML sur l'affichage de la citation
|
||||||
|
quoteElement.innerHTML = spanWords.join('');
|
||||||
|
// Met en surbrillance le premier mot
|
||||||
|
quoteElement.childNodes[0].className = 'highlight';
|
||||||
|
// Effacer tous les messages précédents
|
||||||
|
messageElement.innerText = '';
|
||||||
|
|
||||||
|
// Configurer la zone de texte
|
||||||
|
// Efface la zone de texte
|
||||||
|
typedValueElement.value = '';
|
||||||
|
// définie le focus
|
||||||
|
typedValueElement.focus();
|
||||||
|
// définir le gestionnaire d'événements
|
||||||
|
|
||||||
|
// Lancer le chronomètre
|
||||||
|
startTime = new Date().getTime();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Décomposons le code !
|
||||||
|
|
||||||
|
- Configurer le suivi des mots
|
||||||
|
- L'utilisation de [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) et [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) nous permet de sélectionner au hasard une citation dans le tableau `quotes`
|
||||||
|
- Nous convertissons la `quote` en un tableau de `words` afin que nous puissions suivre le mot que le joueur est en train de taper
|
||||||
|
- `wordIndex` est mis à 0, puisque le lecteur commencera sur le premier mot
|
||||||
|
- Configurer l'interface utilisateur
|
||||||
|
- Créez un tableau de `spanWords`, qui contient chaque mot à l'intérieur d'un élément `span`
|
||||||
|
- Cela nous permettra de mettre en évidence le mot sur l'écran
|
||||||
|
- Il `join` (rejoins) le tableau pour créer une chaîne que nous pouvons utiliser pour mettre à jour le `innerHTML` sur `quoteElement`
|
||||||
|
- Cela affichera la citation au joueur
|
||||||
|
- Définissez le `className` du premier élément `span` sur `highlight` pour le mettre en surbrillance en jaune
|
||||||
|
- Vider le `messageElement` en définissant `innerText` sur `''`
|
||||||
|
- Configurer la zone de texte
|
||||||
|
- Effacer la `value` actuelle sur `typedValueElement`
|
||||||
|
- Définir `focus` sur `typedValueElement`
|
||||||
|
- Démarrez le chronomètre en appelant `getTime`
|
||||||
|
|
||||||
|
### Ajouter une logique de saisie
|
||||||
|
|
||||||
|
Au fur et à mesure que le joueur tape, un événement d'`input` sera déclenché. Cet écouteur d'événement vérifiera que le joueur tape correctement le mot et gérera l'état actuel du jeu. De retour à **script.js**, ajoutez le code suivant à la fin. Nous le décomposerons par la suite.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// at the end of script.js
|
||||||
|
typedValueElement.addEventListener('input', () => {
|
||||||
|
// Obtenir le mot actuel
|
||||||
|
const currentWord = words[wordIndex];
|
||||||
|
// obtenir la valeur actuelle
|
||||||
|
const typedValue = typedValueElement.value;
|
||||||
|
|
||||||
|
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||||
|
// fin de phrase
|
||||||
|
// Afficher le succès
|
||||||
|
const elapsedTime = new Date().getTime() - startTime;
|
||||||
|
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
||||||
|
messageElement.innerText = message;
|
||||||
|
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
||||||
|
// fin de mot
|
||||||
|
// efface le typedValueElement pour le nouveau mot
|
||||||
|
typedValueElement.value = '';
|
||||||
|
// passer au mot suivant
|
||||||
|
wordIndex++;
|
||||||
|
// réinitialiser le nom de classe pour tous les éléments entre guillemets
|
||||||
|
for (const wordElement of quoteElement.childNodes) {
|
||||||
|
wordElement.className = '';
|
||||||
|
}
|
||||||
|
// mettre en évidence le nouveau mot
|
||||||
|
quoteElement.childNodes[wordIndex].className = 'highlight';
|
||||||
|
} else if (currentWord.startsWith(typedValue)) {
|
||||||
|
// actuellement correct
|
||||||
|
// surligner le mot suivant
|
||||||
|
typedValueElement.className = '';
|
||||||
|
} else {
|
||||||
|
// état d'erreur
|
||||||
|
typedValueElement.className = 'error';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Décomposons le code ! Nous commençons par saisir le mot actuel et la valeur que le joueur a tapée jusqu'à présent. Ensuite, nous avons une logique en cascade, où nous vérifions si la citation est complète, le mot est complet, le mot est correct ou (enfin) s'il y a une erreur.
|
||||||
|
|
||||||
|
- La citation est complète, indiquée par `typedValue` étant égal à `currentWord`, et `wordIndex` étant égal à un de moins que la `length` de `words`
|
||||||
|
- Calculez `elapsedTime` en soustrayant `startTime` de l'heure actuelle
|
||||||
|
- Divisez `elapsedTime` par 1 000 pour convertir des millisecondes en secondes
|
||||||
|
- Afficher un message de succès
|
||||||
|
- Le mot est complet, indiqué par `typedValue` se terminant par un espace (la fin d'un mot) et `typedValue` étant égal à `currentWord`
|
||||||
|
- Définissez `value` de `typedElement` sur `''` pour permettre la saisie du mot suivant
|
||||||
|
- Incrémentez `wordIndex` pour passer au mot suivant
|
||||||
|
- Parcourez tous les `childNodes` de `quoteElement` pour définir `className` à `''` pour revenir à l'affichage par défaut
|
||||||
|
- Définissez le `className` du mot actuel sur `highlight` pour le marquer comme le prochain mot à taper
|
||||||
|
- Le mot est actuellement tapé correctement (mais pas complet), indiqué par `currentWord` commencé par `typedValue`
|
||||||
|
- Assurez-vous que `typedValueElement` est affiché par défaut en effaçant `className`
|
||||||
|
- Si nous sommes arrivés jusqu'ici, nous avons une erreur
|
||||||
|
- Définissez `className` de `typedValueElement` à `error`
|
||||||
|
|
||||||
|
## Testez votre application
|
||||||
|
|
||||||
|
Vous êtes allé jusqu'au bout ! La dernière étape consiste à s'assurer que notre application fonctionne. Essayez la! Ne vous inquiétez pas s'il y a des erreurs ; **tous les développeurs** ont des erreurs. Examinez les messages et déboguez si nécessaire.
|
||||||
|
|
||||||
|
Cliquez sur **start** et commencez à taper ! Cela devrait ressembler un peu à l'animation que nous avons vue auparavant.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
Ajouter plus de fonctionnalités
|
||||||
|
|
||||||
|
- Désactivez l'écouteur d'événement `input` à la fin et réactivez-le lorsque le bouton est cliqué
|
||||||
|
- Désactivez la zone de texte lorsque le joueur termine la citation
|
||||||
|
- Afficher une boîte de dialogue modale avec le message de réussite
|
||||||
|
- Stockez les meilleurs scores à l'aide de [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
|
||||||
|
|
||||||
|
## Quiz de validation des connaissances
|
||||||
|
|
||||||
|
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22?loc=fr)
|
||||||
|
|
||||||
|
## Révision et étude personnelle
|
||||||
|
|
||||||
|
Renseignez-vous sur [tous les événements disponibles](https://developer.mozilla.org/docs/Web/Events) pour le développeur via le navigateur Web et réfléchissez aux scénarios dans lesquels vous utiliseriez chacun.
|
||||||
|
|
||||||
|
## Affectation
|
||||||
|
|
||||||
|
[Créer un nouveau jeu de clavier](assignment.fr.md)
|
||||||
@ -0,0 +1,224 @@
|
|||||||
|
# Projet d'extension de navigateur Partie 2: Appeler une API, utiliser le stockage local
|
||||||
|
|
||||||
|
## Quiz préalable
|
||||||
|
|
||||||
|
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25?loc=fr)
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
Dans cette leçon, vous allez appeler une API en soumettant le formulaire de votre extension de navigateur et afficher les résultats dans votre extension. De plus, vous apprendrez comment vous pouvez stocker des données dans le stockage local de votre navigateur pour des références et utilisations futures.
|
||||||
|
|
||||||
|
✅ Suivez les segments numérotés dans les fichiers appropriés pour savoir où placer votre code
|
||||||
|
|
||||||
|
### Paramétrez les éléments à manipuler dans l'extension :
|
||||||
|
|
||||||
|
À ce stade, vous avez créé le code HTML pour le formulaire et les résultats `<div>` pour l'extension de votre navigateur. A partir de maintenant, vous devrez travailler dans le fichier `/src/index.js` et construire votre extension au fur et à mesure. Reportez-vous à la [leçon précédente](../../1-about-browsers/translations/README.fr.md) sur la configuration de votre projet et sur le processus de génération.
|
||||||
|
|
||||||
|
En travaillant dans votre fichier `index.js`, commencez par créer des variables `const` pour contenir les valeurs associées aux différents champs:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
// champs de formulaire
|
||||||
|
const form = document.querySelector('.form-data');
|
||||||
|
const region = document.querySelector('.region-name');
|
||||||
|
const apiKey = document.querySelector('.api-key');
|
||||||
|
|
||||||
|
// résultats
|
||||||
|
const errors = document.querySelector('.errors');
|
||||||
|
const loading = document.querySelector('.loading');
|
||||||
|
const results = document.querySelector('.result-container');
|
||||||
|
const usage = document.querySelector('.carbon-usage');
|
||||||
|
const fossilfuel = document.querySelector('.fossil-fuel');
|
||||||
|
const myregion = document.querySelector('.my-region');
|
||||||
|
const clearBtn = document.querySelector('.clear-btn');
|
||||||
|
```
|
||||||
|
|
||||||
|
Tous ces champs sont référencés par leur classe CSS, comme vous l'avez configuré dans le code HTML de la leçon précédente.
|
||||||
|
|
||||||
|
### Ajouter des écouteurs
|
||||||
|
|
||||||
|
Ensuite, ajoutez des écouteurs d'événement au formulaire et le bouton d'effacement qui réinitialise le formulaire, de sorte que si un utilisateur soumet le formulaire ou clique sur ce bouton de réinitialisation, quelque chose se passe, et ajoutez l'appel pour initialiser l'application au bas du fichier:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||||
|
clearBtn.addEventListener('click', (e) => reset(e));
|
||||||
|
init();
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Notez le raccourci utilisé pour écouter un événement de soumission ou de clic, et comment l'événement est transmis aux fonctions handleSubmit ou reset. Pouvez-vous écrire l'équivalent de ce raccourci dans un format plus long ? Lequel préfèrez-vous?
|
||||||
|
|
||||||
|
### Construisez la fonction init() et la fonction reset():
|
||||||
|
|
||||||
|
Vous allez maintenant construire la fonction qui initialise l'extension, qui s'appelle init():
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function init() {
|
||||||
|
//si quelque chose est dans localStorage, choisissez-lep
|
||||||
|
const storedApiKey = localStorage.getItem('apiKey');
|
||||||
|
const storedRegion = localStorage.getItem('regionName');
|
||||||
|
|
||||||
|
//définir l'icône pour qu'elle soit verte générique
|
||||||
|
//à faire
|
||||||
|
|
||||||
|
if (storedApiKey === null || storedRegion === null) {
|
||||||
|
//si nous n'avons pas les clés, montrez le formulaire
|
||||||
|
form.style.display = 'block';
|
||||||
|
results.style.display = 'none';
|
||||||
|
loading.style.display = 'none';
|
||||||
|
clearBtn.style.display = 'none';
|
||||||
|
errors.textContent = '';
|
||||||
|
} else {
|
||||||
|
//si nous avons enregistré des clés/régions dans localStorage, afficher les résultats lorsqu'ils se chargent
|
||||||
|
displayCarbonUsage(storedApiKey, storedRegion);
|
||||||
|
results.style.display = 'none';
|
||||||
|
form.style.display = 'none';
|
||||||
|
clearBtn.style.display = 'block';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function reset(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
//effacer le stockage local pour la région uniquement
|
||||||
|
localStorage.removeItem('regionName');
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
Dans cette fonction, il y a une logique intéressante. En le lisant, pouvez-vous voir ce qui se passe?
|
||||||
|
|
||||||
|
- deux `const` sont configurés pour vérifier si l'utilisateur a stocké une APIKey et un code de région dans le stockage local.
|
||||||
|
- si l'un de ceux-ci est nul, affiche le formulaire en changeant son style pour qu'il s'affiche en tant que 'block'
|
||||||
|
- masquer les résultats, le chargement et clearBtn et définir tout texte d'erreur sur une chaîne vide
|
||||||
|
- s'il existe une clé et une région, lancer une routine pour:
|
||||||
|
- appeler l'API pour obtenir les données d'utilisation du carbone
|
||||||
|
- masquer la zone de résultats
|
||||||
|
- masquer le formulaire
|
||||||
|
- afficher le bouton de réinitialisation
|
||||||
|
|
||||||
|
Avant de continuer, il est utile de se renseigner sur un concept très important disponible dans les navigateurs: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage est un moyen utile de stocker des chaînes dans le navigateur en tant que paire `key-value`. Ce type de stockage Web peut être manipulé par JavaScript pour gérer les données dans le navigateur. LocalStorage n'expire pas, tandis que SessionStorage, un autre type de stockage Web, est effacé lorsque le navigateur est fermé. Les différents types de stockage ont des avantages et des inconvénients à leur utilisation.
|
||||||
|
|
||||||
|
> Remarque - l'extension de votre navigateur dispose de son propre stockage local ; la fenêtre principale du navigateur est une instance différente et se comporte séparément.
|
||||||
|
|
||||||
|
Vous définissez votre APIKey pour qu'elle ait une valeur de chaîne, par exemple, et vous pouvez voir qu'elle est définie sur Edge en "inspectant" une page Web (vous pouvez cliquer avec le bouton droit sur un navigateur pour inspecter) et en accédant à l'onglet Applications pour voir le espace de rangement.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ Pensez aux situations dans lesquelles vous ne voudriez PAS stocker certaines données dans LocalStorage. En général, placer des clés API dans LocalStorage est une mauvaise idée ! Pouvez-vous voir pourquoi? Dans notre cas, étant donné que notre application est purement destinée à l'apprentissage et ne sera pas déployée dans un magasin d'applications, nous utiliserons cette méthode.
|
||||||
|
|
||||||
|
Notez que vous utilisez l'API Web pour manipuler LocalStorage, soit en utilisant `getItem()`, `setItem()` ou `removeItem()`. Il est largement pris en charge sur tous les navigateurs.
|
||||||
|
|
||||||
|
Avant de développer la fonction `displayCarbonUsage()` qui est appelée dans `init()`, définissons la fonctionnalité pour gérer la soumission initiale du formulaire.
|
||||||
|
|
||||||
|
### Gérer la soumission du formulaire
|
||||||
|
|
||||||
|
Créez une fonction appelée `handleSubmit` qui accepte un argument d'événement `(e)`. Arrêtez la propagation de l'événement (dans ce cas, nous voulons arrêter le rafraîchissement du navigateur) et appelez une nouvelle fonction, `setUpUser`, en passant les arguments `apiKey.value` et `region.value`. De cette façon, vous utilisez les deux valeurs qui sont apportées via le formulaire initial lorsque les champs appropriés sont remplis.
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
setUpUser(apiKey.value, region.value);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
✅ Rafraîchissez votre mémoire - le HTML que vous avez configuré dans la dernière leçon a deux champs de saisie dont les `values` sont capturées via le `const` que vous avez configuré en haut du fichier, et ils sont tous les deux `required` pour que le navigateur arrête les utilisateurs de la saisie de valeurs nulles.
|
||||||
|
|
||||||
|
### Set up the user
|
||||||
|
|
||||||
|
Moving on to the `setUpUser` function, here is where you set local storage values for apiKey and regionName. Add a new function:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function setUpUser(apiKey, regionName) {
|
||||||
|
localStorage.setItem('apiKey', apiKey);
|
||||||
|
localStorage.setItem('regionName', regionName);
|
||||||
|
loading.style.display = 'block';
|
||||||
|
errors.textContent = '';
|
||||||
|
clearBtn.style.display = 'block';
|
||||||
|
//faire un premier appel
|
||||||
|
displayCarbonUsage(apiKey, regionName);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
Cette fonction définit un message de chargement à afficher pendant l'appel de l'API. À ce stade, vous êtes arrivé à créer la fonction la plus importante de cette extension de navigateur!
|
||||||
|
|
||||||
|
### Afficher la consommation de carbone
|
||||||
|
|
||||||
|
Il est enfin temps d'interroger l'API !
|
||||||
|
|
||||||
|
Avant d'aller plus loin, nous devrions discuter des API. Les API, ou [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), sont un élément essentiel de la boîte à outils d'un développeur Web. Ils fournissent des moyens standard pour les programmes d'interagir et d'interagir les uns avec les autres. Par exemple, si vous créez un site Web qui doit interroger une base de données, quelqu'un peut avoir créé une API que vous pouvez utiliser. Bien qu'il existe de nombreux types d'API, l'une des plus populaires est l'[API REST](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
|
||||||
|
|
||||||
|
✅ Le terme 'REST' signifie 'Representational State Transfer' et utilise des URL configurées de différentes manières pour récupérer des données. Faites une petite recherche sur les différents types d'API disponibles pour les développeurs. Quel format vous séduit ?
|
||||||
|
|
||||||
|
Il y a des choses importantes à noter à propos de cette fonction. Remarquez d'abord le [mot-clé `async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). L'écriture de vos fonctions pour qu'elles s'exécutent de manière asynchrone signifie qu'elles attendent qu'une action, telle que le retour de données, soit terminée avant de continuer.
|
||||||
|
|
||||||
|
Voici une vidéo rapide sur `async`:
|
||||||
|
|
||||||
|
[](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.
|
||||||
|
|
||||||
|
Créez une nouvelle fonction pour interroger l'API C02Signal:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
import axios from '../node_modules/axios';
|
||||||
|
|
||||||
|
async function displayCarbonUsage(apiKey, region) {
|
||||||
|
try {
|
||||||
|
await axios
|
||||||
|
.get('https://api.co2signal.com/v1/latest', {
|
||||||
|
params: {
|
||||||
|
countryCode: region,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
'auth-token': apiKey,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
let CO2 = Math.floor(response.data.data.carbonIntensity);
|
||||||
|
|
||||||
|
//calculateColor(CO2);
|
||||||
|
|
||||||
|
loading.style.display = 'none';
|
||||||
|
form.style.display = 'none';
|
||||||
|
myregion.textContent = region;
|
||||||
|
usage.textContent =
|
||||||
|
Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
|
||||||
|
fossilfuel.textContent =
|
||||||
|
response.data.data.fossilFuelPercentage.toFixed(2) +
|
||||||
|
'% (percentage of fossil fuels used to generate electricity)';
|
||||||
|
results.style.display = 'block';
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
loading.style.display = 'none';
|
||||||
|
results.style.display = 'none';
|
||||||
|
errors.textContent = 'Sorry, we have no data for the region you have requested.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
C'est une grande fonction. Que se passe t-il ici?
|
||||||
|
|
||||||
|
- en suivant les meilleures pratiques, vous utilisez un mot-clé `async` pour que cette fonction se comporte de manière asynchrone. La fonction contient un bloc `try/catch` car elle renverra une promesse lorsque l'API renverra des données. Étant donné que vous n'avez aucun contrôle sur la vitesse à laquelle l'API répondra (elle peut ne pas répondre du tout!), vous devez gérer cette incertitude en l'appelant de manière asynchrone.
|
||||||
|
- vous interrogez l'API co2signal pour obtenir les données de votre région, en utilisant votre clé API. Pour utiliser cette clé, vous devez utiliser un type d'authentification dans vos paramètres d'en-tête.
|
||||||
|
- une fois que l'API a répondu, vous affectez divers éléments de ses données de réponse aux parties de votre écran que vous avez configurées pour afficher ces données.
|
||||||
|
- s'il y a une erreur, ou s'il n'y a pas de résultat, vous affichez un message d'erreur.
|
||||||
|
|
||||||
|
✅ L'utilisation de modèles de programmation asynchrone est un autre outil très utile dans votre boîte à outils. Lisez les [différentes manières](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) de configurer ce type de code.
|
||||||
|
|
||||||
|
Toutes nos félicitations! Si vous compilez votre extension (`npm run build`) et l'actualisez dans votre volet d'extensions, vous avez une extension qui fonctionne ! La seule chose qui ne fonctionne pas est l'icône, et vous corrigerez cela dans la prochaine leçon.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
Nous avons discuté de plusieurs types d'API jusqu'à présent dans ces leçons. Choisissez une API Web et recherchez en profondeur ce qu'elle offre. Par exemple, jetez un œil aux API disponibles dans les navigateurs telles que l'[API HTML Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). À votre avis, qu'est-ce qui fait une excellente API?
|
||||||
|
|
||||||
|
## Quiz de validation des connaissances
|
||||||
|
|
||||||
|
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26?loc=fr)
|
||||||
|
|
||||||
|
## Révision et étude personnelle
|
||||||
|
|
||||||
|
Vous avez découvert LocalStorage et les API dans cette leçon, tous deux très utiles pour le développeur Web professionnel. Pouvez-vous imaginer comment ces deux choses fonctionnent ensemble ? Réfléchissez à l'architecture d'un site Web qui stockerait des éléments à utiliser par une API.
|
||||||
|
|
||||||
|
## Affectation
|
||||||
|
|
||||||
|
[Adoptez une API](assignment.fr.md)
|
||||||
|
|
||||||
@ -0,0 +1,162 @@
|
|||||||
|
# Projet d'extension de navigateur Partie 3 : En savoir plus sur les tâches et les performances en arrière-plan
|
||||||
|
|
||||||
|
## Quiz préalable
|
||||||
|
|
||||||
|
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27?loc=fr)
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
Dans les deux dernières leçons de ce module, vous avez appris à créer un formulaire et une zone d'affichage pour les données extraites d'une API. C'est un moyen très standard de créer des présences Web sur le Web. Vous avez même appris à gérer la récupération de données de manière asynchrone. Votre extension de navigateur est presque terminée.
|
||||||
|
|
||||||
|
Il reste à gérer certaines tâches en arrière-plan, dont le rafraîchissement de la couleur de l'icône de l'extension, c'est donc le moment idéal pour parler de la façon dont le navigateur gère ce genre de tâche. Pensons à ces tâches de navigateur dans le contexte des performances de vos ressources Web au fur et à mesure que vous les créez.
|
||||||
|
|
||||||
|
## Notions de base sur les performances Web
|
||||||
|
|
||||||
|
> "Les performances du site Web dépendent de deux choses : la vitesse à laquelle la page se charge et la vitesse à laquelle le code s'exécute dessus." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||||
|
|
||||||
|
La question de savoir comment rendre vos sites Web incroyablement rapides sur toutes sortes d'appareils, pour toutes sortes d'utilisateurs, dans toutes sortes de situations, est sans surprise vaste. Voici quelques points à garder à l'esprit lorsque vous créez un projet Web standard ou une extension de navigateur.
|
||||||
|
|
||||||
|
La première chose que vous devez faire pour vous assurer que votre site fonctionne efficacement est de collecter des données sur ses performances. Le premier endroit pour le faire est dans les outils de développement de votre navigateur Web. Dans Edge, vous pouvez sélectionner le bouton "Paramètres et plus" (l'icône à trois points en haut à droite du navigateur), puis accédez à Plus d'outils > Outils de développement et ouvrez l'onglet Performances. Vous pouvez également utiliser les raccourcis clavier `Ctrl` + `Maj` + `I` sur Windows, ou `Option` + `Commande` + `I` sur Mac pour ouvrir les outils de développement.
|
||||||
|
|
||||||
|
L'onglet Performance contient un outil de profilage. Ouvrez un site Web (essayez, par exemple, https://www.microsoft.com) et cliquez sur le bouton 'Record', puis actualisez le site. Arrêtez l'enregistrement à tout moment et vous pourrez voir les routines générées pour le 'script', le 'render' (rendu), et le 'paint' (l'affichage) du site:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ Consultez la [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) à propos du panneau Performances dans Edge
|
||||||
|
|
||||||
|
> Astuce : pour avoir une vraie lecture de l'heure de démarrage de votre site web, videz le cache de votre navigateur
|
||||||
|
|
||||||
|
Sélectionnez des éléments de la chronologie du profil pour zoomer sur les événements qui se produisent pendant le chargement de votre page.
|
||||||
|
|
||||||
|
Obtenez un aperçu des performances de votre page en sélectionnant une partie de la chronologie du profil et en regardant le volet récapitulatif :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Vérifiez le volet Journal des événements pour voir si un événement a pris plus de 15 ms:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ Apprenez à connaître votre profileur! Ouvrez les outils de développement sur ce site et voyez s'il y a des goulots d'étranglement. Quel est l'élément le plus lent? Le plus rapide?
|
||||||
|
|
||||||
|
## Contrôles de profilage
|
||||||
|
|
||||||
|
En général, il existe des "zones à problèmes" que chaque développeur Web doit surveiller lors de la création d'un site, afin d'éviter les mauvaises surprises au moment du déploiement en production.
|
||||||
|
|
||||||
|
**Tailles des éléments**: Le Web est devenu 'plus lourd', et donc plus lent, au cours des dernières années. Une partie de ce poids est liée à l'utilisation d'images.
|
||||||
|
|
||||||
|
✅ Parcourez les [archives d'Internet](https://httparchive.org/reports/page-weight) pour une vue historique du poids des pages et plus encore.
|
||||||
|
|
||||||
|
Une bonne pratique consiste à vous assurer que vos images sont optimisées, livrées à la bonne taille et à la bonne résolution pour vos utilisateurs.
|
||||||
|
|
||||||
|
**Traversées du DOM**: Le navigateur doit construire son modèle objet de document en fonction du code que vous écrivez, il est donc dans l'intérêt d'une bonne performance de la page de garder vos balises minimales, en utilisant et en stylisant uniquement ce dont la page a besoin. À ce stade, l'excès de CSS associé à une page pourrait être optimisé ; les styles qui ne doivent être utilisés que sur une seule page n'ont pas besoin d'être inclus dans la feuille de style principale, par exemple.
|
||||||
|
|
||||||
|
**JavaScript**: Chaque développeur JavaScript doit surveiller les scripts 'bloquant le rendu' qui doivent être chargés avant que le reste du DOM puisse être parcouru et peint sur le navigateur. Pensez à utiliser `defer` avec vos scripts en ligne (comme cela se fait dans le module Terrarium).
|
||||||
|
|
||||||
|
✅ Essayez certains sites sur un [site Web de test de vitesse de site](https://www.webpagetest.org/) pour en apprendre plus sur les vérifications courantes qui sont effectuées pour déterminer les performances du site.
|
||||||
|
|
||||||
|
Maintenant que vous avez une idée de la façon dont le navigateur rend les ressources que vous lui envoyez, examinons les dernières choses que vous devez faire pour terminer votre extension:
|
||||||
|
|
||||||
|
### Créer une fonction pour calculer la couleur
|
||||||
|
|
||||||
|
En travaillant dans `/src/index.js`, ajoutez une fonction appelée `calculateColor()` après la série de variables `const` que vous avez définies pour accéder au DOM:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function calculateColor(value) {
|
||||||
|
let co2Scale = [0, 150, 600, 750, 800];
|
||||||
|
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||||
|
|
||||||
|
let closestNum = co2Scale.sort((a, b) => {
|
||||||
|
return Math.abs(a - value) - Math.abs(b - value);
|
||||||
|
})[0];
|
||||||
|
console.log(value + ' is closest to ' + closestNum);
|
||||||
|
let num = (element) => element > closestNum;
|
||||||
|
let scaleIndex = co2Scale.findIndex(num);
|
||||||
|
|
||||||
|
let closestColor = colors[scaleIndex];
|
||||||
|
console.log(scaleIndex, closestColor);
|
||||||
|
|
||||||
|
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Que se passe t-il ici? Vous transmettez une valeur (l'intensité carbone) de l'appel d'API que vous avez terminé dans la dernière leçon, puis vous calculez à quel point sa valeur est proche de l'indice présenté dans le tableau de couleurs. Ensuite, vous envoyez la valeur de couleur la plus proche au moteur d'exécution Chrome.
|
||||||
|
|
||||||
|
Le chrome.runtime a [une API](https://developer.chrome.com/extensions/runtime) qui gère toutes sortes de tâches en arrière-plan, et votre extension en tire parti:
|
||||||
|
|
||||||
|
> "Utilisez l'API chrome.runtime pour récupérer la page d'arrière-plan, renvoyer des détails sur le manifeste, et écouter et répondre aux événements dans le cycle de vie de l'application ou de l'extension. Vous pouvez également utiliser cette API pour convertir le chemin relatif des URL en URL entièrement qualifiées."
|
||||||
|
|
||||||
|
✅ Si vous développez cette extension de navigateur pour Edge, vous pourriez être surpris d'utiliser une API Chrome. Les nouvelles versions du navigateur Edge s'exécutent sur le moteur de navigateur Chromium, vous pouvez donc tirer parti de ces outils.
|
||||||
|
|
||||||
|
> Notez que si vous souhaitez profiler une extension de navigateur, lancez les outils de développement à partir de l'extension elle-même, car il s'agit de sa propre instance de navigateur distincte.
|
||||||
|
|
||||||
|
### Définir une couleur d'icône par défaut
|
||||||
|
|
||||||
|
Maintenant, dans la fonction `init()`, définissez l'icône sur un vert générique pour commencer en appelant à nouveau l'action `updateIcon` de chrome:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
chrome.runtime.sendMessage({
|
||||||
|
action: 'updateIcon',
|
||||||
|
value: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
### Appeler la fonction, exécuter l'appel
|
||||||
|
|
||||||
|
Ensuite, appelez cette fonction que vous venez de créer en l'ajoutant à la promesse renvoyée par l'API C02Signal:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
//let CO2...
|
||||||
|
calculateColor(CO2);
|
||||||
|
```
|
||||||
|
|
||||||
|
Et enfin, dans `/dist/background.js`, ajoutez l'écouteur pour ces appels d'action en arrière-plan:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||||
|
if (msg.action === 'updateIcon') {
|
||||||
|
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//emprunté à l'extension energy lollipop, fonctionnalité intéressante !
|
||||||
|
function drawIcon(value) {
|
||||||
|
let canvas = document.createElement('canvas');
|
||||||
|
let context = canvas.getContext('2d');
|
||||||
|
|
||||||
|
context.beginPath();
|
||||||
|
context.fillStyle = value.color;
|
||||||
|
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||||
|
context.fill();
|
||||||
|
|
||||||
|
return context.getImageData(50, 50, 100, 100);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
Dans ce code, vous ajoutez un écouteur pour tous les messages arrivant au gestionnaire de tâches principal. S'il s'appelle 'updateIcon', le code suivant est exécuté pour dessiner une icône de la bonne couleur à l'aide de l'API Canvas.
|
||||||
|
|
||||||
|
✅ Vous en saurez plus sur l'API Canvas dans les [Cours sur le jeu spatial](../../../6-space-game/2-drawing-to-canvas/translations/README.fr.md).
|
||||||
|
|
||||||
|
Maintenant, recompiler votre extension (`npm run build`), actualisez et lancez la, et observez le changement de couleur. Est-ce le bon moment pour faire une course ou faire la vaisselle? Vous le savez maintenant!
|
||||||
|
|
||||||
|
Félicitations, vous avez créé une extension de navigateur utile et en avez appris davantage sur le fonctionnement du navigateur et sur la façon de profiler ses performances.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
|
||||||
|
Enquêtez sur certains sites Web open source qui existent depuis longtemps et, sur la base de leur historique GitHub, voyez si vous pouvez déterminer comment ils ont été optimisés au fil des ans pour les performances, le cas échéant. Quel est le point sensible le plus courant?
|
||||||
|
|
||||||
|
## Quiz de validation des connaissances
|
||||||
|
|
||||||
|
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28?loc=fr)
|
||||||
|
|
||||||
|
## Révision et étude personnelle
|
||||||
|
|
||||||
|
Pensez à vous inscrire à une [newsletter sur les performances](https://perf.email/)
|
||||||
|
|
||||||
|
Étudiez certaines des façons dont les navigateurs évaluent les performances Web en consultant les onglets de performances de leurs outils Web. Trouvez-vous des différences majeures?
|
||||||
|
|
||||||
|
## Affectation
|
||||||
|
|
||||||
|
[Analyser un site par rapport à la performance](assignment.fr.md)
|
||||||
|
|
||||||
@ -1 +0,0 @@
|
|||||||
This is a placeholder, left blank purposefully
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
.ionide
|
|
||||||
.DS_Store
|
|
||||||
@ -0,0 +1,224 @@
|
|||||||
|
# Développez un jeu spatial, partie 1: Introduction
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Quiz préalable
|
||||||
|
|
||||||
|
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29?loc=fr)
|
||||||
|
|
||||||
|
### Héritage et composition dans le développement de jeux
|
||||||
|
|
||||||
|
ans les leçons précédentes, il n'y avait pas vraiment besoin de s'inquiéter de l'architecture de conception des applications que vous avez créées, car les projets étaient de très petite portée. Cependant, lorsque vos applications augmentent en taille et en étendue, les décisions architecturales deviennent une préoccupation plus importante. Il existe deux approches principales pour créer des applications plus volumineuses en JavaScript: la *composition* ou l'*héritage*. Il y a des avantages et des inconvénients dans les deux cas, mais expliquons-les dans le contexte d'un jeu.
|
||||||
|
|
||||||
|
✅ L'un des livres de programmation les plus célèbres jamais écrits concerne les [modèles de conception](https://en.wikipedia.org/wiki/Design_Patterns).
|
||||||
|
|
||||||
|
Dans un jeu, vous avez des `game objects` qui sont des objets qui existent sur un écran. Cela signifie qu'ils ont un emplacement sur un système de coordonnées cartésien, caractérisé par une coordonnée `x` et `y`. Au fur et à mesure que vous développez un jeu, vous remarquerez que tous vos objets de jeu ont une propriété standard, commune à chaque jeu que vous créez, à savoir des éléments qui sont:
|
||||||
|
|
||||||
|
- **location-based** La plupart des éléments de jeu, sinon tous, sont basés sur l'emplacement. Cela signifie qu'ils ont un emplacement, un `x` et un `y`.
|
||||||
|
- **movable** Ce sont des objets qui peuvent se déplacer vers un nouvel emplacement. Il s'agit généralement d'un héros, d'un monstre ou d'un PNJ (un personnage non joueur), mais pas par exemple, d'un objet statique comme un arbre.
|
||||||
|
- **self-destructing** Ces objets n'existent que pendant une période définie avant d'être configurés pour être supprimés. Habituellement, cela est représenté par un booléen `dead` ou `destroyed` qui signale au moteur de jeu que cet objet ne doit plus être rendu.
|
||||||
|
- **cool-down** 'Cool-down' est une propriété typique parmi les objets à courte durée de vie. Un exemple typique est un morceau de texte ou un effet graphique comme une explosion qui ne devrait être vu que pendant quelques millisecondes.
|
||||||
|
|
||||||
|
✅ Pensez à un jeu comme Pac-Man. Pouvez-vous identifier les quatre types d'objets énumérés ci-dessus dans ce jeu?
|
||||||
|
|
||||||
|
### Exprimer le comportement
|
||||||
|
|
||||||
|
Tout ce que nous avons décrit ci-dessus est le comportement que les objets du jeu peuvent avoir. Alors comment les encoder? Nous pouvons exprimer ce comportement sous forme de méthodes associées à des classes ou à des objets.
|
||||||
|
|
||||||
|
**Classes**
|
||||||
|
|
||||||
|
L'idée est d'utiliser des `classes` en conjonction avec l'`héritage` pour accomplir l'ajout d'un certain comportement à une classe.
|
||||||
|
|
||||||
|
✅ L'héritage est un concept important à comprendre. En savoir plus sur l'[article de MDN sur l'héritage](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
|
||||||
|
|
||||||
|
Exprimé via du code, un objet de jeu peut généralement ressembler à ceci:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
//configurer la classe GameObject
|
||||||
|
class GameObject {
|
||||||
|
constructor(x, y, type) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.type = type;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//cette classe étendra les propriétés de classe inhérentes à GameObject
|
||||||
|
class Movable extends GameObject {
|
||||||
|
constructor(x,y, type) {
|
||||||
|
super(x,y, type)
|
||||||
|
}
|
||||||
|
|
||||||
|
//cet objet mobile peut être déplacé sur l'écran
|
||||||
|
moveTo(x, y) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//il s'agit d'une classe spécifique qui étend la classe Movable, afin qu'elle puisse profiter de toutes les propriétés dont elle hérite
|
||||||
|
class Hero extends Movable {
|
||||||
|
constructor(x,y) {
|
||||||
|
super(x,y, 'Hero')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//cette classe, en revanche, n'hérite que des propriétés de GameObject
|
||||||
|
class Tree extends GameObject {
|
||||||
|
constructor(x,y) {
|
||||||
|
super(x,y, 'Tree')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//un héros peut bouger...
|
||||||
|
const hero = new Hero();
|
||||||
|
hero.moveTo(5,5);
|
||||||
|
|
||||||
|
//mais un arbre ne le peut pas
|
||||||
|
const tree = new Tree();
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Prenez quelques minutes pour réimaginer un héros de Pac-Man (Inky, Pinky ou Blinky, par exemple) et comment il serait écrit en JavaScript.
|
||||||
|
|
||||||
|
**Composition**
|
||||||
|
|
||||||
|
Une autre manière de gérer l'héritage d'objet consiste à utiliser la *Composition*. Ensuite, les objets expriment leur comportement comme ceci:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//créer un constant gameObject
|
||||||
|
const gameObject = {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
type: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
//...et un constant movable
|
||||||
|
const movable = {
|
||||||
|
moveTo(x, y) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//alors la constante mobileObject est composée du gameObject et des constantes mobiles
|
||||||
|
const movableObject = {...gameObject, ...movable};
|
||||||
|
|
||||||
|
//puis créez une fonction pour créer un nouveau héros qui hérite des propriétés mobileObject
|
||||||
|
function createHero(x, y) {
|
||||||
|
return {
|
||||||
|
...movableObject,
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
type: 'Hero'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//...et un objet statique qui hérite uniquement des propriétés de gameObject
|
||||||
|
function createStatic(x, y, type) {
|
||||||
|
return {
|
||||||
|
...gameObject
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//créer le héros et le déplacer
|
||||||
|
const hero = createHero(10,10);
|
||||||
|
hero.moveTo(5,5);
|
||||||
|
//et créer un arbre statique qui ne se trouve que dans les environs
|
||||||
|
const tree = createStatic(0,0, 'Tree');
|
||||||
|
```
|
||||||
|
|
||||||
|
**Quel modèle dois-je utiliser?**
|
||||||
|
|
||||||
|
C'est à vous de décider quel modèle vous choisissez. JavaScript prend en charge ces deux paradigmes.
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
Un autre modèle courant dans le développement de jeux aborde le problème de la gestion de l'expérience utilisateur et des performances du jeu.
|
||||||
|
|
||||||
|
## Modèle Pub/sub
|
||||||
|
|
||||||
|
✅ Pub/Sub signifie 'publish-subscribe' (publier-s'abonner en français)
|
||||||
|
|
||||||
|
Ce modèle répond à l'idée que les parties disparates de votre application ne devraient pas se connaître. Pourquoi donc? Il est beaucoup plus facile de voir ce qui se passe en général si différentes parties sont séparées. Cela facilite également le changement soudain de comportement si vous en avez besoin. Comment accomplir cela? Pour ce faire, nous établissons quelques concepts:
|
||||||
|
|
||||||
|
- **message**: Un message est généralement une chaîne de texte accompagnée d'une charge utile facultative (une donnée qui clarifie le sujet du message). Un message typique dans un jeu peut être `KEY_PRESSED_ENTER`.
|
||||||
|
- **publisher**: Cet élément *publie* un message et l'envoie à tous les abonnés.
|
||||||
|
- **subscriber**: Cet élément *écoute* des messages spécifiques et exécute une tâche à la suite de la réception de ce message, comme tirer un laser.
|
||||||
|
|
||||||
|
L'implémentation est assez petite mais c'est un modèle très puissant. Voici comment cela peut être mis en œuvre:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//configurer une classe EventEmitter qui contient des écouteurs
|
||||||
|
class EventEmitter {
|
||||||
|
constructor() {
|
||||||
|
this.listeners = {};
|
||||||
|
}
|
||||||
|
//lorsqu'un message est reçu, laissez l'auditeur gérer sa charge utile
|
||||||
|
on(message, listener) {
|
||||||
|
if (!this.listeners[message]) {
|
||||||
|
this.listeners[message] = [];
|
||||||
|
}
|
||||||
|
this.listeners[message].push(listener);
|
||||||
|
}
|
||||||
|
//lorsqu'un message est envoyé, envoyez-le à un auditeur avec une charge utile
|
||||||
|
emit(message, payload = null) {
|
||||||
|
if (this.listeners[message]) {
|
||||||
|
this.listeners[message].forEach(l => l(message, payload))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
Pour utiliser le code ci-dessus, nous pouvons créer une très petite implémentation:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//mettre en place une structure de message
|
||||||
|
const Messages = {
|
||||||
|
HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
|
||||||
|
};
|
||||||
|
//invoquez l'eventEmitter que vous avez configuré ci-dessus
|
||||||
|
const eventEmitter = new EventEmitter();
|
||||||
|
//définissez un héros
|
||||||
|
const hero = createHero(0,0);
|
||||||
|
//faites savoir à l'EventEmitter de surveiller les messages concernant le héros qui se déplace vers la gauche et agissez en conséquence
|
||||||
|
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
|
||||||
|
hero.move(5,0);
|
||||||
|
});
|
||||||
|
|
||||||
|
//configurer la fenêtre pour écouter l'événement keyup, en particulier si la flèche gauche est touchée, émettre un message pour déplacer le héros vers la gauche
|
||||||
|
window.addEventListener('keyup', (evt) => {
|
||||||
|
if (evt.key === 'ArrowLeft') {
|
||||||
|
eventEmitter.emit(Messages.HERO_MOVE_LEFT)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Ci-dessus, nous connectons un événement de clavier, `ArrowLeft` et envoyons le message `HERO_MOVE_LEFT`. Nous écoutons ce message et faisons bouger le `hero` en conséquence. La force de ce modèle est que l'auditeur de l'événement et le héros ne se connaissent pas. Vous pouvez remapper la touche `ArrowLeft` sur la touche `A`. De plus, il serait possible de faire quelque chose de complètement différent sur `ArrowLeft` en apportant quelques modifications à la fonction `on` de l'eventEmitter:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
|
||||||
|
hero.move(5,0);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Au fur et à mesure que les choses se compliquent lorsque votre jeu s'étend, ce modèle reste le même en complexité et votre code reste propre. Il est vraiment recommandé d'adopter ce modèle.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
Pensez à la façon dont le modèle pub-sub peut améliorer un jeu. Quelles parties doivent émettre des événements, et comment le jeu doit-il y réagir? C'est maintenant votre chance de faire preuve de créativité, en pensant à un nouveau jeu et à la façon dont ses parties pourraient se comporter.
|
||||||
|
|
||||||
|
## Quiz de validation des connaissances
|
||||||
|
|
||||||
|
[Quiz de validation des connaissancesz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30?loc=fr)
|
||||||
|
|
||||||
|
## Révision et étude personnelle
|
||||||
|
|
||||||
|
En savoir plus sur Pub/Sub en [lisant sur ce sujet](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa).
|
||||||
|
|
||||||
|
## Affectation
|
||||||
|
|
||||||
|
[Conception d'un jeu](assignment.fr.md)
|
||||||
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 346 KiB After Width: | Height: | Size: 346 KiB |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@ -0,0 +1,103 @@
|
|||||||
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||||
|
[](http://makeapullrequest.com)
|
||||||
|
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||||
|
|
||||||
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||||
|
|
||||||
|
# ప్రారంభకులకు వెబ్ అభివృద్ధి - ఒక పాఠ్యప్రణాళిక
|
||||||
|
|
||||||
|
మా స్క్రిప్ట్, సిఎస్ఎస్ మరియు హెచ్టిఎమ్ఎల్ బేసిక్స్ గురించి 12 వారాల, 24-పాఠాల పాఠ్యప్రణాళికను అందించడానికి మా ప్రతి పాఠంలో ప్రీ మరియు పోస్ట్ లెసన్ క్విజ్ లు, పాఠం పూర్తి చేయడానికి రాతపూర్వక ఆదేశాలు, పరిష్కారం, అసైన్మెంట్ మరియు మరిన్ని ఉంటాయి. మా ప్రాజెక్ట్ ఆధారిత పెడగోజీ, కొత్త నైపుణ్యాలు 'అతుక్కుపోవడానికి' రుజువు చేయబడ్డ మార్గం, బిల్డింగ్ చేసేటప్పుడు నేర్చుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది.
|
||||||
|
|
||||||
|
**మా రచయితలు జెన్ లూపర్, క్రిస్ నోరింగ్, క్రిస్టోఫర్ హారిసన్, జాస్మిన్ గ్రీన్అవే, యోహాన్ లాసోర్సా, ఫ్లోర్ డ్రీస్, మరియు స్కెచ్ నోట్ కళాకారుడు టోమోమి ఇమురాకు హృదయపూర్వక ధన్యవాదాలు!**
|
||||||
|
|
||||||
|
# ప్రారంభించడం
|
||||||
|
|
||||||
|
> **గురువులు**, మేము కొన్ని చేర్చాము [సూచనలు](for-teachers.pt.md) ఈ పాఠ్యప్రణాళికను ఎలా ఉపయోగించాలనే దానిపై మా చర్చలో మీ ఫీడ్ బ్యాక్ ని మేం ఇష్టపడతాము [ఫోరమ్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||||
|
|
||||||
|
> **విద్యార్థులు**, ఈ పాఠ్యప్రణాళికను మీ స్వంతంగా ఉపయోగించడానికి, మొత్తం రెపోను ఫోర్క్ చేసి, మీ స్వంతంగా వ్యాయామాలను పూర్తి చేయండి, ప్రీ లెక్చర్ క్విజ్ తో ప్రారంభించి, తరువాత ఉపన్యాసం చదవడం మరియు మిగిలిన కార్యకలాపాలను పూర్తి చేయడం. పరిష్కార కోడ్ కాపీ చేయడం కంటే పాఠాలను అర్థం చేసుకోవడం ద్వారా ప్రాజెక్టులను సృష్టించడానికి ప్రయత్నించండి; అయితే ఆ కోడ్ ప్రతి ప్రాజెక్ట్ ఆధారిత పాఠంలో/పరిష్కారాల సంచికల్లో అందుబాటులో ఉంటుంది. స్నేహితులతో అధ్యయన బృందాన్ని ఏర్పాటు చేయడం మరియు కంటెంట్ ను కలిసి పరిశీలించడం మరొక ఆలోచన. తదుపరి అధ్యయనం కొరకు, మేం సిఫారసు చేస్తున్నాం. [మైక్రోసాఫ్ట్ లెర్న్](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) మరియు దిగువ పేర్కొన్న వీడియోలను చూడటం ద్వారా.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=R1wrdtmBSII "ప్రోమో వీడియో")
|
||||||
|
|
||||||
|
ద్వారా జిఫ్ [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||||
|
|
||||||
|
> 🎥 ప్రాజెక్ట్ గురించి వీడియో కొరకు మరియు దానిని సృష్టించిన వ్యక్తుల కొరకు పై ఇమేజ్ మీద క్లిక్ చేయండి!
|
||||||
|
|
||||||
|
## బోధనా విధానం
|
||||||
|
|
||||||
|
ఈ పాఠ్యప్రణాళికను రూపొందించేటప్పుడు మేము రెండు బోధనా సిద్ధాంతాలను ఎంచుకున్నాము: ఇది ప్రాజెక్ట్ ఆధారితమైనది మరియు ఇది తరచుగా క్విజ్ లను కలిగి ఉండేలా చూస్తుంది. ఈ సిరీస్ ముగిసే నాటికి, విద్యార్థులు టైపింగ్ గేమ్, వర్చువల్ టెర్రరియం, 'గ్రీన్' బ్రౌజర్ పొడిగింపు, 'స్పేస్ ఆక్రమణదారుల' రకం గేమ్, మరియు వ్యాపార తరహా బ్యాంకింగ్ యాప్ ను నిర్మించి, నేటి వెబ్ డెవలపర్ యొక్క ఆధునిక టూల్ చైన్ తో పాటు జావాస్క్రిప్ట్, హెచ్ టిఎమ్ ఎల్ మరియు సిఎస్ఎస్ యొక్క ప్రాథమికాంశాలను నేర్చుకున్నారు.
|
||||||
|
|
||||||
|
> 🎓 ఈ పాఠ్యప్రణాళికలో మీరు మొదటి కొన్ని పాఠాలను ఒక విధంగా తీసుకోవచ్చు [మార్గాన్ని నేర్చుకోండి](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) మైక్రోసాఫ్ట్ లెర్న్ పై!
|
||||||
|
|
||||||
|
కంటెంట్ ప్రాజెక్ట్ లతో అలైన్ అయ్యేలా చూడటం ద్వారా, ఈ ప్రక్రియ విద్యార్థుల కొరకు మరింత నిమగ్నం చేయబడుతుంది మరియు కాన్సెప్ట్ లను నిలుపుకోవడం పెంచబడుతుంది. మేము జావాస్క్రిప్ట్ బేసిక్స్ లో అనేక స్టార్టర్ పాఠాలు కూడా వ్రాశాము, కాన్సెప్ట్ లను పరిచయం చేయడానికి, వీడియోనుండి వీడియోతో జత చేయబడింది "[ప్రారంభ సిరీస్ కు: జావాస్క్రిప్ట్](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" వీడియో ట్యుటోరియల్స్ సేకరణ, దీని రచయితలు కొందరు ఈ పాఠ్యప్రణాళికకు సహకరించారు.
|
||||||
|
|
||||||
|
అదనంగా, ఒక తరగతి కి ముందు తక్కువ వాటాల క్విజ్ ఒక అంశాన్ని నేర్చుకునే దిశగా విద్యార్థి యొక్క ఉద్దేశ్యాన్ని ఏర్పరుస్తుంది, తరగతి తర్వాత రెండవ క్విజ్ మరింత నిలుపుదలను నిర్ధారిస్తుంది. ఈ కరిక్యులం సరళంగా మరియు వినోదాత్మకంగా రూపొందించబడింది మరియు దీనిని పూర్తిగా లేదా పాక్షికంగా తీసుకోవచ్చు. ప్రాజెక్టులు చిన్నవిగా ప్రారంభమవుతాయి మరియు ౧౨ వారాల చక్రం చివరినాటికి మరింత సంక్లిష్టంగా మారతాయి.
|
||||||
|
|
||||||
|
ఒక ఫ్రేమ్ వర్క్ ని స్వీకరించడానికి ముందు వెబ్ డెవలపర్ గా అవసరమైన ప్రాథమిక నైపుణ్యాలపై దృష్టి సారించడం కొరకు జావాస్క్రిప్ట్ ఫ్రేమ్ వర్క్ లను ప్రవేశపెట్టడాన్ని మేం ఉద్దేశ్యపూర్వకంగా పరిహరించినప్పటికీ, ఈ కరిక్యులం పూర్తి చేయడానికి మంచి తదుపరి దశ నోడ్ గురించి నేర్చుకోవడం.js వీడియోల యొక్క మరో కలెక్షన్ ద్వారా: "[ప్రారంభ సిరీస్ నుండి: నోడ్.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||||
|
|
||||||
|
> మా కనుగొనండి [ప్రవర్తనా నియమావళి](CODE_OF_CONDUCT.md), [దోహదపడటం](CONTRIBUTING.md), మరియు [తర్జుమా](TRANSLATIONS.md) మార్గదర్శకాలు. మీ నిర్మాణాత్మక ఫీడ్ బ్యాక్ ని మేం స్వాగతిస్తున్నాం!
|
||||||
|
|
||||||
|
## ప్రతి పాఠంలో ఇవి ఉంటాయి:
|
||||||
|
|
||||||
|
- ఐచ్ఛిక స్కెచ్ నోట్
|
||||||
|
- ఐచ్ఛిక అనుబంధ వీడియో
|
||||||
|
- ప్రీ లెసన్ వార్మప్ క్విజ్
|
||||||
|
- వ్రాసిన పాఠం
|
||||||
|
- ప్రాజెక్ట్ ఆధారిత పాఠాల కొరకు, ప్రాజెక్ట్ ని ఎలా నిర్మించాలనే దానిపై దశలవారీ గైడ్ లు
|
||||||
|
- నాలెడ్జ్ చెక్ లు
|
||||||
|
- ఒక సవాలు
|
||||||
|
- అనుబంధ పఠనం
|
||||||
|
- అసైన్ మెంట్
|
||||||
|
- పాఠం అనంతర క్విజ్
|
||||||
|
|
||||||
|
> **క్విజ్ ల గురించి ఒక నోట్**: అన్ని క్విజ్ లు [ఈ యాప్ లో](https://happy-mud-02d95f10f.azurestaticapps.net/) కలిగి ఉంటాయి, ఒక్కొక్కటి మూడు ప్రశ్నల యొక్క 48 మొత్తం క్విజ్ లు. అవి పాఠాల లోపల నుంచి లింక్ చేయబడతాయి, అయితే క్విజ్ యాప్ ని స్థానికంగా రన్ చేయవచ్చు; 'క్విజ్-యాప్' ఫోల్డర్ లోని సూచనను పాటించండి. అవి క్రమంగా స్థానికీకరించబడుతున్నాయి.
|
||||||
|
|
||||||
|
## పాఠాలు
|
||||||
|
|
||||||
|
| | ప్రాజెక్ట్ పేరు | బోధించిన భావనలు | చదువు లక్ష్యాలు | లింక్ చేయబడింది పాఠం | రచయిత |
|
||||||
|
| :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||||
|
| 01 | ప్రారంభించడం | ప్రోగ్రామింగ్ మరియు టూల్స్ ఆఫ్ ది ట్రేడ్ కు పరిచయం | చాలా ప్రోగ్రామింగ్ భాషల వెనుక మరియు ప్రొఫెషనల్ డెవలపర్లు వారి ఉద్యోగాలు చేయడానికి సహాయపడే సాఫ్ట్ వేర్ గురించి ప్రాథమిక పునాదిని తెలుసుకోండి | [ప్రోగ్రామింగ్ లాంగ్వేజెస్ మరియు టూల్స్ ఆఫ్ ది ట్రేడ్ కు ఇంట్రో](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||||
|
| 02 | ప్రారంభించడం | గిట్ హబ్ యొక్క బేసిక్స్, టీమ్ తో పనిచేయడం | మీ ప్రాజెక్ట్ లో GitHub ని ఎలా ఉపయోగించాలి, కోడ్ బేస్ పై ఇతరులతో ఎలా సహకరించాలి | [గిట్ హబ్ కు ఇంట్రో](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||||
|
| 03 | ప్రారంభించడం | యాక్సెసబిలిటీ | వెబ్ యొక్క ప్రాథమికాంశాలను తెలుసుకోండి accessibility | [యాక్సెసబిలిటీ ఫండమెంటల్స్](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||||
|
| 04 | జెఎస్ బేసిక్స్ | జావాస్క్రిప్ట్ డేటా రకాలు | జావాస్క్రిప్ట్ డేటా యొక్క ప్రాథమికాంశాలు రకాలు | [డేటా రకాలు](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||||
|
| 05 | జెఎస్ బేసిక్స్ | విధులు మరియు పద్ధతులు | అప్లికేషన్ యొక్క లాజిక్ ఫ్లో నిర్వహించడం కొరకు ఫంక్షన్ లు మరియు విధానాల గురించి తెలుసుకోండి. | [విధులు మరియు పద్ధతులు](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||||
|
| 06 | జెఎస్ బేసిక్స్ | జెఎస్ తో నిర్ణయాలు తీసుకోవడం | నిర్ణయం తీసుకునే విధానాలను ఉపయోగించి మీ కోడ్ లో పరిస్థితులను ఎలా సృష్టించాలో తెలుసుకోండి. | [నిర్ణయాలు తీసుకోవడం](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||||
|
| 07 | జెఎస్ బేసిక్స్ | ఎరాయ్ లు మరియు లూప్ లు | జావాస్క్రిప్ట్ లో ఎరాయ్ లు మరియు లూప్ లను ఉపయోగించి డేటాతో పనిచేయండి. | [ఎరాయ్ లు మరియు లూప్ లు](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||||
|
| 08 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ప్రాక్టీస్ లో హెచ్ టిఎమ్ ఎల్ | లేఅవుట్ నిర్మించడంపై దృష్టి సారించి, ఆన్ లైన్ టెర్రిరియం సృష్టించడం కొరకు హెచ్ టిఎమ్ ఎల్ ని రూపొందించండి. | [హెచ్ టిఎమ్ ఎల్ పరిచయం](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||||
|
| 09 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ఆచరణలో సిఎస్ఎస్ | పేజీని ప్రతిస్పందించేలా చేయడం సహా సిఎస్ఎస్ యొక్క ప్రాథమికాంశాలపై దృష్టి సారించి, ఆన్ లైన్ టెర్రరియంస్టైల్ చేయడానికి సిఎస్ఎస్ ని నిర్మించండి. | [సిఎస్ఎస్ పరిచయం](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||||
|
| 10 | [టెర్రిరియం](/3-terrarium/solution) | జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్ | క్లోజర్లు మరియు డివోఎమ్ మానిప్యులేషన్ పై దృష్టి సారించి, డ్రాగ్/డ్రాప్ ఇంటర్ ఫేస్ వలే టెర్రిరియం పనిచేయడానికి జావాస్క్రిప్ట్ ని రూపొందించండి. | [జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||||
|
| 11 | [టైపింగ్ గేమ్](/4-typing-game/solution) | టైపింగ్ గేమ్ నిర్మించండి | మీ జావాస్క్రిప్ట్ యాప్ యొక్క లాజిక్ డ్రైవ్ చేయడం కొరకు కీబోర్డ్ ఈవెంట్ లను ఎలా ఉపయోగించాలో తెలుసుకోండి. | [ఈవెంట్ ఆధారిత ప్రోగ్రామింగ్](/4-typing-game/typing-game/README.md) | Christopher |
|
||||||
|
| 12 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | బ్రౌజర్ లతో పనిచేయడం | బ్రౌజర్ లు ఏవిధంగా పనిచేస్తాయి, వాటి చరిత్ర మరియు బ్రౌజర్ పొడిగింపు యొక్క మొదటి ఎలిమెంట్ లను ఎలా పరంజా చేయాలో తెలుసుకోండి. | [బ్రౌజర్ల గురించి](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||||
|
| 13 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | ఒక ఫారాన్ని నిర్మించడం, APఐని పిలవడం మరియు స్థానిక స్టోరేజీలో వేరియబుల్స్ నిల్వ చేయడం | స్థానిక స్టోరేజీలో నిల్వ చేయబడ్డ వేరియబుల్స్ ఉపయోగించి APఐకి కాల్ చేయడం కొరకు మీ బ్రౌజర్ పొడిగింపు యొక్క జావాస్క్రిప్ట్ ఎలిమెంట్ లను రూపొందించండి. | [APఐలు, ఫారాలు మరియు స్థానిక స్టోరేజీ](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||||
|
| 14 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | బ్రౌజర్ లో నేపథ్య ప్రక్రియలు, వెబ్ పనితీరు | ఎక్స్ టెన్షన్ యొక్క ఐకాన్ ని నిర్వహించడం కొరకు బ్రౌజర్ యొక్క బ్యాక్ గ్రౌండ్ ప్రాసెస్ లను ఉపయోగించండి. వెబ్ పనితీరు మరియు కొన్ని ఆప్టిమైజేషన్ ల గురించి తెలుసుకోండి | [బ్యాక్ గ్రౌండ్ టాస్క్ లు మరియు పనితీరు](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||||
|
| 15 | [స్పేస్ గేమ్](/6-space-game/solution) | జావాస్క్రిప్ట్ తో మరింత అధునాతన గేమ్ డెవలప్ మెంట్ | ఒక గేమ్ ని రూపొందించడం కొరకు సిద్ధం చేయడం కొరకు క్లాసులు మరియు కంపోజిషన్ మరియు పబ్/సబ్ ప్యాట్రన్ రెండింటిని ఉపయోగించి ఇన్హెరిటెన్స్ గురించి తెలుసుకోండి. | [అధునాతన గేమ్ డెవలప్ మెంట్ పరిచయం](/6-space-game/1-introduction/README.md) | Chris |
|
||||||
|
| 16 | [స్పేస్ గేమ్](/6-space-game/solution) | కాన్వాస్ కు డ్రాయింగ్ | స్క్రీన్ కు ఎలిమెంట్ లను గీయడం కొరకు ఉపయోగించే కాన్వాస్ APఐ గురించి తెలుసుకోండి. | [కాన్వాస్ కు డ్రాయింగ్](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||||
|
| 17 | [స్పేస్ గేమ్](/6-space-game/solution) | స్క్రీన్ చుట్టూ మూలకాలను కదిలించడం | కార్టేసియన్ కోఆర్డినేట్ లు మరియు కాన్వాస్ ఎపిఐఉపయోగించి ఎలిమెంట్ లు చలనాన్ని ఎలా పొందగలవో కనుగొనండి. | [చుట్టూ మూలకాలను తరలించడం](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||||
|
| 18 | [స్పేస్ గేమ్](/6-space-game/solution) | తాడన గుర్తింపు | కీప్రెస్ లను ఉపయోగించి ఎలిమెంట్ లు ఒకదానికొకటి ఢీకొనడం మరియు ప్రతిస్పందించేలా చేయడం మరియు గేమ్ యొక్క పనితీరును ధృవీకరించడం కొరకు కూల్ డౌన్ ఫంక్షన్ ని అందించడం | [తాడన గుర్తింపు](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||||
|
| 19 | [స్పేస్ గేమ్](/6-space-game/solution) | స్కోరును ఉంచడం | ఆట యొక్క స్థితి మరియు పనితీరు ఆధారంగా గణిత గణనలు నిర్వహించండి | [కీపింగ్ స్కోరు](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||||
|
| 20 | [స్పేస్ గేమ్](/6-space-game/solution) | ఆటను ముగించడం మరియు తిరిగి ప్రారంభించడం | ఆస్తులను శుభ్రం చేయడం మరియు వేరియబుల్ విలువలను రీసెట్ చేయడం సహా గేమ్ ని ముగించడం మరియు తిరిగి ప్రారంభించడం గురించి తెలుసుకోండి. | [ముగింపు పరిస్థితి](/6-space-game/6-end-condition/README.md) | Chris |
|
||||||
|
| 21 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | వెబ్ యాప్ లో హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు | రూటింగ్ మరియు హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లను ఉపయోగించి మల్టీపేజీ వెబ్ సైట్ యొక్క ఆర్కిటెక్చర్ యొక్క పరంజాను ఎలా సృష్టించాలో తెలుసుకోండి. | [హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||||
|
| 22 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారాన్ని రూపొందించండి | బిల్డింగ్ ఫారాలు మరియు ధ్రువీకరణ రొటీన్ ల హ్యాండింగ్ గురించి తెలుసుకోండి | [రూపాలు](/7-bank-project/2-forms/README.md) | Yohan |
|
||||||
|
| 23 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | డేటాను పొందడం మరియు ఉపయోగించే విధానాలు | డేటా మీ యాప్ లో మరియు బయటకు ఎలా ప్రవహిస్తుంది, దానిని ఎలా తీసుకురావాలి, నిల్వ చేయాలి మరియు పారవేయాలి | [రూపాలు](/7-bank-project/3-data/README.md) | Yohan |
|
||||||
|
| 24 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | స్టేట్ మేనేజ్ మెంట్ యొక్క భావనలు | మీ యాప్ స్థితిని ఎలా నిలుపుకుందో మరియు దానిని ప్రోగ్రామ్ గా ఎలా నిర్వహించాలో తెలుసుకోండి. | [రాష్ట్ర నిర్వహణ](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||||
|
|
||||||
|
## ఆఫ్ లైన్ యాక్సెస్
|
||||||
|
|
||||||
|
మీరు [డాక్సిఫై](https://docsify.js.org/#/) ఉపయోగించడం ద్వారా ఈ డాక్యుమెంటేషన్ ని ఆఫ్ లైన్ లో రన్ చేయవచ్చు. ఈ రెపోను ఫోర్క్ చేయండి, [మీ స్థానిక యంత్రంపై డాక్సిఫైని ఇన్ స్టాల్ చేయండి](https://docsify.js.org/#/quickstart), ఆపై ఈ రెపో యొక్క రూట్ ఫోల్డర్ లో, 'డాక్సిఫై సర్వ్' టైప్ చేయండి. వెబ్ సైట్ మీ స్థానిక హోస్ట్ లో పోర్ట్ 3000లో అందించబడుతుంది: 'స్థానిక హోస్ట్:3000'.
|
||||||
|
|
||||||
|
## పిడిఎఫ్
|
||||||
|
|
||||||
|
అన్ని పాఠాల యొక్క పిడిఎఫ్ ని [ఇక్కడ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) చూడవచ్చు.
|
||||||
|
|
||||||
|
## ఇతర పాఠ్యప్రణాళిక
|
||||||
|
|
||||||
|
మా బృందం ఇతర పాఠ్యాంశాలను ఉత్పత్తి చేస్తుంది! తనిఖీ:
|
||||||
|
|
||||||
|
- [ప్రారంభకులకు మెషిన్ లెర్నింగ్](https://aka.ms/ml-beginners)
|
||||||
|
- [ప్రారంభకులకు ఐవోటి](https://aka.ms/iot-beginners)
|
||||||
|
- [ప్రారంభకులకు డేటా సైన్స్](https://aka.ms/datascience-beginners)
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
## విద్యావేత్తల కొరకు
|
||||||
|
|
||||||
|
ఈ పాఠ్యప్రణాళికను మీ తరగతి గదిలో ఉపయోగించాలని మీరు అనుకుంటున్నారా? దయచేసి స్వేచ్ఛగా ఉండండి!
|
||||||
|
|
||||||
|
వాస్తవానికి, మీరు గిట్ హబ్ క్లాస్ రూమ్ ఉపయోగించడం ద్వారా Gtహబ్ లోనే దీనిని ఉపయోగించవచ్చు.
|
||||||
|
|
||||||
|
అలా చేయడానికి, ఈ రెపోను ఫోర్క్ చేయండి. మీరు ప్రతి పాఠం కోసం ఒక రెపోను సృష్టించాల్సి ఉంటుంది, కాబట్టి మీరు ప్రతి సంచికను ప్రత్యేక రెపోలోకి వెలికితీయాల్సి ఉంటుంది. ఆ విధంగా, [గిట్ హబ్ క్లాస్ రూమ్](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) ప్రతి పాఠాన్ని విడిగా ఎంచుకోవచ్చు.
|
||||||
|
|
||||||
|
|
||||||
|
ఈ [పూర్తి సూచనలు](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) రూమ్-విత్-గిథబ్-క్లాస్ రూమ్/) మీ తరగతి గదిని ఎలా ఏర్పాటు చేయాలో మీకు ఒక అవగాహన ఇస్తుంది.
|
||||||
|
|
||||||
|
## మూడెల్, కాన్వాస్ లేదా బ్లాక్ బోర్డ్ లో దీనిని ఉపయోగించడం
|
||||||
|
|
||||||
|
ఈ లెర్నింగ్ మేనేజ్మెంట్ సిస్టమ్స్లో ఈ పాఠ్యాంశాలు బాగా పని చేస్తాయి! పూర్తి కంటెంట్ కోసం [Moodle అప్లోడ్ ఫైల్](/teaching-files/webdev-moodle.mbz) ని ఉపయోగించండి లేదా కొన్నింటిని కలిగి ఉన్న [కామన్ కార్ట్రిడ్జ్ ఫైల్](/teaching-files/webdev-common-cartridge.imscc) ఇందులో కొంత కంటెంట్ ఉంటుంది. Moodle Cloud పూర్తి కామన్ కాట్రిడ్జ్ ఎగుమతులకు మద్దతు ఇవ్వదు, కాబట్టి కాన్వాస్లోకి అప్లోడ్ చేయగల మూడ్లే డౌన్లోడ్ ఫైల్ను ఉపయోగించడం ఉత్తమం. దయచేసి మేము ఈ అనుభవాన్ని ఎలా మెరుగుపరచవచ్చో మాకు తెలియజేయండి.
|
||||||
|
|
||||||
|
|
||||||
|
> మూడ్లే తరగతి గదిలో పాఠ్యప్రణాళిక
|
||||||
|
|
||||||
|
|
||||||
|
> కాన్వాస్లో పాఠ్యప్రణాళిక
|
||||||
|
|
||||||
|
## రెపోను యథాతథంగా ఉపయోగించడం
|
||||||
|
|
||||||
|
మీరు GitHub క్లాస్రూమ్ని ఉపయోగించకుండా, ప్రస్తుతం ఉన్న విధంగానే ఈ రెపోను ఉపయోగించాలనుకుంటే, అది కూడా చేయవచ్చు. మీరు మీ విద్యార్థులతో కలిసి ఏ పాఠంతో కలిసి పని చేయాలో వారితో కమ్యూనికేట్ చేయాలి.
|
||||||
|
|
||||||
|
ఆన్లైన్ ఫార్మాట్లో (జూమ్, టీమ్లు లేదా ఇతరమైనవి) మీరు క్విజ్ల కోసం బ్రేక్అవుట్ రూమ్లను ఏర్పరచవచ్చు మరియు విద్యార్థులు నేర్చుకోవడానికి సిద్ధంగా ఉండటానికి వారికి మెంటర్ని అందించవచ్చు. ఆపై క్విజ్ల కోసం విద్యార్థులను ఆహ్వానించండి మరియు నిర్దిష్ట సమయంలో వారి సమాధానాలను 'సమస్యలు'గా సమర్పించండి. విద్యార్థులు బహిరంగంగా కలిసి పని చేయాలని మీరు కోరుకుంటే, మీరు అసైన్మెంట్లతో అదే పని చేయవచ్చు.
|
||||||
|
|
||||||
|
మీరు మరింత ప్రైవేట్ ఆకృతిని ఇష్టపడితే, పాఠ్యాంశాలను, పాఠం వారీగా పాఠాన్ని, వారి స్వంత గిట్హబ్ రెపోలను ప్రైవేట్ రెపోలుగా విభజించి, మీకు యాక్సెస్ ఇవ్వమని మీ విద్యార్థులను అడగండి. అప్పుడు వారు క్విజ్లు మరియు అసైన్మెంట్లను ప్రైవేట్గా పూర్తి చేయగలరు మరియు మీ తరగతి గది రెపోలో సమస్యల ద్వారా వాటిని మీకు సమర్పించగలరు.
|
||||||
|
|
||||||
|
ఆన్లైన్ క్లాస్రూమ్ ఫార్మాట్లో దీన్ని పని చేయడానికి అనేక మార్గాలు ఉన్నాయి. దయచేసి మీకు ఏది బాగా పని చేస్తుందో మాకు తెలియజేయండి!
|
||||||
|
|
||||||
|
## దయచేసి మీ ఆలోచనలను మాకు తెలియజేయండి!
|
||||||
|
|
||||||
|
మేము ఈ పాఠ్యాంశాలను మీకు మరియు మీ విద్యార్థులకు పని చేయాలనుకుంటున్నాము. దయచేసి మాకు [ఫీడ్బ్యాక్](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
|
||||||
Loading…
Reference in new issue