Angularda Api ile Günlük Covid19 Verileri Uygulaması

Ücretsiz olarak bulabileceğimiz apileri kullanan ve günümüz dünya gündemiyle de uygun olan bir uygulama yapacağız. Bu uygulama ile de bu apileri kullanmayı göreceğiz.

Covid19 Daily Report Application

Uygulama nasıl çalışır?

Bir tarih ve bir ülke bilgisi alıp bize o ülkedeki o gün olan vaka bilgilerini döner.

Uygulamanın tamamına github hesabımdan ulaşabilirsiniz.

Adım 1

Uygulamamızı oluşturuyoruz.

ng new ApplicationName

Adım 2

Bootstrap ve Fontawesome kütüphanelerini import ediyoruz.

npm i bootstrap jquery
npm install --save @fortawesome/fontawesome-free

Ben uygulama için bootstrap’ ın hazır templatelerinden biri olan Cover Template’ i kullanacağım. Link

angular.json
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Adım 3

ReactiveForm ve HttpClient için gerekli modülleri import ediyoruz.

app.module.ts
    
imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  HttpClientModule
]

Adım 4 (Reactive Form’ u oluşturma)

import { DatePipe } from '@angular/common';
providers: [DatePipe]
today : string;
ngOnInit() {
  var dateObj = new Date();
  this.today = this.datePipe.transform(dateObj, 'yyyy-MM-dd');
}
createForm() {
  this.virusForm = this.fb.group({
    date: [this.today, [Validators.required, Validators.pattern('[0-9]{4}-[0-9]{2}-[0-9]{2}')]],
    country: ['TR', [Validators.required]]
  });
}

Angular’ ın DatePipe classını kullanarak bugün verisini yyyy-MM-dd formatında formda tarih’ in başlangıç değeri ve max değeri olarak atıyorum ki kullanıcı girdiğinde textbox direkt bugün bilgisi ile dolsun ve ileri bir tarih seçemesin.

Ülke* bilgisi için de varsayılan değer olarak Türkiye atıyorum.

Ülke Listesini birazdan apiden verileri alırken göreceğiz.

<form [formGroup]="virusForm" class="needs-validation" (ngSubmit)="submit()">
  <div class="form-group">
    <input formControlName="date" type="date" name="bday" [max]="today" min="2020-01-01" class="form-control"/>
  </div>
  <div class="form-group">
    <select formControlName="country" class="form-control" id="sel1">
      <option *ngFor="let country of countries" [innerText]="country?.name" [value]="country?.alpha2code">
      </option>
    </select>
  </div>
  <button type="submit" [disabled]="virusForm.invalid" class="btn btn-primary btn-md btn-block">
    Submit
  </button>
</form>

API

Adım 5

Ücretsiz apileri kullanmak için birçok alternatif var. Ben rapidapi.com’ u kullanıyorum. Eğer üyeliğiniz yoksa kolayca üye olabilirsiniz.

Giriş yaptıktan sonra kullanacağımız apiye abone oluyoruz ve bize verdiği keyi bir yere not ediyoruz. Kullanacağımız api : https://rapidapi.com/Gramzivi/api/covid-19-data

rapidapi.com

Linke tıkladığınızda yalnızca key hariç görseldekinin aynısı bir pencere göreceksiniz. Burdaki bilgilerde header olarak hangi bilgileri göndereceğinizi, opsiyonel veya zorunlu parametrelerin neler olduğu bilgileri ve örnek kod parçacığı yer almaktadır.

Adım 6 (Apiden verileri alma)

rapidapi.com’ daki bilgilerle aşağıdaki gibi header’ ı oluşturuyoruz.

requestOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Access-Control-Allow-Headers': 'Content-Type',
    'x-rapidapi-host': 'covid-19-data.p.rapidapi.com',
    'x-rapidapi-key': 'RAPIDAPISECRETKEY'
  }),
};
path: string = 'https://covid-19-data.p.rapidapi.com/';
countries: any[];

Şimdi de ülke listesini alacağımız metotumuzu yazıyoruz.

async getCountries() {
  const url: string = this.path + 'help/countries';
  this.countries = await this.http.get(url, this.requestOptions).toPromise() as any[];
}

countries verilerini de Adım 5' teki select list’ te bind ediyoruz.

Adım 7

Son olarak ülkelerdeki günlük vaka sayılarını alacağımız metotu yazıyoruz.

path: string = 'https://covid-19-data.p.rapidapi.com/';
response: any;
virusForm: FormGroup;
isSubmitted: boolean = false;
date: string;
get f() { return this.virusForm.controls }
async submit() {
  const date: string = this.f.date.value;
  const sDate: string[] = date.split('-');
  this.date = sDate[2] + '/' + sDate[1];
  const code: string = this.f.country.value;
  await this.getDailyReportByCountryCode(code, date);
  this.isSubmitted = true;
}
async getDailyReportByCountryCode(code: string, date: string) {
  const url: string = this.path + 'report/country/code?dateformat=YYYY-MM-DD&date=' + date + '&code=' + code;
  this.response = await this.http.get(url, this.requestOptions).toPromise();
}

Özet

Bu uygulama ile

• Açık apileri nasıl kullanılacağınız ve bir angular uygulamaya nasıl dahil edileceğini
• DatePipe ile tarih formatlamanın nasıl yapılacağını
• ReactiveForm’ da tarih box’ ı nasıl kullanacağına

değinmiş olduk

Kaynaklar

Angular 7 Register Form With Reactive Form