Ionic Capacitor CI/CD using new yaml pipeline with multiple stages

The Ionic Capacitor is a new framework to build cross-platform apps. In this article, we will learn how to set up an Azure DevOps pipeline to build and deploy to AppCenter to distribute to test users.

For simplicity, I am going to build only the android project in this article. You can always add more jobs to run in parallel to build the other environments. Also, I am assuming that you have some experience build Azure pipelines and know about defining variables in the pipeline and how to store secrets in Secure Files and Variables. Please let me know in the comments if there anything specific about the pipeline you don't understand,

I started with creating an empty yaml pipeline and here you have different options to choose your repo from. I have my repo on Azure reports Git and will select that and choose my repo from the next screen. 

 

Once you select your repo you will get some recommendations in the Configure 

I picked up the starter pipeline to get the basic pipeline in place, which will checkout the branch based on the trigger branch, which by default will be master.

Once you select the Starter pipeline you will get something like this.

# Starter pipeline

# Start with a minimal pipeline that you can customize to build and deploy your code.

# Add steps that build, run tests, deploy, and more:

# https://aka.ms/yaml

trigger:

- master

pool:

  vmImage: 'ubuntu-latest'

steps:

- script: echo Hello, world!

  displayName: 'Run a one-line script'

- script: |

    echo Add other tasks to build, test, and deploy your project.

    echo See https://aka.ms/yaml

  displayName: 'Run a multi-line script'

we will start to make changes to the pipeline.

Test Xamarin Forms app for Android 10 and iOS 13

Google and Apple have both released their new OS for mobile. Google with Android Q and Apple with iOS 13.  Have a quick look at the new features of iOS 13 and of Android Q.

I work on Xamarin Forms and I was eager to test my app on the new releases. So these steps are specific to Xamarin development with Visual Studio on Windows and Visual Studio for Mac.

Let's start with iOS.

iOS 13 Setup

To use the iOS 13 simulator, you would need to install xCode 11 beta. You can download this from the apple developer website. 

Once you install the XCode 11 beta you can configure the new simulators for iOS 13. 

If you open with Visual Studio it will not show you the iOS 13 simulators for your iOS project. To make them available, we would need to change the SDK to point to xCode-beta. To change the SDK location Goto Visual Studio - Preferences - Projects - SDK Locations - Apple and change the Xcode location to xCode 11 beta as shown in the image below. 

You will need to restart Visual Studio.

3rd day with Xamarin

The second day with Xamarin was spent setting up the permissions and Azure build Pipeline to build the Android and iOS projects.

Today I am planning to do

• MVVM in the app 
• Setting up Dependency Injection 
• Dialog Service

MVVM

MVVM is Model-View-ViewModel and you can read about it on Microsoft website Here. It is an application pattern that allows us to build de-coupled components. I would suggest reading through the article to get a better understanding of  MVVM components before reading ahead.

Advanced JavaScript Topics Part 2

We were discussing the let keyword in the Part 1 of this series. We discussed what the advantages and how we can use let keyword in the code. However, let keyword has a problem it does not support hoisting, means if you have declared a variable using let keyword in the mid of the block it would not be available in the part above the declaration of the let keyword.

So you always make sure that let is declared at the top of the block.

As we discussed earlier let keyword kind of Hack the scope implicitly. We can always write the code to make sure when we see we can explicitly identify that this block is a scope. The example given the in the Part 1 of this series used the implicit way. To use the explicit way do it like this

function foo(bar) {

    "use strict"

    let (test = bar) {

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

However, this syntax is rejected by the committee. we can use some other way to make sure we see the block scope in the code as we read the code.

function foo(bar) {

    "use strict"

    /*let */

    {

        let test = bar

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

This is one way to do it. Keyle Simpson have created this great tool to help you with block scoping it is called Let-er .

So, as we started to talk about tools you might want to take a look at traceur-compiler it generates ES 5 code from ES 6 code. As there is development going on in ES 6 you should start writing your code in ES 6 and use a transpiler to convert the ES 6 code to ES 5. You can use grunt-traceur . Other than this you might wanna take a look at the tools for ES 6.

Hoisting

Hoisting is a concept which is developed to understand how JavaScript works when we declare the variables and functions. Take a look at the code below

Advanced JavaScript Topics Part 1

If you are writing Hybrid Mobile Applications than JavaScript should in your blood. So, I am trying to write something about JavaScript today.

Some Resources

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide : It is Mozilla Developer Network also known as MDN. It is an open source Wiki also, which I  think not known to most of the people. It is one link that should be bookmark in your browser.

• https://github.com/rwaldron/idiomatic.js : It is a write up of idiomatic code that is widely accepted across the developer to write consistent JavaScript code. You may not agree with all the code which is there but it is a great place to start. There are couple of quotes written on the git page, which I like it is

         "Arguments over style are pointless. There should be a          style guide, and you should follow it"                

         Rebecca Murphey

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/ : This is one stop shop for design patterns in JavaScript and if you are going to write a clean code in JavaScript and Follow a Design to solve the problems in JavaScript you should go through this.
• 
  
•     http://www.ecma-international.org/ecma-262/6.0/ : JavaScript is EEMA Script if you don’t know. This is the language specification and I am sure many of you have not referred to this. If you are referring to this means you are writing some serious efficient JavaScript Code.

Hybrid App Development Part 1

So, in the previous blog Introduction to hybrid app development we learn about what is hybrid app. Today, we will learn more about hybrid app.

1. Hybrid App Architecture : Hybrid App Development Part 1
2. Development tools           : Hybrid App Development Part 2
3. Debugging techniques      : Hybrid App Development Part 3
4. Building Hybrid App        : Hybrid App Development Part 4
1. UI Development     : Part 4.1
2. Fetching Data and Angular Caching : Part 4.2
5. Testing the App                : Hybrid App Development Part 5
6. Deployment of App          : Hybrid App Development Part 6

We will talk about Architecture of Hybrid Mobile Application. We will discuss each of the component in detail. 

So first question that came to my mind when I think of Hybrid App Development is that what is it that enables this?

Answer to this Question is 

Web vs Native vs Hybrid Applications

In my previous blog Introduction to Hybrid Application development, we talk about different technologies which we will can use to build a Hybrid Application development.

However, before going into deep with Hybrid Application Development I was thinking to do a comparison between Web vs Native vs Hybrid Mobile applications.

Web vs Native vs Hybrid Mobile Applications

What I think about these different techniques for Mobile Application Development is that we should go with Hybrid Mobile Application development as over the past couple of years the Tools which are being used for Hybrid App development are matured and have been popular enough.

I didn't want to mention this but if you are a mobile app developer than you can see that the jobs in the IBMWorklight are more than any other Tool being used for Hybrid Mobile Application Development. If you would ask me what I am favoring the Hybrid App development is because

1. Single CodeBase for all the platforms. You need to maintain only one code for different platforms like iOS, Android and Windows.
2. Development is faster. As we are using the existing Web application development technologies like JavaScript, HTML and CSS with Apache Cordova
3. Deployment as Native apps by wrapping the web app using native framework.
4. IBM Worklight provide Single Notification server which can be used to deliver notifications to all the different platforms.
5. Integration with native features is very easy.
6. Offline databases can be used to store data when network is not available which huge advantage for offline support is.
7. There is huge repository of Cordova Plugins which can be integrated easily.

I would like to know your opinion on this before I start the Hybrid application development series and please suggest if there is anything specific you want me to include in the series.

Introduction to Hybrid App Development

History

With the Origin of mobile operating systems like iOS, Andriod, Windows and Others in the market. There are variety of devices in with different form factors and different hardware specifications. With the evolution of the Mobile Operating System, Mobile Devices hardware has evolved a lot. We will not deep into hardware development but yes we will talk more about the Software part.

So, What are the ways we can develop a Mobile Application?

1. Using xCode with Swift, Objective - C and using their UI Libraries we can build Apps for iOS. you can go to Apple Developer Site to know more about it.
2. Android Application development using Java. Getting Started with Android.
3. Windows phone application development using .Net Framework and C#. Windows phone App Development getting started.

As Listed above if you need to build an App for multiple devices you would think I would need to learn all these technologies and believe me I have not listed all the Technologies which are used, I have just mentioned the programming languages.

So now you can understand what could be the problem with this. Anyway, I will mention it explicitly, Now I want to develop an App for all 3 Operating Systems. I have to develop it in 3 different plateforms to support 3 different mobile operating systems. Which I think would be huge effort for Developers and Enterprise Softwares. This problem leads to the evolution of Hybrid Mobile Application development with mainly involve development with PhoneGap (Currently known as Cordova).