In deze zelfstudie zullen we leren hoe we een eenvoudige ethereum-dApp kunnen bouwen met een frontend die samenwerkt met een slim Solidity-contract met behulp van de Ethers.js-bibliotheek. Deze tutorial is een voortzetting van de Solidity Tutorial serie. Indien u nog niet vertrouwd bent met het schrijven van slimme contracten in Solidity, raden we u aan te starten met de handleiding Hoe u uw eerste Smart Contract bouwt en pas daarna verder te gaan met dit artikel.
Inleiding
Een slim contract is een functie die enkel op de blockchain wordt geïmplementeerd en uitgevoerd als aan een specifieke voorwaarde wordt voldaan. Er zijn verschillende manieren waarop we kunnen communiceren met ons geïmplementeerde slimme contract op de blockchain. Eén manier is door de Ethers.js-bibliotheek te gebruiken om onze dApp-frontend te verbinden met ons slimme contract, dat als backend fungeert. In dit artikel gaan we een slim contract schrijven en implementeren dat de naam van een huisdier, de naam van de eigenaar en de leeftijd accepteert. We halen ook de details van het huisdier uit het slimme contract met behulp van een getterfunctie van ons front-endproject.
Demo
Hieronder vindt u de demovideo van de pet-dApp waaraan we zullen werken:
Vereisten
Voordat u verdergaat met deze zelfstudie, moet u beschikken over: Basiskennis van HTML en CSS, Een grondig begrip van functies en de DOM in JavaScript, Een basiskennis van Solidity, die u hier kunt vinden. Andere technologieën die in deze zelfstudie worden gebruikt, zijn onder meer de Ethers.js-bibliotheek, Remix IDE, en Metamask.
De dApp bouwen
Ons project omvat twee delen: de backend, waarin we ons Solidity smart contract op het Goerli Testnet zullen schrijven en implementeren; en de frontend, waar we onze dApp-interface zullen bouwen met HTML en CSS en communiceren met ons geïmplementeerde slimme contract met behulp van JavaScript met Ethers.js.
Bouwen aan de backend
In dit deel gaan we ons Solidity smart contract schrijven en implementeren op het Goerli Testnet met behulp van Remix IDE en Metamask.
Stap 1 – Solidity IDE (Remix)
Remix IDE is een webgebaseerde Solidity-compiler. Hiermee kunnen we ons Solidity smart contract rechtstreeks vanuit onze browser schrijven, testen en implementeren zonder configuraties of instellingen. We gaan de Remix IDE gebruiken om ons smart-contract voor huisdieren te schrijven en te implementeren. Klik hier om Remix IDE in uw browser te starten.
Stap 2 – Schrijven van het slimme contract
Navigeer naar de contracts map onder de File Explorers van Remix en maak daar een nieuw bestand met de naam Pet_Contract.sol. Kopieer en plak het Solidity smart contract hieronder in het Pet_Contract.sol-bestand:
pragma solidity ^0.8.13;
contract Pet_Contract {
string public petName;
string public petOwner;
string public petAge;
function setPet(
string memory newPetName,
string memory newPetOwner,
string memory newPetAge
) public {
petName = newPetName;
petOwner = newPetOwner;
petAge = newPetAge;
}
function getPet(
) public view returns (
string memory,
string memory,
string memory
) {
return (petAge, petName, petOwner);
}
}
Het bovenstaande slimme contract is een wijziging van het eerste slimme contract dat we hebben geschreven. Hier maken we een setPet-functie die drie parameters accepteert, namelijk petName, petOwner, en petAge, en deze opslaat in het geheugen wanneer we de setPet functie aanroepen. De getPet functie retourneert de huidige waarden van de Statetaken van ons slimme contract in ons geheugen. De volledige uitsplitsing van het slimme contract kan hier worden gevonden.
Stap 3 – Het slimme contract compileren
Volg de onderstaande stappen om uw Solidity smart contract te compileren op de Remix IDE.
Zorg ervoor dat u uw bronbestand opslaat met ctrl + s. Navigeer vervolgens naar het gedeelte “Solidity Compiler”. Selecteer de versie van de compiler die overeenkomt met de versie die is opgegeven in ons slimme contract (als u dit niet doet, wordt het groene vinkje rood). Zorg er vervolgens voor dat u uw bestand opslaat en klik op de knop “Compileren”.
Stap 4 – Goerli Testnet-token verkrijgen
Nu we ons pet smart contract succesvol hebben samengesteld (zie Stap 3) en we enkele nep-ETH-tokens hebben toegevoegd aan onze Metamask-portemonnee om de gasvergoedingen te betalen, kunnen we nu ons slimme contract inzetten op het Goerli-testnetwerk.
Volg de onderstaande stappen om een gratis Goerli Testnet token toe te voegen aan uw Metamask-portemonnee.
1.Installeer Metamask als je dat nog niet hebt gedaan.
2.Navigeer vervolgens naar kranen.chain.link.
3.Maak verbinding met uw Metamask-portemonnee.
4.Zorg ervoor dat u overschakelt naar het Goerli Test-netwerk op uw Metamask.
5.Los de captcha op en klik op de knop “Send 0.1 test ETH”.
6.Wacht tot de transactie is bevest
