De basis van Web3- en DApp-ontwikkeling · Les

Transacties en events afhandelen

Leer transacties vanuit uw DApp te verzenden, transactiebevestigingen af te handelen en te luisteren naar events van smart contracts om de gebruikersinterface bij te werken.

Les 3 van 311 stappen

Transacties en events afhandelen 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.

DApps dynamisch maken

Tot nu toe heb je geleerd hoe je je DApp met de blockchain verbindt en gegevens leest. Maar wat als je gegevens wilt wijzigen of acties wilt uitvoeren?

In deze les leer je hoe je vanuit je DApp transacties verstuurt om de blockchainstatus te wijzigen en hoe je met smart-contractgebeurtenissen naar realtime-updates luistert.

Wat is een blockchaintransactie?

Een blockchaintransactie is een ondertekend bericht dat de status van de blockchain wijzigt. Elke transactie kost een kleine vergoeding die gas wordt genoemd en in Ether (ETH) wordt betaald.

Veelvoorkomende DApp-transacties zijn:

  • Ether naar een ander adres sturen;
  • een smart-contractfunctie aanroepen die gegevens schrijft of wijzigt;
  • een nieuw smart contract implementeren.

Transacties vanuit je DApp versturen

Om een transactie te versturen die een smart-contractfunctie aanroept, moet je DApp:

  1. verbinding maken met een blockchainprovider, bijvoorbeeld MetaMask;
  2. een signer ophalen, oftewel de verbonden wallet van de gebruiker;
  3. de gewenste contractfunctie aanroepen en alle vereiste parameters meegeven.

De wallet van de gebruiker vraagt vervolgens om de transactie te bevestigen en te ondertekenen.

Voorbeeld van een schrijf functie aanroepen

Zo kun je met Ethers.js een eenvoudige functie setValue op een smart contract aanroepen. Onthoud dat contract verwijst naar je geïnstantieerde contractobject.

// Assuming 'contract' is an Ethers.js Contract instance
// and 'signer' is obtained from the connected wallet.

async function updateValue(newValue) {
  try {
    const tx = await contract.connect(signer).setValue(newValue);
    console.log("Transaction sent: ", tx.hash);
    // Wait for the transaction to be mined
    await tx.wait();
    console.log("Transaction confirmed!");
  } catch (error) {
    console.error("Error sending transaction:", error);
  }
}

Wachten op transactiebevestiging

Nadat je een transactie hebt verstuurd, wordt deze niet onmiddellijk verwerkt. De transactie komt in een transactiepool terecht en wacht totdat een miner of validator deze in een block opneemt.

De aanroep await tx.wait() is essentieel. Deze pauzeert de uitvoering van je DApp totdat de transactie is gemined en op de blockchain is bevestigd, zodat je gebruikersinterface de nieuwste status weergeeft.

Transactiebevestigingen begrijpen

Wanneer tx.wait() is voltooid, retourneert deze een transactiebevestiging. Deze bevestiging bevat belangrijke informatie over de uitkomst van de transactie:

  • blockHash en blockNumber: waar de transactie is opgenomen;
  • gasUsed: hoeveel gas daadwerkelijk is verbruikt;
  • status: geeft aan of de transactie is geslaagd (1) of mislukt (0).

Controleer altijd de status om zeker te weten dat de contractaanroep naar verwachting is uitgevoerd.

Kennismaken met smart-contractgebeurtenissen

Smart-contractgebeurtenissen zijn een krachtig mechanisme waarmee je contracten informatie kunnen 'uitzenden' naar externe applicaties, zoals je DApp, wanneer er iets belangrijks gebeurt.

Je kunt ze zien als logberichten of meldingen waar DApps naar kunnen luisteren. Ze vormen een kostenefficiënte manier om gegevens vanuit de blockchain te communiceren zonder deze rechtstreeks on-chain op te slaan.

Gebeurtenissen uitzenden in Solidity

In Solidity definieer je eerst een event met de bijbehorende parameters. Vervolgens gebruik je het sleutelwoord emit om de gebeurtenis binnen een functie te activeren. Hier is een eenvoudig voorbeeld:

pragma solidity ^0.8.0;

contract MyContract {
  uint public value;

  // Define an event
  event ValueChanged(address indexed user, uint oldValue, uint newValue);

  function setValue(uint _newValue) public {
    uint _oldValue = value;
    value = _newValue;
    // Emit the event
    emit ValueChanged(msg.sender, _oldValue, _newValue);
  }
}

Luisteren naar gebeurtenissen in je DApp

Je DApp kan zich abonneren op specifieke gebeurtenissen die door een contract worden uitgezonden. Wanneer een gebeurtenis plaatsvindt, ontvangt je DApp de gebeurtenisgegevens, zodat je de gebruikersinterface kunt bijwerken of in realtime andere acties kunt uitvoeren.

Zo voorkom je voortdurend 'pollen' (de blockchain herhaaldelijk om updates vragen), waardoor je DApp efficiënter wordt.

// Assuming 'contract' is an Ethers.js Contract instance

contract.on("ValueChanged", (user, oldValue, newValue, event) => {
  console.log(`Value changed by ${user}`);
  console.log(`From ${oldValue} to ${newValue}`);
  // Update your DApp's UI here, e.g., display the new value
  updateDisplay(newValue);
});

console.log("Listening for ValueChanged events...");

Korte controle: transacties en gebeurtenissen

Wat is het belangrijkste doel van het gebruik van await tx.wait() wanneer je vanuit je DApp een smart-contractfunctie aanroept die de status wijzigt?

Samenvatting en volgende stappen

Je hebt geleerd hoe je je DApps echt interactief maakt!

  • Je kunt nu transacties verzenden om de toestand van de blockchain te wijzigen.
  • Je weet hoe je op bevestiging wacht en transactiebevestigingen verwerkt.
  • Je begrijpt hoe gebeurtenissen van smart contracts realtime-updates aan je DApp leveren.

Deze vaardigheden zijn essentieel voor het bouwen van dynamische en responsieve gedecentraliseerde applicaties. Blijf oefenen om interactie met DApps goed onder de knie te krijgen!

Gratis beginnen

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 “Transacties en events afhandelen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad De basis van Web3- en DApp-ontwikkeling, waaronder “Transacties en events afhandelen”, 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 “Transacties en events afhandelen”?

Leer transacties vanuit uw DApp te verzenden, transactiebevestigingen af te handelen en te luisteren naar events van smart contracts om de gebruikersinterface bij te werken. 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 “Transacties en events afhandelen”?

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

  1. React- en Web3-frameworks
  2. Wallets integreren
  3. Transacties en events afhandelen
← Terug naar De basis van Web3- en DApp-ontwikkeling