build onchain apps تنزيل - build onchain apps

build onchain apps

كود الذكاء الاصطناعي

v0.31.0

تنزيل

بناء قالب تطبيقات onchain

بناء قالب تطبيقات onchain (⛵)

قم بتسريع إبداع Onchain الخاص بك مع قالب تطبيقات OnChain. ☕

سيساعدك بناء تطبيقات تطبيقات OnChain (المعروف أيضًا باسم القارب ⛵) على توفير أسابيع من إعداد التطبيق الأولي ومتاعب دمج مكونات OnChain مع البنية التحتية Web2. ؟

نفعل ذلك من خلال اتباع نهج رأي لتبسيط القرارات المبكرة التي يجب عليك اتخاذها عند إنشاء تطبيق Onchain.

سواء كنت مشاركًا في Hackathon أو رجل أعمال طموح يتطلع إلى بناء الشيء الكبير التالي ، تم تصميم هذا القالب معك في الاعتبار. ؟

خارج الصندوق ؟ ؟

دعم تطبيق الويب التدريجي باستخدام Next.js
Ethereum L2 دعم من خلال القاعدة؟
إنشاء حساب سهل مع محفظة ذكية
أمثلة حية ووثائق لخبرات التعدين والمدفوعات مع Wagmi و Viem
أحدث أفضل الممارسات في التصميم مع CSS Tailwind؟
سهولة الصيانة مع الاندماج والتنسيق والاختبارات ✅
رؤى في مقاييس أداء شبكة الإنترنت مع العطور؟ js؟
نشر العقد الذكي مع مسبك ☁
دعم عقدة TestNet المحلية لاختبار العقود الذكية باستخدام Anvil. ؟

ابدء

الخطوة 1: متغيرات البيئة الإعداد

الحصول على عنوان URL الأساسي RPC من منصة مطور Coinbase وتعيين إلى ملف .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

بعد إنشاء مشروع باستخدام القارب ، هذه هي المجلدات والملفات التي تهتم بها عند تحديث عقد ذكي: باستخدام عقد BuyMeAcoffee الذكي كمثال أدناه

 < 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 المحدثة إلى رمز الواجهة الأمامية

بعد تحديث رمز العقد الذكي ، قم بتشغيل forge build في مجلد contracts . سيؤدي ذلك إلى إنشاء JSON في contracts/out .

يحتوي الإخراج JSON على معلومات إضافية. نحتاج فقط إلى خاصية abi من كائن JSON. دعنا نستخدم jq لاستخراج خاصية abi فقط

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

خذ إخراج jq وتحديث web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts

تم مع الخطوة الأولى!

نشر عقدك الذكي وتحديث رمز الواجهة الأمامية

تأكد من حصولك على جميع متغيرات البيئة المربعة في contracts/.env

لنشر عقدك الذكي ،

 # 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 مع العنوان الجديد.

outro

هذه واحدة من أكثر الخطوات المعرضة للخطأ. خذها خطوة بخطوة.

إذا كنت نشرًا جديدًا للعقد الذكي ، فما عليك سوى محاولة نشر عقد BuyMeACoffee الحالي واستبدال عنوان العقد. بعد ذلك ، حاول تحديث BuyMeACoffee.sol واحصل على ABI الجديد في رمز الواجهة الأمامية.

نحن نفكر في طرق لجعل هذه الخطوة أسهل في المستقبل! قرصنة سعيدة!