Original subtitles

1 1

So in this video 2

2

we're gonna implement classes to manage the data about 3

3

our cycling and running workouts that are coming 4

4

from the user interface. 5

5

And so here we have this diagram again containing 6

6

the classes that we need to implement. 7

7

So we already discussed this before 8

8

and so let's use this as a base 9

9

for working on the classes now 10

10

but let's also at the same time, 11

11

take a look again at 12

12

our form to make this a little bit less abstract. 13

13

Okay. So what both the workouts have in common 14

14

so both running and cycling, 15

15

they have a distance and a duration. 16

16

Both of them also have a type of course 17

17

but that we will not have to encode anywhere because 18

18

for that we are already creating two different classes. 19

19

Then for running we have the cadence and for cycling 20

20

we have the elevation gain as you already know. 21

21

And then what's also gonna be coming to both workout types 22

22

is of course the coordinates that are basically coming 23

23

from the click on the map. 24

24

And so let's now start by implementing the parent class 25

25

for both these workout types. 26

26

And so remember that is simply gonna be called workout. 27

27

So workout. 28

28

And so again this one will take in the data 29

29

that is common to both the workouts. 30

30

And so that is the coordinates 31

31

lets just call it Coordes, the distance 32

32

and the duration. 33

33

Okay. 34

34

And then just as we learned previously, 35

35

we say this dot coordes 36

36

is equal the coordes that we get as an input. 37

37

This dot distance equals distance 38

38

and then the same for the duration. 39

39

Now we could also make these private fields 40

40

so basically private properties 41

41

but I think in this example we are good like this. 42

42

We just need to keep in mind later for the speed 43

43

and pace calculations that this one should be in kilometers 44

44

and this one should be in minutes. 45

45

Now what we also want for each workout object is a date. 46

46

So that's gonna be the date where the object is created. 47

47

So a date and let's simply set it to new date. 48

48

And so we need this one here 49

49

to then implement what we have here. 50

50

So this description of August 20, so here 51

51

so basically the date in which the workout happened. 52

52

Alright. 53

53

And then besides that we also need an ID. 54

54

And so that should be a unique identifier. 55

55

So remember way back in the bankers project 56

56

where we also had an array of objects. 57

57

And so here we will do the same eventually in our app class. 58

58

Remember now having that array of objects sometimes 59

59

we need to find an object in that array. 60

60

And so back then in the bankers project 61

61

we used defined or defined index methods for that. 62

62

Remember however these methods only work if there 63

63

is something by which we can search. 64

64

So as some kind of unique identifier 65

65

and in the bankers project there used to be simply the name 66

66

of the account owner but that's just not a good practice. 67

67

So instead any object should have some kind 68

68

of unique identifier 69

69

so that we can then later identify it using that ID. 70

70

So let's create a field for ID here as well 71

71

and always keep in mind that what we're doing here 72

72

so here and actually also here is using 73

73

a very modern specification of JavaScript 74

74

which is not even yet part 75

75

of the official JavaScript language. 76

76

Remember how I talked about that in the last section. 77

77

And so if we want to make sure that this is gonna work 78

78

at least with ES6 then we would have to do, 79

79

this dot date and then define that here 80

80

and the same here this dot ID 81

81

and then define that here as well. Right? 82

82

However, here I'm simply using cutting edge JavaScript 83

83

and so something that's probably gonna become part 84

84

of JavaScript pretty soon. 85

85

And so I think that it's perfectly fine to use 86

86

these class fields here already. 87

87

but now back to the ID and in the real world, 88

88

we usually always use some kind of library 89

89

in order to create good and unique ID numbers. 90

90

So usually we should never create IDs on our own 91

91

but always let some library take care of that because 92

92

this is a very important part of any application. 93

93

However right now I'm not gonna include 94

94

any library like that 95

95

and I will simply use the current date to create a new ID 96

96

so a new date, and then I will convert that 97

97

to a string and then simply take the last 10 numbers. 98

98

And so that should then be unique enough.All right. 99

99

So converting to a string 100

100

and then I can say slice then the last 10 numbers basically. 101

101

So this is the workout class 102

102

but we will never directly create a workout. 103

103

Instead we will always either create a running 104

104

or a cycling object. 105

105

So these are the child classes. 106

106

And so let's create them here. 107

107

Running extends workout 108

108

and also cycling, 109

109

so class cycling extends workout as well. 110

110

Okay. Then here we also need a constructor 111

111

and remember that this one should take 112

112

in the same data as the parent class 113

113

and then plus the additional properties 114

114

that we want to set on a running object. 115

115

So coordinates distance duration 116

116

and then remember the cadence, 117

117

right? 118

118

So that is what's unique. 119

119

Well let's do that here actually. 120

120

So that is the part that is unique about running. 121

121

Then here we need to call the superclass with these three 122

122

okay. So the common ones that are coming to the parent class 123

123

and this will then initialize the disc keyword 124

124

and then here we can say 125

125

this dot cadence 126

126

is the incoming cadence. 127

127

And then let simply copy this also for cycling 128

128

and here what changes is the elevation gain. 129

129

So let's check out our diagram here. 130

130

And so we already have these five. 131

131

so we have ID and date actually as fields 132

132

and then distance duration and coordinates 133

133

we define them in the constructor method. 134

134

Then for the running and cycling 135

135

we already defined the cadence and the elevation gain. 136

136

Now what's missing here is for running the pace 137

137

and then for cycling the speed. 138

138

And so let's actually calculate both of them 139

139

in each of the class. 140

140

So in this one here let's create a method 141

141

for calculating the pace. 142

142

So calcpace and no longer calcH for a change. 143

143

And so the pace is usually defined in minutes per kilometer. 144

144

And again that's unless you are in the US 145

145

which probably uses miles per kilometer. 146

146

So of course you can also use your distance here in miles. 147

147

But anyway all we need to do is to now create this dot pace. 148

148

So adding this in your property basically 149

149

and then all we need do is this dot duration 150

150

which is the minutes and then divided by kilometers 151

151

and so that is the distance. 152

152

So this dot distance then that's actually it. 153

153

All right. 154

154

Now it might also be a good idea to return this data 155

155

in case someplace in our code we actually need this 156

156

but what we will do instead of relying on this return 157

157

is to simply call this method right here in the constructor. 158

158

And so remember how I said in the last section 159

159

that it's perfectly fine to call any code in a constructor 160

160

and so of course we can simply do this right here. 161

161

And in fact we did the same here in our app class 162

162

so here we also did a lot of different stuff 163

163

in the constructor 164

164

and we didn't even set any properties here right? 165

165

So we used the constructor here 166

166

to immediately calculate the pace 167

167

and so next up let's do the same here for the speed. 168

168

So the speed is measured in kilometers per hour. 169

169

And so this dot speed 170

170

so not calcspeed but speed 171

171

will be equal this distance 172

172

and then divided by the duration. 173

173

So the speed is basically the opposite of the pace. 174

174

So this one is duration by distance 175

175

and this one is distance by duration. 176

176

However this duration is not in minutes but in hours, right? 177

177

And so therefore we need to now first divide 178

178

this one here by 60, 179

179

and then we can also return this dot speed 180

180

even though right now that's not yet necessary, 181

181

because we are simply calling it right here 182

182

and we don't need to return value at this point. Okay. 183

183

Now let's just add a comment here. 184

184

So this one has 40 architecture 185

185

and then I'm adding like a small divider here. Alright. 186

186

And then let's actually test out these classes. 187

187

So let's create a run here 188

188

so that's new running 189

189

and let's see what this class needs. 190

190

So we need coordinates 191

191

and so that's gonna be an array of coordinates 192

192

and that's just specified as here. 193

193

So basically kind of as documentation 194

194

so an array of latitude and longitude 195

195

and so if we have some other developers they will 196

196

then know exactly what this coordinates should look like. 197

197

And there are other more fancy ways 198

198

of writing documentation, 199

199

but maybe we will explore that a bit later in the course. 200

200

But anyway let's pass in some array here 201

201

of latitude 39 and longitude minus 12 202

202

and this should then be somewhere in Portugal. 203

203

Then next we have the distance 204

204

and let's say 5.2 kilometers and 24 minutes 205

205

and with 178 steps per minute. 206

206

And let's actually do the same for cycling as well 207

207

so how do we call this? 208

208

Is it a cycle one? Maybe it's a cycling like this 209

209

so let's use the same coordinates 210

210

and then here let's say we did 27 kilometers in 95 minutes 211

211

and the elevation gain was 523 meters, 212

212

all right? 213

213

And now we can lock both through the console really quick. 214

214

And so again this one here 215

215

is not really part of the application, Okay. 216

216

This is just to experiment if our classes 217

217

are indeed working as expected. 218

218

So going to our application 219

219

then you see here that we have our running and our cycling. 220

220

So indeed we have all the data that we specified 221

221

that includes the date. 222

222

Then here the ID looks a little bit off 223

223

and the reason for that is that I basically used a new date 224

224

which is gonna be an object 225

225

and so transforming that object to a string 226

226

will then basically become all of this here. 227

227

So this string and so we then took these last characters 228

228

but let's fix that in a minute. 229

229

But anyway here we have to pace calculated as well 230

230

and you see that this is of the type running 231

231

and then in the prototype we indeed have the calcpace method 232

232

that we just defined previously. 233

233

And in cycling we should of course have 234

234

the calcspeed method. 235

235

And here it is. Okay. 236

236

And of course this one itself has another prototype 237

237

which is then the workout itself. 238

238

This one doesn't have any methods yet 239

239

but we will add them a little bit later 240

240

as we keep moving on in a project. 241

241

Lets now fix this ID here very quick 242

242

and so instead of using new date 243

243

we are gonna use date dot now 244

244

which remember simply gives us 245

245

the current time stamp of right now. 246

246

And so that will now hopefully fix it. 247

247

And to see that here we have this ID 248

248

and then here we also have the ID 249

249

but right now they are actually exactly the same. 250

250

And so basically that happened because 251

251

they were created at the same time. 252

252

But then later in the real world 253

253

as we used our application of course 254

254

it's gonna be impossible to create two new objects 255

255

at the same time. 256

256

And so then that's gonna work just fine. 257

257

However as I said previously, 258

258

when you are really working on the real world 259

259

then probably you have many users using 260

260

the same application, right? 261

261

And then of course some users can create objects 262

262

at the same time 263

263

and so by then relying 264

264

on the time to create ID's is gonna be a really bad idea. 265

265

All right. 266

266

So let's get rid of these experiments here. 267

267

And so for now at least our classes here are complete. 268

268

As I said we will keep adding some more stuff to them, 269

269

but for now we're fine. 270

270

And so with this we are now ready to move on 271

271

to the next video where we will then use these classes 272

272

to actually create work outs from the form.