Arhiva NPM - Tomislav Stanković

Iako sam ranije već objavio jedan sličan blog post pod nazivom “Izrada RESTful API-ja koristeći Node.js i Express.js” sada ću obraditi nešto slično za što vjerujem da bi vam moglo biti jednostavnije i brže za napraviti.

U najvećem broju slučajeva kada počnete raditi na novom projektu u nekoj novoj tehnologiji napravit ćete CRUD aplikaciju, a kako bi to bilo moguće potreban vam je API s podacima. Tu u priču ulazi JSON Server.

JSON Server je npm paket i sve što uz njega trebate je obična JSON datoteka.

Instalacija

JSON Server možete instalirati globalno (u ovom primjeru koristim globalnu instalaciju)

$ npm install -g json-server

1	$ npm install -g json-server

ili lokalno

$ npm install -D json-server

1	$ npm install -D json-server

Više o npm-u možete saznati u službenoj dokumentaciji.

Nakon instalacije provjerite jeste li ispravno instalirali JSON Server json-server -v. Ako jeste možete krenuti na sljedeći korak.

JSON datoteka

Ako već nemate pri ruci nekakvu JSON datoteku možete napraviti nešto slično ovome. Znači, imamo primjer imenika koji se sastoji od tri objekta. Datoteka neka se zove db.json

{
  "Imenik": [
    {
      "id": 1,
      "ime": "Ivan Ivanović",
	  "telefon" : "0038501555444"
    },
    {
      "id": 2,
      "ime": "Mate Matić",
	  "telefon" : "0038501555333"
    },
	{
      "id": 3,
      "ime": "Pero Papar",
	  "telefon" : "0038501555222"
    }
  ]
}

{

"Imenik": [

{

"id": 1,

"ime": "Ivan Ivanović",

"telefon" : "0038501555444"

{

"id": 2,

"ime": "Mate Matić",

"telefon" : "0038501555333"

{

"id": 3,

"ime": "Pero Papar",

"telefon" : "0038501555222"

}

]

}

Pokretanje JSON Servera

Pokrećemo ga koristeći naredbu

$ json-server --watch db.json

1	$ json-server --watch db.json

I kao što se može vidjeti API je pokrenut na adresama

http://localhost:3000/
http://localhost:3000/db
http://localhost:3000/imenik

http://localhost:3000/

http://localhost:3000/db

http://localhost:3000/imenik

CRUD operacije

I napokon se možemo prebaciti na ono zbog čega smo ovdje. Za potrebe pozivanja API-ja koristit ćemo Postman.

[GET] http://localhost:3000/Imenik
[POST] http://localhost:3000/Imenik
[PUT] http://localhost:3000/Imenik/id
[DELETE] http://localhost:3000/Imenik/id

[GET] http://localhost:3000/Imenik

[POST] http://localhost:3000/Imenik

[PUT] http://localhost:3000/Imenik/id

[DELETE] http://localhost:3000/Imenik/id

GET

POST

PUT

DELETE

Zaključak

Sve gore navedeno su samo osnovni primjeri. Više o ostalim, naprednijim, mogućnostima potražite u službenoj dokumentaciji.

Ionic 2 omogućava dodavanje široke palete Ionic Native pluginova koji mobilnoj aplikaciji daju mogućnost korištenja nativnih funkcionalnosti mobilnog uređaja. Inače, od nedavno se promijenio način korištenja Ionic Native pluginova.

Ipak, doći će vrijeme kada vam niti to neće biti dovoljno kako bi postigli sve ono što ste zamislili sa svojom Ionic 2 aplikacijom. Tu uskaču vanjske skripte kao što su npr. Chart.js i Moment.js, a kako njih dodati u Ionic 2 projekt možete saznati u nastavku.

Korištenje NPM-a

Pokretanjem NPM naredbe kao što je npr. $ npm install moment --save dodajete vanjsku skriptu u Ionic 2 projekt. U ovom primjeru dodat ćemo podršku za Moment.js.

Nakon što smo instalirali željenu skriptu potrebno je reći Ionic 2 aplikaciji da je ona aktivna i da ju želimo koristiti. To činimo na način da uvezemo željenu skriptu import moment from 'moment'; na vrhu komponente u kojoj tu skriptu želimo koristiti.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import moment from 'moment';

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

  obican_datum: any;
  moment_datum: any;

  constructor(public _navCtrl: NavController) {
    
    this.obican_datum = new(Date);
    console.log(this.obican_datum);

    this.moment_datum = moment(this.obican_datum).format('LL');
    console.log(this.moment_datum);

  }

}

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

import { NavController } from 'ionic-angular';

import moment from 'moment';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

obican_datum: any;

moment_datum: any;

constructor(public _navCtrl: NavController) {

this.obican_datum = new(Date);

console.log(this.obican_datum);

this.moment_datum = moment(this.obican_datum).format('LL');

console.log(this.moment_datum);

}

Na prednjoj strani to izgleda ovako:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 2 Aplikacija
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<p>Običan datum: {{obican_datum}}</p>
<p>Moment datum: {{moment_datum}}</p>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 2 Aplikacija

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>Običan datum: {{obican_datum}}</p>

<p>Moment datum: {{moment_datum}}</p>

</ion-content>

Korištenje script taga

U ovom primjeru dodat ćemo Google Maps API.

U index.html dodajemo poveznicu na skriptu koju želimo koristiti.

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>

<body>

<ion-app></ion-app>

</body>

Osim toga, kako bi imali pristup globalnom objektu potrebno je instalirati pripadajući @types paket.

Tek sada u cijeloj aplikaciji imamo dostupan globalni objekt.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  constructor(public _navCtrl: NavController) {
    
   console.log(google);

  }

}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public _navCtrl: NavController) {

console.log(google);

}

Zaključak

I to je to. Gore navedena dva načina dodavanja vanjskih skripti u Ionic 2 projekt ovise o mogućnostima svake pojedine skripte. Prije nego se odlučite za korištenje neke skripte provjerite koje sve načine dodavanja u Ionic 2 projekt nudi.

Oznaka: NPM

Kako napraviti REST API koristeći JSON Server

Instalacija

JSON datoteka

Pokretanje JSON Servera

CRUD operacije

GET

POST

PUT

DELETE

Zaključak

Ionic 2 – Dodavanje vanjskih skripti

Korištenje NPM-a

Korištenje script taga

Zaključak