1
00:00:03,710 --> 00:00:05,210
As in previous occasions.

2
00:00:05,210 --> 00:00:14,420
For this practical video, we are going to use the divided screen approach a where we are going to show

3
00:00:14,420 --> 00:00:22,340
you the slides you will have with the summary of the detailed notebook we provide, with all the steps

4
00:00:22,340 --> 00:00:31,130
you will need to A to follow in order to complete the code that you can also download from GitHub.

5
00:00:31,640 --> 00:00:39,500
So what we are going to do and I am right now looking at the notebook, is we are going to build a level

6
00:00:39,500 --> 00:00:47,570
three application A that we can call medium, because it's a little bit more advanced than the previous

7
00:00:47,570 --> 00:00:50,480
basic level three application we have built.

8
00:00:50,660 --> 00:01:00,500
We are going to to create an application that manages PDF files stored in Amazon Web Services S3.

9
00:01:01,980 --> 00:01:09,480
You will be able to create, read, update and delete these files and you will use a Postgres database

10
00:01:09,480 --> 00:01:16,650
to store the name of the PDF file and the link to each location in Amazon S3.

11
00:01:16,650 --> 00:01:25,380
So in Postgres we are not going to store the file, but the name of the file and the link to the location

12
00:01:25,380 --> 00:01:27,690
of the file in Amazon S3.

13
00:01:27,810 --> 00:01:35,730
So think that the advanced professional application we review at the beginning of this section, and

14
00:01:35,730 --> 00:01:43,680
the second side, the one built by the llama index team, uh, is doing uh, something like this.

15
00:01:43,680 --> 00:01:51,660
So they are storing PDF files uh, on Amazon S3.

16
00:01:52,140 --> 00:01:58,170
And then they are, uh, using the rack technique to ask questions about those documents.

17
00:01:58,170 --> 00:02:01,530
So we are starting to go there.

18
00:02:01,530 --> 00:02:05,370
So this is one step closer to that functionality.

19
00:02:05,370 --> 00:02:13,350
You will see that in a in a next, uh, lesson we are going to add the rack technique uh, to to this

20
00:02:13,350 --> 00:02:14,160
approach as well.

21
00:02:14,160 --> 00:02:19,980
But right now we are just a uh, making a small step.

22
00:02:19,980 --> 00:02:28,350
And the step now is going to be to add this, uh, functionality to our previous basic application.

23
00:02:28,350 --> 00:02:36,840
So now our focus is going to be the integration with Amazon Web Services S3 and how to work with the

24
00:02:36,840 --> 00:02:37,770
PDF files.

25
00:02:37,770 --> 00:02:38,100
Okay.

26
00:02:38,100 --> 00:02:43,170
And what are the changes we need to include to our, uh, basic application.

27
00:02:43,170 --> 00:02:48,300
So as always, it is recommended to create a virtual environment.

28
00:02:48,450 --> 00:02:56,910
And here you have a very detailed, uh, instructions on how to a.

29
00:02:59,670 --> 00:03:06,300
Do every step you need to do in Amazon Web Services S3.

30
00:03:06,330 --> 00:03:13,110
Okay, so it should be a simple step, but it is not.

31
00:03:13,110 --> 00:03:16,770
It's a little bit a cumbersome.

32
00:03:16,770 --> 00:03:26,160
So it is going to be good for you to take a very careful look at these instructions step by step instructions,

33
00:03:26,160 --> 00:03:28,860
because it's a little bit surprising.

34
00:03:28,860 --> 00:03:34,860
But to create an S3 account with the proper configuration, it takes some time and effort.

35
00:03:34,860 --> 00:03:38,340
So here you have how to do that step by step.

36
00:03:39,630 --> 00:03:48,480
How to create a bucket, how to upload files, and how to configure permissions and and policies.

37
00:03:48,480 --> 00:03:55,860
So here you have a more detailed approach to uh, on how to configure the necessary permissions for

38
00:03:55,860 --> 00:03:58,590
our, uh, application.

39
00:03:59,220 --> 00:04:07,320
And uh, here you have a more detailed instructions on how to create a public bucket.

40
00:04:07,320 --> 00:04:07,890
Okay.

41
00:04:07,890 --> 00:04:10,770
So I think this is going to be enough.

42
00:04:10,770 --> 00:04:17,190
But in case you don't have enough information and instructions here, you know where to go.

43
00:04:17,190 --> 00:04:17,519
Okay.

44
00:04:17,519 --> 00:04:25,980
So ChatGPT for is a good source and also the documentation of uh, Amazon S3 as well.

45
00:04:27,420 --> 00:04:29,370
Once you have that.

46
00:04:29,370 --> 00:04:38,400
And so once you have an account on S3 and properly configured, we are going to make some changes to

47
00:04:38,400 --> 00:04:41,040
our basic, uh, application.

48
00:04:41,040 --> 00:04:49,860
So what we recommend you is to, uh, create a different application so you can clone if you want,

49
00:04:49,860 --> 00:04:58,170
you can copy the basic application, uh, you can create a different virtual environment or not.

50
00:04:58,170 --> 00:05:01,230
That's that's your, your your choice.

51
00:05:01,440 --> 00:05:02,130
A.

52
00:05:02,960 --> 00:05:11,090
It is recommended to create a different virtual environment, but you could use the same virtual environment

53
00:05:11,090 --> 00:05:16,220
than the basic and the basic application, in this case a.

54
00:05:16,220 --> 00:05:27,290
So once you have the basic application clone and here you have little bit of a, I think more information

55
00:05:27,290 --> 00:05:28,400
about that.

56
00:05:29,880 --> 00:05:31,140
No, he's more or less the same.

57
00:05:31,140 --> 00:05:33,180
This is a summary of the notebook.

58
00:05:33,270 --> 00:05:44,970
Okay, so once you have that, you will need to make a few changes in the A in the code of the previous

59
00:05:44,970 --> 00:05:46,350
basic application.

60
00:05:46,350 --> 00:05:48,570
One very important change.

61
00:05:48,570 --> 00:05:58,350
Very important change is a updating the dot m file of the backend application, the backend side of

62
00:05:58,350 --> 00:06:00,900
the of the basic application.

63
00:06:00,900 --> 00:06:02,850
In the dot m file.

64
00:06:02,850 --> 00:06:11,460
You will need to add the Amazon Web Services credentials and be very careful with this, because these

65
00:06:11,460 --> 00:06:19,680
are credentials that you do not want to share with anyone, especially your secret key in Amazon Web

66
00:06:19,680 --> 00:06:20,310
Services.

67
00:06:20,310 --> 00:06:27,780
This can cause you money if it is in the wrong hands, so it is very important for you to make sure

68
00:06:27,780 --> 00:06:32,310
after you update the dot and file that your dot.

69
00:06:32,310 --> 00:06:40,890
Gitignore file in the root directory of the backend is properly configured and meaning it has the dot

70
00:06:40,890 --> 00:06:49,470
m uh file excluded, so it will not be loaded to your GitHub repository whenever you do that.

71
00:06:50,390 --> 00:07:00,590
After you make sure of this, you will need to install the Boto3 package in order to use Amazon Web

72
00:07:00,590 --> 00:07:07,250
Services in your computer locally, which is, as you know, the first step of our working process.

73
00:07:07,280 --> 00:07:15,650
Initially, we develop the application locally in our computer and then we deploy it to the remote,

74
00:07:15,650 --> 00:07:16,880
uh, servers.

75
00:07:16,880 --> 00:07:17,270
Right.

76
00:07:17,270 --> 00:07:23,870
So in order to use Amazon Web Services in your computer, you will need to install Boto3, uh, doing

77
00:07:23,870 --> 00:07:24,650
this.

78
00:07:24,830 --> 00:07:28,910
And uh, once you have that a.

79
00:07:29,920 --> 00:07:38,860
You will need to what you will need to recreate all the steps that you previously learned in the basic,

80
00:07:38,860 --> 00:07:40,030
uh, application.

81
00:07:40,030 --> 00:07:47,140
Okay, so you you have already created a folder for this new application.

82
00:07:47,140 --> 00:07:54,160
And inside the main folder of the application, you are going to create a new folder for the back end.

83
00:07:54,160 --> 00:07:55,930
You can call it whatever you want.

84
00:07:55,930 --> 00:08:01,180
As you know we we used to call this 001 back end or something like that.

85
00:08:01,360 --> 00:08:04,660
You will see that in the in the code in GitHub.

86
00:08:05,400 --> 00:08:13,890
A then you are going to, uh, create a backend directory, go there, go to the backend directory and

87
00:08:13,890 --> 00:08:17,040
make sure that you have Postgres installed.

88
00:08:17,040 --> 00:08:25,380
If you are using a a new virtual environment, you will have to install Postgres again if you are using

89
00:08:25,380 --> 00:08:32,010
the virtual environment and that you previously created for the basic application, then you will already

90
00:08:32,010 --> 00:08:33,539
have Postgres installed.

91
00:08:33,809 --> 00:08:40,140
So a Postgres installation the necessary packages for the application.

92
00:08:40,140 --> 00:08:41,190
This is the same thing.

93
00:08:41,190 --> 00:08:44,610
If you are using a new virtual environment, you will need to do this.

94
00:08:44,610 --> 00:08:51,570
If you are using the virtual environment of the basic application, this will be already there for you.

95
00:08:52,320 --> 00:08:56,310
Then you will need to save these packages in the requirements.txt.

96
00:08:56,490 --> 00:08:56,940
Doc.

97
00:08:56,970 --> 00:09:01,350
Doc dot txt and then a.

98
00:09:02,570 --> 00:09:05,930
A you will create a Postgres database.

99
00:09:05,930 --> 00:09:08,600
Okay with executing this code in terminal.

100
00:09:08,600 --> 00:09:12,800
Remember that the pound sign is not going to be included in your terminal.

101
00:09:12,800 --> 00:09:13,190
This.

102
00:09:13,190 --> 00:09:19,130
We place it here just in order to avoid this code to be executed in in the notebook.

103
00:09:19,160 --> 00:09:20,600
You remember that right?

104
00:09:20,600 --> 00:09:23,240
So you create the Postgres database.

105
00:09:23,240 --> 00:09:33,980
You add the database credentials in the dot m file of the back end, uh, back end uh, application.

106
00:09:34,160 --> 00:09:38,390
You update the config py file.

107
00:09:38,510 --> 00:09:44,870
Uh, as you can see here in the config file, we are going to add the validation criteria.

108
00:09:44,990 --> 00:09:47,330
Uh, for pedantic.

109
00:09:47,420 --> 00:09:53,570
And regarding the new keys we enter in the dot m file and a few new items here.

110
00:09:53,570 --> 00:09:54,500
As you can see.

111
00:09:55,610 --> 00:09:59,930
The main dot pi file I think is going to be the same.

112
00:09:59,930 --> 00:10:09,530
But remember that a in the router lines, the two lines associated with the router would be would would

113
00:10:09,530 --> 00:10:10,550
need to be.

114
00:10:10,550 --> 00:10:11,240
Well.

115
00:10:14,150 --> 00:10:14,720
Yes.

116
00:10:14,720 --> 00:10:24,830
Just remember that these two lines associated with the router file A, you can leave them, uh, like

117
00:10:24,830 --> 00:10:25,460
that.

118
00:10:25,610 --> 00:10:31,430
So without commenting them because you already have, you are using the clone version of the basic app.

119
00:10:31,430 --> 00:10:33,200
You already have the router.

120
00:10:33,200 --> 00:10:37,310
But remember that we are going to make some changes in the router later.

121
00:10:37,850 --> 00:10:44,510
So you can you can start the server right now locally just to check that the application and the back

122
00:10:44,510 --> 00:10:46,310
end of the application is working.

123
00:10:46,310 --> 00:10:47,000
Okay.

124
00:10:47,000 --> 00:10:50,420
You will see in the terminal the name of the app printed.

125
00:10:50,420 --> 00:10:55,910
Remember that here in the configuration we have changed the name of the app.

126
00:10:55,910 --> 00:11:00,710
So right now the app is called Full stack pdf Crud application.

127
00:11:02,930 --> 00:11:09,140
And we have also changed it here in the config.py file.

128
00:11:10,990 --> 00:11:18,100
And here you have a couple of alternatives in order to play around with the backup backend server.

129
00:11:18,130 --> 00:11:18,760
Okay.

130
00:11:19,090 --> 00:11:27,850
Once you have confirmed that the backend server is working okay, you can uh, uh, push control C,

131
00:11:27,880 --> 00:11:32,800
the keys control and C in order to stop the server in the terminal.

132
00:11:32,800 --> 00:11:41,110
And then you will perform the operations in order to set your database and the table in your database.

133
00:11:41,110 --> 00:11:46,450
This is the same thing we did with the with the basic application.

134
00:11:46,900 --> 00:11:51,370
In this case a difference is a.

135
00:11:55,930 --> 00:12:02,590
That you will find is a you are creating a table that right now is called PDFs.

136
00:12:02,620 --> 00:12:03,700
It's not called todos.

137
00:12:03,730 --> 00:12:07,210
Well, you can call it whatever you want, but this is the name we are using PDFs.

138
00:12:07,210 --> 00:12:08,530
This is the name of the table.

139
00:12:09,280 --> 00:12:14,020
Then in the A inside the alembic.

140
00:12:14,020 --> 00:12:15,970
This is a alembic.

141
00:12:17,550 --> 00:12:18,330
Inside the.

142
00:12:20,900 --> 00:12:31,010
The Alembic's last versions folder, you will have the the this new file whatever and ending create

143
00:12:31,010 --> 00:12:32,330
PDFs table.

144
00:12:32,330 --> 00:12:40,610
And here you will have to update edit some part of the of the of the file as you as you see here, the

145
00:12:40,610 --> 00:12:44,720
final part of the of the file as you did in the basic application.

146
00:12:44,720 --> 00:12:50,930
But here as you as you can see, we are entering a new column which is the file column where we enter

147
00:12:50,930 --> 00:12:52,220
the name of the file.

148
00:12:52,340 --> 00:12:53,120
Okay.

149
00:12:54,110 --> 00:12:55,580
And a.

150
00:12:55,910 --> 00:12:57,620
We are also changing here.

151
00:12:57,620 --> 00:13:00,320
We are using the the name of the of the new table.

152
00:13:00,320 --> 00:13:00,800
Okay.

153
00:13:00,800 --> 00:13:08,750
So what you are doing here, as you know, is you are opening a Postgres in your computer, you are

154
00:13:08,750 --> 00:13:16,610
opening the database and you are creating the main user and the password of the main user, and you

155
00:13:16,610 --> 00:13:20,120
are granting all privileges to this user.

156
00:13:20,120 --> 00:13:20,840
Okay.

157
00:13:20,990 --> 00:13:29,120
Then you edit this line in Alembic dot ini a with the proper user and password.

158
00:13:29,120 --> 00:13:29,870
Okay?

159
00:13:29,870 --> 00:13:33,470
And also remember to change the update here.

160
00:13:33,470 --> 00:13:36,020
Your database name okay.

161
00:13:36,020 --> 00:13:41,810
Probably if you are using my PDF database this is my PDF database as well.

162
00:13:43,720 --> 00:13:46,840
Let's change this b d f.

163
00:13:48,810 --> 00:13:49,140
Okay.

164
00:13:49,140 --> 00:13:55,890
And then in the bottom file you will also add the new user and the new password okay.

165
00:13:55,890 --> 00:14:02,490
You will complete the operations running this uh instruction in terminal.

166
00:14:02,490 --> 00:14:06,870
And finally you can check the database in terminal.

167
00:14:06,870 --> 00:14:09,360
So you can open Postgres.

168
00:14:09,360 --> 00:14:14,850
Uh go to the database and see what it is in the table you have created.

169
00:14:14,850 --> 00:14:15,480
Okay.

170
00:14:16,140 --> 00:14:25,560
Then you will have to, uh, update schemas, dot py, uh, with a few changes.

171
00:14:25,560 --> 00:14:32,190
Uh, see the name of the classes here and this new line regarding the file.

172
00:14:32,190 --> 00:14:45,780
Same thing here etc. in the database py file you are uh, going to I think there is no change.

173
00:14:47,650 --> 00:14:48,670
Is not change.

174
00:14:48,970 --> 00:14:50,110
Here, I think.

175
00:14:50,110 --> 00:14:55,690
I think there is no change necessary here then in Models.py.

176
00:14:56,730 --> 00:14:58,530
We are going to make a few changes.

177
00:14:58,530 --> 00:15:07,200
You see the PDF and the file column here and in the graph dot pie you are going to make some changes

178
00:15:07,200 --> 00:15:12,120
because the functionality here of the Crud is going to be is going to be different.

179
00:15:12,120 --> 00:15:13,080
You are.

180
00:15:13,260 --> 00:15:22,110
If you remember in the basic application, we were just creating tasks and then a modify the task or

181
00:15:22,110 --> 00:15:26,400
delete the task or to list the tasks.

182
00:15:26,400 --> 00:15:35,760
Right now we have a different application and we are now when we create, when we load the PDF A and

183
00:15:35,760 --> 00:15:40,200
when we load the PDF, the, the the file goes to Amazon.

184
00:15:40,200 --> 00:15:48,720
And the name of the file, uh, goes to the Postgres, a database with a link to the uh, Amazon S3

185
00:15:49,230 --> 00:15:50,490
location of the file.

186
00:15:50,520 --> 00:15:51,180
Okay.

187
00:15:51,880 --> 00:15:56,830
So you will see a demo of this application later.

188
00:15:57,010 --> 00:15:58,450
But a.

189
00:16:00,190 --> 00:16:03,820
And in the crowd is where you are going to see more changes.

190
00:16:03,820 --> 00:16:11,320
So take a careful look at all the changes you you see here in the notebook, and that you can also see

191
00:16:11,320 --> 00:16:14,860
in the GitHub repository and in the router.

192
00:16:14,860 --> 00:16:17,650
You are also going to make a few changes.

193
00:16:17,650 --> 00:16:24,190
We explain the changes here, and then we provide the updated code for you to review and play around,

194
00:16:24,190 --> 00:16:25,720
experiment, etc..

195
00:16:25,930 --> 00:16:33,610
So in Main.py, as always, whenever you are changing routers, you will have to comment and uncomment

196
00:16:33,610 --> 00:16:39,130
these lines in order for for them to work as we did in the basic application.

197
00:16:39,130 --> 00:16:40,570
Remember the lesson there?

198
00:16:40,810 --> 00:16:48,550
And once you have completed all these, uh, operations in the back end, you can run the back end server

199
00:16:48,550 --> 00:16:52,330
to uh, confirm that everything is working okay.

200
00:16:52,870 --> 00:17:02,200
If you want to try the back end before making changes in the front end, you can use this, uh, commands,

201
00:17:02,200 --> 00:17:07,450
you know, from your terminal, I don't think is necessary, but just just for you to have them here

202
00:17:07,450 --> 00:17:09,520
and and experiment if you want.

203
00:17:09,640 --> 00:17:17,440
And, uh, with that, we have completed the changes in the back end, then in the front end.

204
00:17:18,530 --> 00:17:25,099
We of course will need to create the front end directory and we will start.

205
00:17:25,099 --> 00:17:32,030
We will install, as we did previously with the basic application, the Next.js starter template.

206
00:17:32,030 --> 00:17:32,660
Okay.

207
00:17:32,660 --> 00:17:36,350
You will need to configure and to respond the questions.

208
00:17:36,350 --> 00:17:41,570
And when you install the starter template and important thing, the name of the app is going to be now

209
00:17:41,570 --> 00:17:43,130
PDF application.

210
00:17:43,130 --> 00:17:43,790
Okay.

211
00:17:44,060 --> 00:17:50,480
So you will install the an Next.js starter template with this command here.

212
00:17:50,480 --> 00:17:58,670
And once it is installed you will have to go to the directory in that uh, has been created with this

213
00:17:58,670 --> 00:18:00,170
front end application.

214
00:18:00,170 --> 00:18:00,440
Okay.

215
00:18:00,440 --> 00:18:05,570
So CD, PDF application takes us there to the directory.

216
00:18:05,570 --> 00:18:10,400
And then we can check the front end server with npm run dev.

217
00:18:10,670 --> 00:18:18,230
If you do that you are going to see the default uh user interface of Next.js starter template.

218
00:18:18,230 --> 00:18:18,590
Okay.

219
00:18:18,590 --> 00:18:20,120
So nothing interesting there.

220
00:18:20,120 --> 00:18:28,790
But just to see that everything works, then you will see this in localhost 3000 and then you can start

221
00:18:28,790 --> 00:18:30,020
making changes.

222
00:18:30,710 --> 00:18:35,450
Dotenv file is going to be the same as in the basic application.

223
00:18:35,450 --> 00:18:38,510
Index.js is going to be more or less the same.

224
00:18:38,510 --> 00:18:44,990
But now we have a different component here called PDF list instead of the todo list okay.

225
00:18:44,990 --> 00:18:49,040
And you will have to import uh, it here etc..

226
00:18:49,430 --> 00:18:53,300
And then you will go to the components themselves.

227
00:18:53,300 --> 00:19:00,200
I think layout, the layout component is going to remain more or less the same small changes as you

228
00:19:00,200 --> 00:19:01,160
can see here.

229
00:19:01,160 --> 00:19:07,040
And in the main component which is PDF list is where you are going to see more changes.

230
00:19:07,040 --> 00:19:14,060
So take a careful look of this code and also uh, take well this is an explanation here.

231
00:19:14,060 --> 00:19:18,470
You have all the all the things we have, we have made and explanations of that.

232
00:19:18,470 --> 00:19:21,440
And here you have the, the last component PDF.

233
00:19:21,440 --> 00:19:21,890
Okay.

234
00:19:21,890 --> 00:19:24,350
Here you have a few changes as well.

235
00:19:24,350 --> 00:19:25,220
Review this.

236
00:19:25,220 --> 00:19:30,530
And here you have explanations of all the detail changes that are in the in the file.

237
00:19:30,530 --> 00:19:31,100
Okay.

238
00:19:31,340 --> 00:19:36,260
Then you have to uh go to the style files.

239
00:19:36,770 --> 00:19:45,140
You can as all as, as we did in the in the basic application you can delete the default CSS, CSS files

240
00:19:45,140 --> 00:19:48,620
and and then change the files with these new ones.

241
00:19:48,620 --> 00:19:52,100
We have introduced a few changes in the CSS.

242
00:19:52,100 --> 00:19:57,980
As you will see in the demo, in order to change, you know, the width of the application and a few

243
00:19:57,980 --> 00:20:03,410
things, because right now we are using files instead of tasks you will see in the demo.

244
00:20:03,410 --> 00:20:08,390
So you will see that the CSS has been updated in a few areas.

245
00:20:08,390 --> 00:20:09,140
Okay.

246
00:20:09,440 --> 00:20:12,590
And once you have that, well remember that you will need.

247
00:20:12,590 --> 00:20:18,350
Now you are going when when we see the the demo of the application, you will see that we are using

248
00:20:18,380 --> 00:20:19,340
two icons.

249
00:20:19,340 --> 00:20:29,150
One icon is to delete the the the file and the other icon is to view the file, the content of the PDF.

250
00:20:29,150 --> 00:20:29,540
Right.

251
00:20:29,540 --> 00:20:31,520
So we are using two icons.

252
00:20:31,520 --> 00:20:34,970
And here you have the links to download the icons.

253
00:20:34,970 --> 00:20:42,590
In order to place these icons in the public, uh, public directory of the front end application, then

254
00:20:42,590 --> 00:20:45,590
you know how to run the full stack application.

255
00:20:46,390 --> 00:20:55,930
And you also know how to deploy this application, uh, to uh render render dotcom and virtual com is

256
00:20:55,930 --> 00:20:56,740
the same process.

257
00:20:56,740 --> 00:21:00,940
So here we, we tell you that the process is the same.

258
00:21:00,940 --> 00:21:04,150
So we haven't changed this from the basic application.

259
00:21:04,150 --> 00:21:07,750
And you will see that the steps works and the same.

260
00:21:07,750 --> 00:21:14,590
So now we are going to see a demo of this uh new application uh, working.

261
00:21:14,890 --> 00:21:19,180
Uh let's see that in the next video.