Il y a un peu plus d’un an Ă  prĂ©sent, nous avons dĂ©veloppĂ© une solution d’horodatage basĂ©e sur une blockchain. Elle permet de prouver l’antĂ©rioritĂ© d’un contenu (une idĂ©e ou une crĂ©ation par exemple) via l’utilisation d’une blockchain publique Ethereum directement depuis son navigateur. Donc sans organe central de contrĂŽle. Il s’agit d’un cas d’usage simple mais parfaitement applicable aux besoins mĂ©tiers des applications de nos clients : sceller un contenu et ses mĂ©tadonnĂ©es de maniĂšre sĂ»re et pĂ©renne. Le code source est publiĂ© sous la licence Apache 2.

Pour faciliter la lecture, nous vous proposons une sĂ©rie de cinq articles qui prĂ©sentent trois points de vue complĂ©mentaires de l’outil :

  1. Point de vue conceptuel : 🎹 Comprendre les notions de base d’une blockchain publique
  2. Point de vue utilisateur : đŸ•ș Interagir avec l’application dĂ©centralisĂ©e
  3. Point de vue dĂ©veloppeur : 🏭 Configurer son environnement de dĂ©veloppement
  4. Point de vue dĂ©veloppeur : đŸ€ Comprendre le dĂ©veloppement du smart contract
  5. Point de vue dĂ©veloppeur : đŸ’» Comprendre le dĂ©veloppement du client

Dans ce troisiĂšme article nous proposons une mise en route sur le projet de dĂ©veloppement. A la fin de celui-ci, vous aurez normalement rĂ©cupĂ©rĂ© les sources, installĂ© les outils nĂ©cessaires Ă  la compilation, crĂ©Ă© une blockchain de tests dans laquelle vous aurez dĂ©ployĂ© un smart contract et dĂ©marrĂ© l’interface utilisateur locale. En quelque sorte, il s’agit d’ĂȘtre en ordre de marche !

# Articulation du projet opensource

Les sources du projet sont sous licence opensource Apache 2 dans le projet blckchn-ant-prover :

On retrouve deux sous-projets :

  • smart-contracts : code source des smart contracts qui seront compilĂ©s et intĂ©grĂ©s dans la blockchain
  • front : code source de l’interface utilisateur qui sera compilĂ©e et exĂ©cutĂ©e cĂŽtĂ© client, dans un navigateur

# DĂ©marrage rapide

La page principale README.md décrit comment démarrer rapidement le développement avec une blockchain locale puis comment déployer les smart contracts dans une blockchain.

Avant toute chose, nous récupérons les sources. Pour des raisons de simplicité, nous travaillerons dans le répertoire créé par la premiÚre commande :

# CrĂ©ation d’une blockchain de dĂ©veloppements

Ganache est un outil de la suite Truffle qui permet de crĂ©er trĂšs rapidement une blockchain Ethereum locale afin d’effectuer des tests et inspecter l’état de celle-ci : l’état des blocs, les transactions, les smart contracts, les Ă©vĂ©nement, etc.

Nous commençons par mettre en place notre blockchain locale.

L’installation reste simple : on tĂ©lĂ©charge le binaire qu’on exĂ©cute et on se laisse guider. Par exemple sous Linux :

L’application se lance :

Commençons par crĂ©er un nouvel espace de travail (workspace) avec le bouton “New Workspace”. Parmi les options dĂ©finies par dĂ©faut, celles-ci nous intĂ©ressent particuliĂšrement :

Pour ĂȘtre en mesure d’inspecter les futurs contrats dĂ©ployĂ©s, nous rĂ©fĂ©rençons la configuration truffle du projet (fichier ~/projets/atolcd/blckchn-ant-prover/smart-contracts/truffle-config.js ) dans le workspace.

La blockchain portera l’identifiant 5777 et sera accessible en local sur le port 7545.

Notons Ă©galement le mnemonic qui pourrait ĂȘtre utile ultĂ©rieurement : muffin robot prevent globe plunge today foster shrug pave giraffe okay virtual . Il s’agit d’une passphrase permettant d’accĂ©der Ă  la configuration de la blockchain qu’il convient de conserver Ă  l’abri des regards indiscrets.

DĂšs qu’on sauvegarde le workspace, la blockchain est disponible. Chacun des 10 comptes crĂ©Ă©s dispose de 100 ETH.

Pour la suite de l’article, nous rĂ©cupĂ©rons la clĂ© privĂ©e du premier compte utilisateur crĂ©Ă©. Ce compte servira Ă  la fois au dĂ©ploiement des smart contracts et Ă  la manipulation des donnĂ©es depuis l’application dĂ©centralisĂ©e.

On peut rĂ©cupĂ©rer l’adresse et la clĂ© privĂ©e d’un compte en cliquant sur l’icĂŽne “clĂ©â€ :

# DĂ©ploiement des smart contracts

Pour le dĂ©ploiement, nous utilisons l’outil truffle. Celui s’installe avec npm :

Puis on se place dans le sous-projet smart-contracts et on lance la migration via truffle :

Deux smart contracts sont compilĂ©s et dĂ©ployĂ©s dans la blockchain “development”. Exemple de sortie :

Le premier contrat Migrations sert à déployer le second AntProver.

On retrouve 4 transactions dans Ganache. Deux créations de contrats et deux appels :

On constate que 4 blocs ont été minés à la suite du bloc initial :

En effet, pour des raisons de simplification, chaque bloc dans Ganache ne contient qu’une transaction.

Les deux contrats sont bien visibles :

Pour le moment, le contrat AntProver n’a aucune donnĂ©e hormis les structures initialisĂ©es. Nous verrons ces derniĂšres plus tard :

# Configuration de Metamask

En temps normal, on crée son compte Metamask pour interagir avec une blockchain. Le processus est inversé avec Ganache : on importe un ou plusieurs des comptes créés dans la blockchain de développements.

Par exemple on importe le premier compte Ganache adressé par 0x7E9532e2CF6bc267bcb21180DAED88D7Ff2Cdc1B dont la clé privée est fb582632b2b01046cd68d5cad00105e9035c640bb8974fdde3a1c530d9cacb28 :

Puis on sĂ©lectionne le rĂ©seau “development” http://localhost:7545, en cohĂ©rence avec le port dĂ©fini lors de la configuration du workspace Ganache.

On constate que Metamask s’est bien connectĂ© Ă  la blockchain puisqu’il affiche le solde du compte (les 100 ETH initiaux imputĂ©s des frais liĂ©s au dĂ©ploiement des deux smart contracts) :

# ExĂ©cution de l’interface utilisateur

On se place dans le sous-projet front et on démarre serveur de développements via npm :

Aprùs quelques secondes, l’application est accessible à l’adresse http://localhost:8080 :

En particulier, le bloc “Statut de connexion” confirme que le rĂ©seau sĂ©lectionnĂ© est le bon (5777) ainsi que contrat utilisĂ© (0x5950D4482B9f535C1D6555aD9D91c329c897DF50) :

On peut dĂšs Ă  prĂ©sent rĂ©fĂ©rencer un fichier et vĂ©rifier l’empreinte enregistrĂ©e.

# Pour continuer

Dans cet article, nous avons dĂ©roulĂ© les Ă©tapes permettant d’avoir un environnement de dĂ©veloppement opĂ©rationnel en mettant en place une blockchain de tests, en y dĂ©ployant un smart contract et en exĂ©cutant l’interface utilisateur.

Les deux articles suivants feront un focus sur le code source du projet smart-contract puis du projet front utilisateur.