Table of contents
- Prerequisite Technologies In Your Machine
- Metamask Plugin Installation
- Create a Wallet
- Connect to the Rinkeby network and get fake Ether
- Run and Simulate Contract through Remix Ide
- Deploy the contract to Rinkeby Network through Remix Ide
- Verify and Publish Your Contract(Optional)
- Clone Repo
- Enable Environment
- Run Application
- Test Application
- References:
- Meta text
Bitcoin
raised the blockchain technology, whereas Ethereum
took it to the next level. Often said, Blockchain 2.0
, and Ethereum
proved the possibility of blockchain technology beyond the financial sector. This public blockchain network is famous for allowing the implementation of smart contracts. Smart Contract
acts as a locker
where it can be unlocked by certain conditions. Solidity
programming language can be used to develop these Smart Contract
.
By the end of this article,
You will have a deployed smart contract in the
Ethereum
network (Rinkeby Testnet)You will interact with your smart contract using a react and node app.
Prerequisite Technologies In Your Machine
Metamask Plugin Installation
Metamask is a pretty neat browser plugin. It allows an end-user to interact with a dAPP on Ethereum
network. With metamask
, the end-user does not have to run an Ethereum node
. Metamask
also, handles users Ethereum Wallet
.
Install the Chrome Browser in your machine
Go to Chrome Web Store and search for
Metamask
Open
Metamask
offered by[https://metamask.io/
](metamask.io)Click
Add to Chrome
and confirm byAdd Extension
Now
Metamask
should be available in yourChrome Extension
list
Create a Wallet
Using a wallet, end users are allowed to send and receive ethers from dApps.
Open
Metamask
and clickGet Started
If you already have a wallet then go to
Import Wallet
To create a new wallet go for
Create Wallet
Agree with the
Privacy Policy
, put a password, and create thewallet
Reveal and save the
Backup Phrase
in a secure placeNow go to
Next Section
, select the words according to the phraseNow your wallet is
All Set Up
, You should get yourAccount Address
Connect to the Rinkeby
network and get fake Ether
Testnet like Rinkeby
, does not deal with actual money. To deploy and make a transaction in `Ethereum test net we will require the fake ether.
Open the
Metamask
pluginOn
top-right
switch toRinkeby Network
fromMain Network
Go to
free ether supplier
site. We will follow theirtwitter
instruction.Go to Twitter and create a
tweet
of ourEthereum Account Address
If your
Ethereum Account Address
is0x0000000000000000000000000000000000000000
, the just tweet theaddress
You can include anything with the
address
It is valid, till the
tweet
contains the address.Open the
published tweet
in a new page and copy thepage link
.Put the
tweet link
in thefree ether supplier
the site and from theGive me ether
, select a suitable packageNow in your
Metamask
,fake ether
should appearSometimes it takes a little more time to
transaction
, so wait and also make sure youMetamask
is connected to theRinkeby
network.
Run and Simulate Contract
through Remix
Ide
Remix
is an online IDE to create a solidity smart contract. It also has the feature to compile
, run
, deploy
, and simulate
smart contracts.
Open Remix IDE.
Select environment
Solidity
Go to the
File Explorer
Tab and create a fileLottery.sol
Get the Contract Code
Go to
Solidity Compiler
Tab and SelectCompiler Version
to0.4.17
Language
asSolidity
EVM
asCompiler Default
Now click
Compile Lottery.sol
You can enable
auto-compile
bychecking
the checkboxAuto Compile
Go to the
Deploy And Run Transaction
Tab andDeploy
the contract in localEVM
Your contract functionality will be available in the
Deploy And Run Tracsaction
tab, under theDeployed Contract
section
Deploy the contract to Rinkeby Network
through Remix
Ide
Testnets
provide developers a place to kick the smart contract
and test
before the real assets are involved. These Testnets
behave very much like the main net
and do not require actual money(ether
). Here we are going to try Rinkeby Testnet
.
Make sure you run the
Lottery
contract using the previous section's instructionsOpen
Metamask
, put thepassword
, and make sure, you are connected to theRinkeby
network.Go to
Deployed And Run Transaction
tab and selectEnvironment
isInjected Web3
As an account, your
Metamask
wallet address should be selectedMake sure you have enough
ether
in your wallet to deploy the contractNow click
Deploy
. This will deploy yourcontract
to theRinkeby
network.In the
Remix IDE
, checkLog Section
and grab theTransaction Hash
, and store it.Go to Ether Scan and search for the
Transaction Hash
. You will get theDeployed Contract Address
. Also, thisContract Address
will be required further.
Verify and Publish Your Contract(Optional)
Everything on Ethereum Network
is public, including smart contract byte-code
. Byte-code
is low-level stuff and very difficult to understand. You can publish your solidity source code
by verify and publish
in ether-scan
. If you want more people to interact with your smart contract
, you should verify and publish
your smart-contract
.
From Ether Scan, search the
Transaction Hash
orContract Address
and go to theContract Details
pageFrom
Contract Details
, go to theContract
tabClick
Verify and Publish
, and setCompiler Type
asSolidity(Single File)
Compiler Version
as0.4.17
License Type
asWhatever Your's Requirement
Click
Continue
and putContract Code
fromRemix IDE
or GistClick
Verify and Publish
and you should get theContract Byte Code
andContract ABI
Store the
Contract Byte Code
andContract ABI
for future use
Clone Repo
This is a react
app to interact with our lottery
contract.
git clone [https://github.com/bmshamsnahid/Decentralized-Lottery-App](https://github.com/bmshamsnahid/Decentralized-Lottery-App)
Enable Environment
To run the react app, please ensure the following environment
.
> Make sure `node.js` is installed. To check the version, use `node -v`. This is tested in node 10.17.0
>(Optional, only for node.js deployment) In `\config` directory, create file `dev.js` and put the local DB URL with username and password. An example is provided in the same directory named `example-dev.js`
> To use your own contract, update the `/ui/src/contractConfig.js` as your `Contract Address` and `Contract ABI`
Run Application
To run your app locally, you do not need a server
. But for deployment, the static react app
should be hosted in node app
.
Server
> Install server-side dependency by `npm i` in the project root directory. In case you face any problems, use the `yarn` package manager.
> Run server by `npm run dev`
> Server is running in `http://localhost:8080`
Client
> Go to `\ui` and install dependencies `npm i`
> Update `API URL' to local node app `http://localhost:8080` in the `App.js` file.
> Run the front end `npm start`
> Your app is available at `http://localhost:3000`
> Make sure `metamask` is installed
> Make sure you are connected to `Rinkeby` network and have enough ether
You are all set to go.
Test Application
It is important to test your smart-contract
before deployment.
> To install dependency, Go to the root directory and run `npm i`
> Invoke unit-test by `npm run test`
A deployed version can be found here.
References:
TxHash:
0x3349da25727612e32d292b2fd1f1d2ac5d07b35b9b0f62f356f60d3aa65c6241
From account:
0x612a306d2707cf0B49A5d76594482f7AfCda506c
Contract address:
0x8C9815E2372bC6F9Dec915751B31666aB08b2edb
Meta text
In this article, we will simulate a solidity smart contract
in remix IDE
. Then we will cover test
, deployment
and interaction
for the smart contract. For interaction
we will use the node
server and react
library. Also, make sure we remove read
dependency from metamask
wallet.