Contoh DApp Asas
Bina DApp ringkas yang membaca data daripada kontrak pintar yang telah dilaksanakan dan memaparkannya pada halaman web.
Contoh DApp Asas ialah pelajaran Asas Pembangunan Web3 & DApp percuma di CoddyKit. Ini ialah pelajaran 3 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Asas Pembangunan Web3 & DApp, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Asas Pembangunan Web3 & DApp merangkumi sejumlah 3 pelajaran.
Membina Aplikasi Terdesentralisasi Pertama Kita
Selamat datang ke pelajaran membina Aplikasi Terdesentralisasi (DApp) pertama anda! Dalam pelajaran ini, kita akan mencipta aplikasi terdesentralisasi ringkas yang membaca mesej yang disimpan dalam kontrak pintar dan memaparkannya pada halaman web.
Contoh ini akan menggabungkan konsep tentang kontrak pintar dan interaksi bahagian hadapan yang telah anda pelajari.
Kontrak Mesej Ringkas
Mula-mula, mari kita takrifkan kontrak pintar tersebut. Kontrak ini sangat asas: kontrak ini hanya menyimpan satu pemboleh ubah rentetan, myMessage, yang akan kita jadikan awam supaya nilainya boleh dibaca dengan mudah dari luar kontrak.
Ingat, kontrak ini perlu disusun dan digunakan pada rantaian blok seperti Ethereum.
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleMessage {
string public myMessage = "Hello CoddyKit DApp!";
}Alamat Kontrak dan ABI
Selepas kontrak SimpleMessage kita digunakan pada rantaian blok, kita memperoleh dua maklumat penting:
- Alamat kontrak: Ini seperti alamat jalan unik kontrak tersebut pada rantaian blok.
- ABI (Antara Muka Binari Aplikasi): Ini ialah perihalan JSON tentang fungsi dan pemboleh ubah kontrak. ABI memberitahu bahagian hadapan cara untuk ‘berkomunikasi’ dengan kontrak.
Kita akan menggunakan kedua-duanya dalam aplikasi web untuk menyambung dan membaca data.
Struktur HTML Bahagian Hadapan
Aplikasi terdesentralisasi kita memerlukan halaman web asas untuk memaparkan mesej. Kita akan mencipta fail index.html dengan tajuk dan perenggan tempat mesej kontrak kita akan dipaparkan. Kita juga akan memautkan fail JavaScript (app.js) dan pustaka Web3.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoddyKit DApp</title>
</head>
<body>
<h1>DApp Message Reader</h1>
<p>Message from contract: <span id="contractMessage">Loading...</span></p>
<script src="https://cdn.jsdelivr.net/npm/web3@1.7.0/dist/web3.min.js"></script>
<script src="app.js"></script>
</body>
</html>Menyambung dengan Web3.js
Sekarang kita beralih kepada JavaScript (app.js)! Kita perlu menyambungkan halaman web kita kepada rantaian blok Ethereum. Pustaka Web3.js membantu kita melakukannya. Pustaka ini akan mencari penyedia seperti MetaMask dalam pelayar pengguna.
// app.js
let web3;
async function initWeb3() {
if (window.ethereum) {
web3 = new Web3(window.ethereum);
try {
await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log("Connected to MetaMask!");
} catch (error) {
console.error("User denied account access");
}
} else if (window.web3) {
web3 = new Web3(window.web3.currentProvider);
} else {
console.log('Non-Ethereum browser detected. Try MetaMask!');
// Fallback for read-only access (e.g., Infura)
// web3 = new Web3(new Web3.providers.HttpProvider("YOUR_INFURA_URL"));
}
}
Mencipta Tika Objek Kontrak
Dengan Web3.js yang telah disambungkan kepada penyedia, kita kini boleh mencipta objek JavaScript yang mewakili kontrak pintar SimpleMessage kita yang telah digunakan. Kita melakukannya menggunakan alamat kontrak dan ABI.
ABI memberitahu Web3.js fungsi yang tersedia pada kontrak tersebut.
// app.js (continued)
const contractAddress = "0xYourDeployedContractAddressHere"; // REPLACE THIS!
const contractABI = [
{
"inputs": [],
"name": "myMessage",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
let simpleMessageContract;
async function loadContract() {
if (!web3) await initWeb3();
simpleMessageContract = new web3.eth.Contract(contractABI, contractAddress);
console.log("Contract loaded:", simpleMessageContract);
}Membaca Data Kontrak
Sekarang kita telah mempunyai objek kontrak, membaca pemboleh ubah myMessage adalah mudah. Oleh sebab myMessage ialah pemboleh ubah public view, kita boleh memanggil fungsi pengambil yang dijana secara automatik terus tanpa menghantar transaksi, yang bermaksud tiada kos gas.
// app.js (continued)
async function readMessage() {
if (!simpleMessageContract) await loadContract();
try {
// Call the auto-generated getter for 'myMessage'
const message = await simpleMessageContract.methods.myMessage().call();
console.log("Message from contract:", message);
return message;
} catch (error) {
console.error("Error reading message:", error);
return "Error loading message.";
}
}JavaScript Aplikasi Terdesentralisasi Lengkap (app.js)
Berikut ialah fail app.js lengkap yang menggabungkan semuanya. Fail ini bersambung kepada rantaian blok, memuatkan kontrak, membaca mesej dan kemudian mengemas kini HTML untuk memaparkannya apabila halaman dimuatkan.
Jangan lupa menggantikan 0xYourDeployedContractAddressHere dengan alamat kontrak sebenar yang telah anda gunakan!
// app.js
let web3; // Declare web3 globally
const contractAddress = "0xYourDeployedContractAddressHere"; // REPLACE THIS!
const contractABI = [
{
"inputs": [],
"name": "myMessage",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
let simpleMessageContract;
async function initWeb3() {
if (window.ethereum) { web3 = new Web3(window.ethereum); await window.ethereum.request({ method: 'eth_requestAccounts' }); }
else if (window.web3) { web3 = new Web3(window.web3.currentProvider); }
else { console.log('Non-Ethereum browser detected. Try MetaMask!'); }
}
async function loadContract() {
if (!web3) await initWeb3();
simpleMessageContract = new web3.eth.Contract(contractABI, contractAddress);
}
async function readMessage() {
if (!simpleMessageContract) await loadContract();
try {
const message = await simpleMessageContract.methods.myMessage().call();
return message;
} catch (error) {
console.error("Error reading message:", error);
return "Error loading message.";
}
}
document.addEventListener('DOMContentLoaded', async () => {
const messageElement = document.getElementById('contractMessage');
await initWeb3();
await loadContract();
const msg = await readMessage();
messageElement.innerText = msg;
});Semakan Interaksi Aplikasi Terdesentralisasi
Antara berikut, yang manakah merupakan maklumat penting yang diperlukan oleh aplikasi terdesentralisasi bahagian hadapan untuk berinteraksi dengan kontrak pintar yang telah digunakan?
Ulang Kaji: Aplikasi Terdesentralisasi Pertama Anda
Tahniah! Anda baru sahaja mengikuti proses membina aplikasi terdesentralisasi asas.
- Kita mentakrifkan kontrak pintar Solidity yang ringkas.
- Kita mempelajari kepentingan alamat kontrak dan ABI.
- Kita mencipta halaman HTML dan menggunakan Web3.js untuk menyambung kepada rantaian blok.
- Akhir sekali, kita mencipta tika objek kontrak dan membaca data daripadanya, lalu memaparkannya pada halaman web kita.
Corak asas penyambungan, interaksi dan paparan ini menjadi teras kebanyakan aplikasi terdesentralisasi!
Pelajari Asas Pembangunan Web3 & DApp dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 29
- Pelajaran
- 105
Soalan Lazim
Adakah pelajaran “Contoh DApp Asas” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Asas Pembangunan Web3 & DApp, termasuk “Contoh DApp Asas”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Asas Pembangunan Web3 & DApp merangkumi sejumlah 3 pelajaran.
Apakah yang akan saya pelajari dalam “Contoh DApp Asas”?
Bina DApp ringkas yang membaca data daripada kontrak pintar yang telah dilaksanakan dan memaparkannya pada halaman web. Anda berlatih Asas Pembangunan Web3 & DApp menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Asas Pembangunan Web3 & DApp?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Asas Pembangunan Web3 & DApp di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 3.
Berapa lamakah pelajaran “Contoh DApp Asas” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Asas Pembangunan Web3 & DApp ini?
Ya. Setiap pelajaran Asas Pembangunan Web3 & DApp menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Bahagian Hadapan dan Belakang dalam Web3
- Menyambung kepada Ethereum (Web3.js/Ethers.js)
- Contoh DApp Asas