WEBVTT 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.