web3. js 학습

이 더 리 움 펀드 가 발표 한 JavaScript 라 이브 러 리 - Web3. js 이 더 리 움 네트워크 는 노드 로 구성 되 고 모든 노드 는 블록 체인 의 복사 본 을 포함한다.스마트 계약 의 한 방법 을 호출 하려 면 그 중의 한 노드 에서 찾 아 알려 야 합 니 다.
스마트 계약 의 주 소 를 호출 하고 싶 은 방법 과 그 방법 을 입력 하고 싶 은 매개 변 수 는 태 방 노드 에서 JSON - RPC 라 는 언어 만 식별 할 수 있 습 니 다.이런 언어 는 직접 읽 어 보면 결코 이해 하기 어렵다.계약 방법 을 호출 하고 싶 을 때 보 내야 할 검색 어 는 다음 과 같 습 니 다.

{"jsonrpc":"2.0","method":"eth_sendTransaction","params":[{"from":"0xb60e8dd61c5d32be8058bb8eb970870f07233155","to":"0xd46e8dd67c5d32be8058bb8eb970870f07244567","gas":"0x76c0","gasPrice":"0x9184e72a000","value":"0x9184e72a","data":"0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675"}],"id":1}

github 에서 압축 된. js 파일 을 직접 다운로드 하여 프로젝트 파일 에 포함 시 킬 수 있 습 니 다.

웹 3. js 에 웹 3 의 Provider (공급 자) 를 설정 하면 코드 가 어느 노드 와 상호작용 을 해서 우리 의 읽 기와 쓰 기 를 처리 해 야 하 는 지 알려 줍 니 다.이것 은 마치 전통 적 인 웹 프로그램 에서 당신 의 API 호출 을 위해 원 격 웹 서버 의 주 소 를 설정 하 는 것 과 같 습 니 다.metamask

window.addEventListener('load', function() {

  //   web3       (Mist/MetaMask)
  if (typeof web3 !== 'undefined') {
    //    Mist/MetaMask     
    web3js = new Web3(web3.currentProvider);
  } else {
    //           ，         
    //         MetaMask         
  }

  //                  Web3.js:
  startApp()

})

웹 3. js 는 계약 과 대화 할 두 가지 물건 이 필요 합 니 다. 주소 와 ABI 입 니 다.배치 후 이 주 소 를 복사 한 후 스마트 계약 대화 ABI 는 바 이 너 리 인터페이스 (Application Binary Interface) 를 사용 하 는 것 을 의미 합 니 다.기본적으로 JSON 형식 으로 계약 을 표시 하 는 방법 으로 Web3. js 에 게 계약 이해 방식 으로 함수 호출 을 포맷 하 는 방법 을 알려 준다.실례 화:

var myContract = new web3js.eth.Contract(myABI, myContractAddress);

Web3. js 는 우리 계약 의 함 수 를 호출 하 는 두 가지 방법 이 있 습 니 다. call and send. call 은 view 와 Pure 함 수 를 호출 합 니 다.로 컬 노드 에서 만 실행 되 며 블록 체인 에 사 무 를 만 들 지 않 습 니 다.
복습: view 와 pure 함 수 는 읽 기만 하고 블록 체인 의 상 태 를 바 꾸 지 않 습 니 다.그것들 도 어떠한 gas 도 소모 하지 않 을 것 이다.사용자 도 MetaMask 로 트 랜 잭 션 에 서명 하 라 는 요 구 를 받 지 않 습 니 다.
send 는 트 랜 잭 션 을 만 들 고 블록 체인 의 데 이 터 를 변경 합 니 다.비 view 나 pure 의 함 수 를 send 로 호출 해 야 합 니 다.
메모: send 는 사용자 에 게 gas 를 지불 하 라 고 요구 하고 팝 업 대화 상자 에서 Metamask 를 사용 하여 트 랜 잭 션 서명 을 요청 합 니 다.우리 가 Metamask 를 우리 의 웹 3 공급 자로 사용 할 때, 이 모든 것 은 우리 가 send () 를 호출 할 때 자동 으로 발생 합 니 다.코드 에 신경 쓰 지 않 아 도 돼 요. 시원 하 죠?
계약 에서 얻 은 데 이 터 를 어떻게 표시 합 니까?

function displayZombies(ids) {
        $("#zombies").empty();
        for (id of ids) {
          // Look up zombie details from our contract. Returns a `zombie` object
          getZombieDetails(id)
          .then(function(zombie) {
            // Using ES6's "template literals" to inject variables into the HTML.
            // Append each one to our #zombies div
            $("#zombies").append(`

              

                
Name: ${zombie.name}
                
DNA: ${zombie.dna}
                
Level: ${zombie.level}
                
Wins: ${zombie.winCount}
                
Losses: ${zombie.lossCount}
                
Ready Time: ${zombie.readyTime}
              
            
`);
          });
        }
      }

call 함수 에 비해 send 함 수 는 다음 과 같은 주요 차이 가 있 습 니 다.
send 사 무 는 누가 이 함 수 를 호출 하고 있 는 지 를 보 여 주 는 from 주소 가 필요 합 니 다. (즉, Solity 코드 에 있 는 msg. sender) 이것 은 우리 DApp 의 사용자 가 필요 합 니 다. 그래 야 MetaMask 에서 트 랜 잭 션 에 서명 할 수 있 습 니 다.
send 사 무 는 gas 를 소비 합 니 다.
사용자 send 에서 이 트 랜 잭 션 이 블록 체인 에 실제 적 인 영향 을 미 치 는 동안 무시 할 수 없 는 지연 이 발생 합 니 다. 이 는 하나의 블록 에 포 함 될 때 까지 기 다 려 야 하기 때 문 입 니 다. 이 더 리 움 의 이전 블록 시간 은 평균 15 초 정도 입 니 다. 현재 이 더 리 움 에서 트 랜 잭 션 을 대량으로 걸 거나 사용자 가 너무 낮은 gas 가격 을 보 냈 다 면, 우리 의 트 랜 잭 션 은 가능 합 니 다.몇 개의 블록 을 기 다 려 야 포함 되 고 몇 분 이 걸 릴 수 있 습 니 다.
Wei 란 무엇 입 니까? 하나의 wei 는 너무 작은 단위 입 니 다 - 1 ether 는 10 ^ 18 wei 와 같 습 니 다.
0 이 너무 많 지만 다행히 Web3. js 는 우 리 를 도와 이 일 을 할 수 있 는 변환 도구 가 있 습 니 다.

//   1 ETH     Wei
web3js.utils.toWei("1", "ether");

indexed 를 사용 하여 현재 사용자 와 만 관련 된 이 벤트 를 선별 하기 위해 서 저희 의 Solidity 계약 은 indexed 키 워드 를 사용 해 야 합 니 다.
과거 이 벤트 를 조회 할 때 getPastEvents 로 과거 이 벤트 를 조회 할 수 있 습 니 다. 필터 from Block 과 toBlock 으로 Solity 에 이벤트 로그 의 시간 범위 ("Block" 은 이 더 리 움 블록 번 호 를 대표 합 니 다):

cryptoZombies.getPastEvents("NewZombie", { fromBlock: 0, toBlock: 'latest' })
.then(function(events) {
  // events          `event`    
  //                       
});

이 방법 으로 초기 이벤트 로 그 를 조회 할 수 있 기 때문에 아주 재 미 있 는 사례 가 있 습 니 다. 이벤트 로 더 저렴 한 저장 소 를 만 들 수 있 습 니 다. Web3. js 이벤트 와 MetaMask 의 예제 코드 는 Web3. js 최신 버 전 1.0 을 위 한 것 입 니 다. 이 버 전 은 웹 소켓 을 사용 하여 이 벤트 를 구독 합 니 다.
그러나 MetaMask 는 최신 이벤트 API 를 지원 하지 않 습 니 다. (그럼 에 도 불구 하고 이 기능 을 실현 하고 있 습 니 다. 여 기 를 클릭 하여 진 도 를 확인 하 십시오)
그래서 지금 우 리 는 이벤트 에 대해 웹 소켓 지원 을 제공 하 는 단독 웹 3 공급 자 를 사용 해 야 합 니 다. 우 리 는 인 프 라 로 두 번 째 복사 본 을 예화 할 수 있 습 니 다.

var web3Infura = new Web3(new Web3.providers.WebsocketProvider("wss://mainnet.infura.io/ws"));
var czEvents = new web3Infura.eth.Contract(cryptoZombiesABI, cryptoZombiesAddress);

그리고 저 희 는 czEvents. events. Transfer 를 사용 하여 사건 을 감청 할 것 입 니 다. cryptoZombies. events. Transfer 를 사용 하지 않 습 니 다. 저 희 는 수업 의 다른 부분 에서 cryptoZombies. methods 를 계속 사용 할 것 입 니 다.
앞으로 MetaMask 에서 API 지원 Web3. js 를 업그레이드 한 후에 우 리 는 이렇게 하지 않 아 도 됩 니 다. 그러나 지금 우 리 는 이렇게 해서 Web3. js 의 더 좋 은 최신 문법 으로 사건 을 감청 해 야 합 니 다.
이것 은 당신 이 완성 해 야 할 기본 사항 목록 입 니 다.
attack, changeName, changedna, ERC 721 함수 transfer, owner of, balance Of 등 을 위 한 전단 함수 입 니 다. 이 함수 들 의 실현 은 우리 가 말 한 send 트 랜 잭 션 함수 와 매우 비슷 합 니 다.
"관리 인터페이스" 를 구현 합 니 다. setKitty Contract Address, setLevel UpFee, withdraw 를 호출 할 수 있 습 니 다. 또한 전단 에 특별한 코드 가 없습니다. 이 실현 들 은 매우 비슷 할 것 입 니 다. 배치 계약 에서 같은 이 더 리 움 주소 에서 이 함 수 를 호출 할 것 을 보증 해 야 합 니 다. 그들 은 모두 only Owner 수식 자 를 가지 고 있 기 때 문 입 니 다.
응용 에서 우 리 는 다른 인터페이스 도 실현 해 야 한다.
a. 좀 비 페이지 입 니 다. 특정 좀 비의 정 보 를 보고 링크 를 공유 할 수 있 습 니 다. 이 페이지 는 좀 비의 외형 을 과장 하고 이름, 소유자 (사용자 홈 페이지 링크), 승리 횟수, 전투 기록 등 을 보 여 줘 야 합 니 다.
b. 사용자 인터페이스 에서 사용자 의 좀 비 대군 을 보고 링크 를 공유 할 수 있 습 니 다.
c. 홈 페이지 는 사용자 페이지 의 변형 으로 현재 사용자 의 좀 비 대군 (index. html) 에서 이 루어 진 것 처럼 보 여 줍 니 다.
화면 에 있 는 방법 중 일 부 는 사용자 가 CryptoKitties 로 좀 비 를 먹 일 수 있 도록 합 니 다. 우 리 는 모든 좀 비 에 게 '먹 이 를 던 져 줘' 라 는 단 추 를 추가 할 수 있 습 니 다. 입력 상자 에 고양이 ID (또는 고양이 의 인터넷 주소) 를 입력 할 수 있 습 니 다.https://www.cryptokitties.co/kitty/578397), 그것 은 우리 의 feedOnKitty 함 수 를 촉발 시 킬 것 입 니 다.
인터페이스 의 일부 방법 은 사용자 로 하여 금 다른 사용자 의 좀 비 를 공격 하 게 할 것 이다.
이 를 실현 하 는 방법 은 사용자 가 다른 사용자 의 페이지 를 탐색 할 때 상대방 좀 비 옆 에 '이 좀 비 공격' 이라는 단 추 를 표시 하 는 것 이다. 사용자 가 클릭 할 때 모듈 을 꺼 내 현재 사용자 의 좀 비 대군 을 보 여 주 며 "어떤 좀 비 로 출전 하고 싶 으 세 요?" 라 고 물 어 볼 수 있다.
사용자 의 홈 페이지 에 도 '좀 비 공격' 이라는 단 추 를 각 좀 비 옆 에 표시 할 수 있 습 니 다. 사용자 가 클릭 할 때 하나의 모듈 을 꺼 내 검색 창 을 보 여 줍 니 다. 좀 비 ID 나 인터넷 주 소 를 입력 하여 검색 할 수 있 거나 '랜 덤 으로 좀 비 공격' 이라는 단 추 를 누 르 면 랜 덤 으로 좀 비 를 검색 할 수 있 습 니 다.
우리 도 냉각기 에 있 는 좀 비 를 회색 으로 만 드 는 등 특수 한 색깔 로 표시 하 는 것 을 권장 합 니 다. 이렇게 하면 화면 은 사용자 에 게 냉각기 의 좀 비 로 공격 할 수 없다 는 것 을 알려 줄 수 있 습 니 다.
사용자 홈 페이지 에 서 는 좀 비 마다 이름, DNA, 업그레이드 (유 료 를 통 해) 를 변경 할 수 있 는 옵션 이 있어 야 합 니 다. 사용자 등급 이 안 되면 사용 할 수 없 는 옵션 은 회색 으로 표시 해 야 합 니 다.
새 사용자 에 게 환영 메 시 지 를 표시 하고 createRandomZombie () 로 새 좀 비 를 만 드 는 지 확인 해 야 합 니 다.
또한 우리 의 스마트 계약 에 indexed 의 사용자 주소 속성 을 포함 하 는 Attack 사건 을 추가 할 수 있 습 니 다. 그러면 실시 간 알림 을 만 들 수 있 습 니 다. 사용자 의 좀 비가 공격 을 받 았 을 때 누가 어떤 좀 비 로 그들 을 공격 하고 복 수 를 하 는 지 볼 수 있 습 니 다.
항상 같은 데 이 터 를 위해 Infura 에 접근 하지 않 아 도 됩 니 다. (현재 구현 중, display Zombies 는 페이지 가 새로 고침 될 때마다 모든 좀 비 에 게 getZombie Details 를 호출 하지만, 실제 적 으로 는 새로 추 가 된 좀 비 에 게 만 이 함 수 를 호출 합 니 다)
실시 간 채 팅 방
모든 인터페이스 (HTML, CSS, JavaScript, React, Vue. js 와 같은 프레임 워 크) 를 구현 하기 위해 서 는 많은 전단 코드 가 필요 하기 때 문 입 니 다. 이러한 전단 인터페이스 만 실현 하 는 데 10 시간 이 걸 릴 수 있 기 때문에 우 리 는 이 영 광 스 러 운 임 무 를 당신 자신 에 게 맡 깁 니 다.
주의: 스마트 계약 은 탈 중심 화 되 어 있 습 니 다. DApp 와 의 대화 에 사용 되 는 이 전단 인터페이스 는 여전히 우리 의 중심 화 된 네트워크 서버 에 놓 여 있어 야 합 니 다. 하지만 우리 가 내부 적 으로 측정 하고 있 는 Loom Network SDK 가 있 습 니 다. 곧 당신 은 자신의 DApp 체인 에서 중심 화 된 네트워크 서버 가 아 닌 전단 인터페이스 를 실행 할 수 있 습 니 다. 이렇게 이 더 리 움 과 Loom DApp 체인 에서 당신 은의 전체 응용 프로그램 은 100% 블록 체인 에서 실 행 됩 니 다.
https://cryptozombies.io/zh/course