cari

Rumah >Peranti teknologi >industri IT >Ethereum Dapps: Membina UI Web3 untuk Kontrak DAO

Ethereum Dapps: Membina UI Web3 untuk Kontrak DAO

Joseph Gordon-Levitt
Joseph Gordon-Levittasal
2025-02-16 08:59:10223semak imbas

Tutorial ini meneruskan perjalanan membina aplikasi yang terdesentralisasi (DAPPS) pada blok Ethereum. Bahagian 6 menyimpulkan fungsi teras DAO (pengundian, penyenaraian hitam, taburan dividen), dan bahagian akhir ini memberi tumpuan kepada mewujudkan antara muka pengguna untuk interaksi.

Ethereum DApps: Building a Web3 UI for a DAO Contract

Konsep Utama:

    HTML dan JavaScript Front-end yang mudah dihubungkan dengan kontrak pintar Ethereum. Mengutamakan fungsi teras melalui reka bentuk yang rumit.
    • migrasi truffle mengautomasikan pemindahan token semasa penempatan, menyelaraskan ujian.
    • web3.js memudahkan komunikasi antara bahagian depan dan blok Ethereum, yang memerlukan metamask untuk pengurusan dompet.
    • Memaparkan status pengguna secara dinamik (log masuk/keluar), keseimbangan token, dan sejarah urus niaga menggunakan keupayaan asynchronous Web3.js.
    • Mendengarkan acara masa nyata (pemindahan token, hasil pengundian) meningkatkan pengalaman pengguna.
    • antara muka pengguna untuk penyerahan cadangan dan pengundian menggalakkan penyertaan komuniti.
    • ujian tempatan yang menyeluruh adalah penting sebelum menggunakan rangkaian Ethereum utama.

Automasi pemindahan token:

Penyebaran awal meninggalkan token dan dao tidak berkaitan. Untuk memudahkan ujian, skrip penghijrahan (

) mengautomasikan pemindahan token ke DAO: 4_configure_relationship.js 

<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>
Kod berasaskan janji ini secara berurutan menyebarkan token dan DAO, kemudian memindahkan bekalan token dan pemilikan total ke alamat DAO.

Melaksanakan penghijrahan ini. truffle migrate --reset 3

Struktur HTML asas dengan JavaScript tertanam mengendalikan Interaksi Blockchain:

(Nota: HTML dan CSS penuh diabaikan untuk keringkasan. Coretan yang disediakan menggambarkan unsur -unsur utama.)

Interaksi JavaScript (app.js dan main.js): 

<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>
Kod JavaScript memanfaatkan web3.js untuk berinteraksi dengan blockchain, dengan asumsi metamask dipasang. Ia mengendalikan maklumat akaun, pendengaran acara, dan penyerahan transaksi. (Kod JavaScript terperinci ditinggalkan untuk keringkasan tetapi konsep utama dijelaskan di bawah).

Maklumat Akaun:

DAPP dinamik memaparkan maklumat akaun berdasarkan status log masuk metamask. Avatar pengguna dijana menggunakan perpustakaan Blockies. Kod ini mengambil dan memaparkan baki token, tuduhan penyerahan, dan status senarai putih/hitam. Panggilan asynchronous digunakan untuk mengendalikan interaksi blockchain.

Mendengarkan acara:

DAPP mendengar untuk peristiwa kontrak (mis., Whitelisted) Menggunakan keupayaan mendengar acara Web3.js. Ini membolehkan kemas kini masa nyata dalam UI. Kod ini mengendalikan kedua -dua peristiwa sejarah dan peristiwa yang baru dipancarkan, menghalang paparan pendua.

Mengemukakan penyertaan:

UI termasuk borang untuk mengemukakan penyertaan baru kepada cerita. Kod JavaScript mengendalikan penyerahan, menukar teks ke format heksadesimal sebelum menghantar transaksi ke blockchain. Had gas ditetapkan untuk memastikan pelaksanaan transaksi yang berjaya.

Kesimpulan dan perkembangan selanjutnya:

Bahagian ini menyediakan asas untuk front-end Dapp asas. Perkembangan selanjutnya, seperti mengintegrasikan rangka kerja front-end sepenuhnya (seperti Vue.js atau React), meningkatkan UI, dan menambah ciri-ciri yang lebih canggih, digalakkan. Tutorial ini disimpulkan dengan senarai penambahbaikan yang dicadangkan dan Soalan Lazim yang meliputi pelbagai aspek pembangunan Ethereum Dapp. Bahagian seterusnya akan meliputi penempatan ke persekitaran hidup.

Ethereum DApps: Building a Web3 UI for a DAO Contract

Atas ialah kandungan terperinci Ethereum Dapps: Membina UI Web3 untuk Kontrak DAO. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html for format Token using Interface Event JS this promise history display ui web3 Foundation Blockchain Web3
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：5 Airdrops Token Percuma yang boleh anda tuntut sekarangArtikel seterusnya：5 Airdrops Token Percuma yang boleh anda tuntut sekarang

Artikel berkaitan

Lihat lagi