{"id":18291,"date":"2020-09-10T11:00:22","date_gmt":"2020-09-10T10:00:22","guid":{"rendered":"http:\/\/www.puship.com\/?page_id=18291"},"modified":"2020-10-14T17:06:41","modified_gmt":"2020-10-14T16:06:41","slug":"ionic-framework-on-cordova-example","status":"publish","type":"page","link":"https:\/\/www.puship.com\/it\/ionic-framework-on-cordova-example\/","title":{"rendered":"Ionic su Cordova (Esempio)"},"content":{"rendered":"\n

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

<\/div>\n\n\n\n
  1. Vai nella directory dove vuoi mantenere il codice sorgente e lancia il seguente comando per creare il progetto:<\/li><\/ol>\n\n\n\n
    <\/path><\/svg><\/div>
    ionic start PushipExample\n--Il primo argomento \u00e8 il nome della tua applicazione<\/pre><\/div>\n\n\n\n
    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.<\/p>\n\n\n\n
    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.<\/li><\/ol>\n\n\n\n
      <\/path><\/svg><\/div>
      -- geolocation plugin\nionic cordova plugin add cordova-plugin-geolocation\nnpm install @ionic-native\/geolocation\n\n-- device plugin\nionic cordova plugin add cordova-plugin-device\nnpm install @ionic-native\/device\n\n-- push plugin\nionic cordova plugin add phonegap-plugin-push\nnpm install @ionic-native\/push\n\n--puship plugin\nionic cordova plugin add puship-plugin<\/pre><\/div>\n\n\n\n
      1. Modifica il file config.xml impostando il package nell’attributo ID<\/strong> del tag widget<\/strong> e il nome dell’applicazione nel tag name<\/strong>.<\/li>
      2. Modifica il codice nel file src\/app\/app.module.ts<\/em> aggiungendo il provider Push:<\/li><\/ol>\n\n\n\n
        <\/path><\/svg><\/div>
        import { Push } from '@ionic-native\/push\/ngx';\n\nproviders: [\n    StatusBar,\n    SplashScreen,\n\tPush,\n    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }\n  ],<\/pre><\/div>\n\n\n\n
        1. Modifica il codice nel file src\/app\/app.component.ts<\/em> in questo modo:<\/li><\/ol>\n\n\n\n
          <\/path><\/svg><\/div>
          import { Component } from '@angular\/core';\nimport { Platform } from '@ionic\/angular';\nimport { SplashScreen } from '@ionic-native\/splash-screen\/ngx';\nimport { StatusBar } from '@ionic-native\/status-bar\/ngx';\nimport { Push, PushObject, PushOptions } from '@ionic-native\/push\/ngx';\n\ndeclare var Puship;\n\n@Component({\n  selector: 'app-root',\n  templateUrl: 'app.component.html',\n  styleUrls: ['app.component.scss']\n})\nexport class AppComponent {\n  constructor(\n    private platform: Platform,\n    private splashScreen: SplashScreen,\n\tprivate push: Push,\n    private statusBar: StatusBar\n  ) {\n    this.initializeApp();\n  }\n\n  initializeApp() {\n    this.platform.ready().then(() => {\n        this.statusBar.styleDefault();\n        this.splashScreen.hide();\n      \n    \tthis.push.hasPermission()\n    \t  .then((res: any) => {\n    \n    \t\tif (res.isEnabled) {\n    \t\t  console.log('We have permission to send push notifications');\n    \t\t} else {\n    \t\t  console.log('We do not have permission to send push notifications');\n    \t\t}\n    \n    \t  });\n    \t  \n\/\/REMOVE THIS SECTION ON IOS\n    \t\/\/ Create a channel (Android O and above). You'll need to provide the id, description and importance properties.\n    \tthis.push.createChannel({\n    \t id: \"testchannel1\",\n    \t description: \"My first test channel\",\n    \t \/\/ The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.\n    \t importance: 3,\n    \t \/\/badge is used to if badge appears on the app icon see https:\/\/developer.android.com\/reference\/android\/app\/NotificationChannel.html#setShowBadge(boolean).\n    \t \/\/false = no badge on app icon.\n    \t \/\/true = badge on app icon\n    \t badge: false\n    \t}).then(() => console.log('Channel created'));\n    \n    \t\/\/ Delete a channel (Android O and above)\n    \tthis.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));\n    \n    \t\/\/ Return a list of currently configured channels\n    \tthis.push.listChannels().then((channels) => console.log('List of channels', channels))\n\/\/REMOVE THIS SECTION ON IOS\n    \n    \t\/\/ to initialize push notifications\n    \n    \tconst options: PushOptions = {\n    \t   android: {},\n    \t   ios: {\n    \t\t   alert: 'true',\n    \t\t   badge: true,\n    \t\t   sound: 'false'\n    \t   },\n    \t   windows: {},\n    \t   browser: {\n    \t\t   pushServiceURL: 'http:\/\/push.api.phonegap.com\/v1\/push'\n    \t   }\n    \t}\n    \n    \tconst pushObject: PushObject = this.push.init(options);\n    \n    \tpushObject.on('notification').subscribe((notification: any) => \n    \t\t\t{\n    \t\t\t\talert('Received a notification:' + JSON.stringify(notification));\n    \t\t\t\t\n    \t\t\t}\n    \t\t);\n    \n    \tpushObject.on('registration').subscribe((registration: any) =>\n    \t\t{ \n    \t\t\tconsole.log('Device registered: ', registration);\n    \t\t\t\n    \t\t\t\/\/Puship.EnableLog(true);\n    \t\t\tPuship.Register(\n    \t\t\t\t\tregistration.registrationId,\n    \t\t\t\t\t'YOUR-PUSHIP-APP-CODE',\n    \t\t\t\t\t{\n    \t\t\t\t\t\tsuccessCallback: function (pushipresult) {\n    \t\t\t\t\t\t\talert(\"device registered with DeviceId:\" + pushipresult.DeviceId());\n    \t\t\t\t\t\t},\n    \t\t\t\t\t\tfailCallback: function (pushipresult) {\n    \t\t\t\t\t\t\talert(\"error during registration: \" + JSON.stringify(pushipresult));\n    \t\t\t\t\t\t}\n    \t\t\t\t\t}\n    \t\t\t\t);\n    \t\t});\n    \n    \tpushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));\n    });\n  }\n}<\/pre><\/div>\n\n\n\n
          1. Segui la guida a questo link<\/a> per creare una nuova applicazione nel Puship Manager<\/a> per ottenere il Puship App ID e sostituisci \u201cYOUR-PUSHIP-APP-CODE\u201d presente nello script sopra.<\/li>
          2. Attiva il servizio di notifica che necessiti seguendo le guide Apple<\/a>, Google Play<\/a> e Microsoft Store<\/a>.<\/li>
          3. Per Android: il file google-services.json<\/strong> va copiato nella cartella android\/app<\/em> e non \u00e8 necessario aggiungere l’azione resource-file nel config.xml<\/strong><\/li>
          4. Per iOS: non \u00e8 necessario creare il file build.json<\/strong>.<\/li>
          5. Lancia il comando di build:<\/li><\/ol>\n\n\n\n
            <\/path><\/svg><\/div>
            ionic build<\/pre><\/div>\n\n\n\n
            1. Lancia il comando per aggiungere le piattaforme che stai supportando:<\/li><\/ol>\n\n\n\n
              <\/path><\/svg><\/div>
              ionic cordova prepare android\n\/\/The platform parameter can be android or ios<\/pre><\/div>\n\n\n\n
              1. Avvia ora l’ambiente in questo modo