IT &amp; Mobile

react-native에서 web3를 쓰려면..

React.js 2018. 11. 19. 16:37

react-native에서 web3를 쓰려면 다음과 같은 dependency가 필요하다.

<2018년11월 버전>

- rn-nodeify를 이용해 몇가지 react-native에서 지원하지 않는 것들을 인위적으로 지원이 필요함.

- browser 단락 및 readable_stream 및 _stream으로 시작하는 것들은 자동으로 생성된 것임.

{
"name": "userphone",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"postinstall": "node_modules/.bin/rn-nodeify --install 'http,https,crypto,os,stream,vm' --hack"
},
"dependencies": {
"await-notify": "^1.0.1",
"axios": "^0.18.0",
"events": "^3.0.0",
"https-browserify": "1.0.0",
"process": "^0.11.10", "react": "16.6.1",
"react-native": "0.57.5",
"react-native-crypto": "2.1.2",
"react-native-device-info": "0.24.3",
"react-native-http": "0.0.3",
"react-native-os": "1.2.1",
"react-native-randombytes": "3.5.1",
"react-native-router-flux": "3.45.0",
"readable-stream": "^1.0.33",
"stream-browserify": "2.0.1",
"truffle-contract": "^3.0.4",
"url": "^0.11.0",
"util": "^0.11.1",
"vm-browserify": "1.1.0",
"web3": "^0.20.6"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.1",
"react-test-renderer": "16.6.1",
"rn-nodeify": "8.2.0"
},
"jest": {
"preset": "react-native"
},
"react-native": {
"crypto": "react-native-crypto",
"http": "react-native-http",
"https": "https-browserify",
"os": "react-native-os",
"stream": "stream-browserify",
"vm": "vm-browserify",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough"
},
"browser": {
"crypto": "react-native-crypto",
"http": "react-native-http",
"https": "https-browserify",
"os": "react-native-os",
"stream": "stream-browserify",
"vm": "vm-browserify",
"_stream_transform": "readable-stream/transform",
"_stream_readable": "readable-stream/readable",
"_stream_writable": "readable-stream/writable",
"_stream_duplex": "readable-stream/duplex",
"_stream_passthrough": "readable-stream/passthrough"
}
}

<2017년 버전- 웹상에서 발췌>

79ab6e6

on 26 Jul 2017

corymsmith Initial commit

1 contributor

Raw Blame History

101 lines (100 sloc)  3.08 KB

{
  "name": "mobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "assert": "^1.4.1",
    "browserify-zlib": "^0.1.4",
    "console-browserify": "^1.1.0",
    "constants-browserify": "0.0.1",
    "dns.js": "^1.0.1",
    "domain-browser": "^1.1.7",
    "events": "^1.1.1",
    "https-browserify": "0.0.1",
    "path-browserify": "0.0.0",
    "process": "^0.11.10",
    "querystring-es3": "^0.2.1",
    "react": "16.0.0-alpha.12",
    "react-native": "0.45.1",
    "react-native-crypto": "^2.0.2",
    "react-native-http": "github:tradle/react-native-http#834492d",
    "react-native-level-fs": "^3.0.0",
    "react-native-os": "^1.1.0",
    "react-native-randombytes": "^2.2.0",
    "react-native-tcp": "^2.0.4",
    "react-native-udp": "^1.2.9",
    "readable-stream": "^1.0.33",
    "stream-browserify": "^1.0.0",
    "string_decoder": "^0.10.31",
    "timers-browserify": "^1.4.2",
    "tty-browserify": "0.0.0",
    "url": "^0.10.3",
    "util": "^0.10.3",
    "vm-browserify": "0.0.4",
    "web3": "^0.19.1"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "2.0.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12",
    "rn-nodeify": "github:mvayngrib/rn-nodeify"
  },
  "jest": {
    "preset": "react-native"
  },
  "react-native": {
    "zlib": "browserify-zlib",
    "console": "console-browserify",
    "constants": "constants-browserify",
    "crypto": "react-native-crypto",
    "dns": "dns.js",
    "net": "react-native-tcp",
    "domain": "domain-browser",
    "http": "react-native-http",
    "https": "https-browserify",
    "os": "react-native-os",
    "path": "path-browserify",
    "querystring": "querystring-es3",
    "fs": "react-native-level-fs",
    "_stream_transform": "readable-stream/transform",
    "_stream_readable": "readable-stream/readable",
    "_stream_writable": "readable-stream/writable",
    "_stream_duplex": "readable-stream/duplex",
    "_stream_passthrough": "readable-stream/passthrough",
    "dgram": "react-native-udp",
    "stream": "stream-browserify",
    "timers": "timers-browserify",
    "tty": "tty-browserify",
    "vm": "vm-browserify"
  },
  "browser": {
    "zlib": "browserify-zlib",
    "console": "console-browserify",
    "constants": "constants-browserify",
    "crypto": "react-native-crypto",
    "dns": "dns.js",
    "net": "react-native-tcp",
    "domain": "domain-browser",
    "http": "react-native-http",
    "https": "https-browserify",
    "os": "react-native-os",
    "path": "path-browserify",
    "querystring": "querystring-es3",
    "fs": "react-native-level-fs",
    "_stream_transform": "readable-stream/transform",
    "_stream_readable": "readable-stream/readable",
    "_stream_writable": "readable-stream/writable",
    "_stream_duplex": "readable-stream/duplex",
    "_stream_passthrough": "readable-stream/passthrough",
    "dgram": "react-native-udp",
    "stream": "stream-browserify",
    "timers": "timers-browserify",
    "tty": "tty-browserify",
    "vm": "vm-browserify"
  }
}

저작자표시

Posted by yongary

,

Truffle Test array 예제

블록체인 2018. 11. 6. 09:34

간단하게 array를 세팅하는 solidity코드 및 테스트코드 예제입니다. (제가 작성한 건 아니지만..^^)

사전환경: $ganache-cli ( -l 1000000000 -p 7545)

/migrations밑에 2_deploy_contracts.js에 TestArray.sol 추가.

실행방법: $truffle compile -> $truffle migrate -> $truffle test

혹은

$truffle develop

$migrate

$test (test/testarray.test.js)

$truffle network 하면 deploy된 address를 볼 수 있음.

Solidity 소스:

pragma solidity ^0.4.24;

contract TestArray {

    uint[] heroArray;

    constructor() public {

    }

    function setHeroArray(uint[] array) public {
        for (uint i=0 ; i < array.length; i++) {
            setValue(array[i]);
        }
    }

    function setValue(uint a) private {
        heroArray.push(a);
    }

    function getHeroArray(uint a) view public returns(uint[]) {
        return heroArray;
    }

}

test/testarray.test.js 소스:

const assert = require('assert');
const ganache = require('ganache-cli');
const Web3 = require('web3');
const web3 = new Web3(ganache.provider());
const json = require('./../build/contracts/TestArray.json');

let accounts;
let arraySC;
const interface = json['abi'];
const bytecode = json['bytecode'];

beforeEach(async() => {
    accounts = await web3.eth.getAccounts();
    arraySC = await new web3.eth.Contract(interface)
        .deploy({data: bytecode})
        .send({from: accounts[0], gasLimit: 4000000});
});

describe(' --- Test Array --- ', () => {
   it('array Set', async() => {
        await arraySC.methods.setHeroArray([3,3,4]).send({from: accounts[0], gasLimit:150000});

        let resultArray = await arraySC.methods.getHeroArray(1).call();

        console.log('resultArray : ', resultArray);
        assert.equal(resultArray[2], 4, "값이 제대로 세팅되지 않았습니다 ");
   });
});

저작자표시

Posted by yongary

,

go언어 (c, java, javascript와 비교)

블록체인/geth 2018. 10. 6. 21:01

geth (이더리움 go client)를 분석 수정하려면, go언어 공부가 필요하다.

[go 언어]

- 설치: https://golang.org/dl/
- 편집: IntelliJ + go sdk plug-in 추천

- 환경변수: GOPATH - workspace 위치
GOROOT - go실행파일이 설치된 경로

$go env 로 환경변수 확인가능

- 학습사이트: REF

[c와 java/javascript 익숙자 기준 go언어의 차이]

변수Type (다양한 길이별로 지정이 가능하다)

- int int8~int64, uint uint8~uint64 uintptr, float32 float64 complex64 complex128

- rune: int32과 동일하며 유니코드 코드포인트에 사용

문자열 (java의 단점이던 멀티라인 문자열 지원)

- '원어퍼스트로피' 를 사용하면, 멀티라인 스트링이 되고, 그 안에 있는 \n등도 해석하지 않고 그대로 사용.

포인터 지원 (c처럼 &, * 를 통한 포인터 지원)

함수 (1st class함수)

- javascript처럼 함수를 파라미터로 넘길 수 있음

- javascript처럼 closure방식 함수 사용 가능

패키지 (java 처럼 pkg단위로 모듈관리)

- 디폴트 pkg 위치는 GOROOT/pkg 참조

- pkg는 init() 함수를 가질 수 있고, 임포트시에 _ 를 붙이면 임포트 안하고 init()만 호출한다.

defer / panic / recover

- defer는 java의 finally와 비슷하게 최종적으로 실행이 됨

- panic은 c의 exit같은 개념인데, defer함수들은 다 실행하면서 종료함. (좋아 보임)

- panic상태를 recover()릍 통해 회복도 가능

저작자표시

Posted by yongary

,

nginx와 springBoot

springBoot gradle 2018. 9. 21. 21:42

일반적으로 WAS서버만으로는 성능이 부족하므로,

웹+WAS 서버 결합해서 서비스를 하게 되는데,

에전에는 Apache+ Tomcat의 결합이 대세였다고 하면

요즘에는 nginx + SpringBoot(tomcat 포함)이 대세이다.

<nginx의 특징 및 주요 기능>

1. apache대비 빠르고 가볍다.

- apache가 클라이언트별로 thread를 할당하는 구조인데 반해,

nginx는 메시지방식(혹은 event-driven) 방식이다. 당연히 비동기식 메시징 방식이 훨씬 효율적이다.

자세한 비교는 REF

2. reverse PROXY가 강력하다.

- apace에서도 PROXY기능 외에 Reverse Proxy가 지원되었으나,

nginx의 reverse Proxy는 ID/비번도 부여할 수 있고.. 더 안전/강력해 보인다.

참고: PROXY vs Reverse_PROXY REF

- proxy는 웹브라우저 쪽: 웹브라우저 여러개가 하나의 proxy를 이용해 cache된 데이터를 받도록 해서

- reverse Proxy는 웹서버 쪽: 마치 L4처럼 하나의 ReverseProxy서버가 요청을 받아 여러 웹서버로 분리할 수 있다.

<nginx + springBoot 사용방식>

1. 기본설정 /nginx/conf/nginx.conf 를 편집하고 reload하면 됩니다.

http { ... ...

server {

listen 80;

... ...

location / {

proxy_pass http://localhost:8080;

}

... }

2. nginx + 2개 springBoot (각각 다른포트)를 이용한 무중단 배포 방식: REF gitREF

참고:

nginx를 centOs7에 설치하는 법 - REF

nginx를 이용한 reverseProxy 설정 - REF

저작자표시

Posted by yongary

,

이더리움 dApp 엔터프라이즈 개발환경

블록체인 2018. 8. 28. 09:05

엔터프라이즈 이더리움 dApp을 개발할 때, 많이 사용하는 개발툴은 다음과 같다.

1. truffle과 truffleContract를 이용한 solidity와 js 개발.

=> 특히 truffle5 부터 async/await을 훨씬 더 잘 지원함.

2. js개발은 ES6의 promise를 잘 쓰기 위하여 react를 추천.

3. MetaMask 로그인 plug-in

4. 그리고 백엔드(웹서버)로는 개인적으로는 express보다는
springBoot를 추천한다 - 엔터프라이즈급 백엔드가 가능하다.

React + SpringBoot + Truffle예제: http://github.com/yongarykim

자세한 툴들 List:
https://github.com/ConsenSys/ethereum-developer-tools-list/blob/master/README.md

저작자표시

Posted by yongary

,

합의 알고리듬과 토큰이코노미

블록체인 2018. 8. 28. 09:02

참고 사이트 https://brunch.co.kr/@bitcoin/10

PoW PoS BFT등 합의 알고리듬을 평가할 때 DCS삼각형을 사용해서 평가한다.

토큰이코노미에서 토큰 수량을 분석할때는 MV=PQ 공식을 사용한다.

저작자표시

Posted by yongary

,

Truffle 5.0.0 Beta출시

블록체인 2018. 8. 23. 09:11

이더리움(ethereum) 엔터프라이즈 dApp 개발환경인 truffle 5.0.0 beta가 출시되었다.

덩달아 web3.js의 1.0.0도 같이 나왔다.

(하지만 2018년에는 아직까지는 비추이다.. 버그 존재)

https://github.com/trufflesuite/truffle/releases (2018.8월 기준)

가장 큰 변화는 truffle test 시에 에러내역이 출시된다는 것이다.

베타인 관계로 설치방법이 좀 다른데, 아래와 같이 설치가 가능하다.

npm uninstall -g truffle
npm install -g truffle@beta

그 외에 주요 변화는

1. truffle console에서도 await 이 된다. (async를 알아서 불러줘서, async없이도 await을 막 써도 되는 곳이 몇군데 있고) '

심지어는 deploy에서도 await이 사용가능하다.

 const One = artifacts.require("One");
 const Two = artifacts.require("Two");

 module.exports = async function(deployer) {
  await deployer.deploy(One);

  const one = await One.deployed();
  const value = await one.value();

  await deployer.deploy(Two, value);
};

2. BigNumber대신에 BN으로 대치되고, BN에서는 포맷설정이 가능하기 때문에 BigNumber도 계속 사용은 가능하다.

web3와 결합한 BN사용방식은 다음과 같다.

const stringBalance = await web3.eth.getBalance('0xabc..');
const bnBalance = web3.utils.toBN(stringBalance);

저작자표시

Posted by yongary

,

Ethereum dApp - Dev Environment

블록체인 2018. 7. 15. 18:15

제목: truffle과 ES6 javascript를 이용한, 이더리움 dApp 개발환경 :

Explanation - ENG

BaseContract (below) is base class when making javascript Contract using truffle & ES6-javascript
This can be used when using several ES6-javascript like Vue.js, Angular.js and react.js
When developing Ethereum dApp, this class helps to map functions between Solidity and Javascript, and helps web3 process of MetaMask and etc.
Detail using example can be found on https://github.com/yongarykim/RSTdAppDevEnv/tree/master/react-frontend/src/contracts

Explanation - KOR

truffle을 이용해서 javascript contract를 개발할 때, 상속받아서 쓰도록 만든 기본 class이다.
각종 ES6-javascript language에서 아래 BaseContract를 상속을 받아서 이더리움 dApp개발시 사용할 수 있다.
이더리움 dApp개발시 간단히 solidity의 함수와 js 함수간 매핑하도록 도와주며, metaMask 등의 web3처리를 자동으로 해준다. 자세한 사용예제는 https://github.com/yongarykim/RSTdAppDevEnv/tree/master/react-frontend/src/contracts 를 참고하도록 한다.

소스: https://github.com/yongarykim/ES6-ContractBase

/**
 * BaseContract - super class of all contracts (using Web3 & TruffleContract)
 *
 * <History>
 * @author  Yong Kim (yongary.kim@gmail.com)
 * @date 2018.4.5 - first created
 * @date 2018.6.11 - promisify & getMyAccount added
 * @date 2018.6.13 - contractDeployed added.
 *
 */

import Web3 from 'web3';
import TruffleContract from 'truffle-contract';
import $ from 'jquery';
import { Subject } from 'await-notify';

//web3함수를 Promise로 만들기 위한 공통모듈
const promisify = (inner) =>
    new Promise((resolve, reject) =>
        inner((err, res) => {
            if (err) { reject(err) }
            resolve(res);
        })
    );

export default class BaseContract {

    constructor() {
        this.contract = {};
        this.initWeb3();
        //contract.deployed()가 initContract 보다 빨리 호출되는 경우용
        this.eventWaiting = new Subject();
    }

    initWeb3() {
        // Metamask
        console.log("this.web3:")
        console.log(this.web3);
        console.log("window.web3:")
        console.log(window.web3);

        if (typeof window.web3 !== 'undefined') {
            this.web3 = new Web3(window.web3.currentProvider);
        } else {
            //LocalTest  set the provider you want from Web3.providers
            console.log("initWeb3: local");
            this.web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
        }
        console.log(this.web3);
    }

    /* new 이후에 호출 필요 */
    initContract(contractJson) {

        let self = this;
        $.getJSON(contractJson, function (data) {
            // Get the necessary contract artifact file and instantiate it with truffle-contract
            let contractArtifact = data;

            console.log('initContract:' + self.contract);

            self.contract = TruffleContract(contractArtifact);
            self.contract.setProvider(self.web3.currentProvider);

            console.log('initContract out');
            self.eventWaiting.notify(); //contractDeployed가 먼저 불렸을 경우 대비.
        });
    }

    /* contract관련 check함수 */

    /**
     * contractDeployed
     *       - same as contract.deployed,
     *          But waiting initContract to finish
     *       - useful when doing something on screen loading..
     * */
    contractDeployed = async () => {

        console.log('in contractDeployed:');
        if (Object.keys(this.contract).length === 0 ) {//contract Empty = initContract수행중
            console.log(this.contract);

            while (true) {
                await this.eventWaiting.wait();
                console.log('initContract Done');
                break; //exit when notified.
            }
        }
        console.log('out contractDeployed:');
        return this.contract.deployed().then((instance) => {return instance;});

    }


    /* web3/eth Basic함수들 - eth의 sync함수는 값을 못 읽어 오는 경우가 발생가능하므로 async함수를 써야 함. */

    getMyAccount = async () => {
        const accounts = await promisify(cb => this.web3.eth.getAccounts(cb));
        return accounts[0];  //accounts Array의 0번째가 본인 account임.
    }
}

부연설명

이더리움 dApp을 개발할 경우, truffle과 javascript를 이용해서 개발하는 게 편리하다.

특히, javascript를 ES6로 사용하면 상속을 쉽게 사용할 수 있기 때문에,

복잡한 dApp을 개발할 수 있는 밑거름이 된다.

(아무 생각없이, html과 javascript, truffle을 섞어서 쓴다면 간단한 dApp을 만들고 나서

복잡한 dApp은 만들다가 포기하게 될 확률이 높아진다)

복잡하고 어려운 dApp을 개발하기 위해서는 건물의 기초공사부터 튼튼하게 해 놓듯이

ES6 javascript를 이용해서 javascript를 개발하기를 권장하고.

그래서, 그 때 도움이 될 class를 만들어 본것이다.

ES6- javascript의 상속을 사용할 수 있기 때문에 쉽게쉽게 truffle contract기반의

javascript contract가 생성이 가능하다.

자세한 사용예제는 https://github.com/yongarykim/RSTdAppDevEnv/tree/master/react-frontend/src/contracts

저작자표시

Posted by yongary

,

private Geth, 필요할때만 mining하기

블록체인 2018. 6. 25. 10:21

REF

private 이더리움 환경을 구성해서 mining을 시켜놓으면, 쉬지 않고 mining을 한다.

혹시 이게 부담된다면

transaction이 생겼을때만 mining하는 방법이 있다.

(하드디스크나 cpu부하를 줄이기에 용이하다.)

var mining_threads = 1

function checkWork() {
    if (eth.getBlock("pending").transactions.length > 0) {
        if (eth.mining) return;
        console.log("== Pending transactions! Mining...");
        miner.start(mining_threads);
    } else {
        miner.stop();
        console.log("== No transactions! Mining stopped.");
    }
}

eth.filter("latest", function(err, block) { checkWork(); });
eth.filter("pending", function(err, block) { checkWork(); });

checkWork();

pending블록이 있을때만 miner.start를 하고, 아닌경우 miner.stop을 하는 코드이다.

이걸 javascript로 별도저장해서 geth실행시 반영하려면

geth --preload "/path/to/mineWhenNeeded.js"

와 같이 하면된다.

저작자표시

Posted by yongary

,

IT & Mobile

Web3J로 eth transaction실행

react-native에서 web3를 쓰려면..

bullish-ventures/react-native-web3-example

Truffle Test array 예제

go언어 (c, java, javascript와 비교)

nginx와 springBoot

이더리움 dApp 엔터프라이즈 개발환경

합의 알고리듬과 토큰이코노미

Truffle 5.0.0 Beta출시

Ethereum dApp - Dev Environment

Explanation - ENG

private Geth, 필요할때만 mining하기

링크

카테고리

최근에 올라온 글

태그목록

달력

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

티스토리툴바


	by yongary

bullish-ventures/react-native-web3-example

Join GitHub today

Explanation - ENG

링크

카테고리

최근에 올라온 글

태그목록

달력

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

티스토리툴바