Talk With Angel Garcia!

Talk With Angel Garcia!

a blog about software and beers

Mobile DevOps made easy with Visual Studio App Center

There are several tools for handling every step in the Mobile Development Lifecycle, but let’s be realistics, sometimes it’s hard for us to implement those tools in our apps and we end up ignoring important parts of the cycle, in the most of the cases developers just develop and distribute their apps (forgeting what comes after this).

Microsoft brings us the solution to this problem with Visual Studio App Center, a cloud service that helps mobile devs to Build → Test → Distribute and then Monitor the status and usage of the app using the Analytics and Diagnostics services, and engage with users using the Push Notification service.

Sounds great, right? Let’s see how easy to use it is.

 
Goal: at the end of this guide we are going to learn how to automatically build our app, test it on real devices, and distribute it to beta testers, then collect crash reports and user analytics, and finally add push notifications to the app.

First thing first, let’s go to App Center and login (you can use your Google, FB, Github or MS Account), we will see a dashboard with our apps (see image below).

I already had an app but we are going to add a new one from zero.

Before we start a new app, we need the source code to be in a Git repo with Github (you can also use it with Bitbucket or Azure DevOps, formerly known as Visual Studio Team Services).

Let’s create a new app by clicking add new app (blue button at top right corner), then complete the app preferences, in my case I want an Android application using Xamarin as platform.

New app options

We can choose Android, iOS, Windows or macOS (preview) as mobile OS, and as a platform we have Java / Kotlin, React Native, Cordova (preview), Xamarin or Unity.

 Now that we have our app created, let’s set up build configuration, in this step we are going to look for our app code by clicking Github in the service selection.

Build options for the app created

Once we select the repo, a list with the existing branches will show up, I’m going to select master as my trigger branch for build the app, then we click on Configure Build and the following options will be prompted:

Build configuration options

Here we just need to set up 3 parts: Build, Sign and Test. Later we are going to use the others options.

In the Build part, choose the project (your repo could contain more than one like mine), in my case I want the Release configuration, and compile with Xamarin.Android 9.0.

The option Build frecuency is for the build strategy, if you want to build your app on every commit to the branch (master in our example) set this to Build this branch on every push, if you want to choose when to build the project set the option to Manually choose when to run builds (this is the way we use in this guide).

Next we have the Sign builds part, this is optional, but we need to sign the builds with our keystore (see how to obtain a keystore) to run the final apk on a real device later.

In the Test part, just turn on the option Test on a real device (to ensure our build works on a real device by running a launch test) then click on Save & Build.

Note: the “test on a real device” option adds about 10 minutes to the build time, if you want a faster build, turn it off.

Well done! we just have our app compiling in App Center (see image below).

Building process output, here we can see what happen while the app is compiling.

When it finishes, we see an “ok” badge and options to see test results, distribute and download the app.

We can also see the test results in the Test →Tests runs option.

Build done!

🤔 Ok, now that we have the build and lauch test ready, the next should be the distribution part, right? 

 Go to the Distribute →Groups option at the main menu, and add a new distribution group, in this form we can add by email the testers (or allow everyone to see our releases).

Beta testers distribution group.

 Now that we have a distribution group, let’s go back to our Build Configuration and fill the Distribution option with the recent created group and again click on Save & Build.

After the build finishes, we will be able to see the release by going to Distribute →Releases here we can see all the details of the version released.

All the testers in the group will receive an email with the installation link

 In the Agile Software Development Lifecycle, the Feedback is very important, we can plan new iterations (releases) using the data collected by monitoring and analizing the user’s behaviour.

Imagen relacionada

 To add the tracking (Analytics & Diagnostics) services to our app, we need to install the App Center SDK via NuGet packages in our solution (it depends on the platform you choose when set up the app) since we are using Xamarin Forms as platform.

  • If you are on Mac, select App Center AnalyticsApp Center Crashes and add both packages.
  • If you are on Windows install Microsoft.AppCenter.Analytics and Microsoft.AppCenter.Crashes packages.

NuGet Package Manager (VS 2017)

 Go to the shared or portable project, open the App.xaml.cs class that inherits Xamarin.Forms.Application and add the following using statements:

using Microsoft.AppCenter;

using Microsoft.AppCenter.Analytics;

using Microsoft.AppCenter.Crashes;

And add the following code to the OnStart() method in the same class:

AppCenter.Start("android={Your Android App secret here}", typeof(Analytics), typeof(Crashes))

Android App Code: You can find it in the overview screen, at the OnStart() method block code, or going to the Settings page, click on the menu and copy app secret

To see the results, let’s trigger to build with the new implementation, we are going to see data like user sessions, top devices, OS versions and others in the Analytics→overview screen immediately the build success.

Real-time Analytics data from our app.

Once our app craches we will be able to see data in the Diagnostics screen, let’s throw an exception running the app to simulate a crash (for testing propouse), use following code:

Crashes.GenerateTestCrash()

Now we can see data from the generated crash.

Test crash exception generated by SDK.

We are almost done, let’s add the engagement part to send our users push notifications.

Go to Push→Notifications and follow the instructions they show , first we need to add the package Microsoft.AppCenter.Push vía NuGet.

Then pass typeof(Push) to your AppCenter.Start() call (remember to add the using statements first):
AppCenter.Start("Andriod App Secret", typeof(Push));

App Center use Firebase to handle push notification service, so, the next step will be create a project on the Firebase console, then press on the Android logo to create an application matching your package name.

Download the google-services.json file from the settings of our Firebase App, copy this file to your Xamarin Android project.
 
Re-open your solution, open the context menu on google-services.json file we just added, select GoogleServicesJson in Build Action, then edit AndroidManifest.xml and insert the following elements inside the <application> tag:
<application ...>
<!-- Add these lines -->
<receiver android:name="com.google.firebase.iid.FirebaseInstanceIdInternalReceiver" android:exported="false" />
<receiver android:name="com.google.firebase.iid.FirebaseInstanceIdReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND">
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
<action android:name="com.google.android.c2dm.intent.REGISTRATION" />
<category android:name="${applicationId}" />
</intent-filter>
</receiver>
<!-- end of section to add -->
</application>
 
One last thing to finish the set up is to add the server key at the step 3 of the wizard on the Push→Notifications screen.
 
In order to get the key go to Project Settings in our app in Firebase and under Cloud Messaging, copy the Server Key.
 

Push Notifications set up screen (last step).

Now you should see this message:

Click on Send notification, follow the instructions and we are done!

Yesssir! We have notifications!

That’s all! 👏👏 

Tip: at this point we would want to trigger the whole process when a new change is made in the branch, go to the “Build Configuration” to set this type of trigger.

Any questions or corrections are welcome, don’t forget to share!

DROP A COMMENT

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.