Skip to content

Commit

Permalink
fixed french typo for lesson 6
Browse files Browse the repository at this point in the history
  • Loading branch information
MarionLeHerisson committed Oct 23, 2019
1 parent 7923383 commit 2838af0
Show file tree
Hide file tree
Showing 11 changed files with 55 additions and 56 deletions.
2 changes: 1 addition & 1 deletion fr/6/00-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Vous n'êtes pas un CryptoZombie ordinaire...

En finissant la Leçon 5, vous avez prouvé que vous avez une assez bonne compréhension de Solidity.

Mais aucune DApp est terminée sans un moyen pour ses utilisateurs d'interagir avec...
Mais aucune DApp n'est terminée sans un moyen pour ses utilisateurs d'interagir avec...

Dans cette leçon, nous allons voir comment interagir avec votre smart contract et construire un front-end basique pour votre DApp en utilisant une bibliothèque appelée **Web3.js**.

Expand Down
4 changes: 2 additions & 2 deletions fr/6/01.md
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ material:
</html>
---

En terminant la Leçon 5, notre DApp zombie est terminée. Maintenant, nous allons créer une page web basique où vos utilisateurs pourrons interagir avec.
En terminant la Leçon 5, notre DApp zombie est terminée. Maintenant, nous allons créer une page web basique où vos utilisateurs pourront interagir avec.

Pour cela, nous allons utiliser une bibliothèque JavaScript de la fondation Ethereum appelée **_Web3.js_**.

Expand All @@ -384,7 +384,7 @@ Les nœuds Ethereum parlent seulement un langage appelé **_JSON-RPC_**, qui n'e

Heureusement, Web3.js cache ces vilaines requêtes de notre vue, et vous avez seulement besoin d'interagir avec une interface JavaScript pratique et lisible.

Au lieu d'écrire la requête ci-dessus, appelez une fonction dans votre code ressemblera à ceci :
Au lieu d'écrire la requête ci-dessus, appeler une fonction dans votre code ressemblera à ceci :

```
CryptoZombies.methods.createRandomZombie("Vitalik Nakamoto 🤔")
Expand Down
6 changes: 3 additions & 3 deletions fr/6/02.md
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ Vous pourriez héberger votre propre nœud Ethereum comme fournisseur. Mais il e

## Infura

<a href="https://infura.io/" target=_blank>Infura</a> est un service qui a plusieurs nœuds Ethereum avec une fonctionnalité de cache pour des lectures plus rapides, que vous pouvez accéder gratuitement depuis leur API. En utilisant Infura comme fournisseur, vous pouvez envoyer et recevoir des messages de la blockchain Ethereum de manière fiable, sans avoir à vous occuper de votre propre nœud.
<a href="https://infura.io/" target=_blank>Infura</a> est un service qui a plusieurs nœuds Ethereum avec une fonctionnalité de cache pour des lectures plus rapides, auquel vous pouvez accéder gratuitement depuis leur API. En utilisant Infura comme fournisseur, vous pouvez envoyer et recevoir des messages de la blockchain Ethereum de manière fiable, sans avoir à vous occuper de votre propre nœud.

Vous pouvez configurer Web3 pour utiliser Infura comme fournisseur web3 de cette manière :

Expand All @@ -407,7 +407,7 @@ Cependant, vu que notre DApp va avoir beaucoup d'utilisateurs - et que ces utili
La cryptographie est compliquée, et à part si vous êtes un expert en sécurité et que vous savez vraiment ce que vous faîtes, ce ne sera sûrement pas une bonne idée de vouloir gérer les clés privées vous-même.

Heureusement, vous n'avez pas besoin - il existe déjà des services qui s'en occupe pour vous. Le plus connu est **_MetaMask_**.
Heureusement, vous n'avez pas besoin - il existe déjà des services qui s'en occupent pour vous. Le plus connu est **_MetaMask_**.

## MetaMask

Expand Down Expand Up @@ -448,6 +448,6 @@ Vous pouvez utiliser ce code standard dans toutes les applications que vous cré
## A votre tour

Nous avons créez une balise script vide avant la balise de fermeture `</body>` dans notre fichier HTML. Vous pouvez écrire notre code javascript pour notre leçon ici.
Nous avons créé une balise script vide avant la balise de fermeture `</body>` dans notre fichier HTML. Vous pouvez écrire notre code javascript pour notre leçon ici.

1. Faites un copier/coller du code modèle ci-dessus pour détecter MetaMask. C'est le bloc qui commence par `window.addEventListener`.
10 changes: 5 additions & 5 deletions fr/6/03.md
Original file line number Diff line number Diff line change
Expand Up @@ -860,7 +860,7 @@ material:
</html>
---

Maintenant que nous avons initialiser Web3.js avec le fournisseur Web3 de MetaMask, nous allons configurer la communication avec notre smart contract.
Maintenant que nous avons initialisé Web3.js avec le fournisseur Web3 de MetaMask, nous allons configurer la communication avec notre smart contract.


Web3.js va avoir besoin de 2 choses pour pouvoir communiquer avec notre contrat : son **_adresse_** et son **_ABI_**.
Expand All @@ -869,14 +869,14 @@ Web3.js va avoir besoin de 2 choses pour pouvoir communiquer avec notre contrat

Après avoir fini d'écrire votre smart contract, vous allez le compiler et le déployer sur Ethereum. Nous allons voir le **déploiement** dans la **prochaine leçon**, mais vu que c'est assez différent que d'écrire du code, nous avons décidé de ne pas faire dans l'ordre et de parler de Web3.js en premier.

Après avoir déployer votre contrat, il sera associé à une adresse Ethereum pour toujours. Si vous vous rappelez la leçon 2, l'adresse du contrat CryptoKitties sur Ethereum est `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`.
Après avoir déployé votre contrat, il sera associé à une adresse Ethereum pour toujours. Si vous vous rappelez la leçon 2, l'adresse du contrat CryptoKitties sur Ethereum est `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`.

Vous allez avoir besoin de copier cette adresse après le déploiement afin de pouvoir communiquer avec le smart contract.


## ABI du contrat

L'autre chose que Web3.js à besoin pour communiquer avec votre contrat et son **_ABI_**.
L'autre chose dont Web3.js a besoin pour communiquer avec votre contrat et son **_ABI_**.

ABI veut dire "Application Binary Interface" (Interface Binaire d'Application). Fondamentalement, c'est une représentation des fonctions de votre contrat au format JSON qui indique à Web3.js comment formater les appels aux fonctions pour que votre contrat les comprenne.

Expand All @@ -897,9 +897,9 @@ var myContract = new web3js.eth.Contract(myABI, myContractAddress);

## A votre tour

1. Dans le `<head>` de notre document, ajouter une autre balise de script pour `cryptozombies_abi.js` afin que nous puissions importer l'ABI à notre projet.
1. Dans le `<head>` de notre document, ajoutez une autre balise de script pour `cryptozombies_abi.js` afin que nous puissions importer l'ABI à notre projet.

2. Au début de notre balise `<script>` dans le `<body>`, déclarez une `var` appelée `cryptoZombies`, mais ne lui attribuez pas de valeur. Nous allons nous servir de cet variable plus tard pour stocker notre contrat instancié.
2. Au début de notre balise `<script>` dans le `<body>`, déclarez une `var` appelée `cryptoZombies`, mais ne lui attribuez pas de valeur. Nous allons nous servir de cette variable plus tard pour stocker notre contrat instancié.

3. Ensuite, créez une `function` appelée `startApp()`. Nous la compléterons dans les 2 prochaines étapes.

Expand Down
10 changes: 5 additions & 5 deletions fr/6/04.md
Original file line number Diff line number Diff line change
Expand Up @@ -439,11 +439,11 @@ Web3.js a deux méthodes que nous allons utiliser pour appeler les fonctions de

### Call

`call` est utilisé pour les fonctions `view` et`pure`. C'est exécuté seulement sur le nœud local, et cela ne va pas créer de transaction sur la blockchain.
`call` est utilisé pour les fonctions `view` et `pure`. Il est exécuté seulement sur le nœud local, et cela ne va pas créer de transaction sur la blockchain.

> **Rappel :** les fonctions `view` et `pure` sont des fonctions en lecture seule et ne changent pas l'état de la blockchain. Elles ne coûtent pas de gas et l'utilisateur n'aura pas besoin de signer de transaction avec MetaMask.
En utilisant Web3,js, vous allez appeler (`call`) une fonction nommée `myMethod` avec le paramètre `123` comme ceci :
En utilisant Web3.js, vous allez appeler (`call`) une fonction nommée `myMethod` avec le paramètre `123` comme ceci :

```
myContract.methods.myMethod(123).call()
Expand All @@ -453,7 +453,7 @@ myContract.methods.myMethod(123).call()

`send` va créer une transaction et changer l'état des données sur la blockchain. Vous aurez besoin d'utiliser `send` pour toutes les fonctions qui ne sont pas `view` ou `pure`.

> **Remarque :** Envoyer une transaction avec `send` demandera à l'utilisateur de payer du gas, en faisant apparaître MetaMask pour leur demander de signer une transaction. Quand on utilise MetaMask comme fournisseur web3, tout cela se fait automatiquement quand on appelle `send()`, et on n'a pas besoin de faire quoique ce soit de spécial dans notre code. Plutôt cool !
> **Remarque :** Envoyer une transaction avec `send` demandera à l'utilisateur de payer du gas, en faisant apparaître MetaMask pour leur demander de signer une transaction. Quand on utilise MetaMask comme fournisseur web3, tout cela se fait automatiquement lors de l'appel de `send()`, et on n'a pas besoin de faire quoi que ce soit de spécial dans notre code. Plutôt cool !
En utilisant Web3.js, vous allez envoyer (`send`) une transaction appelant une fonction `myMethod` avec le paramètre `123` comme ceci :

Expand All @@ -475,9 +475,9 @@ Zombie[] public zombies;

En Solidity, quand vous déclarez une variable `public`, cela crée automatiquement une fonction "getter" (une fonction de récupération) public avec le même nom. Si vous voulez récupérer le zombie avec l'id `15`, vous l’appellerez comme si c'était une fonction : `zombies(15)`.

Voici comment nous écririons notre fonction JavaScript de notre front-end qui récupérerait un id zombie, interrogerait notre contrat pour ce zombie, et renverrai le résultat :
Voici comment nous écririons notre fonction JavaScript de notre front-end qui récupérerait un id zombie, interrogerait notre contrat pour ce zombie, et renverrait le résultat :

> Remarque : Tous les exemples de code que nous utilisons dans cette leçon utilisent la **version 1.0** de Web3.js, qui utilise les promesses au lieu des callbacks. Beaucoup de tutoriels que vous allez voir en ligne utilisent une ancienne version de Web3.js. La syntaxe a beaucoup changée avec la version 1.0, si vous copiez du code d'autres tutoriels, assurez-vous qu'ils utilisent la même version que vous !
> Remarque : Tous les exemples de code que nous utilisons dans cette leçon utilisent la **version 1.0** de Web3.js, qui utilise les promesses au lieu des callbacks. Beaucoup de tutoriels que vous allez voir en ligne utilisent une ancienne version de Web3.js. La syntaxe a beaucoup changé avec la version 1.0, si vous copiez du code d'autres tutoriels, assurez-vous qu'ils utilisent la même version que vous !
```
function getZombieDetails(id) {
Expand Down
4 changes: 2 additions & 2 deletions fr/6/05.md
Original file line number Diff line number Diff line change
Expand Up @@ -457,7 +457,7 @@ Maintenant essayons de mettre en place quelque chose - disons que nous voulons q

Évidemment nous allons d'abord devoir utiliser notre fonction `getZombiesByOwner(owner)` pour récupérer tous les IDs des zombies que l'utilisateur possède.

Mais notre contrat Solidity s'attend que `owner` soit une `address` Solidity. Comment connaître l'adresse de l'utilisateur de notre application ?
Mais notre contrat Solidity s'attend à ce que `owner` soit une `address` Solidity. Comment connaître l'adresse de l'utilisateur de notre application ?

## Obtenir l'adresse de l'utilisateur avec MetaMask

Expand Down Expand Up @@ -488,7 +488,7 @@ Ce code vérifie toutes les 100 millisecondes que `userAccount` est toujours ég

## A votre tour

Faisons en sorte de notre application montre l'armée de zombie de notre utilisateur au chargement initial de la page, et surveille le compte MetaMask actif pour mettre à jour l'interface s'il change.
Faisons en sorte que notre application montre l'armée de zombie de notre utilisateur au chargement initial de la page, et surveille le compte MetaMask actif pour mettre à jour l'interface s'il change.

1. Déclarez une `var` appelée `userAccount`, mais ne lui attribuez pas de valeur

Expand Down
26 changes: 13 additions & 13 deletions fr/6/06.md
Original file line number Diff line number Diff line change
Expand Up @@ -491,27 +491,27 @@ Ce tutoriel serait incomplet si nous ne vous montrions pas comment afficher les

Cependant, de façon réaliste, vous allez vouloir utiliser un framework front-end comme React ou Vue.js pour votre application, car ils vous simplifient vraiment la vie en tant que développeur front-end.

Afin de rester concentrer sur Ethereum et les smart contracts, nous allons simplement vous montrer un exemple rapide en JQuery pour vous montrer comment analyser et afficher les données récupérées de votre smart contract.
Afin de rester concentrés sur Ethereum et les smart contracts, nous allons simplement vous montrer un exemple rapide en JQuery pour vous montrer comment analyser et afficher les données récupérées de votre smart contract.

## Afficher les données zombie - un exemple primaire

Nous avons ajouter un `<div id="zombies"></div>` vide au corps de notre document, ainsi qu'une fonction `displayZombies` vide.
Nous avons ajouté un `<div id="zombies"></div>` vide au corps de notre document, ainsi qu'une fonction `displayZombies` vide.

Rappelez-vous du précédent chapitre, nous avons appelé `displayZombies` à l'intérieur de `startApp()` avec le résultat obtenu de l'appel à `getZombiesByOwner`. Il recevra un tableau d'IDs zombie qui ressemblera à :

```
[0, 13, 47]
```

Donc nous voulons que notre fonction `displayZombies` fasse :
Donc nous voulons que notre fonction `displayZombies` ait le comportement suivant :

1. Premièrement, supprime le contenu du div `#zombies`, s'il y a quelque chose à l'intérieur. (De cette manière, si l'utilisateur change de compte actif dans MetaMask, cela supprimera l'ancienne armée de zombie avant de charger la nouvelle).
1. Premièrement, supprimez le contenu de la div `#zombies` s'il y a quelque chose à l'intérieur. (De cette manière, si l'utilisateur change de compte actif dans MetaMask, cela supprimera l'ancienne armée de zombie avant de charger la nouvelle).

2. Itère pour chaque `id`, et pour chacun appelle `getZombieDetails(id)` pour récupérer toutes les informations de ce zombie à partir de notre smart contract, ensuite
2. Itérez pour chaque `id`, et pour chaque appel `getZombieDetails(id)` afin de récupérer toutes les informations de ce zombie à partir de notre smart contract. Ensuite

3. Mettre ces informations dans un gabarit HTML pour qu'elles soient correctement formatées pour l'affichage, et les rajouter au div `#zombies`.
3. Mettez ces informations dans un template HTML pour qu'elles soient correctement formatées pour l'affichage, et ajoutez-les à la div `#zombies`.

Pour rappel, nous utilisons simplement du JQuery ici, qui n'a pas de gabarit par défaut, le résultat ne sera pas beau. Voici un exemple simple de comment nous pourrions afficher les données pour chaque zombie :
Pour rappel, nous utilisons simplement du JQuery ici, qui n'a pas de template par défaut, le résultat ne sera pas beau. Voici un exemple simple de comment nous pourrions afficher les données pour chaque zombie :

```
// On récupère les informations des zombies à partir de notre contrat. On renvoie un objet `zombie`
Expand All @@ -536,7 +536,7 @@ getZombieDetails(id)

Dans l'exemple ci-dessus, nous affichons simplement l'ADN comme une chaîne de caractères. Mais dans votre DApp, vous allez vouloir convertir cela en images pour afficher votre zombie.

Nous avons fait cela en divisant l'ADN en plusieurs chaîne de caractères, et en ayant chaque pair de chiffre qui correspond à une image. De cette manière là :
Nous avons fait cela en divisant l'ADN en plusieurs chaînes de caractères, et en ayant chaque paire de chiffres qui correspond à une image. De cette manière là :

```
// On obtient un entier entre 1 et 7 qui représente la tête de notre zombie :
Expand All @@ -548,16 +548,16 @@ var headSrc = "../assets/zombieparts/head-" + head + ".png"

Chaque composant est positionné avec du CSS en utilisant le positionnement absolu, afin de le superposer sur les autres images.

Si vous voulez voir exactement comment nous l'avons implémenté, nous avons rendu le code Open Source de notre composant Vue.js que nous utilisons pour l'apparence des zombies, vous pouvez le voir <a href="https://github.com/loomnetwork/zombie-char-component" target=_blank>ici</a>.
Si vous voulez voir exactement comment nous l'avons implémenté, nous avons rendu Open Source le code de notre composant Vue.js utilisé pour l'apparence des zombies, vous pouvez le voir <a href="https://github.com/loomnetwork/zombie-char-component" target=_blank>ici</a>.

Cependant, puisqu'il y a beaucoup de code dans ce fichier, c'est en dehors du cadre de ce tutoriel. Pour cette leçon, nous resterons avec l'exemple basique de l'implémentation JQuery ci-dessus, et nous vous laissons l'opportunité de faire une implémentation plus belle comme entraînement 😉
Cependant, puisqu'il y a beaucoup de code dans ce fichier, c'est en dehors du cadre de ce tutoriel. Pour cette leçon, nous garderons l'exemple basique de l'implémentation JQuery ci-dessus, et nous vous laissons l'opportunité de faire une implémentation plus belle comme entraînement 😉

## A votre tour

Nous avons créé une fonction `displayZombies` vide pour vous. Nous allons la compléter.

1. La première chose que nous voulons faire et de supprimer le contenu du div `#zombies`. En JQuery, vous pouvez faire cela avec `$("#zombies").empty();`.
1. La première chose que nous voulons faire est de supprimer le contenu de la div `#zombies`. En JQuery, vous pouvez faire cela avec `$("#zombies").empty();`.

2. Ensuite, nous allons vouloir itérer tous les ids, en utilisant une boule "for": `for (id of ids) {`
2. Ensuite, nous allons vouloir itérer sur tous les ids, en utilisant une boucle "for": `for (id of ids) {`

3. À l'intérieur de cette boucle, copiez/collez le bloc de code ci-dessus qui appelle `getZombieDetails(id)` pour chaque id et ensuite utilisez `$("#zombies").append(...)` pour l'ajouter à notre HTML.
3. À l'intérieur de cette boucle, copiez/collez le bloc de code ci-dessus qui appelle `getZombieDetails(id)` pour chaque id puis utilisez `$("#zombies").append(...)` pour l'ajouter à notre HTML.
Loading

0 comments on commit 2838af0

Please sign in to comment.