چطور یک DApp ساده بسازیم؟ (اتصال فرانت‌اند به بلاکچین)
مقدمه
در دنیای امروز، مفاهیم وب۳ و اپلیکیشن‌های غیرمتمرکز (DApp) به یکی از جذاب‌ترین حوزه‌های فناوری تبدیل شده‌اند. برای یک برنامه‌نویس فرانت‌اند آشنا با React، یادگیری نحوه اتصال به بلاکچین و پیاده‌سازی تراکنش‌ها یک مهارت ارزشمند است. DApp هم در بازار کار کاربرد دارد و هم برای پروژه‌های شخصی جذاب است.
اگر تا به حال با بلاکچین کار نکرده‌اید نگران نباشید. این آموزش به شما کمک می‌کند قدم‌به‌قدم یک DApp ساده بسازید. مرورگر را به MetaMask متصل کنید. داده‌ها را از قرارداد هوشمند بخوانید یا بنویسید، و با بهترین روش‌ها آشنا شوید.
پیش‌نیازها و ابزار مورد نیاز برای پیاده سازی DApp ساده
- دانش فنی: تسلط بر JavaScript و React، آشنایی مقدماتی با مفهوم بلاکچین
- نصب Node.js و npm برای مدیریت پکیج‌ها
- MetaMask به عنوان کیف پول و اتصال مرورگر به بلاکچین
- یکی از فریم‌ورک‌های توسعه قرارداد هوشمند: Hardhat یا Truffle
- کتابخانه تعامل با بلاکچین در فرانت‌اند:
ethers.jsیاweb3.js
نکته: در این آموزش، برای سادگی از ethers.js و شبکه تست Sepolia استفاده خواهیم کرد.
راه‌اندازی قرارداد هوشمند ساده برای DApp ساده
ابتدا باید یک قرارداد هوشمند نمونه بسازیم. این قرارداد میتواند داده‌ای ساده را ذخیره و بازیابی کند. این کار را می‌توان با Solidity انجام داد. در این مثال قرارداد شامل دو تابع set و get خواهد بود.
// SampleContract.sol
pragma solidity ^0.8.0;
contract SampleContract {
string public data;
function set(string memory _data) public {
data = _data;
}
function get() public view returns (string memory) {
return data;
}
}
پس از نوشتن قرارداد:
- با استفاده از Hardhat، قرارداد را کامپایل کنید.
- در شبکه تست (مانند Sepolia) دیپلوی کنید.
- آدرس قرارداد و فایل ABI حاصل از کامپایل را ذخیره نمایید. این دو برای ارتباط فرانت‌اند با بلاکچین ضروری هستند.
ایجاد پروژه React و نصب وابستگی‌ها
یک پروژه جدید React ایجاد کنید:
npx create-react-app
my-dapp
cd my-dapp
npm install ethers
اگر از Vite استفاده می‌کنید:
npm create vite@latest my-dapp
cd my-dapp
npm install ethers
نصب افزونه MetaMask روی مرورگر را فراموش نکنید. مطمئن شوید کیف پول شما روی شبکه تست مورد نظر تنظیم شده است.
اتصال فرانت‌اند به بلاکچین
برای اتصال فرانت‌اند با MetaMask و قرارداد، مراحل زیر را دنبال کنید:
- بررسی وجود
window.ethereumبرای اطمینان از نصب MetaMask - درخواست اتصال کیف پول:
async function connectWallet() {
if (window.ethereum) {
try {
await window.ethereum.request({ method: 'eth_requestAccounts'
});
console.log('Wallet connected');
} catch (err) {
console.error('User rejected connection', err);
}
} else {
alert('MetaMask not installed');
}
}
- بارگذاری ABI و آدرس قرارداد
- ایجاد نمونه قرارداد:
import { ethers } from 'ethers';
import contractABI from './SampleContractABI.json';
const contractAddress = '0xYourContractAddressHere';
async function getContract() {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
return new ethers.Contract(contractAddress, contractABI, signer);
}
خواندن داده‌ها از قرارداد
برای تست، داده جاری در قرارداد را بخوانید:
async function readData() {
const contract = await getContract();
const currentData = await contract.get();
console.log('Data from contract:', currentData);
}
پیاده‌سازی تراکنش‌ها (ارسال داده یا تغییر حالت)
- تابع ارسال داده:
async function writeData(newData) {
const contract = await getContract();
try {
const tx = await contract.set(newData);
console.log('Transaction sent, waiting for confirmation...');
await tx.wait();
console.log('Transaction confirmed');
} catch (err) {
console.error('Transaction failed', err);
}
}
در این قسمت از signer استفاده کردیم که مسئول امضای تراکنش از طرف کاربر است.
بهینه‌سازی رابط کاربری برای تجربه کاربر Web3
- نمایش آدرس کیف پول متصل شده:
async function getWalletAddress() {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const accounts = await provider.listAccounts();
return accounts[0];
}
- مدیریت حالت “Not Connected” با نمایش دکمه اتصال
- نمایش پیام‌های وضعیت تراکنش به کاربر (در حال ارسال، تایید شده، خطا)
- رسیدگی به خطاهای احتمالی و ارائه پیام مناسب
تست و دیپلوی DApp
- اجرای تست در شبکه تست با ارسال و خواندن داده
- دیپلوی فرانت‌اند با دستور:
npm run build
npx vercel deploy
- اتصال دامنه و فعال‌سازی HTTPS برای امنیت
نکات و Best Practices برای توسعه DApp
- امنیت تراکنش‌ها: هرگز کلید خصوصی را در فرانت‌اند ذخیره نکنید.
- استفاده از شبکه تست برای جلوگیری از هزینه‌های واقعی تا اطمینان کامل از عملکرد DApp
- نمایش هش تراکنش و لینک آن در Etherscan
- ورود به دنیای توسعه کامل: بررسی رویدادهای قرارداد و استفاده از
contract.on()برای تعامل پویا
جمع‌بندی و فراخوان اقدام
در این آموزش یاد گرفتید که چگونه یک قرارداد هوشمند ساده بنویسید، آن را در شبکه تست منتشر کنید، از طریق React و ethers.js با آن تعامل کنید، تراکنش ارسال نمایید و داده بخوانید. مسیر توسعه DApp میتواند با اضافه کردن ویژگی‌هایی مانند احراز هویت غیرمتمرکز، ذخیره فایل در IPFS و بهینه‌سازی مصرف Gas گسترش یابد.
اکنون نوبت شماست! پروژه خود را بسازید، آزمایش کنید و آن را با دیگران به اشتراک بگذارید. برای یادگیری بیشتر، پیشنهاد می‌کنیم مقاله‌های مرتبط با کار با IPFS و بهینه‌سازی Gas را مطالعه کنید.
برای یادگیری بیشتر می توانید به دوره ساخت اپلیکشن غیرمتمرکر فروشگاه ساده مراجعه فرمایید.
