AngularJS Tutorial - Part 6 - CRUD Application Creation Video Lecture - IT & Software

so today I'm going to be demonstrating
creating a web application and it's a
pretty standard kind of web application
which we call a crud application we can
talk more about that in a moment but
basically something that's capable of
listing displaying changing updating and
deleting stuff for some reason whenever
people demonstrate creating cred
applications it's always a to-do list so
we are not going to be any different and
we are going to create a to-do list but
it's interesting to think about for
example what if you're creating an email
application you're basically listing
displaying creating deleting emails for
example so you know crud applications
pretty widely applicable and the stuff
that we'll be seeing today you know it's
fixable enough I think you be able to
use it quite widely I'm going to be
showing a particular set of tools so
there's a back-end part and we'll talk
about what that is in the moment but the
stuff that runs on the server and that
will be written in c-sharp and web api
with sequel server and entity framework
code first that whole section is like
you can replace that with anything you
like really really easily and I'll be
showing how to replace it with Python
and sequel late today
in fact because that gets late very very
fast very very simple doesn't do very
very much at all the interesting part is
all at the front-end the stuff that runs
in your browser and I'll be showing how
to use framework called angularjs which
is a framework that comes out of Google
and it's quite mature because they've
been using at Google for quite a while
it's a very sophisticated and very
complete framework to make it really
easy to write pretty powerful web
applications it's a bit of a learning
curve and the documentation is very
complete at the moment but it's not as
friendly as it could be so hopefully
this tutorial will fill in a gap around
getting started with it
I'll also show how to make it look like
not totally or
all by stealing styles from bootstraps
to know if you guys have seen bootstrap
before but it's something that came out
of a couple of guys at Twitter to
basically make it really fast and easy
to make your websites not look too sucky
I'm not going to spend any time making
it look any good but just slightly
unlucky but the nice thing about
bootstrap is again it's very flexible
and so it's very easy to make it look
pretty good you can even download themes
and make it look as nice as you like and
I'm actually going to make this
end-to-end which means I'm actually
going to get this website up and running
on a public public facing server that
anybody can access because that's a
piece of people often miss and I want to
show you how easy even that is because
it's no good if it's just running on
your own laptop so let's get straight
into it
unless anybody has any questions so
we're going to start with the backend
and let's first of all have a look at
what it is that we're going to be
building so here is the finished product
as you can see it is a to-do list and it
basically can do a number of things so
let's kind of try and enumerate what
those are so that we may as well just
type set so it's going to be able to
list to do's and then within that we
want to be able to search through them
you want to be able to sort them we want
to be able to paginate them in other
words if there's lots and lots of them
we don't want to like download the
entire set at once but rather be able to
download a page at a time
then we need to be able to edit to do
that already exists or create a new one
and also need to delete if we change
these words slightly to oh and also we
want to be able to display the details
of an existing one so if we change these
slightly to retrieve and change the
order slightly so we're going to create
retrieve in a sort of edit we'll call it
update you'll now see we have
right so this is why this is called Oh
crud application the retrieved it is
both a single one and also a list of
them so the way we're going to do this
is let me draw this actually is we're
going to have you've got like your
browser over here right and your browser
only really knows how to run one kind of
language which is JavaScript it knows
how to display stuff that's written in
HTML and it knows how to display it by
running that through CSS styles okay so
we're going to use JavaScript for to do
all the heavy lifting but we actually
need behind the scenes obviously these
going to things are going to have to be
stored somewhere they're going to be
stored in the database so it's going to
store a whole bunch of - duze right and
then something needs to be able to
connect up the database to your browser
in other words make that those database
functions available to your browser and
the way we do that is using something
called rest so rest is basically
something that allows JavaScript to talk
to our server through standard HTTP and
in particular HTTP provides a number of
different things it provides something
called get this is the thing but
normally your web browser uses to
display web pages it has something
called post which is the thing that your
browser normally uses to like upload
files or submit forms or stuff like that
it also says has something called delete
and it also has something called put
those last two generally your browser
does not make available to you but they
do exist behind the scenes and if you
look they actually correspond quite
nicely to to the crud thing so we've got
a create which is actually post we've
got a retrieve which is actually get
we've got a delete already and we've got
an update which is actually put so all
rest does is it basically provides
something accessible from JavaScript
that map's each of these HTTP
verbs they're called into which of the
crowd things to run against the database
so get would for example get turned into
a select statement using SQL Post would
get turned into a insert statement
delete would get turned into a delete
statement and port would get turned into
an update statement so the proportion of
websites that do something that is not
crud well I guess you would say the
majority of websites do things that are
not crud because they often just display
things so but that in a sense the way
they display them often often behind the
scenes is using crud so take a block
most of the time when you're looking at
blog posts you're basically calling
doing you know doing a retrieve of a
list and behind the scenes of course
somebody's got to be creating deleting
and updating those so I suppose a blog
is a good example of crud an example is
something that would not be a good
example of crud would be something like
an html5 game for example or you know
people create things like color pickers
or you know stuff like that
was that so cackle calm certainly has
plenty of crud types in it you have to
go to create competition select
competitions update competitions list
competitions create competitions of you
know submissions to competition so forth
so yeah a quick proportion of the
world's websites have multiple crud
pieces going on in them so for example
in an email app you have cred for emails
for contacts for folders and each of
these things you need somewhere to
create them list them delete them change
them so because this is so common this
is something that is really easy to do
right and
or what we need to do is we basically if
you think about what's the minimum
necessary that we could possibly have to
tell a computer we would at least have
to tell a computer like what is my tree
or a lot of RAD objects you know what
seeing which I'm actually trying to
create delete so forth and when I say
what is it what I really mean is what
are its properties all right
and that I think really all we ought to
have to tell the computer whether it's
properly so and I guess we have to call
it like what is it called so our case it
will be called to do right so that's
actually what we're going to start by
doing and this is where we're going to
do it on the server because this is plan
of where the database is going to be
built and where this API is going to
have to be provided from so this is
where I'm going to start with Visual
Studio which is a really nice IDE for
creating a variety of applications
including applications of this kind they
call them web applications so let's
create one we'll call it angular
tutorial okay and so we say here we want
to create a web application using the
latest version of the framework that
Microsoft have which is called asp.net
MVC and then it says alright what kind
do you want and I want to use Web API
which basically means I'm creating this
really minimum kind of interface for it
can't quite see the bottom of this let's
move this up well it's really annoying
chapters double-clicking that there we
go so far that's creating the
let's go and see what we do next so
here's that's what we've done we
selected the project there's some here
we go so are we ready yet I'm still
creating this is on my blog there's a
the API which it creates for you can use
either JSON which is a JavaScript object
notation or XML which is a perhaps more
common in big corporates and a slightly
older format by default the API uses XML
unless you specifically ask otherwise so
there's actually just a couple of loans
that I'm going to copy and paste to tell
it to use JSON by default instead it's
totally unnecessary but I just find it
nice because it makes it easy to debug
it basically viewing the JSON so let's
do that if it's finished
so I have to go into a Web API config
API config and register so I'm just
going to paste it there so that's
totally unimportant that section but
it's in our list so now we're ready to
create this minimum amount of
information that we should have to tell
the server which is what is the object
that we're trying to actually create and
the way you do that we've got pretty
much regardless of what language you're
doing is you create a class for it so
generally speaking there'll be something
called models or something like that
whatever blank which you're using and
then we can just create a new one by
just creating a class
so we all call ours to do so this is the
first thing we have to do is tell it
what is the name of the object so we've
now called it giving it a name and the
next thing we have to do is we have to
tell it what are its properties so we're
certainly going to need an ID we've got
to need like some extra the actual
texture for to do so we call that text
maybe probably be nice to have a due
date question mark and c-sharp means
it's nullable in other words this you
don't have to fill it out
what else did I have in my list a
priority that's a good idea
so let's also add priority okay so at
this point we have now told what I
believe is everything that our computer
should need to know in order to create
our Web API for us so at this point
we're going to tell it to create a Web
API for us so in c-sharp the way you do
that is by creating something called a
controller and we will call this to do
controller and it is a API controller so
in other words is going to create one of
those JSON API soor REST API s it's
going to create it for our to do class
and we need to have it create all the
database stuff for us so we'll ask it to
do so we'll click Add
we'll wait for a few moments and while
that's running
yeah so I will show you that once it's
done okay looks like it's finished you
can see it's created something called to
do controller you can see it's created
also something called to do context
which consists of like two lines of code
and we're at a point now where I'm going
to hit f5 to run this or you can go
debug start debugging and that will
build it and run the server and we
should be now at a point where we have a
working API now it'll even tell us where
the API is and as you can see here it's
got it's going to be API slash to do so
let's try going to API slash to do you
can think about what you expect this to
return while we're waiting for it the
first time that you go to it it kind of
has to compile a few things in the
background and so hopefully you guys
have guessed that it was going to return
an empty array in JSON and so that is
means it's returned square brackets so
we now have a working
API and Anthony to ask your question
about what's happened behind the scenes
let's have a look in sequel server
and you'll see that behind the scenes it
has automatically created this is what I
did earlier is today's date a database
for us and within that database it has
already automatically created a table
for us interesting the way it's plural
is to do is by adding an e and within
that table we'll see that it has
automatically created our columns for us
once eventually that runs so why Jason
over XML JSON is easier for a human to
read it's more compact it's simpler to
both create and understand I question
would be why would you use XML over JSON
really also you know JSON it's very easy
for computers to pass as well so tends
to be very fast and everything supports
it here's the columns that we've created
and again they're automatically they've
been typed and so forth our date is
nullable because we asked it to be our
priority is not and so forth so you can
see everything automatically has
happened behind the scenes to create a
database to create our web api and that
is why i say don't worry too much about
the backend it's super easy
i'm now going to show you the Python
version I'm not just going to type it in
and it's going to simply show it to you
in Python I've used here something
called flask restless which is kind of
like a Web API equivalent for Python you
basically tell it what kind of database
do you want to use in this case I said
you sequel Lite you then create your
class you then create the fields in your
class I've execute a few of extra fields
in here just for playing
and then you don't actually have to like
right-click something and say create
framework instead you simply say manager
create API you tell it what class you
want to create JSON API for you tell it
what methods you want to support you
tell it I've default how many results
you want per page and you say app dot
run and that provides exactly basically
nearly exactly the same API as I just
described so that as you can see python
and c-sharp really require you to type
pretty much the exact same code the big
benefits of c-sharp version is that the
code it's created for me I can go and
edit to change later or else the flask
restless' version it's kind of it's all
pre-programmed in although of course you
can use flask to create your own API
endpoints but really the main messages
here don't worry about the back end
again even in the Python version DB dot
create or make sure that the database
gets created creates a table creates a
fields so on and so forth
so that that whole section is really
easy and then I think is like for
debugging you can always go back and
actually type in your endpoints and
actually watch them work so in case it
doesn't happen you can see why yeah you
can post queries through the browser in
a wide variety of ways in Windows or
something called fiddler which makes it
really easy to hand create your own HTTP
requests basically of any kind it's
going to be easier to write our
application if there's already some data
in it so generally speaking when you're
doing a application like this you want
to do something called seeding the
database this is a again something
that's going to be specific on what
back-end you are using in Visual Studio
it's really nice and easy there's a
basically a console that's available to
you a ripple that's available to you to
let you do that so you can basically go
package manager console and there's
system called migrations which
it's a system that on the back end
allows you to do things like database
updates feeding the database so on and
so forth so we run a command to turn it
on behind the scenes to those who are
interested this is actually a PowerShell
prompt that's actually sitting here
inside Visual Studio with access to all
these visual studio objects so that's
created this thing called the seed
method which we can now use to fill it
with data so I'm not going to manually
type that in let's just copy and paste
it so this particular version it's just
going to use a random number generator
some of these are slightly different
names
there we go so you can see what's
happening here I'm just creating a whole
bunch of items I'm getting 50 of them
with a due date which is like randomly
in load last year and a priority which
is some random number up to 10 and the
text will just be the number of the to
do so this will just give us some data
which makes life a little bit easier to
start playing with things and so and the
other reason I wanted to show you this
is basically to show you how easy it is
to work with database although the
database got created automatically it's
very easy for us to you know edit the
database later so now that we've made
this change to a database in this case a
change to the initial data that's in it
you just have to run a command to tell
it to to actually make that change in
the database not surprisingly the
command is update database and it's
quite amazing like if we go back and
change this class to like add a field or
make something nullable or change a data
type where and we can then basically it
will automatically create the c-sharp
code necessarily to actually change the
database so it actually keeps track of
what the current class is and what it
used to look like and so forth which i
think is quite neat well it actually
this particular version is that it
actually originally came from Ruby so
the idea of migrations are done of its
first came from Ruby but that's the most
well known version of it so now that
we've done that lets try rerunning api
and you can think about what you would
expect to appear there we go already
done okay so here's our seeded database
so that is the entire back end so now we
need to start writing our front end so
we're going to use bootstraps and we're
going to use angularjs neither of them
is installed into Visual Studio by
default not surprisingly most systems
will have some easy way to install
packages in Visual Studio that system is
called new get you probably won't be
surprised to hear that you use the
console here and do this type install
package and the name of the package
so we're going to need angular j/s so
this is the thing that's going to handle
all of the connecting up that json api
to our actual our actual webpage so you
can actually see what's going on and
what that does behind the scenes is it
downloads it and it installs it into our
solution so you can actually see what
that looks like so you can see that
there's here there here they are all
appearing now as we watch so it
automatically unpacks it puts it into
the right place so the scripts are
already been placed into scripts for us
and the if there was any CSS oh it's
been put into CSS it looks like there
isn't for this one so now we're going to
do bootstrap
there's a GUI for all this as well if
you want to use one but I kind of like
typing because I find it a little bit
quicker and a little bit more
automatable so now we can check what
that looks like yeah there we go all the
CSS has already been put in here for us
along with any necessarily images so
that's kind of nice we've got everything
downloaded and installed and ready to go
that's right so jQuery is automatically
installed by the web api we know when we
first said I want to use web api they
installed a few things for us the main
one they installed was jQuery no you
don't in fact it's installed jQuery
through the same system which means that
for example if I later use something
that requires a different version a
higher version of jQuery it'll
automatically upgrade it and do
everything for me all that we've done so
far is to kind of download those files
and put them in the right place the next
thing we have to do is create an index
dot HTML that actually does something
with them so let's create an index dot
HTML
now the index dot HTML that angular
expects to see has a very specific
format in fact it's so specific that
I've created a resharper template for it
so let's do that
anji index so I need to tell it what the
name of this application is and what the
title will be angularjs tutorial to do
app and that is my index.html so
basically every index dot HTML for
angular will look exactly the same the
only thing that will look different
really is which style sheets and scripts
do you stick in here
resharper is specific to visual studio
but whatever IDE you use will have some
kind of insert a template or insert
commonly used text or something like
that if it doesn't stick scripts like
this into a little text documents and
copy and paste them as required no point
typing it again and again or you can
just copy and paste it out of my um web
page as it says here all you have to do
is change the ng attribute and the title
so we're now up to talking about some
conceptual stuff which is what's going
on here because literally this is going
to be the start and the end of index dot
HTML we're not going to modify this now
so what we're instead going to do is
we're going to create things called like
details at HTML listed HTML and so forth
and we're going to let angular figure
out how to do all that so what I'm going
to do is like you're where I'm going to
first of all show you the code you're
not going to really understand what the
code is and then I'm going to come back
and explain why that code is what it is
that's I just want to first give you a
sense of what code we need the first
thing we need is we're going to need to
create our own javascript file which is
like where we can put our own code into
and in angular generally that javascript
file of called fjs so that's by my
template already has something referring
to epic is
so let's create that now app dot J s so
in fjs there's a very standard thing you
need which is you basically have to have
this little angular application
constructor so again as you can see to
the resharper template it's totally
standard code even if it looks slightly
hairy at this stage so I need to give it
a name and I need to describe basically
what's the thing that happens when you
go to the root you can see this here so
we need to do a list now let's try again
sorry gf to-do list and let's have a
file listed HTML let me explain what's
going on here this is a bit where in
fact this is where I'm going to flick
across and start drawing some stuff so
what I want to point out is that we have
told angular exactly two things or three
things actually when you go to some path
what controller do you use what template
do you use so there are three things I
want to explain what's going on there
because that's really what this is all
about so this next bits going to be a
bit conceptual so the way angular works
is or in fact if you think about the way
your browser works is that your browser
has requested index.html or at least we
will shortly okay and in it there's
basically a number of JavaScript
libraries referred to and behind the
scenes what happens if you refer to a
JavaScript library it just takes that
code and it runs it that's what your
browser does and one of the things in
there was the angular JavaScript
one of the things in there was the
JavaScript that we wrote okay the other
thing you might have noticed is there
was something let's have a look at it in
fact there was something called ng-view
and there was also something called
ng-app all angular specific stuff starts
with ng what happens as soon as angular
loads and as n once the whole the whole
HTML file is loaded
angular goes back over your HTML and
looks to see if I can find something
called ng app and if it does it says ok
this is an angular application I'm going
to create an angular application called
to do app and I'm going to try and see
if anybody's credits in JavaScript for
that application and to do that we have
actually created this is how you tell it
that this code is for that application
so you can see this text here matches
this text here so now the JavaScript and
the HTML have been connected together
angular knows that these two files are
designed to kind of work together and so
now that it knows that it reads to find
out how to configure this application
and so it then says ok in particular I
want to know when you go somewhere what
code will I be using and how will I be
displaying it so there are the three
pieces here so you've got index.html
which via app dot J s tells it two
things one is what code should I run for
a particular path and what what page
should I show ok this is called the
controller and this is called the
template
so this will become more clear as you do
a few but anybody who's used MVC before
will be very familiar with all of this
basically every MVC framework in the
world works pretty much this way so
let's go back to writing some code in
this case we need to create our
controller and we're going to create
something which is just basic as
possible now I'm going to explain
exactly what's going on here in a moment
but I just got a pretty minimal
controller which is creating something
called test and setting a particular
value and the second thing I need to do
is create something called list at HTML
so let's do that
and because this is now a template it's
going to be inserted into the spot where
this says ng-view
which means that it's already has an
HTML tag head tag body tag and so forth
so we can delete everything else and
just type what we want so let's go hello
and we're going to now insert something
from our JavaScript so we've got
something in JavaScript called tests and
the way you do that is by putting it in
these things called handlebars double
angle brackets so this is going to be
like I got explain exactly what's going
on in a moment but I just wanted to show
you this really minimum version of tying
HTML and JavaScript together so let's
save all that and see what happens when
we go to that page okay so that's
interesting right so index dot HTML
remember has only that in it but angular
then checked fjs looking to see if it
can find something with this same
application name it found it and then
recognize that then when you're in the
root of this I should get codes from the
list controller HTML from the template
and display it and then the template
says what should you display so the
really cool thing which we need to
understand clearly is what is test and
what is telescope so that's the thing
that I'm going to explain now
inside your controller something is made
automatically available that something
is called dollar scope it's a JavaScript
object with very very special properties
very very special behaviors the way it
works is that anything that's inside
dollar scope is automatically bound to
the HTML page so anything that you put
inside dollar scope is automatically
made available in the HTML and you can
then refer to it in the HTML by putting
it in those handlebars brackets now in
the HTML you don't need to say dollar
scope dot because this is a very
definition of this is it's something
that comes out of Dulles cope and how
neat is it it's so neat that literally
as soon as you change something in the
controller it changes in real-time in
the page and there's actually two ways
of making it appear in the page one is
by putting it in just regular text
inside double angle brackets the other
is by putting it inside any kind of tag
Beauvoir and then adding a special
attribute called ng - model and in that
you can put something which is in dollar
scope right so I actually want to show
you like the simplest way that this can
possibly work which is to go into our
list of HTML and actually add an input
tags so something we can type into and
in this case let's actually create this
ng-model tag and we're going to call it
test okay so you can have a think about
what this is going to do you expect
isn't it amazing that's really cool
right so what's happened behind the
scenes here is that as I typed into this
text box here's something that I didn't
show you how cool it is is that this
binding between dollar scope and the
template is actually two-way so ID in
this case I changed something which had
an NG model defined yeah
changing that thing caused dollar scope
got that thing to change because that's
the very definition of his tag and then
there was something else bound to it
which therefore changed at the other end
so what this means is that we can now
write pretty sophisticated logic you
know in our JavaScript and have it
automatically appear in our HTML so this
binding between dollar scope and the
application is where the magic happens
philip's how does it know to put testing
into the input tag the reason is that
app KS so the to-do app has been
configured with the controller being
called list controller in the list
controller it runs this line that goes
dollar scope test equals testing so
dollar scope top test now equals testing
and the ng model here pulls out creates
a two-way binding between dollar scope
test and this input so therefore since
it's a two-way it displays the initial
value of dollar scope test which then
gets overwritten as soon as I type into
it exactly so let's put this to work and
actually do something useful shall we so
in our case this is meant to be a list
right so lists deserve to go in tables
just seeing if I've got any useful tags
for that I think I've got one so
bootstrap is the thing that's going to
make things look half decent and in
bootstrap you know you just use normal
HTML but you have to give things
particular classes to basic
say make this look the bootstrap way so
I generally have a bunch of templates
for bootstrap to stick in those classes
for me so I'm just going to use the
bootstrap table template to set that up
for me so in our particular case we're
going to need text due date and priority
so we'll have text in fact we've got it
oh I call it what to say to do too as
for that second parity and then do
they're just the headers okay and now we
need the actual data now we need this
row to repeat enough times one for each
to-do item at this stage we don't have
any to-do items so we need to find some
way of retrieving them so let's just see
what this looks like at this point okay
so this point all we've got is just some
headers so we now need to write some
JavaScript which is actually going to go
into our web application server to that
to that Web API that JSON API and
retrieve a list for us angular already
has something which can do all the
standard crud operations for us and it's
called dollar resource and to create one
of these things as a again are basically
a standard bit of boilerplate that you
have to type which therefore means that
I already have a template for it and
it's that so as you can see all I did
was basically put the name of the
application in this case the path is API
slash to do we can check that by
checking our controller yep API slash to
do so this basically says any time we
want to interact with our
API go to that path
and let me show you how easy this is now
I want to have a list of my two dues
available to my HTML therefore I'm going
to have to put a list of those htmls
inside Bella scope that's the definition
of what dollar scope is all about right
so dollar scope dot two dues equals
okay we've got to set it equal to the
result of going to my server and pulling
down a list of two dues
I can use this resource that is created
which is called to do and it has a query
method how do I know it has a query
method this is where I want to show you
the angular documentation it's really
great the angler documentation what does
delivery source do for us it create
something with these this particular API
and the thing to do a get is called
query so that's going to call its query
and so that's going to do exactly the
same as
let's go do exactly the same as just
typing slash API slash to do so that
should create a dollar scope dot two
dues which should contain all of our two
dues which has been sucked in from the
web server over that API the only other
thing I need to do then is loop through
each of those and stick them into my
JavaScript and it so happens that
angular already has not surprisingly a
way to look through something and stick
it into HTML and it is called ng-repeat
and what this does is everything inside
that ng-repeat is going to get repeated
for each item in - duze so we can now
simply use that angle bracket notation
like this one - so we've got to do then
priority then do date let's check it out
shall we
to do is not defined see what went wrong
there check our yeah
oh okay I'm actually really glad this
error happened because this is tricky
and it's really neat this list here of
like parameters that's being sent into
our controller it's really quite amazing
you can actually like put any parameters
you like here in any order as long as
they have the right names and angular
will automatically send them to your
controller for you behind the scenes is
using something called dependency
injection which some of you may have
come across in software engineering in
our case we want to make sure that this
to do object is available in this
controller which means we actually have
to pass it in and just the fact that it
has the same name as the thing we
created up here is means that angular is
going to automatically create it for us
and pass it to our controller and so
that's just something you basically have
to know I don't think if you clean each
be on top of dependency injection in
detail all you really need to know is
that and it's something maybe in a later
tutorial I'll go into more detail
there's basically a concept of like in a
lot of languages you have something
called global variables which allow
access like a particular variable
everywhere in your program they
considered bad software engineering
practice because you can you can end up
with model libraries defining the same
global variable this is a way of having
something that's like global variables
but you specifically say where you want
them so in this case I said anytime that
somebody says that they want something
called to do this is how you're going to
construct it and then this is how I say
I want something court to do that's
basically what dependency injection does
most importantly though we now have a
working list here the only other thing I
want to do in the last three minutes is
make this look a little bit better
because currently that's a rather ugly
way to display a date one of the handy
things inside angular is something
called filters and filters are basically
ways that we can change the way that
something is displayed there is a date
filter which is going to take a date and
display at the particular way the way
that you use a filter in your HTML is by
simply you think of as piping it to it
so we're going to use a filter called
date and then meticulous about takes an
argument and I want to use medium date
there we go so that's basically the end
of this part I think because you know
this has really contained a lot of
concepts that we've needed we've gone
from end to end well from enter middle
perhaps which is starting from nothing
we've created the database we've created
a REST API we've created a controller
we've created a template and that took
us an hour although I think if I wasn't
explaining things hopefully we could
have done the whole thing end to end in
one hour that's the theory anyway