Jedna od osnovnih funkcionalnosti koju volim vidjeti u mobilnim aplikacijama je mogućnost rada izvan mreže (offline) tj. kada mobilni uređaj nije povezan s internetom.
Pretpostavimo da aplikacija ima nekakvu formu za unos koju je potrebno ispuniti i da se klikom na gumb ‘Pošalji podatke’ ništa ne događa. Možda tek eventualno bude nekakva poruka da trenutno nema mrežne povezanosti i zato nije moguće spremiti unesene podatke. Najgora stvar koja se onda može dogoditi je da aplikacija ne zapamti unesene podatke i da ih korisnik kasnije mora ponovno upisivati.
U ovom ću blog postu obraditi scenarij mobilne aplikacija koja ima nekakvu formu za unos koju je moguće ispuniti i spremiti podatke neovisno i povezanosti s internetom. Korisniku je najbitnije da ne mora više puta unositi podatke ili razmišljati zašto ih nije u mogućnosti spremiti.
Provjera povezanosti s mrežom
O ovoj sam temi također objavio blog post. Prije svega moram nekako dobiti informaciju postoji li povezanost s internetom ili ne. U slučaju Ionica to se saznaje koristeći Ionic Native Network plugin.
Napravim servis npr. network-service.ts kojemu će jedina i osnovna svrha biti provjera povezanosti s internetom. Dalje, na svakoj stranici mobilne aplikacije pozivam taj servis ili prilikom klika na gumb ‘Pošalji podatke’ i ako dobijem informaciju da nema povezanosti s internetom automatski znam da nešto drugo s tim podacima trebam učiniti, a to je – spremiti ih u lokalnu bazu podataka.
|
1 2 3 4 5 6 7 8 9 |
provjeraInterneta(){ if(this._networkService.isOnline()){ console.log('Ima interneta!'); //Odmah šalji podatke na API }else{ console.log('Nema interneta!'); //Spremi podatke u SQLite bazu } } |
Spremanje podataka u lokalnu SQLite bazu
O ovoj sam temi također objavio blog post. Kada sam u prethodnom koraku dobio informaciju da ne postoji povezanost s internetom odlučujem se na spremanje podataka lokalno na mobilni uređaj. Kako bi to mogao učiniti moram prvo kreirati lokalnu bazu podataka, a to činim koristeći Ionic Native SQLite plugin.
Najbolje je opet napraviti poseban servis, npr. database-service.ts, koji će služiti za sve radnje (kreiranje baze, kreiranje tablica, spremanje, prikaz i brisanje podataka) povezane sa SQLite bazom.
Klikom na gumb ‘Pošalji podatke’ sada se događa sljedeće. U SQLite tablicu mojaLokalnaTablica spremam podatke unesene u formu. Podaci su u obliku objekta this.podaciIzForme.
|
1 2 3 4 5 6 7 8 9 |
provjeraInterneta(){ if(this._networkService.isOnline()){ console.log('Ima interneta!'); //Odmah šalji podatke na API }else{ console.log('Nema interneta!'); this._database.mojaLokalnaTablica(this.podaciIzForme); } } |
Na ovaj način korisnik može bez problema unositi podatke neovisno o povezanosti s internetom jer će se svi podaci spremiti u lokalnu SQLite bazu podataka koja se nalazi na mobilnom uređaju.
Korisno je dati korisniku i nekakvu obavijest o ne postojanju povezanosti s internetom čisto iz razloga ako se odluči npr. otići na računalo i u nekakvoj web aplikaciji provjeriti podatke koje je maloprije poslao, da se ne iznenadi ako ih u tom trenutku ne vidi. Bitno je da su podaci spremljeni i da će biti poslani čim se ostvari povezanost s internetom.
Automatsko slanje podataka / sinkronizacija
Sada dolazim do dijela koji je u ovoj priči najvažniji. Znači, korisnik je bez problema koristio mobilnu aplikaciju i nekoliko puta unosio različite podatke u formu za unos i svi ti podaci su privremeno spremljeni u lokalnu SQLite bazu podataka.
U ovom je koraku ključno prepoznati trenutak kada se ponovno uspostavi povezanost s internetom i sve ranije spremljene podatke poslati na API te istovremeno isprazniti lokalnu bazu podataka.
Na početnoj stranici mobilne aplikacije mogu pozvati funkciju provjeraInterneta() koja će svaki put kada se dođe na početnu stranicu provjeravati postoji li povezanost s internetom i ako postoji odmah će poslati sve lokalne podatke te isprazniti lokalnu bazu.
|
1 2 3 4 5 6 7 8 |
provjeraInterneta(){ if(this._networkService.isOnline()){ console.log('Ima interneta!'); this.posaljiLokalnePodatke(); }else{ console.log('Ne šaljem podatke! Nema interneta!'); } } |
Sada na početnoj stranici radim sljedeće. Pozivam servis koji provjerava povezanost s internetom. Ako postoji veza s internetom pozivam funkciju posaljiLokalnePodatke(). Ta funkcija dohvaća niz (array) svih objekata koji su spremljeni u lokalnu SQLite bazu i šaljem ih na API. Kada stigne odgovor od API-ja da su podaci uspješno primljeni krećem s brisanjem lokalne baze podataka this._database.isprazniLokalnuTablicu().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
posaljiLokalnePodatke(){ this._database.getOfflineTable().then((result) => { this.mojaLokalnaTablicaNiz = <Array<Object>> result; if(this.mojaLokalnaTablica.length != 0){ for(var i = 0; i < this.mojaLokalnaTablica.length; i++){ this._api.posaljiPodatke(this.mojaLokalnaTablica[i]).subscribe(res => { if(res.status == true){ this._database.isprazniLokalnuTablicu(); } }); }} }, (error) => { console.log("ERROR: ", error); }); } |
Zaključak
Ovo je pojednostavljeni primjer kako korisnicima mobilne aplikacije omogućiti da unose podatke i onda kada ne postoji povezanost s internetom.
