1 00:00:07,620 --> 00:00:13,400 If we want to welcome back Johnny be here with slopes stock and in this lesson we are going to talk 2 00:00:13,400 --> 00:00:19,570 about something that is extremely important for developers to understand and that is web requests. 3 00:00:19,670 --> 00:00:26,840 You'll be hard pressed to find an app today that does not use requests in some form whether it's Facebook 4 00:00:26,840 --> 00:00:28,280 or Twitter or Spotify. 5 00:00:28,430 --> 00:00:33,530 These are all communicating with a server via web requests to get you the information that you are seeing 6 00:00:33,530 --> 00:00:34,280 in your apps. 7 00:00:34,280 --> 00:00:34,840 OK. 8 00:00:35,090 --> 00:00:37,380 So let's just start out with what you see on a Web site. 9 00:00:37,520 --> 00:00:41,560 Let's say you go to Devis slopes dot com and you see this beautiful Web site. 10 00:00:41,930 --> 00:00:44,330 Well how on earth is this actually done. 11 00:00:44,330 --> 00:00:50,030 How does your Web Browser know what to display when you type in slopes dot com or Google dot com or 12 00:00:50,030 --> 00:00:51,150 any Web site. 13 00:00:51,560 --> 00:00:59,090 First off let's talk about something called HTP stands for Hypertext Transfer Protocol and you probably 14 00:00:59,090 --> 00:01:02,840 recognize this because it's at the front of all your Web site domains right. 15 00:01:03,230 --> 00:01:05,380 So it's a protocol or a standard. 16 00:01:05,510 --> 00:01:10,070 So what we know is that this Web site is abiding by this standard. 17 00:01:10,190 --> 00:01:17,030 And so we can use this Hypertext Transfer Protocol to send or receive information in a text format and 18 00:01:17,030 --> 00:01:23,830 we're sending that information between clients like web browsers and apps and servers where all the 19 00:01:23,850 --> 00:01:27,880 specific information for that Web site or API is stored. 20 00:01:28,220 --> 00:01:32,290 OK so let's see if we have some clients here we got an iPhone Android phone. 21 00:01:32,330 --> 00:01:33,560 A web browser. 22 00:01:33,560 --> 00:01:36,040 And we want to go to dev slopes dot com. 23 00:01:36,290 --> 00:01:40,420 Well those slopes dot com has content hosted on a server. 24 00:01:40,700 --> 00:01:48,710 And when the user types in dev slopes dot com into their device the client is sending an HTP get Web 25 00:01:48,710 --> 00:01:55,790 request to a very specific address on the server meaning we are basically just saying hey we want to 26 00:01:55,790 --> 00:02:03,170 see what you got and the server can take a look at this TTP kit request and say yeah OK I'll show you 27 00:02:03,170 --> 00:02:04,280 what I got. 28 00:02:04,280 --> 00:02:12,110 Then it can return and HTP response that contains information like headers and the body and the body 29 00:02:12,230 --> 00:02:18,140 is going to have all the symbol and the browser then takes that and turns it into the Web sites that 30 00:02:18,140 --> 00:02:20,490 you see. 31 00:02:20,500 --> 00:02:25,950 Now let's talk about web requests from an app's perspective specifically our chat app. 32 00:02:25,990 --> 00:02:33,130 So here in a few lessons we're going to be working with our chat API and API stands for application 33 00:02:33,130 --> 00:02:41,230 program interface basically an API is code that is hosted on a server or locally that can receive web 34 00:02:41,230 --> 00:02:47,470 requests process information and take action based on that request whether it's returning information 35 00:02:47,500 --> 00:02:53,590 storing data in a database or any number of things that you can program an API to do. 36 00:02:53,800 --> 00:02:54,810 Our past courses. 37 00:02:54,960 --> 00:03:02,290 If you have taken any we have used a number of API including the pokie API to get pokmon information 38 00:03:02,440 --> 00:03:07,240 as well as the open weather API guys to get weather information. 39 00:03:07,490 --> 00:03:10,140 And in the case of the API we are going to be working with. 40 00:03:10,240 --> 00:03:16,540 It handles things like creating and authenticating users fetching messages and channels and account 41 00:03:16,540 --> 00:03:20,880 information and it stores all that information in a separate database. 42 00:03:21,190 --> 00:03:28,240 So the API is code that interfaces with the client returning information and sending data from the database 43 00:03:28,270 --> 00:03:30,010 as needed. 44 00:03:30,010 --> 00:03:35,410 Now let's shift gears a little and talk about the type of information that is typically returned from 45 00:03:35,410 --> 00:03:36,370 an API. 46 00:03:36,610 --> 00:03:39,950 We've talked about the get request with Web sites and servers. 47 00:03:40,060 --> 00:03:46,050 In this case the site usually returns a mail which the browser converts into pretty pictures and text. 48 00:03:46,300 --> 00:03:53,940 Most API these days they'll return what is called Jaison which stands for javascript object notation. 49 00:03:54,220 --> 00:03:58,890 So when you send a web request to an API instead of getting back HD and now you get back. 50 00:03:58,930 --> 00:04:01,880 Jason and this is what Jason looks like. 51 00:04:02,140 --> 00:04:04,340 It's actually not too bad to read. 52 00:04:04,360 --> 00:04:08,470 This is a sample from the chat API and these are chat messages. 53 00:04:08,530 --> 00:04:15,600 The curly brace denotes the beginning of a J song object which consists of key value pairs. 54 00:04:15,610 --> 00:04:23,170 The key is always a string which is paired with a value that can be a string a number a boolean an array 55 00:04:23,170 --> 00:04:25,650 or even another chase object. 56 00:04:25,990 --> 00:04:34,630 So the app makes a get Web request to a specific URL something like w w w dot chat API dot com slash 57 00:04:34,720 --> 00:04:38,370 message slash by channel slash general. 58 00:04:38,860 --> 00:04:45,880 And then the client gets back this Jaison on data that the client then parses out and displays to the 59 00:04:45,880 --> 00:04:48,280 user like you see here. 60 00:04:48,790 --> 00:04:54,970 Before we move onto the other types of web requests I want to discuss real quick bodies and headers. 61 00:04:54,970 --> 00:04:59,290 So there are bodies and headers in both requests and responses. 62 00:04:59,280 --> 00:05:05,440 A common thing with API for security is to have an authorization token or an API key. 63 00:05:05,440 --> 00:05:12,000 This is a security measure to make sure not just anyone can access the API and get data in our app. 64 00:05:12,010 --> 00:05:19,570 We let anyone create a user but once a user is created that user gets an authorization token and that 65 00:05:19,570 --> 00:05:25,500 authorization token is sent as part of the HTP get request in the form of a header. 66 00:05:25,600 --> 00:05:32,350 So the AP receives for instance a chat messages get request and first thing is going to do is check 67 00:05:32,410 --> 00:05:36,110 out the authorization token in the header and make sure it's valid. 68 00:05:36,370 --> 00:05:40,740 If it's not it's just going to kick back that request within an unauthorized request error. 69 00:05:41,590 --> 00:05:44,110 So that's the get request. 70 00:05:44,500 --> 00:05:47,790 Now say we are sending a chat message. 71 00:05:47,790 --> 00:05:51,510 And so this is also done in a web request. 72 00:05:51,670 --> 00:05:58,900 But this web request is called a post web request meaning we are sending data inside our HTP request 73 00:05:58,960 --> 00:06:01,540 that the server can do something with. 74 00:06:01,750 --> 00:06:08,680 So in addition to our web request having a token header there is also Giese on data inside the body 75 00:06:08,680 --> 00:06:10,100 of the post request. 76 00:06:10,270 --> 00:06:13,370 This chase on object contains the message itself. 77 00:06:13,630 --> 00:06:14,290 Who sent it. 78 00:06:14,280 --> 00:06:22,420 The user and any other info we need the API will again check the token in the header. 79 00:06:22,420 --> 00:06:29,710 Make sure it's valid except the chat message info in the body and turn it into a message object and 80 00:06:29,710 --> 00:06:33,280 send that message over to the database to be stored. 81 00:06:33,280 --> 00:06:38,270 Other web request types are put which alter an existing object for instance. 82 00:06:38,260 --> 00:06:45,340 This could be used to change the user name of an existing user and there is also the delete web request 83 00:06:45,400 --> 00:06:49,660 which is used to delete existing objects. 84 00:06:49,660 --> 00:06:55,570 Lastly I want to talk about where the sockets come now when we look at these types of requests that 85 00:06:55,570 --> 00:06:57,190 we've already talked about. 86 00:06:57,190 --> 00:07:00,720 They are all one time user initiated requests right. 87 00:07:00,940 --> 00:07:06,880 It's like every time we need something we have to go knock on the API door show them our credentials 88 00:07:06,970 --> 00:07:08,820 and then they'll give us what we need. 89 00:07:09,130 --> 00:07:14,650 Well that doesn't really work with something like a chat app does it because we don't know when someone 90 00:07:14,650 --> 00:07:22,830 is sending a message so we don't know when to go and ask the API for you know all of the chat messages. 91 00:07:22,990 --> 00:07:24,260 So what are we supposed to do. 92 00:07:24,430 --> 00:07:27,970 I send an API request every one or two seconds. 93 00:07:28,300 --> 00:07:29,730 No don't do that. 94 00:07:29,770 --> 00:07:31,550 That's bad bad. 95 00:07:31,570 --> 00:07:37,870 So what we need are Web sockets if the if the requests that we've been talking about is like going and 96 00:07:37,870 --> 00:07:44,110 knocking on someone's door every time you need something web sockets is like an open door policy free 97 00:07:44,110 --> 00:07:47,160 flow of information in both directions. 98 00:07:47,160 --> 00:07:47,720 Right. 99 00:07:48,160 --> 00:07:56,610 It establishes So what it does is it establishes a two way bridge between the client and the server. 100 00:07:56,620 --> 00:08:03,730 This way when your friend Billy sends you a check message to you on his iPhone that will go right to 101 00:08:03,730 --> 00:08:08,530 the server and then all right to your phone because we have that web socket set up. 102 00:08:08,530 --> 00:08:15,400 We have a open flow of information between all of the devices connected to the server and the other 103 00:08:15,400 --> 00:08:16,200 devices. 104 00:08:16,210 --> 00:08:16,780 OK. 105 00:08:17,200 --> 00:08:19,710 So it's pretty cool stuff. 106 00:08:19,840 --> 00:08:26,270 It's going to be really fun and pretty easy to implement so I'm excited to get you guys going on that. 107 00:08:26,500 --> 00:08:32,140 Yes so that's how web requests API eyes and web sockets work from a high level. 108 00:08:32,140 --> 00:08:37,090 And the next lessons we are going to get our hands dirty and really see how they work starting with 109 00:08:37,270 --> 00:08:41,460 setting up our own API and databases on Heroku and labs. 110 00:08:41,500 --> 00:08:43,170 So I will see you in the next one.