Tomislav Stanković, Autor na Tomislav Stanković

Ionic 2 – provjera povezanosti s mrežom

Iako sam već objavio blog post o provjeri povezanosti s mrežom/internetom za Ionic 1 mislim da je vrijeme da osvježim informacije s uputama vezanim uz Ionic 2. Od sada više nećemo koristiti ngCordova pluginove nego se prebacujemo na Ionic Native.

Uz pretpostavku da ste već pokrenuli novi Ionic 2 projekt možemo krenuti dalje.

Ionic Native Network plugin

Network plugin ćemo dodati pomoću naredbe $ ionic plugin add cordova-plugin-network-information.

Network servis

Plugin koji smo ranije instalirali daje nam mogućnost da uopće možemo napraviti servis koji će vršiti provjeru povezanosti s mrežom/internetom. Servis ćemo kreirati koristeći Ionic CLI točnije naredbu $ ionic g provider NetworkService.

Prilikom kreiranja servisa u njemu se nalazi samo import { Injectable } from '@angular/core'; , a to nam nije dovoljno za provjeru povezanosti s mrežom/internetom. Sada trebamo pozvati ranije instaliran plugin uz dodatak Platform servisa koji će provjeravati na kojoj smo trenutno platformi (Android ili iOS) tj. jesmo li uopće na nekoj od tih platformi.

Sadržaj koji se nalazi u network-service.ts zamijenit ćemo sljedećim:

import { Injectable } from '@angular/core';
import { Network } from 'ionic-native';
import { Platform } from 'ionic-angular';
 
declare var Connection;
 
@Injectable()
export class NetworkService {
 
  onDevice: boolean;
 
  constructor(public platform: Platform){
    this.onDevice = this.platform.is('cordova');
  }
 
  isOnline(): boolean {
    if(this.onDevice && Network.connection){
      return Network.connection !== Connection.NONE;
    } else {
      return navigator.onLine; 
    }
  }
 
  isOffline(): boolean {
    if(this.onDevice && Network.connection){
      return Network.connection === Connection.NONE;
    } else {
      return !navigator.onLine;   
    }
  }
}

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

import { Network } from 'ionic-native';

import { Platform } from 'ionic-angular';

declare var Connection;

@Injectable()

export class NetworkService {

onDevice: boolean;

constructor(public platform: Platform){

this.onDevice = this.platform.is('cordova');

}

isOnline(): boolean {

if(this.onDevice && Network.connection){

return Network.connection !== Connection.NONE;

} else {

return navigator.onLine;

}

isOffline(): boolean {

if(this.onDevice && Network.connection){

return Network.connection === Connection.NONE;

} else {

return !navigator.onLine;

}

Servis nam se zapravo sastoji od dvije funkcije isOnline i isOffline koje možemo pozivati bilo gdje u aplikaciji kada želimo provjeriti povezanost s mrežom/internetom.

Iako sada imamo funkcionalan servis još uvijek ga ne možemo koristiti u aplikaciji jer ga nismo naveli u app.module.ts i aplikacija zapravo ne zna za njega. Zato ćemo sada dodati sljedeće u app.module.ts.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { NetworkService } from '../providers/network-service';

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, NetworkService]
})
export class AppModule {}

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { Page1 } from '../pages/page1/page1';

import { Page2 } from '../pages/page2/page2';

import { NetworkService } from '../providers/network-service';

@NgModule({

declarations: [

MyApp,

Page1,

Page2

imports: [

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

Page1,

Page2

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, NetworkService]

})

export class AppModule {}

Korištenje servisa

Servis koristimo na način da ga pozovemo import { NetworkService } from '../../providers/network-service'; u komponentu tj. klasu u kojoj želimo znati imamo li povezanost s mrežom/internetom.

U ovom primjeru NetworkService će na stranici page1.html provjeravati imamo li povezanost s mrežom/internetom tako da ćemo unutar page1.ts dodati sljedeće:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NetworkService } from '../../providers/network-service';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {

  poruka:string;

  constructor(public _navCtrl: NavController,
              public _networkService: NetworkService) {
              this.provjeraInterneta(); 
  }

  provjeraInterneta(){
      if(this._networkService.isOnline()){
       console.log('Ima interneta!');
       this.poruka = "Ima interneta!";
       //Povuci podatke s API-ja
        }else{
        console.log('Nema interneta!');
        this.poruka = "Nema interneta!";
        //Prikaži podatke iz lokalne SQLite baze 
    }
   }
  
}

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

import { NavController } from 'ionic-angular';

import { NetworkService } from '../../providers/network-service';

@Component({

selector: 'page-page1',

templateUrl: 'page1.html'

})

export class Page1 {

poruka:string;

constructor(public _navCtrl: NavController,

public _networkService: NetworkService) {

this.provjeraInterneta();

}

provjeraInterneta(){

if(this._networkService.isOnline()){

console.log('Ima interneta!');

this.poruka = "Ima interneta!";

//Povuci podatke s API-ja

}else{

console.log('Nema interneta!');

this.poruka = "Nema interneta!";

//Prikaži podatke iz lokalne SQLite baze

}

Unutar page1.html dodali smo sljedeće:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>
  
  <button ion-button secondary menuToggle>Toggle Menu</button>

  <p>{{poruka}}</p>

</ion-content>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>Page One</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h3>Ionic Menu Starter</h3>

<p>

If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way.

</p>

<button ion-button secondary menuToggle>Toggle Menu</button>

<p>{{poruka}}</p>

</ion-content>

U konačnici to izgleda ovako

Zaključak

I to je to! Ovo je samo jedna od mogućnosti kako koristiti Ionic Native Network plugin.

Ovaj je plugin posebno koristan kada u aplikaciji prikazujete podatke s nekog vanjskog izvora. Znači, ako nestane veze s internetom neće se više prikazati niti podaci koje želite dati korisniku, a korisnik neće znati zašto se to dogodilo. Jednom kada utvrdite da veza s internetom ne postoji trebate odlučiti što i kako dalje. Možete o tome obavijestiti korisnika ili mu u tom slučaju prikazivati podatke iz lokalne memorije sve dok se ponovno ne uspostavi veza s internetom. – Ionic aplikacija (ni)je povezana s internetom

Node.js API za slanje Push notifikacija

U ovom ćemo blog postu napraviti Node.js API za slanje Push notifikacija. Ovaj API je samo jedan dio svega onoga što je potrebno zadovoljiti kako bi se push notifikacije mogle uspješno slati/primati i biti će zapravo nadogradnja prethodnog Node.js API-ja za upload datoteka.

Proces slanja push notifikacija:

Treba nam servis koji će stajati između API-ja i mobilne aplikacije. U ovom slučaju to je Google Firebase.
Treba nam jedinstveni token mobilne aplikacije tj. uređaja kako bi API znao kome poslati push notifikaciju. Kreiranje jedinstvenog tokena odvija se u samoj mobilnoj aplikaciji i to neće biti pokriveno ovim blog postom.
Treba nam API koji će na osnovu zahtjeva skupiti sve tokene i poslati im push notifikaciju. Za to ćemo koristiti node-gcm NPM paket.

U nekom od sljedećih blog postova napravit ćemo primjer Ionic aplikacije koja će koristiti ovaj API tj. koja će zapravo primati push notifikacije.

Google Firebase

Google Firebase ćemo koristiti kao servis koji će stajati između mobilne aplikacije i Node.js API-ja. Na adresi https://console.firebase.google.com/ potrebno je napraviti novi projekt s nazivom mobilne aplikacije koja će API koristiti.

Server key će nam trebati u server.js kako bi naš API znao s kojim servisom će komunicirati.

Osim toga potrebno je još dodati podršku za konkretne platforme na kojima će se temeljiti mobilna aplikacija jer svaka platforma ima svoje specifičnosti. S obzirom da je Ionic framework za izradu hibridnih mobilnih aplikacija mi ćemo odmah kreirati podršku za iOS i Android platforme.

Priprema za Android platformu

Priprema za iOS platformu

Što se Google Firebasea tiče to je za sada to. Njemu ćemo se vratiti kada budemo radili mobilnu aplikaciju jer će nam trebati još neki podaci.

Testni push.js

Sada ćemo napraviti testni push.js s kojim ćemo isprobati radi li uopće naš API i hoće li push notifikacija stići na mobilni uređaj.

Prvo moramo instalirati https://www.npmjs.com/package/node-gcm pomoću naredbe $ npm install node-gcm --save.

gcmApiKey je zapravo server key koji imamo unutar Google Firebase sučelja, ali ovdje nam treba i jedinstveni token uređaja, a njega dobijemo unutar mobilne aplikacije. Kako dobiti taj token neću prikazati u ovom blog postu nego u nekom od sljedećih. Uglavnom, na slici se vidi token uređaja.

Njega dobijemo na način da buildamo aplikaciju na mobilni uređaj i unutar chrome://inspect/#devices otvorimo konzolu iz koje kopiramo token koji onda zalijepimo u push.js

Sada imamo sve potrebno unutar push.js kako bi testirali API.

var express = require('express');
var gcm = require('node-gcm');
var app = express();
var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx'; // Server key iz https://console.firebase.google.com/

var server = app.listen(3001, function () {
    console.log('Pokrenut testni push API server!');
});

app.get('/', function (req, res) {
    res.send("Defaultna ruta");
});

app.get('/push', function (req, res) {
    var device_tokens = []; // array jedinstvenih tokena uređaja
    var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put
    var sender = new gcm.Sender(gcmApiKey); // pošiljatelj
    var message = new gcm.Message(); // nova poruka
    message.addData('title', 'Naslov');
    message.addData('message', "Sadržaj push notifikacije");
    message.addData('sound', 'default');
    message.collapseKey = 'Testing Push'; // grupa push notifikacija
    message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline
    message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline
    device_tokens[0] = "cscMv3QlzAA:APA91bFU8OQRe1Dkja-Oq3krC1fQrMV0HU8AnjLjOhbTjqbwT4ljqt2rgMpK3gt1kpPqs-8ibELSxIY4QKN7EZvdznRoRP_oSXHW1saRxqW2AziuPJ9OK8jfwli1kIm01veCyEtkRFG9"; //jedinstveni token uređaja
    sender.send(message, device_tokens[0], retry_times, function (result) {
        console.log('Push poslan na: ' + device_tokens);
        res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);
    }, function (err) {
        res.status(500).send('Neuspješno poslana push notifikacija');
    });
});

var express = require('express');

var gcm = require('node-gcm');

var app = express();

var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx'; // Server key iz https://console.firebase.google.com/

var server = app.listen(3001, function () {

console.log('Pokrenut testni push API server!');

});

app.get('/', function (req, res) {

res.send("Defaultna ruta");

});

app.get('/push', function (req, res) {

var device_tokens = []; // array jedinstvenih tokena uređaja

var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put

var sender = new gcm.Sender(gcmApiKey); // pošiljatelj

var message = new gcm.Message(); // nova poruka

message.addData('title', 'Naslov');

message.addData('message', "Sadržaj push notifikacije");

message.addData('sound', 'default');

message.collapseKey = 'Testing Push'; // grupa push notifikacija

message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline

message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline

device_tokens[0] = "cscMv3QlzAA:APA91bFU8OQRe1Dkja-Oq3krC1fQrMV0HU8AnjLjOhbTjqbwT4ljqt2rgMpK3gt1kpPqs-8ibELSxIY4QKN7EZvdznRoRP_oSXHW1saRxqW2AziuPJ9OK8jfwli1kIm01veCyEtkRFG9"; //jedinstveni token uređaja

sender.send(message, device_tokens[0], retry_times, function (result) {

console.log('Push poslan na: ' + device_tokens);

res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);

}, function (err) {

res.status(500).send('Neuspješno poslana push notifikacija');

});

Ako sada pokrenemo $ node push.js i odemo na putanju http://localhost:3001/push

možemo vidjeti da je push notifikacija uspješno stigla na mobilni uređaj

Gledajući prema ovom primjeru ispada da nam svaki korisnik mobilne aplikacije treba poslati svoj jedinstveni token uređaja kako bi ga mi ručno upisali u push.js i kako bi mogli tom korisniku poslati push notifikaciju. Naravno da to nema smisla i da je ovo služilo samo za test. U produkcijskoj verziji API-ja potrebno je automatizirati čitav proces i napraviti automatsku registraciju jedinstvenog tokena, slanje tokena u bazu podataka pa će API slati push notifikacije prema svim uređajima čije tokene ima spremljene u bazu.

Nadogradnja MySQL baze

Napravit ćemo novu tablicu naziva device unutar MySQL baze u koju ćemo spremati sve tokene, a koji će u bazu biti poslani čim se mobilna aplikacija pokrene.

server.js nadogradnja

Sada ćemo nadograditi prethodno napravljen API za upload datoteka koji će odmah prilikom dodavanja novog korisnika poslati push notifikaciju o dodanom korisniku.

Pomoću naredbe $ npm install node-gcm ćemo instalirati https://www.npmjs.com/package/node-gcm i na vrh datoteke dodati:

var gcm = require('node-gcm');
var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx';

1 2	var gcm = require('node-gcm'); var gcmApiKey = 'xxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx-xx';

Sada kada imamo spremnu novu tablicu u bazi možemo napraviti API koji će iz mobilne aplikacije primati jedinstvene tokene.

apiRoutes.post('/device-token', function (req, res, next) {

   console.log(req.body);
   
   var token = req.body.token;
   console.log(token);

   pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
            
			var uredjaj = { 
            dev_token: token  
            };   

            connection.query('INSERT INTO device SET ?', uredjaj,
            function(err, rows) {
                if (err) {
                    throw err;
                } else {
                    var result = {
                        success: true,
                        detail: rows
                    }
                }
            });
    }); 
})

apiRoutes.post('/device-token', function (req, res, next) {

console.log(req.body);

var token = req.body.token;

console.log(token);

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var uredjaj = {

dev_token: token

};

connection.query('INSERT INTO device SET ?', uredjaj,

function(err, rows) {

if (err) {

throw err;

} else {

var result = {

success: true,

detail: rows

}

});

})

Sada možemo nadograditi i drugi dio API-ja koji služi za dodavanje korisnika.

//Dodavanje korisnika
apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

  console.log(req.body);
  console.log(req.files);

   pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }

            var korisnik = { 
            k_ime: req.body.ime,
            k_prezime: req.body.prezime,
            k_slika: req.files[0].destination + "/" + req.files[0].filename,  
	    k_dokument: req.files[1].destination + "/" + req.files[1].filename  
            };      
			
        //SELECT svih tokena i slanje push notifikacije
        pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
       var query = "SELECT * FROM device ORDER BY iddevice ASC";
        query = mysql.format(query);
        connection.query(query,function(err,rows){
           connection.release();
            if (err) {               
               return next(err);
            } else {
                 var SviTokeni = [];
                 rows.forEach(function(a) {
                        var jedanToken = {
                             dev_token: a.dev_token
                            }
                            SviTokeni.push(jedanToken.dev_token);
                        });
            //Push
            var device_tokens = SviTokeni; // array jedinstvenih tokena uređaja
    var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put
    var sender = new gcm.Sender(gcmApiKey); // pošiljatelj
    var message = new gcm.Message(); // nova poruka
    message.addData('title', 'Dodan novi korisnik:');
    message.addData('message', korisnik.k_ime + ' ' + korisnik.k_prezime);
    message.addData('sound', 'default');
    message.collapseKey = 'Testing Push'; // grupa push notifikacija
    message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline
    message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline
    sender.send(message, device_tokens, retry_times, function (result) {
        console.log('Push poslan na: ' + device_tokens);
       res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);
    }, function (err) {
       res.status(500).send('Neuspješno poslana push notifikacija');
    });
            }
        });  
    })
			
            connection.query('INSERT INTO korisnik SET ?', korisnik,
            function(err, rows) {
                if (err) {
                    throw err;
                } else {
		    res.json("Uspješno dodan korisnik!");
                    res.end();
                }
                connection.release();
            });
    });
})

//Dodavanje korisnika

apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

console.log(req.body);

console.log(req.files);

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var korisnik = {

k_ime: req.body.ime,

k_prezime: req.body.prezime,

k_slika: req.files[0].destination + "/" + req.files[0].filename,

k_dokument: req.files[1].destination + "/" + req.files[1].filename

};

//SELECT svih tokena i slanje push notifikacije

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var query = "SELECT * FROM device ORDER BY iddevice ASC";

query = mysql.format(query);

connection.query(query,function(err,rows){

connection.release();

if (err) {

return next(err);

} else {

var SviTokeni = [];

rows.forEach(function(a) {

var jedanToken = {

dev_token: a.dev_token

}

SviTokeni.push(jedanToken.dev_token);

});

//Push

var device_tokens = SviTokeni; // array jedinstvenih tokena uređaja

var retry_times = 4; // broj puta koliko će se push notifikacija pokušati poslati ako ne uspije prvi put

var sender = new gcm.Sender(gcmApiKey); // pošiljatelj

var message = new gcm.Message(); // nova poruka

message.addData('title', 'Dodan novi korisnik:');

message.addData('message', korisnik.k_ime + ' ' + korisnik.k_prezime);

message.addData('sound', 'default');

message.collapseKey = 'Testing Push'; // grupa push notifikacija

message.delayWhileIdle = true; //odgoditi slanje push notifikacije ako je uređaj offline

message.timeToLive = 3; //broj sekundi koliko push notifikaciju držati na serveru ako je uređaj offline

sender.send(message, device_tokens, retry_times, function (result) {

console.log('Push poslan na: ' + device_tokens);

res.status(200).send('Push notifikacija poslana na uređaj: ' + device_tokens);

}, function (err) {

res.status(500).send('Neuspješno poslana push notifikacija');

});

}

});

})

connection.query('INSERT INTO korisnik SET ?', korisnik,

function(err, rows) {

if (err) {

throw err;

} else {

res.json("Uspješno dodan korisnik!");

res.end();

}

connection.release();

});

})

U ovom slučaju tijelo poruke message sastojat će se od korisnik.k_ime i korisnik.k_prezime.

Iz sljedeće se animacije vidi da smo dodali novog korisnika Tomislav Stanković.

Istovremeno s dodavanjem korisnika korisnicima mobilne aplikacije stigla je sljedeća push notifikacija.

Zaključak

I to je to! Napravili smo funkcionalan API za slanje push notifikacija. Još ostaje za napraviti iOS i Android mobilnu aplikaciju koja će automatski slati token uređaja u MySQL bazu i koja će primati push notifikacije, ali o tome će više riječi biti u nekom od sljedećih blog postova jer bi ovaj bio previše dug ako bi se htjelo sve detaljno obraditi.

Posjetite GitHub i preuzmite projekt.

Ionic 2 – prikaz JSON-a sa API-ja

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.

Uvod u Ionic 2

Ionic 2 je framework za izradu hibridnih mobilnih aplikacija koje dijele isti programski kod (aplikacije razvijamo koristeći HTML, CSS i JavaScript tj. Angular(2)), za Android, iOS i Windows Phone platformu. Time štedimo vrijeme uloženo u razvoj dok bi u slučaju nativnih aplikacija morali napraviti tri aplikacije s tri različite tehnologije. Nekada i to može biti bolja opcija sve ovisi od projekta do projekta tj. o zahtjevima projekta. U ovom blog postu zadržat ćemo se na hibridnim mobilnim aplikacijama i prednostima Ionic 2 frameworka.

Postavljanje razvojne okoline

U ovom primjeru nećemo ići od nule kao u jednom od prethodnih blog postova, nego ćemo koristiti Ionic command line utility (CLI) kako bi što prije i što jednostavnije postavili razvojnu okolinu.

Potrebno je instalirati:

Node.js LTS
Ionic i Cordova pomoću naredbe: $ npm install -g ionic cordova
TypeScript pomoću naredbe: $ npm install -g typescript

Pokretanje Ionic 2 projekta

Ako smo sve dobro napravili sada ćemo moći pokrenuti Ionic 2 projekt koristeći naredbu $ ionic start Ionic2Aplikacija sidemenu --v2

ionic označava da koristimo Ionic CLI
start označava da želimo pokrenuti novi Ionic projekt
Ionic2Aplikacija označava naziv aplikacije
sidemenu označava vrstu predloška
--v2 označava da želite želimo pokrenuti Ionic 2 projekt, inače bi kreirali Ionic 1 projekt

Osim sidemenu predloška, prilikom pokretanja projekta moguće je birati između sljedećih nekoliko predložaka:

tabs: $ ionic start Ionic2Aplikacija tabs --v2
sidemenu: $ ionic start Ionic2Aplikacija sidemenu --v2
blank: $ ionic start Ionic2Aplikacija blank --v2
tutorial: $ ionic start Ionic2Aplikacija tutorial --v2

Ako prilikom kreiranja projekta ne navedemo koji predložak želimo koristiti dobit ćemo tabs predložak.

Projekt ćemo pokrenuti naredbom $ ionic serve i on će se prikazati u web pregledniku.

Kako bi Ionic 2 aplikaciju mogli pokrenuti na Android $ ionic run android odnosno na iOS $ ionic run ios uređaju moramo dodati i pripadajuće platforme, a to ćemo učiniti pomoću sljedećih naredbi:

$ionic platform add android
$ionic platform add ios // iOS platformu možete dodati isključivo na Mac-u

1 2	$ionic platform add android $ionic platform add ios // iOS platformu možete dodati isključivo na Mac-u

Struktura Ionic 2 projekta

Ako sada pogledate strukturu projekta vidjet ćete puno mapa i puno datoteka, međutim najbitnije datoteke nalaze se unutar src mape.

| - Ionic2Aplikacija/
     | - hooks/
     | - node_modules/
     | - platforms/
          | - android/
          | - ios/
     | - plugins/
     | - resources/
     | - src/
          | - app/
               | - app.component.ts
               | - app.html
               | - app.module.ts
               | - app.scss
               | - main.ts
          | - assets/
               | - icon/
          | - pages/
               | - page1/
               | - page2/
          | - theme/
               | - variables.scss
          | - declarations.d
          | - index.html
          | - manifest.jsom
          | - service-worker.js
     | - www/
     | - .editconfig
     | - config.xml
     | - ionic.config.json
     | - package.json
     | - tsconfig.json
     | - tslint.json

| - Ionic2Aplikacija/

| - hooks/

| - node_modules/

| - platforms/

| - android/

| - ios/

| - plugins/

| - resources/

| - src/

| - app/

| - app.component.ts

| - app.html

| - app.module.ts

| - app.scss

| - main.ts

| - assets/

| - icon/

| - pages/

| - page1/

| - page2/

| - theme/

| - variables.scss

| - declarations.d

| - index.html

| - manifest.jsom

| - service-worker.js

| - www/

| - .editconfig

| - config.xml

| - ionic.config.json

| - package.json

| - tsconfig.json

| - tslint.json

Pojašnjenje važnijih datoteka:

config.xml – konfiguracijska datoteka koja sadržava naziv aplikacije i popis datoteka od kojih se Ionic 2 aplikacija sastoji.
src – mapa u kojoj se stvara Ionic 2 aplikacija. Sve stranice, komponente, servise i ostalo kreirat ćemo i uređivati ovdje.
platforms – svaka dodana platforma ima svoju mapu u kojoj se nalaze specifične datoteke za tu platformu, a koje omogućavaju kreiranje završne verzije aplikacije koja ide na uređaj
node_modules – npm paketi navedeni u package.json nalaze se u ovoj mapi.
plugins – mjesto gdje se nalaze svi dodaci koji će proširiti mogućnosti Ionic 2 aplikacije
resources – sadržava ikone i početni ekran (splash screens) za dodane platforme, u ovom slučaju to su iOS i Android

Ionic komponenta

Osnovna gradivna jedinica Ionic 2 projekta je komponenta koja se sastoji od 3 datoteke npr. komponenta.ts, komponenta.html i komponenta.scss

U .ts datoteci definiramo logiku komponente.

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

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {

  constructor(public _navCtrl: NavController) {
    
  }
  
}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-page1',

templateUrl: 'page1.html'

})

export class Page1 {

constructor(public _navCtrl: NavController) {

}

U .html datoteci definiramo raspored sadržaja komponente.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>
  

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>Page One</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h3>Ionic Menu Starter</h3>

<p>

If you get lost, the <a href="https://ionicframework.com/docs/v2">docs</a> will show you the way.

</p>

<button ion-button secondary menuToggle>Toggle Menu</button>

</ion-content>

U .scss datoteci definiramo izgled sadržaja komponente.

page-page1 {

}

page-page1 {

}

Više o komponentama i načinu kako se stvaraju biti će riječi u nekom od sljedećih blog postova.

Zaključak

O Ionicu 2 bi se moglo napisati još toliko toga i sve ranije navedeno može se još detaljnije pojasniti, ali zaustaviti ćemo se na ovome. Napravili smo toliko toga i pokazali kako na jednostavan i brz način pokrenuti Ionic 2 projekt, a zapravo nismo napravili ništa jer aplikacija u trenutnom obliku ništa ne radi i ničemu ne služi. Ipak, temelj imamo i lako ćemo dalje. Kroz buduće blog postove detaljnije ćemo se pozabaviti dodavanjem konkretnih funkcionalnosti ove Ionic 2 aplikacije, a sve ćete moći preuzeti na GitHubu.

Node.js RESTful API za upload datoteka

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:

| - KorisniciAPI/
     | - node_modules/
          | - body-parser/
          | - express/
          | - mysql/
     | - server.js
     | - package.json

| - KorisniciAPI/

| - node_modules/

| - body-parser/

| - express/

| - mysql/

| - server.js

| - package.json

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.

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:

 | - KorisniciAPI/
     | - node_modules/
          | - body-parser/
          | - express/
          | - multer/
          | - mysql/
     | - server.js
     | - package.json

| - KorisniciAPI/

| - node_modules/

| - body-parser/

| - express/

| - multer/

| - mysql/

| - server.js

| - package.json

Kao i package.json

"dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "multer": "^1.2.1",
    "mysql": "^2.12.0"
  }

"dependencies": {

"body-parser": "^1.15.2",

"express": "^4.14.0",

"multer": "^1.2.1",

"mysql": "^2.12.0"

}

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:

var multer  = require('multer')
var upload = multer({ dest: '/uploads' })

1 2	var multer = require('multer') var upload = multer({ dest: '/uploads' })

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.

Dodavanje korisnika i upload datoteka

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

//Dodavanje korisnika
apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

  console.log(req.body);
  console.log(req.files);

   pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }

            var korisnik = { 
            k_ime: req.body.ime,
            k_prezime: req.body.prezime,
	    k_slika: req.files[0].destination + "/" + req.files[0].filename,  
	    k_dokument: req.files[1].destination + "/" + req.files[1].filename  
            };      
			
            connection.query('INSERT INTO korisnik SET ?', korisnik,
            function(err, rows) {
                if (err) {
                    throw err;
                } else {
		    res.json("Uspješno dodan korisnik!");
                    res.end();
                }
                connection.release();
            });
    });
})

//Dodavanje korisnika

apiRoutes.post('/dodajkorisnika', upload.any(),function (req, res, next) {

console.log(req.body);

console.log(req.files);

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

var korisnik = {

k_ime: req.body.ime,

k_prezime: req.body.prezime,

k_slika: req.files[0].destination + "/" + req.files[0].filename,

k_dokument: req.files[1].destination + "/" + req.files[1].filename

};

connection.query('INSERT INTO korisnik SET ?', korisnik,

function(err, rows) {

if (err) {

throw err;

} else {

res.json("Uspješno dodan korisnik!");

res.end();

}

connection.release();

});

})

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

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 .

{ ime: 'Tomislav', prezime: 'Stanković' }
[ { fieldname: 'slika',
    originalname: 'tomislav-stankovic.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: './uploads',
    filename: '6527f85adbde49f692efd52449764547',
    path: 'uploads\\6527f85adbde49f692efd52449764547',
    size: '15402' },
  { fieldname: 'dokument',
    originalname: 'O-meni.docx',
    encoding: '7bit',
    mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    destination: './uploads',
    filename: 'ad6375db29809af74be25b2d8822f46f',
    path: 'uploads\\ad6375db29809af74be25b2d8822f46f',
    size: '12706' }]

{ ime: 'Tomislav', prezime: 'Stanković' }

[ { fieldname: 'slika',

originalname: 'tomislav-stankovic.jpg',

encoding: '7bit',

mimetype: 'image/jpeg',

destination: './uploads',

filename: '6527f85adbde49f692efd52449764547',

path: 'uploads\\6527f85adbde49f692efd52449764547',

size: '15402' },

{ fieldname: 'dokument',

originalname: 'O-meni.docx',

encoding: '7bit',

mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

destination: './uploads',

filename: 'ad6375db29809af74be25b2d8822f46f',

path: 'uploads\\ad6375db29809af74be25b2d8822f46f',

size: '12706' }]

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.

apiRoutes.delete('/korisnik/:k_id', function(req, res, next){

pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
            connection.query('delete from korisnik where k_id = ?', [req.params.k_id], 
            function(err, rows) {
                if (err) {
                    return next(err);
                } else {
                    res.writeHead(200, {
                        "Content-Type": "application/json"
                    });
                    var result = {
                        success: true
                    }
                    res.write(JSON.stringify(result));
                    res.end();
                }
            });
    });
});

apiRoutes.delete('/korisnik/:k_id', function(req, res, next){

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

connection.query('delete from korisnik where k_id = ?', [req.params.k_id],

function(err, rows) {

if (err) {

return next(err);

} else {

res.writeHead(200, {

"Content-Type": "application/json"

});

var result = {

success: true

}

res.write(JSON.stringify(result));

res.end();

}

});

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:

apiRoutes.delete('/korisnik/:k_id/:k_slika/:k_dokument', function(req, res, next){

console.log(req.params);

var slika =  req.params.k_slika;
var dokument =  req.params.k_dokument;

pool.getConnection(function(err, connection) {
 
        if (err) {
            console.error("Dogodila se greška: " + err);
        }
            connection.query('delete from korisnik where k_id = ?', [req.params.k_id], 
            function(err, rows) {
                if (err) {
                    return next(err);
                } else {
				    fs.unlinkSync('./uploads/' + slika);
					fs.unlinkSync('./uploads/' + dokument);
                    res.writeHead(200, {
                        "Content-Type": "application/json"
                    });
                    var result = {
                        success: true
                    }
                    res.write(JSON.stringify(result));
                    res.end();
                }
            });
    });
});

apiRoutes.delete('/korisnik/:k_id/:k_slika/:k_dokument', function(req, res, next){

console.log(req.params);

var slika = req.params.k_slika;

var dokument = req.params.k_dokument;

pool.getConnection(function(err, connection) {

if (err) {

console.error("Dogodila se greška: " + err);

}

connection.query('delete from korisnik where k_id = ?', [req.params.k_id],

function(err, rows) {

if (err) {

return next(err);

} else {

fs.unlinkSync('./uploads/' + slika);

fs.unlinkSync('./uploads/' + dokument);

res.writeHead(200, {

"Content-Type": "application/json"

});

var result = {

success: true

}

res.write(JSON.stringify(result));

res.end();

}

});

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):

{ k_id: '2',
  k_slika: '6527f85adbde49f692efd52449764547',
  k_dokument: 'ad6375db29809af74be25b2d8822f46f' }

{ k_id: '2',

k_slika: '6527f85adbde49f692efd52449764547',

k_dokument: 'ad6375db29809af74be25b2d8822f46f' }

i { "success": true }

Cijeli proces izgleda ovako:

Zaključak

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

Posjetite GitHub i preuzmite projekt.