ابدأ تطوير الواجهة الأمامية لتطبيقك اللامركزي (dapp) باستخدام ⁦create-eth-app⁩

في المرة السابقة نظرنا إلى الصورة العامة لـ Solidity (opens in a new tab) وذكرنا بالفعل create-eth-app (opens in a new tab). الآن ستكتشف كيفية استخدامه، وما هي الميزات المدمجة فيه، وأفكار إضافية حول كيفية التوسع فيه. بدأه بول رازفان بيرج، مؤسس Sablier (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). يمكنك إنشاء مستودع GitHub، وإضافته إلى Netlify، وإعداد أمر البناء، وبذلك تكون قد انتهيت! سيتم استضافة تطبيقك وسيكون قابلاً للاستخدام للجميع. وكل ذلك مجانًا.

الميزات

React و create-react-app

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

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

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

مساحات عمل Yarn

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

ethers.js

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

The Graph

يعد GraphQL (opens in a new tab) طريقة بديلة للتعامل مع البيانات مقارنة بـ Restful API (opens in a new tab). لديهم العديد من المزايا مقارنة بـ Restful APIs، خاصة لبيانات سلسلة الكتل اللامركزية. إذا كنت مهتمًا بالسبب وراء ذلك، فألق نظرة على GraphQL سيعمل على تشغيل الويب اللامركزي (opens in a new tab).

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

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

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

Apollo

بفضل دمج Apollo Boost (opens in a new tab)، يمكنك بسهولة دمج The Graph في تطبيق React اللامركزي الخاص بك. خاصة عند استخدام خطافات React و Apollo (opens in a new tab)، فإن جلب البيانات بسيط مثل كتابة استعلام GraphQL واحد في المكون الخاص بك:

const { loading, error, data } = useQuery(myGraphQlQuery)

React.useEffect(() => {
  if (!loading && !error && data) {
    console.log({ data })
  }
}, [loading, error, data])

القوالب

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

آفي

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

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

عندما تختار دمج آفي مع create-eth-app، ستحصل على دمج رسم بياني فرعي (opens in a new tab). يستخدم آفي The Graph ويوفر لك بالفعل العديد من الرسوم البيانية الفرعية الجاهزة للاستخدام على روبستن (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). يمكن لمزودي السيولة كسب رسوم من خلال توفير الرموز المطلوبة أو إيثر لكلا جانبي التداول. يستخدم على نطاق واسع وبالتالي لديه واحدة من أعلى السيولات لمجموعة واسعة جدًا من الرموز. يمكنك بسهولة دمجه في تطبيقك اللامركزي (dapp) للسماح للمستخدمين، على سبيل المثال، بمبادلة ETH الخاص بهم بـ DAI.

لسوء الحظ، في وقت كتابة هذا التقرير، كان الدمج مخصصًا فقط لـ Uniswap v1 وليس الإصدار الثاني (v2) الذي تم إصداره للتو (opens in a new tab).

Sablier

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

ماذا بعد؟

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