Building a Universal Windows Platform (UWP) Application (Part 6) – Deployment and Analytics w/ HockeyApp

by | Apr 24, 2017

I just rolled off a client recently that needed to build a Universal Windows Platform (UWP) application as part of their hardware and software solution.  For those who aren’t yet familiar with UWP, you can check out this article by Tyler Whitney.

As many of you developers out there are aware, sometimes you have to build or bring with you a number of application infrastructure items before you can even get started with the core application logic.  For example, you might need some helpers, services and base classes that make your job easier or allow you to start with your base patterns, such as, MVC, MVVM, etc.

So, I have decided to create a series of posts that build up a bunch of common, important parts of an application that you might want to have in place before you even start developing your core functionality.  I have discussed a number of topics in my previous posts:

Building a Universal Windows Platform (UWP) Application, Part 1 – Using Template10

Building a Universal Windows Platform (UWP) Application, Part 2 – T4 and Strings

Building a Universal Windows Platform (UWP) Application, Part 3 – Multilingual Support

Building a Universal Windows Platform (UWP) Application, Part 4 – Logging w/ MetroLog

Building a Universal Windows Platform (UWP) Application (Part 5) – Analytics with Visual Studio Application Insights

If you haven’t already read the previous posts, I recommend you do since they all build on each other.

In part 6 of this series, I thought that maybe before we start writing any application code, we might want to put in place a means to send out versions of the software for users and testers to review the progress of the application.

My goal is to show you how to do the following:

  • Setup HockeyApp
  • Add HockeyApp API calls to our Analytics service
  • Review Statistics
  • Deploy a version of our software to HockeyApp
  • Side load new version from HockeyApp

How does that sound?  Excited?  Well, let’s get started…

HockeyApp

Overview

What is HockeyApp?  Well to sum it up, I took a screen shot of key features off of the HockeyApp website.

What is HockeyApp? Here are the key features.

As you can see, HockeyApp allows you to manage versions of the application by providing you the means to distribute, test, provide feedback and analyze reports/metrics on its activity.

Create Account

Let’s start by creating a user account for our application.  Click this link to take you to the website.

Once you are at the website, select Sign up Free.

Sign up for HockeyApp for free.

Once you have selected Sign up Free, you should see the following form.  Fill in the form and make sure you select the I’m a developer checkbox.

Make sure to check that you are a developer when filling out the HockeyApp sign up form.

Once you finish filling out the form, select Register.  You should now be prompted with the following screen.  Since we are only focusing on a UWP application, Select Skip this step.

You should now be presented with the HockeyApp dashboard.

Add Application

Now, let’s add the new application to our account.  First, click on the New App button in the top left hand corner of your dashboard.

You should be shown an upload build dialog.  We aren’t going to upload an application build at this point, we will do it later via Visual Studio (cool stuff).  For now, let’s just select to Create the app manually instead.

You will be taken to a Create App screen.  In here, you will want to select Windows for the Platform, beta for Release Type, type UWPT10 for both Title and Bundle Identifier.  Then, click Save.

While it is creating your application space, you will see the following progress dialog:

Once it is done, it will take you to your application dashboard.  It should look something like this…

HockeyApp API Integration

Okay, our account and application is setup in HockeyApp.  Now, let’s open our project and start integrating the HockeyApp API into our project.  Once your project is open, right click on References and select Manage NuGet Packages…

First step to integrate the HockeyApp API.

In the browse tab, type in HockeySDK.UWP in the search box.  You should see the HockeySDK.UWP package, select the package and then select Install.

How to install the HockeySDK.UWP package.

You will be prompted with a review for the components that will be installed.  Select OK.

Next, you will be prompted to accept the licensing agreement.  Select I Accept.

If everything goes well, you should see a little green check next to the icon and the version that is installed to the right.

Go ahead and close the dialog.  You should notice a newly added reference HockeySDK.UWP in your References folder.

Now that we have the library included in our project, let’s use it.  First thing we will want to do is initialize the HockeySDK.  In my last post, if you recall, we created a Telemetry service.  Open up Telemetry.cs and go to the SetupTelemetry() method.

From here, let’s add a call the HockeySDK setup method, which is easy.  All you have to do is update the SetupTelemetry() method with the following code:

The parameter for the Configure() method is the App ID defined in your Application Dashboard in HockeyApp which is located in the general information section on the site.

Let’s also add the following code to our FlushTelemetry() method:

Okay, cool, we are almost there!!  The great thing about the HockeyApp API, is it is virtually the same API signatures as the Application Insights API. If you look at the remaining code, all the methods pretty much line up.  Check it out.

View Statistics

Okay, Build and Run your application.  Close the application.  Now go to your UWPT10 application dashboard in HockeyApp and Select Events.

It might take a few minutes, but you should start to see telemetry data show up.   In the example below, you will notice that there are a couple of the events for Starting App and Suspending are in the list.

Start playing around with your Telemetry service and see what you can do.  Notice too that there are sections for Crashes and Feedback.

SECRET:  Microsoft is working to bring both Application Insights and HockeyApp into a new service called Mobile Center, so in the future, these might just be consolidated.  Come back later and look for a post about this as more information becomes available.

Beta/Testing Deployment

Okay, so up to this point we have setup a HockeyApp account, created the application space in HockeyApp for our application and integrated HockeyApp telemetry into our application.  Now, how do we distribute this version out to others for testing?  There are two ways:  Manually and Using Visual Studio.

I am not going to show you how to do it manually (as that should become clear as you use the HockeyApp site).  Instead I am going to show you how to use Visual Studio to deploy a version to HockeyApp.

Create Application Package

The first thing you need to do is create an application package for the project.  To do this, right click on the project, select Store and then select Create App Packages…

You will be prompted to answer if you want to create this package for the Windows Store.  Select No and then select Next.

Next you will be prompted for information about the packages you would like to build.  For now, keep all the defaults, except, the configuration settings.  Here, let’s just build one for x86 only.  Then select Create.

 

Once the package has been created, you will be presented with a dialog that gives you a link to your package.  Select the output location link and Windows Explorer will open to your package folder.

You should now see the folder that contains your application package.

Back on the dialog, select OK to close it.

Distribute to HockeyApp

First, we right click on the project, select HockeyApp and then select Distribute With HockeyApp…

You will be prompted with the HockeyApp from Microsoft dialog.  Here, you will want to Select Sign in and use the account you used to login to your HockeyApp account.  If the account isn’t listed, you can add it.

Once you have the correct account chosen, you can select the Upload options tab (or the Next button).  Select the Application Name (UWPT10).  The path to the application package we created previously should show up. If not, you can try to find it using the browse button.

Select the Release Notes tab (or the Next button).   Enter your Release NotesSelect Finish.

You should get the following two notifications in Visual Studio if the upload process succeeds.

If you go back to your application dashboard and refresh the page, you will notice that you have a new build in your Latest Versions section.  Also, notice that there is a number to the right of the Versions tab at the top of the dashboard.  You can either select the version itself or the Version tab.

If you selected the Versions tab, you will be taken to your build version list.  In our case, there will only be one.  If you select a specific version, or you select a version from the overview page, you will be taken to that specific version information.  The Version overview should look like the following:

Side load new Version

Now that we have the latest version pushed to HockeyApp, let’s talk about how we get the latest version to side load onto our device.  From the Version screen above, select the Notify button.

Clicking Notify will display a user selection dialog containing of all the users/groups that have access to this application.  By default, it will have the owner of the application.  If you want to add others or create groups you can do that easily, but for now, just select yourself.  Then, select Send.

An email will be sent to the users with information about the new version.  You will then see a confirmation screen from which will present you with the version information, a direct link to the Download Page, the ability edit the current notification and a Done button.  In our case, we can close it by selecting Done.

Check your email.  You should have an email that looks like this …

Click on the Download button (link). It should take you to a download page for this version of the application.  Once you are there, click on Download.

Once you click download, your browser will attempt to download the file.  In Microsoft Edge, you will see something like this:

Select Save.  Once the file is downloaded, we will need to extract the .ZIP file.  Open the folder where the download resides.  On Microsoft Edge, I get the following:

Select Open Folder.

Unzip the downloaded file either using the built-in feature to Windows 10 or an application of your choice.  Now, open the directory with the unzipped files.  You should see the following:

We will now try to side load (install the application without using the store) by using the pre-built PowerShell script created for us by Visual Studio.  Right-click on the Add-AppDevPackage PowerShell script and select Run with PowerShell.

Since the PowerShell script requires Administrator credentials to install a certificate for the application, you will be asked if it is okay to install the certificate.  To accept, press Enter.

A standard Windows 10 UAC dialog will ask you to give permission to run the PowerShell script.  Select Yes.  You will then see a new PowerShell script Window with the following:

Since we know it can be trusted and we do want to install the certificate, press Y on your keyboard.  The certificate will be installed, the PowerShell script will be close and you will be directed back to the original PowerShell script.  If the PowerShell the script completes successfully, the application will be installed on your machine.  However, if you installed it on your development machine you probably will see that the certificate was installed, but the application did not install.

I did this on purpose so that I could save you some head scratching.  If you ran your application using Visual Studio it registers the application package for you, so your PowerShell script is identifying that it already exists on the system.  Now, it would be nice if the script could identify this and ask if we want to replace the existing one, but it doesn’t, so we must do it manually.  To do this, just search for the application by pressing the Windows Key + S and type UWPT10, right-click on the application in the search results and select Uninstall.  Confirm you want to uninstall by selecting Uninstall.

Once the old application has been uninstalled, go ahead and run the Add-PackageAdd PowerShell script again.  This time, you should see a text based progress bar…

… and then when the install is completed, your script output should look like this…

Now, press Enter to close the script window.  Your application should be installed.  Do another search for the application, Windows Key + S, type UWPT10 and then select the application.  Bang.  You now have a version of the application that was sent to you running on your local machine.

If you want, you can go back to both Azure Application Insights or HockeyApp and view your statistics to verify it is sending the correct telemetry that was setup in your application.

NOTE:  If your application crashes, a report will be sent to HockeyApp with as much information as it could capture to help diagnose the problem.  You get this for free, no coding required.

IMPORTANT NOTICE!

If you jump back to your Visual Studio project and attempt to run it from the IDE, you will get this message.

At this point it is up to you to decide, but if you want to run the application and debug it, you will need to select Yes and re-deploy the application using Visual Studio.

Summary

So, to summarize what we accomplished in this blog post:

  • Setup HockeyApp
  • Add HockeyApp API calls to our Analytics service
  • Review Statistics
  • Deploy a version of our software to HockeyApp
  • Side load the new version from HockeyApp

I hope you enjoyed this post.  If so, please share it with others.