Tomislav Stanković, Autor na Tomislav Stanković

Ionic Social Sharing – dijeljenje sadržaja mobilne aplikacije

Dijeljenje sadržaja direktno iz, Ionic, mobilne aplikacije jedna je od funkcionalnosti koju je vrlo jednostavno dodati, a može jako puno značiti u marketingu tj. promociji same mobilne aplikacije. Ako je korisnicima sadržaj toliko zanimljiv da ga žele podijeliti otvara se mogućnost viralnog efekta kojega najviše marketingaši vole.

U slučaju Ionica ta se funkcionalnost na jednostavan način može omogućiti postavljanjem Ionic Native Social Sharing plugina.

Kreiranje aplikacije

Kao i svaki put do sada, kreiram novu Ionic aplikaciju:

$ ionic start IonicSocialSharing blank
$ cd IonicSocialSharing

1 2	$ ionic start IonicSocialSharing blank $ cd IonicSocialSharing

Social sharing

Ovaj plugin omogućava dijeljenje teksta, linkova, datoteka i slika putem društvenih mreža, SMS-a ili e-maila.

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

$ ionic cordova plugin add cordova-plugin-x-socialsharing
$ npm install --save @ionic-native/social-sharing

1 2	$ ionic cordova plugin add cordova-plugin-x-socialsharing $ npm install --save @ionic-native/social-sharing

Nakon uspješne instalacije dodajem sljedeće 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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { SocialSharing } from '@ionic-native/social-sharing';

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

SocialSharing,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Sada sam spreman za dodavanje ove funkcionalnosti.

U ovom ću primjeru pokazati kako omogućiti dijeljenje sadržaja putem dvije opcije.

U slučaju korištenja this._socialSharing.share() aktivira se opcija sa prikazom svih dostupnih aplikacija za objavu sadržaja koje postoje na mobilnom uređaju.

Dok se u slučaju korištenja metode sa konkretnim nazivom načina dijeljenja npr. this._socialSharing.shareEmail() aktivira dijeljenje samo putem pripadajuće aplikacije tj. neće se prikazati sve dostupne na mobilnom uređaju.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Social Sharing
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
  <button ion-button full (click)="shareAll()">Podijeli</button>
  
  <button ion-button full (click)="shareEmail()">Email</button>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Social Sharing

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full (click)="shareAll()">Podijeli</button>

<button ion-button full (click)="shareEmail()">Email</button>

</ion-content>

Sve to se postiže sa nekoliko linija koda.

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

import { SocialSharing } from '@ionic-native/social-sharing';

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

  naslov: string = "Ovo je naslov";
  poruka: string = "Ovo je poruka";
  url: string = "https://www.tomislavstankovic.com/blog/wp-content/uploads/2018/11/ionic-social-sharing-min.jpg";

  primatelj: any = "test@email.com";

  constructor(public _navCtrl: NavController,
              private _socialSharing: SocialSharing) {
  }

  shareEmail(){
    this._socialSharing.shareViaEmail(this.poruka, this.naslov, this.primatelj, null, null, null).then(() => {
      console.log("Uspješno");
    }).catch((e) => {
      console.error("Greška!");
    });
  }

  shareAll(){
    this._socialSharing.share(this.poruka, this.naslov, null, this.url).then(() => {
      console.log("Uspješno");
    }).catch((e) => {
      console.error("Greška!");
    });
  }

}

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

import { NavController } from 'ionic-angular';

import { SocialSharing } from '@ionic-native/social-sharing';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

naslov: string = "Ovo je naslov";

poruka: string = "Ovo je poruka";

url: string = "https://www.tomislavstankovic.com/blog/wp-content/uploads/2018/11/ionic-social-sharing-min.jpg";

primatelj: any = "test@email.com";

constructor(public _navCtrl: NavController,

private _socialSharing: SocialSharing) {

}

shareEmail(){

this._socialSharing.shareViaEmail(this.poruka, this.naslov, this.primatelj, null, null, null).then(() => {

console.log("Uspješno");

}).catch((e) => {

console.error("Greška!");

});

}

shareAll(){

this._socialSharing.share(this.poruka, this.naslov, null, this.url).then(() => {

console.log("Uspješno");

}).catch((e) => {

console.error("Greška!");

});

}

Osima gore navedenog moguće je koristiti:

shareViaTwitter(message, image, url)

shareViaFacebook(message, image, url)

shareViaFacebookWithPasteMessageHint(message, image, url, pasteMessageHint)

shareViaInstagram(message, image)

shareViaWhatsApp(message, image, url)

shareViaSMS(messge, phoneNumber)

Zaključak

Struktura aplikacije prema package.json

{
  "name": "IonicSocialSharing",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.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.15.0",
    "@ionic-native/social-sharing": "^4.17.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/storage": "2.2.0",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "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.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-x-socialsharing": {}
    }
  }
}

{

"name": "IonicSocialSharing",

"version": "0.0.1",

"author": "Ionic Framework",

"homepage": "http://ionicframework.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.15.0",

"@ionic-native/social-sharing": "^4.17.0",

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

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

"@ionic/storage": "2.2.0",

"cordova-plugin-x-socialsharing": "^5.4.1",

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

"typescript": "~2.6.2"

"description": "An Ionic project",

"cordova": {

"plugins": {

"cordova-plugin-x-socialsharing": {}

}

HelmetJS – zaštita HTTP headera Express.js aplikacija

Sigurnost, jedna od stvari s kojoj svi prilikom razvoja aplikacije govore, ali ju malo njih smatra ozbiljnom ili odgađa za kasnije.

S druge strane, HTTP headeri su nešto što korisnici Express.js aplikacije ne vide i onda je developerima lako zapostaviti ih i gledati na njih kao na nešto nebitno. S obzirom da headeri daju razne informacije koje osobe s lošim namjerama mogu iskoristiti jasno je zašto ipak treba voditi brigu o njima tj. informacijama koje pružaju.

Jedna od tih informacije je X-Powered-By: Express što web pregledniku govori što pokreće aplikaciju tj. na čemu se temelji. Helmet.js će, između ostalog, sakriti ovu informaciju.

Zato je cilj ovog blog posta pokazati kako na brz i jednostavan način zaštititi Express.js aplikaciju koristeći Helmet.js koji neće riješiti sve sigurnosne probleme, ali je ipak odličan početak.

Što je Helmet.js?

Helmet.js je kolekcija od 14 modula koje se brinu za sigurnost HTTP zaglavlja (headers) točnije response headera.

7 od 14 modula aktiviraju se jednom linijom koda

app.use(helmet())

1	app.use(helmet())

Osim toga, svaki od tih zadanih modula moguće je individualno aktivirati

app.use(helmet.noCache())
app.use(helmet.frameguard())

1 2	app.use(helmet.noCache()) app.use(helmet.frameguard())

ili deaktivirati

app.use(helmet({
  frameguard: false
}))

app.use(helmet({

frameguard: false

}))

Helmet.js moduli

Trenutno postoji 14 modula (defaultni označeni sa (✓)), a to su sljedeći:

1.) contentSecurityPolicy

Sets the Content-Security-Policy header which can help protect against malicious injection of JavaScript, CSS, plugins, and more.

2.) crossdomain

Prevents Adobe Flash and Adobe Acrobat from loading content on your site.

3.) dnsPrefetchControl (✓)

This middleware lets you disable browsers’ DNS prefetching by setting the X-DNS-Prefetch-Control header.

4.) expectCt

Tells browsers to expect Certificate Transparency. For more about Certificate Transparency and this header, see this blog post and the in-progress spec.

5.) featurePolicy

Lets you restrict which browser features can be used. For example, you can disable fullscreen or vibration APIs.

6.) frameguard (✓)

Frameguard mitigates clickjacking attacks by setting the X-Frame-Options header.

7.) hidePoweredBy (✓)

Removes the X-Powered-By header to make it slightly harder for attackers to see what potentially-vulnerable technology powers your site.

8.) hpkp

Helps you set the Public-Key-Pins header to prevent person-in-the-middle attacks. Usage of this header (and therefore this middleware) is not recommended. Be very careful when deploying this—you can easily misuse this header and cause problems. Chrome dropped support for HPKP citing risks of misuse.

9.) hsts (✓)

This module sets the Strict-Transport-Security header to keep your users on HTTPS.

10.) ieNoOpen (✓)

This middleware sets the X-Download-Options to prevent Internet Explorer from executing downloads in your site’s context.

11.) noCache

Aims to disable browser caching by setting several headers.

12.) noSniff (✓)

Helps prevent browsers from trying to guess (“sniff”) the MIME type, which can have security implications. It does this by setting the X-Content-Type-Options header to nosniff.

13.) referrerPolicy

Can control the behavior of the Referer header by setting the Referrer-Policy header.

14.) xssFilter (✓)

Sets the X-XSS-Protection header to prevent reflected XSS attacks.

Kreiranje projekta

Kreiram mapu projekta ExpressHelmet i unutar nje datoteku server.js

sa sljedećim sadržajem:

var express = require('express');
var app = express(); 
 
var port = process.env.PORT || 8080;
 
var apiRoutes = express.Router();
 
apiRoutes.get('/', function(req, res) {
    res.json({ message: 'API radi!' }); 
});
 
// ostale GET, POST, PUT, DELETE definiraju se u nstavku
 
// sve rute sadržavaju '/api'
app.use('/api', apiRoutes);
 
app.listen(port);
console.log('API je pokrenut i koristi port:' + ' ' + port);

var express = require('express');

var app = express();

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

var apiRoutes = express.Router();

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

res.json({ message: 'API radi!' });

});

// ostale GET, POST, PUT, DELETE definiraju se u nstavku

// sve rute sadržavaju '/api'

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

app.listen(port);

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

Detalje o tome kako kreirati osnovni Express.js API moguće je pronaći u blog postu pod naslovom Izrada RESTful API-ja koristeći Node.js i Express.js

Ako sada pokrenem API na adresi http://localhost:8080/api unutar Google Chrome Developer alata pod tabom Network dobit ću sljedeće:

Postavljanje Helmet.js-a

Sljedećom naredbom untuar mape projekta instaliram Hellmet.js

$ npm install helmet --save

1	$ npm install helmet --save

Također, unutar server.js datoteke dodajem sljedeće:

var express = require('express');
var app = express();
var helmet = require('helmet');
 
var port = process.env.PORT || 8080; 
 
var apiRoutes = express.Router();
app.use(helmet());
 
apiRoutes.get('/', function(req, res) {
    res.json({ message: 'API radi!' });  
});

// sve rute sadržavati će '/api'
app.use('/api', apiRoutes);
 
app.listen(port);
console.log('API je pokrenut i koristi port:' + ' ' + port);

var express = require('express');

var app = express();

var helmet = require('helmet');

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

var apiRoutes = express.Router();

app.use(helmet());

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

res.json({ message: 'API radi!' });

});

// sve rute sadržavati će '/api'

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

app.listen(port);

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

Ako sada pokrenem API na adresi http://localhost:8080/api unutar Google Chrome Developer alata pod tabom Network dobit ću sljedeće:

Na slici iznad mogu se vidjeti headeri kojih ranije nije bilo, a to su:

Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

Strict-Transport-Security: max-age=15552000; includeSubDomains

X-Content-Type-Options: nosniff

X-DNS-Prefetch-Control: off

X-Download-Options: noopen

X-Frame-Options: SAMEORIGIN

X-XSS-Protection: 1; mode=block

Također, headere mogu vidjeti i pokretanjem sljedeće naredbe:

curl -i http://localhost:8080/api

1	curl -i http://localhost:8080/api

Zaključak

Helmet.js nije “all in one” rješenje niti se njegovim postavljenjem unutar projekta može reći da je sigurnosna zaštita aplikacije gotova, ali je svakako dobar početak procesa razmišljanja o sigurnosti.

Node.js resursi

Do sada sam objavio nekoliko blog postova na temu Node.js-a, ali sam odlučio objaviti i ovaj blog post kako bi olakšao pronalazak i pregled svih blog postova vezanih upravo uz Node.js jednako kao što sam to napravio za Angular tj. Ionic Framework.

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.

9.) HelmetJS – zaštita HTTP headera Express.js aplikacija (28/10/2018)
8.) Node.js Cron Job – automatsko izvršavanje zakazanih zadataka (26/08/2018)
7.) ExpressJS middleware za ograničavanje ponovljenih zahtjeva na API-je (12/08/2018)
6.) nodemon – automatski restart NodeJS aplikacije (18/02/2018)
5.) Nodemailer & NodeJS – API za slanje emaila (07/07/2018)
4.) Kako napraviti REST API koristeći JSON Server (02/07/2017)
3.) Node.js API za slanje Push notifikacija (05/02/2017)
2.) Node.js RESTful API za upload datoteka (15/01/2017)
1.) Izrada RESTful API-ja koristeći Node.js i Express.js (08/01/2017)

Compodoc – izrada dokumentacije Angular aplikacije

Kada se radi na izradi Angular aplikacija osim poznavanja sintakse važno je imati dobru dokumentaciju kako bi svi uključeni u proces razvoja imali uvid u ono što se i kako radi.

Osim toga, ta se dokumentacija može lijepo iskoristiti prilikom uvođenja novih članova tima koji na jednom mjestu mogu dobiti uvid u sve komponente neke Angular aplikacije.

https://compodoc.app/ služi upravo tome i na jednostavna i brz način pruža automatsku izradu osnovne dokumentacije za Angular aplikacije. Kada kažem osnovne mislim na dio koji se dobije pokretanje jedne naredbe o kojoj će biti riječi u nastavku. Osim toga moguće je dodatno prilagoditi dokumentaciju (npr. izbaciti neke dijelove aplikacije iz dokumentacije) specifičnim potrebama svakog projekta.

Kreiranje aplikacije

Naravno, prije izrade dokumentacije potrebno je imati kreiranu aplikaciju.

Može to biti web aplikacija ili mobilna aplikacija, samo je važno da se u pozadini nalazi Angular.

Za potrebu ovog blog posta iskoristit ću projekt Ionic 3 Start Theme jer se sastoji od puno različitih komponenti što će dobro doći za prikaz dokumentacije.

Izrada dokumentacije

Unutar mape projekta potrebno je pokrenuti sljedeću naredbu:

$ npm install --save-dev @compodoc/compodoc

1	$ npm install --save-dev @compodoc/compodoc

U to će se trenutku unutar package.json datoteke pod devDependencies dodati sljedeće:

 "devDependencies": {
    "@compodoc/compodoc": "^1.1.5",
    "@ionic/app-scripts": "3.2.0",
    "typescript": "2.4.2"
  },

"devDependencies": {

"@compodoc/compodoc": "^1.1.5",

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

"typescript": "2.4.2"

Osim toga, unutar iste datoteke potrebno je dodati još i sljedeće:

  "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",
    "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -w -s"
  },

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

"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -w -s"

Sada je sve spremno za generiranje dokumentacije što se radi naredbom:

$ npm run compodoc

1	$ npm run compodoc

Nakon izvršenja naredbe pojavit će se mapa documentation.

Dokumentaciju je moguće vidjeti na da načina. Prvi je posjetom na adresu http://127.0.0.1:8080/, a drugi je otvaranjem datoteke documentation/index.html.

Zaključak

Dokumentacija može biti puno konkretnija od ranije prikazanog.

Ostale mogućnosti moguće je pronaći na adresi https://compodoc.app/guides/getting-started.html

Angular KeyValuePipe – prikaz objekta kao niz

U pravilu, kada se žele prikazati neki podaci koristeći *ngFor potrebno je da ti podaci budu u obliku niza (array).

export class AppComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
}

export class AppComponent {

heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

}

 <ul>
    <li *ngFor="let hero of heroes">
      {{ hero }}
    </li>
  </ul>

<ul>

</li>

</ul>

U ovom bi slučaju rješenje izgledalo ovako:

Windstorm
Bombasto
Magneta
Tornado

No međutim, ako ti podaci budu u obliku objekta doći će do sljedeće greške (error):

NgFor only supports binding to Iterables such as Arrays

Kako bi se to riješilo Angular 6.1 predstavlja KeyValuePipe.

U tom slučaju sljedeći objekt

constructor(){

  this.hero = {
     name: 'Windstorm'.
     type: 'hero',
     rating: 10
  }

}

constructor(){

this.hero = {

name: 'Windstorm'.

type: 'hero',

rating: 10

}

Mogu prikazati na ovaj način

<ul>
    <li *ngFor="let he of hero | keyvalue">
      {{ he.key}} - {{ he.value }}
    </li>
</ul>

<ul>

{{ he.key}} - {{ he.value }}

</li>

</ul>

Što na kraju izgleda ovako

name – Windstorm
type – hero
rating – 10

Ako se keyvalue pipe pokuša koristiti u nekoj od starijih verzija Angulara doći će do greške što znači da je potrebno nadograditi verziju Angulara na 6.1

The pipe ‘keyvalue’ could not be found

*Naslovna slika preuzeta sa https://orlyapps.de/blog/mobile/einfuhrung-der-neuen-keyvaluepipe-in-angular-61