- 00:00:02 welcome back to this series where we
- 00:00:05 built a restful api with node.js
- 00:00:08 in the last video we had a look at all
- 00:00:10 the theory and that was important
- 00:00:12 but now let's dive into the fun stuff
- 00:00:14 and let's start building a restful api
- 00:00:16 so let's have a look at what we'll build
- 00:00:18 and then let's start with it
- 00:00:25 so what are we going to build in this
- 00:00:26 series our api
- 00:00:28 will have a couple of resources i want
- 00:00:30 to build the api that's realistic and
- 00:00:32 that
- 00:00:33 contains some things which are typical
- 00:00:35 to restful apis
- 00:00:37 for this we'll have a products resource
- 00:00:40 so slash
- 00:00:41 products is one route we can target and
- 00:00:43 there i want to support
- 00:00:45 get requests to get a list of all the
- 00:00:47 products we have
- 00:00:48 post requests to add new products
- 00:00:52 i also want to be able to target the
- 00:00:54 individual product by
- 00:00:56 id and get information about that
- 00:01:00 product
- 00:01:01 patch that product so change it update
- 00:01:03 it
- 00:01:04 delete this product so that we can get
- 00:01:07 rid of it
- 00:01:09 and let's also implement our orders
- 00:01:11 resource where we can place
- 00:01:13 orders so where we for example could get
- 00:01:16 a
- 00:01:16 list of all the orders we have i also
- 00:01:19 want to be able to
- 00:01:20 post a new order so create a new order
- 00:01:25 and i also want to be able to then
- 00:01:27 access my individual order
- 00:01:28 and just like for products get more
- 00:01:31 information about it and
- 00:01:32 not patch it let's say we shouldn't be
- 00:01:34 able to edit our orders
- 00:01:36 but we could delete so cancel them
- 00:01:39 that is what i want to build we'll also
- 00:01:42 add authentication to make sure that
- 00:01:44 some of these
- 00:01:45 routes of these endpoints are protected
- 00:01:48 so that only logged in
- 00:01:50 users can access them and therefore you
- 00:01:52 will also learn
- 00:01:53 how to log users and when building a
- 00:01:55 restful api because we can't use
- 00:01:57 sessions remember from the last videos
- 00:01:59 so that won't work that is what we're
- 00:02:02 going to build we're going to build it
- 00:02:03 step by step
- 00:02:04 we're going to start with it right now
- 00:02:07 so let's start
- 00:02:09 with building this restful api and for
- 00:02:11 that
- 00:02:12 i'll navigate or i navigate it already
- 00:02:14 in the folder where i want to create
- 00:02:16 this project
- 00:02:17 make sure you do the same and then in
- 00:02:19 the terminal here i'll just run
- 00:02:21 make here for make directory to create a
- 00:02:24 new directory
- 00:02:25 and then the name of the project and you
- 00:02:27 can of course also do this in the
- 00:02:28 windows explorer or
- 00:02:29 the finder manually you don't need to do
- 00:02:32 that in the terminal
- 00:02:33 i'll name it node rest
- 00:02:37 shop something like that
- 00:02:40 then with cd node rest shop i can
- 00:02:42 navigate into it
- 00:02:43 and now we have an empty folder now we
- 00:02:46 first of all need to
- 00:02:47 put this under control of npm nodes
- 00:02:50 package manager
- 00:02:51 because i will install a couple of
- 00:02:54 dependencies and i will install them all
- 00:02:56 through npm this dependency manager tool
- 00:03:00 for that you need node.js and you will
- 00:03:02 need this anyways since we're going to
- 00:03:03 create
- 00:03:04 a node restful api so having node
- 00:03:07 makes a lot of sense you can get node.js
- 00:03:09 from nodejs.org
- 00:03:11 either download the latest version or if
- 00:03:14 you're facing any issues with that
- 00:03:16 download the long term stability version
- 00:03:19 8.9.1 at the point of time i'm recording
- 00:03:21 this
- 00:03:22 once you got this simply type npm init
- 00:03:25 in this new project folder
- 00:03:27 and this will now walk us through a
- 00:03:28 little wizard here which allows us to
- 00:03:31 initialize that
- 00:03:32 so you can assign a package name version
- 00:03:35 some description like
- 00:03:37 a node.js restful api
- 00:03:41 tutorial project build a simple
- 00:03:45 shop api something like that entry point
- 00:03:49 doesn't really matter for us here test
- 00:03:51 command i'll leave that empty
- 00:03:52 you can enter a git repository i won't
- 00:03:54 do that for now
- 00:03:56 can enter some keywords don't need to
- 00:03:58 you don't need to and an offer here i'll
- 00:04:01 put my name
- 00:04:03 finally you can choose a license i'll
- 00:04:05 confirm this default license
- 00:04:06 and type yes with that we got this new
- 00:04:10 file in there
- 00:04:11 and i will now open this whole project
- 00:04:15 in an editor now i will use visual
- 00:04:17 studio code but you can also use a
- 00:04:19 another editor sublime web store adam
- 00:04:22 whatever you like
- 00:04:23 so i opened the project we just created
- 00:04:26 in this editor
- 00:04:28 and there you see this package.json file
- 00:04:31 that was created automatically through
- 00:04:33 this npm
- 00:04:34 init command and here you can always
- 00:04:36 tweak these things you just confirmed in
- 00:04:38 the terminal if you want to
- 00:04:40 now open the terminal in this editor
- 00:04:42 that's the built-in
- 00:04:44 uh terminal into visual studio code it's
- 00:04:46 the same as the default terminal on the
- 00:04:48 operating system though
- 00:04:50 and i now want to install a couple of
- 00:04:53 dependencies we'll need
- 00:04:54 we need node.js but we already got this
- 00:04:57 on our system
- 00:04:58 so what i will install here with npm
- 00:05:01 install dash dash
- 00:05:02 save save creates an entry in the
- 00:05:05 package.json file
- 00:05:07 is express because i will use express
- 00:05:11 as a framework for nodejs to make
- 00:05:14 building this api a bit easier
- 00:05:16 and we'll add more packages throughout
- 00:05:18 this video series but let's start with
- 00:05:21 this one
- 00:05:22 with express installed i'll add a new
- 00:05:25 file to the project by clicking
- 00:05:27 on this icon here or simply hitting
- 00:05:28 command n
- 00:05:30 and i'll name this file server.js
- 00:05:33 here i will set up all the code to spin
- 00:05:35 up my node.js
- 00:05:36 server which as you probably know we do
- 00:05:40 through code through javascript code so
- 00:05:42 not like in php where we have a separate
- 00:05:44 server software
- 00:05:46 which then kind of is connected to our
- 00:05:48 php script and stuff like that
- 00:05:50 we create a server instead in javascript
- 00:05:53 when using
- 00:05:54 node.js now how do we create
- 00:05:57 that server then we'll first of all
- 00:06:02 import something from node.js and i'll
- 00:06:04 store it in a constant name http
- 00:06:06 const and let our next-gen javascript
- 00:06:09 features which node.js in
- 00:06:11 the later versions supports and i do
- 00:06:14 import it with require
- 00:06:16 http now if you worked a lot with
- 00:06:20 single page applications or with
- 00:06:22 front-end javascript development in
- 00:06:23 general
- 00:06:24 you might be used to the import
- 00:06:28 something from something syntax
- 00:06:32 now this syntax is not yet supported in
- 00:06:34 node.js
- 00:06:35 hence this old or still the only
- 00:06:38 import syntax we have in node.js so this
- 00:06:42 http package i'm importing here provides
- 00:06:44 us some functionality we need for
- 00:06:46 spinning up a server
- 00:06:48 additionally i'll create a new constant
- 00:06:51 port where i will assign a port at which
- 00:06:53 my project should run
- 00:06:55 and here i want to either
- 00:06:58 get that port through an environment
- 00:07:00 variable
- 00:07:01 or i will hard code it in there
- 00:07:04 now the environment variable would be
- 00:07:08 process.nth.port
- 00:07:09 and process.n simply accesses nodejs
- 00:07:13 environment variables
- 00:07:14 and this would be set for example on the
- 00:07:16 server you deploy it on
- 00:07:18 most hosting providers offer you
- 00:07:21 the id opportunity or offer you tools to
- 00:07:24 inject environment variables into your
- 00:07:27 running project and then you would
- 00:07:28 simply
- 00:07:29 add this port environment variable if
- 00:07:31 it's not set however we'll use
- 00:07:33 3000 as a default port thereafter i'll
- 00:07:37 create my server and store it in a
- 00:07:39 constant
- 00:07:39 with this http package and then the
- 00:07:42 create server command
- 00:07:44 now to recreate server we need to pass a
- 00:07:47 listener
- 00:07:48 so a function which essentially is
- 00:07:50 executed
- 00:07:51 whenever we got a new request and which
- 00:07:54 then in turn is responsible for
- 00:07:56 returning the response
- 00:07:58 i'll leave this empty for now but we'll
- 00:08:00 add something
- 00:08:01 soon with the setup we have here it
- 00:08:03 wouldn't really work because we need to
- 00:08:05 handle incoming requests
- 00:08:08 thereafter i'll call server listen to
- 00:08:10 really start the server and i'll pass
- 00:08:12 the port
- 00:08:13 as an argument so it starts listening on
- 00:08:15 this port
- 00:08:16 and then it will execute whichever
- 00:08:19 listener or
- 00:08:19 function we passed to create server
- 00:08:22 that's the idea
- 00:08:23 now this is a very simple server setup
- 00:08:26 i'll now add a second file
- 00:08:28 app.js and this file now
- 00:08:31 is spinning up this express application
- 00:08:34 which will make handling requests a bit
- 00:08:36 easier for us
- 00:08:38 so how does this now work there i will
- 00:08:40 create a new constant named express
- 00:08:43 and i will require express that's the
- 00:08:45 package we just installed with npm
- 00:08:47 install dash dash save
- 00:08:50 i then will create a new constant app
- 00:08:54 and just execute express like a function
- 00:08:57 this will spin up a express application
- 00:08:59 where we can use all kinds of utility
- 00:09:02 methods and so on now i will add more
- 00:09:05 and more functionality to this file
- 00:09:08 for now what i will do is i will simply
- 00:09:10 add
- 00:09:11 app and then call a method on app
- 00:09:14 and that method will just be use
- 00:09:18 now use as a method sets up a so-called
- 00:09:21 middleware
- 00:09:22 so an incoming request has to go
- 00:09:25 through app use and to whatever we pass
- 00:09:28 to it now the thing we pass to it can
- 00:09:31 have different
- 00:09:32 formats it can simply be a function like
- 00:09:36 an arrow function you can also use a
- 00:09:37 normal one
- 00:09:38 where you get the request the response
- 00:09:40 and some special
- 00:09:42 next function the third argument here is
- 00:09:44 actually a function
- 00:09:45 which you can execute to move the
- 00:09:48 request to the next middleware in line
- 00:09:50 and if you don't execute it the request
- 00:09:52 will not go there
- 00:09:53 and here what you could do is you could
- 00:09:56 simply use response to send a response
- 00:09:59 so you can here simply
- 00:10:03 send a response and let's already send a
- 00:10:05 json response
- 00:10:07 by first of all setting a status code
- 00:10:10 it's a method and takes the status code
- 00:10:12 let's send 200 for everything okay
- 00:10:14 and then the json method and this will
- 00:10:16 send a json response
- 00:10:18 so with the right headers set up and so
- 00:10:20 on and there you can pass a javascript
- 00:10:23 object
- 00:10:23 will automatically be stringified for
- 00:10:25 you because
- 00:10:26 json data which is sent over the wire is
- 00:10:28 in string format
- 00:10:30 and there we could add a message
- 00:10:32 property whatever you want
- 00:10:33 and simply say it works
- 00:10:38 now with that set up what we have to do
- 00:10:41 at the end of the file
- 00:10:42 is we add module exports
- 00:10:45 and set the sql to app with that
- 00:10:49 let's save this file and go back to the
- 00:10:51 server.js file
- 00:10:52 and there i will now import app with
- 00:10:55 require
- 00:10:55 and then i'll point to slash app this
- 00:10:59 app file
- 00:11:00 we just set up you can omit the file
- 00:11:02 extension here by the way
- 00:11:03 it will automatically look for js files
- 00:11:06 now i pass app to create server and the
- 00:11:10 express application qualifies
- 00:11:12 as a request handler so with that we
- 00:11:15 have a setup that should actually work
- 00:11:17 and allow us to send a request a get
- 00:11:20 request right now or
- 00:11:22 any type of request actually to this
- 00:11:25 back end and this middleware should make
- 00:11:28 sure that we actually
- 00:11:29 receive a response let's try it out and
- 00:11:33 in the terminal
- 00:11:34 in your project folder where you ran npm
- 00:11:37 install
- 00:11:37 you can now run node to start something
- 00:11:40 with the node
- 00:11:42 library and target server.js and this
- 00:11:46 will execute it
- 00:11:47 with node.js and keep this process
- 00:11:50 running it doesn't finish so it's not
- 00:11:52 stuck it should keep on running because
- 00:11:54 you just started your server
- 00:11:56 and now how can we see if it works well
- 00:11:59 for now since we started this on our
- 00:12:01 machine it runs on localhost
- 00:12:03 and then at port 3000 because we don't
- 00:12:06 have environment variables here so it
- 00:12:08 takes
- 00:12:08 three thousand let's try it out in the
- 00:12:10 browser
- 00:12:12 there if you enter localhost 3000
- 00:12:16 you should see a message it works
- 00:12:19 and by the way you should also see this
- 00:12:22 if you send some different kind of
- 00:12:23 request
- 00:12:24 like a post request now we can't easily
- 00:12:28 simulate a post request for the browser
- 00:12:30 like this
- 00:12:31 but we can use a useful tool for this
- 00:12:34 the tool
- 00:12:34 i mean is called postman you can simply
- 00:12:37 google for it and you should find
- 00:12:39 getpostman.com it's a tool which helps
- 00:12:41 you with developing apis
- 00:12:43 it allows you to simulate all kinds of
- 00:12:44 different requests
- 00:12:46 you can download it for the different
- 00:12:48 operating systems so i'm going to go
- 00:12:50 with
- 00:12:50 mac os here and then simply follow the
- 00:12:53 instructions here
- 00:12:54 install it enter the api endpoint and so
- 00:12:56 on
- 00:12:58 once you started it you're prompted to
- 00:13:00 sign in but you can skip this
- 00:13:02 and now you can create a new request
- 00:13:06 so if you click here you can give this a
- 00:13:08 name
- 00:13:09 and a description you can all just exit
- 00:13:11 here and now you're on
- 00:13:13 this screen on this
- 00:13:16 screen you can always create new
- 00:13:17 requests by clicking this plus button
- 00:13:19 here
- 00:13:20 but then you can choose the different
- 00:13:22 http words
- 00:13:23 now we won't support all of them in this
- 00:13:25 restful api and
- 00:13:27 some of them are really rarely used but
- 00:13:29 we'll
- 00:13:30 have a look at get post patch and so on
- 00:13:33 so let's try a post request
- 00:13:35 and let's send it to localhost 3000
- 00:13:38 just like this click send and you should
- 00:13:41 also see message
- 00:13:42 it works and here you can also choose
- 00:13:45 between the raw format
- 00:13:46 so the request body as it looked like a
- 00:13:49 formatted one
- 00:13:50 and preview here also is nice if you for
- 00:13:53 example would get
- 00:13:54 back html that tries to preview it in a
- 00:13:56 nicer way
- 00:13:57 you can also have a look at the headers
- 00:13:59 which were created by default like
- 00:14:00 application json that was set up because
- 00:14:03 we used
- 00:14:04 this json method here on our backend
- 00:14:07 and with that we created our first very
- 00:14:10 basic
- 00:14:11 restful api now it's not really useful
- 00:14:14 it doesn't have different endpoints it's
- 00:14:16 not
- 00:14:17 adhering to all the constraints we set
- 00:14:19 up but
- 00:14:20 the base functionality here isn't
- 00:14:24 that wrong now let's continue on this
- 00:14:28 road
- 00:14:28 and let's have a look how we can improve
