Thursday, October 8, 2020

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. 

 

New pipeline

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


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:
scriptecho 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.

Sunday, July 26, 2020

Weather App SwiftUI, OpenWeatherMap and Combine using MVVM

I have started the iOS 13 & Swift 5 course on Udemy. I am really loving the course, the instructor Angela is awesome. 

I was not interested in UIKit development and I had started and stopped few times in past years with UIKit. But, SwiftUI is something that is bringing my interest back to iOS development. 

But wait, you must be wondering that course is in UIKit and I really do not like UIKit. What I decided to do is to build the projects in SwiftUI and Combine. This path is really slow and I would suggest to folllow this path you are interested in learning both at a time. I had few knowledge of UIKit before I started this course so I am just figuring new stuff in UIKit. 



The course has a Weather app that looks like this. 

LightMode



DarkMode



I have name the files  with suffux 'Model', 'ViewModel', 'Service' and 'View' so that you can identify the parts of the MVVM pattern easily. 

Most time cosuming part of the learning was understanding the Combine and how to structure the app using Combine framework. If you want to take a Deep Dive into Combine framework, I really encourage you to read through https://heckj.github.io/swiftui-notes/#introduction

Learnings while converting this project to SwiftUI

Supporting Light and Dark Mode

Starting with the background of the app. You will have to upload assets for each type of appearance in the assets folder. 

Similar to background you can set the AccentColor of the app to be different for different environment and add additional color sets for primary or secondary colors. 

Using Combine


If you are new to Functional Reactive Programming, I would suggest give a read https://blog.danlew.net/2017/07/27/an-introduction-to-functional-reactive-programming/

Using Delegate Pattern in SwiftUI


I needed to get the current location of the User. So to do that I need to conform to CLLocationManagerDelegate protocol. You can check the implementation in the code in WeatherViewModel.

Monday, June 22, 2020

WWDC 2020 Keynote Highlights


AirPods

• AirPods now magically switch between your devices as you use devices that would logically call for AirPods to be connected
• AirPods Pro now supports spacial audio to emulate a theatre like immersive surround sound experience… this takes into a account head movement to map the sound field and anchor it to your device, so if you move your device and head the surround sound pivots to keep you at the centre! 

AppleWatch and WatchOS7

• You can now have multiple rich complications on the one watch face
• You can now download tailored watch faces, or create your own pre configured watch faces and share them via iMessage 
• Maps on watch will include the new cycling directions from Maps 
• Workouts now includes ‘Dance’ and it can tell if you’re dancing with your whole body, just lower or just upper body
• Core training, Functional strength training and cool downs also added 
• The activity app is completely redesigned on iPhone and has been renamed to ‘Fitness’ 
• Sleep tracking is finally here! It allows you to set goals on bedtime and wake times. 
• In the evening, your phone can start a ‘wind-down’ process which will turn on do not disturb and can start your meditation app or some relaxing music 
• The wake up alarm can be Taptic so you don’t wake your partner
• When you’re sleeping you have to tap the screen for it to light up to show time
• There is now a hand washing feature in WatchOS that makes sure you’re washing your hands effectively and for long enough

Privacy

• ‘Sign in with Apple’ now allows developers to help users move their existing accounts across to sign in with apple access 
• With location sharing, you can choose to share your precise, or just approximate location 
• Apps have to have a privacy policy, but it’s usually hidden, so they now have a ‘nutrition label’ style label on the App Store page so you can see a summary of the apps privacy practices. 

Home

• Apple, Amazon and Google have formed an alliance on smart home standards
• Homekit is now open sourced
• The flow for adding Homekit devices 
• Activity zones and face recognition now supported for all cameras in Home, and it will recognise faces of friends and family you’ve tagged in your photos app
• You can now view cameras and your doorbell camera on Apple TV! 


AppleTV

• AppleTV supports the new Xbox adaptive controller and the new Elite controller
• You can use PIP anywhere within AppleTV (so watch the news while you use a workout app etc)
• Airplay now supports 4K 

MacOS

• The new version of MacOS is called MacOS Big Sur
• The OS has been refined, it has more of an iOS feel
• New icons, controls, surfaces
• Consistent highlight tints in apps, rounded row selection styles
• Control centre can be customised and you can add quick actions to your top bar
• Notifications look and are grouped like in iOS
• The new iOS widgets have been bought to the Mac too 
• MacOS Messages: Now has refined search; supports message effects, Memoji stickers and the other enhancements that were added to group chats 
• Catalyst has updates including Total Pixel control, Mac specific interactions and date pickers
• Safari on MacOS: redesigned, more effective tab management, page translation built in

Mac is moving to their own Apple silicon (ARM chips) 

• All the new native Apple apps work on the new chips…. Including Xcode, Final cut etc
• Using a new tool called Universal2 developers can use a single binary to make apps work on both the Apple Silicon and old Intel Macs 
• Microsoft and Adobe are already onboard and have built many of their apps to work on the new Apple Silicon
• Microsoft Office is already built out to support the new Apple chips … and Powerpoint is using Metal for rendering. 
• Adobe Lightroom and Photoshop have also been converted
• Rosetta2 converts existing Mac apps automatically… even games can be converted for the user automatically…. (They demo’d the latest Tomb Raider) 
• iPhone and iPad apps will run on the new Arm MACs completely unmodified! 

Sunday, May 24, 2020

Todo app using SwiftUI

It's time again and I started learning the iOS programming again as SwiftUI looks cool.

I spent couple of weeks going through the swift programming documentation and watched the WWDC videos. 

Note: This is an ongoing blog, which I update as I add more features to my TodoApp.

Learning


Follow along the Swift documentation. Try to code along the examples. Just go through the documentation even if you don't understand the whole thing just try to read all the documentation and get yourself aware with the concepts. This is will help later while reading the code of some
open source project. 

And.. read the documentation again. This is what I am doing now, this time try to understand and repeat until it becomes muscle memory. this is ongoing process.

SwiftUI


Follow the SwiftUI tutorials and try to recreate them. 

Videos


One of my colleague suggested WWDC videos and watch them in the order. 


Blogs

After going through all those videos and tutorials, I have decided to start creating something. So what is first app everyone build, it's Todo app. 

iOS-TodosApp


Download the Github repo to follow along and try the completed features.

Features


  • Create a new Todo
  • Context menu to Complete or Delete a Todo
  • Show completed tasks
  • Add Priority
  • Add Date

Upcoming


  • Edit 
  • Persist the data
  • Add Notification
  • Add Location
  • Login functionality

Learnings while doing TodoApp

Thursday, March 19, 2020

Implementing Azure Ad B2C with MSAL.js in SPA with aspnetcore api

In the previous article Implicit Flow in SPA with Azure Ad I tried to learn how to use the Azure Ad Implicit flow to login to Single Page Application.

Azure AD B2C documentation on Microsoft is very elaborate and will take you through the steps from Creating a tenant in Azure to running an application.

Currently, you cannot create an Azure B2C tenant in Australia

If you have gone through the previous article, I had use MSAL.js in the client app to implement the login flow.

If you want to follow the steps you can refer the code hosted on Github AzureAd Samples under the SPA_B2C folder.

I have tried to implement only signup and sign-in flow.

If you follow the steps in the documentation you will have an Azure Ad B2c tenant and user flow to sign in and sign up a user.

you would need to create a .env.developement file next to the .env file in the root folder and update the following variables

REACT_APP_CLIENT_ID=
 REACT_APP_TENANT_ID= 
REACT_APP_TENANT_NAME= 
REACT_APP_SUSI_FLOW_ID= 

If you do not know about React environment variables have a read at Adding custom environment variables


Also, I am loading the SPA from the aspnet core web app. So in my case, the redirect URL in the app registration is https://localhost:44321, which can be found in the launchSettings.json

If you run the aspnet core web app and navigate to https://localhost:44321 on your favorite browser. you will see an empty page with a Sign-in button.


There are 2 flows that can be used


- Popup flow where a separate popup window will open to login
- Redirect flow

If you just check out the repo you will see the redirect flow and if you wanna see the popup action you need to be on the corresponding commit

There are some known issues with IE.

If everything is configured properly you should see your custom ui page after clicking the login button

You can hit sign up to register a new user.

Note: The order of the fields on the signup page will be what is set in the Page layouts in the Azure Ad B2C. If, you want to chage the order you can do in Azure



Also, you can set which fields are optional or not.

You will need a real email for verification. This is the first step in the registration process.

After you get the email with verification code you can finish the registration process.

If the user is created successfully and logged in you will see the next page in the app.


logout button does not work at the time when I am writing this article but it may be in when you are reading :)

Next article I will be doing how to access the API and get the weather summaries.

Cheers

Happy coding.