Introduction

Dans notre dernier article, nous vous avions présenté l'Internet Computer de Dfinity en restant concentrés sur la partie théorique de ce concept ambitieux. Aujourd'hui, je vous propose une mise en pratique pour voir à quoi cela ressemble de coder sur l’Internet Computer !

Dans ce tuto, nous couvrirons le développement d'une application de gestion simplifié pour vous permettre de découvrir l'écosystème Dfinity. Vous pourrez aussi retrouver le code en lien avec notre article sur Github.

Notre objectif ? Vérifier que Dfinity tienne bel et bien sa promesse de remplacer totalement les fournisseurs de cloud actuels grâce à une plateforme entièrement sécurisée par design et donc impossible à pirater.

Vous êtes prêts ? N’ayez pas peur, tout va bien se passer... ^^ 

Comment démarrer ?

Commençons par aborder le sujet qui fâche... Et oui, il vous faut un environnement Linux ou MacOS pour dérouler le tutoriel. Mais si vous êtes sous Windows, vous pouvez toujours configurer WSL. Allez, maintenant, on peut se lancer !

En premier lieu, nous allons procéder à l'installation des outils de développement dont nous aurons besoin : Node, NPM et du SDK Dfinity.

Pour Node et NPM c’est par ici. Ne vous inquiétez pas, je suis là ! Hop, direction votre terminal favori :

Vous venez d’installer Node, NPM et le SDK Dfinity sur votre poste. Vous pouvez maintenant lancer en local un nœud de développement de l’Internet Computer.

Le nœud tourne en local et vous pouvez dès à présent récupérer le code du repository d’exemple que je mets à votre disposition par ici.

Les 'Canisters'

Avant de lancer notre projet, j’aimerais aborder la notion de 'canister' introduite par Dfinity.

Le code source que nous allons écrire va être compilé dans un module WebAssembly. Lorsque ce module sera déployé sur l’Internet Computer, le programme sera exécuté dans un conteneur d’application appelé 'canister' (documentation officielle, article sur les canisters).

Les canisters sont l'équivalent des smart contracts du monde de la blockchain, mais celui embarquera à la fois le code source et l'état associé. Les données sont stockées directement dans la mémoire du canister grâce à la persistance orthogonal. L'Internet Computer se chargera de maintenir les canisters en vie pour que la mémoire ne soit jamais perdue.

Oui, vous m'avez bien compris : pas besoin de base de données ou de tout autre solution de stockage de fichier et de données, la mémoire allouée au canister suffira largement. Plus besoin de firewall, ni de loadbalancer !

Premier déploiement

Dans le projet que vous venez de récupérer, j’ai créé deux canisters : un nommé “frontend”, qui va contenir notre code VueJS, et l'autre nommé “auth”. Ce deuxième canister n’est qu’un simple exemple avec une seule fonctionnalité, celle de nous retourner notre identifiant sur l’Internet Computer.

Le canister “frontend” est un peu plus spécifique car il s'agit d'un “asset canister” : il n’exécute pas de code, mais dessert des fichiers (voir le type renseigné dans le fichier /dfx.json).

Placez-vous maintenant à la racine du projet pour pouvoir déployer l’application avec une simple commande. Nos canisters sont bien déployés sur le nœud local.

Impatients de voir le résultat ? Récupérez l’ID du canister “frontend” dans les logs (pour moi c’est “ryjl3-tyaaa-aaaaa-aaaba-cai”) puis direction votre navigateur favori pour aller à l’adresse suivante : http://localhost:8000/?canisterId=

WOW ! On accède bien au canister “frontend” qui va appeler le canister “auth” pour récupérer le message affiché sur la page. 

Si vous vous demandez ce que propose le canister “auth” comme méthode, il embarque sa documentation auto-générée et Dfinity nous propose une UI qui permet directement d’agir avec canister :

http://localhost:8000/candid?canisterId=

Vous voulez rire ? On peut dès à présent déployer notre code dans l’Internet Computer (réseau de test à l’heure de l’écriture de cet article) !

De nouveaux identifiants sont générés pour le déploiement sur l’Internet Computer, mais le code est déployé et vous pouvez y accéder simplement en visitant l’adresse suivante :

https://CANISTER_FRONTEND_ID.ic0.app/

L’application de démonstration

Nous pouvons donc maintenant passer à l’implémentation de notre logique métier.

Pour la démonstration, nous allons développer un outil simple de gestion d’inventaire et commencer par créer une liste d’actifs que nous pourrons emprunter.

Pour cela, nous allons créer un nouveau canister que nous appellerons “stock”.

Puis, dans “/src/backend”, nous allons créer un nouveau fichier “stock.mo” avec comme contenu :

Ensuite il faudra déclarer dans le fichier dfx.json, à la racine du projet, ce nouveau canister :

Si tout s’est bien passé, vous pouvez à nouveau déployer le projet avec “dfx deploy” et un identifiant sera généré pour ce nouveau canister.

Pour l’instant il ne fait rien, mais nous allons procéder à l’implémentation de fonctionnalités en commençant par les types de données :

Nous venons de déclarer les types de données de l'application, ainsi qu'une HashMap "inventory" pour stocker tout ça.

Etant donné que tout est stocké en mémoire dans l'Internet Computer, cette HashMap peut être considérée comme notre base de données.

Rajoutons maintenant la possibilité de récupérer toutes les entrées d'"inventory" et d'ajouter une entrée :

Pour vérifier notre code, nous pouvons une la CLI de Dfinity pour appeler notre canister comme cela :

Nous récupérons bien la liste des objets de l'inventaire.

Il est temps maintenant d'implémenter une fonctionnalité d'emprunt et de restitution d'un objet :

N'ayez pas peur de la syntaxe, nous avons quasiment fait le tour de celle-ci dans ce simple cas d'exemple. Testons maintenant notre code :

Pas mal du tout tout ça ! Je me suis cependant aperçu d'un petit problème : un deuxième utilisateur peut venir emprunter un objet déjà emprunté.

On va corriger cela :

Vérifier que le champs emprunteur n'est pas 'null' suffira à régler notre problème. Après avoir redéployer le canister et insérer des données :

Et voilà le travail ! En appelant la fonction d'emprunt sur un objet déjà utilisé par un autre utilisateur, nous obtenons le bon message d'erreur.

Le mot de la fin

Notre back end est maintenant finalisé et je reviendrai vers vous dans un prochain article pour la partie front end.

Si toutefois vous souhaitez d'ores et déjà aller plus loin, n'hésitez pas à aller jeter un œil à notre repo GitHub et à rajouter un historique d'emprunt, par exemple.

En conclusion, Dfinity nous permet d'entrevoir une nouvelle façon de développer des applications et je trouve impressionnant de pouvoir déployer une application complète en "production" avec si peu de lignes de code.

Grace à de nouveaux design architecturaux au niveau de la plateforme, nous pouvons mettre à la poubelle notre ancienne stack technique pour nous concentrer uniquement sur le code de notre application. L'Internet Computer s'occupe du reste. 

En tant qu'architecte cloud sur AWS, je peux vous assurer que déployer une application comme celle-ci, avec un niveau de sécurité équivalent, nous demanderait un énorme travail rien que pour la stack réseau. Sans parler du fait qu'il faudrait également configurer tout un tas de cloud services qui entraineraient rapidement des coups non négligeables.

Vous l'aurez compris, je suis déjà complètement fan de ce que nous présente l'équipe Dfinity et je compte bien garder un œil très attentif sur leurs prochaines avancées pour vous les partager aussi !

Stay tuned...

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

Article rédigé par Anthony, Lead Dev Full Stack & Expert en Blockchain chez ESENS

Retrouvez tous nos articles tech sur le Blog ESENS ! Vous souhaitez rejoindre la dream team ? Venez jetez un œil à nos offres d'emploi !