Ionic 3 - Slanje podataka na API

Ionic 3 – Slanje podataka na API

Ovim blog postom želim pokazati kako na jednostavan i brz način možete napraviti Ionic aplikaciju koja će slati podatke na API. U ovom ću slučaju koristiti jednostavan JSON Server, ali jednako samo tako mogao koristiti i NodeJS API, API koji podržava slanje datoteka ili Google Drive API. Ali kao što sam i rekao, kako bi zadržao jednostavnost i kako ne bi otišao previše u širinu u ovom ću primjeru koristiti jednostavan JSON Server API.

Postavljanje aplikacije

Kreirati ćemo novi Ionic projekt, i dodati podršku za Android platformu

Izrada i pokretanje API-ja

API se nalazi u datoteci db.json sa sljedećim sadržajem

Pokrećemo ga naredbom

Servis za API

Sada ćemo napraviti servis koji će u našoj Ionic aplikaciji služiti za pozivanje API-ja.

Servis za API će izgledati ovako

Znači, imamo funkciju getUsers(); koja će dohvaćati popis svih osoba u imeniku, kao i funkciju postUser(a:any); za dodavanje nove osobe u imenik.

Forma za unos

Sada možemo napraviti formu za unos sadržaja. Forma će se sastojati od samo tri polja. Jedno polje za ime i prezime, drugo za broj telefona, a treće polje tj. padajući izbornik s opcijama za odabir poslovnog ili privatnog broja. Ispod svega toga prikazat ćemo popis svih osoba.

Forma nema nikakvih specijalnih uvjeta i provjera niti je bilo koje polje označeno kao obavezno. Osim toga, ispod forme imamo popis do sada dodanih osoba.

Funkcionalnost će se nalaziti u home.ts

Sada možemo provjeriti radi li uopće naša forma za unos.

Ionic 3 – Slanje podataka na API

Kada smo zaključili da forma ispisuje podatke koje smo upisali možemo dovršiti funkciju za unos osobe dodajOsobu(); koja će sada izgledati ovako

I konačni rezultat izgleda ovako

Ionic 3 - Slanje podataka na API

Zaključak

Primjer koji ste ovdje imali priliku vidjeti najosnovnija je verzija i samo jedan od načina kako slati podatke iz Ionic aplikacije na API i ne preporučujem da ovaj način slanja podataka koristite u produkcijskim verzijama aplikacije. Zapravo, ako ga i koristite neće se dogoditi ništa loše, ali samo želim naglasiti da postoje i bolji načini o kojima ću nekom drugom prilikom.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa * (obavezno)