Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,579 --> 00:00:03,130
In this lecture it's time
2
00:00:03,130 --> 00:00:05,600
to take a first look at the application
3
00:00:05,600 --> 00:00:08,560
that we're gonna build in this section.
4
00:00:08,560 --> 00:00:10,790
We will also take a closer look
5
00:00:10,790 --> 00:00:13,720
at these data files for this project
6
00:00:13,720 --> 00:00:15,490
and we will also check out
7
00:00:15,490 --> 00:00:18,710
the flow chart for this application.
8
00:00:18,710 --> 00:00:20,353
So lets get started.
9
00:00:22,080 --> 00:00:23,763
And this is the application
10
00:00:23,763 --> 00:00:26,610
that we will build through out this section
11
00:00:26,610 --> 00:00:28,640
and also the next one.
12
00:00:28,640 --> 00:00:30,090
So it's called Bankist
13
00:00:31,340 --> 00:00:32,900
and this is the demo version
14
00:00:32,900 --> 00:00:37,630
that is actually live on bankist.netlify.app.
15
00:00:37,630 --> 00:00:39,990
So I invite you to actually try out
16
00:00:39,990 --> 00:00:41,960
this application together with me
17
00:00:41,960 --> 00:00:43,610
as you watch this video
18
00:00:43,610 --> 00:00:47,840
so to get a real good feeling for how it all works.
19
00:00:47,840 --> 00:00:50,090
Now this looks a little bit empty
20
00:00:50,090 --> 00:00:53,380
and so you can just basically log in.
21
00:00:53,380 --> 00:00:57,450
So write JS and then the pin is 1111.
22
00:00:57,450 --> 00:01:01,400
And so Bankist stands for minimalist banking
23
00:01:01,400 --> 00:01:05,780
and so this is why we have this kind of banking.
24
00:01:05,780 --> 00:01:08,530
So an online bank interface.
25
00:01:08,530 --> 00:01:11,373
So we have all the movements here,
26
00:01:12,370 --> 00:01:15,910
we have the overall balance of the account up here.
27
00:01:15,910 --> 00:01:18,660
Then we have some summary data down here
28
00:01:18,660 --> 00:01:20,460
and here on the right side
29
00:01:20,460 --> 00:01:23,180
we have three options that we can do.
30
00:01:23,180 --> 00:01:26,210
So we can transfer money to someone else,
31
00:01:26,210 --> 00:01:28,510
we can request a loan from the bank
32
00:01:28,510 --> 00:01:30,810
and we can close the account.
33
00:01:30,810 --> 00:01:32,970
So lets request a loan here.
34
00:01:32,970 --> 00:01:34,240
Lets say I need
35
00:01:35,130 --> 00:01:36,453
1,000 euros.
36
00:01:37,430 --> 00:01:38,263
So I click here
37
00:01:38,263 --> 00:01:40,820
and then after some time it is approved
38
00:01:40,820 --> 00:01:43,343
and it appears here as a deposit.
39
00:01:44,740 --> 00:01:45,650
Okay.
40
00:01:45,650 --> 00:01:47,800
Then I can also transfer money
41
00:01:47,800 --> 00:01:50,903
and there is a user called JD.
42
00:01:51,870 --> 00:01:55,720
And lets say I wanna transfer 5,000.
43
00:01:55,720 --> 00:01:57,400
So lets try that.
44
00:01:57,400 --> 00:02:00,973
And so now I have 5,000 less than I use to have.
45
00:02:02,330 --> 00:02:05,740
Finally we can also sort these here.
46
00:02:05,740 --> 00:02:07,390
So now they are sorted
47
00:02:07,390 --> 00:02:10,040
and now they are back to normal.
48
00:02:10,040 --> 00:02:13,350
And now lets go to that other account JD
49
00:02:13,350 --> 00:02:15,389
with the pin of
50
00:02:15,389 --> 00:02:16,970
2222
51
00:02:16,970 --> 00:02:21,953
and so lets check out if she has a deposit of 5,000.
52
00:02:23,400 --> 00:02:25,840
And indeed here it is.
53
00:02:25,840 --> 00:02:29,490
We also see that this account here is in US dollars
54
00:02:29,490 --> 00:02:31,470
and with the American formatting
55
00:02:31,470 --> 00:02:33,810
while the other one was in euros.
56
00:02:33,810 --> 00:02:34,780
And so that's something
57
00:02:34,780 --> 00:02:38,120
that we're gonna take care of in the next section.
58
00:02:38,120 --> 00:02:40,650
But in this section we will actually take care
59
00:02:40,650 --> 00:02:43,570
of displaying all of these movements,
60
00:02:43,570 --> 00:02:46,700
making these operations here possible,
61
00:02:46,700 --> 00:02:51,570
calculating the statistics as well as the current balance
62
00:02:51,570 --> 00:02:55,640
and so yah, I think it's gonna be a lot of fun
63
00:02:55,640 --> 00:02:58,600
and I'm really happy with this application.
64
00:02:58,600 --> 00:03:00,760
I think it looks amazing,
65
00:03:00,760 --> 00:03:04,080
it also looks like a real world use case
66
00:03:04,080 --> 00:03:06,230
and yah, overall
67
00:03:06,230 --> 00:03:09,210
this is a great project for training Arrays
68
00:03:09,210 --> 00:03:11,140
because we can do lots of these stuff
69
00:03:11,140 --> 00:03:14,840
that you see here on the screen using Arrays.
70
00:03:14,840 --> 00:03:17,190
Great, so now that you have a feeling
71
00:03:17,190 --> 00:03:19,220
for how this application works
72
00:03:19,220 --> 00:03:22,710
lets take a look at a flow chart that I designed
73
00:03:22,710 --> 00:03:25,193
or that I build for this application.
74
00:03:26,700 --> 00:03:30,900
So here is that flow chart for the Bankist application
75
00:03:30,900 --> 00:03:33,650
and just like before in the Pig Game.
76
00:03:33,650 --> 00:03:36,900
I built this one based on the flow of actions
77
00:03:36,900 --> 00:03:39,660
that we just saw in that live version
78
00:03:39,660 --> 00:03:41,770
of the Bankist application.
79
00:03:41,770 --> 00:03:43,950
So starting there in the top left
80
00:03:43,950 --> 00:03:45,800
as the user logs in.
81
00:03:45,800 --> 00:03:48,500
Which is on of these yellow actions.
82
00:03:48,500 --> 00:03:50,320
So all of these yellow elements here
83
00:03:50,320 --> 00:03:52,320
mean some sort of action.
84
00:03:52,320 --> 00:03:54,800
So when the log in action is performed
85
00:03:54,800 --> 00:03:57,340
we check for the correct credentials
86
00:03:57,340 --> 00:03:59,870
and if they are correct we display the UI
87
00:04:00,780 --> 00:04:03,833
and then we also update the UI.
88
00:04:05,140 --> 00:04:07,400
And so that means to calculate the balance,
89
00:04:07,400 --> 00:04:10,750
calculate the summary, display the movements,
90
00:04:10,750 --> 00:04:12,720
and then later on in the next section
91
00:04:12,720 --> 00:04:16,690
we will also start and display a log out timer.
92
00:04:16,690 --> 00:04:18,810
So all of these here happens right
93
00:04:18,810 --> 00:04:21,670
at the beginning as the user logs in.
94
00:04:21,670 --> 00:04:24,010
And so actually this part in the beginning here
95
00:04:24,010 --> 00:04:26,930
everything that is inside the update UI
96
00:04:26,930 --> 00:04:29,660
will be the first thing that we will do.
97
00:04:29,660 --> 00:04:31,930
Okay, then from there we will implement
98
00:04:31,930 --> 00:04:34,900
the kind of fake log in
99
00:04:34,900 --> 00:04:38,240
and then we will take care of these other operations.
100
00:04:38,240 --> 00:04:41,793
So probably we will come back to this flow chart by then.
101
00:04:42,640 --> 00:04:45,800
But anyway this is already a very good overview
102
00:04:45,800 --> 00:04:48,440
of all the steps that we have to implement
103
00:04:48,440 --> 00:04:50,930
in order to build this application.
104
00:04:50,930 --> 00:04:53,470
And you can spend some more time on this
105
00:04:53,470 --> 00:04:54,680
and actually compare it
106
00:04:54,680 --> 00:04:57,170
to the functionality of the application.
107
00:04:57,170 --> 00:05:00,500
That's why one more time I included this flow chart
108
00:05:00,500 --> 00:05:03,820
in these data files of this section.
109
00:05:03,820 --> 00:05:06,610
Now this time just like in the Pig Game
110
00:05:06,610 --> 00:05:09,100
I built this flow chart myself
111
00:05:09,100 --> 00:05:12,000
because all that matters here in this project
112
00:05:12,000 --> 00:05:16,250
is to build this application and learn all about Arrays.
113
00:05:16,250 --> 00:05:18,500
But in the next big project
114
00:05:18,500 --> 00:05:22,000
we will actually plan the entire application together
115
00:05:22,000 --> 00:05:24,040
and I'll show you all the steps
116
00:05:24,040 --> 00:05:27,260
that we have to go through in order to come up
117
00:05:27,260 --> 00:05:29,810
with a flow chart like this.
118
00:05:29,810 --> 00:05:33,980
So don't worry about designing a flow chart just yet.
119
00:05:33,980 --> 00:05:35,580
We will learn how it works
120
00:05:35,580 --> 00:05:39,570
and how to plan an application from the ground up.
121
00:05:39,570 --> 00:05:43,360
But for now again my purpose with this flow chart
122
00:05:43,360 --> 00:05:46,040
is just to give us a good overview,
123
00:05:46,040 --> 00:05:49,490
so a good road map to actually go ahead
124
00:05:49,490 --> 00:05:53,430
and implement all the features of this application.
125
00:05:53,430 --> 00:05:55,860
And so then whenever we get lost
126
00:05:55,860 --> 00:05:58,770
we can always just come back to this flow chart
127
00:05:58,770 --> 00:06:01,580
and see exactly how the application works
128
00:06:01,580 --> 00:06:04,093
and what we have left to implement.
129
00:06:04,970 --> 00:06:07,060
Now okay, but with that being said
130
00:06:07,060 --> 00:06:09,870
lets now go back to our code editor
131
00:06:09,870 --> 00:06:12,800
and take a closer look at all these data files
132
00:06:12,800 --> 00:06:13,933
that we have there.
133
00:06:15,280 --> 00:06:17,290
So right at the top of our script
134
00:06:17,290 --> 00:06:20,670
we have these four account objects.
135
00:06:20,670 --> 00:06:24,800
Okay, and so this one here was the JS
136
00:06:24,800 --> 00:06:27,010
that I just showed you in the demo
137
00:06:27,010 --> 00:06:31,290
and so here then are the movements stored in that object.
138
00:06:31,290 --> 00:06:32,870
We also have the pin
139
00:06:32,870 --> 00:06:36,730
and later on we will also use this interest rate.
140
00:06:36,730 --> 00:06:39,610
Now okay, now of course in the real world
141
00:06:39,610 --> 00:06:41,700
you would want much more data
142
00:06:41,700 --> 00:06:46,290
about each of the movements not just the value, right?
143
00:06:46,290 --> 00:06:48,730
For example we would use the date
144
00:06:48,730 --> 00:06:52,780
of each movement maybe a description and so on.
145
00:06:52,780 --> 00:06:56,360
But here we really just want to work with Arrays
146
00:06:56,360 --> 00:06:59,120
and so I'm keeping it very simple
147
00:06:59,120 --> 00:07:02,993
but still at the same time fun to build, okay.
148
00:07:03,920 --> 00:07:07,980
So yah, so one object for each account
149
00:07:07,980 --> 00:07:12,980
and you could ask why not use a map instead of an object.
150
00:07:13,550 --> 00:07:16,120
Well the thing is that we're gonna pretend
151
00:07:16,120 --> 00:07:19,840
that all these data is coming from a Web API.
152
00:07:19,840 --> 00:07:23,020
So a little bit like we talked about earlier.
153
00:07:23,020 --> 00:07:25,880
And whenever we get data from an API
154
00:07:25,880 --> 00:07:29,600
this data usually comes in a form of objects.
155
00:07:29,600 --> 00:07:32,120
And so this is why we have objects here
156
00:07:32,120 --> 00:07:34,900
and then finally the under array containing
157
00:07:34,900 --> 00:07:37,350
all these account objects in there.
158
00:07:37,350 --> 00:07:40,080
Remember that this is one of the most common ways
159
00:07:40,080 --> 00:07:43,540
of organizing data in JavaScript applications.
160
00:07:43,540 --> 00:07:45,980
And so that's why we are going to use it
161
00:07:45,980 --> 00:07:49,310
through out this section to make this actually feel
162
00:07:49,310 --> 00:07:52,860
a bit more like a real world application.
163
00:07:52,860 --> 00:07:56,740
All right, so that's the data.
164
00:07:56,740 --> 00:08:01,740
Lets take a look here a little bit at the other files
165
00:08:01,870 --> 00:08:05,260
so as always we have the prettier configuration.
166
00:08:05,260 --> 00:08:08,210
Then here's the flow chart that I just showed you
167
00:08:08,210 --> 00:08:11,103
and so here you can take a look at it by yourself.
168
00:08:12,130 --> 00:08:17,130
Then the index.html and this one is a lot more complex now
169
00:08:17,610 --> 00:08:21,720
and we will actually need it to take some code out of there.
170
00:08:21,720 --> 00:08:23,993
Then here we have the icon and the logo.
171
00:08:24,920 --> 00:08:28,600
So like this icon you see here in the tab.
172
00:08:28,600 --> 00:08:32,380
So the fav icon and finally we have the style.
173
00:08:32,380 --> 00:08:34,140
And so here you can have some fun
174
00:08:35,290 --> 00:08:39,040
and learn some CSS if you're interested in it.
175
00:08:39,040 --> 00:08:42,460
So it's almost like 300 lines of code I think
176
00:08:42,460 --> 00:08:45,290
that I build to style this application.
177
00:08:45,290 --> 00:08:47,920
So you see I really put a lot of work
178
00:08:47,920 --> 00:08:50,990
to make this application really fun.
179
00:08:50,990 --> 00:08:54,917
And okay, so I think that's it for the
180
00:08:56,730 --> 00:08:57,860
data files.
181
00:08:57,860 --> 00:09:00,970
Just notice that I already selected all
182
00:09:00,970 --> 00:09:03,760
of the elements that we're gonna need.
183
00:09:03,760 --> 00:09:06,030
So you see it's a lot of stuff
184
00:09:06,030 --> 00:09:09,210
and I'm gonna explain what each of these is
185
00:09:09,210 --> 00:09:11,610
but what matters is that this way
186
00:09:11,610 --> 00:09:14,650
we don't have to write all these code or cells
187
00:09:14,650 --> 00:09:17,773
and so this makes development a little bit faster.
188
00:09:19,060 --> 00:09:20,510
So a lot of elements here
189
00:09:21,870 --> 00:09:23,253
and yah.
190
00:09:24,180 --> 00:09:26,920
So I think that's it for this video,
191
00:09:26,920 --> 00:09:29,940
I think you got a good overview of this project
192
00:09:29,940 --> 00:09:33,200
for the section and once again please go ahead
193
00:09:33,200 --> 00:09:37,450
and take a look at this URL by yourself
194
00:09:37,450 --> 00:09:39,470
and use user JS
195
00:09:39,470 --> 00:09:40,303
and pin
196
00:09:40,303 --> 00:09:41,213
1111.
197
00:09:42,213 --> 00:09:43,810
And then when you're familiar with how
198
00:09:43,810 --> 00:09:46,563
the application works then lets move on.
14358
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.