Ethereum Solidity + Vue.js Tutorial Simple Auction Dapp within 10 minutes

You might have heard of auctions, a place where you can buy and sell things. Although it is very convenient, it costs sellers about 10% of their earnings to pay the service charge to the auction’s managing company.

If the company itself cheats some transactions and get the money, how will you know that you have been cheated?

This is where a decentralized setup is an optimal solution.
If there is no third party, sellers can earn more, in a secure way.

Function List

1. Creating an auction
2. Placing a bid
3. Finalizing an auction

Tools

1. Smart Contract
   Solidity, Remix, Metamask
2. Frontend
   Web3.js, Vue.js, Vue-cli, Boostrap-vue

Prerequisites

1. Getting Started with MetaMask
2. Compile and Deploy Using Remix IDE
3. Introduction to Smart Contracts and Solidity

Github

If you only want to see the code, you can find it here:
https://github.com/openberry-ac/Auction

Why Build an Auction Dapp?

The auction system is a good application to build for the purpose of learning about smart contracts and decentralized applications, especially for beginners.

Smart contracts will help you exchange money, properties, shares, or anything of value in a transparent, conflict-free way while avoiding the services of a middleman, like the auction system.

Making the Project

Work flow

1. Creating the Smart Contract
2. Building web app & Web3.js setting
3. Defining the Methods: Frontend Coding

Creating the Smart Contract

Since our contract will be based on Ethereum, we will use Solidity, a programming language used for creating smart contracts.

In Remix, create a new file named AuctionBox.sol and add the following code:

In an actual setting, many items can be auctioned. In order to make it easy to access all the auctioned items, we created a bundle or box called “AuctionBox” which includes all the auction addresses!

To make this system work, we need to prepare two types of contracts, called Auction contract and AuctionBox contract.

After writing it in Remix, deploy it to the Ropsten Test Network.

To verify that our contract was deployed, you should see this in Remix:
Here, we need to select AuctionBox contract.

Let’s create an auction !

After deploying, let’s try to make an auction using createAuction method.

If you success, you can click returnAllAuctions and see its contract address!

Building the Web App

Our smart contract now works, but there’s no fun in just looking at numbers so we’ll be making a simple web application.

Setting Up

To speed up things, a template project is provided which can be found here. Now let’s follow the commands below, in your Terminal (or Command Prompt/Powershell for 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

Then it should automatically render on http://localhost:8080/

Setting up web3.js

Open the file named web3.js in the contracts folder, then paste it as following code:

This basically gets the web3 instance that the Metamask extension initializes, so we can use it in our app too. We need to call this later when retrieving our smart contract instance.

You might encounter a MetaMask pop-up window in your browser that asks for access permission. You should just click the ‘Connect’ button right here:

Connecting to Our Smart Contract Instance

Now, we need our smart contract’s ABI and the contract address to connect it to our web app. To get the ABI, go back to Remix, go to the Compile tab, and click ABI beside the Details button as shown in the picture:

To get the contract address, go to the Run tab, and click Copy button as shown in the picture:

You can also get Auction contact’s ABI by changing the selected contract to Auction and clicking ABI.

After getting it, open the files named AuctionBoxInstance.js and AuctionInstance.js in the contracts folder, then paste it as the variable abi ’s value and the contract address, like this:

Defining the Methods

You might notice that the user interface is there, but the buttons aren’t functional. That’s because we have not defined our functions yet, which we will be doing now. Open App.vue in the src folder and let’s get started to fill in the blanks!

beforeMount

Here, we will get the number of auctions that you created before.

Create Auction Function

Here, we create an auction using the user’s inputs, which will be shown at the bottom of the page.

Place Bid Function

Here, we handle the event wherein the user places a bid.

Finalize Auction Function

Here, we handle the event wherein the user finalizes an auction.

We have already created an auction in Remix, you can see its contract address in console.

In my case, I created 9 auctions, so I can see this in console:

Complete!!

Refresh your browser to see the changes. This time, the whole web app is complete, and everything is functional! You should then be able to use it like this:

NOTE: The one who made the action cannot place a bid in his own auction. So, you need to switch to another account (other than the auction starter) to place a bid.

NOTE: To display the auction card, please create another auction in your browser.

Summary

You learned how to create a smart contract and how to interact with it using web3.js. You also learned how to setup your own project using Vue.js, and created a simple application.

So what’s next?

You might want to add the logic for the “deadline” because it is important in a real auction application. For now, we skipped it to avoid complexity and to lessen the time, but if you want to try to build it, this will help you a lot :)

If you want the full code of this tutorial, you can check it here:
https://github.com/openberry-ac/Auction

On a side note, you might want to check out openberry’s previous tutorial, “ERC721 + Vue.js CryptoKitties-like Dapp in under 10 minutes”.

ERC721 + Vue.js CryptoKitties-like Dapp in under 10 minutes

openberry is a tutorial marketplace, designed to allow anyone to learn blockchain programming.

openberry | blockchain tutorial marktplace

openberry (@openberry_ac) | Twitter