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.

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.

Windows

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

Windows

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.

Windows

Windows

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.

Windows

Windows

Click Install button to install Mobile Engagement Package

Windows

Click OK to commit for Review Changes.

Windows

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.

Windows

Windows

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

Windows

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.

Windows

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>

Windows

Windows

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.

Monitoring

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.

Monitoring

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

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

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

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.

developer

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

developer

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.

developer

Select your app name and click Next.

developer

Click Associate button.

Sending Notification to user app

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

developer

Click New Announcement to create your push notification campaign.

developer

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.

developer

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

developer

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

developer

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.

developer

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

Output as In-App

developer

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.