Xamarin with Visual Studio Mobile Center – continuous integration

Xamarin with Visual Studio Mobile Center – continuous integration

vstsxamarin1_1_1

Short introduction

Great times for mobile developers! Xamarin is becoming more and more popular but I will not write about it in this post. I rather want to say that “mobile development” statement is nowadays not only about creating app user interface and some code behind. It is whole process from development, through tests, builds and releases. Professional mobile development is not only about creating great user experience. This is also about the approach to this process. That is why in this post I would like to discuss Continious Integration process connected with Xamarin. For those who did not hear about CI I would like to quote great description:

“Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.”

This practice can be applied with great tool called Visual Studio Mobile Center. What is it? This is platform offered by Microsoft to enable developers build, test and release their applications – so everything you need to be able to apply Continious Integration.

In this article I would like to show how to use VSMC (Visual Studio Mobile Center) with Xamarin to enable continious integration for your mobile app development.

What exactly Visual Studio Mobile Center offers?

  1. Continuous integration – developer is able to connect to the GitHub repository, select branch and configure build.
  2. App distribution – release application to selected users who are members of specific Mobile Center groups.
  3. Crashes – With Mobile Center SDK you have full control over your applications. You can monitor crashes and react fast.
  4. Analytics – Mobile Center SDK enables you to automatically track session, device properties and pages.

Mobile platforms:  Objective-C, Swift, Java, Xamarin, React Native
Lifecycle features: Build, Test, Crash, Beta Distribution, Analytics
Cloud features: Authentication, Easy tables, Offline sync

Visual Studio Mobile Center is new product and you have chance to follow its road map here.

It is also important to mention about pricing. VS Mobile Center is free for now as it is in preview. There are some limitations:

Build

  • 1 concurrent build per account
  • 10 configured branches per app
  • 30 minutes max/build

Test

  • 90-day trial of 1 concurrent device for up to 1 device hour/day
  • Learn more at the Test Cloud site

Distribute

  • 2000 testers

Crashes

  • 30 day retention

Analytics

  • 30 day retention

There is also great documentation documentation.

What do I need to start?

1) Visual Studio 2015 Community (for free or choose higher version) or Xamarin Studio

2) Visual Studio Mobile Center free account

 

Let’s start

PLEASE NOTE THAT VS MOBILE CENTER IS STILL IN PREVIEW AND SOME FUNCTIONALITY CAN BE DIFFERENT THAN IN THE CURRENT VERSION.

Let’s divide this article into three sections:

  1. Creating simple mobile application
  2. Writing tests for app functionality
  3. Integrate with Mobile Center

This will help you understand how the whole process of CI works.

 

Create mobile application with Xamarin Forms and write unit and UI tests

 

We will use simple Xamarin Forms application in which user can create shopping list and verify bought products.

It is available on my GitHub – please use it for this article.

Solution includes Unit and UI tests written for this specific article and demo.

vstsxamarin4        vstsxamarin5

 

Visual Studio Mobile Center integration

Once you have my sample from GitHub we can start integrating with VS Mobile Center.

1) Open VSMC website and click “Get started for free”:

vstsxamarin6_6

2) Select with which account (Microsoft, GitHub, or basic account) you would like to sign in:

vstsxamarin7

3) Once you select you username you should see portal like below:

vstsxamarin8

 

Add new application

Click “Add new app” button to add new application:

Here you should type the name of your application, optional description, select os (iOS or Android) and platform (in this case Xamarin). In my case name of app will be the same like the project – CISampleApp:

vstsxamarin9

If everything was fine you should see screen like below:

vstsxamarin10

 

Build

vstsxamarin11

1) To configure builds we need to connect to our GitHub account. You can fork my project and upload it to your repo. Once you click “Connect to GitHub” button you will be redirected to login page:

vstsxamarin12

2) Once you login you have to authorize Mobile Center to access your GitHub projects:

vstsxamarin13

3) Select repository where you placed code for your application. In my case it is XamarinTests repo:

vstsxamarin14

4) Select branch to connect:

vstsxamarin15

vstsxamarin16

5) Select project for the current build:

vstsxamarin17

As you can see you can choose if app should be built each time you push changes to repo. Remember that you can also select “Release” configuration also. What is more – if you would like to distribute app to group members (testers for instance) you have to also enable “Sign builds” option and provide keystore:

vstsxamarin18

For iOS you have also option to configure build and sign app package:

vsci34

6) Once you click “Build now” Mobile Center will start process connected with building your app and creating package:. Once it is finished, you can see the result and what is more you can download you .apk file and logs:

vstsxamarin19

Remember that you can also configure build for iOS applications. Once you do it you can configure UI tests.

Test

vstsxamarin20

With VS Mobile Center you are able to configure UI tests for your applications.

1) Click “New test run” in the right corner:

As you can see you have huge devices gallery to choose – I selected Nexus 5 with Android 5.0 for tests:

vstsxamarin21

2) In next step you have to choose (or create) test series – default is “master” and let’s leave it as it is.

You should also decide which language is supported by your app and which test framework is used for UI tests – in my case I used Xamarin.UITest (tests are included in project on GitHub):

vstsxamarin22

3) Last step is a bit more complicated. You have to:

a. Install Node.js current version from here:

vstsxamarin24

b. Install mobile-center-cli NuGet from Nuget Package Manager Console:

npm install -g mobile-center-cli

vstsxamarin25

To run tests with Mobile Center you have to use command presented in the portal:

vstsxamarin26

This part is quite complicated and I hope VS Team will improve it to enable tests for selected project from repo.

 

Distribute

With Mobile Center you have chance to create distribution groups connected with your mobile applications.

1) You can create new group and invite testers:

vstsxamarin28

2) You can distribute new release by uploading new .apk file (or .ipa for iOS) and tell testers what is new for this selected version:

vstsxamarin29

 

Crashes

vstsxamarin30

As I mentioned before to enable crashes reports and analytics in your app you have to switch to “Getting started” tab. There you have two options to select: either your app is created with standard Xamarin.Platform approach or with Xamarin.Forms:

vstsxamarin31

In our case this will be Xamarin.Forms. Scroll below and follow instructions:

1) Add two NuGets to each project (besides tests projects) – my sample from GitHub already has it:

Mobile Center Analytics
Mobile Center Crashes

vstsxamarin32

vstsxamarin33

2) Open “App.xaml.cs” file in PCL and add below code inside constructor:

MobileCenter.Start(typeof(Analytics), typeof(Crashes));

3) Now open “MainActivity.cs” file in Android project and add below code in “OnCreate” method:

MobileCenter.Configure("<<YOUR KEY HERE>>");

The same process is for iOS app – above code will be placed in “AppDelegate.cs” file.

4) Now launch the app – if there is a crash you should see report in Mobile Center portal.

 

Analytics

vstsxamarin34

To enable analytics in your app you should use exactly the same code presented in “Crashes” section above.

You can find many information about your application like:

a. Active users

b. App versions

c. Daily session per user

d. Top devices (with os versions)

e. Countries where your app is used

f. Events log

vstsxamarin35

vstsxamarin36

Tables and Identity

vstsxamarin37

There are two additional sections – Tables and Identity. If you decide to create backend for your mobile application you can use Microsoft Azure subscription – as you can see in the picture above you can connect it with Mobile Center and manage your whole backend from this portal.

1) Tables – service that stores structured NoSQL data in the cloud. Table storage is a key/attribute store with a schemaless design

2) Identity – you can integrate authentication in your app with different provider accounts: Microsoft, Facebook, Google or Twitter

If you click “Connect subscription” you can either create one or connect to existing one:

vstsxamarin38

Once you connect Microsoft Azure subscription you are able to create new table and add authentication:

vstsxamarin39

vstsxamarin40

Now you can add Facebook authentication for instance:

vstsxamarin41

 

Sum up

vstsxamarin42

Visual Studio Mobile Center is dedicated tool for everyone who would like to apply continuous integration – including automated builds, UI tests and testers. Please remember that Mobile Center is still in preview so some functionality can be changed or improved.

To read more I really recommend walking through the docs where you can find much more information.

Now it is your turn!

Advertisements