처음부터 하이퍼버스에 연결하는 방법

GM! 오늘 저는 킬러 web3 앱 구축을 시작할 수 있도록 앱을 Hyperverse에 연결하는 데 필요한 모든 것을 안내해 드릴 것입니다.

1단계: Node을 가져와서 사용할 수 있도록 NPM을 설치합니다.

2단계: create-next-app 설치 및 실행npx create-next-app example-dapp --ts

이것은 Next.js

를 사용하는 Typescript 응용 프로그램인 example-dapp이라는 폴더를 자동으로 빌드합니다.

--ts는 필수는 아니지만 권장되는 Typescript를 사용하여 빌드를 생성하는 것입니다

.

3단계: 패키지 설치

cd example-dapp : 이제 예제 프로젝트의 폴더

내에서 작업하고 있으므로 간단히 를 직접 변경할 수 있습니다.

yarn - npm i -g yarn

-g는 이 프로젝트

만이 아니라 원사를 사용하여 전체 시스템 액세스 권한을 부여하기 때문에 필요하지 않습니다.

yarn add @decentology/hyperverse

yarn add @decentology/hyperverse-ethereum

이러한 패키지를 설치하면 프로젝트에서 이제 이러한 패키지를 가져오고 실제로 사용할 수 있는 기능이 제공됩니다

.

다음을 수행하여 현재 지원하는 다른 체인을 구축하도록 선택할 수도 있습니다.

yarn add @decentology/hyperverse-flow

yarn add @decentology/hyperverse-metis

4단계: 패키지 가져오기
_app.tsx 파일에 다음과 같은 내용이 표시되어야 합니다.

import "../styles/globals.css";

import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {

   return <Component {...pageProps} />

}

export default MyApp;

이제 함수 위에 다음 두 줄의 코드를 추가합니다.

import { initialize, Provider, Network } from '@decentology/hyperverse';

import { Ethereum } from '@decentology/hyperverse-ethereum';

우리는 이제 패키지가 제공하는 기능에 대한 코드 액세스를 제공하는 이러한 패키지를 가져오고 있습니다. 이는 지갑 연결, 사용자 주소 보기 액세스, 읽기 액세스 액세스 및 네트워크 전환이 필요할 때 사용자에게 알리기, 블록체인 관련 SDK 기능 액세스에 도움이 될 것입니다.

5단계: 하이퍼버스 초기화

return 문 앞의 함수 내부에 다음 코드를 추가합니다.

const hyperverse = initialize({

   blockchain: Ethereum,

  network: Network.Testnet,

   modules: [],

});

이를 통해 주어진 매개변수로 Hyperverse를 실제로 초기화할 수 있습니다. 이 경우 Ethereum 블록체인과 Rinkeby 테스트 네트워크를 사용하여 초기화합니다.

여기path에서 사용 가능한 모든 블록체인을 찾을 수 있습니다.

6단계: Hyperverse Provider에서 앱 래핑:

return (

 <Provider initialState={hyperverse}>

     <Component {...pageProps} />

  </Provider>

)

Provider는 하이퍼버스에 액세스해야 하는 모든 중첩된 구성 요소에서 하이퍼버스를 사용할 수 있도록 합니다. 이 경우 전체 앱이 액세스할 수 있기를 원하므로 여기에서 수행합니다!

7단계: 앱이 공식적으로 Hyperverse에 연결되어 빌드할 준비가 되었습니다!

최종 결과는 다음과 같아야 합니다.

import '../styles/globals.css'

import type { AppProps } from 'next/app'

import { initialize, Provider, Network } from '@decentology/hyperverse';

import { Ethereum } from '@decentology/hyperverse-ethereum';

function MyApp({ Component, pageProps }: AppProps) {

   const hyperverse = initialize({

       blockchain: Ethereum,

      network: Network.Testnet,

      modules: [],

   });

   return (

     <Provider initialState={hyperverse}>

        <Component {...pageProps} />

     </Provider>

   )

}

export default MyApp

실행yarn dev하여 localhost:3000에서 실행 중인 앱을 확인하세요!

다음은 이러한 단계를 따르는 GitHubrepo이며 원하는 경우 포크할 수 있습니다!

다음 단계: 당사discord에 가입하여 Hyperverse 팀 및 Hyperverse에서 구축하는 다른 빌더와 연결하십시오!