각도 DAPP. 배포된 스마트 계약과 Angular를 연결하는 방법은 무엇입니까?

저의 아름다운 독자 여러분과 코딩을 배우는 여러분, 안녕하세요. 이 글에서는 Angular에서 web3 프런트 엔드 애플리케이션을 만들고 배포된 스마트 계약과 연결하는 방법을 공유할 것입니다.
독자는 완료된 작업을 수행하기 위한 절차와 npm 패키지 이름을 발견할 것입니다.

전제 조건
Angular 프레임워크의 기초 .
Solidity 프로그래밍 언어의 기초.
블록체인과 스마트 컨트랙트의 기초.
OOP 지식의 초급 수준.

저는 개인적으로 학습 블록체인을 구조화된 실용 기반 학습 방법으로 단계별 프로세스를 통해 쉽게 학습할 수 있게 해주는 LearnWeb3Dao에 큰 박수를 보내고 싶습니다.

스마트 계약은 무엇을 합니까?

이 섹션에서는 스마트 계약에 대한 코드를 공유할 것입니다. 이 스마트 계약이 하는 일은 모든 메타마스크 지갑이 Whitelist Object에 들어갈 수 있도록 허용하고 부울 플래그를 true로 설정하는 것입니다. 화이트리스트 주소를 기반으로 향후 비즈니스 결정을 내릴 수 있습니다. 또는 다른 관점에서 이 화이트리스트 스마트 계약은 얼리버드 액세스를 위해 지갑 주소를 보유할 데이터베이스 모델의 복제입니다.



이제 스마트 계약을 배포할 준비가 되었습니다. 컴파일 프로세스가 완료되면 스마트 계약을 프런트엔드 애플리케이션과 연결할 수 있는 두 가지 변수, 즉 계약ABI과 스마트 계약address이 필요합니다.

Angular Application과 최고의 부품 통합



통합 프로세스를 따르려면 angular 앱에 패키지ethers를 설치하고 angular cli 명령을 사용하고 npm i ethers를 실행해야 합니다. 각도 구성 요소에서 에테르를 가져오고 아래 코드를 따라 시작하십시오. 스마트 계약의 상태를 변경하려면 2개의 개체 또는 클래스 공급자 및 서명자가 필요합니다.



함수 이름 connecToWallet()을 선언하고 ngOnit 내부에서 함수를 호출하면 구성 요소가 로드되면 함수가 실행되고 메타마스크 지갑에 연결됩니다.

스마트 컨트랙트/호출 상태 변경 화이트리스트 기능에 추가

화이트리스트 계약에 지갑 주소를 추가하려면 예제 코드에 따라 함수를 선언하십시오.

  async connectContract() { // function bind with click event 
    // method to enter details in smart contract
    try { // all we need an abi file and deployed smart contract address;
      this.whitelistContract = new ethers.Contract(ADDRESS_WHITELIST, WhitelistABI.abi, this.signer)
      const tx = await this.whitelistContract.addAddresstoWhiteList() // declare transaction 
      await tx.wait();

    } catch (error: any) {


      // console.log(error.message)
      this.isError = this.fetchStringContent(error.message)


    }

  }

화이트리스트에 포함된 계약의 총 수를 반환하는 함수를 호출합니다.

화이트리스트 주소의 현재 개수를 알기 위해서는 solidity 파일에서 Whitelist.numAddressesWhitelisted 변수를 호출해야 합니다. 스크린샷에 따라 코드를 따르십시오.

  async getNumberofWhiteList() {

    try {
      this.whitelistContract = new ethers.Contract(ADDRESS_WHITELIST, WhitelistABI.abi, this.signer)
      this.whiteListNumbers = await this.whitelistContract.numAddressesWhitelisted()


    } catch (error) {
      console.log(error)
    }


  }

이 모든 것은 각도가 있는 프런트 엔드 dapps를 만드는 데 필요합니다. 더 많은 편의성을 추가하고 repository 세부 정보를 공유하여 기존 코드 기반을 다운로드하고 재생할 수 있습니다.

떠나기 전에 하나의 지혜를 공유하고 새로운 기술이나 기술을 배우고 이해하는 데 시간이 걸립니다. 그러므로 매일 30분씩 연습하고 자신에 대한 믿음을 갖고 그 과정을 즐기도록 노력하세요.

이 기사에 대한 피드백이 있으면 여물통 의견을 공유하십시오.

다음 애자일 개발 프로젝트를 위해 저희 팀을 고용할 생각을 하고 계시다면 [email protected]으로 저를 보내주세요.