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
1 2 3 |
$ ionic start Ionic3API blank $ cd Ionic3API $ ionic cordova platform add android |
Izrada i pokretanje API-ja
API se nalazi u datoteci db.json sa sljedećim sadržajem
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{ "Imenik": [ { "id": 1, "ime": "Ivan Ivanović", "telefon" : "0038501555444", "vrsta": "PO" }, { "id": 2, "ime": "Mate Matić", "telefon" : "0038501555333", "vrsta": "PO" }, { "id": 3, "ime": "Pero Papar", "telefon" : "0038501555222", "vrsta": "PR" } ] } |
Pokrećemo ga naredbom
1 |
$ json-server --watch db.json |
Servis za API
Sada ćemo napraviti servis koji će u našoj Ionic aplikaciji služiti za pozivanje API-ja.
1 |
$ ionic generate provider api |
Servis za API će izgledati ovako
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class ApiProvider { constructor(public _http: Http) { console.log('Hello ApiProvider Provider'); } getUsers(){ return this._http.get('http://localhost:3000/imenik') .map(res => res.json()); } postUser(a:any){ return this._http.post('http://localhost:3000/imenik', a) .map(res => res.json()); } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<ion-header> <ion-navbar> <ion-title> Ionic 3 - API </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-label floating>Ime i prezime</ion-label> <ion-input type="text" [(ngModel)]="imenik.ime" [ngModelOptions]="{standalone: true}"></ion-input> </ion-item> <ion-item> <ion-label floating>Broj telefona/mobitela</ion-label> <ion-input type="number" [(ngModel)]="imenik.broj" [ngModelOptions]="{standalone: true}"></ion-input> </ion-item> <ion-item> <ion-label floating>Poslovni ili privatni broj</ion-label> <ion-select [(ngModel)]="imenik.vrsta" okText="Odaberi" cancelText="Odustani"> <ion-option value="PR">Privatni</ion-option> <ion-option value="PO">Poslovni</ion-option> </ion-select> </ion-item> <button ion-button full outline (click)="dodajOsobu(imenik);">Dodaj</button> <h3>Popis osoba:</h3> <ion-list *ngIf="popisOsoba"> <ion-item *ngFor="let popis of popisOsoba"> - {{ popis.ime }} </ion-item> </ion-list> </ion-content> |
Funkcionalnost će se nalaziti u home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { ApiProvider } from './../../providers/api/api'; @Component({ selector: 'page-home', templateUrl: 'home.html', providers: [ApiProvider] }) export class HomePage { imenik:any = {}; popisOsoba:any; constructor(public _navCtrl: NavController, public _api: ApiProvider) { this.imenik.ime = ''; this.imenik.broj = null; this.imenik.vrsta = ''; } ionViewWillEnter(){ this.prikaziOsobe(); } dodajOsobu(imenik){ console.log(imenik); } prikaziOsobe(){ this._api.getUsers().subscribe(res => { this.popisOsoba = res; console.log(this.popisOsoba); }) } } |
Sada možemo provjeriti radi li uopće naša forma za unos.
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
1 2 3 4 5 6 7 8 9 |
dodajOsobu(imenik){ console.log(imenik); this._api.postUser(imenik).subscribe(res => { //Osvježi popis osoba this.prikaziOsobe(); }) } |
I konačni rezultat izgleda ovako
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
{ "name": "Ionic3API", "version": "0.0.1", "author": "Tomislav Stanković", "homepage": "https://www.tomislavstankovic.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/core": "3.12.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic/storage": "2.0.1", "cordova-android": "^6.2.3", "cordova-plugin-console": "^1.0.5", "cordova-plugin-device": "^1.1.4", "cordova-plugin-splashscreen": "^4.0.3", "cordova-plugin-statusbar": "^2.2.2", "cordova-plugin-whitelist": "^1.3.1", "ionic-angular": "3.6.0", "ionic-plugin-keyboard": "^2.2.1", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12" }, "devDependencies": { "@ionic/app-scripts": "2.1.3", "@ionic/cli-plugin-ionic-angular": "1.4.1", "ionic": "3.9.2", "typescript": "2.3.4" }, "description": "Ionic3API", "cordova": { "plugins": { "cordova-plugin-console": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-whitelist": {}, "ionic-plugin-keyboard": {} }, "platforms": [ "android" ] } } |