1
00:00:00,420 --> 00:00:01,740
Hi, a warm welcome.

2
00:00:02,820 --> 00:00:11,280
I'm excited now to show you how to build this applications, which have a graphical user interface.

3
00:00:12,950 --> 00:00:20,690
This is one of the most attractive areas because you get to build tangible programs, which real users

4
00:00:20,690 --> 00:00:21,470
can use.

5
00:00:21,950 --> 00:00:28,820
So what you're looking at on my screen now is the first Apple says we will build throughout this series

6
00:00:28,820 --> 00:00:29,690
of videos.

7
00:00:30,650 --> 00:00:32,750
This is a currency converter app.

8
00:00:33,790 --> 00:00:38,200
It's quite minimal, but it does function very well.

9
00:00:38,500 --> 00:00:41,020
So we have to drop down lists in here.

10
00:00:41,470 --> 00:00:49,930
You can choose between these three currencies silver source currency and the target currency.

11
00:00:50,850 --> 00:00:55,960
Currently, there are only three currencies here, but you can easily add more and more.

12
00:00:56,830 --> 00:01:01,480
It just takes adding items to a Python list, and that's it.

13
00:01:01,780 --> 00:01:07,570
Then we have this input box here, where the user can enter the value they want to convert.

14
00:01:07,600 --> 00:01:12,550
So in this case, they would want to convert 14 euros to US dollars.

15
00:01:13,300 --> 00:01:19,780
And this program will use the current rate to the current real time rate.

16
00:01:20,930 --> 00:01:30,320
And if you press converts, it will show you that €14 is equal to 15 points, something you as the program

17
00:01:30,320 --> 00:01:38,570
gets of occurrence rate from the x rays dot com websites using web scraping volume beautiful soup.

18
00:01:39,170 --> 00:01:43,190
I will show you how everything is done through all of this videos.

19
00:01:44,490 --> 00:01:51,030
However, in this particular video, we will not work on the currency converter yet, I'll show you

20
00:01:51,030 --> 00:01:59,630
first how to use POI Q2 to make a more simple program, which is that this one in here.

21
00:01:59,640 --> 00:02:05,820
So this is what we have built in this video because I don't want to go directly to the currency converter

22
00:02:06,120 --> 00:02:08,490
because it's a bit more advanced than this.

23
00:02:08,759 --> 00:02:12,210
This is a very simple one that will help you understand.

24
00:02:12,540 --> 00:02:21,300
Py que te Kuiti is the library that is used to build this kind of this progress with graphical user

25
00:02:21,300 --> 00:02:22,020
interfaces.

26
00:02:22,590 --> 00:02:26,640
So what this is is, is just a census maker.

27
00:02:26,670 --> 00:02:27,720
That's how I call it.

28
00:02:27,930 --> 00:02:34,740
You just write a sentence here, hi there and you press on make and it capitalizes the first letter

29
00:02:35,220 --> 00:02:37,770
and then it puts a dot of the end of the sentence.

30
00:02:37,950 --> 00:02:39,090
So this is very simple.

31
00:02:39,390 --> 00:02:46,000
It's a standard inputs button outputs program, so you get to have to enter some inputs and you press

32
00:02:46,000 --> 00:02:46,490
the button.

33
00:02:46,650 --> 00:02:52,960
The button will trigger an action, it will process the string and it will displayed in this area here.

34
00:02:53,250 --> 00:02:55,530
So let's make this program in this video.

35
00:02:57,410 --> 00:03:00,530
You need to use your local I.D. for this.

36
00:03:01,310 --> 00:03:10,940
A cloud based I.D. such as rep will not work because you need to have access to your computer graphical

37
00:03:10,940 --> 00:03:17,930
user interface to your operating system, which actually is the one that generates the vast graphical

38
00:03:17,930 --> 00:03:18,800
user interface.

39
00:03:20,150 --> 00:03:28,610
So on my charm, I have created an empty project directory, and I'm going to create an empty file python

40
00:03:28,610 --> 00:03:29,360
file as well.

41
00:03:30,590 --> 00:03:33,800
The sentence maker, I'm going to name this, that's p y.

42
00:03:34,940 --> 00:03:46,340
And then the first thing I'll do is I'll open the terminal and install P y q t six.

43
00:03:47,300 --> 00:03:50,620
That's the current version of my duty.

44
00:03:52,400 --> 00:03:58,260
So version six, there have been different generations of people like you'd see.

45
00:03:58,280 --> 00:04:05,660
So six is the current generation was, I was told the library, I'm going to minimize the terminal and

46
00:04:05,660 --> 00:04:06,530
start coding.

47
00:04:06,890 --> 00:04:12,230
So from Pi Kuti, I am going to access key to widgets.

48
00:04:13,810 --> 00:04:22,330
Which is a base class, and it has a series of classes which we need to import.

49
00:04:22,570 --> 00:04:25,030
Q application cute widgets.

50
00:04:26,530 --> 00:04:30,740
Q The box layout and there are some more.

51
00:04:30,760 --> 00:04:37,560
So I'm going to again say from Pete uted those cutesy widgets import.

52
00:04:37,870 --> 00:04:41,050
You could also go ahead and add them here.

53
00:04:41,050 --> 00:04:46,180
But the line is getting too long, so it's a good practice to create a new line.

54
00:04:46,180 --> 00:04:50,680
So to have this sort of one column called style.

55
00:04:51,070 --> 00:04:56,170
So again, we need cute label and cute push button.

56
00:04:56,190 --> 00:04:58,960
I'll explain what each of these are.

57
00:04:59,290 --> 00:05:00,880
We're actually going to use them.

58
00:05:02,260 --> 00:05:07,750
So it all starts by creating an app instance which is equal to cute application.

59
00:05:07,760 --> 00:05:11,530
So that is the first class that we imported.

60
00:05:11,680 --> 00:05:20,290
This creates the application instance, but then you need another class, which is queue widgets.

61
00:05:20,710 --> 00:05:27,430
This will be the actual window where you add all those widgets, the buttons, the text boxes, the

62
00:05:27,430 --> 00:05:30,790
labels, all the elements of your application.

63
00:05:31,870 --> 00:05:39,700
Both of these have to be satiated, and this first one needs an argument which could be an empty list.

64
00:05:40,150 --> 00:05:47,440
You could also answer here some arguments, which is a way to give arguments special arguments to the

65
00:05:47,440 --> 00:05:52,630
application, which the application can use both that this is not the case.

66
00:05:52,630 --> 00:05:53,650
We don't need them here.

67
00:05:54,010 --> 00:05:58,360
That is a special scenario, so an empty list means no arguments.

68
00:05:59,290 --> 00:06:03,400
And then we initialize queue widget as well.

69
00:06:05,410 --> 00:06:13,600
And then you can access that variable and set a window title using vets methods.

70
00:06:15,710 --> 00:06:23,000
So let's say a sentence maker that's will be the title of the window, just as you see my pie charm

71
00:06:23,000 --> 00:06:24,410
has this title here.

72
00:06:24,770 --> 00:06:26,870
So that's the window of pie charm.

73
00:06:27,230 --> 00:06:29,390
Pie charm is the application.

74
00:06:29,390 --> 00:06:35,060
So to say the widgets is the window and the title, is this one in here?

75
00:06:35,980 --> 00:06:37,280
Now let's see.

76
00:06:38,420 --> 00:06:43,970
How this will look so far without adding any further elements.

77
00:06:45,620 --> 00:06:47,100
To be able to see this.

78
00:06:48,020 --> 00:06:54,650
We want to specifically see we know that show we use, we need to use the show methods, otherwise we

79
00:06:54,650 --> 00:07:02,580
will not see anything, then we need to start the application using app exec.

80
00:07:02,960 --> 00:07:04,100
So that's up.

81
00:07:05,040 --> 00:07:06,120
Is this one in here?

82
00:07:07,110 --> 00:07:07,400
Yep.

83
00:07:07,590 --> 00:07:10,530
Right click and run this program.

84
00:07:13,250 --> 00:07:13,790
And that's it.

85
00:07:14,580 --> 00:07:21,520
Sentence Maker is the title of the app, and you see this default button sphere, which can close and

86
00:07:21,530 --> 00:07:26,780
minimize and maximize this window depending on your operating system.

87
00:07:26,810 --> 00:07:31,670
This window can look different from mine, so keep that in mind.

88
00:07:32,370 --> 00:07:36,410
And yeah, let's start adding elements now widgets.

89
00:07:36,890 --> 00:07:44,930
So all the buttons, the text boxes, the labels are called widgets, and we add those widgets.

90
00:07:45,380 --> 00:07:49,340
Actually, we add them on a layered object.

91
00:07:49,790 --> 00:07:56,390
So I'm going to make some space here, and the layout object can be created by this here.

92
00:07:56,900 --> 00:08:02,600
So I'm going to create a variable lay out, which is equal to cuvee box layout.

93
00:08:03,050 --> 00:08:04,340
So we essentially advance.

94
00:08:05,360 --> 00:08:13,730
And the way this works now is that if you now create a new widget, for example, a text box, let's

95
00:08:13,730 --> 00:08:18,380
say texes is equal to you, uh, line edit.

96
00:08:18,980 --> 00:08:21,470
That's class instantiate.

97
00:08:21,470 --> 00:08:28,970
That's and then you see layout that add widgets and you add that text to widgets.

98
00:08:29,360 --> 00:08:37,370
That variable, which represents input textbooks, books and you add it to the layout.

99
00:08:37,730 --> 00:08:47,360
And then if you execute this, we're not going to see anything because the layouts object is loose.

100
00:08:47,630 --> 00:08:55,820
It's not connected to the window objects yet, so you need to connect the layout of the window object.

101
00:08:56,150 --> 00:08:57,110
Let's do it in here.

102
00:08:57,560 --> 00:09:01,670
Window set layout.

103
00:09:03,220 --> 00:09:11,320
Layered these valuable girls, you know, if I execute this again, we're going to see a different view

104
00:09:11,410 --> 00:09:11,860
soon.

105
00:09:12,220 --> 00:09:15,730
That's the textbooks we created with queue line edits.

106
00:09:17,180 --> 00:09:24,530
And so the idea of the layout is that we use a cuvee layout, which means a V stands for a vertical.

107
00:09:25,160 --> 00:09:30,170
And that means if it adds another input box there.

108
00:09:30,980 --> 00:09:35,150
And I run this, you're going to see that's the input to the next.

109
00:09:35,660 --> 00:09:41,870
The second input box is added under the first one because this is a vertical layout, so the widgets

110
00:09:41,870 --> 00:09:43,130
are added vertically.

111
00:09:43,910 --> 00:09:55,430
If you want, you could use a key h box layout here and then use it here as well and then run.

112
00:09:56,860 --> 00:10:01,540
And you're going to see that the widgets are stacked horizontally this time.

113
00:10:02,640 --> 00:10:09,300
For our application, we want to add widgets to vertically, so I'm going to undo the changes and keep

114
00:10:09,780 --> 00:10:14,520
cuvee box layouts, cuvee box layout, so run again to see.

115
00:10:15,090 --> 00:10:16,770
Yeah, that's it.

116
00:10:17,370 --> 00:10:28,500
No, let me delete that queue line and its widget and add here the next widget, which is going to be

117
00:10:28,500 --> 00:10:29,190
a bottom.

118
00:10:31,160 --> 00:10:35,570
So let's say the beta and variable is equal to Q button.

119
00:10:38,920 --> 00:10:43,570
Give it a name, so the labor that will show on top of the button.

120
00:10:48,490 --> 00:10:55,780
And then use them to add widgets, Beatty and we add the red button to the layout widgets and then we

121
00:10:55,780 --> 00:11:04,060
add the layout to the window and to run it to see, yeah, it's working well, but it doesn't do anything.

122
00:11:04,660 --> 00:11:08,050
So let's connect that button to some action.

123
00:11:08,800 --> 00:11:14,950
And here I would like to stop and explain you how Pi Q works.

124
00:11:15,910 --> 00:11:21,850
Supply cutesy is made of widgets, signals and slots.

125
00:11:22,810 --> 00:11:24,460
Let me explain what that means.

126
00:11:26,160 --> 00:11:36,420
So we have a button widget and then we have this collect signal and then we have this method and then

127
00:11:36,420 --> 00:11:37,830
we have a slot here.

128
00:11:39,030 --> 00:11:40,140
Makes sense since.

129
00:11:41,040 --> 00:11:44,700
So there's a widget that's of the signal of the widget.

130
00:11:44,880 --> 00:11:53,520
So widgets have signals which could be clicked or checked, etc. So if it's a button, then it's might

131
00:11:53,520 --> 00:12:00,360
have a click to signal, which means when the button is clicked, this slot will be triggered.

132
00:12:00,420 --> 00:12:01,320
What is the slot?

133
00:12:01,920 --> 00:12:05,250
A slot is a function that we need to create.

134
00:12:05,280 --> 00:12:14,580
Now you can create these functions just under the input statements, so define make a sentence.

135
00:12:15,600 --> 00:12:22,440
You can name this whatever like, of course, but it has to reflect that name van here wants you want

136
00:12:22,440 --> 00:12:29,670
this function to is well, these functions actually will serve as procedures.

137
00:12:30,180 --> 00:12:32,220
They will not return anything.

138
00:12:32,640 --> 00:12:34,860
Their role is to just.

139
00:12:36,470 --> 00:12:46,730
Modify the widgets of the app, for example, in this case, what we want to have here is we want to

140
00:12:46,730 --> 00:12:50,570
extract the input text of the user.

141
00:12:50,570 --> 00:12:56,570
The text that the user enters in the input box, which is equal to text text is this.

142
00:12:57,900 --> 00:13:05,940
Variable, so which contains the Q line and its widget, and then we access the text method of that

143
00:13:05,940 --> 00:13:11,520
widget, that widget has a text method, so we get that and we saw it and input text.

144
00:13:12,210 --> 00:13:16,590
And then what we can do with this input text now could be different things.

145
00:13:16,590 --> 00:13:21,420
We could write it in a label widget.

146
00:13:22,320 --> 00:13:23,970
So let's create a label widget.

147
00:13:24,540 --> 00:13:25,710
We have the button here.

148
00:13:26,010 --> 00:13:32,820
We connect the button to the slot and then on down here we have outputs.

149
00:13:35,340 --> 00:13:40,530
Label widgets, which is legal to Q Label, which we import in here.

150
00:13:41,540 --> 00:13:48,200
This needs to have an empty string as inputs, if you wanted to show something else, you could do,

151
00:13:48,220 --> 00:13:48,640
right?

152
00:13:48,670 --> 00:13:56,590
It's there, but we don't want to show anything initially when we display the application, the interface

153
00:13:57,160 --> 00:14:05,620
so vivid, empty and then added to the layout, not at widget output to label.

154
00:14:08,080 --> 00:14:13,420
And then we access that's ultimately Labor from this makes sense and function.

155
00:14:15,130 --> 00:14:22,500
And one from the slot here, we axis out with the label, that's widgets.

156
00:14:23,320 --> 00:14:34,630
And we set it's texts using the text methods to input text that capitalize.

157
00:14:35,440 --> 00:14:36,430
And we run.

158
00:14:40,380 --> 00:14:41,190
Hi, there.

159
00:14:41,550 --> 00:14:46,440
Make you C-H now is capitalized, so it's working.

160
00:14:48,930 --> 00:14:56,580
And of course, if you want to and a dots, you can just see, plus don't run it.

161
00:14:58,730 --> 00:14:59,300
Hi there.

162
00:14:59,670 --> 00:15:03,500
Mike, and you have a daughter at the end of the sentence.

163
00:15:04,910 --> 00:15:13,790
So that's our tiny app, which works, and I wanted to give this simple so you understand how Pi Kuty

164
00:15:14,030 --> 00:15:15,260
application works.

165
00:15:16,190 --> 00:15:25,040
So again, we have widgets, we have signals and then we have slots which don't return anything.

166
00:15:25,700 --> 00:15:34,220
Actually, they are just used to access the widgets and extract information from them, as we did in

167
00:15:34,230 --> 00:15:34,550
year.

168
00:15:35,190 --> 00:15:42,500
I've put that information to some other widgets as it is here, and you could also process things in

169
00:15:42,500 --> 00:15:45,350
these functions in these slots.

170
00:15:45,980 --> 00:15:50,830
So, for example, we did some capitalization of text in here.

171
00:15:50,840 --> 00:15:54,500
We added a dot, so you could also do that in here.

172
00:15:54,860 --> 00:15:59,150
That's capitalization storing in a variable and then provide the variable in here.

173
00:15:59,510 --> 00:16:04,850
Or you could also also have another function, which does the processing.

174
00:16:04,850 --> 00:16:09,200
And then you get that all outputs of that normal function in here.

175
00:16:10,460 --> 00:16:17,120
But the slot itself should serve the purpose of interacting with the widgets.

176
00:16:17,720 --> 00:16:22,970
So with this knowledge, and now we're ready to go ahead and create that currency converter app.

177
00:16:23,660 --> 00:16:25,010
Let's do that in the next video.

178
00:16:25,040 --> 00:16:25,390
See you!