Tutorial Angular – Membuat Aplikasi Tracking Covid 19

Hai ketemu lagi bersama saya di andeznet.com, sudah sekian lama tidak menulis tutorial lagi akhir nya kali ini saya akan membuat tutorial untuk angular. Bagi yang belum tau tentang angular dan cara install nya bisa cek di google, karena disini saya tidak akan menjelaskan lagi tentang angular dan cara install nya.

Sebelum memulai mengerjakan aplikasi tracking ini dengan angular, kita harus menganalisis data yang akan digunakan agar benar-benar valid dan tidak menimbulkan hoax di tengah masyarakat. Adapun sumber yang akan kita gunakan adalah site kawalcovid19 sebagai acuan untuk data penyebaran di Indonesia.

Ok langsung saja kita akan membuat project baru angular dengan mengetik seperti dibawah ini.

ng new angularcovid

Setelah selesai kita masuk ke direktori yang sudah di buat dengan mengetikan kan cd angularcovid, lalu ketikan seperti dibawah ini.

npm install

Setalah selesai buka project angular dengan Visual Code Studio atau editor lainya, maka langkah selanjutnya kita akan membuat service untuk mengambil data ke site kawalcovid19 dengan mengetikan perintah dibawah ini.

ng generate service api/covid19

Lalu buka file nya di direktori angulargw/src/api/covid19.service.ts, setelah di buka maka ikuti script dibawah ini.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class Covid19Service {

  constructor(private http: HttpClient) { }

  getIndonesia(){
    return this.http.get('https://kawalcovid19.harippe.id/api/summary');
//untuk mengambil data ke site kawalcovid19
  }
}

Setelah selesai maka kita masukan HttpClientModule ke dalam app.module.ts, seperti contoh dibawah inil

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    BrowserAnimationsModule,
    MatSliderModule,
    HttpClientModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Setelah memasukan HttpClientModule sekarang kita buka file app.component.ts dan masukan script seperti dibawah ini .

import { Component } from '@angular/core';
import {Covid19Service} from '../app/api/covid19.service';//Ambil service yang tadi kita buat


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'angulargw';
  confirmed: any;
  activeCare: any;
  deaths: any;
  recovered: any;
  metadata: any;

  constructor(public covid19: Covid19Service,){
    this.showIndonesia();//pangil fungsi nya

  }
  //untuk mengambil data ke service 
  showIndonesia() {
    this.covid19.getIndonesia().subscribe((data: any[])=>{
      this.confirmed=data['confirmed'].value;
      this.activeCare=data['activeCare'].value;
      this.recovered=data['recovered'].value;
      this.deaths=data['deaths'].value;
      this.metadata=data['metadata']['lastUpdatedAt'];
    })  


   
  }

}

Setelah selesai kita akan membuat html nya seperti contoh dibawah ini .

<h2>Laporan</h2>
  <p>Jumlah Kasus di Indonesia </p>

  <div class="card-container">
    <a class="card" target="_blank" rel="noopener" href="#">
      <span style="text-align: center;">Terkonfirmasi <br> <b style="font-size:x-large;">{{confirmed | number}}</b></span>
    </a>

    <a class="card" target="_blank" rel="noopener" href="#">
      <span style="text-align: center;">Dalam Pengawasan <br> <b style="font-size:x-large;">{{activeCare | number}}</b></span>
    </a>

    <a class="card" target="_blank" rel="noopener" href="#">
      <span style="text-align: center;">Sembuh<br> <b style="font-size:x-large;">{{recovered | number}}</b></span>
    </a>

    <a class="card" target="_blank" rel="noopener" href="#">
      <span style="text-align: center;">Meninggal<br> <b style="font-size:x-large;">{{deaths | number}}</b></span>
    </a>

  </div>

Ok selesai, langkah terakhir kita akan jalankan dengan mengetikan perintah ng serve maka hasil nya seperti gambar dibawah ini.

Ok Mudahkan ? hehehe

Untuk tutorial kali ini cukup disini aja, kedepannya saya akan membuat tutorial lagi tentang angular / ionic, cukup sekian dan terima kasih.

Untuk demo bisa kunjungi https://project-andez.web.app/

Script lengkap bisa di download https://gitlab.com/andeztea/angularcovid