A team from Microsoft and Liquid Daffodil set out to bring fanband, the top-rated paid app in health and fitness for Windows Phone 8.1, to iOS, Android, and Windows 10. In addition, the team created a mechanism to better understand user interactions and application stability by incorporating HockeyApp Crash Reporting and Analytics. The team was also able to incorporate an innovative feature into the final product using Azure Notification Hubs.

Core team:

Our solution required porting a Windows 8.1 Universal Application to iOS and Android using Xamarin.Forms. This allowed us to create two new projects with approximately 95% shared code in both the UI and the code behind it. We then used this code base as the foundation of a Universal Windows Platform (UWP) release for Windows 10.

Each of these applications includes Crash and Custom Analytics Reporting by using the HockeyApp SDK. All code was stored and provisioned using Visual Studio Team Services. This allowed us to collaborate, plan, and assign work while also allowing integration with HockeyApp services. The application also employed Azure Notification Hubs to allow for seamless updating of the user’s theme on their Microsoft Band.

Customer profile

Founded by Scott and Amy Peterson in 2010, Liquid Daffodil brings together some of the most unique talent in the software industry to form a dynamic organization that delivers solutions to clients across the globe, including large-scale enterprise solutions for organizations such as Halliburton, Texas Instruments, Compaq and Hewlett-Packard, United Airlines, and Microsoft. As a team of developers, designers, and architects with more than 25 years of Microsoft-centric development experience, Liquid Daffodil is a premier provider of Microsoft business and consumer solutions for all platforms.

Specialties include:

  • Windows Universal
  • Microsoft Health
  • Microsoft Cognitive Services
  • Office Solutions

In addition, Liquid Daffodil offers rich interactive solutions for enterprises, leveraging SharePoint, Microsoft Azure, and other Microsoft-centric integrated collaboration solutions. Liquid Daffodil has excelled at being an experienced and successful developer of Microsoft Band and health-integrated solutions.

Problem statement

Although fanband is the No. 1 paid app in the health and fitness category for Windows Phone 8.1, not everyone who owns a Microsoft Band can benefit from this application because many Microsoft Band owners do not have access to a Windows 8.1 device.

The developer seeks to improve feature adoption within the application—currently, it is understood based on user feedback provided by email and validated through manual in-house testing. With multiple platform releases on the horizon, this issue is predicted to increase in severity.

In addition, the developer would also like to incorporate a lightweight solution to update users’ Microsoft Bands at scheduled intervals regardless of the devices they are paired to.

Solutions, steps, and delivery

  1. Analyze existing development workflow.

    Liquid Daffodil is an in-house, family-owned and -operated software development shop. All aspects of development are handled personally by owner Scott Peterson, with design and finances handled by his wife, Amy. Testing is usually done manually, often with assistance from their children.

    We began by applying value stream mapping to Liquid Daffodil’s existing software development lifecycle. We looked specifically at the development process that supported the initial Windows 8.1 release of fanband.

    Existing Process

    This existing process is common in small development shops. You will notice that development follows a weekly dev cycle with significant potential for bottlenecks being introduced in areas of quality control. It should be noted that development time is expected to remain relatively constant in our project even though we have plans to target multiple platforms. This is due to the decision to employ Xamarin.Forms as a means of consolidating UI and app logic. However, targeting these additional platforms is expected to double the time necessary to complete testing for each new platform introduced.

    When we examine the area of quality control closer, we see an opportunity to reduce time to delivery and improve overall quality by adoption of the following DevOps practices:

    • Continuous integration: By verifying build integrity following daily development work, we can create build candidates to supply for testing faster.

    • Automated deployment: By opening up distribution of internal builds to beta testers through HockeyApp Deployment, we can scale testing to more users regardless of location. HockeyApp will also allow us to bypass slower official beta distribution channels provided by the Android, iOS, and Windows stores.

    These suggestions and their added benefit can be seen in the following diagram:

    Proposed Process

    With continuous integration, Scott can apply automated tests on daily builds to ensure that the latest code improvements are eligible for internal testing. Through automated deployment, these build artifacts can then be distributed via HockeyApp for internal testing. All of this is possible by integration of Visual Studio Team Services with HockeyApp Distribution, a step we will walk through in detail later in this article.

    By this same mechanism, Scott can easily distribute these builds to beta testers around the world at his discretion. In addition, the crash reporting features of HockeyApp will allow Scott to seamlessly gather reports from users during test cycles. As a result of these suggestions, Scott can trim down what was once a 2-week testing process to as short as is necessary. In fact, Scott could now take a single user suggestion from someone anywhere in the world, develop code for that feature, and distribute the resulting build solely to that user for testing if he desired.

  2. Migrate code base into Visual Studio Team Services.

    Migrate codebase into VSTS

    To begin our project, we needed a way to work on the code base remotely and securely with version control, work-item tracking, and continuous integration. The existing code for fanband resided on a local Team Foundation Server instance run in-house by Liquid Daffodil.

    While we could have tied into the existing local Team Foundation Server, this would involve creating local users on the machine and require exposing it on the network. Using Visual Studio Team Services, we were able to have everything we needed in a matter of minutes. After initial setup, we were able to invite team members into the project and begin collaboration. Migrating from Team Foundation Server to Team Services required bringing code from the existing Team Foundation Server instance into Team Services by manually copying over relevant assets. Details on this process are available in the Visual Studio Team Services documentation.

  3. Port fanband from Windows 8.1 to iOS/Android using Xamarin tools including Xamarin.Forms, Visual Studio Android Emulator, and Xamarin iOS simulator.

    Android Port

    Xamarin was chosen as the main technology for this project due to the ability to target multiple platforms (Android, iOS) with C#. The original Windows 8.1 project was created in C#, which allowed us to reuse significant portions of the code during the porting process.

    We accomplished the port by creating a new Xamarin.Forms project and copying over source and assets from the original 8.1 project. After bringing in the appropriate Band SDK components, resolving compilation errors, and upgrading dependencies, we had a solid port in a few hours.

  4. Port from Windows 8.1 to UWP.

    We accomplished this step by creating a new Windows 10 UWP app and copying over source and assets from the original 8.1 project. With our base project building, new features were added that include allowing Cortana to change a theme via voice commands and setting a scheduled time to update the Microsoft Band with a random theme from a curated list of favorites using Azure Notification Hubs.

  5. Add HockeyApp Analytics to Windows Phone 8.1, Windows 8.1, Windows 10 Mobile, Windows 10, iOS, and Android.

    HockeyApp Apps

    HockeyApp Android

    HockeyApp iOS Custom Events

    We started off by following the HockeyApp documentation, which allowed us to easily set up crash reporting. However, our project contained a scenario where we needed to capture custom metrics from our shared code in our Xamarin projects in order to assess user behavior. This required a customized solution using dependency injection to allow access to values in the shared code from our platform-specific projects. This issue is detailed further in the section below titled Implementing the HockeySDK in Xamarin.Forms projects.

  6. Integrate HockeyApp into Visual Studio Team Services.

    HockeyApp VSTS Dashboard Integration

    HockeyApp VSTS Build Definition

    The HockeyApp documentation outlined clear steps for integrating HockeyApp Services with Team Services. Once set up, widgets can easily be added to an existing Team Services dashboard to allow quick navigation to analytics and reports. It also enables use of a new build step named “HockeyApp” under the Deploy group inside Build Steps. This allows easy uploading of builds for distribution via HockeyApp.

  7. Implement Azure Notification Hubs.

    HockeyApp VSTS Build Definition

    We updated a feature of fanband that allows users to set random times to update their themes from a collection of favorited themes. This mechanism now leverages Azure Notification Hubs to allow a reactive-based method for activating updates. We no longer use polling or background timer tasks in fanband to see if it’s time to “automatically change” a user’s theme based on the schedule they’ve defined. When users set their update schedules in the fanband client app, it registers or updates a scheduled notification directly on the notification hub using the Notification Hubs SDK.

    Standard tier Notification Hubs supports a feature that enables scheduling of notifications up to seven days in advance. When a user sets a desired time to update their Band, a request is sent to an Azure API app that handles the processing of notifications. This is necessary due to a limitation in the Azure SDK for UWP that does not allow for creation of scheduled notifications. This Azure API app employs the full Azure SDK for .NET along with the SAS connection string to the notification hub to allow for creation of scheduled notifications.

    When the schedule conditions are met, the notification hub pushes a lightweight raw notification to the device, and the device handles the update as a “push enabled” background task. The notification hub pushes a single lightweight raw notification to a device at the exact time of the requested update, activating a PushNotificationTrigger that invokes a background task to update the theme. Details on setup and implementation can be found in How To: Send scheduled notifications.

End-customer example

General lessons

Implementing the HockeySDK in Xamarin.Forms projects

While implementing the HockeyApp SDK in our Xamarin.Forms project, we encountered a scenario in which we needed to ensure the appropriate Xamarin component was loaded in the respective iOS and Android project to allow us to capture analytics triggered in the shared UI layer. Looking for a solution, we came across a post on the Xamarin forums describing this exact scenario. Some replies indicated it could be done with Dependency Injection, but there were no clear examples of how to do so. We employed this approach in our solution and were able to share with users through a clear example on our teammate Gavin Bauman’s blog. We then created an example hosted on GitHub that demonstrates the solution on Android, iOS, UWP, Windows 8.1, and Windows Phone 8.1.

You can now follow the commit history of this project for a clear rundown of the steps to implement HockeyApp into a Xamarin.Forms project:

  1. Create a Xamarin.Forms project.
  2. Add appropriate HockeySDK component/package.
  3. Create a service interface in your shared project.
  4. Add implementation of the service as a linked file in applicable projects.
  5. Call service from shared project using DependencyService.

Additional resources