Maison >Périphériques technologiques >Industrie informatique >Ethereum Dapps: construire une interface utilisateur web3 pour un contrat DAO

Ethereum Dapps: construire une interface utilisateur web3 pour un contrat DAO

Joseph Gordon-Levittoriginal: 2025-02-16 08:59:10223parcourir

Ce tutoriel continue le voyage de construction d'applications décentralisées (DAPP) sur la blockchain Ethereum. La partie 6 a conclu la fonctionnalité principale du DAO (vote, liste noire, distribution de dividendes), et cette partie finale se concentre sur la création d'une interface utilisateur pour l'interaction.

Ethereum DApps: Building a Web3 UI for a DAO Contract

Concepts clés:

Un frontal HTML et JavaScript simple se connecte aux contrats intelligents Ethereum. Prioriser les fonctionnalités de base sur la conception élaborée.
Les migrations de truffes automatisent les transferts de jetons pendant le déploiement, rationalisation des tests.
web3.js facilite la communication entre le frontal et la blockchain Ethereum, nécessitant une métamasque pour la gestion des portefeuilles.
Affiche dynamiquement l'état de l'utilisateur (connecté dans / out), le solde des jetons et l'historique des transactions à l'aide des capacités asynchrones de Web3.js.
Écoute d'événements en temps réel (transferts de jetons, résultats de vote) améliore l'expérience utilisateur.
Une interface utilisateur pour la soumission des propositions et le vote favorise la participation de la communauté.
Les tests locaux approfondis sont cruciaux avant de se déployer sur le réseau Ethereum principal.

Automatisation des transferts de jetons:

Le déploiement initial laisse le jeton et le DAO non connectés. Pour simplifier les tests, un script de migration (4_configure_relationship.js) automatise le transfert de jeton vers le DAO:

<code class="language-javascript">var Migrations = artifacts.require("./Migrations.sol");
var StoryDao = artifacts.require("./StoryDao.sol");
var TNSToken = artifacts.require("./TNSToken.sol");

var storyInstance, tokenInstance;

module.exports = function (deployer, network, accounts) {
    deployer.then(function () {
            return TNSToken.deployed();
        }).then(function (tIns) {
            tokenInstance = tIns;
            return StoryDao.deployed();
        }).then(function (sIns) {
            storyInstance = sIns;
            return balance = tokenInstance.totalSupply();
        }).then(function (bal) {
            return tokenInstance.transfer(storyInstance.address, bal);
        })
        .then(function (something) {
            return tokenInstance.transferOwnership(storyInstance.address);
        });
}</code>

Ce code basé sur des promesses déploie séquentiellement le jeton et le DAO, puis transfère l'offre et la propriété totales de jetons à l'adresse du DAO. truffle migrate --reset exécute cette migration.

Le frontal (index.html):

Une structure HTML de base avec JavaScript intégré gère l'interaction Blockchain:

<code class="language-html"><!DOCTYPE html>


    <title>The Neverending Story</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="The Neverending Story is an community curated and moderated Ethereum dapp-story">
    <link rel="stylesheet" href="assets/css/main.css">



    <div class="grid-container">
        <!-- ... (HTML structure for the DApp UI) ... -->
    </div>

    
    
    


</code>

(Remarque: les HTML et CSS complets sont omis pour la concision. Les extraits fournis illustrent les éléments clés.)

Interaction JavaScript (app.js et main.js):

Le code JavaScript exploite Web3.js pour interagir avec la blockchain, en supposant que Metamask est installé. Il gère les informations de compte, l'écoute des événements et la soumission des transactions. (Le code JavaScript détaillé est omis pour la concision mais les concepts clés sont expliqués ci-dessous).

Informations sur le compte:

Le DAPP affiche dynamiquement les informations de compte basées sur l'état de connexion Metamask. L'avatar d'un utilisateur est généré à l'aide de la bibliothèque Blockies. Le code récupère et affiche les équilibres de jetons, les dénombrements de soumission et le statut de liste blanche / liste noire. Les appels asynchrones sont utilisés pour gérer l'interaction blockchain.

Écoute d'événement:

Le DAPP écoute les événements contractuels (par exemple, Whitelisted) en utilisant les capacités d'écoute des événements de Web3.js. Cela permet des mises à jour en temps réel dans l'interface utilisateur. Le code gère efficacement les événements historiques et les événements nouvellement émis, empêchant l'affichage en double.

Soumettre les entrées:

L'interface utilisateur comprend un formulaire pour soumettre de nouvelles entrées à l'histoire. Le code JavaScript gère la soumission, convertissant le texte au format hexadécimal avant d'envoyer la transaction à la blockchain. Les limites de gaz sont fixées pour assurer une exécution réussie des transactions.

Conclusion et développement ultérieur:

Cette section fournit une base pour un front-end DAPP de base. Le développement ultérieur, tel que l'intégration d'un cadre frontal à part entière (comme Vue.js ou React), l'amélioration de l'interface utilisateur et l'ajout de fonctionnalités plus sophistiquées, sont encouragés. Le tutoriel se termine par une liste d'améliorations et de FAQ suggérées couvrant divers aspects du développement de Dapp Ethereum. La partie suivante couvrira le déploiement dans un environnement en direct.

Ethereum DApps: Building a Web3 UI for a DAO Contract

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html for format Token using Interface Event JS this promise history display ui web3 Foundation Blockchain Web3

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：5 TRUMS TOKEN GRATUITS Vous pouvez réclamer maintenantArticle suivant：5 TRUMS TOKEN GRATUITS Vous pouvez réclamer maintenant

Articles Liés

Voir plus