Создайте ваш первый dApp и смарт-контракт

Добрый день, читатели Хабра, представляю перевод статьи по разработке dApp. Приятного чтения.

Мир онлайн-технологий быстро переходит к веб 3.0 (перевод этой статьи можете найти здесь). Похоже, что люди устали от централизованных систем, где их цифровая конфиденциальность ежедневно нарушается огромными организациями. Также хочется найти решение этой проблемы, и веб 3.0, похоже, на данный момент является ответом.
Эта статья в блоге не предназначена для освещения ноу-хау блокчейна и децентрализованных систем. Вместо этого он предназначен для тех, кто хотел бы создать онлайн-решения для пользователей, клиентов и покупателей, чтобы гарантировать им лучшую конфиденциальность и безопасность их данных.
Прояснив это, в данной статье я собираюсь показать вам азбуку того, как создать децентрализованное приложение с нуля и настроить среду разработки. Ниже перечислены некоторые темы, которые мы рассмотрим.

Инструменты
Настройка инструментов
Написание кода

Инструменты

b. Ganache

d. Metamask

Чтобы перейти к делу, я хотел бы вкратце рассказать о вышеупомянутых инструментах.
Первый из них, Truffle Framework, предлагает набор инструментов для разработки смарт-контрактов Ethereum. Он предлагает такие инструменты, как управление смарт-контрактами, развертывание и миграция, управление сетью, консоль разработки и т.д.
Ganache - это персональный блокчейн, который представляет собой локальный блокчейн для разработки, который можно использовать для имитации поведения публичного блокчейна.
Solidity - объектно-ориентированный язык высокого уровня для реализации смарт-контрактов. Узнать больше о Solidity можно тут.
Большинство браузеров в настоящее время не позволяют нам подключаться к сети блокчейн, поэтому я бы использовал расширение Metamask chrome, которое позволит нам подключить наш браузер chrome к сети блокчейн.
Для разработки пользовательского интерфейса или фронт-энда мы будем использовать библиотеку React, которая является одной из наиболее широко используемых библиотек JavaScript среди фронт-эндовых сообществ.
Web3.js - это библиотека JavaScript, которая позволяет нам общаться с блокчейном Ethereum. Она превращает наше приложение React в приложение с поддержкой блокчейна.

Настройка инструментов

Теперь, когда я кратко рассказал о наборе инструментов, которые будут использоваться в этой статье блога, пришло время разобраться и настроить инструменты.
Прежде всего, я хотел бы, чтобы вы скачали Truffle Framework и установили его с помощью следующей команды:

npm install -g truffle

Затем загрузите и установите Ganache. Когда вы это сделаете и откроете его, то увидите следующее окно:

Далее нам понадобится Metamask.
Добавьте расширение Metamask в свой google chrome и перейдите к экрану, на котором появится что-то вроде следующего. Для того чтобы настроить Metamask, пожалуйста, посмотрите эту статью.

Написание кода

Теперь, когда инструменты настроены, перейдем к следующему шагу - написанию смарт-контрактов. Для этого откройте терминал и создайте папку в папке projects с помощью следующей команды:

mkdir blockchain

Теперь создайте папку внутри папки blockchain с помощью следующих команд:

cd blockchain

mkdir contracts

cd contracts

Теперь выполните приведенную ниже команду для создания проекта truffle, который позволит нам разрабатывать смарт-контракты:

truffle init

Выполнив вышеуказанную команду, вы должны получить результат, как показано ниже:

Теперь откройте ваш проект truffle в вашем любимом текстовом редакторе. Я собираюсь использовать Sublime Text. Вы должны увидеть следующую структуру папок и файлов:

В папке contracts мы будем писать наши смарт-контракты.
В папке migrations мы будем мигрировать наши вновь созданные смарт-контракты.
В папке test мы обычно пишем тесты для проверки нашего смарт-контракта, однако это выходит за рамки данной статьи, поэтому мы не будем углубляться в эту тему. Я бы настоятельно рекомендовал писать тесты для ваших смарт-контрактов перед их развертыванием на публичных узлах блокчейна.
Файл truffle-config.js содержит всю конфигурацию проекта truffle.
Теперь давайте напишем наш смарт-контракт. Создайте новый файл и назовите его contacts.sol в папке contracts. Теперь откройте этот файл и напишите в нем следующий код:

pragma solidity >=0.4.22 <0.9.0;

Это всегда должна быть первая строка в файле смарт-контракта. Этим мы указываем версию Solidity.
Теперь давайте создадим наш первый смарт-контракт:

pragma solidity >=0.4.22 <0.9.0;

contract Contacts {
  
}

Мы можем написать смарт-контракт, используя ключевое слово contract, за которым следует название контракта, в данном случае Contacts.
Теперь, чтобы отслеживать количество контактов внутри нашего смарт-контракта, мы создадим переменную состояния.

pragma solidity >=0.4.22 <0.9.0;

contract Contacts {
  uint public count = 0; // state variable
}

Это специальная переменная, и любые данные, которые мы записываем в эту переменную, будут храниться в хранилище блокчейна. Мы используем специальное ключевое слово-модификатор, т.е. public, чтобы иметь доступ к этой переменной за пределами смарт-контракта. Затем мы присваиваем этой переменной значение 0.
Теперь у нас есть переменная состояния, и в ней есть значение. Давайте перейдем к фронт-энду и попробуем сначала получить доступ к этой публичной переменной состояния. С помощью этого подхода мы установим связь между приложением React и нашим смарт-контрактом.
Выполните следующие команды в папке blockchain, чтобы создать приложение React.

npx create-react-app contacts

cd contacts

если используете yarn

yarn add web3

если используете npm

npm install web3

Как вы можете видеть, мы также добавили web3.js в качестве зависимости для этого проекта, чтобы наше приложение react взаимодействовало с нашим смарт-контрактом.
Теперь откройте папку contacts в вашем любимом редакторе. Я использую Sublime Text.
Мы не будем настраивать структуру папок и реализовывать сложную архитектуру, потому что это выходит за рамки данной статьи в блоге.
Мы напишем весь наш код в файле App.js. Поэтому откройте этот файл в редакторе.
Напишите приведенный ниже код в файле App.js:

import { useEffect, useState } from 'react';
import Web3 from 'web3';

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

Мы импортируем пару хуков из React и Web3 из Web3.js. Теперь создадим переменную состояния, как показано ниже:

import { useEffect, useState } from 'react';
import Web3 from 'web3';

function App() {
  const [account, setAccount] = useState(); // state variable to set account.
  return (
    <div>
    </div>
  );
}

export default App;

Теперь внутри хука useEffect мы создадим наш смарт-контракт, как показано ниже:

import { useEffect, useState } from 'react';
import Web3 from 'web3';

function App() {
  const [account, setAccount] = useState(); // state variable to set account.
  
  useEffect(() => {
    async function load() {
      const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');
      const accounts = await web3.eth.requestAccounts();
      
      setAccount(accounts[0]);
    }
    
    load();
   }, []);
  
   return (
     <div>
       Your account is: {account}
     </div>
   );
}

export default App;

Теперь, чтобы успешно запустить эту клиентскую часть, нам нужно сделать несколько шагов в бэкенде. Давайте вернемся в папку contracts. Во-первых, откройте файл truffle-config.js и добавьте следующие свойства:

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*"
    }
  },
  compilers: {
    solc: {
      optimizer: {
        enabled: true,
        runs: 200
      }
    }
  }
}

Теперь внутри папки migrations создайте новый файл и назовите его 2_deploy_contracts.js и вставьте приведенный ниже код:


const Contacts = artifacts.require("./Contacts.sol");

module.exports = function(deployer) {
  deployer.deploy(Contacts);
};

Теперь в терминале введите приведенный ниже код для миграции вашего контракта:

truffle migrate

Вы должны увидеть результат, подобный приведенному ниже:

Теперь вернитесь в папку фронт-энда (папка contracts) и выполните приведенную ниже команду для запуска приложения:

yarn start

или

npm start

Это откроет ваше приложение React в браузере и запустит Metamask для взаимодействия с вашей блокчейн-сетью. Вы должны увидеть экран, как показано ниже:

В открывшемся окне нажмите кнопку Next, и перед вами откроется следующее окно.

Теперь нажмите кнопку Connect. После этого в вашем браузере должно появиться сообщение с номером вашего счета, как показано ниже:

Теперь, когда мы успешно подключились к нашему смарт-контракту и получили идентификатор счета. Давайте приступим к созданию новой функции внутри нашего смарт-контракта для получения списка контактов и передачи его на фронт-энд, чтобы отобразить их на экране.
Вернемся в папку contracts, откроем файл Contracts.sol и добавим следующую функцию.

pragma solidity >=0.4.22 <0.9.0;

contract Contacts {
  uint public count = 0; // state variable
  
  struct Contact {
    uint id;
    string name;
    string phone;
  }
  
  constructor() public {
    createContact('Zafar Saleem', '123123123');
  }
  
  mapping(uint => Contact) public contacts;
  
  function createContact(string memory _name, string memory _phone) public {
    count++;
    contacts[count] = Contact(count, _name, _phone);
  }
}

Теперь снова мигрируйте этот контракт, поскольку мы внесли в него изменения, так как смарт-контракты иммутабельны.

truffle migrate

Теперь давайте вернемся к фронт-энду, то есть к папке contacts. Создайте новый файл config.js внутри папки src/ и вставьте в него приведенный ниже код.

export const CONTACT_ADDRESS = '0xfAd567EBdCb36f49F3a509FEDF9e72E3ad75ca59';

export const CONTACT_ABI = [
  {
    "constant": true,
    "inputs": [],
    "name": "count",
    "outputs": [
      {
        "name": "",
        "type": "uint256"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function",
    "signature": "0x06661abd"
  },
  {
    "constant": true,
    "inputs": [
      {
        "name": "",
        "type": "uint256"
      }
    ],
    "name": "contacts",
    "outputs": [
      {
        "name": "id",
        "type": "uint256"
      },
      {
        "name": "name",
        "type": "string"
      },
      {
        "name": "phone",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function",
    "signature": "0xe0f478cb"
  },
  {
    "inputs": [],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "constructor",
    "signature": "constructor"
  },
  {
    "constant": false,
    "inputs": [
      {
        "name": "_name",
        "type": "string"
      },
      {
        "name": "_phone",
        "type": "string"
      }
    ],
    "name": "createContact",
    "outputs": [],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function",
    "signature": "0x3dce4920"
  }
];

Теперь импортируйте адрес смарт-контракта и ABI в файл App.js, как показано ниже, а также обновите функцию load следующим кодом:

import { useEffect, useState } from 'react';
import Web3 from 'web3';
import { CONTACT_ABI, CONTACT_ADDRESS } from './config';

function App() {
  const [account, setAccount] = useState();
  const [contactList, setContactList] = useState();
  const [contacts, setContacts] = useState([]);

  useEffect(() => {
    async function load() {
      const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');
      const accounts = await web3.eth.requestAccounts();
      setAccount(accounts[0]);
      // Instantiate smart contract using ABI and address.
      const contactList = new web3.eth.Contract(CONTACT_ABI, CONTACT_ADDRESS);
      // set contact list to state variable.
      setContactList(contactList);
      // Then we get total number of contacts for iteration
      const counter = await contactList.methods.count().call();
      // iterate through the amount of time of counter
      for (var i = 1; i <= counter; i++) {
        // call the contacts method to get that particular contact from smart contract
        const contact = await contactList.methods.contacts(i).call();
        // add recently fetched contact to state variable.
        setContacts((contacts) => [...contacts, contact]);
      }
    }
    
    load();
  }, []);
  
  return (
    <div>
      Your account is: {account}
    </div>
  );
}

export default App;

Приведенный выше код получит все контакты из нашего смарт-контракта и установит их в переменную состояния contacts. Код очень хорошо прокомментирован и объяснен.
Теперь давайте отобразим все контакты через тэг ul, как показано ниже.

import { useEffect, useState } from 'react';
import Web3 from 'web3';
import { CONTACT_ABI, CONTACT_ADDRESS } from './config';

function App() {
  const [account, setAccount] = useState();
  const [contactList, setContactList] = useState();
  const [contacts, setContacts] = useState([]);
  
  useEffect(() => {
    async function load() {
      const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');
      const accounts = await web3.eth.requestAccounts();
      setAccount(accounts[0]);
      // Instantiate smart contract using ABI and address.
      const contactList = new web3.eth.Contract(CONTACT_ABI, CONTACT_ADDRESS);
      // set contact list to state variable.
      setContactList(contactList);
      // Then we get total number of contacts for iteration
      const counter = await contactList.methods.count().call();
      // iterate through the amount of time of counter
      for (var i = 1; i <= counter; i++) {
        // call the contacts method to get that particular contact from smart contract
        const contact = await contactList.methods.contacts(i).call();
        // add recently fetched contact to state variable.
        setContacts((contacts) => [...contacts, contact]);
      }
    }
    
    load();
    
  }, []);
  
  return (
    <div>
      Your account is: {account}
      <h1>Contacts</h1>
      <ul>
      {
        Object.keys(contacts).map((contact, index) => (
          <li key={`${contacts[index].name}-${index}`}>
            <h4>{contacts[index].name}</h4>
            <span><b>Phone: </b>{contacts[index].phone}</span>
          </li>
        ))
      }
      </ul>
    </div>
  );
}

export default App;

Как вы можете увидеть обновленный код внутри return - отображает информацию о контакте. Вы должны увидеть что-то вроде следующего:

Если вы видите именно это, то поздравляем, вы только что создали свой первый dApp со смарт-контрактом и веб-приложением, которое взаимодействует с вашим смарт-контрактом на блокчейне.
Теперь, когда вы знаете, как получать информацию из смарт-контракта, продолжайте совершенствовать его, добавляя новые контакты, обновляя их и удаляя с помощью полных CRUD-операций.
На этом в данной статье все. Весь проект можно найти в репозитории.

Ниже приведены профили в социальных сетях, если захотите связаться с автором статьи.

Linkedin | Github | Gitlab | Website

Создание реального приложения dApp с помощью React, Solidity и Web3.js