1 00:00:03,879 --> 00:00:07,577 Let me start out by giving you a quick 2 00:00:07,577 --> 00:00:11,705 10-minute introduction to the essentials of networking. 3 00:00:11,705 --> 00:00:18,769 The more I teach English, the more I realize that just to use their prettiest features 4 00:00:18,769 --> 00:00:23,210 of angular you need to have an understanding of so many different connected FINs 5 00:00:23,210 --> 00:00:27,165 before you can even understand what you're doing with angular. 6 00:00:27,165 --> 00:00:29,929 By the moment you start chasing each one of these FINs, 7 00:00:29,929 --> 00:00:32,890 they will become entire courses on their own and pretty soon, 8 00:00:32,890 --> 00:00:37,539 I'll end up teaching their entire computer science curriculum to you. 9 00:00:37,539 --> 00:00:41,174 But given the fact that we have limited time, 10 00:00:41,174 --> 00:00:43,554 I will concentrate in delivering you the essentials 11 00:00:43,554 --> 00:00:48,344 that you need for understanding each of the topics. 12 00:00:48,344 --> 00:00:53,383 Now, what we cover in this particular module will require 13 00:00:53,383 --> 00:00:57,829 at least a rudimentary understanding of how computer networking works 14 00:00:57,829 --> 00:01:01,310 before we understand why we need to use HTTP, 15 00:01:01,310 --> 00:01:03,587 why we communicate with a server. 16 00:01:03,587 --> 00:01:08,284 What is the reason for the delay is that when you are talking to a server, 17 00:01:08,284 --> 00:01:09,394 and so on. 18 00:01:09,394 --> 00:01:14,111 And also, the various protocols that you need to be aware 19 00:01:14,111 --> 00:01:17,420 of before you can even communicate with a server. 20 00:01:17,420 --> 00:01:20,239 So, keeping all this in mind, 21 00:01:20,239 --> 00:01:25,950 a 10-minute quick introduction to the essentials of networking. 22 00:01:25,950 --> 00:01:30,575 We begin to realize that web applications are no longer stand-alone. 23 00:01:30,575 --> 00:01:38,015 They always have a quote unquote cloud back-end supporting your web application. 24 00:01:38,015 --> 00:01:40,370 Now, these days everything is on the Cloud. 25 00:01:40,370 --> 00:01:46,444 Pretty soon you'll be on the Cloud too, at least on cloud nine with a silver lining. 26 00:01:46,444 --> 00:01:55,939 But given that we need a Silverside support for our angular application to work correctly, 27 00:01:55,939 --> 00:01:58,615 there would you host the server. 28 00:01:58,615 --> 00:02:06,140 And these days hosting the server is very easily done by using one 29 00:02:06,140 --> 00:02:09,619 of the cloud based infrastructure services. 30 00:02:09,619 --> 00:02:15,860 Things like Amazon, Web Services or Heroku or Digital Ocean 31 00:02:15,860 --> 00:02:21,650 or many others that provide cloud based server support 32 00:02:21,650 --> 00:02:26,574 that you can leverage for providing server support for your angular application. 33 00:02:26,574 --> 00:02:32,363 So, on the server side, what exactly is available on the server side? 34 00:02:32,363 --> 00:02:39,814 You typically have a server front-end that is talking to your angular application. 35 00:02:39,814 --> 00:02:45,349 So, that is the server logic and behind the scenes, 36 00:02:45,349 --> 00:02:52,790 the server logic is communicating with a persistent storage like a database 37 00:02:52,790 --> 00:02:56,905 where your data is stored and retrieved from. 38 00:02:56,905 --> 00:03:01,069 When you enter the networking world, you'll be pretty soon bombarded 39 00:03:01,069 --> 00:03:04,264 with 304 little acronyms. 40 00:03:04,264 --> 00:03:08,930 Things that you thought you knew what they were from normal English 41 00:03:08,930 --> 00:03:11,509 or they have an entirely different meaning 42 00:03:11,509 --> 00:03:15,610 or purpose when you encounter them in the networking world. 43 00:03:15,610 --> 00:03:17,764 So, let's examine a few of them. 44 00:03:17,764 --> 00:03:22,159 So, in the networking world you'll hear people talking over HTTP protocol. 45 00:03:22,159 --> 00:03:26,379 The protocol that is used for communicating between the client and the server. 46 00:03:26,379 --> 00:03:29,000 This is an application layer protocol 47 00:03:29,000 --> 00:03:34,409 that we will briefly talk about a little more in the rest of this lecture. 48 00:03:34,409 --> 00:03:41,004 The HTTP protocol for it to work needs a URL to be supplied to it, 49 00:03:41,004 --> 00:03:42,955 the Uniform Resource Locator. 50 00:03:42,955 --> 00:03:51,095 So, this is a string of characters separated by slashes with in each TTP colon, 51 00:03:51,095 --> 00:03:55,694 on an https: attached in front of it. 52 00:03:55,694 --> 00:03:58,530 And I'm sure if you are used the world wide web, 53 00:03:58,530 --> 00:04:02,655 you are pretty familiar with what the URLs look like. 54 00:04:02,655 --> 00:04:06,435 Now, in addition, you will hear people talking about JSON, 55 00:04:06,435 --> 00:04:11,607 not to your friend Jason but JavaScript Object Notation. 56 00:04:11,607 --> 00:04:19,026 So, the JavaScript Object Notation is one way of encoding data that is being shipped 57 00:04:19,026 --> 00:04:22,850 from the server side to the client side or vice versa. 58 00:04:22,850 --> 00:04:26,038 And also, you will hear people talking about XML, 59 00:04:26,038 --> 00:04:30,574 yet another way of encoding data while it is in transit shipment 60 00:04:30,574 --> 00:04:33,240 between the client and server site. 61 00:04:33,240 --> 00:04:41,584 Now, and also you will hear people talking about higher level protocols called SOAP, 62 00:04:41,584 --> 00:04:46,550 not the kind that you take a shower with, but SOAP as a protocol 63 00:04:46,550 --> 00:04:55,034 that allows communication between distribution entities within the network. 64 00:04:55,034 --> 00:04:59,449 And also, you will hear people talking about REST, not something 65 00:04:59,449 --> 00:05:02,479 that you get too much going through this particular course. 66 00:05:02,479 --> 00:05:06,057 REST or a Representational State Transfer. 67 00:05:06,057 --> 00:05:10,850 I will have a shorter lecture specifically devoted 68 00:05:10,850 --> 00:05:14,089 to REST a little bit later in this module. 69 00:05:14,089 --> 00:05:18,410 And in the HTTP world, you will hear people talking about GET, 70 00:05:18,410 --> 00:05:23,449 PUT, POST and DELETE, and you'd be wondering, 71 00:05:23,449 --> 00:05:25,235 what do they all mean? 72 00:05:25,235 --> 00:05:29,454 Let's learn a little bit about this in this lecture, 73 00:05:29,454 --> 00:05:34,459 and also the lecture on REST that you will see a little bit later. 74 00:05:34,459 --> 00:05:38,959 One important thing that you need to understand when you are communicating 75 00:05:38,959 --> 00:05:45,439 with a server is that the client server communication causes unexpected amount 76 00:05:45,439 --> 00:05:48,350 of delays or indeterminate amount of delay 77 00:05:48,350 --> 00:05:54,454 while the data is being either fetched or uploaded to the server from the client side. 78 00:05:54,454 --> 00:05:57,566 So, which means that within your client-server application 79 00:05:57,566 --> 00:06:00,409 you need to keep the user informed about the fact 80 00:06:00,409 --> 00:06:07,970 that something is going on behind the scenes and be able to handle the delays 81 00:06:07,970 --> 00:06:14,149 and possibly not being able to obtain the data from the server side. 82 00:06:14,149 --> 00:06:18,589 It is quite possible that when you tried to connect to a server, 83 00:06:18,589 --> 00:06:20,959 the connection to the server may fail, 84 00:06:20,959 --> 00:06:27,224 the server may return incorrect data or may cause an error in communication. 85 00:06:27,224 --> 00:06:31,129 All these have to be handled on your client side appropriately so 86 00:06:31,129 --> 00:06:37,259 that your application will still be functioning even in the presence of these problems. 87 00:06:37,259 --> 00:06:43,939 Jumping into the most popular application layer protocol used for communicating 88 00:06:43,939 --> 00:06:48,569 between the client and the server, the Hypertext Transfer Protocol 89 00:06:48,569 --> 00:06:51,785 but this is a client server communication protocol. 90 00:06:51,785 --> 00:06:54,019 Now, that may or may not make much sense to you 91 00:06:54,019 --> 00:06:58,250 unless you have sufficient background in networking but this is a protocol 92 00:06:58,250 --> 00:07:04,189 that is used for encoding the messages that you exchange between your client application, 93 00:07:04,189 --> 00:07:08,416 which is an angular application in this case, and a server side. 94 00:07:08,416 --> 00:07:14,300 So, this HTTP protocol allows you to retrieve hypertext based documents 95 00:07:14,300 --> 00:07:19,459 from the server side increasingly the information being downloaded 96 00:07:19,459 --> 00:07:25,298 from the server side is encoded in one of the standard encoding formats like JSON or XML. 97 00:07:25,298 --> 00:07:28,759 And, in order to be able to talk to a server, 98 00:07:28,759 --> 00:07:35,270 you have the support from various HTTP actions, 99 00:07:35,270 --> 00:07:39,295 or what we refer to as HTTP verbs: the HEAD, GET, POST, 100 00:07:39,295 --> 00:07:44,634 PUT, DELETE, TRACE, OPTIONS and CONNECT. 101 00:07:44,634 --> 00:07:51,069 We will see in particular the GET, PUT, POST and DELETE verbs in more detail 102 00:07:51,069 --> 00:07:57,654 when we examine the rest API protocol a little bit later. 103 00:07:57,654 --> 00:08:00,904 How does the HTTP protocol work? 104 00:08:00,904 --> 00:08:08,487 In the HTTP protocol, you are sending a request from your client application to the server 105 00:08:08,487 --> 00:08:12,990 and this is encoded on the form of an HTTP request message. 106 00:08:12,990 --> 00:08:18,767 The request message typically carries a URL in the request message indicating, 107 00:08:18,767 --> 00:08:22,279 what is it that you want with the server side to send to you 108 00:08:22,279 --> 00:08:24,920 and this is typically a GET message 109 00:08:24,920 --> 00:08:29,805 if you want to data to be downloaded from the server site. 110 00:08:29,805 --> 00:08:35,404 And you will also specify which particular server you are communicating with. 111 00:08:35,404 --> 00:08:39,320 When the server receives your request, the server will 112 00:08:39,320 --> 00:08:45,215 retrieve the data from its data storage, typically a database on the server side, 113 00:08:45,215 --> 00:08:49,160 and then package this data in an appropriate four back, 114 00:08:49,160 --> 00:08:53,595 and send the data back to you on your client side. 115 00:08:53,595 --> 00:08:58,430 If you are obtaining standard HTML, CSS and javascript code from the server side, 116 00:08:58,430 --> 00:09:00,746 then your browser is able to render this. 117 00:09:00,746 --> 00:09:05,705 Back with applications like angular, you are primarily connecting to the server 118 00:09:05,705 --> 00:09:12,919 and then retrieving data in the form of either JSON or XML most of the time. 119 00:09:12,919 --> 00:09:16,730 Except for the initial download of all the resources 120 00:09:16,730 --> 00:09:22,259 that are required for the angular application to be executed within your browser. 121 00:09:22,259 --> 00:09:29,929 So, as we saw earlier the HTTP application requires messages to be sent 122 00:09:29,929 --> 00:09:31,954 between the client and the server. 123 00:09:31,954 --> 00:09:36,524 A request message typically sent from the client to the server, 124 00:09:36,524 --> 00:09:42,600 and the request message consists of a request line plus a bunch of headers 125 00:09:42,600 --> 00:09:47,309 where you supply additional information to qualify the request. 126 00:09:47,309 --> 00:09:49,889 We will see the use of various headers 127 00:09:49,889 --> 00:09:53,129 and settings in the headers as we go through some 128 00:09:53,129 --> 00:09:56,634 of the exercises in this particular module. 129 00:09:56,634 --> 00:09:59,159 The request line and headers are separated 130 00:09:59,159 --> 00:10:04,500 from the body of the request message by one blank line. 131 00:10:04,500 --> 00:10:08,279 The body of the message may contain additional data especially 132 00:10:08,279 --> 00:10:11,754 if your clients are sending data over to the server side. 133 00:10:11,754 --> 00:10:13,769 For example, when you submit a form, 134 00:10:13,769 --> 00:10:20,819 the information within the form is encoded to a JSON format 135 00:10:20,819 --> 00:10:24,409 and then sent over to the server side from the client side. 136 00:10:24,409 --> 00:10:28,860 So, that will be done using either a POST or a PUT message. 137 00:10:28,860 --> 00:10:33,610 Looking at a little more details of the HTTP request message, 138 00:10:33,610 --> 00:10:38,134 the typical request message in the request line will contain the Method, 139 00:10:38,134 --> 00:10:39,011 which is either GET, PUT, PAUSE, DELETE 140 00:10:39,011 --> 00:10:43,455 or some of the other verbs that you have seen earlier. 141 00:10:43,455 --> 00:10:48,360 And then, followed by the URL and the version of the HTTP protocol 142 00:10:48,360 --> 00:10:52,500 that you're using for communicating from the client to the server side. 143 00:10:52,500 --> 00:10:57,120 The header field usually contains a header field name, colon, 144 00:10:57,120 --> 00:11:00,539 and the value for that header field. 145 00:11:00,539 --> 00:11:08,100 And the body contents, as I mentioned, could be encoded in either JSON or XML format. 146 00:11:08,100 --> 00:11:16,419 Here is an example of a typical HTTP request message 147 00:11:16,419 --> 00:11:19,294 that may be sent to the server from the client. 148 00:11:19,294 --> 00:11:23,169 So, in this particular request message we are asking the server to retain 149 00:11:23,169 --> 00:11:28,090 and index.hmtl page from the server side to the client side so 150 00:11:28,090 --> 00:11:31,320 that it can be rendered in the browser on the client side. 151 00:11:31,320 --> 00:11:37,029 A request like this would typically have an empty body in the request message. 152 00:11:37,029 --> 00:11:42,309 Most of the information will be encoded in the request line plus the headers 153 00:11:42,309 --> 00:11:44,559 of the request message. 154 00:11:44,559 --> 00:11:49,179 When the client sends the request to the server, 155 00:11:49,179 --> 00:11:55,355 the server will process the request and then send back a reply to the client side. 156 00:11:55,355 --> 00:11:59,379 The reply message is organized into, again, three parts. 157 00:11:59,379 --> 00:12:05,679 A status line with some information about how the request has been processed 158 00:12:05,679 --> 00:12:08,940 and what is being sent back to the client is stored. 159 00:12:08,940 --> 00:12:16,149 The headers will contain additional details of what is contained in the response message, 160 00:12:16,149 --> 00:12:22,654 and then followed by a blank line and then the actual body of the message. 161 00:12:22,654 --> 00:12:28,750 An example of what would be typically contained in an HTTP response message. 162 00:12:28,750 --> 00:12:32,766 In this case this response message is coming back with a 200 163 00:12:32,766 --> 00:12:36,549 which is a status code of the message. 164 00:12:36,549 --> 00:12:40,644 If you see here, 200 in the request line as a status code. 165 00:12:40,644 --> 00:12:43,360 It means that your request was successful 166 00:12:43,360 --> 00:12:50,169 and the server is able to return the data that you have requested from the server side. 167 00:12:50,169 --> 00:12:56,544 And then, the header will contain additional directions to the client side, 168 00:12:56,544 --> 00:13:02,735 including information about how the actual body of the message is encoded. 169 00:13:02,735 --> 00:13:07,099 Then, the body may contain, if you have requested the index HTML page, 170 00:13:07,099 --> 00:13:12,399 the body of the message will contain the HTML code 171 00:13:12,399 --> 00:13:18,534 for the index start HTML page as you see in this example here. 172 00:13:18,534 --> 00:13:27,210 One of the pieces of information in the status line that I refer to as that status code. 173 00:13:27,210 --> 00:13:31,304 If the server is able to process your request correctly, 174 00:13:31,304 --> 00:13:34,990 it will send back a reply with a state score of 200, 175 00:13:34,990 --> 00:13:37,450 meaning everything is ok on the server side, 176 00:13:37,450 --> 00:13:40,914 and the server side is returning the data correctly. 177 00:13:40,914 --> 00:13:45,294 If the server is unable to process the request for whatever reason, 178 00:13:45,294 --> 00:13:50,259 then that information will be encoded in the status code in 179 00:13:50,259 --> 00:13:53,309 that status line of the reply message. 180 00:13:53,309 --> 00:13:56,950 The various status codes, typically, that you will encounter 181 00:13:56,950 --> 00:13:59,210 when you receive a reply from the server side, 182 00:13:59,210 --> 00:14:05,864 include a 201 which means that when you try to create an object on the server side, 183 00:14:05,864 --> 00:14:11,230 it has been successfully created or a 301 which means that whatever you are requesting 184 00:14:11,230 --> 00:14:13,750 has moved permanently to a new location, 185 00:14:13,750 --> 00:14:17,889 and that you are on the new location of that resource 186 00:14:17,889 --> 00:14:20,205 will be returned to your client side. 187 00:14:20,205 --> 00:14:26,014 400s and 500s typically indicate that there are some problems on the server side. 188 00:14:26,014 --> 00:14:31,210 A 404 is something that you often encounter when you request 189 00:14:31,210 --> 00:14:35,110 for something that doesn't exist on the server side. 190 00:14:35,110 --> 00:14:38,860 Similarly, a 500 means that the server is just giving up, 191 00:14:38,860 --> 00:14:43,620 it is unable to process your request and then sends back an internal server error. 192 00:14:43,620 --> 00:14:47,575 These are two common error codes that you will encounter. 193 00:14:47,575 --> 00:14:53,629 The remaining ones have specific meaning as listed in this table here. 194 00:14:53,629 --> 00:14:57,625 There are more than the status codes that I gave you in this table 195 00:14:57,625 --> 00:15:00,519 but these are some of the most common status codes 196 00:15:00,519 --> 00:15:06,220 that you'll encounter in a reply message coming from the server side. 197 00:15:06,220 --> 00:15:13,044 Another point that I mentioned is the fact that the server may encode the data 198 00:15:13,044 --> 00:15:21,534 in a specific format like XML or eXtensible Markup Language or JSON, the JavaScript 199 00:15:21,534 --> 00:15:24,085 Object Notation for that. 200 00:15:24,085 --> 00:15:28,690 Now, typically in this particular course we will be dealing with data 201 00:15:28,690 --> 00:15:31,164 that is encoded mainly in JSON. 202 00:15:31,164 --> 00:15:38,544 Most applications, client side applications including mobile applications these days, 203 00:15:38,544 --> 00:15:40,450 typically communicate with the server 204 00:15:40,450 --> 00:15:49,240 and the data exchange format is JSON by default in most cases. 205 00:15:49,240 --> 00:15:54,968 That is the reason I will spend a few minutes explaining to you about JSON. 206 00:15:54,968 --> 00:16:01,000 The javascript object notation, or JSON, is a lightweight data interchange format. 207 00:16:01,000 --> 00:16:09,279 The reason that JSON data format is specifically of interest to us in this course is 208 00:16:09,279 --> 00:16:13,955 because the javascript object notation, as the name implies, 209 00:16:13,955 --> 00:16:20,480 very easily maps into a javascript object that you use with any of javascript codes. 210 00:16:20,480 --> 00:16:24,890 So, converting a javascript object into JSON notation, 211 00:16:24,890 --> 00:16:26,924 and vice versa, is very straightforward. 212 00:16:26,924 --> 00:16:30,350 That JSON notation is a, what we call, 213 00:16:30,350 --> 00:16:35,045 as a self describing and very easy to understand notation. 214 00:16:35,045 --> 00:16:38,230 In the javascript object notation format, 215 00:16:38,230 --> 00:16:44,335 the data is structured in a very clean specified manner. 216 00:16:44,335 --> 00:16:47,810 This is structured as a collection of name/value pairs, 217 00:16:47,810 --> 00:16:52,855 and this is structured as an ordered list of values. 218 00:16:52,855 --> 00:16:56,674 You can see an example of this on the right hand side here, 219 00:16:56,674 --> 00:17:03,980 we have actually used this JSON data with our angular application already earlier. 220 00:17:03,980 --> 00:17:08,809 So, now you see why the data is structured that way. 221 00:17:08,809 --> 00:17:15,503 And you also realize that it is very easy to be able to deal with this data 222 00:17:15,503 --> 00:17:21,335 within your javascript audio, typescript is caught in your angular application. 223 00:17:21,335 --> 00:17:27,484 With this I complete a quick overview of networking essentials. 224 00:17:27,484 --> 00:17:33,109 We will now move on to and exercise where we will set up a rudimentary server 225 00:17:33,109 --> 00:17:39,080 that was serve up some data that we can connect to from our angular application 226 00:17:39,080 --> 00:17:42,140 and then exchange data with a server. 227 00:17:42,140 --> 00:17:48,079 Now, we will develop a full fledged server in one of the later courses, 228 00:17:48,079 --> 00:17:52,400 the Node code JS and server side development course 229 00:17:52,400 --> 00:17:56,669 that would come as a last course in this specialization.