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

في المرة السابقة نظرنا إلى الصورة العامة لـ Solidity (يفتح في علامة تبويب جديدة) وذكرنا بالفعل create-eth-app (يفتح في علامة تبويب جديدة). الآن ستكتشف كيفية استخدامه، وما هي الميزات المدمجة فيه، وأفكار إضافية حول كيفية التوسع فيه. بدأه بول رازفان بيرج، مؤسس Sablier (يفتح في علامة تبويب جديدة)، وسيبدأ هذا التطبيق تطوير الواجهة الأمامية الخاصة بك ويأتي مع العديد من عمليات الدمج الاختيارية للاختيار من بينها.

التثبيت

يتطلب التثبيت 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 (يفتح في علامة تبويب جديدة) داخليًا. لرؤية تطبيقك، افتح http://localhost:3000/. عندما تكون مستعدًا للنشر في بيئة الإنتاج، قم بإنشاء حزمة مصغرة باستخدام yarn build. إحدى الطرق السهلة لاستضافة هذا ستكون Netlify (يفتح في علامة تبويب جديدة). يمكنك إنشاء مستودع GitHub، وإضافته إلى Netlify، وإعداد أمر البناء، وبذلك تكون قد انتهيت! سيتم استضافة تطبيقك وسيكون قابلاً للاستخدام للجميع. وكل ذلك مجانًا.

الميزات

React و create-react-app

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

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

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

مساحات عمل Yarn

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

ethers.js

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

The Graph

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

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

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

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

Apollo

بفضل دمج Apollo Boost (يفتح في علامة تبويب جديدة)، يمكنك بسهولة دمج The Graph في تطبيق React اللامركزي الخاص بك. خاصة عند استخدام خطافات React و Apollo (يفتح في علامة تبويب جديدة)، فإن جلب البيانات بسيط مثل كتابة استعلام 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.

آفي

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

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

عندما تختار دمج آفي مع create-eth-app، ستحصل على دمج رسم بياني فرعي (يفتح في علامة تبويب جديدة). يستخدم آفي The Graph ويوفر لك بالفعل العديد من الرسوم البيانية الفرعية الجاهزة للاستخدام على روبستن (يفتح في علامة تبويب جديدة) و الشبكة الرئيسية (يفتح في علامة تبويب جديدة) في شكل خام (يفتح في علامة تبويب جديدة) أو منسق (يفتح في علامة تبويب جديدة).

Compound

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

يونيسواب

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

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

Sablier

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

ماذا بعد؟

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