Blockchain Hands-On (Browser-Based)

By Nagendra Singh Yadav on ALTCOIN MAGAZINE

Why MetaMask? Type of cryptocurrency accounts, Ethereum, FAUCET, Rinkeby Authenticated Faucet, Sublime IDE for Solidity, Etherscan, and Oneclickdapp

“While using MetaMask always ensure that you have opened the correct account when you’re performing an operation, in case of Contract Deployment because the account which you have opened currently in MetaMask, the contract will be deployed to that particular account.”

Introduction

In this blog, we’ll cover tools which can be used in blockchain to demonstrate transaction. Before performing anything in blockchain, one requires cryptocurrency, and to hold those cryptocurrencies, one must have an account. So in this blog, I’m going to cover below applications:

1. METAMASK

2. Twitter

3. Rinkeby Authenticated Faucet ( )

4. To compile Solidity use Solidity Compiler ()

5. Etherscan ( )

6. Oneclickdapp (to demonstrate the implementation of Solutions transformed based upon the real-world problem, URL — )

The appearance of these applications completely depends on their usage and expected outcomes.

Why METAMASK?

If one wants to interact with Ethereum, we require an external operation account, so this external account is METAMASK which holds cryptocurrency, its name is ether, so in order to get started one must have an account created in METAMASK.

Type Of Cryptocurrency Accounts

1. Browser-Based

for any browser-based cryptocurrency operation we require METAMASK, and in order to access this METAMASK, one must have METAMASK extension installed in Google Chrome.

2. Mobile-Based

Ethereum

Ethereum is an open-source Distributed platform that is used to create a smart contract. A smart contract can be considered as scripts in a few places.

Ether is a cryptocurrency produced by the Ethereum platform and used to compensate mining nodes of computations performed. Every Ethereum account will have ether and ether can be transferred from one account to another account.

FAUCET

the one which contains the funds is FAUCET.

Getting Started With METAMASK

In order to get started with METAMASK, one must have METAMASK install in Google chrome and added in chrome Extension. Follow the below steps:

  1. Search for METAMASK on google and add the extension in your chrome browser.

2. Once added and installed in chrome, click on Get Started. Click on Create a Wallet button to get started with METAMASK.

3. Over this page, agree with all the Terms and conditions by selecting I agree button.

4. Create a Password of your own choice but that should be in correspondence with password rules.

5. Once you have created a password, the user will be navigated to SECRET PHRASE. Over this page, copy your secret Phrase just in case if you forget your password, u can unlock your account by using SECRET PHRASE Utility. After copying your SECRET PHRASE select> Next Button. After this, User is navigated to Confirm your Secret Backup Phrase page, over here, one has to select the Phrase in sequence exactly what was followed in SECRET PHRASE page (at the time of copying SECRET PHRASE). Once done, click on Confirm.

(we cannot provide snapshots for this step because we want to maintain the privacy of the user, whose account was used to demonstrate usage of what we are learning)

6. The below page is displayed, once all the setups are completed stated in step 5.

7. Once all the above steps are completed, the user will be navigated into the below page, The address 0x406A73c2A92D50ac8d43Ac4E1636c7804E0B1d3B uniquely identifies my account. This is the address we have to use to get Ether. This Unique address can be found under the Details button at the dashboard.

Rinkeby Authenticated Faucet

Rinkeby Authenticated Faucet is a tool that is used to request Ether. For requesting ether, we require twitter account logged in on desktop/ laptop, where one wants to carry out all the operations. Once logged into twitter navigate to and request funds via twitter by clicking on tweet Hyperlink as displayed below –

Steps to get ether or funds –

8. Navigate back to MetaMask, Copy the Unique address which is located under the Details button at the dashboard. For example — my unique address in this example is

0x406A73c2A92D50ac8d43Ac4E1636c7804E0B1d3B

Copy and paste the address, in the highlighted part as mentioned below-

Follow on twitter to get virtual ether for testing purpose, once followed mention him in your tweet as mentioned below –

9. Navigate to the Home page of your twitter account, under your tweets Copy link to Tweet the one in which you have requested ether (to obtain real-time funds).

10. Once the link is copied as stated in step 9, navigate back to Rinkeby Authenticated Faucet page, and paste the URL in this page as mentioned below and select “18.75 Ethers /3 days” from Give me ether dropdown-

Once done, you’ll see a message with your unique address status as funded mentioned in an above snip.

11. Now, navigate to MetaMask, refresh the page to verify if funds are received. Gotta, you’ll not see any changes over here because you have opened Main Ethereum Network only the real ether can be found here. To verify your ether (testing purpose), change your environment to Rinkeby Test Network.

12. Once done, bingo u will be able to see your ethers as mentioned in below snapshot —

How To Transfer Ethers Between Two MetaMask Accounts?

In order to transfer ethers between two MetaMask accounts, one must have two MetaMask accounts. As till now, we have created 1 MetaMask Account, so let’s get started and create another MetaMask Account.

13. Select create account option as mentioned in below snip –

Give an account name of your own choice. For testing sake, we have named our 2nd account as “Account2” and click on the Create button.

14. Upon successful account creation, one will be displayed a page as mentioned below –

Copy the logical address of your account 2

“in our case account 2 address is 0xBa4c0df0329d8bBf2749296842838b17AD22Ba15.”

15. Switch back to account 1 and click on the send button.

16. Paste the Account 2 logical address over here as mentioned in below snip and click on Next button –

17. In below snapshot, Gas fees are being charged for test transaction, while coding, the number of gas fees charged per ether transaction is based on code complexity and based upon code complexity gas fees will be charged.

Click on Confirm Button, and wait until the transaction gets completed.

18. On the account 1 dashboard, one can see the transaction is completed successfully and ether is sent to account 2 as mentioned in below snip –

19. Navigate to Account 2 in order to verify, if ether is received successfully or not

Sublime IDE For Solidity

To compile solidity we use as we are using rinkeyby Test Network on the browser.

Below is the snip of Sublime IDE, how it looks like –

The Sublime IDE

20. Click on Create new file in the Browser storage explorer button (highlighted) as mentioned in below snip –

Create new file in the Browser storage explorer (Highlighted)

21. Assign a name to the file, for the time sake we have named it as Untitled.sol as mentioned in below snip -

Untitled.sol

“.sol is the extension name used for Solidity files.”

22. Copy-paste the Below code, to be executed in sublime IDE –

pragma solidity ^0.4.0;

contract person

{

string private name;

uint private age;

function setName(string newName) public

{

name=newName;

}

function getName()public constant returns(string)

{

return name;

}

function setAge(uint newAge) public

{

age=newAge;

}

function getAge()public constant returns(uint)

{

return age;

}

}

The above code will create an application with 2 fields name and age and you can first set the age and name, later one can view it what’s being saved.

“Blockchain DB is used for storing i.e. name, Age. Usually, one admin is created and others can be added as a user in Blockchain DB.

The person who creates and deployed smart contracts is admin and rest are GUI accessible users, who can simply use UI to enter values in Application.

Over here we are all ADMINS.”

23. Go to the compiler (Highlighted) -

24. select compiler version as 0.4.25 from Compiler dropdown and compile the code.

25. Click on Compilation Details buttons to view the program compilation details –

26. Click on deploy and run transaction icon as mentioned in below snip (highlighted) -

Select Environment as inject Web 3 (highlighted) from Environment dropdown.

27. Click on deploy (we’ve used Account 1 to deploy smart contract)-

28. Select Confirm on Pop up and wait for the transaction to get completed

29. In MetaMask one can see contract is displayed as in below snapshot –

One could see, Contract is deployed as stated in an above snip.

Etherscan

Etherscan is a tool where one can verify if their contract was displayed successfully or not. So we are gonna lookup in the tool with the logical address of account 1 because we have used account 1 for deploying the Contact.

30. Navigate to

31. Search with the account to which Contract is deployed

EtherScan UI

“Once found, all is good!”

Oneclickdapp

Here one can create their app of own choice, but remember back there, we have executed code in Sublime IDE for age and name write and read functionality. So we can create an application with only those two fields –

URL:

OneClickdApp

32. Click on Create a dApp for free button.

33. Click Connect.

34. Provide an application name.

35. Go to solidity compiler and click on ABI clipboard

36. In the one click dApp window — paste the copied ABI code into Interface ABI –

37. Next>select fields as mentioned below and address will be our account address on metamask.

The network will be rinkeyby because we are using the same in metamask UI

38. Click the next arrow > Click Createdapp button, which is free.

39. The app is created successfully.

40. Enter the age and name and a corresponding success message is displayed on the popup window. Users can read and write values to the fields as mentioned in an above snip.

Disclaimer

This document is designed for information purposes only. The author’s intention is to describe Blockchain Hands-on for Browser-based operations and its key areas. For any suggestions, one can write back to the author, if required. This article is prepared based upon the full knowledge of the author.

The knowledge is acquired from sessions of Mayank Aggarwal, Cloud Computing/BlockChain/FogComputing/NDN/Python/LibVirt IIT-Delhi(SFRF),Dehradun, Uttarakhand, India.

References

Hit the clap button if you like my content. Hit the follow button if you want to know more about the latest trends in Information Technology.

Find me on LinkedIn


The Capital

The Capital (former Altcoin Magazine) is a social financial…

Nagendra Singh Yadav

Written by

Ex — Infoscion, Professional Software tester, writer, Blogger, and Researcher. My words speak well about my work. You don’t believe me, check out my blogs.

The Capital

The Capital (former Altcoin Magazine) is a social financial news aggregator powered by Bitcoin

More From Medium

More from The Capital

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade