so-devlog
🌙
📚 Study

[실습] 베팅 DApp 개발

date
Dec 22, 2022
slug
solidity-practice-dapp
author
status
Public
category
📚 Study
tags
BlockChain
summary
1~5 숫자 버튼에 이더를 베팅하고, 이에 맞을 경우 이더를 얻거나 모두 잃는 간단한 형태 구성
type
Post
thumbnail
스크린샷_2022-12-22_오후_2.45.51.png
 
참고 : 누구나 쉽게 배우는 블록체인 DApp 개발(박경호 저)
💡
1~5 숫자 버튼에 이더를 베팅하고, 이에 맞을 경우 이더를 얻거나 모두 잃는 간단한 형태 구성

개요

도구

이더리움, 솔리디티, Web3.js, VueJS(VueX), 리믹스, 메타마스크(크롬 익스텐션)
  • 스마트 컨트랙트를 작성하고 이를 리믹스 툴에서 테스트 해본다
  • VueJS와 VueX를 활용한 SPA 웹 애플리케이션을 구축하고
  • Web3JS 라이브러리를 활용하여 메타마크스와 연동한다
    • ⇒ 이더리움 테스트넷상에 배포된 스마트 컨트랙트와 연동되어 우리가 구현하고자 하는 댑의 기능을 수행

순서

  • 프로젝트 구축, 스마트 컨트랙트 작성
  • Web3.js API와 VueJS를 통한 프론트엔드 구성
  • 최종적으로 이를 연동

환경 설정

리믹스

리믹스: 웹 기반 스마트 컨트랙트(Solidity) 툴 → 별다른 설치 불필요

메타마스크

메타마스크: 크롬 익스텐션 앱 설치 필요
notion image
notion image
notion image
(여우가 마우스 따라다닌다… 기여버)

Vue CLI

node.js, npm, vue-cli 설치 확인
notion image

리믹스 IDE

브라우저 IDE 로서 솔리디티를 실행할 수 있음
http://remix.ethereum.org
notion image

메타마스크

Metamask: 이더리움을 이용하는 댑에 크롬 브라우저로 쉽게 접근할 수 있는 익스텐션
이더리움 Web3 API 가 들어가 있으므로 모든 웹사이트의 자바스크립트 컨텍스트와 상호작용 가능
이를 통해 블록체인과 댑이 통신할 수 있음
그 외에도 유저가 아이덴티티를 생성하고 관리하는 기능을 제공 → 블록체인상에 트랜잭션을 보내거나 쓰기를 수행할 때 필요한 부분
유저들은 트랜잭션을 확인하여 이를 승인하고 거절하는 행위를 할 수 있음
메타마스크 로그인하고, Ropsten 테스트넷 으로 변경해두자
비밀번호
비밀
비밀 복구 구문
비밀
notion image
notion image
notion image
지갑 생성 완료!
이제 이더리움 메인넷 → 테스트넷으로 네트워크를 변경해준다
그런데…
이더리움(ETH), 12월15일 Ropsten 테스트넷 셧다운 예정
나머지 검증 노드 대부분은 2022년 12월 15일부터 31일까지 종료됩니다.이후 Ropsten은 클라이언트, 테스트, 인프라스트럭처 팀에서 지원되지 않게 됩니다. 참고로, 일몰이 될 다음 테스트넷은 린케비입니다.네트워크는 사용자와 애플리케이션 개발자가 Goerli 또는 Sepolia로 이행할 수 있도록 2023년 중반까지 가동됩니다.즉, Rinkeby는 Merge를 지원하지 않으며 향후 네트워크 업그레이드도 지원하지 않습니다.이는 더 이상 Ethernet 메인넷의 기능과 동등한 복제품이 아닙니다.
https://www.cyfren.com/bbs/board.php?bo_table=coinplan&wr_id=886
이더리움(ETH), 12월15일 Ropsten 테스트넷 셧다운 예정
Ropsten 롭스텐 테스트넷이 셧다운되어서 일단 Goerli 테스트넷으로 변경해주었다

프로젝트 생성

우리는 스마트 컨트랙트를 리믹스를 가지고 작성하고
이를 롭스텐 테스트넷에 배포할 것이다
메타마스크를 통해 이 테스트넷과 연동할 수 있으므로
프론트엔드 애플리케이션과 통신하기 위해 필요한 것은 ABI(Application Binary Interface)이다
  • 머신 코드에 접근하기 위한 데이터 구조를 정의한 인터페이스
프론트엔드는 vue-cli 3.0을 사용하여 VueJs 애플리케이션으로 구성할 것이다
이는 web3을 통해 컨트랙트와 상호작용한다

git repo 생성

dapp-batting 으로 생성

git ↔ local 연결

git init
git remote add origin https://github.com/yu-so-young2/dapp-betting.git

vue 프로젝트 생성

vue create bet-dapp //기본으로 설치했음
cd bet-dapp //폴더 이동
npm uninstall eslint-plugin-vue //eslint 어쩌구 에러나길래 module uninstall 해줌
npm install web3

스마트 컨트랙트 작성

시나리오
1. 유저는 1~5 사이의 숫자에 베팅할 수 있다.
2. 이 컨트랙트의 소유자는 컨트랙트의 잔액을 확인하고 가져오거나 소멸시킬 수 있다.
3. 최소 베팅액과 승률이 정의되어 있으며, 이는 고정되어 바꿀 수 없다.
작성 완
Compile
notion image

컨트랙트 테스트

Run → 다양한 설정 필드
Environment : Javascript VM
Account: 기본 이더가 들어 있는 어드레스 설정
Value: 30, 단위: ether
Deploy: 정의한 상태값 입력

어드레스 생성

notion image
트랜잭션 성공
notion image
  • status: true Transaction mined and execution succeed
  • 보내고 받는 어드레스
  • 소비한 가스 정보
  • 해시값 등의 정보 확인
  • 이더 값 차감(정확히 30이 차감되지 않고 30.000001 정도인 이유: 수수료 추가 차감)
      • notion image
  • Deploy Contracts
      • notion image
우리가 컨트랙트에서 정의한 함수 목록
getBalance → 전송한 이더 잔액이 반환됨
 

베팅

value:1, num:2 로 베팅
notion image
notion image
  • _result: 베팅 성공 여부
bet num에 0 입력 시
notion image
  • revert 잘 작동함

VueJS 애플리케이션 구축

router 연동
network 연동
store 연동