Okay.
So these are some of the materials you are going to have for this lesson.
The most important one is the one you have here in the right side of the screen.
This notebook is extremely detailed and it goes step by step.
Uh, so I think it's the most important tool you are going to have in the lesson.
As always in the slides, we are going to have a quick summary of what we are covering in the notebook.
Then we will also use the code editor uh very soon.
And as, as in, in other occasions you will be able to download the final code from the GitHub repository.
So the goal of this lesson is to understand the complete cycle of full stack web application development.
Remember that when we say full stack web application development, it is the same as if we say full
stack application development.
Why?
Because today 99% 99% of the software applications are web applications.
So our LM applications are mostly going to be web applications.
So the important thing of this lesson is to understand the complete cycle of development.
This is very important and is going to be very valuable for you in your, uh, professional future.
Why?
Because, uh, as you will see, a most software developers are trained in only one side of the full
stack.
So they are trained either on front end development or in back end development.
And this is this is very sad.
Uh, because for one thing, this these professionals are always building health products.
So they, they don't have the satisfaction of building a complete product or to be able to understand,
uh, how to build a complete product is is extremely frustrating.
So think, for example, uh, about this, uh, a, uh.
Manufacturer, a engineer or employee which is building just one door of the car.
Right.
So the only thing he does in 15 years or 20 years working in the, in the in the company is building
the door, the front door of the car.
That's extremely boring and extremely frustrating.
And the problem with this employee is that he cannot be promoted, but because the only thing he he
knows how to do is the front door of the car.
So in the software industry, we have a similar situation with the front end developers and the back
end developers.
They are stuck there, they are frustrated, they are bored, and they hate their jobs.
Right?
But if you study a program like this and instead of, uh, focusing your attention in front end or back
end, you study and understand the full stack development and you are able to understand what is the
front end development and what is the back end development.
You will be able to be promoted to manager of a team because you understand what the front end and the
back end teams are doing.
So this is extremely this is going to be extremely important for you.
So a then see, the second part of this sentence is understand the complete cycle of full stack web
application development to apply it in LM web applications like those analyzing the mind.
So like like the one we have analyzed in second side in the introduction.
So by the way, do you see the second side application that is a Crud application as well.
You see they are creating PDF, they are deleting PDF, they are reading PDF etc..
Right.
So we will talk about that later.
Some recommendations.
The most important thing is to understand the basic concepts.
Code versions can change but concepts remain.
So I have told you several times that.
If we teach you one particular technique, this technique is going to be obsolete in three six months.
But if we teach you a way of working that is going to stay with you forever.
So in this lesson, the most important thing for you is to understand the high level picture, the big
picture of the full stack development.
So we are going to see through a lot of different things.
Don't get distracted by the details.
Just, you know, keep a high level view.
And remember that the artificial intelligence engineer doesn't know everything about everything.
He understands the big picture and he knows where to go whenever he needs to solve a question, solve
a problem, or go deeper into one particular technique.
Okay.
So this is very important.
And this is also crucial in order for you to avoid being overwhelmed because we are going to see a lot
of things.
So don't worry step by step.
Uh, just uh, understand the big picture.
And then you will go, you know, uh, one by one, uh, if it is necessary.
Second recommendation.
You don't lean.
You don't need to learn everything about Python fast API.
Postgres.
Is correct.
This Postgres is just with ones Next.js, Vercel and Fender.com.
Just learn the basic techniques and then keep learning as needed for each project you do.
Keep an eye on the big picture.
Don't lose focus on small details now.
So I am going to tell you what I did many years ago when I was starting in Fullstack.
The development.
Since I have this background, I needed to understand everything about everything before starting to
build a project.
So before going into my first project I tried to understand everything about Python, fast API, Postgres
next, Vercel and render.
And that's a total waste of time and an absolute a mistake in a way of doing things.
A if you do that, you are going to get frustrated because you are not going to memorize everything
about all these different frameworks and devices and tools, and you are not going to apply 95% of the
things you learn in that learning round.
So don't go there.
Instead, a follow the project, understand the basic techniques and then.
As needed for each of the projects you do.
Keep learning.
So to do that is going to require for you some comfort level around a being uncomfortable.
Excuse me for for the the the way of wording that what I mean is that since you are not going to study,
uh, everything about everything before, and you are going to start looking at one living project,
you know, finished project, you are going to have a an important degree of discomfort, right?
Because you are not familiar with the things we are talking about.
You have a lot of new things.
You are going to listen and read about words you don't understand, frameworks you don't understand,
you don't know.
And this is a moment of truth for you.
Uh, this is the moment where you are going to decide if you are an, uh, an artificial intelligence
engineer in the making, or you are just a.
Person that is overwhelmed with new things and is going to throw the towel is going to abandon the the
the program.
Don't do that.
I tell you that the first feeling, this feeling of discomfort, this feeling of getting lost, this
feeling of getting overwhelmed is totally normal.
This is the way you should feel.
So don't worry about that.
And you are going to see that on every repetition, on every next round you perform about each of these
subsections, you are going to feel more comfortable, more a wise, more you are going to have more
understanding of things, etc., etc. so don't worry, your level of discomfort is going to, uh, be
reduced uh, by your repetition practice this and study okay, so bear with me.
Stay there.
This is normal.
You are going to make it.
There is no secret in becoming an artificial intelligence engineer.
This is not rocket.
Rocket science.
Everybody can do it.
The only secret is perseverance, practice and study.
For some people, this lesson is going to take four hours.
For some others it's going to take 80 hours.
Don't worry about it.
The important thing for you is you overcome it with success.
Understanding the basic concepts and understanding where to go whenever you need to solve problems or
questions about these techniques.
Okay.
There a point?
Remember, no software engineer knows everything needed to develop a project beforehand.
They have basic knowledge and progress from there according to the needs of each project.
Okay, so don't worry.
This is the the the this is the daily routine of an artificial intelligence engineer.
Uh, we never start a day in our lives feeling comfortable about knowing everything we need for the
day.
That's not the case.
We are always sure that every day we are going to find areas of discomfort where we don't know things,
where we need to learn and we need to to to practice, etc., etc..
So the most important thing here is the last one.
Remember where to find answers in case of doubt or error.
You are extremely lucky because ten years ago, 15 years ago, when we started the bootcamps, we didn't
have a personal assistant like you do.
So you have 24 seven.
A personal assistant you can use, which is ChatGPT four, which is going to answer whatever questions
you may have.
It's going to explain you whatever code you copy there.
It's going to solve the problems you may have during an exercise.
It's going to tell you where to find more information, where to keep learning, etc., etc. so you
are super lucky and it is going to be so much easier for you than for the people that started a bootcamp
1015 years ago.
Okay, so don't worry, you have there a personal assistant is going to be okay.
And remember, apart from ChatGPT, especially ChatGPT four, you also have Google.
You also have forums like StackOverflow etc..
Okay.
So about the backend A we want to create a Crud application that responds to five instructions.
This is what you are going to, uh, find from your manager if you start working as a junior back end
developer.
Okay.
So your manager is going to tell you, okay, please create a Crud application that does these five
things.
We create an item and store the item in our database.
We saw all items in the database.
We saw one item for from the database located by its ID.
We update an item in the database located by this ID and delete the Crud application.
Okay, each time one of these instructions is ordered, a Python function that carries out the selected
Crud action is executed.
Okay, so remember.
We are going to use the Python language to build our backend.
And you will see that the you are going to be bilingual in this program.
So it's like in the morning you are going to speak with your, uh, German engineers, and in the afternoon
you are going to speak with your English speaking colleagues or Spanish speaking colleagues.
Okay.
So you are going to be bilingual in this project.
In the back end, we are going to work with Python, and in the front end we are going to work with
JavaScript.
Okay.
So these are going to be our main languages.
And these are the languages that eh um ah eh eh that we use for the frameworks we are going to use in
the back end and in the front end.
You will see more about that later.
So in this slide you have a summary of the detailed steps we have here in the notebook.
These are super good notebook super good notebook.
So I encourage you to learn this and practice this many times okay.
Until you feel comfortable.
So.
What are the things we are going to do?
Uh, for this initial part.
We are going to, uh, have the initial setup of our project.
We are going to prepare the database, which is going to be a Postgres database.
We are going to build the main functionality of the backend application.
And we are going to start the backend application in our computer, what we call a local server.
Every time you see local means in your computer.
Okay, so this is the opposite of in the cloud.
So in the first part of this project we are going to start this application in our computer.
This means locally.
And in the second part of this lesson we will start the application in the cloud okay.
Remotely locally remotely.
So let's go to the notebook.
The full stack application with fast API and Vercel.
Well, we can say with fast API and Next.js because fast API is a network and Vercel is a server.
So we can say fast API, a framework, and Next.js a framework as well.
We will create an application that manages a to do list, a list of tasks that you want to complete.
You already saw the demo.
The first thing.
As always, it is recommended to create a virtual environment.
You know how to create a virtual environment with pimp.
Okay, so now it's a good time to do that.
Hey, when you work in professional projects, it is very important to create virtual environments.
If you are a working like in this program with many small exercises like we did in the in the previous,
uh, blogs of the, of the program, you know, with the toy demos and the, the toy two level two applications,
etc..
Well, you could create a virtual environment every time, but usually we don't do that.
You know, we just create a virtual environment and we prepare all the level one exercises and we prepare
another one and we create the level two, etc..
So in this case we have created a different virtual environment.
In our case, we haven't used pimp.
In this case we have used a different approach.
But don't worry about it.
You can use a pimp.
You have many different ways of creating virtual environments.
By F by M is the is the most basic one, the most simple.
And we recommend you to do that.
So first create a virtual environment and then.
You and go to your terminal and create the folder for your application.
So remember in the in the lesson we talk about the terminal a most common operations.
One of these operations was how to create a new folder or new directory.
Right.
Probably you don't remember.
So but I am going to invite you to do is go to ChatGPT four and ask ChatGPT, how do I create a new
directory in my terminal?
And you will see it's going to tell you make there.
It will tell you how to do that.
Very easy.
But I think it's good for you to ask your personal assistant.
Then inside this folder, go inside this folder in the terminal and you create the back end folder.
Okay.
So inside the main folder of the application we are going to have two folders, one for the back end
and another for the front end.
Okay.
In our case we call the back end folder 001 and the front end folder 002 front end or something like
that.
You will see that in the in the code in our GitHub repository.
I think in this project we have um, uh, three folders, one for the backup, the back end, one for
the front end, and another one which is a duplicated of the front end.
So disregard the last one.
Just use the first one, the number 1001 and 002 okay.
So once you have created the app folder and the back end folder, you will need to have a the Postgres
database package install in your computer.
Okay.
So we are going to create a database.
And there are different packages you can use to create a database.
You can use MySQL.
You can use MongoDB.
You can use many possible databases.
But in our case we are going to use Postgres which is right now I would say the most popular uh, among
the LM application developers community.
So in order to install Postgres in your computer.
This is what you have to do if you are using a mac computer.
If you are using a PC, go to ChatGPT four and ask there.
Remember one thing.
This is a very important thing.
When we give you code here in the notebook, you need to remove the pound sign.
So you copy this line without the pound sign and execute it in your terminal.
Okay, so the pound sign is here because we don't want to execute these lines of code in the notebook
okay.
So this this is called comment.
And then the line.
So you comment one line.
It is not going to be executed in the notebook.
The same thing with a code editor you will see later.
So you install progress postgres SL cube the this package.
And then you say this is home brew with this uninstaller we use and don't worry about that, just use
it and then that's it.
You don't have homebrew installed in your computer and you have an error message or whatever.
Go to ChatGPT four and ask how to solve the problem.
Okay.
So a then second line in order to install the Postgres database package, then we are going to install
the necessary packages to build our backend.
Okay.
So you will see here that we are installing fast API, which as you know is the main framework we are
going to use for backend.
And then we are going to use a local server and other packages.
Not many packages okay.
So just write this line in your a terminal.
Enter boom and the packages are there.
Then a.
This is an interesting step in order to create a file in your backend folder called requirements.txt
that includes the data of all the packages that you have installed.
You can write this line okay, don't worry, you don't need to understand everything we are doing right
now.
Remember what I told you.
So these are these are not important details right now.
Just bear with me.
In this initial round of the subsection, you just.
Pay attention, you know.
See what we are doing.
Then you will download the code, play around with the code in your computer and repeat and repeat all
the operations we are doing in this subsection until you feel comfortable and only then you go to the
next.
Okay.
But right now just relax and and see.
So we, uh, execute this line in order to create the requirements.txt file, which is I'm going to
show you.
This is the the code of the application in my computer.
Okay.
So this is Visual Studio Code.
This is the most popular editor right now.
Uh, and as you can see we have the main folder of the application which is called todo app.
And here we have two folders.
The 001 is the back end.
And the 002 is the front end.
Okay.
So in the 002 we have another folder uh which is called todo app.
Okay.
So this is not the front end uh folder.
This is the front end folder.
The one which is inside of the 002.
Okay.
But we are working right now in the back end.
So this is the code you are going to see when you download the code from the GitHub repository.
So this is the final code okay.
So uh I am going to uh go to walk step by step with you with this notebook as we look at the final code.
So this code is, is, is the code that, uh, you have after you complete all these steps.
Okay.
So when you have a second round of this project and you start from scratch, you can start without having
all these things here, uh, already for you.
Right.
So this thing, this line has created this file.
Okay.
And see how many packages are here.
Why are so many packages here if we only install, uh, half a dozen?
Because many of these, uh, packages have a lot of packages, uh, are built on top of a lot of packages.
Okay, so we are loading, uh, all of them there just with this line.
So next thing we need to do is to once we have installed the Postgres package in our computer, we need
to create the database we are going to use for this application.
For our Crud application, remember that the tasks you are going to load in your application are going
to be stored in a database.
Okay, so this is what it gives a this is what gives what we call persistence to your application.
So if you close your application today and you close your computer and open your computer to tomorrow,
and you take a look at the tasks, they are still there because the tasks are in the in the database.
They are stored in the database.
Okay.
So we are with this, uh, instruction.
We are creating a database called my database.
Okay.
You can call your database whatever you want.
But the name we are using is my database.
Okay.
And then a we are going to create the dot m file which is here.
And in this dot m file which as you know is going to store our credentials okay.
So secret credentials, we are going to uh enter the DB credentials.
Right now.
You don't have a user and you don't have a password yet.
So this is going to be a this and this is going to be empty for you.
Don't write Postgres here okay.
And then the name of the app is going to be full stack to app.
Okay.
So one important thing about this dot env file this is a secret file.
We don't want to load this file when we load this code to the GitHub repository.
How do we do that with this file here the git ignore a is the file that prevents.
Us to load secret files when we load this, uh, this, uh, folder into a GitHub repository.
So we already told you about that.
But just a quick reminder in this.
Gitignore file, we have the dot m file as the file we don't want to load to GitHub.
This is this is a we can show this this dot m file because there is no confidential information here.
Right.
But you don't show this to anyone.
And normally okay.
Because normally you are going to find here like your API keys of OpenAI or whatever other secret keys
that if you lose it, if you put it in the wrong hands, it can cause you a lot of money.
So don't do it.
Okay, so in the dot m file you enter the database credentials okay.
And then you create a config.
Py file.
And in this config file file we are going to a tell our application the types of data we want for this
uh dot m file.
So we are telling and the application a you know what this data uh we are going to use here a settings.
They need to be in one particular format.
So the name of the database has to be a string like a text.
And the name of the database, the database port is going to be an integer a C number etc..
This is not very important.
It's just we are just preparing our application in order to work with a database.
So don't worry by now with this, later when you go to this notebook for the second time, third time,
fourth time, whatever time you need, and if you have any doubts about what is this, what is do,
what is it doing, etc. just, you know, copy this code and paste it in GPT four and say, hey, GPT
four, what is this doing?
Explain this to me or this line, or where can I study more about pedantic etc. etc.?
Okay, you will see by now, don't worry about it.
Then we are going to start working in the main file of the application.
So we will create.
You will create a file called main dot pi okay.
If you are working with a with a code editor like we recommend especially Visual Studio Code which is
free, you can download for free, etc. you can create a file or a folder here very easily using this.
And then you can you can copy and paste code whatever you see.
You see here these lines with a pound sign.
These are comments.
So if you enter this sign before any line it will it will comment it out.
It will change the color to this green.
And the computer is not going to read this line of code.
It's not going to execute this line of code.
So in some cases like for example right now.
We are going to comment out this line.
And also this line.
So you you are going to write a pound sign here and here because these are referring to a part of the
application that we still don't have.
So if you don't enter here the pound sign you are going to have an error message.
Right.
So the rest of the content you see in this file is explained here.
What we are doing is we are creating a fast API application.
We are entering what we call the course configuration, which is something we will learn for uh, we
will learn about later.
And we are entering a couple of other things.
First, the global Https exception handle, uh, handler to handle errors and then a couple of endpoints
just to test this backend application okay.
So in order to start server to, to to start the backend, uh, the, the backend application in, in
your local server, in your terminal, you have to write this, uh, uh, instructions.
Uvicorn is our local server.
And with doing this we are telling him, okay, open this backend application.
Uh, now.
So start this application now and then once you have done this, if you go to this, uh, URL address,
you will see the back end application, which is nothing spectacular right now because we don't have
anything.
But just for you to understand that the local server is working.
Okay.
And in the terminal after you click enter, after this line you will see the name of the application.
Okay.
Uh, printed there just to, to check.
So we are going to stop the video now because it's a little bit, uh, too long.
And then we will continue with this, uh, with this uh, the second part of this subsection.