Arhiva Razvoj - Stranica 10 od 27

Ionic 3 Market

U ovom ću blog postu pokazati kako unutar Ionic aplikacije direktno pristupiti nekoj drugoj aplikaciji koja se nalazi na Google Play Store ili Apple Store koristeći Ionic Native Market plugin.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

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

$ ionic start IonicMarket blank

$ cd IonicMarket

$ ionic cordova platform add android

Pristup trgovini aplikacija

Prema službenoj dokumentaciji, Market plugin instaliram sljedećim naredbama:

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

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

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 { Market } from '@ionic-native/market';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Market,
    {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 { Market } from '@ionic-native/market';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Market,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Sada ću na početnoj stranici home.ts kreirati funkciju pokaziAplikaciju() koja će biti aktivirana prilikom klika na gumb. Toj funkciji proslijedim jedan parametar, a to je ID aplikacije.

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

import { Market } from '@ionic-native/market';

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

  constructor(public navCtrl: NavController,
              private _market: Market) {
  }

  pokaziAplikaciju(){
    this._market.open('com.roadhousegames.lotb');
  }

}

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

import { NavController } from 'ionic-angular';

import { Market } from '@ionic-native/market';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

private _market: Market) {

}

pokaziAplikaciju(){

this._market.open('com.roadhousegames.lotb');

}

Na ekranu će se nalaziti samo jedan gumb.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 Market App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (click)="pokaziAplikaciju()" ion-button full>Pokazi aplikaciju</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 3 Market App

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button (click)="pokaziAplikaciju()" ion-button full>Pokazi aplikaciju</button>

</ion-content>

Konačan rezultat vidi se na sljedećoj slici:

Zaključak

Ovaj plugin na vrlo jednostavan način rješava potrebu otvaranja Google Play Store tj. Apple Store trgovine unutar Ionic aplikacije.

Struktura aplikacije prema package.json

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

{

"name": "IonicMarket",

"version": "0.0.1",

"author": "Tomislav Stanković",

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

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

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

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

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

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

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

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

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

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

"@ionic-native/core": "~4.10.0",

"@ionic-native/market": "^4.10.0",

"@ionic-native/splash-screen": "~4.10.0",

"@ionic-native/status-bar": "~4.10.0",

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

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

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

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

"cordova-plugin-market": "^1.2.0",

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

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

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

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

"typescript": "~2.6.2"

"description": "Ionic Market App",

"cordova": {

"plugins": {

"cordova-plugin-market": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

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

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

"platforms": [

"android"

]

}

Ionic 3 Skeleton Screen – stvaranje dojma brzine

Jedan od detalja koji je jako bitan kod mobilnih aplikacija je brzina ili barem dojam brzine. Brzina se može postići tehničkim poboljšanjima u samom kodu koristeći npr. Lazy Loading, ali opet ostaje onaj dio na koji kao developer ne mogu direktno utjecati, a to je brzina kojom će mi server poslati podatke koje trebam prikazati na ekranu mobilnog uređaja.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. – Mobile Design Details: Avoid The Spinner

Dok se podaci učitavaju korisnik je prisiljen čekati a ja kao developer trebam odlučiti kako pristupiti tom čekanju na način da korisniku zadržim pažnju, da mu dam do znanja da se u pozadini ipak nešto događa.

Tri su glavna pristupa:

– prikazati prazan ekran
– prikazati loader animaciju
– prikazati skeleton screen

Ionic 3 Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom — Izvor: A Bone to Pick with Skeleton Screens

Izrada Skeleton Screena

Definiram varijablu popisKorisnika koja će sadržavati popis korisnika koji dohvatim s API-ja https://jsonplaceholder.typicode.com/users, ali dok podaci ne stignu koristiti ću varijablu privremeniPopisKorisnika koja je zapravo niz (array) od šest stavki.

setTimeout će mi simulirati zastoj na mreži i podatke ću u ovom slučaju čekati tri sekunde za vrijeme kojih će biti prikazan skeleton screen.

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

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

  popisKorisnika: any;
  privremeniPopisKorisnika: Array<any> = new Array(6);

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(data => {
          //console.log(data);
          this.popisKorisnika = data;
        });
    }, 3000);
  }

}

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

popisKorisnika: any;

privremeniPopisKorisnika: Array<any> = new Array(6);

constructor(public navCtrl: NavController) {}

ionViewDidLoad() {

setTimeout(() => {

fetch('https://jsonplaceholder.typicode.com/users')

.then(response => response.json())

.then(data => {

//console.log(data);

this.popisKorisnika = data;

});

}, 3000);

}

Izgled ekrana sastoji se od najobičnijeg popisa korisnika i funkcionalnosti iza koje stoji *ngIf.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Skeleton Screen
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

	<ion-list *ngIf='popisKorisnika'>
		<ion-item *ngFor='let korisnik of popisKorisnika'>
			<h2>{{korisnik.name}}</h2>
			<h3>E-mail: {{korisnik.email}}</h3>
			<p>Tvrtka: {{korisnik.company.name}}</p>
		</ion-item>
	</ion-list>

	<ion-list *ngIf='!popisKorisnika'>
		<ion-item *ngFor='let privremeno of privremeniPopisKorisnika' class='privremeniPodatak'>
			<h2></h2>
			<h3></h3>
			<p></p>
		</ion-item>
	</ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Skeleton Screen

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list *ngIf='popisKorisnika'>

<ion-item *ngFor='let korisnik of popisKorisnika'>

<h2>{{korisnik.name}}</h2>

<h3>E-mail: {{korisnik.email}}</h3>

<p>Tvrtka: {{korisnik.company.name}}</p>

</ion-item>

</ion-list>

<ion-list *ngIf='!popisKorisnika'>

<ion-item *ngFor='let privremeno of privremeniPopisKorisnika' class='privremeniPodatak'>

<p></p>

</ion-item>

</ion-list>

</ion-content>

I za kraj tu je malo CSS-a.

page-home {
    .privremeniPodatak {
        @keyframes animatedBar{
          0%{
              background-position: -406px 0;
          }
          100%{
              background-position: 0 0;
          }
       }
        h2, h3, p {
          background-color: lightgrey;
          opacity: 0.5;
          height: 1em;
          margin-top: 10px;
          position: relative;
          background: linear-gradient(to right, #dddddd , #EEEEEE);
          animation: animatedBar 700ms linear infinite;
          
          &:after {
            position: absolute;
            display: block;
            content: '';
            right: 0;
            bottom: 0;
            top: 0;
            background-color: white;
          }
        }
        h2:after {
          width: 65%;
        }
        h3:after {
          width: 60%;
        }  
        p:after {
          width: 40%;
        }
      }
    }

page-home {

.privremeniPodatak {

@keyframes animatedBar{

0%{

background-position: -406px 0;

}

100%{

background-position: 0 0;

}

h2, h3, p {

background-color: lightgrey;

opacity: 0.5;

height: 1em;

margin-top: 10px;

position: relative;

background: linear-gradient(to right, #dddddd , #EEEEEE);

animation: animatedBar 700ms linear infinite;

&:after {

position: absolute;

display: block;

content: '';

right: 0;

bottom: 0;

top: 0;

background-color: white;

}

h2:after {

width: 65%;

}

h3:after {

width: 60%;

}

p:after {

width: 40%;

}

Na kraju to izgleda ovako:

Zaključak

Skeleton screen je odličan način za stvaranje dojma brzine. U kombinaciji s ostalim tehničkim poboljšanjima performansi mobilne aplikacije može napraviti čuda, a sve u svrhu boljeg korisničkog iskustva.

Struktura aplikacije prema package.json

{
  "name": "Ionic3SkeletonScreen",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.10.0",
    "@ionic-native/splash-screen": "~4.10.0",
    "@ionic-native/status-bar": "~4.10.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.11",
    "typescript": "~2.6.2"
  },
  "description": "Ionic 3 - Skeleton Screen"
}

{

"name": "Ionic3SkeletonScreen",

"version": "0.0.1",

"author": "Tomislav Stanković",

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

"private": true,

"scripts": {

"start": "ionic-app-scripts serve",

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

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

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

"dependencies": {

"@angular/animations": "5.2.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

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

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

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

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

"@ionic-native/core": "~4.10.0",

"@ionic-native/splash-screen": "~4.10.0",

"@ionic-native/status-bar": "~4.10.0",

"@ionic/storage": "2.1.3",

"ionic-angular": "3.9.2",

"ionicons": "3.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

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

"typescript": "~2.6.2"

"description": "Ionic 3 - Skeleton Screen"

}

Ionic 3 – Barcode QR skener

Zahvaljujući Ionic Native pluginovima moguće je u vrlo kratkom vremenu napraviti konkretnu Ionic aplikaciju koja će služiti svrsi. U ovom slučaju riječ je o aplikaciji za skeniranje barkoda što je posebno korisno u skladištima trgovina.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

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

$ ionic start BarcodeScannerApp blank

$ cd BarcodeScannerApp

$ ionic cordova platform add android

Barcode Scanner

Prema službenoj dokumentaciji, Barcode Scanner plugin instaliram sljedećim naredbama:

$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner

1 2	$ ionic cordova plugin add phonegap-plugin-barcodescanner $ npm install --save @ionic-native/barcode-scanner

Ovim je pluginom moguće skenirati sljedeće formate: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED, PDF_417, AZTEC i MSI.

Nakon toga referencu na plugin dodajem i unutar app.module.ts datoteke

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 { BarcodeScanner } from '@ionic-native/barcode-scanner';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
    {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 { BarcodeScanner } from '@ionic-native/barcode-scanner';

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

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

BarcodeScanner,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Tek sada mogu implementirati funkcionalnost za skeniranje barkoda.

Ekran će se sastojati od gumba za pokretanje skeniranja i prostora iznad njega za prikaz skeniranih podataka.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Barcode Scanner App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-row *ngIf="rezultat">
    <ion-col>
         {{rezultat.text}}
    </ion-col>
    <ion-col>
        {{rezultat.format}}
      </ion-col>
  </ion-row>
 
  <button ion-button full (click)="skeniraj()">Skeniraj</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic3 - Barcode Scanner App

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-row *ngIf="rezultat">

<ion-col>

</ion-col>

<ion-col>

</ion-col>

</ion-row>

<button ion-button full (click)="skeniraj()">Skeniraj</button>

</ion-content>

Funkcionalnost se sastoji od jedne funkcije.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

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

  rezultat:any;

  constructor(public _navCtrl: NavController,
              private _barcodeScanner: BarcodeScanner) {

  }

  skeniraj(){
    this._barcodeScanner.scan().then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.rezultat = barcodeData;
     }).catch(err => {
         console.log('Error', err);
     });
  }

}

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

import { NavController } from 'ionic-angular';

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

rezultat:any;

constructor(public _navCtrl: NavController,

private _barcodeScanner: BarcodeScanner) {

}

skeniraj(){

this._barcodeScanner.scan().then(barcodeData => {

console.log('Barcode data', barcodeData);

this.rezultat = barcodeData;

}).catch(err => {

console.log('Error', err);

});

}

U praksi to izgleda ovako:

Prilikom klika na gumb za skeniranje aplikacija traži pristup kameri kako bi mogla skenirati barkod, nakon odobrenja prikazuje se ekran kamere uz poruku “Place a barcode inside the viewfinder to scan it.“. Nakon uspješnog skeniranja čuje se glasan beep zvuk i na dnu ekrana kratko se prikaže sadržaj skeniranog barkoda nakon čega se ekran kamere zatvara i aplikacija se vraća na početni ekran.

Ali to nije sve. Moguće je koristiti objekt za dodatnim opcijama pomoću kojih se ponašanje plugina može prilagoditi.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

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

  rezultat:any;
  opcije:any;

  constructor(public _navCtrl: NavController,
              private _barcodeScanner: BarcodeScanner) {

    this.opcije = {
            preferFrontCamera: false,
            showFlipCameraButton: true,
            showTorchButton: true,
            disableAnimations: false,
            disableSuccessBeep: true,
            prompt: "Postavite okvir na barkod kako bi ga skenirali.",
            formats: 'QR_CODE, DATA_MATRIX', 
            orientation: 'portrait',
            torchOn: false,
            resultDisplayDuration: 3000
    };

  }

  skeniraj(){
    this._barcodeScanner.scan( this.opcije).then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.rezultat = barcodeData;
     }).catch(err => {
         console.log('Error', err);
     });
  }

}

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

import { NavController } from 'ionic-angular';

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

rezultat:any;

opcije:any;

constructor(public _navCtrl: NavController,

private _barcodeScanner: BarcodeScanner) {

this.opcije = {

preferFrontCamera: false,

showFlipCameraButton: true,

showTorchButton: true,

disableAnimations: false,

disableSuccessBeep: true,

prompt: "Postavite okvir na barkod kako bi ga skenirali.",

formats: 'QR_CODE, DATA_MATRIX',

orientation: 'portrait',

torchOn: false,

resultDisplayDuration: 3000

};

}

skeniraj(){

this._barcodeScanner.scan( this.opcije).then(barcodeData => {

console.log('Barcode data', barcodeData);

this.rezultat = barcodeData;

}).catch(err => {

console.log('Error', err);

});

}

Zaključak

{
  "name": "BarcodeScannerApp",
  "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.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/barcode-scanner": "^4.9.2",
    "@ionic-native/core": "4.9.1",
    "@ionic-native/splash-screen": "4.9.1",
    "@ionic-native/status-bar": "4.9.1",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "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",
    "phonegap-plugin-barcodescanner": "^8.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "typescript": "~2.6.2"
  },
  "description": "Ionic Barcode Scanner App project",
  "cordova": {
    "plugins": {
      "phonegap-plugin-barcodescanner": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

{

"name": "BarcodeScannerApp",

"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.11",

"@angular/common": "5.2.11",

"@angular/compiler": "5.2.11",

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

"@angular/core": "5.2.11",

"@angular/forms": "5.2.11",

"@angular/http": "5.2.11",

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

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

"@ionic-native/barcode-scanner": "^4.9.2",

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

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

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

"@ionic/storage": "2.1.3",

"cordova-android": "7.0.0",

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

"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",

"phonegap-plugin-barcodescanner": "^8.0.0",

"rxjs": "5.5.11",

"sw-toolbox": "3.6.0",

"zone.js": "0.8.26"

"devDependencies": {

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

"typescript": "~2.6.2"

"description": "Ionic Barcode Scanner App project",

"cordova": {

"plugins": {

"phonegap-plugin-barcodescanner": {},

"cordova-plugin-whitelist": {},

"cordova-plugin-device": {},

"cordova-plugin-splashscreen": {},

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

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

"platforms": [

"android"

]

}

Nodemailer & NodeJS – API za slanje emaila

Cilj ovog blog posta je pokazati kako napraviti API za slanje emaila. To ću postići koristeći NodeJS, ExpressJS, Nodemailer i naravno Gmail.

Postavljanje projekta

Kreiram mapu za projekt i unutar nje pokrećem naredbu

$ npm init --yes

1	$ npm init --yes

i odmah nakon toga instaliram potrebne NPM pakete:

– Express.js: $ npm install express --save
– Nodemailer: $ npm install nodemailer--save
– bodyParser: $ npm install body-parser -save

Struktura projekta prema package.json sada izgleda ovako:

{
  "name": "NodemailerAPI",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Tomislav Stanković",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "nodemailer": "^4.6.7"
  }
}

{

"name": "NodemailerAPI",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

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

"keywords": [],

"author": "Tomislav Stanković",

"license": "ISC",

"dependencies": {

"body-parser": "^1.18.3",

"express": "^4.16.3",

"nodemailer": "^4.6.7"

}

Sada imam sve spremno za kreiranje datoteke unutar koje će se nalaziti logika API-ja.

'use strict';
var nodemailer = require('nodemailer');
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
 
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
 
var port = process.env.PORT || 8080;
 
var apiRoutes = express.Router();
 
apiRoutes.get('/', function(req, res) {
    res.json({ message: 'API radi!' });   //ako je sve ispravno postavljeno kao odgovor dobijem ovu poruku
});
 
app.use('/api', apiRoutes);
 
app.listen(port);
console.log('API je pokrenut na portu:' + ' ' + port);

'use strict';

var nodemailer = require('nodemailer');

var express = require('express');

var app = express();

var bodyParser = require('body-parser');

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

app.use(bodyParser.json());

var port = process.env.PORT || 8080;

var apiRoutes = express.Router();

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

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

});

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

app.listen(port);

console.log('API je pokrenut na portu:' + ' ' + port);

API sada mogu i pokrenuti te se uvjeriti da radi. Pokrećem ga naredbom u kojoj riječ “index” označava naziv .js datoteke.

$ node index

1	$ node index

To je mogla biti i npr. server.js datoteka. U tom bi slučaju API pokrenuo naredbom $ node server.

Na adresi http://localhost:8080/api mogu vidjeti da je API uspješno pokrenut.

Slanje testnog e-maila

Unutar datoteke index.js sada ću kreirati API za slanje e-maila.

var transporter = nodemailer.createTransport('smtps://GmailKorisnickoIme:GmailLozinka@smtp.gmail.com');

apiRoutes.post('/posaljiEmail', function(req, res) {
    nodemailer.createTestAccount((err, account) => {
	var smtpTransport = nodemailer.createTransport({
    host: "smtp.gmail.com",
	secureConnection: false,
    port: 587,
    auth: {
        user: "GmailKorisnickoIme",
        pass: "GmailLozinka"
    }
});

    let mailOptions = {
        from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj
        to: '*s*a*k*@efos.hr, t*m*s*a*s*a*k*v*c*@gmail.com', // popis primatelja
        subject: 'Email poslam putem Nodemailera', // naslov
        text: 'Ovo je sadržaj maila.', // sadržaj poruke
        html: '<h2>Pozdrav!</h2><br><b>Ovo je formatiran sadržaj maila!</b>' // formatiran sadržaj poruke
    };

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            return console.log(error);
        }
        console.log('E-mail poslan: %s', info.messageId);
    });
});
});

var transporter = nodemailer.createTransport('smtps://GmailKorisnickoIme:GmailLozinka@smtp.gmail.com');

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

nodemailer.createTestAccount((err, account) => {

var smtpTransport = nodemailer.createTransport({

host: "smtp.gmail.com",

secureConnection: false,

port: 587,

auth: {

user: "GmailKorisnickoIme",

pass: "GmailLozinka"

}

});

let mailOptions = {

from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj

to: '*s*a*k*@efos.hr, t*m*s*a*s*a*k*v*c*@gmail.com', // popis primatelja

subject: 'Email poslam putem Nodemailera', // naslov

text: 'Ovo je sadržaj maila.', // sadržaj poruke

html: '<h2>Pozdrav!</h2><br><b>Ovo je formatiran sadržaj maila!</b>' // formatiran sadržaj poruke

};

transporter.sendMail(mailOptions, (error, info) => {

if (error) {

return console.log(error);

}

console.log('E-mail poslan: %s', info.messageId);

});

S obzirom na parametar secureConnection: false vrlo je važno da omogućim dopuštanje nesigurnijim aplikacijama da pristupe računu na adresi https://myaccount.google.com/security?pli=1

Jer ako to ne napravim dobit ću poruku o grešci što znači da e-mail neće biti poslan/primljen. Ovaj dio mi je zadavao najviše problema prije dvije godine kada sam prvi put radio Nodemailer API. U pitanju je bila funkcionalnost vezana uz resetiranje lozinke.

Ako sada putem Postmana pokrenem POST zahtjev na adresu http://localhost:8080/api/posaljiEmail vrlo brzo će mi stići e-mail.

Zašto se u slici iznad kao adresa primatelja nalazi drugačija adresa od one navedene gore u API-ju? To je zbog postavki unutar Gmaila gdje je navedeno da je adresa k*n*a*t@tomislavstankovic.com zadana adresa pošiljatelja. S obzirom da ovdje koristim Gmail kao servis za slanje e-maila jasno je da će on uzeti te zadane postavke.

E-mail sa “pravim” podacima

U gornjem sam se primjeru uvjerio da moj Nodemailer API uredno radi, a sada želim imati mogućnost određivanja na koju adresu i koji sadržaj želim poslati.

API sada izgleda ovako:

apiRoutes.post('/posaljiEmail', function(req, res) {
 if(req.body.emailPrimatelj == "" || req.body.naslov == "" || req.body.poruka == ""){
     return false;
 } else {
    nodemailer.createTestAccount((err, account) => {
        var smtpTransport = nodemailer.createTransport({
        host: "smtp.gmail.com",
        secureConnection: false,
        port: 587,
        auth: {
            user: "GmailKorisnickoIme",
            pass: "GmailLozinka"
        }
    });
    
        let mailOptions = {
            from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj
            to: req.body.emailPrimatelj, // popis primatelja
            subject: req.body.naslov, // naslov
            text: req.body.poruka, // sadržaj poruke
            html: '<b>' + req.body.poruka + '</b>' // formatiran sadržaj poruke
        };
    
        transporter.sendMail(mailOptions, (error, info) => {
            if (error) {
                res.json({ 
                    poruka: "Nisu uneseni potrebni podaci! E-mail nije poslan!",
                    greska: error,
                    status: false }); 
                return console.log(error);
            } else {
                return console.log(info);
            }
            console.log('E-mail poslan: %s', info.messageId);
        });
    });
 }  
});

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

if(req.body.emailPrimatelj == "" || req.body.naslov == "" || req.body.poruka == ""){

return false;

} else {

nodemailer.createTestAccount((err, account) => {

var smtpTransport = nodemailer.createTransport({

host: "smtp.gmail.com",

secureConnection: false,

port: 587,

auth: {

user: "GmailKorisnickoIme",

pass: "GmailLozinka"

}

});

let mailOptions = {

from: '"NodemailerAPI" <demo@example.com>', // pošiljatelj

to: req.body.emailPrimatelj, // popis primatelja

subject: req.body.naslov, // naslov

text: req.body.poruka, // sadržaj poruke

html: '<b>' + req.body.poruka + '</b>' // formatiran sadržaj poruke

};

transporter.sendMail(mailOptions, (error, info) => {

if (error) {

res.json({

poruka: "Nisu uneseni potrebni podaci! E-mail nije poslan!",

greska: error,

status: false });

return console.log(error);

} else {

return console.log(info);

}

console.log('E-mail poslan: %s', info.messageId);

});

}

});

Ovdje se može vidjeti da podatke šaljem kroz req.body i upravo je to razlog zbog kojeg koristim body-parser. U slučaju da nisam koristio body-parser dobio bi sljedeću grešku.

Također, ako ne unesem sve potrebne podatke body-parser neće imati s čime raditi i opet ću dobiti grešku. U ovom slučaju nisam poslao e-mail adresu primatelja.

Nakon što unesem sve potrebne podatke, body-parser će odraditi svoje i e-mail će biti uspješno poslan/primljen.

Angular Framework resursi

Do sada sam objavio nekoliko blog postova na temu Angular Frameworka koje možete pronaći u kategoriji Razvoj, ali sam odlučio objaviti i ovaj blog post kako bi olakšao pronalazak i pregled svih blog postova vezanih upravo uz Angular Framework jednako kao što sam to napravio i za Ionic Framework, a nadam se da ću isto uskoro učiniti i za NodeJS tj. ExpressJS.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći resurs koji će vam biti od pomoći.

24/06/2019 – *ngFor u Angularu
07/01/2019 – SMS login – Angular & Firebase
07/10/2018 – Angular KeyValuePipe – prikaz objekta kao niz
30/09/2018 – Angular Multiselect Dropdown komponenta za web aplikacije
17/06/2018 – Angular 6 – SEO optimizacija
20/05/2018 – Angular (2,4,5) 6 je ‘sranje’ !?
29/04/2018 – Ažuriranje Angular projekta sa angular-cli na @angular/cli
22/04/2018 – Angular & Marvel API – demo aplikacija
18/03/2018 – Angular & Firebase – registracija i prijava
28/01/2018 – Angular & pdfmake – kreiranje PDF-a
19/11/2017 – Kako prilagoditi Angular početni zaslon (Initial Loading Screen)
12/11/2017 – Angular CRUD aplikacija
05/11/2017 – Uvod u Angular Material
15/10/2017 – Uvod u Angular CLI
31/12/2016 – Postavljanje Angular 2 + TypeScript projekta