Why dApps need user interfaces in Blockchain / Solidity - See It in Action

Why dApps Need User Interfaces

📖 Scenario: You are building a simple decentralized application (dApp) that interacts with a blockchain smart contract. To make it easy for users to use your dApp, you need to create a user interface (UI) that shows information and lets users send transactions.

🎯 Goal: Build a basic user interface for a dApp that displays a message from the blockchain and lets users update it by sending a transaction.

📋 What You'll Learn

Create a variable called currentMessage with the initial value 'Hello, blockchain!'

Create a variable called newMessage to hold user input, initially empty

Write a function called updateMessage that sets currentMessage to newMessage

Print the currentMessage before and after calling updateMessage

💡 Why This Matters

🌍 Real World

Most dApps need user interfaces so users can easily see blockchain data and send transactions without using complex commands.

💼 Career

Understanding how to connect blockchain data with user interfaces is key for blockchain developers, front-end engineers, and product designers working on decentralized applications.

1

DATA SETUP: Create the initial message variable

Create a variable called currentMessage and set it to the string 'Hello, blockchain!'

Blockchain / Solidity

# Create a variable called currentMessage and set it to 'Hello, blockchain!'
# Your code here

Need a hint?

Use a simple assignment like currentMessage = 'Hello, blockchain!'.

2

CONFIGURATION: Create a variable for new user input

Create a variable called newMessage and set it to an empty string ''

Blockchain / Solidity

currentMessage = 'Hello, blockchain!'
# Create a variable called newMessage and set it to an empty string
# Your code here

Need a hint?

Use newMessage = '' to start with an empty string.

3

CORE LOGIC: Write a function to update the message

Write a function called updateMessage that sets currentMessage to the value of newMessage

Blockchain / Solidity

currentMessage = 'Hello, blockchain!'
newMessage = ''
# Write a function called updateMessage that sets currentMessage to newMessage
# Your code here

Need a hint?

Remember to use global currentMessage inside the function to modify the variable outside.

4

OUTPUT: Show the message before and after update

Set newMessage to 'Welcome to dApps!', call updateMessage(), then print currentMessage before and after the update

Blockchain / Solidity

currentMessage = 'Hello, blockchain!'
newMessage = ''

def updateMessage():
    global currentMessage
    currentMessage = newMessage

# Set newMessage, call updateMessage, and print currentMessage before and after
# Your code here

Need a hint?

Print currentMessage before and after calling updateMessage() to see the change.