Web3:n ja DApp-sovellusten kehityksen perusteet · Oppitunti

Lompakoiden integrointi

Toteuttakaa lompakkoyhteyden muodostamisen logiikka, jonka avulla käyttäjät voivat yhdistää MetaMaskin tai muun lompakon DApp-sovellukseenne transaktioiden allekirjoittamista varten.

Oppitunti 2/312 vaihetta

Lompakoiden integrointi on ilmainen Web3:n ja DApp-sovellusten kehityksen perusteet-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Web3:n ja DApp-sovellusten kehityksen perusteet-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web3:n ja DApp-sovellusten kehityksen perusteet-kurssilla on yhteensä 3 oppituntia.

Web3:n portti

Hajautetut sovellukset (DApp-sovellukset) tarvitsevat tavan, jolla käyttäjät voivat olla vuorovaikutuksessa lohkoketjun kanssa. MetaMaskin kaltaiset lompakot toimivat tässä tärkeänä siltana halliten kryptografisia avaimia turvallisesti ja allekirjoittaen transaktioita.

Lompakon yhdistäminen antaa DApp-sovelluksellesi mahdollisuuden:

Lukea käyttäjän lohkoketjuosoitteen.
Pyytää käyttäjältä hyväksyntää transaktioille.
Toimia käyttäjän puolesta älysopimusten kanssa.

DApp-sovelluksesi lohkoketjuliittymä

Kun Web3-lompakko, kuten MetaMask, on asennettu käyttäjän selaimeen, se lisää selaimen JavaScript-ympäristöön erityisen objektin: window.ethereum.

Tämä window.ethereum-objekti on DApp-sovelluksesi ensisijainen rajapinta lohkoketjun ja käyttäjän lompakon kanssa viestimiseen. Se tarjoaa API:n pyyntöjen lähettämiseen ja tapahtumien kuuntelemiseen.

Onko lompakko käytettävissä?

Ennen yhteyden muodostamisen yrittämistä DApp-sovelluksen tulee aina tarkistaa, onko window.ethereum olemassa. Jos sitä ei ole, käyttäjällä ei todennäköisesti ole Web3-lompakkoa asennettuna tai se ei ole käytössä.

Voitte tämän jälkeen kehottaa käyttäjää asentamaan sellaisen, yleensä MetaMaskin, joka on yleisin vaihtoehto.

if (window.ethereum) {
  console.log("MetaMask detected!");
} else {
  console.log("Please install MetaMask to use this DApp.");
}

Yhteysluvan pyytäminen

Saadakseen käyttäjän lohkoketjuosoitteen ja mahdollistaakseen transaktioiden allekirjoittamisen DApp-sovelluksen on pyydettävä käyttöoikeutta erikseen. Tämä tehdään käyttämällä metodia eth_requestAccounts window.ethereum-objektin kautta.

Tämä toiminto avaa käyttäjän lompakossa ponnahdusikkunan, jossa pyydetään yhteyden hyväksymistä. Jos käyttäjä hyväksyy pyynnön, metodi palauttaa taulukon tiliosoitteita, yleensä vain yhden.

Yhdistämistoiminnon rakentaminen

Luodaan yksinkertainen JavaScript-funktio käyttäjän lompakon yhdistämistä varten. Tässä koodissa oletetaan, että se suoritetaan selainympäristössä, jossa window.ethereum saattaa olla käytettävissä.

async function connectWallet() {
  if (window.ethereum) {
    try {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log('Connected account:', accounts[0]);
      alert(`Wallet connected! Account: ${accounts[0]}`);
      return accounts[0];
    } catch (error) {
      if (error.code === 4001) {
        console.log('User rejected connection.');
        alert('Connection rejected by user.');
      } else {
        console.error('Connection error:', error);
      }
    }
  } else {
    console.log('MetaMask not detected. Please install it!');
    alert('MetaMask not detected. Please install it to use this DApp.');
  }
  return null;
}

// In a real DApp, you'd call this function, e.g., on a button click:
// connectWallet(); // Uncomment to try connecting immediately

Yhdistetyn tilin näyttäminen

Kun käyttäjä on yhdistänyt lompakkonsa onnistuneesti, metodi eth_requestAccounts palauttaa taulukon hänen yhdistetyistä tileistään. Ensimmäinen tili accounts[0] on yleensä käyttäjän parhaillaan valitsema osoite.

On hyvä käytäntö näyttää tämä osoite DApp-sovelluksen käyttöliittymässä yhteyden vahvistamiseksi käyttäjälle. Voitte myös hakea parhaillaan valitun osoitteen yhteyden muodostamisen jälkeen käyttämällä arvoa window.ethereum.selectedAddress.

Ajantasaisena pysyminen: tilien muutokset

Käyttäjät voivat vaihtaa yhdistettyä tiliään, vaihtaa verkkoa tai jopa katkaista lompakkonsa yhteyden milloin tahansa. DApp-sovelluksen on reagoitava näihin muutoksiin säilyttääkseen tilan johdonmukaisena ja tarjotakseen hyvän käyttökokemuksen.

window.ethereum-objekti lähettää tapahtumia näissä tilanteissa. accountsChanged-tapahtuma on ratkaisevan tärkeä havaittaessa, milloin käyttäjä vaihtaa tiliä tai katkaisee yhteyden.

Tilatapahtumiin reagoiminen

Seuraavassa määritetään tapahtumankuuntelija, joka päivittää DApp-sovelluksen, kun käyttäjä vaihtaa aktiivista tiliään MetaMaskissa. Tämä koodi suoritetaan yleensä sen jälkeen, kun DApp-sovellus on alustettu.

if (window.ethereum) {
  window.ethereum.on('accountsChanged', (accounts) => {
    if (accounts.length === 0) {
      console.log('User disconnected all accounts.');
      alert('Wallet disconnected!');
      // Update UI to 'Not Connected' or prompt to connect
    } else {
      console.log('Switched account to:', accounts[0]);
      alert(`Account changed to: ${accounts[0]}`);
      // Update UI with new account address
    }
  });
  console.log("Listening for 'accountsChanged' events.");
} else {
  console.log("MetaMask not detected, cannot listen for account changes.");
}

Verkon muutoksiin mukautuminen

DApp-sovellukset toimivat usein tietyissä lohkoketjuverkoissa, kuten Ethereum Mainnet- ja Sepolia Testnet -verkoissa. Käyttäjät voivat vaihtaa verkkoa lompakkonsa käyttöliittymän kautta.

DApp-sovelluksen tulee kuunnella chainChanged-tapahtumaa reagoidakseen näihin verkonvaihtoihin. Jos käyttäjä vaihtaa verkkoon, jota ei tueta, voitte kehottaa häntä vaihtamaan takaisin tai poistaa DApp-toiminnot käytöstä siihen asti.

Vinkkejä luotettavaan lompakkointegraatioon

Kun rakennatte luotettavaa ja käyttäjäystävällistä DApp-sovellusta, huomioikaa seuraavat parhaat käytännöt:

Asennuskehotus: Jos window.ethereum puuttuu, tarjotkaa käyttäjille selkeä linkki MetaMaskin asentamista varten.
Käyttäjälle annettava palaute: Näyttäkää käyttöliittymässä aina lataustila tai yhteyden tila.
Virheenkäsittely: Käsitelkää metodin eth_requestAccounts virheet, erityisesti käyttäjän tekemät hylkäykset (error.code === 4001).
Yhdistäminen latauksen yhteydessä: Harkitkaa arvon ethereum.selectedAddress tarkistamista sivun latautuessa, jotta yhteys voidaan muodostaa automaattisesti uudelleen, jos käyttäjä on aiemmin myöntänyt luvan.

Pikatarkistus: lompakon yhdistäminen

DApp-sovellusta rakennettaessa vuorovaikutus käyttäjän lompakon kanssa on olennaista. Tarkastellaan ensimmäisiä vaiheita, jotka DApp-sovelluksen on suoritettava muodostettaessa yhteyttä käyttäjän MetaMask-lompakkoon.

Vastaa interaktiivisessa oppitunnissa

Yhteenveto: lompakoiden integrointi

Tässä oppitunnissa opitte integroimaan MetaMaskin kaltaisen Web3-lompakon DApp-sovellukseenne. Käsittelimme window.ethereum-objektin tarkistamisen, tilin käyttöoikeuden pyytämisen komennolla eth_requestAccounts sekä tärkeiden tapahtumien, kuten accountsChanged-tapahtuman, käsittelyn.

Lompakkointegraation hallitseminen on ratkaisevan tärkeää vuorovaikutteisten ja toimivien hajautettujen sovellusten rakentamisessa. Sen avulla käyttäjät voivat yhdistää identiteettinsä ja allekirjoittaa transaktioita lohkoketjussa.

Aloita maksutta

Opi Web3:n ja DApp-sovellusten kehityksen perusteet tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 29
Oppitunnit: 105

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Lompakoiden integrointi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Web3:n ja DApp-sovellusten kehityksen perusteet-oppimispolun 3 oppituntia, myös oppitunnin “Lompakoiden integrointi”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Web3:n ja DApp-sovellusten kehityksen perusteet-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Lompakoiden integrointi”?

Toteuttakaa lompakkoyhteyden muodostamisen logiikka, jonka avulla käyttäjät voivat yhdistää MetaMaskin tai muun lompakon DApp-sovellukseenne transaktioiden allekirjoittamista varten. Harjoittelet Web3:n ja DApp-sovellusten kehityksen perusteet-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Web3:n ja DApp-sovellusten kehityksen perusteet-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Web3:n ja DApp-sovellusten kehityksen perusteet-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.

Kuinka kauan ”Lompakoiden integrointi”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Web3:n ja DApp-sovellusten kehityksen perusteet-oppitunnilla?

Kyllä. Jokainen Web3:n ja DApp-sovellusten kehityksen perusteet-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Web3:n ja DApp-sovellusten kehityksen perusteet