SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Downloaden Sie, um offline zu lesen
WEB3 FULL-STACK
CODE DEVELOPMENT
End-to-end Web3 coding experience
1/6/2022
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.
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
WEB3 BROWSER APPLICATION
Web browser
Single-page Web
Application
Crypto wallet plugin
Blockchain
RPC Calls
Web3js
Library
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;
}
}
REMIX
DEPLOYING SMART CONTRACT TO
BLOCKCHAIN
INTERACTING WITH THE SMART
CONTRACT FROM REMIX
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"
}
]
APPLICATION HTML
https://github.com/leybzon/Storage/blob/main/index.
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);
}
});
}
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)
});
}
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)
});
}
DEMO https://www.leybzon.com/web3/storage/index.h
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);
});
DEMO
Web3 Full Stack Development
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

Weitere ähnliche Inhalte

Was ist angesagt?

►TOP 13 • Blockchain Use Cases
►TOP 13 • Blockchain Use Cases ►TOP 13 • Blockchain Use Cases
►TOP 13 • Blockchain Use Cases Andrea Soto
 
Is web 3 an overengineered solution
Is web 3 an overengineered solutionIs web 3 an overengineered solution
Is web 3 an overengineered solutionBellaj Badr
 
Blockchain basics
Blockchain basicsBlockchain basics
Blockchain basicsRomit Bose
 
Blockchain Study(1) - What is Blockchain?
Blockchain Study(1) - What is Blockchain?Blockchain Study(1) - What is Blockchain?
Blockchain Study(1) - What is Blockchain?Fermat Jade
 
Introduction to Web 3 - Tony Aube at WAQ19
Introduction to Web 3 - Tony Aube at WAQ19Introduction to Web 3 - Tony Aube at WAQ19
Introduction to Web 3 - Tony Aube at WAQ19Tony Aubé
 
Blockchain
BlockchainBlockchain
BlockchainSai Nath
 
Blockchain - HyperLedger Fabric
Blockchain - HyperLedger FabricBlockchain - HyperLedger Fabric
Blockchain - HyperLedger FabricAraf Karsh Hamid
 
Web3: a simple and visual explanation
Web3: a simple and visual explanationWeb3: a simple and visual explanation
Web3: a simple and visual explanationTotal Identity
 
Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...
Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...
Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...Edureka!
 
Blockchain Essentials and Blockchain on Azure
Blockchain Essentials and Blockchain on AzureBlockchain Essentials and Blockchain on Azure
Blockchain Essentials and Blockchain on AzureNuri Cankaya
 
An Investor's Guide to Web3 / Crypto / Blockchain
An Investor's Guide to Web3 / Crypto / BlockchainAn Investor's Guide to Web3 / Crypto / Blockchain
An Investor's Guide to Web3 / Crypto / BlockchainBernard Leong
 
Building Sustainable Metaverse Infrastructure Webinar
Building Sustainable Metaverse Infrastructure WebinarBuilding Sustainable Metaverse Infrastructure Webinar
Building Sustainable Metaverse Infrastructure WebinarAlex G. Lee, Ph.D. Esq. CLP
 
Introduction to Blockchain
Introduction to BlockchainIntroduction to Blockchain
Introduction to BlockchainJordan Harris
 
Examples of Smart Contracts
Examples of Smart ContractsExamples of Smart Contracts
Examples of Smart Contracts101 Blockchains
 
Blockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptxBlockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptxDr. Mohamed Torky
 

Was ist angesagt? (20)

►TOP 13 • Blockchain Use Cases
►TOP 13 • Blockchain Use Cases ►TOP 13 • Blockchain Use Cases
►TOP 13 • Blockchain Use Cases
 
Is web 3 an overengineered solution
Is web 3 an overengineered solutionIs web 3 an overengineered solution
Is web 3 an overengineered solution
 
Blockchain basics
Blockchain basicsBlockchain basics
Blockchain basics
 
Blockchain Study(1) - What is Blockchain?
Blockchain Study(1) - What is Blockchain?Blockchain Study(1) - What is Blockchain?
Blockchain Study(1) - What is Blockchain?
 
Introduction to Web 3 - Tony Aube at WAQ19
Introduction to Web 3 - Tony Aube at WAQ19Introduction to Web 3 - Tony Aube at WAQ19
Introduction to Web 3 - Tony Aube at WAQ19
 
Blockchain
BlockchainBlockchain
Blockchain
 
Blockchain - HyperLedger Fabric
Blockchain - HyperLedger FabricBlockchain - HyperLedger Fabric
Blockchain - HyperLedger Fabric
 
Web3: a simple and visual explanation
Web3: a simple and visual explanationWeb3: a simple and visual explanation
Web3: a simple and visual explanation
 
Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...
Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...
Blockchain Technology | Blockchain Explained | Blockchain Tutorial | Blockcha...
 
Web3 Fundamentals
Web3 FundamentalsWeb3 Fundamentals
Web3 Fundamentals
 
Blockchain Essentials and Blockchain on Azure
Blockchain Essentials and Blockchain on AzureBlockchain Essentials and Blockchain on Azure
Blockchain Essentials and Blockchain on Azure
 
BLOCKCHAIN
BLOCKCHAINBLOCKCHAIN
BLOCKCHAIN
 
Web 3.0- Future of Internet
Web 3.0- Future of InternetWeb 3.0- Future of Internet
Web 3.0- Future of Internet
 
An Investor's Guide to Web3 / Crypto / Blockchain
An Investor's Guide to Web3 / Crypto / BlockchainAn Investor's Guide to Web3 / Crypto / Blockchain
An Investor's Guide to Web3 / Crypto / Blockchain
 
Blockchain concepts
Blockchain conceptsBlockchain concepts
Blockchain concepts
 
Building Sustainable Metaverse Infrastructure Webinar
Building Sustainable Metaverse Infrastructure WebinarBuilding Sustainable Metaverse Infrastructure Webinar
Building Sustainable Metaverse Infrastructure Webinar
 
web3
web3web3
web3
 
Introduction to Blockchain
Introduction to BlockchainIntroduction to Blockchain
Introduction to Blockchain
 
Examples of Smart Contracts
Examples of Smart ContractsExamples of Smart Contracts
Examples of Smart Contracts
 
Blockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptxBlockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptx
 

Ähnlich wie Web3 Full Stack Development

Get Ready for Coinbase Node
Get Ready for Coinbase NodeGet Ready for Coinbase Node
Get Ready for Coinbase NodeTinaBregovi
 
Accelerate Blockchain slideshare
Accelerate Blockchain slideshareAccelerate Blockchain slideshare
Accelerate Blockchain slideshareCertus Solutions
 
TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...
TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...
TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...Guduru Lakshmi Kiranmai
 
[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...
[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...
[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...WSO2
 
Wwc developing hyperledger applications v4
Wwc  developing hyperledger applications v4Wwc  developing hyperledger applications v4
Wwc developing hyperledger applications v4LennartF
 
Ethereum in Enterprise.pptx
Ethereum in Enterprise.pptxEthereum in Enterprise.pptx
Ethereum in Enterprise.pptxGene Leybzon
 
Ibm blockchain - Hyperledger 15.02.18
Ibm blockchain - Hyperledger 15.02.18Ibm blockchain - Hyperledger 15.02.18
Ibm blockchain - Hyperledger 15.02.18TelecomValley
 
Interconnect_Blockchain One Year On
Interconnect_Blockchain One Year OnInterconnect_Blockchain One Year On
Interconnect_Blockchain One Year OnKathryn Harrison
 
Blockchain on Azure
Blockchain on AzureBlockchain on Azure
Blockchain on AzureNuri Cankaya
 
Deploying and Managing a Global Blockchain Network
Deploying and Managing a Global Blockchain NetworkDeploying and Managing a Global Blockchain Network
Deploying and Managing a Global Blockchain NetworkDuncan Johnston-Watt
 
Introduction to Hyperledger Composer
Introduction to Hyperledger ComposerIntroduction to Hyperledger Composer
Introduction to Hyperledger ComposerSimon Stone
 
apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...
apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...
apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...apidays
 
The design and implementation of trade finance application based on hyperledg...
The design and implementation of trade finance application based on hyperledg...The design and implementation of trade finance application based on hyperledg...
The design and implementation of trade finance application based on hyperledg...Conference Papers
 
Ibm system storage solutions handbook
Ibm system storage solutions handbook Ibm system storage solutions handbook
Ibm system storage solutions handbook Diego Alberto Tamayo
 
Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...
Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...
Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...DevOps for Enterprise Systems
 
Doag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_final
Doag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_finalDoag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_final
Doag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_finalOPITZ CONSULTING Deutschland
 
02 - Introduction to Hyperledger Fabric
02 - Introduction to Hyperledger Fabric  02 - Introduction to Hyperledger Fabric
02 - Introduction to Hyperledger Fabric Merlec Mpyana
 

Ähnlich wie Web3 Full Stack Development (20)

Coinbase Node
Coinbase NodeCoinbase Node
Coinbase Node
 
Get Ready for Coinbase Node
Get Ready for Coinbase NodeGet Ready for Coinbase Node
Get Ready for Coinbase Node
 
Accelerate Blockchain slideshare
Accelerate Blockchain slideshareAccelerate Blockchain slideshare
Accelerate Blockchain slideshare
 
TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...
TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...
TO DEVELOP A DECENTRALIZED APPLICATION TO DEMONSTRATE THE USAGE OF CRYPTOCURR...
 
[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...
[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...
[WSO2Con EU 2018] Blockchain in the Business API Ecosystem - API Consumption ...
 
Wwc developing hyperledger applications v4
Wwc  developing hyperledger applications v4Wwc  developing hyperledger applications v4
Wwc developing hyperledger applications v4
 
Ethereum in Enterprise.pptx
Ethereum in Enterprise.pptxEthereum in Enterprise.pptx
Ethereum in Enterprise.pptx
 
Ibm blockchain - Hyperledger 15.02.18
Ibm blockchain - Hyperledger 15.02.18Ibm blockchain - Hyperledger 15.02.18
Ibm blockchain - Hyperledger 15.02.18
 
Interconnect_Blockchain One Year On
Interconnect_Blockchain One Year OnInterconnect_Blockchain One Year On
Interconnect_Blockchain One Year On
 
Blockchain on Azure
Blockchain on AzureBlockchain on Azure
Blockchain on Azure
 
Deploying and Managing a Global Blockchain Network
Deploying and Managing a Global Blockchain NetworkDeploying and Managing a Global Blockchain Network
Deploying and Managing a Global Blockchain Network
 
Introduction to Hyperledger Composer
Introduction to Hyperledger ComposerIntroduction to Hyperledger Composer
Introduction to Hyperledger Composer
 
Blockchain spreads
Blockchain spreadsBlockchain spreads
Blockchain spreads
 
apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...
apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...
apidays LIVE London 2021 - Open Insurance & Smart Contracts by Giovanni Lesna...
 
The design and implementation of trade finance application based on hyperledg...
The design and implementation of trade finance application based on hyperledg...The design and implementation of trade finance application based on hyperledg...
The design and implementation of trade finance application based on hyperledg...
 
Ibm system storage solutions handbook
Ibm system storage solutions handbook Ibm system storage solutions handbook
Ibm system storage solutions handbook
 
Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...
Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...
Making Blockchain Real for Business at the "z Systems Agile Enterprise Develo...
 
Doag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_final
Doag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_finalDoag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_final
Doag 2018 eine_reise_durch_die_blockchain_applikationsentwicklung_final
 
Block chain technology
Block chain technologyBlock chain technology
Block chain technology
 
02 - Introduction to Hyperledger Fabric
02 - Introduction to Hyperledger Fabric  02 - Introduction to Hyperledger Fabric
02 - Introduction to Hyperledger Fabric
 

Mehr von Gene Leybzon

Generative AI Application Development using LangChain and LangFlow
Generative AI Application Development using LangChain and LangFlowGenerative AI Application Development using LangChain and LangFlow
Generative AI Application Development using LangChain and LangFlowGene Leybzon
 
Generative AI Use cases for Enterprise - Second Session
Generative AI Use cases for Enterprise - Second SessionGenerative AI Use cases for Enterprise - Second Session
Generative AI Use cases for Enterprise - Second SessionGene Leybzon
 
Generative AI Use-cases for Enterprise - First Session
Generative AI Use-cases for Enterprise - First SessionGenerative AI Use-cases for Enterprise - First Session
Generative AI Use-cases for Enterprise - First SessionGene Leybzon
 
Non-fungible tokens (nfts)
Non-fungible tokens (nfts)Non-fungible tokens (nfts)
Non-fungible tokens (nfts)Gene Leybzon
 
Introduction to Solidity and Smart Contract Development (9).pptx
Introduction to Solidity and Smart Contract Development (9).pptxIntroduction to Solidity and Smart Contract Development (9).pptx
Introduction to Solidity and Smart Contract Development (9).pptxGene Leybzon
 
ERC-4907 Rentable NFT Standard.pptx
ERC-4907 Rentable NFT Standard.pptxERC-4907 Rentable NFT Standard.pptx
ERC-4907 Rentable NFT Standard.pptxGene Leybzon
 
Onchain Decentralized Governance 2.pptx
Onchain Decentralized Governance 2.pptxOnchain Decentralized Governance 2.pptx
Onchain Decentralized Governance 2.pptxGene Leybzon
 
Onchain Decentralized Governance.pptx
Onchain Decentralized Governance.pptxOnchain Decentralized Governance.pptx
Onchain Decentralized Governance.pptxGene Leybzon
 
Web3 File Storage Options
Web3 File Storage OptionsWeb3 File Storage Options
Web3 File Storage OptionsGene Leybzon
 
Instantly tradeable NFT contracts based on ERC-1155 standard
Instantly tradeable NFT contracts based on ERC-1155 standardInstantly tradeable NFT contracts based on ERC-1155 standard
Instantly tradeable NFT contracts based on ERC-1155 standardGene Leybzon
 
Non-fungible tokens. From smart contract code to marketplace
Non-fungible tokens. From smart contract code to marketplaceNon-fungible tokens. From smart contract code to marketplace
Non-fungible tokens. From smart contract code to marketplaceGene Leybzon
 
The Art of non-fungible tokens
The Art of non-fungible tokensThe Art of non-fungible tokens
The Art of non-fungible tokensGene Leybzon
 
Graph protocol for accessing information about blockchains and d apps
Graph protocol for accessing information about blockchains and d appsGraph protocol for accessing information about blockchains and d apps
Graph protocol for accessing information about blockchains and d appsGene Leybzon
 
Substrate Framework
Substrate FrameworkSubstrate Framework
Substrate FrameworkGene Leybzon
 
OpenZeppelin + Remix + BNB smart chain
OpenZeppelin + Remix + BNB smart chainOpenZeppelin + Remix + BNB smart chain
OpenZeppelin + Remix + BNB smart chainGene Leybzon
 
Chainlink, Cosmos, Kusama, Polkadot: Approaches to the Internet of Blockchains
Chainlink, Cosmos, Kusama, Polkadot:   Approaches to the Internet of BlockchainsChainlink, Cosmos, Kusama, Polkadot:   Approaches to the Internet of Blockchains
Chainlink, Cosmos, Kusama, Polkadot: Approaches to the Internet of BlockchainsGene Leybzon
 
Accessing decentralized finance on Ethereum blockchain
Accessing decentralized finance on Ethereum blockchainAccessing decentralized finance on Ethereum blockchain
Accessing decentralized finance on Ethereum blockchainGene Leybzon
 

Mehr von Gene Leybzon (20)

Generative AI Application Development using LangChain and LangFlow
Generative AI Application Development using LangChain and LangFlowGenerative AI Application Development using LangChain and LangFlow
Generative AI Application Development using LangChain and LangFlow
 
Chat GPTs
Chat GPTsChat GPTs
Chat GPTs
 
Generative AI Use cases for Enterprise - Second Session
Generative AI Use cases for Enterprise - Second SessionGenerative AI Use cases for Enterprise - Second Session
Generative AI Use cases for Enterprise - Second Session
 
Generative AI Use-cases for Enterprise - First Session
Generative AI Use-cases for Enterprise - First SessionGenerative AI Use-cases for Enterprise - First Session
Generative AI Use-cases for Enterprise - First Session
 
Non-fungible tokens (nfts)
Non-fungible tokens (nfts)Non-fungible tokens (nfts)
Non-fungible tokens (nfts)
 
Introduction to Solidity and Smart Contract Development (9).pptx
Introduction to Solidity and Smart Contract Development (9).pptxIntroduction to Solidity and Smart Contract Development (9).pptx
Introduction to Solidity and Smart Contract Development (9).pptx
 
ERC-4907 Rentable NFT Standard.pptx
ERC-4907 Rentable NFT Standard.pptxERC-4907 Rentable NFT Standard.pptx
ERC-4907 Rentable NFT Standard.pptx
 
Onchain Decentralized Governance 2.pptx
Onchain Decentralized Governance 2.pptxOnchain Decentralized Governance 2.pptx
Onchain Decentralized Governance 2.pptx
 
Onchain Decentralized Governance.pptx
Onchain Decentralized Governance.pptxOnchain Decentralized Governance.pptx
Onchain Decentralized Governance.pptx
 
Web3 File Storage Options
Web3 File Storage OptionsWeb3 File Storage Options
Web3 File Storage Options
 
Instantly tradeable NFT contracts based on ERC-1155 standard
Instantly tradeable NFT contracts based on ERC-1155 standardInstantly tradeable NFT contracts based on ERC-1155 standard
Instantly tradeable NFT contracts based on ERC-1155 standard
 
Non-fungible tokens. From smart contract code to marketplace
Non-fungible tokens. From smart contract code to marketplaceNon-fungible tokens. From smart contract code to marketplace
Non-fungible tokens. From smart contract code to marketplace
 
The Art of non-fungible tokens
The Art of non-fungible tokensThe Art of non-fungible tokens
The Art of non-fungible tokens
 
Graph protocol for accessing information about blockchains and d apps
Graph protocol for accessing information about blockchains and d appsGraph protocol for accessing information about blockchains and d apps
Graph protocol for accessing information about blockchains and d apps
 
Substrate Framework
Substrate FrameworkSubstrate Framework
Substrate Framework
 
Chainlink
ChainlinkChainlink
Chainlink
 
OpenZeppelin + Remix + BNB smart chain
OpenZeppelin + Remix + BNB smart chainOpenZeppelin + Remix + BNB smart chain
OpenZeppelin + Remix + BNB smart chain
 
Chainlink, Cosmos, Kusama, Polkadot: Approaches to the Internet of Blockchains
Chainlink, Cosmos, Kusama, Polkadot:   Approaches to the Internet of BlockchainsChainlink, Cosmos, Kusama, Polkadot:   Approaches to the Internet of Blockchains
Chainlink, Cosmos, Kusama, Polkadot: Approaches to the Internet of Blockchains
 
Dex and Uniswap
Dex and UniswapDex and Uniswap
Dex and Uniswap
 
Accessing decentralized finance on Ethereum blockchain
Accessing decentralized finance on Ethereum blockchainAccessing decentralized finance on Ethereum blockchain
Accessing decentralized finance on Ethereum blockchain
 

Kürzlich hochgeladen

ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 

Kürzlich hochgeladen (20)

ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 

Web3 Full Stack Development

  • 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; } }
  • 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" } ]
  • 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) }); }
  • 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

Hinweis der Redaktion

  1. https://remix.ethereum.org/#optimize=true&runs=200&evmVersion=null&version=soljson-v0.8.7+commit.e28d00a7.js
  2. https://github.com/leybzon/Storage
  3. https://www.leybzon.com/web3/storage/index.html
  4. NodeJS/read-from-contract node read.js
  5. https://www.eventbrite.com/e/developerweek-2022-registration-164532975559?discount=MU7872&utm_campaign=MU7872&utm_source=meetup&utm_medium=email