Part 2, to the 'Build a Webscraper (super simple!) video. In this video, I show you how to get data from your NodeJS backend into your super simple JavaScript frontend.
hello everyone so in the last i
showed you how to build a web scraper by
building a nodejs application in which
we scraped a website and got the data
showing up in our terminal but how do we
get that data showing up in our browser
or in other words how do we get the data
from here showing up here so that we can
use it in our front ends well we're
going to do this using a package called
express that we installed in the last
video for those of you who are new to
joining us please feel free to watch
part one in the description below before
watching further or simply join us where
we left off i will be doing a brief
recap of what we have coded so far
coming up next
in part one we imported the packages
axios and cheerio in order to scrape the
website guardian.com
we did this by passing through the url
into axios and once the response came
back to us we got the response data and
used cheerio to pick out certain html
elements to create an object so this
object right here and pushed it into our
articles
array
that we then console logged out
the result of the console log showed up
in our terminal as we are currently
working in the back end
it is also important to note that this
code will only run if i start the script
which i have written
here
okay so to start this script all i'm
going to do is write npm run
start
just like so this script relies on a
package called no demand that
essentially listens out to any changes
we make on port 8000 and as you will see
here in the terminal these are the
results of our website scrape okay so
that is a very quick recap of what we
did for anyone new joining us here if
you would like a more in-depth
explanation of the packages and what is
happening please do watch part one
otherwise let's carry on so i'm just
going to close that and go back to our
index.js file
now this video is going to focus heavily
on express and routing the word routing
refers to how an application's points or
in other words this right here
respond to client requests
so for example if my client or in other
words my computer makes a get request to
this url right here i can make it return
something back to me and i can do this
thanks to express here is the structure
that you will see while rooting so app
a method
a path
and a handler as we mentioned in the
last video app is what holds all of our
express wonderfulness and comes with
great things such as
app
listen app get
or app post
app on this occasion is also referred to
as an instance of express
the method that you see here refers to
an http
request method if you know about apis
and how to use restful apis you will
know that the most popular types of
requests are the get
post put and delete requests
we are going to use the get request so
i'm going to replace this with get well
let's just write it out here
get we're going to use the
get request
to get data from a certain resource or
path we use the
host request
to add data to a certain path or
resource and we use the
put
request
to edit data from a certain resource
okay so edit
add data
get data and of course we use the delete
method
to delete
data from a certain resource
okay so all of these come with express
we are getting them from here
just gonna delete that for now
next we have the path
this refers to the path on the server we
will in fact be defining this ourselves
later on
and finally we have the handler which is
essentially a callback function that
gets executed when we visit this part
okay so say my path was localhost
8000 for slash
burgers and i visited this in the
browser the function here whatever i
write will be executed
okay so we will be doing this later
okay
so great hopefully that makes sense now
we have the template of how to do basic
routing in express so let's try out
ourselves
let's start off small and simply decide
that if i visit a local host a thousand
it must be eight thousand as that is
what we defined as our port in the back
end here then i want the word this is my
web scraper to show up so i would do so
like so i'm going to use this template
so app and then the method i want to use
is the get
method
the part where we have just said it is
localhost 8000
or we can actually just do this for the
home page that will be the same and then
we need the handler so we know that the
handle is a function so let's write
function
that is my function and what happens in
my function well i just want to show
hello world so for this i'm actually
going to pass through a request and
response
just like so this is being added by
webstorm is a helper i have essentially
just passed through the parameters
request with a comma and response and if
i get the response and use json i can
then pass through a string so this is my
web scraper
and this is what the response will be
when i visit my localhost 8000 page so
let's check it out i'm going to
gravitate to the browser
localhost
8 000
there we go this is my web scraper so if
i go back here
let's change this
just to be
anya click save
refresh
and there we go so we are now getting
strings show up when we visit localhost
8000. once again i'm just going to
switch this back
there we go
okay so this is the response
hence i've used response and not request
it's the response that i want to show as
this is my web script
great
so now that we have a basic
understanding of how to show text in the
browser from our back end let's get to
showing our script results
so let's keep that as it is i'm going to
keep that there for you so you remember
the structure
how would you think that we would show
the results at a different endpoint
well once again i would use app i would
get a method so this time it's a get
request because we are not adding data
we're not editing data we're not
deleting data we're literally getting
data we want to get data when we visit a
certain endpoint and i'm going to pass
through the end point of this time let's
go with
results
okay so we've got our path
we've got a method we need the handler
so the handle is just a function i could
use a
arrow function if i wish it is totally
up to you
and this time
well i simply want to
show the results
so instead
of console logging out articles i can
actually move this entire thing so i'm
going to just cut this
i'm going to put the whole thing in here
so at the moment this is console logging
out articles we don't want to
console.log anymore we're going to show
this in our browser so again i need to
pass through the request
and the response it must be in that
order and i'm going to use
response
json and pass through the articles so we
don't need this anymore
and now if we visit the endpoint results
we should see all the articles so let's
go ahead here and i'm just going to do
forward slash results
and there we go that is how you get data
from your backend or in other words
server showing up in your browser now
this is useful for many reasons one
being that you can now make requests to
it from a front end that you have built
and use the data to build out projects
or two you can deploy this onto the
internet and have other uses for your
data think along the lines of building a
restful api
if you want to learn how to use a
restful api please watch my video on
this in the description below otherwise
let's carry on and i will show you how
to get the data that we have here into a
front end
so for this i'm simply going to create a
another file here is my server on the
same directory i'm going to create a new
directory called
source just to keep it separate from my
back end and in here i'm going to create
a new file called a app.js file where
we're going to build out our front end
and i'm also going to create a styles
css file in the source directory too
next i'm going to create an index.html
file in the root of my project so index
html like so
and in here i'm just going to put in
some boilerplate html
okay so here we have some boilerplate
html all i need to now do is link the
style sheet to our style sheet so i'm
going to go into the source directory
and i'm going to get the style css file
and i'm also going to link up this
script so once again i'm going into the
source directory and getting my app.js
file
okay so that is really it all of my html
is going to go here i'm not going to
make this super complicated i'm just
going to have a simple
div that i'm going to give the id of
feed so that we can put all our data in
here
okay
great so now if i go into my app.js file
let's pick out the feed so i'm going to
use this with the document
query selector this is a javascript
method that allows to pick out elements
based on their id
so i'm going to search for the id
for ids i need a hash
and then i'm picking out the feed so
once again this is going into my html
file and picking out the element with
the id of feed
the hash is for feed and then let's save
this as something i'm going to call this
as feed
display
just like so
you can of course use get element by id
instead i've just chosen to go with
query selector on this occasion
great
so now i'm going to have to get the data
from our backend or in other words
localhost 8000 forward slash results
into my front end so i'm going to do so
with some asynchronous javascript
so to do this i'm going to use the fetch
api i can use the fetch api easily with
javascript and this is the syntax for
doing so
the fetch api essentially provides a
javascript interface for accessing and
manipulating parts of the http pipeline
such as requests and responses
and the general syntax looks like this
so i'm going to now get the url that i
want to fetch data from and replace it
with this one right here and then this
is chaining that we talked about earlier
if you haven't used chaining before then
please do watch a tutorial on this in my
asynchronous javascript series what
essentially is happening is we are
fetching the results so the json from
our results page that we just created
and once that returns then we get the
response and we resolve this promise
that comes with that
and once that returns so our promise is
resolved then we do the next step and
then we do the next step okay so let's
go ahead and have a look at that i'm
just going to save this and i'm going to
open up this page in our browser
so open in browser
chrome
and inspect the page
you will see this message show up access
to fetch our backend has been blocked by
the cause policy so now we need to fix
this this is an easy fix for this all
you need is the cause package in your
back end so go ahead and gravitate to
your back end right here
and then simply run npm i for install
course
cores is a node.js package providing a
connect express middleware that can be
used to enable calls with various
options
it is a message that you might come
across quite often as a developer so if
you ever see this just know that it's
easy to solve by installing this package
right here
and once that has downloaded all we're
going to do is use the package in our
back end so i'm going to simply do
const cause require course
and then using app use again this is
something that express comes with i'm
going to pass through calls and call it
just like so
great so now if we look in our browser
there is our array full of objects we
are getting our data from the backend in
our front end amazing so we are nearly
there here is of course all of our data
there we go
now let's go back to our front end so
now we need to focus on how to get the
data from the console log area into
actual elements that display on our
browser
well to do this this is simple instead
of console logging the data i'm going to
open this out
just like so
and then because we know this is an
array i'm going to use the for each
method on the data coming back to us
so i'm going to grab the data and use
for each and for each of the items in
our array which i'm going to choose to
call article you can call this whatever
you wish
well i'm going to define a title
so const title and using this syntax i'm
actually going to
create elements
so let's create an h3 tag and then i
need to get the title from my
articles so let's have a look at the
response again it looks like this
so it's each article's title that i need
to put in here so i'm just going to put
the word article in front of here i'm
grabbing each item from my array and
each item is an object and that object
has a title so this is how we would grab
the title and put it in an h3 tag next
i'm going to actually have to inject
this into the div that we gave the id of
feed so we have to find this as feed
display and the first line of our code
so i'm just going to use feed display
and use the insert adjacent html
javascript method to put in the title
into that div i want to put it before
the end so i'm just simply going to pass
through the string before end and then
the title like so so the title we just
created
and let's refresh
and wonderful we are seeing all the
titles of all our articles showing up in
the browser
so hopefully you get how to do this i'm
just going to show you how i would do it
if i wanted to put the url in as well
so i would do this by changing title
let's maybe change this to article item
and then instead of just passing through
the h3 tag i'm actually going to wrap
the h3 tag in a div
just like so and i'm going to put
through a p tag for paragraph and i'm
going to also put the article url that
is returning back to me as part of the
object
okay so i'm going to put through a
article title nh3 tags and the article
url in between p tags i'm going to wrap
it in a div and that is essentially what
i am saying is my article item that i am
then putting into the feed display using
the javascript method of insert adjacent
html the insert adjacent html method of
the element interface passes the
specific text as html or xml and inserts
the results nodes into the dom tree at a
specific position okay so we are
essentially getting this and turning it
into html so we can put it into our html
file and once again the before end
simply means that we are putting it in
after its last child and what does this
look like
so this is what it looks like we are
getting all the data showing up here of
course if you want to style this out
please do grab the h3 tag and grab the p
tag and style them up using your style
sheet i however i'm happy with how this
is once again this is not a styling
tutorial this is one for learning how to
get data from your backend to your front
okay
wonderful
No comments:
Post a Comment