1
00:00:00,480 --> 00:00:05,220
In yesterday's bonus example, we built a zip creator program.

2
00:00:05,250 --> 00:00:06,930
Today we're going to do the opposite.

3
00:00:06,930 --> 00:00:10,410
We're going to create a program which extracts.

4
00:00:12,160 --> 00:00:15,400
A zip file to a destination directory.

5
00:00:17,260 --> 00:00:23,860
So this will be a new program and therefore, I want to take advantage of this opportunity to explain

6
00:00:23,930 --> 00:00:28,300
once again the steps of building any program.

7
00:00:31,210 --> 00:00:36,430
And so we're going to go through these four steps in this video.

8
00:00:39,470 --> 00:00:44,540
So if your ideas were scattered before, you didn't know where to start.

9
00:00:44,540 --> 00:00:46,610
This video will make sure that.

10
00:00:47,930 --> 00:00:52,820
You have a clear understanding of where to start a program and how to finish it.

11
00:00:53,690 --> 00:00:57,800
So let's start with the first point designing the front end.

12
00:00:57,830 --> 00:01:00,850
Now, this can mean different things.

13
00:01:00,860 --> 00:01:07,880
If it's a simple program, you can just use a piece of paper where you make a drawing how your app front

14
00:01:07,880 --> 00:01:09,470
end will look like.

15
00:01:10,560 --> 00:01:16,600
If it's a more complex program, you can use software such as Figma, which will cover later on.

16
00:01:16,650 --> 00:01:24,600
So Figma is a software which allows you to create designs for your apps before you build your apps.

17
00:01:26,580 --> 00:01:35,280
Usually you create a design for graphical user interfaces, which could be desktop apps as the one we're

18
00:01:35,280 --> 00:01:36,180
building.

19
00:01:36,990 --> 00:01:38,490
All web apps also.

20
00:01:38,790 --> 00:01:41,910
Later on, we're going to build web apps in the course.

21
00:01:43,050 --> 00:01:47,340
So usually you don't do this if it's just a command line interface.

22
00:01:49,230 --> 00:01:52,560
That's because graphical user interfaces are more involved.

23
00:01:52,560 --> 00:02:01,110
So it's good to have some drawing beforehand before we go ahead and build the actual interface with

24
00:02:01,110 --> 00:02:01,800
Python.

25
00:02:04,740 --> 00:02:07,980
So in our case, the program would look.

26
00:02:09,490 --> 00:02:10,900
Something like this.

27
00:02:14,800 --> 00:02:22,990
Here we have the default buttons of any window to close, minimize and maximize the window.

28
00:02:24,060 --> 00:02:29,040
So these are created by default, by by simple QE.

29
00:02:29,190 --> 00:02:32,730
And then in this area here, we have the title of the window.

30
00:02:39,780 --> 00:02:41,790
Such as archive extractor.

31
00:02:44,560 --> 00:02:48,790
Then we're going to have a label select archive.

32
00:02:52,180 --> 00:02:53,440
The input box.

33
00:02:56,210 --> 00:02:57,380
And the button.

34
00:02:58,210 --> 00:02:59,140
Choose.

35
00:03:00,730 --> 00:03:02,590
Another label select.

36
00:03:04,680 --> 00:03:06,420
Destination directory.

37
00:03:07,050 --> 00:03:12,600
Another input box and the button choose.

38
00:03:13,560 --> 00:03:22,470
So what we have here is the input box where the path of the archive of the zip file is going to be placed.

39
00:03:22,470 --> 00:03:29,850
So we choose the file using that button and the path of that file will be rendered here as text in this

40
00:03:29,850 --> 00:03:30,490
input box.

41
00:03:30,510 --> 00:03:36,750
That's a common practice when you pick files using a file picker.

42
00:03:36,750 --> 00:03:37,440
Such as.

43
00:03:39,430 --> 00:03:42,400
This button here, the same we have here.

44
00:03:42,400 --> 00:03:45,700
But in this case, this will be a directory.

45
00:03:45,850 --> 00:03:50,760
This will be the directory where the files of the zip file will be extracted.

46
00:03:50,770 --> 00:03:53,530
So again, we have an input text.

47
00:03:54,830 --> 00:03:57,530
And a folder browse button.

48
00:03:57,530 --> 00:04:00,560
So that is a file browse button.

49
00:04:00,560 --> 00:04:01,700
And that is a folder.

50
00:04:01,700 --> 00:04:02,630
Browse button.

51
00:04:05,300 --> 00:04:11,870
And finally, we need to give the user an extract button down here as well.

52
00:04:15,340 --> 00:04:16,000
And that's it.

53
00:04:16,000 --> 00:04:17,350
So that's the front end.

54
00:04:19,940 --> 00:04:24,470
So the next step then, is to code the front end.

55
00:04:25,160 --> 00:04:31,640
So you might want to keep the design open somewhere while you do the coding part.

56
00:04:33,200 --> 00:04:39,560
So I'll just keep it here and then create a new bonus.

57
00:04:39,560 --> 00:04:41,690
$18 p file.

58
00:04:42,470 --> 00:04:43,820
So that's the file.

59
00:04:44,750 --> 00:04:50,240
It's in my bonus folder and I'm going to import P was simple.

60
00:04:50,450 --> 00:04:52,990
So I'm going to be quick with this app.

61
00:04:53,000 --> 00:04:59,990
I'm not going to type in all the code because we already did most of these codes in the previous app

62
00:04:59,990 --> 00:05:04,220
yesterday in bonus examples where we build the zip, create a program.

63
00:05:08,660 --> 00:05:10,780
So you know what this code does.

64
00:05:10,790 --> 00:05:20,000
So we set the theme of the program as black, so as is possible with the module, and then I'm going

65
00:05:20,000 --> 00:05:22,400
to create the widgets in here.

66
00:05:24,530 --> 00:05:25,390
So there we go.

67
00:05:25,400 --> 00:05:31,580
We have a label, the first label Select Archive, which is going to create this label here.

68
00:05:34,470 --> 00:05:38,790
And the next to select archive, we're going to have the input box.

69
00:05:39,810 --> 00:05:46,890
So that creates the input box and then the choose button, the first button which is a file browse.

70
00:05:47,790 --> 00:05:50,040
Yesterday we had.

71
00:05:52,500 --> 00:05:54,120
I files browse.

72
00:05:54,120 --> 00:05:56,980
You see, it's plural files.

73
00:05:57,000 --> 00:05:59,100
Today we have file.

74
00:05:59,220 --> 00:06:03,210
That is because today we only want to select.

75
00:06:04,320 --> 00:06:09,030
We only want to let the user select one zip file only.

76
00:06:09,090 --> 00:06:17,040
Yesterday we wanted the user to select multiple files if they wanted, so all those files would be put

77
00:06:17,040 --> 00:06:17,790
in a zip file.

78
00:06:17,790 --> 00:06:22,530
But now we want to let the user just select one file, not more.

79
00:06:22,560 --> 00:06:24,930
In that case, we use file instead of files.

80
00:06:25,470 --> 00:06:26,010
Right.

81
00:06:26,760 --> 00:06:30,270
So those were the widgets of the first row.

82
00:06:30,510 --> 00:06:34,290
And then we're going to have the widgets for the second row.

83
00:06:35,520 --> 00:06:37,800
So I'm going to place them in here.

84
00:06:38,750 --> 00:06:45,020
We have the label, select this directory, this one here, and then we have the input box.

85
00:06:45,260 --> 00:06:51,080
And then next to that we have the Choose button, which is going to be a folder Browse.

86
00:06:51,970 --> 00:06:53,320
For instance.

87
00:06:53,320 --> 00:07:01,150
So with that name choose and we have the key for that button and we have the key for that other button

88
00:07:01,150 --> 00:07:01,560
as well.

89
00:07:01,570 --> 00:07:03,640
Archive for this folder for this.

90
00:07:03,640 --> 00:07:08,110
So later on we can refer to this to get the actual paths of the files.

91
00:07:11,640 --> 00:07:14,300
And lastly, we're going to have the last row.

92
00:07:15,840 --> 00:07:19,140
So that is a strong button, this one in here.

93
00:07:19,140 --> 00:07:27,840
And next to the button we're going to display the text extraction was successful.

94
00:07:30,760 --> 00:07:31,930
So that means.

95
00:07:33,320 --> 00:07:37,340
There will be a second stage of the interface.

96
00:07:37,370 --> 00:07:38,840
Where are we going to show here?

97
00:07:38,840 --> 00:07:39,830
Obstruction.

98
00:07:43,710 --> 00:07:45,660
Completed or something like that.

99
00:07:49,470 --> 00:07:55,270
So for that we have a text widget which doesn't have a label, so it's an empty string.

100
00:07:55,290 --> 00:08:03,590
It does have a key and it does have a color for the text, but currently by default it is an empty field

101
00:08:03,600 --> 00:08:07,560
as you see in this first interface here in the first design.

102
00:08:09,730 --> 00:08:17,140
And once we have created the widgets and we store those widgets in variables so we can create the window

103
00:08:17,140 --> 00:08:19,870
instance with that window.

104
00:08:21,090 --> 00:08:24,990
That's the title of the window, which corresponds to that.

105
00:08:25,560 --> 00:08:30,200
And then we have the layout argument, which is a list of lists.

106
00:08:30,210 --> 00:08:37,929
So the list has lists inside, and each inside list represents a row.

107
00:08:37,950 --> 00:08:44,039
So we have the label, the input one, choose button one, which will create that first row and then

108
00:08:44,039 --> 00:08:50,730
the second row of the interface and then the last row where the extra button is and the output label,

109
00:08:51,330 --> 00:08:53,760
which by default is empty.

110
00:08:57,610 --> 00:09:00,880
So we are about to complete step number two.

111
00:09:00,910 --> 00:09:09,310
All we have to do is just read the window and then apply window dot close and then run the program and

112
00:09:09,310 --> 00:09:11,230
see how it will work out.

113
00:09:20,250 --> 00:09:21,380
So that's an interface.

114
00:09:21,390 --> 00:09:24,750
It looks similar to the one we designed.

115
00:09:26,520 --> 00:09:29,370
So that's complete code in the front end.

116
00:09:29,370 --> 00:09:33,300
So design the front end and code the front end are completed.

117
00:09:34,500 --> 00:09:36,600
Now we work on the back end.

118
00:09:38,210 --> 00:09:40,400
So step number three.

119
00:09:42,550 --> 00:09:43,540
For the back end.

120
00:09:43,540 --> 00:09:47,800
As I have explained to you before, it's good to create a separate file.

121
00:09:47,800 --> 00:09:53,290
So under bonus where Bonus 18 is in the same directory I want to create.

122
00:09:55,670 --> 00:09:56,450
A zip.

123
00:09:59,110 --> 00:10:01,120
Extracted that P file.

124
00:10:03,190 --> 00:10:07,330
We're going to use the zip file standard module.

125
00:10:09,010 --> 00:10:16,300
So you don't need to install that module and we need a function extract archive.

126
00:10:17,410 --> 00:10:26,320
So in our program we get as input the archive path and also we get us input the.

127
00:10:27,600 --> 00:10:33,210
Path of destination directory where the files will be extracted.

128
00:10:34,380 --> 00:10:39,420
So that means the function also will need to parameters.

129
00:10:40,840 --> 00:10:43,270
File path or archive path.

130
00:10:43,810 --> 00:10:45,370
Let's say archive path.

131
00:10:48,920 --> 00:10:50,690
And destination directory.

132
00:10:56,090 --> 00:10:59,600
So the next question is, what do we do with these?

133
00:11:01,990 --> 00:11:06,640
Well, we're going to get that file and we're going to extract it in that directory.

134
00:11:06,700 --> 00:11:13,150
So for that, we need to use with zip file that zip file.

135
00:11:14,820 --> 00:11:15,900
Archive path.

136
00:11:15,900 --> 00:11:22,380
So here goes the archive file and then the second argument of the zip file.

137
00:11:25,030 --> 00:11:28,900
It's read before we use roids.

138
00:11:28,900 --> 00:11:34,120
When we want to create a zip file, we use the right arguments.

139
00:11:34,120 --> 00:11:40,350
But when you want to see the contents of the zip file, then you want to read that zip file.

140
00:11:40,360 --> 00:11:42,760
Therefore, we use reads for that.

141
00:11:45,450 --> 00:11:48,750
So that would be as archive.

142
00:11:48,750 --> 00:11:56,100
Perhaps this is just a variable name, so don't confuse archive with archive path that those are two

143
00:11:56,460 --> 00:11:59,100
different names, different variables.

144
00:11:59,370 --> 00:12:05,400
The first one represents the path and the second one represents the actual file object.

145
00:12:06,850 --> 00:12:10,420
A file entity, not a file path.

146
00:12:11,130 --> 00:12:13,920
A file has a path, but they are not the same.

147
00:12:15,720 --> 00:12:21,720
And then we point to that file to that zip file, and then we point to extract all.

148
00:12:23,640 --> 00:12:26,460
We extract everything in the destination directory.

149
00:12:26,850 --> 00:12:27,450
That's it.

150
00:12:31,270 --> 00:12:38,440
So now we are almost done with the back end with a third step here.

151
00:12:39,010 --> 00:12:45,640
But we also need to test this function before we go to the next step, finishing up, which is going

152
00:12:45,640 --> 00:12:48,110
to be connecting the front end to the back end.

153
00:12:48,130 --> 00:12:54,190
So first, let's make sure that this backend works for that we need to use if.

154
00:12:55,720 --> 00:12:59,920
Name is equal to main.

155
00:12:59,920 --> 00:13:01,990
So double underscore.

156
00:13:01,990 --> 00:13:05,080
Double underscore, double underscore, double underscore.

157
00:13:08,020 --> 00:13:12,100
So this, as I explained before, this allows us to.

158
00:13:13,690 --> 00:13:23,680
Run the script as the main script like this and get that output so this function will not be called.

159
00:13:25,280 --> 00:13:30,590
When the file is imported as a script, as a module in the other main file.

160
00:13:30,590 --> 00:13:31,540
Bonus 18.

161
00:13:33,440 --> 00:13:36,560
So this is only executed when we run the script now.

162
00:13:36,730 --> 00:13:37,370
Okay.

163
00:13:37,760 --> 00:13:38,880
Excellent archive.

164
00:13:38,900 --> 00:13:40,640
Let's give some.

165
00:13:44,320 --> 00:13:45,550
Directory.

166
00:13:45,790 --> 00:13:47,290
So in my.

167
00:13:49,080 --> 00:13:54,280
Bonus directory where this zip extracted file is.

168
00:13:54,300 --> 00:13:56,340
I have this compressed zip.

169
00:13:57,210 --> 00:13:57,840
File.

170
00:13:57,840 --> 00:14:02,640
So please download the compressed zip file from the lecture resources.

171
00:14:04,280 --> 00:14:10,250
And put it in the same directory with your zip extractor and your bonus.

172
00:14:10,250 --> 00:14:10,910
18.

173
00:14:12,110 --> 00:14:12,920
Files.

174
00:14:15,490 --> 00:14:19,780
But if you want, you can use your own zip files if you have something.

175
00:14:22,020 --> 00:14:30,060
So in my case it will be compressed with double s dot zip.

176
00:14:30,060 --> 00:14:33,270
So that has to reflect the actual file name.

177
00:14:33,300 --> 00:14:34,110
Exactly.

178
00:14:35,580 --> 00:14:37,410
And the destination directory

179
00:14:39,990 --> 00:14:42,550
is going to be an existing directory.

180
00:14:42,570 --> 00:14:48,420
For example, I have this file directory which is inside bonus, but this can be any directory.

181
00:14:50,390 --> 00:14:52,910
However, it's important that you give.

182
00:14:53,810 --> 00:14:57,140
The actual absolute path of that directory.

183
00:14:57,290 --> 00:15:06,350
So in my case, I want to go to right click and copy path reference and I want to copy the absolute

184
00:15:06,350 --> 00:15:13,520
path and then I want to provide tier that absolute path which I copied.

185
00:15:14,270 --> 00:15:16,580
So that's absolute path.

186
00:15:19,410 --> 00:15:27,360
And it's a good idea to actually use absolute faith for compressed zip as well, because these paths

187
00:15:27,360 --> 00:15:30,990
are also going to be absolute paths in the gooey interface.

188
00:15:30,990 --> 00:15:37,440
So for compress as well, I can right click copy path, reference, absolute path, and then replace

189
00:15:38,700 --> 00:15:40,860
that with the absolute path.

190
00:15:41,340 --> 00:15:45,060
And I'll split here because the line is too long.

191
00:15:46,470 --> 00:15:54,990
So I'm calling the function and I expect that to the files will be extracted in this file directory.

192
00:15:54,990 --> 00:15:56,490
So let me run.

193
00:15:56,510 --> 00:15:57,600
Zip extractor.

194
00:15:58,920 --> 00:15:59,250
Yeah.

195
00:15:59,250 --> 00:15:59,850
There we go.

196
00:15:59,880 --> 00:16:01,520
A the text.

197
00:16:01,530 --> 00:16:03,540
Be the text and see the text.

198
00:16:03,570 --> 00:16:07,080
These were the files that were inside that compressed.

199
00:16:08,000 --> 00:16:09,430
That zip archive.

200
00:16:09,440 --> 00:16:12,860
So these are just empty files, but it's working.

201
00:16:13,100 --> 00:16:17,420
And that completes step three.

202
00:16:18,870 --> 00:16:22,290
And we move on to step number four, finishing up.

203
00:16:22,320 --> 00:16:23,170
What does this mean?

204
00:16:23,190 --> 00:16:28,530
Well, this means connecting everything together and completing the program.

205
00:16:28,800 --> 00:16:33,300
So it means connecting the front end to the back end, because currently the front ends.

206
00:16:38,870 --> 00:16:42,440
Is just a static program which doesn't do anything.

207
00:16:43,880 --> 00:16:45,440
Therefore, we want to.

208
00:16:47,160 --> 00:16:51,110
Bring it to life using a while.

209
00:16:51,120 --> 00:16:52,950
True loop.

210
00:16:53,970 --> 00:16:54,750
So.

211
00:16:55,840 --> 00:17:06,280
We store events and values in windows that read window that close to its outside lets print event and

212
00:17:06,280 --> 00:17:08,950
values to see what we actually get.

213
00:17:11,720 --> 00:17:17,210
So Ron Bones, 18, choose the archive.

214
00:17:20,069 --> 00:17:22,109
So that should be the presidency file.

215
00:17:22,119 --> 00:17:27,420
It can be anywhere in your computer and the directory also can be anywhere.

216
00:17:29,820 --> 00:17:32,010
So I'll just choose this directory.

217
00:17:32,760 --> 00:17:43,110
And if I press an extract now, I'm going to see that I've got extract as a value of event.

218
00:17:43,110 --> 00:17:44,790
And then this dictionary.

219
00:17:45,950 --> 00:17:50,390
So the dictionary has this archive key with its value.

220
00:17:50,420 --> 00:17:58,010
The value is this one in here, so that the value is a string, one single string, and it represents

221
00:17:58,010 --> 00:18:00,860
the path of the zip file, the absolute path.

222
00:18:05,790 --> 00:18:09,810
And we also have the folder key and its value.

223
00:18:11,860 --> 00:18:15,250
And its value is the absolute path of the destination directory.

224
00:18:17,840 --> 00:18:23,510
So in other words, archive path is stored in values.

225
00:18:25,380 --> 00:18:26,730
What was the key again?

226
00:18:26,760 --> 00:18:28,240
It was archive.

227
00:18:28,260 --> 00:18:28,890
Yes.

228
00:18:30,120 --> 00:18:32,250
Which corresponds to that.

229
00:18:33,900 --> 00:18:41,070
And so that is the archive path and the destination directory path is values.

230
00:18:42,210 --> 00:18:44,070
Was it folder?

231
00:18:44,280 --> 00:18:44,880
Yes.

232
00:18:44,880 --> 00:18:45,660
Folder.

233
00:18:48,330 --> 00:18:57,930
So now we are storing that string in here and that string in here.

234
00:19:00,050 --> 00:19:01,610
That's allows us to.

235
00:19:04,250 --> 00:19:12,290
Call the extract archive function, which underlines in red because we need to import it from.

236
00:19:13,420 --> 00:19:17,330
Zip extractor imports.

237
00:19:18,880 --> 00:19:19,720
Extract.

238
00:19:20,170 --> 00:19:20,950
Archive.

239
00:19:21,940 --> 00:19:29,440
And then we use the function and we pass archive path as the first argument and test directory as a

240
00:19:29,450 --> 00:19:30,400
second argument.

241
00:19:30,400 --> 00:19:34,840
So that value goes in here and that value goes in here.

242
00:19:34,840 --> 00:19:43,630
So these two strings are going to be used in here and the function will do its job.

243
00:19:47,570 --> 00:19:58,850
And then lastly, we want to point to window outputs that hidden label and updated.

244
00:20:01,150 --> 00:20:03,370
By setting its value to.

245
00:20:08,040 --> 00:20:11,910
Extraction completed and let's run.

246
00:20:13,620 --> 00:20:16,140
Select archive that will be.

247
00:20:20,650 --> 00:20:32,380
The president zip file select destination directory that is going to be this directory extract extraction

248
00:20:32,380 --> 00:20:35,590
completed so I can check.

249
00:20:36,720 --> 00:20:37,470
Dest.

250
00:20:37,470 --> 00:20:41,970
And these are the three files they were extracted in that destination directory.

251
00:20:42,540 --> 00:20:44,190
And that is a complete.

252
00:20:47,090 --> 00:20:48,860
Codes for this app.

253
00:20:50,520 --> 00:20:54,300
And that's also the steps we took.

254
00:20:56,800 --> 00:20:58,200
To create this app.

255
00:20:58,210 --> 00:21:03,480
So basically, these are the steps for any app that you want to create.

256
00:21:03,490 --> 00:21:06,150
So start with designing the front end.

257
00:21:06,190 --> 00:21:13,990
It's good to know what the user will see first because that could also define what we do in the next

258
00:21:13,990 --> 00:21:14,560
steps.

259
00:21:16,720 --> 00:21:23,740
So the user is important because you are creating the programs for the user, so you want to satisfy

260
00:21:23,740 --> 00:21:24,550
the user's needs.

261
00:21:24,850 --> 00:21:29,770
That's why it is important to have the design first and then we call the frontend and then you call

262
00:21:29,770 --> 00:21:32,410
the backend and then you connect everything up.

263
00:21:33,850 --> 00:21:35,540
So thanks a lot for following this.

264
00:21:35,560 --> 00:21:36,400
I'll see you later.