fbpx 3 concepts à savoir … avant de devenir développeur blockchain | Développeur Blockchain France

3 concepts à savoir … avant de devenir développeur blockchain

Posté par Vincent Ton le décembre 12, 2019 dans Formation Développeur Blockchain
Card Image

Avant de devenir développeur blockchain et de créer ta première dApp, il y a 3 choses que tu dois absolument connaître.

Dans ma quête pour devenir un développeur blockchain freelance, j’ai souvent dû faire marche arrière.

Par exemple, lorsque je suivais des tutoriels pour créer un dApp, j’ai constaté que je ne maîtrisais pas du tout Javascript avec ses .getElementsById() ou ses async … J’étais donc obligé de reprendre à la base, à savoir : HTML/CSS et Javascript.

Dans cet article, je te présente les 3 concepts que tu dois connaître avant de te lancer dans la création de dApp. Puis, tu vas t’exercer avec moi en créant un CRUD avec HTML, CSS et Javascript.

Nous avons déjà créé un smart contract CRUD.sol, je t’invite à lire cet article si tu ne l’as pas encore lu.

Les concepts inutiles à savoir pour un débutant qui souhaite devenir développeur blockchain

1 – La Blockchain

Peut-être que tu ne te sens pas prêt de te lancer dans l’aventure de devenir développeur blockchain parce que tu ne sais pas ce qu’est la blockchain.

Rassure-toi, moi non plus je ne peux pas te décrire ce qu’est une blockchain avec précision. Mais si tu es intéressé par ce qu’est une blockchain, voici une vidéo très pédagogique : Blockchain de scienceetonnante

2 – ReactJS

Tout d’abord, tu n’as pas besoin de connaître ce framework développé par Facebook. Certes, ReactJS est très appréciés des développeurs blockchain car c’est très dynamique.

Mais si tu te lances dans l’apprentissage pour devenir développeur blockchain, tu peux très bien créer un dApp avec seulement Javascript. Nous verrons plus loin dans cet article comment faire.

3 – Python, Java, C++ ou Go

Si tu cherches un emploi de développeur blockchain, tu vois qu’il y a beaucoup d’offres d’emploi qui te demandent de maîtriser Python, Java, Go ou C++.

Pourquoi ? Parce qu’avec ces langages informatiques, il est possible de construire une cryptomonnaie de A à Z. De créer une blockchain sans forker le bitcoin ou l’ethereum. Sans passer par l’ERC20.

Mais Python, Go, Java ou C++ sont des langages informatiques qui te demandent plusieurs heures de travail. Et si tu veux créer un dApp, autant prendre la route la plus rapide. À savoir : se concentrer sur l’ethereum et le langage Solidity, et maîtriser les 3 concepts que tu verras dans le prochain paragraphe.

Les 3 concepts à connaître avant de devenir développeur blockchain

Voici les 3 concepts que tu dois connaître pour apprendre plus facilement le métier de développeur blockchain :

– Les bases de HTML, CSS et Javascript
– Quelques fonctionnalités ES6
– Accéder au DOM (Document Object Model) avec Javascript

Si tu ne maîtrises pas les 2 dernières concepts, pas de panique ! Tu vas comprendre en t’exerçant avec moi à créer un CRUD avec HTML, CSS et Javascript.

Création d’un CRUD

CRUD est l’acronyme de Create, Read, Update et Delete. On va tout d’abord construire la structure du CRUD avec HTML.

Pour ce faire, tu peux créer un nouveau dossier. Et ouvrir le dossier sur Visual Studio Code (« Open Folder »).

1 – Création de la structure du code avec HTML et CSS Bootstrap

Pour commencer, tu peux créer un nouveau fichier index.html sur Visual Code Studio. Puis tu ouvres index.html sur Visual Code Studio et tu rentres : !

Voici le code que tu vas mettre dans HTML :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CRUD Application</title>
</head>

<body>
    <h1>CRUD</h1>
    <h2>Create</h2>
    <form id="create">
        <label>Nom du candidat</label>
        <input type="text" placeholder="le nom complet ...">
        <button>Envoyer</button>
    </form>
    <p id="create-result"></p>
    <h2>Read</h2>
    <form id="read">
        <label>Numéro du candidat</label>
        <input type="text" placeholder="le numéro ...">
        <button>retrouver le candidat</button>
    </form>
    <p id="read-result"></p>
    <h2>Update</h2>
    <form id="update">
        <label>Numéro du candidat</label>
        <input type="text" placeholder="le numéro du candidat à modifier ...">
        <button>Corriger le nom du candidat</button>
    </form>
    <p id="update-result"></p>
    <h2>Delete</h2>
    <form id="delete">
        <label>Supprimer un candidat</label>
        <input type="text" placeholder="le numéro du candidat à supprimer ...">
        <button>Supprimer le candidat</button>
    </form>
    <p id="delete-result"></p>

</body>

</html>

Ensuite, tu peux ouvrir avec le « Live Server » en effectuant la commande Alt + L Alt + O

Tu obtiendras une page comme ceci :

CRUD en html
Seulement avec HTML, maintenant on va styliser avec Bootstrap !

Comme tu peux le voir, le design n’est pas au top. Pour travailler sur le design, on peut créer un fichier style.css et lier ce fichier à ton fichier index.html en ajoutant dans la partie <head> … </head> :

<link rel="stylesheet" type="text/css" href="/css/style.css">

Mais cela prends beaucoup trop de temps de travailler sur le design d’un site … c’est pourquoi je vais te montrer comment utiliser Bootstrap.

Pour cela, on va importer directement depuis internet le fichier Bootstrap en ajoutant les codes suivants :

sur l’en-tête <head>, tu vas importer le CSS de Bootstrap et le mettre au dessus du code précédent (celui qui lie le HTML au CSS) :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

avant le tag </body>, tu vas importer le JS de Bootstrap :

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

En important bootstrap sur ton code HTML, tu peux remarquer le changement de police sur les titres h1 et h2.

CRUD html Bootstrap
HTML et Bootstrap, le police des titres h1 et h2 a changé

Maintenant, on va utiliser la puissance de Bootstrap pour améliorer le design de l’application. Avec Bootstrap, il suffit de définir une classe et le design se modifie de suite !

Par exemple, tu peux définir class="btn btn-primary" dans un bouton et le bouton devient bleu !

Mais ce qui est le plus fort avec Bootstrap, c’est le concept de Grid. Je t’invite à lire cette page : https://getbootstrap.com/docs/4.4/layout/grid/

Pour t’exercer avec Bootstrap, tu peux essayer d’ajouter des classes comme : « container », « row », « col-sm-12 ».

Et tu peux aussi améliorer le formulaire (<form>) en regardant ce tutoriel : https://getbootstrap.com/docs/4.4/components/forms/ et en mettant la classe « form-group » dans un div et « form-control » dans l’input.

Une solution possible :

<body>
    <div class="container">
        <h1>CRUD</h1>
        <div class="row">
            <div class="col-sm-12">
                <h2>Create</h2>
                <form id="create">
                    <div class="form-group">
                        <label>Nom du candidat</label>
                        <input type="text" class="form-control" placeholder="le nom complet ...">
                    </div>
                    <button class="btn btn-primary">Envoyer</button>
                </form>
                <hr>
                <p id="create-result"></p>
                <hr>
            </div>

            <div class="col-sm-12">
                <h2>Read</h2>
                <form id="read">
                    <div class="form-group">
                        <label>Numéro du candidat</label>
                        <input type="text" class="form-control" placeholder="le numéro ...">
                    </div>
                    <button class="btn btn-primary">retrouver le candidat</button>
                </form>
                <hr>
                <p id="read-result"></p>
                <hr>
            </div>

            <div class="col-sm-12">
                <h2>Update</h2>
                <form id="update">
                    <div class="form-group">
                        <label>Numéro du candidat</label>
                        <input type="text" class="form-control" placeholder="le numéro du candidat à modifier ...">
                    </div>
                    <button class="btn btn-primary">Corriger le nom du candidat</button>
                </form>
                <hr>
                <p id="update-result"></p>
                <hr>
            </div>

            <div class="col-sm-12">
                <h2>Delete</h2>
                <form id="delete">
                    <div class="form-group">
                        <label>Supprimer un candidat</label>
                        <input type="text" class="form-control" placeholder="le numéro du candidat à supprimer ...">
                    </div>
                    <button class="btn btn-primary">Supprimer le candidat</button>
                </form>
                <hr>
                <p id="delete-result"></p>
                <hr>
            </div>
        </div>
    </div>
    <!-- ... -->
</body>

Voici ce que ça donne en image :

crud html css bootstrap
Structure du CRUD avec HTML et Bootstrap

2 – Introduction au DOM avec Javascript

Maintenant qu’on a la structure du CRUD, il est temps d’utiliser Javascript pour :
– sauvegarder les candidats ;
– créer, modifier ou supprimer un candidat.

Javascript permet de rendre le CRUD plus dynamique.

Pour commencer, on va ouvrir le console avec la touche F12 sur l’onglet où il y a le CRUD. Puis aller sur l’onglet « Console ».

Ensuite, tu peux tester ce code suivant :

const createResult = document.getElementById("create-result");
const nom = "Arnaud";
createResult.innerHTML = nom;

Voici ce que ça donne :

CRUD javascript
Tu as vu, il y a un « Arnaud » qui apparait

Pourquoi il y a un « Arnaud » qui apparait ?

Dans la 1ere ligne, j’ai défini une variable createResult qui prend tous éléments dont l’ID est : « create-result ». Dans le code HTML, j’ai défini un paragraphe avec un id égale à « create-result » : <p id= »create-result »></p>.

Et dans la 3e ligne, j’ai dit au variable de prendre le nom Arnaud via « innerHTML ». Cette méthode permet de mettre à l’intérieur du paragraphe (<p></p>) le nom Arnaud.

Nous avons vu 2 manières d’intéragir avec le document HTML : getElementById() et innerHTML.

Dans ta quête pour devenir Développeur Blockchain, tu vas souvent utiliser ces méthodes pour accéder au document HTML.

Maintenant, on va créer un fichier main.js dans le dossier /js et on va ajouter le code ci-dessous pour intéragir avec Javascript :

<script src="/js/main.js"></script>

J’aime bien mettre ce code avant le </body> mais il est possible de le mettre dans le <head>.

Dans le nouveau fichier main.js, tu vas ajouter le code suivant :

const App = () => {
//...
}

document.addEventListener("DOMContentLoaded", () => {
    App();
})

Qu’est-ce qu’on peut dire par rapport à ce code ?

Tout d’abord, j’utilise la fonctionnalité ES6. Depuis 2015 et la sortie de ES6, on peut définir une fonction dans javascript comme ceci :

const monFonction = () => {}

au lieu de

function monFonction() = {}

Avec ES6, il y a let et const qui permet de déclarer les variables.

Ensuite, il y a une méthode qui s’appelle addEventListener(). On va beaucoup l’utiliser par la suite. Cette méthode permet d’écouter un évènement (event) comme « cliquer sur un bouton » ou « attendre que la page soit chargé ».

3 – Création du CRUD avec Javascript

Maintenant que tu as revu quelques fonctionnalités ES6 et les méthodes comme addEventListener(), getElementById() et innerHTML, il est temps de faire le CRUD.

L’idée, c’est qu’à la fin, tu puisses avoir ceci :

application CRUD en javascript
Ah oui, il y a 2 inputs dans la partie « Update »

L’idée, c’est que quand j’appuie sur le premier bouton, un texte sort en dessous du bouton. Pour cela, il faut faire intéragir plusieurs éléments. Comment faire ?

Comme ceci. Dans la fonction App, tu vas ajouter ces lignes de codes :

//initialiser les variables
let numero = 0;
let candidats = [];

const create = document.getElementById("create");
const createResult = document.getElementById("create-result");
create.addEventListener("submit", e => {
    e.preventDefault();
    const name = e.target.elements[0].value
    createResult.innerHTML = `Le candidat ${name} a été créé et porte le numéro ${numero}`
    numero++;
    candidats.push(name);
})

Analyse du code :

Dans les 2 premières lignes, on initialise les variables. Ensuite, on pointe avec « create » et « createResult » l’élément qui a un id « create » (un formulaire) et « create-result » (un paragraphe)

Ensuite, j’ai utilisé addEventListener() pour faire en sorte que quand j’appuie sur le bouton « envoyer », ça me sort une phrase. La phrase est : « Le candidat ${name} a été créé et porte le numéro ${numero} ».

e.preventDefault() permet d’empêcher que la page s’actualise quand j’appuie sur un bouton. Car quand on appuie sur un bouton, la page s’actualise par défault.

Maintenant que tu as vu pour la partie Create, il est temps pour toi d’essayer de créer la partie Read, Update et Delete.

Voici le code final (bien sûr, tu peux essayer d’améliorer le code, ou même de créer ta propre application CRUD) :

const App = () => {
    //initialiser les variables
    let numero = 0;
    let candidats = [];

    const create = document.getElementById("create");
    const createResult = document.getElementById("create-result");
    const read = document.getElementById("read");
    const readResult = document.getElementById("read-result");
    const update = document.getElementById("update");
    const updateResult = document.getElementById("update-result");
    const destroy = document.getElementById("delete");
    const destroyResult = document.getElementById("delete-result");

    create.addEventListener("submit", e => {
        e.preventDefault();
        const name = e.target.elements[0].value
        createResult.innerHTML = `Le candidat ${name} a été créé et porte le numéro ${numero}`
        numero++;
        candidats.push(name);
    })

    read.addEventListener("submit", e => {
        e.preventDefault();
        const id = e.target.elements[0].value;
        readResult.innerHTML = `Le candidat numéro ${id} s'appelle ${candidats[id]}`;
    })

    update.addEventListener("submit", e => {
        e.preventDefault();
        const id = e.target.elements[0].value;
        const name = e.target.elements[1].value
        updateResult.innerHTML = `Le candidat numéro ${id} a bien été modifié et s'appelle maintenant ${name}`
        candidats[id] = name;
    })

    destroy.addEventListener("submit", e => {
        e.preventDefault();
        const id = e.target.elements[0].value
        destroyResult.innerHTML = `Le candidat numéro ${id} a bien été supprimé ${numero}`
        candidats[id] = "";
    })
}

document.addEventListener("DOMContentLoaded", () => {
    App();
})

Nous avons notre front-end, quoi du back-end ?

Avec l’exemple que nous avons vu ci-dessus, tu as maintenant la partie Front-end. Seulement, quand tu actualises la page, les candidats ne sont pas sauvegardé.

Car non stocké dans un serveur … ou une blockchain. En clair, il manque la partie back-end.

On peut très bien utilisé la méthode classique qui consiste à utiliser php et MySQL pour stocker les données.

Mais on peut aussi stocker les données dans la Blockchain via les smart contracts. Tu peux lire l’article ci-dessous pour en savoir plus.

Créer une application décentralisée sur l’Ethereum

Conclusion

À travers la création d’un CRUD avec HTML, Bootstrap et Javascript, tu as vu ce que fait un développeur blockchain lorsqu’il ne travaille pas sur Solidity.

Tu as notamment vu :
– Les bases de HTML ;
– Comment utiliser Bootstrap pour avoir un design rapide de ta page ;
– Les bases de javascript ;
– Le concept de DOM (Document Object Model) via addEventListener, getElementById ou innerHTML
– Quelques fonctionnalités ES6

En sachant tout cela, tu peux sereinement t’orienter vers une carrière de développeur blockchain. Et découvrir :
– Solidity
– Web3JS
– Les tests unitaires
– Et pleins d’autres choses …

Si tu veux savoir comment développer une application décentralisée sur la Blockchain Ethereum, je t’invite à réserver un créneau avec moi en passant sur le lien ci-dessous.

Laisser un commentaire

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

Les commentaires

  1. Merci pour tes cours, malheureusement cela fait plusieurs fois que je m’inscris sur ta liste de mail pour rejoindre les membres privés,, sans résultat !