Demonstrating how to create an end-to-end Web-based application that uses blockchain for user authentication, read, and write access to the data stored on the blockchain

1. WEB3 FULL-STACK
CODE DEVELOPMENT
End-to-end Web3 coding experience
1/6/2022

2. DISCLAIMER
§ The views and opinions expressed by the Presenter are those of the Presenter.
§ Presentation is not intended as legal or financial advice and may not be used as legal or
financial advice.
§ Every effort has been made to assure this information is up-to-date as of the date of
publication.

3. PLAN FOR TODAY
1.Create a simple Web application that
interacts with a contract on
Blockchain
2.Create a script that can access data
from a contract on Blockchain

4. WEB3 BROWSER APPLICATION
Web browser
Single-page Web
Application
Crypto wallet plugin
Blockchain
RPC Calls
Web3js
Library

5. SMART CONTRACT (SOLIDITY)
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.7.0 <0.9.0;
contract Storage {
uint256 number;
function store(uint256 num) public {
number = num;
}
function retrieve() public view returns (uint256){
return number;
}
}

6. REMIX

7. DEPLOYING SMART CONTRACT TO
BLOCKCHAIN

8. INTERACTING WITH THE SMART
CONTRACT FROM REMIX

9. CONTRACT ABI
[
{
"inputs": [],
"name": "retrieve",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "num",
"type": "uint256"
}
],
"name": "store",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]

10. APPLICATION HTML
https://github.com/leybzon/Storage/blob/main/index.

11. CONNECTING TO METAMASK
function connect() {
console.log('Calling connect()')
ethereum
.request({ method: 'eth_requestAccounts' })
.then(handleAccountsChanged)
.catch((err) => {
if (err.code === 4001) {
// EIP-1193 userRejectedRequest error
// If this happens, the user rejected the connection request.
console.log('Please connect to MetaMask.');
$('#status').html('You refused to connect Metamask')
} else {
console.error(err);
}
});
}

12. GETTING VALUE FROM CONTRACT
async function getValue() {
console.log('GetValue')
const contractFirst = new web3.eth.Contract(
abi,
contactAddress
);
contractFirst.methods.retrieve().call().then(function
(result) {
$('#getValue').html(result)
});
}

13. SETTING VALUE IN CONTRACT
async function setValue() {
console.log('Set Value')
input_value = $('#value').val()
if(input_value.trim() == '') {
input_value = 0
}
if(!isNaN(input_value)) {
input_value = parseInt(input_value)
}
const contractFirst = new web3.eth.Contract(
abi,
contactAddress
);
contractFirst.methods.store(input_value).send({from:currentAccount}).then(function
(result) {
console.log(result);
$('#getValue').html(input_value)
});
}

14. DEMO https://www.leybzon.com/web3/storage/index.h

15. READ.JS
const Web3 = require('web3');
const web3 = new
Web3('https://kovan.infura.io/v3/edb1d45f792244bfa97c13d84a809090');
const fs = require("fs");
//const storageABI = require('storageabi.json');
const storageAddress = "0xCB81435D3409F4e30CfD0410380A8F5F51a3B07a";
const storageContractAbi = fs.readFileSync("storageabi.json");
let storageABI = JSON.parse(storageContractAbi);
console.log(storageABI);
const storageContract = new web3.eth.Contract(storageABI, storageAddress);
storageContract.methods.retrieve().call().then(function (result) {
console.log("retrieve() result: ", result);
});

16. DEMO

18. ABOUT PRESENTER
Gene Leybzon
https://www.linkedin.com/in/leybzon/
https://www.meetup.com/members/90
74420/
https://www.leybzon.com
https://clarity.fm/geneleybzon