Home-theater-designers
スマート コントラクトは、Web3 アプリケーションの主要な構成要素です。 Web3 アプリケーションの機能を有効にするには、スマート コントラクトで指定された機能と簡単に対話できることが重要です。この通信を確立するには、JavaScript などの一般的な言語やよく知られた Web3.js ライブラリを使用できます。
今日のMUOビデオ スクロールしてコンテンツを続けてください
Web3.js ライブラリの概要
Web3.js は、Ethereum ブロックチェーンと対話するためのインターフェイスを提供する JavaScript ライブラリです。構築プロセスを簡素化します 分散型アプリケーション (DApps) イーサリアムノードに接続し、トランザクションを送信し、スマートコントラクトデータを読み取り、イベントを処理するためのメソッドとツールを提供することによって。
Web3.js は従来の開発とブロックチェーン テクノロジーの橋渡しをし、使い慣れた JavaScript 構文と機能を使用して分散型で安全なアプリケーションを作成できるようにします。
Web3.js を JavaScript プロジェクトにインポートする方法
Node プロジェクトで Web3.js を使用するには、まずライブラリをプロジェクトの依存関係としてインストールする必要があります。
プロジェクト内で次のコマンドを実行して、ライブラリをインストールします。
npm install web3
or
yarn add web3
Web3.js をインストールした後、Node プロジェクト内にライブラリを ES モジュールとしてインポートできるようになります。
const Web3 = require('web3');
導入されたスマート コントラクトとの対話
Web3.js を使用して Ethereum ネットワーク上にデプロイされたスマート コントラクトと対話する方法を適切に示すために、デプロイされたスマート コントラクトで機能する Web アプリケーションを作成します。 Web アプリの目的は、ウォレットで候補者に投票し、その投票を記録できる単純な投票用紙です。
まず、プロジェクトの新しいディレクトリを作成し、Node.js プロジェクトとして初期化します。
npm init
Web3.js を依存関係としてプロジェクトにインストールし、単純なファイルを作成します。 インデックス.html と スタイル.css プロジェクトのルート内のファイル。
インストールされたプログラムを別のドライブウィンドウに移動する10
次のコードを インデックス.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>
内部 スタイル.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;
}
以下は結果として得られるインターフェースです。
開始するための基本的なインターフェイスが完成したので、次は 契約 プロジェクトのルートにあるフォルダーにスマート コントラクトのコードを含めます。
グラフィックカードウィンドウを見つける方法10
Remix IDE は、スマート コントラクトを作成、デプロイ、テストする簡単な方法を提供します。 Remix を使用してコントラクトを Ethereum ネットワークにデプロイします。
案内する リミックス.イーサリアム.org そして、その下に新しいファイルを作成します 契約書 フォルダ。ファイルに名前を付けることができます test_contract.sol 。
の 。太陽 拡張子は、これが Solidity ファイルであることを示します。 Solidity は最も人気のある言語の 1 つです 最新のスマート コントラクトを作成するためのものです。
このファイル内では、 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 コードをコンパイルすると、JSON 形式で ABI (Application Binary Interface) も作成されます。 ABI は、スマート コントラクトとクライアント アプリケーション間のインターフェイスを定義します。
次のように指定します。
- スマート コントラクトによって公開される関数およびイベントの名前と種類。
- 各関数の引数の順序。
- 各関数の戻り値。
- 各イベントのデータ形式。
ABI を取得するには、Remix IDE 内から ABI をコピーします。を作成します 契約.abi.json 中のファイル 契約 プロジェクトのルート内にある ABI をファイル内に貼り付けます。
Ganache などのツールを使用して、コントラクトをテスト ネットワークにデプロイする必要があります。
Web3.js を使用した、デプロイされたスマート コントラクトとの通信
これで、コントラクトが Ethereum テスト ネットワークにデプロイされました。 UI インターフェイスから、デプロイされたコントラクトとの対話作業を開始できます。を作成します main.js プロジェクトのルートにあるファイル。 Web3.js と保存した ABI ファイルの両方をインポートします。 main.js 。このファイルはスマート コントラクトと通信し、コントラクトからのデータの読み取り、その関数の呼び出し、トランザクションの処理を担当します。
以下はあなたの方法です main.js ファイルは次のようになります。
USBにWindows10をインストールする方法
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 を利用して、Web インターフェイスからスマート コントラクト機能と通信します。基本的に、JavaScript 関数を使用して Solidity 関数を呼び出します。 main.js 。
コード内で次のように置き換えます。 'CONTRACT_ADDRESS' 実際にデプロイされたコントラクトアドレスを使用します。 Remix IDE は、展開時にこれを提供します。
コード内で何が起こっているかは次のとおりです。
- HTML 構造に基づいて DOM 要素の選択を更新します。この例では、各候補要素に データ候補 候補者の名前に対応する属性。
- のインスタンス ウェブ3 次に、から挿入されたプロバイダーを使用してクラスが作成されます。 ウィンドウ.イーサリアム 物体。
- の 投票契約 変数は、コントラクト アドレスと ABI を使用してコントラクト インスタンスを作成します。
- の 投票 関数は投票プロセスを処理します。それは、 投票 を使用したスマートコントラクトの機能 VotingContract.methods.vote(candidate).send()。 トランザクションをコントラクトに送信し、ユーザーの投票を記録します。の 投票数 変数は次に、 get投票数 特定の候補者の現在の投票数を取得するスマート コントラクトの機能。次に、取得した投票と一致するように UI の投票数を更新します。
これを忘れずに含めてください main.js を使用して HTML ファイル内のファイルを作成します。 <スクリプト> 鬼ごっこ。
さらに、コントラクト アドレスと ABI が正しいこと、および適切なエラー処理が行われていることを確認してください。
DApp の構築における JavaScript の役割
JavaScript には、分散型アプリケーションで使用されるスマート コントラクトと対話する機能があります。これにより、Web3 の世界と Web2 アプリの構築に使用される主要なプログラミング言語が統合され、Web3 の導入が促進されます。 Web3.js を使用すると、Web2 開発者は Web3 ソーシャル メディア プラットフォームのようなアプリの構築に移行できます。