In this lecture it's time
to take a first look at the application
that we're gonna build in this section.
We will also take a closer look
at these data files for this project
and we will also check out
the flow chart for this application.
So lets get started.
And this is the application
that we will build through out this section
and also the next one.
So it's called Bankist
and this is the demo version
that is actually live on bankist.netlify.app.
So I invite you to actually try out
this application together with me
as you watch this video
so to get a real good feeling for how it all works.
Now this looks a little bit empty
and so you can just basically log in.
So write JS and then the pin is 1111.
And so Bankist stands for minimalist banking
and so this is why we have this kind of banking.
So an online bank interface.
So we have all the movements here,
we have the overall balance of the account up here.
Then we have some summary data down here
and here on the right side
we have three options that we can do.
So we can transfer money to someone else,
we can request a loan from the bank
and we can close the account.
So lets request a loan here.
Lets say I need
1,000 euros.
So I click here
and then after some time it is approved
and it appears here as a deposit.
Okay.
Then I can also transfer money
and there is a user called JD.
And lets say I wanna transfer 5,000.
So lets try that.
And so now I have 5,000 less than I use to have.
Finally we can also sort these here.
So now they are sorted
and now they are back to normal.
And now lets go to that other account JD
with the pin of
2222
and so lets check out if she has a deposit of 5,000.
And indeed here it is.
We also see that this account here is in US dollars
and with the American formatting
while the other one was in euros.
And so that's something
that we're gonna take care of in the next section.
But in this section we will actually take care
of displaying all of these movements,
making these operations here possible,
calculating the statistics as well as the current balance
and so yah, I think it's gonna be a lot of fun
and I'm really happy with this application.
I think it looks amazing,
it also looks like a real world use case
and yah, overall
this is a great project for training Arrays
because we can do lots of these stuff
that you see here on the screen using Arrays.
Great, so now that you have a feeling
for how this application works
lets take a look at a flow chart that I designed
or that I build for this application.
So here is that flow chart for the Bankist application
and just like before in the Pig Game.
I built this one based on the flow of actions
that we just saw in that live version
of the Bankist application.
So starting there in the top left
as the user logs in.
Which is on of these yellow actions.
So all of these yellow elements here
mean some sort of action.
So when the log in action is performed
we check for the correct credentials
and if they are correct we display the UI
and then we also update the UI.
And so that means to calculate the balance,
calculate the summary, display the movements,
and then later on in the next section
we will also start and display a log out timer.
So all of these here happens right
at the beginning as the user logs in.
And so actually this part in the beginning here
everything that is inside the update UI
will be the first thing that we will do.
Okay, then from there we will implement
the kind of fake log in
and then we will take care of these other operations.
So probably we will come back to this flow chart by then.
But anyway this is already a very good overview
of all the steps that we have to implement
in order to build this application.
And you can spend some more time on this
and actually compare it
to the functionality of the application.
That's why one more time I included this flow chart
in these data files of this section.
Now this time just like in the Pig Game
I built this flow chart myself
because all that matters here in this project
is to build this application and learn all about Arrays.
But in the next big project
we will actually plan the entire application together
and I'll show you all the steps
that we have to go through in order to come up
with a flow chart like this.
So don't worry about designing a flow chart just yet.
We will learn how it works
and how to plan an application from the ground up.
But for now again my purpose with this flow chart
is just to give us a good overview,
so a good road map to actually go ahead
and implement all the features of this application.
And so then whenever we get lost
we can always just come back to this flow chart
and see exactly how the application works
and what we have left to implement.
Now okay, but with that being said
lets now go back to our code editor
and take a closer look at all these data files
that we have there.
So right at the top of our script
we have these four account objects.
Okay, and so this one here was the JS
that I just showed you in the demo
and so here then are the movements stored in that object.
We also have the pin
and later on we will also use this interest rate.
Now okay, now of course in the real world
you would want much more data
about each of the movements not just the value, right?
For example we would use the date
of each movement maybe a description and so on.
But here we really just want to work with Arrays
and so I'm keeping it very simple
but still at the same time fun to build, okay.
So yah, so one object for each account
and you could ask why not use a map instead of an object.
Well the thing is that we're gonna pretend
that all these data is coming from a Web API.
So a little bit like we talked about earlier.
And whenever we get data from an API
this data usually comes in a form of objects.
And so this is why we have objects here
and then finally the under array containing
all these account objects in there.
Remember that this is one of the most common ways
of organizing data in JavaScript applications.
And so that's why we are going to use it
through out this section to make this actually feel
a bit more like a real world application.
All right, so that's the data.
Lets take a look here a little bit at the other files
so as always we have the prettier configuration.
Then here's the flow chart that I just showed you
and so here you can take a look at it by yourself.
Then the index.html and this one is a lot more complex now
and we will actually need it to take some code out of there.
Then here we have the icon and the logo.
So like this icon you see here in the tab.
So the fav icon and finally we have the style.
And so here you can have some fun
and learn some CSS if you're interested in it.
So it's almost like 300 lines of code I think
that I build to style this application.
So you see I really put a lot of work
to make this application really fun.
And okay, so I think that's it for the
data files.
Just notice that I already selected all
of the elements that we're gonna need.
So you see it's a lot of stuff
and I'm gonna explain what each of these is
but what matters is that this way
we don't have to write all these code or cells
and so this makes development a little bit faster.
So a lot of elements here
and yah.
So I think that's it for this video,
I think you got a good overview of this project
for the section and once again please go ahead
and take a look at this URL by yourself
and use user JS
and pin
1111.
And then when you're familiar with how
the application works then lets move on.