Original subtitles

1 1

In this lecture it's time 2

2

to take a first look at the application 3

3

that we're gonna build in this section. 4

4

We will also take a closer look 5

5

at these data files for this project 6

6

and we will also check out 7

7

the flow chart for this application. 8

8

So lets get started. 9

9

And this is the application 10

10

that we will build through out this section 11

11

and also the next one. 12

12

So it's called Bankist 13

13

and this is the demo version 14

14

that is actually live on bankist.netlify.app. 15

15

So I invite you to actually try out 16

16

this application together with me 17

17

as you watch this video 18

18

so to get a real good feeling for how it all works. 19

19

Now this looks a little bit empty 20

20

and so you can just basically log in. 21

21

So write JS and then the pin is 1111. 22

22

And so Bankist stands for minimalist banking 23

23

and so this is why we have this kind of banking. 24

24

So an online bank interface. 25

25

So we have all the movements here, 26

26

we have the overall balance of the account up here. 27

27

Then we have some summary data down here 28

28

and here on the right side 29

29

we have three options that we can do. 30

30

So we can transfer money to someone else, 31

31

we can request a loan from the bank 32

32

and we can close the account. 33

33

So lets request a loan here. 34

34

Lets say I need 35

35

1,000 euros. 36

36

So I click here 37

37

and then after some time it is approved 38

38

and it appears here as a deposit. 39

39

Okay. 40

40

Then I can also transfer money 41

41

and there is a user called JD. 42

42

And lets say I wanna transfer 5,000. 43

43

So lets try that. 44

44

And so now I have 5,000 less than I use to have. 45

45

Finally we can also sort these here. 46

46

So now they are sorted 47

47

and now they are back to normal. 48

48

And now lets go to that other account JD 49

49

with the pin of 50

50

2222 51

51

and so lets check out if she has a deposit of 5,000. 52

52

And indeed here it is. 53

53

We also see that this account here is in US dollars 54

54

and with the American formatting 55

55

while the other one was in euros. 56

56

And so that's something 57

57

that we're gonna take care of in the next section. 58

58

But in this section we will actually take care 59

59

of displaying all of these movements, 60

60

making these operations here possible, 61

61

calculating the statistics as well as the current balance 62

62

and so yah, I think it's gonna be a lot of fun 63

63

and I'm really happy with this application. 64

64

I think it looks amazing, 65

65

it also looks like a real world use case 66

66

and yah, overall 67

67

this is a great project for training Arrays 68

68

because we can do lots of these stuff 69

69

that you see here on the screen using Arrays. 70

70

Great, so now that you have a feeling 71

71

for how this application works 72

72

lets take a look at a flow chart that I designed 73

73

or that I build for this application. 74

74

So here is that flow chart for the Bankist application 75

75

and just like before in the Pig Game. 76

76

I built this one based on the flow of actions 77

77

that we just saw in that live version 78

78

of the Bankist application. 79

79

So starting there in the top left 80

80

as the user logs in. 81

81

Which is on of these yellow actions. 82

82

So all of these yellow elements here 83

83

mean some sort of action. 84

84

So when the log in action is performed 85

85

we check for the correct credentials 86

86

and if they are correct we display the UI 87

87

and then we also update the UI. 88

88

And so that means to calculate the balance, 89

89

calculate the summary, display the movements, 90

90

and then later on in the next section 91

91

we will also start and display a log out timer. 92

92

So all of these here happens right 93

93

at the beginning as the user logs in. 94

94

And so actually this part in the beginning here 95

95

everything that is inside the update UI 96

96

will be the first thing that we will do. 97

97

Okay, then from there we will implement 98

98

the kind of fake log in 99

99

and then we will take care of these other operations. 100

100

So probably we will come back to this flow chart by then. 101

101

But anyway this is already a very good overview 102

102

of all the steps that we have to implement 103

103

in order to build this application. 104

104

And you can spend some more time on this 105

105

and actually compare it 106

106

to the functionality of the application. 107

107

That's why one more time I included this flow chart 108

108

in these data files of this section. 109

109

Now this time just like in the Pig Game 110

110

I built this flow chart myself 111

111

because all that matters here in this project 112

112

is to build this application and learn all about Arrays. 113

113

But in the next big project 114

114

we will actually plan the entire application together 115

115

and I'll show you all the steps 116

116

that we have to go through in order to come up 117

117

with a flow chart like this. 118

118

So don't worry about designing a flow chart just yet. 119

119

We will learn how it works 120

120

and how to plan an application from the ground up. 121

121

But for now again my purpose with this flow chart 122

122

is just to give us a good overview, 123

123

so a good road map to actually go ahead 124

124

and implement all the features of this application. 125

125

And so then whenever we get lost 126

126

we can always just come back to this flow chart 127

127

and see exactly how the application works 128

128

and what we have left to implement. 129

129

Now okay, but with that being said 130

130

lets now go back to our code editor 131

131

and take a closer look at all these data files 132

132

that we have there. 133

133

So right at the top of our script 134

134

we have these four account objects. 135

135

Okay, and so this one here was the JS 136

136

that I just showed you in the demo 137

137

and so here then are the movements stored in that object. 138

138

We also have the pin 139

139

and later on we will also use this interest rate. 140

140

Now okay, now of course in the real world 141

141

you would want much more data 142

142

about each of the movements not just the value, right? 143

143

For example we would use the date 144

144

of each movement maybe a description and so on. 145

145

But here we really just want to work with Arrays 146

146

and so I'm keeping it very simple 147

147

but still at the same time fun to build, okay. 148

148

So yah, so one object for each account 149

149

and you could ask why not use a map instead of an object. 150

150

Well the thing is that we're gonna pretend 151

151

that all these data is coming from a Web API. 152

152

So a little bit like we talked about earlier. 153

153

And whenever we get data from an API 154

154

this data usually comes in a form of objects. 155

155

And so this is why we have objects here 156

156

and then finally the under array containing 157

157

all these account objects in there. 158

158

Remember that this is one of the most common ways 159

159

of organizing data in JavaScript applications. 160

160

And so that's why we are going to use it 161

161

through out this section to make this actually feel 162

162

a bit more like a real world application. 163

163

All right, so that's the data. 164

164

Lets take a look here a little bit at the other files 165

165

so as always we have the prettier configuration. 166

166

Then here's the flow chart that I just showed you 167

167

and so here you can take a look at it by yourself. 168

168

Then the index.html and this one is a lot more complex now 169

169

and we will actually need it to take some code out of there. 170

170

Then here we have the icon and the logo. 171

171

So like this icon you see here in the tab. 172

172

So the fav icon and finally we have the style. 173

173

And so here you can have some fun 174

174

and learn some CSS if you're interested in it. 175

175

So it's almost like 300 lines of code I think 176

176

that I build to style this application. 177

177

So you see I really put a lot of work 178

178

to make this application really fun. 179

179

And okay, so I think that's it for the 180

180

data files. 181

181

Just notice that I already selected all 182

182

of the elements that we're gonna need. 183

183

So you see it's a lot of stuff 184

184

and I'm gonna explain what each of these is 185

185

but what matters is that this way 186

186

we don't have to write all these code or cells 187

187

and so this makes development a little bit faster. 188

188

So a lot of elements here 189

189

and yah. 190

190

So I think that's it for this video, 191

191

I think you got a good overview of this project 192

192

for the section and once again please go ahead 193

193

and take a look at this URL by yourself 194

194

and use user JS 195

195

and pin 196

196

1111. 197

197

And then when you're familiar with how 198

198

the application works then lets move on.