가이드: Web3 반응 네이티브 Dapp 설정

소개

웹 Dapps는 대세이며 모바일에 대한 관심이 마땅히 있어야 할 만큼 집중되지 않았습니다. Dapp을 만드는 데 필요한 라이브러리와 암호화 기본 요소가 모바일과 직접 호환되지 않기 때문에 Web3 지원 모바일 앱을 설정하기 어려울 수 있습니다. 이 튜토리얼의 목적은 web3와 호환되는 반응 네이티브 앱을 설정하는 과정을 안내하는 것입니다.

짧은 버전

나처럼 게으른 경우 here에서 기성품 앱을 가져와 하루라고 부를 수 있습니다. 그러나 스스로 설정하는 방법을 배우고 싶다면 계속 읽을 수 있습니다.

긴 버전

반응 네이티브 앱 설정

프로세스를 시작하려면 기본 기능이 있는 반응 기본 앱이 필요합니다. 이를 위해 expo 베어 워크플로우를 사용하거나 CRNA(반응 네이티브 앱 생성)를 사용할 수 있습니다.

CRNA 옵션의 경우:

npx create-react-native-app my-app

엑스포 옵션의 경우:

npx expo init

마지막 템플릿 옵션 선택(최소)

종속성 설치

앱을 web3와 호환되게 만들기 위해 필요한 첫 번째 종속성은
yarn add node-libs-react-native
또는
npm i node-libs-react-native
이 종속성의 목적은 블록체인과 상호 작용하는 데 필요한 nodejs 모듈 중 일부를 네이티브 반응으로 가져오는 것입니다. 이러한 종속성 중 일부는 일반적으로 반응 네이티브에서 작동하지 않는 암호화 라이브러리이지만 이 패키지를 사용하여 RN에서 작동하도록 만들 수 있습니다.

web3 호환성을 위한 설정 앱

일단 설치되면 다음으로 해야 할 일은 메트로 번들러 구성에서 라이브러리를 사용하는 것입니다. extraNodeModules 키 아래에 이 모듈을 추가해야 합니다. 기본적으로 Metro에 알리는 것은 모듈을 요청했는데 기본 node_modules에서 찾을 수 없는 경우 extraNodeModules에 포함된 모듈을 확인하라는 것입니다. 이렇게 하면 메트로가 패키지에서 필요한 Nodejs 모듈을 찾는 데 도움이 됩니다. 새로운 메트로 구성은 다음과 같습니다.

엑스포를 위해

const { getDefaultConfig } = require('expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.extraNodeModules = require('node-libs-react-native');

module.exports = defaultConfig;

원하는 경우 rn-cli.config.js 파일을 사용할 수도 있습니다(없으면 새로 만들 수 있음).

const extraNodeModules = require('node-libs-react-native');

module.exports = {
  extraNodeModules,
};

마지막 단계는 node-libs-react-native에서 앱의 진입점으로 파일을 가져오는 것입니다. 우리는 수입해야합니다
import 'node-libs-react-native/globals.js';
엑스포에서 이것은 index.js 파일이 됩니다. 이것은 파일의 첫 번째 줄이어야 합니다. 가져오기는 암호화 모듈과 같은 모든 필수 모듈을 앱으로 가져옵니다.

Web3 클라이언트

우리의 앱은 거의 준비되었지만 web3 클라이언트 없이는 완전히 web3 준비가 되지 않았습니다. 가장 인기 있는 두 가지는 Web3.js와 ethers.js입니다. 이 튜토리얼에서는 에테르를 사용할 것입니다.

두 가지 종속성이 필요합니다.
yarn add ethers @ethersproject/shims
일단 설치되면 배치한 동일한 파일에서 shims 패키지를 가져와야 합니다node-libs-react-native/globals.js.. 이를 통해 이제 앱이 web3와 완벽하게 호환됩니다.

작동하는지 테스트하기 위해 ethersjs를 사용하여 지갑을 생성해 볼 수 있습니다. App.jsx 또는 App.js에서

...
import { ethers } from 'ethers';

export default function App() {
  useEffect(() => {
    const w = ethers.Wallet.createRandom();
    console.log({ walletObject: w, mnemonic: w.mnemonic });
  }, []);

  ...
}

모두 잘 되었다면 콘솔에 지갑 개체와 니모닉이 표시되어야 합니다. web3 호환 반응 네이티브 앱이 있는 것과 같습니다.


Weedle Labs에서는 모바일 퍼스트 web3 인프라를 연구하고 있습니다. 목표는 모바일에서 web3 Dapps 개발을 단순화하고 웹이 제공할 수 있는 것보다 훨씬 더 많은 청중에게 다가갈 수 있도록 돕는 것입니다. 우리는 오픈 소스이며 활발한 개발에 동참할 기여자를 적극적으로 찾고 있습니다. 트위터 @weedle_app 또는 [email protected]에서 소리를 지르십시오.

출시 시기를 알고 더 자세한 정보를 얻으려면 다음을 확인하십시오https://joinweedle.com.