Как создать простой трекер COVID-19 с помощью Angular 10?

Сегодня пандемия сделала жизнь всех невыносимой. Все пытаются добыть средства к существованию и остаться в живых. В связи с этим мы пытаемся разработать трекер с использованием технологии, где Angular 10 станет полезным.

Существует приложение, используемое для отслеживания сведений о пациентах по странам, а другое приложение предназначено для отслеживания сведений о пациентах по штатам и районам Индии. Используя это приложение, мы будем отслеживать данные о состоянии пациента на конкретную дату. Кроме того, мы попытаемся отобразить карту Индии, где пользователь может щелкнуть любой штат и получить сведения о пациенте в этом конкретном штате.

Мы также предоставим здесь список со всеми именами штатов в виде раскрывающегося списка. Более того, любой пользователь может выбрать любое состояние и легко получить данные об этом конкретном состоянии. Здесь мы используем бесплатный общедоступный API, полученный с веб-сайта Covid19India, для данных и Angular 10 в качестве средства создания трекеров.

Чтобы узнать больше о функциях AngularJS, вы можете записаться на демоверсию в разделе Онлайн-обучение Angularjs.

Создание приложения Angular 10 с помощью Angular CLI

Для создания простого и очень полезного трекера нужны хорошие коды и приложения. Здесь мы можем создать новое приложение Angular, используя Angular CLI, используя следующую команду.

новый covid19индийский трекер

После создания нового приложения и узловых модулей у нас есть возможность добавить материальный дизайн в приложение с помощью следующей команды.

добавить @angular/материал

Кроме того, мы можем выбрать тему по умолчанию и другие параметры по умолчанию для дизайна материалов в рамках этой разработки трекера.

Нам также нужен пакет начальной загрузки для создания стилей в нашем приложении вместе с угловым материалом. Приведенная ниже команда полезна для установки последнего пакета начальной загрузки.

npm установить бутстрап

После установки пакета мы также можем открыть приложение в Visual Studio Code.

Позже нам придется импортировать ссылки для модулей HttpClientModule, MatCardModule и MatSelectModule в app.module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatCardModule } from '@angular/material/card';
import { MatSelectModule } from '@angular/material/select';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
MatCardModule,
MatSelectModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Создать службу данных

Теперь мы создадим службу данных для отображения данных из приложения Covid-19 API.

Поднимите свою карьеру на новый уровень успеха с Angular Training

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
private url: string = "https://api.covid19api.com/summary";
getData(): Observable<any> {
return this.http.get(this.url)
.pipe((response) => response);
}
}

Изображение выше — пример ответа от метода API. Он состоит из двух частей, таких как глобальная сводка и сводка по странам. Кроме того, это данные по всей стране.

Кроме того, мы можем создать дополнительные классы моделей в файле model.ts.

Получите дополнительную информацию здесь Сертификация Angular

model.ts

export class SummaryData {
Global: GlobalData;
Countries: Array<CountryData>;
Date: Date;
}
export class GlobalData {
NewConfirmed: number;
NewDeaths: number;
NewRecovered: number;
TotalConfirmed: number;
TotalDeaths: number;
TotalRecovered: number
}
export class CountryData extends GlobalData {
Country: string;
CountryCode: string;
Date: Date;
Slug: string
}

Теперь мы разработали три класса моделей: SummaryData, CountryData и GlobalData.

Кроме того, мы можем изменить файл app.component.ts с помощью приведенного ниже кода.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SummaryData, CountryData } from './models';
import { DataService } from './data.service';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [DatePipe]
})
export class AppComponent implements OnInit {
title = 'covid19-tracker';
summaryData: SummaryData;
indiaData: CountryData;
selectedCountryData: CountryData;
highlyConfirmedData: Array<CountryData>;
highlyDeathData: Array<CountryData>;
highlyRecoveredData: Array<CountryData>;
currentDate: string;
constructor(private service: DataService, private datePipe: DatePipe) { }
ngOnInit() {
let date = new Date();
this.currentDate = this.datePipe.transform(date,'dd-MMM-yyyy');
this.getAllData();
}
getAllData() {
this.service.getData().subscribe(
response => {
this.summaryData = response;
this.getIndiaData();
this.getSortedData();
}
)
}
getIndiaData() {
this.indiaData = this.summaryData.Countries.find(x => x.Slug == "india");
}
getSortedData() {
let data = JSON.parse(JSON.stringify(this.summaryData.Countries));
this.highlyConfirmedData = data.sort((a, b) => b.TotalConfirmed - a.TotalConfirmed).slice(0, 10);
this.highlyDeathData = data.sort((a, b) => b.TotalDeaths - a.TotalDeaths).slice(0, 10);
this.highlyRecoveredData = data.sort((a, b) => b.TotalRecovered - a.TotalRecovered).slice(0, 10);
}
}

Таким образом, мы отобразили глобальные сводные данные из различных служб данных и заполнили другие данные для нашего приложения. Здесь мы использовали очень простую логику в этом отношении.

Мы можем изменить файл app.component.html с помощью приведенного ниже кода.

app.component.html

<div style="width: 1200px;">
<div class="same-row" style="width: 550px;">
<img src="../assets/CovidTracker.PNG">
</div>
<div class="same-row" style="font-weight: bold;">
As on : {{currentDate}}
</div>
<div class="same-row">
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Choose a Country</mat-label>
<mat-select [(value)]="selectedCountryData">
<mat-option *ngFor="let country of summaryData?.Countries" [value]="country">{{country.Country}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div>
<div class="same-row">
<mat-card class="covid-card">
<mat-card-header>
<div mat-card-avatar>
<img
src="https://www.sanlam.co.uk/web/media/media/vectors%2018/globe_light_blue_rgb.png?width=32&height=32&mode=crop">
</div>
<mat-card-title>Global Summary</mat-card-title>
<mat-card-subtitle>Total Countries</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table>
<tr>
<td>
New Recovered
</td>
<td>
{{summaryData?.Global?.NewRecovered | number}}
</td>
</tr>
<tr>
<td>
Total Recovered
</td>
<td>
{{summaryData?.Global?.TotalRecovered | number}}
</td>
</tr>
<tr>
<td>
New Confirmed
</td>
<td>
{{summaryData?.Global?.NewConfirmed | number}}
</td>
</tr>
<tr>
<td>
Total Confirmed
</td>
<td>
{{summaryData?.Global?.TotalConfirmed | number}}
</td>
</tr>
<tr>
<td>
New Deaths
</td>
<td>
{{summaryData?.Global?.NewDeaths | number}}
</td>
</tr>
<tr>
<td>
Total Deaths
</td>
<td>
{{summaryData?.Global?.TotalDeaths | number}}
</td>
</tr>
</table>
</mat-card-content>
</mat-card>
</div>
<div class="same-row">
<mat-card class="covid-card">
<mat-card-header>
<div mat-card-avatar>
<img src="https://www.countryflags.io/IN/shiny/32.png">
</div>
<mat-card-title>Country Summary</mat-card-title>
<mat-card-subtitle>India</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table>
<tr>
<td>
New Recovered
</td>
<td>
{{indiaData?.NewRecovered | number}}
</td>
</tr>
<tr>
<td>
Total Recovered
</td>
<td>
{{indiaData?.TotalRecovered | number}}
</td>
</tr>
<tr>
<td>
New Confirmed
</td>
<td>
{{indiaData?.NewConfirmed | number}}
</td>
</tr>
<tr>
<td>
Total Confirmed
</td>
<td>
{{indiaData?.TotalConfirmed | number}}
</td>
</tr>
<tr>
<td>
New Deaths
</td>
<td>
{{indiaData?.NewDeaths | number}}
</td>
</tr>
<tr>
<td>
Total Deaths
</td>
<td>
{{indiaData?.TotalDeaths | number}}
</td>
</tr>
</table>
</mat-card-content>
</mat-card>
</div>
<div class="same-row" *ngIf="selectedCountryData!=undefined">
<mat-card class="covid-card">
<mat-card-header>
<div mat-card-avatar>
<img src="https://www.countryflags.io/{{selectedCountryData.CountryCode}}/shiny/32.png">
</div>
<mat-card-title>Country Summary</mat-card-title>
<mat-card-subtitle>{{selectedCountryData.Country}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table>
<tr>
<td>
New Recovered
</td>
<td>
{{selectedCountryData?.NewRecovered | number}}
</td>
</tr>
<tr>
<td>
Total Recovered
</td>
<td>
{{selectedCountryData?.TotalRecovered | number}}
</td>
</tr>
<tr>
<td>
New Confirmed
</td>
<td>
{{selectedCountryData?.NewConfirmed | number}}
</td>
</tr>
<tr>
<td>
Total Confirmed
</td>
<td>
{{selectedCountryData?.TotalConfirmed | number}}
</td>
</tr>
<tr>
<td>
New Deaths
</td>
<td>
{{selectedCountryData?.NewDeaths | number}}
</td>
</tr>
<tr>
<td>
Total Deaths
</td>
<td>
{{selectedCountryData?.TotalDeaths | number}}
</td>
</tr>
</table>
</mat-card-content>
</mat-card>
</div>
</div>
<div>
<div class="same-row table-data">
<p style="font-weight: bold; color: darkgreen; font-size: large;">Highest Recovered Cases</p>
<table>
<tr>
<td style="font-weight: bold;">
Sl.No.
</td>
<td style="font-weight: bold;">
Country
</td>
<td style="font-weight: bold;">
Total Recovered
</td>
</tr>
<tr *ngFor="let country of highlyRecoveredData; let i=index">
<td>
{{i+1}}
</td>
<td>
{{country.Country}}
</td>
<td>
{{country.TotalRecovered | number}}
</td>
</tr>
</table>
</div>
<div class="same-row table-data">
<p style="font-weight: bold; color:gray; font-size: large;">Highest Confirmed Cases</p>
<table>
<tr>
<td style="font-weight: bold;">
Sl.No.
</td>
<td style="font-weight: bold;">
Country
</td>
<td style="font-weight: bold;">
Total Confirmed
</td>
</tr>
<tr *ngFor="let country of highlyConfirmedData; let i=index">
<td>
{{i+1}}
</td>
<td>
{{country.Country}}
</td>
<td>
{{country.TotalConfirmed | number}}
</td>
</tr>
</table>
</div>
<div class="same-row table-data">
<p style="font-weight: bold; color: indianred; font-size: large;">Highest Death Cases</p>
<table>
<tr>
<td style="font-weight: bold;">
Sl.No.
</td>
<td style="font-weight: bold;">
Country
</td>
<td style="font-weight: bold;">
Total Deaths
</td>
</tr>
<tr *ngFor="let country of highlyDeathData; let i=index">
<td>
{{i+1}}
</td>
<td>
{{country.Country}}
</td>
<td>
{{country.TotalDeaths | number}}
</td>
</tr>
</table>
</div>
</div>

В приведенном выше коде мы использовали компоненты выбора материала Angular для отображения названия страны. Мы также использовали карточку материала для визуализации всех данных Covid-19. Кроме того, мы использовали некоторые встроенные стили в файле HTML, но это не рекомендуется. Эти коды можно легко очистить, так как эти встроенные стили не очень эффективны в этом отношении.

Здесь мы можем добавить несколько файлов классов CSS в файл app.component.css.

app.component.css

.covid-card {
max-width: 350px;
}
.same-row {
display: inline-block;
padding: 10px;
}
.table-data {
padding: 10px;
margin: 10px;
}
table {
padding: 10px;
width: 300px;
border: 1px solid gray;
background-color: honeydew;
}
tr {
margin: 10px;
padding: 10px;
}
td {
height: 30px;
vertical-align: center;
border: 1px dotted gray;
}

Наконец, мы успешно создали наше приложение для отслеживания Covid-19 с использованием Angular 10. Теперь мы запустим приложение и проверим вывод:

Таким образом, мы представили сводку по странам мира и Индии, а также десятку самых высоких выздоровевших, подтвержденных и смертельных случаев выше.

Заключение

Таким образом, приведенные выше детали объясняют, как спроектировать простой трекер Covid-19 с использованием Angular 10. Логично предположить, как болезнь распространилась по всему миру. Детали дают сводку данных, полученных из частей света. Чтобы узнать больше о технологических достижениях в отслеживании заболеваний, можно выбрать Онлайн-обучение Angular. Это обучение поможет вам лучше понять его.