كيفية إنشاء رسم بياني في الوقت الفعلي باستخدام JavaScript و Pusher

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

في هذه المقالة ، سنقوم ببناء خادم Node.js لفضح واجهات برمجة التطبيقات لتوفير بيانات تاريخية لمقياس (في هذه الحالة ، الطقس في لندن). سيوفر أيضًا واجهة برمجة تطبيقات لاستيعاب نقاط بيانات جديدة. سنقوم أيضًا ببناء تطبيق أمامي مع مخطط خطي لعرض التغيرات في درجات الحرارة في طقس لندن في الوقت الفعلي. سيبدو التطبيق الذي نبنيه كما يلي:

اشترك في Pusher

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

واجهات برمجة تطبيقات خادم Node.js لنظام المراقبة والتحليلات

واجهات برمجة التطبيقات الأساسية لأي أنظمة تحليلات لأي مقياس أو كيان هي:

  1. Ingestion API - واجهة برمجة تطبيقات لاستيعاب نقاط البيانات الجديدة لأي كيان معين. في خادمنا لنشر هذه المدونة ، سننشئ واجهة برمجة تطبيقات لاستيعاب بيانات درجة حرارة جديدة في وقت معين في لندن. يمكن استدعاء واجهة برمجة التطبيقات هذه بواسطة أي نظام طقس عالمي أو أي مستشعر إنترنت الأشياء.
  2. واجهة برمجة تطبيقات البيانات التاريخية - ستعيد واجهة برمجة التطبيقات هذه جميع البيانات الموجودة في نطاق من هذا التاريخ في الوقت المناسب. بالنسبة لخادمنا ، سننشئ واجهة برمجة تطبيقات بسيطة. سيعيد بعض البيانات التاريخية الثابتة بنقاط بيانات محدودة لقيم درجة حرارة لندن لأي يوم.

Node.js Express Server Skeleton

سننشئ خادمًا سريعًا أساسيًا إلى جانب إنشاء مثيل خادم مكتبة Pusher. سننشئ مجلدًا جديدًا لمشروعنا وننشئ ملف server.js جديدًا . أضف الكود التالي إلى هذا الملف:

API للحصول على بيانات درجة الحرارة التاريخية

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

API لامتصاص نقطة بيانات درجة الحرارة

سنضيف الآن الكود الخاص بتعريض واجهة برمجة التطبيقات (API) لاستيعاب درجة الحرارة في وقت معين. سنكشف عن واجهة برمجة تطبيقات GET HTTP مع درجة الحرارة والوقت كمعلمات استعلام. سوف نتحقق من أنها ليست معلمات فارغة. نحن تخزينها عن طريق دفع في dataPoints مجموعة من لدينا ثابت جافا سكريبت متغير londonTempData . الرجاء إضافة الكود التالي إلى ملف server.js

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

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

إنشاء تطبيق الواجهة الأمامية باستخدام Vanilla JavaScript و Chart.js

الآن ، سنقوم ببناء تطبيق الواجهة الأمامية. سيعرض مخططًا خطيًا يمثل التغيرات في درجة الحرارة لمدينة لندن في أوقات مختلفة على مدار اليوم. النهج الرئيسي لعرض الرسوم البيانية في الوقت الفعلي هو:

  1. يتعين علينا إجراء استدعاء Ajax الأولي لجلب البيانات التاريخية وتقديم الرسم البياني بالبيانات الموجودة.
  2. سنقوم بالاشتراك في أي أحداث لنقاط بيانات جديدة يتم تخزينها على قناة معينة.

قالب HTML الأساسي

سننشئ مجلدًا جديدًا يسمى public في جذر مشروعنا ثم ننشئ ملف index.html جديدًا في هذا المجلد. سيحتوي هذا الملف على كود HTML الأساسي لتقديم رأس بسيط ورأس فرعي مع اسم التطبيق مع بعض الرموز. سنقوم أيضًا باستيراد مكتبة Pusher JavaScript من عنوان URL الخاص بـ CDN.

إضافة مكتبة الرسوم البيانية

في تطبيقات JavaScript و HTML ، يتعين علينا استخدام SVG أو Canvas لبناء مكونات رسومية لتمثيل الرسوم البيانية الرياضية. هناك العديد من المكتبات مفتوحة المصدر التي يمكن أن تساعدك في عرض أنواع مختلفة من المخططات. وتشمل هذه المخططات الشريطية والمخططات الدائرية والمخططات الخطية والمخططات المبعثرة.

بالنسبة لمشروعنا ، سنختار Chart.js لأنه يحتوي على واجهة برمجة تطبيقات بسيطة إلى حد ما ويعرض مخططات قوية باستخدام علامة Canvas HTML. يمكنك اختيار أي مكتبة رسوم بيانية ولكن ضع في اعتبارك أن المكتبة يجب أن يكون لديها وسيلة لتحديث المخطط دون إعادة عرضه بالكامل. يوفر Chart.js طريقة على أي مخطط تم إنشاؤه لتحديثه.

أضف التعليمات البرمجية التالية إلى ملف index.html في الأماكن المناسبة

إضافة ملف JavaScript وإنشاء مكتبة من جانب العميل Pusher

سنقوم الآن بإنشاء ملف app.js جديد في مجلدنا العام وسنضيف أيضًا الكود التالي لإنشاء مثيل لمكتبة Pusher من جانب العميل.

في الكود أعلاه ، أضفنا أيضًا بعض الطرق المساعدة لإجراء مكالمة Ajax وأيضًا إظهار أو إخفاء العناصر من واجهة برمجة تطبيقات DOM.

إضافة كود لجلب البيانات التاريخية

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

الرجاء إضافة الكود التالي إلى ملف app.js:

في الكود أعلاه ، أضفنا وظيفة تسمى renderWeatherChart. سيتم استخدام هذا لعرض المخطط باستخدام أحدث البيانات المضمنة في متغير chartConfig ضمن مجموعات البيانات الرئيسية . إذا أردنا رسم مخططات خطية متعددة على نفس اللوحة ، فيمكننا إضافة المزيد من العناصر إلى هذه المجموعة.

و البيانات والمفتاح في كل عنصر من عناصر المصفوفة عرض نقاط مختلفة على الرسم البياني. سنقوم بتقديم طلب ajax إلى / getTemperature api لجلب جميع نقاط البيانات ووضعها في هذا المفتاح. سنقوم باستدعاء طريقة العرض لعرض الرسم البياني بعد ذلك. الآن يمكننا تشغيل الأمر node server.jsثم الانتقال إلى المتصفح بعنوان URL التالي لرؤية الرسم البياني الأولي المقدم باستخدام البيانات.

//localhost:9000/

من أجل تصميم تطبيقنا بشكل صحيح ، يرجى إضافة CSS التالي إلى ملف style.css جديد داخل المجلد العام. أضف الكود التالي إلى هذا الملف:

تلقى رمز لتحديث الرسم البياني على حدث جديد

نريد الآن الاشتراك في القناة الفريدة التي سيرسل خادمنا من خلالها أحداث التحديث لهذا الرسم البياني. بالنسبة لمشروعنا ، تم تسمية القناة باسم london-temp-chart والحدث يسمى درجة حرارة جديدة . الرجاء إضافة الكود التالي لمعالجة الحدث ثم تحديث الرسم البياني في الوقت الفعلي:

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

//localhost:9000/addTemperature?temperature=17&time=1500

لاختبار كود تحديث الرسم البياني الخاص بك ، يمكنك استخدام الكود المؤقت التالي في ملف app.js. سيقدم طلبات Ajax وهمية إلى عنوان URL أعلاه بعد فترة زمنية محددة.

هنا GitHub repo كمرجع إلى الكود الكامل.

استنتاج

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

يمكننا استخدام الكود من منشور المدونة هذا لأي مكتبة رسوم بيانية. يمكنه أيضًا عرض أي نوع من المخططات مثل المخطط الشريطي أو المخطط المبعثر أو المخطط الدائري للتحديث في الوقت الفعلي.

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

تم نشر هذه المقالة في الأصل على مدونة Pusher.