Create and Learn Ethereum Decentalized Application (dApp) development

I am learning to create decentralized applications (dApp) that will interact with Ethereum blockchain and record the transactions. In this post I am not taking time to explain about the Blockchain, Ethereum, Smart Contracts, web3.js, Truffle, Ganache etc. There are good articles explaining these concepts and applications. You can follow the below steps with least knowledge about these pre-requisites and create a dApp. This practice will lead to you learn and better understand the dApp creation.

Step 1- Installations to complete as pre-requisites

1a) Install the Angular CLI

A command line interface for Angular

npm install -g @angular/cli

1b) Install web3.js

web3.js is a collection of libraries which allow you to interact with a local or remote ethereum node, using a HTTP or IPC connection.

npm install web3@0.20.5

1c) Install Truffle

Truffle is a development environment and testing framework for Ethereum. We will be using Truffle to compile and deploy smart contracts.

npm install -g truffle

Read the Truffle installation instructions for more understanding about Truffle functions.

1d) Configure a test blockchain

Ganache blockchain- Download the Ethereum Ganache blockchain which we will use to run tests and execute commands.

Go to Truffle Ganache website and click “Choose a different version”

Download and install the ganache-setup*.exe that is appropriate for your machine.

1e) Install MetaMask

MetaMask is a browser extension for accessing Ethereum enabled distributed applications, or “Dapps” in your normal Chrome browser. The extension injects the Ethereum web3 API into every website’s javascript context, so that dapps can read from the blockchain.

Go to metamask website https://metamask.io/

Get the extension for your browser

Step 2 — Source code for dApp

In your machine go to the folder where you want to maintain the dApp code. Create a new folder lucid-charity-ethereumdapp and navigate into the new folder. I will use C:\Temp folder for this post.

C:\Temp>mkdir lucid-charity-ethereumdapp
C:\Temp>cd lucid-charity-ethereumdapp

All codes for the dApp will be maintained within this folder. Download the source code files from github into lucid-charity-ethereumdapp folder.

Step 3 — Compile the smart contracts

C:\Temp\lucid-charity-ethereumdapp>truffle compile
Compiling .\contracts\Migrations.sol…
Compiling .\contracts\charity.sol…
Writing artifacts to .\build\contracts

Step 4 — Migrate the smart contracts

Make sure Ganache blockchain is running before migrating the smart contracts.

C:\Temp\lucid-charity-ethereumdapp>truffle migrate
Using network ‘development’.
Running migration: 1_initial_migration.js
 Replacing Migrations…
 … 0x0214e9473d2867ddcdf17a0856267390fd5bb271faf9b609b0bbd1f805f18e16
 Migrations: 0x4e1d5e98831d7a6160f403f93c38bf2939808a66
Saving successful migration to network…
 … 0x95e7eeed2ab364d00e1086eb98bee2e6efee9fe786e3f8731268e81087ad6e3a
Saving artifacts…
Running migration: 2_deploy_contracts.js
 Replacing charity…
 … 0x8874ad884fb0921903262dc03f5002807fc4bd4802034b57546d6b2b8eae39cf
 charity: 0xb4d45d72efada67d951bb68772535ebd66c698d8
Saving successful migration to network…
 … 0xc37e99ce0206febc2f4ee13a0dc589fe9df921f7005d730c8b6d7db4625475cb
Saving artifacts…

Step 5 — Set the host name and port number in Ganache settings

Step 6 — Change the MetaMask network to Localhost

In your browser login into MetaMask and change the network to Localhost 8545. Ganache blockchain will be accepting the transaction from Local host and port 8545.

Step 7 — ng serve

“ng serve” serves an Angular project via a development server

C:\Temp\lucid-charity-ethereumdapp>ng serve
Your global Angular CLI version (6.0.8) is greater than your local
version (1.3.0). The local Angular CLI version is used.
To disable this warning use “ng config -g cli.warnings.versionMismatch false”.
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Date: 2018–08–07T09:58:33.839Z
Hash: c56fd4e0bce32b29751b
Time: 20238ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 47.1 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 221 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 16.4 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.04 MB [initial] [rendered]
webpack: Compiled successfully.

Step 8 — Access the dApp

Go to URL http://localhost:4200/ in your browser for accessing the Lucid Charity page to do the test transactions.

Step 9— Enter a transaction and interact with blockchain

Enter amount value between 1 to 10000 and one of the address (Example: 0xC866c9FeDc00D56E044F8cD26897e4150e5b066A)from Ganache.

After clicking “Get Your Class” donor membership should be SILVER for amounts between 1 to 5000 and GOLD for amounts between 5001 to 10000.

Step 10 — Verify the transaction in Ganache blockchain

Go Transactions in Ganache and you should be able to see a transaction for your dApp interaction to get the donor membership class.

You can read the below steps to know the details about the code.

Create project folder structures

In your machine go to the folder where you want to maintain the dApp code. Create a new folder lucid-charity-ethereumdapp and navigate into the new folder. I will use C:\Temp folder for this post.

C:\Temp>mkdir lucid-charity-ethereumdapp

C:\Temp>cd lucid-charity-ethereumdapp

All code for the dApp will be maintained within this folder.

Execute “truffle init” command to create below folders within C:\Temp\lucid-charity-ethereumdapp

contracts/: Directory for Solidity contracts
migrations/: Directory for scriptable deployment files
test/: Directory for test files for testing your application and contracts
truffle.js: Truffle configuration file.

C:\Temp\lucid-charity-ethereumdapp>truffle init
Downloading…
Unpacking…
Setting up…
Unbox successful. Sweet!

Commands:

Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test

Create a smart contract solidity file charity.sol in C:\Temp\lucid-charity-ethereumdapp\contracts

pragma solidity ^0.4.0;

contract charity{

function get_donation_details(uint donation_amount) public returns (string){
if (donation_amount > 0){
if (donation_amount <= 5000){
return ‘SILVER’;
}

if (donation_amount > 5000 && donation_amount <= 10000){
return ‘GOLD’;
}
}
else{
return ‘Invalid Amount’;
}
}

function donation_message() public returns (string){
return ‘Welcome to the Charity Dapp’;
}
}

Modify the 2_deploy_contracts.js script to deploy charity.sol into blockchain

File Navigation — C:\Temp\lucid-charity-ethereumdapp\migrations

var Charity = artifacts.require(“./charity.sol”);

module.exports = function(deployer) {
deployer.deploy(Charity);
};

Create app.component.html to design the below web page.

This post has guided you to create and interact with a dApp and verify the transaction that is approved and posted into a local Ethereum test blockchain.