1 00:00:03,880 --> 00:00:06,815 Let me start out by giving you 2 00:00:06,815 --> 00:00:11,165 a quick 10-minute introduction to the Essentials of Networking. 3 00:00:11,165 --> 00:00:14,045 Given the fact that we have limited time, 4 00:00:14,045 --> 00:00:16,355 I would concentrate on delivering you 5 00:00:16,355 --> 00:00:21,191 the essentials that you need for understanding each of the topics. 6 00:00:21,191 --> 00:00:26,240 Now, what we cover in this particular module will require 7 00:00:26,240 --> 00:00:30,230 at least a rudimentary understanding of how computer networking 8 00:00:30,230 --> 00:00:34,255 works before we understand why we need to use HTTP, 9 00:00:34,255 --> 00:00:36,700 why we communicate with a server, 10 00:00:36,700 --> 00:00:42,485 what is the reason for the delay when you are talking to a server and so on. 11 00:00:42,485 --> 00:00:45,920 And also, the various protocols that you 12 00:00:45,920 --> 00:00:50,335 need to be aware of before you can even communicate with a server. 13 00:00:50,335 --> 00:00:53,540 So, keeping all this in mind, 14 00:00:53,540 --> 00:00:58,945 a 10-minute quick introduction to the Essentials of Networking. 15 00:00:58,945 --> 00:01:03,600 We begin to realize that web applications are no longer stand-alone. 16 00:01:03,600 --> 00:01:11,030 They always have a quote unquote Cloud backend supporting your web application. 17 00:01:11,030 --> 00:01:13,535 Now these days, everything is on the Cloud. 18 00:01:13,535 --> 00:01:15,500 Pretty soon you will be on the Cloud too, 19 00:01:15,500 --> 00:01:19,455 at least on cloud nine with a silver lining. 20 00:01:19,455 --> 00:01:23,785 But, given that we need 21 00:01:23,785 --> 00:01:29,090 a server side support for our angular application to work correctly, 22 00:01:29,090 --> 00:01:31,295 there would you host the server. 23 00:01:31,295 --> 00:01:36,405 And these days, hosting the server is very 24 00:01:36,405 --> 00:01:42,575 easily done by using one of the cloud-based infrastructure services, 25 00:01:42,575 --> 00:01:48,260 things like Amazon Web Services or Heroku or Digital 26 00:01:48,260 --> 00:01:55,190 Ocean or many others that provide cloud-based server support. 27 00:01:55,190 --> 00:01:59,235 So, what exactly is available on the server side? 28 00:01:59,235 --> 00:02:06,744 You typically have a server frontend that is talking to your angular application, 29 00:02:06,744 --> 00:02:14,615 so that is the server logic and behind the scenes the server logic is communicating with 30 00:02:14,615 --> 00:02:23,665 a persistent storage like a database where your data is stored and retrieved from. 31 00:02:23,665 --> 00:02:26,130 When you enter the networking world, 32 00:02:26,130 --> 00:02:31,064 you'll be pretty soon bombarded with 304 little acronyms, 33 00:02:31,064 --> 00:02:36,230 things that you thought you knew what they were from normal English or they have 34 00:02:36,230 --> 00:02:38,360 an entirely different meaning or 35 00:02:38,360 --> 00:02:42,375 purpose when you encounter them in that networking world. 36 00:02:42,375 --> 00:02:44,470 So let's examine a few of them. 37 00:02:44,470 --> 00:02:49,020 So in the networking world you will hear people talking over HTTP protocol. 38 00:02:49,020 --> 00:02:53,215 The protocol that is used for communicating between the client and the server. 39 00:02:53,215 --> 00:02:56,960 This is an application layer protocol that we will briefly 40 00:02:56,960 --> 00:03:01,135 talk about a little more in the rest of this lecture. 41 00:03:01,135 --> 00:03:07,550 The HTTP protocol for it to work needs a URL to be supplied to it, 42 00:03:07,550 --> 00:03:09,715 the Uniform Resource Locator. 43 00:03:09,715 --> 00:03:15,205 So this is a string of characters separated by slashes, 44 00:03:15,205 --> 00:03:22,355 with an HTTP colon or an HTTPS colon attached in front of it. 45 00:03:22,355 --> 00:03:25,547 And I'm sure if you have used the World Wide Web, 46 00:03:25,547 --> 00:03:29,395 you are pretty familiar with what the URLs look like. 47 00:03:29,395 --> 00:03:33,230 Now in addition, you would hear people talking about JSON, 48 00:03:33,230 --> 00:03:38,380 not your friend Jason but JavaScript Object Notation. 49 00:03:38,380 --> 00:03:43,610 So the JavaScript Object Notation is one way of encoding data that 50 00:03:43,610 --> 00:03:49,660 is being shipped from the server side to the client side or vice versa. 51 00:03:49,660 --> 00:03:54,320 And also you will hear people talking about XML yet another way of 52 00:03:54,320 --> 00:04:01,205 encoding data while it is in transit shipment between the client and server side. 53 00:04:01,205 --> 00:04:08,375 Now, also you will hear people talking about higher level protocols called SOAP, 54 00:04:08,375 --> 00:04:14,045 not the kind that you take a shower with but SOAP as a protocol that 55 00:04:14,045 --> 00:04:21,975 allows communication between distribution entities within their network. 56 00:04:21,975 --> 00:04:25,295 And also, you will hear people talking about REST, 57 00:04:25,295 --> 00:04:29,505 not something that you get too much going through this particular course, 58 00:04:29,505 --> 00:04:32,510 REST or Representational State Transfer. 59 00:04:32,510 --> 00:04:36,200 I will have a shorter lecture 60 00:04:36,200 --> 00:04:40,970 specifically devoted to REST a little bit later in this module. 61 00:04:40,970 --> 00:04:42,905 And in the HTTP world, 62 00:04:42,905 --> 00:04:45,990 you would hear people talking about GET, PUT, 63 00:04:45,990 --> 00:04:50,210 POST, and DELETE and you'd be wondering, 64 00:04:50,210 --> 00:04:52,200 what do they all mean? 65 00:04:52,200 --> 00:04:55,250 Let's learn a little bit about these in 66 00:04:55,250 --> 00:05:01,245 this lecture and also the lecture on REST that you will see a little bit later. 67 00:05:01,245 --> 00:05:05,020 One important thing that you need to understand when you are 68 00:05:05,020 --> 00:05:10,120 communicating with a server is that the client server communication 69 00:05:10,120 --> 00:05:15,130 causes unexpected amount of delays or indeterminate amount of delay 70 00:05:15,130 --> 00:05:21,340 while the data is being either fetched or uploaded to the server from the client site. 71 00:05:21,340 --> 00:05:23,270 So which means that within your client site application, 72 00:05:23,270 --> 00:05:27,310 you need to keep the user informed about the fact that 73 00:05:27,310 --> 00:05:31,750 something is going on behind the scenes and be 74 00:05:31,750 --> 00:05:35,335 able to handle the delays and 75 00:05:35,335 --> 00:05:41,020 possibly not being able to obtain the data from the server side. 76 00:05:41,020 --> 00:05:45,490 It is quite possible that when you try to connect to a server, 77 00:05:45,490 --> 00:05:47,765 the connection of the server may fail, 78 00:05:47,765 --> 00:05:53,920 the server may return incorrect data or may cause an error in communication. 79 00:05:53,920 --> 00:05:58,750 All these have to be handled on your client side appropriately so that your application 80 00:05:58,750 --> 00:06:04,450 will still keep functioning even in the presence of these problems. 81 00:06:04,450 --> 00:06:09,250 Jumping into the most popular application layer protocol 82 00:06:09,250 --> 00:06:12,880 used for communicating between the client and the server, 83 00:06:12,880 --> 00:06:15,405 the Hypertext Transfer Protocol. 84 00:06:15,405 --> 00:06:18,585 But this is a client server communication protocol. 85 00:06:18,585 --> 00:06:20,800 Now that may or may not make much sense to you 86 00:06:20,800 --> 00:06:23,532 unless you have sufficient background in networking, 87 00:06:23,532 --> 00:06:28,480 but this is a protocol that is used for encoding the messages that you 88 00:06:28,480 --> 00:06:31,330 exchanged between your client application which is 89 00:06:31,330 --> 00:06:35,375 an angular application in this case and a server side. 90 00:06:35,375 --> 00:06:38,620 So this HTTP protocol allow you to 91 00:06:38,620 --> 00:06:42,450 retrieve hypertext-based documents from the server side, 92 00:06:42,450 --> 00:06:47,200 increasingly the information being downloaded from the server side is 93 00:06:47,200 --> 00:06:52,495 encoded in one of the standard encoding formats like JSON or XML. 94 00:06:52,495 --> 00:06:55,750 And in order to be able to talk to a server, 95 00:06:55,750 --> 00:07:04,180 you have the support from various HTTP actions or what we refer to as HTTP verbs, 96 00:07:04,180 --> 00:07:07,135 the HEAD, GET, POST, 97 00:07:07,135 --> 00:07:11,020 PUT, DELETE, TRACE, OPTIONS, and CONNECT. 98 00:07:11,020 --> 00:07:14,080 We will see in particular the GET, PUT, POST, 99 00:07:14,080 --> 00:07:24,395 and DELETE verbs in more detail when we examine the REST API protocol a little bit later. 100 00:07:24,395 --> 00:07:27,670 How does the HTTP protocol work? 101 00:07:27,670 --> 00:07:30,010 In the HTTP protocol, 102 00:07:30,010 --> 00:07:35,215 you are sending GET request from your client application to the server. 103 00:07:35,215 --> 00:07:39,780 And this is encoded in the form of an HTTP request message. 104 00:07:39,780 --> 00:07:43,760 The request message typically carries a URL in 105 00:07:43,760 --> 00:07:48,995 the request message indicating what is it that you want the server side to send you. 106 00:07:48,995 --> 00:07:52,660 And this is typically a GET message if you want 107 00:07:52,660 --> 00:07:57,440 data to be downloaded from the server side. 108 00:07:57,440 --> 00:08:02,110 You will also specify which particular server you are communicating with. 109 00:08:02,110 --> 00:08:04,864 When the server receives your request, 110 00:08:04,864 --> 00:08:09,325 the server will retrieve the data from its data storage, 111 00:08:09,325 --> 00:08:11,980 typically a database on the server side, 112 00:08:11,980 --> 00:08:14,250 and then package this data in 113 00:08:14,250 --> 00:08:20,420 an appropriate format and send the data back to you on your client side. 114 00:08:20,420 --> 00:08:23,285 If you are obtaining standard HTML, CSS, 115 00:08:23,285 --> 00:08:25,240 and JavaScript code from the server side, 116 00:08:25,240 --> 00:08:27,310 then your browser is able to render this. 117 00:08:27,310 --> 00:08:30,144 But with applications like Angular, 118 00:08:30,144 --> 00:08:32,830 you are primarily connecting to the server and then 119 00:08:32,830 --> 00:08:39,700 retrieving data in the form of either JSON or XML most of the time. 120 00:08:39,700 --> 00:08:44,200 Except for the initial download of all the resources that are required 121 00:08:44,200 --> 00:08:49,245 for your Angular application to be executed within your browser. 122 00:08:49,245 --> 00:08:51,090 So as we saw earlier, 123 00:08:51,090 --> 00:08:59,139 the HTTP application requires messages to be sent between the client and the server. 124 00:08:59,139 --> 00:09:03,615 A request message is typically sent from the client to the server and 125 00:09:03,615 --> 00:09:09,500 the request message consists of a request line plus a bunch of headers, 126 00:09:09,500 --> 00:09:14,170 where you supply additional information to qualify the request. 127 00:09:14,170 --> 00:09:17,410 We will see the use of various headers and settings in 128 00:09:17,410 --> 00:09:23,425 the headers as we go through some of the exercises in this particular module. 129 00:09:23,425 --> 00:09:27,045 The request line and headers are separated from the body of 130 00:09:27,045 --> 00:09:31,280 the request message by one blank line. 131 00:09:31,280 --> 00:09:34,300 The body of the message may contain additional data 132 00:09:34,300 --> 00:09:38,460 especially if your client is sending data over to the server side. 133 00:09:38,460 --> 00:09:40,735 For example when you submit a form, 134 00:09:40,735 --> 00:09:45,190 the information within the form is encoded into 135 00:09:45,190 --> 00:09:51,115 a JSON format and then sent over to the server side from the client side. 136 00:09:51,115 --> 00:09:55,640 So that will be done using either a POST or a PUT message. 137 00:09:55,640 --> 00:10:00,374 Looking at the little more details of the HTTP request message, 138 00:10:00,374 --> 00:10:02,500 the typical request message in 139 00:10:02,500 --> 00:10:06,140 the request line will contain the method which is either GET, PUT, POST, 140 00:10:06,140 --> 00:10:10,225 DELETE or some of the other verbs that you have seen earlier, 141 00:10:10,225 --> 00:10:13,735 and then followed by the URL and the version of 142 00:10:13,735 --> 00:10:19,260 the HTTP protocol that you're using for communicating from the client to the server side. 143 00:10:19,260 --> 00:10:23,250 The header field usually contains a header field name, 144 00:10:23,250 --> 00:10:27,310 colon, and the value for that header field. 145 00:10:27,310 --> 00:10:30,020 And the body contents, as I mentioned, 146 00:10:30,020 --> 00:10:36,090 could be encoded in either JSON or XML format. 147 00:10:36,090 --> 00:10:39,355 Here is an example of 148 00:10:39,355 --> 00:10:46,040 a typical HTTP request message that may be sent to the server from the client. 149 00:10:46,040 --> 00:10:48,000 So in this particular request message, 150 00:10:48,000 --> 00:10:52,540 we are asking the server to retain the index.html page from 151 00:10:52,540 --> 00:10:55,150 the server side to the client side so that it 152 00:10:55,150 --> 00:10:58,100 can be rendered in the browser on the client side. 153 00:10:58,100 --> 00:11:03,790 A request like this would typically have an empty body in the request message. 154 00:11:03,790 --> 00:11:06,460 Most of the information will be encoded in 155 00:11:06,460 --> 00:11:11,755 the request line plus the headers of the request message. 156 00:11:11,755 --> 00:11:15,935 When the client sends the request to the server. 157 00:11:15,935 --> 00:11:22,120 The server will process the request and then send back a reply to the client side. 158 00:11:22,120 --> 00:11:26,150 The reply message is organized into again, three parts, 159 00:11:26,150 --> 00:11:30,850 a status line where some information about how 160 00:11:30,850 --> 00:11:35,648 the request has been processed and what is being sent back to the client is stored, 161 00:11:35,648 --> 00:11:40,270 the headers will contain additional details of what is 162 00:11:40,270 --> 00:11:45,145 contained in the response message and then followed by a blank line, 163 00:11:45,145 --> 00:11:49,355 and then the actual body of the message. 164 00:11:49,355 --> 00:11:55,405 An example of what would be typically contained in an HTTP response message, 165 00:11:55,405 --> 00:11:59,875 in this case, this response message is coming back with a 200, 166 00:11:59,875 --> 00:12:03,260 which is a status code of the message. 167 00:12:03,260 --> 00:12:07,420 If you see a 200 in the request line as a status code, 168 00:12:07,420 --> 00:12:11,770 it means that your request was successful and the server is able to 169 00:12:11,770 --> 00:12:16,920 return the data that you have requested from the server side. 170 00:12:16,920 --> 00:12:22,180 And then the header will contain additional directions to 171 00:12:22,180 --> 00:12:25,165 the client side including information about 172 00:12:25,165 --> 00:12:29,425 how the actual body of the message is encoded. 173 00:12:29,425 --> 00:12:31,705 Then the body may contain, 174 00:12:31,705 --> 00:12:34,565 if you have requested the index.html page, 175 00:12:34,565 --> 00:12:39,670 the body of the message will contain the HTML code for 176 00:12:39,670 --> 00:12:45,515 the index.html page as you see in this example here. 177 00:12:45,515 --> 00:12:53,955 One of the pieces of information in the status line that I refer to as the status code. 178 00:12:53,955 --> 00:12:58,080 If the server is able to process your request correctly, 179 00:12:58,080 --> 00:13:01,852 it will send back a reply with a status code of 200, 180 00:13:01,852 --> 00:13:04,330 meaning everything is okay on the server side and 181 00:13:04,330 --> 00:13:07,685 the server side is returning the data correctly. 182 00:13:07,685 --> 00:13:12,055 If the server is unable to process the request for whatever reason, 183 00:13:12,055 --> 00:13:14,800 then that information will be encoded in 184 00:13:14,800 --> 00:13:20,020 the status code in the status line of the reply message. 185 00:13:20,020 --> 00:13:24,160 The various status codes typically that you will encounter when you 186 00:13:24,160 --> 00:13:28,355 receive a reply from the server side include a 201, 187 00:13:28,355 --> 00:13:30,985 which means that when you try to create 188 00:13:30,985 --> 00:13:34,540 an object on the server side it has been successfully created, 189 00:13:34,540 --> 00:13:39,100 or a 301 which means that whatever you are requesting has moved permanently 190 00:13:39,100 --> 00:13:42,365 to a new location and the URL of 191 00:13:42,365 --> 00:13:46,965 the new location of that resource will be returned to your client side. 192 00:13:46,965 --> 00:13:52,775 400s and 500s typically indicate that there is some problem on the server side. 193 00:13:52,775 --> 00:13:57,310 404 is something that you often encounter when 194 00:13:57,310 --> 00:14:02,260 you request for something that doesn't exist on the server side. 195 00:14:02,260 --> 00:14:05,620 Similarly, 500 means that the server is just giving up, 196 00:14:05,620 --> 00:14:10,390 it is unable to process your request and then sends back an internal server error. 197 00:14:10,390 --> 00:14:14,445 These are two common error codes that you will encounter. 198 00:14:14,445 --> 00:14:20,355 The remaining ones have specific meaning as listed in this table here. 199 00:14:20,355 --> 00:14:24,483 There are more than the status codes that I gave you in this table, 200 00:14:24,483 --> 00:14:27,963 but these are some of the most common status codes that you will 201 00:14:27,963 --> 00:14:32,835 encounter in a reply message coming from the server side. 202 00:14:32,835 --> 00:14:37,420 Another point that I mentioned is the fact that the server may encode 203 00:14:37,420 --> 00:14:46,880 the data in a specific format like XML or Extended Markup Language or JSON, 204 00:14:46,880 --> 00:14:50,845 the JavaScript Object Notation format. 205 00:14:50,845 --> 00:14:53,950 Now typically, in this particular course, 206 00:14:53,950 --> 00:14:57,700 we will be dealing with data that is encoded mainly in JSON. 207 00:14:57,700 --> 00:15:02,875 Most client side applications 208 00:15:02,875 --> 00:15:06,680 including mobile applications these days typically communicate with 209 00:15:06,680 --> 00:15:16,515 the server and the data exchange format is JSON by default in most cases. 210 00:15:16,515 --> 00:15:22,125 That is the reason I will spend a few minutes explaining to you about JSON. 211 00:15:22,125 --> 00:15:27,785 The JavaScript Object Notation or JSON is a lightweight data interchange format. 212 00:15:27,785 --> 00:15:33,100 The reason the JSON data format is specifically of 213 00:15:33,100 --> 00:15:38,685 interest to us in this course is because the JavaScript Object Notation, 214 00:15:38,685 --> 00:15:40,710 as the name implies, 215 00:15:40,710 --> 00:15:46,840 very easily maps into a JavaScript object that you use with any JavaScript code. 216 00:15:46,840 --> 00:15:50,430 So converting a JavaScript object 217 00:15:50,430 --> 00:15:53,725 into JSON notation and vice versa is very straightforward. 218 00:15:53,725 --> 00:15:57,420 The JSON notation is what we call as a 219 00:15:57,420 --> 00:16:01,815 self describing and very easy to understand notation. 220 00:16:01,815 --> 00:16:05,103 In the JavaScript Object Notation format, 221 00:16:05,103 --> 00:16:11,040 the data is structured in a very clean, specified manner. 222 00:16:11,040 --> 00:16:14,693 This is structured as a collection of name, value pairs, 223 00:16:14,693 --> 00:16:19,610 and this is structured as an ordered list of values. 224 00:16:19,610 --> 00:16:23,375 You can see an example of this on the right hand side here. 225 00:16:23,375 --> 00:16:30,750 We have actually used this JSON data within our angular application already earlier. 226 00:16:30,750 --> 00:16:35,570 So, now you see why the data is structured that way. 227 00:16:35,570 --> 00:16:41,220 And you also realize that it is very easy to be able to deal with 228 00:16:41,220 --> 00:16:47,850 this data within your JavaScript or your TypeScript code in your Angular application. 229 00:16:47,850 --> 00:16:55,000 With this, I complete a quick overview of networking essentials.