Tomislav Stanković, Autor na Tomislav Stanković

Ionic Insomnia – Nitko nije lud da spava

Iako je imperativ svake mobilne aplikacije brzina nekada je jednostavno potrebno čekati da se nešto unutar aplikacije dogodi.

Npr. ako je u tijeku nekakva sinkronizacija koja traje dulje od zadanog vremena mobilnog uređaja prije gašenja ekrana dogoditi će se da će se ekran ugasiti za vrijeme te sinkronizacije. U tom se slučaju može dogoditi, ako drugačije nije postavljeno, da se sinkronizacija prekine.

Kako bi se takav scenarij spriječio i kako se korisnik mobilne aplikacije ne bi zbunio zbog iznenadnog gašenja ekrana u pola neke radnje može se koristiti Insomnia plugin.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu.

$ ionic start IonicInsomnia blank
$ cd IonicInsomnia
$ ionic cordova platform add android

$ ionic start IonicInsomnia blank

$ cd IonicInsomnia

$ ionic cordova platform add android

Insomnia

Ionic Native plugin koji ću u ovom slučaju instalirati zove se Insomnia.

Instaliram ga sljedećim naredbama:

$ ionic cordova plugin add cordova-plugin-insomnia
$ npm install --save @ionic-native/insomnia

1 2	$ ionic cordova plugin add cordova-plugin-insomnia $ npm install --save @ionic-native/insomnia

I navodim ga unutar app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Insomnia } from '@ionic-native/insomnia';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Insomnia,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

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

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

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

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

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

import { HomePage } from '../pages/home/home';

import { Insomnia } from '@ionic-native/insomnia';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Insomnia,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Tek sada ga mogu koristiti unutar aplikacije.

Za potrebu ovog primjera funkcije ću pozivati klikom na gumb.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Insomnia
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
  <button ion-button full color="secondary" (click)="keepAwake()">keepAwake</button>

  <button ion-button full color="dark" (click)="allowSleepAgain()">allowSleepAgain</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Insomnia

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full color="secondary" (click)="keepAwake()">keepAwake</button>

<button ion-button full color="dark" (click)="allowSleepAgain()">allowSleepAgain</button>

</ion-content>

Klikom na gumb keepAwake spriječavam mobilni uređaj da ode u sleep mode, a klikom na allowSleepAgain ponovno dopuštam zadano ponašanje. U ovom slučaju ekran uređaja ugasi se nakon 15 sekundi neaktivnosti.

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

import { Insomnia } from '@ionic-native/insomnia';

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

  constructor(public navCtrl: NavController,
              private _insomnia: Insomnia) {}
  
  keepAwake(){
    this._insomnia.keepAwake()
      .then(
        () => console.log('success'),
        () => console.log('error')
      );
  }

  allowSleepAgain(){
    this._insomnia.allowSleepAgain()
     .then(
        () => console.log('success'),
        () => console.log('error')
      );
  }

}

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

import { NavController } from 'ionic-angular';

import { Insomnia } from '@ionic-native/insomnia';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private _insomnia: Insomnia) {}

keepAwake(){

this._insomnia.keepAwake()

.then(

() => console.log('success'),

() => console.log('error')

);

}

allowSleepAgain(){

this._insomnia.allowSleepAgain()

.then(

() => console.log('success'),

() => console.log('error')

);

}

Zaključak

Insomnia je odličan plugin koji svoju svrhu u potpunosti ispunjava. Različiti su scenariji u kojima može biti korišten. U ovom blog postu prikazan je samo jedan od njih.

Za kraj, struktura projekta prema package.json

{
  "name": "IonicInsomnia",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/insomnia": "^4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-insomnia": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "IonicInsomnia",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"private": true,

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

"dependencies": {

"@angular/animations": "5.2.10",

"@angular/common": "5.2.10",

"@angular/compiler": "5.2.10",

"@angular/compiler-cli": "5.2.10",

"@angular/core": "5.2.10",

"@angular/forms": "5.2.10",

"@angular/http": "5.2.10",

"@angular/platform-browser": "5.2.10",

"@angular/platform-browser-dynamic": "5.2.10",

"@ionic-native/core": "4.7.0",

"@ionic-native/insomnia": "^4.7.0",

"@ionic-native/splash-screen": "4.7.0",

"@ionic-native/status-bar": "4.7.0",

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

"cordova-plugin-device": "^2.0.2",

"cordova-plugin-insomnia": "^4.3.0",

"cordova-plugin-ionic-keyboard": "^2.0.5",

"cordova-plugin-ionic-webview": "^1.1.19",

"cordova-plugin-splashscreen": "^5.0.2",

"cordova-plugin-whitelist": "^1.3.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.10",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

"@ionic/app-scripts": "3.1.9",

"typescript": "~2.6.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

"cordova-plugin-ionic-webview": {},

"cordova-plugin-ionic-keyboard": {},

"cordova-plugin-insomnia": {}

"platforms": [

"android"

]

}

Uvod u Google Sheets API

Nedavno mi je pala na pamet ideja korištenja Google Sheetsa kao baze podataka za nekakvu jednostavniju web ili mobilnu aplikaciju pa sam išao malo istražiti koje sve mogućnosti Google Sheets API ima i kako ih koristiti. U nastavku se može vidjeti nekoliko primjera na osnovu jednog dokumenta s dvije kartice podataka.

Google Developer konzola

Na URL-u https://console.developers.google.com/ kreiram novi projekt.

Nakon toga klikom na ‘Enable Apis And Services‘ krećem u odabir Google Sheets API-ja kako bi ga aktivirao.

Nakon aktivacije kreiram API key koji mi je potreban za slanje upita na API.

Bez njega bi dobio poruku o grešci:

{
  "error": {
    "code": 403,
    "message": "The request is missing a valid API key.",
    "status": "PERMISSION_DENIED"
  }
}

{

"error": {

"code": 403,

"message": "The request is missing a valid API key.",

"status": "PERMISSION_DENIED"

}

Korištenje API-ja

Na sljedećoj se slici može vidjeti koji su mi upiti dostupni

Prikaz podataka

Na sljedećoj adresi https://docs.google.com/spreadsheets/d/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/ nalazi se moja proračunska tablica. Njezin ID je 1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M.

Ako, prema dokumentaciji na slici iznad, odem na Services > Google Sheets API v4 > sheets.spreadsheets.get i unesem ID svoje proračunske tablice dobit ću rezultat s hrpom, meni trenutno nepotrebnih, meta podatka.

S obzirom da se moja proračunska tablica sastoji od dva lista posebno ću pozvati API za svaki list.

Na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Zadaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Zadaci’.

Dok na URL-u https://sheets.googleapis.com/v4/spreadsheets/1NVbthCyv4BuFbU3rv3ZBe0Pw6_4hHCgIdJfkKtvmD-M/values/Podaci?key={YOUR_API_KEY} dohvaćam podatke iz lista ‘Podaci’.

Dodavanje podataka

Na sljedećoj adresi https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append nalazi se dokumentacija vezana uz dodavanje sadržaja.

Ovo još moram testirati u Postmanu.

Zaključak

Ovo je samo uvod u mogućnosti Google Sheets API-a. Za sada je ovo dovoljno čisto da se vidi kako stvar funkcionira, a dalje sve ovisi o specifičnim potrebama. Možda na kraju zaključim da ovo i nije najsretnije rješenje za korištenje unutar web ili mobilne aplikacije.

Ažuriranje Angular projekta sa angular-cli na @angular/cli

U ovom ću blog postu pokazati postupak ažuriranja Angular CLI-a sa verzije angular-cli (1.0.0-beta.28.3) na verziju @angular/cli (1.7.4).

Zašto ažuriranje?

Angular ima mnogo značajki kao što su TypeScript i Ahead of Time (AOT) koje pomažu kod prepoznavanja pogrešaka prilikom ‘buildanja‘ Angular aplikacije. Tim koji stoji iza Angulara trudi se svakom novom verzijom te značajke poboljšavati kako bi prepoznale još više grešaka i radile brže.

Zbog toga se zna dogoditi da kod ažuriranja na noviju verziju budu prepoznate neke greške koje ranije nisu bile uočene.

Uz to, ne treba zaboraviti niti dosta novih značajki koje dolaze s novijim verzijama kao što su Service Worker za progresivne web aplikacije (PWA) i mnoge druge.

Sve to su razlozi za ažuriranje.

Kako ažurirati?

Ažuriranje je potrebno napraviti na dvije razine. Globalno na računalu i lokalno tj. unutar svakog projekta.

Globalna razina

Za početak, provjeravam trenutnu globalnu verziju CLI-a i vidim da je u pitanju angular-cli 1.0.0-beta.28.3 što znači da je ažuriranje potrebno.

$ ng -v

$ ng -v

Pokretanjem sljedeće naredbe uklanjam trenutnu verziju s računala

$ npm uninstall -g angular-cli

1	$ npm uninstall -g angular-cli

Odmah ću očistiti i cache

$ npm cache verify
$ npm cache clean (--force)

1 2	$ npm cache verify $ npm cache clean (--force)

Sada ću instalirati novi @angular/cli

$ npm install -g @angular/cli@latest

1	$ npm install -g @angular/cli@latest

I to je sve što se tiče globalne razine.

Lokalna razina

Sada se prebacujem unutar lokalnog projekta i ako ga pokušam pokrenuti koristeći $ ng serve dobit ću sljedeću poruku

Uzrok tome nalazi se unutar package.json datoteke, a znači da se globalna i lokalna verzija CLI-a ne slažu i da zato nije moguće pokrenuti projekt.

{
  "name": "AngularWebApp",
  "version": "0.0.1",
  "description": "AngularWebApp - update",
  "author": "Tomislav Stanković",
  "license": "ISC",
  "main": "index.js",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^4.4.3",
    "@angular/compiler": "^4.4.3",
    "@angular/compiler-cli": "^4.4.3",
    "@angular/core": "^4.4.3",
    "@angular/forms": "^4.4.3",
    "@angular/http": "^4.4.3",
    "@angular/platform-browser": "^4.4.3",
    "@angular/platform-browser-dynamic": "^4.4.3",
    "@angular/router": "^4.4.3",
    "@ngui/auto-complete": "^0.14.4",
    "angular2-multiselect-dropdown": "^1.3.6",
    "core-js": "^2.5.1",
    "moment": "^2.20.1",
    "mydatepicker": "^2.0.22",
    "ng2-bs3-modal": "^0.10.4",
    "ngx-pagination": "^3.0.3",
    "pdfmake": "^0.1.35",
    "rxjs": "^5.4.3",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "^2.0.2"
  },
  "keywords": [
    "angular"
  ]
}

{

"name": "AngularWebApp",

"version": "0.0.1",

"description": "AngularWebApp - update",

"author": "Tomislav Stanković",

"license": "ISC",

"main": "index.js",

"angular-cli": {},

"scripts": {

"ng": "ng",

"start": "ng serve",

"test": "ng test",

"pree2e": "webdriver-manager update --standalone false --gecko false",

"e2e": "protractor"

"private": true,

"dependencies": {

"@angular/animations": "^4.4.6",

"@angular/cdk": "^2.0.0-beta.12",

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

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

"@angular/compiler-cli": "^4.4.3",

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

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

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

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

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

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

"@ngui/auto-complete": "^0.14.4",

"angular2-multiselect-dropdown": "^1.3.6",

"core-js": "^2.5.1",

"moment": "^2.20.1",

"mydatepicker": "^2.0.22",

"ng2-bs3-modal": "^0.10.4",

"ngx-pagination": "^3.0.3",

"pdfmake": "^0.1.35",

"rxjs": "^5.4.3",

"ts-helpers": "^1.1.1",

"zone.js": "^0.8.17"

"devDependencies": {

"@types/jasmine": "2.5.38",

"@types/node": "^6.0.42",

"angular-cli": "^1.0.0-beta.28.3",

"codelyzer": "~2.0.0-beta.1",

"jasmine-core": "2.5.2",

"jasmine-spec-reporter": "2.5.0",

"karma": "1.2.0",

"karma-chrome-launcher": "^2.0.0",

"karma-cli": "^1.0.1",

"karma-jasmine": "^1.0.2",

"karma-remap-istanbul": "^0.2.1",

"protractor": "~4.0.13",

"ts-node": "1.2.1",

"tslint": "^4.3.0",

"typescript": "^2.0.2"

"keywords": [

"angular"

]

}

Ako želim postojeći projekt prilagoditi da radi sa novim Angular CLI-em trebam napraviti više izmjena. S druge strane, imam i sljedeću opciju, a to je kreirati novi projekt i onda u njega prebaciti dijelove postojećeg projekta što ću sada i napraviti.

Novi projekt kreiram naredbom

$ ng new AngularWebAppNew

1	$ ng new AngularWebAppNew

Iz postojećeg projekta u novi prebaciti ću sljedeće:

– mapu src/assets
– mapu src/app
– datoteku src/index.html
– datoteku src/styles.css
– datoteku src/favicon.ico

Osim toga, unutar nove datoteke package.json trebam dodati i module iz postojećeg projekta.

package.json sada izgleda ovako. Označio sam module koje sam dodao iz ‘stare’ package.json datoteke

{
  "name": "angular-web-app-new",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
	"@ngui/auto-complete": "^0.14.4",
	"angular2-multiselect-dropdown": "^1.3.6",
	"moment": "^2.20.1",
	"mydatepicker": "^2.0.22",
    "ng2-bs3-modal": "^0.10.4",
    "ngx-pagination": "^3.0.3",
    "pdfmake": "^0.1.35"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

{

"name": "angular-web-app-new",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

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

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

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

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

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

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

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

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

"core-js": "^2.4.1",

"rxjs": "^5.5.6",

"zone.js": "^0.8.19",

"@ngui/auto-complete": "^0.14.4",

"angular2-multiselect-dropdown": "^1.3.6",

"moment": "^2.20.1",

"mydatepicker": "^2.0.22",

"ng2-bs3-modal": "^0.10.4",

"ngx-pagination": "^3.0.3",

"pdfmake": "^0.1.35"

"devDependencies": {

"@angular/cli": "~1.7.4",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

Nakon toga pokrećem sljedeću naredbu kako bi se ti moduli instalirali u projekt.

$ npm install

1	$ npm install

I to je to! Projekt je sada temeljen na novom Angular CLI-u i moguće ga je pokrenuti naredbom $ ng serve

CSS i JS se nisu učitali!

U slučaju da nisu učitane sve JS tj. CSS datoteke potrebno ih je iz src/index.html prebaciti unutar src/angular-cli.json na sljedeći način:

Iz index.html-a uzimam

<link rel="stylesheet" type="text/css" href="./app/style/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./app/style/css/style.css">
<link rel="stylesheet" type="text/css" href="./app/style/css/font-awesome.min.css">
<script src="./app/style/js/jquery.min.js"></script>
<script src="./app/style/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./app/style/js/main.js"></script>
...

...

i stavljam ih unutar angular-cli.json

...
"styles": [
        "styles.css",
		"./app/style/bootstrap/dist/css/bootstrap.min.css",
		"./app/style/css/style.css",
		"./app/style/css/font-awesome.min.css"
      ],
      "scripts": [
	     "./app/style/js/jquery.min.js",
		 "./app/style/bootstrap/dist/js/bootstrap.min.js",
		 "./app/style/js/main.js"
	   ],
...

...

"styles": [

"styles.css",

"./app/style/bootstrap/dist/css/bootstrap.min.css",

"./app/style/css/style.css",

"./app/style/css/font-awesome.min.css"

"scripts": [

"./app/style/js/jquery.min.js",

"./app/style/bootstrap/dist/js/bootstrap.min.js",

"./app/style/js/main.js"

...

Zaključak

Iako na prvu ovaj proces može djelovati komplicirano zapravo je vrlo logičan i jednostavan. Ovisno od projekta do projekta može se dogoditi da je potrebno napraviti još dodatne prilagodbe. O svemu tome obavijesti će se nalaziti unutar CMD prozora.

Angular & Marvel API – demo aplikacija

U ovom ću blog postu pokazati kako koristiti Marvel API unutar Angular projekta. Fokus će biti na pravilnoj konfiguraciji API-ja nakon koje je moguće, prema dokumentaciji, koristeći različite parametre dobiti konkretne rezultate.

O Marvel API-ju

Marvel API je RESTful alat koji pomaže developerima stvoriti web stranice i aplikacije pomoću podataka iz 70 godišnje povijesti Marvela. Trenutno je dostupno šest vrsta resursa kao što su individualni stripovi (Comics), grupe ili serije stripova (Comic series), dijelovi pojedinih stripova (Comic stories), veliki događaji iz pojedinih stripova (Comic events and crossovers), žene, muškarci i organizacije koji su kreatori stripova (Creators) i likovi iz stripova (Characters).

Originalna putanja za pristup resursima nalazi se na http(s)://gateway.marvel.com/ i trenutno je moguće koristiti samo GET metodu.

Svaki zahtjev koji se uputi na gore navedeni URL mora u sebi sadržavati nekoliko parametara koji se dobiju nakon registracije.

API koji ću koristiti u nastavku ima sljedeći oblik

http://gateway.marvel.com/v1/public/comics?ts=1&apikey=1234&hash=ffd275c5130566a2916217b101f26150

iz čega je vidljivo da se sastoji od tri glavna parametra

apikey = PublicKey
ts – timestamp (or other long string which can change on a request-by-request basis)
hash – md5 ključ ts parametra (npr. md5(ts+privateKey+publicKey))

Postavljanje Angular projekta

Koristeći Angular CLI kreiram novi projekt naredbom

$ ng new AngularMarvelAPI
$ cd AngularMarvelAPI
$ ng serve

$ ng new AngularMarvelAPI

$ cd AngularMarvelAPI

$ ng serve

Odmah ću kreirati i servis za API koristeći naredbu

$ ng g service api

1	$ ng g service api

Kao što se može vidjeti na slici iznad API servis trenutno ne zadovoljava potrebne preduvjete za uspješno korištenje. S obzirom da će taj servis primarno biti korišten za pozivanje HTTP(S) protokola moram dodati @angular/http. Također, koristiti ću i map operator koji će dobivenu vrijednost transformirati u JSON. Na kraju, prema ranije spomenutoj Marevl API dokumentaciji, moram koristiti MD5 hash, u tome će mi pomoći ts-md5 NPM paket koji instaliram naredbom $ npm i ts-md5 --save.

API servis na kraju izgleda ovako

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Md5 } from 'ts-md5/dist/md5';

var PrivateKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var PublicKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var TimeStamp = new Date().getTime();
var hash = Md5.hashStr(TimeStamp + PrivateKey + PublicKey).toString();

@Injectable()
export class ApiService {

  constructor(private _http: Http) { }

  allHeroes(){
		return this._http.get('http://gateway.marvel.com/v1/public/characters?ts=' + TimeStamp + '&apikey=' + PublicKey + '&hash=' + hash + '&limit=100')
				   .map(res => res.json());
  } 

}

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

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

import 'rxjs/add/operator/map';

import { Md5 } from 'ts-md5/dist/md5';

var PrivateKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

var PublicKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

var TimeStamp = new Date().getTime();

var hash = Md5.hashStr(TimeStamp + PrivateKey + PublicKey).toString();

@Injectable()

export class ApiService {

constructor(private _http: Http) { }

allHeroes(){

return this._http.get('http://gateway.marvel.com/v1/public/characters?ts=' + TimeStamp + '&apikey=' + PublicKey + '&hash=' + hash + '&limit=100')

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

}

Sada taj servis mogu koristiti u bilo kojem dijelu Angular aplikacije. Za potrebu ovog primjera zadržat ću se na app.component.ts.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ApiService]
})

export class AppComponent implements OnInit {

  heroes = [];

  constructor(public _apiService: ApiService) { }

  ngOnInit() {
   this.getAllHeroes();
  }

  getAllHeroes(){
    this._apiService.allHeroes().subscribe(
      res => {
        console.log(res);
        for (let i = 0; i < res.data.results.length; i++) { 
          if(res.data.results[i].description.length > 1){
            this.heroes.push({
              id: res.data.results[i].id,
              name: res.data.results[i].name,
              description: res.data.results[i].description,
              modified: res.data.results[i].modified,
              image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,
              details_url: res.data.results[i].urls[0].url
         })
          }
        } 
        console.log(this.heroes);
      });
  }

}

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

import { ApiService } from './api.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [ApiService]

})

export class AppComponent implements OnInit {

heroes = [];

constructor(public _apiService: ApiService) { }

ngOnInit() {

this.getAllHeroes();

}

getAllHeroes(){

this._apiService.allHeroes().subscribe(

res => {

console.log(res);

for (let i = 0; i < res.data.results.length; i++) {

if(res.data.results[i].description.length > 1){

this.heroes.push({

id: res.data.results[i].id,

name: res.data.results[i].name,

description: res.data.results[i].description,

modified: res.data.results[i].modified,

image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,

details_url: res.data.results[i].urls[0].url

})

}

console.log(this.heroes);

});

}

Otvaranjem http://localhost:4200/ adrese odmah se dohvaćaju Marvel likovi sa ranije kreiranog API-ja.

Na kraju to može izgledati i ovako

Na slici iznad se može primijetiti da je prikaz vremena lijepo formatiran i da tako nije izgledao ranije u animaciji. Za to je zaslužan MomentJS.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ApiService]
})

export class AppComponent implements OnInit {

  heroes = [];

  constructor(public _apiService: ApiService) { }

  ngOnInit() {
   this.getAllHeroes();
  }

  getAllHeroes(){
    this._apiService.allHeroes().subscribe(
      res => {
        console.log(res);
        for (let i = 0; i < res.data.results.length; i++) { 
          if(res.data.results[i].description.length > 1){
            this.heroes.push({
              id: res.data.results[i].id,
              name: res.data.results[i].name,
              description: res.data.results[i].description,
              modified: moment(res.data.results[i].modified).format('LL'),
              image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,
              details_url: res.data.results[i].urls[0].url
         })
          }
        } 
        console.log(this.heroes);
      });
  }

}

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

import { ApiService } from './api.service';

import * as moment from 'moment';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [ApiService]

})

export class AppComponent implements OnInit {

heroes = [];

constructor(public _apiService: ApiService) { }

ngOnInit() {

this.getAllHeroes();

}

getAllHeroes(){

this._apiService.allHeroes().subscribe(

res => {

console.log(res);

for (let i = 0; i < res.data.results.length; i++) {

if(res.data.results[i].description.length > 1){

this.heroes.push({

id: res.data.results[i].id,

name: res.data.results[i].name,

description: res.data.results[i].description,

modified: moment(res.data.results[i].modified).format('LL'),

image: res.data.results[i].thumbnail.path + '.' + res.data.results[i].thumbnail.extension,

details_url: res.data.results[i].urls[0].url

})

}

console.log(this.heroes);

});

}

Zaključak

Iz cijelog ovog blog posta najvažniji dio je API servis koji sadržava sve potrebno za uspješan dohvat podataka sa Marvel API-ja. Prikaz podataka radi se ovisno o potrebama od slučaja do slučaja. Konkretno u ovom blog postu fokus je bio na uspješnom dohvatu podataka.

Struktura projekta prema package.json

{
  "name": "angular-marvel-api",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "moment": "^2.22.1",
    "rxjs": "^5.5.6",
    "ts-md5": "^1.2.4",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

{

"name": "angular-marvel-api",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

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

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

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

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

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

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

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

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

"core-js": "^2.4.1",

"moment": "^2.22.1",

"rxjs": "^5.5.6",

"ts-md5": "^1.2.4",

"zone.js": "^0.8.19"

"devDependencies": {

"@angular/cli": "~1.7.4",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

Ako nemaš sumnju u to kako će tvoja budućnost izgledati nemaš niti ambiciju nešto postići

Jeste li se ikada pitali čime se stvarno želite baviti u životu? Možda želite putovati kao što to rade Hrvoje Jurić ili Tomislav Perko, želite imati svoju tvrtku, otvoriti mali kvartovski kafić i biti sam svoj gazda. Što vas sprječava da krenete u ostvarenje svojih želja?

Nekada jednostavno znate čime ćete se baviti čak i prije nego ste krenuli u to. Znate da „morate“ biti izvan „sustava“ na koji je većina navikla, a to je posao od 8 do 16h. Ili upravo suprotno, potreban vam je sustav, struktura i red. Za vas ne postoji druga opcija nego ići odabranim putem. Možda vas je strah što će okolina misliti, ali svejedno krećete u nepoznato i putem upoznajte kako svijet tako i sebe. Mnogi će reći ”Znaš, stvarno želim biti standup komičar, imati svoju tvrtku, proputovati svijet,… ali to mogu ili ću učiniti tek nakon što ________ (umetni izgovor).“, ali kada imate samo taj jedan jedini put kojim morate ići izgovorima jednostavno nema mjesta. Strah vas je kako se nositi s preprekama, pitate se jeste li dorasli tome, istovremeno, okolinu je strah vašeg uspjeha i pitaju se kako vam dokazati da niste za to, ali gurate naprijed jer druga opcija za vas ne postoji. Ili ćete uspjeti ili vas neće biti.

Mnogi će na sve ovo reći „Lako je tebi tako se ponašati, putovati, razvijati startup pa ako i propadneš baš te briga. O meni ovise drugi ljudi i ne mogu si to dopustiti.„

Bezbroj je mogućih izgovora. Svatko može naći jedan. Izgovori kojima si onaj koji ih izgovara može jedino opravdati vlastiti strah od toga da krene u nešto novo, da se makne iz svoje zone komfora. Jer ako i uspije u svojem naumu, dio okoline mu to neće oprostiti jer će poremetiti i njihovo viđenje svijeta. Tada će i ta okolina vidjeti da se može kad se hoće pa se zid opravdanja počinje rušiti, a nitko ne voli kada im drugi ruše obrambene zidove koje su oko sebe godinama gradili.

Svi mi imamo neke prepreke i ograničenja. Ništa nije idealno i put do uspjeha nije ravan. Svaka osoba koja je ikada učinila nešto značajno imala je prepreke i probleme, imala je ljude oko sebe koji o njoj ovise, imala je 24 sata u danu, 7 dana u tjednu i 365 dana u godini. Glazbenici, sportaši, matematičari,… ma tko god bili i čime se god bavili imali su prepreke i probleme pri postizanju izvrsnosti. Oni su uspjeli. Pobijedili su sebe, svoje strahove i sumnje.

Naravno, uvijek postoji i neka (polu)opcija u slučaju da niste do kraja spremni početi živjeti život na način na koji to želite. Tu je plan B. Mislite da ne možete živjeti od putovanja po svijetu pa radite tijekom tjedna da bi mogli putovati vikendom. Na taj se način možete približiti slici svijeta kojeg si želite stvoriti, a da istovremeno ne odskačete previše od prosjeka.

Ako želite svirati kao Maksim Mrvica znači li to da ste spremni svaki dan satima vježbati? Mrvica nije njegov koncert, nije samo spot, on je stvoren od sati i sati vježbanja. Želite dobiti sponzore za svoja putovanja? Koliko ste prije toga spremni putovanja odraditi na rubu umora, gladi i na izmaku snaga bez ikakve garancije da će vas to ikada igdje dovesti? Oni koji sada putuju i za koje se može reći da su u tome uspješni, oni nisu samo njihove objavljene knjige, oni su stvoreni od sati i sati lutanja, putovanja nepoznatim, razmišljanja ”što meni ovo uopće treba!?”.

Svi se susreću sa preprekama i što više želite ići svojim putem biti će i više prepreka. Pratiti postojeće staze može vas dovesti samo do nečega što je već otkriveno od nekoga tko je ranije imao muda tražiti svoj put.

Svi prolazimo kroz teška vremena i razmišljanja kako više ništa nema smisla osim skakanja na glavu u prazan bazen. Trenutci sumnje u sebe i vlastiti izbor nešto su što vas u konačnici jača i odvaja one koji stvarno idu prema onome što žele od onih koji na to nisu spremni. Naravno da je teško uhvatiti se u nedoumici kojim putem krenuti, ali to su odluke koje svako za sebe mora donijeti. To su odluke koje dolaze s godinama. To su odluke koje svakome od nas daju pravo, ali i odgovornost za budućnost. Netko tko je postigao nešto značajno u životu sigurno nije dobio detaljne upute ili se zamarao člancima tipa ”10 načina kako i 10 načina zašto’.

To je ono što vas čini osobom, gradi vam karakter i stvara temelje da možete čvrsto stajati na zemlji znajući da kojim god putem išli i na kakve god probleme naišli da ih možete savladati. Gradite si samopouzdanje, postajete osoba koja će jednoga dana postavljati čvrste temelje za život i svojoj djeci. Postajete osoba koja će jednog dana nekome biti uzor.

Ako nemaš sumnju u to kako će tvoja budućnost izgledati nemaš niti ambiciju nešto postići.

Što kada nemaš druge mogućnosti osim uspjeti!?

P.S. Na pisanje ovog blog postao potaknuo me jedan podcast Joe Rogana u kojemu govori o tome kako se počeo baviti standup komedijom jer ništa drugo nije znao raditi i smatrao je da za ništa drugo nije sposoban. Nije imao izbora. Zbog toga je bio prisiljen pobijediti strah od javnog nastupa i mnoge druge strahove.

P.P.S. Ovaj blog post je napisan 10. studenoga 2015.

Slika preuzeta sa https://www.facebook.com/events/166811593795440/