1
00:00:02,980 --> 00:00:03,850
Hey, welcome back.

2
00:00:03,880 --> 00:00:09,280
In this video, we will start coding the app which I showed you in the previous video.

3
00:00:09,550 --> 00:00:11,110
So where do we start?

4
00:00:11,590 --> 00:00:18,270
Well, as you might remember, we have had two kinds of apps during the course.

5
00:00:18,280 --> 00:00:26,140
We had apps without a user interface, such as the PDF Generation apps, where you just run the script

6
00:00:26,140 --> 00:00:28,800
and you get the PDF output.

7
00:00:28,810 --> 00:00:32,740
And then we had apps which did have a user interface.

8
00:00:33,340 --> 00:00:43,240
For example, the desktop is the to the app web or desktop version, so that had a graphical user interface.

9
00:00:43,240 --> 00:00:50,260
So this app will also have a graphical user interface as you already saw in the previous video.

10
00:00:50,260 --> 00:00:55,000
So that's a web interface, but it's still a user interface.

11
00:00:55,930 --> 00:00:57,500
So what I'm trying to get to.

12
00:00:57,520 --> 00:01:06,030
Well, with apps which didn't have a user interface, the process, the coding process was more linear.

13
00:01:06,040 --> 00:01:10,150
So we started from the input data and here.

14
00:01:11,320 --> 00:01:16,180
And then we code it until we produce the output data.

15
00:01:16,630 --> 00:01:24,820
Now, with apps which have a user interface, what we do first is we create the user interface first.

16
00:01:24,850 --> 00:01:30,700
We code the user interface first, and then we code the rest of the app.

17
00:01:30,700 --> 00:01:38,080
So the back end, which gets the input data and it gives those input data to the user interface.

18
00:01:38,230 --> 00:01:44,430
So this is again, what we're going to use in this app.

19
00:01:44,440 --> 00:01:46,570
That's the coding process.

20
00:01:46,750 --> 00:01:50,110
So in this video we will start to code the user interface.

21
00:01:50,140 --> 00:01:59,890
Now normally we would use a program such as Figma to code a prototype first to to make a sketch of how

22
00:01:59,890 --> 00:02:01,720
the user interface looks like.

23
00:02:02,080 --> 00:02:09,699
But since I've showed you already how the app looks like, then it's not necessary to go through Figma.

24
00:02:11,009 --> 00:02:14,570
So we already have the prototype how it looks like.

25
00:02:14,580 --> 00:02:21,990
So that's a screenshot I made and you can refer to this when you code the interface in Python.

26
00:02:22,440 --> 00:02:28,830
Of course, if you like to make a prototype in Figma, feel free to do that and then come to this video

27
00:02:28,830 --> 00:02:35,430
and then start coding so you can find this image in the lecture resources so you can get it and you

28
00:02:35,430 --> 00:02:38,180
can place it here in your project directory.

29
00:02:38,190 --> 00:02:46,770
So what I've done here is I created a new Python project already and I have this virtual env virtual

30
00:02:46,770 --> 00:02:52,770
environment and I uploaded this image that you see here and then we're ready to code.

31
00:02:52,770 --> 00:02:56,490
So let's create a main that p file.

32
00:02:58,720 --> 00:03:02,950
And input stream late start.

33
00:03:03,820 --> 00:03:08,410
And I'm going to place this image to the right side.

34
00:03:13,490 --> 00:03:15,200
So that's normally what you do.

35
00:03:15,230 --> 00:03:18,410
You have the sketch here, the prototype, whatever it is.

36
00:03:18,440 --> 00:03:19,670
It could be a simple sketch.

37
00:03:19,670 --> 00:03:25,370
It could be a more real life prototype, which looks exactly like the app you want to build.

38
00:03:25,400 --> 00:03:26,160
It doesn't matter.

39
00:03:26,180 --> 00:03:28,940
So it's good to have it on the side.

40
00:03:29,660 --> 00:03:32,150
And so let's install it.

41
00:03:33,170 --> 00:03:41,000
And first, we want to code the initial state of the app, which is without this plot.

42
00:03:42,080 --> 00:03:51,890
So that means we have this title, this text box here, this slider and this dropdown list, also known

43
00:03:51,890 --> 00:03:53,460
as a select box.

44
00:03:53,480 --> 00:03:55,410
And then we also have this label here.

45
00:03:55,430 --> 00:04:02,240
So let's code those with SD DOT title.

46
00:04:02,390 --> 00:04:09,050
We create the weather forecast for the next days.

47
00:04:09,440 --> 00:04:19,640
So that's going to be the title and, and the place is going to be SD dot text input plates and the

48
00:04:19,640 --> 00:04:20,140
column.

49
00:04:20,660 --> 00:04:23,780
So why did I place a variable in here?

50
00:04:23,780 --> 00:04:25,790
But I didn't use a variable in here.

51
00:04:25,820 --> 00:04:33,350
Well, that's because this is a text input box which corresponds with this here with this widget, and

52
00:04:33,350 --> 00:04:34,010
that's a title.

53
00:04:34,010 --> 00:04:40,550
The title is just a static element, so you don't need to get its value in a variable because you're

54
00:04:40,550 --> 00:04:44,450
not going to use the title in the script.

55
00:04:44,630 --> 00:04:51,640
But the value that the user will enter in this text box is going to be used further down in the script.

56
00:04:51,650 --> 00:04:56,120
So we need to capture that value in a variable and that variable is place.

57
00:04:56,900 --> 00:05:05,210
So interactive widgets should have variables normally the days, so the user is going to provide the

58
00:05:05,210 --> 00:05:14,180
place the days through a slider, which is going to have the title for cast days.

59
00:05:14,360 --> 00:05:16,280
So that's the title here.

60
00:05:16,490 --> 00:05:26,200
The slider is going to have a minimum value of one and the maximum value of 5y1 and five.

61
00:05:26,210 --> 00:05:34,760
Well, because we're going to get forecast data from a weather API, and that's why the weather API

62
00:05:34,790 --> 00:05:37,990
gives us data for the next five days.

63
00:05:38,000 --> 00:05:46,340
So if the date today is 24 October, we're going to have data until the 25th of October.

64
00:05:46,460 --> 00:05:49,770
So that's the part of the backend how to get the data.

65
00:05:49,790 --> 00:05:51,800
For now, let's focus on the front end.

66
00:05:52,130 --> 00:05:55,610
Let's also provide a help icon.

67
00:05:56,240 --> 00:05:57,940
Perhaps you can see this here.

68
00:05:57,950 --> 00:06:04,760
So when the user hovers the mouse of on top of this icon, they can see more information about this

69
00:06:04,760 --> 00:06:06,140
particular widget.

70
00:06:06,150 --> 00:06:08,390
So you can use help if you like.

71
00:06:08,810 --> 00:06:20,570
You can provide a description of this widget, select the number of days or forecasted days.

72
00:06:23,040 --> 00:06:26,940
So we're telling the user what they can do here with this slider.

73
00:06:28,890 --> 00:06:31,740
And we also have the option.

74
00:06:32,130 --> 00:06:35,550
So what do they want to choose?

75
00:06:35,550 --> 00:06:40,860
Temperature or the sky conditions?

76
00:06:43,900 --> 00:06:54,070
So that will be the label of this select box widget and then the options will, which should come as

77
00:06:54,070 --> 00:06:55,330
a tipple.

78
00:06:56,770 --> 00:07:00,490
So temperature, which is currently selected in this.

79
00:07:01,230 --> 00:07:02,940
Screenshots here.

80
00:07:03,420 --> 00:07:05,610
And we also have.

81
00:07:06,830 --> 00:07:07,730
Sky.

82
00:07:09,470 --> 00:07:13,310
So these come as strings, both of them.

83
00:07:15,770 --> 00:07:16,160
Right.

84
00:07:16,160 --> 00:07:19,160
I'll play this here because it got too long.

85
00:07:21,230 --> 00:07:25,460
And lastly, we have this sub header here.

86
00:07:25,790 --> 00:07:29,240
So that's a title with big font and that's a sub header.

87
00:07:29,240 --> 00:07:31,550
So that sub header.

88
00:07:33,120 --> 00:07:38,010
Now, this is going to be dynamic, actually, so when the user enters.

89
00:07:39,140 --> 00:07:44,060
A place here that plays is going to be injected into this title.

90
00:07:45,150 --> 00:07:48,110
Same goes for forecast days.

91
00:07:48,680 --> 00:07:54,110
So the number here too, currently is going to also be injected into the string.

92
00:07:54,110 --> 00:07:58,910
And same goes for the choice, the option temperature or sky.

93
00:08:00,110 --> 00:08:03,350
And that means this is going to be an F string.

94
00:08:04,160 --> 00:08:07,910
So the first is either temperature or sky.

95
00:08:07,940 --> 00:08:11,290
So that's the option variable, right?

96
00:08:11,300 --> 00:08:13,070
Whatever the user selects here.

97
00:08:13,910 --> 00:08:22,790
So temperature space for the next here we have the slider.

98
00:08:24,220 --> 00:08:26,350
So that's days.

99
00:08:27,430 --> 00:08:30,130
That's a variable that represents the slider.

100
00:08:30,670 --> 00:08:32,730
And then we have the string days.

101
00:08:32,740 --> 00:08:42,760
So the variable days, the string days to different things in place inside a placeholder.

102
00:08:44,530 --> 00:08:44,910
Yep.

103
00:08:45,070 --> 00:08:46,750
Let's give this a try now.

104
00:08:48,160 --> 00:08:51,640
So go to the terminal and do streamline it.

105
00:08:51,670 --> 00:08:54,280
Make sure that you are in a virtual environment.

106
00:08:54,310 --> 00:08:57,840
Otherwise, you may need to close this and start it again.

107
00:08:57,850 --> 00:09:00,160
Make sure this is then here.

108
00:09:00,280 --> 00:09:02,890
So, string, let's run.

109
00:09:03,010 --> 00:09:04,660
Main dot Pi.

110
00:09:05,330 --> 00:09:06,820
That's the name of my file.

111
00:09:10,350 --> 00:09:12,090
And to the browser will open.

112
00:09:12,090 --> 00:09:14,220
And that's what we've got so far.

113
00:09:16,490 --> 00:09:24,310
So we have the title, the text input box, the slider and the select box and this label here.

114
00:09:24,320 --> 00:09:25,550
So let's try.

115
00:09:27,590 --> 00:09:39,320
Something, a place such as for a presenter and this was updated so far was added to that sub header.

116
00:09:39,800 --> 00:09:47,150
And if we change the slider this is updated to, to change it to three, it's updated to three and so

117
00:09:47,150 --> 00:09:47,570
on.

118
00:09:48,110 --> 00:09:50,320
Let's try the select box.

119
00:09:50,550 --> 00:09:51,380
Troy Sky.

120
00:09:51,410 --> 00:09:57,440
So Sky is also updated so everything is working dynamically and that's also the helper.

121
00:09:58,720 --> 00:10:03,850
So when you play the cursor there, it shows this popup about this slider.

122
00:10:04,930 --> 00:10:07,540
So it's working great.

123
00:10:07,690 --> 00:10:12,070
And that was the first step towards building the graphical user interface.

124
00:10:12,370 --> 00:10:21,850
Now in the next video I will introduce you to how to plot graphs on a streamlined web app for this video.

125
00:10:21,880 --> 00:10:22,780
That was it.

126
00:10:22,780 --> 00:10:24,850
So let's commit the changes.

127
00:10:25,210 --> 00:10:31,180
I'm going to enable version control with Git and then go to.

128
00:10:32,100 --> 00:10:33,780
This button commit.

129
00:10:34,380 --> 00:10:38,700
So that is the 32 at.

130
00:10:39,270 --> 00:10:40,110
Widgets.

131
00:10:40,290 --> 00:10:43,410
That's what we did basically so present commit.

132
00:10:43,710 --> 00:10:45,810
You need to select what files you want to commit.

133
00:10:45,810 --> 00:10:48,240
So go to this folder.

134
00:10:49,380 --> 00:10:52,440
You want to add to main that pie?

135
00:10:53,210 --> 00:10:56,330
To the repository at.

136
00:10:57,320 --> 00:10:59,750
And let's create a dot get in file.

137
00:11:04,040 --> 00:11:08,120
Add that to the repository as well and that idea.

138
00:11:08,120 --> 00:11:12,110
And then so these folders will be ignored.

139
00:11:12,530 --> 00:11:23,090
Also the app design that's P and G file, but rename this file, it's better to rename it to not contain

140
00:11:23,090 --> 00:11:23,900
spaces.

141
00:11:23,900 --> 00:11:33,170
So like that app design that PNG and then provide that name in here app underscore design that PNG.

142
00:11:34,070 --> 00:11:36,170
Then we're ready to commit.

143
00:11:37,580 --> 00:11:42,740
So we're committing to get ignore and make that p y with that commit message and press and commit.

144
00:11:44,150 --> 00:11:44,780
With that.

145
00:11:44,780 --> 00:11:47,540
I'll see you in the next video with some more code.

146
00:11:47,570 --> 00:11:48,170
Thanks.