Grundläggande DApp-exempel
Bygg en enkel DApp som läser data från ett distribuerat smart kontrakt och visar den på en webbsida.
Grundläggande DApp-exempel är en gratis lektion i Grunderna i Web3- och DApp-utveckling på CoddyKit. Detta är lektion 3 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Grunderna i Web3- och DApp-utveckling, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Grunderna i Web3- och DApp-utveckling innehåller totalt 3 lektioner.
Bygga vår första DApp
Välkommen till lektionen där du bygger din första decentraliserade applikation (DApp)! I den här lektionen skapar vi en enkel DApp som läser ett meddelande som lagras i ett smart kontrakt och visar det på en webbsida.
Detta exempel knyter ihop de koncept du har lärt dig om smarta kontrakt och frontendinteraktion.
Det enkla meddelandekontraktet
Först definierar vi det smarta kontraktet. Det här kontraktet är mycket enkelt: det lagrar bara en strängvariabel, myMessage, som vi gör publik så att dess värde enkelt kan läsas utanför kontraktet.
Kom ihåg att det här kontraktet skulle kompileras och distribueras till en blockkedja (som Ethereum).
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleMessage {
string public myMessage = "Hello CoddyKit DApp!";
}Kontraktsadress och ABI
När vårt SimpleMessage-kontrakt har distribuerats till en blockkedja får vi två viktiga informationsdelar:
- Kontraktsadress: Detta är ungefär som kontraktets unika gatuadress på blockkedjan.
- ABI (Application Binary Interface): Detta är en JSON-beskrivning av kontraktets funktioner och variabler. Den talar om för vår frontend hur den ska ”prata” med kontraktet.
Vi använder dessa i vår webbapplikation för att ansluta till och läsa data från kontraktet.
HTML-struktur för frontend
Vår DApp behöver en grundläggande webbsida för att visa meddelandet. Vi skapar en index.html-fil med en rubrik och ett stycke där kontraktets meddelande visas. Vi länkar också till vår JavaScript-fil (app.js) och 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>Ansluta med Web3.js
Nu till JavaScript (app.js)! Vi behöver ansluta vår webbsida till Ethereum-blockkedjan. Web3.js-biblioteket hjälper oss med detta. Det letar efter en provider, som MetaMask, i användarens webbläsare.
// 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"));
}
}
Skapa kontraktsobjektet
När Web3.js är anslutet till en provider kan vi skapa ett JavaScript-objekt som representerar vårt distribuerade SimpleMessage-kontrakt. Vi gör detta med hjälp av dess kontraktsadress och ABI.
ABI:t talar om för Web3.js vilka funktioner som finns tillgängliga i kontraktet.
// 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äsa data från kontraktet
Nu när vi har vårt kontraktsobjekt är det enkelt att läsa variabeln myMessage. Eftersom myMessage är en public view-variabel kan vi anropa dess automatiskt genererade getter-funktion direkt utan att skicka en transaktion (vilket innebär att ingen gaskostnad uppstår).
// 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.";
}
}Fullständig DApp-JavaScript (app.js)
Här är den fullständiga app.js-filen som knyter ihop allt. Den ansluter till blockkedjan, läser in kontraktet, hämtar meddelandet och uppdaterar sedan HTML-koden så att meddelandet visas när sidan läses in.
Kom ihåg att ersätta 0xYourDeployedContractAddressHere med den faktiska adressen till ditt distribuerade 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;
});Kontroll av DApp-interaktion
Vilka av följande är nödvändiga informationsdelar för att en DApp-frontend ska kunna interagera med ett distribuerat smart kontrakt?
Repetition: din första DApp
Grattis! Du har nu gått igenom processen för att bygga en grundläggande DApp.
- Vi definierade ett enkelt smart kontrakt i Solidity.
- Vi lärde oss hur viktigt kontraktets adress och ABI är.
- Vi skapade en HTML-sida och använde Web3.js för att ansluta till blockkedjan.
- Slutligen skapade vi vårt kontraktsobjekt och läste data från det, som vi visade på vår webbsida.
Detta grundläggande mönster – att ansluta, interagera och visa data – utgör kärnan i de flesta DApps!
Lär dig Grunderna i Web3- och DApp-utveckling med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 29
- Lektioner
- 105
Vanliga frågor
Är lektionen ”Grundläggande DApp-exempel” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Grunderna i Web3- och DApp-utveckling, inklusive ”Grundläggande DApp-exempel”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Grunderna i Web3- och DApp-utveckling innehåller totalt 3 lektioner.
Vad lär jag mig i ”Grundläggande DApp-exempel”?
Bygg en enkel DApp som läser data från ett distribuerat smart kontrakt och visar den på en webbsida. Ni övar på Grunderna i Web3- och DApp-utveckling med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Grunderna i Web3- och DApp-utveckling?
Du behöver inga förkunskaper. Utbildningen i Grunderna i Web3- och DApp-utveckling på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.
Hur lång tid tar lektionen ”Grundläggande DApp-exempel”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Grunderna i Web3- och DApp-utveckling-lektionen?
Ja. Varje Grunderna i Web3- och DApp-utveckling-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Frontend och backend i Web3
- Ansluta till Ethereum (Web3.js/Ethers.js)
- Grundläggande DApp-exempel