Приложение COVOID 19 Tracker (Статистика) с использованием Angular

Вступление:

Все знают о COVOID 19, одном из самых важных моментов для людей и стран, которые борются с этим вирусом. Это моя небольшая инициатива по привлечению внимания людей, показывая им статистику подтвержденных / активных случаев по всем штатам и округам Индии через мое угловое приложение, где данные обновляются каждые 15–30 минут.

Итак, во время этого периода изоляции, поддерживая инициативу премьер-министра Модиджи оставаться дома, как использовать время. Поэтому я решил в свободное время научиться чему-то новому, помимо офисной работы. Итак, я сделал это угловое приложение под названием COVOID 19 Tracker.

Важное примечание:

Github: https://github.com/mehulk05/React-Weather-App

Живая демонстрация: https://mehulk05.github.io/COVOID-19/

Темный режим в реальном времени: https://mehulk05.github.io/COVOID-19-dark-mode/

В чем разница между https://www.covid19india.org/ и вашим сайтом?

Прежде чем продолжить, я хотел бы добавить одну важную вещь: аналогичный веб-сайт был создан кем-то на React, и они хорошо поработали, показывая живую статистику в виде графика. Мой сайт отличается от того, что я сделал в Angular-9. Технически эти ребята проделали отличную работу, так как их график и SPREAD TRENDS также работают, а также у них больше функциональности, чем у меня. Итак, я только получаю данные, сортирую и фильтрую их.

Вот ссылка на уже существующий сайт: https://www.covid19india.org/

О приложении COVOID 19 Tracker:

Приложение показывает в режиме реального времени данные о количестве случаев COVID-19 в различных штатах и ​​округах Индии. Он также показывает рост числа случаев по всей стране, а также рост числа случаев по штатам и районам. Он также показывает подтвержденные случаи, активные случаи, вылеченные случаи и общее количество смертей. Кроме того, в приложении есть одна страница с названием «Линии помощи», на которой есть различные номера телефонов доверия и ссылки для доступа людей. В приложении есть баннерная часть, где некоторые инструкции отображаются постоянно и меняются каждые 5 секунд, чтобы люди знали, какие меры безопасности приняты.

Используемая технология

• Угловой9
• Машинопись
• Функции сортировки Javascript
• Бутстрап

Ключевые особенности приложения:

• Данные в реальном времени о количестве заболевших COVID-19
• Показывает подтвержденные активные случаи, вылеченные случаи и количество смертей
• Показывает данные из всех затронутых штатов
• Показывает данные из пострадавших районов штатов
• Может сортировать данные в порядке возрастания / убывания.
• Включает страницу горячей линии с номерами телефонов доверия и ссылками на веб-сайты.
• На баннере представлены действующие инструкции и меры предосторожности.
• Данные обновляются каждые 15–30 минут.

Краткий обзор кода:

У меня три компонента и один служебный файл

Компоненты

• Компонент приложения: содержит верхний и нижний колонтитулы.
• HomeComponent: точка входа в приложение, которая включает в себя все, что находится внутри. Он содержит все данные о государственных компонентах и ​​включает в себя районный компонент.
• DistrictComponent: содержит список округов для определенных штатов и динамически загружается в HomeComponent On Click определенного штата.
• HelpLineComponent: содержит список номеров горячей линии.
• FAQComponent: содержат сведения, относящиеся к конкретным приложениям и разработчикам.
• Служба CoronaVirus: все данные JSON извлекаются с помощью HTTP-запроса.

API для получения данных

• Ежедневные изменения в штатах: https://api.covid19india.org/states_daily.json
• На уровне штата: https://api.covid19india.org/state_district_wise.json
• На уровне штата V2: https://api.covid19india.org/v2/state_district_wise.json
• Данные баннера: https://api.covid19india.org/website_data.json

CoronaVirus.service.ts

getDataStateWise(): Observable<any> {
return this.http.get(this.url_statewise)
}
getDailyCaseStatus(): Observable<any> {
return this.http.get(this.url_dailycases)
}
getState(state) {
this.state = state
}
getDataDistrictWise(state) {
this.http.get(this.ulr_districtwise).subscribe(data => {
this.data1 = data
this.district = this.data1[state].districtData
this.districtdata.next(this.district)
})
}

Home.component.ts

Получение ежедневных данных о случаях

testData() {
 this.cs.getDailyCaseStatus().subscribe(
  response => {
   this.sortedDataBasedOnDate = response.data.history
   this.sortByMaxCases(this.sortedDataBasedOnDate)
// console.log(this.sortedDataBasedOnDate);
   this.calculateDiff(this.sortedDataBasedOnDate)
   this.statewisedata = this.sortedDataBasedOnDate[this.sortedDataBasedOnDate.length - 1].statewise
   this.statewisecase = this.sortedDataBasedOnDate[this.sortedDataBasedOnDate.length - 1].total
   //   console.log(this.statewisecase)
  },
  error => {
   console.log(error);
  }
 );
}

Получение информации о состоянии данных и расчет увеличения количества обращений со вчерашнего дня до сегодняшнего дня

getStateWise() {
  this.cs.getDataStateWise().subscribe(data => {
    this.lastrefreshedtime = data.data.lastRefreshed
    this.lastupdateddate = data.data.lastRefreshed
    // console.log(this.lastupdated)
function getDataDiff(startDate, endDate) {
     var diff = endDate.getTime() - startDate.getTime();
     var days = Math.floor(diff / (60 * 60 * 24 * 1000));
     var hours = Math.floor(diff / (60 * 60 * 1000)) - (days * 24);
     var minutes = Math.floor(diff / (60 * 1000)) - ((days * 24 * 60) + (hours * 60));
     var seconds = Math.floor(diff / 1000) - ((days * 24 * 60 * 60) + (hours * 60 * 60) + (minutes * 60));
     return {
      day: days,
      hour: hours,
      minute: minutes,
      second: seconds
     };
    }
this.lastupdated = getDataDiff(new Date(this.lastupdateddate), new Date(this.startdate));
},
   err => {
    console.log(err)
   })
 }

Сортировка данных в порядке возрастания и убывания

sortAscending(data) {
 this.resetArrows()
 this.isAscendingSort = !this.isAscendingSort;
 this.showArrows.uparrowState = !this.showArrows.uparrowState
data.forEach(item => item.statewise.sort(function(a, b) {
  if (a.state < b.state) {
   return -1;
  }
  if (a.state > b.state) {
   return 1;
  }
  return 0;
 }))
this.calculateDiff(this.sortedDataBasedOnDate)
}

Дополнительный код вы можете найти на Github - я дал ссылку на свой репозиторий в верхней части этой статьи.

Вывод:

Вот основные выводы этого проекта

• Работа с HTTP-запросом
• Работа с данными JSON (массивы и объекты)
• Сортировка числовых данных
• Сортировка типов данных
• Сортировка массивов строк и объектов
• Выполнение арифметических вычислений для типов объектов
• Вложенная таблица внутри шаблона
• Загрузка компонента динамически при нажатии
• Использование функции интервала для слайд-баннера
• Использование трубы фильтра даты в шаблоне
• Межкомпонентная коммуникация

Надеюсь, вам понравится этот проект. И, пожалуйста, проверьте мою живую ссылку на веб-сайт после публикации. Пожалуйста, просмотрите статистику и. Продолжайте учиться и используйте свое время. БЕЗОПАСНО.

Не стесняйтесь обращаться ко мне в случае любых вопросов.

Посетите мой репозиторий Github для того же.

Также читайте мой блог

Следуйте за мной и читайте мой блог в среде, ниже ссылка