Forbindelse til Ethereum (Web3.js/Ethers.js)
Lær at bruge JavaScript-biblioteker som Web3.js eller Ethers.js til at oprette forbindelser mellem en webfrontend og Ethereum-netværket.
Forbindelse til Ethereum (Web3.js/Ethers.js) er en gratis Grundlæggende udvikling af Web3- og DApp-programmer-lektion på CoddyKit. Dette er lektion 2 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.
DApps og Ethereum-forbindelsen
Velkommen til lektionen om at forbinde din DApps frontend med Ethereum-netværket! Ligesom traditionelle applikationer skal kommunikere med en server, skal decentraliserede applikationer (DApps) kunne kommunikere med blockchainen.
Denne kommunikation gør det muligt for din DApp at læse data fra blockchainen, f.eks. kontosaldi, og sende transaktioner, f.eks. overføre tokens eller kalde funktioner i smarte kontrakter.
Web3.js- og Ethers.js-biblioteker
For at bygge bro mellem din webfrontend (skrevet i JavaScript) og Ethereum-blockchainen bruger vi specialiserede biblioteker.
- Web3.js: Det oprindelige JavaScript-bibliotek til interaktion med Ethereum. Det er udbredt og robust.
- Ethers.js: Et mere moderne og let alternativ, som ofte foretrækkes, især til frontendudvikling, og som er kendt for sin overskuelige API.
Begge biblioteker har samme overordnede formål: at gøre det nemt at sende og modtage data fra Ethereum.
Forstå Ethereum-udbydere
Før din DApp kan kommunikere med blockchainen, skal den bruge en udbyder. En udbyder er en abstraktion, der forbinder din DApp med en Ethereum-node.
- Browserpunge (f.eks. MetaMask): De indsætter et udbyderobjekt (
window.ethereum) direkte i din browsers JavaScript-miljø. - Nodeudbydere (f.eks. Infura og Alchemy): Det er tjenester, der kører Ethereum-noder og stiller et API-slutpunkt (URL) til rådighed, som din DApp kan oprette forbindelse til, normalt med skrivebeskyttet adgang eller når en bruger ikke har en browserpung.
Udbyderen håndterer kommunikationen på lavt netværksniveau.
Opsætning med npm
For at bruge Web3.js eller Ethers.js i dit projekt installerer du dem typisk ved hjælp af en pakkehåndtering som npm (Node Package Manager).
Kontrollér først, at Node.js og npm er installeret. Åbn derefter en terminal i projektmappen, og kør en af disse kommandoer:
- Til Web3.js:
npm install web3 - Til Ethers.js:
npm install ethers
Når de er installeret, kan du importere dem i dine JavaScript-filer.
Forbindelse via MetaMask (Web3.js)
Når en bruger har installeret MetaMask, indsætter den window.ethereum. Du kan bruge dette objekt til at oprette en Web3.js-instans og anmode om brugerens tilladelse til at oprette forbindelse til vedkommendes pung.
Sådan initialiserer du typisk Web3.js:
async function connectWeb3() {
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
try {
// Request account access if needed
await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log('Web3.js connected!');
return web3;
} catch (error) {
console.error('User denied account access or error:', error);
}
} else {
console.log('MetaMask not detected! Install it or use a different provider.');
}
return null;
}
// To run this in a browser, you'd call connectWeb3()
// For this runnable example, we'll simulate the connection.
async function main() {
console.log('Simulating Web3.js connection...');
const web3Instance = await connectWeb3(); // This would be called in a browser
if (!web3Instance) {
console.log('Failed to connect Web3.js (simulated).');
} else {
console.log('Web3.js connection successful (simulated)!');
}
}
main();Forbindelse via MetaMask (Ethers.js)
Ethers.js bruger også window.ethereum til at oprette forbindelse til browserpunge. Biblioteket bruger begrebet Web3Provider til at indpakke den indsatte udbyder.
Denne tilgang giver en enkel måde at interagere med brugerens pung og netværket på.
const { ethers } = require('ethers'); // In browser, ethers is global
async function connectEthers() {
if (window.ethereum) {
const provider = new ethers.providers.Web3Provider(window.ethereum);
try {
// Request account access
await provider.send('eth_requestAccounts', []);
console.log('Ethers.js connected!');
return provider;
} catch (error) {
console.error('User denied account access or error:', error);
}
} else {
console.log('MetaMask not detected! Install it or use a different provider.');
}
return null;
}
// To run this in a browser, you'd call connectEthers()
// For this runnable example, we'll simulate the connection.
async function main() {
console.log('Simulating Ethers.js connection...');
const ethersProvider = await connectEthers(); // This would be called in a browser
if (!ethersProvider) {
console.log('Failed to connect Ethers.js (simulated).');
} else {
console.log('Ethers.js connection successful (simulated)!');
}
}
main();Læsning af data: Hent bloknummer
Når forbindelsen er oprettet, kan du nemt læse oplysninger fra blockchainen. Et almindeligt første trin er at hente det aktuelle bloknummer. Det er en skrivebeskyttet handling, hvilket betyder, at den ikke kræver en transaktion eller gas.
Både Web3.js og Ethers.js indeholder enkle metoder til dette.
Hent bloknummer (Web3.js-eksempel)
Sådan henter du det seneste bloknummer ved hjælp af Web3.js, efter at forbindelsen er oprettet:
// This simulates interaction with a Web3 provider.
// In a real DApp, 'web3' would be an instance connected
// to MetaMask or another Ethereum node.
const web3 = {
eth: {
getBlockNumber: async () => {
// Simulate network call delay
await new Promise(resolve => setTimeout(resolve, 500));
return 12345678; // Example block number
}
}
};
async function main() {
console.log("Attempting to get block number with Web3.js...");
const blockNumber = await web3.eth.getBlockNumber();
console.log("Current Block Number (Web3.js):", blockNumber);
}
main();Hent bloknummer (Ethers.js-eksempel)
Her er den tilsvarende handling med Ethers.js:
// This simulates interaction with an Ethers.js provider.
// In a real DApp, 'provider' would be connected to
// MetaMask or another Ethereum node.
const provider = {
getBlockNumber: async () => {
// Simulate network call delay
await new Promise(resolve => setTimeout(resolve, 500));
return 12345679; // Example block number
}
};
async function main() {
console.log("Attempting to get block number with Ethers.js...");
const blockNumber = await provider.getBlockNumber();
console.log("Current Block Number (Ethers.js):", blockNumber);
}
main();Hurtigt tjek: Udbyderens rolle
Hvad er den primære rolle for en Ethereum-udbyder (f.eks. MetaMask eller Infura) i en DApps arkitektur?
Opsummering: Forbindelse til DApps
Godt klaret! I denne lektion har du lært, hvordan DApps opretter forbindelse til Ethereum-netværket.
- Vi undersøgte Web3.js og Ethers.js som vigtige JavaScript-biblioteker til denne interaktion.
- Vi gennemgik begrebet en Ethereum-udbyder (f.eks. MetaMask og Infura) som det nødvendige forbindelsesled til blockchainen.
- Du så, hvordan man konceptuelt opsætter og initialiserer disse biblioteker for at læse grundlæggende blockchain-data som det aktuelle bloknummer.
Nu går vi videre med at bygge en komplet DApp!
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 “Forbindelse til Ethereum (Web3.js/Ethers.js)” gratis?
Ja — alle 3 lektioner i læringssporet Grundlæggende udvikling af Web3- og DApp-programmer, inklusive “Forbindelse til Ethereum (Web3.js/Ethers.js)”, 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 “Forbindelse til Ethereum (Web3.js/Ethers.js)”?
Lær at bruge JavaScript-biblioteker som Web3.js eller Ethers.js til at oprette forbindelser mellem en webfrontend og Ethereum-netværket. 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 2 af 3.
Hvor lang tid tager lektionen “Forbindelse til Ethereum (Web3.js/Ethers.js)”?
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