Making a cross platform “Have I Been Pwned” app using MvvmCross – Part 1

What will we be doing?

In this multipart series we will be building an app that given an email address or username will search Have I Been Pwned and show the user if that particular email address or username has been compromised. The app will cover the major platforms, Android, iOS, Windows Phone and Windows 8, with the goal being to reuse as much code as possible with the help of Xamarin and MvvmCross. In this first part we will cover setting up all the projects that we will need.

What is Have I Been Pwned?

Have I Been Pwned is a brilliant service from Troy Hunt that allows you to search for your usernames and email addresses to see if they have been compromised in a data breach. Troy provides an API to allow anyone to build something that searches the database, which is what we will be doing.

What is MvvmCross?

MvvmCross is a library created by Stuart Lodge that makes it really easy to reuse code across the major mobile platforms, WPF and Xamarin.Mac as well. It uses MVVM (Model-View-ViewModel) which means that all “logic” code should be nicely separated from the view.

Lets get started

.NET Framework 4.5, Win Store, Win Phone 8, Android, iOS

First things first, you need to make sure you have the appropriate SDKs installed, Xamain iOS and Android, Windows Phone 8 and you will need to be using Windows 8/8.1 to create Windows Store projects.  I’ll be using the Visual Studio integration with Xamarin, but there is no reason why the Android and iOS projects won’t work with Xamarin Studio. To start we will create a new PCL project, so File -> New Project in Visual Studio, create a project called “HaveIBeenPwned.Mobile.Core”, press OK and you will then be asked which frameworks/platforms you want to target. Select the options as per the image, this will create a Profile78 PCL which will allow us to use the async/await goodness!

With the core project created it’s now time to create the individual projects for each platform, so File -> New Project for each of these

  • Android Ice Cream Sandwich (or a lower version if you wish)
  • iOS iPhone Empty Project
  • Windows Phone App
  • Windows Store Blank App

Visual Studio project list

You should end up with something that looks like this in Visual Studio. We can now use NuGet to add the references to MvvmCross, right click on the Solution in Solution Explorer and choose “Manage NuGet Packages for Solution”. In the NuGet search window search for “mvvmcross tuna” and choose the MvvmCross Hot Tuna Starter Pack, I’m using version 3.1.2-beta1, so you will need to choose “Include Prerelease”. Press install and then choose all of the projects in the “Select Projects” window, this will install the appropriate MvvmCross package to each project. The next step is to add a reference to the Core project from each of the platform specific projects, this can be done via the normal “Add References” dialog.

You may have noticed that MvvmCross has added a Todo.txt to each of the projects, there are a few manual steps that need to completed, these should be done now, it’s only a few methods that need to be copied to the specified classes.

Configuration Manager

There are a few more steps that need to be taken for the iOS project. First the application name and identifier must be set in the project properties. If this is the first Xamain iOS project that you have created you will need to setup the build link to your Mac, the instructions for doing this are quite simple. You will also need to set the iPhone Simulator as the build target for the iOS project, this can be done in Visual Studio’s Configuration Manager.

Finished Part 1!

You should now be at the stage where all the projects build and run successfully. In Part 2 of this series we will create a service to query data from Have I Been Pwned. The code is also available on GitHub, please let me know if anything is not clear, wrong or just plain stupid!