Scribd
Upload
83 views25 pages

L44 - Hybrid Mobile 4

This document provides an overview and instructions for building a COVID-19 tracker mobile application using Ionic Framework. It outlines the key features to be implemented, including getting data from an external API, displaying it using lists and cards, validating a risk assessment form, and scheduling local notifications. It also includes code snippets for setting up the project structure, importing necessary plugins and modules, calling the API to retrieve data, and displaying the data on different pages.

Uploaded by

C-dawg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views25 pages

L44 - Hybrid Mobile 4

This document provides an overview and instructions for building a COVID-19 tracker mobile application using Ionic Framework. It outlines the key features to be implemented, including getting data from an external API, displaying it using lists and cards, validating a risk assessment form, and scheduling local notifications. It also includes code snippets for setting up the project structure, importing necessary plugins and modules, calling the API to retrieve data, and displaying the data on different pages.

Uploaded by

C-dawg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Hybrid Mobile

Putting it all together


COVID 19 Tracker

COS216
AVINASH SINGH
DEPARTMENT OF COMPUTER SCIENCE
UNIVERSITY OF PRETORIA
COVID 19 Tracker

 What we want to achieve:


 Getting data from an external API
 Process this data and use an ion-list to display
 Getting Flag images using variables
 Display a form using UI Components
 Validation
 Local Notifications
 Having Fun ☺
COVID 19 Tracker

 First off lets start with a template:


-> ionic start tabs
Then follow the prompts, we going to use Angular and Cordova not Capacitor
Let it install ☺
COVID 19 Tracker

 For the requirements let us add some native libraries, run the following commands:

ionic cordova plugin add cordova-plugin-advanced-http


npm install @ionic-native/http
ionic cordova plugin add cordova-plugin-local-notification
npm install @ionic-native/local-notifications
ionic cordova plugin add cordova-plugin-x-socialsharing
npm install @ionic-native/social-sharing
COVID 19 Tracker

 Now that we have installed the plugins we


need let’s start the emulator:
ionic cordova run android -l
COVID 19 Tracker tab1.page.ts

 Great! Now let us do the HTTP imports


 Let’s implement a function to getData()
 https://wheatley.cs.up.ac.za/api/data.json

getData() {

this.http.get('https://api.covid19api.com/summary', {}, {})


.then(data => {
if (data.status == 200) {
console.log(data.data); // data received by server
this.data = data.data;
}
})
.catch(error => {
this.presentToast("Failed to get data from API.");
});
}
COVID 19 Tracker tab1.page.ts

 Now let’s create a Toast

async presentToast(message : string) {


const toast = await this.toastController.create({
message: message,
duration: 2000
});
await toast.present();
}
{

COVID 19 Tracker
"Global": {
"NewConfirmed": 157653,
"TotalConfirmed": 6986967,
"NewDeaths": 4916,
"TotalDeaths": 407552,
"NewRecovered": 339641,
"TotalRecovered": 3085182
},
"Countries": [
{
"Country": "Afghanistan",
"CountryCode": "AF",
 The Data Snippet
"Slug": "afghanistan",
"NewConfirmed": 582,
"TotalConfirmed": 19551,
"NewDeaths": 18,
"TotalDeaths": 327,
"NewRecovered": 68,
"TotalRecovered": 1830,
"Date": "2020-06-07T09:36:23Z"
},
COVID 19 Tracker tab1.page.html

<ion-card>
<ion-card-header>
<ion-card-title>Summary Statistics</ion-card-title>
<ion-card-subtitle>Global Statistics</ion-card-subtitle>
</ion-card-header>
<ion-card-content *ngIf="data != undefined">
<ion-chip color="warning">
New Confirmed Cases:
<ion-label class="black"> {{ data['Global']['NewConfirmed'] }} </ion-label>
</ion-chip>
<ion-chip color="warning">
Total Confirmed Cases:
<ion-label class="black"> {{ data.Global.TotalConfirmed }} </ion-label>
</ion-chip>
…
</ion-card-content>
</ion-card>
COVID 19 Tracker tab1.page.html

 But that is to simple, we have the data for Countries let us do


something cool with it.
 For this we will use ngFor, ion-list, ion-item and avatars
 For the avatars we will use country flags ☺
COVID 19 Tracker tab1.page.html

<ion-title size="large">Countries</ion-title>
<ion-list>
<ion-item *ngFor="let d of data.Countries">
<ion-avatar slot="start">
<img src="https://www.countryflags.io/{{d.CountryCode}}/
flat/64.png">
</ion-avatar>
<ion-label>
<h2>{{ d.Country }}</h2>
<h3>New Cases: {{ d.NewConfirmed }}</h3>
<p>Total Deaths: {{ d.TotalDeaths }}</p>
</ion-label>
</ion-item>
</ion-list>
COVID 19 Tracker tab1.page.html

<ion-title size="large">Countries</ion-title>
<ion-list>
<ion-item *ngFor="let d of data.Countries">
<ion-avatar slot="start">
<img src="https://www.countryflags.io/{{d.CountryCod
e}}/flat/64.png">
</ion-avatar>
<ion-label>
<h2>{{ d.Country }}</h2>
<h3>New Cases: {{ d.NewConfirmed }}</h3>
<p>Total Deaths: {{ d.TotalDeaths }}</p>
</ion-label>
</ion-item>
</ion-list>
COVID 19 Tracker tab3.module.ts

 No let us implement the Risk Checker, this won’t have much functionality just some basic
form and some validation. For this we will use a module called ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms";


COVID 19 Tracker Tab3.page.ts

 Next import the following:

import { FormBuilder, FormGroup, Validators } from "@angular/forms";


COVID 19 Tracker Tab3.page.ts

 Create a variable:

myForm: FormGroup;
COVID 19 Tracker Tab3.page.ts

 Create Validators

constructor(public formBuilder: FormBuilder) {


this.myForm = formBuilder.group({
name: ["", Validators.compose([Validators.maxLength(30),Validators.pattern("[a-zA-Z ]*"),
Validators.required,
]),
],
surname: ["", Validators.compose([Validators.maxLength(30),Validators.pattern("[a-zA-Z ]*"),
Validators.required,
]),
],
gender: [Validators.compose([Validators.required])],
date: [Validators.compose([Validators.required])],
travel: [Validators.compose([Validators.required])],
contact: [Validators.compose([Validators.required])],
});
}
COVID 19 Tracker Tab3.page.html

<form [formGroup]="myForm">
<ion-list>
<ion-item>
<ion-label position="floating">Name: </ion-label>
<ion-
input [class.invalid]="!myForm.controls.name.valid" formControlName="name"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Surname: </ion-label>
<ion-
input [class.invalid]="!myForm.controls.surname.valid" formControlName="surname"></ion-
input>
</ion-item>
COVID 19 Tracker Tab3.page.html

<ion-radio-group formControlName="gender">
<ion-list-header>
<ion-label><b>Gender</b></ion-label>
</ion-list-header>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio slot="end" value="male"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio slot="end" value="female"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Other</ion-label>
<ion-radio slot="end" value="other"></ion-radio>
</ion-item>
</ion-radio-group>
COVID 19 Tracker Tab3.page.html

…
…
</ion-list>

</form>
<ion-button expand="full" (click)="detect()">Submit</ion-button>
COVID 19
Tracker
COVID 19 Tracker Tab3.page.ts

detect() {
if (this.myForm.valid) {
let risk = this.myForm.get("travel").value == "no" ? "GREEN" : "RED";
this.localNotifications.schedule({
id: 1,
text: "Risk Status: " + risk,
color: risk,
data: {},
});
this.presentActionSheet(risk);
} else console.log(this.myForm);
}
COVID 19 Tracker Tab3.page.ts

async presentActionSheet(risk) {
const actionSheet = await this.actionSheetController.create({
header: "Risk Status",
cssClass: risk,
buttons: [
{
text: risk,
role: "destructive",
cssClass: risk,
handler: () => {
console.log("clicked");
},
},
],
});
await actionSheet.present();
}
Ionic - Documentation

 https://ionicframework.com/docs/

You might also like