hyc0812 / web3-tickets

Blockchain dApp demo project: connect a UI to a solidity contract deployed to a locally running ethereum network using ganache-UI.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Play with web3-tickets

Blockchain dApp demo project

  • Using Ganache UI (RPC Server is: HTTP://127.0.0.1:8545). Import the first account to MetaMask.
  • Deploy the contract:
truffle migrate
  • Test the contract (optional):
truffle test test/Tickets.js

drawing

  • Install all the dependencies that was registered in the package.json (including web3, parcel, bootstrap, etc..) and run the project:
cd client
npm install
npm run start

Finally, connect your current account to the localhost server

drawing

Buying ticket:

drawing

Ganache Back-end console with current contract balance:

drawing

Current transaction information:

drawing


MEMO

Commands used for creating client directory and dependencies:

mkdir client
cd client
npm init -f
npm install --save-dev parcel
npm install --save web3 bootstrap

Connect to MetaMask using HTML & JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test</title>
</head>
<body>
    <script>
        async function connect() {
            if ( typeof window.ethereum !== "undefined") {
                ethereum.request({method: "eth_requestAccounts"});
            }
        }
    </script>
    <button id="connectButton" onclick="connect()">Connect!</button>
</body>
</html>

REMINDER: If reboot and reconnect the Ganache UI, reinstalling npm dependencies is needed:

rm -rf node_modules
npm install
npm run start

References

Original auther: https://www.youtube.com/watch?v=FYhZPovlGZQ https://www.youtube.com/watch?v=JXa_Y-17Oj4

About

Blockchain dApp demo project: connect a UI to a solidity contract deployed to a locally running ethereum network using ganache-UI.

License:MIT License


Languages

Language:JavaScript 76.7%Language:Solidity 11.8%Language:HTML 9.6%Language:CSS 1.9%