Toast obavijesti su kratke poruke koje se obično nalaze na dnu ekrana mobitela i koriste se kako bi korisnicima pružili kratke i brze informacije o onome što se trenutno događa u mobilnoj aplikaciji.
U ovom primjeru iskoristit ćemo ih kako bi korisnicima prikazali obavijest da je aplikacija izgubila vezu s internetom prilikom osvježavanja podataka (pull to refresh). Znači, kada korisnik povuče ekran aplikacije prema dolje mogu se dogoditi dvije stvari:
– kada ima interneta podaci se vuku sa vanjskog API-ja i prikazuju u aplikaciji
– kada nema interneta prikazuje se Toast obavijest kako bi korisnici znali zašto nema, novih, podataka u aplikaciji
Instalacija Toast plugina
Pod uvjetom da imamo pokrenut Ionic 2 projekt možemo pristupiti procesu instalacije Toast plugina pomoću naredbe
|
1 |
$ ionic plugin add cordova-plugin-x-toast |
Dodavanje Toast plugina u Ionic 2 komponentu
Toast plugin u željenu komponentu dodajemo na vrlo jednostavan način, kao i sve ostale Ionice Native pluginove.
Dovoljno je na vrhu .ts datoteke uvesti željeni plugin koristeći
|
1 |
import { Toast } from 'ionic-native'; |
I to je sve. Već sada možemo koristiti Toast obavijesti.
|
1 2 3 4 5 |
Toast.show("No network connection!", '1000', 'bottom').subscribe( toast => { console.log(toast); } ); |
Praktična primjena
Imamo funkciju napraviRefresh koja se pokreće kada korisnik povuče ekran aplikacije prema dolje.
|
1 2 3 4 5 6 |
<ion-refresher (ionRefresh)="napraviRefresh($event)"> <ion-refresher-content refreshingSpinner="circles" refreshingText="Refreshing..."> </ion-refresher-content> </ion-refresher> |
U tom se trenutku provjerava povezanost s mrežom. Ako veza s mrežom postoji prikazuju se podaci, a ako veza ne postoji prikazuje se Toast obavijest.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import { Component } from '@angular/core'; import { NetworkService } from '../../providers/network-service'; import { Toast } from 'ionic-native'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class Home { poruka:string; constructor(public _networkService: NetworkService) { } napraviRefresh(refresher){ setTimeout(() => { if(this._networkService.isOnline()){ //Ako ima interneta prikaži podatke s API-ja this.poruka = "Ovo je primjer podatka koji se prikaže s API-ja kada ima interneta!"; } else { //Ako nema interneta prikaži Toast obavijest this.poruka = "..."; Toast.show("No network connection!", '1000', 'bottom').subscribe( toast => { console.log(toast); } ); } refresher.complete(); }, 1000); } } |
Ovako to izgleda na klijentskoj strani:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Ionic Toast obavijesti</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-refresher (ionRefresh)="napraviRefresh($event)"> <ion-refresher-content refreshingSpinner="circles" refreshingText="Refreshing..."> </ion-refresher-content> </ion-refresher> <p>-> {{poruka}}</p> </ion-content> |
Na lijevoj slici nema Toast obavijesti jer postoji povezanost s mrežom i podaci se prikazuju, dok na desnoj slici vidimo Toast obavijest jer nema povezanosti s mrežom.
Zaključak
Danas je teško zamisliti aplikaciju koja nema ove dvije funkcionalnosti ili barem jednu od njih. Toast obavijesti odličan su način informiranja korisnika aplikacije bez da zahtijevaju bilo kakvu radnju od strane korisnika.