在這篇文章裡,我們將帶你走進前端與去中心化存儲的世界,從 Web3.js 連結區塊鏈,到 IPFS 與 Arweave 儲存資料,兩段簡短說明幫你快速抓住重點。
透過實際範例與切分主題,我們會顯示如何在 dApp 前端即時互動,並把資料永續保存於分散式網路上。
前端與智能合約互動:Web3.js
- 什麼是 Web3.js? 這是一個 JavaScript 函式庫,能讓前端直接呼叫以太坊或其他兼容 EVM 的區塊鏈。
- 安裝方式
npm install web3
// 匯入 Web3
const Web3 = require('web3');
// 連線到本地或測試網路
const web3 = new Web3('https://goerli.infura.io/v3/YOUR_INFURA_KEY');
// 讀取帳戶餘額
async function getBalance(address) {
const balance = await web3.eth.getBalance(address);
console.log(web3.utils.fromWei(balance, 'ether'), 'ETH');
}
// 範例呼叫
getBalance('0xYourAddress');
// 合約地址 & ABI
const contractAddress = '0xYourContract';
const abi = [ /* ABI JSON */ ];
// 建立合約實例
const contract = new web3.eth.Contract(abi, contractAddress);
// 呼叫讀取函式
contract.methods.totalSupply().call()
.then(console.log)
.catch(console.error);
// 呼叫寫入函式(需 gas 手續費)
const account = '0xYourAddress';
contract.methods.mint(account, 100).send({ from: account })
.on('transactionHash', console.log)
.on('receipt', console.log);
去中心化檔案儲存:IPFS
- IPFS 基本概念 透過內容尋址(content‑addressable)儲存檔案,任何人只要知道 CID 就能取得。
- IPFS 範例 以 js‑ipfs 套件在前端直接上傳並取得 CID。
// 安裝 js‑ipfs
npm install ipfs-core
// 引入 IPFS
const { create } = require('ipfs-core');
// 建立 IPFS 節點(瀏覽器環境可直接使用)
async function initIPFS() {
const ipfs = await create({
repo: 'ipfs-' + Math.random().toString(36).substring(7),
config: {
Bootstrap: [], // 限制啟動節點,避免額外連線
},
});
// 上傳檔案
const file = new Blob(['Hello IPFS!']);
const { cid } = await ipfs.add(file);
console.log('CID:', cid.toString());
}
// 執行範例
initIPFS();
- 取得檔案 只要傳入 CID,即可透過 HTTP gateway 或 IPFS 節點取得內容。
永久性資料儲存:Arweave
- Arweave 特色 以「永續存儲」為賣點,所有資料一旦寫入即不可改變,並以區塊鏈方式永續保存。
- 整合範例 使用 arweave‑js 套件在前端寫入資料。
// 安裝 arweave‑js
npm install arweave
// 引入 Arweave
const Arweave = require('arweave');
// 初始化連線(使用 Arweave testnet)
const arweave = Arweave.init({
host: 'arweave.net', // 或 use testnet host
port: 443,
protocol: 'https',
});
// 建立交易(寫入簡單文字)
async function sendData() {
const wallet = await arweave.wallets.generate(); // 產生測試錢包
const transaction = await arweave.createTransaction({
data: 'Hello Arweave!',
}, wallet);
await arweave.transactions.sign(transaction, wallet);
const response = await arweave.transactions.post(transaction);
console.log('Transaction ID:', transaction.id, 'Status:', response.status);
}
// 執行範例
sendData();
- 在 dApp 中使用 你可以將 NFT metadata、合約事件或任何需要永續記錄的資料寫入 Arweave,並在前端透過 CID 取得。
小結
- Web3.js:前端主要用於與區塊鏈互動,讀寫合約。
- IPFS:提供檔案型資料的分散式儲存,適合相對短期或可更新資料。
- Arweave:則是永續、不可變的資料儲存,適合需要長期保留的資訊。
透過這三個技術棧,你就能在 dApp 前端打造出完整且可靠的資料交互與永續保存體驗。