12. 与区块链交互的开发实战

在这一部分，我们将深入探讨如何与区块链交互，包括使用Web3.js与区块链进行交互、开发一个去中心化钱包，以及集成去中心化存储解决方案。这些实战经验将帮助你进一步掌握Web3开发的核心技能。

1. 如何使用Web3.js与区块链交互

Web3.js是与以太坊区块链交互的核心JavaScript库。它提供了与智能合约通信、发送交易、获取区块链数据等功能。

1.1 初始化Web3.js

首先，我们需要在项目中引入Web3.js库。

安装Web3.js：
```
npm install web3
```
初始化Web3.js实例：
- 在你的JavaScript文件中，创建一个Web3实例，连接到区块链节点（如本地的Ganache或以太坊主网）：
```
const Web3 = require('web3');
const web3 = new Web3('http://localhost:7545'); // 连接到本地Ganache
```

1.2 获取账户和余额

使用Web3.js获取连接到的区块链节点的账户列表以及账户余额。

获取账户列表：

web3.eth.getAccounts()
  .then(accounts => {
      
      
      console.log("Accounts:", accounts);
  })
  .catch(err => console.error(err));

获取账户余额：

const account = 'YOUR_ACCOUNT_ADDRESS';
web3.eth.getBalance(account)
  .then(balance => {
      
      
      console.log("Balance:", web3.utils.fromWei(balance, 'ether'), "ETH");
  })
  .catch(err => console.error(err));

1.3 与智能合约交互

你可以使用Web3.js与智能合约进行交互，如调用合约方法和监听事件。

初始化合约实例：

使用合约的ABI和地址初始化一个合约实例：

const contractABI = [/* ABI goes here */];
const contractAddress = 'YOUR_CONTRACT_ADDRESS';
const contract = new web3.eth.Contract(contractABI, contractAddress);

调用合约方法：

调用合约的getMessage方法获取存储的消息：

contract.methods.getMessage().call()
  .then(message => {
        
        
      console.log("Stored Message:", message);
  })
  .catch(err => console.error(err));

调用合约的setMessage方法设置新的消息：

const account = 'YOUR_ACCOUNT_ADDRESS';
contract.methods.setMessage("Hello, Web3!").send({
        
         from: account })
  .then(receipt => {
        
        
      console.log("Transaction receipt:", receipt);
  })
  .catch(err => console.error(err));

监听合约事件：

监听智能合约中的事件，实时响应合约状态的变化：

contract.events.MessageUpdated()
  .on('data', event => {
        
        
      console.log("Message Updated:", event.returnValues.message);
  })
  .on('error', console.error);

2. 开发一个去中心化钱包

去中心化钱包是Web3生态系统的重要组成部分，它允许用户管理自己的加密资产，并与区块链和dApp交互。我们将开发一个简单的去中心化钱包，支持账户创建、余额查询和转账功能。

2.1 创建钱包界面

首先，我们创建一个简单的前端界面，供用户创建和管理钱包。

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Decentralized Wallet</title>
</head>
<body>
    <h1>Decentralized Wallet</h1>
    <button id="createAccount">Create New Account</button>
    <p>Account Address: <span id="accountAddress"></span></p>
    <p>Balance: <span id="accountBalance"></span> ETH</p>
    <input type="text" id="recipientAddress" placeholder="Recipient Address" />
    <input type="text" id="amount" placeholder="Amount in ETH" />
    <button id="sendTransaction">Send Transaction</button>

    <script src="https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js"></script>
    <script src="wallet.js"></script>
</body>
</html>

JavaScript逻辑：

在wallet.js文件中实现钱包的功能，包括创建新账户、查询余额和发送交易。

const web3 = new Web3(Web3.givenProvider || "http://localhost:7545");

document.getElementById('createAccount').onclick = () => {
        
        
    const account = web3.eth.accounts.create();
    document.getElementById('accountAddress').innerText = account.address;
    localStorage.setItem('privateKey', account.privateKey);
    alert("New account created!");
};

const updateBalance = () => {
        
        
    const account = document.getElementById('accountAddress').innerText;
    web3.eth.getBalance(account)
      .then(balance => {
        
        
          document.getElementById('accountBalance').innerText = web3.utils.fromWei(balance, 'ether');
      });
};

document.getElementById('sendTransaction').onclick = async () => {
        
        
    const recipient = document.getElementById('recipientAddress').value;
    const amount = document.getElementById('amount').value;
    const account = document.getElementById('accountAddress').innerText;
    const privateKey = localStorage.getItem('privateKey');

    const transaction = {
        
        
        to: recipient,
        value: web3.utils.toWei(amount, 'ether'),
        gas: 2000000,
    };

    const signedTx = await web3.eth.accounts.signTransaction(transaction, privateKey);
    web3.eth.sendSignedTransaction(signedTx.rawTransaction)
      .then(receipt => {
        
        
          alert("Transaction successful!");
          updateBalance();
      })
      .catch(err => console.error(err));
};

// Update balance on load
updateBalance();

2.2 测试去中心化钱包

启动本地区块链：
- 确保Ganache已启动，提供本地的以太坊节点供钱包连接。
运行钱包应用：
- 使用轻量级服务器（如lite-server）启动钱包应用，或直接在浏览器中打开index.html文件。
- 创建新账户、查询余额并测试发送交易功能。
交易签名与发送：
- 在钱包中输入接收方地址和转账金额，点击“Send Transaction”按钮，使用私钥对交易进行签名并发送至区块链网络。

3. 集成去中心化存储解决方案

去中心化存储是Web3的重要组成部分，允许数据在分布式网络中存储，增强了数据的安全性和持久性。我们将演示如何将去中心化存储解决方案（如IPFS）集成到Web3应用中。

3.1 IPFS简介

IPFS（InterPlanetary File System）是一个去中心化的文件存储协议，通过内容寻址来存储和共享文件。文件在IPFS网络中存储后，可以通过其唯一的哈希值进行访问。

3.2 安装与设置IPFS

安装IPFS：
- 访问IPFS官网，根据你的操作系统下载并安装IPFS。
启动IPFS节点：
- 安装后，启动IPFS节点：
```
ipfs init
ipfs daemon
```
安装JavaScript IPFS库：
- 在前端项目中安装ipfs-http-client库，用于与IPFS节点交互：
```
npm install ipfs-http-client
```

3.3 将文件上传到IPFS

在你的Web3应用中，添加一个功能，将用户选择的文件上传到IPFS，并获取文件的哈希值。

修改HTML界面：

在index.html中添加文件上传的输入框和按钮：

<input type="file" id="fileInput" />
<button id="uploadFile">Upload to IPFS</button>
<p>IPFS Hash: <span id="ipfsHash"></span></p>

实现文件上传功能：

在wallet.js中添加文件上传到IPFS的逻辑：

const ipfsClient = require('ipfs-http-client');
const ipfs = ipfsClient({
        
         host: 'localhost', port: '5001', protocol: 'http' });

document.getElementById('uploadFile').onclick = async () => {
        
        
    const file = document.getElementById

(‘fileInput’).files[0];
const reader = new FileReader();

     reader.onloadend = async () => {
         const buffer = Buffer.from(reader.result);
         const result = await ipfs.add(buffer);
         document.getElementById('ipfsHash').innerText = result.path;
         alert("File uploaded to IPFS!");
     };

     reader.readAsArrayBuffer(file);
 };
 ```

3.4 访问IPFS中的文件

文件上传到IPFS后，可以通过哈希值访问该文件。

通过IPFS网关访问：
- 你可以通过IPFS公共网关访问文件，URL格式为：
```
https://ipfs.io/ipfs/YOUR_IPFS_HASH
```
在dApp中集成：
- 在你的Web3应用中，你可以将IPFS哈希值与智能合约或其他区块链数据结合使用，为用户提供去中心化的数据存储和访问功能。

总结

通过本章节的学习，你已经掌握了与区块链交互的基本技能，学会了如何使用Web3.js与区块链通信、开发一个去中心化钱包，并集成去中心化存储解决方案。这些技能为你开发更复杂的Web3应用打下了坚实的基础。

使用Web3.js与区块链交互：学会了如何初始化Web3.js实例、获取账户信息、与智能合约进行交互，并监听区块链事件。
开发去中心化钱包：创建了一个简单的去中心化钱包，支持账户创建、余额查询和交易签名与发送。
集成去中心化存储解决方案：学习了如何使用IPFS将文件上传到去中心化存储网络，并在Web3应用中实现数据的存储和访问。

随着这些技能的掌握，你可以继续探索更复杂的Web3应用开发，如构建更高级的智能合约、开发复杂的dApp、以及集成更多的去中心化技术。