RESTful and HTTP APIs in Pyramid Transcripts
Chapter: Calling services with Python and JavaScript
Lecture: Calling services with JavaScript clients

Login or purchase this course to watch this video and the rest of the course contents.
0:01 For our final client, let's create a client side Javascript client,
0:05 so this is very, very common, you're going to create a website,
0:08 it's going to serve up some html, you might put something like angular
0:12 or Aurelia, or one of those types of front end frameworks into your web app,
0:18 and it does a lot of the work talking to services that you're creating
0:21 just like we're learning in this course,
0:23 so let's real quickly see how that goes,
0:25 we're just going to use something super basic like jquery
0:28 but you could use one of the more interesting front end frameworks, for sure.
0:31 Now, this is going to start out to seem totally straightforward and easy— until it's not.
0:37 So let's look at our little html, now this is crazy simple html, so that's great,
0:43 we've got an input and you can input the car id
0:47 that you're interested in, and click the search button.
0:50 Then, some javascript is going to catch that click event
0:53 and it's going to come down here and fill out
0:55 the details of name, price, year and whatnot.
0:57 So we are going to use jquery and we're including our little site js
1:00 where we're writing our code.
1:02 It seems straightforward, it's not totally done
1:05 so if we come over here let's look, when the document is ready
1:07 we're grabbing the form, we're hooking the submit
1:10 and we're telling it don't actually submit, we got this handled in javascript
1:14 and we're handling it by calling load car details, that's cool
1:18 so there's a couple of things we need to do here in order to get this start,
1:22 but let's just run it so we can see what we got so far;
1:25 so you can right click on this in PyCharm and say run
1:27 if you're familiar with web storm, basically PyCharm has
1:30 all the web store and features built as part of it.
1:33 All right, so there it goes, now it's off to run,
1:35 it doesn't do anything yet when I click this
1:37 because there is at least three two dos we still have to fill out right,
1:41 okay so this seems pretty straightforward,
1:43 and it's good idea to always show the javascript console
1:46 while you're doing these types of things,
1:49 it's a little upset that I didn't set the encoding to whatever;
1:52 so we're going to input some kind of id here
1:57 and see what happens, so let's go write the code first
2:00 first thing we have to do is get the car id,
2:02 so they're going to type that into this thing here,
2:05 this input box that has the name car id
2:08 I'm going to kind of cheat and say well there's only one input box
2:11 so we're going to grab the value out of that
2:14 so also car id is going to be, we'll just do a little jQuery thing,
2:17 we'll say give me the input and I would like it a val for input boxes
2:22 and things like that you get the val, for raw like red only elements you get the text.
2:28 So let's just alert car id, so let's run this, go over here and say abc,
2:37 click, not yet, we haven't hooked click yet, have we, okay
2:41 or we're doing something wrong, let's look at the console real quick.
2:44 Actually, so make sure to click here, let's just say click,
2:49 all right so we're capturing the click, oh great, great
2:52 there we go, abc, I think it's the caching, caching, caching,
2:56 all right so we hit this, all right it's clicked, we're learning abc very, very good
3:00 so we don't need our little clicked anymore, it looks like we're getting
3:03 the abc that we typed in correctly, okay, so let's get rid of the to do
3:07 and just say get the car id, the next thing we need to do
3:10 is actually build the url, right, so var url,
3:14 remember if we have the car car id the url is going to be
3:17 well what we had in Python, so let's just snatch it here
3:20 like that, so it looks like this, except there is no format
3:24 there's less rules in Javascript so we're just going to go down here
3:27 and say plus car id, all right.
3:32 Again, not too much error handling, so we built the url it's all good,
3:37 now, the last thing we need to do is we're going to use jQuery
3:40 to go and talk to the server, so we'll say $get there's get post delete whatever,
3:46 I want to give it the url, and then we want to give it 2 call back functions,
3:51 so we're going to say done, and when you're done
3:53 we want to have a function here that has the results.
3:57 And if you fail, we want to have a function here that has the error, like so.
4:02 Alright, so let's just say alert success, alert fail.
4:09 Now, this might look like it's going to work, but I do not think it's going to work
4:15 so let's go over here, refresh again, show the console, and let's try.
4:22 So everything's clear, if we hit click, all right abc great,
4:27 we can get rid of that thing in a moment,
4:29 now it failed, this url looks right and actually I guess it could have failed
4:34 because of 404 but that's not why it failed,
4:37 that's why I didn't pay attention to what the id was,
4:39 look down here cross origin request blocked,
4:43 the same origin policy disallowed reading of the remote resource,
4:47 so here you have to decide, how is your service going to be used
4:51 in this case, we have one site granted they're both on local host
4:56 but different ports, they are different applications;
4:59 this one is our service here, that returns this data, at this address.
5:03 We have this effectively entirely different web app
5:07 running over here running some javascript,
5:09 if this was running as a page on the same server, this would have worked fine,
5:14 but because our service is running and wants to be
5:17 contacted from outside of the web app, right,
5:20 hopefully you want to build services that many people consume,right
5:23 and if that's the case, you need to allow web applications
5:26 javascript apps outside of your domain to talk to it;
5:30 you want to be very careful here, if you've got like private data
5:34 and sessions and all sorts of stuff, also on that same web app
5:37 you don't want to do it, you probably want to separate your service or something like that,
5:40 but if it's just a pure raw service and it's meant to be consumed from anywhere,
5:44 you need to find a way to get over this, right.
5:46 So what we're going to do next, is we're going to make a minor change to pyramid
5:50 to basically enable what's called cores,
5:54 cross origin site scripting, cross origin request security, I think.
6:00 Yeah, so you can see down here, reason course header, okay.
6:03 So we need to enable cores in particular we need to enable
6:06 access control allow origin on our service
6:09 so that then the browsers will let our javascript client
6:13 or someone else's javascript client talk to you our service.