Eenvoudig DApp-voorbeeld
Bouw een eenvoudige DApp die gegevens uit een geïmplementeerd smart contract leest en op een webpagina weergeeft.
Eenvoudig DApp-voorbeeld is een gratis De basis van Web3- en DApp-ontwikkeling-les op CoddyKit. Dit is les 3 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject De basis van Web3- en DApp-ontwikkeling. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus De basis van Web3- en DApp-ontwikkeling bevat in totaal 3 lessen.
Onze eerste DApp bouwen
Welkom bij het bouwen van je eerste gedecentraliseerde toepassing (DApp)! In deze les maken we een eenvoudige DApp die een bericht leest dat in een smart contract is opgeslagen en dit op een webpagina weergeeft.
In dit voorbeeld brengen we de concepten samen die je hebt geleerd over smart contracts en interactie met de front-end.
Het eenvoudige berichtencontract
Laten we eerst het smart contract definiëren. Dit contract is heel eenvoudig: het slaat slechts één tekenreeksvariabele op, myMessage, die we openbaar maken zodat de waarde ervan eenvoudig buiten het contract kan worden gelezen.
Onthoud dat dit contract zou worden gecompileerd en geïmplementeerd op een blockchain (zoals Ethereum).
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleMessage {
string public myMessage = "Hello CoddyKit DApp!";
}Contractadres en ABI
Zodra ons SimpleMessage-contract op een blockchain is geïmplementeerd, krijgen we twee belangrijke stukjes informatie:
- Contractadres: dit is vergelijkbaar met het unieke straatadres van het contract op de blockchain.
- ABI (Application Binary Interface): dit is een JSON-beschrijving van de functies en variabelen van het contract. Hiermee weet onze front-end hoe deze met het contract moet communiceren.
We gebruiken deze gegevens in onze webtoepassing om verbinding te maken en gegevens te lezen.
HTML-structuur van de front-end
Onze DApp heeft een eenvoudige webpagina nodig om het bericht weer te geven. We maken een index.html-bestand met een kop en een alinea waarin het bericht van ons contract verschijnt. We koppelen ook ons JavaScript-bestand (app.js) en de Web3.js-bibliotheek.
<!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>Verbinden met Web3.js
Nu gaan we aan de slag met JavaScript (app.js)! We moeten onze webpagina verbinden met de Ethereum-blockchain. De Web3.js-bibliotheek helpt ons hierbij. Deze zoekt in de browser van de gebruiker naar een provider, zoals MetaMask.
// 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"));
}
}
Het contractobject maken
Nu Web3.js met een provider is verbonden, kunnen we een JavaScript-object maken dat ons geïmplementeerde SimpleMessage-smart contract vertegenwoordigt. Hiervoor gebruiken we het contractadres en de ABI.
De ABI vertelt Web3.js welke functies beschikbaar zijn in het contract.
// 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);
}Contractgegevens lezen
Nu we ons contractobject hebben, is het eenvoudig om de variabele myMessage te lezen. Omdat myMessage een public view-variabele is, kunnen we de automatisch gegenereerde getterfunctie rechtstreeks aanroepen zonder een transactie te versturen (wat betekent dat er geen gaskosten zijn).
// 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.";
}
}Volledige DApp-JavaScript (app.js)
Dit is het volledige app.js-bestand waarin alles samenkomt. Het maakt verbinding met de blockchain, laadt het contract, leest het bericht en werkt vervolgens de HTML bij om het bericht weer te geven wanneer de pagina wordt geladen.
Vergeet niet om 0xYourDeployedContractAddressHere te vervangen door het werkelijke contractadres dat je hebt geïmplementeerd!
// 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;
});Controle van DApp-interactie
Welke van de volgende gegevens zijn essentieel voor een front-end-DApp om met een geïmplementeerd smart contract te communiceren?
Samenvatting: je eerste DApp
Gefeliciteerd! Je hebt zojuist het proces voor het bouwen van een eenvoudige DApp doorlopen.
- We hebben een eenvoudig Solidity-smart contract gedefinieerd.
- We hebben geleerd hoe belangrijk het adres en de ABI van het contract zijn.
- We hebben een HTML-pagina gemaakt en Web3.js gebruikt om verbinding te maken met de blockchain.
- Tot slot hebben we ons contractobject gemaakt en er gegevens uit gelezen, die we op onze webpagina hebben weergegeven.
Dit fundamentele patroon van verbinden, communiceren en weergeven vormt de kern van de meeste DApps!
Leer De basis van Web3- en DApp-ontwikkeling met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 29
- Lessen
- 105
Veelgestelde vragen
Is de les “Eenvoudig DApp-voorbeeld” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad De basis van Web3- en DApp-ontwikkeling, waaronder “Eenvoudig DApp-voorbeeld”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus De basis van Web3- en DApp-ontwikkeling bevat in totaal 3 lessen.
Wat leer ik in “Eenvoudig DApp-voorbeeld”?
Bouw een eenvoudige DApp die gegevens uit een geïmplementeerd smart contract leest en op een webpagina weergeeft. Je oefent met De basis van Web3- en DApp-ontwikkeling door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met De basis van Web3- en DApp-ontwikkeling te beginnen?
Ervaring vooraf is niet nodig. De basis van Web3- en DApp-ontwikkeling op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 3.
Hoe lang duurt de les “Eenvoudig DApp-voorbeeld”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over De basis van Web3- en DApp-ontwikkeling?
Ja. Elke les over De basis van Web3- en DApp-ontwikkeling bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Front-end en back-end in Web3
- Verbinding maken met Ethereum (Web3.js/Ethers.js)
- Eenvoudig DApp-voorbeeld