Arhiva RandomUserAPI - Tomislav Stanković

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.

$ ionic start Ionic2RandomUser blank –-v2
$ cd Ionic2RandomUser
$ ionic serve

$ ionic start Ionic2RandomUser blank –-v2

$ cd Ionic2RandomUser

$ ionic serve

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

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.

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

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RandomUserProvider {

  constructor(public _http: Http) {
    console.log('Hello RandomUserProvider Provider');
  }

  loadRandomUsers(){
    return this._http.get('https://randomuser.me/api/?results=10')
      .map(res => res.json());
  }

}

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class RandomUserProvider {

constructor(public _http: Http) {

console.log('Hello RandomUserProvider Provider');

}

loadRandomUsers(){

return this._http.get('https://randomuser.me/api/?results=10')

.map(res => res.json());

}

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:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RandomUserProvider } from '../../providers/random-user-provider';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [RandomUserProvider]
})
export class HomePage {

  constructor(public _navCtrl: NavController,
              public _randomUser: RandomUserProvider ) {
             // this.getUsers();
  }

  getUsers(){
     this._randomUser.loadRandomUsers().subscribe(res => {
     this.user = res.results;
     console.log(this.user);
    });
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { RandomUserProvider } from '../../providers/random-user-provider';

@Component({

selector: 'page-home',

templateUrl: 'home.html',

providers: [RandomUserProvider]

})

export class HomePage {

constructor(public _navCtrl: NavController,

public _randomUser: RandomUserProvider ) {

// this.getUsers();

}

getUsers(){

this._randomUser.loadRandomUsers().subscribe(res => {

this.user = res.results;

console.log(this.user);

});

}

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.

<ion-header>
  <ion-navbar>
    <ion-title>
     Top 10 Random Users
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="light" (click)="getUsers()">GET Users</button>
   <ion-list>
    <ion-item *ngFor="let u of user">
      <ion-avatar item-left>
        <img src="{{u.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{u.name.first}} {{u.name.last}}</h2>
      <p>{{u.email}}</p>
    </ion-item>
  </ion-list> 
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Top 10 Random Users

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button color="light" (click)="getUsers()">GET Users</button>

<ion-list>

<ion-item *ngFor="let u of user">

<ion-avatar item-left>

</ion-avatar>

<h2>{{u.name.first}} {{u.name.last}}</h2>

<p>{{u.email}}</p>

</ion-item>

</ion-list>

</ion-content>

Konačan izgled aplikacije

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

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.

Oznaka: RandomUserAPI

Ionic 2 – prikaz JSON-a sa API-ja