Create Your First Ethereum Dapp With Web3 and Vue - Js (Part 1)
Create Your First Ethereum Dapp With Web3 and Vue - Js (Part 1)
Create Your First Ethereum Dapp With Web3 and Vue - Js (Part 1)
HOME FILTER ▼ ABOUT ITNEXT WRITE FOR ITNEXT MEETUP SUMMIT LINKIT
Welcome to yet another tutorial! In this tutorial we’ll dive into creating a
simple reactive decentralized application using Ethereum, Web3js, VueJS and
Vuex. You will likely need some understanding of javascript and web
applications to really enjoy this tutorial. If you don’t know Vue don’t worry,
we will cover the basics brie y while making our application.
Our application will be a simple one. A user will be able to bet ethers on a
number between 1 and 10. When the user guesses correctly he gets his payout
x10 (minus the cut for the house).
In this rst part we will go over our project setup and the creation of our
smart contract. In the second part we’ll introduce the web3js API and
VueJS/Vuex and in part three we’ll connect the dots and connect our
application to our contract. Follow along, enjoy the ride, it’s gonna be great.
. . .
Prerequisites
Due to the simplicity of the project we will not be using tru e. We will write
and deploy our smart contract onto a test net with MetaMask and Remix
(https://remix.ethereum.org).
The rst thing we’ll need is nodeJS and NPM, get them here and follow the
installation steps for your OS: https://nodejs.org/en/. To check if node has
installed correctly run the following commands in a terminal window:
node -v
npm -v
Next up, get metamask if you do not have it already: https://metamask.io/
Our last prerequisite is vue-cli, this will help us easily set up a VueJS project:
npm i vue-cli -g
. . .
Project set-up
We will write and deploy our simple smart contract using remix and deploy it
to the Ropsten test net through our metamask add-on. All we need to interact
with it in our front-end application is the contract address and ABI (An ABI
de nes how data structures or computational routines are accessed in
machine code).
Our front-end will be a vueJS application that we will generate by using the
vue-cli. We’ll also be using web3 to communicate with our contract. To create
the backbone for our client application follow these easy steps:
1. Open up a terminal and change directory to where you want to create the
app.
2. In the terminal window type the following command to create our project
and go through the wizard by spamming ‘enter’:
3. Now we will go into our project folder and install web3, vuex and font-
awesome:
cd betting-dapp
npm i web3@^0.20.0 vuex font-awesome -s
//To start the dummy project generated by the vue-cli use 'npm
start'
*We are not using web3 1.0.0 beta because it is not compatible with MetaMask as
of writing.*
. . .
1. We need to know the owner of the contract and have an access modi er
(we will leave changing owner out of it for simplicity)
2. The owner of the contract can destroy the contract and retrieve the
balance
4. The owner needs to be able to set a minimum bet amount and house edge
on contract creation (not changeable after creating for simplicity)
Steps one and two are very easy, we’ve also added comments so you have no
trouble following along. Fire up Remix and let’s get to work (gist link at the
end of article):
contract Ownable {
address owner;
function Ownable() public {
//Set owner to who creates the contract
owner = msg.sender;
}
//Access modifier
modifier Owned {
require(msg.sender == owner);
_;
}
}
First we create the contract Ownable, it’s constructor function Ownable() will
be called upon creation and set the state variable ‘owner’ to the address of the
creator. We also de ne an access modi er that will throw an exception when
the caller of a function we attach it to is not the contract owner.
We pass on this functionality into our Mortal contract (Mortal inherits from
Ownabe). This has one function that allows the contract owner (access
modi er) to destroy the contract and send the remaining funds back to him.
Did you manage to get this far? You’re doing great! We’re almost ready with
our contract.
The rst thing we’ll need is a minBet and houseEdge that can be set upon
contract creating. This is done by passing parameters to the constructor
Casino(). We will make our constructor payable so we can preload our
contract with some Ether on deployment. We’ll implement our fallback
already as well:
//true+amount or false+0
event Won(bool _status, uint _amount);
This won’t do much yet so next up we’ll add our function to bet a number.
This function will generate a random number (not in a secure way!), then
calculate and send the amount won. So below your fallback function add the
following:
** Note that this is not truly random as it is easy to predict the next block number.
To learn more about randomness in solidity please check out
https://www.youtube.com/watch?v=3wY5PRliphE.
if the house edge is 0 our multiplier will be 10; if the house edge is 10% the
multiplier will be 9.
Lastly we will add a function for the owner to check the balance of the
contract, ideally we would want to add a withdrawal function for the owner
as well but we’ll leave that out for now. Below your bet function add the
following few lines:
. . .
Now click the create button, the contract instance should appear in the
bottom right of your screen now. There will be four functions visible, to check
everything went okay click on getContractBalance(). It should return
20000000000000000000, which is the 20 ether we sent to it converted to
wei. You will also see that your balance (next to account in the top right) will
now be a little less than 80 ether.
Ok great! Everything should work. Like mentioned before, when using the
javascript VM, the rst block will always be 1, so the rst winning number
will always be 2. We can test this out by entering 1 ether in the value eld and
passing in 2 as an argument to bet.
When pressing bet we should see our balance go up again, in the console click
details and scroll to ‘logs’. We should see an event that we have won:
Alright! Our contract works. In the next episode we’ll deploy our contract on
the Ropsten test network and retrieve the contract address and ABI for use in
our client application. Until then !
As always you’re welcome to leave a tip if you enjoy our tutorials, thanks for
reading and sticking through if you got this far!
ETH — 0x6d31cb338b5590adafec46462a1b095ebdc37d50
UPDATE: Updated calling events with emit pre x and typecasting this to
address type to get the balance member(solidity 0.4.21 release)
. . .
482 2
Responses
Write a response…