Arhiva Social Sharing - Tomislav Stanković

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": {}

}