Connecting Windows App To The Mobile Engagement Backend

Introduction

Mobile Engagement is a SaaS category, which provides the user engagement platform that provides data-driven insights into an app's usage data, user segmentation, enables push notifications, and supports messaging.

The following are some of the benefits of using Mobile Engagements.

• Collect real-time analytics, which highlights the user behavior.
• Measure and act on analytics, using single dashboard.
• Create dynamic segments, which are based on the collected data.
• Create marketing campaigns/push notifications targeting specific segments.
• Send personalized out-of-app notifications, polls and in-app notifications with rich HTML.
• Integrate and automate with CRM/CMS/IT systems, using open-platform API's.
• Find SDK's for all major platforms—iOS, Android, Windows, Windows phone.

In this article, I will talk about connecting Windows Applications to the Mobile Engagement backend, using Windows Azure.

Before reading this article, here are some articles, which will help you to get some knowledge about Windows Azure and getting started with Mobile Engagement.

• Introduction to Microsoft Azure
• Getting Started With Mobile Engagement Using Azure

The resulting requirements are needed to create and connect Windows Applications with Mobile Engagement backend.

• Visual Studio 2015 Update 1 or more.
• Windows 10 SDK.
• Windows Developer account.
• Internet connectivity.

Let’s get started

Creating a Windows Universal Project

The steps are given below to create a Windows Application -- assume these steps are similar to the previous versions of Visual Studio.

Open up Visual Studio 2015 to create an empty Windows Universal Application.

In the Home screen, click New Project.



Once popup appears, select Windows followed by Universal and Blank App (Universal windows). Provide an app name click OK.



Congrats. Now, we have created an empty Windows Application.

Connecting an app to Mobile Engagement backend

Open package.appx.mainfest and click capability tab to enable internet client.





Install Mobile Engagement package from NuGet Package Manager. Here, the search term will be “MicrosoftAzure.MobileEngagement”. If you are creating for both Windows and Windows Mobile, configure Mobile Engagement Package for both the targeted platforms.





Click Install button to install Mobile Engagement Package



Click OK to commit for Review Changes.



Click I Accept button to accept the License agreement.

After installation, please understand readme.text file, which appears on your Visual Studio tool and follow the mentioned step.

After successful installation of Mobile Engagement Package from NuGet Package Manager and then navigate to

%USERPROFILE%\.nuget\packages\MicrosoftAzure.MobileEngagement\3.4.1\content\win81 from file explorer.





Add these files into your Windows application project and click refresh button to make the changes.

Copying Connection string from Mobile Engagement Account

Open your mobile engagement account and click app name that is listed below



The properties for the selected Application appears, followed by click connection string option available in portal then the connection string blade appears then copy that one and make a note of it and it should be used in future.



Finally, open Resource and then EngagementConfiguration.xml and then copy the connection string from Mobile Engagement account and paste it in the EngagementConfiguration.XML file inside the <connectionString></connectionstring>





In the App.xaml.cs file, add the the command, mentioned below, using statement.

using Microsoft.Azure.Engagement;

Add another method, which is used to initialize Mobile Engagement

private void InitEngagement(IActivatedEventArgs e) {
    EngagementAgent.Instance.Init(e);
}

Now, initialize SDK, using OnLaunched Method

protected override void OnLaunched(LaunchActivatedEventArgs e) {
    InitEngagement(e);
}

Add the following OnActivated method by adding the code, mentioned below.

protected override void OnActivated(IActivatedEventArgs e) {
    InitEngagement(e);
}

Enabling Real-time monitoring

To monitor the process by sending and receiving the data, we need to add the code, mentioned below.

Now open MainPage.xaml.cs then add the following using

using Microsoft.Azure.Engagement.Overlay;

Change the base class of MainPage from page to EngagementPageOverlay.

class MainPage: EngagementPageOverlay

Now, open MainPage.xaml file to configure the namespace segment, mentioned below.

xmlns: engagement = "using:Microsoft.Azure.Engagement.Overlay"

Replace Page tag in MainPage.xaml with engagement:EngagementPageOverlay.









Connecting an app With Real-Time Monitoring

Now, open Azure Mobile Engagement account and select your desired app in which you need to configure and manage Mobile Engagement portal. Open your Mobile Engagement portal by clicking the Engage button at the bottom.



Now, you will be taken to the Mobile Engagement portal. Finally, select app name and then select Monitor tab.





The monitor is ready to show any real-time devices, which will be able to start the device.

Now, start your app by clicking F5 button. Now, you will be able to see one session, if the integration between the Application and mobile engagement is correct.

Enabling Push Notification and in-app messaging

Enabling our app to receive WNS Push Notification

In the Package.appxmanifest, select the Application tab under notification and set Toast Capable to yes, if you are using the old Visual Studio.



Initialize Reach SDK

In App.xaml.cs, call EngagementReach. Instance.Init(e); in the InitEngagement function right after the agent initialization:

private void InitEngagement(IActivatedEventArgs e) {
    EngagementAgent.Instance.Init(e);
    EngagementReach.Instance.Init(e);
}

Congrats! Now we are ready to send Notifications to our app.

Configuring Access to Mobile Engagement to send notifications

Open Windows Dev Center in your web browser and make a login using credentials

Click Dashboard at the top of the dev account window and then click create a new app from the left panel

Create an app and check availability



It takes some time to register an Application in windows developer account

Once the application is created, scroll down and find Push Notifications. Click Get started.



The push notification Windows appear and click Live Services Site link.



Now, you will be navigated to push notification Services and copy the credentials such as Package ID, secret key.



Now, navigate to settings in Mobile Engagement portal, click Native push from the left panel. Click Edit button to enter Package security identifier and your secret key.







Paste the copied Package Security Identifier and Application Secret.

Finally, make sure that you have associated your Visual Studio app to developer store account. Right click on app name and find a store and then associate the app with the store.





Click Next button.



Select your app name and click Next.



Click Associate button.

Sending Notification to user app

Open up Mobile Engagement portal and open your app. Click Reach tab.



Click New Announcement to create your push notification campaign.



Setup the name and category field through the screenshot, mentioned below. Provide a name to your campaign, select Deliver time as any time. Notification type needs to be mentioned and then type the notification title and then type the message Scroll down. Find the Content section and select Notification only.





Congrats. You're done by setting the most basic campaign possible. Now, scroll down again and click the Create button to save your campaign.



Finally, click Activate button to activate a campaign to send a push notification.



If the app is running, you will be able to see an in-app notification. If the app is closed, you see a toast notification.



Click F5 button to deploy an Application and following are the two different types of output received, as shown below.

Output as In-App



Output as toast

  

 

Hint 

 

Mobile Engagement Portal URL should be

 

 https://{You app name}.portal.mobileengagement.windows.net  

Summary

In this article, we will discuss about connecting Windows Application with Mobile Engagement to send and receive the notifications and announcement. I hope you enjoyed reading this article. Thanks for reading.

Happy coding.