Ionic 3 – Slanje podataka na API

Share Button

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.

Ionic 2 – prosljeđivanje parametara između stranica

Share Button

Kada se radi mobilna aplikacija pitanje je vremena kada će ona postati kompleksnija tj. imati više stranica između kojih će trebati postojati interaktivnost, a to podrazumijeva prosljeđivanje nekih parametara s jedne stranice na drugu.

Pod pretpostavkom da već imate pokrenut Ionic 2 projekt možemo krenuti dalje.

Kreiranje stranica

Za početak trebamo kreirati dvije stranice. Jedna će služiti za prikaz svih korisnika $ ionic g page korisnici, a druga za prikaz jednog korisnika $ ionic g page korisnik.

Servis za dohvaćanje korisnika

Naša aplikacija će komunicirati s dva API-ja. Jedan će dohvaćati popis svih korisnika koji će se prikazivati na korisnici.html stranici, a drugi će dohvaćati detalje jednog korisnika koji će se prikazivati na stranici korisnik.html.

Servis kreiramo naredbom $ ionic g provider Korisnici

Kao što se vidi iz dolje navedene funkcije dohvatiKorisnika() ona zahtjeva parametar a.id koji je zapravo ID jednog korisnika.

Popis korisnika

Funkcija u 16. liniji prosljeđuje samo jedan parametar id koji nam je i potreban na sljedećoj stranici jer prema tom parametru ćemo aktivirati API za dohvaćanje jednog korisnika koji je vezan uz taj parametar tj. uz taj ID.

Funkcija u 18. liniji prosljeđuje čitav objekt koji smo u ovom slučaju nazvali test.

U ovom kontroleru koristimo NavController ugrađenu Ionic 2 klasu za navigaciju između stranica.

Jedan korisnik

U ovom kontroleru također koristimo NavController ugrađenu Ionic 2 klasu za navigaciju između stranica. Ipak, ovdje nam još treba i NavParams za dohvaćanje prosljeđenih parametara.

U slučaju kada smo kao parametar proslijedili čitav test objekt podatke ćemo prikazati na sljedeći način. Znači, prilikom učitavanja stranice ne trebamo pozivati nikakav drugi API jer smo si proslijedili potrebne podatke o korisniku koje možemo prikazati na ekranu.

Ali ako smo proslijedili samo parametar id pomoću kojega aktiviramo API za prikaz detalja jednog korisnika tada podatke prikazujemo na sljedeći način

Zaključak

I to je to. Ovo su osnove koje se tiču prosljeđivanja parametara između stranica u Ionic 2 aplikaciji. Sve dalje ovisi o specifičnim potrebama svake Ionic 2 aplikacije.

Ionic 2 – prikaz JSON-a sa API-ja

Share Button

Iako su neke aplikacije same sebi dostatne ipak je više onih koje ovise o podacima s vanjskih izvora, a to su javni ili privatni API-ji. U ovom blog postu prikazat ćemo primjer dohvaćanja JSON (JavaScript Object Notation) podataka s javnog API-ja RandomUser.Me.

Zašto baš RandomUser? Zato što na jednostavniji način, bez da kreirate i pokrećete svoj API možete napraviti i testirati svoju Ionic 2 aplikaciju što je posebno korisno u procesu učenja.

Kreiranje Ionic 2 projekta

Za početak ćemo kreirati novi Ionic 2 projekt koristeći blank predložak.

Aplikacija u web pregledniku sada izgleda ovako. Znači, ništa posebno.

Ionic2 Blank RandomUser

Ako želite saznati nešto više o strukturi Ionic 2 aplikacije proučite moj prethodni blog post.

Ionic 2 provides (servisi)

Prije nego krenemo s izradom sučelja aplikacije i logike za prikaz podataka idemo napraviti servis koji će nam dohvaćati potrebne podatke. Koristiti ćemo sljedeći URL https://randomuser.me/api/?results=10. Ako kliknete na link vidjet ćete JSON sa 10 korisnika.

Servis nam služi za dohvaćanje podataka s JSON API-ja koristeći HTTP protokol. I ovdje ćemo koristiti Ionic 2 CLI pa ćemo servis kreirati pomoću naredbe $ ionic g provider RandomUserProvider.

Servisi se automatski kreiraju u mapi providers.

Ionic2Provider

U random-user-provider.ts dodat ćemo sljedeće:

Pozivanje servisa

Servis sada moramo pozvati u komponentu koja će činiti logiku naše aplikacije. Prvo je potrebno pozvati servis import { RandomUserProvider } from '../../providers/random-user-provider'; kako bi ga mogli koristiti.

Iako smo sada pozvali servis to i dalje ne znači da ga možemo koristiti. Kako bi to omogućili moramo ga navesti kao dio naše komponente @Component, a to činimo sa providers: [RandomUserProvider] .

Sljedeći korak je kreirati konstruktor _randomUser za RandomUserProvider.

Sada možemo kreirati funkciju getUsers() koja će nam prikazati korisnike.

U konačnici to izgleda ovako:

Označene linije dodali smo u našu HomePage komponentu.

P.S. Ako se odkomentira linija 16 podaci će se automatski prikazati bez potrebe za klikom na gumb GET Users.

Sučelje za prikaz

Logiku aplikacije smo napravili i sada se možemo pozabaviti sučeljem za prikaz koji će biti običan popis.

*ngFor direktiva će proći kroz popis korisnika i za svakog kreirati po jedan red u popisu.

Konačan izgled aplikacije

$ ionic serve daje nam konačan izgled naše aplikacije s uspješno dohvaćenim JSON-om.

Get Random User

Zaključak

U ovom blog postu imali ste priliku vidjeti kako u Ionic 2 aplikaciju dohvatiti JSON podatke s javnog API-ja te ih prikazati u obliku popisa.

Jednako tako, da smo htjeli, mogli smo koristiti i naš NodeJS API kako bi prikazali korisnike iz naše baze podataka. Rezultat bi bio isti.

Node.js RESTful API za upload datoteka

Share Button

Ovaj blog post je nastavak prošlog u kojemu smo izradili jednostavan RESTful API koristeći Node.js i Express.js.

Ondje smo imali tablicu sa korisnicima i upravljali jednostavnom formom s dva tekstualna polja tj. kroz API smo dodavali ime i prezime korisnika, uređivali ih i brisali. U ovom primjeru API-ju ćemo dodati mogućnost dodavanja datoteka koje će se spremati na disk.

Kako bi jednostavnije mogli pratiti sadržaj ovog blog posta preuzmite API iz prošlog blog posta.

Početna struktura projekta:

Nadogradnja MySQL baze

Za početak ćemo dodati dva nova polja u bazu, k_slika i k_dokument, koja će nam služiti za povezivanje datoteka s određenim korisnikom. U oba polja će se spremati putanje do datoteka, iako sliku možemo spremati i kao base64 string, ali kako to nije najbolja praksa nećemo to raditi.

Polja za datoteke u bazi

multer middleware

Kako bi API razumio što mu želimo reći kada šaljemo datoteke koristiti ćemo multer NPM paket. Paketa s istom svrhom ima više nego dovoljno da možete odabrati i neki drugi ako zaključite da vam više odgovara. Koji god koristili princip je isti, a tiče se multipart/form-data.

U mapi projekta instalirati ćemo novi paket pomoću naredbe $ npm install --save multer

Struktura projekta sada je bogatija za mapu multer:

Kao i package.json

Međutim, naš API još uvijek ne može koristiti multer, barem dok ga ne navedemo u server.js što ćemo sada i učiniti.

Server.js

U server.js dodajemo sljedeće:

Prva linija definira varijablu kojom pozivamo ranije dodani paket dok druga linija definira mapu u koju će se spremati datoteke koje budu dodane putem API-ja. Ta će se mapa stvoriti čim sljedeći put pokrenemo server.js, a nalazit će se unutar root mape KorisniciAPI.

multer uploads datoteka

Dodavanje korisnika i upload datoteka

API za dodavanje korisnika sada će dobiti neke nove mogućnosti.

Sada ćemo pomoću Postmana dodati jednog korisnika, njegovu sliku i datoteku pa ćemo analizirati proces i rezultat.

Multer upload datoteka

Kao što se vidi iz gornje animacije, nakon što kliknemo na Send i pošaljemo ime, prezime, sliku i datoteku korisnika sve se zapiše u bazu podataka u obliku stringa.

console.log(req.body); i console.log(req.files); daju nam vrlo korisne informacije. Kao prvo možemo potvrditi da je sve što smo poslali putem Postmana i stiglo, a kao drugo možemo vidjeti od čega se sastoje naše datoteke i odlučiti u kojem ćemo ih obliku spremati u bazu podataka. U ovom slučaju koristimo destination i filename .

Sliku tj. datoteku na frontendu možemo prikazati u obliku: http://localhost:8080/destination/filename

I to je to što se dodavanja datoteka tiče. Nakon što smo se uvjerili da API radi možemo izraditi formu za unos sadržaja koju će koristiti korisnici.

Brisanje korisnika

Korisnika možemo obrisati korištenjem postojećeg API-ja. I kao što se vidi u prethodnom blog postu kada pošaljemo ID korisnika sve vezano uz njega briše se iz baze. Međutim ostaje jedan problem, a to su datoteke na disku koje nisu obrisane jer API-ju smo rekli da iz baze obriše samo korisnika s određenim ID-em, ali API neće i ne zna obrisati fizičke datoteke koje se nalaze na disku.

Brisanje datoteka s diska

Kako bi to bilo moguće potrebno je koristiti Node File System (fs). Na vrhu server.js definirat ćemo varijablu var fs = require('fs');

API za brisanje korisnika sada izgleda ovako:

Osim ID-ja korisnika sada šaljemo još i naziv slike tj. naziv dokumenta http://localhost:8080/api/korisnik/2/6527f85adbde49f692efd52449764547/ad6375db29809af74be25b2d8822f46f tako da smo ta dva nova parametra morali navesti i unutar API-ja '/korisnik/:k_id/:k_slika/:k_dokument'.

Kada pokrenemo API dobijemo console.log(req.params):

i { "success": true }

Cijeli proces izgleda ovako:

NodeJS brisanje datoteka

Zaključak

Ovo je samo jedan od načina kako pomoću NodeJS-a napraviti upload i brisanje datoteka.

Posjetite GitHub i preuzmite projekt.

Izrada RESTful API-ja koristeći Node.js i Express.js

Share Button

Kroz ovaj blog post pokazati ću kako napraviti jednostavan RESTful API koristeći Node.js i Express.js. Pomoću API-ja povezati ćemo se sa MySQL bazom, prikazati popis korisnika te urediti i brisati korisnike, a sve ćemo testirati pomoću Postmana.

Uz pretpostavku da imate instaliran Node.js možemo krenuti.

Postavljanje projekta

Kao i u prošlom blog postu, i ovdje prvo moramo postaviti projekt. Za početak ćemo kreirati mapu projekta koja će se zvati KorisniciAPI. Nakon toga unutar mape projekta pokrećemo naredbu $ npm init --yes kako bi dobili package.json

Kako bi ovaj API radio ono što smo zamislili moramo dodati nekoliko NPM paketa, a to su:

Nakon instalacije primijetit ćete dvije stvari, a to su nova mapa node_modules i promjena unutar package.json.

Server.js

Sada znamo da će prilikom pokretanja Node.js tražiti server.js pa ga idemo napraviti.

Struktura projekta sada izgleda ovako i više se neće mijenjati, osim sadržaja unutar server.js:

Nakon što smo testirali naš API pomoću rute http://localhost:8080/api zaključujemo da je sve u redu i možemo krenuti dalje.

API test

MySQL baza i korisnici

Sada ćemo napraviti MySQL bazu podataka naziva korisniciapi s poljima k_id, k_ime i k_prezime.

MySQ Lkorisnici

Kako bi našu MySQL bazu povezali sa server.js moramo dodati sljedeće:

Sada imamo sve što nam je potrebno kako bi mogli napraviti rute za dodavanje (POST), dohvaćanje (GET), uređivanje (PUT) i brisanje (DELETE) korisnika.

Middleware

Ako želimo da se nešto dogodi svaki put kada naš API dobije nekakav zahtjev onda koristimo middleware. Za potrebe ovog primjera stavit ćemo da nam console.log() poruku.

Kreiranje ruta

Krećemo s izradom ruta za naše korisnike.

Dodavanje korisnika

POST http://localhost:8080/api/dodajkorisnika

API za dodavanje korisnika

Dohvaćanje svih korisnika

GET http://localhost:8080/api/pregledkorisnika

Dohvaćanje svih korisnika

Uređivanje jednog korisnika

PUT http://localhost:8080/api/korisnik/:k_id

Uređivanje jednog korisnika

Brisanje jednog korisnika

DELETE http://localhost:8080/api/korisnik/:k_id

Brisanje jednog korisnika

Zaključak

Ovo su osnove osnova kada je u pitanju izrada APi-ja. Nismo se dotaknuli pitanja sigurnosti, autentifikacije korisnika niti pokušali slati datoteke, npr. slike od korisnika, pomoću API-ja. Možda o tome bude riječi nekom drugom prilikom.

Naravno da kada budete radili kompleksniji sustav nećete sve rute staviti u server.js nego će svaka ruta imati svoju datoteku.

Posjetite GitHub i preuzmite projekt.