1
00:00:00,520 --> 00:00:01,090
Hi again.

2
00:00:01,120 --> 00:00:09,250
In this lecture, we are going to implement the sign up screen so that when the user enters a username

3
00:00:09,310 --> 00:00:18,520
and password and then click submit, these are going to be stored in users.json file, which I

4
00:00:18,520 --> 00:00:19,780
have it in here.

5
00:00:20,110 --> 00:00:27,340
So you can either create an empty file and call it like users.json or you can get my file

6
00:00:27,370 --> 00:00:30,490
which you can find attached in the lecture resources.

7
00:00:32,830 --> 00:00:36,040
And in this file, I already have two users.

8
00:00:36,340 --> 00:00:39,190
These are Json data. To make it look better

9
00:00:39,310 --> 00:00:49,180
you can format it using, if you're on windows use Shift Alt F, if you're on Mac, use Shift Option F,

10
00:00:49,180 --> 00:00:51,730
if you're on Linux, use Control Shift I.

11
00:00:52,870 --> 00:00:58,060
So when you do that combination, what's going to happen is you're going to have the Json code formatted

12
00:00:58,180 --> 00:00:58,720
like this.

13
00:00:59,170 --> 00:01:06,520
So the idea here is that the app is going to add some more users in here when the user presses that

14
00:01:06,520 --> 00:01:08,980
submit button in the Sign Up page.

15
00:01:09,670 --> 00:01:12,610
So this is basically like a big Python dictionary.

16
00:01:12,970 --> 00:01:15,130
It starts here and it ends here.

17
00:01:16,000 --> 00:01:24,310
And this dictionary has values like this key here and the value of that first key,

18
00:01:24,790 --> 00:01:27,100
so that's the key of the big dictionary.

19
00:01:28,360 --> 00:01:31,780
The value of this key is this dictionary.

20
00:01:32,140 --> 00:01:34,870
So it's another dictionary inside the big dictionary.

21
00:01:34,900 --> 00:01:36,010
But that's another problem.

22
00:01:36,730 --> 00:01:38,500
It can happen like in this case.

23
00:01:39,100 --> 00:01:42,470
And so this dictionary has the data.

24
00:01:42,820 --> 00:01:46,630
So the username is again "user1" like this.

25
00:01:46,880 --> 00:01:48,580
The password is "password1".

26
00:01:48,850 --> 00:01:50,620
So this is an existing user.

27
00:01:50,800 --> 00:01:52,780
I manually created this file.

28
00:01:52,810 --> 00:01:57,340
But the program will be able to also create this file and to add more users.

29
00:01:57,550 --> 00:02:02,040
And so here's where this value of this key ends.

30
00:02:02,380 --> 00:02:04,120
And then starts the other key.

31
00:02:04,150 --> 00:02:06,830
The other user, user2, the username

32
00:02:06,880 --> 00:02:09,150
you can also see here, password2.

33
00:02:09,880 --> 00:02:15,190
And this is a date that this user name was inserted in the Json file.

34
00:02:18,650 --> 00:02:20,150
Let's keep this file open

35
00:02:20,570 --> 00:02:21,120
down here.

36
00:02:22,580 --> 00:02:24,290
Squeeze the terminal space.

37
00:02:26,930 --> 00:02:36,740
And so the user presses the submit button, the submit button calls the add_user function and these two

38
00:02:36,800 --> 00:02:40,280
arguments are passed to the function call.

39
00:02:41,180 --> 00:02:45,080
So adds user, is this on in here?

40
00:02:45,410 --> 00:02:47,020
So uname, pword.

41
00:02:47,390 --> 00:02:54,020
What are we going to do with these two values that the user entered in the text boxes?

42
00:02:54,470 --> 00:02:57,980
Well, what I'll do is first of all

43
00:02:58,310 --> 00:02:58,550
I would

44
00:02:58,640 --> 00:02:59,210
open

45
00:03:01,640 --> 00:03:05,950
the users.json filed as file:

46
00:03:09,490 --> 00:03:10,780
and get the users

47
00:03:14,750 --> 00:03:19,550
loaded in a dictionary, so users = json.load.

48
00:03:19,900 --> 00:03:21,190
We need to inport Json here.

49
00:03:23,470 --> 00:03:24,730
So Json is a library.

50
00:03:25,730 --> 00:03:31,610
And now just as an intermediate step, let's print out the users to see what we've got so far.

51
00:03:34,690 --> 00:03:39,460
Sign up u1, p1, submit.

52
00:03:40,970 --> 00:03:41,510
And.

53
00:03:44,080 --> 00:03:45,460
This is what we get.

54
00:03:47,380 --> 00:03:49,240
So that's what we currently have

55
00:03:49,350 --> 00:03:50,530
in the Json file.

56
00:03:52,320 --> 00:03:54,340
And this is actually, so users

57
00:03:54,420 --> 00:03:55,870
is a Python dictionary.

58
00:03:58,580 --> 00:04:03,890
Now, what we can do to this dictionary is we can add another value.

59
00:04:04,280 --> 00:04:09,620
So another pair of key and value, which is pretty easy to do.

60
00:04:10,460 --> 00:04:16,040
So we say users, what key do we need to add?

61
00:04:16,460 --> 00:04:18,110
Well, we get that from uname.

62
00:04:20,440 --> 00:04:26,470
So we are going to add the u1 username that I entered as a user.

63
00:04:26,980 --> 00:04:29,350
So we are going to have a third username there.

64
00:04:30,250 --> 00:04:34,030
That will be its value, is going to be a dictionary.

65
00:04:34,430 --> 00:04:41,930
So just like we have for user1 this dictionary, we are going to have for u1 this dictionary

66
00:04:42,010 --> 00:04:46,370
aswell as a user name for key.

67
00:04:46,840 --> 00:04:50,740
The user name will be again, uname.

68
00:04:53,300 --> 00:05:01,400
And then Password's is going to be pword, pword.

69
00:05:01,880 --> 00:05:07,220
So we are here pword, which is going to get the value p1.

70
00:05:08,120 --> 00:05:11,900
And then since we don't have much more space here.

71
00:05:13,610 --> 00:05:18,320
I'm going to put a comma to continue the expression in a different line.

72
00:05:19,760 --> 00:05:24,200
If you feel a line is too long, you can split that line in multiple lines.

73
00:05:24,760 --> 00:05:28,130
Only if the line is inside parenthesis

74
00:05:29,530 --> 00:05:32,110
such as in the case of a function definition.

75
00:05:34,320 --> 00:05:38,300
Or brackets such as in the case of a list,

76
00:05:41,270 --> 00:05:44,840
or braces, such as in the case of a dictionary.

77
00:05:45,620 --> 00:05:49,400
In all three cases, the code will work just fine.

78
00:05:50,510 --> 00:05:56,150
You cannot split a line that doesn't have parentheses, brackets or braces.

79
00:05:56,570 --> 00:06:01,400
If you try to do that, you're going to get a syntax error.

80
00:06:01,730 --> 00:06:10,850
Unless you use a backslash, a backslash allows you to split an expression in multiple lines.

81
00:06:11,180 --> 00:06:17,420
Even when that expression is not inside parentheses brackets, or braces. Splitting an expression

82
00:06:17,420 --> 00:06:20,720
into multiple lines makes for a more readable code.

83
00:06:21,080 --> 00:06:26,960
It is recommended to split an expression when it has reach seventy nine characters.

84
00:06:27,470 --> 00:06:29,510
However, this is just a recommendation.

85
00:06:29,660 --> 00:06:32,030
It doesn't have any effect in the code.

86
00:06:33,580 --> 00:06:34,720
So next, what is next?

87
00:06:34,750 --> 00:06:37,570
Well, created the key created.

88
00:06:40,360 --> 00:06:45,000
The value of that is going to be 

89
00:06:45,070 --> 00:06:45,400
datetime.now.

90
00:06:46,850 --> 00:06:49,450
Let's import datetime first.

91
00:06:51,920 --> 00:06:59,510
From the datetime, import datetime, so the datetime class of the datetime module.

92
00:07:01,230 --> 00:07:07,830
So this is the datetime class that I imported in here. Datetime .now. I can show you what I'm trying

93
00:07:07,830 --> 00:07:08,360
to get here.

94
00:07:08,880 --> 00:07:15,520
So from datetime, import datetime. Datetime.now

95
00:07:15,710 --> 00:07:19,620
will give you these datetime objects.

96
00:07:19,680 --> 00:07:25,200
And what we want from that is we want to extract a string.

97
00:07:29,130 --> 00:07:29,760
We want to get the year,

98
00:07:32,070 --> 00:07:35,940
the month, the day,

99
00:07:38,640 --> 00:07:44,190
hours, minutes and seconds.

100
00:07:45,810 --> 00:07:49,980
So that is going to give us the date time in this string format.

101
00:07:50,280 --> 00:07:53,830
So this is going to go in here.

102
00:07:55,630 --> 00:07:56,190
Right.

103
00:07:56,570 --> 00:07:57,410
And that's it.

104
00:07:57,950 --> 00:08:01,820
No, let me print's users again down here.

105
00:08:05,820 --> 00:08:17,890
Close this previous window, sign up. U1, p1 submit, and you can see now that we have another pair of

106
00:08:18,640 --> 00:08:20,830
key and value.

107
00:08:21,700 --> 00:08:31,090
So the u1 user name with user name u1 and password p1 created at this very moment in time.

108
00:08:32,050 --> 00:08:36,500
So what can we do with this new dictionary now?

109
00:08:36,760 --> 00:08:37,900
Well, nothing fancy.

110
00:08:38,200 --> 00:08:44,030
We just need to open users.json.

111
00:08:44,350 --> 00:08:46,740
But this time in write mode.

112
00:08:47,530 --> 00:08:50,780
As file and we access Json.

113
00:08:51,020 --> 00:08:51,910
Jason module.

114
00:08:52,270 --> 00:08:57,940
Dump the user's dictionary to the file.

115
00:08:59,860 --> 00:09:00,510
And that's it.

116
00:09:01,350 --> 00:09:08,430
So what I'm doing at this point, I'm overwriting the users, the existing users.json file.

117
00:09:08,790 --> 00:09:12,810
So a completely new file is going to be created at this point.

118
00:09:12,930 --> 00:09:15,210
Empty file and in this empty file

119
00:09:15,300 --> 00:09:22,770
I'm going to write the new user, a user's dictionary, which will be this one in here.

120
00:09:23,070 --> 00:09:29,830
So the new dictionary will include the existing users, as you saw in here, user1 and user2.

121
00:09:29,970 --> 00:09:32,760
And it will also add the current user.

122
00:09:33,600 --> 00:09:41,090
So I hope that it's clear, you know, we test this now. Interrupt the current session with control C.

123
00:09:41,100 --> 00:09:43,130
See, execute the code.

124
00:09:43,350 --> 00:09:47,770
Sign up, u1, p1, submit.

125
00:09:48,510 --> 00:09:55,760
So I press the submit button and nothing happens now because everything is happening on the background.

126
00:09:55,810 --> 00:09:59,940
So the file has been updated.

127
00:10:00,270 --> 00:10:03,870
Now, if you look at the users.json file,

128
00:10:06,230 --> 00:10:13,140
you will see that there is currently a bug with visual studio code, that it doesn't autorefresh

129
00:10:13,200 --> 00:10:15,590
the files when they are updated.

130
00:10:15,980 --> 00:10:20,660
I hope this will be solved soon by the visual studio code developers.

131
00:10:21,320 --> 00:10:22,680
This issue has been reported.

132
00:10:23,090 --> 00:10:29,270
But anyway, what we can do is you can go to the file explorer in your operating system where you have

133
00:10:29,270 --> 00:10:35,890
these files and you can use an alternative text editor such as notepads.

134
00:10:36,290 --> 00:10:37,270
I have Atom here.

135
00:10:37,930 --> 00:10:38,620
Text, edit.

136
00:10:39,230 --> 00:10:43,670
So choose any of them and you'll see that in the other editor

137
00:10:43,760 --> 00:10:47,270
the changes have been recorded, in the users.json file.

138
00:10:47,480 --> 00:10:50,510
So you can see that u1 is there.

139
00:10:50,930 --> 00:10:56,330
So user name u1, password p1 and the date it was created.

140
00:11:00,220 --> 00:11:03,220
And that is how you add a new user to the Jason file.

141
00:11:03,580 --> 00:11:09,880
And so lastly, what we need to add here, because you see that when you press submit and nothing happens,

142
00:11:09,880 --> 00:11:15,280
you don't realize if you were successfully producer as a user or not something, so in the other lecture

143
00:11:15,280 --> 00:11:17,170
let's create another screen

144
00:11:17,660 --> 00:11:18,120
that

145
00:11:18,120 --> 00:11:21,480
will show when the user presses a submit button.