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 ( https://faucet.rinkeby.io/)
4. To compile Solidity use Solidity Compiler (https://remix.ethereum.org/)
5. Etherscan ( https://etherscan.io/)
6. Oneclickdapp (to demonstrate the implementation of Solutions transformed based upon the real-world problem, URL — https://oneclickdapp.com/)
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:
- 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 https://faucet.rinkeby.io/ 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 @mayankcloud 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 https://remix.ethereum.org/ as we are using rinkeyby Test Network on the browser.
Below is the snip of Sublime IDE, how it looks like –
20. Click on Create new file in the Browser storage explorer button (highlighted) as mentioned in below snip –
21. Assign a name to the file, for the time sake we have named it as Untitled.sol as mentioned in below snip -
“.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 https://etherscan.io/
31. Search with the account to which Contract is deployed
“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: https://oneclickdapp.com/
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
http://mayankagr.in/images/FIRST_CONTRACT.pdf
Hit the follow button if you want to know more about the latest trends in Information Technology.
Find me on Instagram -
Find me on Google Scholar -
https://scholar.google.com/citations?hl=en&user=XRUSDkwAAAAJ
Find me on Snapchat -
