Truffle과 node.js로 웹 브라우저에 HelloEthereum!
Truffle, node.js, Ganache를 사용하므로 아래 사이트를 참고하여 설치하십시오.
Dapps 작성 순서를 이치로부터 배울 수 있다! Truffle의 "이더리움 애완 동물 가게"
계약을 배포하려면
이제 먼저 모든 디렉토리에 HelloEthereum이라는 디렉토리를 작성하십시오.
mkdir HelloEthereum
다음으로 환경의 구축을 해 나갑니다.
이번에는 truffle이라는 프레임 워크를 사용합니다.
truffle은 Ethereum의 개발 언어인 solidity에서의 개발을 지원하는 프레임워크입니다.
먼저 다음 명령으로 초기화합니다.
truffle init
그런 다음 아래 명령을 사용하여 solidity 파일을 만듭니다.
truffle create contract HelloEthereum
contract 내에 HelloEthereum.sol이라는 파일이 작성되므로 편집합니다.
HelloEthereum.sol
pragma solidity ^0.4.22;
contract HelloEthereum {
string private _word;
constructor() public {
_word = "HelloEthereum!";
}
function get() public view returns(string){
return _word;
}
}
get이라는 함수를 호출하면 HelloEthereum!을 반환합니다.
그런 다음이 파일을 컴파일합니다.
truffle compile
컴파일이 성공하면 build 디렉토리가 생성됩니다.
그런 다음 migration 파일을 만듭니다.
migrations 안에 2_deploy_contracts.js라는 파일을 만듭니다.
2_deploy_contracts.jsvar HelloEthereum = artifacts.require("HelloEthereum");
module.exports = function(deploy){
deploy.deploy(HelloEthereum);
}
그런 다음 truffle.js 파일을 편집합니다.
truffle.js
module.exports = {
networks:{
development:{
host: "127.0.0.1",
port: 7545,
network_id: "5777"
}
}
}
host, port, network_id는 자신의 설정으로 변경하십시오.
시작되면 페이지 상단에 나열됩니다.
마지막으로 ganache를 시작한 후 다음 명령으로 배포합니다.
truffle migrate
이것으로 일단 테스트 환경의 블록 체인에 배포가 완료되었습니다.
서버 설정
node.js를 사용하여 서버 환경을 구축합니다.
npm init -y
이번에는 라이트 서버를 사용합니다.
npm install lite-server --save
그런 다음 bs-config.json이라는 파일을 만듭니다.
이번에 사용하는 lite-server의 설정 파일입니다.
bs-config.json{
"server": {
"baseDir": ["./src", "./build/contracts"]
}
}
그런 다음 src 폴더를 만듭니다.
그런 다음 truffle-contract를 설치하십시오.
npm install truffle-contract --save
node-modules/truffle-contract/dist의 truffle-contract.js라는 파일을 src에 복사합니다.
마지막으로 package.json를 다음과 같이 편집하십시오.scripts 에 "dev": "lite-server" 를 추가합니다.
package.json{
"name": "HelloEthereum",
"version": "1.0.0",
"description": "",
"main": "truffle-config.js",
"directories": {
"test": "test"
},
"dependencies": {
"lite-server": "^2.4.0",
"truffle-contract": "^3.0.6"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "lite-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
이것으로 서버 설정이 종료됩니다.
프런트 엔드 부분 만들기
마지막으로 프런트 엔드 부분을 만듭니다.index.html 와 index.js 라는 파일을 작성해 다음과 같이 편집합니다.
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Ethereum</title>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="./truffle-contract.js"></script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
index.jsApp = {
web3Provider:null,
contracts: {},
initWeb3: function(){
App.web3Provider = new web3.providers.HttpProvider("http://localhost:7545");
return App.initContract();
},
initContract: function(){
$.getJSON('HelloEthereum.json', function(data){
var Artifact = data;
App.contracts.HelloEthereum = TruffleContract(Artifact);
App.contracts.HelloEthereum.setProvider(App.web3Provider);
App.contracts.HelloEthereum.deployed().then(function(instance) {
return instance.get.call();
}).then(function(adopters){
document.write(adopters);
}).catch(function(err){
console.log(err.message);
});
});
}
}
window.onload = function(){
App.initWeb3();
}
다음 명령을 두드리면 서버가 시작되고 브라우저가 시작됩니다.
npm run dev
HelloEtereum이라고 표시되면 성공입니다. 수고하셨습니다.
Reference
이 문제에 관하여(Truffle과 node.js로 웹 브라우저에 HelloEthereum!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/miya839/items/aaff8bdd671a179c94cf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
mkdir HelloEthereum
truffle init
truffle create contract HelloEthereum
pragma solidity ^0.4.22;
contract HelloEthereum {
string private _word;
constructor() public {
_word = "HelloEthereum!";
}
function get() public view returns(string){
return _word;
}
}
truffle compile
var HelloEthereum = artifacts.require("HelloEthereum");
module.exports = function(deploy){
deploy.deploy(HelloEthereum);
}
module.exports = {
networks:{
development:{
host: "127.0.0.1",
port: 7545,
network_id: "5777"
}
}
}
truffle migrate
node.js를 사용하여 서버 환경을 구축합니다.
npm init -y
이번에는 라이트 서버를 사용합니다.
npm install lite-server --save
그런 다음 bs-config.json이라는 파일을 만듭니다.
이번에 사용하는 lite-server의 설정 파일입니다.
bs-config.json
{
"server": {
"baseDir": ["./src", "./build/contracts"]
}
}
그런 다음 src 폴더를 만듭니다.
그런 다음 truffle-contract를 설치하십시오.
npm install truffle-contract --save
node-modules/truffle-contract/dist의 truffle-contract.js라는 파일을 src에 복사합니다.마지막으로
package.json를 다음과 같이 편집하십시오.scripts 에 "dev": "lite-server" 를 추가합니다.package.json
{
"name": "HelloEthereum",
"version": "1.0.0",
"description": "",
"main": "truffle-config.js",
"directories": {
"test": "test"
},
"dependencies": {
"lite-server": "^2.4.0",
"truffle-contract": "^3.0.6"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "lite-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
이것으로 서버 설정이 종료됩니다.
프런트 엔드 부분 만들기
마지막으로 프런트 엔드 부분을 만듭니다.index.html 와 index.js 라는 파일을 작성해 다음과 같이 편집합니다.
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Ethereum</title>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="./truffle-contract.js"></script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
index.jsApp = {
web3Provider:null,
contracts: {},
initWeb3: function(){
App.web3Provider = new web3.providers.HttpProvider("http://localhost:7545");
return App.initContract();
},
initContract: function(){
$.getJSON('HelloEthereum.json', function(data){
var Artifact = data;
App.contracts.HelloEthereum = TruffleContract(Artifact);
App.contracts.HelloEthereum.setProvider(App.web3Provider);
App.contracts.HelloEthereum.deployed().then(function(instance) {
return instance.get.call();
}).then(function(adopters){
document.write(adopters);
}).catch(function(err){
console.log(err.message);
});
});
}
}
window.onload = function(){
App.initWeb3();
}
다음 명령을 두드리면 서버가 시작되고 브라우저가 시작됩니다.
npm run dev
HelloEtereum이라고 표시되면 성공입니다. 수고하셨습니다.
Reference
이 문제에 관하여(Truffle과 node.js로 웹 브라우저에 HelloEthereum!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/miya839/items/aaff8bdd671a179c94cf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Ethereum</title>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="./truffle-contract.js"></script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
App = {
web3Provider:null,
contracts: {},
initWeb3: function(){
App.web3Provider = new web3.providers.HttpProvider("http://localhost:7545");
return App.initContract();
},
initContract: function(){
$.getJSON('HelloEthereum.json', function(data){
var Artifact = data;
App.contracts.HelloEthereum = TruffleContract(Artifact);
App.contracts.HelloEthereum.setProvider(App.web3Provider);
App.contracts.HelloEthereum.deployed().then(function(instance) {
return instance.get.call();
}).then(function(adopters){
document.write(adopters);
}).catch(function(err){
console.log(err.message);
});
});
}
}
window.onload = function(){
App.initWeb3();
}
npm run dev
Reference
이 문제에 관하여(Truffle과 node.js로 웹 브라우저에 HelloEthereum!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/miya839/items/aaff8bdd671a179c94cf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
