In Focus

AppCenter DevOps With Xamarin.Forms

Here, I am going to explain to you how we can use AppCenter for mobile application development and how it will save our time with CI.CD.

Here, I am going explain how we can use AppCenter for mobile application development and how it will save time with CI.CD.

Before starting,  I will give a brief description of AppCenter.

AppCenter is helpful for us to build our app and allows us to  test our app on 1000+ physical devices hosted on the cloud.  With the help of AppCenter, we can distribute our build for testing purposes and after that, we can deploy it on App Store and Play Store.

AppCenter provides a facility to monitor your app.

AppCenter supports the following platforms:
  • Objective-C/Swift
  • React Native
  • Cordova
  • Xamarin

AppCenter supports the following OS:

  • iOS
  • Android
  • Windows
  • macOS

It is a good tool for a developer who is developing a mobile application. Here, the developer can create a build environment with AppCenter also while checking the code. The build will automatically trigger and after the successful build, the .ipa or .apk will create and distribute to our App Store or Play Store.

Prerequisite

You need one repository where you are storing your code which could be:

  • Visual Studio Team Service.
  • Github
  • Bitbucket

Step 1 - (Sign up in AppCenter)

Open your browser and enter URL - https://appcenter.ms.
After entering, the following screen will open.

Xamarin

Click on "Get Started".

Xamarin

On this screen, you need to sign up. Or if you have Outlook, GitHub, Facebook, and/or a Google account, you can continue with that account after clicking on the relative option.

I wanted to use my Outlook id, so I clicked on Outlook. You can choose based on your choice.

Now, the Sign Up process ends.

After that, it will navigate to the following screen.

Xamarin

I am already using it. So here, you can see many apps which I created. But in your case, it will be blank.

Step 2 - (Creating App & Connecting to the repository)

As you can see on the previous screen there is an option of “Add New” so click on that and chose “Add a new app”.

Add new -> Add new app

Xamarin

Here add your “App name” and description, in this window you can select your OS and Platform. I am using Xamarin so I selected Xamarin in Platform and Android in OS. After that click on “Add new app button”.

Xamarin

If you are able to see this screen that means you have successfully created your App in the AppCenter.

Based on your selection of platform, the AppCenter will provide some instruction which we need to follow so we can trace our App crashes and downloads.

As I mentioned I am using Xamarin Forms so I need to follow this instruction and here AppCenter  is instructing me to add SDK. Write this code in your App.cs file.

I completed this step in my project. You also need to do the same based on platform selection. AppCenter will provide instruction for you.

Step 3 - (Connecting to your repository & Creating Build Environment )

In this step we need to click on build  icon as you can see in the image.

After clicking on Build Icon you will get this screen.

Xamarin

In this step as you can see here there are three options to connect your repository with AppCenter. So I am choosing Visual Studio Team Foundation.

You can chose based on your repository's availability.

After selection, you will get  the following screen.

Xamarin

In this section you have to chose your repository .

Note
If your repository id is different from AppCenter Id then it will ask for login so you just need to login there, and after that you can access your repository from here.

So, after selection of Repository finally you have successfully connected your AppCenter to your Repository and you will get the following screen.

Xamarin

Here you can see your latest commit. That means you have successfully connected to you your repository to AppCenter.

Now we will configure Build Environment.

Take your curser to the right side as I am showing in the picture. Here setting icon will populate when you put your cursor there. Just click on build configuration icon.

Then you will get the following screen.

Xamarin

As you can see in this screen there is some step which we need to fill.

PROJECT

As my project is in Xamarin Forms,  it will take an executable file path. Here it is taking “DemoTest.Droid.csproj”.

CONFIGURATION

Here you can chose Build mode, it will be “Debug” Or “Release”.

  • MonoVersion - here I have selected verison 5.4.1.
  • Build Scripts - I am not using any build Scripts. So I skipped this step.
  • Build Frequency - here you can chose your build frequency as per your requirement. As I am doing CI.CD so I chose here “Build this branch on every push”. (When developer commits the code in repository the build will automatically start).
  • Automatically increment version code - I make it on.
  • Enviroment Variables -  I make it on.

For Sign Build see the following screen.

Xamarin

Sign Builds

Make it On, then you will get more options as you can see in the screen.

Here we have to upload Keystore file.

We need to add the Keystore password.

  • Key alias
  • Key password

Distribute Builds

Make it On.

The final step is to click on “Save” OR “Save & Build”.

I clicked Save & Build.

After clicking the Save & Build button the build will start. You can see it in the following screen.

Xamarin

Build process will take some time.

So as you can see this build is running on the web. So you don’t need to worry about anything if you close your window.

So, after completing this build you can get the following screen also you will get a notification mail on your email.

Xamarin

My build is successful.

Step 4 - (Distribution of Build)

Here you can see there are two options displaying on  the right to corner:

“Distribute” and “Download”

From here you can  download .apk by clicking on the download button.

But here, we will do “Distribute ” so we will click on the distribute Button.

After clicking on the Distribute Button you will get the following screen.

Xamarin

Here you can see your collaborator, and  also you can add more collaborators by clicking on that list.

Select list of collaborators and click on the next button.

Then you will see the following screen.

Xamarin

Here you can write release notes in that box. And after writing Release notes click on “Distribute Build” Button.

Your new build will be distributed to your collaborator. They will get a notification in their mail which you have added while adding collaborator list.

So here  we have done CI.CD with VSTS Repository & Mobile Center.

From AppCenter you can directly upload your build on App Store and Playstore.

For doing this we just need to add some more steps. And after that your build will reflect on your App store and Playstore.