راهنمای مبتدی برای تعامل با قراردادهای هوشمند با استفاده از جاوا اسکریپت

از کتابخانه جاوا اسکریپت Web3.js برای ایجاد یک رابط یکپارچه برای تعامل با بلاک چین اتریوم استفاده کنید.

قراردادهای هوشمند بلوک های اصلی برای برنامه های Web3 هستند. برای فعال کردن قابلیت‌ها در برنامه‌های Web3، مهم است که بتوانیم به راحتی با عملکردهای مشخص‌شده در یک قرارداد هوشمند تعامل داشته باشیم. برای برقراری این ارتباط می توانید از یک زبان محبوب مانند جاوا اسکریپت و کتابخانه معروف Web3.js استفاده کنید.

مقدمه ای بر کتابخانه Web3.js

Web3.js یک کتابخانه جاوا اسکریپت است که رابطی برای تعامل با بلاک چین اتریوم ارائه می دهد. این فرآیند ساخت برنامه های غیرمتمرکز (DApps) را با ارائه روش ها و ابزارهایی برای اتصال به گره های اتریوم، ارسال تراکنش ها، خواندن داده های قرارداد هوشمند و مدیریت رویدادها ساده می کند.

Web3.js پل توسعه سنتی و فناوری بلاک چین را ایجاد می کند و به شما امکان می دهد برنامه های غیرمتمرکز و ایمن را با استفاده از نحو و عملکرد آشنای جاوا اسکریپت ایجاد کنید.

نحوه وارد کردن Web3.js به یک پروژه جاوا اسکریپت

برای استفاده از Web3.js در پروژه Node خود، ابتدا باید کتابخانه را به عنوان وابستگی پروژه نصب کنید.

کتابخانه را با اجرای این دستور در داخل پروژه خود نصب کنید:

npm install web3 or yarn add web3

پس از نصب Web3.js، اکنون می توانید کتابخانه را در پروژه Node خود به عنوان یک ماژول ES وارد کنید:

const Web3 = require('web3');

تعامل با قراردادهای هوشمند مستقر شده

برای اینکه به درستی نشان دهید که چگونه می توانید با استفاده از Web3.js با یک قرارداد هوشمند مستقر در شبکه اتریوم تعامل داشته باشید، یک برنامه وب ایجاد می کنید که با قرارداد هوشمند مستقر کار می کند. هدف از برنامه وب یک برگه رای گیری ساده است که در آن کیف پول می تواند به یک نامزد رای داده و آن آرا را ثبت کند.

برای شروع، یک دایرکتوری جدید برای پروژه خود ایجاد کنید و آن را به عنوان یک پروژه Node.js مقداردهی کنید:

npm init

Web3.js را به عنوان یک وابستگی در پروژه نصب کنید و فایل های ساده index.html و styles.css را در ریشه پروژه ایجاد کنید.

کد زیر را در فایل index.html وارد کنید:

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Voting App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Voting App</h1>

    <div class="candidates">
      <div class="candidate">
        <span class="name">Candidate A</span>
        <button class="vote-btn" data-candidate="A">Vote</button>
        <span class="vote-count">0 votes</span>
      </div>
      <div class="candidate">
        <span class="name">Candidate B</span>
        <button class="vote-btn" data-candidate="B">Vote</button>
        <span class="vote-count">0 votes</span>
      </div>
      <div class="candidate">
        <span class="name">Candidate C</span>
        <button class="vote-btn" data-candidate="C">Vote</button>
        <span class="vote-count">0 votes</span>
      </div>
    </div>

    <script src="main.js"></script>
  </body>
</html>

داخل فایل styles.css کد زیر را وارد کنید:

/* styles.css */

body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  
  h1 {
    margin-top: 30px;
  }
  
  .candidates {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
  
  .candidate {
    margin: 20px;
  }
  
  .name {
    font-weight: bold;
  }
  
  .vote-btn {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .vote-count {
    margin-top: 5px;
  }

در زیر رابط حاصل آمده است:

مطلب مرتبط: چرا صرافی‌های ارزهای دیجیتال «اثبات ذخایر» خود را آشکار می‌کنند؟

اکنون که یک رابط اصلی برای شروع دارید، یک پوشه قرارداد در ریشه پروژه خود ایجاد کنید تا حاوی کد قرارداد هوشمند شما باشد.

Remix IDE راه ساده ای برای نوشتن، استقرار و آزمایش قراردادهای هوشمند ارائه می دهد. شما از Remix برای استقرار قرارداد خود در شبکه اتریوم استفاده خواهید کرد.

به remix.ethereum.org بروید و یک فایل جدید در پوشه contracts ایجاد کنید. می توانید نام فایل را test_contract.sol بگذارید.

پسوند .sol نشان می دهد که این یک فایل Solidity است. Solidity یکی از محبوب ترین زبان ها برای نوشتن قراردادهای هوشمند مدرن است.

داخل این فایل کد Solidity خود را بنویسید و کامپایل کنید:

// SPDX-License-Identifier: MIT 
pragma solidity ^0.8.0; 
contract Voting {
   mapping(string => uint256) private voteCounts;

   function vote(string memory candidate) public {
       voteCounts[candidate]++;
    };
   function getVoteCount(string memory candidate) public view returns (uint256){
        return voteCounts[candidate];
    };
};

هنگامی که Remix کد Solidity را کامپایل می کند، یک ABI (Application Binary Interface) در قالب JSON نیز ایجاد می کند. ABI رابط بین یک قرارداد هوشمند و یک برنامه مشتری را تعریف می کند.

موارد زیر را مشخص می کند:

نام ها و انواع عملکردها و رویدادهایی که توسط قرارداد هوشمند در معرض دید قرار می گیرند.
ترتیب آرگومان های هر تابع.
مقادیر بازگشتی هر تابع
قالب داده هر رویداد

برای دریافت ABI، آن را از داخل Remix IDE کپی کنید. یک فایل contract.abi.json در داخل قرارداد در ریشه پروژه خود ایجاد کنید و ABI را در داخل فایل قرار دهید.

شما باید ادامه دهید و قرارداد خود را با استفاده از ابزاری مانند Ganache در یک شبکه آزمایشی مستقر کنید.

مطلب مرتبط: نحوه ادغام ویژگی چت زنده در برنامه React با استفاده از Chatwoot

برقراری ارتباط با قرارداد هوشمند مستقر خود با استفاده از Web3.js

قرارداد شما اکنون در یک شبکه آزمایشی اتریوم مستقر شده است. می‌توانید از رابط کاربری خود روی تعامل با قرارداد مستقر شده شروع کنید. یک فایل main.js در ریشه پروژه خود ایجاد کنید. شما هم Web3.js و هم فایل ABI ذخیره شده خود را به main.js وارد خواهید کرد. این فایل با قرارداد هوشمند شما صحبت می کند و مسئولیت خواندن داده های قرارداد، فراخوانی عملکردهای آن و رسیدگی به تراکنش ها را بر عهده خواهد داشت.

در زیر نحوه ظاهر فایل main.js شما آمده است:

const Web3 = require('web3');
const contractAddress = "CONTRACT_ADDRESS"; // Replace with the actual deployed contract address
import contractAbi from '../contract/contract.abi.json'

// Create an instance of web3 using the injected provider (e.g., MetaMask)
const web3 = new Web3(window.ethereum);

// Create a contract instance using the contract address and ABI
const votingContract = new web3.eth.Contract(contractAbi, contractAddress);

// Retrieve the candidate elements from the DOM
const candidates = document.querySelectorAll('.candidate');

// Function to handle voting for a candidate
async function vote(candidate) {
  try {
    // Call the 'vote' function of the smart contract
    await votingContract.methods.vote(candidate).send({ from: web3.eth.defaultAccount });

    // Update the vote count in the UI
    const voteCount = await votingContract.methods.getVoteCount(candidate).call();
    const voteCountElement = document.querySelector(`[data-candidate="${candidate}"] .vote-count`);
    voteCountElement.textContent = `${voteCount} votes`;
  } catch (error) {
    console.error(error);
    // Handle error cases, such as invalid transactions or network issues
  }
}

// Add click event listeners to the vote buttons
candidates.forEach(candidate => {
  const candidateName = candidate.getAttribute('data-candidate');
  const voteBtn = candidate.querySelector('.vote-btn');
  voteBtn.addEventListener('click', () => {
    vote(candidateName);
  });
});

بلوک کد بالا از Web3.js برای صحبت با عملکردهای قرارداد هوشمند شما از رابط وب شما استفاده می کند. اساساً شما از توابع جاوا اسکریپت برای فراخوانی توابع Solidity از main.js استفاده می کنید.

مطلب مرتبط: مقدمه ای بر الگوریتم مرتب سازی پوسته

در کد، «CONTRACT_ADDRESS» را با آدرس قرارداد مستقر واقعی جایگزین کنید. Remix IDE این را در هنگام استقرار در اختیار شما قرار می دهد.

این چیزی است که در کد اتفاق می افتد:

انتخاب عناصر DOM را بر اساس ساختار HTML خود به روز کنید. در این مثال، فرض می‌شود که هر عنصر کاندید دارای یک ویژگی data-candidate است که با نام نامزد مطابقت دارد.
سپس یک نمونه از کلاس Web3 با استفاده از ارائه دهنده تزریق شده از شی window.ethereum ایجاد می شود.
متغیر votingContract با استفاده از آدرس قرارداد و ABI یک نمونه قرارداد ایجاد می کند.
تابع رأی فرآیند رأی گیری را مدیریت می کند. تابع رأی قرارداد هوشمند را با استفاده از votingContract.methods.vote(candidate).send فراخوانی می کند. تراکنش را به قرارداد ارسال می کند و رای کاربر را ثبت می کند. سپس متغیر voteCount تابع getVoteCount قرارداد هوشمند را برای بازیابی تعداد آرای فعلی برای یک نامزد خاص فراخوانی می کند. سپس تعداد آرا را در UI به روز می کند تا با آرای بازیابی شده مطابقت داشته باشد.

به یاد داشته باشید که این فایل main.js را با استفاده از تگ