웹3 애플리케이션의 핵심은 기본 구성 블록 역할을 하는 스마트 컨트랙트에 있습니다. Web3 앱이 원활하게 작동하려면 널리 사용되는 Web3.js 라이브러리와 함께 JavaScript와 같은 접근하기 쉬운 프로그래밍 언어를 사용하여 스마트 계약에 명시된 기능과 쉽게 상호 작용할 수 있도록 하는 것이 필수적입니다.
Web3.js 라이브러리 소개
Web3.js 라이브러리는 사용자가 사용자 친화적인 인터페이스를 통해 이더리움 블록체인과 통신할 수 있도록 하는 자바스크립트 애플리케이션입니다. 이더리움 노드 연결, 트랜잭션 실행, 스마트 컨트랙트 정보 열람, 이벤트 처리와 같은 기능에 대한 액세스를 제공하여 탈중앙화 애플리케이션(DApp) 개발을 용이하게 합니다.
Web3.js는 자바스크립트 구문과 기능을 활용하여 기존 소프트웨어 개발과 블록체인 기술의 통합을 가능하게 함으로써 탈중앙화되고 신뢰할 수 있는 애플리케이션의 생성을 용이하게 합니다.
Web3.js를 자바스크립트 프로젝트로 가져오는 방법
Web3.js를 노드 프로젝트에 통합하기 위해서는 설치를 통해 라이브러리를 프로젝트 종속 요소로 추가해야 합니다.
npm install web3
or
yarn add web3
내에서 다음 명령어를 실행하여 필요한 라이브러리를 설치해 주시기 바랍니다.
const Web3 = require('web3');
배포된 스마트 컨트랙트와 상호작용하기
Web3.js를 활용하여 이더리움 네트워크에서 웹 애플리케이션과 배포된 스마트 컨트랙트 간의 상호 운용성을 보여주기 위해 지갑을 통해 후보자에 대한 투표를 용이하게 하는 예시적인 웹 애플리케이션이 만들어집니다. 그런 다음 투표가 기록되고 스마트 컨트랙트 내에 저장됩니다.
전문성과 역량을 부여하기 위해 Node.js 규칙을 사용하여 사업의 핵심이 될 새로운 디렉토리의 초기화를 진행하십시오.
npm init
이 작업에는 Web3.js를 필수 구성 요소로 통합하고 프로젝트의 기본 디렉터리 내에 index.html과 styles.css라는 두 개의 필수 파일을 설정하는 작업이 포함됩니다.
<!-- 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.ethereum.org 로 이동하여 계약 폴더 아래에 새 파일을 생성합니다. 파일 이름은 test_contract.sol로 지정할 수 있습니다.
이 파일에 붙은 접미사 “.sol”은 솔리디티 문서임을 나타냅니다. 솔리디티는 현대 스마트 컨트랙트 제작에 사용되는 탁월한 프로그래밍 언어 중 하나이며, 블록체인 개발에서 중요한 도구로서 그 중요성을 강조합니다.
이 문서의 범위 내에서 펜과
// 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에서 솔리디티 코드를 처리하면 스마트 컨트랙트와 관련 클라이언트 애플리케이션 간의 인터페이스 경계를 정의하는 역할을 하는 JSON 형식의 애플리케이션 바이너리 인터페이스(ABI)를 생성합니다.
사용자가 소프트웨어를 빠르게 탐색하는 데 도움이 되는 팁과 요령을 포함하여 소프트웨어를 효율적으로 사용하는 방법을 설명합니다. ### 사용자 설명서의 목표: 주요 목표는 소프트웨어를 사용하여 다양한 작업을 완료하는 방법에 대한 포괄적인 지침을 제공하여 모든 측면을 철저히 다루도록 하는 것입니다. 또한 매뉴얼은 명확한 설명과 단계별 가이드를 제공하여 처음 사용하는 사용자도 최대한 쉽게 프로세스를 수행할 수 있도록 하는 것을 목표로 해야 합니다.
스마트 컨트랙트 내에 포함되는 기능 및 활동의 명명법과 분류, 그리고 이를 활용하거나 상호작용할 수 있도록 제공되는 기능 및 활동의 명명법과 분류를 공개합니다.
주어진 함수 내에서 매개변수의 배열을 ‘인수의 순서’라고 합니다.
각 함수의 기능 및 해당 출력은 다음과 같습니다:
각 발생과 관련된 형식은
Remix IDE 내에서 ABI를 추출하여 ABI를 얻습니다. 프로젝트 루트 폴더의 “계약” 디렉터리 내에 contract.abi.json 파일을 생성하고 복사 및 붙여넣기를 사용하여 파일에 ABI를 삽입합니다.
가나슈와 같은 도구를 사용하여 스마트 컨트랙트를 테스트 네트워크에 배포할 것을 권장합니다.
Web3.js를 사용하여 배포된 스마트 컨트랙트와 통신하기
이더리움 테스트 네트워크에 컨트랙트 배포가 완료되었습니다. 사용자 인터페이스를 통해 배포된 컨트랙트와의 인터페이스를 시작할 수 있습니다. 이를 위해 프로젝트의 루트 디렉토리에 웹 애플리케이션과 스마트 컨트랙트 간 통신의 중심점 역할을 하는 main.js 파일을 생성합니다. 이 파일에는 Web3.js와 ABI 파일의 필수 가져오기가 포함되어야 하며, 데이터를 읽고, 함수를 실행하고, 트랜잭션을 처리하여 컨트랙트와의 상호작용을 처리합니다.
다음은 `main.js` 파일의 모습에 대한 예시이며, NextJS 및 Tailwind CSS를 사용하는 데 필요한 종속성 및 코드가 포함되어 있습니다: ”’자바스크립트 ‘tailwindcss/dist/base.css’를 가져옵니다; import ‘tailwindcss/dist/components.css’; ‘tailwindcss/dist/utilities.css’ 임포트; ‘../styles/globals.css’ 임포트; ‘./App’에서 App을 임포트합니다; 함수 MyApp({ Component, pageProps }) { return
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를 사용합니다. 본질적으로 자바스크립트 함수는 main.js 파일에서 솔리디티 함수를 호출하는 데 사용됩니다.
코드 내에서 활용할 실제 컨트랙트 주소를 지정해 주세요. Remix IDE가 배포 시 이 정보를 제공할 것입니다.
주어진 코드가 기능과 동작을 설명하는 과정을 거치고 있습니다.
DOM 요소의 선택을 업데이트하는 것은 웹 개발의 필수적인 측면이며 해당 웹페이지의 HTML 구조를 신중하게 고려해야 합니다. 이 프로세스에는 쉽게 참조할 수 있도록 각 후보의 이름과 연관된 “데이터 후보” 태그와 같은 속성을 활용하는 것이 포함됩니다.
창.ethereum 객체를 통해 이더리움 공급자를 가져와 Web3 클래스의 인스턴스를 생성하는 데 활용합니다.
“votingContract” 변수는 컨트랙트의 주소와 해당 애플리케이션 바이너리 인터페이스(ABI)를 사용하여 컨트랙트 객체를 인스턴스화하는 데 사용됩니다.
투표 함수는 투표 프로세스 수행을 담당합니다. 투표 함수는 스마트 컨트랙트의 투표 함수를 호출하여 이 프로세스를 시작하며, 투표 컨트랙트.methods.vote(후보자).send() 메서드를 사용하여 트랜잭션을 컨트랙트에 전송하여 사용자의 투표를 등록합니다.이후 voteCount 변수는 스마트 컨트랙트의 getVoteCount 함수를 사용하여 특정 후보의 현재 득표수를 가져옵니다. 마지막으로 사용자 인터페이스에 표시되는 투표 수를 업데이트하여 업데이트된 집계와 동기화합니다.
다음과 같이