Łączenie z Ethereum (Web3.js/Ethers.js)
Naucz się używać bibliotek JavaScript, takich jak Web3.js lub Ethers.js, do łączenia frontendu internetowego z siecią Ethereum.
Łączenie z Ethereum (Web3.js/Ethers.js) to bezpłatna lekcja Web3 & DApp Development Fundamentals na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web3 & DApp Development Fundamentals, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web3 & DApp Development Fundamentals zawiera 3 lekcji w sumie.
Aplikacje DApp i połączenie z Ethereum
W tej części połączą Państwo interfejs aplikacji DApp z siecią Ethereum! Tak jak tradycyjne aplikacje muszą komunikować się z serwerem, tak zdecentralizowane aplikacje (DApp) potrzebują sposobu komunikowania się z blockchainem.
Ta komunikacja pozwala aplikacji DApp odczytywać dane z blockchaina, takie jak salda kont, oraz wysyłać transakcje, na przykład przelewy tokenów lub wywołania funkcji smart kontraktów.
Biblioteki Web3.js i Ethers.js
Aby połączyć webowy interfejs użytkownika (napisany w JavaScript) z blockchainem Ethereum, używamy specjalistycznych bibliotek.
- Web3.js: Oryginalna biblioteka JavaScript do interakcji z Ethereum. Jest szeroko stosowana i niezawodna.
- Ethers.js: Nowocześniejsza, lżejsza i często preferowana alternatywa, szczególnie w tworzeniu interfejsów użytkownika, znana z przejrzystego API.
Obie biblioteki służą temu samemu: ułatwiają wysyłanie danych do Ethereum i odbieranie ich z tej sieci.
Zrozumienie providerów Ethereum
Zanim aplikacja DApp będzie mogła komunikować się z blockchainem, potrzebuje providera. Provider to warstwa abstrakcji łącząca aplikację DApp z węzłem Ethereum.
- Portfele przeglądarkowe (np. MetaMask): Wstrzykują obiekt providera (
window.ethereum) bezpośrednio do środowiska JavaScript przeglądarki. - Providery węzłów (np. Infura, Alchemy): Są to usługi uruchamiające węzły Ethereum i udostępniające punkt końcowy API (URL), z którym aplikacja DApp może się połączyć — zwykle w celu uzyskania dostępu tylko do odczytu lub gdy użytkownik nie ma portfela przeglądarkowego.
Provider obsługuje niskopoziomową komunikację sieciową.
Konfiguracja za pomocą npm
Aby używać Web3.js lub Ethers.js w swoim projekcie, zazwyczaj instaluje się je za pomocą menedżera pakietów, takiego jak npm (Node Package Manager).
Najpierw należy upewnić się, że Node.js i npm są zainstalowane. Następnie w katalogu projektu należy otworzyć terminal i uruchomić jedno z poniższych poleceń:
- Web3.js:
npm install web3 - Ethers.js:
npm install ethers
Po instalacji można zaimportować je do plików JavaScript.
Łączenie przez MetaMask (Web3.js)
Gdy użytkownik ma zainstalowany MetaMask, wstrzykuje on obiekt window.ethereum. Obiektu tego można użyć do utworzenia instancji Web3.js i poproszenia użytkownika o zgodę na połączenie z jego portfelem.
Web3.js zazwyczaj inicjalizuje się w następujący sposób:
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();Łączenie przez MetaMask (Ethers.js)
Ethers.js również używa window.ethereum do łączenia się z portfelami przeglądarkowymi. Wykorzystuje pojęcie Web3Provider, aby opakować wstrzykniętego providera.
Takie podejście zapewnia przejrzysty sposób interakcji z portfelem użytkownika i siecią.
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();Odczytywanie danych: pobieranie numeru bloku
Po nawiązaniu połączenia można łatwo odczytywać informacje z blockchaina. Częstym pierwszym krokiem jest pobranie numeru bieżącego bloku. Jest to operacja tylko do odczytu, więc nie wymaga transakcji ani gazu.
Zarówno Web3.js, jak i Ethers.js udostępniają proste metody do wykonania tej operacji.
Pobieranie numeru bloku (przykład z Web3.js)
Po nawiązaniu połączenia najnowszy numer bloku można pobrać za pomocą Web3.js w następujący sposób:
// 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();Pobieranie numeru bloku (przykład z Ethers.js)
Oto odpowiednik tej operacji z użyciem 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();Szybkie sprawdzenie: rola providera
Jaka jest główna rola providera Ethereum (takiego jak MetaMask lub Infura) w architekturze aplikacji DApp?
Podsumowanie: łączenie aplikacji DApp
Świetna praca! W tej lekcji nauczyli się Państwo, jak aplikacje DApp łączą się z siecią Ethereum.
- Omówiliśmy Web3.js i Ethers.js jako najważniejsze biblioteki JavaScript służące do tej interakcji.
- Poznaliśmy pojęcie providera Ethereum (np. MetaMask, Infura) jako niezbędnego łącznika z blockchainem.
- Zobaczyli Państwo, jak koncepcyjnie skonfigurować i zainicjalizować te biblioteki, aby odczytywać podstawowe dane blockchaina, takie jak numer bieżącego bloku.
Następnie zajmiemy się dokładniej tworzeniem kompletnej aplikacji DApp!
Ucz się Web3 & DApp Development Fundamentals dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 29
- Lekcje
- 105
Często zadawane pytania
Czy lekcja „Łączenie z Ethereum (Web3.js/Ethers.js)” jest bezpłatna?
Tak — pełny tekst „Łączenie z Ethereum (Web3.js/Ethers.js)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web3 & DApp Development Fundamentals, przejdź na CoddyKit PRO. Kurs Web3 & DApp Development Fundamentals zawiera 3 lekcji w sumie.
Co nauczysz się w „Łączenie z Ethereum (Web3.js/Ethers.js)”?
Naucz się używać bibliotek JavaScript, takich jak Web3.js lub Ethers.js, do łączenia frontendu internetowego z siecią Ethereum. Ćwiczysz Web3 & DApp Development Fundamentals z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web3 & DApp Development Fundamentals?
Nie wymagamy żadnego doświadczenia. Web3 & DApp Development Fundamentals w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.
Ile czasu zajmuje lekcja „Łączenie z Ethereum (Web3.js/Ethers.js)”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web3 & DApp Development Fundamentals?
Tak. Każda lekcja Web3 & DApp Development Fundamentals zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Frontend i backend w Web3
- Łączenie z Ethereum (Web3.js/Ethers.js)
- Podstawowy przykład DApp