{"id":315924,"date":"2021-01-03T15:00:35","date_gmt":"2021-01-03T15:00:35","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=315924"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=315924","title":{"rendered":"Ethereum Solidity + Vue.js Tutorial Simple Auction Dapp \u0437\u0430 10 \u043c\u0438\u043d\u0443\u0442"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0445\u0430\u0431\u0440! \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u043d\u0430 \u0440\u0443\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0443\u044e \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044e \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u044f\u043b\u043e\u0432 \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u0439\u0442\u0438 \u0432 \u043c\u0438\u0440 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043c. \u0420\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u043f\u0440\u043e \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u043d\u0430 Ethereum. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u043b\u0430 \u043c\u043d\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e, \u0432\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432 \u043c\u0438\u0440 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043c \u0441\u043c\u0430\u0440\u0442 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e \u044d\u0442\u043e\u0439 <a href=\"https:\/\/medium.com\/openberry\/ethereum-solidity-vue-js-tutorial-simple-auction-dapp-within-10-minutes-76ba48156b2\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/20b\/41d\/036\/20b41d0365f9265c16a749b92bda67cc\" width=\"600\" height=\"300\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e\u0431 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430\u0445, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0449\u0438.&nbsp;\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u043e\u0431\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 10% \u043e\u0442 \u0438\u0445 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u044e \u0437\u0430 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0441\u0430\u043c\u0430 \u043e\u0431\u043c\u0430\u043d\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0435\u043d\u044c\u0433\u0438, \u043a\u0430\u043a \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0432\u0430\u0441 \u043e\u0431\u043c\u0430\u043d\u0443\u043b\u0438?<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0434\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c.<br \/>\u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b0a\/fc4\/1e2\/b0afc41e2d5329058173928bee1e780d\" width=\"1920\" height=\"1080\"><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u043f\u0438\u0441\u043e\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/h2>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0432\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430<\/p>\n<\/li>\n<\/ol>\n<h3>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/h3>\n<ol>\n<li>\n<p>\u0421\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442<a href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\" rel=\"noopener noreferrer nofollow\"><u>Solidity<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noopener noreferrer nofollow\"><u>Remix<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/metamask.io\/\" rel=\"noopener noreferrer nofollow\"><u>Metamask<\/u><\/a><\/p>\n<\/li>\n<li>\n<p>Frontend<a href=\"https:\/\/web3js.readthedocs.io\/en\/1.0\/\" rel=\"noopener noreferrer nofollow\"><u>Web3.js<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/vuejs.org\/\" rel=\"noopener noreferrer nofollow\"><u>Vue.js<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/cli.vuejs.org\/\" rel=\"noopener noreferrer nofollow\"><u>\u0412\u044c\u044e-\u043a\u043b\u0438<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/bootstrap-vue.js.org\/\" rel=\"noopener noreferrer nofollow\"><u>Boostrap-\u0432\u044e<\/u><\/a><\/p>\n<\/li>\n<\/ol>\n<h3>\u041f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0438<\/h3>\n<ol>\n<li>\n<p><a href=\"https:\/\/medium.com\/openberry\/getting-started-with-metamask-b9ac23a10c83\" rel=\"noopener noreferrer nofollow\"><u>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 MetaMask<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/openberry\/compile-and-deploy-using-remix-ide-f58fcc662ed0\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Remix IDE<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\" rel=\"noopener noreferrer nofollow\"><u>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u044c<\/u><\/a><\/p>\n<\/li>\n<\/ol>\n<h3>Github<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u0437\u0434\u0435\u0441\u044c:<br \/><a href=\"https:\/\/github.com\/openberry-ac\/Auction\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/github.com\/openberry-ac\/Auction<\/u><\/a><\/p>\n<h2>\u0417\u0430\u0447\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432?<\/h2>\n<p>\u0410\u0443\u043a\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432 \u0438 \u0434\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445.<\/p>\n<p>\u0421\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0430\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0446\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0438 \u0431\u0435\u0441\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0438\u0437\u0431\u0435\u0433\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0443\u0441\u043b\u0443\u0433 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<h3>\u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441<\/h3>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Web3.js<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432: \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435<\/p>\n<\/li>\n<\/ol>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430<\/h2>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 Ethereum, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\" rel=\"noopener noreferrer nofollow\"><u>Solidity<\/u><\/a>&nbsp;, \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0412&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noopener noreferrer nofollow\"><u>Remix<\/u><\/a>&nbsp;\u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c&nbsp;<strong>AuctionBox.sol<\/strong>&nbsp;\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>\/\/ 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 =&gt; 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 &gt; 0);         \/\/ update the current bid         \/\/ uint currentBid = bids[msg.sender] + msg.value;         uint currentBid = bids[msg.sender].add(msg.value);         require(currentBid &gt; 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] &gt; 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         );     } }<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0434\u0430\u043d\u044b \u0441 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430.&nbsp;\u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u0430\u043c, \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u043d\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0430\u043a\u0435\u0442 \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0431\u043a\u0443 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00abAuctionBox\u00bb, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432\u0441\u0435 \u0430\u0434\u0440\u0435\u0441\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432!<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u043c \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u043c AuctionBox.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432 Remix \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0432&nbsp;<strong>\u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0435\u0442\u0438 Ropsten.<\/strong><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0431\u044b\u043b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0432 Remix:\u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c&nbsp;\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442&nbsp;<strong>AuctionBox<\/strong>&nbsp;.<\/p>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0430\u0443\u043a\u0446\u0438\u043e\u043d!<\/strong><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0430\u0443\u043a\u0446\u0438\u043e\u043d \u043c\u0435\u0442\u043e\u0434\u043e\u043c&nbsp;<strong>createAuction<\/strong>&nbsp;.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a0f\/34b\/9ce\/a0f34b9ce0695b7e7dec381a15e271b4\" width=\"1080\" height=\"1144\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0445\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0436\u0430\u0442\u044c&nbsp;<strong>returnAllAuctions<\/strong>&nbsp;\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430!<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0447\u0438\u0441\u043b\u0430 \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c.&nbsp;\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u0432\u0430\u0448\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 (\u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435\/Powershell \u0434\u043b\u044f Windows):<\/p>\n<pre><code># 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<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430&nbsp;<a href=\"http:\/\/localhost:8080\/\" rel=\"noopener noreferrer nofollow\"><u>http:\/\/localhost:8080\/<\/u><\/a><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f36\/3d2\/655\/f363d26555b5f0e1668ab505b6c88c31\" width=\"2312\" height=\"968\"><figcaption><\/figcaption><\/figure>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 web3.js<\/h2>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c&nbsp;<strong>web3.js<\/strong>&nbsp;\u0432&nbsp;\u043f\u0430\u043f\u043a\u0435&nbsp;<strong>\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432<\/strong>&nbsp;, \u0437\u0430\u0442\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>\/\/ 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;<\/code><\/pre>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442&nbsp;<code>web3<\/code>\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Metamask, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.&nbsp;\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0437\u0436\u0435 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430.<\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e MetaMask \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f.&nbsp;\u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f\u00bb \u043f\u0440\u044f\u043c\u043e \u0437\u0434\u0435\u0441\u044c:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/efe\/331\/efb\/efe331efb34599ec145c6df05d56440e\" width=\"232\" height=\"400\"><figcaption><\/figcaption><\/figure>\n<h2>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d ABI \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430 \u0438 \u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e.&nbsp;\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c ABI, \u0432\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noopener noreferrer nofollow\"><u>Remix<\/u><\/a>&nbsp;, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430&nbsp;\u0432\u043a\u043b\u0430\u0434\u043a\u0443&nbsp;<strong>Compile<\/strong>&nbsp;\u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<strong>ABI<\/strong>&nbsp;\u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 Details, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dee\/d52\/c5a\/deed52c5a2c08f9da08d3f6d994e283b\" width=\"1000\" height=\"250\"><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430&nbsp;\u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u00ab&nbsp;<strong>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c<\/strong>&nbsp;\u00bb \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab&nbsp;<strong>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00bb<\/strong>&nbsp;, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/82a\/ea5\/051\/82aea505196c5a9954900ac6c123a438\" width=\"1040\" height=\"618\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c&nbsp;<strong>\u0430\u0443\u043a\u0446\u0438\u043e\u043d<\/strong>&nbsp;\u043a\u043e\u043d\u0442\u0430\u043a\u0442&nbsp;<strong>ABI<\/strong>&nbsp;\u043f\u0443\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430 \u043d\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d \u0438 \u043d\u0430\u0436\u0430\u0432 ABI.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0441&nbsp;\u0438\u043c\u0435\u043d\u0435\u043c&nbsp;<strong>AuctionBoxInstance.js<\/strong>&nbsp;\u0438&nbsp;<strong>AuctionInstance.js<\/strong>&nbsp;\u0432&nbsp;\u043f\u0430\u043f\u043ae <strong>contracts<\/strong>, \u0430&nbsp;\u0437\u0430\u0442\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u0432&nbsp;\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e&nbsp;<strong>ABI<\/strong>&nbsp;\u00abs&nbsp;\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430 \u0430\u0434\u0440\u0435\u0441\u0430, \u043a\u0430\u043a \u044d\u0442\u043e:<\/p>\n<pre><code>\/\/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;<\/code><\/pre>\n<pre><code>\/\/ 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) =&gt; {   const instance = new web3.eth.Contract(abi, address);   return instance; };<\/code><\/pre>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432<\/p>\n<p>\u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0435\u0441\u0442\u044c, \u043d\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.&nbsp;\u042d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0447\u0435\u043c \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f.&nbsp;\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435&nbsp;<strong>App.vue<\/strong>&nbsp;\u0432 \u043f\u0430\u043f\u043a\u0435 src&nbsp;\u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432!<\/p>\n<p><strong>beforeMount<\/strong><\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<pre><code>\/\/ App.vue beforeMount() {   \/\/ get auctionBox method: returnAllAuctions()   auctionBox.methods     .returnAllAuctions()     .call()     .then((auctions) =&gt; {       console.log(auctions);       \/\/ set the amount of auctions       this.amount = auctions.length;     }); },<\/code><\/pre>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430<\/strong><\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0430\u0443\u043a\u0446\u0438\u043e\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<pre><code>\/\/ App.vue createAuction() {   \/\/ get accounts   web3.eth.getAccounts().then((accounts) =&gt; {     \/\/ 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(() =&gt; {     \/\/ initialize forms     this.isLoad = false;     this.title = '';     this.startPrice = '';     this.description = '';     \/\/ get the previous auction     return auctionBox.methods.returnAllAuctions().call();   }).then((auctions) =&gt; {     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) =&gt; {       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) =&gt; {       console.log(err);     }); },<\/code><\/pre>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0432\u043a\u0438<\/strong><\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0442\u0430\u0432\u043a\u0443.<\/p>\n<pre><code>\/\/ 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(() =&gt; {       this.isBid = false;       \/\/ increase the number of bidders       this.bidders += 1;       this.bidPrice = '';     }); },<\/code><\/pre>\n<p><strong>\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u0430\u0443\u043a\u0446\u0438\u043e\u043d<\/strong><\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u0430\u0443\u043a\u0446\u0438\u043e\u043d.<\/p>\n<pre><code>\/\/ App.vue handleFinalize() {   \/\/ get accounts   web3.eth.getAccounts().then((accounts) =&gt; {     \/\/ 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(() =&gt; {         this.isFin = false;         this.finalizeStatus = 'finalized';       });   }); },<\/code><\/pre>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0430\u0443\u043a\u0446\u0438\u043e\u043d \u0432 Remix, \u0430\u0434\u0440\u0435\u0441 \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n<p>\u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0441\u043e\u0437\u0434\u0430\u043b 9 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0433\u0443 \u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/275\/b1a\/22b\/275b1a22b678ff99c07e1304b9727e3f\" width=\"1994\" height=\"790\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e !!<\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.&nbsp;\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0432\u0441\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e, \u0438 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!&nbsp;\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ab5\/7b8\/fb3\/ab57b8fb3ab35155031ae6dccdf0fa93\" width=\"1920\" height=\"1080\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0420\u0418\u041c\u0415\u0427\u0410\u041d\u0418\u0415: \u0422\u043e\u0442, \u043a\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0430\u0432\u043a\u0438 \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0435.&nbsp;\u0418\u0442\u0430\u043a, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0443\u0447\u0435\u0442\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c (\u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e \u043e\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439), \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0430\u0432\u043a\u0443.<\/p>\n<p>\u041f\u0420\u0418\u041c\u0415\u0427\u0410\u041d\u0418\u0415. \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0430\u0443\u043a\u0446\u0438\u043e\u043d \u0432 \u0441\u0432\u043e\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<h2>\u0420\u0435\u0437\u044e\u043c\u0435<\/h2>\n<p>\u0412\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0438 \u043a\u0430\u043a \u0441 \u043d\u0438\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e web3.js.&nbsp;\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vue.js, \u0438 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u041d\u0443 \u0438 \u0447\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u00ab\u043a\u0440\u0430\u0439\u043d\u0435\u0433\u043e \u0441\u0440\u043e\u043a\u0430\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u043b\u044f \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432.&nbsp;\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c,&nbsp;<a href=\"https:\/\/solidity.readthedocs.io\/en\/v0.5.2\/solidity-by-example.html#blind-auction\" rel=\"noopener noreferrer nofollow\"><u>\u044d\u0442\u043e \u0432\u0430\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0436\u0435\u0442<\/u><\/a>&nbsp;\ud83d\ude42<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0437\u0434\u0435\u0441\u044c:<br \/><a href=\"https:\/\/github.com\/openberry-ac\/Auction\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/github.com\/openberry-ac\/Auction<\/u><\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/535974\/\"> https:\/\/habr.com\/ru\/post\/535974\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0445\u0430\u0431\u0440! \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u043d\u0430 \u0440\u0443\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0443\u044e \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044e \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e \u0442\u0443\u0442\u043e\u0440\u0438\u044f\u043b\u043e\u0432 \u0447\u0442\u043e\u0431\u044b \u0432\u043e\u0439\u0442\u0438 \u0432 \u043c\u0438\u0440 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043c. \u0420\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u043f\u0440\u043e \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u043d\u0430 Ethereum. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u043b\u0430 \u043c\u043d\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e, \u0432\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432 \u043c\u0438\u0440 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043c \u0441\u043c\u0430\u0440\u0442 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e \u044d\u0442\u043e\u0439 <a href=\"https:\/\/medium.com\/openberry\/ethereum-solidity-vue-js-tutorial-simple-auction-dapp-within-10-minutes-76ba48156b2\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e\u0431 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430\u0445, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0449\u0438.&nbsp;\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u043e\u0431\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 10% \u043e\u0442 \u0438\u0445 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u0438\u0441\u0441\u0438\u044e \u0437\u0430 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0441\u0430\u043c\u0430 \u043e\u0431\u043c\u0430\u043d\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0435\u043d\u044c\u0433\u0438, \u043a\u0430\u043a \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0432\u0430\u0441 \u043e\u0431\u043c\u0430\u043d\u0443\u043b\u0438?<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0434\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c.<br \/>\u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u043f\u0438\u0441\u043e\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/h2>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0432\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430<\/p>\n<\/li>\n<\/ol>\n<h3>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/h3>\n<ol>\n<li>\n<p>\u0421\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442<a href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\" rel=\"noopener noreferrer nofollow\"><u>Solidity<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noopener noreferrer nofollow\"><u>Remix<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/metamask.io\/\" rel=\"noopener noreferrer nofollow\"><u>Metamask<\/u><\/a><\/p>\n<\/li>\n<li>\n<p>Frontend<a href=\"https:\/\/web3js.readthedocs.io\/en\/1.0\/\" rel=\"noopener noreferrer nofollow\"><u>Web3.js<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/vuejs.org\/\" rel=\"noopener noreferrer nofollow\"><u>Vue.js<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/cli.vuejs.org\/\" rel=\"noopener noreferrer nofollow\"><u>\u0412\u044c\u044e-\u043a\u043b\u0438<\/u><\/a>&nbsp;,&nbsp;<a href=\"https:\/\/bootstrap-vue.js.org\/\" rel=\"noopener noreferrer nofollow\"><u>Boostrap-\u0432\u044e<\/u><\/a><\/p>\n<\/li>\n<\/ol>\n<h3>\u041f\u0440\u0435\u0434\u043f\u043e\u0441\u044b\u043b\u043a\u0438<\/h3>\n<ol>\n<li>\n<p><a href=\"https:\/\/medium.com\/openberry\/getting-started-with-metamask-b9ac23a10c83\" rel=\"noopener noreferrer nofollow\"><u>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 MetaMask<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/openberry\/compile-and-deploy-using-remix-ide-f58fcc662ed0\" rel=\"noopener noreferrer nofollow\"><u>\u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Remix IDE<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\" rel=\"noopener noreferrer nofollow\"><u>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u044c<\/u><\/a><\/p>\n<\/li>\n<\/ol>\n<h3>Github<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u0437\u0434\u0435\u0441\u044c:<br \/><a href=\"https:\/\/github.com\/openberry-ac\/Auction\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/github.com\/openberry-ac\/Auction<\/u><\/a><\/p>\n<h2>\u0417\u0430\u0447\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432?<\/h2>\n<p>\u0410\u0443\u043a\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 &#8212; \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432 \u0438 \u0434\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445.<\/p>\n<p>\u0421\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0430\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0446\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0438 \u0431\u0435\u0441\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0438\u0437\u0431\u0435\u0433\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0443\u0441\u043b\u0443\u0433 \u043f\u043e\u0441\u0440\u0435\u0434\u043d\u0438\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<h3>\u0420\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441<\/h3>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Web3.js<\/p>\n<\/li>\n<li>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432: \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435<\/p>\n<\/li>\n<\/ol>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430<\/h2>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 Ethereum, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\" rel=\"noopener noreferrer nofollow\"><u>Solidity<\/u><\/a>&nbsp;, \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0412&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noopener noreferrer nofollow\"><u>Remix<\/u><\/a>&nbsp;\u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c&nbsp;<strong>AuctionBox.sol<\/strong>&nbsp;\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>\/\/ 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 =&gt; 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 &gt; 0);         \/\/ update the current bid         \/\/ uint currentBid = bids[msg.sender] + msg.value;         uint currentBid = bids[msg.sender].add(msg.value);         require(currentBid &gt; 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] &gt; 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         );     } }<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0434\u0430\u043d\u044b \u0441 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430.&nbsp;\u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u0430\u043c, \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u043d\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0430\u043a\u0435\u0442 \u0438\u043b\u0438 \u043a\u043e\u0440\u043e\u0431\u043a\u0443 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00abAuctionBox\u00bb, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432\u0441\u0435 \u0430\u0434\u0440\u0435\u0441\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432!<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u043c \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u0430 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u043c AuctionBox.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432 Remix \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0432&nbsp;<strong>\u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0435\u0442\u0438 Ropsten.<\/strong><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0431\u044b\u043b \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0432 Remix:\u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c&nbsp;\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442&nbsp;<strong>AuctionBox<\/strong>&nbsp;.<\/p>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0430\u0443\u043a\u0446\u0438\u043e\u043d!<\/strong><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0430\u0443\u043a\u0446\u0438\u043e\u043d \u043c\u0435\u0442\u043e\u0434\u043e\u043c&nbsp;<strong>createAuction<\/strong>&nbsp;.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0445\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0436\u0430\u0442\u044c&nbsp;<strong>returnAllAuctions<\/strong>&nbsp;\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430!<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0447\u0438\u0441\u043b\u0430 \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c.&nbsp;\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u0432\u0430\u0448\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 (\u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435\/Powershell \u0434\u043b\u044f Windows):<\/p>\n<pre><code># 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<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430&nbsp;<a href=\"http:\/\/localhost:8080\/\" rel=\"noopener noreferrer nofollow\"><u>http:\/\/localhost:8080\/<\/u><\/a><\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 web3.js<\/h2>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c&nbsp;<strong>web3.js<\/strong>&nbsp;\u0432&nbsp;\u043f\u0430\u043f\u043a\u0435&nbsp;<strong>\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432<\/strong>&nbsp;, \u0437\u0430\u0442\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>\/\/ 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;<\/code><\/pre>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442&nbsp;<code>web3<\/code>\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Metamask, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.&nbsp;\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0437\u0436\u0435 \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430.<\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e MetaMask \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f.&nbsp;\u0412\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f\u00bb \u043f\u0440\u044f\u043c\u043e \u0437\u0434\u0435\u0441\u044c:<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<h2>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443 \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d ABI \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043c\u0430\u0440\u0442-\u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430 \u0438 \u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e.&nbsp;\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c ABI, \u0432\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u0432&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noopener noreferrer nofollow\"><u>Remix<\/u><\/a>&nbsp;, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430&nbsp;\u0432\u043a\u043b\u0430\u0434\u043a\u0443&nbsp;<strong>Compile<\/strong>&nbsp;\u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435&nbsp;<strong>ABI<\/strong>&nbsp;\u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 Details, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430&nbsp;\u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u00ab&nbsp;<strong>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c<\/strong>&nbsp;\u00bb \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab&nbsp;<strong>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00bb<\/strong>&nbsp;, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c&nbsp;<strong>\u0430\u0443\u043a\u0446\u0438\u043e\u043d<\/strong>&nbsp;\u043a\u043e\u043d\u0442\u0430\u043a\u0442&nbsp;<strong>ABI<\/strong>&nbsp;\u043f\u0443\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430 \u043d\u0430 \u0430\u0443\u043a\u0446\u0438\u043e\u043d \u0438 \u043d\u0430\u0436\u0430\u0432 ABI.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0441&nbsp;\u0438\u043c\u0435\u043d\u0435\u043c&nbsp;<strong>AuctionBoxInstance.js<\/strong>&nbsp;\u0438&nbsp;<strong>AuctionInstance.js<\/strong>&nbsp;\u0432&nbsp;\u043f\u0430\u043f\u043ae <strong>contracts<\/strong>, \u0430&nbsp;\u0437\u0430\u0442\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0435\u0433\u043e \u0432&nbsp;\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e&nbsp;<strong>ABI<\/strong>&nbsp;\u00abs&nbsp;\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430 \u0430\u0434\u0440\u0435\u0441\u0430, \u043a\u0430\u043a \u044d\u0442\u043e:<\/p>\n<pre><code>\/\/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;<\/code><\/pre>\n<pre><code>\/\/ 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) =&gt; {   const instance = new web3.eth.Contract(abi, address);   return instance; };<\/code><\/pre>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432<\/p>\n<p>\u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0435\u0441\u0442\u044c, \u043d\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442.&nbsp;\u042d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0447\u0435\u043c \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f.&nbsp;\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435&nbsp;<strong>App.vue<\/strong>&nbsp;\u0432 \u043f\u0430\u043f\u043a\u0435 src&nbsp;\u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432!<\/p>\n<p><strong>beforeMount<\/strong><\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u0443\u043a\u0446\u0438\u043e\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435.<\/p>\n<pre><code>\/\/ App.vue beforeMount() {   \/\/ get auctionBox method: returnAllAuctions()   auctionBox.methods     .returnAllAuctions()     .call()     .then((auctions) =&gt; {       console.log(auctions);       \/\/ set the amount of auctions       this.amount = auctions.length;<\/code><\/pre>\n<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-315924","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=315924"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315924\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=315924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=315924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=315924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}