As in previous occasions.
For this practical video, we are going to use the divided screen approach a where we are going to show
you the slides you will have with the summary of the detailed notebook we provide, with all the steps
you will need to A to follow in order to complete the code that you can also download from GitHub.
So what we are going to do and I am right now looking at the notebook, is we are going to build a level
three application A that we can call medium, because it's a little bit more advanced than the previous
basic level three application we have built.
We are going to to create an application that manages PDF files stored in Amazon Web Services S3.
You will be able to create, read, update and delete these files and you will use a Postgres database
to store the name of the PDF file and the link to each location in Amazon S3.
So in Postgres we are not going to store the file, but the name of the file and the link to the location
of the file in Amazon S3.
So think that the advanced professional application we review at the beginning of this section, and
the second side, the one built by the llama index team, uh, is doing uh, something like this.
So they are storing PDF files uh, on Amazon S3.
And then they are, uh, using the rack technique to ask questions about those documents.
So we are starting to go there.
So this is one step closer to that functionality.
You will see that in a in a next, uh, lesson we are going to add the rack technique uh, to to this
approach as well.
But right now we are just a uh, making a small step.
And the step now is going to be to add this, uh, functionality to our previous basic application.
So now our focus is going to be the integration with Amazon Web Services S3 and how to work with the
PDF files.
Okay.
And what are the changes we need to include to our, uh, basic application.
So as always, it is recommended to create a virtual environment.
And here you have a very detailed, uh, instructions on how to a.
Do every step you need to do in Amazon Web Services S3.
Okay, so it should be a simple step, but it is not.
It's a little bit a cumbersome.
So it is going to be good for you to take a very careful look at these instructions step by step instructions,
because it's a little bit surprising.
But to create an S3 account with the proper configuration, it takes some time and effort.
So here you have how to do that step by step.
How to create a bucket, how to upload files, and how to configure permissions and and policies.
So here you have a more detailed approach to uh, on how to configure the necessary permissions for
our, uh, application.
And uh, here you have a more detailed instructions on how to create a public bucket.
Okay.
So I think this is going to be enough.
But in case you don't have enough information and instructions here, you know where to go.
Okay.
So ChatGPT for is a good source and also the documentation of uh, Amazon S3 as well.
Once you have that.
And so once you have an account on S3 and properly configured, we are going to make some changes to
our basic, uh, application.
So what we recommend you is to, uh, create a different application so you can clone if you want,
you can copy the basic application, uh, you can create a different virtual environment or not.
That's that's your, your your choice.
A.
It is recommended to create a different virtual environment, but you could use the same virtual environment
than the basic and the basic application, in this case a.
So once you have the basic application clone and here you have little bit of a, I think more information
about that.
No, he's more or less the same.
This is a summary of the notebook.
Okay, so once you have that, you will need to make a few changes in the A in the code of the previous
basic application.
One very important change.
Very important change is a updating the dot m file of the backend application, the backend side of
the of the basic application.
In the dot m file.
You will need to add the Amazon Web Services credentials and be very careful with this, because these
are credentials that you do not want to share with anyone, especially your secret key in Amazon Web
Services.
This can cause you money if it is in the wrong hands, so it is very important for you to make sure
after you update the dot and file that your dot.
Gitignore file in the root directory of the backend is properly configured and meaning it has the dot
m uh file excluded, so it will not be loaded to your GitHub repository whenever you do that.
After you make sure of this, you will need to install the Boto3 package in order to use Amazon Web
Services in your computer locally, which is, as you know, the first step of our working process.
Initially, we develop the application locally in our computer and then we deploy it to the remote,
uh, servers.
Right.
So in order to use Amazon Web Services in your computer, you will need to install Boto3, uh, doing
this.
And uh, once you have that a.
You will need to what you will need to recreate all the steps that you previously learned in the basic,
uh, application.
Okay, so you you have already created a folder for this new application.
And inside the main folder of the application, you are going to create a new folder for the back end.
You can call it whatever you want.
As you know we we used to call this 001 back end or something like that.
You will see that in the in the code in GitHub.
A then you are going to, uh, create a backend directory, go there, go to the backend directory and
make sure that you have Postgres installed.
If you are using a a new virtual environment, you will have to install Postgres again if you are using
the virtual environment and that you previously created for the basic application, then you will already
have Postgres installed.
So a Postgres installation the necessary packages for the application.
This is the same thing.
If you are using a new virtual environment, you will need to do this.
If you are using the virtual environment of the basic application, this will be already there for you.
Then you will need to save these packages in the requirements.txt.
Doc.
Doc dot txt and then a.
A you will create a Postgres database.
Okay with executing this code in terminal.
Remember that the pound sign is not going to be included in your terminal.
This.
We place it here just in order to avoid this code to be executed in in the notebook.
You remember that right?
So you create the Postgres database.
You add the database credentials in the dot m file of the back end, uh, back end uh, application.
You update the config py file.
Uh, as you can see here in the config file, we are going to add the validation criteria.
Uh, for pedantic.
And regarding the new keys we enter in the dot m file and a few new items here.
As you can see.
The main dot pi file I think is going to be the same.
But remember that a in the router lines, the two lines associated with the router would be would would
need to be.
Well.
Yes.
Just remember that these two lines associated with the router file A, you can leave them, uh, like
that.
So without commenting them because you already have, you are using the clone version of the basic app.
You already have the router.
But remember that we are going to make some changes in the router later.
So you can you can start the server right now locally just to check that the application and the back
end of the application is working.
Okay.
You will see in the terminal the name of the app printed.
Remember that here in the configuration we have changed the name of the app.
So right now the app is called Full stack pdf Crud application.
And we have also changed it here in the config.py file.
And here you have a couple of alternatives in order to play around with the backup backend server.
Okay.
Once you have confirmed that the backend server is working okay, you can uh, uh, push control C,
the keys control and C in order to stop the server in the terminal.
And then you will perform the operations in order to set your database and the table in your database.
This is the same thing we did with the with the basic application.
In this case a difference is a.
That you will find is a you are creating a table that right now is called PDFs.
It's not called todos.
Well, you can call it whatever you want, but this is the name we are using PDFs.
This is the name of the table.
Then in the A inside the alembic.
This is a alembic.
Inside the.
The Alembic's last versions folder, you will have the the this new file whatever and ending create
PDFs table.
And here you will have to update edit some part of the of the of the file as you as you see here, the
final part of the of the file as you did in the basic application.
But here as you as you can see, we are entering a new column which is the file column where we enter
the name of the file.
Okay.
And a.
We are also changing here.
We are using the the name of the of the new table.
Okay.
So what you are doing here, as you know, is you are opening a Postgres in your computer, you are
opening the database and you are creating the main user and the password of the main user, and you
are granting all privileges to this user.
Okay.
Then you edit this line in Alembic dot ini a with the proper user and password.
Okay?
And also remember to change the update here.
Your database name okay.
Probably if you are using my PDF database this is my PDF database as well.
Let's change this b d f.
Okay.
And then in the bottom file you will also add the new user and the new password okay.
You will complete the operations running this uh instruction in terminal.
And finally you can check the database in terminal.
So you can open Postgres.
Uh go to the database and see what it is in the table you have created.
Okay.
Then you will have to, uh, update schemas, dot py, uh, with a few changes.
Uh, see the name of the classes here and this new line regarding the file.
Same thing here etc. in the database py file you are uh, going to I think there is no change.
Is not change.
Here, I think.
I think there is no change necessary here then in Models.py.
We are going to make a few changes.
You see the PDF and the file column here and in the graph dot pie you are going to make some changes
because the functionality here of the Crud is going to be is going to be different.
You are.
If you remember in the basic application, we were just creating tasks and then a modify the task or
delete the task or to list the tasks.
Right now we have a different application and we are now when we create, when we load the PDF A and
when we load the PDF, the, the the file goes to Amazon.
And the name of the file, uh, goes to the Postgres, a database with a link to the uh, Amazon S3
location of the file.
Okay.
So you will see a demo of this application later.
But a.
And in the crowd is where you are going to see more changes.
So take a careful look at all the changes you you see here in the notebook, and that you can also see
in the GitHub repository and in the router.
You are also going to make a few changes.
We explain the changes here, and then we provide the updated code for you to review and play around,
experiment, etc..
So in Main.py, as always, whenever you are changing routers, you will have to comment and uncomment
these lines in order for for them to work as we did in the basic application.
Remember the lesson there?
And once you have completed all these, uh, operations in the back end, you can run the back end server
to uh, confirm that everything is working okay.
If you want to try the back end before making changes in the front end, you can use this, uh, commands,
you know, from your terminal, I don't think is necessary, but just just for you to have them here
and and experiment if you want.
And, uh, with that, we have completed the changes in the back end, then in the front end.
We of course will need to create the front end directory and we will start.
We will install, as we did previously with the basic application, the Next.js starter template.
Okay.
You will need to configure and to respond the questions.
And when you install the starter template and important thing, the name of the app is going to be now
PDF application.
Okay.
So you will install the an Next.js starter template with this command here.
And once it is installed you will have to go to the directory in that uh, has been created with this
front end application.
Okay.
So CD, PDF application takes us there to the directory.
And then we can check the front end server with npm run dev.
If you do that you are going to see the default uh user interface of Next.js starter template.
Okay.
So nothing interesting there.
But just to see that everything works, then you will see this in localhost 3000 and then you can start
making changes.
Dotenv file is going to be the same as in the basic application.
Index.js is going to be more or less the same.
But now we have a different component here called PDF list instead of the todo list okay.
And you will have to import uh, it here etc..
And then you will go to the components themselves.
I think layout, the layout component is going to remain more or less the same small changes as you
can see here.
And in the main component which is PDF list is where you are going to see more changes.
So take a careful look of this code and also uh, take well this is an explanation here.
You have all the all the things we have, we have made and explanations of that.
And here you have the, the last component PDF.
Okay.
Here you have a few changes as well.
Review this.
And here you have explanations of all the detail changes that are in the in the file.
Okay.
Then you have to uh go to the style files.
You can as all as, as we did in the in the basic application you can delete the default CSS, CSS files
and and then change the files with these new ones.
We have introduced a few changes in the CSS.
As you will see in the demo, in order to change, you know, the width of the application and a few
things, because right now we are using files instead of tasks you will see in the demo.
So you will see that the CSS has been updated in a few areas.
Okay.
And once you have that, well remember that you will need.
Now you are going when when we see the the demo of the application, you will see that we are using
two icons.
One icon is to delete the the the file and the other icon is to view the file, the content of the PDF.
Right.
So we are using two icons.
And here you have the links to download the icons.
In order to place these icons in the public, uh, public directory of the front end application, then
you know how to run the full stack application.
And you also know how to deploy this application, uh, to uh render render dotcom and virtual com is
the same process.
So here we, we tell you that the process is the same.
So we haven't changed this from the basic application.
And you will see that the steps works and the same.
So now we are going to see a demo of this uh new application uh, working.
Uh let's see that in the next video.