Understanding Azure DevOps with a Hands-On Tutorial

DevOps is a mash-up of ‘development, operations, quality team, security team’. There are no set guidelines or methodologies available for the implementation of DevOps practices. In this article, we will take a hands-on look at Azure DevOps by implementing a sample Ionic Cordova application.

Agile has been the norm in several organisations for the last few years. The agile principles or Scrum methodologies have short sprints, usually lasting up to two to four weeks, and hence all activities in a software development life cycle need to be completed in this time period for the features that are to be delivered. Project teams usually struggle to deliver applications with better quality because of the short time available. Agile principles force you to develop, test, and deploy software within two to four weeks for specific features. The activities involved in development, test and deployment are manual. This results in missed deliveries, unsatisfied customers, unhappy developers, angry testers, perplexed project managers, concerned management, and escalations.

The implementation of DevOps practices using end-to-end automation with Visual Studio Team Services/Azure DevOps helps to achieve better quality and faster time to market.
DevOps is a mashup of ‘development, operations, quality team, and security team’. There are no set guidelines or methodologies available for the use of DevOps practices. It is a culture that consists of continuous practices, which help to achieve faster time to market for an application with the highest quality by continuous improvement and innovation. This is done by involving people, processes and tools.

Before we begin, let’s be clear about what DevOps is not:

• DevOps is not a methodology
• DevOps is not a process
• DevOps is not a tool or technology
• DevOps is not a framework
• DevOps is not a set of design patterns, where problems and solutions are well defined
• DevOps is not scripting
• DevOps is not automation only

Table 1: Responsibilities of Dev and Ops teams

Let’s also understand the business and technical benefits realised by organisations after a cultural transformation, by using DevOps practices (Table 2).

Table 2: Benefits of DevOps

In this article, we will get hands-on understanding of Azure DevOps using some concepts, and then implement CICD for the sample application.

Implementation of DevOps practices
Continuous practices play an important role in culture transformation. Figure 1 shows some, if not all, continuous practices.

Let’s understand some continuous practices in detail, as given in the table below.

Table 3: Continuous practices

Azure DevOps
Azure DevOps is a Software as a Service (SaaS) or hosted service, which was formerly known as Visual Studio Team Services. This platform from Microsoft provides an end-to-end automation toolchain for developing and deploying different types of applications written in Java, .NET, Python, PHP, Angular, Node.js, Ionic Cordova, Android, iOS, and so on. It also integrates with most of the tools used in the automation of application life cycle management activities. It offers a free trial to get started. The hosted Mac agents provided by Azure DevOps can be helpful in building iOS applications. Do visit https://azure.microsoft.com/en-in/services/devops/ for more details.

Table 4 will help you understand Azure DevOps services.

Table 4: Azure DevOps services

The following are some of the key terminologies used in Azure DevOps.

To understand the process, we will try to cover CICD for a sample Ionic Cordova application, as it is important to have a hands-on look at Azure DevOps. The steps are given in detail below.
1. Import Ionic Cordova sample application code from GitHub to Azure Repos.
2. Let’s do a few configurations in the file karma.conf.js
3. Add the required plugins for Junit (unit testing) and Cobertura (code coverage) output:

plugins:[
require(‘karma-jasmine’),
require(‘karma-chrome-launcher’),
require(‘karma-mocha-reporter’),
require(‘karma-coverage-istanbul-reporter’),
require(‘karma-junit-reporter’),
require(‘@angular-devkit/build-angular/plugins/karma’)
],

4 Add Cobertura in the reports key section to karma.conf.js:

CoverageIstanbulReporter: {
dir: require(‘path’).join(__dirname, ‘./coverage’),
reports: [‘html’, ‘lcovonly’,’cobertura’],
fixWebpackSourcePaths: true
},
reporters: [‘progress’, ‘ kjhtml’, ‘junit’],

5. Add JunitReporter configuration details in karma.conf.js if these are not available in the file:

JunitReporter: {
outputDir: ‘’,
outputFile: undefined,
suite: ‘’,
useBrowserName: true,
nameFormatter: undefined,
classNameFormatter: undefined,
properties:{}
},

6. Configure Headless Browser so that test cases can be executed:

AutoWatch: true,
singleRun: true,
browsers: [‘ChromeHeadlessNoSandbox’],

customLaunchers: {
ChromeHeadlessNoSandbox: {
base: ‘ChromeHeadless’,
flags: [‘--no-sandbox’]
}
},
autoWatch: true,
singleRun: true,
browsers: [‘ChromeHeadlessNoSandbox’],

customLaunchers: {

7. Configure Package.json with scripts:

“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test --code-coverage”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“postinstall”: “webdriver-manager update --standalone false --gecko false”
},

“devDependencies”: {
.
.
“karma-junit-reporter”: “2.0.1”,
.
.
},

8. Install Cordova Build Extension in the organisation so that the pipeline can use this extension.

9. Go to Pipelines section and create a new pipeline. Connect to Azure Repos Git. Select a repository, and then select a template to build a pipeline from the start.

10. The following is the pipeline for the Ionic Cordova app:

trigger:
- master
pool:
vmImage: ‘vs2017-win2016’

stages:
- stage: “ContinuousIntegration”
jobs:
- job: “CI”
steps:
- script: |
npm install
npm install karma-junit-reporter --save-dev
npm audit fix
displayName: ‘npm install and build’

# Perform Lint analysis
- script: |
npm run lint > LintResults.txt
displayName: ‘Lint Analysis’

- task: CopyFiles@2
inputs:
Contents: ‘LintResults.txt’
TargetFolder: ‘$(build.artifactstagingdirectory)’

- task: PublishBuildArtifacts@1
inputs:
PathtoPublish: ‘$(Build.ArtifactStagingDirectory)’
ArtifactName: ‘drop’
publishLocation: ‘Container’

# Execute unit tests
- script: |
npm run test
displayName: ‘Unit Tests’

# Publish Junit Test Format results
- task: PublishTestResults@2
inputs:
testResultsFormat: ‘JUnit’
testResultsFiles: ‘**/TEST*.xml’
# Publish Code coverage details on Azure DevOps Dashboard
- task: PublishCodeCoverageResults@1
inputs:
codeCoverageTool: ‘Cobertura’
summaryFileLocation: ‘**/*coverage.xml’

# Quality verification of the build based on the line coverage by Unit tests
- task: BuildQualityChecks@6
inputs:
checkCoverage: true
coverageFailOption: ‘fixed’
coverageType: ‘lines’
coverageThreshold: ‘20’

# Create Empty Directory – Ref: https://stackoverflow.com/questions/21276294/cordova-current-working-directory-is-not-a-cordova-based-project
- task: PowerShell@2
inputs:
targetType: ‘inline’
script: ‘New-Item -ItemType directory -Path www\’

# Find available Cordova commands for execution
- task: CordovaCommand@1
inputs:
cordovaCommand: ‘help’

# Add Android Platform
- task: CordovaCommand@1
inputs:
cordovaCommand: ‘platform add android’
cordovaVersion: ‘8.1.0’

# Build Android Project
- task: CordovaCommand@1
inputs:
cordovaCommand: ‘build android --prod’
cordovaVersion: ‘8.1.0’

# Publish APK file
- task: CopyFiles@2
inputs:
Contents: ‘**/*.apk’
TargetFolder: ‘$(build.artifactstagingdirectory)’
CleanTargetFolder: true

- task: PublishBuildArtifacts@1
inputs:
PathtoPublish: ‘$(Build.ArtifactStagingDirectory)’
ArtifactName: ‘drop’
publishLocation: ‘Container’
- stage: “ContinuousDelivery”
dependsOn: ContinuousIntegration
jobs:
- job: “CD”
steps:
- task: DownloadPipelineArtifact@2
inputs:
buildType: ‘current’
itemPattern: ‘**/app-debug.apk’
targetPath: ‘$(Pipeline.Workspace)’

11. Now run the pipeline.
12. Verify the stages, and click on the stage to go to the console output.

13. Verify the console output for stages available in the pipeline.

14. The pipeline summary indicates Artifacts as well as Test and Coverage details.

15. Verify the unit test results in the Tests tab.

16. Verify the build quality check result summary in the extension tab.
17. Verify code coverage summary.
18. Verify all the published Artifacts by pipeline execution.
The next logical step is to upload this to the App Centre and the Ionic Cordova iOS pipeline.