build onchain apps

Onchain 앱 템플릿 빌드 (⛵️)

Build Onchain 앱 템플릿으로 Onchain 창의성을 가속화하십시오. ☕️

Onchain Apps Template (일명 Boat ⛵️)을 구축하면 몇 주 동안의 초기 앱 설정과 Onchain 구성 요소를 Web2 인프라와 통합하는 번거 로움을 저장할 수 있습니다. ?

우리는 Onchain 앱을 구축 할 때해야 할 초기 결정을 간소화하기 위해 의견이 많은 접근 방식을 취함으로써이를 수행합니다.

당신이 해커 톤 참가자이든, 다음 큰 것을 구축하려는 야심 찬 기업가이든,이 템플릿은 당신을 염두에두고 설계되었습니다. ?

상자 밖으로 ? ?

• Next.js를 사용한 프로그레시브 웹 앱 지원
• 기본을 통한 이더 리움 L2 지원?
• 스마트 지갑으로 쉬운 계정 생성
• Wagmi 및 Viem과의 광업 및 지불 경험을위한 라이브 예제 및 문서
• Tailwind CSS의 최신 스타일 모범 사례?
• 일선, 서식 및 테스트로 쉽게 유지 보수를합니다
• Web Vitals에 대한 통찰력은 향수를 가진 성능 지표?
• Foundry와의 스마트 계약 배포 ☁️
• Anvil을 사용하여 스마트 계약을 테스트하기위한 로컬 TestNet 노드 지원. ?

시작하기

1 단계 : 설정 환경 변수 설정

• Coinbase Developer 플랫폼에서 기본 RPC URL을 얻고 .env.local 파일에 할당하십시오.

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

2 단계 : Onchain 앱을 설치하고 실행하십시오

 # Install
yarn

# Run
yarn dev

개발하다

패키지를 포맷하고 보풀을 보려면이 빠른 단계를 로컬로 사용하십시오.

 # Format fix
yarn format

# Lint fix
yarn lint

ABI 업데이트

보트를 사용하여 프로젝트를 만든 후에는 스마트 계약을 업데이트 할 때 관심있는 폴더와 파일입니다.

 < project-name >
├── contracts
│   ├── src
│   │   └── BuyMeACoffee.sol          ← smart contract code
│   └──out/BuyMeACoffee.sol
│       └── BuyMeACoffee.json         ← output from " forge build " which contains the updated ABI
│
└── web/app/buy-me-coffee
    └── _contracts
        ├── BuyMeACoffeeABI.ts             ← copy of ABI from contracts/out/BuyMeACoffee.json
        └── useBuyMeACoffeeContract.ts     ← deploy address

업데이트 된 ABI를 프론트 엔드 코드로 가져옵니다

스마트 계약 코드를 업데이트 한 후 contracts 폴더에서 forge build 실행하십시오. 이렇게하면 contracts/out 디렉토리에서 JSON이 생성됩니다.

출력 JSON에는 추가 정보가 포함되어 있습니다. 우리는 그 JSON 개체에서만 abi 속성 만 필요합니다. jq 사용하여 abi 속성 만 추출합시다

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

jq 의 출력 및 web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts 를 업데이트하십시오

첫 단계로 끝났습니다!

스마트 계약을 배포하고 프론트 엔드 코드를 업데이트합니다

contracts/.env 에서 모든 환경 변수를 제곱하고 수도꼭지에서 기본 sepolia eth를 얻으십시오!

스마트 계약을 배치하려면

 # from the "contract" folder

source .env && forge script script/LocalContract.s.sol:LocalContractScript  --broadcast --rpc-url https://sepolia.base.org

긴 출력에서 Contract Address 의 값을 찾으십시오.

해당 값을 복사하고 web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts 새 주소와 함께 업데이트하십시오.

아웃트로

이것은 더 많은 오류가 발생하기 쉬운 단계 중 하나입니다. 단계별로 가져 가십시오.

새로운 스마트 계약 배치 인 경우 기존 BuyMeACoffee 계약을 배포하고 계약 주소를 교체하십시오. 후에 BuyMeACoffee.sol 업데이트하고 프론트 엔드 코드에서 새로운 ABI를 얻으십시오.

우리는 앞으로이 단계를 더 쉽게 만들 수있는 방법을 생각하고 있습니다! 행복한 해킹!

기본 세 폴리아에 가스가 필요합니까? ?

무료 TestNet 자금을 여기에서 얻는 방법을 알아보십시오 : https://docs.base.org/tools/network-faucets/.

커뮤니티 ☁️? ☁️

더 많은 보트 관련 콘텐츠는 다음 장소를 확인하십시오.

• 프로젝트 업데이트는 @zizzamia (X, Farcaster)를 팔로우하십시오
• Onchainkit Warpcast 채널에 대한 토론에 참여하십시오

저자

• @zizzamia (x)
• @sneh1999 (x)
• @wespickett (x)
• @mochikuan (x)
• @RenanMav (X)
• @RobPolak (X)
• @kyhyco
• @CNASC (WARPCAST)
• @Arsood (X)
• @eragon512 (x)

특허

이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 License.md 파일을 참조하십시오.