DEV Community: Nagaraj Alagusundaram

How to build, sign, and distribute your Android App using Azure Pipelines? [Explained]

Nagaraj Alagusundaram — Thu, 07 Jan 2021 23:13:14 +0000

As a mobile developer, I know the pain of building the APKs regularly and sharing the latest version with different teams. Additionally, we need to upload the newest version to the Microsoft AppCenter and Google PlayStore. A minor mistake in the routine may lead to some serious trouble. For any unforeseen issue, the best solution is to automate the process.

Here at XAM, we use Azure Pipelines to build, Sign & publish the APKs without any manual intervention and thus preventing the time taken for the repeated tasks.

Continuous Integration – Azure DevOps:

Today I’m going to explain the process involved in Continuous Integration using the Azure DevOps for Android.

The advantages of Azure DevOps are

Accessible anywhere
No server maintenance
Good community support
Often updated
Low cost

Steps:

Setup Android project:

I have created a simple Hello World Android project in GitHub for your convenience. In the root folder, you should find a YAML file named ‘pipelines_android.yml’. If you don’t want to create it from scratch, please make sure you commit this file to your repo.

Got to your project

Pipelines-> Create Pipeline

Select your repo source

Since you’ve already added the YAML file, select the existing file to create a pipeline.

Else you can create a new YAML file by selecting the appropriate option.

I have already added the parameters to the pipelines. Please add as many parameters as you need.

Allow the user to select the build type and their preferred operating system.

Next, create a triggering point for this pipeline.

In my pipeline, I’ve added the branch “master” as a trigger. So, whenever there is a pull request merged on the master branch, this pipeline will start.

Create a variable group, as shown below.

To create a new variable group:

Goto Pipelines-> Library
Click + Variable group
Add a variable group name.
Add variables.

Clean the workspace and then add a pool image.

The first step is to create Gradle@2, as shown below.

The next task is to sign the generated APK.

After Signing the APK, now we will have to publish the artifacts.

After publishing it internally, let’s publish the artifacts to the AppCenter.

Go to https://appcenter.ms/apps/create and create a new App.

Once the App created in AppCenter, now introduce a testing group.

Click the spanner icon and make a note of the group id.

The next step is to create a service connection between Azure DevOps and AppCenter.

In AppCenter, go to the account settings page and add a new API token.

In Azure DevOps:
Click the Settings menu (gear icon) in Azure DevOps.
Click the “Service Connection” menu on the left.

Choose “Visual Studio App Center” and click the Next button.

Paste the copied token, give an appropriate name for this connection, and click Save.

Go to Library-> Add new Variable group.
Add AppCenter Connection.
Add Slug Id: Username/AppName
Add Group Id: paste the copied group id.

Then in the pipeline, add the AppCenterDistribute@3 task.

Build the pipeline, and you should see the artifacts uploaded in the AppCenter.

If you have any doubts, let’s chat.

To download YAML file: Click here

If you think there is a better solution, please feel free to fork my GitHub repository.

Android Studio 4.1: Embedded Emulator

Nagaraj Alagusundaram — Tue, 13 Oct 2020 22:01:21 +0000

I was very excited to see the tweet from the Android Studio's official twitter handle.

Immediate action from me was to update my Android Studio.

The first change I noticed was the new icon for Android Studio.

Then I watched this YouTube video to see the new features. (https://www.youtube.com/watch?v=Yhbr6u7f3ME)

Out of all features, in this blog, we're going to see about the Embedded Emulator.
This feature is really important for those who work on a single monitor and have to switch between the code and emulator for testing the app.

I know that feeling!

So I thought to try this new feature.

I created a new login template project.

Then I clicked the "Emulator" menu that can be found on the right side bottom.

I could see the instructions to open the Emulator Settings shown below.

You can click the "Emulator settings" menu directly from here, or you can open the Preferences and search for the emulator

Enable the checkbox

Then click Apply.

Now try to execute the app. At this point, ensure that no active emulators are running.

Unfortunately, nothing happened. Still, I saw only the instructions to launch the emulator in the tool window and not the emulator.

Then, I tried to launch the emulator once again. I saw this error popping.

I was not sure about the things happening. So I created a virtual device.

I executed the app again and targeted the new device.

அடங் கொய்யால!

All seems to be fine now. I'm able to execute the app in all virtual devices and more importantly, the emulator is now embedded in the Android Studio. I don't have to switch my windows anymore while developing an Android app.

Here is my full window

Not all features are available yet. But I still love it.

Thank you to all the developers who worked all day to give us this feature.

Why Flutter Renders Quickly?

Nagaraj Alagusundaram — Thu, 10 Sep 2020 05:25:34 +0000

Introduction:

By now we all would have heard the word “Flutter” and we all know it’s a Google-owned cross-domain platform just like Microsoft's Xamarin and Facebook's React Native. Google Trends shows a stat that the “Flutter” keyword is trending when compared with its competitors.

Flutter is just another Framework and it is not a first of its kind but why it is trending?

When you search on the internet you will find the Pros and Cons of adopting the Flutter. The important point mentioned in all blogs is “Flutter is quick” or “Flutter renders the UI quickly” but no one described it. So, I thought of writing a blog with examples to show that and please do not consider this as a comparison or Flutter praising blog.

Components:

Like everyone say, I also agree the fact that, In Flutter, everything’s a Widget. But it is not fully true.

Yes!

There are few other too, which we are going to see in detail.

Firstly, what is a widget?

According to the documentation,

Widgets are the central class hierarchy in the Flutter framework. A widget is an immutable description of part of a user interface.

We all know that there no such thing called static or immutable UI. In any given app or web, the contents are meant to change. So, it is mutable but how Flutter uses the immutable widgets to create an app?

In reality, Flutter has three trees

· Widget

· Element

· RenderObjects

With the help of these trees, Flutter reuses the components and makes it faster.

But how?

First, let’s describe each tree briefly and then I’ll show you an example on how it is achieved.

According to the documentation,

Widget: Describes the configuration for an Element.

Element: Is an instantiation of a Widget. (This is a mutable piece, which is responsible for updating and managing the UI)

RenderObject: Handles size, layout, and painting.

In other words, we can also mention these as

· Configure

· Life Cycle

· Paint

If you have enough time to watch a video about the backed nature of each components, watch this: https://www.youtube.com/embed/996ZgFRENMs

Here I’ve created a sample application to show how the rendering is happening in Flutter.

This Application can also be cloned from GitHub: https://github.com/NaagAlgates/how_flutter_ui_drawn.git

The output of the application is simple. When the screen is clicked, draw a new set of the widget tree.

Click the Flutter Inspector tab if you’re using Android Studio like shown below

This tab shows how the widgets are arranged to form a tree called a widget tree. Each and every widget should have a renderObject. Each of these objects has their own id. Copy or note down this id because we are going to play around with it to prove why Flutter renders faster.

In my case the ID for CustomText widgets are #6d2c7, #bcd50 and SizedBox is #ab197

Sized Box widget is the one which helps in providing a space between two CustomText.

CustomText is a Stateless widget class that holds certain Text widget properties.

Now, for testing purpose, comment the SizedBox widget and uncomment the padding property (refer line 39 in the code)

Execute the code or just save the code and you should see the output immediately (Hot reload – Command + \ in mac). You should see no difference at all.

Ideally what should happen next?

Remove all the views and re-create the entire view.

But what happened?

Nothing has changed except for the removal of SizedBox and the inclusion of Padding.

To prove that now check the renderObject ID for your new tree.

In the tree, you should see the Padding widget in green color in-between two CustomText Widgets.

The IDs of the Widgets are as follows

CustomText = #6d2c7

Padding = #18959

CustomText = #bcd50

When you click the screen, now the IDs are as follows

CustomText = #6d2c7

SizedBox = #af954

CustomText = #bcd50

The value of Padding and SizedBox alone changed because a new RenderObject was called on every click and hence, Flutter draws the screen quickly and the operation is less expensive.

Nagaraj Alagusundaram

Source: https://www.xam-consulting.com/blog/why-flutter-renders-quickly

LinkedIn: https://www.linkedin.com/in/ausmnaag/

Twitter: https://twitter.com/NAlagusundaram

GitHub: https://github.com/NaagAlgates

Website: https://www.nagaraj.com.au