Tomislav Stanković, Autor na Tomislav Stanković

Izrada RESTful API-ja koristeći Node.js i Express.js

Kroz ovaj blog post pokazati ću kako napraviti jednostavan RESTful API koristeći Node.js i Express.js. Pomoću API-ja povezati ćemo se sa MySQL bazom, prikazati popis korisnika te urediti i brisati korisnike, a sve ćemo testirati pomoću Postmana.

Uz pretpostavku da imate instaliran Node.js možemo krenuti.

Postavljanje projekta

Kao i u prošlom blog postu, i ovdje prvo moramo postaviti projekt. Za početak ćemo kreirati mapu projekta koja će se zvati KorisniciAPI. Nakon toga unutar mape projekta pokrećemo naredbu $ npm init --yes kako bi dobili package.json

{
  "name": "KorisniciAPI",
  "version": "1.0.0",
  "description": "Primjer izrade jednostavnog Node.js i Express.js RESTful API-ja",
  "main": "server.js", //inače bude index.js
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Tomislav Stanković",
  "license": "MIT"
}

{

"name": "KorisniciAPI",

"version": "1.0.0",

"description": "Primjer izrade jednostavnog Node.js i Express.js RESTful API-ja",

"main": "server.js", //inače bude index.js

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "Tomislav Stanković",

"license": "MIT"

}

Kako bi ovaj API radio ono što smo zamislili moramo dodati nekoliko NPM paketa, a to su:

Express.js: $ npm install express --save
bodyParser: $ npm install body-parser -save
MySQL: $ npm install mysql --save

Nakon instalacije primijetit ćete dvije stvari, a to su nova mapa node_modules i promjena unutar package.json.

{
  "name": "KorisniciAPI",
  "version": "1.0.0",
  "description": "Primjer izrade jednostavnog Node.js i Express.js RESTful API-ja",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "keywords": [],
  "author": "Tomislav Stanković",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "mysql": "^2.12.0"
  }
}

{

"name": "KorisniciAPI",

"version": "1.0.0",

"description": "Primjer izrade jednostavnog Node.js i Express.js RESTful API-ja",

"main": "server.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "Tomislav Stanković",

"license": "MIT",

"dependencies": {

"body-parser": "^1.15.2",

"express": "^4.14.0",

"mysql": "^2.12.0"

}

Server.js

Sada znamo da će prilikom pokretanja Node.js tražiti server.js pa ga idemo napraviti.

var express = require('express');  // poziva express iz node_modules
var app = express();  // označava da naša aplikacija koristi express
var mysql = require('mysql');  // poziva mysql iz node_modules
var bodyParser = require('body-parser');  // poziva bodyParser iz node_modules

// označava da app koristi bodyParser() kako bi mogao dobiti podatke iz POST zahtjeva
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var port = process.env.PORT || 8080;        // definira port na kojemu će API raditi

// definiranje zadane (defaultne) rute za naš API
var apiRoutes = express.Router();

// testiranje rute (GET http://localhost:8080/api)
apiRoutes.get('/', function(req, res) {
    res.json({ message: 'API radi!' });   //ako je sve ispravno postavljeno kao odgovor ćemo dobiti ovu poruku
});

// ostale GET, POST, PUT, DELETE biti će definirane ovdje

// sve rute sadržavati će /api
app.use('/api', apiRoutes);

// pokretanje API-ja
app.listen(port);
console.log('API je pokrenut i koristi port:' + ' ' + port);

var express = require('express'); // poziva express iz node_modules

var app = express(); // označava da naša aplikacija koristi express

var mysql = require('mysql'); // poziva mysql iz node_modules

var bodyParser = require('body-parser'); // poziva bodyParser iz node_modules

// označava da app koristi bodyParser() kako bi mogao dobiti podatke iz POST zahtjeva

app.use(bodyParser.urlencoded({ extended: true }));

app.use(bodyParser.json());

var port = process.env.PORT || 8080; // definira port na kojemu će API raditi

// definiranje zadane (defaultne) rute za naš API

var apiRoutes = express.Router();

// testiranje rute (GET http://localhost:8080/api)

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

res.json({ message: 'API radi!' }); //ako je sve ispravno postavljeno kao odgovor ćemo dobiti ovu poruku

});

// ostale GET, POST, PUT, DELETE biti će definirane ovdje

// sve rute sadržavati će /api

app.use('/api', apiRoutes);

// pokretanje API-ja

app.listen(port);

console.log('API je pokrenut i koristi port:' + ' ' + port);

Struktura projekta sada izgleda ovako i više se neće mijenjati, osim sadržaja unutar server.js:

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

| - KorisniciAPI/

| - node_modules/

| - body-parser/

| - express/

| - mysql/

| - server.js

| - package.json

API pokrećemo naredbom

$ node server.js

1	$ node server.js

Nakon što smo testirali naš API pomoću rute http://localhost:8080/api zaključujemo da je sve u redu i možemo krenuti dalje.

MySQL baza i korisnici

Sada ćemo napraviti MySQL bazu podataka naziva korisniciapi s poljima k_id, k_ime i k_prezime.

Kako bi našu MySQL bazu povezali sa server.js moramo dodati sljedeće:

 var pool = mysql.createPool({
        host: 'localhost',
        user: 'root',
        password: '',
        database: 'korisniciapi'
    });

var pool = mysql.createPool({

host: 'localhost',

user: 'root',

password: '',

database: 'korisniciapi'

});

Sada imamo sve što nam je potrebno kako bi mogli napraviti rute za dodavanje (POST), dohvaćanje (GET), uređivanje (PUT) i brisanje (DELETE) korisnika.

Middleware

Ako želimo da se nešto dogodi svaki put kada naš API dobije nekakav zahtjev onda koristimo middleware. Za potrebe ovog primjera stavit ćemo da nam console.log() poruku.

apiRoutes.use(function(req, res, next) {
    // provjera korisničkih podataka prilikom logirana/prijave
    console.log('Nešto se događa.');
    next(); // idi na sljedeću rutu
});

apiRoutes.use(function(req, res, next) {

// provjera korisničkih podataka prilikom logirana/prijave

console.log('Nešto se događa.');

next(); // idi na sljedeću rutu

});

Kreiranje ruta

Krećemo s izradom ruta za naše korisnike.

Dodavanje korisnika

POST http://localhost:8080/api/dodajkorisnika

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

   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
            };      
			
            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();
            });
    });
})

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

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

};

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();

});

})

Dohvaćanje svih korisnika

GET http://localhost:8080/api/pregledkorisnika

apiRoutes.get('/pregledkorisnika', function(req, res,next){

pool.getConnection(function(err, connection) {

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

       var query = "SELECT * FROM korisnik ORDER BY k_id ASC";
       
        var table = ["korisniciapi"];
        
        query = mysql.format(query,table);

        connection.query(query,function(err,rows){
           connection.release();
            if (err) {               
               return next(err);
            } else {
                res.json({
                    success: true,
                    popis_korisnika: rows
                });
            }
        });
    });
});

apiRoutes.get('/pregledkorisnika', function(req, res,next){

pool.getConnection(function(err, connection) {

if (err) {

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

}

var query = "SELECT * FROM korisnik ORDER BY k_id ASC";

var table = ["korisniciapi"];

query = mysql.format(query,table);

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

connection.release();

if (err) {

return next(err);

} else {

res.json({

success: true,

popis_korisnika: rows

});

}

});

Uređivanje jednog korisnika

PUT http://localhost:8080/api/korisnik/:k_id

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

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
            };    

            connection.query('update korisnik SET ? where k_id = ?', [korisnik,  req.params.k_id],
            function(err, rows) {
                if (err) {
                   return next(err);
                } else {
                    res.writeHead(200, {
                        "Content-Type": "application/json"
                    });
                    var result = {
                        success: true,
                        detail: rows
                    }
                    res.write(JSON.stringify(result));
                    res.end();
                }
            });
    });
});

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

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

};

connection.query('update korisnik SET ? where k_id = ?', [korisnik, req.params.k_id],

function(err, rows) {

if (err) {

return next(err);

} else {

res.writeHead(200, {

"Content-Type": "application/json"

});

var result = {

success: true,

detail: rows

}

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

res.end();

}

});

Brisanje jednog korisnika

DELETE http://localhost:8080/api/korisnik/:k_id

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();

}

});

Zaključak

Ovo su osnove osnova kada je u pitanju izrada APi-ja. Nismo se dotaknuli pitanja sigurnosti, autentifikacije korisnika niti pokušali slati datoteke, npr. slike od korisnika, pomoću API-ja. Možda o tome bude riječi nekom drugom prilikom.

Naravno da kada budete radili kompleksniji sustav nećete sve rute staviti u server.js nego će svaka ruta imati svoju datoteku.

Posjetite GitHub i preuzmite projekt.

Knjige koje sam pročitao tijekom 2016. godine

Vrijeme je za još jedan blog post, o knjigama, u kojemu ću, kronološki, navesti knjige koje sam pročitao u 2016. godini. Jedan takav objavio sam i prošle godine.

Ovaj put ću uvesti i jednu promjenu pa ću napisati i naslov knjige koju trenutno čitam, a mišljenje o njoj ću dodati nakon završetka čitanja.

Ako imate za preporučiti neku knjigu ili podijeliti svoje iskustvo čitanja možete to učiniti u komentarima.

1.) Preživio sam Vukovar i Ovčaru – Vilim Karlović

“Vjerujem da se svaki čovjek barem jedanput u životu suočio s gubitkom nade u bolji život ili život uopće.”

Manje više svi imamo osjećaj da se nešto loše neće dogoditi baš nama, a i kada bi se dogodilo da to ne bi mogli preživjeti.

Ipak kada se nađemo u novim životnim, naizgled neizlaznim, situacijama shvatimo da možemo i moramo izdržati puno više nego smo ranije mislili da smo u stanju.

Razlog za preživjeti još jedan dan, još jedan sat, mnogi nalaze u obitelji, u vjeri.

Knjiga govori o tome koliko čovjek zapravo može izdržati i što sve može preživjeti kada nema drugog izbora. Imaju li u svemu tome prste sudbina ili sreća svatko neka odgovori za sebe.

2.) The Last Lecture – Randy Pausch

“The key question to keep asking is, Are you spending your time on the right things? Because time is all you have.”

Ova se knjiga nadovezuje na predavanje Randy Pausch Last Lecture: Achieving Your Childhood Dreams.

Pod uvjetom da ste pogledali predavanje neće vam donijeti ništa posebno novo jer knjiga zapravo nije namijenjena vama nego je poruka njegovoj djeci.

Postavljanje Angular 2 + TypeScript projekta

U ovom blog postu proći ću kroz proces postavljanja Angular 2 projekta od nule. Zašto od nule? Zato što mislim da je važno da prilikom postavljanja novog projekta znate zašto ste nešto koristili unatoč činjenici da postoje automatski generatori koji će cijeli projekt postaviti za vas.

Naravno, postoji i jednostavniji način koji ću spomenuti na kraju blog posta, a možda i napišem poseban blog post o tome ako netko izrazi želju u komentarima.

Cilj ovog blog posta:
– Kreirati osnovnu strukturu tj. osnovne datoteke
– Dodati podršku za TypeScript
– Postaviti temelj za Angular 2 i dodati System.js
– I konačno, početi koristiti Angular 2

I – Osnovna struktura

Započet ćemo s kreiranjem mape Angular2-starter-projekt.

I.I

Unutar mape kreirat ćemo index.html

<!DOCTYPE html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <title>Angular 2 - starter projekt</title>
  <!-- CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- JS -->
 
</head>

<body>
   Angular 2 sadržaj.
</body>
</html>

<!DOCTYPE html>

<head>

<title>Angular 2 - starter projekt</title>

</head>

<body>

Angular 2 sadržaj.

</body>

</html>

I.II

i package.json pomoću naredbe npm init --yes. Što je $ npm init i čemu služi --yes?

{
  "name": "Angular2-starter-projekt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

{

"name": "Angular2-starter-projekt",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC"

}

Već sada možemo otvoriti index.html u web pregledniku i vidjeti “Angular 2 sadržaj”. Za sada je to samo obična HTML datoteka koju je potrebno osvježiti (F5) u web pregledniku prilikom svake promjene kako bi se one prikazale i daleko je od Angular 2 aplikacije koju želimo napraviti.

I.III

Da bi to promijenili dodat ćemo lite-server, prema preporuci angular.io resursa, koji će služiti za pokretanje aplikacije, automatsko otvaranje u web pregledniku i automatsko osvježavanje prilikom promjena u datotekama.

Lite-server dodajemo pomoću naredbe $ npm install lite-server --save-dev.

Nakon instalacije možemo primijetiti dvije stvari, a to su node_modules mapa, u kojoj će se nalaziti svi budući NPM paketi, i promjena unutar package.json u kojemu se sada nalazi i informacija da naš projekt koristi lite-server.

"devDependencies": {
    "lite-server": "^2.2.2"
  }

"devDependencies": {

"lite-server": "^2.2.2"

}

Ako sada pokušate pokrenuti naredbu $ npm run lite dobit ćete poruku o grešci npm ERR! missing script: lite jer vam nedostaje još samo jedna sitnica unutar package.json koji sada treba izgledati ovako:

{
  "name": "Angular2-starter-projekt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lite": "lite-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.2.2"
  }
}

{

"name": "Angular2-starter-projekt",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"lite": "lite-server"

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"lite-server": "^2.2.2"

}

Projekt od sada pokrećemo naredbom $ npm run lite te će se on automatski otvoriti u zadanom web pregledniku i osvježavati prilikom svake promjene.

Trenutni izgled aplikacije

Struktura projekta sada izgleda ovako:

| - Angular2-starter-projekt/
     | - node_modules/
          | - .bin/
          | - lite-server/
     | - index.html
     | - package.json

| - Angular2-starter-projekt/

| - node_modules/

| - .bin/

| - lite-server/

| - index.html

| - package.json

II – TypeScript

TypeScript je superset JavaScripta i kada govorimo o Angular 2 projektima gotovo je nemoguće pronaći primjer gdje se TypeScript barem ne spominje kao opcija. Uglavnom, uz TypeScript dolazi puno prednosti o kojima možete nešto više saznati na https://www.typescriptlang.org/.

Angular 2 projekte možete raditi i koristeći čisti JavaScript. Prilikom proučavanja dokumentacije na angular.io u donjem lijevom uglu možete odabrati koju vrstu dokumentacije želite vidjeti. Dokaz koliko Angular gura TypeScript je i taj što ako odaberete JavaScript u najvećem broju slučajeva umjesto dokumentacije možete vidjeti poruku “This page is not yet available in JavaScript. We recommend reading it in TypeScript.“.

II.I

No, vratimo se ovom projektu. Prije svega, trebamo dodati TypeScript i Typings u projekt.

TypeScript služi kao prevoditelj ES6 u ES5 tj. JavaScript koji će web preglednik moći razumjeti, a Typings je alat koji omogućava dodavanje proširenja za TypeScript.

Oboje ih možemo istovremeno dodati u projekt naredbom
$ npm install --save-dev typescript typings.

Promjena se odmah reflektira na package.json koji sada izgleda malo drugačije:

{
  "name": "Angular2-starter-projekt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lite": "lite-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.2.2",
    "typescript": "^2.1.4",
    "typings": "^2.1.0"
  }
}

{

"name": "Angular2-starter-projekt",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"lite": "lite-server"

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"lite-server": "^2.2.2",

"typescript": "^2.1.4",

"typings": "^2.1.0"

}

II.II

Sada možemo kreirati tsconfig.json i typings.json prema uputama na https://angular.io/docs/ts/latest/guide/typescript-configuration.html

tsconfig.json ćemo kreirati ručno i kopirati sljedeće unutar datoteke:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
   }
}

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"removeComments": false,

"noImplicitAny": false

}

typings.json ćemo kreirati pomoću naredbe $ typings install dt~core-js dt~jasmine dt~node --save --global, ali da ne bi dobili poruku o grešci typings: command not found prvo pokrenite naredbu $ npm install -g typings.

typings.json sada izgleda ovako:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.9.7+20161130133742",
    "jasmine": "registry:dt/jasmine#2.5.0+20161228223817",
    "node": "registry:dt/node#6.0.0+20161229171858"
  }
}

{

"globalDependencies": {

"core-js": "registry:dt/core-js#0.9.7+20161130133742",

"jasmine": "registry:dt/jasmine#2.5.0+20161228223817",

"node": "registry:dt/node#6.0.0+20161229171858"

}

Vraćamo se opet na package.json kojemu ćemo reći koje skripte da pokrene prilikom startanja projekta.

{
  "name": "Angular2-starter-projekt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.2.2",
    "typescript": "^2.1.4",
    "typings": "^2.1.0"
  }
}

{

"name": "Angular2-starter-projekt",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"lite": "lite-server",

"tsc": "tsc",

"tsc:w": "tsc -w",

"typings": "typings",

"postinstall": "typings install"

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"lite-server": "^2.2.2",

"typescript": "^2.1.4",

"typings": "^2.1.0"

}

II.III

Dodat ćemo još jedan modul u projekt tako da možemo istovremeno pokrenuti lite-server koji će u web pregledniku podići projekt i typescript watch koji će pratiti promjene u .ts datotekama i kompajlirati ih u .js kako bi ih web preglednik mogao čitati.

Taj modul se zove concurrently a instaliramo ga pomoću naredbe
$ npm install concurrently --save-dev

Nakon instalacije potrebno je još ubaciti sljedeće u package.json

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "postinstall": "typings install"
  },

"scripts": {

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",

"lite": "lite-server",

"tsc": "tsc",

"tsc:w": "tsc -w",

"typings": "typings",

"postinstall": "typings install"

Aplikaciju od sada pokrećemo naredbom $ npm start.

Struktura projekta sada izgleda ovako:

| - Angular2-starter-projekt/
     | - node_modules/
          | - .bin/
          | - concurrently/
          | - lite-server/
          | - typescript/
          | - typings/
     | - index.html
     | - package.json
     | - tsconfig.json
     | - typings.json

| - Angular2-starter-projekt/

| - node_modules/

| - .bin/

| - concurrently/

| - lite-server/

| - typescript/

| - typings/

| - index.html

| - package.json

| - tsconfig.json

| - typings.json

III – Temelj za Angular 2 i System.js

Do sada smo postavili osnovnu strukturu budućeg starter projekta, dodali podršku za TypeScript i sada je vrijeme da prijeđemo na Angular 2. Ipak, pošto želimo koristiti napredne ES6 mogućnosti koje web preglednici još uvijek ne podržavaju trebaju nam neki dodaci poput Core JS Shim, Zone.js, Reflect Metadata, RxJS i SystemJS kako bi te prepreke zaobišli.

Da ne bi bilo da sam ja to sada izmislio, info o tome se do prije mjesec dana mogla pronaći u službenoj Angular 2 dokumentaciji. A ako bolje pogledate primijetit ćete da se i dalje nalazi u QuickStart seed projektu unutar index.html.

III.I

Potrebne dodatke dodat ćemo istovremeno u projekt pomoću naredbe
$ npm install core-js reflect-metadata zone.js rxjs systemjs --save

I kao što možete vidjeti package.json je postao bogatiji za

 "dependencies": {
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "systemjs": "^0.19.41",
    "zone.js": "^0.7.4"
  }

"dependencies": {

"core-js": "^2.4.1",

"reflect-metadata": "^0.1.9",

"rxjs": "^5.0.2",

"systemjs": "^0.19.41",

"zone.js": "^0.7.4"

}

III.II

Sada možemo dodati osnovne pakete koje ćemo koristiti u svim budućim Angular 2 projektima, a koje ne bi mogli koristiti bez dodataka iz prethodnog koraka. Znači sada dodajemo sljedeće pakete:

Istovremeno ćemo ih dodati u projekt naredbom
$ npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic --save

Osim tih osnovih paketa savjetujem da odmah dodate i sljedeće jer teško je zamisliti bilo kakav ozbiljan Angular 2 projekt bez ovih paketa:

$ npm install @angular/router @angular/http @angular/forms --save

Promjena se odmah reflektira na package.json:

 "dependencies": {
    "@angular/common": "^2.4.1",
    "@angular/compiler": "^2.4.1",
    "@angular/core": "^2.4.1",
    "@angular/forms": "^2.4.1",
    "@angular/http": "^2.4.1",
    "@angular/platform-browser": "^2.4.1",
    "@angular/platform-browser-dynamic": "^2.4.1",
    "@angular/router": "^3.4.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "systemjs": "^0.19.41",
    "zone.js": "^0.7.4"
  }

"dependencies": {

"@angular/common": "^2.4.1",

"@angular/compiler": "^2.4.1",

"@angular/core": "^2.4.1",

"@angular/forms": "^2.4.1",

"@angular/http": "^2.4.1",

"@angular/platform-browser": "^2.4.1",

"@angular/platform-browser-dynamic": "^2.4.1",

"@angular/router": "^3.4.1",

"core-js": "^2.4.1",

"reflect-metadata": "^0.1.9",

"rxjs": "^5.0.2",

"systemjs": "^0.19.41",

"zone.js": "^0.7.4"

}

III.III

Sada nam treba System.js koji će Angular 2 aplikaciji reći gdje se svi ranije instalirati paketi nalaze. Opet, da ne izmišljamo toplu vodu jednostavno ću kopirati sadržaj te datoteke iz QuickStart seed projekta. Inače, i ovo se do prije koji tjedan nalazilo u službenoj Angular 2 dokumentaciji.

U mapi projekta kreiramo systemjs.config.js sa sljedećim sadržajem:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

/**

* System configuration for Angular 2 samples

* Adjust as necessary for your application needs.

(function(global) {

// map tells the System loader where to look for things

var map = {

'app': 'app',

'@angular': 'node_modules/@angular',

'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',

'rxjs': 'node_modules/rxjs'

};

// packages tells the System loader how to load when no filename and/or no extension

var packages = {

'app': { main: 'main.js', defaultExtension: 'js' },

'rxjs': { defaultExtension: 'js' },

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

};

var ngPackageNames = [

'common',

'compiler',

'core',

'forms',

'http',

'platform-browser',

'platform-browser-dynamic',

'router',

'router-deprecated',

];

// Individual files (~300 requests):

function packIndex(pkgName) {

packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };

}

// Bundled (~40 requests):

function packUmd(pkgName) {

packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

}

// Most environments should use UMD; some (Karma) need the individual index files

var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages

ngPackageNames.forEach(setPackageConfig);

var config = {

map: map,

packages: packages

};

System.config(config);

})(this);

III.IV

Vratimo se na index.html u koji ćemo sada dodati putanje do svega što smo dodali do sada.

<head>
  <meta charset="UTF-8">
  <title>Angular 2 - starter projekt</title>
  <!-- CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- JS -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app').catch(function(err) { console.error(err); });
  </script>
</head>

<head>

<title>Angular 2 - starter projekt</title>

System.import('app').catch(function(err) { console.error(err); });

</script>

</head>

Struktura projekta sada izgleda ovako:

| - Angular2-starter-projekt/
     | - node_modules/
          | - .bin/
          | - @angular/
          | - concurrently/
          | - core-js/
          | - lite-server/
          | - reflect-metadata/
          | - rxjs/
          | - systemjs/
          | - typescript/
          | - typings/
          | - zone.js/
     | - index.html
     | - package.json
     | - systemjs.config.js
     | - tsconfig.json
     | - typings.json

| - Angular2-starter-projekt/

| - node_modules/

| - .bin/

| - @angular/

| - concurrently/

| - core-js/

| - lite-server/

| - reflect-metadata/

| - rxjs/

| - systemjs/

| - typescript/

| - typings/

| - zone.js/

| - index.html

| - package.json

| - systemjs.config.js

| - tsconfig.json

| - typings.json

IV – Napokon Angular 2

Sve do sada bilo je postavljanje projekta, s sada napokon možemo zaroniti u Angular 2. U mapi projekta kreirati ćemo novu mapu koja će se zvati app. To je mapa s kojom ćemo u budućnosti najviše raditi jer u njoj će se nalaziti sve ono što u konačnici čini Angular 2 aplikaciju.

IV.I

A mapi app kreirati ćemo datoteku app.component.ts te će se automatski kreirati app.component.js i app.component.js. Ako nisu samo pokrenite projekt koristeći $ npm start.

IV.II

Unutar app.component.ts kreirat ćemo prvu komponentu

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

@Component({
  selector: 'my-app',
  template: `
    <div class="jumbotron">
      <h1>Angular 2 sadržaj iz komponente!</h1>
    </div>
  `,
  styles: [`
    h1 { color: red; }
  `]
})
export class AppComponent {}

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

@Component({

selector: 'my-app',

template: `

<h1>Angular 2 sadržaj iz komponente!</h1>

</div>

styles: [`

h1 { color: red; }

})

export class AppComponent {}

IV.III

Sadržaj iz gornjeg H1 taga još uvijek se ne vidi na početnoj stranici projekta. Da bi se vidio potrebno je kreirati app.module.ts koji služi kao centralno mjesto za sve Angular 2 komponente koje onda možemo koristiti kroz cijelu aplikaciju.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule
],
  declarations: [ AppComponent
],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

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

import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({

imports: [ BrowserModule

declarations: [ AppComponent

bootstrap: [ AppComponent ]

})

export class AppModule {}

IV.IV

I sada još to trebamo povezati sa ostatkom aplikacije. To ćemo napraviti tako da kreiramo main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

IV.V

I konačno. Sada možemo prikazati sadržaj komponente na početnoj stranici aplikacije, a to činimo dodavanjem selektora selector: 'my-app' komponente AppComponent u index.html

<body>
  <my-app></my-app> 
</body>

<body>

<my-app></my-app>

</body>

Aplikacija sada izgleda ovako:

Trenutna struktura projekta:

 | - Angular2-starter-projekt/
     | - app/
          | - app.component.js
          | - app.component.js.map
          | - app.component.ts
          | - app.module.js
          | - app.module.js.map
          | - app.module.ts
          | - app.main.js
          | - app.main.js.map
          | - app.main.ts
     | - node_modules/
          | - .bin/
          | - @angular/
          | - concurrently/
          | - core-js/
          | - lite-server/
          | - reflect-metadata/
          | - rxjs/
          | - systemjs/
          | - typescript/
          | - typings/
          | - zone.js/
     | - index.html
     | - package.json
     | - systemjs.config.js
     | - tsconfig.json
     | - typings.json

| - Angular2-starter-projekt/

| - app/

| - app.component.js

| - app.component.js.map

| - app.component.ts

| - app.module.js

| - app.module.js.map

| - app.module.ts

| - app.main.js

| - app.main.js.map

| - app.main.ts

| - node_modules/

| - .bin/

| - @angular/

| - concurrently/

| - core-js/

| - lite-server/

| - reflect-metadata/

| - rxjs/

| - systemjs/

| - typescript/

| - typings/

| - zone.js/

| - index.html

| - package.json

| - systemjs.config.js

| - tsconfig.json

| - typings.json

I to bi bilo to što se tiče postavljanja starter Angular 2 projekta. Imate sve što vam treba za sve buduće projekte i ne morate ovaj postupak ponovo prolaziti. Ipak, idemo još samo za kraj to malo uljepšati.

IV.VI

S obzirom da nam je prilikom rada na projektu najbitnija mapa app za kraj ćemo se fokusirati na nju i datoteke u njoj. Vjerujem da ste do sada već shvatili da su nam najbitnije .ts datoteke koje se automatski kompajliraju u js. i s obzirom da ćemo samo na njima raditi nema potrebe da nam i kompajlirane .js datoteke bezveze stoje u istoj mapi i smo prave gužvu. Zato ćemo sada napraviti da se kompajlirane .js datoteke automatski spremaju u dist mapu koju ćemo sada kreirati.

To ćemo postići tako da tsconfig.json pod "compilerOptions" dodamo "outDir": "dist" .

I zadnja stvar koju moramo napraviti kako bi dist mapa imala svoju svrhu je promijeniti 'app':'dist', u 'app': 'dist', unutar systemjs.config.js tako da web preglednik zna iz koje mape će čitati datoteke za prikaz aplikacije.

I konačna struktura projekta izgleda ovako:

 | - Angular2-starter-projekt/
     | - app/
          | - app.component.ts
          | - app.module.ts
          | - app.main.ts
     | - dist/
          | - app.component.js
          | - app.component.js.map
          | - app.module.js
          | - app.module.js.map
          | - app.main.js
          | - app.main.js.map
     | - node_modules/
          | - .bin/
          | - @angular/
          | - concurrently/
          | - core-js/
          | - lite-server/
          | - reflect-metadata/
          | - rxjs/
          | - systemjs/
          | - typescript/
          | - typings/
          | - zone.js/
     | - index.html
     | - package.json
     | - systemjs.config.js
     | - tsconfig.json
     | - typings.json

| - Angular2-starter-projekt/

| - app/

| - app.component.ts

| - app.module.ts

| - app.main.ts

| - dist/

| - app.component.js

| - app.component.js.map

| - app.module.js

| - app.module.js.map

| - app.main.js

| - app.main.js.map

| - node_modules/

| - .bin/

| - @angular/

| - concurrently/

| - core-js/

| - lite-server/

| - reflect-metadata/

| - rxjs/

| - systemjs/

| - typescript/

| - typings/

| - zone.js/

| - index.html

| - package.json

| - systemjs.config.js

| - tsconfig.json

| - typings.json

Zaključak

I to je sve! Imate spreman starter Angular 2 + TypeScript projekt. Jednom kada ste ovo napravili spremite projekt na sigurno i koristite prilikom izrade svake sljedeće Angular 2 aplikacije kako bi si ubrzali posao. Naravno, možete dodati ili oduzeti NPM module po želji ovisno o tome što sve želite imati u osnovi svake sljedeće Angular 2 aplikacije.

Rekao sam na početku da ću spomenuti brži način za stvaranje starter projekta, a to je koristeći Angular-CLI koji za vas kreira čitav projekt spreman za korištenje kroz samo nekoliko sekundi. Ipak, korisno je ovako rastrančirati strukturu čisto da se bolje razumije od čega se uopće i zašto projekt sastoji.

Koristite li Angular 2 i TypeScript? Kakva su dosadašnja iskustva?

Priprema i objava Ionic aplikacije na Google Play Store

Ako čitate ovaj blog post vjerojatno već imate gotovu Ionic aplikaciju koju još samo želite postaviti na Google Play Store. Na pravom ste mjestu. U ovom blog postu možete vidjeti koje je sve korake potrebno napraviti kako bi Ionic aplikacija bila spremna za objavu.

Ovaj blog post pokriva scenarij objave besplatne Android aplikacije tj. aplikacije koja ne sadržava in-app purchase ili neke druge specijalne uvjete, a Google će vašu aplikaciju odobriti kroz nekoliko sati ili najviše nekoliko dana.

Ovakve slične upute već postoje na službenim Ionic Framework web stranicama, ali one govore samo kako nešto napraviti, ali ne i zašto pa sam primjetio da se većina novih developera češe po glavi prateći sve te silne korake, a da pri tome ne znaju zašto nešto rade. Ovdje ćete dobiti širu sliku i imati mogućnost postaviti pitanje u slučaju da negdje zapnete.

Uvod

Priprema i objava aplikacije, neovisno o tome o kojoj platformi je riječ u osnovi sadržava iste korake:

Mehanizam za potpisivanje aplikacije – za Android se koristi keystore, a za iOS se koristi signing identity. Različiti nazivi, ali ista svrha, a to je omogućiti vam potvrdu da ste autor neke aplikacije. Ta će vam potvrda trebati svaki put kada budete htjeli napraviti nadogradnju (update) aplikacije na trgovini aplikacijama.
Mjesto za unos detalja o aplikaciji – čak i prije nego završite s izradom aplikacije za pretpostaviti je da već znate koje ćete joj ime dati, koja joj je namjena i vjerovatno već imate ostale promotivne materijale pomoću kojih ćete se potencijalnim korisnicima pokušati što više približiti kako bi preuzeli aplikaciju.
Izrada i optimizacija izvršne datoteke koja će se pokretati na mobilnom uređaju – za Android se ta izvršna datoteka tj. APK postavlja direktno na Google Play Store stranici dok se za iOS (IPA) obavlja koristeći Xcode.

Prije izrade produkcijske verzije Ionic aplikacije:

uklonite nepotrebne datoteke koje ste tijekom razvoja aplikacije koristili
uklonite nepotrebne pluginove i ostale dodatke
umanjite slike korištene u aplikaciji tj. kompresirajte ih
kreirajte ikonu aplikacije i početni zaslon

Priprema Android aplikacije

1.) Uklonite Cordova Console plugin

Ovaj vam plugin omogućava testiranje aplikacije tijekom izrade i nije vam potreban u produkciji. Uklonit ćete ga pomoću naredbe:

$ cordova plugin rm cordova-plugin-console

1	$ cordova plugin rm cordova-plugin-console

2.) Kreirajte privatni ključ s kojim ćete potpisati aplikaciju

Bez privatnog ključa aplikaciju niti ne možete postaviti na Google Play Store i zbog toga je jasno koliko je ovaj korak bitan. Ovaj ćete ključ koristiti kroz cijeli životni vijek aplikacije tj. prilikom dodavanja nadogradnji (updatea). Kako bi kreirali privatni ključ koristit ćete keystore unutar naredbenog retka (command-line utility). Privatni ključ vrijedi 10 000 dana što bi trebalo biti više nego dovoljno da pokrije životni vijek aplikacije.

$ keytool -genkey -v -keystore NazivAplikacije.keystore -alias NazivAplikacije -keyalg 
RSA -keysize 2048 -validity 10000

1 2	$ keytool -genkey -v -keystore NazivAplikacije.keystore -alias NazivAplikacije -keyalg RSA -keysize 2048 -validity 10000

Ova će naredba stvoriti MojaAplikacija.keystore datoteku koju možete smjestiti bilo gdje na računalo i koju morate čuvati jer će vam trebati prilikom prvog potpisivanja aplikacije, ali i prilikom svake nadogradnje. Svaka verzija aplikacije mora biti potpisana sa istim privatnim ključem.

P.S. Ako dobijete poruku „ bash: keytool: command not found “ znači da niste dobro postavili razvojnu okolinu tj. da morate dodati novu varijablu okruženja „C:\Program Files\Java\jdk1.8.0_111\bin“ pod Environment Variables – System variables – Path.

3.) Kreirajte nepotpisani APK

Pomoću naredbe build izradite nepotpisani APK.

$ cordova build --release android

1	$ cordova build --release android

Novi APK ćete moći pronaći u platforms/android/build/outputs/apk/android-release-unsigned.apk . Kako bi si olakšali idući korak APK možete odmah preimenovati u NazivAplikacije.apk.

4.) Potpišite APK koristeći privatni ključ

Potpisivanje APK-a obavlja se pomoću alata jarsigner. Kopirajte privatni ključ NazivAplikacije.keystore (morate znati lozinku privatnog ključa) i APK NazivAplikacije.apk u istu mapu te pokrenite naredbu:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore 
NazivApliakcije.keystore NazivAplikacije.apk NazivAplikacije

1 2	jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore NazivApliakcije.keystore NazivAplikacije.apk NazivAplikacije

Ako dobijete poruku o grešci ponovite prijašnje korake.

5.) Optimizacija APK-a

Ovo je zadnji korak u pripremi vašeg APK-a za objavu. Alat zipalign će optimizirati vaš APK tako da bolje iskorištava resurse mobilnog uređaja.

Pokrenite naredbu:

$ zipalign -v 4 NazivAplikacije.apk NazivAplikacijeObjava.apk

1	$ zipalign -v 4 NazivAplikacije.apk NazivAplikacijeObjava.apk

U ovom primjeru novi APK koji ćete postaviti na Google Play Store zove se NazivAplikacijeObjava.apk.

P.S. Ako dobijete poruku „ bash: zipalign: command not found “ znači da niste dobro postavili razvojnu okolinu tj. da morate dodati novu varijablu okruženja „C:\Users\Tomislav\AppData\Local\Android\android-sdk\build-tools\24.0.3“ pod Environment Variables – System variables – Path.

Postavljanje APK-a na Google Play Store

1.) Registracija

Posjetite Google Play Developer Console i registrirajte se.

2.) Prijavite se u Google Developer Console i dodajte aplikaciju klikom na Add new application te navedite jezik i naziv aplikacije pa odaberite Upload APK

3.) Dodajte APK

APK možete odmah poslati u produkciju, ali isto tako možete pokrenuti i alfta tj. beta test ako želite aplikaciju testirati među kontroliranom grupom osoba prije objave produkcijske verzije koja bi bila dostupna svima. Kada pokrenete alfa tj. beta test korisnike možete pozvati unosom njihove adresa elektroničke pošte ili im poslati URL na alfa tj. beta verziju aplikacije.

3.) Odaberite Store Listing kako bi dodali osnovne informacije o aplikaciji

4.) Unesite grafičke elemente

5.) Unesite ostale detalje i kliknite na Save draft u gornjem densom uglu ekrana kako bi sve ranije uneseno spremili

6.) Ispunite kratak upitnik kako bi vaša aplikacija dobila pripadajuću ocjenu (Content Rating) te navedite koje države želite pokriti svojom aplikacijom te eventualno dodajte cijenu (Pricing & Distribution). Svaka stavka iz ovog izbornika mora biti zelena.

7.) Objavite aplikaciju

Kada ste ispunili sve navedeno, Ready to publish, spremni ste za objavu aplikacije Publish app.

Nadogradnja (update)

Svaki sljedeći put kada želite nadograditi aplikaciju morate proći gore navedene korake od 1 do 5 osim koraka 2 jer keystore već imate.

Prije nego ponovite taj proces pobrinite se da u config.xml navedete novi version broj koji mora biti veći od onoga koji se u tom trenutku nalazi na Google Play Store.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.tomislavstankovic.nazivaplikacije" version="0.0.2" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="https://cordova.apache.org/ns/1.0">
  <name>myApp</name>
  <description>
        Primjer Ionic aplikacije.
    </description>
  <author email="you@example.com" href="https://example.com.com/">
     Tomislav Stanković
    </author>

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<name>myApp</name>

Primjer Ionic aplikacije.

</description>

Tomislav Stanković

</author>

Kako Ionic aplikaciju ugraditi u postojeće web stranice

Na službenim web stranicama Ionic Frameworka navedena je sljedeća definicija

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

S obzirom da Ionic aplikacija u svojoj osnovi nije ništa više od obične web stranice nameće se pitanje – može li se Ionic aplikacija prikazati kao web aplikacija ili ugraditi u postojeće web stranice? Može.

Neovisno o tome radi li se o Ionic1 ili Ionic2 aplikaciji sve što trebate je uzeti www mapu i smjestiti ju na svoj web server. Npr. u ovom slučaju ja sam www mapu putem FTP-a stavio unutar /public_html/tomislavstankovic.com/ . I to je to.

Ipak, ako koristite ngCordova pluginove za Ionic1 ili Ionic Native za Ionic2 trebate znati da ti dodaci neće raditi u web pregledniku.

Cordova plugins do not work while developing in your browser, because each plugin accesses a specific API (such as camera, microphone, accelerometer) which is not available in your browser. Additionally, some plugins don’t work in the emulator, such as the Camera plugin, so development on your physical device is required.

Jednom kada ste www mapu postavili na web server aplikaciju možete prikazati na dva načina:

1) Direktno putem URL-a na https://example.com/www/

2.) Na web stranici unutar <iframe> taga

<section id="ionic">
  <div class="container">
     <div class="row">
         <div class="col-lg-12 text-center">
              <h2>Primjer ugrađene Ionic aplikcije</h2>
              <iframe src="https://www.tomislavstankovic.com/www/" width="320" height="568"></iframe>
         </div>
      </div>
  </div>
</section>

<h2>Primjer ugrađene Ionic aplikcije</h2>

</div>

</section>

Inače, inspiracija za ovaj blog post stigla je sa StackOverflowa.