Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Tuto : Développement d’une application basée sur la blockchain Ethereum pour dé

Tuto : Développement d’une application basée sur la blockchain Ethereum pour débutant Partie 1 : Back-end avec solidity 1. Découvrez le langage solidity à travers le tuto qui est sur le lien suivant : https://techbrij.com/hello-world-smart-contract-solidity-ethereum-dapp-part-1 2. Développement et déploiement d’un smart contract en local (voir le lien suivant), veuillez également lire les remarques en rouges : https://techbrij.com/setup-local-private- blockchain-deploy-smart-contract-ethereum- dapp-part-2 . NB : • Si vous rencontrez un problème lors de l’installation de truffle, installez une version antérieure à travers cette commande : npm install -g truffle@5.4.29 • Je vous recommande pour ce tuto d’utiliser la blockchain Truffle develop. • Une autre recommandation c’est que vous utilisez Visual Studio Code pour l’édition de vos codes, vous pouvez le télécharger à travers le lien suivant : https://code.visualstudio.com/download Partie 2 : Réalisation d’une application web en utilisant Vue.js et liaison avec la back-end Etape 1 : Installation des dépendances. 1. Installez Vue à partir du package npm avec la commande suivante : npm install -g @vue/cli@4.5.15 2. Créez un dossier pour votre nouveau projet Vue, par exemple dans ma partition (D :) j’ai créé un dossier demo qui va contenir mon projet Vue. 3. Ouvrez l’invite de commande à partir du nouveau dossier que vous venez de créer : 4. Créer maintenant votre projet Vue avec la commande : vue create nom_du_projet NB : Evitez les espaces dans le nom du projet 5. Faites les sélections suivantes : ➢ Manually select features (Taper la touche entrer) Ne touchez pas les éléments sélectionnés par défaut, appuyez sur la touche espace sur les éléments suivants pour les sélectionner et la touche entrer pour valider les éléments sélectionnés : • Router • Vuex ➢ Choose a version of Vue.js that you want to start the project with o 3.x ➢ Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) o Y ➢ Pick a linter / formatter config: (Use arrow keys) o ESLint + Prettier ➢ Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) o Lint on save ➢ Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) o In dedicated config files toujours sélectionner ➢ Save this as a preset for future projects? (y/N) o N 6. Allez sur la racine de votre projet vue : cd nom_du_projet 7. Exécutez la commande suivante sur l’invite de commande : truffle init. Cette commande et toutes les commandes qui suivront devront être saisies à partir de la racine de votre projet Vue. 8. Copiez le smart contract de la partie 1 dans le dossier contracts qui est situé sur la racine de votre projet. 9. Ouvrez le fichier truffle-config.js, décommenter les lignes 44, 45, 46, 47, 48 et remplacer la valeur du port par 9545 (ligne 46). Changez la version du compilateur (ligne 84) en la même version que votre smart contract (pragma solidity x.x.x) puis enregistrez le fichier. 10. Compiler votre smart contract avec la commande : truffle compile 11. Ouvrez le fichier qui se trouve dans le dossier migrations situé sur la racine de votre projet. 12. Créez une variable pour votre smart contract comme vous voyez pour le smart contract Migration qui est créé par défaut, puis ajouter une ligne dans la fonction de module.exports pour déployer votre smart contract comme pour le smart contract Migration voir le résultat en dessous. /* const Migrations = artifacts.require("Migrations"); */ const HelloWorld = artifacts.require("HelloWorld"); module.exports = function (deployer) { /* deployer.deploy(Migrations); */ deployer.deploy(HelloWorld); }; Remarque : Le smart contract Migrations peut être supprimé vu qu’il ne sera pas utilisé. C’est la raison pour laquelle dans le code ci-dessus il est mis en commentaire pour qu’il ne soit pas déployé dans la blockchain. 13. Exécutez les commandes suivantes : npm i web3@1.2.11 npm install @truffle/contract@4.4.6 npm install jquery@3.6.0 npm install dotenv@15.0.0 npm install @truffle/hdwallet-provider@2.0.2 14. Créer un fichier dans la racine de votre projet avec l’extension .env sans lui donner de nom, précisez juste l’extension et mettez-y ce contenu. VUE_APP_PORT=8080 VUE_APP_MODE="development" VUE_APP_LOCAL_NODE="http://localhost:9545" 15. A partir de la racine de votre projet, ouvrez le fichier qui se trouve dans l’arborescence suivante : src > main.js. Remplacez le contenu du fichier celui par les lignes ci-dessous : import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; require('dotenv').config(); createApp(App).use(store).use(router).mount("#app"); 16. Créez un dossier dans src avec le nom ContractService. Ajouter à ce dossier un fichier nouveau fichier js avec le nom ContractService.js. Copiez-y les codes ci-dessous : var Web3 = require('web3'); var TruffleContract = require('@truffle/contract'); var $ = require('jquery'); const HelloWorld = require('../../build/contracts/HelloWorld.json'); class ContractService { web3Provider = null; contracts = {}; currentAccount = {}; Web3 = Web3; TruffleContract = TruffleContract; $ = $; initWeb3 = function (){ if (process.env.VUE_APP_MODE == 'development' && typeof window.ethereum === 'undefined'){ this.web3Provider = new this.Web3.providers.HttpProvider(process.env.VUE_APP_LOCAL_NODE); } else if(typeof window.ethereum != 'undefined') { this.web3Provider = this.Web3.givenProvider; } else { return false } this.Web3 = new this.Web3(this.web3Provider); return true; }; initContract = async function (){ var HelloWorldArtifact = HelloWorld; this.contracts.HelloWorld = TruffleContract( HelloWorldArtifact ); this.contracts.HelloWorld.setProvider(this.web3Provider); return true; }; loadAccount = async function (){ let v_accounts; if(typeof window.ethereum === 'undefined') { v_accounts = await this.Web3.eth.getAccounts(); } else { v_accounts = await window.ethereum.enable(); } this.currentAccount = v_accounts[0]; return this.initContract(); }; init = async function (){ const res = await this.initWeb3(); if(res) { await this.initContract(); return true ; } return false; } } ; export default ContractService ; 17. Remplacez le code du fichier index.js de l’arborescence src > store > index.js par les codes ci-dessous : import { createStore } from "vuex"; export default createStore({ state: { contracts : {}, currentAccount : '', service : {}, }, mutations: { setContract (state, contract) { state.contracts = contract }, setCurrentAccount (state, account) { state.currentAccount = account }, setService (state, serv) { state.service = serv }, }, actions: {}, modules: {}, }); Etape 2 : Développement de notre page web 1. Remplacez le contenu du fichier App.vue qui se trouve dans l’arborescence src > App.vue par le code ci-dessous : <template> <router-view /> </template> <style> #app { background-color:#F0F0F0; padding: 2em; font-family: ‘Raleway’,’Source Sans Pro’, ‘Arial’; } .container { width: 50%; margin: 0 auto; } label { display:block; margin-bottom:5px; } input { padding:10px; width: 50%; margin-bottom: 1em; } button { margin: 1em 0; padding: 10px 3em; } #buttonMessage{ float:left; } #output{ background-color: aquamarine; padding: 10px 0px; text-align:center; width:50%; float:left; margin:1em 0; } #errorHolder{ background-color: coral; padding: 10px; margin:1em 0; clear:both; } </style> Remarques : ▪ Le code (<router-view />) se trouvant entre les balises <template> </template> permet de rediriger en fonction du lien vers un fichier contenant les éléments visuels de notre web. ▪ Le code entre les balises <style> </style> constitue la mise en forme des éléments visuels de notre page web. 2. Créez un nouveau fichier Hello.vue dans le dossier views qui se trouve dans l’arborescence src > views avec le contenu suivant : <template> <div class="container"> <h1>Hello World Smart Contract</h1> <div> <label for="name" class="col-lg-2 control-label">Name</label> <input id="name" v-model="name" type="text" /> <button id="buttonSave" @click="saveName">Save</button> </div> <button id="buttonMessage" @click="getName">Get Message</button> <div id="output" v-show="outputMessage.length > 0">{{ outputMessage }}</div> <div id="errorHolder" v-show="errorHolderMessage.length > 0">{{ errorHolderMessage }}</div> </div> </template> <script> export default { data(){ return { name : "", outputMessage : "", errorHolderMessage : "", }; }, async mounted(){ await this.getName(); }, methods:{ async getName(){ let instance = await this.$store.state.contracts.HelloWorld.deployed(); await instance.getMessage({from : this.$store.state.currentAccount}) .then((message)=>{ this.outputMessage = message; this.errorHolderMessage = ""; }) .catch((error)=>{ this.errorHolderMessage = error.toString(); this.outputMessage = ""; }); }, async saveName(){ if(this.name != "") { let instance = await this.$store.state.contracts.HelloWorld.deployed(); await instance.setName(this.name,{ from : this.$store.state.currentAccount }) .then(()=>{ this.outputMessage = "Saved Successfully"; this.errorHolderMessage = ""; }) .catch((error)=>{ this.errorHolderMessage = error.toString(); this.outputMessage = ""; }); } else { this.errorHolderMessage = "Error: Name is required."; this.outputMessage = ""; } }, }, } </script> 3. Remplacez le contenu du fichier index.js situé dans l’arborescence src > router > index.js par le code ci-dessous : import { createRouter, createWebHistory } from "vue-router"; import HelloView from "../views/Hello.vue"; import store from "../store/index.js"; import ContractService from "../ContractService/ContractService.js"; const routes = [ { path: "/", name: "Hello", component: HelloView, beforeEnter: async (to, from, next) => { if(store.state.currentAccount != '') { next(); } else { const contractService = new ContractService() ; var initweb3 = await contractService.initWeb3(); if(!initweb3) { alert("Install MetaMask, connect you to your account and refresh web page."); return; } var loadaccount = await contractService.loadAccount() ; if(loadaccount) { store.commit('setService',contractService); store.commit('setCurrentAccount',contractService.currentAccount); store.commit('setContract',contractService.contracts); next() ; } } }, }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router; Etape 3 : Test de notre application en local. 1. Exécutez la commande truffle compile pour compiler votre smart contract. 2. Exécutez la commande truffle develop pour démarrer la blockchain locale. 3. Exécutez la commande truffle migrate pour déployer votre smart contract dans la blockchain locale. 4. A présent démarrez votre application web à travers la commande npm run serve dans une nouvelle invite de commande toujours étant positionner sur la racine de votre projet Vue. 5. Accédez au lien suivant pour tester votre application : uploads/Ingenierie_Lourd/ comment-developper-une-application-basee-sur-la-blockchain-ethereum-et-vuejs-mise-a-jour.pdf