Пошаговое руководство по созданию вашего первого децентрализованного приложения Web3: создание торговой площадки NFT для крикета…

Введение

Технология Web3 произвела революцию в мире децентрализованных приложений (DApps) и невзаимозаменяемых токенов (NFT). В этом руководстве мы познакомим вас с созданием вашего первого DApp Web3, торговой площадки NFT для коллекционирования крикета, с использованием Solidity, Truffle и React. Это руководство предназначено для полных новичков; мы предоставим подробные пояснения и примеры кода, чтобы обеспечить беспроблемное обучение.

Предпосылки:

Базовое понимание JavaScript и HTML.
Node.js и NPM установлены в вашей системе.

Шаг 1: Настройка среды разработки

1.1 Установите Truffle: Truffle — это среда разработки для Ethereum, которая упрощает процесс разработки и тестирования. Чтобы установить Truffle, выполните следующую команду:

npm install -g truffle

1.2 Создайте новый проект Truffle:

mkdir cricket-nft-marketplace
cd cricket-nft-marketplace
truffle init

Шаг 2: Написание смарт-контракта

2.1 Создайте новый файл «CricketCollectible.sol» в папке «contracts»:

touch contracts/CricketCollectible.sol

2.2 Напишите смарт-контракт, используя Solidity:

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

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
contract CricketCollectible is ERC721 {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    constructor() ERC721("CricketCollectible", "CRICK") {}
    function mintCollectible(address recipient, string memory tokenURI) public returns (uint256) {
        _tokenIds.increment();
        uint256 newItemId = _tokenIds.current();
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);
        return newItemId;
    }
}

Шаг 3: Компиляция и развертывание смарт-контракта

3.1 Настройка Трюфеля:

Откройте «truffle-config.js» и добавьте следующую конфигурацию:

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*"
    }
  },
  compilers: {
    solc: {
      version: "0.8.0"
    }
  }
};

3.2 Скомпилируйте смарт-контракт:

truffle compile

3.3 Разверните смарт-контракт:

Создайте новый файл «2_deploy_contracts.js» в папке «migrations»:

touch migrations/2_deploy_contracts.js

Добавьте следующий код для развертывания смарт-контракта:

const CricketCollectible = artifacts.require("CricketCollectible");
module.exports = function (deployer) {
  deployer.deploy(CricketCollectible);
};

Шаг 4: Создание внешнего интерфейса

4.1 Настройте React:

npx create-react-app client
cd client
npm install @truffle/contract

4.2 Замените «src/App.js» следующим кодом:

import React, { useState, useEffect } from "react";
import CricketCollectibleArtifact from "../artifacts/CricketCollectible.json";
import getWeb3 from "./getWeb3";

function App() {
  const [web3, setWeb3] = useState(null);
  const [accounts, setAccounts] = useState(null);
  const [contract, setContract] = useState(null);

  useEffect(() => {
    const init = async () => {
      const web3Instance = await getWeb3();
      const accounts = await web3Instance.eth.getAccounts();
      const networkId = await web3Instance.eth.net.getId();
      const deployedNetwork = CricketCollectibleArtifact.networks[networkId];
      const contractInstance = new web3Instance.eth.Contract(
        CricketCollectibleArtifact.abi,
        deployedNetwork && deployedNetwork.address
      );

      setWeb3(web3Instance);
      setAccounts(accounts);
      setContract(contractInstance);
    };

    init();
  }, []);

  const mintCollectible = async () => {
    const tokenId = await contract.methods
      .mintCollectible(accounts[0], "https://path-to-metadata.json")
      .send({ from: accounts[0] });
    console.log("Minted Token ID:", tokenId);
  };

  if (!web3 || !accounts || !contract) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Cricket Collectibles NFT Marketplace</h1>
      <button onClick={mintCollectible}>Mint Collectible</button>
    </div>
  );
}

export default App;

4.3 Создайте новый файл src/getWeb3.js и добавьте следующий код:

import Web3 from "web3";

const getWeb3 = () =>
  new Promise(async (resolve, reject) => {
    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      try {
        await window.ethereum.enable();
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    } else if (window.web3) {
      resolve(window.web3);
    } else {
      reject(new Error("No Ethereum provider detected."));
    }
  });

export default getWeb3;

4.4 Обновите public/index.html, чтобы добавить поддержку MetaMask:

Добавьте следующий код перед закрывающим тегом </head>:

<script async src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider"></script>

Шаг 5: Запуск DApp

5.1 Запустите локальный блокчейн:

Используйте локальный блокчейн, такой как Ganache, для тестирования:

ganache-cli

5.2 Разверните смарт-контракт:

В новом терминале перейдите в папку cricket-nft-marketplace и запустите:

truffle migrate --reset

5.3 Запустите приложение React:

В новом терминале перейдите в папку клиента и запустите:

npm start

Теперь приложение должно работать на http://localhost:3000. Убедитесь, что у вас установлено расширение браузера MetaMask и подключено к вашему локальному блокчейну.

Шаг 6: Развертывание смарт-контракта в общедоступной тестовой сети

6.1 Выберите тестовую сеть:

В этом уроке мы будем использовать тестовую сеть Rinkeby. Вы также можете выбрать развертывание в других тестовых сетях, таких как Ropsten или Kovan.

6.2 Установите и настройте кошелек Ethereum:

Установите браузерное расширение MetaMask и создайте новый кошелек или импортируйте существующий. После настройки кошелька переключитесь на тестовую сеть Rinkeby в настройках MetaMask. Убедитесь, что в вашем кошельке есть тестовый эфир для развертывания. Вы можете получить тестовый эфир из сборщика, такого как Rinkeby Authenticated Faucet (https://faucet.rinkeby.io/).

6.3 Настройка Трюфеля:

Установите пакет @truffle/hdwallet-provider для подписи транзакций для развертывания:

npm install @truffle/hdwallet-provider

Обновите файл «truffle-config.js», включив в него конфигурацию сети Rinkeby:

const HDWalletProvider = require("@truffle/hdwallet-provider");

const mnemonic = "your mnemonic phrase here";
const infuraProjectId = "your infura project id here";
module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*"
    },
    rinkeby: {
      provider: () => new HDWalletProvider(mnemonic, `https://rinkeby.infura.io/v3/${infuraProjectId}`),
      network_id: 4,
      gas: 4500000,
      gasPrice: 10000000000
    }
  },
  compilers: {
    solc: {
      version: "0.8.0"
    }
  }
};

Замените «ваша мнемоническая фраза здесь» на мнемоническую фразу вашего кошелька MetaMask, а «ваш идентификатор проекта infura здесь» — на идентификатор вашего проекта Infura.

6.4 Развертывание в тестовой сети Rinkeby:

Выполните следующую команду, чтобы развернуть смарт-контракт в тестовой сети Rinkeby:

truffle migrate --network rinkeby

Эта команда скомпилирует и развернет ваш смарт-контракт в тестовой сети Rinkeby с помощью Infura API.

6.5 Обновите интерфейс:

Измените файл «src/App.js», чтобы использовать сеть Rinkeby:

useEffect(() => {
  const init = async () => {
    const web3Instance = await getWeb3();
    const accounts = await web3Instance.eth.getAccounts();
    const networkId = await web3Instance.eth.net.getId();
    const deployedNetwork = CricketCollectibleArtifact.networks[networkId];
    const contractInstance = new web3Instance.eth.Contract(
      CricketCollectibleArtifact.abi,
      deployedNetwork && deployedNetwork.address
    );
// Update this line to use Rinkeby network ID (4)
    if (networkId !== 4) {
      alert("Please switch to the Rinkeby test network.");
      return;
    }
    setWeb3(web3Instance);
    setAccounts(accounts);
    setContract(contractInstance);
  };
  init();
}, []);

Теперь ваше DApp готово к взаимодействию со смарт-контрактом, развернутым в тестовой сети Rinkeby. Убедитесь, что ваш MetaMask подключен к сети Rinkeby и имеет тестовый эфир для выполнения транзакций.

Заключение:

В этом руководстве мы предоставили пошаговое руководство по созданию торговой площадки NFT для коллекционирования крикета с использованием Web3, Solidity, Truffle и React. Выполнив эти шаги, у вас должно получиться работающее DApp, в котором пользователи смогут создавать коллекционные NFT для крикета. Вы можете расширить этот проект, добавив дополнительные функции, такие как покупка, продажа или обмен предметами коллекционирования.

материалы по теме:

Новые материалы

Кластеризация: более глубокий взгляд

Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме

Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности

Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest

Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)

Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении

В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot

В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..

Machine Learning JavaScript Blockchain Artificial Intelligence Data Science Cryptocurrency Software Development Python Web Development Coding Deep Learning AI Bitcoin React Software Engineering Ethereum Web3 Business Crypto Nodejs Solidity Development Front End Development Data Finance Money Java Trading Typescript Smart Contracts Productivity Tech Startup Investing Neural Networks Developer Computer Science NLP