이더넷에서 간단한 정보 응용 프로그램 만들기(Ethernet.js)
개시하다
이더넷을 사용하여 중앙 관리 조직이 필요 없는 분산된 응용프로그램(dApps)을 만들 수 있습니다.
이번에는 dApps를 이해하기 위해 이더넷에서 다음과 같은 정보 애플리케이션을 만들어 봤다.
프로비저닝
나는 가능한 한 간단하게 실시하고 싶어서 다음과 같은 구성을 하였다.
웹 프런트엔드
지갑 프로그램.기밀 키 관리, 서명 구조기.
이더넷 노드의 API에 액세스합니다.
Node.브라우저가 js에 접근할 수 있도록 하는 모듈 폴더입니다.
웹 백엔드
지능 구조기 개발 환경
Solidity(스마트 구조기를 설명하는 언어)의 개발 환경.브라우저 기반이므로 설치할 필요가 없습니다.메타마스크에도 연결할 수 있어 직접 구성을 설계할 수 있다.
Remix를 사용한 지능형 구조기의 컴파일링 및 설계
우선 이더넷에서 실행되는 스마트 설정은 Solidity로 기술할 수 있다.브라우저에서 컴파일하고 디자인할 수 있는 리믹스처럼 편리한 개발 환경이 있기 때문에 이걸 사용합니다.
리믹스 사용 방법은 과거 기사를 참조하십시오.
작성 및 컴파일러
내가 먼저solidity 프레임워크를 하나 만들게.적당한 디렉터리에서 새 메시지.sol 을 만들고 메시지.sol 을 편집하고 다음 내용을 쓰십시오.
message.sol
pragma solidity >=0.7.0 <0.8.0;
contract Message {
string message;
function store(string memory msg_in) public {
message = msg_in;
}
function retrieve() public view returns (string memory){
return message;
}
}
retrieve () public view returns (string memory) 호출은 메시지 변수에 저장된 값을 호출합니다.
다음은 컴파일러로 제작된 구조기다.Solidity Compuiler 탭에서 Compuile message.sol 을 클릭합니다.
오류가 없으면 컴파일에 성공했습니다.
구조기의 설계
리믹스의 "DEPLOY &RUN TRANSACTIONS"라벨에서 디자인되었습니다.
Environment Inject Web 3 을 선택합니다.선택하면 메타마스크 연합이 진행됩니다.메타 마스크 계정과 이더넷 잔액을 미리 준비하세요.테스트 네트워크 랩텐 네트워크를 사용합니다.
이 설정에서 "Deploy"버튼을 누르면 마스크의 화면이 팝업됩니다.
테스트망이니까 가스 가격은 1GWEI죠.기체 제한은 알림값을 유지한다.
이 설정에서 확인 버튼을 누릅니다.
거래를 보냈습니다.콘솔에 거래된 이더넷 주소가 표시됩니다.거래를 보낸 후 잠시 후에 이 주소에서 이더산을 확인하면'Status:success'가 되어 거래가 순조롭게 비준되었다.
작업 구성의 인터페이스 작성
다음은 디버깅을 한 구조기의 응용 프로그램을 만듭니다.
우선 npm에 필요한 모듈(ethers/browserify)을 설치합니다.
npm init
npm install ethers
npm install browserify
main.js
server.js
public/
├ index.html
└ contract.js
앱의 전부를 Giithub에게 주었기 때문에 참고로 여기서 중점을 두고 간략하게 설명하겠습니다.
HTML 인터페이스
HTML 인터페이스는 다음과 같습니다.
읽은 js 파일은 다음에 설명한browserify가 만든 파일 (contract browser.js) 입니다.
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Ethereum test dapp</title>
</head>
<body>
<h1>Ethereum test dapp</h1>
<h3>Status</h3>
<p>Accounts: <span id="accounts"></span></p>
<h3 class>Actions</h4>
<button id="connectButton" disabled></button>
<button id="retrieveButton" disabled>Retrieve</button>
<p id="messageStatus">no status</p>
<button id="storeButton" disabled>Store</button>
<input type="text" id="inputMessage">
<script src="contract_browser.js" defer></script>
</body>
</html>
JavaSctipt
잠깐만요.js를 가져옵니다.
contract.js
const { ethers } = require("ethers");
contract.js
const MetaMaskClientCheck = () => {
if (!isMetaMaskInstalled()) {
onboardButton.innerText = 'Please install MetaMask';
} else {
onboardButton.innerText = 'Connect';
onboardButton.onclick = onClickConnect;
onboardButton.disabled = false;
}
};
const isMetaMaskInstalled = () => {
const { ethereum } = window;
return Boolean(ethereum && ethereum.isMetaMask);
};
ethereum.request({method: 'eth_requestAccounts'}) 계정에 연결을 요청합니다.연결이 완료되면 상자에 주소를 표시하고 "retrieve"/"store"단추를 활성화합니다.js를 사용하여 설정 실례를 생성합니다.contract.js
const onClickConnect = async () => {
try {
//アカウントへの接続を要求
const newAccounts = await ethereum.request({
method: 'eth_requestAccounts',
})
accounts = newAccounts;
//アカウントのアドレスを表示
accountsDiv.innerHTML = accounts;
if (isMetaMaskConnected()) {
//retrieve・storeボタンを有効化
retrieveButton.disabled = false;
retrieveButton.onclick = onClickRetrieve;
storeButton.disabled = false;
storeButton.onclick = onClickStore;
//provider(Metamask)を設定
const provider = new ethers.providers.Web3Provider(ethereum);
//signerの設定
const signer = provider.getSigner(0);
//コントラクトのインスタンスを生成
myContract = new ethers.Contract(ContractAddress, ContractAbi, signer);
}
} catch (error) {
console.error(error);
}
};
contract.js
const ContractAddress = "0x...";
const ContractAbi = [
{
"inputs": [
{
"internalType": "string",
"name": "msg_in",
"type": "string"
}
],
"name": "store",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "retrieve",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
디버그된 구성 주소는 Remix의 "DEPLOY &RUN TRANSACTIONS"탭의 "Deployed Contracts"탭에서 가져옵니다.
ABI는 "SOLIDITY COMPILER"탭에서 Remix를 복사할 수 있습니다.
구조기의retrieve 함수를 호출하는 부분은 다음과 같습니다.
read-only의 함수이기 때문에 거래가 필요 없습니다.
contract.js
const onClickRetrieve = async () => {
try {
let res = await myContract.retrieve();
messageStatus.innerHTML = res;
} catch (error) {
console.error(error);
}
}
우리는 가격을 기입해야 하기 때문에 실행하려면 거래가 필요하다.
텍스트 상자에 입력한 값을 가져오고store 함수를 호출해서 업무에 보냅니다.
contract.js
const onClickStore = async () => {
try {
let message = inputMessage.value;
myContract.store(message);
messageStatus.innerHTML = 'Your message has been sent';
} catch (error) {
console.error(error);
}
}
browserify로 구축
브라우저를 사용할 수 있도록 브라우저 ify로 묶습니다.
npx browserify .\public\contract.js -o .\public\contract_browser.js
Node.js에서 응용 프로그램 시작
Node.js에서 서버 시작
node .\main.js
총결산
이더넷의 dApps를 이해하기 위해 Solidity는 메시지 응용 프로그램을 제작하고 이를 테스트 네트워크로 설계하는 등이다.우리는 심지어 js 조작 구조기에 따라 인터페이스를 만들었다.인터페이스를 만들어 직접 해보면 즐거울 거예요.
참고 자료
Reference
이 문제에 관하여(이더넷에서 간단한 정보 응용 프로그램 만들기(Ethernet.js)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/zzz/articles/368367ec20aa42텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
