柚子快報(bào)邀請(qǐng)碼778899分享：12. 與區(qū)塊鏈交互的開發(fā)實(shí)戰(zhàn)

http://yzkb.51969.com/

12. 與區(qū)塊鏈交互的開發(fā)實(shí)戰(zhàn)

在這一部分，我們將深入探討如何與區(qū)塊鏈交互，包括使用Web3.js與區(qū)塊鏈進(jìn)行交互、開發(fā)一個(gè)去中心化錢包，以及集成去中心化存儲(chǔ)解決方案。這些實(shí)戰(zhàn)經(jīng)驗(yàn)將幫助你進(jìn)一步掌握Web3開發(fā)的核心技能。

1. 如何使用Web3.js與區(qū)塊鏈交互

Web3.js是與以太坊區(qū)塊鏈交互的核心JavaScript庫。它提供了與智能合約通信、發(fā)送交易、獲取區(qū)塊鏈數(shù)據(jù)等功能。

1.1 初始化Web3.js

首先，我們需要在項(xiàng)目中引入Web3.js庫。

安裝Web3.js： npm install web3

初始化Web3.js實(shí)例：

在你的JavaScript文件中，創(chuàng)建一個(gè)Web3實(shí)例，連接到區(qū)塊鏈節(jié)點(diǎn)（如本地的Ganache或以太坊主網(wǎng)）：const Web3 = require('web3');

const web3 = new Web3('http://localhost:7545'); // 連接到本地Ganache

1.2 獲取賬戶和余額

使用Web3.js獲取連接到的區(qū)塊鏈節(jié)點(diǎn)的賬戶列表以及賬戶余額。

獲取賬戶列表： 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與智能合約進(jìn)行交互，如調(diào)用合約方法和監(jiān)聽事件。

初始化合約實(shí)例：

使用合約的ABI和地址初始化一個(gè)合約實(shí)例：const contractABI = [/* ABI goes here */];

const contractAddress = 'YOUR_CONTRACT_ADDRESS';

const contract = new web3.eth.Contract(contractABI, contractAddress);

調(diào)用合約方法：

調(diào)用合約的getMessage方法獲取存儲(chǔ)的消息： contract.methods.getMessage().call()

.then(message => {

console.log("Stored Message:", message);

})

.catch(err => console.error(err));

調(diào)用合約的setMessage方法設(shè)置新的消息： 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));

監(jiān)聽合約事件：

監(jiān)聽智能合約中的事件，實(shí)時(shí)響應(yīng)合約狀態(tài)的變化：contract.events.MessageUpdated()

.on('data', event => {

console.log("Message Updated:", event.returnValues.message);

})

.on('error', console.error);

2. 開發(fā)一個(gè)去中心化錢包

去中心化錢包是Web3生態(tài)系統(tǒng)的重要組成部分，它允許用戶管理自己的加密資產(chǎn)，并與區(qū)塊鏈和dApp交互。我們將開發(fā)一個(gè)簡單的去中心化錢包，支持賬戶創(chuàng)建、余額查詢和轉(zhuǎn)賬功能。

2.1 創(chuàng)建錢包界面

首先，我們創(chuàng)建一個(gè)簡單的前端界面，供用戶創(chuàng)建和管理錢包。

HTML結(jié)構(gòu)：

Decentralized Wallet

Create New Account

Account Address:

Balance: ETH

Send Transaction

JavaScript邏輯：

在wallet.js文件中實(shí)現(xiàn)錢包的功能，包括創(chuàng)建新賬戶、查詢余額和發(fā)送交易。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 測(cè)試去中心化錢包

啟動(dòng)本地區(qū)塊鏈：

確保Ganache已啟動(dòng)，提供本地的以太坊節(jié)點(diǎn)供錢包連接。 運(yùn)行錢包應(yīng)用：

使用輕量級(jí)服務(wù)器（如lite-server）啟動(dòng)錢包應(yīng)用，或直接在瀏覽器中打開index.html文件。創(chuàng)建新賬戶、查詢余額并測(cè)試發(fā)送交易功能。 交易簽名與發(fā)送：

在錢包中輸入接收方地址和轉(zhuǎn)賬金額，點(diǎn)擊“Send Transaction”按鈕，使用私鑰對(duì)交易進(jìn)行簽名并發(fā)送至區(qū)塊鏈網(wǎng)絡(luò)。

3. 集成去中心化存儲(chǔ)解決方案

去中心化存儲(chǔ)是Web3的重要組成部分，允許數(shù)據(jù)在分布式網(wǎng)絡(luò)中存儲(chǔ)，增強(qiáng)了數(shù)據(jù)的安全性和持久性。我們將演示如何將去中心化存儲(chǔ)解決方案（如IPFS）集成到Web3應(yīng)用中。

3.1 IPFS簡介

IPFS（InterPlanetary File System）是一個(gè)去中心化的文件存儲(chǔ)協(xié)議，通過內(nèi)容尋址來存儲(chǔ)和共享文件。文件在IPFS網(wǎng)絡(luò)中存儲(chǔ)后，可以通過其唯一的哈希值進(jìn)行訪問。

3.2 安裝與設(shè)置IPFS

安裝IPFS：

訪問IPFS官網(wǎng)，根據(jù)你的操作系統(tǒng)下載并安裝IPFS。 啟動(dòng)IPFS節(jié)點(diǎn)：

安裝后，啟動(dòng)IPFS節(jié)點(diǎn)：ipfs init

ipfs daemon

安裝JavaScript IPFS庫：

在前端項(xiàng)目中安裝ipfs-http-client庫，用于與IPFS節(jié)點(diǎn)交互：npm install ipfs-http-client

3.3 將文件上傳到IPFS

在你的Web3應(yīng)用中，添加一個(gè)功能，將用戶選擇的文件上傳到IPFS，并獲取文件的哈希值。

修改HTML界面：

在index.html中添加文件上傳的輸入框和按鈕：

Upload to IPFS

IPFS Hash:

實(shí)現(xiàn)文件上傳功能：

在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網(wǎng)關(guān)訪問：

你可以通過IPFS公共網(wǎng)關(guān)訪問文件，URL格式為：https://ipfs.io/ipfs/YOUR_IPFS_HASH

在dApp中集成：

在你的Web3應(yīng)用中，你可以將IPFS哈希值與智能合約或其他區(qū)塊鏈數(shù)據(jù)結(jié)合使用，為用戶提供去中心化的數(shù)據(jù)存儲(chǔ)和訪問功能。

總結(jié)

通過本章節(jié)的學(xué)習(xí)，你已經(jīng)掌握了與區(qū)塊鏈交互的基本技能，學(xué)會(huì)了如何使用Web3.js與區(qū)塊鏈通信、開發(fā)一個(gè)去中心化錢包，并集成去中心化存儲(chǔ)解決方案。這些技能為你開發(fā)更復(fù)雜的Web3應(yīng)用打下了堅(jiān)實(shí)的基礎(chǔ)。

使用Web3.js與區(qū)塊鏈交互：學(xué)會(huì)了如何初始化Web3.js實(shí)例、獲取賬戶信息、與智能合約進(jìn)行交互，并監(jiān)聽區(qū)塊鏈?zhǔn)录?。開發(fā)去中心化錢包：創(chuàng)建了一個(gè)簡單的去中心化錢包，支持賬戶創(chuàng)建、余額查詢和交易簽名與發(fā)送。集成去中心化存儲(chǔ)解決方案：學(xué)習(xí)了如何使用IPFS將文件上傳到去中心化存儲(chǔ)網(wǎng)絡(luò)，并在Web3應(yīng)用中實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)和訪問。

隨著這些技能的掌握，你可以繼續(xù)探索更復(fù)雜的Web3應(yīng)用開發(fā)，如構(gòu)建更高級(jí)的智能合約、開發(fā)復(fù)雜的dApp、以及集成更多的去中心化技術(shù)。

柚子快報(bào)邀請(qǐng)碼778899分享：12. 與區(qū)塊鏈交互的開發(fā)實(shí)戰(zhàn)

http://yzkb.51969.com/

文章來源