Blockchain with Web Development

Published in

Coinmonks

8 min readOct 6, 2018

When I started learning blockchain I was so confused about connecting websites with blockchain. Initially, for building a DAPP with blockchain I have used truffle, ganache, meta-mask, and web3-js.

tl;dr :: This article is about setting up a website to interact with blockchain(including code) and it's architectural flow. So if you are interested in learning how does the architecture flow when blockchain interacts with websites . Please continue :-)

As a beginner, I only know basic web development like HTML, CSS, JS, NodeJS. So I don’t have many options to choose a truffle box for developing my application.

Truffle is a framework called famously called as “swiss army knife of blockchain” which is basically a template which helps us in writing solidity code, test code, deploy it and interact with frontend of web development.

For Example : If you are working on a web application which includes reactJs and blockchain. Truffle will provide a truffle box with some sample code showing the interaction of reactjs with blockchain, a proper testing setup for your solidity code and many other functionalities

Ganache is an application which sets up test ethereum network with 10 initial accounts each with 100 ethers and is pre-programmed to run mining automatically.

Truffle box provides direct functions but understanding the entire workflow of how blockchain interacts with websites is important else there is no point of making an application to learn blockchain. Because all these frameworks make life easier by providing an abstraction to develop blockchain applications. Then I decided to figure out how things exactly work by avoiding use of these frameworks and tools. Let’s have a look at how they work.

Observe the below figure .My entire explanation follows this figure. This represents how blockchain interacts with websites.

I am considering that we know following things before starting this development exercise .

Usage of HTML, CSS, Java Script and nodeJS to develop basic web applications
Solidity is used to write smart contracts.
geth console to create some accounts (public & private key pairs) and start mining by creating a local block chain. If you like to get hands on about this please go here

Ethereum : How to setup a local test node with initial ether balance using geth

I had to spend unnecessary amount of time to setup an Ethereum local test node/network with initial ether balance (ie…

medium.com

web3Js is used to access functions and variables in my solidity code from my web page and make transactions .

Note : Please go through the above blog .Because this entire blog is based on the geth setup from above blog.

Consider there is a website hosted on local server and now we need to add block chain functionality to the website .Lets make a website which calls a function renderHelloWorld()in solidity and prints the returned value on web page .

Here is our helloWorld solidity contract

Now we have solidity code and lets compile it using custom nodejs script using solcJS module.
Compiling solidity code gives us ABI(application binary interface) and byte code.

here is explanation of what ABI and byte code are

In c++ or java, we compile code and get binary code for execution .Byte code is similar to that. It is used to deploy smart contract on block chain .
ABI helps web3Js while talking to block chain. Because our code don’t know exact structure of block chain .By structure i mean name, input, output, type of the function .

ABI says to frontend code : whenever you talk to block-chain use me to access any specific object in solidity code deployed in block chain .

If you like to read more about ABI go through this

Enough theory lets generate some ABI and Byte code using nodejs script . Please go to below git-hub repository and download the code.

abhilashreddyy/hello-world-webdev-with-blockchain

repo supporting my medium blog. Contribute to abhilashreddyy/hello-world-webdev-with-blockchain development by creating…

github.com

in this repo you should observe file structure something like this

compile.js compiles the solidity code to generate ABI and byte code

Compiling solidity code :

This code snippet imports solc(solidity compiler) module which is used to compile solidity code .First command line argument process.argv[2] represents path of solidity code and second argument process.argv[3] represents output files path.

Read solidity code from provided path and compile it

Writes ABI and byte code generate to files in hello_world folder

Lets compile compile.js using command node .\compile.js hello_world.sol ..\hello_world .Now you should be able to find two files helloWorld.abi & helloWorld.codein hello_world folder

Now we have our solidity code compiled and got ABI and bytecode as a result of compilation .

To access the functions and variables in solidity from web page we use web3JS. It requires two things.

Address of the block chain. Because we deploy our application in main network along with many other smart contracts. So basically we need something to uniquely identify our application deployed ,here address is a unique identifier of our deployed contract on block chain.
ABI(application binary interface) as discussed earlier

Generate address :

Now geth(go-ethereum) console comes into picture. geth is a superhero with many supernatural powers some of them which we use in our application are …

It can create accounts with public and private keys along with some fake ethers
It can initialize test block chain network at a specific port on localhost based on a genesis block.
It can do mining on a specific block chain network deployed on specific port. If you have gone trough this blog you would have observed something like this

geth --identity “LocalTestNode” --rpc --rpcport 8080 --rpccorsdomain “*” --datadir ~/mychain/data/ --port 30303 --nodiscover --rpcapi db,eth,net,web3,personal --networkid 1999 --maxpeers 0 console

here a local ethereum node is setup on port 8080. This means currently our ethereum network provider is running at “localhost:8080”.

Setup a local block chain network as showed in this blog and start mining using miner.start()in the geth console .Remember, this blog is really important for further understanding. So please go and setup a block chain with some fake ethers and start your geth console and do mining as per this blog.

Coming back to address ,now lets understand compile_and_deploy/deploy.js to generate address by running this nodeJS code

import required modules and set the provider’s address .Currently our provider is geth console running on localhost:8080

Read the ABI and byte code which are generated during compilation and generate an object to perform a sample transaction and get the address

Unlock the account which is used to make transaction .In this case we are using first account in geth ie : web3.eth.accounts[0].

web3

Deploy a new smart contract ,for deploying we send code variable which is byte code of the smart contract ,maximum amount of gas and account public key details to function.

wait for the geth console, which is currently acting as a miner for validating our transaction and appending it to block chain .In below code we are waiting for a transaction receipt and address which can be returned only when our transaction is successfully added to block chain.

Lets take a look at complete deploy.js file

Compile the above code in terminal node deploy.js .By doing this address will get displayed in console.

At this stage we have ABI, byte code and address where our smart contract is deployed. Lets setup web3 for interacting with smart contract.

java script code at front-end :

Set address of the web3 provider ,create an object of web3 class and define a variable account with public key of account.

print_hello() function calls solidity function renderHelloWorld using the account we declared previously

here is the final piece of code ,this code uses ABI and address of smart contract to calls hello world function .If the account is locked then it prompts for the password else hello world function is called directly .Observe the above piece of code where print_hello() function interacts with solidity code .

if everything goes fine you should see something like this in your web browser

NOTE : when ever you make a call to function or do transaction make sure that your node is mining on geth console, because every transaction should be included in block chain.So until we start mining ,there is basically no one to validate our transaction and add to block chain .

Take a look at this figure once more .After reading the blog now you might be able to understand it better.

that’s it guys and gals i hope you understand what i wrote. If not please feel free to comment .If some piece of code is not not working or if you are unable to understand something in text content I have explained .

Conclusion : Any one who are just getting into blockchain career ,Please don’t use all the frame works and short cuts for developent. Learning things from scratch will definitely help you in long run. Because good buildings stand on strong basement .

I am just a beginner in writing blogs .This is my first blog and I am planning to write more .My next blog is going to be about how to make applications completely decentralize using IPFS protocol and Block chain. If you like to get notified follow me . Comment out of you have any doubts regarding my article. Finally don’t forget to clap ,It help me count how many number of people i have helped with my writing and keep me motivated to write further. Ok, lets meet in my next blog ….

Until then

Join Coinmonks Telegram Channel and Youtube Channel get daily Crypto News