solidity와 웹3js를 사용하여 Dapp를 만드는 방법

8073 단어 blockchaindevelopmensolidityweb3jsmartcontracts

우리 뭐 해요?


이것은 기본적인 계수기 응용 프로그램으로 안정적인 증가와 감소 기능을 갖추고 웹 3을 사용하여 이러한 기능과 상호작용을 할 수 있다.브라우저의 js

Dapp이란?


Dapp 또는 분산 애플리케이션은 분산된 네트워크에서 실행되는 소프트웨어 애플리케이션입니다.그것은 집중된 서버에 위탁 관리되는 것이 아니라 점대점이 분산된 네트워크에 위탁 관리된다.

무엇이 실체 언어입니까?


Solidity는 스마트 계약을 작성하는 데 사용되는 계약을 위한 고급 언어입니다.이더리움 블록체인 플랫폼의 핵심 공헌자가 개발하여 이더리움 가상 기기와 다른 블록체인 개발 플랫폼에서 스마트 계약을 설계하고 실시하는 데 사용한다.

뭐? 웹3?js와 우리가 왜 웹3을 사용해야 하는지js？


Web3.js는 HTTP, IPC, WebSocket을 사용하여 로컬 또는 원격 이더리움 노드와 상호작용을 할 수 있는 라이브러리입니다.웹3 JavaScript 라이브러리는 이더리움 블록체인과 상호 작용합니다.그것은 사용자 계정을 검색하고 거래를 발송하며 스마트 계약과 상호작용을 할 수 있다.

선결 조건:


Npm: Npm은 JavaScript 프로그래밍 언어의 패키지 관리자입니다.링크: https://nodejs.org/en/
Ganache: Ganache는 빠른 이더리움과 Corda 분포식 응용 프로그램 개발에 사용되는 개인 블록체인입니다.Ganache를 전체 개발 주기에 사용할 수 있습니다.안전하고 확실한 환경에서 개발, 배포 및 테스트를 수행할 수 있습니다Dapps.npm을 성공적으로 설치한 후 ganache cli를 설치합니다.명령:
npm install ganache-cli
Web3.js 명령:
npm install web3
하나의 노드입니다.solidity 파일을 컴파일하는 데 사용되는 js 라이브러리와 명령행 도구입니다.명령:
npm install solc

시작:


이 항목은 세 개의 주요 파일, 계수기로 나눌 것이다.솔, 이것은 우리의 계약서, 카운터가 될 거야.js는 우리의 배치 코드와 계수기로 구성될 것입니다.html은 웹3js를 사용하여 계약에 연결하고 저희 응용 프로그램의 전단을 가지고 있습니다.
프로젝트 구조는 모든 단계를 완료한 후 수행됩니다.
파일 시스템 구조

우리의 첫 계약서를 쓰다


카운터솔
// SPDX-License-Identifier: MIT
pragma solidity >=0.7.4;
contract FirstContract {
int public count = 0;
  function incr() public{
    count++;
  }
  function decr() public{
    count--;
  }
  function display() public view returns (int){
    return count;
  }
}
solidity와 자바를 연결할 수 있습니다. 자바와 구조가 비슷하기 때문입니다.자바에서 우리는 종류가 있고 튼튼한 계약이 있다.계약은 이더리움 블록체인에 주재하는 특정 주소의 함수와 데이터의 집합이다.
위의 코드에서, 우리는 계수기를 유지하기 위해 3개의 함수와 하나의 공공 변수가 있다.
기본적으로 공공으로 지정되지 않으면 계약 상태가 읽기만 하기 때문에 모든 함수를 공공으로 설정합니다.
보기 함수는 읽기 전용 함수로 상태 변수를 호출한 후에 수정할 수 없습니다.display () 함수는 변수를 수정하지 않기 때문에 보기 함수로 보존됩니다.
Solc를 사용하여 코드 컴파일하기
solcjs --bin --abi -o ./build counter.sol

왜냐하면 우리는 ganache를 시작하기 전에 ganache를 설치했기 때문이다.명령:
ganache-cli

로컬 서버에 배포


배치하다.js
const fs = require('fs');
const Web3 = require('web3');
const web3 = new Web3('http://localhost:8545');
const bytecode = fs.readFileSync('build/counter_sol_FirstContract.bin');
const abi = JSON.parse(fs.readFileSync('build/counter_sol_FirstContract.abi'));(async function () {
  const ganacheAccounts = await web3.eth.getAccounts();
  const myWalletAddress = ganacheAccounts[0];
  const myContract = new web3.eth.Contract(abi);
  myContract.deploy({
    data: bytecode.toString()
  }).send({
    from: myWalletAddress,
    gas: 5000000
  }).then((deployment) => {
    console.log('voting was successfully deployed!');
    console.log('voting can be interfaced with at this address:');
    console.log(deployment.options.address);
  }).catch((err) => {
    console.error(err);
  });
})();
solidity 코드를 컴파일하고 ganache를 시작하면 상기 스크립트를 배치해야 합니다.위의 각본은 그리 복잡하지 않으니 진정하세요.
앞의 세 줄은 우리가 스크립트를 배치하는 데 필요한 기본적인include 문장입니다.
다음 두 변수, 즉 바이트 코드와abi는 컴파일 과정에서 생성된 파일이다.솔의 극본.ABI는 일종의계약과 기능을 배치한 json 파일을 설명합니다.그것은 우리가 계약을 어경화하고 그 기능을 호출할 수 있도록 허락한다.bin은 바이트 코드를 컴파일하는 치밀한 이진 표시일 뿐입니다.이 조작 코드는 PUSH, PULL, DELEGATECALL에서 인용한 것이 아니라, 텍스트 편집기에서 읽을 때 무작위 수처럼 보이는 바이너리입니다.
다음 몇 줄은 ganache 계정, 지갑 주소, 계약의abi 등 서로 다른 매개 변수를 받아들인다. 일단 배치하면 웹 3에서 가져오는 데 사용할 계약 주소를 얻을 것이다.js
배포할 명령:
node counter.js
계약 주소

Dapp의 프런트엔드


카운터html

<!DOCTYPE html>
<html>
<head>
  <title>First DApp</title>
</head>
<body>
  Increment
  <button id="incr">+</button>
  <br>
  Decrement
  <button id="decr">-</button>
  <br />
  <label id="myLabel"></label>
</body>
<script src="[https://code.jquery.com/jquery-3.6.0.min.js](https://code.jquery.com/jquery-3.6.0.min.js)"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="[https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js](https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js)"></script>
Html 코드의 앞부분에는 두 개의 단추만 있고, 각각 증가 값과 감소 값에 두 개의 id가 분배되어 있다.나의 라벨은 카운터에 표시될 것이다.그 다음에 2개의 CDN 스크립트를 포함합니다. 첫 번째는 클릭 이벤트를 처리하는 JQuery, 두 번째는 계약과 상호작용하는 웹 3js
<script>
  const **web3** = new Web3('[http://localhost:8545'](http://localhost:8545'));
  const **myContractAddress** = //paste the address generated during deployment with single quotes;
  const **myAbi** = // paste your abi code as it is.
  const myContract = new web3.eth.Contract(myAbi, myContractAddress);
  const **htmlLabel** = document.getElementById('myLabel');
  myContract.methods.display().call().then((jsonRpcResult) => {
    htmlLabel.innerHTML = jsonRpcResult;
    console.log(jsonRpcResult);
  });
  $('#incr').click(function () {
myContract.methods **.incr** ().send({from:' **//paste avaiable accounts from ganache**'},function () {
      myContract.methods. **display** ().call((error, result) => { htmlLabel.innerHTML = result; console.log(result) })
    })
  });
  $('#decr').click(function () {
    myContract.methods. **decr** ().send({from:' **//paste avaiable accounts from ganache**'}, function () {
      myContract.methods. **display** ().call((error, result) => { htmlLabel.innerHTML = result; console.log(result) })
    })
  });
</script>
</html>
myContractAddress 변수에 배포 중에 생성된 계약 주소를 붙여넣습니다.
컴파일 과정에서 생성된abi 파일에abi 코드를 붙여넣습니다.솔 파일.
Htmllabel은 단추를 눌렀을 때만 myLabel의 인용을 업데이트합니다.
from 변수를 전달해야 하는 함수에 접근하려고 시도할 때마다, 어느 계정에서 계약에 접근하든지,ganache cli에서 이 변수를 가져와 임의의 주소에 붙일 수 있습니다.

출력:


모든 절차를 마친 후 크롬이나 다른 웹 브라우저에서 HTML 파일을 열고 첫 번째 Dapp 작업을 보십시오!와우!

축하합니다!네가 첫 번째 Dapp를 쓸 때, 네가 좋아하길 바란다.만약 당신이 더 많은 중심화된 인터넷 응용에 관한 재미있는 문장을 필요로 한다면, 당신의 건의를 포기하세요.
읽어주셔서 감사합니다!👋👋
내 웹 사이트sagar-gada.tech와 GitHubhere를 꼭 확인하십시오.
*따라와*
hdu1074---Doing Homework
cf Beautiful numbers(디지털 dp)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage