Сегодня пандемия сделала жизнь всех невыносимой. Все пытаются добыть средства к существованию и остаться в живых. В связи с этим мы пытаемся разработать трекер с использованием технологии, где 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. Это обучение поможет вам лучше понять его.