1 00:00:00,810 --> 00:00:04,110 Now, one of the first things I want to tackle is getting it out. 2 00:00:04,160 --> 00:00:07,430 Hold on the user typed in too, the URL, 3 00:00:07,700 --> 00:00:11,330 or rather known as parsing a URL in this case, 4 00:00:11,360 --> 00:00:16,360 if the user typed in ww.mysite.com and then they had a forward slash with a 5 00:00:18,050 --> 00:00:19,400 path, for example, 6 00:00:19,400 --> 00:00:24,400 forward slash Angela or forward slash mail forward slash messages forward slash 7 00:00:25,010 --> 00:00:29,900 pictures, then we want to be able to get hold of the information in that path, 8 00:00:30,380 --> 00:00:34,190 because we might be able to do something different with it and render something 9 00:00:34,190 --> 00:00:38,840 specific. Based on that URL previously, 10 00:00:38,840 --> 00:00:43,840 we already saw that we could change the route of our website by serving up 11 00:00:45,020 --> 00:00:48,290 different information. So if the user went to the home route, 12 00:00:48,290 --> 00:00:51,440 which is just the URL and then a forward slash, 13 00:00:51,680 --> 00:00:55,670 then we would show them something. But if they went to a different route, 14 00:00:55,670 --> 00:00:59,480 for example, forward slash hello, then we could show them something else. 15 00:01:00,710 --> 00:01:04,220 This is where we left off in our previous lessons. 16 00:01:04,849 --> 00:01:09,850 If I wanted to create a BI function that just simply returns by 17 00:01:13,400 --> 00:01:16,880 then I could set up the route decorator. 18 00:01:16,880 --> 00:01:21,880 So this is the decorator function to look for when the user goes to a specific 19 00:01:23,240 --> 00:01:26,120 path, for example, for what slash buy, 20 00:01:27,140 --> 00:01:29,960 remember that this is a decorator function, 21 00:01:29,960 --> 00:01:32,810 which lives inside a App Object, 22 00:01:32,900 --> 00:01:37,190 which is declared in the flask class. Now, 23 00:01:37,190 --> 00:01:39,680 if all of that sounded like it didn't make any sense, 24 00:01:39,710 --> 00:01:44,270 then be sure to review the lessons that we did in previous days on classes and 25 00:01:44,270 --> 00:01:45,020 methods. 26 00:01:45,020 --> 00:01:48,950 I'm going to assume that all of this is pretty straightforward to you by now. 27 00:01:49,910 --> 00:01:51,620 Now when we run this website, 28 00:01:51,860 --> 00:01:56,860 we can now go to the URL and we can go to the homepage, 29 00:01:57,350 --> 00:02:01,430 which says, hello world. And we could go to the buy route, 30 00:02:01,490 --> 00:02:06,380 which just says, buy with an exclamation. Okay. What if we want, 31 00:02:06,380 --> 00:02:09,860 I wanted to have a variable in that route. 32 00:02:10,130 --> 00:02:15,020 What if we want to get hold of what the user types in him, for example, 33 00:02:15,170 --> 00:02:20,170 let's say that instead of just catching by and forward slash what if we wanted 34 00:02:21,170 --> 00:02:22,610 to greet our user, 35 00:02:22,880 --> 00:02:27,880 let's say I create a greet function that takes their name and it returns 36 00:02:28,730 --> 00:02:32,540 something like hello, but then it adds the name. 37 00:02:33,800 --> 00:02:36,740 Let's turn this into an F string to make that work. 38 00:02:37,430 --> 00:02:40,640 The question is how would we create the route? 39 00:02:41,390 --> 00:02:46,160 Would it be forward slash name or would it be something else? 40 00:02:46,670 --> 00:02:51,410 Well, this is what is described in this section of variable rules. 41 00:02:51,950 --> 00:02:55,580 We can add variable sections to a URL. 42 00:02:55,640 --> 00:03:00,640 So basically it's the equivalent of creating a variable that URL by marking it 43 00:03:01,990 --> 00:03:03,400 with this syntax. 44 00:03:03,760 --> 00:03:07,210 So putting some angle brackets around the variable name, 45 00:03:08,020 --> 00:03:11,740 then all function is going to receive the variable name. 46 00:03:11,890 --> 00:03:14,680 Once the decorator is done with it, 47 00:03:15,250 --> 00:03:18,520 and then we can use it inside our function. 48 00:03:19,240 --> 00:03:20,470 So for example, 49 00:03:20,800 --> 00:03:25,030 let's say that we had a route which is forward slash username, 50 00:03:25,390 --> 00:03:29,170 and then forward slash the actual name of the user, 51 00:03:29,920 --> 00:03:32,620 which we'll put inside some angle brackets. 52 00:03:32,980 --> 00:03:37,180 This means a flask is now going to turn, whatever it is that comes after. 53 00:03:37,180 --> 00:03:41,500 Use a name forward slash into a variable for us to tap into. 54 00:03:41,980 --> 00:03:44,440 And that variable has the name of name. 55 00:03:44,980 --> 00:03:48,310 So now when our greet function goes through that decorator, 56 00:03:48,550 --> 00:03:53,440 it's going to receive that value and we can use it in this greet function. 57 00:03:54,130 --> 00:03:56,890 Now, if I go ahead and rerun my code 58 00:03:59,350 --> 00:04:04,350 and go back to that URL and I go to user name forward slash, 59 00:04:06,730 --> 00:04:09,550 and then I'll put in a user name, for example, Angela, 60 00:04:10,060 --> 00:04:15,060 then that Angela is going to be taken and it's going to be rendered dynamically 61 00:04:15,430 --> 00:04:19,089 into my webpage. So it doesn't matter what it is I put here. 62 00:04:19,120 --> 00:04:24,120 It's always going to respond accordingly and treat this as if it was the value 63 00:04:25,060 --> 00:04:25,960 to a variable. 64 00:04:28,060 --> 00:04:32,650 Now notice how every single time we update our code. So for example, 65 00:04:32,650 --> 00:04:37,420 if I didn't want this to be under the route forward slash username fall in slash 66 00:04:37,450 --> 00:04:38,170 name, 67 00:04:38,170 --> 00:04:43,170 instead if I just wanted to put it at forward slash name, 68 00:04:43,810 --> 00:04:48,340 this is not going to work as it is. It's going to give us a four Oh four, 69 00:04:48,340 --> 00:04:49,450 which is not found. 70 00:04:50,020 --> 00:04:55,020 And the reason for this is because we have to stop and refresh all server for 71 00:04:56,320 --> 00:04:58,570 these changes to be reflected. 72 00:04:59,110 --> 00:05:02,590 So I have to stop and then rerun my server. 73 00:05:02,680 --> 00:05:07,680 And now if I go to here and I start typing something like John, 74 00:05:08,860 --> 00:05:11,920 then this update to the route is now live. 75 00:05:12,550 --> 00:05:16,960 If we are testing and developing our website, this is really painful. 76 00:05:16,960 --> 00:05:21,820 Having to stop and rerun the server every single time we make a change in our 77 00:05:21,820 --> 00:05:22,900 server file. 78 00:05:23,470 --> 00:05:27,340 So one of the things that you might notice here is that there is something 79 00:05:27,340 --> 00:05:31,900 called a debug mode, and we can set this to be on or off. 80 00:05:32,380 --> 00:05:37,380 Now there's a couple advantages of having the debug mode on and it's described 81 00:05:38,020 --> 00:05:42,520 in the Quickstart. It allows us to activate the debugger, 82 00:05:42,610 --> 00:05:46,000 which helps us narrow down on any issues. 83 00:05:46,450 --> 00:05:51,450 It activates the automatic reloader so that whenever we edit off a file and hit 84 00:05:52,090 --> 00:05:55,810 save, it's going to reload our server. And finally, 85 00:05:55,810 --> 00:05:59,630 it also enables debug mode on the flask application. 86 00:06:00,230 --> 00:06:05,060 Let's give that a go in order to change our app to run on debug mode. 87 00:06:05,270 --> 00:06:07,610 All we have to do is to change right, 88 00:06:07,660 --> 00:06:10,600 the debug property to true, right? 89 00:06:11,530 --> 00:06:15,610 And now if I go ahead and rerun this application, 90 00:06:16,150 --> 00:06:19,000 then you can see my debug mode is now on. 91 00:06:19,540 --> 00:06:24,520 And I've got this debugger is active and also a debug, a pin, 92 00:06:24,580 --> 00:06:28,480 which we'll come back to in just a minute. If I go to my website, 93 00:06:29,440 --> 00:06:34,270 you can see that I can go there two, a route like this, 94 00:06:34,330 --> 00:06:35,470 and it still works. 95 00:06:35,890 --> 00:06:40,330 But if I was to change something in my code, 96 00:06:40,630 --> 00:06:43,990 for example, just adding a new word into the return. 97 00:06:44,440 --> 00:06:49,440 If I go ahead and hit command S on Mac or control us on windows to save this 98 00:06:49,960 --> 00:06:51,850 file, then it will right. 99 00:06:51,910 --> 00:06:56,440 Reload the server because it's tech did a change in that file, 100 00:06:56,680 --> 00:07:01,600 and it's going to reload our server automatically so that we don't have to stop 101 00:07:01,600 --> 00:07:04,360 and start all over again. So now, 102 00:07:04,360 --> 00:07:08,050 if we go back over here and we refresh this page, 103 00:07:08,230 --> 00:07:11,650 then you can see that update in the code is now reflected. 104 00:07:12,220 --> 00:07:16,780 This is pretty neat. But in addition, we could also do other things. 105 00:07:16,930 --> 00:07:21,580 For example, if we actually need to debug an issue, for example, 106 00:07:21,580 --> 00:07:25,360 let's say that here in my variable path, 107 00:07:25,420 --> 00:07:28,930 instead of saying name, I quote it username. 108 00:07:29,320 --> 00:07:30,940 But then in my greed function, 109 00:07:30,970 --> 00:07:33,850 I'm still trying to tap into this variable code name. 110 00:07:34,450 --> 00:07:36,220 So now if I hit save, 111 00:07:36,220 --> 00:07:40,870 it's going to reload my server and you can see that there's actually nothing 112 00:07:40,870 --> 00:07:44,320 wrong with what I've done. This is all syntactically valid. 113 00:07:44,890 --> 00:07:48,250 But if I go to my website here and I hit enter, 114 00:07:48,670 --> 00:07:51,460 I actually get the flight task debug view. 115 00:07:52,000 --> 00:07:56,140 So it's it actually telling me in this nicely formatted way? 116 00:07:56,200 --> 00:08:00,160 What is the issue? So the main issue, right, is that I got a type II error. 117 00:08:00,730 --> 00:08:01,570 Yeah, it happens. 118 00:08:01,570 --> 00:08:06,570 If we scroll through the bottom is that the green function got an unexpected 119 00:08:06,580 --> 00:08:08,980 keyword argument called username. 120 00:08:10,210 --> 00:08:14,440 So that debugger might help us to figure out that, Oh, actually, 121 00:08:14,770 --> 00:08:16,360 I've named this wrong. 122 00:08:17,110 --> 00:08:21,340 Now this is an issue with the path here. But alternatively, 123 00:08:21,370 --> 00:08:25,420 I could have made an error in my code as well. For example, 124 00:08:25,420 --> 00:08:29,020 let's say that we want to take the name that's being passed in him. 125 00:08:29,020 --> 00:08:33,220 We decided that we were going to add 12, two, it for some reason or other. Now, 126 00:08:33,220 --> 00:08:38,020 if I hit save so that my server reloads and I tried to refresh this website, 127 00:08:38,440 --> 00:08:43,059 you can see again, I've got a type II error. And this time though, 128 00:08:43,059 --> 00:08:46,330 it's telling me that I can only concatenate string, 129 00:08:46,360 --> 00:08:50,500 not an integer to a string. And if we go through these files, 130 00:08:50,530 --> 00:08:55,000 you can see one of these lines, the first to a file that we wrote, hello, dot. 131 00:08:55,860 --> 00:08:59,370 And it tells us that online 18 in the greet function, 132 00:08:59,760 --> 00:09:03,210 this is the line. That's tripping it up. Now, 133 00:09:03,210 --> 00:09:07,290 one of the things I can do at this point is I can actually open up the flask, 134 00:09:07,290 --> 00:09:11,070 a debugger. And I do that by clicking on this button right here. 135 00:09:11,880 --> 00:09:15,570 And what this is going to ask is for that pin that I showed you earlier on, 136 00:09:15,780 --> 00:09:17,760 which is in our console. 137 00:09:18,420 --> 00:09:21,510 This means that if somebody else is accessing your website, 138 00:09:21,660 --> 00:09:24,780 live on the internet and you happen to have it in debug mode, 139 00:09:25,050 --> 00:09:27,270 they can't just go and mess around with your code. 140 00:09:27,930 --> 00:09:32,930 Let's go and scroll to the bottom and copy our debugging code and then paste it 141 00:09:33,690 --> 00:09:38,190 in here as the pin, and then confirm to gain access to the debugger. 142 00:09:38,850 --> 00:09:39,240 Now, 143 00:09:39,240 --> 00:09:44,240 what it's done is basically its open up a console that is live on this line. 144 00:09:45,660 --> 00:09:48,870 So now what I can do is I can print out for example, 145 00:09:48,870 --> 00:09:52,590 the variables that it could access on that line, for example, name, 146 00:09:52,950 --> 00:09:57,360 and it tells me that name is Angela. I can start diagnosing, well, 147 00:09:57,600 --> 00:10:00,960 why is this wrong? So if I wanted you to add name to 12, 148 00:10:01,380 --> 00:10:03,030 well I can narrow it down. 149 00:10:03,120 --> 00:10:07,800 And it shows me that you can only add a string to a string or an integer to an 150 00:10:07,800 --> 00:10:09,900 integer. You can't mix up the types. 151 00:10:10,350 --> 00:10:15,350 So that might make me realize that actually I need to change this also to a 152 00:10:15,750 --> 00:10:19,260 strength. Now, 153 00:10:19,260 --> 00:10:21,060 if I go ahead and refresh, 154 00:10:21,150 --> 00:10:25,290 you can see there's no problems there and I've managed to fix the problem with 155 00:10:25,290 --> 00:10:27,450 the help of the flask debugger. 156 00:10:29,160 --> 00:10:31,800 Now just a few more things on this URL. 157 00:10:32,400 --> 00:10:36,960 One of the things that we could do is we could add some texts to the path 158 00:10:36,990 --> 00:10:41,880 before. So you remember that I said username slash name. So that works. 159 00:10:42,180 --> 00:10:44,400 We can also add paths afterwards. 160 00:10:44,640 --> 00:10:48,120 So it could be one or two, whatever it may be. 161 00:10:48,480 --> 00:10:53,480 And we can now access this route by going to our URL and then going to the first 162 00:10:54,030 --> 00:10:56,010 part, which was username. 163 00:10:56,580 --> 00:10:59,370 And then it was the variable that we could put in. 164 00:10:59,640 --> 00:11:03,180 And then finally we can add even more to the path afterwards. 165 00:11:03,450 --> 00:11:06,720 So we're in our case, the path is one. So now if I hit enter, 166 00:11:06,750 --> 00:11:08,730 you can see it still goes to the same page, 167 00:11:08,970 --> 00:11:13,970 but it's only this middle pot that's being taken as the value to this name 168 00:11:14,520 --> 00:11:17,820 variable. Now, 169 00:11:17,820 --> 00:11:20,580 if we go back to the flask Quickstart, 170 00:11:20,910 --> 00:11:25,200 you can see that the final thing you mentioned is there is something called a 171 00:11:25,230 --> 00:11:27,720 converter on the converter, 172 00:11:27,750 --> 00:11:32,750 basically converts the URL into any data type that you specify by default, 173 00:11:33,930 --> 00:11:37,380 it converts that variable value into a string, 174 00:11:37,860 --> 00:11:42,660 which means it's going to accept any text without a slash. Now, 175 00:11:42,690 --> 00:11:46,440 if you want to keep the slash, because if you are using a path, 176 00:11:46,470 --> 00:11:49,500 then that might be quite important. So for example, 177 00:11:49,500 --> 00:11:54,130 you wanted to get this entire part as your variable slash Juan. 178 00:11:54,580 --> 00:11:59,170 Well then in that case, instead of using this, you would have to specify, well, 179 00:11:59,170 --> 00:12:03,460 the data type is going to be a path and then I'm gonna save that as the name. 180 00:12:03,970 --> 00:12:07,300 So now if I hit save and I use this same URL, 181 00:12:07,330 --> 00:12:12,330 you can see the rest of that path is now being rendered in my variable and it's 182 00:12:12,910 --> 00:12:16,420 being pulled in for whatever it is that I may need it for. 183 00:12:18,280 --> 00:12:22,840 Now, alternatively, you can also have more than one variable, of course. 184 00:12:23,200 --> 00:12:27,250 So maybe this first part, I'm going to keep it as a name, 185 00:12:27,280 --> 00:12:30,910 which is a string. And then the second part, I want a number. 186 00:12:30,910 --> 00:12:35,530 So maybe I'll keep it as the datatype integer and I'll give the variable a name, 187 00:12:35,560 --> 00:12:36,580 a code number. 188 00:12:37,120 --> 00:12:42,120 So now I can tap into the name and then I can also tap into a number like, 189 00:12:45,220 --> 00:12:47,920 so now coming back here, 190 00:12:47,950 --> 00:12:51,160 if I change this URL with a bit and I hit enter, 191 00:12:51,460 --> 00:12:54,280 you can see it's taken this and placed it here. 192 00:12:54,520 --> 00:12:56,590 It's taken this and placed it here. 193 00:12:57,670 --> 00:13:02,670 So that's a quick little bit on how we can extract the parts that we want from a 194 00:13:02,920 --> 00:13:07,920 URL by using these variable paths in the next lesson, 195 00:13:08,320 --> 00:13:13,030 we're going to see how we can control the HTML that gets rendered instead of 196 00:13:13,030 --> 00:13:15,820 just letting flask render what is the default. 197 00:13:16,510 --> 00:13:19,510 So for all of that and more, I'll see you on the next lesson.