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