كيفية بناء متتبع COVID-19 في JavaScript

هل تبحث عن مشروع سريع لممارسة مهارات تطوير الويب لديك؟ ربما تكون قد شاهدت العديد من أدوات تتبع COVID والمخططات المختلفة خلال الوباء - وإليك كيفية صنعها بنفسك بأقل جهد.

ستتعلم بعض الأساليب المفيدة في JavaScript بما في ذلك كيفية جلب البيانات عن بُعد من واجهة برمجة التطبيقات وكيفية استخدام مكتبة الرسوم البيانية لعرضها. دعنا ندخله.

ما الذي ستبنيه

سيساعد هذا الدليل في توضيح أساسيات العمل باستخدام API باستخدام JavaScript. ستتعلم كيفية جلب البيانات من مصدر بعيد. سترى أيضًا كيفية استخدام مكتبة المخططات لعرض البيانات التي تم جلبها.

جميع التعليمات البرمجية المستخدمة في هذه المقالة متوفرة في ملف جيثب مخزن.

استكشاف مصدر البيانات

للحصول على أحدث الأرقام المتعلقة بـ COVID ، سنستخدمها المرض التي تصف نفسها بأنها "Open Disease Data API".

واجهة برمجة التطبيقات هذه ممتازة للأسباب التالية:

• يحتوي على العديد من مصادر البيانات المختلفة ، كل منها يقدم تنسيقات مختلفة قليلاً
• إنه موثق جيدًا ، ليس بالأمثلة ، ولكن مع الكثير من التفاصيل حول كيفية عمل كل من المرض تعمل نقاط النهاية
• تقوم بإرجاع JSON ، والتي يسهل العمل معها من JavaScript
• إنه مفتوح تمامًا ومجاني للاستخدام ، ولا يتطلب المصادقة

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

في هذا البرنامج التعليمي ، سنستخدم ملف بيانات نيويورك تايمز بالنسبة للولايات المتحدة من المرض. تتضمن نقطة النهاية هذه بيانات من مدة الوباء (منذ 21 كانون الثاني (يناير) 2020) ، بتنسيق يسهل التعامل معه. ألق نظرة على بعض البيانات من نقطة نهاية المرض سنستخدم:

إذا كنت معتادًا على التعامل مع JSON ، فقد تتمكن من قراءة ذلك دون أي مشكلة. إليك مقتطف صغير بتنسيق أكثر قابلية للقراءة:

[{
 "التاريخ": "2020-01-21"،
 "الحالات": 1 ،
 "الوفيات": 0،
 "محدث": 1643386814538
},{
 "التاريخ": "2020-01-22"،
 "الحالات": 1 ،
 "الوفيات": 0،
 "محدث": 1643386814538
}]

تقوم واجهة برمجة التطبيقات بإرجاع مجموعة بسيطة من الكائنات ، يمثل كل كائن نقطة بيانات مع التاريخ والحالات وما إلى ذلك.

إعداد HTML

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

حالات كوفيد ، الولايات المتحدة

إحضار البيانات باستخدام JavaScript

ابدأ بمجرد الحصول على البيانات من API وعرضها في وحدة تحكم المتصفح. سيساعدك هذا في التحقق من أنه يمكنك الجلب من الخادم البعيد ومعالجة الاستجابة. أضف الكود التالي إلى ملف covid.js ملف:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
إحضار (api)
 ثم (response => response.json ())
 ثم (البيانات => {
 console.log (البيانات) ؛
 });

تعد Fetch JavaScript API بديلاً أحدث لـ XMLHttpRequest (اقرأ عنها بالتفصيل في MDN). يستخدم الوعد الذي يجعل البرمجة غير المتزامنة مع عمليات الاسترجاعات أسهل قليلاً. باستخدام هذا النموذج ، يمكنك ربط عدة خطوات غير متزامنة معًا.

بعد جلب عنوان URL المطلوب ، استخدم ملف ومن بعد طريقة الوعد للتعامل مع حالة النجاح. تحليل نص الاستجابة كـ JSON عبر json () طريقة.

متعلق ب: وظائف سهم JavaScript تجعلك مطورًا أفضل

حيث ومن بعد() يُرجع دائمًا الوعد ، يمكنك الاستمرار في التسلسل للتعامل مع كل خطوة. في الخطوة الثانية ، في الوقت الحالي ، ما عليك سوى تسجيل البيانات في وحدة التحكم حتى تتمكن من فحصها:

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

متعلق ب: تصحيح الأخطاء في JavaScript: تسجيل الدخول إلى Browser Console

عرض البيانات باستخدام billboard.js

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

إحضار (api)
 ثم (response => response.json ())
 ثم (البيانات => {
 مؤامرة البيانات (البيانات) ؛
 });
دالة plotData (بيانات) {
}

سنستخدم ملف billboard.js مكتبة لتزويدنا برسم بياني تفاعلي بسيط. يعد billboard.js أساسيًا ، ولكنه يدعم بعض أنواع المخططات المختلفة ، ويسمح لك بتخصيص المحاور والتسميات وجميع المكونات القياسية للمخطط.

ستحتاج إلى تضمين ثلاثة ملفات خارجية ، لذا أضف هذه إلى رأس html:

جرب Billboard.js مع الرسم البياني الأساسي. أضف ما يلي إلى مؤامرة البيانات ():

bb.generate ({
 bindto: "# covid-all-us-cases"،
 البيانات: {
 اكتب: "خط" ،
 الأعمدة: [
 ["البيانات" ، 10 ، 40 ، 20]
 ]
 }
});

ال ربط تحدد الخاصية المحدد الذي يعرّف عنصر HTML الهدف الذي يتم فيه إنشاء المخطط. البيانات ل خط مخطط بعمود واحد. لاحظ أن بيانات العمود عبارة عن مصفوفة تتكون من أربع قيم ، مع القيمة الأولى عبارة عن سلسلة تعمل كاسم تلك البيانات ("البيانات").

يجب أن تشاهد مخططًا يشبه هذا إلى حد ما ، مع ثلاث قيم في السلسلة ووسيلة إيضاحية تسميها على أنها "بيانات":

كل ما تبقى لك هو استخدام الواقع البيانات من واجهة برمجة التطبيقات التي تقوم بالمرور إليها بالفعل مؤامرة البيانات (). يتطلب هذا مزيدًا من العمل لأنك ستحتاج إلى ترجمته إلى تنسيق مناسب وتوجيه billboard.js لعرض كل شيء بشكل صحيح.

سنقوم برسم مخطط يوضح التاريخ الكامل للحالة. ابدأ ببناء عمودين ، أحدهما للمحور x الذي يحتوي على التواريخ ، والآخر لسلسلة البيانات الفعلية التي سنرسمها على الرسم البياني:

var keys = data.map (a => a.date) ،
 الحالات = خريطة البيانات (أ => أ.الحالات) ؛
keys.unshift ("التواريخ") ؛
cases.unshift ("قضايا") ؛

يتطلب العمل المتبقي تعديلات على كائن لوحة الإعلانات.

bb.generate ({
 bindto: "# covid-all-us-cases"،
 البيانات: {
 س: "التواريخ" ،
 اكتب: "خط" ،
 الأعمدة: [
 مفاتيح
 حالات
 ]
 }
});

أضف أيضًا ما يلي محور منشأه:

 المحور: {
 س: {
 النوع: "فئة" ،
 وضع علامة: {
 العد: 10
 }
 }
 }

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

تحقق من مصدر هذا التعقب في جيثب.

الاختلافات

ألق نظرة على كيفية استخدام بيانات المصدر بطرق مختلفة لتغيير ما ترسمه باستخدام billboard.js.

عرض البيانات لسنة واحدة فقط

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

في الثانية .ومن بعد() اتصل ، استبدل:

مؤامرة البيانات (البيانات) ؛

مع:

plotData (data.filter (a => a.date> '2022')) ؛

ال منقي() يقلل التابع مصفوفة عن طريق استدعاء دالة على كل قيمة في المصفوفة. عندما تعود هذه الوظيفة صحيح، فإنه يحافظ على القيمة. وإلا فإنه يتجاهلها.

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

عرض البيانات بدقة أقل

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

الأسلوب القياسي للقيام بذلك هو مع % (معامل) عامل. من خلال التصفية على المعامل 7 لكل فهرس مصفوفة يساوي 0 ، سنحتفظ بكل قيمة سابع:

plotData (data.filter ((a، index) => index٪ 7 == 0)) ؛

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

عرض الحالات والوفيات في رسم بياني واحد

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

الوفيات = خريطة البيانات (أ => وفاة)
...
الأعمدة = [المفاتيح ، الحالات ، الوفيات]

وتعديل لضمان تنسيق Billboard.js للمحاور بشكل صحيح. لاحظ ، على وجه الخصوص ، التغييرات التي تم إجراؤها على بنية البيانات التي تنتمي إلى الكائن الذي تم تمريره إليه ب:

البيانات: {
 س: "التواريخ" ،
 الأعمدة: الأعمدة ،
 المحاور: {"الحالات": "y"، "الوفيات": "y2"}،
 الأنواع: {
 الحالات: "شريط"
 }
}

الآن ، حدد المحاور المتعددة للتخطيط مع نوع جديد خاص بـ حالات سلسلة.

رسم نتائج API باستخدام JavaScript

يوضح هذا البرنامج التعليمي كيفية استخدام واجهة برمجة تطبيقات بسيطة ومكتبة رسومية لإنشاء متتبع COVID-19 أساسي في JavaScript. تدعم واجهة برمجة التطبيقات (API) الكثير من البيانات الأخرى التي يمكنك العمل بها لبلدان مختلفة وتتضمن أيضًا بيانات حول تغطية اللقاح.

يمكنك استخدام مجموعة كبيرة من أنواع مخططات billboard.js لعرضها ، أو استخدام مكتبة رسوم بيانية مختلفة تمامًا. الخيار لك!

كيفية عمل مخطط باستخدام Chart.js

لم يكن عرض البيانات الديناميكية باستخدام JavaScript أسهل من أي وقت مضى.

اقرأ التالي

عن المؤلف