fbpx Comment créer un DAPP sur Ethereum sans dépenser de l’argent ? | Développeur Blockchain France

Comment créer un DAPP sur Ethereum sans dépenser de l’argent ?

Posté par Vincent Ton le octobre 28, 2019 dans Formation Développeur Blockchain
Card Image

Comment créer un DAPP sur Ethereum ?

Comment créer un dapp sur Ethereum en 1 jour sans dépenser de l'argent

Aujourd’hui, nous allons créer ensemble un DAPP sur la Blockchain Ethereum.

Avez-vous déjà demandé comment montrer aux recruteurs que vous êtes fait pour le métier de développeur Blockchain ? Qu’on a de l’expérience dans le développement Blockchain ?

Voilà les propos que vous pouvez avoir lorsque vous postulez à un job de développeur Blockchain.

1 – Je n’ai pas d’expérience dans le développement Blockchain. Pourtant, je m’intéresse fortement à la Blockchain et aux cryptomonnaies. Grâce à ça, je suis sûr d’être pris.

2 – Je n’ai pas d’expérience dans le développement Blockchain. Du coup, je ne me sens pas légitime pour postuler à ce job. Mais je tente quand même.

Dans les 2 cas, vous avez le syndrome de l’imposteur.

Pourquoi c’est important pour vous de savoir comment créer un DAPP sur Ethereum ?

C’est pourquoi j’ai décidé de vous montrer étape par étape comment créer un DAPP sur Ethereum.

Pour votre premier DAPP : une élection entre pain au chocolat ou chocolatine

Dans cet exemple, vous allez créer une élection entre 2 candidats : pain au chocolat ou chocolatine ! Oui, beaucoup de français débattent sur le fait si l’image ci-dessous est un pain au chocolat ou une chocolatine !

Le débat éternel : ceci est-il un pain au chocolat ou une chocolatine ?

Grâce à l’application que vous allez créer sur la Blockchain Ethereum, il sera un jour possible de mettre fin au débat. Et même élire notre futur président de la République en utilisant la technologie Blockchain !

Vous vous dites peut-être que ça ne sert à rien de faire des élections en utilisant la Blockchain.

Pourtant, il y a 3 raisons d’utiliser la Blockchain pour faire des élections.

  • 1ere raison : La Blockchain permet de sécuriser les votes électroniques
  • 2e raison : La Blockchain est décentralisée, empêchant les tentatives de fraudes ;
  • 3e raison : C’est possible de rendre confidentiel même avec une Blockchain (exemple : Monero)

L’application décentralisée que vous allez créer ne sera pas confidentielle. Et comportera sûrement des failles de sécurité. Mais l’important est ailleurs.

Si vous voulez vaincre le syndrome de l’imposteur, avoir votre premier portfolio et convaincre des recruteurs sur vos compétences, lisez bien cet article jusqu’au bout.

Vous aurez un premier projet DAPP. Vous allez vaincre votre syndrome de l’imposteur. Et avancer dans votre vie si vous voulez vraiment devenir développeur Blockchain.

C’est pourquoi nous allons voir en 5 étapes comment créer une DAPP sur l’Ethereum ! L’avantage ici, c’est que vous n’allez pas dépenser 1 seul centime pour déployer votre DAPP sur l’Ethereum.

Comment créer un DAPP sur Ethereum en 5 Étapes ?

Il est temps de passer à la partie technique de cet article.

Étape 0 – Installer les 5 applications suivant

Lisez cet article et la partie « installation de son environnement de travail » pour savoir comment faire.

Voici les 5 outils à installer :

Node.JS
Visual Studio (pour éditeur de texte de code)
Truffle
Ganache
Metamask sur votre navigateur

Une fois cette étape faite, il est temps d’initialiser le projet. Pour cela, vous allez utiliser truffle.

Étape 1 – Initialiser le projet

Tout d’abord, vous allez créer un dossier. Soit manuellement avec la souris, soit en utilisant la commande mkdir dans le terminal.

Ensuite, avec le terminal vous vous placez dans le dossier que vous avez créé. Et vous allez écrire dans votre terminal :

npm install –g truffle
truffle unbox react
Voici les commandes à retenir pour ce projet

Une fois fait, vous constatez qu’il y a des fichiers et des dossiers qui se sont ajoutés. Maintenant, vous allez configurer votre projet pour qu’il fonctionne sous Ganache.

Voilà comment ressemble votre projet une fois que vous avez effectué les commandes

Étape 2 – Configuration de votre projet avec Ganache

Vous allez tout d’abord ouvrir l’application Ganache. Vous arrivez sur une page et il y a 2 boutons, « Quickstart » ou « New Workspace ».

Choisissez New Workspace et nommez votre projet. Puis faite « add project ».

Maintenant, on laisse de côté Ganache (on NE ferme PAS Ganache !).

Vous allez modifier le fichier truffle-config.js avec votre éditeur de texte (j’utilise Visual Studio)

Remplacez le port de 8545 par 7545. Comme ceci :

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*" // Match any network id
    }
  }
};

Puis vous pouvez tester Ganache en ouvrant le terminal et en faisant la commande :

truffle compile
truffle migrate

Là, sur l’application Ganache, vous devez voir que de l’ether a été dépensé (ça passe de 100 ETH à 99.99 ETH)

Ensuite, vous pouvez faire :

cd client && npm run start

Un nouveau onglet va apparaître et la fenêtre de Metamask va aussi apparaître. Connectez-vous à Metamask.

Maintenant, si vous obtenez un message d’erreur, c’est parce que vous n’êtes pas dans le bon réseau.

Là, il faut mettre le réseau Ganache à Metamask.

Voici les étapes à suivre :
1 – Cliquez sur l’icône Metamask (la tête de renard dans votre navigateur)
2 – Cliquez sur la flèche de défilement pour choisir le réseau
3 – Cliquez sur RPC personnalisé
4 – Nom du réseau : Ganache / Url personnalisé : HTTP://127.0.0.1:7545

Voilà, vous avez maintenant installé Ganache sur Metamask.

Ensuite, il faut importer une adresse depuis Ganache. Pour cela :
1 – copiez la clé privée de l’adresse[0] dans Ganache
2 – cliquez sur l’icône Metamask (la tête de renard dans votre navigateur)
3 – cliquez ensuite sur le « logo » où il y a un cercle bleu
4 – choisissez « importer un compte »
5 – sélectionnez « clé privée » et collez votre clé privée sur la partie dédiée.

Vous pouvez importer autant d’adresse que vous voulez dans Metamask car ce plugin peut gérer plusieurs adresses.

Maintenant que vous avez configuré votre poste de travail, il est temps d’écrire le smart-contract qui va simuler une élection.

Étape 3 – Créer le smart-contract Election.sol

Il existe deux manières d’écrire un smart-contract :

  • En utilisant le site remix IDE
  • Directement sur notre local.

Ici, on va le faire directement sur notre poste de travail. Pour cela, vous devez créer un fichier en extension .sol (pour l’extension solidity).

Créez un fichier Election.sol et mettez-le dans le dossier contracts/.

Vous pouvez supprimer le fichier SimpleStorage.sol qui est venu lorsqu’on a fait la commande truffle unbox react. Surtout, ne pas supprimer Migration.sol. C’est un fichier utile lorsqu’on va compiler notre smart-contract avec Truffle.

Pour le smart-contract, vous pouvez prendre le code disponible sur mon Github : https://github.com/Vinzalpha/painauchocolat-chocolatine

Ou vous pouvez copier le code ci-dessous :

 Candidat) candidats;
    mapping(address => bool) public electeurs;

    uint public nombreDeCandidat;

    function _ajouterCandidat(string memory _nom) private {        
        nombreDeCandidat++;
        Candidat memory unCandidat = Candidat(nombreDeCandidat, _nom, 0);
        candidats[nombreDeCandidat] = unCandidat;
    }

    // Rechercher un Candidat (enlever le nombre de Vote)
    function rechercherCandidat(uint _candidatNumero) public view returns(string memory, uint) {
        return(candidats[_candidatNumero].nom, candidats[_candidatNumero].nombreDeVote);
    } 

    // Voter
    function voterCandidat(uint _candidatNumero) public {
        require(!electeurs[msg.sender]);
        require(_candidatNumero > 0 && _candidatNumero <= nombreDeCandidat);
        electeurs[msg.sender] = true;
        candidats[_candidatNumero].nombreDeVote++;
    }
    
    function voirResultat(uint _candidatNumero) public view returns(uint) {
        require(_candidatNumero > 0 && _candidatNumero <= nombreDeCandidat);
        return(candidats[_candidatNumero].nombreDeVote);
    }
}

Analysons le smart-contract :

Un smart-contract qui sera lu par l’EVM (Ethereum Virtual Machine) commence toujours par pragma. Avec pragma, vous allez déclarer si le fichier utilise solidity ou un autre langage de programmation (par exemple : vyper). Et vous allez aussi mettre la version utilisée.

Ensuite, il y a la fonction « constructor ». Cette fonction ne s’applique qu’une seule fois, au moment où le smart-contract est déployé dans l’Ethereum. Puis, cette fonction ne sera plus jamais utilisée par la suite.

Ici, le constructor permet d’ajouter 2 candidats au moment du déploiement : Pain au chocolat et chocolatine.

Ensuite vient le mot « struct ». Struct permet de créer un « type » autre que Boolean, uint, string, address. Candidat est donc un Struct et pour déclarer un candidat, il faut donner un numéro d’identifiant, un nom et son nombre de vote, qui est égale à 0 au moment de sa déclaration.

Vous allez souvent voir le mot « mapping » en solidity. Voici ce qu’est un mapping (ou mappage en français) : Un mapping permet de structurer les types de valeurs (par exemple Booléan, uint pour unsigned integer, string). Il se compose de deux parties principales :
- un _KeyType
- un _ValueType

Voici la syntaxe : mapping ( _KeyType => _ValueType ) mapName

Dans l’exemple mapping(uint => Candidat) candidats;
le _KeyType est uint et le _ValueType est Candidat qui est un Struct. Le mapName est « candidats ». Ce mapping permet de stocker un candidat. Par exemple : candidats[1] est le Candidat(1, « Pain au chocolat », 0) et candidats[2] est le Candidat(2, « Chocolatine », 0).

L’autre exemple mapping(address => bool) public electeurs;
permet de dire si une adresse a déjà vote ou non.
Le _KeyType est address et le _ValueType est un booléen. On le stocke sous la mapName electeurs, qui est publique. Ce mapping permet d’empêcher qu’une adresse vote plusieurs fois pour un même candidat.

Après le mapping, il y a les fonctions. Je vous laisse lire la suite du smart-contract.

Une fois le smart-contract écrit, il faut encore modifier un fichier pour permettre à Truffle de compiler et de déployer avec succès.

Pour cela, allez dans le dossier migration/.
Il y a un fichier qui s’appelle 2_deploy_contracts.js, modifiez le code en ajoutant :

var Election = artifacts.require("./Election.sol")

module.exports = function(deployer) {
  deployer.deploy(Election);
};

Une fois fait, vous pouvez maintenant ouvrir le terminal. Il doit se situer dans votre dossier. Et vous pouvez faire les 2 commandes :

truffle compile
truffle migrate --reset

Truffle va d’abord compiler votre smart-contract. La compilation est une étape importante car elle va transformer votre smart-contract en bytecode (série de chiffre). Et l’EVM ne comprend que les bytecodes.

Une fois que vous avez compilé et déployé votre smart-contract sur Ganache, il est temps de passer à la partie front-end.

Remarque : Il faudra aussi faire des tests unitaires sur le smart-contract pour vérifier que tout est fonctionnel. Je vous montrerai dans un prochain article. Le but est que vous réalisez votre premier DAPP rapidement.

Étape 4 – Créer la partie front-end de l’application avec React

Ici, on va utiliser le framework React.

Pour ce faire, on va aller dans le dossier client/ puis le dossier src/. C’est le fichier App.js que vous allez modifier.

C'est le fichier App.js que vous allez modifier. Aussi, dans le dossier contracts/, il y a Election.json qui faudra importer dans App.js

Vous pouvez voir le code sur mon Github. Mais voici ce qu’il faut faire pour créer un DAPP sur la Blockchain Ethereum :

  • Mettre Metamask dans votre front-end (fonction loadWeb3() )
  • Lier le smart-contract au front-end (fonction loadBlockchainData() )

Nous allons particulièrement faire appel à la librairie web3.js dont la documentation se trouve ici :
https://web3js.readthedocs.io/en/v1.2.2/index.html

Voici le code à ajouter sur le fichier App.js pour Metamask :

import Web3 from 'web3'; //À mettre en haut du code

Ce code permet de dire au navigateur si Metamask est installé ou non. Si Metamask n’est pas installé, il faut aller sur ce site

Pour que votre front-end interagisse avec le smart-contract, voici les instructions à suivre :

1 – Vous allez importer le fichier Election.json en faisant ceci :

import Election from './contracts/Election.json';

2 – Ajouter ce code suivant :

async loadBlockchainData() {
    const web3 = window.web3;
    // load account
    const accounts = await web3.eth.getAccounts()
    this.setState({ account: accounts[0] })
    const networkId = await web3.eth.net.getId()

    const networkData = Election.networks[networkId]
    if (networkData) {
      // lier Election.json 
      const abi = Election.abi
      const address = Election.networks[networkId].address
      const election = new web3.eth.Contract(abi, address)
      const nombreDeVotePainAuChocolat = await election.methods.voirResultat(1).call()
      this.setState({ nombreDeVotePainAuChocolat })
      const nombreDeVoteChocolatine = await election.methods.voirResultat(2).call()
      this.setState({ nombreDeVoteChocolatine })
      console.log(election.methods.voirResultat(1))
      this.setState({ election })
      this.setState({ loading: false })
    } else {
      window.alert('Election contract is not deployed to detected network. Please change to the appropriate network.')
    }
  }
}

Ce que nous avons besoin, c’est de lier l’abi et l’addresse du smart-contract qui a été déployé.

D’où les lignes : const abi = Election.abi
et
const address = Election.networks[web3.eth.net.getId()].address

Étape 5 – Déployer votre DAPP sur le réseau Kovan

Une fois que vous avez créé le DAPP sur Ganache, il est temps de le déployer sur l’Ethereum.

Vous pouvez le déployer dans le réseau principal, mais comme vous avez pu le voir avec Ganache, il faut payer les frais de déploiement. C’est pourquoi vous allez le déployer sur le réseau de test Kovan (ou autre).

Pour ce faire, la première chose à faire est d’obtenir de l’ether sur le réseau de test Kovan. Pour obtenir gratuitement de l’ether, vous devez faire la demande ici à un faucet : https://gitter.im/kovan-testnet/faucet

Il suffit de renseigner une adresse dans la discussion. Au bout de quelques minutes, vous allez obtenir 3 ethers (sur le réseau de test Kovan). L’adresse que j’utilise n’est pas l’adresse que j’ai importée depuis Ganache. Mais l’adresse par défaut fournit lors de l’installation de Metamask sur mon navigateur.

Une fois que vous avez les 3 ethers, il est temps de déployer sur le réseau Kovan.

Pour ce faire, allez sur http://remix.ethereum.org/

Vous allez créer un nouveau fichier Election.sol dans ce site. Copiez-collez ce que vous avez déjà créé. Puis il suffit de compiler en choisissant la bonne version du compiler.

Pour choisir la bonne version du compiler, faite un tour sur
src/contracts/Election.json.
Dans ce fichier, en recherchant compiler, vous devez avoir la version exacte qui est utilisée.

Vous choisissez la bonne version du compiler puis vous compilez le smart-contract.

Ensuite, il faut déployer. Pour ce faire, allez dans la partie « deploy and run transaction » (logo sous la forme Ethereum).

Et dans Environment, choisissez « Injected Web3 ». Vous voyez que Kovan(42) a été détecté.

Il suffit de déployer le smart-contract en cliquant sur le bouton et c’est bon.

Choisissez "Injected Web3"

Félicitation, vous savez maintenant comment créer un DAPP sur Ethereum.

Conclusion

Si vous partez de zéro, cet article vous montre comment créer un DAPP rapidement sur Ethereum.

En particulier, vous avez appris comment :

  • Initialiser votre projet DAPP
  • Configurer Ganache pour votre projet
  • Créer un smart-contract
  • Lier le smart-contract à la partie front-end de votre application
  • Déployer le smart-contract sur le réseau de test Kovan

Si vous voulez trouver un travail en tant que développeur Blockchain et que votre recruteur vous demande si vous avez de l’expérience, montrez-lui le DAPP que vous avez créé grâce à cet article.

Au début, vous allez sûrement galérer à suivre les instructions. Je suis passé par là. Mais à force de refaire les mêmes choses, vous allez progresser. Vous allez avoir beaucoup plus de confiance sur les outils comme Truffle ou Metamask.

Et quand vous avez réussi à déployer votre DAPP, vous seriez fier de vous et vous vous sentiriez plus légitime en tant que développeur Blockchain.

Et si vous voulez accélérer votre apprentissage pour devenir développeur Blockchain, vous pouvez réserver un créneau ci-dessous ! Je vous contacterai par la suite.

Laisser un commentaire

Your email address will not be published. All fields are required.