1
00:00:00,630 --> 00:00:07,700
Hello, in this video you are going to learn how to create a simple Web app with the JustPy web framework.

2
00:00:08,340 --> 00:00:11,940
I'm going to use visual studio codes to write the Web app.

3
00:00:12,450 --> 00:00:14,670
So Jupyter would not work here.

4
00:00:14,670 --> 00:00:21,120
So I suggest you to use an IDE such as Visual Studio Code or whatever IDE or text editor that you

5
00:00:21,120 --> 00:00:21,900
are using.

6
00:00:22,680 --> 00:00:25,230
So I've started Visual Studio code in here.

7
00:00:26,130 --> 00:00:36,950
I'm going to go to file open in Visual Studio codes and then go to the folder where my reviews.csv

8
00:00:36,960 --> 00:00:45,000
file is located and press on open and that will create a new Visual Studio Code Project Directory,

9
00:00:45,180 --> 00:00:51,150
pointing to that folder where the reviews.csv file is.
We don't need the reviews.csv

10
00:00:51,150 --> 00:00:55,250
for now because in this video we are going to just create the Web app.

11
00:00:56,100 --> 00:00:58,440
So let's create a Python file.

12
00:00:58,830 --> 00:01:03,720
I'm going to name it zero dash, simple dash app.

13
00:01:03,900 --> 00:01:04,980
dot py.

14
00:01:05,460 --> 00:01:10,470
So I'm going to create multiple web apps and I'm using zero one, two, three, four.

15
00:01:10,480 --> 00:01:16,890
In the names of these files. To use JustPy we need to have JustPy installed.

16
00:01:17,310 --> 00:01:25,110
So I'm using three point nine, Python 3.9 now and I'm going to go to Terminal, New Terminal

17
00:01:25,860 --> 00:01:35,460
and here I will use pip 3.9, since I'm using Python 3.9 install justpy.

18
00:01:39,370 --> 00:01:44,830
All right, that was successful, so I got no errors, so I got this message that it was already installed.

19
00:01:45,400 --> 00:01:52,030
But anyway, I hope you were successful too, with the installation, then what we need to do is just

20
00:01:52,030 --> 00:02:00,370
import justpy. A good practices to import it as JP because you are going to look at the documentation

21
00:02:00,370 --> 00:02:04,930
of JustPy and all the examples are using this jp name.

22
00:02:05,230 --> 00:02:08,080
So it's a good idea to be consistent with the documentation.

23
00:02:09,730 --> 00:02:18,050
Now every JustPy app will have a main object that is known as a quasar page.

24
00:02:18,400 --> 00:02:25,350
So that is the Web page basically, and that Web page may contain different elements.

25
00:02:25,570 --> 00:02:31,800
So it may contain, for example, an h1 heading or a paragraph or maybe a table.

26
00:02:32,080 --> 00:02:37,120
So all these elements will be added to that quasar page to the Web page.

27
00:02:37,750 --> 00:02:39,130
Why is it called quasar?

28
00:02:39,310 --> 00:02:46,480
Well, because JustPy uses the quasar framework, which is basically a framework that is not related

29
00:02:46,480 --> 00:02:47,370
to Python.

30
00:02:47,530 --> 00:02:55,330
It's a framework built with JavaScript, but JustPy is using that framework and we can use that framework

31
00:02:55,330 --> 00:02:56,170
through Python.

32
00:02:56,380 --> 00:02:58,810
So let me create a quasar page.

33
00:03:00,810 --> 00:03:09,300
What we do is we create an app function, you can name it whatever you like, but basically the idea

34
00:03:09,300 --> 00:03:12,680
is that this app will return that quasar page.

35
00:03:13,050 --> 00:03:19,030
So inside the function, we create a variable which is equal to jp.Quasar

36
00:03:19,110 --> 00:03:21,160
Page.

37
00:03:21,180 --> 00:03:27,990
So Capital Q, capital P, that is a class that we are instantiating here.

38
00:03:28,000 --> 00:03:35,160
So we are creating a quasar page instance, an object instance, and this function then should

39
00:03:35,160 --> 00:03:35,690
return

40
00:03:36,060 --> 00:03:38,280
that quasar page instance.

41
00:03:38,700 --> 00:03:44,290
And in between is where we write the elements that this page is going to contain.

42
00:03:44,850 --> 00:03:47,120
So let's create a variable for each element.

43
00:03:47,400 --> 00:03:48,690
Let's create a heading.

44
00:03:48,690 --> 00:03:58,880
So a heading is basically text, but with a very big font size and we do JP So we point to that dot

45
00:03:58,890 --> 00:04:01,100
Q Capital D iv.

46
00:04:01,260 --> 00:04:04,650
So QDiv, is basically a division.

47
00:04:04,650 --> 00:04:09,050
If you are familiar with HTML, it's a division, but it's a quasar division.

48
00:04:09,060 --> 00:04:15,480
So it has some styling from quasar which make it look modern and it also allows you to style it

49
00:04:15,480 --> 00:04:23,430
very easily as you you're going to see in just a bit. 
As the first argument we should pass where it belongs.

50
00:04:23,940 --> 00:04:32,730
And of course that belongs to wp, so to that variable which I named wp to stand for Web page.

51
00:04:32,740 --> 00:04:35,400
So webpage. That belongs to that.

52
00:04:35,550 --> 00:04:39,300
Then other arguments that QDiv gets is the text.

53
00:04:39,870 --> 00:04:42,300
So what text do we want to display there?

54
00:04:43,630 --> 00:04:53,350
As a string, let's say "Analysis of course reviews".
Let's also add a paragraph, let's call this

55
00:04:53,780 --> 00:04:57,190
p1 is equal to 

56
00:04:58,270 --> 00:05:00,150
QDiv again.

57
00:05:00,160 --> 00:05:07,480
So we always use QDiv and a it belongs to wp again, the text this time.

58
00:05:08,920 --> 00:05:15,160
So let's write like a description of the Web page. These graphs

59
00:05:17,640 --> 00:05:19,740
represent course review,

60
00:05:22,130 --> 00:05:32,300
course review analysis, and that would be a very minimalistic webapp, but if we run on this now, nothing

61
00:05:32,300 --> 00:05:38,130
is going to happen because we created a function, but no instance is calling that function.

62
00:05:38,150 --> 00:05:39,650
So we are not calling it anywhere.

63
00:05:39,950 --> 00:05:42,520
So let's do something that we call that function.

64
00:05:42,950 --> 00:05:46,840
We can use justpy from jp.

65
00:05:47,540 --> 00:05:57,950
So justpy is a function and it expects as input a function that returns a quasar page, which is

66
00:05:57,950 --> 00:05:58,810
this function here.

67
00:05:59,630 --> 00:06:03,450
So you can just write app without calling the app function.

68
00:06:03,650 --> 00:06:10,510
So justpy, this function will take care of calling this function right.

69
00:06:11,030 --> 00:06:20,630
If we execute it now, you should see this message here that justby is ready to go at this address

70
00:06:20,630 --> 00:06:23,990
with this 8000 port number.

71
00:06:24,770 --> 00:06:33,080
If you press control and click or command and then click, that should open your default browser.

72
00:06:36,270 --> 00:06:44,400
And this is the Web app, so it's working. Now, you would expect that this would be in a bigger font.

73
00:06:44,400 --> 00:06:49,890
That didn't happen because we haven't added any style to any of these divs.

74
00:06:50,160 --> 00:06:55,620
So these divisions are just plain text. To add style to elements

75
00:06:55,980 --> 00:07:05,980
you can add a classes argument to any div, any new development, and that is equal to a string.

76
00:07:06,720 --> 00:07:09,720
So how can we make this div big?

77
00:07:10,110 --> 00:07:16,710
Well, I can show you, of course, but I want to show you the way how you can find any type of styling

78
00:07:16,710 --> 00:07:18,440
that you can use with justpy.

79
00:07:19,200 --> 00:07:30,180
So what you have to do is just search for quasar style and then go to this first result.

80
00:07:35,760 --> 00:07:42,240
Under style and identity, you're going to see the attributes that you can change for the page elements,

81
00:07:42,240 --> 00:07:46,090
such as the div element that we have at hand now.

82
00:07:46,500 --> 00:07:49,530
So we are concerned about typography.

83
00:07:52,920 --> 00:07:58,500
If you click there, you are going to see examples here, so if you want to make the text this big,

84
00:07:58,830 --> 00:08:02,780
you want to use text dash h1.

85
00:08:03,450 --> 00:08:08,610
So let's try that, copy it and add it here.

86
00:08:09,540 --> 00:08:11,530
Text dash h1.

87
00:08:11,960 --> 00:08:16,770
Now, something you need to know if you're using Visual Studio Code is that if you run the code with

88
00:08:16,770 --> 00:08:21,720
this button again while the code is running, nothing is going to happen.

89
00:08:23,770 --> 00:08:26,050
So the program will just freeze and

90
00:08:28,100 --> 00:08:30,140
if you go back to localhost.

91
00:08:34,020 --> 00:08:36,520
you see, the old app is still running.

92
00:08:36,690 --> 00:08:46,500
So what you have to do is you need to go here and press control C to stop the current process and

93
00:08:46,500 --> 00:08:49,200
then go to that button and run it again.

94
00:08:51,170 --> 00:08:59,160
Then you're going to see that the app updates and we have this big font now, so let's look again.

95
00:08:59,220 --> 00:09:02,590
Quasar style under style and identity.

96
00:09:03,020 --> 00:09:05,360
So we were talking about typography.

97
00:09:07,740 --> 00:09:11,490
You also have other examples here, what you can change.

98
00:09:11,760 --> 00:09:17,190
And so if you want to add another property, let's say you want to put

99
00:09:18,840 --> 00:09:28,950
this text to the center, you want to use text-right, so you copy that, go to your app, make a space

100
00:09:30,000 --> 00:09:33,120
and put, paste the other style property.

101
00:09:34,570 --> 00:09:38,070
Stop the code, run again.

102
00:09:41,220 --> 00:09:46,950
Reload the page and you see that the text went to the right.

103
00:09:47,820 --> 00:09:56,270
So what I meant to make it center, so let's say text-center, stop, run again.

104
00:09:59,310 --> 00:10:05,510
We get this pop up some time that it detects that the app changed so we can press, OK,

105
00:10:06,000 --> 00:10:07,560
and that will reload the page.

106
00:10:07,590 --> 00:10:12,090
So this is what I was expecting, if you want some padding.

107
00:10:12,660 --> 00:10:20,640
So if you want this text to be not so close to the upper bound of the webpage, then you may want to

108
00:10:20,640 --> 00:10:22,020
look at spacing.

109
00:10:22,710 --> 00:10:28,350
So in spacing, you're going to see down here that you have all these options.

110
00:10:29,530 --> 00:10:36,550
So, for example, if you want the padding on top to be extra small, you use that

111
00:10:37,650 --> 00:10:38,130
text.

112
00:10:41,050 --> 00:10:50,380
If you want to have a padding also all around the text, you want to have some space here, space

113
00:10:50,380 --> 00:10:55,090
between the text and the upper bound on space between this text and the next element, which would be

114
00:10:55,090 --> 00:11:01,240
this one here, then you want to go to maybe padding all mediums.

115
00:11:01,240 --> 00:11:06,160
So you want to copy that and add it there.

116
00:11:06,280 --> 00:11:07,240
So make a space.

117
00:11:12,820 --> 00:11:18,790
Reload and you see that now we had some more space between that and that there.

118
00:11:20,590 --> 00:11:26,950
The last change I want to make is I want to make the text a bit smaller, so Contrl, C run again,

119
00:11:27,790 --> 00:11:31,510
go here, reload, and now it looks better.

120
00:11:32,050 --> 00:11:35,560
And that is how you make justpy web apps.

121
00:11:37,110 --> 00:11:44,910
Note that the order you create these elements matters, so you see that "Analysis of course reviews"

122
00:11:44,910 --> 00:11:49,390
is on top of the other elements here.

123
00:11:50,520 --> 00:11:55,310
So if you want to keep adding elements down below here, you want to respect the order.

124
00:11:56,160 --> 00:11:57,550
So you want to add more elements.

125
00:11:57,570 --> 00:12:05,070
You can always note, don't forget that you always need to connect that element to the Web page.

126
00:12:06,150 --> 00:12:09,530
Now that was how to create a simple Web page.

127
00:12:09,870 --> 00:12:13,620
But QDivs are not the only elements we can use.

128
00:12:13,620 --> 00:12:16,420
So we can also use HighCharts elements.

129
00:12:16,830 --> 00:12:21,270
So which is a plot that we can add to our Quasar page.

130
00:12:21,630 --> 00:12:23,020
Let's do that in the next video.

131
00:12:23,130 --> 00:12:23,520
See you.