WEBVTT 00:05.040 --> 00:06.180 I have one. 00:06.370 --> 00:14.820 So in the last video we saw that once we clicked here and we hit the end point at slash by then we received 00:14.870 --> 00:20.260 this Jason here and I told you it's OK if you don't understand what Jason is for now. 00:20.740 --> 00:21.970 And we'll explain it later. 00:21.970 --> 00:24.100 It is so this is the video now. 00:24.220 --> 00:26.540 So what exactly is Jason. 00:26.830 --> 00:37.180 Well Jason is basically a minute that is used for data interchange between browsers or between servers 00:37.240 --> 00:39.420 and browsers or between computers. 00:39.430 --> 00:42.060 Even so what does that really mean. 00:42.160 --> 00:48.360 Well think about when when when we started here on the road slash bike ride or think about when even 00:48.450 --> 00:55.380 access any any normal pitch so let's just open here a long comment so we can discuss it here. 00:55.540 --> 01:04.570 Just think about when your browser tries to access Google so your browser sends a request to google 01:04.570 --> 01:07.830 doc and then it gets the response back. 01:07.840 --> 01:13.520 Which is basically the index that H.A. page from Google that has the Google structure in it. 01:13.540 --> 01:14.000 Right. 01:14.260 --> 01:21.490 But if you think about it browsers can only convert or communicate using only text. 01:21.490 --> 01:28.600 So for example I can't send an image from one browser to the other you just use the image. 01:28.750 --> 01:36.850 In other words all communications all this is a very important point of communications right between 01:37.330 --> 01:47.980 servers to server or between server to browser or even between browsers to a browser. 01:47.980 --> 01:49.310 That's possible. 01:50.110 --> 01:54.740 All communication on the internet can only be done in text. 01:54.850 --> 01:55.380 OK. 01:55.510 --> 01:58.870 So we cannot cannot send images. 01:58.990 --> 02:05.400 We can send representations of image in text but we can't send images we can't send videos. 02:05.410 --> 02:13.810 We can't we can send representations of videos in text but we can't send the video as and format because 02:13.810 --> 02:17.960 the Internet as a whole depends on a protocol called TCAP. 02:17.990 --> 02:19.900 Now TCAP only supports text. 02:19.900 --> 02:22.510 We can't send a video to each other. 02:22.570 --> 02:32.320 So whenever you see an image in an in a page or two ways this can happen one way is well this image 02:32.320 --> 02:36.030 is basically you can think of it as a two degree ride. 02:36.100 --> 02:44.180 So to a degree and then end inside this we would have something like 1 2 3 1 2 5. 02:44.440 --> 02:48.680 And this number then for example 1 2 6 1 2 7. 02:49.180 --> 02:54.110 Let's fill in a few more 4:59 here. 02:54.170 --> 02:57.260 1 2 6 and 7 all these. 02:57.460 --> 02:58.840 What are these numbers. 02:58.990 --> 03:04.910 So these numbers are the RC value of the pixels. 03:05.020 --> 03:13.900 So this image here would be a two by four so immense so very small image two by four pixels very very 03:13.960 --> 03:14.690 tiny. 03:14.950 --> 03:17.760 And each of these pixels has this value. 03:17.890 --> 03:22.810 So in other words we've represented this image in the text format. 03:22.960 --> 03:28.510 Similarly for video soonly for everything that you see right anything on the internet. 03:28.510 --> 03:35.080 If we can if we want to to send it from one place to the other it has to be in some form of text right 03:35.930 --> 03:36.360 now. 03:36.390 --> 03:39.270 The idea is what form of text right. 03:39.290 --> 03:45.100 We OK we will now establish that which you want to send something from my server to your server or from 03:45.100 --> 03:47.450 my server to your browser as a response. 03:47.470 --> 03:49.090 It has to be in text format. 03:49.090 --> 03:51.160 It can't be any other format. 03:51.160 --> 03:54.710 Now the question is OK what if it's text. 03:54.730 --> 03:59.590 What kind of text should I just return to you just like we did in the first video return. 03:59.680 --> 04:00.440 Hello world. 04:00.460 --> 04:01.870 Just like like that. 04:02.020 --> 04:04.070 Hello world. 04:04.360 --> 04:10.990 Or should it be any in another format where it's easy for me to send it to prepare the response for 04:10.990 --> 04:11.790 you and send it. 04:11.890 --> 04:16.120 And it's easy for you to to receive this response. 04:16.130 --> 04:21.550 Understand what it is without having to do like lots of computation just instantly understand what it 04:21.550 --> 04:23.630 is and then replied. 04:23.830 --> 04:30.760 So of course it's later when we want to find a format of communication between the two servers or between 04:30.820 --> 04:33.980 one server and a browser or a browser to a browser. 04:34.150 --> 04:40.020 We want to find a format that is easy to understand and easy to produce. 04:40.270 --> 04:46.240 And this is what Jason Jason is a format that is used for the data and to change from one browser to 04:46.240 --> 04:48.230 the other from one browsers server. 04:48.250 --> 04:49.510 So. 04:49.510 --> 04:52.230 So what how does Jason really look like. 04:52.270 --> 05:00.280 So in the last video we saw a very simple example we saw we saw something like Field 1. 05:00.850 --> 05:02.970 I think it's still here in here. 05:03.010 --> 05:09.560 So it's field one says Let's just copy this one here instead just reading it again. 05:10.100 --> 05:10.790 OK. 05:10.800 --> 05:16.430 So Jason basically is made of many fields. 05:16.520 --> 05:20.440 Each field has a name and a value. 05:20.780 --> 05:21.280 OK. 05:21.380 --> 05:28.400 So here the field is called Field 1 and its value is the string ABC. 05:28.400 --> 05:36.570 After you're right one field and gets value they're separated by a semicolon here and after you're right 05:36.570 --> 05:37.760 you add this comma. 05:37.770 --> 05:40.880 So you say OK I'm done with the first field. 05:40.880 --> 05:47.900 Now the second field it's called Field 2 and they should have different names field too and that is 05:47.900 --> 05:50.160 value to the string. 05:50.420 --> 05:56.120 Now since this is the last field I don't have to put a comma here but if I put it still fine but usually 05:56.120 --> 05:58.350 a convention is we don't put it. 05:59.090 --> 06:03.100 So you might be wondering OK that's that's an easy easy format. 06:03.170 --> 06:04.920 So what are the tricks here. 06:05.000 --> 06:07.380 What for example can I send here in this valley. 06:07.430 --> 06:07.700 Right. 06:07.730 --> 06:10.450 Because this trend could be anything I can say. 06:10.550 --> 06:16.190 This is the name of my field. 06:17.390 --> 06:20.810 So this entire string over here is the name of my field. 06:21.050 --> 06:26.460 So you can have spaces it can you know it can pretty much be any English alphabet letter. 06:26.570 --> 06:33.260 Really there are a few exceptions but I don't think most people would put like Slash something or are 06:33.680 --> 06:39.970 inside the name so just make sure it's it's usually you know underscoring you're fine. 06:40.310 --> 06:45.320 Dashes are fine spaces are fine but just don't put in like weird Dashon or like. 06:45.320 --> 06:49.580 Or these forward slashes characters because they might mess up some things. 06:49.820 --> 06:50.310 OK. 06:50.450 --> 06:54.950 So for example I'll leave this field even field space one. 06:54.950 --> 06:57.370 Now what values can I send here. 06:57.710 --> 06:59.930 Well here I'm sending a string right. 06:59.920 --> 07:02.670 A string is basically between two quotations. 07:02.720 --> 07:04.490 But what else can I send right. 07:04.520 --> 07:06.630 What other things can I send. 07:06.800 --> 07:09.360 Well I can send a number so I can put here. 07:09.380 --> 07:10.210 Sorry. 07:10.430 --> 07:15.150 Well that means actually it's Adam does some highlighting here. 07:15.170 --> 07:21.890 But since we are inside a comment it won't appear so three. 07:22.000 --> 07:22.400 OK. 07:22.520 --> 07:28.320 So I can send a number I can send a string to ABC. 07:28.730 --> 07:30.350 What else can I send. 07:30.780 --> 07:33.030 This field. 07:33.410 --> 07:35.160 Well you can send a true or false. 07:35.180 --> 07:40.100 So boolean true. 07:40.610 --> 07:47.990 And be careful because this is not always supported in all our packages or in all browsers. 07:48.080 --> 07:54.260 So you should be pretty you know some brothers think it's true like that you should be pretty careful 07:54.260 --> 07:54.700 about that. 07:54.700 --> 07:55.850 True or false. 07:55.850 --> 07:57.040 Or stuff like that. 07:57.110 --> 07:59.060 You also have to know in it. 07:59.090 --> 08:02.150 But also again not all browsers support it. 08:02.630 --> 08:03.180 OK. 08:03.260 --> 08:07.790 So now you said we have three as a Nungarrayi we can send numbers. 08:07.850 --> 08:17.420 We can send APCs and we can send also send booleans in some cases it's better of course if you just 08:17.420 --> 08:22.160 replace this as a 1 or 0 and then you can do the parsing when you receive this Jason. 08:22.700 --> 08:25.690 OK so let's just leave this one for now. 08:25.700 --> 08:27.100 Now what else can we send. 08:27.290 --> 08:29.990 Well we can send arrays. 08:30.260 --> 08:32.730 So this is a bit tricky right. 08:32.950 --> 08:39.050 I send an array and then and for now I'm just going to write an entry. 08:39.170 --> 08:41.910 Now why can I put inside this array. 08:42.080 --> 08:42.680 Right. 08:42.680 --> 08:45.410 We will start with that if you want to send an error. 08:45.620 --> 08:53.780 Let's say I want to send an array of numbers and I can put one two three four and then I've done what 08:53.780 --> 08:55.650 if I want to send another area. 08:55.780 --> 09:01.930 One two three four and ABC is still fine. 09:02.320 --> 09:09.930 So I can basically send an array of objects and what else can I do. 09:10.090 --> 09:21.610 Well you can also send arrays off objects so we can say array of objects and inside of this array of 09:21.610 --> 09:25.300 objects I can insert other objects. 09:25.330 --> 09:30.510 So what I mean by other objects is I can extrude other adjacent elements. 09:30.640 --> 09:31.630 So think about this. 09:31.630 --> 09:38.340 For example let's say I have another adjacent as a ago I'm right. 09:38.620 --> 09:40.550 And then one two three. 09:40.870 --> 09:50.370 So I can insert this Jason field inside the array here so I can have nested arrays. 09:50.380 --> 09:51.760 So how does that work. 09:51.850 --> 09:57.580 Well you see first of all the convention is we don't write an array on the same line because that would 09:57.580 --> 09:58.100 be. 09:58.150 --> 10:03.670 You can already see here that it's very nice x number is it's fine but if I have to to write lots of 10:03.670 --> 10:11.950 fields for example field to 1 one and then you know it gets messy very quickly so usually the convention 10:11.950 --> 10:14.730 is when you open the array click enter. 10:14.740 --> 10:22.350 So we we we ran it among multiple lines and then here I would I want to make a new object. 10:22.420 --> 10:30.850 So I write I open and close the curly brackets and then I say OK so Fiamma the one is that's totally 10:30.850 --> 10:31.570 different. 10:31.570 --> 10:35.930 Feel the wind and want for example. 10:36.010 --> 10:40.120 Now once I'm done with the first object then I can write another object. 10:40.120 --> 10:47.110 So again we do the same thing this time to then this is a string. 10:47.110 --> 10:50.460 For example now. 10:50.570 --> 10:58.120 So here what we've done is we're basically done an array of set offs off object. 10:58.120 --> 10:59.510 Now what else can we do. 10:59.510 --> 11:04.990 You can also do an array of nested arrays. 11:05.110 --> 11:06.970 So that's a bit tricky right. 11:07.240 --> 11:10.700 That's so we have to put a call here because we're not done yet. 11:10.880 --> 11:11.480 Right. 11:11.570 --> 11:15.550 This is a new field which is going to be an array. 11:15.550 --> 11:23.100 So first I open and close the series and then inside it I'm going to have a nested array. 11:24.320 --> 11:30.110 And I'm going to open and close another parentheses and then I'm going to have another nested object 11:30.110 --> 11:30.460 inside. 11:30.460 --> 11:35.310 So for example field one. 11:36.210 --> 11:45.640 And then when there's no one name and for example name. 11:46.130 --> 11:51.210 So we have here and array which has inside of said Field. 11:51.290 --> 11:53.570 OK so this is a bit tricky right. 11:53.750 --> 11:55.120 I got confused here. 11:55.190 --> 11:57.270 So we have an error rate right. 11:57.440 --> 12:04.590 So we should tap this here and then this nested array is going to be inside of the object right. 12:04.590 --> 12:06.280 It's a bit tricky here. 12:06.310 --> 12:08.040 Even I fell for it. 12:08.450 --> 12:17.150 So here let me stab this and tap this object and then. 12:17.530 --> 12:17.920 Yeah. 12:18.160 --> 12:18.820 OK. 12:19.680 --> 12:20.720 Right. 12:26.170 --> 12:26.720 OK. 12:26.810 --> 12:27.950 So now I should be fine. 12:28.250 --> 12:30.850 Let's just tap this element one more time. 12:30.900 --> 12:35.460 Make sure you're a bit ahead and should be fine. 12:35.780 --> 12:36.110 OK. 12:36.110 --> 12:43.290 So let's let's let's be very careful here with the way we have an array of objects. 12:43.700 --> 12:48.220 So this is the first object in the area in the outer array. 12:48.890 --> 12:53.320 And inside this object it has a field called nested array. 12:54.700 --> 12:57.440 Which is an array of objects. 12:57.910 --> 13:06.050 And the first element in that nested array is this object and it's called Field 1 and has two fields 13:06.050 --> 13:11.290 so it has field line and name and then each of them has a value. 13:11.350 --> 13:13.090 So it's very very tricky. 13:13.090 --> 13:21.100 You're right and also and in the outer arrays so that's why that's why the vse this notation where you 13:21.100 --> 13:27.720 start with one here and close with one here is very useful because it helps you keep track of what what 13:27.740 --> 13:33.150 the scope are you in during the construction of the Jason OK. 13:33.330 --> 13:39.090 So now that we know what Jason is let's go back to flask case let's delete all of this. 13:39.150 --> 13:40.800 Let's go back to flask. 13:40.810 --> 13:43.800 So last time we sent a very very simple Jason. 13:43.800 --> 13:44.650 Right. 13:44.700 --> 13:47.780 So this time let's make it even more complex. 13:47.820 --> 13:48.330 Jason. 13:48.360 --> 13:48.950 OK. 13:49.080 --> 13:52.280 So we're going to make a name Jason. 13:52.360 --> 13:55.410 I'm going to call it my name. 13:55.810 --> 13:59.250 And then we're going to have age let's say 22. 13:59.460 --> 14:02.370 So this is the numbers I need that is a number. 14:02.490 --> 14:06.950 And now let's say I know I'm someone who has many phones. 14:06.990 --> 14:14.090 So I'm going to have phones and then these phones are going to be an array. 14:14.160 --> 14:15.840 So I'm going to open an array. 14:16.290 --> 14:20.990 And then let's say this is the first object which is the first phone. 14:21.060 --> 14:35.300 And then I'm going to have another field phone name that I know I Phone 8 maybe no phone number. 14:36.030 --> 14:42.020 Let's say you know 0 1 1 1 or 0 or 1 1 1 1 1 whatever. 14:42.600 --> 14:44.500 Let's copy this here. 14:44.760 --> 14:53.490 Let's say we have another for I have another phone here which is you know a Nokia phone number is 1 14:53.490 --> 14:54.830 1 1 2 1. 14:54.870 --> 14:55.510 OK. 14:55.620 --> 14:57.360 So now I have many phones. 14:57.360 --> 15:02.600 It's an array of objects for each object has a field and a value. 15:03.120 --> 15:06.170 And let's make sure that the colors are correct. 15:06.200 --> 15:09.470 So no problems here with the commons. 15:09.630 --> 15:11.720 If you want to leave a comment here it's fine. 15:11.730 --> 15:16.110 But the convention is usually don't leave a comma in the last place. 15:16.330 --> 15:19.080 And let's say first and see what happens. 15:19.290 --> 15:27.250 So first go Clear and then flask run and then we're running the server now. 15:27.280 --> 15:31.400 Now this this look this here is located at. 15:31.810 --> 15:32.550 Slash my. 15:32.560 --> 15:40.060 So let's go to our browser and go to slash by and you ok was changed to raw data and you'll instantly 15:40.060 --> 15:47.000 see that this is our Jason has aged 20 22 name and you'll see that actually it has changed. 15:47.020 --> 15:48.550 The order has changed a bit. 15:48.580 --> 15:49.290 It's fine. 15:49.300 --> 15:52.600 Usually the Jason F-I function can do that. 15:52.600 --> 15:53.720 Don't worry about it. 15:53.750 --> 15:55.860 That's that's totally fine. 15:56.260 --> 15:58.990 And then these are basically our object. 15:59.140 --> 16:01.510 Now here's an interesting thing. 16:01.780 --> 16:03.090 How did we generate this. 16:03.100 --> 16:07.310 This is basically a Norwan map in Python. 16:07.480 --> 16:09.850 But we've generated Jason from it. 16:09.850 --> 16:11.210 So how did we do that. 16:11.380 --> 16:15.120 And we use a function called Jenna Jameson which is in flask. 16:15.130 --> 16:23.450 It's built in flask from flask import juice on I so I'm gonna make AJ signifies something and then we 16:23.500 --> 16:27.610 come here and return the Jets on the fly off this object. 16:27.640 --> 16:34.480 Now this country is very useful because you can usually not only as you satisfy a map but you can certify 16:34.570 --> 16:36.780 any object which is serial. 16:36.970 --> 16:40.070 And we'll talk about that later in later years. 16:40.150 --> 16:44.470 But this function is super useful when you're debugging something when you want to know the values of 16:44.470 --> 16:47.190 some some object or something like that. 16:47.680 --> 16:50.530 OK so this is basically what Jason is all about. 16:50.530 --> 16:56.770 It's basically a format that is used to transfer data from one server to the other one browser to a 16:56.770 --> 16:57.220 server. 16:57.250 --> 16:58.010 Whatever. 16:58.020 --> 17:04.720 Whatever the means of communication is two endpoints of the communication and we use it to transfer 17:05.890 --> 17:07.270 this information here. 17:07.270 --> 17:12.580 And as you'll see later in the videos this is what our response to the user will be. 17:12.580 --> 17:16.310 And we'll also provide him an expected output. 17:16.330 --> 17:23.350 So for example hey man returned Jason that I'll give you back is going to be is going to have a name 17:23.350 --> 17:24.020 field. 17:24.090 --> 17:28.890 I don't have an age field is going to have phones field and then inside the phones field you're going 17:28.890 --> 17:32.690 to have this many objects of type that. 17:32.730 --> 17:35.450 And so you'll be expecting what the output is. 17:35.650 --> 17:41.670 And then our our mission is to fill in these fields here. 17:41.680 --> 17:53.620 So for example let's say Eirik I get a request at by right to you know to do to output an age which 17:53.620 --> 17:56.870 is equal to two times you know. 17:57.490 --> 18:03.500 So will do so let's go here and do age Z-code two times five. 18:03.790 --> 18:08.720 And then when I'm preparing the return Jason I'm going to put here age. 18:09.010 --> 18:16.120 So now instead of hard coding these these fields where are these values we're essentially going to do 18:16.120 --> 18:24.700 some computation here to service the user and then see what he needs to fill in these fields over here 18:24.760 --> 18:28.600 prepare them and then replied back to the user. 18:28.690 --> 18:33.780 And then he gets this Jason and he's like oh thanks for doing all this computation for me. 18:33.840 --> 18:36.890 And and that's basically the idea of an API. 18:37.300 --> 18:39.800 So let's let's really say this. 18:40.040 --> 18:41.790 Make sure no problems here. 18:41.810 --> 18:49.840 Throw your own flask and then Frigo here now and then we'll see that the age is 10 which is basically 18:49.840 --> 18:53.790 the computation that we did in the body of the function. 18:54.370 --> 18:58.530 Ok so hopefully you now understand what Jason has why it's important. 18:58.530 --> 19:02.920 Just think of it as a format of transferring information. 19:02.920 --> 19:08.770 If you see here this is very organized we can see what information we're returning back and the user 19:08.770 --> 19:15.580 in the same time can also see and parse it and understand what the output is. 19:15.580 --> 19:21.720 So it's very easy for us to prepare for for our customer or our user to read. 19:21.760 --> 19:24.470 So it's a very useful format. 19:24.830 --> 19:28.320 So hopefully you got this idea. 19:28.710 --> 19:30.780 Yeah and I'll see you in the next video.