Ionic 2 – Toast obavijesti

Ionic 2 – Toast obavijesti

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

Instalacija Toast plugina

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

I to je sve. Već sada možemo koristiti Toast obavijesti.

Praktična primjena

Imamo funkciju napraviRefresh koja se pokreće kada korisnik povuče ekran aplikacije prema dolje.

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.

Ovako to izgleda na klijentskoj strani:

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.

Ionic 2 Toast obavijest

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.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *