كيفية إنشاء DApp باستخدام Truffle و Oraclize و ethereum-bridge و Webpack

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

حول هذا البرنامج التعليمي

بعد الانتهاء من هذا البرنامج التعليمي ، سيكون لديك تطبيق DApp (تطبيق لامركزي) فعال يتفاعل مع الأحداث المنبعثة عبر عقد Smartity Smart باستخدام Oraclize لجلب بيانات API الخارجية من Coinbase. للعلم!

سيكون:

  • كتابة ونشر عقد بسيط بسيط
  • إعداد جسر أثيري محلي لاتصال Oracle
  • جلب البيانات الخارجية من API Coinbase باستخدام Oracle
  • إنشاء واجهة أمامية مخصصة لإظهار بيانات واجهة برمجة التطبيقات
  • القيام بذلك في بيئة تنمية محلية
ملحوظة
هناك لقطة لما سنقوم بعمله في أسفل المقال

عني

مرحبا اسمي لاندر. أنا مستشار رقمي وباني منتجات من بلجيكا. عندما لا أكون مشتركًا في Solidity ، فأنا أعمل على TeamHut ، وهي SaaS لمساعدة المستقلين والفرق الرقمية على تنظيم ومشاركة المحتوى الرقمي.

بداية

المتطلبات الأساسية

  1. يمكنك استنساخ مستودع git وتثبيت تبعياته عبر npm
  2. لديك معرفة أساسية بتنسيق HTML و JavaScript و Webpack و terminal و ...
  3. أنت تتطلع إلى معرفة المزيد حول استخدام أحداث Oraclize & Solidity

ماذا سنصنع؟

سنكتب عقدًا ذكيًا يجلب بيانات واجهة برمجة التطبيقات الخارجية باستخدام Oracle قيد التشغيل محليًا. سنفعل ذلك من خلال محاكاة Oracle باستخدام ethereum-bridge. يجلب العقد سعر Ethereum USD الحالي من API لأسعار Coinbase ETH-USD الفورية.

سننشئ صفحة HTML بسيطة تعرض إجمالي رصيد ETH لعقدنا في ETH وبالدولار الأمريكي. يتم احتساب القيمة الإجمالية للعقد بالدولار الأمريكي باستخدام API Coinbase. قيم التحديث التلقائي حتى ينفد العقد.

الأدوات المستخدمة

  • بوابة ، دورة في الدقيقة
  • الكمأة ، مربع حزمة الكمأة ، oraclize-api
  • ethereum الجسر
  • جافا سكريبت ، Webpack

ما هو أوراكل؟

العقود الذكية ، بطبيعتها ، قادرة على تشغيل الحسابات وتخزين واسترجاع البيانات. نظرًا لأن كل عقدة تدير كل عملية حسابية ، فليس من العملي (والمستحيل حاليًا) تقديم طلبات شبكة تعسفية من عقد Ethereum. تملأ الأوراس هذا الفراغ من خلال مشاهدة blockchain للأحداث والرد عليها من خلال نشر نتائج الاستعلام مرة أخرى إلى العقد. بهذه الطريقة ، يمكن للعقود التفاعل مع العالم خارج السلسلة.

"تسمح الأرايات بإرسال البيانات الخارجية ، كما في البيانات غير المرتبطة بسلسلة المفاتيح ، إلى العقود".

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

شبكة أوراكل / أوراكل هي الجهة المسؤولة عن توصيلك بمصدر البيانات. إذا كنت ترغب في قراءة المزيد عن Oracles ، فراجع هنا.

لنذهب

تثبيت الكمأة

بادئ ذي بدء ، دعنا نشعل طاولتنا ونثبت Truffle على مستوى العالم:

$ npm تثبيت -g الكمأة

سنستخدم Truffle لترحيل عقودنا ، وتشغيل testnet التطويرية الخاصة بنا وتثبيت Oraclize. إنها أداة أساسية إذا كنت جادًا في تطوير Solidity.

إنشاء مشروع جديد الكمأة

قم بإنشاء مجلد جديد لمشروعنا ، يسمى oraclize-test:

mkdir $ اختبار أوراكل

انتقل إلى المجلد وإنشاء مشروع Truffle جديد.
لقد بدأنا من صندوق Truffle webpack ، مما سيسهل علينا إنشاء واجهة DApp الخاصة بنا.

مؤتمر نزع السلاح oraclize الاختبار
$ الكمأة unbox webpack

بعد ذلك ، ابدأ testnet Truffle (testrpc):

$ الكمأة تطوير

يجب أن نرى شيئا من هذا القبيل:

تنويه:

  1. كيف يطبع السطر الثاني
    بدأ Truffle Develop في http://127.0.0.1:9545
    اكتب هذا المضيف: مجموعة المنافذ ، ستحتاج إلى ذلك لبدء جسر الأثير.
  2. مقدار الحسابات التي تم إنشاؤها (= 10)

لطيفة ، لقد أنشأت مشروع Truffle للتمهيد ، وأطلقت testnet لتطوير Truffle. أغلق testnet بالضغط على (ctrl + c) والمتابعة بإضافة Oraclize إلى Truffle.

إضافة Oraclize إلى الكمأة

إضافة Oraclize إلى Truffle وإعادة تشغيل testnet تطوير Truffle

$ الكمأة تثبيت oraclize-api
$ الكمأة تطوير

لاحظ كيف ، بعد تثبيت oraclize-api ، تم إنشاء مجلد جديد في مجلد oraclize-test: install_contracts. في ذلك ، ستجد عقد Oraclize يسمى باستخدام Oraclize.sol الذي سيرثه عقد الصلابة الخاص بنا.

يبدو مجلد اختبار oraclize الخاص بنا الآن هكذا

محتويات مجلد oraclize الاختبار

حافظ على نشاط testnet نشطًا ، وافتح نافذة طرفية جديدة لتثبيت جسر الأثير.

تثبيت الأثيروم الجسر

أنشئ مجلدًا جديدًا (اختبار اختبار التوراة التالي) يسمى ethereum-bridge
قم بنسخ مستودع الجسر الأثير ، وتثبيت تبعياته:

mkdir ethereum الجسر
git clone https://github.com/oraclize/ethereum-bridge ethereum-bridge
مؤتمر نزع السلاح - ethereum جسر
تثبيت $ npm
ملحوظة
نحن بصدد إنشاء مجلد ethereum-bridge بجوار اختبار oraclize الخاص بنا ، حيث يمكننا إعادة استخدامه في مشاريع لاحقة.

يمكنك تشغيل جسر العقدة -a 9 لبدء جسر الأثير. تقوم الوسيطة -a 9 بتوجيه ethereum-bridge لاستخدام الحساب الأخير الذي تم إنشاؤه بواسطة عقدة Truffle Testnet المحلية الخاصة بنا لنشر عقد Oraclize. يجب استخدام هذا العنوان فقط لـ Oraclize ، ولا يُقصد به استخدام أي عقد آخر.

تقوم عقدة Truffle Testnet بإنشاء 10 حسابات لتعمل بها ، نظرًا لأن الفهرس الخاص بهم يستند إلى 0 ، نستخدم الفهرس 9.

استمر ، جربه:

جسر العقدة $ -a 9

يصيح:

كما ترون ، لقد واجهنا خطأ.
إذا قرأت السطر ERROR عن كثب ، يمكنك أن ترى ethereum-bridge تحاول الاتصال بالمضيف غير الصحيح: مجموعة المنافذ (http: // localhost: 8545).

يجب أن تعكس هذه المجموعة المزيج الذي كتبته في الخطوة السابقة. في حالتي ، هذا http: // localhost: 9545. تأكد من التحقق من ذلك كإصدارات Truffle الأقدم المستخدمة في استخدام المنفذ 8545.

لحل هذه المشكلة ، ابدأ تشغيل ethereum-bridge لإخباره باستخدام المضيف الصحيح (-H) & port (-p الوسيطة). مانع من الأعلام ، فهي حساسة لحالة الأحرف!

جسر العقدة $ -a 9 -H 127.0.0.1 -p 9545 --dev

يجب أن تبدو النتيجة كما يلي:

ابحث عن الخط الذي يشبه:

OAR = OraclizeAddrResolverI (0x6f485C8BF6fc43eA212E93BBF8ce046C7f1cb475)

ملحوظة
إذا كنت تستخدم ذاكري مختلف عن Truffle القياسي ، فسيكون عنوان ETH الموضح بين الأقواس الدائرية مختلفًا.

تأكد من كتابة (copy copy) السطر fullOAR ، حتى نتمكن من استخدامه في مُنشئ عقدنا لاحقًا. مرة أخرى ، اترك الجهاز يعمل.

في هذه المرحلة ، يجب أن يكون لديك نافذتان طرفيتان نشطتان:

  • لديك الكمأة تطوير testnet
  • الأثير الخاص بك الجسر

اكتب عقد Smart Solidity

لنبدأ مع نموذج Smart Contract. ابحث عن مجلد العقود في المجلد oraclize-test وأضف ملفًا جديدًا OraclizeTest.sol. سيصبح هذا العقد الذكي الذي يرسل المعاملات إلى Oracle لجلب بيانات API. انسخ اللصق التالي في الملف:

ملحوظة
تأكد من استبدال OAR = OraclizeAddrResolverI (0x ...)؛ يتماشى مع الذي كتبته في الخطوة السابقة.

لا تنسَ إزالة متغير OAR هذا من مُنشئك قبل الإنتاج ، فهذا مخصص للاختبار فقط ، في الإنتاج سيؤدي إلى جلب OAR تلقائيًا اعتمادًا على السلسلة التي تديرها ، حاليًا Mainnet ، Ropsten ، و VM - المتصفح ويدعم البيئة.

عند إنشاء العقد ، يتم تشغيل مُنشئ TheOraclizeTest () ، والذي يعين المالك على العنوان الذي ينشر العقد ويستهل Oracle. بعد ذلك ، تقوم باستدعاء وظيفة التحديث () مرة واحدة لجلب سعر ETH الحالي من واجهة برمجة تطبيقات Coinbase.

تقوم وظيفة التحديث () بالتحقق مما إذا كان العقد يحتفظ بأموال كافية لإنشاء طلب عنوان URL ، ويواصل تقديم طلب Oraclize إذا كان لديه.

يتم استدعاء وظيفة __callback () بواسطة Oraclize بمجرد اكتمال الطلب ، يمكنك استخدام JSONPATH لتقسيم الاستجابة. انظر الوثائق هنا.

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

ترجمة الكود

ابحث عن مجلد العقود في اختبار oraclize وحذف ConvertLib.sol و MetaCoin.sol. هذه ملفات أمثلة ، ولن نحتاج إليها.

انسخ رمز العقد المذكور أعلاه في OraclizeTest.sol وجمع الشفرة باستخدام

ترجمة الكمأة

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

الآن ، دعونا نعد Truffle لنشر الكود الخاص بنا على testnet الخاص بالتطوير

تحديث التكوين الكمأة

افتح truffle.js في مجلد اختبار oraclize وأضف بيئة التطوير الخاصة بك:

هنا ، نقوم بتعريف شبكة التطوير (= البيئة) ، وتحديد رقم المنفذ.

تحديث هجرة الكمأة

Openoraclize-test / migrations / 2_deploy_contracts.js وتعديله ليشابه هذا المقتطف:

في هذا النظام الأساسي ، نستورد النسخة المترجمة من عقد OraclizeTest.sol ونوجه تعليمات إلى Truffle migrations حول كيفية ترحيل العقد.

إذا لم نفعل ذلك ، فلن يعرف Truffle الملفات التي سيتم نشرها. إنها أشياء عادية تمامًا ، ففحص هجرات Truffle إذا كنت مهتمًا بذلك.

نحن نمول العقد الذكي بـ 0.5 ETH (500000000000000000 wei) لذلك نحن قادرون على التحدث إلى Oraclize. نحن بحاجة إلى ETH لتكون قادرة على دفع ثمن الغاز عند إرسال المعاملات.

تشغيل truffle migrate - تطوير - إعادة تعيين لنشر العقد الخاص بك إلى testnet. يجب أن ترى شيئًا يشبه هذا:

الهجرة الناجحة تطوير testnet الهجرة

سيؤدي هذا إلى تشغيل جميع عمليات الترحيل الموجودة في دليل عمليات الترحيل في مشروعك. في أبسط صورها ، تمثل عمليات الترحيل ببساطة مجموعة من البرامج النصية للنشر المدارة. إذا كانت عمليات الترحيل الخاصة بك قد سبق تشغيلها بنجاح ، فسيبدأ تنفيذ عملية ترحيل الكمأة من آخر عملية ترحيل تم تشغيلها ، بحيث يتم تشغيل عمليات الترحيل التي تم إنشاؤها حديثًا فقط. في حالة عدم وجود عمليات ترحيل جديدة ، فلن يؤدي إجراء عملية ترحيل الكمأة أي إجراء على الإطلاق. يمكنك استخدام خيار - reset لتشغيل جميع عمليات الترحيل الخاصة بك من البداية.

كما ترون في لقطة الشاشة ، قام Truffle بنشر العقد على هذا العنوان:

0x572309f98e9085f9122fbec9de20a00e19a0476a7cde7e7f84b5a7d168a7520e
ملحوظة
إذا كنت ، مثلي ، ترى أخطاء متعلقة بالغاز عند محاولة تشغيل عمليات ترحيل Truffle ، فحاول تعديل كمية الغاز المذكورة في الترحيل.
إذا كنت ترغب في الحصول على تقدير أفضل ، فتوجه إلى محطة اختبار Truffle Development الخاصة بك وأدخل eth.getBlock ("معلق"). gasLimit.
استخدم الرقم الذي تم إرجاعه لحل المشكلة.
الكمأة تطوير testnet محطة تقدير gasLimit

إنشاء الواجهة الأمامية

افتح مجلد التطبيق وقم بتحرير index.html ليشابه هذا المقتطف:

لا صدمة حقيقية هناك ، أفترض أن كل شيء واضح فيما يتعلق بملف HTML.

تحرير javascripts / app.js لتبدو كما يلي:

لقد أبقت جافا سكريبت عمدا بسيطة. يجب أن تكون التعليقات كافية لفهم أساسي لما يحدث.

وتعديل أنماط / app.css لتبدو هكذا:

مرة أخرى ، الاشياء الأساسية. أفترض أن هذا واضح جدا.

اوشكت على الوصول…

إذا كنت ترغب في رؤية DApp ، فقم بالدوران في المقدمة الأمامية:

ترجمة الكمأة
$ الكمأة تهاجر - التنمية - إعادة
$ npm run dev

يجب أن يتم تجميع عقدك ونشره على testnet الخاص بالتطوير المحلي. تأكد من إعادة التجميع وإعادة الترحيل عند إجراء تغييرات على العقد. يقوم Truffle-webpack تلقائيًا بإعادة تحميل الواجهة الأمامية عندما يكتشف التغييرات في العقد. أنيق!

افتح http: // localhost: 8080 وسترى ملف HTML يعرض رصيد العقد الذكي وقيمته بالدولار الأمريكي بعد بضع ثوانٍ. سيتم تحديث القيم تلقائيًا حتى نفاد الأموال في العقد الذكي. لا تنس أننا بحاجة إلى الدفع مقابل اتصال Oraclize لدينا ؛).

إذا سارت الأمور على ما يرام ، فسترى الواجهة الأمامية الخاصة بك تظهر رصيد العقد الذكي في ETH وبالدولار الأمريكي باستخدام أحداث Oraclize و Solidity:

افتح http: // localhost: 8080 وسترى ملف HTML يعرض رصيد Oraclize Smart Contract وقيمته بالدولار الأمريكي. يستخدم Oraclize واجهة برمجة تطبيقات Coinbase لجلب السعر الفوري الحالي لـ ETH / USD وإعادته إلى العقد. ستستمر قيم الواجهة الأمامية في التحديث حتى ينفد التمويل الذكي للعقد.

مشروع مرجعي

لقد حمّلت مشروعًا مرجعيًا إلى GitHub في حال واجهتك مشكلة

روابط مثيرة للاهتمام

  • فهم أوراكل (بواسطة Oraclize)
  • إعداد جهاز Oracle على AWS من Amazon
  • كيف تتعامل Oraclize مع سر TSLNotary؟

أدوات

  • مستودع جسر الأثير
  • وثائق الكمأة
  • توثيق الوثائق
  • وثائق صلابة
  • أكواد الكربون
  • القاناش
  • Oraclize ريميكس IDE

شكرا للقراءة!

أحب أن أسمع منك وأن تتعلم كيف تشعر حيال مقالتي.
واسمحوا لي أن أعرف إذا كنت تعتقد أن أي شيء مفقود.

إذا كنت ترغب في البقاء على اتصال ، فعليك الرد على هذا المنشور أدناه ، أو متابعتني على Twitter أو الاشتراك في رسالتي الإخبارية باستخدام النموذج أدناه.