ساخت یک داشبورد Covid 19 با لاراول

همزمان با ادامه بیماری همه‌گیر Covid 19 در سراسر ایالات متحده، بسیاری از مردم، ماه‌ها در قرنطینه به سر می‌برند. از آنجا که اوضاع هیچ پیش‌بینی از پیشرفت در آینده نشان نمی‌دهد، تصمیم گرفتیم از زمان کافی برای ساخت نسخه شخصی از داشبورد Covid 19 استفاده کنیم.

ما لاراول را برای ساخت این پروژه انتخاب کردیم، زیرا دربردارنده ابزارهایی برای کلیه کارهایی است که برای انجام به آن نیاز داریم از جمله بازیابی اطلاعات از یک API، هش کردن اعداد، ذخیره همه چیز در یک بانک اطلاعاتی و ارائه نتایج با استفاده از نمایش‌های مبتنی بر کامپوننت.

منبع داده ما پروژه پیگیری COVID است، سازمانی که توسط وبسایت خود به عنوان " صدها نفر از داوطلبان جمع‌آوری داده‌ها، توسعه دهندگان، دانشمندان، گزارشگران، طراحان، ویراستاران و سایر همکاران " توصیف شده است. هر روز داده‌ها از ایالت‌ها، سرزمین‌ها و منطقه کلمبیا جمع‌آوری می‌شود و در وبسایت آن‌ها منتشر می‌گردد. از آنجا که داده‌ها از طریق API نیز در دسترس هستند، برنامه ما می‌تواند بطور خودکار بدون هیچ گونه مداخله‌ای از طرف ما، خود را بطور خودکار بروزرسانی کند.

این تصویر از وبسایت آن‌ها، نوع داده‌های سطح ایالتی را که هر روز جمع‌آوری می‌شود شامل تعداد کشته‌ها، تعداد آزمایشات و موارد تایید شده را نشان می‌دهد.

بررسی اجمالی

صفحه اصلی برنامه برای ارائه یک اسکرین شات ایجاد وضعیت همه‌گیر در کل ایالات متحده ایجاد شده است.

ما می‌دانیم که ایالات متحده آمریکا کل جهان نیست، بنابراین این برنامه تنها بخش کوچکی از بیماری همه‌گیر جهانی را نشان می‌دهد.

میانگین هفت روزه، اندازه مورد علاقه ما برای ارزیابی وضعیت فعلی اپیدمی کرونا ویروس است. این فراز و نشیب‌های ناشی از تاخیر در گزارش را هموار می‌کند و به شما این امکان را می‌دهد روند پیشرفت را مشاهده کنید. با توجه به ماهیت نامشخص جمع‌آوری داده‌ها برای بیماری، این روند ممکن است اطلاعات مرتبط‌تر از هر شماره فردی را ارائه دهد.

با مقایسه میانگین هفت روز فعلی با میانگین هفت روز از دو هفته قبل، می‌توانید ایده خوبی راجع به نحوه بهبود یا بدتر شدن تعداد موارد Covid 19 بدست آورید. ما از این چهارده روز تغییر به عنوان پایه ساخت صفحه اصلی برنامه استفاده می‌کنیم.

این صفحه از نمودارهای زیر تشکیل شده است:

نمودار اول چهارده روز تغییر برای هر روز از اول ماه می، برای کل ایالات متحده را نشان می‌دهد. مقدار زیر صفر نشان می‌دهد که میزان مرگ و میر رو به کاهش است. ناگهان در روزی که در اینجا گزارش شد (25 ژوئن 2020)، این اقدام برای اولین بار از ابتدای ماه می به شدت وارد شیب مثبت شد و این حاکی از افزایش سریع ناگهانی تعداد کشته‌ها است.

نمودار بعدی یک نقشه کدگذاری شده با رنگ است که نشان دهنده درصد تغییر روز فعلی برای هر ایالت است. رنگ سبز روشن نشانگر بهبود اعداد و رنگ قرمز تیره حاکی از شدت فراگیری آن است. این نقشه الگوی مشخصی از وخیم‌تر شدن نرخ مرگ و میر را در بیشتر مناطق جنوبی ایالات متحده نشان می‌دهد.

در مرحله بعد، نمودار دیگری وجود دارد که تعداد کشورهایی را که در حال حاضر میزان مرگ و میر آن‌ها در حال بهبود است، مقایسه می‌کند با تعداد ایالت‌هایی که در همان حالت باقی می‌مانند یا بدتر می‌شوند.

در نهایت همان سه نمودار وجود دارد، اما این بار تعداد پرونده‌ها را نشان می‌دهد. می‌بینید که از اواسط ماه می رشد سریع موارد جدید افزایش یافته است. در ابتدا این افزایش محدود به ایالت‌های جنوبی بود، سپس در کشورهای غربی شروع شد و در حال حاضر روند منفی در سراسر میانه غربی آغاز شده است.

در شکل زیر، جدولی از هر ایالت وجود دارد که نشان دهنده تغییر درصد فعلی در تعداد موارد جدید است و باز هم روز فعلی را با نرخ دو هفته قبل مقایسه می‌کند.

اطلاعات اضافی

اطلاعات بیشتری فراتر از این خلاصه صفحه اصلی وجود دارند. تقریبا در مورد هر آیتم در هر صفحه لینکی به داده‌های بیشتر وجود دارد و به راحتی می‌توانید هر حالت خاص را پیدا کنید و ویژگی‌های بیشتری را پیدا کنید.

اندازه‌گیری‌های زیر برای هر ایالت و قلمرو و برای کل کشور در هر روز از زمان ابتلا به این بیماری همه‌گیر در دسترس است.

بیماری همه‌گیر چقدر بد است؟

• تعداد کل کشته‌ها
• سرانه کل مرگ و میر 
• کشته‌های میانگین در هفت روز
• مرگ و میر روزانه
• تعداد کل موارد
• سرانه کل موارد
• موارد میانگین در هفت روز
• موارد جدید روزانه

این بهتر می‌شود یا بدتر؟

• افزایش درصد مرگ و میر هفت روزه 
• روند چهارده روزه (مقایسه میانگین هفت روزه مرگ و میرها به طور متوسط در چهارده روز قبل)
• دو برابر شدن مرگ و میرها در روز (بر اساس هفت روز مرگ و میرها افزایش می‌یابد، چند روز تا کل تعداد کشته‌ها دو برابر بیشتر از زمان حاضر است)
• افزایش درصد موارد هفت روزه 
• روند چهارده روزه (مقایسه میانگین هفت روزه تعداد موارد جدید با میانگین در چهارده روز قبل)
• دو برابر شدن موارد در روز (براساس موارد هفت روزه افزایش می‌یابد، چند روز تا تعداد کل موارد دو برابر بیشتر از زمان حال است)

آیا آزمایش کافی است؟

• تعداد تست‌ها
• تعداد تست‌های سرانه
• تست‌های هفت روزه
• هفت روز آزمون به طور متوسط
• تست‌های روزانه
• درصد تست‌های مثبت (تست‌هایی که افراد آلوده را پیدا می‌کند)

آنچه در صفحه ایالت فلوریدا به نظر می‌رسد مربوط به 25 می 2020 است.

اگر در صفحه فلوریدا قرار دارید و بر روی Days for Cases to Double کلیک کنید، به صفحه زیر منتقل می‌شوید که تعداد روزهایی را که در هر ایالت به طول می‌انجامد، نشان می‌دهد تا تعداد موارد براساس نرخ فعلی افزایش از مقدار فعلی دو برابر شود.

برنامه نویسی سمت سرور

همانطور که در بالا اشاره شد، کل پروژه با استفاده از لاراول ساخته شده است.

سه بار در روز، لاراول به طور خودکار شغلی را برای جستجوی API COVID-Project اجرا می‌کند. مجموعه داده بازگشت بلافاصله در یک پایگاه داده MySQL بارگذاری می‌شود.

سپس لاراول مجموعه‌ای از کارها را شروع می‌کند که این داده‌های اصلی را به اندازه‌گیری‌های مختلفی که در بالا توضیح داده شده تبدیل می‌کند. ترتیب مراحل به شرح زیر است:

• تعداد این افراد با تعداد جمعیت مقایسه می‌شود تا به سرانه افراد برسد.
• هفت روز میانگین محاسبه می‌شود.
• هفت روز افزایش محاسبه می‌شود.
• میانگین هفت روز با 14 روز قبل مقایسه شده است.
• براساس افزایش هفت روزه قبلی، نرخ‌های مضاعف برآورد می‌شود.

سرانجام، مراحل مختلفی برای جدا کردن همه آمارها در دسته‌ها و رتبه‌بندی‌ها وجود دارد. ارائه اطلاعات مختلف با استفاده از نقشه‌های رنگی و جداول طبقه‌بندی شده، کار را ساده‌تر می‌کند.

اجزای قالب گرافیکی

رابط کاربری این اپلیکیشن همچنین با لاراول ساخته شده است که از این فریمورک برای کدگذاری آسان و نگهداری راحت‌تر ماژول‌ها استفاده شده است. در اینجا نحوه ساخت اجزا برای صفحه Days for Cases to Double در شکل زیر نمایش داده شده است.

سپس عناصر با استفاده از برچسب‌های اجزای Laravel Blade، می‌توانند به صورت چیدمان منظم تنظیم شوند.

<div class="grid grid-cols-3">
  <div class="col-span-1">
    <x-title />
    <x-menu />
    <x-credits />
    <x-articles />
    <x-author />
  </div>
  <div class="col-span-2">
    <x-pageTitle
      :pageTitle="$pageTitle"
      :date="$date"
      pageType="day"
      :path="$path"
    />
    <x-dateMenu :path="$path" />
    <x-map :stateData="$stateData" />
    <x-scaleDisplay :scale="$scale" />
    <x-dayDataTable
      :stateData="$stateData"
      :usData="$usData"
      :path="$path"
      :date="$date"
    />
  </div>
</div>

برخی از مؤلفه‌های مورد استفاده در ساخت پروژه عبارتند از:

• نقشه‌ها - با استفاده از یک فایل متن‌باز SVG که در ویکی پدیا موجود است.
• نمودارها - با استفاده از نمودارهای Larapex.
• جداول - با استفاده از HTML ساده.

TailwindCSS برای یک ظاهر طراحی شده مورد استفاده قرار گرفت و AlpineJs برای اضافه کردن موارد کمی از رفتار JavaScript، مانند مخفی کردن و نمایش منو که در صفحه نمایش‌های کوچک استفاده خواهد شد.

تکنیک‌های کاربردی

این پروژه تعدادی از تکنیک‌های مفید برای استفاده از لاراول، برای ایجاد یک برنامه داده محور را نشان می‌دهد. برخی از این موارد عبارتند از:

• ایجاد شغل‌هایی که بطور خودکار وظایفی مانند پرس و جو در API و به روزرسانی بانک اطلاعاتی را در یک برنامه روزانه انجام دهند
• خواندن پرونده CSV و بارگذاری اطلاعات در یک پایگاه داده
• ایجاد دسته‌ها و تعیین اندازه‌گیری برای آن‌ها
• اجزای ساختاری
• ساخت نمودار
• ایجاد نقشه کدگذاری شده با رنگ
• استفاده از آیکون‌ها
• کمی تعامل با Alpine js

لینک‌های برنامه و سورس کد آن

برای راحتی کار شما، کد برنامه در Gitlab در دسترس است.

همچنین می‌توانید نسخه نمایش برنامه را از اینجا بررسی کنید.

از توجه شما مخاطبین عزیز سپاسگذاریم. لطفا مراقب باشید و حتما از ماسک استفاده کنید!

منبع