Welcome back, my friends, to another lecture today, we are going to start start talking about the
most important part and that is what we are going to choose for our architecture now, for the dice
game, for the to do list.
We didn't have any architecture, but now we're going to use some architecture.
These maybe it's overkill for this project, but you can learn it and you can apply it for the future
project or for the bigger project in your in future.
For example, if you work somewhere and you see this, you will know what is going on right now for
I'm not going to give you a PowerPoint presentation for that reason.
I have on my blog, I have on my field recording that I have this JavaScript calories up.
So if you open this, you can read pretty much what this app is doing, how this app is set up.
So I'm just going to read a couple of things now.
This is everything that we explained last time, how we add things, how this app works.
Now, this is the part that you can read it to see how the percentage is and how we do this things right.
How they calculate it.
So these have given some example.
Now, our first part is to do list, but I'm going to be back here.
I just wanted to talk about the architecture.
So for our application, we will use modules.
Now, our application application will have a modular architecture and that is the most important for
any programming language, not just JavaScript.
When we have modules, it's easy.
The code is cleaner.
We can change some code in some place and that will not affect the other.
It will not bubble it right.
It's it's not going to affect the other modules.
So that is why we use this modular architecture.
And the definition is referring to the design of any composed or separate content component that can
be connected together.
Right.
We can connect these modules together.
The essence and usability of the modular architecture are that you can replace or add any new component
module without affecting the rest of the system.
Now, one more thing is that the modules enabled data encapsulation.
So before reading this poor data is encapsulation is simply hiding your function, simply hiding your
parameters, simply hiding from anyone else to see it, use it to manipulate, to add some code, to
do some damage.
Right.
That is data encapsulation.
And that is a very basic concept.
But maybe the name is going to give you confusion.
Right.
But it pretty much it is what I'm trying to see, protect our application and put the things private.
No one will be able to access them because they're private.
Right.
Public is something that we just giving access to anyone.
So their public records.
Right.
In every country, you can find some things publicly available to the people.
But some of the things you can't, for example, where he lives, what is his phone number, his email
address where, I don't know, his bank account.
That is private.
Right.
So that is pretty much a encapsulation.
He's also known as data hidings.
It's a machine that he's used to keep the data hidden from the user.
Right.
Therefore, the user can only perform a restricted set of operation on the hidden modules and functions.
Right.
That's pretty much it.
Now we're going to have three modules in our architecture.
The first will be graphical user interface.
And this is pretty much the graphical user interface with this is the graphical everything that we see,
everything that we interact with, the user that interacts with the application that is considered as
a graphical user interface.
Now we have the main app module and the calories module.
So this calories module will be for anything related with computing the calories adding, burning the
calories percentage here in this module.
We will do that mean that module will be connection between these two modules.
Right.
We will not be able to access the graphical user interface, but we this module can access public functions.
So we are going to write private functions here in public, private and public, private and public.
So these mean module will be like a bridge.
It will connect these two parts.
So I hope I am very clear about this.
So we're going to have three modules, calories module that will deal with the calories graphical user
application module that will deal with everything that we see here.
Right.
So the percentage, the amount of here, here where we go there.
Right.
This is not finished, but that's a graphical representation.
And what else so I'm going to go back to the first to do list, so we are going to cover this in sections.
I'm not going to do in one go.
It's really it's going to be hard for you and it's going to be hard for me to explain it in one go if
I don't separate this.
So what I'm for creating this first to do list.
So what we are doing, we're going to add event listeners to the button here.
Right.
So we're going to add event listener to this program, because what we are trying basically to save
data and unclick I just want to have a listener there and I don't know why is this open because I don't
need it for this lecture now.
So we're going to add event listener.
We're going to store the data somewhere.
Right.
And that will be pretty much in the calories application.
Probably we're going to save the data internally and display the result.
Right.
This is the result.
So after we save this, bologna's it, right.
Spagetti.
The graphical user interface will kick in display this that's I need separate modules now.
Compute the calories that are added, burn it in a percentage and update them in a meina.
So these here number four, it's going to do with two modules.
The first module will be the calories.
Second module will be the graphical user interface, but the bridge will be the main controller.
So that's pretty much it.
So we have the main module will be the bridge between them.
So here lether maybe I will add at the end, you know, maybe I will add some links and this is how
our application will look.
So don't be afraid now don't just start looking.
But here, user inputs, calories, food or exercise in here in the app UI controller, we're going
to do this functions in the main control or we're going to do this function in a calorie controller.
We're going to do this function.
Note that some of the functions, names we will probably change or they will remain the same.
Doesn't matter.
They're just names and here is a click or Quebrada.
So we're going to use you will see you will you.
We already have done the mouse click stuff like that but we will do the keyboard this time and that
and then fire for adding or deleting items.
Right.
Because when we add item and after that we need to delete this item.
So pretty much good stuff right now.
This is the architecture.
I've used some flowcharts here.
You can find flowcharts on the Internet and I suggest you for every project you put before you doing
put it in a graphical way.
Right.
You know what's going on, what will happen.
So this domain controller is connection between these two.
It's a hub that connects this to write the request by your controller, get the input from the form
and after display the result back to the UI controller.
Right.
So I'm getting the input and I'm displaying back.
So this is communicating and this one is communicating, right.
Because we cannot connect these two I mean, these two straight away.
So that's why the main controller will have our will be the connection between these two modules.
So I hope you understand.
So this is the to do list that we're going to work on.
You can go back and see what we are doing and say, OK, now we're going to at the event.
Listen, we got a story today that we're going to save the data and that's pretty much what we're going
to do.
I suggest you to always refer to this document because I don't want to do a PowerPoint presentation
when I can have it in some block like this is not mandatory.
You already read it.
You can parse it.
You can read it from here.
You don't have to go to the link.
Right.
Not going to provide even a link.
So you can go to my website and get this JavaScript calories app, and that's pretty much it.
You can search it on top.
That's very much it.
So thank you for watching.
I hope I'm going to see you in the next one.
And this is not going to be easy or it's going to be very hard part for it's going to be more complex,
more advanced than previous parts, but it's going to benefit you if you go from the first lecture until
the last one.
So that's pretty much it.
Thank you.
And I will see you in the next one.