دروس الزاوي – إنشاء تطبيق تتبع كوفيد 19




مرحبا قابلني مرة أخرى في andeznet.com, لقد مر وقت طويل لم أكتب برنامجًا تعليميًا بعد الآن ، وأخيراً سأقوم هذه المرة بعمل برنامج تعليمي للزاوية. بالنسبة لأولئك الذين لا يعرفون الزاوي وكيفية تثبيته ، يمكنك التحقق من جوجل, لأنني هنا لن أشرح بعد الآن عن الزاوي وكيفية تثبيته.

قبل البدء في العمل على التطبيقتتبع هذا مع الزاوي, يجب علينا تحليل البيانات التي سيتم استخدامها بحيث تكون صحيحة حقًا ولا تسبب خدعًا في المجتمع. المصدر الذي سنستخدمه هو الموقعكوالكوفيد 19 كمرجع لنشر البيانات في إندونيسيا.

حسنًا ، دعنا فقط ننشئ مشروعًا زاويًا جديدًا بكتابة مثل أدناه.

ng new angularcovid

عند الانتهاء نذهب إلى الدليل الذي تم إنشاؤه عن طريق الكتابة الصحيحة الزاوي cd, ثم اكتب مثل أدناه.

npm install

عند الانتهاء ، افتح المشروع الزاوي باستخدام Visual Code Studio أو برامج التحرير الأخرى, ثم الخطوة التالية سنقوم بإنشاء خدمة لاسترداد البيانات إلى الموقعكوالكوفيد 19 بكتابة الأمر أدناه.

ng generate service api/covid19

ثم افتح الملف في دليل angulargw / src / api / covid19.service.ts, بعد الفتح ، اتبع البرنامج النصي أدناه.

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
  }
}

عند الانتهاء ، ندخل HttpClientModule في app.module.ts, مثل المثال أدناه

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 { }

بعد إدخال HttpClientModule الآن نفتح ملف app.component.ts وأدخل البرنامج النصي على النحو التالي .

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'];
    })  


   
  }

}

عند الانتهاء سنقوم بإنشاء html مثل المثال أدناه .

<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>

حسنًا ، تم, الخطوة الأخيرة التي سنقوم بتنفيذها عن طريق كتابة الأمر ng serve ثم تظهر النتائج كما هو موضح أدناه.

حسنًا ، اجعلها سهلة ? ههههه

لهذا البرنامج التعليمي ، فقط انقر هنا, في المستقبل سأقوم بعمل برنامج تعليمي آخر حول الزاوية / أيوني, هذا كل شئ وشكرا.

للعرض التوضيحي ، يمكنك زيارة https://project-andez.web.app/

يمكن تنزيل النص الكامل https://gitlab.com/andeztea/angularcovid

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *