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.