inkathon
@inkathon
이것은 잉크 용 전체 스택 DAPP 보일러 플레이트입니다! 통합 된 프론트 엔드와의 스마트 계약. 해커 톤 아이디어 개발을 신속하게 시작하거나 프로덕션 준비 Web3 응용 프로그램을 발판하는 데 사용될 수 있습니다.
이 프로젝트는 잉크의 개발자 경험을 향상시키기위한 SCIO Labs 이니셔티브의 일부입니다! 생태계와 Aleph Zero EFP의 자랑스러운 회원. ?
다른 프로젝트는 다음과 같습니다.
create-ink-app CLI ( 곧 출시 )ink!athon BoilerplateuseInkathon 후크 및 유틸리티 라이브러리zink! 스마트 계약 매크로Telegram Group에서 토론에 참여하십시오
기여하고 싶다면 기고자 가이드 라인을 읽으십시오.
목차 :
보일러 플레이트에는 작은 샘플 잉크가 함께 제공됩니다! message 저장하는 Greeter 계약 ( "인사"). 누구나 업데이트 할 수 있습니다. 프론트 엔드에는 지갑을 연결하고 계약과 상호 작용하는 간단한 UI 구성 요소가 포함되어 있습니다 (예 : message 읽기 및 쓰기). Inkathon.xyz에서 라이브로 사용해보십시오.
샘플 계약이 특정 라이브 테스트 (예 : alephzero-testnet 및 shibuya )에서 사전 배포되므로 로컬 노드가 실행되지 않고 상자 밖으로 작동합니다. 필요한 배포 메타 데이터 및 주소는 contracts/deployments/ 에 따라 제공됩니다.
사전 반품 :
- SETUP NODE.JS V18+ (
nvm install 18통해 NVM을 통해 권장)- PNPM 설치 (Node.js Corepack 또는
npm i -g pnpm통해 권장)- 이 저장소를 복제하십시오
[!중요한]
Windows 사용자는 WSL (권장) 또는 git bash와 같은 사용자 정의 쉘을 사용해야합니다. PowerShell은 지원되지 않습니다.
Linux 용 WSL을 사용할 때 사전 반품 :
- WSL 설치 및 WSL 터미널에서 모든 명령을 실행하십시오.
- SETUP NODE.JS V18+ (
nvm install 18통해 NVM을 통해 권장)- 전 세계적으로 다음 NPM 패키지를 설치하십시오.
npm i -g npmnpm i -g pnpm node-gyp make- 이 저장소를 WSL 파일 시스템 (예 :
/home/<user>/inkathon)으로 클론하십시오.팁 : Windows 탐색기의 상단 막대에
\wsl$입력하여 WSL 파일 시스템에 시각적으로 액세스 할 수 있습니다.
# Install dependencies (once)
# NOTE: This automatically creates an `.env.local` file
pnpm install
# Start Next.js frontend
pnpm run dev 선택적으로, simple-git-hooks (커밋시 자동 라인 및 서식의 경우)를 활성화하려면 다음 명령을 한 번 실행할 수 있습니다. pnpm simple-git-hooks .
contracts/package.json 파일에는 계약을 구축, 테스트 및 배포하기위한 속기 스크립트가 포함되어 있습니다.
사전 반품 :
- 기판 문서를 통해 녹을 설치하십시오 ( "기판 노드 컴파일"섹션을 건너 뛰십시오).
cargo contract설치하십시오substrate-contracts-node설치하십시오
# Set `contracts/` as the active working directory in your terminal
cd contracts
# Build contracts and move artifacts to `contracts/deployments/{contract}/` folders
pnpm run build
# Start local node with persistence (contracts stay deployed after restart)
# NOTE: When using Brave, shields have to be taken down for the UIs
pnpm run node
# # IMPORTANT: Open a separate terminal window and keep the node running
# Deploy the contracts on the local node
pnpm run deploy 또는 브라우저에서 계약 UI ( pnpm contracts-ui )를 사용하여 수동으로 계약을 배포 할 수도 있습니다.
frontend/.env.local 파일을 열고 NEXT_PUBLIC_DEFAULT_CHAIN 변수를 development 에 설정하십시오. 그런 다음 프론트 엔드를 다시 시작하면 로컬 노드에 배치 된 계약과 상호 작용할 수 있어야합니다.
환경 변수 및 이용 가능한 모든 체인 상수에 대한 자세한 내용은 아래 환경 변수 섹션에서 자세히 알아보십시오.
프로젝트 이름과 식별자를 삽입 해야하는 여러 장소가 있습니다. 이러한 발생의 대부분은 코드의 /* TODO */ 댓글로 강조 표시됩니다. todo-tree 플러그인을 설치하여 쉽게 교체 할 수 있습니다.
또한 다음과 같은 UN 고속도로 발생이 있습니다.
inkathon.code-workspace 파일의 이름contracts/ 및 frontend/ 패키지의 package.json 의 이름 및 메타 데이터frontend/package.json 에 정의 된 작업 공간 종속성 ( @inkathon/contracts )은 frontend/src/deployments/deployments.ts 에서 가져옵니다. 기본 Greeter 계약을 교체하거나 새 계약을 추가하려면 다음을 수행해야합니다.
contracts/src/contracts/Cargo.toml 파일에 다른 작업 공간 멤버로 추가하십시오.contracts/scripts/deploy.ts 조정하십시오ContractIds 열거 및 getDeployments 기능을 frontend/src/deployments/deployments.ts 에서 조정하십시오 사용자 정의 스크립트 추가는 계약과 상호 작용하거나 특정 기능을 테스트하는 데 유용합니다. 따라서 contracts/scripts/script.template.ts 파일을 복제하고 재사용하고 pnpm run script <script-name> 통해 실행하십시오. 이 명령은 tsx 통해 직접 TypeScript 파일을 실행합니다.
일반 스크립트의 경우 동일한 환경 변수 초기화 및 구성이 배포 섹션 (예 : 대상 네트워크 변경)에 설명 된대로 적용됩니다.
contracts/ 및 frontend/ 디렉토리와 패키지로 작업 공간입니다.pnpm 또는 yarn@stable (아래 FAQ 섹션에서 자세히 알아보십시오)cargo-contract , substrate-contracts-nodepolkadot-js , useInkathon React Hooks & Utility Library (또는 useInk )shadcn/ui , tailwindcsseslint prettier simple-git-hooks lint-stagedtypechain-polkadot 통한 유형 안전 계약 생성스타일링, 라인 및 서식 라이브러리를 대안으로 완전히 삭제하거나 대체 할 수 있습니다.
아래에는이 보일러 플레이트를 사용하거나 유사한 설정에서 영감을 얻은 실시간 예제를 찾을 수 있습니다.
vercel.json 에서 필요한 설정이 이미 구성되어 있기 때문에 Vercel을 통해 배포를 회전시키는 것은 매우 간단합니다. 리포지토리를 아직 복제하지 않은 경우 아래 배포 버튼을 사용 하여이 템플릿에서 새 저장소를 만들 수도 있습니다.
또는 제공된 DockerFiles를 사용하여 선택한 호스팅 제공 업체에 배포 할 수도 있습니다. 여기에서 자세히 알아보십시오.
모든 환경 변수는 process.env 에서 frontend/src/config/environment.ts 에서 가져오고 여기에서 다시 수출됩니다. 유형 안전을 향상시키기 위해 항상 @/config/environment 에서 환경 변수 만 가져오고 process.env 에서 직접 직접 가져 오지 마십시오 .env.
| 환경 변수 | 기본값 | 설명 |
|---|---|---|
NEXT_PUBLIC_DEFAULT_CHAIN *슬 | ️ alephzero-testnet | 네트워크 (기판 기반 체인) 프론트 엔드는 기본적으로 연결되어야하며 계약 배포 아티팩트가 가져와야합니다. |
NEXT_PUBLIC_PRODUCTION_MODE | false | 생산 환경을 차별화하기위한 선택적 부울 플래그 (예 : SEO 또는 분석의 경우). |
NEXT_PUBLIC_URL | http://localhost:3000 | 프론트 엔드의 기본 URL을 정의하는 선택적 문자열 (Vercel 환경 변수에서 자동으로 인출 함). |
NEXT_PUBLIC_SUPPORTED_CHAINS | - | DAPP가 멀티 체인이어야하는 경우 프론트 엔드에서 지원되는 네트워크 식별자 (예 ["alephzero-testnet", "shibuya"] )가있는 선택적 배열. |
*️⃣ 필요
이 보일러 플레이트를 유연하게 만드는 핵심 요소 중 하나는 환경 변수를 사용하여 프론트 엔드에서 활성 네트워크를 구성하는 것입니다. 이것은 frontend/.env.local 파일 또는 배포 설정에서 각각 NEXT_PUBLIC_DEFAULT_CHAIN 변수를 설정하여 수행됩니다.
use-inkathon 라이브러리에서 네트워크를 제공하지 않으면 새 SubstrateChain 객체를 작성하여 수동으로 추가 할 수 있습니다. 체인이 누락되었다고 생각되면 문제 또는 PR을 열어주십시오.
중요한
모든 지원되는 체인 상수는 여기에서 scio-labs/use-inkathon 저장소에서 찾을 수 있습니다.
위의 시작 섹션에서는 이미 로컬 노드에 샘플 Greeter 계약을 배포했습니다. 라이브 네트워크를 타겟팅하기 위해 deploy 스크립트를 실행할 때 CHAIN 환경 변수를 사용할 수 있습니다.
CHAIN=alephzero-testnet pnpm run deploy 또한 .env.{chain} 명명 규칙을 가진 동적으로로드 된 환경 파일을 사용하여 배치자 계정에 대한 추가 구성을 추가 할 수 있습니다.
# .env.alephzero-testnet
ACCOUNT_URI=bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice동일한 스크립트를 다시 실행하면 정의 된이 배치자 계정은 외부에 서명하는 데 사용됩니다.
경고
이 파일은 기본적으로 기본적이지만 민감한 정보를 추가 할 때 여전히 신중해야합니다.
일반 디렉토리 대신 작업 영역 파일 inkathon.code-workspace 열어 VSCODE에서 개발하는 것이 도움이 될 수 있습니다. 이 접근법은 파일 탐색기의 섹션 또는 올바른 디렉토리에서 터미널을 여는 바로 가기 동작과 같은 여러 장점을 제공합니다.
zoma.vscode-auto-open-workspace 확장자 설치를 고려하여 디렉토리를 열 때 작업 영역 파일을 자동으로 엽니 다.
또한 아래 나열된 VSCODE 플러그인은이 보일러 플레이트를 사용할 때 매우 유용 할 수 있으므로 권장됩니다.
| 플러그인 이름 | 설명 |
|---|---|
dbaeumer.vscode-eslint | eslint 편집기 지원을 추가합니다. |
esbenp.prettier-vscode | 더 예쁜 편집기 지원을 추가합니다. |
bradlc.vscode-tailwindcss | Tailwindcss 편집기 지원을 추가합니다. |
rust-lang.rust-analyzer | 녹 언어 지원을 추가합니다. |
ink-analyzer.ink-analyzer | 잉크 추가! 언어 지원. |
tamasfe.even-better-toml | .toml 파일 지원을 추가합니다. |
gruntfuggly.todo-tree | 작업 공간에 모든 TODO 을 나열합니다. |
wayou.vscode-todo-highlight | 작업 공간에서 댓글을 TODO 표시합니다. |
mikestead.dotenv | .env 파일에 대한 구문 강조 표시를 추가합니다. |
술! CLI는 잉크로 플레이 할 수있는 편리한 명령 줄 도구입니다! 로컬 노드를 설정하지 않고 계약.
drink-cli cargo install drink-cli --force --locked .pnpm run build 통해 계약을 구축하십시오.pnpm run drink-cli <contract-name> 다. 그런 다음 help 명령을 사용하여 사용 가능한 모든 명령을보고 계약과 상호 작용하십시오. 예를 들어, d --constructor default 또는 d "Hello World" 통해 Greeter 예제 계약을 배포 할 수 있습니다.
Monorepo 작업 공간의 경우 PNPM이 가장 빠르고 신뢰할 수있는 선택 일 수 있습니다. 그래도 사용할 때는 팀의 모든 사람이 사용하는 것이 좋습니다. 설치를 수행하지 않거나 다른 잠금 파일을 커밋해서는 안됩니다.
대안으로, 원사는 또한지지되며 설치에 사용될 수 있습니다. 원사를 사용할 때 경고 :
yarn.lock 파일은 .pnpm-lock.yaml 파일 대신 커밋되어야합니다.pnpm CLI는 여전히 많은 package.json 스크립트에서 사용되므로 수동으로 조정해야합니다.[!중요한]
NPM은workspace가져 오기 프로토콜에 대한 지원이 부족하기 때문에 Ink! Athon과 호환되지 않습니다.
때때로, Next.js는 contracts/deployments/{contract}/ 폴더에서 변경 (예 : 파일 크레오 션)을 선택하지 않습니다. 예를 들어, 로컬 노드에 처음 배치하고 처음으로 development 네트워크에 연결하기 위해 Frontend의 .env.local 설정할 때.
이 문제를 해결하려면 frontend/.next 에서 빌드 캐시를 삭제할 수 있습니다. 이것은 현재 유일한 솔루션이며 Next.js는 프로젝트를 재건하고 새 파일을 선택하도록 강요합니다.
[!메모]
이 동작을 방지하기 위해contracts/package.json파일에는 공허한development.ts파일을 생성하는 작은postinstall스크립트가 포함되어 있지 않습니다.
현재 다음 옵션을 통해 스타일링을 제공합니다.
className 및 *.module.(s)css 파일.[! 정보]
이 보일러 플레이트는 스타일링과 관련하여 활발한 상태로 유지하려고합니다. 즉, 스타일링 또는 구성 요소 라이브러리를 사용할 수 있습니다.
typechain-polkadot 사용하면 각 계약의 유형 (TypeScript Files)이 빌드시 ( build 스크립트 또는 build-all.sh 명령을 통해)를 작성합니다. --skip-types 통과 하여이 동작을 억제 할 수 있습니다.
contracts/typed-contracts/ 에 따라 저장되며 프론트 엔드에서 직접 수입됩니다. 그런 다음 사전 정의 된 API, 네트워크 의존적 계약 주소 및 주입 된 서명자가있는 useInkathon 인스턴스의 새로운 useRegisteredTypedContract Hook를 통해 생성됩니다. 예를 들어 greeter-contract-interactions.tsx 참조하십시오.
