Access a Simple DApp
1 like153 views
The document explains how to access a simple decentralized application (dapp) using the MetaMask browser plugin, focusing on user interactions like retrieving and updating a stored value on the Ethereum network. It briefly outlines the elements involved, including frontend interaction and transaction authorization through MetaMask, while not detailing the contract deployment process or MetaMask installation. The dapp allows actions without requiring ethers for retrieval, but does for updates, prompting user confirmation.
Access a Simple DApp
- 1. 2. Access a Simple DApp KC Tam Reach KC on LinkedIn: https://www.linkedin.com/in/ktam1/
- 2. Objective We will walk through a very simple DApp and see how a user accesses this DApp with Metamask (a browser plugin).
- 3. Note For simplicity we skip ● contract deployment process ● how to develop and deploy the DApp ● how to install Metamask (For information, this DApp is deployed on ganache-cli Ethereum network, f.k.a. testerpc, using Truffle development framework for contract deployment with webpack integration)
- 4. A Simple DApp: Simple Storage A value is stored in the Ethereum Network (gigantic computer). User can interact with this value through two actions ● Get the value from the store ● Set a new value and keep it in the store Frontend is built to perform these two actions, and proper integration is done.
- 5. Simple Storage (DApp) Application (Contract) Code Data Web / Mobile Frontend
- 6. Metamask Plug-in Metamask plug-in Interacting DApp with Ethereum Accounts
- 7. Access the Frontend End user accesses this application just as a normal web application.
- 8. Refresh Application (Contract) Code value Web / Mobile Frontend Refresh get() Note: no Ethers required for this task.
- 9. Update a Number Value update requires Ethers. Metamask pops up and asks user to authorize and to confirm this task.
- 11. Metamask Metamask allows you to select a User Account. Here 0x0B2FD6…254B is selected to initiate this task (transaction). Contract Address is 0xdE4b39…150B User specifies maximum transaction fee (in terms of gas limit and gas price) for this transaction Submit when everything is correct
- 12. Update Transaction Complete Application (Contract) Code value Web / Mobile Frontend Update set(100)
- 13. Summary User can access DApp as common web application. When needed, user is asked to authorize (confirm) the transaction using Metamask browser plugin.