Phát triển DApps – Xây dựng Ứng dụng Phi tập trung

Phát triển DApps – Xây dựng Ứng dụng Phi tập trung

DApps (Decentralized Applications) là ứng dụng chạy trên blockchain, kết hợp smart contracts với frontend. Bài viết này hướng dẫn xây dựng DApp hoàn chỉnh từ đầu đến cuối.

DApp là gì?

Decentralized Application

DApp là ứng dụng:

• Backend: Smart contracts trên blockchain
• Frontend: Web interface tương tác với blockchain
• Storage: IPFS hoặc decentralized storage
• No Central Server: Không có server trung tâm

Đặc điểm của DApp

• Open Source: Code công khai
• Decentralized: Không có điểm thất bại đơn
• Incentivized: Token rewards cho users
• Protocol: Sử dụng cryptographic protocol

Web3 Development Stack

Frontend Technologies

• React/Vue/Angular: UI frameworks
• Web3.js / Ethers.js: Kết nối với blockchain
• MetaMask: Wallet provider
• IPFS: Decentralized storage

Backend Technologies

• Smart Contracts: Solidity
• The Graph: Decentralized indexing
• Alchemy/Infura: Blockchain node providers

Web3.js vs Ethers.js

Web3.js

const Web3 = require('web3');
const web3 = new Web3(window.ethereum);

const contract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS);

await contract.methods.getValue().call();
await contract.methods.setValue(100).send({from: accounts[0]});

Ethers.js (Recommended)

const { ethers } = require('ethers');

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer);

await contract.getValue();
await contract.setValue(100);

So sánh

Feature	Web3.js	Ethers.js
API Design	Callback-based	Promise-based
Bundle Size	Larger	Smaller
TypeScript	Partial	Full support
Active Dev	Slower	Faster

Connecting Wallet (MetaMask)

Setup MetaMask

1. Install MetaMask extension
2. Create wallet
3. Get network details
4. Fund wallet với test tokens

Connect Wallet trong DApp

// Check if MetaMask is installed
if (typeof window.ethereum !== 'undefined') {
    // Request account access
    await window.ethereum.request({ 
        method: 'eth_requestAccounts' 
    });

    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const address = await signer.getAddress();
}

Listen to Account Changes

window.ethereum.on('accountsChanged', (accounts) => {
    // Handle account change
    updateUI(accounts[0]);
});

window.ethereum.on('chainChanged', (chainId) => {
    // Handle network change
    window.location.reload();
});

Reading Blockchain Data

Read from Contract

// Simple read
const value = await contract.getValue();

// Read with parameters
const balance = await contract.balanceOf(userAddress);

// Read multiple values
const [name, symbol, totalSupply] = await Promise.all([
    contract.name(),
    contract.symbol(),
    contract.totalSupply()
]);

Event Listening

// Listen to events
contract.on('Transfer', (from, to, value) => {
    console.log(`Transfer: ${from} -> ${to}: ${value}`);
});

// Query past events
const filter = contract.filters.Transfer(fromAddress, null);
const events = await contract.queryFilter(filter, fromBlock, toBlock);

Sending Transactions

Send Transaction

// Simple transaction
const tx = await contract.setValue(100);
await tx.wait(); // Wait for confirmation

// Transaction with options
const tx = await contract.transfer(toAddress, amount, {
    gasLimit: 100000,
    gasPrice: ethers.utils.parseUnits('20', 'gwei')
});

const receipt = await tx.wait();
console.log('Transaction hash:', receipt.transactionHash);

Error Handling

try {
    const tx = await contract.setValue(100);
    await tx.wait();
} catch (error) {
    if (error.code === 4001) {
        console.log('User rejected transaction');
    } else if (error.code === -32603) {
        console.log('Transaction failed');
    }
}

IPFS và Decentralized Storage

IPFS là gì?

IPFS (InterPlanetary File System) là protocol để lưu trữ và chia sẻ files trong peer-to-peer network.

Upload File to IPFS

// Using ipfs-http-client
const { create } = require('ipfs-http-client');
const ipfs = create({ url: 'https://ipfs.infura.io:5001' });

// Upload file
const file = document.querySelector('#fileInput').files[0];
const added = await ipfs.add(file);
const ipfsHash = added.path;

// Store hash on blockchain
await contract.storeHash(ipfsHash);

Retrieve from IPFS

// Get hash from blockchain
const ipfsHash = await contract.getHash();

// Fetch from IPFS
const response = await fetch(`https://ipfs.io/ipfs/${ipfsHash}`);
const data = await response.json();

Alternatives to IPFS

• Arweave: Permanent storage
• Filecoin: Decentralized storage network
• Swarm: Ethereum native storage

DApp Architecture Patterns

Frontend-Backend Separation

Frontend (React)
    ↓
Web3 Provider (MetaMask)
    ↓
Blockchain (Ethereum)
    ↓
Smart Contracts

Indexing với The Graph

# GraphQL query
{
  transfers(where: {from: "0x..."}) {
    id
    from
    to
    value
    timestamp
  }
}

Building a Complete DApp

Project Structure

my-dapp/
├── contracts/
│   └── MyContract.sol
├── frontend/
│   ├── src/
│   │   ├── App.js
│   │   ├── components/
│   │   └── utils/
│   └── package.json
├── scripts/
│   └── deploy.js
└── hardhat.config.js

Example: Simple Voting DApp

Smart Contract

contract Voting {
    mapping(address => bool) public hasVoted;
    mapping(string => uint256) public votes;
    string[] public candidates;

    function vote(string memory candidate) public {
        require(!hasVoted[msg.sender], "Already voted");
        votes[candidate]++;
        hasVoted[msg.sender] = true;
    }
}

Frontend Integration

const vote = async (candidate) => {
    try {
        const tx = await contract.vote(candidate);
        await tx.wait();
        alert('Vote submitted!');
        loadResults();
    } catch (error) {
        console.error(error);
    }
};

const loadResults = async () => {
    const candidates = await contract.getCandidates();
    const results = {};
    for (let candidate of candidates) {
        results[candidate] = await contract.votes(candidate);
    }
    setResults(results);
};

Testing DApps

Unit Testing

describe('Voting DApp', () => {
    it('Should allow voting', async () => {
        await contract.vote('Candidate1');
        const votes = await contract.votes('Candidate1');
        expect(votes).to.equal(1);
    });
});

Integration Testing

• Test với test networks (Sepolia, Goerli)
• Test wallet interactions
• Test error scenarios
• Test UI responsiveness

Deployment và Hosting

Deploy Smart Contract

// Hardhat deployment
npx hardhat run scripts/deploy.js --network sepolia

Frontend Hosting

• Vercel: Easy deployment
• Netlify: Static hosting
• IPFS: Fully decentralized
• Fleek: IPFS + Domain

Environment Variables

REACT_APP_CONTRACT_ADDRESS=0x...
REACT_APP_RPC_URL=https://sepolia.infura.io/...

Best Practices

UX Best Practices

• Show transaction status
• Display gas estimates
• Handle network switching
• Provide clear error messages
• Loading states

Security Best Practices

• Validate user inputs
• Check network before transactions
• Verify contract addresses
• Use environment variables for configs
• Implement rate limiting

Performance Optimization

• Batch RPC calls
• Cache blockchain data
• Use React hooks efficiently
• Implement pagination
• Optimize images và assets

Kết luận

Xây dựng DApps kết hợp nhiều kỹ năng: smart contract development, frontend development, và Web3 integration. Hiểu rõ các concepts và patterns sẽ giúp bạn xây dựng DApps mạnh mẽ và user-friendly.

Tiếp tục học về DeFi trong Bootcamp Blockchain Mastery!