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

$ 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

{
  "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

$ 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.

$ ionic generate provider api

Servis za API će izgledati ovako

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.

<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

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.

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

 dodajOsobu(imenik){
   console.log(imenik);

   this._api.postUser(imenik).subscribe(res => {
        //Osvježi popis osoba
        this.prikaziOsobe();
   })

  } 

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.

{
    "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"
        ]
    }
}

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 *