Construire une application décentralisée simple (DApp) sur Tron
Bienvenue à la leçon 3 ! Dans cette leçon, nous allons apprendre la structure et la fonctionnalité d'une application décentralisée Tron (DApp) de base. Nous allons adopter une approche pratique en créant une DApp simple qui interagit avec le contrat intelligent que nous avons développé dans la leçon précédente. À la fin de cette leçon, votre DApp fonctionnera sur le Nile Testnet.
Conception de la structure et de la fonctionnalité d'une DApp Tron de base
Une DApp est une combinaison d'un frontend, écrit dans un langage qui peut faire des appels web3.js, et d'un backend, qui est essentiellement constitué de contrats intelligents. Notre DApp aura une interface simple avec deux fonctionnalités principales : stocker un numéro et le récupérer à partir du contrat intelligent. Nous utiliserons HTML pour notre structure frontale et JavaScript avec la bibliothèque TronWeb pour interagir avec le réseau Tron.
Développer et déployer les Smart Contracts nécessaires à la DApp
Nous avons déjà réalisé cette étape dans la leçon 2 ! Notre contrat intelligent, "Storage", est déjà déployé sur le Nile Testnet.
Mise en œuvre d'interfaces utilisateur et de composants frontaux pour la DApp à l'aide de technologies web.
Commençons à coder notre DApp simple. Créez un fichier HTML(index.html) avec le code suivant :
HTML
htmlCopy code
< ! <><html><body><h2>Simple Storage DApp</h2>< input id="storageValue" type="number"> < button id="storeButton"> Store</button>< button id="retrieveButton"> Retrieve</button></p><!-- < p id="displayValue"> xm Charger TronWeb -->< script="https://cdn.jsdelivr.net/npm/tronweb@2/dist/tronweb.min.js"></script>< script src="app.js"></script></body></html>
FAQ
- Où dois-je créer ces fichiers ?
Vous devez créer ces deux fichiers (index.html et app.js) dans un nouveau dossier sur votre machine locale. Voici un guide étape par étape :
Étape 1 : Créez un nouveau dossier sur votre ordinateur. Vous pouvez lui donner le nom que vous voulez. Par exemple, vous pouvez l'appeler TronDApp.
Étape 2 : Dans ce dossier TronDApp, créez un nouveau fichier et nommez-le index.html. Il s'agit du fichier HTML dans lequel nous écrirons la structure de notre page web.
Étape 3 : Dans le même dossier TronDApp, créez un nouveau fichier et nommez-le app.js. Il s'agit du fichier JavaScript dans lequel nous écrirons le code permettant d'interagir avec la blockchain Tron.
Étape 4 : Ouvrez maintenant ces fichiers dans un éditeur de texte de votre choix (par exemple, Notepad, Sublime Text, Visual Studio Code, etc.) et collez le code respectif que j'ai fourni dans la leçon 3.3.
N'oubliez pas de remplacer "YOUR_CONTRACT_ADDRESS" et 'YOUR_PRIVATE_KEY' dans le fichier app.js par l'adresse de votre propre contrat et votre clé privée.
Étape 5 : Pour visualiser votre DApp, ouvrez le fichier index.html dans un navigateur web (tel que Google Chrome, Firefox, etc.).
Rappelez-vous que ces fichiers doivent toujours être conservés dans le même dossier car ils sont liés (le fichier index.html est lié au fichier app.js par le biais du script <src="app.js"></script> ). dans le code HTML). Si vous déplacez un fichier sans l'autre, le lien sera rompu et votre DApp ne fonctionnera pas correctement.
Cela crée une page web simple avec un champ de saisie, deux boutons (l'un pour stocker un nombre et l'autre pour le récupérer), et un paragraphe pour afficher le nombre récupéré.
Ensuite, créez un fichier JavaScript(app.js) avec le code suivant :
JavaScript
javascriptCopier le code
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // remplacez par l'adresse de votre contrat// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// get contract instanceasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// setup listeners for buttonsdocument.getElementById('storeButton').addEventListener('click', async () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
}) ;
document.getElementById('retrieveButton').addEventListener('click', async () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
}) ;
Dans ce script, remplacez "YOUR_CONTRACT_ADDRESS" et 'YOUR_PRIVATE_KEY' par l'adresse de votre contrat et votre clé privée. Ce fichier JavaScript met en place TronWeb, se connecte à notre contrat et interagit avec le contrat lorsque des boutons sont cliqués.
Pour obtenir la clé privée, exportez votre portefeuille en cliquant sur Exporter le compte et cliquez sur Clé privée comme suit :
Note : Dans une DApp réelle, vous ne devriez jamais exposer votre clé privée de cette manière. Nous le faisons ici par souci de simplicité. Pour une DApp de production, vous devez utiliser un moyen sécurisé de signer les transactions, tel que TronLink.
Test et déploiement de l'application Tron DApp sur le réseau Nile Testnet
Vous pouvez tester votre DApp en ouvrant le fichier index.html dans votre navigateur. N'oubliez pas d'utiliser un navigateur dans lequel vous avez installé l'extension TronLink et que vous avez connecté au Nile Testnet (comme Chrome ou Brave Browser). Saisissez un numéro dans le champ de saisie et cliquez sur "Enregistrer". Une fois la transaction confirmée, cliquez sur "Récupérer", et le numéro que vous avez enregistré devrait s'afficher.
Ceci termine la leçon 3 ! Félicitations pour avoir créé et déployé votre première application décentralisée sur Tron ! Dans la prochaine leçon, nous améliorerons notre DApp avec des fonctionnalités plus avancées.
Construire une application décentralisée simple (DApp) sur Tron
Bienvenue à la leçon 3 ! Dans cette leçon, nous allons apprendre la structure et la fonctionnalité d'une application décentralisée Tron (DApp) de base. Nous allons adopter une approche pratique en créant une DApp simple qui interagit avec le contrat intelligent que nous avons développé dans la leçon précédente. À la fin de cette leçon, votre DApp fonctionnera sur le Nile Testnet.
Conception de la structure et de la fonctionnalité d'une DApp Tron de base
Une DApp est une combinaison d'un frontend, écrit dans un langage qui peut faire des appels web3.js, et d'un backend, qui est essentiellement constitué de contrats intelligents. Notre DApp aura une interface simple avec deux fonctionnalités principales : stocker un numéro et le récupérer à partir du contrat intelligent. Nous utiliserons HTML pour notre structure frontale et JavaScript avec la bibliothèque TronWeb pour interagir avec le réseau Tron.
Développer et déployer les Smart Contracts nécessaires à la DApp
Nous avons déjà réalisé cette étape dans la leçon 2 ! Notre contrat intelligent, "Storage", est déjà déployé sur le Nile Testnet.
Mise en œuvre d'interfaces utilisateur et de composants frontaux pour la DApp à l'aide de technologies web.
Commençons à coder notre DApp simple. Créez un fichier HTML(index.html) avec le code suivant :
HTML
htmlCopy code
< ! <><html><body><h2>Simple Storage DApp</h2>< input id="storageValue" type="number"> < button id="storeButton"> Store</button>< button id="retrieveButton"> Retrieve</button></p><!-- < p id="displayValue"> xm Charger TronWeb -->< script="https://cdn.jsdelivr.net/npm/tronweb@2/dist/tronweb.min.js"></script>< script src="app.js"></script></body></html>
FAQ
- Où dois-je créer ces fichiers ?
Vous devez créer ces deux fichiers (index.html et app.js) dans un nouveau dossier sur votre machine locale. Voici un guide étape par étape :
Étape 1 : Créez un nouveau dossier sur votre ordinateur. Vous pouvez lui donner le nom que vous voulez. Par exemple, vous pouvez l'appeler TronDApp.
Étape 2 : Dans ce dossier TronDApp, créez un nouveau fichier et nommez-le index.html. Il s'agit du fichier HTML dans lequel nous écrirons la structure de notre page web.
Étape 3 : Dans le même dossier TronDApp, créez un nouveau fichier et nommez-le app.js. Il s'agit du fichier JavaScript dans lequel nous écrirons le code permettant d'interagir avec la blockchain Tron.
Étape 4 : Ouvrez maintenant ces fichiers dans un éditeur de texte de votre choix (par exemple, Notepad, Sublime Text, Visual Studio Code, etc.) et collez le code respectif que j'ai fourni dans la leçon 3.3.
N'oubliez pas de remplacer "YOUR_CONTRACT_ADDRESS" et 'YOUR_PRIVATE_KEY' dans le fichier app.js par l'adresse de votre propre contrat et votre clé privée.
Étape 5 : Pour visualiser votre DApp, ouvrez le fichier index.html dans un navigateur web (tel que Google Chrome, Firefox, etc.).
Rappelez-vous que ces fichiers doivent toujours être conservés dans le même dossier car ils sont liés (le fichier index.html est lié au fichier app.js par le biais du script <src="app.js"></script> ). dans le code HTML). Si vous déplacez un fichier sans l'autre, le lien sera rompu et votre DApp ne fonctionnera pas correctement.
Cela crée une page web simple avec un champ de saisie, deux boutons (l'un pour stocker un nombre et l'autre pour le récupérer), et un paragraphe pour afficher le nombre récupéré.
Ensuite, créez un fichier JavaScript(app.js) avec le code suivant :
JavaScript
javascriptCopier le code
const contractAddress = "YOUR_CONTRACT_ADDRESS"; // remplacez par l'adresse de votre contrat// setup TronWebconst tronWeb = new TronWeb({
fullHost: 'https://api.nile.trongrid.io',
privateKey: 'YOUR_PRIVATE_KEY' // replace with your private key
})
// get contract instanceasync function getContract() {
const contract = await tronWeb.contract().at(contractAddress);
return contract;
}
// setup listeners for buttonsdocument.getElementById('storeButton').addEventListener('click', async () => {
const num = document.getElementById('storageValue').value;
const contract = await getContract();
await contract.store(num).send();
}) ;
document.getElementById('retrieveButton').addEventListener('click', async () => {
const contract = await getContract();
const response = await contract.retrieve().call();
document.getElementById('displayValue').innerText = response;
}) ;
Dans ce script, remplacez "YOUR_CONTRACT_ADDRESS" et 'YOUR_PRIVATE_KEY' par l'adresse de votre contrat et votre clé privée. Ce fichier JavaScript met en place TronWeb, se connecte à notre contrat et interagit avec le contrat lorsque des boutons sont cliqués.
Pour obtenir la clé privée, exportez votre portefeuille en cliquant sur Exporter le compte et cliquez sur Clé privée comme suit :
Note : Dans une DApp réelle, vous ne devriez jamais exposer votre clé privée de cette manière. Nous le faisons ici par souci de simplicité. Pour une DApp de production, vous devez utiliser un moyen sécurisé de signer les transactions, tel que TronLink.
Test et déploiement de l'application Tron DApp sur le réseau Nile Testnet
Vous pouvez tester votre DApp en ouvrant le fichier index.html dans votre navigateur. N'oubliez pas d'utiliser un navigateur dans lequel vous avez installé l'extension TronLink et que vous avez connecté au Nile Testnet (comme Chrome ou Brave Browser). Saisissez un numéro dans le champ de saisie et cliquez sur "Enregistrer". Une fois la transaction confirmée, cliquez sur "Récupérer", et le numéro que vous avez enregistré devrait s'afficher.
Ceci termine la leçon 3 ! Félicitations pour avoir créé et déployé votre première application décentralisée sur Tron ! Dans la prochaine leçon, nous améliorerons notre DApp avec des fonctionnalités plus avancées.