플래터로 현대 네트워크 Dapp 구축

반응 그만해!JS가 더 없어요!(jk)우리는 지금 흔들리는 시대!

소개하다.

오늘 저는 Flutter를 사용하여 현대적인 웹 Dapp를 구축하는 방법을 보여 드리겠습니다!
우리는 flutter_web3 패키지를 사용하여 이더리움 대상과 상호작용을 하고 Metamask, Wallet Connect 및 기타 공급자와 연결할 것이다.
이 패키지에는 이더스 Js와 월렛 컨넥트 등 공급업체에 연결된 다른 괜찮은 유틸리티도 포함돼 있다.
더 이상 말하지 말고 우리 시작합시다!

건립

우선 떨림 프로젝트를 만듭니다.

flutter create coolassname

pubspec에 가방을 추가합니다.아마르.이번에 저는 Getx를 사용하여 간단한 상태 관리Niku를 진행하여 멋있는propertybuilder를 진행하고 저희 패키지flutter_web3를 사용할 것입니다.

dependencies:
  flutter:
    sdk: flutter

  flutter_web3:
  niku:
  get:

그다음에 쓰기 시작해요.

flutter run -d web-server

메타마스크 같은 확장은 크롬 디버그 브라우저(sad)에서 사용할 수 없기 때문이다.

Keep in mind that the Flutter web server doesn’t have the hot restart feature that automatically refreshes your page, after refreshing in CLI you need to manually refresh your browser again.

웹 사이트를 만들다

기획 특색

저희가 오늘 토론할 주제는요.

이더리움 대상과 그 방법, 예를 들어 RequestAccount를 사용한다.

이더스 js를 사용하여 스마트 계약과 상호작용한다.

기본 계약인 ERC20을 사용하여 ERC20 표준을 갖춘 계약을 구축합니다.

이 모든 패키지 기능은 아닙니다.모든 API 및 기능의 문서가 표시되는지 확인합니다.
따라서 간단히 보기 위해 Pancake Swap Interactior를 사용해 보겠습니다.

계정에 연결

우리는 먼저 사이트의 기본 구조를 정의한다.그리고 우리는 그 후에 웹 3부분을 계속할 것이다.

확장을 정의하여 생활을 더욱 가볍게 하다.

Web3 섹션에서는 Home Controller에 배치합니다.

설명하기 위해서 우리는 한 줄 한 줄 왔다.

두 번째 줄에서 이더리움 대상 획득 프로그램에 접근할 수 있는지 확인합니다.아래의 구현에 따라 브라우저에 사용할 수 있는 프로그램이 없으면 이더럼 대상은 비어 있을 수 있습니다.i, e. 메타 마스크, 지갑 연결, Binance 체인 지갑 등

네 번째 줄에서 현재 is Binance 스마트 체인에 연결된 체인이 존재하는지 확인합니다(체인 id 56).

여섯 번째 줄에서 사이트와의 연결을 전면적으로 검사한다.이태방.isConnected () 는 프로그램의 가용성을 제공하는 데만 사용되기 때문에 노드에서 공개된 주소에서 확인해야 합니다.

9행 및 11행 스토리지 상태 변수

15행, 공급자에게 연결하고currentAddress와currentChain을 업데이트합니다.이태방을 사용하면requestAccount 공급업체에 웹 사이트에 연결하라고 알릴 수 있습니다.(메타 마스크 모드) 주소의 첫 번째 주소가 사용할 현재 주소인 주소 목록을 반환합니다.만약 사용자가 모드를 거부한다면 오류 처리를 확보하십시오. (이런 상황에서 나는 이렇게 하지 않을 것이다. 나는 이렇게 하지 말아야 한다.)이태방을 사용하다.getChainId 업데이트currentChain

제26줄에서 accountChanged와chainChanged 이벤트를 처리합니다.사용자가 계정이나 체인을 변경하고 상기 변수를 업데이트할 때마다clear를 호출합니다.

그리고 우리는 연결 여부를 표시하기 위해 아주 간단한 사용자 인터페이스를 구축할 수 있다.없으면 "연결"단추를 누르면 공급자에게 연결을 요청하십시오.

그래서 계좌 연결 부분을 완성했습니다.나는 단지 이곳에서 거친 UI 구현을 보여줄 뿐, 너희들은 마음대로 그것을 실현할 수 있다.
연결 버튼
공급업체에 연결
연결

이더스 js 공급자에 연결

이더스 js에는 많은 공급자가 있는데, 그 중 두 개는 웹3Provider와 JsonRPCprovider이다.
둘 다 블록체인에서 데이터를 읽는 데 사용할 수 있으며 Web3Provider는 이더리움 공급자를 구조 함수에 넣는 것을 실례화한다.JsonRPCprovider는 RPC Url을 구조 함수에 넣어 실례화합니다.
간단하게 보기 위해서, 우리는 기본 공급자 Getter를 사용하여 웹3을 연결하고 가져올 수 있습니다.구체적인 실시는 다음과 같다.

계약과 상호 작용

우리는 그것을 두 부분으로 나누어 케이크 코인 계약과 셰프와 계약의 상호작용을 할 것이다.
케이크 토큰 계약에 대해서는 ContracterC20을 사용하겠습니다.
Masterchef 계약에 대해 우리는 일반 이더스 계약을 사용하고 우리 자신의 ABI를 지정할 것이다.

케이크 토큰 계약

너무 쉬워요!토큰 주소를 사용하여 ContracterC20 클래스를 실례화하기만 하면 됩니다.
우리는 또한 최종 기능을 추가하여 1gwei의 케이크를 태울 수 있습니다!맵다

우리는 다시 여기서 한 줄 한 줄 이야기하자.

세 번째 줄, 다섯 번째 줄에 케이크 기호화폐와 기호화폐 잔액에 대한 변수를 저장했다.

7행은 비어 있으면 cakeToken 대상을 실례화한다.기능의 균형에서 케이크의 균형을 얻다.

15행, 주머니에서 wei 케이크 1g을 태워라.우선, 당신의 잔액이 1gwei를 초과했는지 확인하세요(그래서 당신은 충분한 돈이 불타고 아직 약간의 잉여가 있습니다, 하하!)그리고 케이크를 addressZero 또는 0x0으로 옮깁니다.그리고 케이크의 균형을 다시 갱신하세요.

우리의 계약을 위해 UI를 구축하려면 먼저 이더리움 대상이null이 아닌 것을 확보한 다음에 정상적으로 UI를 구축해야 한다.

케이크를 꺼내서 태우기 버튼
케이크를 꺼내서
타다 1gwei 케이크
연소

주방장 계약

우리는 자신의 계약 실례를 만들어야 하기 때문에 계약의abi가 필요하다.선택한 블록 리소스 매니저에서 찾을 수 있습니다.
우리는 BscScan를 사용하여 계약 코드를 볼 수 있다.

우리는 일부 성질, 상수 함수, 쓰기 함수를 예로 선택할 것이다.
우선,abi를 획득해야 합니다.abi규격과 모델에 관해서는 Ethers js documentation를 참조하십시오.
간단하게 보기 위해서, 우리는 이곳에서 가장 작은 인간이 읽을 수 있는abi를 사용할 것입니다.solidity에서 생성된 JSON abi를 사용해서 여기에 붙일 수도 있습니다.
그래서 참고 서류, 우리abi는.

그리고 우리는 계약을 만들고 이 함수를 호출할 수 있다.Dart에서 uint 반환 유형이 있는 모든 함수는 사실상 BigNumber입니다.

설명하기 위해

16번째 줄, null이면Masterchef 계약을 만들고 주석이 있는 유형의 BigNumber를 사용하여cakePerBlock과poolLength를 가져와 int로 변환합니다.

24줄에서 EmergencyDraw를 호출하고 0은 풀 번호를 매개 변수로 표시한다.

그런 다음 UI를 구성합니다.

정보 얻기 버튼
정보를 얻은 후

결론

Dapp 개발에 쓰이는 떨림 생태계는 이전에는 존재하지 않았음에도 불구하고그러나Dart2js와 암호화 및 웹3 실용 프로그램을 강화하는 데 사용되고 있는 많은 플래터 패키지를 통해 플래터는 미래 Dapp 개발의 강력한 경쟁자가 되었다.
내가 보여준 거친 예는 떨림이 Dart의 광범위한 기능을 이용하여 복잡한 Dapp를 개발할 잠재력이 있다는 것을 증명했다.
너는 이 예의 원본 코드here를 찾을 수 있다.

Join Coinmonks Telegram Channel and learn about crypto trading and investing

읽다

YouHodler vs CoinLoan vs Hodlnaut

Dollar-Cost Averaging Trading Bot