İlk Web 3.0 Uygulamanızı Oluşturun

React, Solidity, Ethers.js, Hardhat ve Metamask Kullanarak Web 3.0 Uygulaması Nasıl Oluşturulur?

29 Ağustos 2022 220 kez okundu Okuma süresi: 10dk, 5sn

İlk Web 3.0 Uygulamanızı Oluşturun

Web 3.0 becerilerinizi geliştirmek için en büyük yaklaşım, bunları kodlama projeleri oluşturmak için kullanmaktır. Ancak bunları sıfırdan oluşturmak ve farklı kitaplıklar eklemek zor olabilir. Bu nedenle, bu makalede, gelecekteki projelerimiz için bir ortak plaka olarak kullanılabilecek React, Hardhat, Solidity, Ethers.js ve Metamask kullanarak basit bir tam yığın uygulama oluşturacağız.

Git’i Kurma

Git, DevOps tarafından kullanılan bir kaynak kodu yönetim teknolojisidir. Küçük ve son derece büyük projeleri verimli bir şekilde yönetmek için kullanılan ücretsiz ve açık kaynaklı bir sürüm kontrol sistemidir. Bu projede, projedeki tüm değişiklikleri izlemek için Git’i kullanacağız.

Git deposu oluşturma

İlk adım bir git deposu oluşturmak olacaktır. Bu yazıda GitHub kullanacağım ancak GitLab veya Bitbucket gibi benzer servisleri de kullanabilirsiniz.

GitHub web sitesine gidin ve Yeni bir depo oluştur düğmesine tıklayın. Projenizin adını girin, görünürlüğü seçin (Genel veya Özel) ve Depo oluştur düğmesine tıklayın.

Git’i projeye eklemek

Git deposunu oluşturduğumuza göre artık projemize git’i ekleyebiliriz. Bilgisayarınızda yeni bir klasör oluşturun ve bir terminalde açın.

Şimdi tarayıcınıza geri dönün ve varsayılan olarak sağlanan kodu GitHub’daki proje deponuza kopyalayın.

Aşağıdaki koda benzer görünmelidir.

echo "# dapp-boilerplate" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/suhailkakar/dapp-boilerplate.git
git push -u origin main

Terminalinize yapıştırın ve bu kadar, projenize git’i başarıyla eklediniz.

React Kullanarak Ön Uç Kurulumu

Başlamak için, basit bir tepki uygulaması oluşturmak için aşağıdaki komutu kullanabiliriz.

 npx create-react-app ./

Tamamlandığında, klasör yapınız şöyle görünmelidir.


├── README.md
├── README.old.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Artık tepki uygulamamız oluşturulduğuna göre ethers.js, chai ve hardhat gibi bazı paketleri kurabiliriz.

Bu paketleri yarn kullanarak kurmak için aşağıdaki komutu çalıştırın.

yarn add ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers

Şimdilik bu kadar, ethers.js kurulumu için tepki uygulamamıza geri döneceğiz.

Hardhat’ta Ethereum Geliştirme Ortamını Yapılandırma Ardından, Ethereum Geliştirme Ortamını kurmamız gerekiyor, bunun için Hardhat’ı kullanabiliriz.

Terminalinizi açın ve aşağıdaki komutu çalıştırın.

npx hardhat

Tamamlandığında, proje dizininizde oluşturulan yeni dosyaları/klasörleri aşağıda görmelisiniz.

test: Bu klasör Chai ile yazılmış bir test komut dosyası içerir ve akıllı sözleşmemizi test etmek için kullanılır
hardhat.config.js: Bu dosya, Hardhat için yapılandırmayı içerir
scripts: Bu klasör, bir akıllı sözleşmeyi dağıtmak için gösterilecek örnek bir komut dosyası içerir
contracts: Akıllı kontrat kodumuzu yazdığımız dosyaların bulunduğu klasördür.

Hardhat konfigürasyonlarını değiştirme

Şimdi, Hardhat yapılandırma dosyamızda bazı değişiklikler yapmamız gerekiyor. Kod düzenleyicinizde hardhat.config.js dosyasını açın ve module.exports nesnesini aşağıdaki kodla güncelleyin.

module.exports = {
  solidity: "0.8.4",
  networks:{
    hardhat:{
      chainId: 1337,
    }
  },
  paths:{
    artifacts: "./src/artifacts"
  }
};

Yukarıdaki kodda chainId’yi 1337 olarak ekledik. Metamask yapılandırma sorunu nedeniyle. Sözleşmelerimizin derlenmiş hali olan eserlere de yolu ekledik.

Solidity’de Akıllı Sözleşmeler

Ardından, akıllı sözleşmelerimiz var. Akıllı sözleşme, iş mantığını yürüterek olaylara yanıt veren merkezi olmayan bir programdır. Genellikle Solidity ile yazılırlar.

Sözleşmeler klasöründe bulunan Greeter.sol dosyasına bir göz atın.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Greeter {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Greeter with greeting:", _greeting);
        greeting = _greeting;
    }

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
    }
}

Dosyayı satırlara ayıralım ve her birinin üzerinden geçelim.

//SPDX-License-Identifier: Unlicense

pragma solidity ^0.8.0;

Yukarıdaki iki satırda, bu akıllı sözleşme için kullandığımız Lisans ve Solidity sürümüne sahibiz.

Ardından, akıllı sözleşmemizin kodunu içeren bir Greeter sözleşmemiz var.


contract Greeter {
...
...
}

Aşağıdaki satırda, blok zincirinde depolanan özel bir dize bildiriyoruz.

string private greeting;

Ve son olarak, sözleşmemizdeki işlevler, blok zincirinde selamlamanın değerini belirlemek ve onları almak için kullanılır.

Şimdilik akıllı sözleşmemize herhangi bir değişiklik getirmemize gerek yok ve aynı şeyi derleyebiliriz.

Akıllı sözleşmelerimizi Hardhat ile derlemek

Artık örnek akıllı sözleşmeler hakkında iyi bilgiye sahip olduğunuza göre, devam edelim ve bunları derleyelim.

Aşağıdaki komutu kullanarak derleyebilirsiniz:

npx hardhat compile

Komutu çalıştırdıktan sonra, src klasörünüzde artifacts adlı yeni bir dosya görmelisiniz.

Yapıtlar, akıllı sözleşmemizin JSON biçiminde derlenmiş sürümünü içerir. Bu JSON dosyası, abi adlı bir dizi içerir. ABI veya Uygulama İkili Arayüzü, istemcimizi (React uygulaması) derlenmiş akıllı sözleşmemizle bağlamak için ihtiyacımız olan şeydir.

Yerel bir blok zincirinde akıllı bir sözleşme dağıtma

Artık akıllı sözleşmemizi Hardhat kullanarak yerel bir blok zincirine yerleştirebiliriz. Bunu yapmak için önce yerel bir ağa ihtiyacımız var. Yerel bir ağ başlatmak için terminalinizde aşağıdaki kodu çalıştırın.

npx hardhat node

Bu komut ayrıca akıllı sözleşmelerimizi dağıtmak ve test etmek için kullanılabilecek 20 test hesabı ve adresi oluşturur.

Akıllı sözleşmemizi dağıtmak için ihtiyacımız olduğu için bu terminali kapatmayın

Şimdi, scripts klasörünüzde sample-script.js‘yi deploy.js olarak yeniden adlandırın. Ardından, akıllı sözleşmenizi yerel bir ağda dağıtmak için aşağıdaki kodu çalıştırın.

npx hardhat run scripts/deploy.js --network localhost

Başarılı olduysa, aşağıdaki koda benzer bir çıktı görmelisiniz.

❯ npx hardhat run scripts/deploy.js --network localhost

Greeter deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

Daha önce açtığınız terminalden de logları kontrol edebilirsiniz.

Contract deployment: Greeter
  Contract address:    0x5fbdb2315678afecb367f032d93f642f64180aa3
  Transaction:         0x6d6833f7bd9ee1523fa8763120271f11b344d7d1df6ec301275277a33bc697ba
  From:                0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
  Value:               0 ETH
  Gas used:            497026 of 497026
  Block #1:            0x42c4d55bf844eba09393c9e3c0f26ca1a7c8de685d21219926c45389d044c316

  console.log:
    Deploying a Greeter with greeting: Hello, Hardhat!

Yukarıdaki günlüklerde Sözleşme adresi, kullanılan Gaz ve akıllı sözleşmeyi uygulayan kişinin adresi bulunur.

Bir sonraki adım, Metamask’ı Yerel Hardhat Blockchain Düğümümüze bağlamak olacaktır.

Metamask’ı Hardhat Blockchain Düğümüne Bağlama

Metamask uzantısını tarayıcınıza indirip yükleyin ve işe alım sürecini tamamlayın. Tamamlandığında, ağlara tıklayın ve Localhost 8545’i seçin.

Ağlara tıklayın ve Localhost 8545’i seçin

Bunu yaptıktan sonra Metmask’teki avatar resmine tıklayın ve “Hesabı İçe Aktar”ı seçin.

Metmask’ta avatar resmine tıklayın ve “Hesabı İçe Aktar”ı seçin

Terminalinizde oturum açmış olan hesaptan herhangi bir özel anahtarı kopyalayın ve Metamask’a aktarın.

İşte bu kadar, yerel blok zincirimizi Metamask’a bağladık.

Metamask Kullanarak Akıllı Sözleşmeyle Ön Ucu Bağlama

Artık uygulamamızın ön ucunu akıllı bir sözleşme ile bağlamaya başlayabiliriz.

Ana dizininizde, tepki uygulamasını başlatmak için aşağıdaki komutu çalıştırın.

npm start

Artık kullanıcıların tepki uygulamanızda Metamask ile bağlantı kurmasına izin vererek başlayabiliriz.

Metamask ile bağlantı kurun
app.js‘nizdeki kodu aşağıdaki kodla değiştirin

import React, { useEffect } from "react";

export default function App() {
  const connectWallet = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        alert("Please install MetaMask!");
        return;
      }

      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });

      console.log("Connected", accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    connectWallet();
  }, []);

  return <div></div>;
}

Yukarıdaki kodda, uygulama her yüklendiğinde connectWallet işlevini çağıran bir useEffect‘imiz var. Ve pencere nesnesinden Ethereum kullanarak Metamask ile uygulamamıza bağlanıyoruz.

Dosyayı kaydedin ve uygulamanızı yeniden yükleyin, Cüzdan’ı bağlamanızı isteyen bir MetaMask açılır penceresi görmelisiniz.

Akıllı sözleşmeden selamlar getiriliyor

Artık Metamask’ı bağladığımıza göre, sözleşmeden selamları almaya çalışabiliriz.

Ancak bundan önce app.js dosyamızdaki ABI ve ether.js dosyasını içe aktarmamız gerekiyor.

Hesabı aldıktan sonra yeni bir işlevi çağırabilirsiniz ve işte bunun kodu.

const fetchGreetings = async () => {
    let contractAddress = "YOUR_CONTRACT_ADDRESS";
    const { ethereum } = window;

    if (!ethereum) {
      alert("Please install MetaMask!");
      return;
    }

    const provider = new ethers.providers.Web3Provider(ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(
      contractAddress,
      Greeter.abi,
      provider
    );

    const greeting = await contract.greet();
    console.log(greeting);
  };

Yukarıdaki kodda, Metamask’ın kurulu olup olmadığını kontrol ediyoruz ve ardından sağlayıcısını alıyoruz ve ether.js kullanarak sözleşmeyi okuyoruz ve selamları alıyoruz.

Son olarak, app.js‘niz böyle görünmelidir.

import React, { useEffect } from "react";
import Greeter from "./artifacts/contracts/Greeter.sol/Greeter.json";
import { ethers } from "ethers";

export default function App() {
  const connectWallet = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        alert("Please install MetaMask!");
        return;
      }

      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });

      console.log("Connected", accounts[0]);
      fetchGreetings();
    } catch (error) {
      console.log(error);
    }
  };

  const fetchGreetings = async () => {
    let contractAddress = "YOUR_CONTRACT_ADDRESS";
    const { ethereum } = window;

    if (!ethereum) {
      alert("Please install MetaMask!");
      return;
    }

    const provider = new ethers.providers.Web3Provider(ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(
      contractAddress,
      Greeter.abi,
      provider
    );

    const greeting = await contract.greet();
    console.log(greeting);
  };

  useEffect(() => {
    connectWallet();
  }, []);

  return <div></div>;
}

Bir selamlama gönderme işlemi de benzerdir, sadece bu işlevi ether.js kullanarak çağırmanız yeterlidir.

Ve işte bu. Ayrıca son kodunuzu GitHub’a iletebilirsiniz ve diğer projeleriniz için ortak olarak kullanılabilecek temel bir tam yığın uygulamanız olur.