ดาวน์โหลด inkathon - ดาวน์โหลดซอร์สโค้ด inkathon

inkathon

โค้ดแหล่งที่มา AI

@inkathon

ดาวน์โหลด

นี่คือแผ่นหม้อต้มแบบเต็มสแต็คสำหรับหมึก! สัญญาอัจฉริยะที่มีส่วนร่วมในบูรณาการ สามารถใช้เพื่อเริ่มพัฒนาแนวคิด Hackathon ของคุณอย่างรวดเร็วหรือเพื่อนั่งร้านแอปพลิเคชัน Web3 พร้อมการผลิต

โครงการเป็นส่วนหนึ่งของโครงการ Scio Labs เพื่อปรับปรุงประสบการณ์นักพัฒนาในหมึก! ระบบนิเวศและสมาชิกที่ภาคภูมิใจของ Aleph Zero EFP -

โครงการอื่น ๆ รวมถึง:

create-ink-app cli ( เร็ว ๆ นี้ )
ink!athon Boilerplate
useInkathon hooks & utility library
zink! มาโครสัญญาอัจฉริยะ

เข้าร่วมการสนทนาในกลุ่มโทรเลขของเรา

หากคุณต้องการมีส่วนร่วมโปรดอ่านแนวทางผู้สนับสนุนของเรา

สารบัญ:

เกี่ยวกับ
เริ่มต้น
1. 1. เรียกใช้ส่วนหน้า
2. 2. สร้างและปรับใช้สัญญาบนโหนดท้องถิ่น
3. 3. เชื่อมต่อส่วนหน้าเข้ากับโหนดท้องถิ่น
การปรับแต่ง?
1. 1. ชื่อโครงการ
2. 2. สัญญาที่กำหนดเอง
3. 3. สคริปต์ที่กำหนดเอง
สแต็ค?
ตัวอย่างสด
การปรับใช้?
1. ตัวแปรสภาพแวดล้อม
2. การปรับใช้สัญญา
การตั้งค่า VSCODE?
1. พื้นที่ทำงาน
2. ปลั๊กอิน
ดื่ม! การใช้งาน CLI?
คำถามที่พบบ่อยและการแก้ไขปัญหา

เกี่ยวกับ

แผ่นหม้อไอน้ำมาพร้อมกับหมึกตัวอย่างเล็ก ๆ ! สัญญา Greeter ที่เก็บ message ("คำทักทาย") และอนุญาตให้ทุกคนอัปเดต ส่วนหน้ามีส่วนประกอบ UI ที่เรียบง่ายเพื่อเชื่อมต่อกระเป๋าเงินของคุณและโต้ตอบกับสัญญา (เช่นอ่านและเขียน message ) ลองใช้สดบน Inkathon.xyz

เริ่มต้น

1. เรียกใช้ส่วนหน้า

ส่วนหน้าทำงานนอกกรอบโดยไม่ต้องใช้โหนดในท้องถิ่นเนื่องจากสัญญาตัวอย่างถูกปรับใช้ล่วงหน้าใน Testnets สดบางอย่าง (เช่น alephzero-testnet และ shibuya ) ข้อมูลเมตาการปรับใช้ที่จำเป็นและที่อยู่มีให้ภายใต้ contracts/deployments/

สิ่งที่ต้องทำล่วงหน้า:
SETUP NODE.JS V18+ (แนะนำผ่าน NVM พร้อม nvm install 18 )
ติดตั้ง PNPM (แนะนำผ่าน Node.js CorePack หรือ npm i -g pnpm )
โคลนที่เก็บนี้

คำแนะนำพิเศษสำหรับผู้ใช้ Windows

[!สำคัญ]
ผู้ใช้ Windows จะต้องใช้ WSL (แนะนำ) หรือเชลล์ที่กำหนดเองเช่น Git Bash PowerShell ไม่ได้รับการสนับสนุน

สิ่งที่ต้องใช้ล่วงหน้าเมื่อใช้ WSL สำหรับ Linux:
ติดตั้ง WSL และดำเนินการคำสั่ง ทั้งหมด ในเทอร์มินัล WSL
SETUP NODE.JS V18+ (แนะนำผ่าน NVM พร้อม nvm install 18 )
ติดตั้งแพ็คเกจ NPM ต่อไปนี้ทั่วโลก:
npm i -g npm
npm i -g pnpm node-gyp make
โคลนที่เก็บนี้ลงในระบบไฟล์ WSL (เช่น /home/<user>/inkathon )
เคล็ดลับ: คุณสามารถป้อน \wsl$ ในแถบด้านบนของ Windows Explorer เพื่อเข้าถึงระบบไฟล์ 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

2. สร้างและปรับใช้สัญญาบนโหนดท้องถิ่น

ไฟล์ contracts/package.json มีสคริปต์ชวเลขสำหรับการสร้างการทดสอบและการปรับใช้สัญญาของคุณ

สิ่งที่ต้องทำล่วงหน้า:
ติดตั้ง Rust ผ่านเอกสารสารตั้งต้น (ข้ามส่วน "รวบรวมโหนดพื้นผิว")
ติดตั้ง 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 ) ในเบราว์เซอร์

3. เชื่อมต่อส่วนหน้าเข้ากับโหนดท้องถิ่น

เปิดไฟล์ frontend/.env.local และตั้งค่าตัวแปร NEXT_PUBLIC_DEFAULT_CHAIN เป็นการ development จากนั้นรีสตาร์ทส่วนหน้าและคุณควรจะสามารถโต้ตอบกับสัญญาที่ปรับใช้กับโหนดท้องถิ่นของคุณ

อ่านเพิ่มเติมเกี่ยวกับตัวแปรสภาพแวดล้อมและค่าคงที่ห่วงโซ่ที่มีอยู่ทั้งหมดในส่วนตัวแปรสภาพแวดล้อมด้านล่าง

การปรับแต่ง?

1. ชื่อโครงการ

มีหลายสถานที่ที่คุณต้องแทรกชื่อโครงการและตัวระบุ เหตุการณ์เหล่านี้ส่วนใหญ่จะถูกเน้นด้วย A /* TODO */ ความคิดเห็นในรหัส คุณสามารถแทนที่ได้อย่างง่ายดายโดยการติดตั้งปลั๊กอิน todo-tree

นอกจากนี้ยังมีเหตุการณ์ที่ไม่ได้รับแสงสว่างดังต่อไปนี้:

ชื่อของไฟล์ inkathon.code-workspace
ชื่อและข้อมูลเมตาของ package.json ในไดเรกทอรีรากเช่นเดียวกับใน contracts/ และ frontend/ แพ็คเกจ
การพึ่งพาพื้นที่ทำงาน ( @inkathon/contracts ) ที่กำหนดไว้ใน frontend/package.json และนำเข้าใน frontend/src/deployments/deployments.ts

2. สัญญาที่กำหนดเอง

ในการแทนที่สัญญา Greeter เริ่มต้นหรือเพิ่มสัญญาใหม่คุณต้องทำสิ่งต่อไปนี้:

เพิ่มไดเรกทอรีสัญญาใหม่ภายใต้ contracts/src/
เพิ่มเป็นสมาชิกพื้นที่ทำงานอื่นในไฟล์ contracts/Cargo.toml
เพิ่มสคริปต์การปรับใช้อื่นหรือปรับ contracts/scripts/deploy.ts
ปรับ ContractIds enum และ getDeployments ใน frontend/src/deployments/deployments.ts

3. สคริปต์ที่กำหนดเอง

การเพิ่มสคริปต์ที่กำหนดเองมีประโยชน์ในการโต้ตอบกับสัญญาของคุณหรือทดสอบฟังก์ชั่นบางอย่าง ดังนั้นเพียงทำซ้ำ & นำ contracts/scripts/script.template.ts กลับมาใช้ซ้ำไฟล์และเรียกใช้ซ้ำผ่าน pnpm run script <script-name> คำสั่งนี้จะเรียกใช้ไฟล์ typeScript โดยตรงผ่าน tsx

สำหรับสคริปต์ทั่วไปการกำหนดค่าเริ่มต้นและการกำหนดค่าตัวแปรสภาพแวดล้อมเดียวกันจะใช้ตามที่อธิบายไว้ด้านล่างในส่วนการปรับใช้ (เช่นเพื่อเปลี่ยนเครือข่ายเป้าหมาย)

สแต็ค?

สแต็คในรายละเอียด

พื้นที่ทำงาน Monorepo พร้อม contracts/ และ frontend/ ไดเรกทอรีเป็นแพ็คเกจ
Package Manager: pnpm หรือ yarn@stable (อ่านเพิ่มเติมในส่วนคำถามที่พบบ่อยด้านล่าง)
การ cargo-contract สัญญาอัจฉริยะ: substrate-contracts-node หมึก!
frontend: next.js (app-dir), React, typescript
- การโต้ตอบตามสัญญา: polkadot-js , useInkathon React Hooks & Utility Library (อีกวิธีหนึ่ง: useInk )
- สไตล์: shadcn/ui , tailwindcss
- ผ้าสำลีและการจัดรูปแบบ: eslint , prettier , simple-git-hooks , lint-staged
การสร้างสัญญาประเภทที่ปลอดภัยผ่าน typechain-polkadot

การจัดแต่งทรงผมผ้าสำลีและการจัดรูปแบบห้องสมุดสามารถลดลงอย่างเต็มที่หรือแทนที่ด้วยทางเลือก

ไดอะแกรมหมึก Inkathon

ตัวอย่างสด

ด้านล่างคุณจะพบตัวอย่างสดที่ใช้แผ่นหม้อต้มน้ำนี้หรือมีการตั้งค่าที่คล้ายกันซึ่งได้รับแรงบันดาลใจจากมัน:

inkathon.xyz - การปรับใช้การสาธิตสดของแผ่นหม้อไอน้ำนี้
azero.id - บริการชื่อโดเมนสำหรับ Aleph Zero และอื่น ๆ
โครงการแฮ็คฮ็อตหลายโครงการจาก Ethwarsaw, Hackonchain, Ethdam และ Polkadot Ink! Hackathon

การปรับใช้?

การปั่นการปรับใช้ผ่าน Vercel นั้นค่อนข้างตรงไปตรงมาเนื่องจากการตั้งค่าที่จำเป็นได้รับการกำหนดค่าไว้แล้วใน vercel.json หากคุณยังไม่ได้โคลนที่เก็บคุณสามารถใช้ปุ่ม ปรับใช้ ด้านล่างเพื่อสร้างที่เก็บใหม่จากเทมเพลตนี้

หรือคุณสามารถใช้ Dockerfiles ที่ให้ไว้เพื่อปรับใช้กับผู้ให้บริการโฮสติ้งที่คุณเลือก อ่านเพิ่มเติมที่นี่

ตัวแปรสภาพแวดล้อม

ตัวแปรสภาพแวดล้อมทั้งหมดนำเข้าจาก process.env ใน frontend/src/config/environment.ts และส่งออกจากที่นั่นอีกครั้ง เพื่อความปลอดภัยประเภทที่ได้รับการปรับปรุงตัวแปรสภาพแวดล้อมนำเข้าเฉพาะจาก @/config/environment และไม่เคยมาจาก process.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`	-	อาเรย์เสริมพร้อมตัวระบุเครือข่าย (เช่น `["alephzero-testnet", "shibuya"]` ) ที่ได้รับการสนับสนุนจากส่วนหน้า หาก DAPP ควรจะเป็นหลายสาย

*ต้องการ⃣

โซ่ที่รองรับ

องค์ประกอบสำคัญอย่างหนึ่งที่ทำให้หม้อไอน้ำนี้มีความยืดหยุ่นคือการใช้ตัวแปรสภาพแวดล้อมเพื่อกำหนดค่าเครือข่ายที่ใช้งานอยู่ในส่วนหน้า สิ่งนี้ทำได้โดยการตั้งค่าตัวแปร NEXT_PUBLIC_DEFAULT_CHAIN ในไฟล์ frontend/.env.local หรือในการตั้งค่าการปรับใช้ตามลำดับ

หากเครือข่ายของคุณไม่ได้รับการจัดเตรียมโดยไลบรารี use-inkathon คุณสามารถเพิ่มได้ด้วยตนเองโดยการสร้างวัตถุ SubstrateChain ใหม่ หากคุณคิดว่าห่วงโซ่หายไปโปรดเปิดปัญหาหรือประชาสัมพันธ์

สำคัญ

ค่าคงที่ห่วงโซ่ที่รองรับทั้งหมดสามารถพบได้ที่นี่ในพื้นที่เก็บข้อมูล scio-labs/use-inkathon

การปรับใช้สัญญา

ในส่วนการเริ่มต้นใช้งานด้านบนเราได้ปรับใช้สัญญา Greeter ตัวอย่างบนโหนดท้องถิ่นแล้ว ในการกำหนดเป้าหมายเครือข่ายสดเราสามารถใช้ตัวแปรสภาพแวดล้อม CHAIN เมื่อเรียกใช้สคริปต์ deploy

CHAIN=alephzero-testnet pnpm run deploy

นอกจากนี้ไฟล์สภาพแวดล้อมที่โหลดแบบไดนามิกด้วยการประชุมการตั้งชื่อ .env.{chain} สามารถใช้เพื่อเพิ่มการกำหนดค่าเพิ่มเติมเกี่ยวกับบัญชี deployer

 # .env.alephzero-testnet
ACCOUNT_URI=bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice

เมื่อเรียกใช้สคริปต์เดียวกันอีกครั้งบัญชี deployer นี้ที่กำหนดจะใช้เพื่อลงนามใน extrinsic

คำเตือน

ไฟล์เหล่านี้จะถูก gitignored โดยค่าเริ่มต้น แต่คุณควรระมัดระวังเป็นพิเศษเมื่อเพิ่มข้อมูลที่ละเอียดอ่อนให้กับพวกเขา

การตั้งค่า VSCODE?

พื้นที่ทำงาน

มันจะมีประโยชน์ในการพัฒนาใน VSCODE โดยการเปิดไฟล์ Workspace inkathon.code-workspace แทนที่จะเป็นเพียงไดเรกทอรีธรรมดา วิธีการนี้มีข้อดีหลายประการเช่นส่วนต่างๆใน File Explorer หรือการกระทำทางลัดเพื่อเปิดเทอร์มินัลในไดเรกทอรีที่ถูกต้อง

พิจารณาการติดตั้งส่วนขยาย zoma.vscode-auto-open-workspace เพื่อเปิดไฟล์พื้นที่ทำงานโดยอัตโนมัติเมื่อเปิดไดเรกทอรี

ปลั๊กอิน

นอกจากนี้แนะนำให้ใช้ปลั๊กอิน VSCODE ที่แสดงไว้ด้านล่างเนื่องจากจะมีประโยชน์มากเมื่อทำงานกับแผ่นหม้อไอน้ำนี้

ปลั๊กอินที่แนะนำทั้งหมด

ชื่อปลั๊กอิน	คำอธิบาย
`dbaeumer.vscode-eslint`	เพิ่มการสนับสนุน Eslint Editor
`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?

เครื่องดื่ม! CLI เป็นเครื่องมือบรรทัดคำสั่งที่สะดวกที่ช่วยให้คุณเล่นกับหมึกของคุณ! สัญญาโดยไม่ต้องตั้งค่าโหนดท้องถิ่น

ติดตั้ง drink-cli ผ่าน cargo install drink-cli --force --locked
สร้างสัญญาของคุณผ่าน pnpm run build
เรียกใช้คำสั่งต่อไปนี้เพื่อเตรียมและเปิด CLI สำหรับสัญญาของคุณ: pnpm run drink-cli <contract-name>

จากนั้นเพียงใช้คำสั่ง help เพื่อดูคำสั่งที่มีอยู่ทั้งหมดและเริ่มโต้ตอบกับสัญญาของคุณ ตัวอย่างเช่นคุณสามารถปรับใช้สัญญาตัวอย่างของ Greeter ผ่าน d --constructor default หรือ d "Hello World"

คำถามที่พบบ่อยและการแก้ไขปัญหา

ผู้จัดการแพ็คเกจใดรองรับ ฉันต้องใช้ PNPM หรือไม่?

สำหรับพื้นที่ทำงานของ Monorepo PNPM น่าจะเป็นตัวเลือกที่เร็วและน่าเชื่อถือที่สุด เมื่อใช้มันก็ขอแนะนำให้ทุกคนในทีมใช้มัน ไม่ควรทำการติดตั้งหรือไม่ควรมีการล็อคไฟล์อื่น ๆ

อีกทางเลือกหนึ่งรองรับเส้นด้ายและสามารถใช้สำหรับการติดตั้ง ข้อแม้เมื่อใช้เส้นด้าย:

รองรับเฉพาะเวอร์ชันที่เสถียรของเส้นด้าย (ปัจจุบัน V3) ไม่ใช่เส้นด้ายคลาสสิก (V1)
ควรส่งไฟล์ yarn.lock แทนที่จะเป็นไฟล์. .pnpm-lock.yaml
pnpm CLI ยังคงใช้ในหลาย ๆ package.json สคริปต์ json ดังนั้นสิ่งเหล่านี้จะต้องมีการปรับด้วยตนเอง

[!สำคัญ]
เนื่องจาก NPM ขาดการสนับสนุนโปรโตคอลการนำเข้า workspace จึงไม่สามารถใช้งานได้กับหมึก! Athon

วิธีแก้ปัญหา `ไม่สามารถหาโมดูล './greeter/development.ts'`?

บางครั้ง next.js ไม่ได้รับการเปลี่ยนแปลง (เช่นการสร้างไฟล์) ใน contracts/deployments/{contract}/ โฟลเดอร์อย่างถูกต้อง เช่นเมื่อคุณเพิ่งปรับใช้บนโหนดท้องถิ่นเป็นครั้งแรกและตั้งค่า .env.local ของส่วนหน้าเพื่อเชื่อมต่อกับเครือข่าย development

ในการแก้ไขปัญหานี้คุณสามารถลบ Build Cache ที่ frontend/.next นี่เป็นทางออกเดียวและจะบังคับให้ Next.js สร้างโครงการใหม่และรับไฟล์ใหม่

[!บันทึก]
เพื่อป้องกันพฤติกรรมนี้ไฟล์ contracts/package.json มีสคริปต์ postinstall ขนาดเล็กที่สร้างไฟล์ development.ts ที่ว่างเปล่าหากไม่มีอยู่

วิธีการจัดแต่งทรงผม?

ขณะนี้มีการจัดแต่งทรงผมผ่านตัวเลือกต่อไปนี้นอกกรอบ:

Shadcn/UI - ส่วนประกอบที่ใช้งานได้อีกครั้งที่สร้างขึ้นโดยใช้ Radix UI และ Tailwind CSS
Vanilla Tailwind CSS สไตล์สไตล์ผ่าน className และ *.module.(s)css
ค่าเริ่มต้นรูปแบบ CSS

[!ข้อมูล]
แผ่นหม้อไอน้ำนี้พยายามที่จะอยู่อย่างไม่ได้รับการปรับแต่งเกี่ยวกับการจัดแต่งทรงผมซึ่งหมายความว่าคุณสามารถใช้สไตล์หรือไลบรารีส่วนประกอบใด ๆ

การโต้ตอบสัญญาแบบปลอดภัยประเภททำงานได้อย่างไร?

ด้วย typechain-polkadot ประเภทสำหรับแต่ละสัญญา (ไฟล์ typescript) ถูกสร้างขึ้นเมื่อสร้าง (ผ่านคำสั่ง build script หรือ build-all.sh ) คุณสามารถปราบปรามพฤติกรรมนี้ได้โดยผ่าน --skip-types

พวกเขาจะถูกเก็บไว้ภายใต้ contracts/typed-contracts/ และนำเข้าโดยตรงจากส่วนหน้า จากนั้นผ่านตะขอใหม่ useRegisteredTypedContract จากอินสแตนซ์ useInkathon ด้วย API ที่กำหนดไว้ล่วงหน้าที่อยู่ตามสัญญาที่ขึ้นกับเครือข่ายและผู้ลงนามที่ถูกฉีดกำลังถูกสร้างขึ้น ดูตัวอย่าง greeter-contract-interactions.tsx

ทรัพยากรเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับสารตั้งต้นหมึก!, และ polkadot.js