Grundlæggende DApp-eksempel
Byg en enkel DApp, der læser data fra en deployet smart contract og viser dem på en webside.
Grundlæggende DApp-eksempel er en gratis Grundlæggende udvikling af Web3- og DApp-programmer-lektion på CoddyKit. Dette er lektion 3 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Grundlæggende udvikling af Web3- og DApp-programmer, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Grundlæggende udvikling af Web3- og DApp-programmer-kurset indeholder 3 lektioner i alt.
Byg vores første DApp
Velkommen til lektionen, hvor du bygger din første decentraliserede applikation (DApp)! I denne lektion opretter vi en enkel DApp, der læser en besked, som er gemt i en smart kontrakt, og viser den på en webside.
Dette eksempel samler de begreber, du har lært om smarte kontrakter og frontendinteraktion.
Den enkle beskedkontrakt
Først definerer vi den smarte kontrakt. Denne kontrakt er meget enkel: Den gemmer blot en enkelt strengvariabel, myMessage, som vi gør offentlig, så dens værdi nemt kan læses uden for kontrakten.
Husk, at denne kontrakt skulle kompileres og implementeres på en blockchain (f.eks. Ethereum).
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleMessage {
string public myMessage = "Hello CoddyKit DApp!";
}Kontraktadresse og ABI
Når vores SimpleMessage-kontrakt er implementeret på en blockchain, får vi to vigtige oplysninger:
- Kontraktadresse: Det svarer til kontraktens unikke gadeadresse på blockchainen.
- ABI (Application Binary Interface): Dette er en JSON-beskrivelse af kontraktens funktioner og variabler. Den fortæller vores frontend, hvordan den skal "tale" med kontrakten.
Vi bruger disse oplysninger i vores webapplikation til at oprette forbindelse og læse data.
HTML-struktur for frontend
Vores DApp skal bruge en grundlæggende webside til at vise beskeden. Vi opretter en index.html-fil med en overskrift og et afsnit, hvor kontraktens besked vises. Vi tilknytter også vores JavaScript-fil (app.js) og Web3.js-biblioteket.
<!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>Opret forbindelse med Web3.js
Nu til JavaScript (app.js)! Vi skal forbinde vores webside med Ethereum-blockchainen. Web3.js-biblioteket hjælper os med dette. Det leder efter en udbyder, f.eks. MetaMask, i brugerens browser.
// 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"));
}
}
Opret kontraktobjektet
Når Web3.js er forbundet med en udbyder, kan vi nu oprette et JavaScript-objekt, der repræsenterer vores implementerede SimpleMessage-kontrakt. Det gør vi ved hjælp af dens kontraktadresse og ABI.
ABI'en fortæller Web3.js, hvilke funktioner der er tilgængelige i kontrakten.
// 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);
}Læsning af kontraktdata
Nu hvor vi har vores kontraktobjekt, er det enkelt at læse variablen myMessage. Da myMessage er en public view-variabel, kan vi kalde dens automatisk genererede getter-funktion direkte uden at sende en transaktion (hvilket betyder, at det ikke koster 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.";
}
}Komplet DApp-JavaScript (app.js)
Her er den komplette app.js-fil, der samler det hele. Den opretter forbindelse til blockchainen, indlæser kontrakten, læser beskeden og opdaterer derefter HTML'en for at vise den, når siden indlæses.
Husk at erstatte 0xYourDeployedContractAddressHere med adressen på din faktiske implementerede kontrakt!
// 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;
});Tjek af DApp-interaktion
Hvilke af følgende oplysninger er nødvendige for, at en DApp-frontend kan interagere med en implementeret smart kontrakt?
Opsummering: Din første DApp
Tillykke! Du har netop gennemgået processen med at bygge en grundlæggende DApp.
- Vi definerede en enkel Solidity-smartkontrakt.
- Vi lærte, hvor vigtig kontraktens adresse og ABI er.
- Vi oprettede en HTML-side og brugte Web3.js til at oprette forbindelse til blockchainen.
- Til sidst oprettede vi vores kontraktobjekt og læste data fra det, som vi viste på vores webside.
Dette grundlæggende mønster med at oprette forbindelse, interagere og vise data er centralt for de fleste DApps!
Lær Grundlæggende udvikling af Web3- og DApp-programmer med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 29
- Lektioner
- 105
Ofte stillede spørgsmål
Er lektionen “Grundlæggende DApp-eksempel” gratis?
Ja — alle 3 lektioner i læringssporet Grundlæggende udvikling af Web3- og DApp-programmer, inklusive “Grundlæggende DApp-eksempel”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Grundlæggende udvikling af Web3- og DApp-programmer-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Grundlæggende DApp-eksempel”?
Byg en enkel DApp, der læser data fra en deployet smart contract og viser dem på en webside. Du øver dig i Grundlæggende udvikling af Web3- og DApp-programmer med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Grundlæggende udvikling af Web3- og DApp-programmer?
Der kræves ingen tidligere erfaring. Grundlæggende udvikling af Web3- og DApp-programmer på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 3.
Hvor lang tid tager lektionen “Grundlæggende DApp-eksempel”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Grundlæggende udvikling af Web3- og DApp-programmer-lektion?
Ja. Alle Grundlæggende udvikling af Web3- og DApp-programmer-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Frontend og backend i Web3
- Forbindelse til Ethereum (Web3.js/Ethers.js)
- Grundlæggende DApp-eksempel