Downloaded from git.ir
[Music]
hey guys Marcia I'm excited to let you
know that next week I'm going to publish
a new course on udemy called
built available an application with Eska
Desna score and angular 2 you don't need
any prior knowledge of a statment core
but you need to be familiar with eight
less than 92 580 framework 6 and angular
2 this course is ideal for developers
familiar with HTML and MSC 5 who want to
quickly learn about a structured core in
the context of a real world application
now depending on your level of
experience there are two ways to watch
this course you can watch it as an
educational program just like my other
courses or if you have a bit more
experience or are willing to challenge
yourself you can be part of my 60 day
challenge program it's like you and I
are part of a team they're working
together on a real-world project I'm
your team leader and every week I give
you a challenge or a task to complete
you have one week to complete this task
and then the following week I will add a
new section for my course and there you
will see how I would complete that task
in a step-by-step fashion now the price
for this course is initially going to be
$50 because initially I'm going to
publish on littles first section and
then every reach I will add a new
section and the price is going to
increase to about 150 to $200 however if
you join my mailing list well you can
get the course for only $15 so click on
the link in the video description and
you will immediately get an email with
coupons to my other courses and next
week when I publish this course I will
send you another email to get the course
for $15 and by the way if you don't get
the email make sure to check your spam
folder or register with another email
and one last thing a lot of you ask me
why not put on fight because purifies
own content exclusively so my ademma
courses I cannot put them on full site
therefore use earning and more thorough
site courses are for full effect so this
course build variable application with a
splendid core and angular 2 is going to
be for udemy and it's going to be
published next week next I'm going to
show you the first hour of this course
you can see exactly what I'm going to
teach
in that course what are the requirements
and what I discuss is for you or not and
remember if you want to get the course
for $15.00 click on the link in the
video description to join my mailing
list all the best and have a great day
[Music]
hi my name is Mohammed Ani and I'm going
to be your instructor over the next few
hours in this course you're going to
learn how to build a real-world
application with angular 2 on the client
and a 2,000 core on the server by the
end of watching this course you will
have all the necessary skills to
integrate these two frameworks and build
real-world applications now in this
course I'm going to take a very
different approach from my other courses
this course is part of a 60 day
challenge program so we're going to
simulate a real-world coding scenario
together it's like you and I are part of
a team and I'm your team leader and for
a period of two months every week I'm
going to give you a task or a challenge
which involves building a small piece of
functionality and then I will also
complete the same task myself and
publish by coding videos in the
following week so you can compare your
solution with mine now if you're an
experienced developer you may start
coding straightaway complete each task
on your own and then review my solution
or if you are more of a beginner
developer you may prefer to watch me
complete each task first and then you
can code and repeat the tasks on your
own it's entirely up to you
well this course is currently in
pre-release mode and that's the
beginning of our next 60 day challenge
so right now only the first section is
published and I'll be publishing new
sections on a weekly basis if you don't
like the weekly gaps between sections
and prefer to watch the course as a
whole that's perfectly fine but you have
to wait for almost two months until I
complete all sections next I'm going to
talk about the scope of this course
you
[Music]
before we get started let me clarify a
few things about what this course is and
what it isn't so you have the right
expectations first is that our focus
will be on building a real-world
application and not to explore all
features of angular or a student core
because each application depending on
its requirement often needs a subset of
features in any given frameworks so it's
impossible for me to talk about all the
features of let's say a subnet core or
anything where core and how they are
different from the previous version
that's not the scope of this course and
requires a separate course in this
course I'm assuming you're familiar with
angular 2 and the previous versions of a
statement and entity frameworks that is
800 mb c 5 and any different work 6 and
want to quickly get up to speed with
dotnet core in a hands-on and pragmatic
way so our focus here is on building a
real-world application using the latest
technologies now this app even though
it's a real world application it's not a
complete and sophisticated app with a
fancy user interface like those popular
web apps out there these apps especially
those with complex features and fancy
user interfaces are built by a team of
developers working together for several
months or longer also in such teams
there are other practices like
continuous integration continuous
deployment automatic testing and so on
so it's not something that I as one
person can demonstrate within seven to
ten hours and even if I extend the scope
of this course to 50 or 100 hours it's
not going to be useful because both you
and I will lose momentum and get lost in
detail along the way so from a teaching
point of view this is not going to be
effective instead we're going to build
an application with a few basic
functions mostly centered around crud
operations so you're going to learn how
to build forms with angular that talks
to back-end API is built with a 2008
core and to make the application more
interesting I've included a few complex
use cases based on the students feedback
like cascading drop-down lists and
dynamically render checkboxes and so on
also we're going to look at filtering
sorting and paging data we're going to
look at handling and login errors
displaying toast notifications but note
that this is not real-time notification
coming from the server just a toast
notification we are also going to look
at ossification and authorization with
multiple roles having different
permissions we're going to look at
preventing CSRF security attacks we're
going to look at uploading photos with
progress bars displaying charts dialog
boxes and so on depending on your level
of experience you may find this the
right level for you or you may think
this is too easy
so I'm explaining this to make sure
you're at the right level for this
course if you are looking for an
application with a complex domain and
want to learn about domain driven design
or design patterns continuous
integration automatic testing this
course is not what you're looking for
having said that you're welcome to
extend this application and add new
complex features but that's not within
the scope of this course also this
application is going to have a very
simple user interface so our focus is
not on something that is visually
outstanding that's the job of a UI
designer not a programmer if you're good
at designing user interfaces it's a
bonus it helps you stand out from the
rest of the crowd but it's not something
that is expected from you and one last
thing about the 60 day challenge program
as the title of this program says this
is all about challenging you and helping
you take your coding skills to the next
level so as you're building these
features you may get stuck you may get
compile time or runtime errors or
certain things may not work on your
machine you're welcome to use the
discussion board to post your questions
but you cannot expect me or others to
help you solve these issues that's your
job as a developer because in the real
world when you are part of a team every
single day you will encounter tens of
issues like that there you don't have me
or other students in the course to help
you so you need to do your own research
and find a solution and the first thing
you need to do is to jump on google and
type the error message or the problem I
can guarantee that in more than 90% of
the cases you can
find your answer on the first page of
Google and guess what that's exactly
what I do when I encounter issues so if
you gonna post your question and expect
me to help you chances are I may not
know the reason why you're having a
problem on your machine because I don't
know everything yet in this course I'm
your instructor but I'll say this I'm a
student myself so when you're asking is
something that I don't know I have to
jump on Google and do research on your
behalf and this will prevent you from
growing if you want to take your coding
skills to the next level if you want to
get a better job with better pay you
have to earn it
and yet it's not easy it takes time
sometimes you have to stay up till 3:00
a.m. in the morning
nobody said is easy but if you're
passionate if you're determined you can
earn it we can get senior developer with
a good job with a good page and that's
the whole purpose of this 60 day
challenge program to push you out of
your comfort zone okay now that you know
exactly what this course is and what it
isn't let's take a look at the
prerequisite in more detail
[Music]
in order to take this course you should
have at least three months experience
with angular 2 asp.net MVC 5 and energy
framework 6 but you don't need any prior
knowledge of a solid core or any
framework or I'm going to introduce you
to these frameworks in a programmatic
way along the way
so more specifically when it comes to
angular 2 you should know your
components services modules dependency
injection property and even binding
forms and routing when it comes to 18.9
MVC you should know your controllers
actions model binding HTTP verbs like
get post put and delete and finally when
it comes to any framework you should
know your code first migration link and
dbcontext so if there are areas that
you're not quite familiar with I highly
recommend you to watch my related
courses on udemy that includes angular 2
with typescript for beginners to
complete a southern mc5 course and any
framework 6 in depth
all right enough introduction now let's
take a look at the requirements for the
application we're going to build
[Music]
so we're going to build a web
application for an imaginary vehicle
dealer called
Riga let's say you want to sell your car
you call Vigo talk to someone on the
phone and ask them to register your car
in their database other people who are
buyers can browse the vehicles in their
database and if they're interested in a
vehicle they will call viga and talk to
someone on the phone and the rest of the
process happens offline at that stage so
this is a big picture now as part of
recording a vehicle for sale we need to
know it's make its model its features so
basically there are a sort of standard
features like ABS brakes airbags bottle
holders and so on so here we have a many
to many relationship between vehicles
and features a vehicle can have many
features and a feature may be available
in many different vehicles we also need
to record whether a vehicle is
registered or not the owner's name and
contact information and finally we
should also be able to upload one or
more photos for each vehicle so the
simplest solution to this problem is to
have a page where we see all the
vehicles in the database on this page we
should be able to filter and sort
vehicles if there are more than 10
vehicles we should display them in pages
and from this page we should be able to
click a vehicle to see its details we
should also have a page to add a new
vehicle to the database also in terms of
authorization we need two different
roles here one is the moderator role and
this includes viga personnel who talk to
sellers and buyers on the phone they can
create update and delete vehicles in the
database we also need an admin role and
anyone in this role has additional
privileges for this imaginary app we're
going to display a report of vehicle
sales right there makes in a pie charts
like this so anyone with admin access
can view this report and finally if
someone hasn't logged name they should
only be able to browse the vehicles so
we're going to hide the buttons for
creating updating and deleting vehicles
here okay now that you know what we're
going to build let's start
setting off our development environment
[Music]
all right to set up your development
environment first you need to head over
to Microsoft comm slash net slash core
on this page you can see the
installation instructions for your
operating system so if you're a Windows
user the simplest way is to install
Visual Studio 2017 and this will bring
all the components you need so you don't
need to do anything else but in this
course I'm not going to use Visual
Studio I'm going to use Visual Studio
code which is a very lightweight and
fast editor it's not a full IDE like
Visual Studio but it's a very powerful
cross-platform
code editor so whether you're using
Windows Linux or Mac you can use Visual
Studio code which we call vs code now
what I want you to do is in this course
for the next few hours
forget about Visual Studio and let's
build this application using vs code I
know that you might be used to using
Visual Studio but trust me vs code is
much better in fact
I personally have not used Visual Studio
for over a year so if you're on Windows
on the stage go to command line
you need to download and install dotnet
core SDK and then to get Visual Studio
code simply head over to code that
Visual Studio
now back to this page if you're in Linux
or a Mac user once again you can go to
this page and on this page you can see
the instructions for installing dotnet
core on your version of Linux the
instructions are very easy you simply
copy paste if you commencing terminal
and download net SDK and once again you
head over to code Visual Studio comm to
get vs code once you install vs code you
need to add a few extensions so you can
write C sharp code in it so first we
need to go to the command palette on Mac
the shortcut is shift command + T and
windows is shift control P so here's the
command palette type install X short for
extension and now if you scroll down you
can see this command here install
extensions here you can see the
extensions that I have installed so I've
got this angular v2 typescript snippets
and with this we can easily create an
angular component or a service by using
a code snippet and I'm going to show you
how this works later in the course so to
install this extension or any other
extensions simply type its name here
like angular v2 and now you can see all
the extensions available in vs code
Gallery in front of each extension you
see this install button so simply
install it and then you need to reload
vs code for the extension to take effect
now let's go back and see what other
expansions I have installed here
I've got another extension asp.net
helper which makes it easier to develop
a dotnet MVC application i've got auto
import which is extremely powerful when
you're writing typescript code you have
to constantly go on top of the file and
add import statements with this
extension you can automatically import
the classes you have used in the current
module again I'm going to show you how
this works later in the course I also
have beautifying which is for formatting
JavaScript and HTML code it's not really
essential but it's a nice thing to have
now C sharp and C sharp extensions are
the two essential plugins that you need
to install it will give you a syntax
highlighting code completion and so on I
also have darker here but this is not
necessary it just gives you syntax
highlighting when you're working with
darker files here is another extension
which is optional MS sequel so with this
you can connect to a sequel server
database look at your tables write
queries and so on and finally here's
another extension restclient again this
is optional with this you can call
restful endpoints now these are the
extensions that I have been using but
there are hundreds or thousands of
extensions available in vs code gallery
so feel free to go and explore them on
your own
and now finally we need to install a
couple of node package x one is yeoman
which is a web scaffolding tool for
modern web applications so in Visual
Studio when you create a new project you
automatically get a bunch of folders and
files that come from a template the s
code doesn't have this feature so we
need to use yeoman to generate a
template for our new project so NPM
install - G yo now yo is just an engine
we can install templates on top of this
engine so the template we're going to
use from a 2008 core and angular 2
application is called generator - a
spinet core - spa
so let's quickly recap if you want to
use Visual Studio you need to install
Visual Studio 2017 otherwise if you
don't want to use Visual Studio which is
the approach I'm going to take first you
need to install document core SDK then
you need to install vs code as your
editor you add extensions that I told
you about
and finally you install you'll and
generator - a split core - spa now on
top of all these we also need sequel
server when you install Visual Studio
2017 it automatically comes with a
lightweight version of sequel server
which is called sequel Express if you're
using a Mac or Linux you don't have
Visual Studio 2017 so you need to
install sequel server using a darker
image and that's what I'm going to show
you in the next lecture
to install sequel server on Mac iOS or
Linux we need to use a tool called
darker which basically automates
and simplifies the deployment of
applications and it solves the issue
that your application works on your
machine but when you deploy to a
different machine it doesn't work we dr.
we package our application along with
all its dependencies and configuration
settings into an image and then we can
deploy this image to a different machine
with only one command this command will
load our application with all these
dependencies into what we call a
container now sequel server for Linux
comes at a darker image which means the
software along with all these
dependencies are packaged inside this
image and we're going to use this image
to install it on our machine so if you
have an installed docker
simply head over to docker calm on
docker website go to this page get
darker and here you can find downloads
for Windows Mac OS and different
distributions of Linux
now after you install darker the first
thing you need to do is to configure the
memory allocation so here's the darker
icon click you can see docker is running
sometimes you may run into issues you
can simply restart it here now let's go
to preferences on this page in the
Advanced tab look here I've set the
memory to 4 gigabytes why default it's 2
gigabytes so you need to increase it to
4 gigabytes in order to run the sequel
server image once you do that it's going
to take a few seconds until docker is
restarted now in terminal let's make
sure docker is running so simply type
docker beautiful now we need to pull the
sequel server image from docker registry
so sudo darker pool Microsoft / ms SQL -
server
- linux with this we download the sequel
server image into our machine alright
now we want to run this image inside a
container so sudo docker run we need to
set an environment variable - II except
underline EULA which stands for end-user
License Agreement we set this to why
and note that I have put this
environment variable inside single
quotes next we need to set another
environment variable so - e this one is
s a password and here we need to use a
complex password if you use a weak
password you're going to get a runtime
exception I'm going to talk about that
later in this video so to make sure that
you will have a smooth experience as
you're going through this course use the
password that I'm going to use in this
video my with capital M complex with
capital C password with capital P
exclamation mark two three four
and close the single quote thanks we
need to map a port in our container
support in our host machine so - P for
the port
14:33 - 1433
so we're mapping the port 1433 in our
container to this port on our host
machine and we're going to use this port
when connecting to sequel server from
our web application now if you're using
Linux you can also map a volume in the
container to a volume on your host
machine and this will allow you to
perceive your database between container
executions so if you restart the
container if you restart your machine
your database is going to stay there
unfortunately at the time of recording
this video this feature is not supported
on Mac however if you're on Linux you
add - v4 mapping the volume first you
add the volume on the host machine like
user my database that's the folder
that's the pass code on to map and then
you add slash bar slash up / ms SQL once
again this doesn't work on Macs I'm
going to remove it
next we add - see - learn this as a
background service and finally we need
to add the name of our image that's the
image we downloaded earlier so Microsoft
/ ms SQL - server
- Linux
beautiful sequel server is running now
here unlike Windows we don't have sequel
server management studio so if you want
to connect your database there's two
ways if you're on Linux head over to
this link on the screen
Wheatly slash SQL server tools this is a
page on Microsoft website and here you
can see the instructions for installing
sequel server command-line tools for
various distributions of Linux
but if you're on a Mac you can use
sequel Pro which is similar to sequel
server management studio so simply head
over to Mac sequel client comm and by
the way this is a commercial application
there is a trial version which is I
think about 30 days and then you need to
get a license but that's reasonably
cheap it's only about 100 Australian
dollars which is about perhaps 70 US
dollars
once you run sequel Pro you can go to
connect on this window go to Neil here
we add the server name which is
localhost for authentication we're going
to use sequel server authentication with
SA at the username and password is going
to be my complex password exclamation
mark two three four
save beautiful if you
that our servers online so
to the server now currently we don't
have any databases here but later in the
course when we create our database we
can come back here look at our table
look at our data run queries and so on
now what if something goes wrong while
you're running the sequel server image
let me show you how to troubleshoot this
problem so I have open another terminal
window I want to show you the docker
containers that are currently running so
docker PS you can see I have one
container this is the ID of my container
this is the image that this container is
based on which is Microsoft sequel
server Linux now I'm going to stop this
container so it's docker
stop and then I need to add the
container ID we can only use the first
three or four letters so e8 CF now one
of the issues that you may run into is
that you run the sequel server image but
it automatically terminates so when you
run docker PS you don't see anything and
then you can run docker PS 8 to see all
the previous containers and here you can
see I had this container that terminated
29 seconds ago so that's one of the
issues you may run into so when you use
the sequel pro or sequel server command
line tools the server is not running
then you come to the terminal
you're on docker PS and the container is
not there what happens so let's simulate
a scenario where you run into an issue
so I'm going to run the docker again but
this time I'm going to use a weak
password so sudo docker run - e-except
underline EULA set it's why another
environment variable is a password I'm
going to set it to 1 2 3 4 map support
run it as a daemon
and here is the image base server Linux
in here we just got a container ID so
dr. PS and the container is not there it
terminated automatically so we need to
find the log for this container and then
copy it somewhere in our host machine so
let me go to the desktop here create a
folder log now I need the ID for the
last container so once again darker PS -
8 which is short for all ok so here is
the last container ID be 35 F so now dr.
C P short for copy be 35 s :
and our log is inside this path in the
container slash bar slash opt / MS
sequel slash log slash error log as the
name of the file now we want to copy
this to the current folder
now you can see here in this folder we
have this error log file we can open
this with vs code or any other editors
so code period and have our log so if
you scroll to the bottom of this log
you can see this error here passport
validation failed the password does not
need sequel server password policy
requirements and it's the reason we
couldn't start this container alright
our environment is set up next we're
going to create our a that's net core
project
okay now let's create a new project so
I'm going to create a new folder here we
go go inside this folder and then use
the oh man
to generate a project so yo and then we
add the name of our template which is a
phonetic or - spa
so all yeoman templates they're NPM
package start with generator - but the
actual template name doesn't have
generators - all right so this is yeoman
and the version of my ethernet cord
template is zero point eight point seven
the first question here is the type of
framework you want to use on the client
side we've got angular aralia knockout
react react with redux and blue so I'm
going to use angular the next question
is about the type of project we want to
use so previously before the final
release of Visual Studio 2017 Microsoft
introduced a new project type which is a
JSON file called Project JSON they were
working on this as a replacement for CS
proj files because the approach was very
complicated very heavy
whereas this project that JSON is very
clean very lightweight and consistent
with other frameworks however in the
final release of Visual Studio 2017
Microsoft decided to drop project by
JSON and go back to those CS project
files so this project that JSON is only
here for negative reasons and all the
future projects will be based on CS proj
so let's select this one here
is about unit tests do you want to
include them not at this stage now the
project name which is the same name as
the folder ok yo man created a bunch of
files and folders here and now it's
going to NPM we download and install all
the node modules here ok our project is
ready now let's run it there are two
ways to run this project one way is here
in the terminal so from the project
folder we execute the met run so just to
build our application and then launch a
web server at this address localhost
45000 so when we navigate to this
address this is what we get it's a very
basic web application using angular 2 on
the client and a subnet core on the
server in the nav more we have three
pages here home counter and fetch data
this page shows an example of an API
built with a standard core and an
angular component that consumes that API
so all this data you see in this table
are coming from the server now we're not
going to work with these pages we're
going to delete them we're going to
build an application from scratch now
there is a second way to run our
application so here in the terminal I
want to stop this process so we press
ctrl + C
now I'm going to open this envious code
so code period and this will open our
visual studio code pointing at the
current folder now chances are this may
not work on your machine let me show you
how to fix this problem
so just open up vyas code manually go to
the command palette so shift command and
P on Mac or shift ctrl P on Windows and
search for command the first item is
installed code command in pass so when
you execute this then you need to
restart your terminal window and then
the path will be affected so you can go
to any folder and type code period now
the second way to run our application is
from inside vs code so if you don't want
to switch back and forth between the
terminal you can do it here so press
control + backtick which is the key
before number one on your keyboard so
here inside vs code we have our terminal
and once again we can run stuff net
run here next we're going to look at the
files and folders in this project
terminal window is still open and can
hide it by pressing ctrl + backtick
again okay now we can open up the files
and folders panel by pressing command +
b on mac or control-d on windows so
let's quickly explore what we have in
this project this client app folder is
where we have the client-side code the
angular app so we have this app folder
we have our app module we have our
components exactly like other angular
applications we also have controllers
and views which belong to a standard
core exactly like 8 month on nbc5 we
have a new folder dub-dub-dub root and
this is where we put the public assets
of our application for the client side
so here we have the icon for our
application we also have this disk or
distributable folder and inside this
folder we have a couple of JavaScript
files one is main - clients and this is
the compilation of our angular
application into JavaScript we also have
rendered ojs which is the compilation of
all the third-party libraries here and
similarly we have rendered the CSS which
is the compilation of all third-party
style sheets in this project so in your
applications you need to put the public
assets inside this dub-dub-dub root
folder that includes any images font
icons and so on now this is different
from the previous version of a stunner
so in 811 nbc5 the project route was
considered the route of the web
application and then if you wanted to
exclude some folders we had to blacklist
them now in a plasma core Microsoft took
a different approach so the project
route is blacklisted and this depth of
the root folder is white listed with the
structure the chances of something
private being accidentally exposed to
the outside
is reduced okay let's see what else we
have here have this app settings JSON so
in a plasmid core this is where we store
our application settings
it's a previous version we use with the
country for that and also here we have a
hierarchy so you can see we have
multiple levels here we have logging
under that we have log level and under
that we have these three key value pairs
in web config we didn't have this
hierarchy so we had a bunch of key value
pairs under app settings and if you
wanted to create a hierarchy it was a
little bit complicated but it is loaded
core this is inherently supported and
it's really easy to access
turning as I'll show you later in the
course now we have a couple of new files
here program and startup and this is
where our application starts there's
more detail involved so I'm going to
talk about that in the next lecture so
let's move on here we have our CS proj
file and this is a project file that
Visual Studio recognizes so if you don't
want to use vs code you can open this
project in Visual Studio 2017 next is
our web config and you can see it's
really simplified there is nothing
happening here the only have system that
web server which is for configuration of
iis and nothing else and finally we have
a couple of web pack configuration files
so web pack if you have worked with
angular CLI you should be familiar with
that
it's a bundler for client-side code so
it can compile and minify all our
JavaScript and stylesheet files now in
this code we are basically telling web
pack where our source files are how they
should be processed and where they
should be stored for example here we
have a property called public pass which
is set towards disk folder so with this
configuration when web pack bundles our
client-side code it will store it inside
this folder as I showed you earlier
which is under dub-dub-dub root now for
the most part you don't need to modify
this web pack configuration file but
sometimes in some projects you may need
to modify this configuration that's
beyond the scope of this course you need
to look at web pack documentation and
finally we have one more web pack file
which is web pack that config the vendor
the j/s so in this file we have the
configuration for compiling all the
third-party libraries so let's have a
quick look here if you scroll down
and three vendor here you can see all
the third-party libraries so we've got
angular bootstrap and so on so in the
future when you want to add the
third-party library you're going to come
back and add it to this file so this is
a basic project structure in the next
lecture I'm going to talk about
applications Garner
now let's take a look at this program
that's es if you have built console
applications with c-sharp this file
should look familiar to you so in every
console application we have a class
called program with a method called main
which is the entry point or application
a branded core applications are similar
to console applications in that regard
so here is the main method over these
few lines we are configuring and running
a web server to host our application a
subnet core comes with two in process
HTTP server implementations one is
kestrel which is cross-platform it can
run on Mac Windows and Linux and the
other is web listener which is only for
Windows now kestrel is a new web server
it doesn't have all the features of IRS
or Apache it's not very secure but it's
good enough to be used in an internal
network so if you're building an
application for internal use you can use
Castro but for a public facing website
you need to put tetryl behind IRS on
Windows or Apache on Linux now the
explanation of details of that is beyond
the scope of this course but all I want
you to take away is that Castro is an in
process HTTP server implementation that
comes with a standard core now back in
the main method here we are telling to
use Castro we're specifying the route of
our application you're enabling iOS
integration and specifying the start of
class finally when you build a host you
run it and at this point Carol starts
listening on port 5000 of localhost now
let's take a look at the start of class
so we command on P on Mac or ctrl + P on
Windows you can easily find a file here
startup that here we have two methods
that are automatically called at one
time one is configured services and the
other is configure
consumer services is used for dependency
injection we should be familiar with
dependency injection in angular 2 so in
angular if our components have
dependencies that should be provided to
their constructor we register these
dependencies as providers at a module we
have the exact same concept here so in
April at midcourt if our controllers
have dependencies that should be
provided in their constructor we need to
register them here so this method has a
parameter of type I service collection
which is a container for all the
dependencies in our application so here
I can register a dependency like this
services does add transient but don't
worry about what is this method just
look at its syntax this is a generic
method with two generic parameters the
first one is an interface like I
repository and the second one is an
implementation like repository with this
for registering repository as an
implementation of this interface I
repository and then anywhere in our
application if we have I repository in
the constructor of a class the runtime
will create an instance of the
repository class and injects it into
that class so this is dependency
injection now the second line here add
MVC if you look at the implementation of
this method there there a bunch of
statements like this so when we call
this method it registers a bunch of
interfaces under implementation that are
part of a spewed out net MVC or it's not
that core itself okay now let's move on
now the second method configure over the
first two lines here we're considering
the logging of our application so we add
console as a log so anytime we write
something to the log it appears on the
console right here and this is good for
development but in a real world
application in the production
environment you want to use a persistent
lock so we can add file system database
or remote source we can register those
logs here now the second line is adding
a debug logger
anytime we have debug flightline it will
appear in our lock now the rest of this
method to configure the request
processing pipeline so when a request
comes in the web server imagine it goes
through a pipeline in this pipeline
there are multiple components which we
call middle where each middleware is
like a function it looks at the incoming
request and if it's interested in that
request it will do something with it
otherwise it just skips now the previous
version of asp.net in is not on nbc5 our
request processing pipeline was fairly
heavy weight and we didn't have control
over configuring this middleware in a
thematic or we can customize this
request processing pipeline and add only
the middleware that we need and this way
we can improve the performance of our
application because CPU resources are
not wasted for middleware that we don't
need let's take a look at a few examples
so here if you're in a development
environment and by the way I'm going to
talk about different environments in the
next lecture so if you're in the
development environment we add a couple
of middleware one is developer exception
page which renders an exception with all
its details and the other is web pack
div middleware
so anytime we change one of our client
side files like a CSS or JavaScript file
web pack will automatically compile as
and push the changes in the browser so
we don't even need to reload the page
this is called hot module replacement
and these two middleware are only used
in the development environment we can
run this in the production so this way
we can configure what middleware we want
to have in our rico's processing
pipeline
here is another middleware use static
files with this will be able to serve
static files like images style sheets
and so on
so if I comment out this line we won't
be able to serve any images or statuses
from our application and this is a
middleware that every a student
application needs and finally the last
middleware is MVC so MVC is nothing but
a middleware when a request comes in
this middleware looks at the request and
based on a route it will forward it to
an action in a controller that's MBC so
when setting up this MVC middleware you
have a lambda expression where we define
our wrap template and that's all about
middleware now for the most part you
don't really need to modify any of this
stuff here this is just boilerplate code
but I wanted you to know what middleware
is and where you can configure the
middleware for your application next I'm
going to talk about the concept of
different environments like development
staging and production
all right now let's look
about environments so when we run dotnet
run note that my hosting environment is
set to development here so in a 2008
core we have this concept of
environments we have development
environment staging and production in a
thousand nbc5 we don't really have this
concept built into the framework and we
had to do some tricks with web config to
implement this now in the last lecture I
told you that when we are in the
development environment we have this web
pack dev middleware and this enables hot
module replacement so anytime we change
our client-side files like HTML CSS and
typescript web pack detects the changes
does any necessary compilation and
pushes the changes into the browser so
we don't have to reload the page let me
show you how this works so in the
browser at localhost port 5000 I'm going
to go to the stretch data page now I'm
going to open up Chrome developer tools
this is our console tab
note that here we have this message H M
are connected hm R stands for hot module
replacement if your machine is
configured as the staging or production
environment you are not going to see
this message now I'm going to show you
how to change the environment for your
machine later in this video
so back in vs code I'm going to go to
fetch data that component that HTML here
I'm going to add it to in the title for
use page save in the console tab you can
see that webpack rebuilt our bundle we
know that you can see the updated
modules so these are the modules that
are affected as a result of this simple
change
so our fetch data that component that
HTML the component that uses that
our app module and boot - Klein's RTS so
these files are modified or compiled and
the changes are automatically pushed to
the browser so back in our application
we can see the updated title and I
didn't refresh the page so we web pack
dev middleware anytime you modify your
client side code assuming that you are
in the development environment changes
are automatically pushed to the browser
and you don't need to refresh that's
great I totally love it now here is the
thing when you create a project using
the approach I show you in this section
your machine will not be in the
development environment if you create a
project with Visual Studio 2017 there is
a setting there that marks your machine
as a development machine so how can we
change this if you're on Windows you can
open up your terminal and type set
exponet core under line environment to
development this is an environment
variable and a speed out that looks at
the value of this variable to determine
your environment like your Mac or Linux
you type export a spinet core under line
environment and you save it to
development then when you execute dotnet
run your hosting environment should be
development however this approach
affects only the current session the
current terminal so if I open up a new
terminal window and run just net run my
environment is not going to be
development it's going to be production
there is a different approach to setting
this environment variables at the
Machine level on Windows you need to go
to control panel system advanced system
settings and there there is a button for
adding environment variables now I don't
have Windows here
so you need to do it on your own it's
really easy if you get lost you can
simply google it are tons of videos and
tutorials on this topic
on Mac OS and Linux you go to your home
directory so this is my home directory
now here we need to edit our bash
profile so code to open up vs code dot
bash underlined profile note that at the
end of this profile have added export a
sped-up net core underline environment
to development this will apply this
environment variable at the machine
level and I don't have to repeat these
steps every time in a terminal window
now here's a critical step I want you to
stop watching the videos now and go
ahead and set this environment variable
at your machine level this is critical
because later in the course when you are
working on the client-side code if
you're in the production environment you
keep changing the code and saving and
refreshing your browser but you don't
see your updates so make sure to change
the value of this environment variables
to development at the Machine level so
later
you won't have any problems
all right this webpack def middleware
only deals with the client-side code so
if you modify server-side code it's not
going to be notified so I'm going to go
to home controller in the index action
I'm just going to throw an exception
save now back in the browser if i
refresh the page I don't see my change
because our server-side code is not
recompile so we need to get back to
terminal stop this process and run
dotnet run again but this is very
tedious we don't want to stop this
process and run it again every time we
modify our c-sharp code so let me show
you a better way in google search for
dotnet watch so here the first link is a
github page eight minutes slash dotnet
tools under space if you scroll down
you can see a link to dotnet watch now
on the.net watch page we can see this
code that you need to copy and paste
into your CS project file so coffee I
can vs code I'm going to go to Vega dot
CS proj and just below the project
element I'm going to paste this code so
we have an item group and inside this
item group we have a dotnet CLI tool
reference and hearing the include
attributes we can see the name of the
assembly microsoft.net watch our tools
save now back in terminal we need to run
dotnet restore this command we'll look
at the references in RCS project and
we'd get them from new gaps just like
how we do npm install this is the
equivalent for the server-side code
alright now if you run dotnet watch
beautiful it's working so instead of
dotnet run we're going to run dotnet
watch run and this will set up a
listener so anytime you modify your
c-sharp code it will automatically
recompile your code on the fly so this
is my latest code I'm throwing an
exception here and when I navigate to
localhost for 5,000 I get this exception
now back here I remove this line save in
terminal you can see the watch to notice
a file change which is home controller
that's es so it will compile on our
application and restarted the server now
this process restarting the server often
takes a second or two so during that
time your real application is not going
to be accessible
alright now back here if i refresh
my home page is working so before going
any further add dotnet wash your
projects
okay one more thing I want to show you
here in vs code if this debug panel here
the shortcuts a Mac if shift command and
D and on Windows is shift control D so
here we have full debugging experience
just like Visual Studio on this panel we
have the list of local variables below
that we can add watches here we have our
call stack and below that we have all
the breakpoints in the application so
here in the index action we can put a
breakpoint on this line exactly like
visual studio we can also add or remove
a breakpoint using f9 okay now we can
start the debugger with f5
however in debug console note that we
have an i/o exception and it's coming
from server but kestrel the DLL now if
you look at the stack trace you can see
this error message here port already in
use and the reason for that is because
we have started our server on 45000 in
our terminal window so this port is
already in use we need to stop this
process get back here and restart the
debugging session so with f5 now
this point dotnet crashes you can simply
ignore it and restart the debugger so f5
one more time so this will launch a new
browser window and now you can see my
breakpoint is activated all the
shortcuts we have in Visual Studio for
debugging codes are also available here
so with F then we can step over a line
with f11 we can step into a method with
shift and f11 we can step out of it we
can restart the debugger using shift
command and f5 on Mac or shift control
f5 on Windows and we can stop the
debugger using shift and f5 now if I
open the debug panel with shift command
and D looks we've got our local
variables here our watches or call stack
and all the breakpoints
and the last thing I want to show you
here is this kid panel again look at the
shortcut control shift and G so here we
can initialize our gift repository
you can see all the files that are
changed you can click any of these files
and do a disk but in this case because
all these files are new there is no
previous version and finally can commit
them to your git repository right here
so initial commit you can also work with
get in the terminal so get add
everything get commit whatever now if
you're not familiar with git that's
perfectly fine don't worry about it it's
not something that you need to know in
order to take this course but if you're
a bit more experienced I want you to
know that here you can also use get
inside vs code so our project is ready
and you have some familiarity with these
new tools for building a student core
applications next we're going to revisit
our legal project requirements and get
ready for our first challenge
one of the car
I get from my students is mush how do I
get started I've got this project I
don't know what is the first step I
don't know what to do next so in this
lecture I'm going to show you a
systematic approach to build software
every software application starts with
the requirements document
now this requirements document can be
one page it can be 500 pages or it can
be just a variable discussion between a
few people irrespective of how big those
requirements document is your first task
is to extract the use cases in this
application use cases are the actions
that the user can perform here are some
examples the user should be able to
create equals update vehicles real
vehicles source them filter them upload
photos and so on just write this down on
a piece of paper keep it very simple now
once you have these use cases you need
to find their dependency so we can start
anywhere in the list let's say filter
vehicles in order for us to build this
feature first when it's a list of
vehicles and in order to build this
vehicle list first we should be able to
create vehicles so we can store them in
a database and then we can view them in
a list so here is the order to implement
these use cases you're going to start
with creating a vehicle first once we
deliver that function then we move on to
the second step the second task which is
listing the vehicle and finally the
third task filtering vehicles now what
is critical for you to understand here
is that when you're building the list of
vehicles you should not worry about all
the other fancy features like filtering
sorting pagination and so on this is a
mistake that a lot of junior developers
make they try to do so many things at
once and that's why they get lost in
detail and deliver poor quality software
so focus entirely on building a list of
vehicles and that list doesn't even have
to be fancy render the vehicles in a
very simple list once it's working then
you can make it look better you can
apply some styles we can add icons and
so on once you deliver that feature that
move on to the third step
so three
at this point you should isolate your
mind and you shouldn't think about
anything else like this is the only and
the last feature of this application you
need to build so in our current
dependency graph we're going to start
with create vehicles use case now for
this use case what I do is to sketch a
simple form so earlier in the
requirements I told you about the
attributes of the vehicles we need to
store so every recall should have a make
and model and if you other attributes so
here in our form we need to drop-down
list for the vehicle make once the user
selects a value from this drop-down list
then the model drop-down list should be
repopulated because models are based on
the make now what is important here is
that the items in these two drop-down
lists come from the server because in
our application somewhere in our
database we need to register all the
standard makes and models now similarly
we need a list of features that are
available in this vehicle
so here we need a checkbox list and the
items in this list are rendered
dynamically so again we need to store
the list of standard features in our
database and this data should come from
the server so back to our dependency
graph you want to build this feature
create Vico in order to build this first
we need an angular form now this form
needs its data from the server so in
order to build this form first wait on
API we need one or more API end points
so we can get the data to populate this
form next in order to build this API we
need a database to store our data but
how do we create our database we're
going to use any D framework code first
migration so first we create our domain
model and then use code first migrations
to generate or update our database so
this is the approach that I always
follow in every project now we want to
reduce the scope here you want to focus
on a small piece of functionality so
first we want to build this API and
that's your first challenge so over this
week I want you to build these two API
endpoints to get the list of vehicles
makes and their models as well as their
feature so everything you learned in a
flood and nbc5 to build api's applies in
asp.net core as well there are some
subtle differences so I have attached
with PDF for you to this lecture where
you can find all the necessary
information about transitioning from
8085
to asp.net core for the purpose of this
exercise sometime next week I'm going to
publish my solution so you can see how I
will go ahead and build this feature
step by step so go ahead get started and
I'll see you next week
so I hope you've been watching this
video up to this point if you want to
have this course for $15 click on the
link in the video description and join
my mailing list now next week when I
publish the course I will send you a
coupon to get the course thank you and
have a great day