استفد من مكتبة Web3.js JavaScript لإنشاء واجهة سلسة للتفاعل مع Ethereum blockchain.

العقود الذكية هي اللبنات الأساسية لتطبيقات Web3. من أجل تمكين الوظائف في تطبيقات Web3 ، من المهم أن تكون قادرًا على التفاعل مع الوظائف المحددة في العقد الذكي بشكل ملائم. يمكنك استخدام لغة شائعة مثل JavaScript ومكتبة Web3.js المعروفة لإنشاء هذا الاتصال.

مقدمة إلى مكتبة Web3.js

Web3.js هي مكتبة JavaScript توفر واجهة للتفاعل مع Ethereum blockchain. يبسط عملية البناء التطبيقات اللامركزية (DApps) من خلال توفير طرق وأدوات للاتصال بعُقد Ethereum ، وإرسال المعاملات ، وقراءة بيانات العقود الذكية ، والتعامل مع الأحداث.

يربط Web3.js بين التطوير التقليدي وتكنولوجيا blockchain ، مما يسمح لك بإنشاء تطبيقات لامركزية وآمنة باستخدام بنية JavaScript ووظائفها المألوفة.

كيفية استيراد Web3.js إلى مشروع JavaScript

لاستخدام Web3.js في مشروع Node الخاص بك ، تحتاج أولاً إلى تثبيت المكتبة لتبعية المشروع.

قم بتثبيت المكتبة عن طريق تشغيل هذا الأمر داخل مشروعك:

npm install web3
or
yarn add web3

بعد تثبيت Web3.js ، يمكنك الآن استيراد المكتبة ضمن مشروع Node الخاص بك كوحدة ES:

instagram viewer 
const Web3 = require('web3');

التعامل مع العقود الذكية المنتشرة

لتوضيح كيف يمكنك التفاعل مع العقد الذكي المنشور على شبكة Ethereum باستخدام Web3.js بشكل صحيح ، ستقوم بإنشاء تطبيق ويب يعمل مع العقد الذكي المنشور. سيكون الغرض من تطبيق الويب عبارة عن اقتراع تصويت بسيط حيث يمكن للمحفظة الإدلاء بأصوات لمرشح وتسجيل تلك الأصوات.

للبدء ، أنشئ دليلًا جديدًا لمشروعك وقم بتهيئته كمشروع Node.js:

npm init

قم بتثبيت Web3.js في المشروع كتبعية وإنشاء ملف بسيط index.html و Styles.css الملفات الموجودة في جذر المشروع.

قم باستيراد الكود التالي في ملف index.html ملف:

html>
<html>
<head>
<title>Voting Apptitle>
<linkrel="stylesheet"href="styles.css" />
head>
<body>
<h1>Voting Apph1>


<divclass="candidates">
<divclass="candidate">
<spanclass="name">Candidate Aspan>
<buttonclass="vote-btn"data-candidate="A">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Bspan>
<buttonclass="vote-btn"data-candidate="B">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
<divclass="candidate">
<spanclass="name">Candidate Cspan>
<buttonclass="vote-btn"data-candidate="C">Votebutton>
<spanclass="vote-count">0 votesspan>
div>
div>
<scriptsrc="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 لنشر عقدك على شبكة Ethereum.

انتقل إلى remix.ethereum.org وأنشئ ملفًا جديدًا ضمن انكماش مجلد. يمكنك تسمية الملف test_contract.sol.

ال .sol يشير الامتداد إلى أن هذا ملف Solidity. Solidity هي واحدة من أكثر اللغات شعبية لكتابة العقود الذكية الحديثة.

داخل هذا الملف ، كتابة وتجميع كود Solidity الخاص بك:

// SPDX-License-Identifier: MIT 
pragma solidity ^0.8.0; 
contract Voting {
 mapping(string => uint256) private voteCounts;
functionvote(string memory candidate) public{
 voteCounts[candidate]++;
 };
functiongetVoteCount(string memory candidate) publicviewreturns (uint256){
return voteCounts[candidate];
 };
};

عندما يجمع Remix كود Solidity ، فإنه ينشئ أيضًا ABI (Application Binary Interface) بتنسيق JSON. يحدد ABI الواجهة بين العقد الذكي وتطبيق العميل.

سيحدد ما يلي:

  • أسماء وأنواع الوظائف والأحداث التي يعرضها العقد الذكي.
  • ترتيب الحجج لكل دالة.
  • قيم الإرجاع لكل دالة.
  • تنسيق البيانات لكل حدث.

للحصول على ABI ، انسخه من داخل Remix IDE. إنشاء عقد. ab.json ملف بالداخل عقد داخل جذر مشروعك والصق ABI داخل الملف.

يجب عليك المضي قدمًا ونشر عقدك على شبكة اختبار باستخدام أداة مثل Ganache.

التواصل مع عقدك الذكي الذي تم نشره باستخدام Web3.js

تم الآن نشر عقدك في شبكة اختبار Ethereum. يمكنك بدء العمل على التفاعل مع العقد المنشور من واجهة المستخدم الخاصة بك. إنشاء 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
asyncfunctionvote(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 للتحدث مع وظائف العقد الذكية الخاصة بك من واجهة الويب الخاصة بك. بشكل أساسي ، أنت تستخدم وظائف JavaScript لاستدعاء وظائف Solidity من main.js.

في الكود ، استبدل "CONTRACT_ADDRESS" مع عنوان العقد الفعلي الذي تم نشره. سيوفر لك Remix IDE هذا عند النشر.

إليك ما يحدث في الكود:

  1. قم بتحديث تحديد عناصر DOM بناءً على بنية HTML الخاصة بك. في هذا المثال ، يفترض أن كل عنصر مرشح له الامتداد مرشح البيانات السمة التي تتوافق مع اسم المرشح.
  2. مثال على ويب 3 ثم يتم إنشاء فئة باستخدام الموفر المحقون من window.ethereum هدف.
  3. ال عقد التصويت المتغير ينشئ مثيل عقد باستخدام عنوان العقد و ABI.
  4. ال تصويت وظيفة تتعامل مع عملية التصويت. يستدعي ال تصويت وظيفة العقد الذكي باستخدام shoppingContract.methods.vote (مرشح). إرسال (). يرسل معاملة إلى العقد ، ويسجل تصويت المستخدم. ال التصويت متغير ثم يستدعي getVoteCount وظيفة العقد الذكي لاسترداد عدد الأصوات الحالي لمرشح معين. سيقوم بعد ذلك بتحديث عدد الأصوات في واجهة المستخدم لمطابقة الأصوات المسترجعة.

تذكر أن تدرج هذا main.js ملف في ملف HTML الخاص بك باستخدام ملف .

بالإضافة إلى ذلك ، تأكد من صحة عنوان العقد و ABI وأن لديك معلومات صحيحة معالجة الأخطاء في مكانها. p>

دور JavaScript في إنشاء DApps

تتمتع JavaScript بالقدرة على التفاعل مع العقود الذكية المستخدمة في التطبيقات اللامركزية. يجمع هذا بين عالم Web3 ولغة البرمجة الأساسية المستخدمة في بناء تطبيقات Web2 ، مما يساعد على تسهيل اعتماد Web3. باستخدام Web3.js ، يمكن لمطوري Web2 الانتقال إلى إنشاء تطبيقات مثل منصة الشبكات الاجتماعية Web3.