Une DApp développée en HTML : On vous attend pour DappHero !

  • posté le
  • par ESENS

La blockchain, c’est compliqué !

Le développement d’applications décentralisées est long et compliqué. Il existe beaucoup (trop) de librairies, les documentations sont rarement à jour, il n’y a pas encore de 'best practice' et trouver de l’aide n’est pas chose facile...

Résultat : les seules personnes qui peuvent s’y frotter sont les développeurs. Et même parmi les dev, une infime portion osera tenter l’expérience.

Or, pour favoriser l’adoption de la blockchain, n’importe qui devrait pouvoir expérimenter avec ce nouveau monde qu’est le web 3.0, comme c'est le cas aujourd'hui pour le web 2.0, devenu accessible au point de pouvoir générer son propre site web ou e-commerce en quelques clics et sans savoir coder.

Une solution simple ?

C’est ici qu’intervient DappHero. Une interface unique et simple pour connecter n’importe quel smart contract à votre site web et quasiment zéro code.

J’ai donc décidé de vérifier si DappHero tient sa promesse en testant quelques cas.


Pour commencer à utiliser DappHero, il suffit de s'inscrire sur le site et de commencer un nouveau projet.

Pour débuter, je vais créer un site qui me permet de me connecter à la blockchain Ethereum via Metamask (obligatoire pour le moment) et de pouvoir récupérer mon adresse de portefeuille et les informations du réseau.

Commencez donc par installer Metamask et connectez-vous au réseau 'Ropsten'. Ensuite, vous pourrez créer un projet sur l’interface de DappHero

Voici donc mon projet : 'Esens-tutorial'. On peut voir mon fameux 'Script Tag' que je vais pouvoir copier dans mon fichier HTML et qui me permettra d’accéder aux fonctionnalités de DappHero

Pour tester rapidement cela, je vais utiliser glitch pour développer ma page HTML. 

Voilà le code de ma première page :


Et le résultat :


Comme on peut le voir dans le fichier 'index.html', j’ai collé la balise 'Script Tag' en bas du fichier et je me suis amusé à utiliser quelques fonctionnalités de base de DappHero comme 'Network', qui me permet de me connecter à la blockchain et d'y récupérer des informations, ou encore 'User, qui me permet de récupérer mon adresse de portefeuille et mon solde de compte, par exemple.

Promesse tenue, donc, en ce qui concerne la connexion simplifié à la blockchain. Essayons maintenant d'aller un peu plus loin pour tester les fonctionnalités de DappHero.


Projet de vote sur la blockchain sans JS !

Pour pousser un peu plus loin le test de DappHero, j’ai déterré mon smart contract de vote sur GitHub pour essayer de créer une interface uniquement en HTML.

Pour interagir avec son smart contract, il faut tout d’abord le publier sur la blockchain afin de récupérer son adresse et son ABI (fichier de description du contrat). 

Une fois déployé, vous pouvez retourner sur l’interface de DappHero pour l’ajouter à votre projet.

Ensuite, en suivant la documentation et quelques lignes de HTML, nous avons une application de vote basée sur la blockchain !


Pour utiliser l'application et pouvoir voter, il vous faudra des ethers. Pour en récupérer sur le réseau de test Ropsten, rendez-vous sur https://faucet.ropsten.be/ et coller l’adresse de votre portefeuille metamask pour en récupérer un.

Vous pouvez maintenant participer au vote !

Conclusion

Le contrat est rempli pour DappHero. Nous avons bel et bien une application décentralisée développée uniquement en HTML ! L’interface est très simpliste mais le fond y est.

L’équipe travail sur de nouvelles fonctionnalités et rien ne vous empêche de rajouter un peu de JavaScript pour rendre tout ça un peu plus dynamique.

Le projet est prometteur et permettra peut être de démocratiser la blockchain dans de nombreuses application web. 

En tous les cas, DappHero fait un carton dans les hackathons Ethereum, un contexte dans lequel on cherche à démontrer la viabilité de ses idées le plus rapidement possible.

En conclusion, n’hésitez pas à y jeter un œil !

 

------------------------------

Article rédigé par Anthony, Lead Dev Full Stack & Expert en Blockchain chez ESENS | Retrouvez tous nos articles tech sur le Blog ESENS !

Vous êtes à la recherche d'un nouveau challenge ? Rejoignez l'équipe ESENS en postulant à nos offres d'emploi !

PARTAGER CET ARTICLE