개요

블록 체인 (Ethereum testnet (Ropsten))에 텍스트를 쓰는 계약에서
웹 앱 (Node.js + TypeScript + vue.js)에서 작성한 내용을 볼 때까지
쓰기.

덧붙여 저도 블록체인 초학자이므로, 내용에 잘못등 있으면 지적해 주시면 다행입니다.

계약의 구현은 아래를 참조하십시오.
htps : // 이 m / 와다 노부야 /

웹 앱의 github 복제하여 사용해보십시오.
htps : // 기주 b. 코 m / 와다 노부야 / 세 t - 엄청난 ps

1. 배포된 계약에 대한 연결 정보 가져오기

1-1. 배포된 계약에 대한 연결 정보(ABI) 획득

ABI란,,,
계약의 취급 설명서와 같은 것



탭을 compile로 되돌려 ABI 가져 오기
(복사한 ABI를 적당한 텍스트에 붙여 둡니다. 나중에 사용합니다)

1-2. 배포된 계약의 주소 복사

배포시 로그에서 ropsten Transaction에서 주소를 가져옵니다.

Ropsten의 Transaction을 참조하십시오.



Ropsten의 Transaction



아래 계약의 주소 복사
(복사한 주소를 적당한 텍스트에 붙여 둡니다. 나중에 사용합니다)

2. 웹 애플리케이션과의 연결 설정

2-1.ABI 설정

※SetMessage의 계약을 사용하는 경우 이대로도 OK

web_app/src/contractInfo.ts 편집
ABI를 설정합니다.

복사한 ABI를 abi:에 붙여넣기
이미 작성한 []에

export default {
  Token: {
    // Every time you deploy a contract, you have to update address.
    address: '0xa4ac37f7c15d12d9c57768bad57781ee974d4cbf',
    // Every time you change the contract interface, you have to update abi.
    abi: 
〜省略〜
  },
};

2-2.ABI 설정

address:에 복사한 계약의 주소 설정
여기가 배포 된 계약의 주소가되므로 여기
직접 구현한 계약을 설정하십시오.

※ 변경하지 않으면 내가 배포 한 계약의 주소입니다.

export default {
  Token: {
    // Every time you deploy a contract, you have to update address.
    address: '0xa4ac37f7c15d12d9c57768bad57781ee974d4cbf',

3. 웹 애플리케이션 연결 확인

3-1. npm 설치

다음 위치에서 npm 설치 수행
web_app/

npm install

3-2. 웹 애플리케이션 실행

npm run serve

※오류가 나오지만 신경쓰지 않고,,,
유쿠 유쿠 수정하겠습니다,,,

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.54.118:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

3-3 Chrome 브라우저에서 액세스

http://localhost:8080/

웹 화면이 표시되고 "getMessage"가되었지만 계약으로 설정된 텍스트가 표시되면
연결 완료입니다.

컨트랙트의 setMessage로 다른 text를 기입 표시가 바뀌는 것을 확인해 주셨으면 합니다.



※화면 디자인은 어떻게든 하고 싶습니다.

요약

이것으로
계약을 구현하고 웹 앱으로 액세스할 때까지
할 수 있었습니다!

앞으로는 웹 앱에서 setMessage를 실행합니다.
할 수 있다고 생각합니다,,,