이더 리움 DAPPS : DAO 계약을위한 Web3 UI 구축

이 자습서는 이더 리움 블록 체인에 분산 된 응용 프로그램 (DAPP)을 구축하는 여정을 계속합니다. Part 6은 DAO의 핵심 기능 (투표, 블랙리스트, 배당 배분)을 마무리 했으며이 마지막 부분은 상호 작용을위한 사용자 인터페이스를 만드는 데 중점을 둡니다.

주요 개념 :

간단한 HTML 및 JavaScript 프론트 엔드는 이더 리움 스마트 계약에 연결됩니다. 정교한 설계보다 핵심 기능 우선 순위를 정합니다 트러플 마이그레이션은 배치 중에 토큰 전송을 자동화하여 테스트를 간소화합니다 web3.js는 프론트 엔드와 이더 리움 블록 체인 간의 통신을 용이하게하여 지갑 관리를 위해 메타 마스크가 필요합니다.

web3.js의 비동기 기능을 사용하여 사용자 상태 (로그인/아웃), 토큰 밸런스 및 트랜잭션 기록을 동적으로 표시합니다. 실시간 이벤트 청취 (토큰 전송, 투표 결과) 사용자 경험을 향상시킵니다.

제안서 제출 및 투표를위한 사용자 인터페이스는 커뮤니티 참여를 촉진합니다. 메인 이더 리움 네트워크에 배포하기 전에 철저한 로컬 테스트가 중요합니다. 토큰 전송 자동화 : 초기 배포는 토큰과 DAO가 연결되지 않은 상태로 남습니다. 테스트를 단순화하기 위해 마이그레이션 스크립트 ()는 DAO로의 토큰 전송을 자동화합니다.

이 약속 기반 코드는 토큰과 DAO를 순차적으로 배포 한 다음 총 토큰 공급 및 소유권을 DAO 주소로 전송합니다. 이 마이그레이션을 실행합니다 프론트 엔드 (index.html) :

내장 JavaScript가 포함 된 기본 HTML 구조는 블록 체인 상호 작용을 처리합니다.
• (참고 : 전체 HTML 및 CSS는 간결하게 생략됩니다. 제공된 스 니펫은 주요 요소를 보여줍니다.) JavaScript interaction (App.js 및 main.js) :
javaScript 코드는 Metamask가 설치되었다고 가정 할 때 Web3.js를 활용하여 블록 체인과 상호 작용합니다. 계정 정보, 이벤트 청취 및 거래 제출을 처리합니다. (자세한 JavaScript 코드는 간결성에 대해 생략되었지만 주요 개념은 아래에 설명되어 있습니다). 계정 정보 :
• DAPP는 메타 마스크 로그인 상태에 따라 계정 정보를 동적으로 표시합니다. 사용자의 아바타는 Blockies 라이브러리를 사용하여 생성됩니다. 코드는 토큰 잔액, 제출 카운트 및 화이트리스트/블랙리스트 상태를 가져오고 표시합니다. 비동기 호출은 블록 체인 상호 작용을 처리하는 데 사용됩니다
이벤트 듣기 : DAPP는 web3.js의 이벤트 청취 기능을 사용하여 계약 이벤트 (예 : )를 듣습니다. 이를 통해 UI에서 실시간 업데이트가 가능합니다. 코드는 역사적 사건과 새로 방출 된 이벤트를 모두 효율적으로 처리하여 중복 디스플레이를 방지합니다.

제출 항목 : UI에는 이야기에 새로운 항목을 제출하기위한 양식이 포함되어 있습니다. JavaScript 코드는 트랜잭션을 블록 체인으로 전송하기 전에 텍스트를 16 진 형식으로 변환하여 제출을 처리합니다. 가스 제한은 성공적인 거래 실행을 보장하기 위해 설정되었습니다 Whitelisted 결론과 추가 개발 :

이 섹션에서는 기본 DAPP 프론트 엔드의 기초를 제공합니다. 본격적인 프론트 엔드 프레임 워크 (vue.js 또는 React)를 통합, UI 향상 및보다 정교한 기능을 추가하는 것과 같은 추가 개발이 권장됩니다. 이 자습서는 이더 리움 DAPP 개발의 다양한 측면을 다루는 제안 된 개선 및 FAQ 목록으로 마무리됩니다. 다음 부분은 라이브 환경으로의 배포를 다룰 것입니다.

위 내용은 이더 리움 DAPPS : DAO 계약을위한 Web3 UI 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!