Detailed Notes
This video looks at one piece of our URL shortener solution. We build an html page that will take the parameter, call the API, grab the original URL and then redirect the user to that location.
You can find out more through our online classes at https://school.develpreneur.com and register for free. Registration will add you to our email list and you will periodically receive coupons for courses as well as notifications of the latest releases.
Transcript Text
foreign [Music] well hello and welcome back we are in an overarching project we're walking through building an application and it is a URL shortener a little like a bitly or owl.ly some of those kinds of sites or those kinds of functionalities and we built out our API we've built our database we built a connection now one of the things we're going to do is we're going to in this little bit of change initially we're going to build our web app that is essentially the redirector because we're going to give them back a full URL they're going to give us something for example this long thing they're going to get this short thing and then when they call this short thing we want it to send them to this long thing their original URL much like you see so in order to do so we're going to use a we're going to build a Django application a web application python we're going to save that for another day instead because this is so simple we are actually going to do this in JavaScript so we're going to look through today our focus is going to be redirecting a user within JavaScript and then also making an API call within JavaScript so it's going to be a really simple little script we're going to work on now I have it somewhere over here redirect HTML now let me I went ahead and typed a lot of this stuff out because I've been playing around with it quite a bit there are some things that we'll talk about separate in a different issue talking about deploying out our API that I sort of ran through as I was testing it now what I do here uh in this I think everybody probably knows if you're asking this question you're going to start with your script tags so this is straight up HTML document we're going to throw this on our local Apache server on a on a Mac we start off keep it real simple we're going to start right into the script so I'm going to set the default value to where we're going to go developreneur.com I'm just going to throw them somewhere then what I'm going to do is I'm going to grab the URL from the location itself and we're going to see this in the console actually we're gonna do it like this we'll do the the URL called and we're going to show that off and then and so this is where the sort of key is what we're going to do is we're basically say hey whatever you send us we're going to peel off a uh we're gonna peel off a couple variables in this case in particular this would be uh if we go back here we would assume that we were sitting at like https short.srv we want to peel off that number now it's gonna be a little different because the way we're doing it here we're not going to use a slash we're going to actually do a we're going to assume there's a slash we're going to put a uh quote a question mark in front though because just how we've set it up for this specific page you can tweak it as needed but what we need to do is we need to grab what is it what did they send us and we're going to do that through the window location and then this is where this is the meat of what we're going to talk about is making that API call so an API call in JavaScript it provides this thing called xh XML HTTP request and it is a well well used commonly used approach to making calls and so what we're going to do in our case is we're going to call our API if you remember we had it set up here at 127's uh well we had it set up differently but if I go over here uh do I have I don't have Postman up but I can do it over here if I go to 127.90 what is that 90 90 uh where I put that over here yeah 90 90. if I do the get this is a postman window within Visual Studio code by the way which didn't mention in the postman thing but if you want to it's very easy you can go into uh I believe that's it yeah extensions and if you go look up Postman you will see that they have Postman stuff so that you can actually go in and again one of those things that's pretty useful for building out your your API and testing it Visual Studio code does a lot of that and this would be as if I was in Postman so I can see my calls all that good stuff not to get too far afield from that so let's if I can click on that there we go then if we do a get we sent the short name uh here it doesn't find it but if we give it one two three four five six that's the one we have that does work then it's going to send us back this URL so that's what we want to do here is this is our HP or I'm sorry our API call so we are this would be the API server and port and then this is the endpoint shorten and then URL which you can see here same thing that's our API endpoint and so we come over here we're going to make that call and what we're going to do is we're just going to tack on this URL that we have now we could do there are other ways we could do this but it's just easier to do it this way so we're going to tack that in and actually what we can do uh well uh we'll do it like this for now and then all you have to do so you're going to say open it which says hey do I have a is basically gets a connection to the server and then send actually sends the message so open doesn't do anything by itself as far as like calling the um calling the API but send does and then what we're going to need to do is within that request we want to basically look for what's going on so we're going to do is we're going to come in and we're going to do a console log the request and then we're just going to sit around and wait because this when this comes in we're going to say hey oh and this is on I'm sorry this is when the Call Comes in when it actually gets result back we're going to say hey when you get the result back go ahead and just show what the response is I said well the request is and then if the status is equal to 200 I got next one in there then we're going to parse you do a json.parse so we're going to turn this thing which is Json so we're going to parse that thing out the response is which you can see over here see we have that this is that response we're going to parse this thing out and that's going to allow us to grab the data which is the actual URL see data is the URL at that and then our new URL is going to be that and then what we end up doing is going to redirect and we'll cover that in just a minute but first let's look at what this is going to do if we get an error we get the status text so it's basically hey if we don't get a 200 then we're going to kick out an error so we can take this let me take this HTML and we can put it out in our local basically put it on a web server just about anywhere and so we're going to do that we've got running local on this Mac we've got one and oh by the way I've got I'm sorry after that I just have this like this little page and I could do some more with it but I'm not gonna let's do this uh yeah let's do it this way uh we're gonna do just a paragraph let's do this which can be really simple and this is going to be the result let's do response and that's going to be [Music] um do this we'll do one of our response whoops and our status I don't know that we're gonna be able to do this but well let's see what happens um so if we do that if I do that uh I do status equals Quest dot status and response equals request Dot status text let's say um I will say response don't know that that'll always give us something but uh let's forget it I don't want to do that because I don't wanna that's gonna be too much of a pain um it's easier to look at the console log so let's just do that I don't want to go through set all those values up [Music] okay so besides that would mess this up now so over here I've got this and we're going to look in our console here which I'm going to have to so so if I like so if I come whoop if I come in here and I give it um let's give it um let's just give it one two three four whoops I have to make sure that it is HTTP colon backslash backslash there we go okay see I don't know if I can can I pull this out into something a little bigger yeah okay so here's the log so the first thing it does it comes through is it says hey console log oh I don't have the URL curl um let's do this let's so I'm going to copy redirect index.html this is just to make it really easy I'm going to copy that over to my um my local server and then oh wait I want to run it here x gaming same thing uh one two three four yeah so now look okay so here in the log we come in the URL we do what's called here is what was sent and then it's going to go in and it here's a request that went through we have that here we log the request and then we come through here and we didn't get an error so we got this one so let's call this the data returned and if we do that now let's try it just because there now it's going to give a state of return and you can see it here didn't find the link because we didn't give it a useful ID but if we come over here and do the same thing oh I did have that somewhere oh I see uh now if I do one two three four five six then it's going to give us our actual link and we will be able to confirm that so here we call one two three four five six now it gives us this longer link which if we click on it it's going to go open up this page on our website so we're almost there so now what we want to do instead of doing this thing we want to come in here and we'll leave the redirecting hopefully I don't even see it but now this is a very simple thing in JavaScript we just want to redirect so we're going to do a window location replace with that new URL which is this thing so now if I call it oop if I call it with the correct one oh sorry oh and by the way if I call it the wrong one it's going to do the new URL which is going to take me just straight to developmentor.com so let's go look at those two examples again copy this over now and now now if I call it with the right one then it is not doing did I forget to return it let's see the URL equals that that's equals that oh let me look I bet it's not let's do a new private window just to make sure it's not doing my redirect let's see what did I miss oh I bet it's coming through too quick so once I get it then I want to do it like this that will probably do it for me um so if I do this that was something I didn't run into earlier so now I go to that guy and run there we go so now it's coming to that human based systems if I go back and do HTTP colon backslash localhost uh four three two one so it's a wrong one then oops what did I do okay that one worked why did I not get it oh um I see so if it comes here there we go that's it my mistake because then I need to do oh yeah I can do it this way I ran into my little race condition so now if I do this same thing uh what I want oh I want to be able to type in that right so if I do oh how did HTTP going backslash backslash a little post four three two one oh interesting it doesn't like that so let's see if it's um I got a console is it kicking that out oh no it is trying to get to somewhere why is it having issues with that replace let's see oh if it's not that's a problem it's not the right one so um I need that to be that's what I need is I need to make sure that that is a 200 and uh there we go so if uh the URL not equal to I think not found then we can redirect oh let's see this so if it's not linked not found then it's going to go ahead and reset it otherwise it's going to go ahead and run it um am I in the right place yeah that's redirect so if I go here if I go over here copy this thing out now if I do it so if I go H go back slow uh backslash backslash where am I at localhost I spelled it right okay four through two one now oh interesting um let's see this would be an interesting thing that we've run into so if I do http host four three two one not found so if I come here let's do this console.log new URL so it'll be the last thing that we see so let's go over here update come here oh so now if we do HTTP column backslash backslash localhost uh four three two one let's see what does it tell us so it's going to say here that it was oh data returned link not found right okay oh that's right that's the API so this is link not found uh why is it not found oh it's not new URL it's if dad come on that's the problem and that's data this is why you have to pay attention so if a result I've got to check the result is equal to that then we go through it and then we do this okay uh now I need to take that and copy it out and go here and now if we go to that one now it's going to send us there since it's on page if we go to localhost one two three four five six then we go here and we don't need to do the redirecting we can do other stuff with that but we're going to go ahead so we could just leave it like this but we'll do that just because that's probably a nice thing to do we could probably put a nice little advertisement even there or something like that or even a little link that says hey if it doesn't work click on this to let me know that is calling an API doing something with the data as we've seen we've got and that's based on we're going to parse that out because it comes back in this uh this Json so we're going to parse it out we're going to pull out the value that we want and we're going to do something with it in this case we redirect them to the new URL so now we have something that we can actually place on a server and when they call that theoretically they could do it like shortname.com if they go to that site make that call with that ID we should be able to peel that off now we've changed this around a little bit but this is our starting point and this is the key is that it's actually really easy to make calls within JavaScript now I can do other stuff I can do something actually far more complicated and I'll show you one real quick like if I wanted to do uh let's do Source equals blah blah and then um let's do this let's do p ID equals uh source we could come down here um uh oh don't want to do that oh well what we can do we could we can pull an entire page doing this so if I do the same thing let me just do this let me open uh no because it's going to be a complicated kind of thing what you can do is this request.open can call anything so if I can take this I could actually call a website and I could actually display a page within it because it's whatever we are peeling out here it's whatever comes from that response so we're making the API call but we could just as easily just as we can make this API call through a web page so if I do the same thing and I make that call uh six five four three two one then I get this back so note I'm getting Json data back I don't have to actually Json parse it I could actually just try to work with it directly so if I get HTML like I do with any browser page I can actually do that so I could do this for things like scraping data out of a request and things of that nature it goes a little bit beyond what we can do but I wanted to get to the basics of making calls from JavaScript it's really simple you want to use the here that xh XML HTTP request open it send it and then unload is where you're going to actually do some of these that means that hey once I've got my result back then I'm going to do something with it and basically it's from the right here it's from the response so whatever comes back this is the response if it's HTML it'll be in the response and then you can wheel and deal with it and do what you need okay thanks a lot for your time and I hope you come back next time we will have some more to go over and let's keep plotting our way through this thing next one depends on what your order is so for now go out there have some fun with your API and we will catch you next time thank you hello this is Rob with developmentor also known as building better developers wanted to announce that we have school.developmentor.com feel free to check it out if you like any of this information any of the content that we've sent and you would like to see more you can come out you can enroll for free we have free courses we've got places for you to get better at just learning a technology our how to's you can work on your business skills we can help you with becoming a better developer as encoding and things like that a lot of the stuff you've seen on YouTube we also have out at school.developmentor we just have it a little more of a educational format and a way for you to track your progress as you move forward becoming a better developer
Transcript Segments
foreign
[Music]
well hello and welcome back we are in an
overarching project we're walking
through building an application and it
is a URL shortener a little like a bitly
or owl.ly some of those kinds of sites
or those kinds of functionalities and we
built out our API we've built our
database we built a connection now one
of the things we're going to do is we're
going to in this little bit of change
initially we're going to build our web
app that is essentially the redirector
because we're going to give them back a
full URL they're going to give us
something for example this long thing
they're going to get this short thing
and then when they call this short thing
we want it to send them to this long
thing their original URL much like you
see
so in order to do so we're going to use
a we're going to build a Django
application a web application python
we're going to save that for another day
instead because this is so simple we are
actually going to do this in JavaScript
so we're going to look through today our
focus is going to be redirecting a user
within JavaScript and then also making
an API call within JavaScript so it's
going to be a really simple little
script we're going to work on
now I have it somewhere over here
redirect HTML
now let me I went ahead and typed a lot
of this stuff out because I've been
playing around with it quite a bit there
are some things that we'll talk about
separate in a different issue talking
about deploying out our API that I sort
of ran through as I was testing it
now what I do here uh in this I think
everybody probably knows if you're
asking this question you're going to
start with your script tags so this is
straight up HTML document we're going to
throw this on our local Apache server on
a on a Mac
we start off keep it real simple we're
going to start right into the script so
I'm going to set the default value to
where we're going to go
developreneur.com I'm just going to
throw them somewhere then what I'm going
to do is I'm going to grab the URL from
the location itself and we're going to
see this in the console actually
we're gonna do it like this we'll do
the
the URL
called
and we're going to show that off
and then and so this is where the sort
of key is what we're going to do is
we're basically say hey whatever you
send us we're going to peel off a uh
we're gonna peel off a
couple variables in this case in
particular this would be
uh if we go back here
we would assume that we were sitting at
like https
short.srv we want to peel off that
number
now it's gonna be a little different
because the way we're doing it here
we're not going to use a slash we're
going to actually do a we're going to
assume there's a slash we're going to
put a uh quote a question mark in front
though because just how we've set it up
for this specific page you can tweak it
as needed but what we need to do is we
need to grab what is it what did they
send us and we're going to do that
through the window location
and then
this is where this is the meat of what
we're going to talk about is making that
API call so an API call in JavaScript it
provides this thing called xh XML HTTP
request and it is a well well used
commonly used approach to making calls
and so what we're going to do in our
case is we're going to call our API if
you remember we had it set up here at
127's uh well we had it set up
differently but if I go over here
uh do I have
I don't have Postman up but I can do it
over here if I go to 127.90 what is that
90 90
uh where I put that
over here
yeah 90 90. if I do the get
this is a postman window within Visual
Studio code by the way which didn't
mention in the postman thing but if you
want to it's very easy you can go into
uh I believe that's it yeah extensions
and if you go look up Postman you will
see that they have Postman stuff so that
you can actually go in and again one of
those things that's pretty useful for
building out your your API and testing
it Visual Studio code does a lot of that
and this would be as if I was in Postman
so I can see my calls all that good
stuff not to get too far afield from
that so let's if I can click on that
there we go then if we do a get we sent
the short name
uh here it doesn't find it but if we
give it one two three four five six
that's the one we have that does work
then it's going to send us back this URL
so that's what we want to do
here
is this is our HP or I'm sorry our API
call
so we are this would be the API server
and port and then this is the endpoint
shorten and then URL which you can see
here same thing
that's our API endpoint
and so we come over here we're going to
make that call and what we're going to
do is we're just going to tack on this
URL that we have now we could do there
are other ways we could do this but it's
just easier to do it this way so we're
going to tack that in
and actually what we can do
uh well uh
we'll do it like this for now and then
all you have to do so you're going to
say open it
which says hey do I have a is basically
gets a connection to the server and then
send actually sends the message so open
doesn't do anything by itself as far as
like calling the
um calling the API but send does
and then what we're going to need to do
is within that request we want to
basically look for what's going on
so we're going to do is we're going to
come in and we're going to do a console
log the request and then we're just
going to sit around and wait because
this when this comes in we're going to
say hey oh and this is on I'm sorry this
is when the Call Comes in when it
actually gets result back we're going to
say hey when you get the result back
go ahead and just show what the response
is I said well the request is
and then if the status
is equal to 200
I got next one in there then we're going
to parse you do a json.parse so we're
going to turn this thing which is Json
so we're going to parse that thing out
the response is
which you can see over here
see we have that this is that response
we're going to parse this thing out
and that's going to allow us to grab the
data which is the actual URL see data is
the URL
at that and then our new URL is going to
be that and then what we end up doing is
going to redirect and we'll cover that
in just a minute but first let's look at
what this is going to do if we get an
error we get the status text so it's
basically hey if we don't get a 200 then
we're going to kick out an error so we
can take this let me take this HTML and
we can put it out in our local basically
put it on a web server just about
anywhere
and so we're going to do that we've got
running local on this Mac we've got one
and oh by the way I've got I'm sorry
after that I just have this like
this little page and I could do some
more with it but I'm not gonna let's do
this uh
yeah let's do it this way uh we're gonna
do just a paragraph
let's do this which can be really simple
and this is going to be the result let's
do response
and that's going to be
[Music]
um
do this we'll do one of our response
whoops
and
our status
I don't know that we're gonna be able to
do this but well let's see what happens
um
so if we do that if I do that
uh I do status
equals
Quest dot status
and
response
equals
request Dot
status text let's say
um
I will say response
don't know that that'll always give us
something but
uh
let's forget it I don't want to do that
because I don't wanna that's gonna be
too much of a pain
um it's easier to look at the console
log so let's just do that
I don't want to go through set all those
values up
[Music]
okay so
besides that would mess this up now so
over here I've got this and we're going
to look in our console here which I'm
going to have to so
so if I
like so if I come whoop if I come in
here
and I give it
um
let's give it
um
let's just give it one two three four
whoops I have to make sure that it is
HTTP colon
backslash backslash
there we go okay see I don't know if I
can can I pull this out into something a
little bigger yeah okay so here's the
log so the first thing it does it comes
through is it says hey console log oh I
don't have the URL curl um
let's do this
let's
so I'm going to copy redirect index.html
this is just to make it really easy I'm
going to copy that over to my
um my local server
and then
oh wait I want to run it
here x gaming same thing uh one two
three four yeah
so now
look
okay so here in the log we come in the
URL we do what's called here is what was
sent
and then it's going to go in and it
here's a request that went through we
have that here we log the request
and then
we come through here and we didn't get
an error so we got this one so let's
call this
the
data
returned
and if we do that
now let's try it
just because there now it's going to
give a state of return
and you can see it here
didn't find the link because we didn't
give it a useful ID but if we come over
here
and do the same thing oh I did have that
somewhere oh I see
uh now if I do one two three four five
six
then
it's going to give us our actual link
and we will be able to confirm that so
here we call one two three four five six
now it gives us this longer link which
if we click on it
it's going to go open up this page on
our website
so we're almost there so now what we
want to do instead of doing this thing
we want to come in here
and we'll leave the redirecting
hopefully I don't even see it but now
this is a very simple thing in
JavaScript we just want to redirect so
we're going to do a window location
replace with that new URL which is this
thing so now if I call it
oop if I call it with the correct one
oh
sorry
oh and by the way if I call it the wrong
one it's going to do the new URL which
is going to take me just straight to
developmentor.com so let's go look at
those two examples again
copy this over now
and now now if I call it with the right
one
then it is not doing did I forget to
return it let's see the URL equals that
that's equals that
oh let me look I bet it's not
let's do a new private window just to
make sure
it's not doing my redirect
let's see what did I miss
oh I bet it's coming through too quick
so once I get it then I want to do it
like this
that will probably do it for me
um so if I do this that was something I
didn't run into earlier
so now
I go to that guy and run
there we go so now it's coming to that
human based systems if I go back and do
HTTP colon backslash localhost
uh four three two one so it's a wrong
one then
oops
what did I do
okay that one worked why did I not get
it oh
um I see
so if it comes here
there we go
that's it my mistake because then
I need to do
oh yeah I can do it this way
I ran into my little race condition so
now if I do this same thing
uh what I want oh I want to be able to
type in that right
so if I do oh
how did HTTP going backslash backslash a
little
post
four three two one
oh interesting it doesn't like that so
let's see if it's
um
I got a console is it kicking that out
oh no it is trying to get to
somewhere why is it having issues with
that
replace
let's see
oh if it's not that's a problem it's not
the right one so
um
I need that to be
that's what I need is I need to make
sure that that is
a 200 and uh there we go
so if
uh the URL
not equal to I think not found then
we can redirect
oh let's see this
so if it's not linked not found then
it's going to go ahead and reset it
otherwise it's going to go ahead and run
it
um am I in the right place yeah that's
redirect so if I go here if I go over
here
copy this thing out
now if I do it
so if I go H go back slow uh backslash
backslash
where am I at
localhost I spelled it right okay
four through two one
now oh interesting
um
let's see
this would be an interesting thing that
we've run into so if I do http
host four three two one
not found so if I come here
let's do this
console.log
new URL
so it'll be the last thing that we see
so let's go over here
update
come here
oh so now if we do HTTP column backslash
backslash
localhost
uh four three two one let's see what
does it tell us
so it's going to say here
that it was
oh data returned link not found right
okay oh that's right that's the API
so this is link not found
uh why is it
not found
oh
it's not new URL it's if
dad come on that's the problem and
that's
data this is why you have to pay
attention so if a result I've got to
check the result is equal to that
then we go through it and then we do
this okay
uh now I need to take that and copy it
out
and go here and now if we go to that one
now it's going to send us there
since it's on page if we go to localhost
one two three four five six
then we go here and we don't need to do
the redirecting we can do other stuff
with that but
we're going to go ahead so we could just
leave it like this but we'll do that
just because
that's probably a nice thing to do we
could probably put a nice little
advertisement even there or something
like that or even a little link that
says hey if it doesn't work click on
this to let me know
that
is calling an API
doing something with the data as we've
seen we've got and that's based on we're
going to parse that out because it comes
back
in this uh this Json so we're going to
parse it out we're going to pull out the
value that we want
and we're going to do something with it
in this case we redirect them to the new
URL so now we have something that we can
actually place on a server
and when they call that theoretically
they could do it like shortname.com
if they go to that site make that call
with that ID we should be able to peel
that off now we've changed this around a
little bit but this is our starting
point and this is the key is that it's
actually really easy to make calls
within JavaScript now I can do other
stuff I can do something actually far
more complicated and I'll show you one
real quick like if I wanted to do
uh let's do
Source equals blah blah
and then
um
let's do this let's do p
ID equals uh
source
we could come down here
um
uh oh don't want to do that oh
well what we can do we could we can pull
an entire page doing this so if I do the
same thing let me just do this
let me open
uh no because it's going to be a
complicated kind of thing
what you can do is this request.open can
call anything so if I can take this I
could actually call a website and I
could actually display a page within it
because it's whatever we are peeling out
here
it's whatever comes from that response
so we're making the API call but we
could just as easily just as we can make
this API call
through a web page
so if I do the same thing and I make
that call
uh six five four three two one
then I get this back so note I'm getting
Json data back I don't have to actually
Json parse it
I could actually just
try to work with it directly so if I get
HTML like I do with any browser page I
can actually do that so I could do this
for things like
scraping data out of a request and
things of that nature
it goes a little bit beyond what we can
do but I wanted to get to the basics of
making calls from JavaScript it's really
simple you want to use the here that xh
XML HTTP request open it send it and
then unload is where you're going to
actually do some of these that means
that hey once I've got my result back
then I'm going to do something with it
and basically it's from the right here
it's from the response so whatever comes
back
this is the response if it's HTML it'll
be in the response and then you can
wheel and deal with it and do what you
need okay thanks a lot for your time and
I hope you come back next time we will
have some more to go over and let's keep
plotting our way through this thing next
one depends on what your order is so for
now go out there have some fun with your
API and we will catch you next time
thank you
hello this is Rob with developmentor
also known as building better developers
wanted to announce that we have
school.developmentor.com feel free to
check it out if you like any of this
information any of the content that
we've sent and you would like to see
more you can come out you can enroll for
free we have free courses we've got
places for you to get better at just
learning a technology our how to's you
can work on your business skills we can
help you with becoming a better
developer as encoding and things like
that a lot of the stuff you've seen on
YouTube we also have out at
school.developmentor we just have it a
little more of a educational format and
a way for you to track your progress as
you move forward becoming a better
developer