ASP.

NET Core, NestJS, SwiftUI, AWS

MAY
JUN
2020
codemag.com - THE LEADING INDEPENDENT DEVELOPER MAGAZINE - US $ 8.95 Can $ 11.95

Stay at
Home!

Building Mobile Deploying Exploring NestJS

Apps Using APIs Using The Final Chapter
SwiftUI ASP.NET Core
Bonus tracks: Microsoft Teams, Power Apps, SharePoint

200+ Sessions
100+ Microsoft and industry experts
Full-day workshops Evening events

DEVintersection.com 203-264-8220 M-F, 9-4 EDT AzureAIConf.com

 December 8–10, 2020
Workshops December 6, 7, 11
Las Vegas, NV
MGM GRAND

June 8–10, 2021

Workshops June 6, 7, 11
Orlando, FL
WALT DISNEY WORLD
SWAN AND DOLPHIN

SCOTT SCOTT
GUTHRIE HANSELMAN
Executive Vice President, Principal Program
Cloud + AI Platform, Manager, Web
Microsoft Platform, Microsoft

JULIA CHARLES KARUANA

LIUSON LAMANNA GATIMU
Corporate Vice President, Corporate Vice President, Principle PM Manager,
Microsoft Microsoft Customer Advocacy
Group, Microsoft
REGISTER EARLY
for a WORKSHOP PACKAGE
and receive a choice of
hardware or hotel gift card!
See website for details

KATHLEEN JEFF JOHN

Powered by DOLLARD FRITZ PAPA
Principal Program Senior Program Principal Developer
Manager, Microsoft Manager, Microsoft Advocate, Microsoft
AND MANY MORE
 TABLE OF CONTENTS

Features
8 Modern Authentication Columns
With so many different definitions for authentication, it’s hard to know
what’s involved. Sahil provides the basics to get you up to speed.
Sahil Malik
52 T alk to an RD:
Ciprian Jichici and Markus Egger
16  se the MVVM Design Pattern
U Ciprian and Markus talk about what’s coming in artificial

in MVC Core: Part 1 intelligence and beyond.

Markus Egger
When you need your app to be reusable, testable, and maintainable, you
need MVVM in MVC. Paul shows you why and how to get the most out of it.
Paul D. Sheriff
74 CODA: On Forcing Functions
John V. Petersen

28  iscovering AWS for .NET

D
Developers
Julie takes an existing small ASP.NET Core API that uses EF Core and then
uses EF Core migrations to create a database on AWS, interact with the
Departments
database, and explore secrets management for the database credentials
both locally and for a deployed app. Soldiering On
6 
Julie Lerman
Markus talks about hard times before and after the pandemic
and quarantine.
 36 NestJS Step-by-Step: Connecting Markus Egger

NestJS with Angular (Part 4)

In this fourth article of the series, Bilal continues working on his ToDo list
14 Advertisers Index
as he connects an Angular front-end application with a NestJS back-end API.
Bilal Haidar 73 Code Compilers
 56 Introduction to SwiftUI
Wei-Meng uses the iOS’s declarative programming framework SwiftUI
to develop a simple user interface for iOS and macOS applications,
and teaches you how it works at the same time.
Wei-Meng Lee

US subscriptions are US $29.99 for one year. Subscriptions outside the US pay $49.99 USD. Payments should be made in US dollars drawn on a US bank. American Express,
MasterCard, Visa, and Discover credit cards are accepted. Bill Me option is available only for US subscriptions. Back issues are available. For subscription information,
send e-mail to subscriptions@codemag.com or contact Customer Service at 832-717-4445 ext. 9.
Subscribe online at www.codemag.com
CODE Component Developer Magazine (ISSN # 1547-5166) is published bimonthly by EPS Software Corporation, 6605 Cypresswood Drive, Suite 425, Spring, TX 77379 U.S.A.
POSTMASTER: Send address changes to CODE Component Developer Magazine, 6605 Cypresswood Drive, Suite 425, Spring, TX 77379 U.S.A.

4 Table of Contents codemag.com

 EDITORIAL
Soldiering On
Times are dramatic. You don’t need me to tell you that. The issue you’re currently reading—and I’d like
to call it “the issue you’re holding in your hands,” but this may or may not be the case—was meant to
be one of celebration and happiness. This is our twentieth year of publication, and we had planned
various things to celebrate the occasion. All of
this now had to be pushed out.
For CODE Magazine, the last six to nine months
have been a rollercoaster of emotions. During
spring and summer 2019, we planned various
new initiatives for our publication. We were excit-
ed and things were going well. One of the major
steps was a partnership with Microsoft that gives
all Visual Studio subscribers, as well as MS Dev
Essentials users, access to CODE Magazine free of
charge.
Things were good and looking up. Then things
took a bit of a step back for the magazine busi-
ness, when MSDN Magazine ceased to publish.
Many thought this was good news for us, but I was
sad. CODE Magazine is a side-business for us. A
6 Editorial
labor of love, and a personal passion of mine. It’s
not a cut-throat competitive publication. We’ve
always gotten along well with other developer
publications. I even wrote for MSDN Magazine
(and others) myself. I had friends there. Many
pointed out that we should try to take advantage
of the situation and move MSDN Magazine sub-
scribers to CODE Magazine as a great business op-
portunity. Instead, we offered a free subscription
to MSDN Magazine readers who were looking for
another option for a print publication.
All in all, things were still very good until mid-De-
cember. Just before Christmas, really. As we were
in the process of wrapping up the year, we were
hit by a massive ransomware attack. I remember
coming back from my last customer meeting,
thinking it was time to lean back and relax during
the Christmas holidays. Instead, every single one
of our servers and workstations was wiped out
by this attack. We’re still working through
the aftermath of all that. Once we’re
completely back on our feet,
we’ll publish a detailed
article about what
happened and
how we managed to recover. I think it will be an
interesting read and hopefully help people to
prevent this kind of attack from happening, or
at least to recover from it as quickly as possible.
(Note: No data leaks occurred. No data was sto-
len. But our ability to operate the business was
greatly impacted.)
I also want to take this opportunity to apologize
to readers who experienced a delay in getting
their magazine delivered or getting online ac-
cess. We did our best to serve all of our custom-
ers (including all of the new customers that have
come onboard from the Microsoft partnership),
and we realize that it isn’t the best way to start a
new relationship, but the attack was so severe, it
simply wasn’t possible to proceed with business
as usual.
All of this, of course, now pales in comparison to
the COVID-19 pandemic. As I write this, I’m work-
ing from home and only being in contact with
my friends and colleagues online. That part was
relatively easy for us, as we’ve always been set
up for remote working. It’s still strange to not be
able to see anyone in person. And the fear that
friends, co-workers, or family may be infected is
crippling. The logistics of publishing a magazine
have been made much harder by this also. As I
write this, I don’t know whether our printshop
will be deemed essential enough to print this is-
sue. I also realize that there probably are more
important things to do at this point than print
a software developer’s magazine. At this point,
we’ll just have to wait and see.
However, the good news is that CODE Magazine
is also available digitally. We’re also working on
new CODE Magazine apps for iOS and Android.
In that sense, the timing couldn’t have been
better. I apologize to our print subscribers. We
may have to stop publishing print magazines for
an issue or two. But any possible interruption
is temporary. We will push forward and be back
operating normally. 
I think that will be true for everything. We will
all come together and soldier on together! Please
stay safe (and stay home).
 Markus Egger

codemag.com
 OLD
TECH HOLDING
YOU BACK?

Are you being held back by a legacy application that needs to be modernized? We can help.
We specialize in converting legacy applications to modern technologies. Whether your application
is currently written in Visual Basic, FoxPro, Access, ASP Classic, .NET 1.0, PHP, Delphi…
or something else, we can help.

codemag.com/legacy
832-717-4445 ext. 9 • info@codemag.com

codemag.com
 ONLINE QUICK ID 2005021
Modern Authentication
What does this “Modern Authentication” phrase mean to you? This is the challenge. Something so critical to our applications
doesn’t even have a good definition. I’m confident that now, many of you are wondering what this article is all about. This article
is about the absolute basics of authentication. When was the last time you wrote an application that didn’t need any information
Sahil Malik
www.winsmarts.com
@sahilmalik
Sahil Malik is a Microsoft
MVP, INETA speaker,
a .NET author, consultant,
and trainer.
Sahil loves interacting with
fellow geeks in real time.
His talks and trainings are
full of humor and practical
nuggets.
His areas of expertise are
cross-platform Mobile app
development, Microsoft
anything, and security
and identity.
8 Modern Authentication
about the user using the application? Almost never, right?
Authentication is as essential as it gets. And yet the chal-
lenge is mixed with the jargon of keywords and chasing
ever-changing standards of security and identity. The field
of authentication can appear overwhelming.
The result is poorly written applications. Think about it,
poorly written applications that concern user identity. Ouch!
The goal of this article is to simplify all of this, so you’re
better equipped to talk back smartly when someone throws
all that technical identity jargon at you. The goal is to share
the absolute basics of identity that I wish everyone was on
the same page about.
What Is Modern Authentication?
Let’s start with the first challenge. There’s no clear defini-
tion of this term “Modern Authentication” and yet everyone
throws the term around. So let’s attempt to define it first, at
least for the purposes of this article.
The challenge is that we’ve had pretty good solutions for
authenticating and managing users for a while now. In the
Microsoft world, we’ve used Active Directory. But the con-
cepts aren’t unique to active directory. There are protocols
such as NTLMv2 and Kerberos that have been in use for some
time now. The problem is that neither of these protocols are
perfect for an Internet world.
NTLMv2 relies on point-to-point exchange; to simplify, with-
out sending my password over the wire, using some sort
of shared understanding between me and the recipient
(server), the server is able to ascertain that I’m providing
the correct credential. This has a serious downside in that
my credentials can’t be forwarded by the server to another
server.
To alleviate that issue, a protocol called Kerberos was creat-
ed. In Kerberos the domain controller hands out tickets for
creating sessions between the client and the server or the
domain controller itself. Kerberos is great and has served us
very well in corporate environments. Where it breaks down,
of course, is when you try to take things to Internet scale.
For instance, Kerberos is extremely chatty and requires a lot
of network ports to be opened for it to work. Now, organiza-
tions have really stretched the boundaries of what Kerbe-
ros can do. There are concepts such as trusts, VPNs, and so
much more that have enabled us to stretch the boundaries
of what was intended to be a single-organization solution.
The modern workplace is different. As I write this article,
the world is hunkering down due to the COVID-19 pandemic,
and a lot of businesses are getting really hurt. Restaurants,
airlines, cruise ships—I can’t imagine the damage they’re
experiencing right now. But compared to similar previous
crises, I’m simply amazed at how unfazed the information
worker has been. They’re just working from home. They just
fire up Microsoft Teams or similar, and it’s business as usual.
In fact, I’d argue that working remotely, done right, is more
productive than sitting in an office, dealing with a commute
for two hours a day, paying for, and maintaining all that
real estate, etc.
All of this is made possible because companies today have
the confidence that they can fire up Microsoft Teams or their
browsers, or other applications, authenticate to the corpo-
rate network securely, and work. Although this act of join-
ing an online meeting or opening a document on SharePoint
may appear banal, there are two very important tenets at
play here:
• The organization is confident that this data is going
to be secure.
• The employee or contractor finds this experience easy
and convenient to use.
Although enabling such seamless productivity wherever you
are, or whoever you are, and whatever device you are using,
is the work of many technologies and many disciplines, a
key enabler here is modern authentication.
With that long-drawn out background, let me attempt to
define what I mean by modern authentication.
Legacy Authentication
Legacy authentication is what we used for our dinosaur ap-
plications—protocols such as NTLMv2, Kerberos, or similar,
that you’ve typically used on-premises, are legacy authen-
tication.
No, I’m not calling them extinct, they’re still our bread
and butter. And those dinosaurs are being brought into
the modern authentication world kicking and screaming,
whether they like it or not.
The reality is that organizations have a lot of investment in
these classic/legacy identities. And as much as we’d like to,
many critical products, including those that run in Azure or
AWS, don’t yet support modern identities properly. There’s
a lot of investment in bridging this gap. For instance, there
are things such as Azure AD connect that let you bridge on-
premises Active Directory identities to Azure AD identities,
or products such as SQL in Azure or Azure Storage, that are
making progress in working with modern identities.
A lot of work still needs to be done here. I don’t have rose-
colored glasses on, and I must assert that these legacy iden-
tities will be with us for quite a while.
Modern Authentication
Modern authentication refers to authentication established
by protocols that are better designed for Internet scale and
management. Although I realize that this is a very amor-
codemag.com
phous definition, there are some common tenets among all
of these authentication protocols.
• They allow you to separate the identity provider (IdP
for short) from the service provider (SP for short).
The IdP is the entity who accepts your credentials and
validates who you are. The SP, also sometimes referred
to as the relying party (or RP), is the one providing a
service. For instance, an IdP could be Azure AD, who
authenticates you. And an RP or SP can be a Share-
Point website that accepts such identities.
• They don’t require any direct communication between
the IdP and SP. No need to open firewall ports, etc.
Authentication is built on the backbone of trusts, pre-
established ahead of time using mechanisms such as
certificates. SharePoint trusts the Azure AD identity,
and homework has been done ahead of time to ensure
that the identity has not been tampered with.
• The process is almost always asynchronous and state-
less. If there’s need for state, it’s the responsibility of
the client. There are some borderline scenarios where
this isn’t possible, such as when you need instant sign
out. But in a vast majority of cases, the entire protocol is
stateless. And it’s asynchronous, which means that the
SP may not even know if the user will complete the au-
thentication process, and the IdP has no idea if the user
will ever go back to the SP with the provided identity.
These general characteristics are exhibited by numerous pro-
tocols, all of which are modern authentication. Some of these
protocols are WS-Fed, SAML, OAuth, and OpenID Connect.
Azure AD supports these protocols, and the various endpoints
can be seen by clicking the “endpoints” button on any app
page in the Azure Portal, as can be seen in Figure 1.
Let’s understand them one by one.
Figure 1: The various authentication endpoints
codemag.com
WS-Fed
WS-Federation, or WS-Fed for short, was an early entrant
into this space. The problem it was trying to solve was a
website, such as SharePoint, that needed authentication
services from an identity provider, such as Azure AD. Here’s
how it works at a high level.
The user opens a browser and visits the RP. Are you getting
used to these acronyms yet? RP is the relying party, the ap-
plication that relies on the IdP for authentication services.
RP, SP, same thing.
The user sends an anonymous request through their brows-
er.
The SP says, hey, you’re not authenticated, but here are the
kinds of identities I accept.
The user picks one of those choices; this process is called
Home Real Discovery or HRD. This can be automatic, or man-
ual, or any combination thereof.
The user is then redirected to the IdP. The user then pro-
vides their credentials, and they’re issued an SAML token.
Wait, SAML? Yes, keep reading!
This token is then presented to the SP, which is able to vali-
date it and extract the user’s identity and necessary claims
out of it.
At the end of this entire dance, a Web browser session is
established between the SP and the user. At no point did
the SP have to make a direct call to the IdP. And to continue
the session, well it’s just a browser session, so your usual
concepts apply.
Modern Authentication 9

SAML
SAML, well if I described the flow step by step, you’d say,
hey this is just like WS-Fed. And indeed, in many ways it is.
But there are a few additional points involved.
First, SAML works with SAML 2.0 tokens. Wait, isn’t this con-
fusing? Is SAML a protocol or a token? It’s both. WS Fed uses
SAML 1x tokens, and SAML protocol uses SAML 2x tokens.
Secondly, SAML gives you a lot more flexibility around who
starts the whole flow, what claims are needed for the ap-
plication to work, and how they are encrypted.
Finally, SAML is newer, so it was back-fitted into scenarios
it was never intended for, such as SAML to JWT token trans-
formations or vice versa, or making SAML work on mobile
platforms.
As of today, SAML continues to be a very important protocol
SPONSORED SIDEBAR: and will remain so for many years to come.
Are Your Legacy Apps
Stuck in the Past? OAuth
OAuth, isn’t an authentication protocol. It’s a delegation
Need FREE advice on protocol.
migrating yesterday’s
legacy applications to
Have you ever landed on a site where someone published
today’s modern platforms?
an article so absurd that you were compelled to comment?
Take advantage of CODE
Around the comment box, it says that you need to log-in
Consulting’s years of
experience migrating first. And some of the options include logging in using your
legacy applications by Facebook, Twitter, or Google accounts.
contacting us today to
schedule your free hour Here’s how that works. Let’s say that you pick Facebook. The
of CODE consulting with site then redirects you to Facebook, where you provide your
our expert consultants. credentials. And then you’re redirected back to the site (the
Get answers! No strings. SP), which now knows who you are and lets you log in.
No commitment.
For more information Here’s what’s really going on. You’re redirected to Facebook,
visit www.codemag.com/ not to authenticate yourself, but for the application to do
consulting or email us certain things on your behalf. But who are “you” in that
at info@codemag.com. “your behalf” part? Well, that’s where you need to authen-
ticate yourself. And what are those “certain” things? It’s
things like accessing your name and email address. This al-
lows the application to know who you are, so it sort of works
like an authentication protocol, even though it was never
intended to be one.
In that sense, OAuth is a pseudo-authentication protocol.
In a sense, OAuth is a pseudo-
authentication protocol.
The problem with OAuth is, of course, first that it’s such a
loose standard that everyone has chosen to implement it
however it fits them. This has caused a real confusion and
interoperability issue.
The second problem is that it was promoted heavily by so-
cial media companies. Their intent wasn’t to provide a social
service, but to force you to overshare. So, those “certain
things” that you’re allowing the application to do on your
10 Modern Authentication
behalf frequently go way beyond “access my name and email
address.”
If you pay close attention, just to leave a comment on an ab-
surd incendiary article on the Internet, you are required to:
• Give your name and email address
• Give your “friends” list
• Let them access your information at any time
• Allow them to post on your behalf
• Draw your blood (just kidding!)
Clearly, there has been abuse. And this has forced the hand
of many of these companies to limit the abuse.
OpenID Connect
OpenID Connect is a more formalized version of OAuth,
where the world agreed to agree on certain minimum stan-
dards that protocols must follow for each major platform.
They agreed on a certain basic set of tokens, and some basic
claims that must be present in those tokens that the world
can rely on to know the user’s identity.
As of today, OpenID Connect is perhaps the main protocol
that all new development is being done under. Standards
are powerful and it makes a lot of sense to get behind the
standards. Azure AD v2 flows, for instance, are OpenID
Connect compliant. The main thrust of this article will be
OpenID Connect.
There are three main things you need to know about OpenID
Connect:
• Tokens
• Public client vs. confidential client
• Grant types or flows
Tokens
In OpenID Connect, you perform token exchange. There are
three kinds of tokens you should know of. Before I mention
what kinds of tokens, I should mention that the most common
format you’ll see for these tokens is the JWT format. Although
JWT isn’t a hard and fast requirement, it’s the most common
format you’ll run across. JWT is simply three JSON strings en-
coded in base64 format with the “.” character between them.
The first part is the header, the second is the body, and the
third is the signature. When an IdP issues a JWT token, it signs
it with its private key, and using its public key, the consumer
of that token can ensure that the token hasn’t been tampered
with. It’s as simple as that. Oh yes, one other very important
thing, these tokens are sent over various protocols and must
not be leaked. The world has agreed that end-to-end encryp-
tion, such as HTTPS/TLS, is a 100% hard-and-fast requirement
for these tokens to remain secure, so please keep that in mind.
Given that, there are three different tokens to know of: ID
tokens, access tokens, and refresh tokens.
An ID token is the user’s identity. An ID token must not contain
any authorization information—it’s merely an identifier for the
user. When you sign into a website, you’re given an ID token.
That’s how the website is able to ascertain who you are.
The second token you must know of is an access token. This
token lets you authenticate yourself to a Web API. You put
codemag.com
this token in the Authorization header of your request,
which usually looks like Bearer goobledoogook, that the
API you’re calling can verify and then grant you access. Be-
cause losing an access token pretty much means losing the
keys to whatever that access token is good for, access to-
kens are usually short-lived (30 minutes to one hour, etc.).
It’s difficult, although not impossible, to centrally revoke
access tokens. There’s a specific claim in an access token
called the jti claim, which is a unique identifier for the jwt
token. Using this claim, you can effectively block compro-
mised access tokens also. Now, you may be wondering, if
you have authored a Web api, how do you validate an access
token?
Finally, a refresh token is a long-lived token that you use to
get new access tokens. You usually get an access token for
a certain resource—also known as an audience. Only clients
that can safely secure refresh tokens should use refresh to-
kens. This is why a refresh token isn’t included by default.
You have to ask for it using a specific scope called “offline_
access.” I haven’t talked about scopes yet, so keep this in
the back of your mind for now.
Validating Tokens
Validating a token is an important part of this puzzle. A
refresh token is something you just store and use as a key to
unlock future access tokens. You do need to validate ID to-
kens and access tokens. How can you trust that a token pre-
sented by a user or application is something you can trust?
Well, there are two kinds of tokens: opaque and not opaque.
Opaque tokens are, by reference, tokens, i.e., you’re given
a random string and you’re required to call the IdP every
time you wish to validate a token. The advantage here is in-
stant central sign-out and revocation, and possibly smaller
token size. The disadvantage is much higher network traffic.
But, because you’re submitting the token to the IdP at every
step, the validation of the token isn’t something you need
to worry about.
On the other hand, a non-opaque token requires you to
put in some work to validate it. Note that most SDKs have
implemented this for you, but it still helps to know how it
works. As I mentioned, the incoming token has three parts.
The first step is to decode the token and validate its sig-
nature. To validate the signature, you grab the jwks_uri
from the well-known configuration of the OpenID Connect
provider. What? Did I just speak out a bunch of jargon?
Sorry! In reality it’s quite simple. Every IdP exposes a well-
known configuration endpoint. For instance, for Azure AD,
the endpoint looks like this: https://login.microsoftonline.
com/{tenant}/v2.0/.well-known/openid-configuration. Or
sometimes you may have app-specific configuration URIs,
like this: https://login.microsoftonline.com/{tenant}/
v2.0/.well-known/openid-configuration?appId=<appId>.
This URL is anonymous and it returns a simple JSON object.
There will be a property called jwks_uri, which contains the
public keys for signature validation.
Lesson learned. For your SP to validate tokens, it needs out-
bound connectivity to the well-known configuration end-
point URI and the jwks_uri. You can’t validate AAD tokens in
an air-gapped environment.
Once you’ve validated the signature, you can now unpack
the token. This simply means deserializing the token. But
codemag.com
remember, as a client application, you must never unpack
the tokens. You must treat tokens as opaque. This is because
at any point, the IdP can choose to change their implemen-
tation to encrypt the tokens. This will make it effectively im-
possible to unpack the token on the client side. If you build
your application around unpacking access tokens, you’re
setting yourself up with a time bomb.
If you build your application
around unpacking access tokens,
you’re setting yourself up with
a time bomb.
On the server, you validate the token by verifying the value
of the various claims. For instance, is the token still valid
from a time perspective, which is a combination of three
claims: nbf (not before), iat (issued at), and exp (expira-
tion). Whether you are the valid audience for this claim is in
the “aud” claim. Who issued this claim is in the “iss” claim.
And so on.
Public Client vs. Confidential Clients
Many OpenID Connect flows require you to present a secret.
The secret may be a password, or it may be a certificate. A
public client is simply an application that runs on a platform
that you can’t trust. For instance, a browser, or a mobile app
deployed on a phone that you have no control of, or a Win-
dows desktop app, etc. These applications can’t be trusted
to hold a secret.
The contrast to this is a Web application, which can store
a secret securely on the disk (or elsewhere) on the server.
Because this secret never leaves the server, you can trust
that it’s never compromised. Such an application is called a
confidential client.
This is an important distinction because in Azure AD, public
clients are disabled by default. You have to explicitly en-
able them for you to request access tokens without a secret.
This can be seen in Figure 2.
Flows or Grant Types
Finally, you need to understand the concept of grant types.
OpenID Connect isn’t a single protocol. It’s a family of ever-
growing protocols. Depending upon the kind of application
you’re authoring, you may want to pick the appropriate
grant type. Here are some common grant types you need
to know about.
Client Credential Flow is when you care about a headless
process authenticating, where you have no opportunity
to present a user interface. This is a simple POST request,
where you specify what you’re requesting a token for, also
known as the audience URI. You specify who you are, which
is the client ID, also known as App ID, and you provide a cli-
ent secret. The caller of the client credential flow has no op-
portunity to provide an inline consent, so all consents must
already be in place. Also, the caller of the client credential
flow in Azure AD can be either an application or a service
principal. When acting as a service principal, you simply
provide the service principal username and password, which
Modern Authentication 11
 Figure 2: Treating the application as a public client
Listing 1: Client Credential Flow
POST /{tenant}/oauth2/v2.0/token HTTP/1.1
Host: login.microsoftonline.com
Content-Type: application/x-www-form-urlencoded
client_id=<guid>
&scope=https%3A%2F%2Fgraph.microsoft.com%2F.default
&client_secret=<secret>
&grant_type=client_credentials
Listing 2: Request for an auth-code
https://login.microsoftonline.com/
{tenant}/oauth2/v2.0/authorize?
client_id=<clientid>
&response_type=code
&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F
&scope=openid%20offline_access%20https%3A%2F%2Fgraph.microsoft.com%2Fmail.read
&state=12345
then also allows you to do interesting things, such as roles
on headless processes. An important note about client cre-
dential flow: the access token returned is valid for an hour,
which is the default, but has configurable duration in Azure
AD. However, there’s no refresh token. To get a new access
token, you simply repeat the request. The request to get
an access token using client credential flow can be seen in
Listing 1. For the eagle-eyed among you, the scope I’ve re-
quested here is https://graph.microsoft.com/.default. This
will give me a token for all scopes that have been consented
to. You’re required to use the ./default shortcut in CC flow.
Resource Owner Password Credentials grant flow, or ROPC,
is where you play a username/password to an endpoint.
Long story short, try not to use it. You have to use it when
you must have 100% control on the UX for sign in, but the
downsides far outweigh the upsides. Here are some reasons
why you should avoid using ROPC:
• ROPC is very hacker-friendly, and you’re taking on a
big responsibility for securing a much larger attack
surface now. For instance, it’s now your responsibility
to protect against brute force, password spray, dic-
tionary attacks, etc.
• You’re between a rock and a hard place—the rock
being taking responsibility to secure the user’s cre-
dentials on a public client and the hard place being
prompting the user for frequent sign ins. Guess what
most people do then? Store credentials in public cli-
ent, which is a bad idea!!!
12 Modern Authentication
• And what if the application is cloned? With ROPC,
you’re opening your users to be phishable. You have
no idea if the application is closed or not.
• Performance will be bad because you’ll have hashing
encryption of credentials.
• Your server can’t distinguish the user from the app.
• Credentials are exposed to the client app. Credentials
should never be anywhere else except the user and
the server. Frankly, when you can help it, not even the
user. Passwordless is what you should strive for.
• The client can now request any scope without an okay
from the user. So, imagine that you can now access
the calendar app without the user knowing you’re ac-
cessing the calendar.
• There’s no support for federation.
• There’s no support for MFA.
• Advanced threat protection and conditional access be-
come less useful.
• There’s no SSO.
• It’s against the OAuth best practice guidelines
(RFC8252)
Long story short, if someone asks you to use ROPC, run like
hell. Don’t do it.
Here’s an interesting side note. Did you know that the Pow-
erShell commandlet Connect-MSOLservice, when logging in
using saved credentials, uses ROPC behind the scenes? It’s a
good thing they deprecated the MSOnline module.
Authorization Code Grant Flow is a pretty good protocol.
It’s perfect for signing into a website and requesting ac-
cess tokens for secure Web APIs. It works in two steps. First,
you redirect the user to the authorization endpoint, where
the user provides their credentials and authenticates them-
selves. Hold on! I thought authorization and authentication
were separate concepts? Yes, they are, and this nomencla-
ture can be off putting. But remember, an authorization step
is when you have a chance of showing a user interface, and
there is where the user authorizes that such and such appli-
cation is allowed to do such and such actions. This process
is called consent. So the name, authorization endpoint,
makes sense. The request to the authorization endpoint
looks like Listing 2. It’s worth mentioning that requesting
the auth-code is just one possible mechanism here.
There are some interesting things going on in Listing 2.
Let’s try to understand them. First of all, it’s a simple GET
request. The request must include things like who are you
(client ID), what you’re asking for access to (scope), and,
codemag.com
optionally, a state. State is simply passed back to you at the
end of a success or failure so you can remember the state
at the origination of the authentication request. This means
that if the user landed on a deep link in your application,
the state is a perfect place to store that deep link.
Of special interest is the redirect URI. The redirect URI is
where the IdP, in this case Azure AD, returns the auth code.
This URI must be something you control and trust. It must
be HTTPS. A common mistake is to leave straggling redirect
URIs in your app, such as something.azurewebsites.net. Re-
member, when you deprovision that azurewebsites.net URL,
someone else can claim it, and hijack your application, be-
cause you forgot to remove that redirect URI. So keep that
redirect URI list clean and at the bare minimum of what you
absolutely need.
This request, if successful, returns an auth code, which is
simply in the query string in the “code” parameter. Now you
can use this one-time-use-auth-code to request an access
token. The request to get an access token can be seen in
Listing 3.
Device code flow is where the device that’s authenticating
has a very limited UI. It simply shows you a code and you’re
required to open your browser on a laptop, visit a specific
URL, enter that code, and finish the authentication process.
In the meantime, that device with the limited UI polls an
endpoint on the IdP, waiting for you to finish the authenti-
cation process, at the end of which it gets the access token
and optionally a refresh token.
There are, of course, additional details and flows to talk
about, but like any other topic, identity is a universe that
you can keep diving deeper into. I’ll stop here for now.
Scopes and Consents
I couldn’t finish without briefly mentioning this important
concept. Scopes is how you shape an API, or how a client
requests certain claims. When I request the OpenID scope,
I’m asking for the bare minimum claims that OpenID sup-
ports. But when I request the profile scope, I’m asking for
the user’s name, email address, etc. Similarly, when I ask
for the offline_access scope, I’m asking for a refresh token.

The request for an access token, if successful, returns an ac-
cess token to all the scopes you have previously consented
to. There are some important things to know about the re-
quest you see in Listing 3.
First, that it’s a POST request played to the token endpoint.
If you asked for a refresh token in scopes, you can also play
that refresh token to this endpoint to get new access tokens
without asking the user to sign in again. You request a re-
fresh token using the scope offline_access. Effectively, this
means that the user allows you to access functionality on
their behalf, when offline. That is, the user doesn’t need to
sign in every time you ask for an access token. A common
poor architecture is to store access tokens on durable stor-
age, or to reuse refresh tokens across multiple nodes via
durable storage, such as databases. This is a terrible idea
and breaks the concept of non-repudiation.
Scopes also allow me to request access tokens, where the
scp claim of the scope includes the audience against which
Listing 3: Asking for an access token
POST /{tenant}/oauth2/v2.0/token HTTP/1.1
Host: https://login.microsoftonline.com
Content-Type: application/x-www-form-urlencoded
client_id=<appid>
&scope=https%3A%2F%2Fgraph.microsoft.com%2Fmail.read
&code=<authcode>
&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F
&grant_type=authorization_code
&client_secret=<secret>

The second thing you should note in Listing 3 is that the

auth code is a one-time-use code. This is for security rea-
sons. In this code, the redirect URI must match, down to
the trailing slash, the same redirect URI you used to request
the auth code.

The final thing to note about Listing 3 is that the client_se-

cret you need to provide is only for confidential client appli-
cations. You can toggle the application to be a public client
and not require the client secret to be passed.

Next up is the Implicit Grant, which is suitable for Java

Script SPAs. Implicit grant isn’t recommended anymore, but
where you can’t control the back-end, such as on a Share-
Point online site, and you must make Web service calls to a
CORS endpoint from a JavaScript SPA, implicit grant is your
only choice.

PKCE, or proof key for code exchange is where you supply a

code at the beginning of your auth flow. When requesting
access tokens, you must supply the same code. This miti-
gates many of the downsides of implicit grant and is com-
monly used on mobile applications. Work is underway on
numerous identity providers to support PKCE on JavaScript
SPAs as well. Figure 3: Granting consent during login

codemag.com Modern Authentication 13

 Figure 4: Granting admin consent via the portal.

my access token must work. For instance, a valid scope is
https://graph.microsoft.com/user.read. When I ask for this
scope, I’m asking for an access token that has the ability to
read the currently logged-in user’s profile on an API called
Microsoft Graph.
This means that the user must allow the act of reading the
user’s profile being read. This allowing act is called granting
consent. Consent can be granted either during log in, by the
user, as can be seen in Figure 3, or by an administrator dur-
ing log in, ahead of time via an API, or via the Azure Portal,
as can be seen in Figure 4.
Some specific scopes require an administrator consent. For
instance, you wouldn’t want some random user in your or-
ganization to grant the permission to register new apps,
right?

Summary
ADVERTISERS INDEX This article is loaded with information, so if you read this
far, congratulations. I don’t pat myself on the back often,
but the information in this article is very hard to find in a
Advertisers Index succinct, accurate, and easy to understand manner. I wish
this basic information about identity was common knowl-
CODE Consulting edge to everyone. It would really make many tasks so much
www.codemag.com/consulting 76 simpler.

CODE Framework Authenticating a user to your application is about as basic a

www.codemag.com/framework 27 requirement as it gets. Hardly any application doesn’t have
CODE Legacy to deal with it. It’s appalling how confusing it can be, given
www.codemag.com/legacy 7 the complexities of the protocols and myriad platforms that
make it so much more complex. There are some companies
CODE Magazine that have done a stellar job at making this dev story easier,
www.codemag.com/subscribe 71, 75 but you still need to know the concepts.
CODE Mobile
I hope the concepts in this article help you get further
www.codemag.com/mobile 35
Advertising Sales: ahead in solving identity challenges properly. And when ar-
Tammy Ferguson CODE Staffing ticles talk about IdP, SP, RP, SAML, redirect URI, and auth
832-717-4445 ext 26
tammy@codemag.com
www.codemag.com/staffing 15 code, you’ll be well equipped to know what they are talking
about.
DEVintersection Conference
www.DEVintersection.com 2
Until next time, code securely.
dtSearch
www.dtSearch.com 25  Sahil Malik

LEAD Technologies
www.leadtools.com 5

This listing is provided as a courtesy

to our readers and advertisers.
The publisher assumes no responsibi-
lity for errors or omissions.

14 Modern Authentication codemag.com

 ONLINE QUICK ID 2005031
Use the MVVM Design Pattern
in MVC Core: Part 1
This article presents how to use the Model-View-View-Model (MVVM) design pattern in MVC Core applications. The MVVM
approach has long been used in WPF applications but hasn’t been as prevalent in MVC or MVC Core applications. This
article illustrates how using MVVM in MVC makes your applications even more reusable, testable, and maintainable.
Paul D. Sheriff
http://www.pdsa.com
Paul has been in the IT
industry over 33 years.
In that time, he has suc-
cessfully assisted hundreds
of companies to architect
software applications to
solve their toughest business
problems. Paul has been
a teacher and mentor
through various mediums
such as video courses,
blogs, articles, and speaking
engagements at user
groups and conferences
around the world.
Paul has 23 courses in the
www.pluralsight.com library
(http://www.pluralsight.
com/author/paul-sheriff)
on topics ranging from
JavaScript, Angular, MVC,
WPF, XML, jQuery, and
Bootstrap. Contact Paul
at psheriff@pdsa.com.
16 Use the MVVM Design Pattern in MVC Core: Part 1
You’re going to be guided step-by-step building an MVC
Core application using the Entity Framework (EF) and a view
model class to display and search for product data.
The Model-View-View-Model
Approach
The reasons programmers are adopting the MVVM design
pattern are the same reasons programmers adopted Object
Oriented Programming (OOP) over 30 years ago: separation
of concerns, reusability, maintainability, and testability.
Wrapping the logic of your application into small, stand-
alone classes allows you to reuse those classes in many dif-
ferent applications. Maintaining logic in classes allows you
to fix any bugs in just one place and any other classes us-
ing that class automatically get the fix. When you don’t use
global variables in an application, testing your application
becomes much simpler. Wrapping all variables and logic that
operates upon those variables into one class allows you to
create a set of tests to check each property and method in
the class quickly and easily.
Any other classes using the class
automatically get the fix.
The key to MVVM in MVC is moving logic out of the MVC con-
troller and into a view model class that contains proper-
ties that you can bind to the user interface. The controller
should only call a method in your view model, and periodi-
cally set a property or two prior to calling that method. Nor-
mally, properties that don’t need to be set as view model
properties will be bound to controls on your user interface.
To ensure reusability of your view model classes, don’t use
any ASP.NET objects such as Session, ViewBag, TempData,
etc. in your view model.
Why Use MVVM in MVC
When using MVVM in WPF, you typically have a view model
class for each screen. In MVC, you do the same by having
one view model class per page. Of course, there can be ex-
ceptions, but this separation keeps your controllers and
view model classes small and focused. The controller’s GET
method creates an instance of the view model (or has one
injected) and passes it as the model to the page. The page
binds to properties on the view model as HTML input or
hidden elements. These bound properties may come from
an instance of one of your EF entity classes, or additional
properties that are specific to that page. If you have input
elements on the page, the POST method in the controller
accepts the view model as its parameter and all the bound
properties are filled in automatically.
From within the controller, call a method in the view model
to get or save data, or any other command you need. Your
controller methods are thus kept small because the code to
load the page, and to save the data from the page, is all
within the view model. Data binding takes care of all the
rest.
Another big advantage of using a view model class is that
unit testing is easier. There’s no need to create an instance
of, or test, any methods in the controller. If all the control-
ler is doing is calling methods in the view model, then you
just need to test the view model.
Many of us have been developing for many years and we’ve
seen technologies come and go. However, the basics of
how you create classes with methods and properties hasn’t
changed. If you keep any technology-specific objects such
as Session, ViewData, TempData, etc., out of your view mod-
els, then moving from one technology to another becomes
easier. For example, I’ve had many clients create an MVC
application, then decide that they want to create a part of
that application in WPF for their data-entry people. I only
had to create the UI in WPF and simply reuse the view model
classes that had already been tested.
The Tools You Need
If you follow along with the steps in this article, you’re
going to build an MVC Core application. The application
is going to show you how to interact with a product table
in a SQL Server database. I’m going to use Visual Studio
Code, MVC Core, C#, the Entity Framework and the Adven-
ture Works Lite sample database for SQL Server. You can get
the Adventure Works Lite database on my GitHub at https://
github.com/PaulDSheriff/AdventureWorksLT.
In the GitHub repository there’s a file named Adventure-
WorksLT.bak that you can use to restore the SQL Server
database. If you’re unable to restore the backup, there’s
a SalesLT-Product.sql file that you can use to create the
product table with data in any SQL Server database.
The Overall Project
For this article, you’re going to be creating the four projects
shown in Figure 1. This architecture is one that I’ve found
to be flexible, reusable, and testable. The four projects are
the MVC Core application, and one class library each for your
view model classes, data layer classes, and entity classes.
codemag.com
Figure 1: A typical project structure for your .NET applications

For many of you, the only thing that might be a little differ-
ent is the addition of the view model classes. The focus of
this article is to show how to simplify your controllers and
move most of your logic into view model classes. A second-
ary focus is to illustrate how to build a multi-layered project
in Visual Studio Code with .NET Core.
In this article, you’re going to be using the SalesLT.Product
table in the AdventureWorksLT database. You’ll first learn to
build an HTML table to list all products in this table. Next,
you add search capabilities so you can search on one or mul-
tiple columns. The logic to build the listing and searching is
created in the view model class instead of in the controller.
The ProductController class (1a in Figure 1) has both an
instance of a ProductViewModel class (2a) and an imple-
mentation of an IProductRepository (3b) injected into it by
MVC Core. The implementation is a ProductRepository class
(3c), which also has an instance of the AdvWorksDbContext
class (3a) injected into it by MVC Core.
The ProductRepository is passed into the constructor of the
ProductViewModel class by the DI service in MVC Core. A
method named HandleRequest() is called on the view model
to retrieve the data from the Product table using the Entity
Framework, which is implemented in the ProductRepository
class. Each row of data in the Product table is represented
by the entity class Product (4a). A generic list of Product
objects is placed into a Products property of the Product-
ViewModel. This view model class is used as the model to the
Products page to create the HTML table.
For example, I’m going to create my project under the D:\
Samples folder. Once I open a terminal window, I type in
the command:
CD D:\Samples
Once you’re in your development folder, create a new folder
named MVVMSample using the MKDIR (or the MD) com-
mand:
MKDIR MVVMSample
Change to the new directory using the CD command in the
terminal window, as shown in the command below.
CD MVVMSample
Create a new MVC Core project in the MVVMSample folder by
executing the dotnet new mvc command.
dotnet new mvc
Once the command has run, open the folder in VS Code by
clicking the File > Open Folder… menu. A few seconds after
opening the folder, you should be prompted with a dialog
that looks like Figure 2. Click on the Yes button to add the
required assets to the new project.

Create the MVC Core Project

Let’s create our MVC Core project using Visual Studio Code.
Startup Visual Studio Code and open a terminal window by
clicking the Terminal > New Terminal menu. Navigate to the
folder where you normally place your development projects. Figure 2: Add required assets to the project

codemag.com Use the MVVM Design Pattern in MVC Core: Part 1 17

 Listing 1: The Product class maps the fields in the Product table to properties in this class
using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace MVVMEntityLayer
{ Add Data Annotations
[Table("Product", Schema ="SalesLT")]
public partial class Product
{ work, you need some data annotation attribute classes.
public int? ProductID { get; set; }
public string Name { get; set; }
public string ProductNumber { get; set; }
public string Color { get; set; }
[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal StandardCost { get; set; }
[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal ListPrice { get; set; }
public string Size { get; set; }
[Column(TypeName = "decimal(8, 2)")]
public decimal? Weight { get; set; }
[DataType(DataType.Date)]
public DateTime SellStartDate { get; set; }
[DataType(DataType.Date)]
public DateTime? SellEndDate { get; set; }
[DataType(DataType.Date)]
public DateTime? DiscontinuedDate { get; set; }
} currently in the file and replace it with the code in Listing
} 1. Most of the code in this Product class should be familiar
Try It Out
To ensure that everything is created correctly, click the Run >
Start Debugging menu and a Web page should be displayed
in your default browser.
Create the Entity Layer Project
Now that you have the MVC project created, start building
the rest of your projects beginning with the Entity project.
In this project is where you place all your classes that map
to each table in your database. This project should be a sim-
ple class library with as few references to DLLs as possible.
If you keep the references to a minimum, you can reuse your
Entity DLL in other projects. Although you’re going to map
the Product entity in this article to a table in a SQL Server
database, by keeping your entity classes in a separate DLL,
you can also map Product data from an XML or JSON file to
the same Product entity class.
To create the Entity project, open a terminal window by
clicking on the Terminal > New Terminal menu. Go to your
development directory (in my case that was D:\Samples).
Type in the following commands to create a new folder
named MVVMEntityLayer:
MD MVVMEntityLayer
CD MVVMEntityLayer
dotnet new classlib
The dotnet new classlib command creates a class library
project with the minimum number of references to .NET Core
libraries. Now that you’ve created this new project, add it
to your Visual Studio Code workspace by clicking the File >
Add Folder to Workspace… menu. Select the MVVMEntity-
Layer folder and click on the Add button. You should see the
MVVMEntityLayer project added to your VS Code workspace.
18 Use the MVVM Design Pattern in MVC Core: Part 1
Save this workspace by clicking on the File > Save Work-
space As… menu. Set the name to MVVMSampleWS and
place it into the MVVMSample folder. In the future, you can
now double-click on this MVVMSampleWS.code-workspace
file to open your solution.
In order to map a class to a table using the Entity Frame-
These data annotation classes are not a part of the default
.NET Core library, so you need to add a library. Click on the
Terminal > New Terminal menu and you should be shown
options to open the new terminal window in either the
MVVMSample or the MVVMEntityLayer folder. Select the
MVVMEntityLayer folder and type in the following command
to add the appropriate DLL so you can use the data annota-
tion attributes.
dotnet add package
Microsoft.AspNetCore.Mvc.DataAnnotations
Create the Product Class
Within the MVVMEntityLayer, project rename the Class1.cs
file to Product.cs. Open the Product.cs file, remove the code
to you. The [Table()] attribute is used to inform the Entity
Framework of the name of the table and schema in which
to find the table in the database. Add the [Column()] at-
tribute to any decimal values so the precision and scale can
be specified. Add the [DataType()] attribute to any fields
to be displayed as currency or date values. MVC Core reads
the [DataType()] attribute when using the DisplayFor()
method and if it’s currency, displays the value in the correct
format on the Web page.
Reference Entity Layer from the MVVM Sample Project
If you’re used to using Visual Studio, you know that in order
to use classes from another project, you must include a ref-
erence to that DLL. It’s no different in VS Code, but to set
the reference, you need to type in a command. Click on the
Terminal > New Terminal menu and select the MVVMSample
folder. Set a reference to the MVVMEntityLayer project using
the following command.
dotnet add . reference
../MVVMEntityLayer/MVVMEntityLayer.csproj
Try It Out
To ensure that you’ve typed in everything correctly, run
a build task to compile the projects. Because you have a
reference from the MVVMSample to the MVVMEntityLayer, if
you run a build task on the MVVMSample project, it builds
the MVVMEntityLayer project as well. Select the Terminal >
Run Build Task… menu and select the MVVMSample project.
Watch the output in the terminal window and you should
see that it compiles both projects.
Create the Data Layer Project
The next project to create is the Data Layer project in which
you place all your repository classes. These repository class-
es interact with the tables in your database through the
Entity Framework. Each repository class should implement
an interface. Having both a class and an interface allows
you to use DI to inject the concrete implementation of the
codemag.com
interface. This is advantageous when it comes to testing
time. You can swap out the concrete implementation, but
the rest of your code stays the same.
To create this project, open a terminal by clicking on the
Terminal > New Terminal menu. Go to your development
directory (in my case, that was D:\Samples). Type in the
following commands to create a new folder named MVVM-
DataLayer.
MD MVVMDataLayer
CD MVVMDataLayer
dotnet new classlib
Add this new project to your Visual Studio Code workspace,
by clicking the File > Add Folder to Workspace… menu.
Select the MVVMDataLayer folder and click on the Add but-
ton. You should now see the MVVMDataLayer project added
to your VS Code workspace. Save your workspace by clicking
on the File > Save menu. You can go ahead and delete the
Class1.cs file, as you won’t be needing that.
Add Entity Framework
For this article, you’re going to use the Entity Framework for
the concrete implementation of your repository classes. In
order to use the Entity Framework in the .NET Core applica-
tion, you need to add a package to the project. Go back to
the terminal window that should still be open in the MVVM-
DataLayer folder. Type in the following command to add the
Entity Framework to the data layer project.
dotnet add package
Microsoft.EntityFrameworkCore.SqlServer
Add Some Folders
As you’re going to have different types of files in this proj-
ect, add three folders in which to store these different files
named Models, RepositoryClasses, and RepositoryInter-
faces. In the Models folder, place at least one class that
inherits from the Entity Framework’s DbContext class. You’re
going to have one repository class for each table that you
need to interact with in your database. Place these classes
in the RepositoryClasses folder. Into the RepositoryInter-
faces folder is where you place the corresponding interface
for each repository class.
Reference the Entity Layer
Because your data layer will be reading data from the Prod-
uct table, you’re going to need access to the Product class
that you created earlier. Add a reference to the Entity Layer
project you created earlier by opening a terminal window in
the MVVMDataLayer folder and typing the following com-
mand:
dotnet add . reference
../MVVMEntityLayer/MVVMEntityLayer.csproj
Add a DbContext Class
For your simple article, you’re just going to need a single
class to inherit from the Entity Framework’s DbContext class.
Add a new file in the Models folder named AdvWorksDbCon-
text.cs. Add the code shown in Listing 2 to this new file.
The AdvWorksDbContext class is a standard implementation
of an EF DbContext object. The constructor is passed an in-
stance of a DbContextOptions object used to pass in any op-
codemag.com
tions such as a connection string. A single DbSet<Product>
property is created to hold the collection of products that
are read from the SalesLT.Product table.
Add Product Interface Class
Our repository class needs a single method named Get()
used to retrieve all records from the Product table. Before
creating the repository class, add an interface with the con-
tract for this Get() method. Create a new file in the Reposi-
toryInterfaces folder named IProductRepository.cs. Add
the code shown in the code snippet below.
using System.Collections.Generic;
using MVVMEntityLayer;
namespace MVVMDataLayer
{
public interface IProductRepository
{
List<Product> Get();
}
}
Add Product Repository Class
In the RepositoryClasses folder, add a new file named Pro-
ductRepository.cs. Enter the code shown in Listing 3 into
the new file you created. This class needs to implement the
Get() method from the IProductRepository interface. In ad-
dition, a private property of the type AdvWorksDbContext
should be added. This private property is set from the con-
structor of this class. When a ProductRepository class is cre-
ated by the DI service, an instance of the AdvWorksDbCon-
text also created by the DI service is injected into this class.
Reference Data Layer from MVVM Sample Project
Because the DI system is going to create an instance of our
ProductRespository and the AdvWorksDbContext, you’re go-
ing to need the data layer project referenced from the MVC
Core project. Click on the Terminal > New Terminal menu
and select the MVVMSample folder. Set a reference to the
MVVMDataLayer project using the following command.
dotnet add . reference
../MVVMDataLayer/MVVMDataLayer.csproj
Try It Out
To ensure that you’ve typed in everything correctly, run a
build task to compile the projects. Because you now have
Listing 2: Add a class that inherits from DbContext to access your database tables
using Microsoft.EntityFrameworkCore;
using MVVMEntityLayer;
namespace MVVMDataLayer
{
public partial class AdvWorksDbContext
: DbContext
{
public AdvWorksDbContext(
DbContextOptions<AdvWorksDbContext> options)
: base(options)
{
}
public virtual DbSet<Product>
Products { get; set; }
}
}
Use the MVVM Design Pattern in MVC Core: Part 1 19
 Listing 3: Each repository class implements an interface and receives a DbContext object in its constructor
using System; DbContext = context;
using System.Collections.Generic; }
using System.Linq;
using MVVMEntityLayer; private AdvWorksDbContext
DbContext { get; set; }
namespace MVVMDataLayer
{ public List<Product> Get()
public class ProductRepository {
: IProductRepository return DbContext.Products.ToList();
{ }
public ProductRepository( }
AdvWorksDbContext context) }
{
a reference from the MVVMSample to both the MVVMEntity-
Layer and the MVVMDataLayer projects, all three projects
are built. Select the Terminal > Run Build Task… menu and
select the MVVMSample project. Watch the output in the ter-
minal window and you should see that it compiles all three
projects.
Create View Model Project
Now that you’ve created the Product entity class and the
data layer to get a collection of Product objects, you can
build your view model class. So far, you may be thinking,
why do I need a view model class? I have everything I need
in my Product and my ProductRepository classes. The answer
is because you want to cut down the amount of code you
need to write in your controller, and you’re going to need
additional properties other than what is in your entity class.
I’m sure you’ve found that many times on your Web pages,
you need additional properties to keep track of the page
state. This state is keeping track of what page you’re on
when paging through a large table. Or what sort column
you’re sorted upon. If you’re in an edit page, you might
need to keep track of whether the user requested to do an
add or an edit of the record. All of this additional data needs
Figure 3: A view model provides the properties from the model classes, but also provides
additional UI properties.
20 Use the MVVM Design Pattern in MVC Core: Part 1
to be kept track of, so where do you put it? You don’t want
to add it to your entity class as you then need to add ad-
ditional attributes to mark them as not mapped to the table.
Plus, you’re going to need these properties on many differ-
ent pages, and you don’t want to copy and paste them from
one entity class to another.
This is where a view model class comes in. A view model
class holds this additional state data along with an instance
of your entity class (Figure 3). Later in this article series,
you’re going to add searching, paging, sorting, and CRUD
logic to the product Web page. At that time, you’re going to
start adding additional properties.
Create your view model project by opening a terminal win-
dow. Go to your development directory and type in the fol-
lowing commands to create a new folder named MVVMView-
ModelLayer.
MD MVVMViewModelLayer
CD MVVMViewModelLayer
dotnet new classlib
Now that you’ve created this new project, add it to your Vi-
sual Studio Code workspace, by clicking on the File > Add
Folder to Workspace… menu. Select the MVVMViewModel-
Layer folder and click on the Add button. You should now
see the MVVMViewModelLayer project added to your VS Code
workspace. Save your workspace by clicking on the File >
Save menu.
Reference the Entity and Data Layers
Your view model class needs access to the Product and Pro-
ductRepository classes you created earlier. Add a reference
to the entity layer and data layer projects you created ear-
lier by opening a terminal window in the MVVMViewModel-
Layer folder and typing the following commands:
dotnet add . reference
../MVVMEntityLayer/MVVMEntityLayer.csproj
dotnet add . reference
../MVVMDataLayer/MVVMDataLayer.csproj
Create Product View Model Class
In the view model layer project, rename the Class1.cs file
to ProductViewModel.cs and delete all the code within this
file. Add the code shown in Listing 4 to create your Pro-
ductViewModel class. You can see two constructors on this
class. You need a parameter-less constructor so MVC can
codemag.com
 Listing 4: A view model class helps maintain state, exposes model properties to the UI, and interacts with repository classes
using System;
using System.Collections.Generic;
using System.Linq;
using MVVMDataLayer;
using MVVMEntityLayer;
namespace MVVMViewModelLayer
{ LoadProducts();
public class ProductViewModel
{
/// <summary>
/// NOTE: You need a parameterless
/// constructor for post-backs in MVC
/// </summary>
public ProductViewModel()
{ }
} else {
public ProductViewModel(
IProductRepository repository)
{ }
Repository = repository;
} }
create the class in the POST method of your controller. The
other constructor is passed an instance of a ProductReposi-
tory class when the ProductViewModel is created by the DI
system in MVC Core.
Two public properties are needed in the view model. One is
for the repository object. This allows you to set the reposi-
tory object in the POST method of your controller. The other
property is a list of Product objects that will be loaded with
all the products returned from the table. It’s from this prop-
erty that the HTML table is built.
Two methods are created in this first iteration of your view
model. The protected LoadProducts() method is responsible
for calling the Get() method on the Repository object and
retrieving the list of product objects. The public HandleRe-
quest() method is called from the controller to retrieve the
product data. In the future, more logic is added to the Han-
dleRequest() method to perform other functions such as
searching, paging, adding, editing, and deleting of product
data. The HandleRequest() method should be the only pub-
lic method exposed from this view model class. By making
all other methods not visible outside the class, your control-
ler only needs to ever call a single method.
Reference View Model Layer from MVVM Sample Project
The DI service requires an instance of the ProductViewModel
class to insert into your control, so reference the view model
layer project from your MVC Core project. Click on the Ter-
minal > New Terminal menu and select the MVVMSample
folder. Set a reference to the MVVMViewModelLayer project
using the following command.
dotnet add . reference
../MVVMViewModelLayer/MVVMViewModelLayer.csproj
Try It Out
To ensure that you’ve typed in everything correctly, run a
build task to compile the projects. Because you have a ref-
erence from the MVVMSample to the MVVMEntityLayer, the
MVVMDataLayer, and the MVVMViewModelLayer projects, all
four projects will be built. Select the Terminal > Run Build
Task… menu and select the MVVMSample project. Watch the
codemag.com
public IProductRepository
Repository { get; set; }
public List<Product> Products { get; set; }
public void HandleRequest()
{
}
protected virtual void LoadProducts()
{
if(Repository == null) {
throw new ApplicationException(
"Must set the Repository property.");
Products = Repository.Get()
.OrderBy(p => p.Name).ToList();
}
}
output in the terminal window and you should see that it
compiles all projects.
Set Up the MVC Project
Now that you have the entity, data, and view model proj-
ects created to support retrieving and modifying data in the
Product table, it’s now time to set up the MVC project for us-
ing these classes. The AdvWorksDbContext class needs to be
injected using the DI service, so you need to add a reference
to the Entity Framework in your MVC project. Select Termi-
nal > New Terminal and ensure that the terminal prompt is
in your MVVMSample project folder. Type in the following
command to add the Entity Framework to your MVC project:
dotnet add package
Microsoft.EntityFrameworkCore.SqlServer
Modify the Startup Class
In the Startup class is where you inject your classes into the
MVC DI service. Open the Startup.cs file and add three us-
ing statements at the top. You need one each for your Data
Layer, View Model Layer, and for the Entity Framework.
using MVVMDataLayer;
using MVVMViewModelLayer;
using Microsoft.EntityFrameworkCore;
Next, create a new method in the Startup class named In-
jectAppServices() as shown in Listing 5. This method is
where you inject your application-specific classes. I like
creating a separate method so I don’t have an overly-large
ConfigureServices() method. Add a call to the InjectAppSer-
vices() method from within the ConfigureServices() method
as shown in the code snippet below.
public void ConfigureServices(
IServiceCollection services)
{
services.AddControllersWithViews();
// Inject your application services
InjectAppServices(services);
}
Use the MVVM Design Pattern in MVC Core: Part 1 21
 Add a Connection String "ConnectionStrings": {
In the InjectAppServices() method, you retrieve a connection "AdvWorksConnectionString":
string from the appsettings.json file. Open the appsettings. "Server=Localhost;
json file and add an appropriate JSON property to store your Database=AdventureWorksLT;
connection string. For formatting purposes in this magazine, Trusted_Connection=True;
I had to break the connection string onto several lines. Your MultipleActiveResultSets=true;
connection string must be on a single line. Application Name=MVVM Sample"
},

Listing 5: Build a separate method to inject your classes into the MVC DI service
private void InjectAppServices(
Create a Product List Page
IServiceCollection services) I hope you agree that you now have a very elegant, reus-
{ able, and testable design with the code you’ve written so
// Get connection string from appsettings.json
string cnn = Configuration[
far. It’s now time to see the fruits of your labor expressed in
"ConnectionStrings:AdvWorksConnectionString"]; a controller of your MVC application. Create a new Product-
Controller.cs file in the Controllers folder and add the code
// Add AdventureWorks DbContext object shown in Listing 6 to this new file.
services.AddDbContext<AdvWorksDbContext>(
options => options.UseSqlServer(cnn));
The MVC DI service injects an instance of the ProductRepository
// Add Classes for Scoped DI and the ProductViewModel classes into the ProductController
services.AddScoped<IProductRepository, class. Two private variables hold each of these instances passed
ProductRepository>();
services.AddScoped<ProductViewModel>(); in. When the user navigates to the Product/Products path in
} the MVC application, the HandleRequest() method is called on
the view model. This method loads the products into the Prod-
ucts property in the view model. The view model is then passed
Listing 6: The controller logic is very simple because of DI and the MVVM design pattern to the Products.cshtml page, which you’re creating next.
using Microsoft.AspNetCore.Mvc; Add a Product Page
using Microsoft.Extensions.Logging;
using MVVMDataLayer; Add a Product folder under Views folder in which to put
using MVVMViewModelLayer; the MVC pages for displaying your product data. Create a
Products.cshtml file in this new Product folder and enter
namespace MVVMSample.Controllers
{
the code shown in the snippet below.
public class ProductController : Controller
{ @model MVVMViewModelLayer.ProductViewModel
private readonly IProductRepository _repo;
private readonly ProductViewModel _viewModel;
@{
public ProductController( ViewData["Title"] = "Products";
IProductRepository repo, }
ProductViewModel vm)
{
_repo = repo; <h1>Products</h1>
_viewModel = vm;
} <partial name="_ProductList" />
public IActionResult Products()
{ Add a Product List Partial Page
// Load products Add a partial page named _ProductList.cshtml in the Product
_viewModel.HandleRequest(); folder. Add the code shown in Listing 7 to this new partial page
file. You’re going to be adding more functionality to the product
return View(_viewModel);
} page as you progress through this series of articles, so it makes
} sense to break your page into multiple partial pages. This is a
} good separation of concerns design pattern for Web pages.

Listing 7: Create a partial page for the display of the Product table
@using MVVMEntityLayer @Html.DisplayFor(m => item.Name)
</td>
<table class="table table-bordered table-hover"> <td>
<thead> @Html.DisplayFor(m => item.ProductNumber)
<tr> </td>
<th>Product Name</th> <td class="text-right">
<th>Product Number</th> @Html.DisplayFor(m => item.StandardCost)
<th class="text-right">Cost</th> </td>
<th class="text-right">Price</th> <td class="text-right">
</tr> @Html.DisplayFor(m => item.ListPrice)
</thead> </td>
<tbody> </tr>
@foreach (Product item in Model.Products) { }
<tr> </tbody>
<td> </table>

22 Use the MVVM Design Pattern in MVC Core: Part 1 codemag.com

Modify Index Page Modify Data Layer to Perform Searching
To call the Product List page, open the Index.cshtml page A Search() method needs to be added to both the interface
in the Views\Home folder and modify the code to look like and to the repository class. Open the IProductRespository.
the snippet shown below. cs file and add a new method declaration for the repository
contract.
@{
ViewData["Title"] = "Home Page"; List<Product> Search(ProductSearch entity);
}

<div class="list-group">
<a asp-action="Products"
asp-controller="Product"
class="list-group-item">
Product List
</a>
</div>

Try It Out
Run the application and click on the Product List link. If
you’ve done everything correctly, you should see the list of
products from the Product table in the AdventureWorksLT
database, as shown in Figure 4.

Searching for Products

To further illustrate how simple using the MVVM design pat-
tern makes your controller code, in this part of the article
you add some HTML and code to search for products, as
shown in Figure 5. Add a new entity class named Product-
Search (see Figure 3) to hold the two properties to search
for. You’re also adding a view model base class that all your
view models are going to inherit from. This base class con-
tains, for now, just a single property named EventCommand.
Figure 4: A product list page using the MVVM design pattern
The Search button you see in Figure 5 uses a data- attribute
to specify the command to send to the view model to process.
Here’s the HTML code you’re going to enter in just a bit.

<button type="button"
data-custom-cmd="search"
class="btn btn-success">
Search
</button>

To get the command and send it to the view model, you’re going
to write a little bit of JavaScript to put the value “search” into
a hidden field on this product page. That hidden field is bound
to the EventCommand property in the view model base class. In
the HandleRequest() method you’re going to check to see if the
EventCommand is filled in with a value, in this case “search”,
and if it is, call a Search() method instead of the LoadProducts()
method you called before to display all products.

Create a Product Search Class

To hold data for searching, create a new class in the Entity
Layer project named ProductSearch.cs and add the code
shown in Listing 8. The reason why you’re creating a new
class instead of just reusing the Product class is that eventu-
ally you’re going to add data validation annotations to the
Product class. You’re not going to want those validations on
these search values. Another reason is that if you wanted
to search on the SellStartDate field, you might need two
properties; BeginDate and EndDate to specify a date range.
You don’t want to add these two extra properties to your
Product class because they don’t map to any field in the
Product table. Figure 5: Add two values to search for on your product list page

codemag.com Use the MVVM Design Pattern in MVC Core: Part 1 23

 Next, open the ProductRepository.cs file and add a Search()
method to complete the interface contract you just defined.
In this Search() method, you add a Where() method to see
if the Name column in the Product table starts with the
value you entered in the ProductSearch Name property and
the ListPrice column is greater than or equal to the value in
the ListPrice property.
public List<Product> Search(
ProductSearch entity)
{ namespace MVVMViewModelLayer {
List<Product> ret;
// Perform Searching
ret = DbContext.Products.Where(p =>
(entity.Name == null ||
p.Name.StartsWith(entity.Name)) &&
p.ListPrice >= entity.ListPrice).ToList();
Listing 8: Add a new search class to hold the values to search for in the Product table
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace MVVMEntityLayer
{
public partial class ProductSearch
{ as shown below.
[Display(Name = "Product Name")]
public string Name { get; set; }
[Display(Name = "List Price Greater Than or Equal to")]
[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal ListPrice { get; set; }
} public ProductSearch SearchEntity { get; set; }
}
return ret;
}
Add View Model Base Class
Add a new folder in the View Model Layer project named
BaseClasses. Within this new folder, create a new file
named ViewModelBase.cs. Add the code shown below to
this new file.
public class ViewModelBase {
public ViewModelBase() {
EventCommand = string.Empty;
}
public string EventCommand { get; set; }
public virtual void HandleRequest() {}
}
}
Modify the Product View Model Class
To use the EventCommand property, ensure that all your
view model classes inherit from this base class. Open the
ProductViewModel.cs file and modify the class declaration
public class ProductViewModel : ViewModelBase
Add a new property to this class to hold an instance of the
ProductSearch class by entering the code shown below.

Instantiate a new instance of this ProductSearch class in

both constructor methods on the ProductViewModel class.
Listing 9: Add a partial page for the search area on your product Web page An instance is required if you want the user to enter data
@model MVVMViewModelLayer.ProductViewModel into the search values and have that data post back into the
properties in the ProductSearch object. Be sure to also call
<div class="card"> the base class’ constructor by invoking the base() call on
<div class="card-header bg-primary text-light">
<h5 class="card-title"> each constructor.
Search for Products
</h5> public ProductViewModel() : base()
</div> {
<div class="card-body">
<div class="form-row"> SearchEntity = new ProductSearch();
<div class="form-group col"> }
<label asp-for="SearchEntity.Name"
class="control-label"> public ProductViewModel(
</label>
<input asp-for="SearchEntity.Name" IProductRepository repository) : base()
class="form-control" /> {
</div> Repository = repository;
<div class="form-group col"> SearchEntity = new ProductSearch();
<label asp-for="SearchEntity.ListPrice"
}
class="control-label">
</label>
<input asp-for="SearchEntity.ListPrice" Add a SearchProducts() method to the ProductViewModel
class="form-control" /> class. This method is similar to the LoadProducts() method
</div> you wrote earlier in that you check to ensure that the Repos-
</div>
</div> itory property has been set. You then assign to the Products
<div class="card-footer bg-primary text-light"> property the results of calling the Search() method in the
<button type="button" ProductRepository class.
data-custom-cmd="search"
class="btn btn-success">
Search public virtual void SearchProducts() {
</button> if (Repository == null) {
</div> throw new ApplicationException(
</div> "Must set the Repository property.");

24 Use the MVVM Design Pattern in MVC Core: Part 1 codemag.com

 }
SPONSORED SIDEBAR:
else {
®
Products = Repository.Search(SearchEntity) Get .NET Core Help
.OrderBy(p => p.Name).ToList(); for Free
}

Instantly Search
} Looking to create a new
or convert an existing

Terabytes
Because you added a virtual HandleRequest() method in application to .NET Core or
the view model base class, add the override keyword to the ASP.NET Core? Get started
HandleRequest() method declaration in the ProductView- with a FREE hour-long
Model class. CODE Consulting session
to make sure you get
public override void HandleRequest()
started on the right foot.
CODE consultants have
Modify the HandleRequest() method to check the EventCom-
been working with and dtSearch’s document filters
contributing to the .NET support:
mand property to see if there’s a value in it. If there’s no
Core and ASP.NET Core
value, call the LoadProducts() method as before. However, teams since the early pre- • popular file types
if there’s a “search” value in the EventCommand property,
call the SearchProducts() method you just created. The Han-
release builds. Leverage • emails with multilevel
our team’s experience
dleRequest() method should now look like the code snippet and proven track record
attachments
below. to make sure your next • a wide variety of databases
project is a success. No • web data
public override void HandleRequest() { strings. No commitment.
switch (EventCommand.ToLower()) { For more information
case "search": visit www.codemag.com/
SearchProducts(); consulting or email us at Over 25 search options
break; info@codemag.com. including:
default: • efficient multithreaded search
LoadProducts(); • easy multicolor hit-highlighting
break;
• forensics options like credit
}
}
card search

Add Hidden Field Partial Page

Because you added a view model base class that’s going to Developers:
be used for all view models, you should add a partial page
that creates hidden fields for the EventCommand property, • SDKs for Windows, Linux,
and the other properties you’re going to add later in this ar- macOS
ticle series. Add to Views\Shared folder a new partial page • Cross-platform APIs for
named _StandardViewModelHidden.cshtml. Add the code C++, Java and NET with.
shown below to this new file. .NET Standard / NET Core .
@model MVVMViewModelLayer.ViewModelBase • FAQs on faceted search,
granular data classification,
<input type="hidden" asp-for="EventCommand" /> Azure and more
Add Search Partial Page
Just like you create a partial page for the product table,
create a partial page for the search area on your product
page as well. Add a new file under the Product folder named Visit dtSearch.com for
_ProductSearch.cshtml. Into this file add the code shown
in Listing 9. • hundreds of reviews and
case studies
The code in the _ProductSearch.cshtml file creates a Boot-
strap card with the search fields contained within that card.
• fully-functional enterprise
In the footer of this card, add a Search button. It’s on this and developer evaluations
Search button that you add the data- attribute that’s going
to send the command “search” to the view model. The Smart Choice for Text
Modify Products Page
Retrieval® since 1991
When you created the Product page earlier, you had a single
<partial> tag to display the _ProductList.cshtml file. You 1-800-IT-FINDS
now need to add two more partial pages to the Product page.
However, you need to wrap these partial tags into a <form>
www.dtSearch.com
tag so the data in the hidden field and the search fields can

codemag.com Use the MVVM Design Pattern in MVC Core: Part 1 25

 Listing 10: JavaScript is used to get the command to send to the view model
@section Scripts // post back to view model
{ $("#EventCommand").val(
<script> $(this).data("custom-cmd"));
$(document).ready(function () {
// Connect to any elements // Submit form
// that have 'data-custom-cmd' $("form").submit();
$("[data-custom-cmd]").on( });
"click", function (event) { });
event.preventDefault(); </script>
}
// Fill in the 'command' to

Getting the Sample Code
You can download the sample
code for this article by visiting
www.CODEMag.com under
the issue and article, or by
visiting www.pdsa.com/
downloads. Select “Fairway/
PDSA Articles” from
the Category drop-down.
Then select “Use the
MVVM Design Pattern in
MVC Core - Part 1” from
the Item drop-down.
be posted back to the view model in the POST method of
the Product controller. Open the Products.cshtml page and
replace the previous <partial> tag with the code shown in
the following snippet.
<form method="post">
<partial name="~/Views/Shared/
_StandardViewModelHidden.cshtml" />
<partial name="_ProductSearch.cshtml" />
<partial name="_ProductList" />
</form>
Post the Form Using JavaScript
On the Search button, you set the button’s type attribute to
button, which means that it won’t post the form back to the
controller. It’s now time to see how you’re going to accom-
plish that. At the bottom of the Products page, add a section
for some JavaScript and enter the code shown in Listing 10.
only products that start with the letters “HL” displayed in
the product table.
Summary
In this article, you got a taste of how to architect an MVC
Core application with multiple projects. Separating your
entity, data, and view model classes into separate projects
provides you with the most flexibility and helps you focus on
each layer as you develop. You also learned how little code
you need in your controller. Using a hidden field makes it
easy to communicate commands to your view model. In the
next article, you’ll learn how to do sorting and paging using
the MVVM design pattern.
 Paul D. Sheriff


The JavaScript in Listing 10 uses jQuery $(document).

ready() to look for any HTML element that has the attri-
bute “data-custom-cmd” on it when the page loads. It then
hooks into its “click” function and overrides the default click
event. When the button is clicked upon, the value in the
“data-custom-cmd” attribute is retrieved and placed into
the hidden field named EventCommand. The form is then
submitted, which causes the fields in the search, plus the
EventCommand hidden field to be posted to the controller.

The Post Method

The POST method is created by adding the [HttpPost] at-
tribute above an MVC action method with the same name as
the GET method you used earlier. To this POST method, an
instance of the ProductViewModel is created by MVC and the
data contained in the inputs within the <form> tag is filled
into the corresponding properties. Open the ProductsCon-
troller.cs file and add the POST method shown in the follow-
ing code snippet.

[HttpPost]
public IActionResult Products(
ProductViewModel vm)
{
vm.Repository = _repo;
vm.HandleRequest();

return View(vm);
}

Try It Out
Run the application, enter some data, like “HL” for the
Product Name, in the Search field and click on the Search
button. If you’ve done everything correctly, you should see

26 Use the MVVM Design Pattern in MVC Core: Part 1 codemag.com

codemag.com
 ONLINE QUICK ID 2005041
Discovering AWS for .NET Developers
Did you know that Amazon is a member of the .NET Foundation? And that Amazon Web Services (AWS) supports a variety of
.NET platforms such as hosting for ASP.NET Core apps? There are also .NET SDKs to connect to AWS services from your .NET
apps, PowerShell modules and extensions for Visual Studio, VSTS, VS Code, and JetBrains Rider to connect to and interact with
Julie Lerman
thedatafarm.com/blog
twitter.com/julielerman
Julie Lerman is a Microsoft
Regional Director, Docker
Captain and a long-time
Microsoft MVP who now
counts her years as a coder
in decades. She makes
her living as a coach and
consultant to software
teams around the world.
You can find Julie present-
ing on Entity Framework,
Domain Driven Design and
other topics at user groups
and conferences around
the world. Julie blogs at
thedatafarm.com/blog,
is the author of the highly
acclaimed “Programming
Entity Framework” books,
the MSDN Magazine Data
Points column and popular
videos on Pluralsight.com.
Follow Julie on twitter
at julielerman.
28 Discovering AWS for .NET Developers
many of AWS’s services. I didn’t know any of this and when
it was being relayed to me for the first time, I was surprised
and a little embarrassed. Not embarrassed that I wasn’t ex-
pert in any of this but just that I hadn’t thought to look at
any of this until now.
So where to begin? Well, there are also a host of database
engines in AWS and, given my long relationship with Entity
Framework and EF Core, that seemed like a good first stop
for me. What I’ll do in this article is take an existing small
ASP.NET Core API that uses EF Core, use EF Core migrations
to create a database on AWS, interact with the database,
and explore secrets management for the database creden-
tials both locally and for a deployed app.
RDS is the acronym for Amazon’s Relational Database Ser-
vice. Amazon RDS is a database service that provides access
to several relational databases on AWS: SQL Server, Oracle,
MariaDB, MySQL, and PostgreSQL. It also has a database
called Amazon Aurora, which is Amazon’s cloud-native, dis-
tributed relational database that’s MySQL and PostgreSQL
compatible. And Aurora is fast; according to Amazon (aws.
amazon.com/rds/aurora): five times faster than access-
ing MySQL directly through RDS and three times faster
than PostgreSQL. With the exception of Aurora and Aurora
Serverless (aws.amazon.com/rds/aurora/serverless/), the
RDS databases are also available via AWS’s free tier, which
makes them great targets for exploring AWS databases with
existing EF Core database providers.
An important concept about RDS databases is that you start
by creating a database instance that’s like a server. When
creating an instance, you configure it for the type of data-
base you want (e.g., SQL Server or MySQL) along with other
attributes that affect performance, scaling, and cost. Then
you can create databases inside of an instance. More on this
later.
I’ll take an existing small ASP.NET Web API and retarget it to
SQL Server Express on RDS to see what the experience is like.
If you want to follow along, you can download the starting
example from github.com/julielerman/codemagawsrds or
on the CODE Magazine page associated with this article.
Setting Up an Account with
AWS Free Tier
You’ll need an AWS account in order to do any of this work.
And if you don’t have an account, it’s easy to create one
using the Free Tier (aws.amazon.com/freetier) which gives
access to a variety of services that are always free, others
that are free for some amount of use (e.g., number of GBs or
hours), others that are free for 12 months, as well as access
to free trials for some additional services. The RDS services
are in the 12 months bucket, giving you up to 750 hours
a month, 20 GB of storage and 20 GB of backup—certainly
enough to start exploring.
Go to aws.amazon.com/freetier to create the account. It
does require a credit card. You’ll initially create what is
called a “root account.” That’s like a master account and
once that exists, you can create Identity and Access Man-
agement (IAM) users in the root account. AWS strongly rec-
ommends, as a best practice, that you only use IAM users
to build apps and services, not the root account. When you
create an IAM user, you can associate two access types: pro-
grammatic and management console access. You don’t need
to create the IAM account in advance as the AWS Toolkit
for Visual Studio (which I’ll walk you through below) will
give you some helpful guidance for creating IAM user cre-
dentials and even importing them into the toolkit. But you
do need to have the root account before you start. Here’s a
link to additional information about identities in your AWS
account: https://docs.aws.amazon.com/IAM/latest/User-
Guide/id.html.
Setting Up the AWS Toolkit
with Your Credentials
The AWS Toolkit for Visual Studio can be installed from the
Visual Studio extensions. There’s also an AWS Toolkit for Vi-
sual Studio Code (https://aws.amazon.com/blogs/develop-
er/announcing-aws-toolkit-for-visual-studio-code/), which
is focused on creating serverless functions and applications.
When you first use the Toolkit’s Explorer, a Getting Started
page prompts you connect the toolkit to your IAM account
or create an IAM account. Once you’ve associated an IAM
account, the explorer lets you see everything tied not just
to that particular IAM account but filtered by regions. I’d
done my first RDS experimentation online, creating a SQL
Server and a PostgreSQL database, then interacting with
them through Azure Data Studio. This was one of those silly
exciting moments in the life of a developer when I first got
everything connected. Satisfied that I’d worked this out cor-
rectly, I moved on to Visual Studio and the AWS Toolkit. I’ll
walk you through the AWS Toolkit path for creating the IAM
account and your first database instance, and then you’ll let
EF Core create a database using migrations.
The Toolkit’s Getting Started page (Figure 1) provides a link
to the AWS Console and also lists a small set of steps to per-
form so that you can avoid getting caught up in credential
management. Following these steps, I began by signing into
the AWS Console with my root account and then added a
new IAM user named JulieCodeMag, checking the Program-
matic access type as instructed by the Getting Started page.
The next step is to either add the user to an existing permis-
sions group or directly to one of the AWS policies. Again, as
per the instructions, from the possible power user policies,
I chose AdministratorAccess, which is okay for my purposes,
not production. After this, I just left the last few options at
their default and let AWS create the user. Finally, I clicked
the Download .csv button, saved the file and then imported
the CSV file into the toolkit using an option on the Getting
codemag.com
Figure 1: The AWS Toolkit’s Getting Started page before any credentials have been entered

Figure 2: Ensure that Publicly accessible and Add current IP are checked.

Started page. Note that the CSV file doesn’t populate one As a result, the AWS Explorer was then populated with nodes
of the fields—Account Number—and that’s okay. Next, I re- for all of the services that the toolkit provides access to.
named the profile from default to JulieCodeMag and saved And because the JulieCodeMag user has broad access, I was
the credentials. able to see services tied to any of my IAM accounts created

codemag.com Discovering AWS for .NET Developers 29


Deploying
You can learn more about
deploying at https://docs.
aws.amazon.com/toolkit-
for-visual-studio/latest/
user-guide/deployment-
beanstalk.html.
30 Discovering AWS for .NET Developers
Figure 3: The DB Instance detail grid
in the specific region. I’d created my test database instanc-
es in the US East (Ohio) region so if the explorer is filtered
on that region, I’ll see those instances. If I changed the
explorer region, I wouldn’t see those database instances.
Creating an RDS Instance Through
the Toolkit
You will need a database instance (remember, this is like
a running server) before EF Core can create databases in
that instance. And you can create new instances through
the toolkit, so let’s do that.
Right-click on the Instances node under Amazon RDS, then
choose Launch Instance. That means to launch (create) a
new instance. You’ll then see a list of the possible engines
for which you can create an instance including various SKUs
of Microsoft SQL Server and all of the other RDS options. I’ll
choose SQL Server Express. For those of you who’re used to
using EF Core’s Windows default, SQL Server LocalDB, for de-
velopment, LocalDB is a slice of Express (https://docs.micro-
soft.com/en-us/sql/database-engine/configure-windows/
sql-server-express-localdb?view=sql-server-ver15). But it’s
not a separate option from Express. Once you’ve selected
the engine, you’ll be prompted to configure the instance to
specify the database version, memory (“DB Instance class”)
for which I chose the smallest: micro and storage. You’ll also
be prompted to set up a user name and password. The highest
version available as I’m writing this is SQL Server 2017.
The next page of the configuration, Network and Security,
has a critical setting that you need to enable, which is to
make the database publicly available (see Figure 2) for the
sake of this exploration. Do keep in mind that it’s not a
best practice for production. Although the Toolkit will be
able to see the instance, you won’t be able to connect to
it from your code or from any tools like Server Explorer in
Visual Studio, SSMS, Azure Data Studio, etc. By default, the
databases are locked down and only accessible from within
the VPC that RDS creates to host the instance. Therefore
it’s also necessary to allow a specific IP address (or range)
to access RDS so that other Visual Studio tools, such as the
SQL Server Object Browser, are able to connect. To do that,
be sure to check the “Add current IP” option also shown in
Figure 2.
There’s one more page with configuration for backups and
maintenance. By default, RDS backs up the instance im-
mediately after creation and then performs backups daily.
For this exploration, I recommend changing that setting to
“No Automated Backups,” which makes the instance avail-
able more quickly. The rest of the defaults are okay for our
purposes. The grid for DB Instances shows the status of
each instance (see Figure 3) so you can see when the new
instance (in my case “codemagmicro”) is available. I did ex-
periment with creating various types of database instances
from the Toolkit. As I expected, both PostgreSQL and MySQL
instances took less time than SQL Server although the dif-
ference wasn’t significant
Once the instance is available, I can use EF Core migrations
against my little sample application to create a database in
the instance. You can download the sample or create a new
ASP.NET Core API. As I’m using VS, I’m doing that through
the create project workflow, not the CLI. I left defaults as
they are: e.g., no authentication and configured for HTTPS.
Given that this is using Amazon’s cloud, the model goes back
to Amazon’s roots with authors and books. And keeping it
simple, one author can write multiple books but there are no
co-authors, therefore it’s a strict one-to-many relationship.
public class Author
{
public Author()
{
Books = new List<Book>();
}
public int AuthorId { get; set; }
public string Name { get; set; }
public List<Book> Books { get; set; }
}
public class Book
{
public int BookId { get; set; }
public int AuthorId { get; set; }
public string Title { get; set; }
}
Starting with ASP.NET Core 3.0, EF Core is no longer included
in the default dependencies, so you’ll have to add Microsoft.
EntityFrameworkCore.SqlServer to the project via NuGet.
Additionally, because you’ll be using migrations, add the
Microsoft.EntityFrameworkCore.Tools package, which gives
you the PowerShell version of the migration commands and
the design time logic.
With EF Core included, I then added a simple DbContext class
called BookContext. Note the constructor that’s needed for
ASP.NET Core to use Dependency Injection (DI).
public class BookContext:DbContext
{
public BookContext
(DbContextOptions<BookContext>
options) : base(options) { }
codemag.com
 public DbSet<Author> Authors{get;set;}
public DbSet<Book> Books{get;set;}
}

Now it’s time to wire up the API with the database instance
and specify a database to work with. I’ll name mine Books-
Database because I’m a very creative human. More impor-
tantly, I’ll need the server name.

The URI is formed as (with no line breaks): [instance-

name].[AWS Server Name].[region].rds.amazonaws.com.

The DB Instances view gives you two ways to access the

server URI. One is by right-clicking the instance and choos-
ing properties; then, in the properties window, you can see
and copy the Endpoint value. The other is by right-clicking
the instance and choosing Copy Address to Clipboard.

In order to avoid accidentally posting my database cre-

dentials to GitHub, I’ll use ASP.NET Core’s Secret Manager
(https://docs.microsoft.com/en-us/aspnet/core/security/
app-secrets) to protect these credentials during develop-
ment. If you haven’t used that before, right-click on the
project in Solution Explorer and choose Manage User Se-
crets. This opens up a hidden secrets.json file where you can
specify key pairs for your secrets.
Figure 4: The newly created database in Object Explorer
{
"DbPassword": "mysecretpassword",
"DbUser": "theusername"
}

Then, in appsettings.json, I created the connection string

without the user or password attributes. I’ve masked the
server name with asterisks.

"ConnectionStrings": {
"BooksDb" :
"Server=codemagmicro.***.us-east-2
.rds.amazonaws.com,1433;
Database=BookDatabase"
},

Finally, in the startup file where I configure the services to

use DI to spin up the BookContext, I build up the connec-
tion string from the configuration info found in appset-
tings.json and the user and password from the secrets, and
then pass the resulting connection string to the SQL Server
provider’s options. All of this is achieved with the following Figure 5: The locally running controller displaying data from the AWS database
code that gets added to the ConfigureServices method in
Startup.cs:
If you prefer to debug against a local database, you can
var builder = use a SQL Server LocalDb connection in appsettings.Devel-
new SqlConnectionStringBuilder opment.json (which doesn’t require a password). But that
(Configuration would mean putting the full AWS connection string into your
.GetConnectionString("BooksDb")); secrets file and your code won’t need to build the string as
it’s currently doing. To keep this demo simple, I’ll run every-
builder.UserID = thing against the cloud database.
Configuration["DbUser"];
builder.Password =
Configuration["DbPassword"];
Creating the Database with
Services EF Core Migrations
.AddDbContext<BookContext> Now everything is in place to create and execute migrations.
(options => options.UseSqlServer I’ll start by creating a migration file named Initial with the
(builder.ConnectionString)); EF Core command, add-migration initial, in the Package

codemag.com Discovering AWS for .NET Developers 31

 Manager Console (PMC) window. Once the migration file is
created, I’ll call update-database in the PMC to migrate (in
this case, create) the BooksDatabase database in the co-
demagmicro instance.
If you have all of the pieces in place—the website instance
is publicly available (again for this exploration, not produc-
tion), your IP address is allowed to connect, your IAM account
has the correct permissions, and the database connection
string (along with its secret user and password) are tied to
Figure 6: Creating the first secret, DbPassword
32 Discovering AWS for .NET Developers
the BooksContext through the ASP.NET Core DI services—EF
Core should be able to create the BooksDatabase database
in the codemagmicro instance on AWS. If there’s something
missing, the command will fail and I’ve found that it provides
pretty useful information in its error messages.
Connecting to the Database
Because this is a SQL Server database, you have a variety
of options for connecting: SQL Server Management Studio,
codemag.com
Azure Data Studio, and other third-party tools. The tool-
kit makes it easy to connect right through the data tools
in Visual Studio. First, you’ll add the instance to Server
Explorer and from there to the SQL Server Object Browser.
Here’s how. In the AWS Explorer, right-click the RDS in-
stance and select the Add to Server Explorer option. This
launches a Connection Properties window with the server
name and SQL Server Authentication user name already
populated. Just fill in the password and connect. The
server should now be listed under Data Connections in the
Server Explorer. You can see your database in there, but
I much prefer using SQL Server Object Explorer in Visual
Studio. Just right-click on the server in Server Explorer
and choose Browse in SQL Server Object Explorer, and the
instance will be added to the Object Explorer for you where
you can see the database that migrations just created (see
Figure 4).
Although this is enough for me to be satisfied that every-
thing is working properly, it wouldn’t feel right not to finish
up creating and testing out the API. To do so, I’ll need a
controller that interacts with my model.
The quickest path is using the Add Controller wizard (right-
click on the Controllers folder to get to it) to create a new
controller—API Controller with actions, using Entity Frame-
work—for the Author class. Now you can run the API to start
interacting with it.
With the new API running locally, I used the wonderful Rest
Client extension for Visual Studio Code (https://marketplace.
visualstudio.com/items?itemName=humao.rest-client)
to easily send a request to the API. I ran a POST request to
the URI to add an author using the new controller. This is
just a simpler alternative to other great apps like Postman
or Fiddler for sending requests. Use whatever you prefer.
Here’s the rest call that I executed:
POST https://localhost:5001/api/authors
HTTP/1.1
content-type: application/json
{ opment.json file, which you can access by expanding the
"name": "Julie"
} lows any AWS extension to use the permissions assigned to
Once that data was in the database, I browsed to the con-
troller’s default (localhost:5001/api/authors), which re-
quests the GET method of the controller and can see that
the API is truly connecting to the AWS database and re-
turning the single author in that table, as you can see in
Figure 5.
Getting the Secrets on AWS
for the Deployed App
So far, the database connection credentials are stored on
my computer using ASP.NET Core Secret Manager. When I
deploy the API to the AWS Cloud, it’ll need access to those
secrets. AWS provides a few ways to store secrets and make
them available to other AWS services. Because I’m relying
on ASP.NET Core’s ability to read parameters, I’ll use the
AWS Systems Manager Parameter Store to tuck away my user
and password values.
There are a few steps involved.
codemag.com
1. Create the secrets in the Parameter Store console on-
line.
2. Add some NuGet packages to the solution.
3. Add some configuration code into the program file of
the API.
The Parameter Store console is an option in the AWS Sys-
tems Manager service under the Application Management
section.
In there, you’ll find a bright orange “Create parameter” but-
ton and in the details page for the new parameter, you’ll need
to enter four pieces of information, as shown in Figure 6:
• Parameter name: a combination of some name you’ll
use, specific to the app and the name of the param-
eter. Remember, my first secret is called DbPassword,
so I’ll use /codemagapi/DbPassword as the name.
• Type: an important step that I missed the first time
around, be sure to set the type to SecureString. That
encrypts the value for you. SPONSORED SIDEBAR:
• KMS Key Source: choose My current account. Leave
the associated KMS Key ID at its default (alias/aws/ Need Cloud Help?
ssm). CODE Can Help!
• Value: the password value
Take advantage of a FREE
That’s enough to finish up with the Create parameter but- hour-long, remote CODE
Consulting session (yes,
ton below.
FREE!) to jumpstart your
organization’s plans to
Follow the same steps to create the DbUser.
develop solutions in the
cloud. Got questions? We’ll
Next, you’ll update the application to read the secrets from do our best to answer
AWS instead of ASP.NET Core. Once I know that’s working, them! No strings.
I’ll show you how to make the app read from the local se- No commitment.
crets during development and from AWS at runtime. For more information,
visit www.codemag.com/
Begin by adding the Amazon.Extensions.Configuration. consulting or email us at
SystemsManager NuGet package to your project. This was info@codemag.com.
originally created by community member Ken Hundley and
adopted by the AWS team, who are now the maintainers.
Next, you’ll add a new section into the appsettings.devel-
appsetting.json node in Solution Explorer. This section al-
one of the AWS Toolkit profiles you created. I’ve only cre-
ated one, JulieCodeMag and it’s using the us-east-2 region.
Therefore, I’ve configured the section as follows:
"AWS": {
"Region": "us-east-2",
"Profile": "JulieCodeMag"
}
Finally, you’ll tell the application (in program.cs) to load
the AWS parameters into the ASP.NET Core’s configurations.
The new code, the italicized ConfigureAppConfiguration
method in this code snippet, goes in the CreateHostBuilder
method in program.cs.
public static IHostBuilder
CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureAppConfiguration(
(context, builder) =>
{
Discovering AWS for .NET Developers 33
 builder.AddSystemsManager Final Thoughts
("/codemagapi");
I love the fact that these modern times enable developers to
})
use the tool and platforms they choose and that companies
.ConfigureWebHostDefaults
like Microsoft and Amazon don’t force us to be siloed into a
(webBuilder =>
single organization. Amazon’s investment in the .NET Foun-
{
dation and support for .NET developers is broad-minded.
webBuilder.UseStartup<Startup>();
That’s important to me as a consultant and coach because I
});
never know what stack my next client will be on. Being able
to take all of my skills and investment in .NET development
By default, ASP.NET Core reads configurations from a num-
and the related IDEs and use them on AWS is valuable. And
ber of sources, such as the appsettings files, your system
for me, apparently with some blinders on for a while, it’s a
environment variables, the ASP.NET Core secrets, and more.
revelation. Thanks to the free tier, I also have the ability to
There’s a precedence that if a setting, such as my DbPass-
explore how I can do that. I look forward to broadening my
word, is found in multiple configuration sources, the last
horizons further on AWS.
one read is the one that’s used. Because the AWS configu-
ration is added in after the others, its DbPassword over-
 Julie Lerman
rides the DbPassword read from the ASP.NET Core secrets

file. Because of the AWS setting in the appsettings.develop-
ment.json file, the extension uses the permissions from the
Toolkit’s JulieCodeMag profile to read the AWS Parameters
online. That’s only needed during development. When you
deploy your application to AWS, you’ll need to be sure that
the VPC instance to which the app gets deployed has the
needed permissions to read the parameters. I won’t be cov-
ering app deployment in this article, as I’m focused on the
RDS usage with EF Core.

To really validate that the parameters are being read from

AWS, not the secrets file, you can edit either DbPassword or
DbUser in your ASP.NET Core secrets, which would cause the
app to fail when trying to connect to the database if they’re
the ones being used.

Running the app with these modifications gives me the

same results as earlier when I browsed to the locally hosted
API. The data that’s in the RDS database is output exactly as
it was in Figure 5.

Now that you have confidence that this is working, you may
want to go back to reading from the local secrets while de-
veloping and the AWS parameters in production. To do that,
you can force the app to only load the AWS configurations
when the application environment is production, not devel-
opment.

I’ve updated ConfigureAppConfiguration method to condi-

tionally load the AWS configurations:

.ConfigureAppConfiguration(
(context, builder) =>
{
if (context.HostingEnvironment
.IsProduction())
{
builder.AddSystemsManager
("/codemagapi");
}
})

Even though I’m not walking you through the final bit of
deploying the API, I did publish the API to AWS Elastic
Beanstalk in order to see for myself that everything was
working as expected. See the deployment article noted in
the sidebar to learn more about deploying apps to AWS from
the toolkit.

34 Discovering AWS for .NET Developers codemag.com

READ
CODE MAGAZINE
ON MOBILE!
codemag.com/mobile
 ONLINE QUICK ID 2005051
NestJS Step-by-Step: Connecting
NestJS with Angular (Part 4)
In the third part of this series (https://www.codemag.com/Article/2001081/Nest.js-Step-by-Step-Part-3-Users-and-Authentication),
I introduced Passport.js module and implemented User Authentication with NestJS, Passport.js, and JWT to secure the To Do
REST API endpoints. This article covers how you can connect an Angular front-end app with a NestJS back-end API. NestJS is no
Bilal Haidar
bhaidar@gmail.com
https://www.bhaidar.dev
@bhaidar
Bilal Haidar is an
accomplished author,
Microsoft MVP of 10 years,
ASP.NET Insider, and has
been writing for CODE
Magazine since 2007.  in the database
With 15 years of extensive
experience in Web develop-
ment, Bilal is an expert in
providing enterprise Web
solutions.
He works at Consolidated
Contractors Company in
Athens, Greece as a full-
stack senior developer.
Bilal offers technical
consultancy for a variety
of technologies including
Nest JS, Angular, Vue JS,
JavaScript and TypeScript.  With both, the Auth module lives in an isolated and self-
36 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4)
different than any other back-end technology in delivering
REST APIs that are accessible by front-end apps including
Angular, React,JS, Vue.JS, and other front-end frameworks.
I used Angular CLI to build an Angular v8 app. The app uses
Bootstrap 4 for the layout and styling. By the end of the
article, you will build something similar to what you see in
Figure 1:
The application consists of:
• A Login component for users to login to the app
• A Home component to welcome users
• A Todo Home component acting as a landing page to
display todo items and Tasks
• A Todo Create component allowing the user to create
a new todo list item
• A Todo List component to list all available todo lists
• A Task Create component allowing the user to create a
new task under a specific todo list item
• A Task List component to list all available tasks under
a specific todo list item
You’ll be able to add new todo and task items, as well as
delete existing items. I’ve left editing a todo list item
and task item as an exercise to practice with Angular and
NestJS.
Create Angular App
Start by creating a new Angular v8 app using the Angular
CLI. Make sure you install the latest version of the Angular
CLI using the following command:
npm install -g @angular/cli
Now that the Angular CLI is installed, let’s create an appli-
cation by following the steps:
1. Navigate to the folder on your computer that holds the
back-end NestJS source code.
2. Side by side, issue the following command to create a
new Angular app:
ng new todo-client
The Angular CLI prompts you with a set of questions to bet-
ter customize the experience for your own needs and re-
quirements. My answers to those questions are listed here:
• Would you like to add Angular routing? Yes
• Which stylesheet format would you like to use? SCSS
NestJS is no different from any
other back-end technology for
building and providing REST APIs.
Right after that, the CLI starts generating the files and fold-
ers needed and installs the relevant NPM packages.
Now that the application is created, navigate inside the di-
rectory and make sure it has been generated successfully.
Run the command:
ng serve --open
The command starts an internal Webpack Web server to
serve the application and opens the browser automatically
for you. You should be seeing something similar to Figure 2:
Great! The app is up and running.
Let’s add the Authentication module to the application.
Add Auth Library
The Auth source code hosts all the components and services
required by the application. Angular CLI offers two options
to isolate your code:
• An Angular module
• An Angular library
contained environment. A library is more like a mini-app
containing a module file, component, service, TypeScript
config files, and above all, the public-api.ts TypeScript file.
The public-api.ts file is used to specify all the library items
that you wish to export and make visible and accessible to
other libraries or modules in the application.
For this article, I’ve decided to make use of Angular Libraries.
Let’s create the Auth Library by issuing the following com-
mand:
ng generate library auth
This command creates a new library named auth inside a
folder located under the root-level projects folder. The An-
gular CLI places all libraries under this root-level projects
folder. The Auth library generates an Auth module that
codemag.com
Figure 1: Todo Page

Figure 2: Angular CLI home page

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 37

 can be imported by the main application module. Figure 3
shows the content of Auth library that you’ve just created:
Add Auth Service
The Auth service hosts the logic required to login and logout
a user from the application. Start by generating a new ser-
vice by running the command:
ng generate service services/auth --project=auth
The service defines the currentUserSubject as a BehaviorS
ubject<ApplicationUser> instance. At any moment of time,
you can reactively query this variable to return the currently
authenticated user.
In addition, the service defines a public property named
currentUserValue to hold the value of the currentUserSub-
ject at any moment of time. Shortly, you will see how to
make use of this property inside the Auth Guard.

The command scaffolds a new auth.service.ts file inside the
services folder inside the auth library. Listing 1 defines the
login() function.
The code initiates a POST /auth/login request to the back-
end REST API passing over the username and the password
that the user has entered on the login form. If the back-
end server successfully authenticates the user and returns a
The Source Code
valid accessToken (JWT), the function:
You can find the source code
of this article and the rest • Stores the user details including the JWT inside Lo-
of this series in this repo: calStorage
https://github.com/bhaidar/ • Populates a private currentUserSubject with the user
nestjs-todo-app details
To logout a user, the Auth service defines this function:
logout() {
localStorage.removeItem('currentUser');
this.currentUserSubject.next(null);
}
The function removes the user details from the LocalStorage
and also resets the user details inside the currentUserSubject.
Add Auth Guard
The Auth guard decides if a user can access a requested
Route. Depending on whether the user is authenticated or
not, the Auth guard responds accordingly. Start by generat-
ing a new guard by running the following command:

Listing 1: Login method ng generate guard auth --project=auth

login(username: string, password: string) {
return this.http.post<any>('/auth/login', { username, This command prompts you with a question: Which inter-
password }).pipe( faces do you want this new guard to implement?
map(user => {
if (user && user.accessToken) {
localStorage.setItem('currentUser', • CanActivate
JSON.stringify(user)); • CanActivateChild
this.currentUserSubject.next(user); • CanLoad
}
return user;
}) These are three different guard strategies that you can
); implement in Angular depending on the use case. For this
} application, I’ve chosen the CanActivate option.

Listing 2: Auth service

import { Injectable } from '@angular/core';

import {
ActivatedRouteSnapshot,
RouterStateSnapshot,
CanActivate,
Router
} from '@angular/router';
import { AuthService } from './services/auth.service';

@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router,
private authService: AuthService) {}

canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) {
const currentUser = this.authService.currentUserValue;
if (currentUser) {
// logged in so return true
return true;
}

this.router.navigate(['/login'], { queryParams: {
returnUrl: state.url } });
return false;
}
}
Figure 3: Auth library

38 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) codemag.com

Listing 2 defines the Auth Guard. The CanActivate interface
implementation starts by accessing the AuthService curren-
tUserValue property.
• If this property holds a valid user, it returns true. This
means that you need to allow the user to access the
Route.
• Otherwise, redirect the user to the Login page and
prevent them from accessing the current Route.
You will see shortly how to make use of this guard when you
define the application routes.
Add Login Component
The user logs into the application using a Login page. This
page communicates with the back-end API to authenticate
the user, generate a new JWT and return results to the call-
ing application. Start by generating a new Angular compo-
nent by running the following command:

Listing 3: Master page

<div class="container my-3"> <div class="form-group">
<div class="row text-center mb-5"> <label for="password">Password</label>
<div class="col-md-12 bg-light p-3"> <input
<h2>Login</h2> type="password"
</div> class="form-control"
</div> id="password"
placeholder="Password"
<div class="row"> formControlName="password"
<div class="col-md-6 offset-md-3"> />
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" <div *ngIf="submitted && f.password.errors">
autocomplete="off"> <small
<div class="form-group"> *ngIf="f.password.errors.required"
<label for="usernam">Username</label> class="form-text text-muted"
<input >Password is required</small
type="text" >
class="form-control" </div>
id="username" </div>
formControlName="username" <div *ngIf="error" class="my-3">
placeholder="Username" <small class="form-text text-muted">
/> {{ error | json }}</small>
<div *ngIf="submitted && f.username.errors"> </div>
<small <button type="submit"
*ngIf="f.username.errors.required" class="btn btn-primary">Submit</button>
class="form-text text-muted" </form>
>Username is required</small </div>
> </div>
</div> </div>
</div>

Listing 4: Login component

import { Component, OnInit } from '@angular/core'; // get return url from route parameters or default to '/'
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; this.returnUrl =
import { ActivatedRoute, Router } from '@angular/router'; this.route.snapshot.queryParams.returnUrl || '/';
import { first } from 'rxjs/operators'; }
import { AuthService } from '../../services/auth.service';
get f() {
@Component({ return this.loginForm.controls;
templateUrl: 'login.component.html', }
styleUrls: ['login.component.css']
}) onSubmit() {
export class LoginComponent implements OnInit { this.submitted = true;
loginForm: FormGroup;
submitted = false; // stop here if form is invalid
returnUrl: string; if (this.loginForm.invalid) {
error: string; return;
}
constructor(
private formBuilder: FormBuilder, this.authService
private route: ActivatedRoute, .login(this.f.username.value, this.f.password.value)
private router: Router, .pipe(first())
private authService: AuthService .subscribe(
) {} data => {
this.error = '';
ngOnInit() { this.router.navigate([this.returnUrl]);
this.loginForm = this.formBuilder.group({ },
username: ['bhaidar', Validators.required], error => {
password: ['@dF%^hGb03W~', Validators.required] this.error = error;
}); }
);
// reset login status }
this.authService.logout(); }

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 39

 ng generate component components/login
--project=auth --skipTests
This command scaffolds a new Login Angular component
inside the components folder. In addition, the command
declares this component at the Auth Module level.
• If the back-end successfully validates the credentials
and authenticates the user, the function then redi-
rects the user back to the returnUrl page.
• Otherwise, the component displays the user-friendly
errors returned from the back-end API.

Listing 3 defines the HTML template of the Login component.

The component defines a form with two fields: username and
password. This form is data-bound to the loginForm that you
will define shortly inside the code-behind of this template. In
addition, it adds error/validation UI to notify the user in case
they enter a wrong username format or they miss entering
one of the two fields. The template also adds a Submit button
to allow the user to login to the application.
Listing 4 defines the TypeScript code of the Login component.
• It starts by creating the loginForm instance and de-
fining the fields under this form. In this case, only two
fields are defined: username and password.
• It then logs out the user just in case there was still an
active session from previous logins.
• Then it stores the returnUrl in a private variable to
use later to redirect the user upon a successful login.
When the user submits the login form, Angular executes the
onSubmit() function. This function starts by:
When the user tries to access a
protected page and the Auth Guard
redirects him to the Login page,
it also appends to the Login page
URL a query string named returnUrl
to preserve the original page URL
that the user was trying to access.
Add JWT Interceptor
In part three of this series, I secured the back-end REST API
endpoints with JWT (JSON Web Tokens). This means that for
every request you send to any of the secured API endpoints,
you need to pass over a valid JWT in the request Header so
that the back-end can verify your identity and allow you to
continue accessing the API.

• Making sure the form is valid. For this reason, I’ll add and implement an Angular Inter-
• It then calls the AuthService.login() function passing ceptor that will perform a lookup prior to sending any re-
to it the username and password entered by the user. quest to the server. It checks if there is a valid user record
stored in the Auth Service, extracts the token from the re-
cord, and adds a Bearer Authentication Header token onto
Listing 5: JWT Interceptor the request. This is exactly what the back-end REST API
is expecting to properly verify and authenticate the user
import {
HttpInterceptor, request.
HttpRequest,
HttpHandler, Listing 5 defines the JWT Interceptor.
HttpEvent,
HTTP_INTERCEPTORS
} from '@angular/common/http'; • An Angular interceptor implements the HttpInterceptor.
import { Observable } from 'rxjs'; • It implements a single function named
import { Injectable } from '@angular/core'; intercept(request: HttpRequest<any>, next:
import { AuthService } from './auth.service';
HttpHandler): Observable<HttpEvent<any>>.
@Injectable() • The Angular infrastructure passes to the intercept()
export class JwtInterceptor implements HttpInterceptor { function the current HTTP Request and the next han-
constructor(private authService: AuthService) {} dler in the pipeline (could be another interceptor).
intercept( • The function then accesses the currentUserValue
request: HttpRequest<any>, property on the Auth Service.
next: HttpHandler • If the property has a valid user and a valid access to-
): Observable<HttpEvent<any>> { ken, it clones the current request and sets the Autho-
// add authorization header with jwt token if available
const currentUser = this.authService.currentUserValue; rization header to a Bearer {JWT} string.
if (currentUser && currentUser.accessToken) { • Finally, it returns a call to the next.handle(request)
request = request.clone({ so that other handlers in the request pipelines are ex-
setHeaders: { ecuted all the way to reach the back-end REST API.
Authorization: `Bearer ${currentUser.accessToken}`
}
}); The last line in the listing defines an Angular Provider for
} this interceptor. You’ll provide this interceptor in the App
return next.handle(request);
main module. This way, you ensure that any request the ap-
} plication sends to the back-end REST API has an Authoriza-
} tion header set properly.
export const jwtInterceptorProvider = {
provide: HTTP_INTERCEPTORS, Add Error Interceptor
useClass: JwtInterceptor, The back-end REST API returns a 401 Unauthorized response
multi: true when it can’t verify and authenticate a user. It also returns
}; other types of responses including 400 Bad Request, 403

40 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) codemag.com

 Listing 6: Error Interceptor
import { Injectable } from '@angular/core'; if (err.status === 401 && !window.location.href.includes('/login')) {
import { // auto logout if 401 response returned from api
HttpInterceptor, this.authService.logout();
HttpRequest, location.reload();
HttpHandler, }
HttpEvent,
HttpErrorResponse, const error =
HTTP_INTERCEPTORS err.error.error || err.error.message || err.statusText;
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs'; alert(error);
import { catchError } from 'rxjs/operators';
import { AuthService } from './auth.service'; return throwError(error);
})
@Injectable() );
export class ErrorInterceptor implements HttpInterceptor { }
constructor(private authService: AuthService) {} }

intercept( export const errorInterceptorProvider = {

request: HttpRequest<any>, provide: HTTP_INTERCEPTORS,
next: HttpHandler useClass: ErrorInterceptor,
): Observable<HttpEvent<any>> { multi: true
return next.handle(request).pipe( };
catchError((err: HttpErrorResponse) => {

Forbidden and others. The front-end application needs a Listing 7: TypeORM migration
way to capture the “bad” response from the back-end REST
import { MigrationInterface, QueryRunner } from 'typeorm';
API and act.
export class SeedUserRecord1565812987671 implements
For instance, if the back-end REST API returns a 401 Un- MigrationInterface {
authorized response, this means that the application is public async up(queryRunner: QueryRunner):
Promise<any> {}
requesting a secured API endpoint while the user is not
logged in to the application (no Authorization Header) on public async down(queryRunner: QueryRunner):
the request. In this case, the front-end app should redirect Promise<any> {}
the user to the Login page to authenticate themselves with }
the back-end REST API.

Listing 8: Seed User migration

Angular provides an extendible import { MigrationInterface, QueryRunner } from 'typeorm';
import { UserEntity } from '../users/entity/user.entity';
request pipeline that allows you
to define and implement Request export class SeedUserRecord1565812987671 implements
MigrationInterface {
Interceptors that can act on public async up(queryRunner: QueryRunner): Promise<any> {
const userRepo =
a request before sending it over queryRunner.manager.getRepository(UserEntity);
to the back-end server and after const user = userRepo.create({
receiving a response from username: 'bhaidar',
password: '@dF%^hGb03W~',
the same server. email: 'bhaidar@gmail.com',
});

I’ll add and implement a new Angular Interceptor to handle
the error responses from the back-end REST API properly.
Listing 6 defines the ErrorInterceptor class.
• This interceptor hooks into the response payload.
• If the response HTTP Status Code is 401 and the user
is not on the Login page, it’s likely that the user isn’t
authenticated or a token has expired. In this case, the
interceptor redirects the user back to the Login page.
• Any other error received from the back-end REST API is
properly handled and stored inside a variable named
error.
• The current interceptor simply alerts the error to the
user. You can be fancier and use some Bootstrap 4
await userRepo.save(user);
}
// tslint:disable-next-line: no-empty
public async down(queryRunner: QueryRunner):
Promise<any> {}
}
classes and styles to render a better Popup or Modal
dialog to show the errors to the user.
• Finally, the interceptor throws the errors to signal to
the Angular infrastructure that the response was not
okay.
The last line in the listing defines an Angular Provider for
this interceptor.

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 41

 Seed User Data
This article won’t touch on building a registration page for
the application. Instead, I’ll create and seed a user record
into the back-end database to test the application.
Navigate to the server folder of this application, where the
back-end REST API source code exists, and run the following
command:
ts-node ./node_modules/typeorm/cli.js
-f ormconfig.json migration:create -n
SeedUserRecord
This command uses the TypeORM CLI to create an empty mi-
gration file. Listing 7 shows the file contents.
The up() function() runs when the migration is running.
The down() function runs when rolling back a migration.
It’s very important to use the
queryRunner.manager object as you
Angular CLI Docs
Angular CLI is by far the most
guarantee that this migration will
popular tool used by Angular use the same Transaction instance
developers to generate and
establish new Angular apps.
that runs all the migrations rather
Make sure you read the docs than creating a new sub-transaction.
here: https://angular.io/cli
Figure 4: Home page
42 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4)
Let’s replace the content in this file with the one in List-
ing 8.
I’ve implemented the up() function as follows:
• The code uses the queryRunner.manager object to
get access to a Repository instance for the UserEntity.
• It then creates a new User entity record.
• Finally, it saves the new entity into the database.
To run the migration and seed your database with a new
user record, run the following command:
npm-run-all -s -l clean build:server && ts-node
./node_modules/typeorm/cli.js -f ormconfig.json
migration:run
The command cleans any previous builds of the back-end
REST API source code, it then builds and transpiles the Type-
Script code to proper JavaScript code and finally runs the
migration.
If this confuses you, refer to part two of this series and read
about NestJS and databases.
Build Application Layout
Let’s quickly build the layout of the application and set up
some routes so that you can start testing things like the
Login page. Navigate back to the Angular application.
codemag.com
 Listing 9: Master page
import { Component, OnInit } from '@angular/core'; </li>
import { AuthService } from 'projects/auth/src/public-api'; <li *ngIf="loggedIn" class="nav-item"
import { Router } from '@angular/router'; routerLinkActive="active">
<a class="nav-link" (click)="logout()"
@Component({ href="">Logout</a>
selector: 'app-master', </li>
template: ` </ul>
<div class="navbar navbar-expand-lg navbar-light bg-light </div>
shadow fixed-top"> </div>
<div class="container"> </div>
<a class="navbar-brand" href="#"> <section class="py-5 mt-5">
<i class="fas fa-tasks"></i>&nbsp;Todozz</a <div class="container">
> <router-outlet></router-outlet>
<button </div>
class="navbar-toggler" </section>
type="button" `
data-toggle="collapse" })
data-target="#navbarResponsive" export class MasterComponent implements OnInit {
aria-controls="navbarResponsive" public loggedIn = false;
aria-expanded="false"
aria-label="Toggle navigation" constructor(
> private readonly authService: AuthService,
<span class="navbar-toggler-icon"></span> private readonly router: Router
</button> ) {}
<div class="collapse navbar-collapse"
id="navbarResponsive"> ngOnInit() {
<ul class="navbar-nav ml-auto"> this.loggedIn = !!this.authService.currentUserValue;
<li class="nav-item" routerLinkActive="active"> }
<a class="nav-link" [routerLink]="['/']">
Home public logout(): void {
</a> this.authService.logout();
</li> this.router.navigate(['/login']);
<li class="nav-item" routerLinkActive="active"> }
<a class="nav-link" [routerLink]="['/todo']">Todo</a> }

Master Component Listing 10: Home page

Generate a new Angular Master component by running this import { Component, OnInit } from '@angular/core';
command:
@Component({
ng generate component shared/master --skipTests selector: 'app-home',
template: `
--inlineTemplate --inlineStyle
<div class="row text-center">
<div class="col-md-12">
The command scaffolds a new MasterComponent class and <h2 class="">Welcome to Todozz App!</h2>
places the HTML template together with the TypeScript code <p>
and CSS styling in a single file. Replace the content of this Here you can manage your Todo Lists in a breeze!
</p>
component with the code in Listing 9. </div>
</div>
The component defines a Bootstrap navigation bar that dis- `
plays the brand name of the application and links to the })
export class HomeComponent implements OnInit {
Home page, Todo page, and a button to log out from the constructor() {}
application. Depending on whether the user is logged-in or
not, the log out button hides or shows. This logic is handled ngOnInit() {}
inside the code of this component. }

Listing 11: Routes

import { NgModule } from '@angular/core'; {
import { Routes, RouterModule } from '@angular/router'; path: '',
import { LoginComponent } from 'projects/auth/src/public-api'; children: [
import { MasterComponent } from './shared/master/master.component'; {
import { HomeComponent } from './shared/home/home.component'; path: 'login',
component: LoginComponent
const routes: Routes = [ }
{ ]
path: '', },
component: MasterComponent, { path: '**', redirectTo: '' }
children: [ ];
{
path: '', @NgModule({
component: HomeComponent imports: [RouterModule.forRoot(routes)],
}, exports: [RouterModule]
] })
}, export class AppRoutingModule {}

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 43

 Listing 12: Routes with Auth guard
import { NgModule } from '@angular/core'; },
import { Routes, RouterModule } from '@angular/router'; {
import { LoginComponent } from path: '',
'projects/auth/src/public-api'; children: [
{
import { MasterComponent } from './shared/master/master.component'; path: 'login',
import { HomeComponent } from './shared/home/home.component'; component: LoginComponent
}
const routes: Routes = [ ]
{ },
path: '', { path: '**', redirectTo: '' }
component: MasterComponent, ];
canActivate: [AuthGuard],
children: [ @NgModule({
{ imports: [RouterModule.forRoot(routes)],
path: '', exports: [RouterModule]
component: HomeComponent })
}, export class AppRoutingModule {}
]

Home Component This routing module defines three main routes:

Let’s also add a Home component to act as a landing page
for the application. Generate the new component by run- • A route to the Home component
ning the following command: • Another route to the Login page
• A catch-all route that redirects the user to the Home
ng generate component shared/home --skipTests – component
inlineTemplate --inlineStyle
Test App
The command scaffolds a new HomeComponent class and Let’s give it shot and run the following command:
places the HTML template together with the TypeScript code
and CSS styling in a single file. Replace the content of this ng serve --open
component with the code in Listing 10. The component is
fairly simple and displays a message to the user. This command builds the Angular app and opens a browser
instance to start browsing the app, as you see in Figure 4.
Add Routing
Now let’s configure the application routing. Navigate to the This is the application layout so far.
/src/app/app-routing.module.ts file and replace the con-
tent of that file with the code in Listing 11. Test Login
Let’s make use of the Auth Guard to test out the Login page.
Replace the content of the /src/app/app-routing.module.
Listing 13: Proxy config file ts file with the content in Listing 12.
{
"/api": { To test the Login page, you need to run the back-end NestJS
"target": "http://localhost:4000", app. Navigate to the server folder where the NestJS app is
"secure": false hosted and run the following commands in two different
},
"/auth": { terminal command windows:
"target": "http://localhost:4000/auth/",
"secure": false, npm run run:services
"pathRewrite": {
"^/auth": ""
} This command starts up the Docker container that is hosting
} the PostgreSQL database for this application.
}
npm run start:dev

Listing 14: AuthService login() action This command starts the NestJS application in development
async login(loginUserDto: LoginUserDto): mode. Back to the front-end application, at the root folder,
Promise<LoginStatus> { create a new proxy.conf.json file. Replace its content with
// find user in db the content in Listing 13.
const user =
await this.usersService.findByLogin(loginUserDto);
Angular uses the proxy configuration settings to redirect
// generate and sign token requests to the back-end and to the correct port where the
const token = this._createToken(user); NestJS app is running.
return {
username: user.username, Now run the application once again by issuing the following
...token, command:
};
}
ng serve --proxy-config proxy.conf.json --open

44 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) codemag.com

Figure 5: Login page

The command runs the app by using the proxy configuration
file. The application detects that you’re not authenticated
and logged in so it redirects you to the Login page like that
in Figure 5.
You enter your details and hit the Submit button. If the back-
end REST API can successfully verify you, the application redi-
rects you to the Home page once again.
Let’s go back to the back-end REST API source code and remem-
ber how you’ve implemented the login logic there. When you en-
ter your details on the Login page, the application sends a POST
/auth/login request to the back-end REST API. It also appends
the username and password data into the payload of the request.
On the back-end REST API level, NestJS chooses the corre-
sponding Controller and Action to handle this request. In this

Listing 15: Todo Home component

import { Component, OnInit } from '@angular/core'; <h5>Tasks</h5>
</div>
@Component({ </div>
selector: 'lib-todo-home', <div class="row">
template: ` <div class="col-md-12 my-2">
<div class="row my-2"> <router-outlet></router-outlet>
<div class="col-md-6"> </div>
<div class="row"> </div>
<div class="col-md-12 bg-light py-3 text-center"> </div>
<h5>Todo Lists</h5> </div>
</div> `,
</div> styles: [
<div class="row"> `
<div class="col-md-12 my-2"> .border-3 {
border-width: 3px !important;
</div> }
</div> `
</div> ]
<div class="col-md-6"> })
<div class="row"> export class TodoHomeComponent implements OnInit {
<div constructor() {}
class="col-md-12 bg-light py-3 border-left
border-3 border-primary text-center" ngOnInit() {}
> }

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 45

 Listing 16: Todo Create component
import { Component, OnInit, EventEmitter, Output } `
from '@angular/core'; })
export class TodoCreateComponent implements OnInit {
import { DoAction } public todo = '';
from 'projects/app-common/src/public-api';
@Output()
@Component({ public action: EventEmitter<DoAction> = new EventEmitter();
selector: 'lib-todo-create',
template: ` constructor() {}
<div class="row my-2 mb-4">
<div class="col-md-8 offset-md-2"> ngOnInit() {}
<input
[(ngModel)]="todo" public OnEnter() {
(keyup.enter)="OnEnter()" this.action.emit({ type: 'add-todo',
class="form-control" spayload: this.todo });
placeholder="Type a Todo and hit (Enter)" this.todo = '';
/> }
</div> }
</div>

Figure 6: Todo Home page

case, the login action that you’ve defined on theAuthCon-
troller class. It’s responsible to receive all back-end requests to
either log in or register a new user. You may refer back to part
three of this series to learn more about user authentication:
https://codemag.com/Article/2001081/Nest.js-Step-by-Step-
Part-3-Users-and-Authentication.
@Post('login')
public async login(@Body() loginUserDto:
LoginUserDto): Promise<LoginStatus> {
return await
this.authService.login(loginUserDto);
} turn the response back to the front-end app.
The login action expects an instance of LoginUserDto containing
the username and password. The action then delegates its task to
the login() function that the AuthService defined in Listing 14.
This function starts by:
• Querying the database for a user given its username
• Creating a new signed JWT when the user exists
• Returning an object containing the username and the
signed token
Then, it’s the role of the AuthController.login action to re-

46 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) codemag.com

 Listing 17: Todo List component
import { Component, OnInit, Input, Output, EventEmitter } </ng-template>
from '@angular/core'; `,
styles: [
import { Todo } from '../../models/todo.model'; `
.todos {
import { DoAction } display: flex;
from 'projects/app-common/src/public-api'; justify-content: center;
}
@Component({
selector: 'lib-todo-list', .todos .todo {
template: ` flex-grow: 1;
<div *ngIf="!todos?.length; else show"> flex-shrink: 0;
No todos yet!</div> max-width: 90%;
<ng-template #show> }
<div class="list-group">
<div .todos .action {
*ngFor="let todo of todos; margin-right: 5px;
let i = index; trackBy: trackByFn" }
class="todos" `
> ]
<div class="action"> })
<button export class TodoListComponent implements OnInit {
(click)="doAction(todo)" @Input()
class="btn btn-danger btn-lg" public todos: Todo[];
title="Delete {{ todo?.name }}"
> @Output()
<i class="fa fa-trash"></i> public action: EventEmitter<DoAction> = new EventEmitter();
</button>
</div> constructor() {}
<div class="todo">
<a ngOnInit() {}
href="#"
[routerLink]="['tasks', todo.id]" public trackByFn(index: number, item: Todo) {
routerLinkActive="list-group-item-primary" return index;
class="list-group-item list-group-item-action" }
>
({{ i + 1 }}) {{ todo?.name }} public doAction(todo: Todo): void {
</a> this.action.emit({ type: 'delete-todo', payload: todo });
</div> }
</div> }
</div>

As you know, the JwtInterceptor intercepts the response,
extracts the user details including the JWT, and stores the
data inside LocalStorage. The next time the user initiates
a new request to the server, the front-end application re-
trieves the JWT and attaches it to the existing request.
Let’s add more features and build the Todo module next.
The component splits the screen into two sections. The first
hosts the Todo lists and the second hosts the Tasks under
each Todo list.
Todo Create Component
Generate a new Todo Create component by running the fol-
lowing command:

ng generate component components/todo-create –

Add Todo Library project=todo --skipTests --inlineStyle –
Let’s scaffold a new library to host the source code for the inlineTemplate
Todo module. Run the following command to generate the
new library: The command above creates a new TodoCreateComponent
inside the components folder in the todo library. Replace
ng generate library todo the content of this file with the content in Listing 16.

This new library introduces a new module hosted inside
todo.module.ts.
Todo Home Component
Let’s add the landing component of this library by running
the command:
ng generate component todo-home --project=todo –
skipTests --inlineStyle --inlineTemplate
This command generates the TodoHomeComponent. Re-
place the content of this component with the content in
Listing 15. Navigate to the Todo link on the home page and
see the results in Figure 6.
The component is fairly simple. It defines a Textbox allowing
the user to enter a new Todo List name and hit Enter to save
the Todo List in the database.
The component listens to the Enter key on the Textbox and
then emits an Output action containing the type of add-todo
and a payload of the name of the Todo List itself. It emits this
action to the outside world, that a new Todo List name has
been entered. You will see shortly how to make use of this
Output action to store the new Todo List in the database.
Todo List Component
Generate a new Todo List component by running the follow-
ing command:

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 47

 ng generate component components/todo-list – The component receives as input an array of all Todo List
project=todo --skipTests --inlineStyle – items to display to the user. It uses Bootstrap 4 list-group
inlineTemplate styles to display all the items.

The command creates a new TodoListComponent inside the The component emits an Output action containing the
components folder in the todo library. Replace the content type of delete-todo and a payload of the Todo List item
of this file with the content in Listing 17. itself. It emits this action to the outside world once the

Listing 18: Todo component

import { Component, OnInit } from '@angular/core'; this.todos$ = this.refresh$.pipe(
switchMap(() => this.todoService.findAll())
import { Observable, BehaviorSubject } );
from 'rxjs'; }

import { switchMap, tap } from 'rxjs/operators'; public doAction({ type, payload }: DoAction): void {
switch (type) {
import { DoAction } case 'add-todo':
from 'projects/app-common/src/public-api'; this.createTodo(payload);
break;
import { Todo } from '../models/todo.model'; case 'delete-todo':
import { TodoService } from '../services/todo.service'; this.deleteTodo(payload);
import { Router } from '@angular/router'; break;
default:
@Component({ console.log('Unknown action type');
selector: 'lib-todo', }
template: ` }
<lib-todo-create (action)="doAction($event)">
</lib-todo-create> private createTodo(todo: string): void {
<lib-todo-list this.todoService
[todos]="todos$ | async" .create({ name: todo })
(action)="doAction($event)" .subscribe(() => this.refresh$.next(''));
></lib-todo-list> }
`
}) private deleteTodo(todo: Todo): void {
export class TodoComponent implements OnInit { if (
public todos$: Observable<Todo[]>; confirm('Are you sure you want to delete this item?')) {
private refresh$ = new BehaviorSubject<any>(''); this.todoService.delete(todo.id).subscribe(() => {
this.refresh$.next('');
constructor( this.router.navigate(['/todo']);
private readonly router: Router, });
private readonly todoService: TodoService }
) {} }
}
ngOnInit() {

Listing 19: Todo service

import { Injectable } from '@angular/core'; public findAll(): Observable<Todo[]> {
import { return this.http.get<Todo[]>(this.baseUrl, httpOptions).pipe(
HttpHeaders, map((results: any) => results.todos),
HttpClient, catchError(this.handleError)
HttpErrorResponse );
} from '@angular/common/http'; }
import { Observable, throwError } from 'rxjs';
import { Todo } from '../models/todo.model'; public delete(id: string): Observable<{}> {
import { catchError, map } from 'rxjs/operators'; const url = `${this.baseUrl}/${id}`;
// DELETE api/todos/42-5c-...
const httpOptions = { return this.http
headers: new HttpHeaders({ .delete(url, httpOptions)
'Content-Type': 'application/json' .pipe(catchError(this.handleError));
}) }
};
private handleError(error: HttpErrorResponse) {
@Injectable({ if (error.error instanceof ErrorEvent) {
providedIn: 'root' console.error('An error occured:', error.error.message);
}) } else {
export class TodoService { console.log(`Backend returned code ${error.status},
private baseUrl = 'api/todos'; // URL to web api body was: ${error.status}`
);
constructor(private readonly http: HttpClient) {} }

public create(todo: Todo): Observable<Todo> { return

return this.http throwError(`Something bad happened; please try again
.post<Todo>(this.baseUrl, todo, httpOptions) later.`);
.pipe(catchError(this.handleError)); }
} }

48 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) codemag.com

user clicks to delete a single Todo List item. It passes this Todo List item inside the router-outlet allowing the user
over the corresponding list item the user is trying to to view both the TodoList Items and Tasks under the Todo
delete. List item side by side.

Finally, the component places a router-outlet component Todo Component

under the Tasks section. When the user clicks on a single Now let’s generate the TodoComponent that will host both
Todo List item, the application renders the Tasks page for the TodoCreateComponent and TodoListComponent.

Figure 7: Todo Component

Listing 20: Final routes

import { NgModule } from '@angular/core'; children: [
import { Routes, RouterModule } from '@angular/router'; {
path: 'tasks/:id',
import { LoginComponent } component: TaskComponent
from 'projects/auth/src/public-api'; }
]
import { MasterComponent } from './shared/master/master.component'; }
]
import { HomeComponent } from './shared/home/home.component'; },
import { AuthGuard } from 'projects/auth/src/lib/auth.guard'; {
path: '',
import { TodoHomeComponent, TaskComponent } children: [
from 'projects/todo/src/public-api'; {
path: 'login',
const routes: Routes = [ component: LoginComponent
{ }
path: '', ]
component: MasterComponent, },
canActivate: [AuthGuard], { path: '**', redirectTo: '' }
children: [ ];
{
path: '', @NgModule({
component: HomeComponent imports: [RouterModule.forRoot(routes)],
}, exports: [RouterModule]
{ })
path: 'todo', export class AppRoutingModule {}
component: TodoHomeComponent,

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 49

 Figure 8: Todo Home with Tasks page

Listing 21: TodoController create() action Async Pipe. Whenever this observable changes, the Todo-
@Post() ListComponent receives a new fresh array of Todo Items to
@UseGuards(AuthGuard()) display and render to the user.
async create(
@Body() createTodoDto: CreateTodoDto, As a recap, the TodoCreateComponent emits the add-todo
@Req() req: any,
): Promise<TodoDto> { action while the TodoListComponent emits the delete-todo
const user = req.user as UserDto; action. The TodoComponent handles both actions inside the
doAction($event) function in Listing 18.
return await this.todoService.createTodo(user,
createTodoDto);
}
If the action emitted is of type add-todo, the function
calls another function named createTodo() together with
the payload of the action. If the action emitted is of type
delete-todo, the function calls another function named
Proxying a Back-End Server ng generate component components/todo – deleteTodo() together with the payload of the action.
project=todo --skipTests --inlineStyle –
You can read more about inlineTemplate The createTodo() function, in turn, calls the TodoService.
proxying a back-end server create() function, passing to it a Todo model object as fol-
on the Angular website. The command above creates a new TodoComponent inside lows:
(https://angular.io/guide/ the components folder in the todo library. Replace the con-
build#proxying-to-a-back-
tent of this file with the content in Listing 18. private createTodo(todo: string): void {
end-server)
this.todoService
This component listens to the Output actions of both com- .create({ name: todo })
ponents as follows: .subscribe(() => this.refresh$.next('’));
}
<lib-todo-create
(action)="doAction($event)"></lib-todo-create> The deleteTodo() function, in turn, calls the TodoService.
<lib-todo-list [todos]="todos$ | async" delete() function passing to it the ID of the Todo List object:
(action)="doAction($event)"></lib-todo-list>
private deleteTodo(todo: Todo): void {
The TodoComponent defines the todos$ observable that if (confirm(`Are you sure you want to delete
passes it over to the TodoListComponent by means of an this item?`)) {

50 NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) codemag.com

 this.todoService.delete(todo.id).subscribe(
() => {
this.refresh$.next('');
this.router.navigate(['/todo']);
});
}
} Run the Docker container, back-end REST API, and Angular
The code navigates the user back to the /todo page after a
successful deletion of a Todo List item. This is directly relat-
ed to the existence of an internal router-view component,
as you will see shortly.
You define the /todo/src/lib/models/todo.model.ts as:
export interface Todo {
id?: string;
name: string;
createdOn?: Date;
} When you enter a new Todo List item and hit the Enter key,
The TodoService in Listing 19 wraps a few calls to the back-
end REST API via the HttpClient class. For instance, the ser-
vice defines the create() function like so:
public create(todo: Todo): Observable<Todo> {
return this.http
.post<Todo>(this.baseUrl, todo, httpOptions)
.pipe(catchError(this.handleError));
} this action.
Now the TodoHomeComponent hosts the TodoComponent
inside it. Let’s add the corresponding routes to the appli-
cation so that you can navigate to the Todo components.
Open the /src/app/app-routing.module.ts file and replace
its content as in Listing 20.
app and check the results in Figure 7.
You can see both TodoCreateComponent and TodoListCom-
ponent rendered on top of each other. Start playing around
by adding new Todo List items or deleting existing ones.
Assuming that I’ve implemented the rest of the Task compo-
nents, if you click on any of the Todo List items, you should
see the Tasks management screen as in Figure 8.
You’ve got a new Tasks screen that is similar to that of the
Todo Lists to add new tasks or delete existing ones.
the application sends a POST /api/todos request together
with a request payload that contains the Todo List item.
The back-end REST API receives the request and handles it
via the TodoController.create action. Listing 21 shows the
body of the TodoController.create action.
You have decorated the create() action with the @
UserGuards(AuthGuard()) decorator. This decorator en-
sures that the AuthGuard runs before the code executes

The function sends a POST request to the back-end REST
API, passing along a request payload containing the Todo
List object and some options. It finally handles any errors
generated out of this call to a dedicated function named
handleError() defined in the service in Listing 19.
The AuthGuard, if you’ve been through part three of this
series, shows you that it will look for a JWT inside the re-
quest Authorization header and verify it. Upon a successful
verification of the user, the create() action executes and
returns a response to the front-end app.

The service defines the httpOptions variable as follows:
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
The remaining components related to Task management
have similar implementation to these components. I’ll leave
it to you to go and check the source code accompanying this
article to see their implementations.
You can find the source code of this article and the rest of
this series in this repo: https://github.com/bhaidar/nestjs-
todo-app.
Conclusion
This is the final part in this series on learning NestJS Step-
by-Step. I’ve introduced a front-end application written in
Angular to connect to the back-end REST API. You can see
how easy it is to connect the two. There’s nothing different
from any other front-end application or other technology,
like ASP.NET Core or PHP.

Test Todo NestJS is a large framework and covers so much more than I
Back to Listing 15, find the following section inside the can fit into a four-part series. I recommend that you always
TodoHomeComponent: check the rich documentation website they offer, as it is
always up to date and includes further details that could be
<div class="row"> useful while developing and using the NestJS framework.
<div class="col-md-12 my-2">
</div>  Bilal Haidar
</div> 

Replace it with the following:

<div class="row">
<div class="col-md-12 my-
<lib-todo></lib-todo>
</div>
</div>

codemag.com NestJS Step-by-Step: Connecting NestJS with Angular (Part 4) 51

 Ciprian Jichici and
Talk to an RD Markus Egger
The Microsoft Regional
Director Program
The Regional Director Program, or RDs for short,
is a program that allows Microsoft to identify
influential individuals in an effort to give the
community-at-large access to these individuals,
and also to provide a point of communication
and feedback into Microsoft. Regional Directors
do NOT work for Microsoft (and they aren’t
paid for being part of the RD program), but
they have a formal relationship with Microsoft
that provides them with great insights and
connections within Microsoft.
The Microsoft Regional Director website
(https://rd.microsoft.com) defines the RD
program in the following words:
“The Regional Director Program provides Microsoft
leaders with the customer insights and real-
world voices it needs to continue empowering
developers and IT professionals with the world’s
most innovative and impactful tools, services,
and solutions. Established in 1993, the program
consists of 160 of the world’s top technology
visionaries chosen specifically for their proven
cross-platform expertise, community leadership,
and commitment to business results. You will
typically find Regional Directors keynoting at
top industry events, leading community groups
and local initiatives, running technology-focused
companies, or consulting on and implementing
the latest breakthrough within a multinational
corporation.”
Regional Directors are expected to have deep
technical understanding of many of the Microsoft
technologies. Not just that, but RDs are expected
to have an understanding of, and experience
with, competing technologies. RDs are also
expected to go beyond technical expertise and
have considerable business expertise. Many RDs
present at corporate events, advise governments
and NGOs, and many similar scenarios.
Feel free to contact any of the Regional Directors
to get access to an RD’s expertise and a well-
informed opinion that isn’t shaped or influenced
by having to go along with Microsoft’s marketing
speak. You can contact RDs to get advice and
opinions on your projects regarding technical
needs. You can contact them to help analyze
how technology will influence your business.
You can invite RDs to speak to your project
stakeholders, board of directors, or corporate
event. And you can contact your RD for many
more scenarios.
52 Talk to an RD: Ciprian Jichici and Markus Egger
At a recent DEVintersection conference in Las Vegas, our own Markus Egger sat down
with his fellow Regional Director Ciprian Jichici to talk about machine learning, AI,
cyber security and malicious attacks, quantum computing, and much more.
Not much time has gone by since that talk with Ciprian, yet much has changed. A few
days after discussing cyber security, CODE Magazine was the victim of a major cyber-
attack (something we’ll talk about more in upcoming issues of this magazine). Many
of our readers will have perhaps noticed some interruptions in our business and the
ability to get all magazines out in time. This incident made it all the clearer that security
was a very important and timely topic. The topic of Quantum Computing also ended
up being interesting for an exciting reason. Markus wasn’t able to talk about it at the
time, but FX on Hulu’s new television series “Devs” revolves exactly around this topic,
and CODE Magazine was involved (see our March/April 2020 issue). Then, in far more
sobering news, the SARS-CoV-2 virus epidemic hit the world. Topics touched on in this
conversation, such as facial identification, have a direct connection to some countries
being able to handle the spread of the epidemic better than others. The virus also
ended up cancelling many events (or forcing them to be online-only), including the
Microsoft MVP and RD Summit in Redmond, thus making it all the rarer for RDs to be
able to meet in person. Nevertheless, this column will continue, as we will find for a way
to get RDs to talk and for us to listen in. For now, let’s listen in on what was discussed.
Markus Egger: Ciprian, good to see you! when it comes to AI, machine learning, and data
Nice to get together every so often. science, is the hype. Hype is probably the one thing
that does the most to derail the real purpose of
Ciprian Jichici: Yes, good to see you too! data science. Even with large conferences like this
one, you see a lot of hype being created. And, even
Markus: You’re in a super interesting field. We see worse than that, you see a lot of hype being con-
each other at the MVP and RD Summit and occa- sumed. People have these tendencies. Sometimes it
sions like that, but don’t have that much oppor- feels to me like people need to believe that AI and
tunity to talk other than online, which is why I’m machine learning guard these magical things that
excited that we get to sit down together here in you can just wave and almost anything you wish will
Vegas. You deal with AI, machine learning, data happen. This cannot be further from the truth.
science, and cyber security, and you have a big
passion for those fields. We’re here at DEVintersec- Markus: We discussed this problem before and
tion in Las Vegas where we are both presenters. people have a lot of half-knowledge. They see some
Tell me a little bit about your key areas of interest. scenarios working that blow your mind and thus
they conclude anything is now possible. I think
Ciprian: These days I do a lot of work in the field there’s probably a lot of work left on our end. It’s
of practical machine learning. I also do a lot of us. as presenters, authors, and educators, as well
work in data science-related projects, mostly, as consultants, who need to set the expectations a
data cleansing, data engineering, data enrich- little more realistically. And I know you’re doing a
ment, and things like that. I feel so fortunate tremendous amount of work in that direction.
about the place where I am, from a professional
point of view, because this has been my lifelong Ciprian: Yeah, absolutely. That’s absolutely right.
hobby. And 20 years after I started my career, I’m People have this biased idea, that it’s easier to
at a point where I actually do most of my produc- become a seasoned professional in data science
tive work in the field of either machine learning, than in other fields. And honestly, I can’t think
data science, or data engineering. of any reason why it would be easier to become a
data scientist then it would be to become a physi-
And, as much as it’s such a great place to be in to- cist, for example. There’s another example that I
day, it also has a lot of, let’s call them “shades of typically like to do, to tell people about this. It
gray.” One of the things that bothers me the most takes perhaps a couple of weeks to learn to drive
codemag.com
a car, but acquiring the ability to drive a Formula
One car or an Indie Car is something that needs
to be learned from the earliest possible age. It’s
pretty much the same with all fields. Data science
included. It’s not that easy to break into the field.
As a matter of fact, there’s hype around getting into
the field as well. People think the entry barrier for
data science is much higher than for other fields.
I don’t believe that. It does take pretty much the
same amount. It’s still around those 10,000 hours
of practice that you need to gain a proper level of
knowledge, a proper level of experience. And where
you see these the most in data science and machine
learning is not necessarily in the pure theory, the
pure math, or the statistics behind it. You see it
when people need to make decisions. Because be-
lieve it or not, data science is a lot about trial and
error. And there are many, many cases when you
simply don’t have all the moving parts, all the hard
figures that you’ll need to make a 100% informed
decision. And that’s where experience kicks in.
That’s when those tens of thousands of hours, that
previous experience, becomes very, very important.
The other thing that I see a lot in the industry is
a phenomenon that I call the “wanna-be data sci-
entist.” And because there’s a huge lack of skill
in the field and a huge lack of skilled human re-
sources in the field, you see organizations, you see
customers giving work to these people. Obviously,
it’s anybody’s right on this planet to do any kind
of work they want, and I’m not commenting in any
way on that. The problem is that most of these
projects have a tendency to become either chal-
lenged or failed projects. And then the immediate
kind of repercussion of that is a backfiring from
business decision-makers. This isn’t just a theoret-
ical problem. I’ve already been there. I’ve already
experienced that talking with high-level business
decision-makers. They say, “Hey, Ciprian, I’ve seen
you at this conference. I know you are a seasoned
professional, but, uh, don’t get me wrong. We’ve
been burned already in these types of projects.
And, uh, we just, uh, decided to sit this one out
to wait a little bit more to see what’s happening.”
Markus: They expect proper return on investment.
I mean, the potential return on investment is huge,
right? But you need to make sure you get there.
We worked with a customer that works with per-
ishable food items. Things like salads going bad
is a big problem in their business. So this is what
they’re trying to manage. And if you can optimize
that business, where 5% less waste occurs, that’s
huge! And you can really make that happen in
many cases. But as you say, there is a real degree of
craftsmanship. First of all, what questions do you
ask? We have a customer in the oil and gas industry
who wanted to know how they could detect early
when drill-heads are going to fail when they drill
oil wells. The data scientists and the AI they used
came to the conclusion that the deeper they go,
the more likely it is to break. It boggles the mind,
how somebody thought that was an interesting an-
swer rather than just completely obvious and not
useful. So yes, craftsmanship is a big thing there.
Let’s take this a step further. Right now, there’s
the theoretical level, the data analysis, the data
science, and of course, people get a lot of benefit
from pre-trained models that they can use. So a
lot of it is about using what’s there. And then a
lot of it is creating custom models. You maintain
your data and clean your data properly. Out of
all those things that you can do, what are the
biggest areas you see? At my company, we work
in computer vision and similar things. But I know
you cast a wider net. You even go into quantum
computing and cyber security, and I know you’re
very passionate about that.

In this feature, we eavesdrop on a conversation between Ciprian Jichici and Markus Egger, both seasoned Regional Directors.
Talk to Ciprian about: Talk to Markus about:
Cloud Computing, Azure, Big Data, Mobile machine learning and AI, ASP.NET, HTML apps
Development, Software Development, IoT, DevOps, (including Angular, Vue.js, etc.), the cloud,
Microservices, Azure, SaaS, PaaS, Data Analytics, Azure, Microservices, Windows applications,
NoSQL, iOS, Android, Visual Studio, ASP.NET, or C#. software strategy, and much more.
You can contact him at ??? You can contact him at markus@eps-software.com

Ciprian Jichici is an IT professional with a business focus living in Timisoara,
Romania. His primary executive position is CEO at Genisoft, one of the most
innovative Microsoft partner companies in Romania. He is also vice-president
of the board of directors at Timisoara International Airport. Previously, he acted
as Chairman of the Urban Planning Committee at the City Council of Timisoara
and as a member of the Directory Council of Timisoara Basketball Club.
The sixteen years he spent researching and teaching computer science at the
West University of Timisoara laid the theoretical and practical foundation of his
cloud computing technical focus. Today he spends most of his professional time
designing, architecting, and managing the development of cloud computing
solutions on Microsoft Azure. An important part of this activity is helping top-
level business decision-makers realize the potential of cloud computing. The
challenges, complexity, and awesomeness of the many technologies he has to
deal with is what drives and motivates him to learn more every day.
Markus Egger is not just an RD, but as the founder and publisher of CODE
Magazine, he’s also directly associated with this publication. In his main
job, he is the President and Chief Software Architect of EPS Software Corp.
(a company better known for its CODE brands such as CODE Consulting,
CODE Training, CODE Staffing, and CODE Magazine). He is also the founder
of other business ventures, such as Tower 48, Wikinome, and others. In his
own words, he spends his time “like most software developers, writing
production code” both for consulting and custom app-dev customers,
and also for his own companies. He has worked for some of the largest
companies, including many Fortune 500 companies, such as Microsoft.
Markus often takes on the role as a “CTO for hire.”

codemag.com Talk to an RD: Ciprian Jichici and Markus Egger 53

 TALK TO AN RD
Ciprian: Yeah. Well, speaking of all that, you
could call me a failed physicist. Most probably if
I hadn’t ended up being an IT guy, I would have
ended up somewhere in quantum physics. That’s
one of the fields that’s been my passion ever since
I was a child. And it’s amazing to see that that’s
now becoming a thing in terms of quantum com-
puting. Coming back to your question though, at
the present time, I do a lot of work in exploratory
customer behavior analysis. There are some very
interesting developments. There are lots and lots
of companies who have a real need, a measurable
need, for these types of solutions.
And by the way, I think you touched a very im-
portant point earlier, which is still challenging in
machine learning today. It’s identifying the com-
pelling business case. You have to fight so much
hype today. You have to fight so many wrong per-
ceptions. Then, when it comes to actually building
a business case that’s based on hard, measurable
returns on investment, which enables the customer
to really measure the performance of your data sci-
ence, we see many, many teams and many compa-
nies failing at this very point. They are failing when
it comes to providing a compelling business case.
We also do a lot of work in natural language pro-
cessing and text analytics. This is another very,
very interesting area that we’re involved in a lot.
We do very practical and hands-on types of proj-
ects, ranging from classification based on natural
language processing and coding, and going all the
way to processing things like media and use data.
Markus: You essentially take in an audio stream,
right? You start, not with the written word, but
with the audio of a sentiment. Potentially, you do
transcriptions and then take it from there, or how
do we imagine that?
Ciprian: It’s a little more complicated than that
or a little bit more elaborate in the sense that we
mostly work with text from online written media.
One of the challenges that we’re aiming or plan-
ning to solve is understanding the real structure of
information out there in the wild. These days you
see a lot of initiatives around classifying news as
fake or legitimate news, and things like that. I think
that’s not too harsh of a term, but I think it’s a little
bit simplistic. The types of projects we’re involved
in are the projects where we aren’t looking to pro-
vide a measure of quality for what’s been said out
there in the public. Rather it’s about estimating the
support for any statement. Think about a simplified
situation like this. “Markus said, ‘it’s raining in Ve-
gas’.” What we’re trying to do is not assign a certain
54 Talk to an RD: Ciprian Jichici and Markus Egger
degree of true or false to the statement, but rather
find out that, for example, in the western part of
the United States there were 525 other people who
were saying a very similar thing. Something that’s
very close, semantically and linguistically, to the
statement that it’s raining in Vegas. It might come
as a surprise, but this is the type of thing that a lot
of companies are interested in. They’re interested
because mostly the companies who have a well-
developed social consciousness are the ones who’re
really interested in what is being said. What’s the
perception about them? Yes, the first level is senti-
ment analysis, but I believe this is a deeper level,
a level that’s also much more difficult to achieve.
This is another very practical area in which we
work. We also do work in IoT. As a matter of fact,
in addition to speaking at the conference, I, to-
gether with my colleagues and some clients, have
delivered a two-day workshop on combining IoT
with machine learning. This is a very interest-
ing field and there’s already a lot happening. We
started with pure IoT and the challenges of typical
IoT solutions, but then we move into how these
solutions can be improved. How can they benefit
from applying machine learning approaches to
the vast amounts of data. Mostly streaming data
that is generated in the world of IoT.
Markus: To switch gears a little bit, what do you
make of the threats of all of this? A lot of peo-
ple go, “Oh, I know AI is going to take over the
world.” They’re going to have a Terminator-like
scenario. I’m not a big believer in that but what I
do worry about is a different angle of all of this.
The deep fakes, the derailing of fact-fullness. The
more sophisticated phishing messages people en-
counter. Isn’t there a real issue in attacks of that
nature becoming so sophisticated that it’s really
difficult to battle that? And I do wonder if AI can
help us battle it as well, but it seems that’s a lot
more difficult than to come up with the actual
malicious content.
Ciprian: Yeah, it is. And by the way, that “Termina-
tor Moment,” we have a name for that in machine
learning and data science. It’s called the “Singu-
larity.” It’s that very moment when a machine, or
a set of machines, exceed the capabilities of the
human brain in all aspects. It has been projected
that the singularity would occur sometime around
2010 and then it was updated to 2020. Now it’s
been moved to around 2050. I’m not a believer
in that either. But I’m a believer in the duality of
any kind of powerful technology or mechanism or
theory that we—humankind—get access to. Be-
cause it’s always a game of the bright side and
the dark side. Obviously, my take is a balance.
You shouldn’t be overexcited about everything
you can do with machine learning and AI. Nei-
ther should you be deeply rooted in the dark side.
Like “this is going to kill the world,” right? And
if you look throughout our history as a human
race, it’s always been like this. Think about...oh,
I don’t know... E = mc2, perhaps. That equation
brought us nuclear energy, which is still one of
the cleanest types of energy that we know of. But
it also brought us the nuclear bomb. So there’s
no reason for me to think that something as pow-
erful—and make no mistake, machine learning
and AI are very powerful things—but I have no
reason to believe that we’ll deal with them in a
radically different way. And you said it very well:
The power, specifically the computing power that
we have today at our fingertips is already being
used to do harm as well, via machine learning. It
might come as a surprise to lots of people, but as
of today, we only need maybe 20 to 30 minutes of
somebody’s decent voice recording to use sophis-
ticated machine learning to make that person say
virtually anything that we want. And it’s not only
with audio, it’s possible also with video.
I’m not a believer in the
“Singularity,” that “Terminator
Moment.” But I am a believer
in the duality of any kind
of powerful technology.
Markus: Yes, absolutely. Which is very interest-
ing, when you think of what’s going on politically
in the world, among other things.
Ciprian: Exactly.
Markus: Or even just the Orwellian scheme, right?
The Chinese say they can identify anyone, within
a second, using face analysis. Anyone within
China, that is. And globally, they have the power,
even though not the data sources perhaps, to
identify anyone within two seconds. Those are, in
a way, scary things. And I often wonder: Does it
take more computing power to create deep fakes
or to detect them?
Ciprian: Well, that’s the typical kind of a chicken
and egg problem. The real problem is—and this ap-
plies to a certain extent to deep fakes—that deep
codemag.com

fakes are not yet so sophisticated as to be extreme-
ly difficult to detect. But they’re getting there. The
same applies where we have adversarial attacks,
which basically play on the fundamental differ-
ences between the way the human brain works and
way the machine brain works. No matter what folks
will tell you, we’re light years away from mimick-
ing the real behavior of the human brain. Even
the smartest machine learning model today has a
completely different internal way of working than
the human brain. And there are documented ways
of attacking that specific difference. You see these,
for example, in autonomous self-driving cars. There
are documented ways in which you can take a few
rectangular stickers, stick them on a road sign, and
all of a sudden, yield becomes interpreted as “turn
right” or “turn left.” We’re not aware of any proven
mathematical models that would guarantee success
in fighting against these things.
We’re quite far from being clear on whether we
can be effective in dealing with these things.
And, as it happened many times in history, even-
tually the solution isn’t in the theory and isn’t
in the technical part. The solution is in educat-
ing people to be responsible about these tech-
nologies. The solution is in creating a worldwide
framework that will help govern the way in which
these technologies are used. Again, it might seem
a little bit of a stretch, but it’s a great comparison
with what happened with nuclear weapons. One
of the reasons why they weren’t used, except for
testing, and except for the end of World War II,
was because of these frameworks that were cre-
ated around the world.
You already see this starting. You already see big
companies, like, for example, Microsoft is really
driving concepts like responsible AI. You see in-
dependent bodies doing the same. For example,
folks who’ve created the declaration of Montreal
on Responsible AI. People are starting to feel
this threat. And what’s encouraging for me is
that they start realizing that the solution is at a
different level. It’s not necessarily at the techni-
cal level because that’s a chicken and egg prob-
lem. We’ll get better at creating, for example,
deep fakes, and then we’ll get better at detecting
them, and then we’ll get better at creating them,
and so on and so forth.
Markus: You and I don’t work for Microsoft, but we
have a relationship with them. It’s nice to see that
a company like Microsoft takes the ethics of all of
that very seriously. Microsoft just been voted the
most ethical company in North America. It’s very
interesting to see that sort of stuff.
codemag.com
Ciprian: It’s very important because the Microsofts,
Facebooks, Amazons, and Googles of the world, I
believe, together with their immense business suc-
cess, also have huge responsibility in terms of what
they deliver to the world. What’s preventing some
of the really powerful stuff that they’re developing
from being used in a non-ethical or non-responsi-
ble way? It’s really encouraging to see that at the
highest levels starting from the board and the CEO
of the company, Microsoft really gets it and really
understands the importance of driving responsible
AI and of driving responsibility in this field.
Microsoft really gets it and
really understands the
importance of responsible AI.
Markus: Some of it always seems to me isn’t
even just that super high-level. One of the things
that’s probably easier to do than a lot of other
things is to mine the data of people and figure
out who the people are that are most easily de-
frauded, and what’s a group of people I can get
through to, to reach a tipping point. I think if I
remember correctly in one of your presentations,
you talk about Brexit and how a certain subgroup
of people was identified that was influenced,
which was enough to sway the vote toward leav-
ing the EU, rather than remaining.
Ciprian: Yeah. That was one of the cases where
these types of misuse of technology happened way
before the world had the chance to organize itself
against that type of abuse. We all know the story of
Cambridge Analytica, and how social media was lit-
erally exploited by certain individuals. And as bad
as this was, it’s also a very important wake up call.
I believe it has an important role increasing knowl-
edge and awareness on what the bad things are
that can happen when machine learning is used in
a non-ethical and non-responsible way.
Markus: Now to switch to something a little more
positive and forward looking again: Both of us
use a lot of Microsoft technologies. In my com-
The Cambridge Analytica
scandal was a very
important wake-up call
for the industry.
TALK TO AN RD
pany, we use the Custom Vision and Computer Vi-
sion APIs. Microsoft has Face ID and things that
are really powerful and probably industry-leading
by quite a margin. And there are tons of other
providers out there. Who else do you work with?
Do you use an AWS or any of those things as well?
Ciprian: We use a wide range of technologies. If you
look at some of the most important tool sets and
frameworks today, they’re really vendor agnostic.
Think about data preparation and data engineering
workloads, as an example. By a large margin, Spark
is the place to go. And fortunately, Spark is avail-
able in Microsoft Azure as Azure Databricks. Spark
is available in AWS. Spark is available in the Google
cloud. This is one very interesting place that we’re
in, especially in data engineering and in data sci-
ence through the immense success of open source
platforms and various technologies. I’d dare to say
that you have almost a common denominator and
then it obviously boils down to either personal pref-
erence and perception on whether to use Microsoft
or AWS or Google. Or it was down to things such as
perceiving Microsoft as being more ethical than one
of its competitors. Or it boils down to the sheer cost
of the platform. So yes, we do a lot of work with
other vendors as well. It’s true. But most of our work
and most of our workloads run on Microsoft Azure.
Markus: Have you done anything with any of the
Asian vendors?
Ciprian: Not yet, no. No. Haven’t had the chance
yet. To be very honest with you, I’m a firm believer
in competition and competitive markets. And in
the world of data science, I fear monopoly. This is
why I’m so happy that I see, for example, PyTorch
slowly but steadily starting to balance TensorFlow.
Because I don’t want to live in a world where the
only option for doing serious deep learning is Ten-
sorFlow. I want to have options. And that can only
be good for us as data scientists, but also for the
field in its entirety.
Markus: I couldn’t agree more.
It’s been a pleasure talking to you, as always.
Unfortunately, we are out of time, because both
of us have to run off to our next presentations.
Good luck with your upcoming talk!
Ciprian: This has been an absolutely great conver-
sation. We’ll do it again, maybe at the upcoming
Regional Director and MVP Summit in Redmond!
 Markus Egger

Talk to an RD: Ciprian Jichici and Markus Egger 55
 ONLINE QUICK ID 2005061

Introduction to SwiftUI
If you’ve been developing for iOS, you’re no doubt familiar with Storyboard, Apple’s visual tool for developing the user interfaces
of iOS applications. And depending on how early you got started in iOS development, you might even be familiar with
Interface Builder and XIBs. Last year, Apple announced SwiftUI at the WWDC 2019. With SwiftUI, Apple aims to update the iOS

development experience to the modern world. Each itera- equalToConstant: 50))

tion of the tools makes it much easier and more efficient for
developers to create their apps, but with each innovative
tool that comes along, developers have to start learning all
over again. In this article, I aim to introduce you to SwiftUI,
and like all my articles, I hope to get you jumpstarted in the
shortest amount of time. Let’s get started!
}
When the button is tapped, the IBAction named bnClicked
(a delegate method) is fired. Using the IBOutlet named txt-
Text, you reference the UITextField object and set its text
property to a string:

@IBAction func btnClicked(_ sender: Any) {

Wei-Meng Lee
weimenglee@learn2develop.net
http://www.learn2develop.net
@weimenglee
Wei-Meng Lee is a technolo-
gist and founder of Devel-
oper Learning Solutions
(www.learn2develop.net),
a technology company spe-
cializing in hands-on train-
ing on the latest technolo-
gies. Wei-Meng has many
years of training experiences
and his training courses
place special emphasis
on the learning-by-doing
approach. His hands-on
approach to learning
programming makes
understanding the subject
much easier than read-
ing books, tutorials, and
documentation. His name
regularly appears in online
and print publications such
as DevX.com, MobiForge.
com, and CODE Magazine.
What Is SwiftUI txtText.text = "Hello, UIKit!"
SwiftUI is a declarative programming framework for develop- }
ing user interfaces for iOS and macOS applications. To see
how it compares to existing framework, let’s see how user
interfaces are built before SwiftUI was introduced. View as a Function of State
SwiftUI, on the other hand, is a state-driven, declarative
Prior to SwiftUI, most developers used UIKit and Storyboard framework. In SwiftUI, all the above could be implemented
(which is still supported by Apple in the current version of Xcode with the following statements:
(version 11.3.1)). Using UIKit and Storyboard, developers drag
and drop View controls onto View Controllers and connect them
to outlets and actions on the View Controller classes. This model
of building UIs is known as Model View Controller (MVC) and
creates a clean separation between the UI and business logic.
The following shows a simple implementation in Storyboard.
Here, a Button and a TextField view have been added to the
View Controller in Storyboard and an outlet and an action
have been created to connect to them:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var txtText: UITextField!
@IBAction func btnClicked(_ sender: Any) {
}

To lay out the views, you use auto-layout to position both

views in the middle of the screen (both horizontally and
vertically). To customize the look-and-feel of the TextField,
you can code it in the viewDidLoad() method:

override func viewDidLoad() {

super.viewDidLoad()

txtText.font = UIFont(
name: "AppleSDGothicNeo-Bold",
size: 20)
txtText.layer.cornerRadius = 8.0;
txtText.layer.masksToBounds=true
txtText.layer.borderColor =
UIColor.lightGray.cgColor
txtText.layer.borderWidth = 2.0
txtText.textAlignment =
NSTextAlignment.center
txtText.addConstraint(
txtText.heightAnchor.constraint( Figure 1: The button and text field in SwiftUI

56 Introduction to SwiftUI codemag.com

import SwiftUI .padding(.leading ,10)
.padding(.trailing ,10)
struct ContentView: View { }

@State private var text = "" }

}
var body: some View {
Here, the UI is created declaratively using code, and there’s no
VStack { need for Storyboard in this example. Layouts are now also speci-
Button(action: { fied declaratively using code (the VStack in this example stacks
self.text = "Hello, SwiftUI!" all the views vertically). Delegates are now replaced with closures.
}) {
Text("Button") More importantly, views are now a function of state: The text
.padding(EdgeInsets( displayed by the TextField view is now bound to the state vari-
top: 10, leading: 10, able text. When the button is tapped, you change the value of
bottom: 10, trailing: 10)) the text state variable, which automatically updates the text
} displayed in the TextField view.

TextField("", text: $text) To alter the behaviour of each view, you use modifiers, which
.multilineTextAlignment( are basically functions that you apply to a view or another view
TextAlignment.center) modifier, thereby producing a different version of the original
.padding(15) view. Examples of modifiers in this example are padding(),
.frame(maxWidth: .infinity, overlay(), font(), and so on.
alignment: .center)
.foregroundColor(Color.black) Figure 1 shows the how the UI looks in SwiftUI when the
.font(.custom( button is clicked.
"AppleSDGothicNeo-Bold",
size: 20.0))
.overlay( Getting the Tools
RoundedRectangle( To start developing using SwiftUI, you need the following:
cornerRadius: 8)
.stroke(Color.gray, • Xcode version 11 or later
lineWidth: 2) • A deployment target (simulator or real device) of iOS
) 13 or later

Figure 2: Launch Xcode and create a new project

codemag.com Introduction to SwiftUI 57

 Figure 3: Create a new Single View App project

Figure 4: Name the projectç

58 Introduction to SwiftUI codemag.com

Figure 5: The ContentView.swift file contains the main UI for your app.
• macOS Mojave (10.14) or later (if you are running ma-
cOS Mojave, you can still use SwiftUI but you won’t be
able to use live preview and design canvas features;
full features are only available in macOS Catalina
(10.15) and later)
Hello, SwiftUI
Once you’ve installed Xcode, I know you’re very eager to try
out SwiftUI. So let’s have a dive in into SwiftUI and see how
it works first-hand.
Launch Xcode. Click on the “Create a new Xcode project” to
create a new project (see Figure 2).
Select Single View App and click Next (see Figure 3).
Name the project HelloSwiftUI and select the various op-
tions, as shown in Figure 4. For the User Interface option,
ensure that SwiftUI is selected. Click Next and save the
project to a location on your Mac.
You should see the project created for you (see Figure 5).
The ContentView.swift file contains the user interface for
your application’s main screen.
codemag.com
Automatic Previewing of Your UI
Using the Canvas
By default, you should see the Inspector window on the
right side of the Xcode window. For building your UI using
SwiftUI, you usually don’t need the Inspector window, so
you can dismiss it to gain more screen estate for previewing
your UI using the Canvas. To dismiss the Inspector window,
click on the button on the top right corner of Xcode (see
Figure 6).
With the Inspector window dismissed, you should now
see the Canvas on the right-side of Xcode (Figure 7).
In Xcode, if you don’t see the Canvas,
you can bring it up again through
the Editor > Canvas menu. To
preview your UI, click the Resume
button on the Canvas. You should
now be able to see the preview.
Introduction to SwiftUI 59
 Figure 6: Dismissing the Inspector window

Figure 7: Viewing the Canvas on Xcode

60 Introduction to SwiftUI codemag.com

The Canvas lets you preview the UI of your application with- If you now change the color of the Text view (within the
out needing to run the application on the iPhone Simulator Button view) to red, you should see the changes appear
or real device. automatically reflected in the preview:

You can click on the Resume button to start the preview Button(action: {
(see Figure 8). self.text = "Hello, SwiftUI!"
}) {
Let’s now modify the ContentView.swift file with the code Text("Button")
that you’ve seen earlier (see Figure 9). .padding(EdgeInsets(
top: 10, leading: 10,
bottom: 10, trailing: 10))
.foregroundColor(.red)
If you don’t see the Resume button }
when trying to preview your SwiftUI
Note that the automatic update feature of Preview doesn’t
UI, make sure you are running always work. There are times where you have to click Try
macOS Catalina (10.15) or later. Again button to rebuild the preview (see Figure 11).

You may notice that the automatic preview has paused. This
sometimes happens when the file you’re previewing has
some changes that caused the containing module to be re-
built. When that happens, click the Restore button and you
should now see the preview again (see Figure 10).
Live Preview
If you recall, the code changes the text on the TextField
when the button is clicked (or tapped on a real device).
However, if you try clicking on the button on the preview
canvas, you can observe that there’s no reaction. This is
because the preview canvas only allows previewing of your

Figure 8: Previewing your UI on the Canvas

codemag.com Introduction to SwiftUI 61

 Figure 9: Modifying the ContentView.swift file
UI and doesn’t run your application. To run the applica-
tion, you need to click on the Live Preview button (see
Figure 12).
Once the Live Preview mode is turned on, the background
of the simulator turns dark (see left of Figure 13). You can
now click on the button and the text on the TextField will be
updated (see right of Figure 13).
Generating Different Previews
Notice this block of code at the bottom of ContentView.
swift?
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
} you to search for articles from over 30,000 news sources
} and blogs. To register for your own API key, go to https://
The ContentView_Previews struct conforms to the Preview-
Provider protocol. This protocol produces view previews in
Xcode so that you can preview your user interface created
in SwiftUI without needing to explicitly run the application
on the iOS Simulator or real devices. Essentially, it controls
what you see on the Preview canvas. As an example, if you
want to preview how your UI will look on an older iPhone 8
62 Introduction to SwiftUI
device, you can modify the ContentView_Previews struct as
follows (see also Figure 14):
ContentView().previewDevice("iPhone 8")
Creating a News Reader Application
The best way to learn a new framework or tool is to actually
create an application using it. In this section, you will build
a news reader application to download the news headlines,
display them in a List view, and allow the user to tap on a
particular news item to read more about the news.
Examining the Structure of the News Headline Feed
For this example, you’ll use the free service provided by
News API (https://newsapi.org). This is a JSON-based API
that provides you with breaking news headlines and allows
newsapi.org/register.
For your project, you’ll retrieve all the top business head-
lines in the US. The URL looks like this: https://newsapi.
org/v2/top-headlines?country=us&apiKey=<API_Key>.
The news headline API returns a JSON string containing
the details of the news headlines. You can paste the URL
codemag.com
Figure 10: Restoring the preview shows the UI again

You’re now ready to start coding. Using Xcode, create a

Single View App project and name it NewsReader.

To extract the items from JSON into structures in Swift, cre-

ate the following structs in ContentView.swift:

import SwiftUI

Figure 11: If the preview fails, click Try Again struct Result: Codable {
var articles: [Article]
}
onto a Web browser and obtain the content. Once the JSON
content is displayed on your browser, copy and paste it struct Article: Codable {
into a JSON validator website, such as http://jsonlint. var url: String
var title: String
com, and you’ll have a good idea of the structure of the
var description: String?
JSON content. Figure 15 shows the structure of a sample var urlToImage: String?
of the JSON content: }

Observe that the value of the articles key is an array of struct ContentView: View {
items each containing the details of each article. In each var body: some View {
article, you want to retrieve the following details: Text("Hello, World!")
}
• title: the title of the news item }
• url: the link containing the details of the news item
• description: a synopsis of the news item By conforming to the Codable protocol, the Result and Figure 12: Turn on Live Preview
• urlToImage: the link containing the image for the ar- Article structs are now able to map Swift Objects to JSON to test your application
ticle data, and vice versa. explicitly running it

codemag.com Introduction to SwiftUI 63

 Fetching the JSON String ject’s decode() function to convert the JSON content into
Before you see how to fetch the news headlines from the the Result struct that you’ve defined earlier. Once the con-
Web, let’s define a state variable named articles. This state version is done, you assign the result to the articles state
variable stores all the decoded JSON content and you’ll also variable.
use it to bind to your List view for display:
Defining the View
struct ContentView: View { You can now define the view. Use a List view to display the
list of articles:
private let url =
"https://newsapi.org/v2/" + var body: some View {
"top-headlines?country=" + List(articles, id: \.url) { item in
"us&apiKey=<API_KEY>" VStack(alignment: .leading) {
Text(item.title)
@State private var articles = [Article]() .font(.headline)
Text(item.description ?? "")
var body: some View { .font(.footnote)
Text("Hello, World!") }
} }.onAppear(perform: fetchData)
} }

To fetch the news headlines, you shall define the fetchData()
function as shown in Listing 1.
You use the dataTask() method of the URLSession.shared
object instance to fetch the news headlines. Once the JSON
content is downloaded, you use the JSONDecoder() ob-
The List view is bound to the articles state variable,
and for each row in the List view you use a VStack view
to display the title and description of each article. The
onAppear() modifier to the List view specifies that the
fetchData() function be called when the List view first
appears.

Figure 13: Turning on Live Preview allows you to test your application without explicitly running it

64 Introduction to SwiftUI codemag.com

 Listing 1: Defining the fetchData() function
struct ContentView: View { DispatchQueue.main.async {
private let url = "https://newsapi.org/v2/" + // assign the decoded articles to
"top-headlines?country=us&apiKey=<API_KEY>" // the state variable
self.articles =
@State private var articles = [Article]() decodedResult.articles
}
func fetchData() { return
guard let url = URL(string: url) else { }
print("URL is not valid") }
return print("Error: \(error?.localizedDescription ??
} "Unknown error")")
let request = URLRequest(url: url) }.resume()
URLSession.shared.dataTask(with: request) { }
data, response, error in
if let data = data { // data is Optional, so var body: some View {
// you need to unwrap it Text("Hello, World!")
if let decodedResult = try? }
JSONDecoder().decode( }
Result.self, from: data) {
// decoding is successful

Figure 14: Previewing the UI on an older iPhone 8

codemag.com Introduction to SwiftUI 65

 Figure 15: The structure of the JSON content displayed using jsonlint.com Figure 16: Displaying the news headlines using the List view

Figure 17: Adding a package to your Xcode project

66 Introduction to SwiftUI codemag.com

For your reference, the content of the ContentView.swift
file is shown in Listing 2. Figure 16 shows how the app
looks when you run the Live Preview on Xcode.
Displaying Images Remotely
So far, the news headlines are displayed nicely using the
List view. However, it would be much nicer if you were able
to display an image for each news headlines. As the saying
goes, a picture is worth a thousand words. In SwiftUI, you
can display images using the Image view. However, one key
problem with the Image view is that it’s only capable of
displaying local images. That is, images that are bundled
locally with the application. If you want to display an image
that’s located on the Web, you’re out of luck.

Listing 2: The code in ContentView.swift

import SwiftUI // decoding is successful
DispatchQueue.main.async {
struct Result: Codable { // assign the decoded articles to
var articles: [Article] // the state variable
} self.articles =
decodedResult.articles
struct Article: Codable { }
var url: String return
var title: String }
var description: String? }
var urlToImage: String? print("Error: \(error?.localizedDescription
} ?? "Unknown error")")
}.resume()
struct ContentView: View { }
private let url = "https://newsapi.org/v2/top-
headlines?country=us&apiKey=<API_KEY>" var body: some View {
List(articles, id: \.url) { item in
@State private var articles = [Article]() VStack(alignment: .leading) {
Text(item.title)
func fetchData() { .font(.headline)
guard let url = URL(string: url) else { Text(item.description ?? "")
print("URL is not valid") .font(.footnote)
return }
} }.onAppear(perform: fetchData)
let request = URLRequest(url: url) }
URLSession.shared.dataTask(with: request) { }
data, response, error in
if let data = data { // data is Optional, so struct ContentView_Previews: PreviewProvider {
// you need to unwrap it static var previews: some View {
if let decodedResult = try? ContentView()
JSONDecoder().decode( }
Result.self, from: data) { }

Listing 3: Adding the statements to load remote images using the URLImage view
import SwiftUI )!),
import URLImage delay: 0.25,
processors:
struct Result: Codable { [Resize(size:
var articles: [Article] CGSize(width: 100.0,
} height: 100.0),
scale: UIScreen.main.scale)],
struct Article: Codable { content: {
var url: String $0.image
var title: String .resizable()
var description: String? .aspectRatio(contentMode:.fit)
var urlToImage: String? .clipped()
} }
).frame(width: 100.0, height: 100.0)
struct ContentView: View { }
private let url = "https://newsapi.org/v2/top-
headlines?country=us&apiKey=<API_KEY>" VStack(alignment: .leading) {
Text(item.title)
@State private var articles = [Article]() .font(.headline)
Text(item.description ?? "")
func fetchData() { .font(.footnote)
... }
} }.onAppear(perform: fetchData)
}
var body: some View { }
List(articles, id: \.url) { item in
HStack(alignment: .top) { struct ContentView_Previews: PreviewProvider {
URLImage( static var previews: some View {
(( URL(string:item.urlToImage ?? ContentView()
"https://picsum.photos/100") }
?? nil }

codemag.com Introduction to SwiftUI 67

 One way to fix this is to create your own Image view to load
images remotely. But there are already solutions devel-
oped by others, so you can just make use of one of them.
For this purpose, you’ll use the URLImage view located at
https://github.com/dmytro-anokhin/url-image.
To make use of the URLImage view, you need to add its
package to your project. You can do so by going to Xcode
and selecting File > Swift Packages > Add Package De-
pendency…. Enter this URL: https://github.com/dmytro-
anokhin/url-image (see Figure 17).
Click Next in the current page as well as the next page. Final-
ly, click Finish. The package will now be added to the project.
With the URLImage package added to the project, add the
following statements in bold to the ContentView.swift file,
as shown in Listing 3.
The bold statements add the URLImage view (of size
100x100) to each row in the List view. You need to check
whether each news headline contains an image (through
Figure 18: Displaying image next to each news headline
68 Introduction to SwiftUI
the urlToImage property). If no image is available, make
use of a sample image provided by this site: https://pic-
sum.photos/. The URL: https://picsum.photos/100 in-
dicates to the site to return an image of size 100x100
pixels.
Figure 18 shows the image displayed next to each news
headline.
Wrapping the List View in a NavigationView
Now that you have managed to populate the List view with
the various news headlines, you can wrap the List view in a
NavigationView:
var body: some View {
NavigationView {
List(articles, id: \.url) { item in
...
}.onAppear(perform: fetchData)
.navigationBarTitle("News Headlines")
}
}
Figure 19: Displaying the navigation bar title
codemag.com
 Listing 4: Adding a new file named NewsView.swift to the project
import SwiftUI
import WebKit struct NewsView: View {
let url: String
struct WebView: UIViewRepresentable {
let request: URLRequest var body: some View {
WebView(request: URLRequest(url:
func makeUIView(context: Context) -> URL(string:url)!))
WKWebView { }
return WKWebView() }
}
struct NewsView_Previews: PreviewProvider {
func updateUIView(_ uiView: WKWebView, static var previews: some View {
context: Context) { NewsView(url:
uiView.load(request) "https://codemag.com/Magazine")
} }
} }

The NavigationView is a view for presenting a stack of views By conforming to this protocol, you need to implement the
representing a visible path in a navigation hierarchy. Figure following methods:
19 shows the List view displayed within a NavigationView
with the navigation bar title set. • makeUIView: creates the view object
• updateUIView: updates the state of the view object
You can make the text in the navigation bar title smaller by
setting its display mode to inline:

.navigationBarTitle("News Headlines",
displayMode: .inline)

Figure 20 shows reduced font size of the navigation bar

title.

Creating the Details Page

When the user taps on a row in the List view, you should
display the content of the news in another page. The details
of the news could be obtained through its url property of
the Article struct.

To display the news using its URL, you need to use a Web
browser. In the current version of SwiftUI, not all the views
are implemented yet, and this includes the implementa-
tion of the Web browser, which is available in the existing
WebKit framework and known as the WebView. What you
need to do now is make use of the WebView in your SwiftUI
application.

To do so, let’s add a new SwiftUI View file to the project and
name it as NewsView.swift. Add the following statements
in bold to the NewsView.swift file, as shown in Listing 4.

The UIViewRepresentable protocol allows you to create

and manage a UIView object in your SwiftUI application.

Figure 20: Reducing the font size of the navigation bar title Figure 21: Previewing the detail page

codemag.com Introduction to SwiftUI 69

 Once the WebView is created, you can use it by passing in Once the details page is created, you’re ready to link it with
the URL of the page to load. For the preview, you load the the ContentView. Add the following statements in bold to
CODE Magazine home page, as shown in Figure 21. the ContentView.swift file, as shown in Listing 5.

Figure 22: Tapping on a news item displays the news in more detail

Figure 23: The detail page with an empty space below the navigation bar

70 Introduction to SwiftUI codemag.com

 Listing 5: Linking the ContentView to NewsView
var body: some View { $0.image
List(articles, id: \.url) { item in .resizable()
NavigationLink(destination: .aspectRatio(contentMode:.fit)
NewsView(url:item.url) .clipped()
) { }
HStack(alignment: .top) { ).frame(width: 100.0, height: 100.0)
URLImage( }
(( URL(string:item.urlToImage ??
"https://picsum.photos/100") VStack(alignment: .leading) {
?? nil Text(item.title)
)!), .font(.headline)
delay: 0.25, Text(item.description ?? "")
processors: .font(.footnote)
[Resize(size: }
CGSize(width: 100.0, }
height: 100.0), }.onAppear(perform: fetchData)
scale: UIScreen.main.scale)], }
content: { }

WebView(request: URLRequest(url:
URL(string:url)!))
.navigationBarTitle("News Details",
displayMode: .inline)
}
}

Figure 24 shows the details view now showing the content

without the empty space. In addition, the navigation bar
also displays a title.

If you don’t want the title, simply pass in an empty string to

the navigationBarTitle() modifier:

.navigationBarTitle("",
Figure 24: The empty space below the navigation bar is gone displayMode: .inline)

Figure 22 shows how the application works. Tap on a row in Summary

the List view and the details will be loaded on the details page. I hope this article has given you a good idea of the power
of SwiftUI. Although SwiftUI is still in its early days, by the
Want to display the navigation bar title back to large text? time you read this, you shouldn’t be too far off from the
Well, you can set it as follows in the ContentView.swift file: next update of SwiftUI. By then, SwiftUI will have ported
more of the UIKit views and you should be able to develop
var body: some View { your applications entirely using SwiftUI.
NavigationView {
List(articles, id: \.url) { item in  Wei-Meng Lee
NavigationLink(destination: 
NewsView(url:item.url)
) {
...
}.onAppear(perform: fetchData)
.navigationBarTitle("News Headlines")
}
}

However, you’ll soon realize that when you navigate to the

details page, there’s a large empty space below the naviga-
tion bar in the details page (see Figure 23).

To resolve this, you need to set the navigation bar title in

the NewsView.swift to display in inline mode:

struct NewsView: View {

let url: String

var body: some View {

72 Introduction to SwiftUI codemag.com

 CODE COMPILERS

(Continued from 74)

On April 4, there are approximately 277K con-

firmed cases and 7,400 deaths. In two weeks, May/Jun 2020
that’s a single order of magnitude increase in Volume 21 Issue 3
confirmed cases and over two orders of magni-
tude increases in deaths. Worldwide on March 21, Group Publisher
there were approximately 304K confirmed cases Markus Egger
and 13K deaths. As of April 4, those statistics are Associate Publisher
now approximately 1.1MM and 60K respectively. Rick Strahl
At a high level, what these numbers confirm is Editor-in-Chief
that the USA is THE coronavirus hotspot in the Rod Paddock
world and New York City is the hotspot in the
Managing Editor
hotspot. Over the same period, New York City Ellen Whitney
jumped from 8K confirmed cases to over 69K.
Never in our lifetimes have we seen the rapid Content Editor
Melanie Spiller
onset of such a pervasive problem. With that in
mind, we need to cut ourselves a lot of slack! Editorial Contributors
Otto Dobretsberger
Jim Duffy
How are you doing? What are you doing? Jeff Etter
Mike Yeager
For many of us, working from home is old hat. Writers In This Issue
Speaking for me, it’s different. To some degree, Markus Egger Bilal Haidar
I’ve lost track of time. I’m busier and I have Wei-Meng Lee Julie Lerman
Sahil Malik John V. Petersen
to keep reminding myself to take breaks. I’m a Paul D. Sheriff
news and political junkie. I need to remind my-
self to tune a lot of that out. The old saying is Technical Reviewers
Markus Egger
“never let a crisis go to waste.” My wife and I Rod Paddock
last weekend (March 28th and 29th) cleaned out
18 years-worth of “stuff” from our attic. We had Production
Franz Wimmer
nothing better to do! With the many closures and King Laurin GmbH
where we are on the curve in the United States, 39057 St. Michael/Eppan, Italy
this new normal will be the status quo for quite
Printing
some time. Keep in contact with friends and loved Fry Communications, Inc.
ones. The new phrase is “social distancing.” That 800 West Church Rd.
doesn’t mean we need to distance socially. Keep Mechanicsburg, PA 17055
up your contacts virtually. Take up a new hobby. Advertising Sales
Dig deeper into something you’ve been dabbling Tammy Ferguson
in. Mentally, our collective mettle is going to be 832-717-4445 ext 26
tammy@codemag.com
stressed. Throughout the day, stop, take a mo-
ment, and take a deep breath. Circulation & Distribution
General Circulation: EPS Software Corp.
Newsstand: The NEWS Group (TNG)
And to those in the healthcare sector, especially Media Solutions
those in the front lines, you deserve every bit of
Subscriptions
thanks and consideration we can give you. It’s Subscription Manager
said that we’re at war and that we’re supposed to Colleen Cade
be on a war footing. Although we’re not getting ccade@codemag.com
leadership from where we should expect, we can
US subscriptions are US $29.99 for one year. Subscriptions
lead by example and do what we can as individu- outside the US are US $49.99. Payments should be made
als. Professionally, that means practicing more in US dollars drawn on a US bank. American Express,
patience with those we work with. Everyone is MasterCard, Visa, and Discover credit cards accepted.
Bill me option is available only for US subscriptions.
feeling it, and everyone deals with it in a differ- Back issues are available. For subscription information,
ent way. e-mail subscriptions@codemag.com.

Subscribe online at
Be well and let’s lookout for each other. We at www.codemag.com
CODE Magazine are here with all of you.
CODE Developer Magazine
6605 Cypresswood Drive, Ste 425, Spring, Texas 77379
 John V. Petersen Phone: 832-717-4445


codemag.com CODA: On Forcing Functions 73

 CODA
On Forcing Functions
As I write this column, the entire world is in engaged in a battle against the novel coronavirus named
COVID-19. It will be several weeks before this May/June 2020 issue is in printed and delivered. What’s
in store for us? Where will we be? Which of us will become ill? What will the state of our businesses be?
How will we or our loved ones and friends fare?
I don’t have a crystal ball. What I do know for
certain are the characteristics that will lead to
a chance at prevailing in this battle. Words that
come to mind are sacrifice, unselfishness, ac-
countability, responsibility, discipline, and em-
pathy. Whatever plans were made, they need to
be discarded.
Perhaps agility has never been more relevant.
Whether you are an independent contractor or an
employee, you’ll encounter challenges that are
common to some and unique to yourself. Never in
many of our lifetimes, have we been confronted
with an issue that so clearly has a path to success
that depends on what we all do as individuals.
Local and national governments can lay out all
the plans it wants. At the end of the day, success
begins and ends with us as individuals. And in
this case, it’s a matter of life and death whether
that be in the context of a person or a business.
COVID-19 is the mother of all forcing functions.
Mike Tyson said it best, “Everybody has a plan
until they get punched in the face.” The philo-
sophical roots of that saying go back to Prussian
Field Marshal von Moltke, “No plan survives con-
tact with the enemy.” The ancient Chinese curse
is “May you live in interesting times.” Interesting
times indeed. We must be ready to overcome and
adapt at a moment’s notice. The Cone of Uncer-
tainty we each are subject to has expanded. We
each need to be responsible because we have
our respective obligations. We each need to be
accountable because we must justify our actions.
In another context, what I’m describing is being
a good professional. In principle, that’s never a
discretionary thing. Now, by hook or crook, we’re
going to need to “live the sermon” in practice.
Chances are likely that in the middle of March,
you received directive to work remotely as part
of a social-distancing strategy to “flatten the
curve.” In my opinion, COVID-19 will forever
change our society and as a result, will change
the way we work and interact. And with that,
if you’ve not done so, you need to take time to
review your infrastructure and review your skills
on how you go about building software. You have
74 CODA: On Forcing Functions
no choice in the matter. Our industry has always
been about adapting or dying. That’s not such
an abstract saying anymore. What’s your source
code strategy? Is pair programming a core prac-
tice for your team? Are you disciplined enough to
work remotely? How will you overcome and adapt
to these changed circumstances?
The Cone of Uncertainty
we each are subject
to has expanded.
On source code control, if you’re not using Git,
you may want to strongly consider its adoption
because it’s optimized for distributed version
control. Even if you use Git, do you embrace the
pull-request model? Are your developers locally
integrating work from other developers in their
workstation? Is unit-testing a practice you em-
ploy? These and many more items will need to
be carefully considered as we continue to grapple
with the “new normal.”
“Technical debt” isn’t just limited to our code.
It can also apply to our individual skill set. The
entire premise for how we work is changing. Even
if the change isn’t so great for you, that may not
be the case for others you interact with, which
means that whether you realize it or not, it’s go-
ing to be a big change for us all. It means that
we must continually be in learning mode and we
must always be seeking ways to keep our saws
sharp. In this issue of CODE, as always, continual
learning is a hallmark. A crisis quickly reveals
weaknesses. How will you respond? The knowl-
edge, skill, and—dare I say—gravitas that we
bring to bear on the effort has never been more
important.
I remember 9/11 as if it were yesterday and I re-
member well talking to my best friend Rod Pad-
dock (CODE Magazine’s intrepid Editor-In-Chief)
on the phone while he was grappling with a com-
plete transportation lockdown. The conference
he was at came to a grinding halt and for those
first few hours, nobody knew what fate had in
store for us. This situation is worse. Nevertheless,
society tends to be able to undertake the heavy
lifting necessary to carry on. Our industry is go-
ing to be at the forefront of easing that burden’s
lift. We have an opportunity to provide unprec-
edented solutions to difficult problems. Will you
be ready to help deliver those solutions? The first
step to answering that question is whether, as a
member of a community, are you acting respon-
sibly—which has nothing to do with technology
or skill!
Before putting the final period on this install-
ment, you’ll notice the back page has a new oc-
cupant. I started writing for CODE Magazine back
in 2000. Besides taking off for a few years when
I was in law school and practicing law full time,
I’ve been in just about every issue. I’m thrilled to
be taking on this new assignment. I still plan to
cover technical content in regular contributions.
This space is about focusing on the non-technical
aspects of our industry, whether they be legal,
philosophical, political, public policy, etc. I’ve
given this space a new name: CODA. In music, the
coda is the concluding section. One of my goals
is that when CODE Magazine focuses on a theme,
this space will add a different, unique, and to
some, a provocative perspective on that theme.
For those of you who know me personally, you
know that I’m not shy about sharing my opinions
on a given topic. I look forward to expanding my
participation in CODE Magazine!
Time Warp, April 4, 2020:
How are you doing?
You’re now going to get some insight into our ed-
iting process. I submitted this article on March
21, 2020 for editing. On April 4, 2020, I’m going
through those edits with our awesome editor Mel-
anie Spiller! That’s a period of two weeks. What
happened? For reference, you may want to book-
mark the Wikipedia Page: https://en.wikipedia.
org/wiki/Timeline_of_the_2019%E2%80%9320_
coronavirus_pandemic#Case_statistics that
keeps track of the Coronavirus statistics. On
March 21, there were approximately 24K con-
firmed cases and 300 deaths in the United States.
(Continued on page 73)
codemag.com
KNOWLEDGE
IS POWER!

Sign up today for a free trial subscription at www.codemag.com/subscribe/DNC3SPECIAL

codemag.com/magazine
832-717-4445 ext. 8 • info@codemag.com
 UR
GET YO R
O U
FREE H

TAKE
AN HOUR
ON US!
Does your team lack the technical knowledge or the resources to start new software development projects,
or keep existing projects moving forward? CODE Consulting has top-tier developers available to fill in
the technical skills and manpower gaps to make your projects successful. With in-depth experience in .NET,
.NET Core, web development, Azure, custom apps for iOS and Android and more, CODE Consulting can
get your software project back on track.

Contact us today for a free 1-hour consultation to see how we can help you succeed.

codemag.com/OneHourConsulting
832-717-4445 ext. 9 • info@codemag.com