ابدأ تطوير الواجهة الأمامية لتطبيقك اللامركزي مع create-eth-app

في المرة الأخيرة، ألقينا نظرة على الصورة الكبيرة للغة سوليديتي (opens in a new tab) وذكرنا بالفعل create-eth-app (opens in a new tab). ستكتشف الآن كيفية استخدامه، وما هي الميزات المدمجة والأفكار الإضافية حول كيفية التوسع فيه. بدأه Paul Razvan Berg، مؤسس سابليه (opens in a new tab)، وهذا التطبيق سيعطي دفعة قوية لتطوير واجهة التطبيق لديك ويأتي مع العديد من عمليات التكامل الاختيارية للاختيار من بينها.

التثبيت

يتطلب التثبيت إصدار Yarn 0.25 أو أعلى (npm install yarn --global). الأمر بسيط مثل تشغيل:

yarn create eth-app my-eth-app
cd my-eth-app
yarn react-app:start

إنه يستخدم create-react-app (opens in a new tab) كأساس له. لرؤية تطبيقك، افتح http://localhost:3000/. عندما تكون جاهزًا للنشر في بيئة الإنتاج، أنشئ حزمة مصغرة باستخدام yarn build. إحدى الطرق السهلة لاستضافة هذا هي Netlify (opens in a new tab). يمكنك إنشاء مستودع غيت هاب، وإضافته إلى Netlify، وإعداد أمر البناء وتكون قد انتهيت! سيتم استضافة تطبيقك وسيكون قابلاً للاستخدام للجميع. وكل هذا مجانًا.

الميزات

رياكت و create-react-app

أولاً وقبل كل شيء، قلب التطبيق: رياكت وجميع الميزات الإضافية التي تأتي مع create-react-app. استخدام هذا فقط هو خيار رائع إذا كنت لا تريد دمج إيثريوم. يجعل رياكت (opens in a new tab) نفسه بناء واجهات مستخدم تفاعلية أمرًا سهلاً للغاية. قد لا يكون سهل الاستخدام للمبتدئين مثل Vue (opens in a new tab)، ولكنه لا يزال الأكثر استخدامًا، ويحتوي على ميزات أكثر، والأهم من ذلك، آلاف المكتبات الإضافية للاختيار من بينها. يجعل create-react-app من السهل جدًا البدء به أيضًا ويتضمن:

• دعم صيغة رياكت, JSX, ES6, تايب سكريبت, Flow.
• إضافات لغوية تتجاوز ES6 مثل عامل نشر الكائن.
• CSS ذو بادئات تلقائية، لذلك لا تحتاج إلى webkit- أو بادئات أخرى.
• مشغل اختبار وحدة تفاعلي سريع مع دعم مدمج لتقارير التغطية.
• خادم تطوير مباشر يحذر من الأخطاء الشائعة.
• نص برمجي للبناء لتجميع JS وCSS والصور للإنتاج، مع الهاشات وخرائط المصدر.

يستفيد create-eth-app بشكل خاص من تأثيرات الخطاطيف (hooks) (opens in a new tab) الجديدة. طريقة لكتابة مكونات وظيفية قوية وصغيرة جدًا في نفس الوقت. انظر القسم أدناه حول Apollo لمعرفة كيفية استخدامها في create-eth-app.

مساحات عمل Yarn

تسمح لك مساحات عمل Yarn (opens in a new tab) بامتلاك حزم متعددة، مع القدرة على إدارتها جميعًا من المجلد الجذر وتثبيت التبعيات لها جميعًا مرة واحدة باستخدام yarn install. هذا منطقي بشكل خاص للحزم الإضافية الصغيرة مثل إدارة عناوين/واجهة التطبيق الثنائية (ABI) للعقود الذكية (المعلومات حول مكان نشر العقود الذكية وكيفية التواصل معها) أو تكامل ذا غراف، وكلاهما جزء من create-eth-app.

ethers.js

بينما لا يزال ويب3 (opens in a new tab) هو الأكثر استخدامًا، فقد اكتسب ethers.js (opens in a new tab) زخمًا أكبر كبديل في العام الماضي وهو المدمج في create-eth-app. يمكنك العمل مع هذا، أو تغييره إلى ويب3 أو التفكير في الترقية إلى ethers.js v5 (opens in a new tab) الذي أوشك على الخروج من المرحلة التجريبية.

ذا غراف

جراف كيو إل (opens in a new tab) هي طريقة بديلة للتعامل مع البيانات مقارنة بـ واجهة برمجة تطبيقات Restful (opens in a new tab). لديهم العديد من المزايا على واجهات برمجة تطبيقات Restful، خاصة لبيانات بلوكتشين اللامركزية. إذا كنت مهتمًا بالمنطق وراء ذلك، فقم بإلقاء نظرة على جراف كيو إل Will Power the Decentralized Web (opens in a new tab).

عادةً ما تجلب البيانات من عقدك الذكي مباشرة. هل تريد قراءة وقت آخر تداول؟ ما عليك سوى استدعاء MyContract.methods.latestTradeTime().call() الذي يجلب البيانات من عقدة إيثريوم إلى تطبيقك اللامركزي. ولكن ماذا لو كنت بحاجة إلى مئات من نقاط البيانات المختلفة؟ سيؤدي ذلك إلى مئات من عمليات جلب البيانات إلى العقدة، مما يتطلب في كل مرة RTT (opens in a new tab) مما يجعل تطبيقك اللامركزي بطيئًا وغير فعال. أحد الحلول قد يكون دالة استدعاء لجلب البيانات داخل عقدك تعيد بيانات متعددة في وقت واحد. لكن هذا ليس مثاليًا دائمًا.

ثم قد تكون مهتمًا بالبيانات التاريخية أيضًا. تريد أن تعرف ليس فقط وقت آخر تداول، ولكن أوقات جميع التداولات التي قمت بها بنفسك على الإطلاق. استخدم حزمة الرسم البياني الفرعي لـ create-eth-app، واقرأ التوثيق (opens in a new tab) وقم بتكييفه مع عقودك الخاصة. إذا كنت تبحث عن عقود ذكية شائعة، فقد يكون هناك بالفعل رسم بياني فرعي. تحقق من مستكشف الرسوم البيانية الفرعية (opens in a new tab).

بمجرد أن يكون لديك رسم بياني فرعي، فإنه يسمح لك بكتابة استعلام واحد بسيط في تطبيقك اللامركزي يسترد جميع بيانات بلوكتشين المهمة بما في ذلك البيانات التاريخية التي تحتاجها، ويتطلب جلبًا واحدًا فقط.

Apollo

بفضل تكامل Apollo Boost (opens in a new tab)، يمكنك بسهولة دمج ذا غراف في تطبيق رياكت اللامركزي الخاص بك. خاصة عند استخدام خطاطيف رياكت (رياكت hooks) و Apollo (opens in a new tab)، يصبح جلب البيانات بسيطًا مثل كتابة استعلام GraphQl واحد في مكونك:

1const { loading, error, data } = useQuery(myGraphQlQuery)
2
3React.useEffect(() => {
4  if (!loading && !error && data) {
5    console.log({ data })
6  }
7}, [loading, error, data])
نسخ

القوالب

علاوة على ذلك، يمكنك الاختيار من بين عدة قوالب مختلفة. حتى الآن يمكنك استخدام تكامل آفي أو Compound أو UniSwap أو سابليه. تضيف جميعها عناوين عقود ذكية خدمية مهمة إلى جانب عمليات تكامل الرسوم البيانية الفرعية المعدة مسبقًا. ما عليك سوى إضافة القالب إلى أمر الإنشاء مثل yarn create eth-app my-eth-app --with-template aave.

آفي

آفي (opens in a new tab) هو سوق إقراض أموال لامركزي. يوفر المودعون السيولة للسوق لكسب دخل سلبي، بينما يمكن للمقترضين الاقتراض باستخدام ضمانات إضافية. إحدى الميزات الفريدة لـ آفي هي القروض السريعة (opens in a new tab) التي تسمح لك باقتراض الأموال دون أي ضمان إضافي، طالما أنك تعيد القرض في غضون معاملة واحدة. يمكن أن يكون هذا مفيدًا على سبيل المثال لمنحك أموالًا إضافية في تداول المراجحة.

تسمى الرموز المتداولة التي تكسبك فوائد aTokens.

عندما تختار دمج آفي مع create-eth-app، ستحصل على تكامل رسم بياني فرعي (opens in a new tab). تستخدم آفي ذا غراف وتوفر لك بالفعل العديد من الرسوم البيانية الفرعية الجاهزة للاستخدام على روبستين (opens in a new tab) والشبكة الرئيسية (opens in a new tab) في شكل خام (opens in a new tab) أو منسق (opens in a new tab).

Compound

يشبه Compound (opens in a new tab) آفي. يتضمن التكامل بالفعل الرسم البياني الفرعي الجديد لـ Compound v2 (opens in a new tab). من المدهش أن الرموز التي تكسب فائدة هنا تسمى cTokens.

يوني سواب

يوني سواب (opens in a new tab) هي منصة تبادل لامركزية (DEX). يمكن لمزودي السيولة كسب الرسوم عن طريق توفير الرموز أو الإيثر المطلوب لكلا جانبي الصفقة. يستخدم على نطاق واسع وبالتالي لديه واحدة من أعلى السيولة لمجموعة واسعة جدًا من الرموز. يمكنك دمجه بسهولة في تطبيقك اللامركزي، على سبيل المثال، للسماح للمستخدمين بمبادلة ETH الخاص بهم بـ DAI.

للأسف، في وقت كتابة هذا التقرير، فإن التكامل مخصص فقط لـ يوني سواب v1 وليس الإصدار 2 الذي تم إصداره للتو (opens in a new tab).

سابليه

يسمح سابليه (opens in a new tab) للمستخدمين ببث مدفوعات الأموال. بدلاً من يوم دفع واحد، تحصل بالفعل على أموالك باستمرار دون إدارة إضافية بعد الإعداد الأولي. يتضمن التكامل الرسم البياني الفرعي الخاص به (opens in a new tab).

ماذا بعد؟

إذا كانت لديك أسئلة حول create-eth-app، فانتقل إلى خادم مجتمع سابليه (opens in a new tab)، حيث يمكنك التواصل مع مؤلفي create-eth-app. كخطوات تالية أولى، قد ترغب في دمج إطار عمل لواجهة المستخدم مثل Material UI (opens in a new tab)، وكتابة استعلامات جراف كيو إل للبيانات التي تحتاجها بالفعل وإعداد النشر.

آخر تحديث للصفحة: 3 مارس 2026

m (opens in a new tab)

m (opens in a new tab)

c (opens in a new tab)

+4

عرض المساهمين