Ionic 4 CRUD aplikacija

U ovom ćemo blog postu napraviti jednostavnu Ionic 4 mobilnu aplikaciju koja će se sastojati od forme za unos, uređivanje, pregled i brisanje podataka tzv. CRUD aplikaciju.

Ovaj blog post će posebno biti zanimljiv za sve one koji tek žele postati developeri.

VAŽNO! Kako bi aplikacija mogla prikazivati, spremati, uređivati i brisati podatke potrebno je kreirati backend servis koristeći JSON Server.

Nekoliko je faza potrebno proći kako bi se došlo do funkcionalne Ionic 4 CRUD aplikacije, a to su:

  • Instalirati NPM: $ npm install npm@latest -g
  • Instalirati Ionic: $ npm install -g ionic
  • kreiranje projekta
  • kreiranje potrebnih ekrana (postavljanje formi za unos i uređivanje, postavljanje tablice za pregled popisa)
  • kreiranje servisa za pozivanje vanjskih API-ja

Na kraju ćemo aplikaciju koristiti unutar web preglednika, u ovom slučaju to je Google Chrome, kroz Chrome DevTools.

Kreiranje Ionic 4 projekta

Prije nego kreiramo novi Ionic 4 projekt potvrdit ćemo da imamo instaliranu najnoviju verziju Ionic CLI-a, a to je u ovom trenutku 4.10.2.

Projekt kreiramo naredbom:

Iako u ovom primjeru koristimo blank predložak postoje još sidemenu i tabs, ali njima se trenutno nećemo baviti jer kreiraju više komponenti koje nam za izradu ovog primjera nisu bitne.

Nakon što je projekt uspješno kreiran možemo ga pokrenuti tj. vidjeti u web pregledniku na adresi http://localhost:8100/home, a to radimo naredbom:


Kreiranje ekrana za upravljanje podacima

Umjesto trenutnog sadržaja datoteke home.page.html

 

dodajemo sljedeće:

Ekran sada izgleda ovako:

Kreiranje API servisa

Prije nego napravimo funkcionalni dio aplikacije koji će obavljati dodavanje, uređivanje, prikaz i brisanje podataka potrebno je kreirati servis zadužen za svu logiku vezanu uz korištenje vanjskih resursa. Za potrebe ovog primjera koristiti ćemo JSON Server.


Nakon kreiranja ovog servisa unutar datoteke api.service.ts može se vidjeti sljedeće:

Servis se može koristiti za različite svrhe, ali kako će ovdje glavna svrha biti slanje upita na vanjski API znači da obavezno trebamo koristiti HttpClient i također ga trebamo dodati unutar app.module.ts datoteke.

Konačan izgled servisa može se vidjeti u nastavku, a njime je pokriveno sve – od pregleda svih osoba, dodavanja novih, uređivanja i brisanja postojećih.

Funkcionalnost

Nakon uspješnog kreiranja izgleda ekrana i API servisa možemo sve to povezati kako bi naša Ionic 4 aplikacija “oživila”.

Na vrhu HomePage  komponente prvo trebamo definirati naš ranije kreiran API servis.

Dodavanje (POST)

Funkcija za dodavanje nove osobe izgleda ovako:

U gornjem primjeru nova osoba će biti kreirana i poslana na API. Međutim, nakon toga je potrebno osvježiti popis osoba na ekranu tako da odmah imamo povratnu informaciju o ne/uspješnom kreiranju nove osobe.

Imamo dvije mogućnosti prilikom osvježavanja podataka u tablici za prikaz osoba. Možemo odmah poznati API koji će nam dovući popis svih osoba i tako osvježiti tablicu

ili možemo “ručno” dodati novi podatak u postojeći niz i na taj način ne pozivati API koji dohvaća popis svih osoba.

Što god od toga dvoje odabrali rezultat će biti jednak tj. postići ćemo da nam se  podataka o novoj osobi odmah prikaže u našoj tablici.

Dohvaćanje i prikaz (GET)

Dohvaćanje tj. prikaz podataka vršimo kroz ngOnInit  tj. dohvatiPopisOsoba()  funkciju.

U praksi to izgleda ovako:

Osim toga, dodali smo i jednostavnu tražilicu:

Uređivanje (PUT)

Funkcija za uređivanje jedne osobe dijeli se u dva dijela. Prvi prikuplja podatke jedne osobe, a drugi ih šalje na API tj. izvršava promjenu u vanjskoj bazi.

Na kraju to izgleda ovako:

Brisanje (DELETE)

Kada je brisanje u pitanju trebamo biti posebno pažljivi i korisnik uvijek mora potvrditi da stvarno želi nešto obrisati.

Za potvrdu ćemo koristiti AlertController.

Nakon što je osoba uspješno obrisana opet imamo dvije mogućnosti kada je u pitanju osvježavanje podataka s popisom osoba. Možemo opet pozvati API koji će dovući popis svih osoba ili možemo koristiti .splice() metodu i “ručno” ukloniti pojedini podataka prema njegovom mjestu u nizu bez da istovremeno pozivamo API.

U praksi to izgleda ovako:

Kompletna funkcionalnost na kraju izgleda ovako:

Zaključak

Ovo je bio jednostavan primjer kreiranja Ionic 4 mobilne aplikacije sa osnovnim funkcionalnostima kao što su prikaz, dodavanje, uređivanje i brisanje podataka.

Struktura projekta prema package.json:


 

Leave a Comment