Introduzione ad Azure Mobile Engagement per Cordova/PhonegapGet Started with Azure Mobile Engagement for Cordova/Phonegap

Questo argomento descrive come usare Azure Mobile Engagement per ottenere informazioni sull'uso dell'app e sull'invio di notifiche push a utenti segmentati di un'applicazione mobile sviluppata con Cordova.This topic shows you how to use Azure Mobile Engagement to understand your app usage and send push notifications to segmented users for a mobile application developed with Cordova.

In questa esercitazione verrà creata un'app Cordova vuota mediante Mac e quindi verrà eseguita l'integrazione di Mobile Engagement SDK.In this tutorial, we will create a blank Cordova app using Mac and then integrate Mobile Engagement SDK. L'app raccoglierà dati analitici di base e riceverà notifiche push tramite Apple Push Notification System (APNS) per iOS e Google Cloud Messaging (GCM) per Android.It collects basic analytics data and receives push notifications using Apple Push Notification System (APNS) for iOS and Google Cloud Messaging (GCM) for Android. L'app verrà distribuita in un dispositivo iOS o Android per il test.We will deploy this to an iOS or Android device for testing.

Nota

Per completare l'esercitazione, è necessario disporre di un account Azure attivo.To complete this tutorial, you must have an active Azure account. Se non si dispone di un account, è possibile creare un account di valutazione gratuita in pochi minuti.If you don't have an account, you can create a free trial account in just a couple of minutes. Per informazioni dettagliate, vedere la pagina relativa alla versione di valutazione gratuita di Azure.For details, see Azure Free Trial.

Per completare questa esercitazione, è necessario disporre di:This tutorial requires the following:

  • XCode, che può essere installato da Mac App Store (per la distribuzione in iOS)XCode, which you can install from Mac App Store (for deploying to iOS)
  • Android SDK ed emulatore (per la distribuzione in Android)Android SDK & Emulator (for deploying to Android)
  • Certificato per notifiche push (con estensione p12) che è possibile ottenere nell'Apple Dev Center per APNSPush notification certificate (.p12) that you can obtain from Apple Dev Center for APNS
  • Numero di progetto GCM, che è possibile ottenere da Google Developer Console per GCMGCM Project number that you can obtain from your Google Developer Console for GCM
  • Plug-in di Cordova per Mobile EngagementMobile Engagement Cordova Plugin

Nota

Il codice sorgente e il file Leggimi per il plug-in di Cordova sono disponibili in GitHubYou can find the source code and the ReadMe for the Cordova plugin on GitHub

Configurare Mobile Engagement per l'app CordovaSetup Mobile Engagement for your Cordova app

  1. Accedere al portale di Azure.Log on to the Azure Portal.
  2. Fare clic su Nuovo, quindi su Web e dispositivi mobili e infine su Mobile Engagement.Click on New, then Web + Mobile, and then Mobile Engagement.

  3. Nel pannello New Mobile Engagement App Collection (Nuova raccolta di app Mobile Engagement) visualizzato si creerà una raccolta di app invece che un'app come nel portale di Azure classico.In the New Mobile Engagement App Collection blade that appears, you will be creating an App Collection instead of an App like in the Azure classic portal. Immettere le seguenti informazioni:Enter the following information:

    • Nome: Nome of your raccolta di applicazioniName: Name of your application collection
    • Piattaforme: selezionare le piattaforme di destinazione per l'app nel pannello Piattaforme che verrà aperto.Platforms: Select target platforms for your app on the Platforms blade which will open up. Ad esempio,E.g. se è necessaria un'app sia per iOS che per Android, selezionare entrambe le piattaforme per creare due app in questa raccolta di app.if you want an app for both iOS & Android then select both platforms and you will get two apps created under this app collection.

    • Sottoscrizione: selezionare la sottoscrizione di Azure.Subscription: Select the Azure subscription.
    • Gruppo di risorse: selezionare il gruppo di risorse di Azure in cui inserire questa risorsa di Azure (Raccolta di app Mobile Engagement).Resource group: Select the Azure Resource group in which you want this Azure resource (Mobile Engagement App Collection). È possibile scegliere di crearne uno nuovo.You can choose to create a new one.
    • Località: area in cui verranno archiviati i dati su questa raccolta di app e su questa app.Location: Region where the data about this app collection & app will be stored.
  4. Esplorare le raccolte di app Mobile Engagement facendo clic su Esplora e cercando Mobile EngagementBrowse through the Mobile Engagement app collections by clicking Browse and search for Mobile Engagement

  5. Verrà visualizzato un elenco di raccolte di app Mobile Engagement: assicurarsi di avere la stessa sottoscrizione di Azure in cui è stata creata la raccolta di app.You will be shown a list of Mobile Engagement App Collections - make sure you have the same Azure subscription where you created your App Collection.

  6. Fare clic sulla raccolta di app creata nel passaggio precedente per aprire il pannello della risorsa raccolta di app che visualizzerà le diverse app presenti in questa raccolta di app.Click on the App Collection that you created in the prior step to open up the App Collection resource blade which will show the different apps present inside this app collection.

  7. Fare clic sull'app creata per la piattaforma per cui si sta sviluppando.Click on the App created for the platform you are developing for.

  8. Fare clic sul pulsante di comando Informazioni di connessione in alto per aprire il pannello Informazioni di connessione e copiare la stringa di connessione.Click on Connection Info command button at the top to open up the Connection Info blade and copy the connection string from there.

Connessione dell'app al back-end di Mobile EngagementConnecting your app to the Mobile Engagement backend

Questa esercitazione presenta una "integrazione di base", che è la configurazione minima necessaria per raccogliere i dati e inviare una notifica push.This tutorial presents a "basic integration" which is the minimal set required to collect data and send a push notification.

Verrà creata un'app di base con Xcode per illustrare l'integrazione.We will create a basic app with Cordova to demonstrate the integration:

Creare un nuovo progetto CordovaCreate a new Cordova project

  1. Avviare la finestra Terminal nel computer Mac e digitare il codice seguente, per creare un nuovo progetto Cordova dal modello predefinito:Launch Terminal window on your Mac machine and type the following which will create a new Cordova project from the default template. Assicurarsi che il profilo di pubblicazione usato per la distribuzione dell'app iOS usi 'com.mycompany.myapp' come ID dell'app.Make sure that the publishing profile you eventually use to deploy your iOS app is using 'com.mycompany.myapp' as the App ID.

     $ cordova create azme-cordova com.mycompany.myapp
     $ cd azme-cordova
    
  2. Eseguire il codice seguente per configurare il progetto per iOS ed eseguirlo nel simulatore iOS:Execute the following to configure your project for iOS and run it in the iOS Simulator:

     $ cordova platform add ios 
     $ cordova run ios
    
  3. Eseguire questo codice per configurare il progetto per Android ed eseguirlo nel simulatore Android.Execute the following to configure your project for Android and run it in the Android emulator. Assicurarsi che le impostazioni dell'emulatore Android SDK abbiano la destinazione Google APIs (Google Inc.) con CPU/ABI come Google APIs ARM.Make sure that your Android SDK Emulator settings have its Target as Google APIs (Google Inc.) with the CPU / ABI as Google APIs ARM.

     $ cordova platform add android
     $ cordova run android
    
  4. Aggiungere il plug-in per la console Cordova.Add the Cordova Console plugin.

    $ cordova plugin add cordova-plugin-console
    

Connettere l'app al back-end di Mobile EngagementConnect your app to Mobile Engagement backend

  1. Installare il plug-in di Cordova per Azure Mobile Engagement, specificando i valori delle variabili per la configurazione del plug-in:Install the Azure Mobile Engagement Cordova plugin while providing the variable values to configure the plugin:

     cordova plugin add cordova-plugin-ms-azure-mobile-engagement    
          --variable AZME_IOS_CONNECTION_STRING=<iOS Connection String> 
         --variable AZME_IOS_REACH_ICON=... (icon name WITH extension) 
         --variable AZME_ANDROID_CONNECTION_STRING=<Android Connection String> 
         --variable AZME_ANDROID_REACH_ICON=... (icon name WITHOUT extension)       
         --variable AZME_ANDROID_GOOGLE_PROJECT_NUMBER=... (From your Google Cloud console for sending push notifications) 
         --variable AZME_ACTION_URL =... (URL scheme which triggers the app for deep linking)
         --variable AZME_ENABLE_NATIVE_LOG=true|false
         --variable AZME_ENABLE_PLUGIN_LOG=true|false
    

Android Reach Icon : deve essere il nome della risorsa senza estensioni né prefisso drawable (ad esempio mynotificationicon) e il file di icona deve essere copiato nel progetto Android (platforms/android/res/drawable)Android Reach Icon : must be the name of the resource without any extension, nor drawable prefix (ex: mynotificationicon), and the icon file must be copied into your android project (platforms/android/res/drawable)

iOS Reach Icon (Icona iOS Reach): deve essere il nome della risorsa con la relativa estensione (ad esempio mynotificationicon.png) e il file di icona deve essere aggiunto al progetto iOS con XCode (usando il menu di aggiunta dei file)iOS Reach Icon : must be the name of the resource with its extension (ex: mynotificationicon.png), and the icon file must be added into your iOS project with XCode (using the Add Files Menu)

Abilitazione del monitoraggio in tempo realeEnabling real-time monitoring

  1. Nel progetto Cordova modificare www/js/index.js in modo da aggiungere la chiamata a Mobile Engagement per dichiarare una nuova attività dopo la ricezione dell'evento deviceReady .In the Cordova project - edit www/js/index.js to add the call to Mobile Engagement to declare a new activity once the deviceReady event is received.

      onDeviceReady: function() {
             Engagement.startActivity("myPage",{});
         }
    
  2. Eseguire l'applicazione:Run the application:

    • Per iOSFor iOS

      Nella finestra Terminal avviare l'app in una nuova istanza del simulatore eseguendo il codice seguente:In Terminal window launch your app in a new Simulator instance by executing the following:

        cordova run ios
      
    • Per AndroidFor Android

      Nella finestra Terminal avviare l'app in una nuova istanza dell'emulatore eseguendo il codice seguente:In Terminal window launch your app in a new emulator instance by executing the following:

        cordova run android
      
  3. I log della console avranno un aspetto analogo al seguente:You can see the following in the console logs:

     [Engagement] Agent: Session started
     [Engagement] Agent: Activity 'myPage' started
     [Engagement] Connection: Established
     [Engagement] Connection: Sent: appInfo
     [Engagement] Connection: Sent: startSession
     [Engagement] Connection: Sent: activity name='myPage'
    

Connettere l'app con monitoraggio in tempo realeConnect app with real-time monitoring

Questa sezione descrive come connettere l'app al back-end di Mobile Engagement usando la funzionalità di monitoraggio in tempo reale di Mobile Engagement.This section shows you how to connect your app to the Mobile Engagement backend by using the Mobile Engagement's real-time monitoring feature.

  1. Nell'account Azure Mobile Engagement, accertarsi di selezionare l'app che si desidera monitorare e gestire nel portale di Mobile Engagement.In your Azure Mobile Engagement account, make sure you select the app you wish to monitor and manage in the Mobile Engagement portal. Accedere al portale di Mobile Engagement facendo clic sul pulsante Engagement nella parte inferiore.Navigate to your Mobile Engagement portal by clicking the Engage button at the bottom.

  2. Viene visualizzato il portale Mobile Engagement.You will land in the Mobile Engagement portal. Se non è selezionata la scheda Monitoraggio, fare clic su Monitoraggio.If the Monitor tab is not selected, click on the Monitor.
  3. Verranno visualizzati, in tempo reale, tutti i dispositivi in cui l'app verrà avviata.The monitor is ready to show you any device in real time, which will start your app.
  4. Avviare l'app.Start your app now. Se l'integrazione è corretta si noterà una sessione di monitoraggio, che significa che l'app ora è collegata al back-end di Mobile Engagement e sta inviando dati ad esso.You should see one session in the monitor if your integration is correct which means that your app is now connected to the Mobile Engagement backend and is sending data to it.

Abilitazione delle notifiche push e della messaggistica in-appEnabling Push Notifications and in-app messaging

Mobile Engagement consente di interagire con gli utenti tramite notifiche push e messaggistica in-app nel contesto di campagne.Mobile Engagement allows you to interact with your users using Push Notifications and in-app messaging in the context of campaigns. Questo modulo è denominato REACH nel portale di Mobile Engagement.This module is called REACH in the Mobile Engagement portal. Le sezioni seguenti consentono di configurare l'app per la ricezione.The following sections will setup your app to receive them.

Configurare le credenziali push per Mobile EngagementConfigure Push credentials for Mobile Engagement

Per consentire a Mobile Engagement di inviare notifiche push per conto dell'utente, è necessario concedere l'accesso al certificato Apple iOS o alla chiave dell'API del server GCM.To allow Mobile Engagement to send Push Notifications on your behalf, you need to grant it access to your Apple iOS certificate or GCM Server API Key.

  1. Passare al portale di Mobile Engagement.Navigate to your Mobile Engagement portal. Verificare che l'app usata per questo progetto sia attiva e fare clic sul pulsante Engage nella parte inferiore della schermata:Ensure you're in the app we're using for this project and then click on the Engage button at the bottom:

  2. Verrà visualizzata la pagina delle impostazioni del portale di Mobile Engagement.You will land in the settings page in your Engagement Portal. Da questa posizione fare clic sulla sezione Push nativo :From there click on the Native Push section:

  3. Configurare il certificato iOS o la chiave dell'API del server GCMConfigure iOS Certificate/GCM Server API Key

    [iOS][iOS]

    a.a. Selezionare il certificato con estensione p12, caricarlo e digitare la password:Select your .p12, upload it and type your password:

    [Android][Android]

    a.a. Fare clic sull'icona di modifica in primo piano Chiave API nella sezione Impostazioni GCM e, nella finestra popup che viene visualizzata, incollare la chiave del Server GCM e fare clic su OK.Click the edit icon in front of API Key in the GCM Settings section and in the popup which shows up, paste the GCM Server Key and click OK.

Abilitare le notifiche push nell'app CordovaEnable push notifications in the Cordova app

Modificare www/js/index.js in modo da aggiungere la chiamata a Mobile Engagement per richiedere le notifiche push e dichiarare un gestore:Edit www/js/index.js to add the call to Mobile Engagement to request push notifications and declare a handler:

 onDeviceReady: function() {
       Engagement.initializeReach(  
             // on OpenUrl  
             function(_url) {   
             alert(_url);   
             });  
        Engagement.startActivity("myPage",{});  
    }

Esecuzione dell'appRun the app

[iOS][iOS]

  1. Verrà usato XCode per sviluppare e distribuire l'app nel dispositivo per testare le notifiche push, poiché iOS consente solo notifiche push in un dispositivo effettivo.We will use XCode to build and deploy the app on the device to test push notifications since iOS only allows push notifications to an actual device. Passare al percorso in cui è stato creato il progetto Cordova, quindi passare al percorso ...\platforms\ios.Go to the location where your Cordova project is created and navigate to ...\platforms\ios location. Aprire il file nativo con estensione xcodeproj file in XCode.Open up the native .xcodeproj file in XCode.
  2. Sviluppare e distribuire l'app Cordova nel dispositivo iOS usando l'account con il profilo di provisioning contenente il certificato appena caricato nel portale di Mobile Engagement e l'ID app corrispondente a quello specificato durante la creazione dell'app Cordova.Build and deploy the Cordova app to the iOS device using the account which has the provisioning profile containing the certificate you just uploaded to the Mobile Engagement portal and the App Id which matches the one you provided while creating the Cordova app. È possibile verificare l'identificatore di aggregazione nel file Resources*-info.plist in XCode per individuare una corrispondenza.You can check out the Bundle identifier in your Resources*-info.plist file in XCode to match it up.
  3. Nel dispositivo verrà visualizzata la finestra popup standard di iOS, che segnala che l'app richiede l'autorizzazione per l'invio di notifiche.You will see the standard iOS popup on your device saying that the app requests permission to send notifications. Concedere l'autorizzazione.Grant the permission.

[Android][Android]

È sufficiente usare l'emulatore per eseguire l'app Android, poiché le notifiche GCM sono supportate nell'emulatore di Android.You can simply use the emulator to run the Android app as GCM notifications are supported on the Android emulator.

cordova run android

Inviare una notifica all'appSend a notification to your app

Si creerà ora una semplice campagna di notifica push per l'invio di un push all'app in esecuzione nel dispositivo.We will now create a simple Push Notification campaign that will send a push to your app running on the device:

  1. Passare alla scheda Coinvolgimento nel portale di Mobile EngagementNavigate to the Reach tab in your Mobile Engagement portal
  2. Fare clic su Nuovo annuncio per creare la campagna di pushClick New Announcement to create your push campaign

  3. Specificare input per la creazione della campagna [Android]Provide inputs to create your campaign [Android]

    • Fornire un Nome per la campagna.Provide a Name for your campaign.
    • Selezionare per Tipo di recapito i valori Notifica di sistema SempliceSelect the Delivery Type as System notification Simple
    • Selezionare come Ora di recapito"In qualsiasi momento"Select the Delivery time as "Any Time"
    • Specificare un Titolo per la notifica che sarà la prima riga nel pushProvide a Title for your notification which will be the first line in the push.
    • Fornire un Messaggio per la notifica che verrà utilizzata come corpo del messaggio.Provide a Message for your notification which will serve as the message body.

  4. Specificare input per la creazione della campagna [iOS]Provide inputs to create your campaign [iOS]

    • Fornire un Nome per la campagna.Provide a Name for your campaign.
    • Selezionare come Ora di recapito"Solo all'esterno dell'app"Select the Delivery time as "Out of app only"
    • Specificare un Titolo per la notifica che sarà la prima riga nel pushProvide a Title for your notification which will be the first line in the push.
    • Fornire un Messaggio per la notifica che verrà utilizzata come corpo del messaggio.Provide a Message for your notification which will serve as the message body.

  5. Scorrere verso il basso e nella sezione del contenuto selezionare Solo notificaScroll down, and in the content section select Notification only

  6. [Facoltativo] È anche possibile specificare un URL di azione.[Optional] You can also provide an Action URL. Verificare che usi uno schema URL fornito durante la configurazione della variabile AZME_REDIRECT_URL del plug-in, ad esempio myapp://test.Make sure that it uses a URL scheme provided while configuring the plugin's AZME_REDIRECT_URL variable e.g. myapp://test.
  7. L'impostazione della campagna più semplice possibile è stata completata.You're done setting the most basic campaign possible. Ora scorrere nuovamente verso il basso e fare clic sul pulsante Crea per salvare la campagna.Now scroll down again and click the Create button to save your campaign.
  8. Fare infine clic su Attiva per la campagna.Finally Activate your campaign

  9. Una notifica push dovrebbe essere visualizzata nel dispositivo o nell'emulatore come parte di questa campagna.You should now see a push notification on your device or emulator as part of this campaign.

Passaggi successiviNext Steps

Panoramica di tutti i metodi disponibili con Cordova Mobile Engagement SDKOverview of all methods available with Cordova Mobile Engagement SDK