השתמש בספריית JavaScript Web3.js כדי ליצור ממשק חלק לאינטראקציה עם blockchain Ethereum.

חוזים חכמים הם אבני הבניין העיקריות ליישומי Web3. על מנת לאפשר פונקציונליות ביישומי Web3, חשוב להיות מסוגל ליצור אינטראקציה עם הפונקציות המצוינות בחוזה חכם בצורה נוחה. אתה יכול להשתמש בשפה פופולרית כמו JavaScript וספריית Web3.js הידועה כדי ליצור תקשורת זו.

מבוא לספריית Web3.js

Web3.js היא ספריית JavaScript המציעה ממשק לאינטראקציה עם Ethereum blockchain. זה מפשט את תהליך הבנייה יישומים מבוזרים (DApps) על ידי אספקת שיטות וכלים לחיבור לצמתי Ethereum, שליחת עסקאות, קריאת נתוני חוזים חכמים ולטפל באירועים.

Web3.js מגשרת בין פיתוח מסורתי וטכנולוגיית בלוקצ'יין, ומאפשרת לך ליצור יישומים מבוזרים ומאובטחים תוך שימוש בתחביר ופונקציונליות 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.

ה .סוֹל סיומת מציינת שזהו קובץ 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, העתק אותו מתוך ה-IDE של Remix. ליצור contract.abi.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 שלך. בדוגמה זו, היא מניחה שלכל רכיב מועמד יש a מועמד נתונים תכונה המתאימה לשם המועמד.
  2. מופע של ה אינטרנט 3 מחלקה נוצרת לאחר מכן באמצעות הספק המוזרק מה- window.ethereum לְהִתְנַגֵד.
  3. ה חוזה הצבעה משתנה יוצר מופע חוזה באמצעות כתובת החוזה ו-ABI.
  4. ה הַצבָּעָה הפונקציה מטפלת בתהליך ההצבעה. זה קורא ל הַצבָּעָה הפונקציה של החוזה החכם באמצעות votingContract.methods.vote (candidate).send(). זה שולח עסקה לחוזה, רושם את הצבעת המשתמש. ה ספירת קולות המשתנה קורא ל- getVoteCount הפונקציה של החוזה החכם לאחזר את ספירת הקולות הנוכחית עבור מועמד ספציפי. לאחר מכן הוא יעדכן את ספירת הקולות בממשק המשתמש כדי להתאים להצבעות שאוחזרו.

זכור לכלול את זה main.js קובץ בקובץ HTML שלך באמצעות א תג.

בנוסף, ודא שכתובת החוזה ו-ABI נכונים ושיש לך תקין טיפול בשגיאות במקום.

תפקיד JavaScript בבניית DApps

ל-JavaScript יש את היכולת ליצור אינטראקציה עם חוזים חכמים המשמשים ביישומים מבוזרים. זה מפגיש את עולם ה-Web3 עם שפת תכנות ראשית המשמשת בבניית אפליקציות Web2, שעוזרת להקל על האימוץ של Web3. עם Web3.js, מפתחי Web2 יכולים לעבור לבניית אפליקציות כמו פלטפורמת מדיה חברתית Web3.