1 00:00:00,000 --> 00:00:02,758 Hello, in this video, you are going to 2 00:00:02,759 --> 00:00:05,399 learn how to create a simple web app 3 00:00:05,399 --> 00:00:08,579 with the JustPy Web Framework. I'm 4 00:00:08,579 --> 00:00:11,339 going to use Visual Studio Code to write 5 00:00:11,339 --> 00:00:14,279 the web app. So Jupyter would not work 6 00:00:14,279 --> 00:00:16,859 here. So I suggest you to use an IDE 7 00:00:16,859 --> 00:00:18,959 such as Visual Studio Code, or whatever 8 00:00:18,959 --> 00:00:21,899 IDE or text editor that you are using. 9 00:00:22,594 --> 00:00:24,904 So I've started Visual Studio Code in 10 00:00:24,929 --> 00:00:30,278 here. I'm going to go to File, Open 11 00:00:31,972 --> 00:00:34,529 in Visual Studio Code, and then go to the 12 00:00:34,529 --> 00:00:37,499 folder where my reviews.csv file is 13 00:00:37,499 --> 00:00:40,259 located, and press on Open, and that 14 00:00:40,284 --> 00:00:43,194 will create a new Visual Studio Code 15 00:00:43,894 --> 00:00:46,024 project directory pointing to that 16 00:00:46,049 --> 00:00:48,539 folder where the reviews.csv file 17 00:00:48,539 --> 00:00:51,689 is. We don't need the reviews.csv 18 00:00:51,689 --> 00:00:53,489 for now, because in this video, we are 19 00:00:53,489 --> 00:00:56,609 going to just create the web app. So let's 20 00:00:56,609 --> 00:00:59,819 create a Python file. I'm going to name 21 00:00:59,819 --> 00:01:05,819 it 0-simple-app.py. So I'm 22 00:01:05,819 --> 00:01:08,579 going to create multiple web apps and 23 00:01:08,609 --> 00:01:12,929 I'm using 0, 1, 2, 3, 4 now, even names of these 24 00:01:12,929 --> 00:01:15,719 files. To use JustPy, we need to have 25 00:01:15,719 --> 00:01:19,529 JustPy installed. So I'm using 3.9, 26 00:01:19,919 --> 00:01:23,009 Python 3.9 now, and I'm going to go to 27 00:01:23,314 --> 00:01:26,704 Terminal, New Terminal, and here I 28 00:01:26,729 --> 00:01:30,509 will use pip3.9, since I'm using 29 00:01:30,509 --> 00:01:35,588 Python 3.9, install justpy. 30 00:01:35,612 --> 00:01:39,187 [No audio] 31 00:01:39,212 --> 00:01:42,659 All right, that was successful. So I got no errors, 32 00:01:42,659 --> 00:01:44,369 I got this message that it was already 33 00:01:44,369 --> 00:01:47,249 installed. But anyway, I hope you were 34 00:01:47,249 --> 00:01:50,309 successful too with installation, then 35 00:01:50,334 --> 00:01:54,213 what we need to do is just import justpy. 36 00:01:54,373 --> 00:01:56,142 A good practice is to import it as 37 00:01:56,279 --> 00:01:59,489 jp, because you are going to look at the 38 00:01:59,549 --> 00:02:01,859 documentation of JustPy, and all the 39 00:02:01,859 --> 00:02:05,489 examples are using this jp name. So it's 40 00:02:05,489 --> 00:02:07,289 a good idea to be consistent with the 41 00:02:07,289 --> 00:02:12,149 documentation. Now, every JustPy app 42 00:02:12,394 --> 00:02:16,504 will have a main object, that is known as 43 00:02:16,529 --> 00:02:20,339 Quasar page, so that is the webpage 44 00:02:20,339 --> 00:02:23,969 basically. And that webpage may contain 45 00:02:23,969 --> 00:02:26,519 different elements. So it may contain, 46 00:02:26,519 --> 00:02:29,399 for example, an h1 heading or a 47 00:02:29,399 --> 00:02:32,669 paragraph, or maybe a table, so all 48 00:02:32,669 --> 00:02:34,829 these elements will be added to that 49 00:02:34,829 --> 00:02:38,189 Quasar page to the webpage. Why is it 50 00:02:38,189 --> 00:02:40,889 called Quasar? Well, because JustPy 51 00:02:40,889 --> 00:02:43,709 uses the Quasar framework, which is 52 00:02:43,709 --> 00:02:46,019 basically a framework that is not 53 00:02:46,019 --> 00:02:48,869 related to Python. It's a framework 54 00:02:48,869 --> 00:02:52,379 built with JavaScript. But JustPy is 55 00:02:52,379 --> 00:02:54,659 using that framework, and we can use 56 00:02:54,659 --> 00:02:56,909 that framework through Python. So let me 57 00:02:56,909 --> 00:02:58,801 create a Quasar page. 58 00:02:58,825 --> 00:03:00,880 [No audio] 59 00:03:00,905 --> 00:03:02,321 What we do first is 60 00:03:02,560 --> 00:03:06,389 we create an app function. You can 61 00:03:06,389 --> 00:03:08,849 name it whatever you like. But basically 62 00:03:08,849 --> 00:03:11,459 the idea is that this app will return 63 00:03:11,496 --> 00:03:14,586 that Quasar page. So inside the 64 00:03:14,759 --> 00:03:18,119 function, we create a variable which is 65 00:03:18,119 --> 00:03:21,899 equal to jp.QuasarPage, so capital 66 00:03:21,899 --> 00:03:26,069 Q capital P, that is a class that we 67 00:03:26,069 --> 00:03:28,529 are instantiating here, so we are 68 00:03:28,529 --> 00:03:31,859 creating a QuasarPage instance, an 69 00:03:31,889 --> 00:03:34,919 object instance. And this function then 70 00:03:34,944 --> 00:03:38,399 should return that QuasarPage instance. 71 00:03:38,699 --> 00:03:41,789 And in between is where we write the 72 00:03:41,819 --> 00:03:43,829 elements that this page is going to 73 00:03:43,829 --> 00:03:46,469 contain. So let's create a variable for 74 00:03:46,469 --> 00:03:48,629 each element. Let's create a heading. 75 00:03:48,659 --> 00:03:51,839 So a heading is basically text, but with 76 00:03:51,839 --> 00:03:56,849 a very big font size. And we do jp, so we 77 00:03:56,849 --> 00:04:02,758 points to that '.q', capital Div, so QDiv 78 00:04:03,052 --> 00:04:04,949 is basically a division. If you're 79 00:04:04,949 --> 00:04:07,499 familiar with HTML, it's a division but 80 00:04:07,559 --> 00:04:09,779 it's a Quasar division. So it has some 81 00:04:09,779 --> 00:04:12,779 styling from Quasar, which make it 82 00:04:12,779 --> 00:04:14,939 look modern, and it also allows you to 83 00:04:14,939 --> 00:04:17,009 style it very easily as you're going 84 00:04:17,034 --> 00:04:20,274 to see in just a bit. As a first 85 00:04:20,434 --> 00:04:22,714 argument, we should pass where it 86 00:04:22,739 --> 00:04:26,099 belongs, and of course, that belongs to 87 00:04:26,464 --> 00:04:29,314 wp is that sort of that variable, which I 88 00:04:29,339 --> 00:04:33,034 named wp to stand for a webpage. So 89 00:04:33,058 --> 00:04:36,419 webpage, that belongs to that, then other 90 00:04:36,449 --> 00:04:39,449 arguments that QDiv gets is the text. 91 00:04:39,839 --> 00:04:41,969 So what text do we want to display 92 00:04:41,994 --> 00:04:46,614 there. As a string, let's say Analysis, 93 00:04:46,714 --> 00:04:51,274 of Course Reviews. Let's also add a 94 00:04:51,299 --> 00:04:55,709 paragraph. Let's call this p1 is 95 00:04:55,709 --> 00:05:01,229 equal to jp.QDiv, again, so we always use 96 00:05:01,254 --> 00:05:06,114 QDiv, and a, it belongs to wp again, 97 00:05:06,419 --> 00:05:10,259 the text this time. So let's write 98 00:05:10,259 --> 00:05:15,261 like a description of the webpage, These graphs 99 00:05:15,285 --> 00:05:17,619 [No audio] 100 00:05:17,644 --> 00:05:19,776 represent course review, 101 00:05:19,800 --> 00:05:22,257 [No audio] 102 00:05:22,282 --> 00:05:25,739 course review analysis, and that would be a very 103 00:05:25,739 --> 00:05:29,939 minimalistic web app. But if we run this 104 00:05:29,939 --> 00:05:33,359 now, nothing is going to happen because 105 00:05:33,385 --> 00:05:36,539 we created a function, but no instance 106 00:05:36,569 --> 00:05:38,759 is calling that function. So we are not 107 00:05:38,759 --> 00:05:40,679 calling it anywhere. So let's do 108 00:05:40,679 --> 00:05:42,569 something that will call that function, 109 00:05:42,900 --> 00:05:48,875 we can use justpy from jp, so justpy is a 110 00:05:48,900 --> 00:05:53,099 function, and it expects as input a 111 00:05:53,099 --> 00:05:56,819 function that returns a QuasarPage, 112 00:05:57,209 --> 00:06:00,179 which is this function here. So you can 113 00:06:00,179 --> 00:06:02,999 just write app without calling the app 114 00:06:02,999 --> 00:06:05,729 function. So justpy, this function will 115 00:06:05,729 --> 00:06:09,359 take care of calling this function. 116 00:06:10,114 --> 00:06:12,555 Right? If we execute it now, 117 00:06:12,579 --> 00:06:15,004 [No audio] 118 00:06:15,029 --> 00:06:17,879 you should see this message here that JustPy is 119 00:06:17,879 --> 00:06:21,209 ready to go at this address with this 120 00:06:21,304 --> 00:06:27,094 8000 port number. If you press Ctrl and 121 00:06:27,119 --> 00:06:30,359 click or Command and then click, that 122 00:06:30,359 --> 00:06:33,094 should open your default browser. 123 00:06:33,118 --> 00:06:36,269 [No audio] 124 00:06:36,294 --> 00:06:38,639 And this is the web app. So it's working. 125 00:06:38,984 --> 00:06:42,209 Now, you would expect that this would be 126 00:06:42,394 --> 00:06:45,094 in a bigger font, that didn't happen 127 00:06:45,119 --> 00:06:48,269 because we haven't added any style to 128 00:06:48,359 --> 00:06:51,359 any of these divs. So these divisions 129 00:06:51,389 --> 00:06:54,959 are just plain text. To add style to 130 00:06:54,959 --> 00:07:00,209 elements, you can add a classes argument 131 00:07:00,449 --> 00:07:03,599 to any div, any QDiv element, and that 132 00:07:03,599 --> 00:07:08,129 is equal to a string. So how can we make 133 00:07:08,159 --> 00:07:11,249 this div big? Well, I can show you of 134 00:07:11,249 --> 00:07:13,439 course, but I want to show you the way 135 00:07:13,439 --> 00:07:16,679 how you can find any type of styling 136 00:07:16,679 --> 00:07:19,439 that you can use with JustPy. So 137 00:07:19,439 --> 00:07:23,009 what you have to do is just search for 138 00:07:23,009 --> 00:07:25,155 quasar style, 139 00:07:25,179 --> 00:07:27,470 [No audio] 140 00:07:27,495 --> 00:07:30,269 and then go to this first result. 141 00:07:30,293 --> 00:07:35,795 [No audio] 142 00:07:35,820 --> 00:07:37,860 Under Style & Identity, you're going 143 00:07:37,860 --> 00:07:39,780 to see the attributes that you can 144 00:07:39,780 --> 00:07:43,320 change for the page element such as the 145 00:07:43,320 --> 00:07:46,860 div element that we have attend now. So 146 00:07:46,885 --> 00:07:49,516 we are concerned about Typography. 147 00:07:49,545 --> 00:07:52,823 [No audio] 148 00:07:52,848 --> 00:07:54,660 If you click there, you're going to see 149 00:07:54,690 --> 00:07:56,970 examples here. So if you want to make 150 00:07:56,995 --> 00:08:00,293 the text this big, you want to use 151 00:08:00,317 --> 00:08:05,696 text-h1. So let's try that, copy it, 152 00:08:05,721 --> 00:08:07,745 [No audio] 153 00:08:07,770 --> 00:08:12,180 and add it here, text-h1. Now 154 00:08:12,180 --> 00:08:13,530 something you need to know if you're 155 00:08:13,530 --> 00:08:15,480 using Visual Studio Code is that if you 156 00:08:15,510 --> 00:08:18,120 run the code with this button again, 157 00:08:18,343 --> 00:08:21,771 while the code is running, nothing is going to happen. 158 00:08:21,796 --> 00:08:23,796 [No audio] 159 00:08:23,821 --> 00:08:26,075 So the program will just freeze, and 160 00:08:26,099 --> 00:08:28,099 [No audio] 161 00:08:28,124 --> 00:08:30,255 if you go back to localhost, 162 00:08:30,279 --> 00:08:34,004 [No audio] 163 00:08:34,029 --> 00:08:35,760 you see that the old app is 164 00:08:35,760 --> 00:08:38,730 still running. So what you have to do is 165 00:08:38,730 --> 00:08:42,840 you need to go here, and press Ctrl C 166 00:08:43,560 --> 00:08:46,920 to stop the current process, and then go 167 00:08:46,920 --> 00:08:49,155 to that button and run it again. 168 00:08:49,179 --> 00:08:51,179 [No audio] 169 00:08:51,204 --> 00:08:53,400 Then you're going to see that the app 170 00:08:53,430 --> 00:08:55,800 updates and we have this big fonts now. 171 00:08:56,970 --> 00:08:59,949 So let's look again Quasar style, 172 00:09:00,670 --> 00:09:03,808 under Style & Identity. So we were 173 00:09:03,840 --> 00:09:05,388 talking about Typography. 174 00:09:05,412 --> 00:09:07,770 [No audio] 175 00:09:07,795 --> 00:09:11,580 You also have other examples here what you can change. 176 00:09:11,820 --> 00:09:15,030 And so if you want to add another 177 00:09:15,030 --> 00:09:19,080 property, let's say you want to put this 178 00:09:19,080 --> 00:09:22,680 text to the center. You want to use 179 00:09:22,955 --> 00:09:26,585 text-right, so you copy that, go to 180 00:09:26,610 --> 00:09:31,530 your app, make a space and put paste the 181 00:09:31,530 --> 00:09:33,180 other style property. 182 00:09:34,530 --> 00:09:38,093 Stop the code, run again, 183 00:09:38,117 --> 00:09:41,197 [No audio] 184 00:09:41,222 --> 00:09:45,270 reload the page, and you see 185 00:09:45,270 --> 00:09:48,120 that the text went to the right. Yeah, so 186 00:09:48,120 --> 00:09:50,910 I meant to make it center. So let's say 187 00:09:50,940 --> 00:09:51,972 text-center. 188 00:09:53,611 --> 00:09:56,286 Stop, run again. 189 00:09:56,310 --> 00:09:59,255 [No audio] 190 00:09:59,280 --> 00:10:01,860 We get this popup sometime that it 191 00:10:01,860 --> 00:10:04,500 detects that the app changed. So we can 192 00:10:04,500 --> 00:10:06,600 press OK, and it will, and that will 193 00:10:06,600 --> 00:10:09,330 reload the page. So this is what I was 194 00:10:09,330 --> 00:10:13,050 expecting. If you want some padding, so 195 00:10:13,050 --> 00:10:16,470 if you want this text to be not so close 196 00:10:16,530 --> 00:10:19,500 to the upper bounds of the webpage, then 197 00:10:19,530 --> 00:10:23,280 you may want to look at Spacing. So 198 00:10:23,310 --> 00:10:25,230 in Spacing, you're going to see down 199 00:10:25,230 --> 00:10:29,790 here that you have all these options. So 200 00:10:29,790 --> 00:10:33,060 for example, if you want the padding on 201 00:10:33,060 --> 00:10:38,355 top to be extra small, you use that text. 202 00:10:38,379 --> 00:10:40,940 [No audio] 203 00:10:40,965 --> 00:10:45,510 If you want to have a padding of 204 00:10:45,540 --> 00:10:48,480 all around the text, you want 205 00:10:48,480 --> 00:10:50,820 to have some space here, space between 206 00:10:50,820 --> 00:10:52,620 the text and the upper bound, and space 207 00:10:52,620 --> 00:10:54,660 between this text and the next element, 208 00:10:54,660 --> 00:10:56,370 which should be this one here, then you 209 00:10:56,370 --> 00:11:01,200 want to go to maybe padding all medium, 210 00:11:01,200 --> 00:11:05,670 so you want to copy that and add it 211 00:11:05,760 --> 00:11:07,355 there. So make a space, 212 00:11:07,379 --> 00:11:09,706 [No audio] 213 00:11:09,731 --> 00:11:10,734 run, 214 00:11:10,758 --> 00:11:12,828 [No audio] 215 00:11:12,853 --> 00:11:16,020 reload, and you see that now we had some more 216 00:11:16,020 --> 00:11:20,730 space between that and that there. The 217 00:11:20,730 --> 00:11:22,290 last change I want to make is I want to 218 00:11:22,290 --> 00:11:26,190 make the text a bit smaller. So Ctrl C, 219 00:11:26,340 --> 00:11:30,810 run again, go here, reload, and now it 220 00:11:30,810 --> 00:11:34,200 looks better. And that is how you make 221 00:11:34,440 --> 00:11:39,180 JustPy web apps. Note that the order you 222 00:11:39,210 --> 00:11:42,510 create these elements matters. So you 223 00:11:42,510 --> 00:11:44,880 see that Analysis of Course Reviews 224 00:11:44,910 --> 00:11:50,730 is on top of the other elements here. So 225 00:11:50,730 --> 00:11:52,680 if you want to keep adding elements down 226 00:11:52,680 --> 00:11:54,900 below here, you want to respect the 227 00:11:54,900 --> 00:11:57,540 order. So you want to add more elements 228 00:11:57,540 --> 00:11:59,640 here and always don't forget that 229 00:11:59,850 --> 00:12:03,210 you always need to connect that element 230 00:12:03,545 --> 00:12:07,235 to the webpage. Now that was how to 231 00:12:07,260 --> 00:12:11,550 create a simple webpage. But QDivs 232 00:12:11,700 --> 00:12:13,710 are not the only elements we can use. So 233 00:12:13,710 --> 00:12:17,190 we can also use Highcharts element, so 234 00:12:17,190 --> 00:12:20,490 which is a plot that we can add to our 235 00:12:20,490 --> 00:12:22,710 QuasarPage. Let's do that in the next 236 00:12:22,710 --> 00:12:24,040 video. See you.