Webpage interaction with Ethereum

Quite a lot of materials appeared on the network about development for Ethereum blockchain and about smart contracts, as well as about how to create these smart contracts .

In the end, there is official documentation and stackoverflow .

At the same time, I don’t want to understand the documentation for a long time, and many developers recently want to quickly feel something with their hands and write something under the ethereum, and since there are a lot of questions and sources are scattered, I decided to put together a simple Step-by-step manual with pictures for creating your first dapp (from the decentralized app) - a decentralized application. It will be a bundle of a smart contract with a web interface. That is, with the help of the web you can get information from the blockchain and shove it there. I will try to be brief, I will explain the steps along the way.

Do it once: set geth
')
There is nothing complicated here - download the distribution from here to your system, install it in a folder.


Then we go to the folder explorer, and we see something like the following:


Right in the line where the path to the folder is written, call the command line: instead of the path type cmd in it, press Enter.


At the command prompt, call geth --dev --rpc --rpcport 8545 --rpcaddr 0.0.0.0 --rpccorsdomain "*" --rpcapi "eth,web3,personal" console

The result is something like this:



Congratulations, your local blockchain in develpment mode has been successfully created! Moreover, you asked geth to work in the RPC server mode (from the remote procedure call) and for it to listen to port 8545.

If you ruin something in your test blockchain, it’s okay, you can re-create it at any time, after deleting all the files from the folder C:\Users\ _ \AppData\Local\Temp\ethereum_dev_mode\geth\chaindata . If you want to store your local blockchain in another folder, then you have to ask about geth like this: geth --dev --datadir "D:\testlocalchain"

All possible flags and parameters of your current version of geth can be obtained, as usual, by calling your geth console with the help flag: geth --help

You can start using web3.js right now, but I will suggest doing a couple more actions.

Do two: run the wallet program

We download and install ethereum-wallet. For example, Mist

In the folder where you put it we find the file Mist.exe and create a shortcut for it.


In the properties of the shortcut we specify --rpc http://localhost:8545


and run it.

Now you can create a main wallet from this program by clicking on “Add account”.


Here, I think, you will understand.

Do three: deploy the easiest contract to the local blockchain

Before you install a new contract, your account should be at least a little broadcast.
How to get it? Go to our geth-console and write the miner.start() command there, then after a couple of seconds, right above the running lines, we call miner.stop() and hit Enter

In a couple of seconds, I got 48 local airs, which was immediately reflected in the Mist wallet. Now you can proceed to the installation of a simple contract.

In Mist go to the section Contracts -> Set a new contract

Insert into the Source code of the Solidity contract

 pragma solidity ^0.4.13; contract Simple{ uint256 private a; function getA() constant returns (uint256) { return a; } function setA(uint256 newValue) { a = newValue; } } 

Select Simple from the drop-down list on the right and click install. Enter the wallet password. Thereby you have created a transaction that needs to be further minted. Run the miner.start() console miner.start() and get our new contract.
After the transaction receives 12 confirmations, stop the miner. Now we are waiting for the most interesting!

Do four: download web3.js library and create a simple html

https://github.com/ethereum/web3.js/tree/develop/dist Take the web3.js file from there and save it to a folder. In the same folder, create a file a.html with the following content:

 <script src="web3.js"></script> <script type="text/javascript"> try { web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545")); alert (web3.eth.accounts[0]); } catch (error) { alert(error); } </script> 

If your geth is currently running in the RPC server mode, then launching this page you will see something like



That is, this page will show the address of your wallet. Or else:



if the server is not running, or some other connection error has occurred.

Typically, a typical task is the interaction of a page with a contract.

Do five: interact with the contract

In order to contact a contract from a page, you need to know two things: its address and its ABI, the interface for interacting with this contract. We can look at the address in Mist.



In my case, it is like this: 0x000193dC23d006DFd048533e31C66B0f0Dd9aEbA

We can call the function SetA of our contract right here.



I set 777. Click execute. Now we need to lock up this transaction by calling miner.start()

Now I want to get this value on our web page. Go to remix.ethereum.org and create a new file simple.sol and in the details section we can find our ABI interface. I am not writing in great detail, the benefit of getting this very interface, knowing the contract code, is not so difficult. In our case, it looks like this:

 [{"constant":true,"inputs":[],"name":"getA","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newValue","type":"uint256"}],"name":"setA","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}] 

Now, we’ll go back to editing our a.html file and inside the script, delete the first alert and write the following lines to end up with the following:

 <script src="web3.js"></script> <script type="text/javascript"> try { web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545")); var SimpleABI = [{"constant":true,"inputs":[],"name":"getA","outputs": [{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newValue","type":"uint256"}],"name":"setA","outputs": [],"payable":false,"stateMutability":"nonpayable","type":"function"}]; var ContractAdress = "0x000193dC23d006DFd048533e31C66B0f0Dd9aEbA"; var SimpleContract = web3.eth.contract(SimpleABI); var Simple = SimpleContract.at(ContractAdress); alert (Simple.getA()); } catch (error) { alert(error); } </script> 

We update the page, and what do we see?



All profit. In the same way, it is possible from JavaScript to call the functions of your contract, passing them the parameters and everything else there, which allows web3.js. And it allows a lot (smoke docks).

To work with a combat blockchain, it will be necessary either to keep a synchronized node on your machine, or to know the address and port of some RPC server. All, all good!