DeveloperBreeze

Blockchain Development Programming Tutorials, Guides & Best Practices

Explore 30+ expertly crafted blockchain development tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from DeveloperBreeze.

Tutorial
solidity

Building a Decentralized Application (DApp) with Smart Contracts 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message DApp</title>
</head>
<body>
    <h1>Decentralized Message Store</h1>
    <input type="text" id="messageInput" placeholder="Enter a new message">
    <button onclick="setMessage()">Set Message</button>
    <p id="currentMessage">Loading message...</p>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script>
        const contractAddress = 'YOUR_CONTRACT_ADDRESS';
        const abi = [/* ABI from compiled contract */];

        const web3 = new Web3(Web3.givenProvider);
        const contract = new web3.eth.Contract(abi, contractAddress);

        async function setMessage() {
            const accounts = await web3.eth.getAccounts();
            const message = document.getElementById('messageInput').value;
            await contract.methods.setMessage(message).send({ from: accounts[0] });
            loadMessage();
        }

        async function loadMessage() {
            const message = await contract.methods.getMessage().call();
            document.getElementById('currentMessage').innerText = message;
        }

        window.onload = loadMessage;
    </script>
</body>
</html>
  • Web3.js: A JavaScript library for interacting with the Ethereum blockchain.
  • contract.methods.setMessage(message).send({ from: accounts[0] }): Calls the smart contract’s setMessage function and sends a transaction to the blockchain.
  • contract.methods.getMessage().call(): Calls the smart contract’s getMessage function to retrieve the stored message.

Aug 22, 2024
Read More