Ionic su Cordova (Esempio)

Questa guida mostra come creare un’applicazione (android, iOS o windows) che supporta le notifiche push di Puship attraverso la piattaforma Ionic Framework sul CLI Cordova.
Se è la tua prima app con ionic framework ti consiglio di seguirti questa guida cosi da installare i tool necessari e fare un po di pratica con una prima applicazione base.

  1. Vai nella directory dove vuoi mantenere il codice sorgente e lancia il seguente comando per creare il progetto:
ionic start PushipExample
--Il primo argomento è il nome della tua applicazione

Seleziona il framework javascript che preferisci utilizzare, in questo tutorial utilizzeremo Angular.
Seleziona il template dal quale vuoi partire per creare il tuo progetto, in questo tutorial utilizzeremo il Blank template.
Ionic permette di scegliere se utilizzare la CLI Capacitor oppure Cordova. Dato che in questa guida useremo Cordova seleziona NO alla richiesta di integrazione di Capacitor.

  1. Posizionati nella cartella del progetto appena creato e lancia i seguenti comandi per installare i plugin necessari: device, geolocation (opzionale se non usi la geolocalizzazione), push e puship.
-- geolocation plugin
ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation

-- device plugin
ionic cordova plugin add cordova-plugin-device
npm install @ionic-native/device

-- push plugin
ionic cordova plugin add phonegap-plugin-push
npm install @ionic-native/push

--puship plugin
ionic cordova plugin add puship-plugin
  1. Modifica il file config.xml impostando il package nell’attributo ID del tag widget e il nome dell’applicazione nel tag name.
  2. Modifica il codice nel file src/app/app.module.ts aggiungendo il provider Push:
import { Push } from '@ionic-native/push/ngx';

providers: [
    StatusBar,
    SplashScreen,
	Push,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  1. Modifica il codice nel file src/app/app.component.ts in questo modo:
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Push, PushObject, PushOptions } from '@ionic-native/push/ngx';

declare var Puship;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
	private push: Push,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
      
    	this.push.hasPermission()
    	  .then((res: any) => {
    
    		if (res.isEnabled) {
    		  console.log('We have permission to send push notifications');
    		} else {
    		  console.log('We do not have permission to send push notifications');
    		}
    
    	  });
    	  
//REMOVE THIS SECTION ON IOS
    	// Create a channel (Android O and above). You'll need to provide the id, description and importance properties.
    	this.push.createChannel({
    	 id: "testchannel1",
    	 description: "My first test channel",
    	 // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.
    	 importance: 3,
    	 //badge is used to if badge appears on the app icon see https://developer.android.com/reference/android/app/NotificationChannel.html#setShowBadge(boolean).
    	 //false = no badge on app icon.
    	 //true = badge on app icon
    	 badge: false
    	}).then(() => console.log('Channel created'));
    
    	// Delete a channel (Android O and above)
    	this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));
    
    	// Return a list of currently configured channels
    	this.push.listChannels().then((channels) => console.log('List of channels', channels))
//REMOVE THIS SECTION ON IOS
    
    	// to initialize push notifications
    
    	const options: PushOptions = {
    	   android: {},
    	   ios: {
    		   alert: 'true',
    		   badge: true,
    		   sound: 'false'
    	   },
    	   windows: {},
    	   browser: {
    		   pushServiceURL: 'http://push.api.phonegap.com/v1/push'
    	   }
    	}
    
    	const pushObject: PushObject = this.push.init(options);
    
    	pushObject.on('notification').subscribe((notification: any) => 
    			{
    				alert('Received a notification:' + JSON.stringify(notification));
    				
    			}
    		);
    
    	pushObject.on('registration').subscribe((registration: any) =>
    		{ 
    			console.log('Device registered: ', registration);
    			
    			//Puship.EnableLog(true);
    			Puship.Register(
    					registration.registrationId,
    					'YOUR-PUSHIP-APP-CODE',
    					{
    						successCallback: function (pushipresult) {
    							alert("device registered with DeviceId:" + pushipresult.DeviceId());
    						},
    						failCallback: function (pushipresult) {
    							alert("error during registration: " + JSON.stringify(pushipresult));
    						}
    					}
    				);
    		});
    
    	pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
    });
  }
}
  1. Segui la guida a questo link per creare una nuova applicazione nel Puship Manager per ottenere il Puship App ID e sostituisci “YOUR-PUSHIP-APP-CODE” presente nello script sopra.
  2. Attiva il servizio di notifica che necessiti seguendo le guide AppleGoogle Play e Microsoft Store.
  3. Per Android: il file google-services.json va copiato nella cartella android/app e non è necessario aggiungere l’azione resource-file nel config.xml
  4. Per iOS: non è necessario creare il file build.json.
  5. Lancia il comando di build:
ionic build
  1. Lancia il comando per aggiungere le piattaforme che stai supportando:
ionic cordova prepare android
//The platform parameter can be android or ios
  1. Avvia ora l’ambiente in questo modo
    • Android: lancia il comando ionic cordova run android –device, se hai installato android studio puoi vedere il log dell’applicazione semplicemente aprendo la vista Logcat.
    • iOS: apri xcode, utilizza File -> Apri per aprire l’applicazione sulla cartella platforms/ios. Dal navigator seleziona il progetto root e sulla sezione signing seleziona il tuo development Team. Verifica di aver impostato iOS developer nella property building. Esegui l’applicazione cliccando sul pulsante Run.
    • Windows: lancia il comando ionic cordova run windows.

Ad applicazione avviata dovresti visualizzare il messaggio “device registered with…”. Puoi ora connetterti al Puship Manager e inviare notifiche push ai tuoi device!

Nota bene:

  • Le notifiche push non sono supportate sull’emulatore ios.
  • Le notifiche push sono supportate su emulatore android ma è necessario un setup particolare dell’emulatore, è quindi consigliato testare su device reale.
  • Se vuoi integrare il servizio di notifiche push ad un progetto esistente parti dal punto 2.

Di seguito sono disponibili dei video che spiegano passo passo come creare un’applicazione e attivare le notifiche push con Puship per Android e per iOS:



Di seguito trovi il codice utilizzato nei video:

Per poter conoscere dettagliatamente come aggiungere tags, gestire la geolocalizzazione e tutto ciò che riguarda il resto delle api puship visita la documentazione comune per tutte le piattaforme: