Cloud4Good: Cloning, Compiling and Deploying the Child Finder Xamarin Mobile App

  • Article

Back in October RedBit had an opportunity to participate in a weekend hack to try and leverage technology to find missing children. It was a collaboration with Missing Children Society of Canada, City of Calgary, Calgary Police Service, Microsoft and RedBit.

This article will focus on how to get the Xamarin project up and running connected the backend NodeJS system built.

Technology Overview

The system consisted of the following

  1. Visual Studio – This was our development environment
  2. GitHub – our source code repository for the system
  3. Xamarin Forms – our cross-platform solution to target iOS, Android & Windows with one code base
  4. Hockey App – Distribution of the application

Although multiple people worked on the application and this article focuses on the development of the Xamarin app, here is a high level architecture of the system which should give an idea of all the parts involved in the system

Mobile App Design Session

With any project, at RedBit we start with a design session to figure out what exactly needs to be built. We had an idea of the users that were going to use the mobile app (personas) and this was officers investigating a case.

After an hour of a design session we came up with the following white board drawing

It was a simple application that consisted of

  1. Login Page
  2. List of Cases Page
  3. Case Details Page

Each page consisted of various actions that the user could do on each page.  At this point we defined the APIs that were required by the backend NodeJS REST API and the data models that will be sent from device to REST API. For more details on the NodeJS application and what it connected to see the related article: https://blogs.technet.microsoft.com/canitpro/2016/12/14/cloud4good-extracting-data-from-the-twitter-api-through-azure-functions/

Next few steps will go through how to get the application up and running on your machine and running on iOS, Android and Windows using Visual Studio.

Cloning the Project

First thing we need to do is clone the repository which can be located here https://github.com/CDN-Missing-Children-Hack/client. All other repos, a total of six, can also be found in the root of the repository

The next sections assume you have

  1. Visual Studio 2015 (Community Edition will be fine)
  2. Xamarin Tools Installed
  3. GitHub Extensions for Visual Studio
  4. A MAC for building iOS app

With those pre-requisites in place we can first clone the project

  1. Open Visual Studio
  2. Click on the Manage Connection button in the Team Explorer dialog
  3. Under Local Git Repositories click on Clone and enter the following URL https://github.com/CDN-Missing-Children-Hack/client.git
  4. Click Clone and you should start cloning the repo
  5. Double click the newly cloned repo and you should be taken to the Home Page for the repo
  6. Double click the Solution to open it up in Visual Studio

At this point you can switch over to Solution Explorer (CTRL-W, S) and you should see all the projects and files available to you.

Overview of the App

The application written for the hack is a Xamarin Forms based application using a Shared Project which allowed us to share code across iOS, Android and Windows. The solution consisted of four projects

  1. MCS.IRIS – Shared Project where about 95% of the code exists
  2. MCS.IRIS.Droid – the android version of the project
  3. MCS.IRIS.iOS – the iOS version of the project
  4. MCS.IRIS.Windows – the Windows UWP version of the project. We did not build for older versions of Windows

We determined we have about 95% code sharing by running Code Metrics within Visual Studio (you require Enterprise version to run Code Metrics) as you can see from the following

Since we are using a shared project and these lines go within the platform specific projects, so if we assume MCS.IRIS.Droid is the lowest and MCS.IRIS.UWP is the highest, we are looking at about 95% code coverage.

Code metrics works much better with Portable Class Libraries (PCL) but I tend to work with Shared Projects unless it’s something that can be leveraged in multiple projects not just one project.

MCS.IRIS Project

MCS.IRIS is the main Shared Project where 95% of the code is contained. The project uses an MVVM design pattern as Xamarin Forms has support for features such as DataBinding and Commands.

This projects contains the main items

  1. Models – These are the models we defined during design such as Case, Social Account, Registered Account etc. This is the first M of MVVM.
  2. Services – This basically contains the service to connect to the backend API system. Currently just authenticates and retrieves data
  3. ViewModels – This is the VM part of MVVM and contains the logic on who the views should behave
  4. Views – This is the first V of MVVM and is the UI that is presented to the user and databound to the appropriate viewmodels.

Some things to note

  1. SimpleIoC - We pulled in some classes from MVVMLight open source project. This was done more for simplicity and to help accelerate things with some people who were not familiar with MVVM
  2. ViewModelLocator.cs – this is where we register all our ViewModels using SimpleIoC

MCS.IRIS.Droid & iOS & Windows Project

The platform specific projects, has very minimal custom code. We added the following to help enhance some of the experience but didn’t focus too much on this with the limited amount of time

  1. iOS
  2. Added a custom renderer for the Entry fields to remove the auto complete etc
  3. Added nuget project references
  4. Android
  5. Added support for Android theming by adding a custom style for titlebar and added code to MainActivity.cs
  6. Windows
  7. Nothing was done here

As you can see very minimal code on the platform specific implementations and sharing about 95% of code on three platforms natively.

Running the App

Now that we have gone through an overview of the structure of the Xamarin app, we can go ahead and run it.

Running the iOS Version

  1. Right click on the MCS.IRIS.iOS project and click Set As Default
  2. Change the Solution Platform to iPhone Simulator
  3. Tap F5 or click the debug button in the tool bar to start debugging on iOS. You can also change the OS version and emulator to run it on from here

When the application runs, you should get the following

Type in the following for credentials

  1. Username: Admin
  2. Password: password
  3. Tap login to see the available cases

Once you login, you will be presented with the following list page and then details page

Some things to note:

  1. You need have a Mac setup with XCode and Xamarin on it to compile the iOS application
  2. You can use the simulator for iOS on Windows by seeing here https://developer.xamarin.com/guides/cross-platform/windows/ios-simulator/

Running the Android Version

  1. Right click on the MCS.IRIS.Droid project and click Set As Default
  2. Change the Solution Platform to Any CPU
  3. Tap F5 or click the debug button in the tool bar to start debugging on Android. You can also change the OS version and emulator to run it on from here

When the application runs, you should get the following if running on the Visual Studio Android emulator.

Enter the same credentials as iOS to sign in and you should end up with a list and then be able to navigate to a case details page.

Some things to note:

  1. If you are using an emulator, use the Visual Studio Android Emulator as it will make life easy for you
  2. If you get some errors compiling for Android make sure you have appropriate Android SDKs installed. For this project you need minimum API Level 19, but recommend you just install all of them.

For android SDKs, the following links will be helpful

  1. Overview of the Visual Studio Android Emulator - https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/debug-on-emulator/visual-studio-android-emulator/
  2. Launching the Android SDK Manager from Visual Studio - https://developer.xamarin.com/recipes/cross-platform/ide/launch_sdk_manager/#Launch_SDK_Manager_from_Visual_Studio

In the Android SDK Manager you should install the following

  1. Under Tools – All SDK Build-Tools
  2. Different Android API Levels for example API 24 install SDK Platform and Google APIs. You can install other options but these options will be enough
  3. Under Extra – Google USB Driver

 

Running the Windows Version

Last but definitely not least is the Windows UWP version.

  1. Right click on the MCS.IRIS.Windows project and click Set As Default
  2. Change the Solution Platform to Any CPU
  3. Tap F5 or click the debug button in the tool bar to start debugging on Windows. You can also change the OS version and emulator to run it on from here

When the application runs, you should get the following if running on the

 

Enter the same credentials as iOS to sign in and you should end up with a list and then be able to navigate to a case details page.

Hockey App

Although we used Hockey App to distribute the Android application, unfortunately due to time, we did could not complete a full Develop – Test – Build – Distribute pipeline built out for the Xamarin application. We did end up just manually uploading APKs, but you definitely want to automate this process!

Here is an example of a customer app we did at RedBit in Visual Studio Team Services where we have API, Web App, iOS and Android build and release pipelines setup

Definitely worth the time to set this up when building out full software products!

 

 

 

Push Notifications

Push notifications was being worked on a separate branch.  You can find the notifications branch here: https://github.com/CDN-Missing-Children-Hack/client/tree/NewNotifications

Unfortunately, we did not have time to merge those changes into the master branch but we left it there as notifications were working on iOS, Android and Windows. Notifications leveraged Azure Notifications Hub which is an easy way to send notifications to multiple platforms. For more details see here /en-us/azure/notification-hubs/notification-hubs-push-notification-overview

If you have never worked with notifications with Xamarin this article will give you a good walkthrough /en-us/azure/app-service-mobile/app-service-mobile-xamarin-forms-get-started-push

Our Work is Not Done

Obviously we did not get everything we wanted done in a weekend and there were a few things we wanted to get to but just didn’t have enough time. Some items that are still on the TODO list

  1. Merge in the notifications branch and integrate with the back end server
  2. Include a map page (already in the shared project as MapPage.xaml) to show social media content for a case on a map. Again, potentially showing the location of a missing child when investigating cases

One ‘moonshot’ feature we wanted to add is Azure Cognitive Services to determine sentiment of social media content or possibly using some ‘AI’ to determine if social media content for a registered user is a possible threat. For example, analyze DMs in Twitter coming to registered users to determine possible threat cases. Again, this is a ‘moonshot’ for a weekend but the technology is there.

I’m personally excited to part of an amazing hack for trying to solve a real problem in our world. As a long time developer, it’s great to use technology to help make a difference in our world. Although we did not get everything we wanted completed we did get to work with people dealing with this everyday and the feedback gathered from Missing Children Society, Calgary Police and City of Calgary was all positive and made this a successful first step! But not the last!