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.

For an overview of the hack see Hacking for Missing Kids – Technology for Good. 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

architecture

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

whiteboard drawingIt was a simple application that consisted of

  1. Login Page
  2. List of Cases Page
  3. Case Details Page
  4. Map of social content 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 backend see the following articles Cloud4Good: Setting up Infrastructure as code on behalf of Missing Children Society of Canada and Cloud4Good: Extracting Data from the Twitter API through Azure Functions.

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. IRIS – Shared Project where about 95% of the code exists
  2. IRIS.Droid – the android version of the project
  3. IRIS.iOS – the iOS version of the project
  4. 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

image10

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. 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
    1. Added a custom renderer for the Entry fields to remove the auto complete etc
    2. Added nuget project references
  2. Android
    1. Added support for Android theming by adding a custom style for titlebar and added code to MainActivity.cs
  3. Windows
    1. 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.

This is the first in a series of articles to get the project up and running

  1. Technology for Good
  2. Technology Overview
  3. Cloning the Project
  4. Running Xamarin App on iOS
  5. Running Xamarin App on Android
  6. Running Xamarin App on Windows
  7. Hockey App, Push Notifications & Wrap up

Leave a Reply