Azure DevOps (VSTS), App Centre & Xamarin

by Lewis


Posted on January 1, 2018 at 12:00 PM


This article discusses using Azure DevOps to track, store and build your code, and using the build agents to release built artefacts to collaborators using AppCenter.



Azure DevOps (formerly Visual Studio Team Services) is a hosted service providing development and collaboration tools. With a free tier to get started that has access to many of the tools provided; Git Repositories, Agile\Scrum, Build Agents, Build & Release Pipelines, Wikis & more.

Visual Studio App Center lets you automate and manage the lifecycle of your iOS, Android, Windows, and macOS apps. Ship apps more frequently, at higher-quality, and with greater confidence. Connect your repo and within minutes automate your builds, test on real devices in the cloud, distribute apps to beta testers, and monitor real-world usage with crash and analytics data. All in one place.

This article assumes you have an Azure DevOps account but not a AppCenter account.

 

Create your Azure DevOps project

Navigate to your Azure DevOps portal, the url will be something like;

https://<yourusername>.visualstudio.com

Log into the portal, from your home dashboard, select the “Create Project” button

Create Project

And the new project pop out will appear;

Create new project

Leave the defaults as they are, and set the project name & description and press Create. Your project will be subsequently created in Azure DevOps. From the project dashboard, select Repos on the left to be taken to your empty Repository.

Clone repository

From here, select the drop down that currently shows “Clone in VS Code” and select “Visual Studio”, from here Visual Studio will open and the repository will be cloned.

 

Create your Xamarin project

Now we have the repository cloned, we need a project. For this example, we will use a simple Xamarin Android project.  To create;

 

Select File->New Project and navigate through to find the Xamarin template.

Select the template, give it a name & press OK.

The new project will be created and opened in Visual Studio.

Build the project, running the project will start the emulator and run the code.

 

Commit the code.

There are several ways to commit the first pass of your code. As we are in Visual Studio, we will use the Visual Studio tools to perform the initial commit.

Navigate to the “Team Explorer” pane, or open it (View -> Team Explorer”)

From the Home Pane;

Visual Studio Git options

Select “Changes”

The pane will change to show the “Changes” view. From here, you can see any changes to the files. You should see all your project files listed in here. To ensure that we only check in the files required to perform a build, we must ignore the following folders;

  • Packages
  • Obj
  • Bin

Find these folders in the “Changes” treeview, right click and select ignore. Repeat until the folders listed above are ignored. At this point, the .gitignore file will be moved to “staging”, this file can then be checked in. Once the git file has been checked in, you can check the rest of the project in. Navigate back to the Changes pane, this will now display all the files we want to check in. Add a “Commit Message” - something along the lines of “Initial Check In” and press the “Commit All” button. The code will subsequently be checked into the Azure DevOps repo.

At this point, we have a working Xamarin project whose code is stored securely in Azure DevOps. At this point we have two options of building and distributing the project. For this article we will focus on AppCenter to find out how to configure this project to build in Azure DevOps only, click here.

 

Visual Studio AppCenter

Create your AppCenter account by visiting this URL and clicking Get Started, I would recommend using the same account you used to create your Azure DevOps account: https://appcenter.ms

After registration is complete, you will be redirected to your dashboard. From here we can create multiple Organisations or Apps. To keep this simple, we will just create a new app;

  1. Select the “Add New” button in the top right;
  2. From the drop down select the “Add New App”

On the Pop out dialog that appears;

Add new app

Complete the dialog by entering the application name, description and in the following options, select Android and then Xamarin. Press Add new app. Now we have a new application created in AppCenter, we we must link this with our Azure DevOps repository.

<INSERT STEPS HERE>

Now we have linked the AppCenter with our Repository, we can build our project, this can be triggered upon check in and\or triggered manually. For this example we will trigger manually.

 

Trigger a build

  1. Select the project (if it isn’t already)
  2. On the left hand menu, select “Build”. This will bring up a list of branches to build, if you have followed the steps so far, you will have one item in this list - “master”.
  3. Hover the mouse over the row we want to build, on the right hand side a “cog” will appear, click it to bring up the “Build Configuration” pop out.

Build the app

To successfully build the project, we will need a KeyStore. To generate;

 

<DETAIL CREATING A KEYSTORE>

 

Scroll down to below Environment Variables, to see the “Distribute Builds” option;

Distribute builds

In the drop down you can select the group that this build will be distributed to. Distribution is performed by sending an email to the people in the group. They can then click the link in email to download the latest version <discuss update using app center sdk>.

Once all the above has been completed, press Save & Build.

This will then redirect you to the Build area, where the current state of your build is displayed, wait until this stage has completed successfully.

Build progress

Once the build has been completed, an email is sent to the recipients in the Distribution group selected on the Build page. The email will look similar to this;

logviewer email

The collaborators can now install the application directly from the link. Clicking the link will take them to a product page which lists the changes and allows them to download the software. To install this software on a Android device, we must now set up the option to allow you to install software from unknown devices. There are two ways to do this. On recent Android versions, upon opening the APK you will see a prompt asking you to allow installation of this unknown application. Confirming will allow the installation of the application. The second method uses the Android settings. When using this method, you should ensure that you turn the setting back to its default once you have finished your testing etc. To change the setting on an Android device;

  • Settings->Lock Screen and Security
  • Set “Unknown Sources” to “On”

At this point you can now download & install the application to your device by clicking the link sent on the email. 

Congratulations, you have now built and released an application using Azure DevOps and AppCenter. As well as distribution, AppCenter provides an SDK and way to integrate our application into AppCenter for logging, crash recording & diagnostics. See one of these articles for more detail;

 

Updating your application

Logging & diagnostics