Привет хабр! Недавно заметил, что на рускоязычную аудиторию очень мало туториялов чтобы войти в мир блокчейна и разрабатывать там. Решил поделиться статьей про смарт-контракты на Ethereum. Эта статья очень помогла мне когда-то, вникнуть в мир блокчейна и разрабатывать там смарт контракты. Оригинал статьи по этой ссылке.

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

Если компания сама обманывает некоторые транзакции и получает деньги, как вы узнаете, что вас обманули?

Именно здесь децентрализованная установка является оптимальным решением.
Если нет третьей стороны, продавцы могут зарабатывать больше безопасным способом.

Список функций

1. Создание аукциона

2. Размещение ставки

3. Завершение аукциона

Инструменты

1. Смарт-контрактSolidity , Remix , Metamask

2. FrontendWeb3.js , Vue.js , Вью-кли , Boostrap-вю

Предпосылки

1. Начало работы с MetaMask

2. Компиляция и развертывание с использованием Remix IDE

3. Введение в смарт-контракты и надежность

Github

Если вы хотите увидеть только код, вы можете найти его здесь:
https://github.com/openberry-ac/Auction

Зачем создавать приложение для аукционов?

Аукционная система - хорошее приложение для изучения смарт-контрактов и децентрализованных приложений, особенно для начинающих.

Смарт-контракты помогут вам обменивать деньги, собственность, акции или что-либо ценное прозрачным и бесконфликтным способом, избегая при этом услуг посредников, таких как система аукционов.

Создание проекта

Рабочий процесс

1. Создание смарт-контракта

2. Создание веб-приложения и настройка Web3.js

3. Определение методов: кодирование во внешнем интерфейсе

Создание смарт-контракта

Поскольку наш контракт будет основан на Ethereum, мы будем использовать Solidity , язык программирования, используемый для создания смарт-контрактов.

В Remix создайте новый файл с именем AuctionBox.sol и добавьте следующий код:

// AuctionBox.sol
// We will be using Solidity version 0.5.3
pragma solidity 0.5.3;
// Importing OpenZeppelin's SafeMath Implementation
import "https://github.com/OpenZeppelin/openzeppelin-solidity/contracts/math/SafeMath.sol";

contract AuctionBox{
    
    Auction[] public auctions; 
   
    function createAuction (
        string memory _title,
        uint _startPrice,
        string memory _description
        ) public{
        // set the new instance
        Auction newAuction = new Auction(msg.sender, _title, _startPrice, _description);
        // push the auction address to auctions array
        auctions.push(newAuction);
    }
    
    function returnAllAuctions() public view returns(Auction[] memory){
        return auctions;
    }
}

contract Auction {
    
    using SafeMath for uint256;
    
    address payable private owner; 
    string title;
    uint startPrice;
    string description;

    enum State{Default, Running, Finalized}
    State public auctionState;

    uint public highestPrice;
    address payable public highestBidder;
    mapping(address => uint) public bids;
    
    /** @dev constructor to creat an auction
      * @param _owner who call createAuction() in AuctionBox contract
      * @param _title the title of the auction
      * @param _startPrice the start price of the auction
      * @param _description the description of the auction
      */
      
    constructor(
        address payable _owner,
        string memory _title,
        uint _startPrice,
        string memory _description
        
        ) public {
        // initialize auction
        owner = _owner;
        title = _title;
        startPrice = _startPrice;
        description = _description;
        auctionState = State.Running;
    }
    
    modifier notOwner(){
        require(msg.sender != owner);
        _;
    }
    
    /** @dev Function to place a bid
      * @return true
      */
    
    function placeBid() public payable notOwner returns(bool) {
        require(auctionState == State.Running);
        require(msg.value > 0);
        // update the current bid
        // uint currentBid = bids[msg.sender] + msg.value;
        uint currentBid = bids[msg.sender].add(msg.value);
        require(currentBid > highestPrice);
        // set the currentBid links with msg.sender
        bids[msg.sender] = currentBid;
        // update the highest price
        highestPrice = currentBid;
        highestBidder = msg.sender;
        
        return true;
    }
    
    function finalizeAuction() public{
        //the owner and bidders can finalize the auction.
        require(msg.sender == owner || bids[msg.sender] > 0);
        
        address payable recipiant;
        uint value;
        
        // owner can get highestPrice
        if(msg.sender == owner){
            recipiant = owner;
            value = highestPrice;
        }
        // highestBidder can get no money
        else if (msg.sender == highestBidder){
            recipiant = highestBidder;
            value = 0;
        }
        // Other bidders can get back the money 
        else {
            recipiant = msg.sender;
            value = bids[msg.sender];
        }
        // initialize the value
        bids[msg.sender] = 0;
        recipiant.transfer(value);
        auctionState = State.Finalized;
    }
    
    /** @dev Function to return the contents od the auction
      * @return the title of the auction
      * @return the start price of the auction
      * @return the description of the auction
      * @return the state of the auction 
      */    
    
    function returnContents() public view returns(        
        string memory,
        uint,
        string memory,
        State
        ) {
        return (
            title,
            startPrice,
            description,
            auctionState
        );
    }
}

В реальных условиях многие предметы могут быть проданы с аукциона. Чтобы упростить доступ ко всем предметам, выставленным на аукцион, мы создали пакет или коробку под названием «AuctionBox», в которой указаны все адреса аукционов!

Чтобы эта система работала, нам нужно подготовить два типа контрактов, которые называются контрактом аукциона и контрактом AuctionBox.

После написания в Remix разверните его в тестовой сети Ropsten.

Чтобы убедиться, что наш контракт был развернут, вы должны увидеть это в Remix:Здесь нам нужно выбрать контракт AuctionBox .

Создадим аукцион!

После развертывания попробуем провести аукцион методом createAuction .

В случае успеха вы можете нажать returnAllAuctions и увидеть адрес контракта!

Создание веб-приложения

Теперь наш смарт-контракт работает, но просто смотреть на числа неинтересно, поэтому мы создадим простое веб-приложение.

Настройка

Чтобы ускорить процесс, предоставляется шаблонный проект, который можно найти здесь. Теперь давайте выполним следующие команды в вашем терминале (или в командной строке/Powershell для Windows):

# git clone the project template
git clone -b boilerplate --single-branch https://github.com/openberry-ac/Auction.git
# go inside the folder
cd Auction
# install packages needed in the web application
npm install
# install web3, this is for connecting the contract 
npm install -s web3@1.0.0-beta.37
# To run the app
npm run dev

Затем он должен автоматически отображаться на http://localhost:8080/

Настройка web3.js

Откройте файл с именем web3.js в папке контрактов , затем вставьте его как следующий код:

// web3.js
import Web3 from 'web3';

if (window.ethereum) {
  window.web3 = new Web3(ethereum);
  try {
    // Request account access if needed
    ethereum.enable();
  } catch (error) {
    // User denied account access...
  }
} else if (window.web3) { // Legacy dapp browsers...
  window.web3 = new Web3(web3.currentProvider);
} else { // Non-dapp browsers...
  console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
}
console.log(web3);
export default web3;

По сути, это получает web3экземпляр, который инициализирует расширение Metamask, поэтому мы можем использовать его и в нашем приложении. Нам нужно вызвать это позже при получении экземпляра нашего смарт-контракта.

Вы можете встретить всплывающее окно MetaMask в вашем браузере, которое запрашивает разрешение на доступ. Вам нужно просто нажать кнопку «Подключиться» прямо здесь:

Подключение к нашему экземпляру смарт-контракта

Теперь нам нужен ABI нашего смарт-контракта и адрес контракта, чтобы подключить его к нашему веб-приложению. Чтобы получить ABI, вернитесь в Remix , перейдите на вкладку Compile и нажмите ABI рядом с кнопкой Details, как показано на рисунке:

Чтобы получить адрес контракта, перейдите на вкладку « Выполнить » и нажмите кнопку « Копировать» , как показано на рисунке:

Вы также можете получить аукцион контакт ABI путем изменения выбранного контракта на аукцион и нажав ABI.

После того, открыть файлы с именем AuctionBoxInstance.js и AuctionInstance.js в папкe contracts, а затем вставьте его в качестве переменного ABI «s значения и договора адреса, как это:

//AuctionBoxInstance.js
import web3 from './web3';

const address = ''// THE CONTRACT ADDRESS
const abi = []// THE ABI

const instance = new web3.eth.Contract(abi, address);

export default instance;

// AuctionInstance.js
import web3 from './web3';

const abi = []// THE ABI
// Here is just only abi because we haven't created auction yet.
export default (address) => {
  const instance = new web3.eth.Contract(abi, address);
  return instance;
};

Определение методов

Вы могли заметить, что пользовательский интерфейс есть, но кнопки не работают. Это потому, что мы еще не определили наши функции, чем мы сейчас займемся. Откройте App.vue в папке src и приступим к заполнению пробелов!

beforeMount

Здесь мы получим количество аукционов, которые вы создали ранее.

// App.vue
beforeMount() {
  // get auctionBox method: returnAllAuctions()
  auctionBox.methods
    .returnAllAuctions()
    .call()
    .then((auctions) => {
      console.log(auctions);
      // set the amount of auctions
      this.amount = auctions.length;
    });
},

Создать функцию аукциона

Здесь мы создаем аукцион, используя данные пользователя, которые будут показаны внизу страницы.

// App.vue
createAuction() {
  // get accounts
  web3.eth.getAccounts().then((accounts) => {
    // convert 'ether' to 'wei'
    const startPrice = web3.utils.toWei(this.startPrice, 'ether');
    // createAuction in AuctionBox contract
    this.isLoad = true;
    return auctionBox.methods.createAuction(this.title, startPrice, this.description)
      .send({ from: accounts[0] });
  }).then(() => {
    // initialize forms
    this.isLoad = false;
    this.title = '';
    this.startPrice = '';
    this.description = '';
    // get the previous auction
    return auctionBox.methods.returnAllAuctions().call();
  }).then((auctions) => {
    const index = auctions.length - 1;
    console.log(auctions[index]);
    // get the contract address of the previous auction
    this.auctionAddress = auctions[index];
    // set the address as the parameter
    const auctionInstance = auction(auctions[index]);
    return auctionInstance.methods.returnContents().call();
  })
    .then((lists) => {
      console.log(lists);
      const auctionlists = lists;
      // convert 'wei' to 'ether'
      auctionlists[1] = web3.utils.fromWei(auctionlists[1], 'ether');
      this.auctionCard = auctionlists;
      // show up the auction at the bottom of the page
      this.isShow = true;
      this.amount += 1;
    })
    .catch((err) => {
      console.log(err);
    });
},

Функция размещения ставки

Здесь мы обрабатываем событие, когда пользователь делает ставку.

// App.vue
handleSubmit() {
  // convert 'ether' to 'wei'
  const bidPriceWei = web3.utils.toWei(this.bidPrice, 'ether');
  // get the wallet adddress
  const fromAddress = web3.eth.accounts.givenProvider.selectedAddress;
  // set the address as the parameter
  const selectedAuction = auction(this.auctionAddress);
  this.isBid = true;
  // placeBid in Auction contract
  selectedAuction.methods
    .placeBid()
    .send({
      from: fromAddress,
      value: bidPriceWei,
    })
    .then(() => {
      this.isBid = false;
      // increase the number of bidders
      this.bidders += 1;
      this.bidPrice = '';
    });
},

Завершить аукцион

Здесь мы обрабатываем событие, при котором пользователь завершает аукцион.

// App.vue
handleFinalize() {
  // get accounts
  web3.eth.getAccounts().then((accounts) => {
    // set the address as the parameter
    const selectedAuction = auction(this.auctionAddress);
    this.isFin = true;
    // finalizeAuction in Auction contract
    selectedAuction.methods
      .finalizeAuction()
      .send({ from: accounts[0] })
      .then(() => {
        this.isFin = false;
        this.finalizeStatus = 'finalized';
      });
  });
},

Мы уже создали аукцион в Remix, адрес его контракта вы можете увидеть в консоли.

В моем случае я создал 9 аукционов, поэтому могу видеть это в консоли:

Завершено !!

Обновите браузер, чтобы увидеть изменения. На этот раз все веб-приложение готово, и все работает! После этого вы сможете использовать его так:

ПРИМЕЧАНИЕ: Тот, кто сделал действие, не может делать ставки на собственном аукционе. Итак, вам нужно переключиться на другую учетную запись (отличную от стартовой), чтобы сделать ставку.

ПРИМЕЧАНИЕ. Чтобы отобразить карточку аукциона, создайте еще один аукцион в своем браузере.

Резюме

Вы узнали, как создать смарт-контракт и как с ним взаимодействовать с помощью web3.js. Вы также узнали, как настроить свой собственный проект с помощью Vue.js, и создали простое приложение.

Ну и что дальше?

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

Если вам нужен полный код этого руководства, вы можете проверить его здесь.