Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,460 --> 00:00:02,690 So in this video 2 2 00:00:02,690 --> 00:00:06,100 we're gonna implement classes to manage the data about 3 3 00:00:06,100 --> 00:00:09,800 our cycling and running workouts that are coming 4 4 00:00:09,800 --> 00:00:11,343 from the user interface. 5 5 00:00:12,900 --> 00:00:16,920 And so here we have this diagram again containing 6 6 00:00:16,920 --> 00:00:19,480 the classes that we need to implement. 7 7 00:00:19,480 --> 00:00:22,220 So we already discussed this before 8 8 00:00:22,220 --> 00:00:24,770 and so let's use this as a base 9 9 00:00:24,770 --> 00:00:27,460 for working on the classes now 10 10 00:00:27,460 --> 00:00:29,700 but let's also at the same time, 11 11 00:00:29,700 --> 00:00:31,790 take a look again at 12 12 00:00:31,790 --> 00:00:35,313 our form to make this a little bit less abstract. 13 13 00:00:36,230 --> 00:00:40,310 Okay. So what both the workouts have in common 14 14 00:00:40,310 --> 00:00:42,440 so both running and cycling, 15 15 00:00:42,440 --> 00:00:45,830 they have a distance and a duration. 16 16 00:00:45,830 --> 00:00:49,130 Both of them also have a type of course 17 17 00:00:49,130 --> 00:00:52,130 but that we will not have to encode anywhere because 18 18 00:00:52,130 --> 00:00:55,920 for that we are already creating two different classes. 19 19 00:00:55,920 --> 00:01:00,070 Then for running we have the cadence and for cycling 20 20 00:01:00,070 --> 00:01:03,540 we have the elevation gain as you already know. 21 21 00:01:03,540 --> 00:01:07,380 And then what's also gonna be coming to both workout types 22 22 00:01:07,380 --> 00:01:11,760 is of course the coordinates that are basically coming 23 23 00:01:11,760 --> 00:01:14,420 from the click on the map. 24 24 00:01:14,420 --> 00:01:18,000 And so let's now start by implementing the parent class 25 25 00:01:18,000 --> 00:01:20,720 for both these workout types. 26 26 00:01:20,720 --> 00:01:25,223 And so remember that is simply gonna be called workout. 27 27 00:01:27,550 --> 00:01:28,863 So workout. 28 28 00:01:29,740 --> 00:01:32,670 And so again this one will take in the data 29 29 00:01:32,670 --> 00:01:35,390 that is common to both the workouts. 30 30 00:01:35,390 --> 00:01:38,830 And so that is the coordinates 31 31 00:01:38,830 --> 00:01:42,250 lets just call it Coordes, the distance 32 32 00:01:44,690 --> 00:01:46,653 and the duration. 33 33 00:01:48,708 --> 00:01:49,628 Okay. 34 34 00:01:49,628 --> 00:01:51,850 And then just as we learned previously, 35 35 00:01:51,850 --> 00:01:55,330 we say this dot coordes 36 36 00:01:55,330 --> 00:01:59,960 is equal the coordes that we get as an input. 37 37 00:01:59,960 --> 00:02:03,620 This dot distance equals distance 38 38 00:02:03,620 --> 00:02:07,713 and then the same for the duration. 39 39 00:02:08,670 --> 00:02:12,170 Now we could also make these private fields 40 40 00:02:12,170 --> 00:02:13,970 so basically private properties 41 41 00:02:14,850 --> 00:02:19,030 but I think in this example we are good like this. 42 42 00:02:19,030 --> 00:02:22,130 We just need to keep in mind later for the speed 43 43 00:02:22,130 --> 00:02:25,987 and pace calculations that this one should be in kilometers 44 44 00:02:25,987 --> 00:02:29,193 and this one should be in minutes. 45 45 00:02:30,070 --> 00:02:34,760 Now what we also want for each workout object is a date. 46 46 00:02:34,760 --> 00:02:38,503 So that's gonna be the date where the object is created. 47 47 00:02:40,250 --> 00:02:44,323 So a date and let's simply set it to new date. 48 48 00:02:45,550 --> 00:02:47,750 And so we need this one here 49 49 00:02:47,750 --> 00:02:50,720 to then implement what we have here. 50 50 00:02:50,720 --> 00:02:54,220 So this description of August 20, so here 51 51 00:02:55,360 --> 00:02:58,663 so basically the date in which the workout happened. 52 52 00:03:00,740 --> 00:03:01,573 Alright. 53 53 00:03:01,573 --> 00:03:04,760 And then besides that we also need an ID. 54 54 00:03:04,760 --> 00:03:08,050 And so that should be a unique identifier. 55 55 00:03:08,050 --> 00:03:11,450 So remember way back in the bankers project 56 56 00:03:11,450 --> 00:03:14,700 where we also had an array of objects. 57 57 00:03:14,700 --> 00:03:19,160 And so here we will do the same eventually in our app class. 58 58 00:03:19,160 --> 00:03:23,370 Remember now having that array of objects sometimes 59 59 00:03:23,370 --> 00:03:26,690 we need to find an object in that array. 60 60 00:03:26,690 --> 00:03:29,350 And so back then in the bankers project 61 61 00:03:29,350 --> 00:03:33,200 we used defined or defined index methods for that. 62 62 00:03:33,200 --> 00:03:36,990 Remember however these methods only work if there 63 63 00:03:36,990 --> 00:03:39,950 is something by which we can search. 64 64 00:03:39,950 --> 00:03:42,850 So as some kind of unique identifier 65 65 00:03:42,850 --> 00:03:46,530 and in the bankers project there used to be simply the name 66 66 00:03:46,530 --> 00:03:50,700 of the account owner but that's just not a good practice. 67 67 00:03:50,700 --> 00:03:53,720 So instead any object should have some kind 68 68 00:03:53,720 --> 00:03:55,630 of unique identifier 69 69 00:03:55,630 --> 00:03:59,173 so that we can then later identify it using that ID. 70 70 00:04:00,780 --> 00:04:04,510 So let's create a field for ID here as well 71 71 00:04:04,510 --> 00:04:08,780 and always keep in mind that what we're doing here 72 72 00:04:08,780 --> 00:04:11,950 so here and actually also here is using 73 73 00:04:11,950 --> 00:04:15,560 a very modern specification of JavaScript 74 74 00:04:15,560 --> 00:04:17,680 which is not even yet part 75 75 00:04:17,680 --> 00:04:19,870 of the official JavaScript language. 76 76 00:04:19,870 --> 00:04:23,490 Remember how I talked about that in the last section. 77 77 00:04:23,490 --> 00:04:26,880 And so if we want to make sure that this is gonna work 78 78 00:04:26,880 --> 00:04:31,200 at least with ES6 then we would have to do, 79 79 00:04:31,200 --> 00:04:35,440 this dot date and then define that here 80 80 00:04:35,440 --> 00:04:39,370 and the same here this dot ID 81 81 00:04:39,370 --> 00:04:42,393 and then define that here as well. Right? 82 82 00:04:43,720 --> 00:04:48,480 However, here I'm simply using cutting edge JavaScript 83 83 00:04:48,480 --> 00:04:51,350 and so something that's probably gonna become part 84 84 00:04:51,350 --> 00:04:54,120 of JavaScript pretty soon. 85 85 00:04:54,120 --> 00:04:56,780 And so I think that it's perfectly fine to use 86 86 00:04:56,780 --> 00:04:59,520 these class fields here already. 87 87 00:04:59,520 --> 00:05:03,059 but now back to the ID and in the real world, 88 88 00:05:03,059 --> 00:05:06,160 we usually always use some kind of library 89 89 00:05:06,160 --> 00:05:10,010 in order to create good and unique ID numbers. 90 90 00:05:10,010 --> 00:05:13,850 So usually we should never create IDs on our own 91 91 00:05:13,850 --> 00:05:17,350 but always let some library take care of that because 92 92 00:05:17,350 --> 00:05:20,670 this is a very important part of any application. 93 93 00:05:20,670 --> 00:05:23,200 However right now I'm not gonna include 94 94 00:05:23,200 --> 00:05:25,320 any library like that 95 95 00:05:25,320 --> 00:05:30,320 and I will simply use the current date to create a new ID 96 96 00:05:30,700 --> 00:05:33,610 so a new date, and then I will convert that 97 97 00:05:33,610 --> 00:05:37,710 to a string and then simply take the last 10 numbers. 98 98 00:05:37,710 --> 00:05:41,423 And so that should then be unique enough.All right. 99 99 00:05:42,350 --> 00:05:43,840 So converting to a string 100 100 00:05:44,830 --> 00:05:49,713 and then I can say slice then the last 10 numbers basically. 101 101 00:05:51,160 --> 00:05:53,450 So this is the workout class 102 102 00:05:53,450 --> 00:05:56,930 but we will never directly create a workout. 103 103 00:05:56,930 --> 00:06:00,120 Instead we will always either create a running 104 104 00:06:00,120 --> 00:06:01,763 or a cycling object. 105 105 00:06:02,620 --> 00:06:05,290 So these are the child classes. 106 106 00:06:05,290 --> 00:06:06,790 And so let's create them here. 107 107 00:06:07,720 --> 00:06:12,100 Running extends workout 108 108 00:06:14,040 --> 00:06:16,993 and also cycling, 109 109 00:06:18,190 --> 00:06:23,190 so class cycling extends workout as well. 110 110 00:06:25,220 --> 00:06:28,910 Okay. Then here we also need a constructor 111 111 00:06:28,910 --> 00:06:30,910 and remember that this one should take 112 112 00:06:30,910 --> 00:06:33,540 in the same data as the parent class 113 113 00:06:33,540 --> 00:06:36,110 and then plus the additional properties 114 114 00:06:36,110 --> 00:06:39,423 that we want to set on a running object. 115 115 00:06:40,600 --> 00:06:43,310 So coordinates distance duration 116 116 00:06:43,310 --> 00:06:46,160 and then remember the cadence, 117 117 00:06:47,840 --> 00:06:48,673 right? 118 118 00:06:49,610 --> 00:06:51,920 So that is what's unique. 119 119 00:06:51,920 --> 00:06:53,803 Well let's do that here actually. 120 120 00:06:54,730 --> 00:06:58,833 So that is the part that is unique about running. 121 121 00:07:00,570 --> 00:07:04,750 Then here we need to call the superclass with these three 122 122 00:07:06,970 --> 00:07:11,910 okay. So the common ones that are coming to the parent class 123 123 00:07:11,910 --> 00:07:14,680 and this will then initialize the disc keyword 124 124 00:07:14,680 --> 00:07:16,370 and then here we can say 125 125 00:07:16,370 --> 00:07:17,810 this dot cadence 126 126 00:07:19,400 --> 00:07:20,773 is the incoming cadence. 127 127 00:07:23,057 --> 00:07:27,370 And then let simply copy this also for cycling 128 128 00:07:27,370 --> 00:07:31,557 and here what changes is the elevation gain. 129 129 00:07:38,400 --> 00:07:41,930 So let's check out our diagram here. 130 130 00:07:41,930 --> 00:07:43,873 And so we already have these five. 131 131 00:07:45,240 --> 00:07:48,800 so we have ID and date actually as fields 132 132 00:07:48,800 --> 00:07:51,380 and then distance duration and coordinates 133 133 00:07:51,380 --> 00:07:53,603 we define them in the constructor method. 134 134 00:07:54,690 --> 00:07:56,730 Then for the running and cycling 135 135 00:07:56,730 --> 00:08:01,250 we already defined the cadence and the elevation gain. 136 136 00:08:01,250 --> 00:08:04,810 Now what's missing here is for running the pace 137 137 00:08:04,810 --> 00:08:06,973 and then for cycling the speed. 138 138 00:08:07,970 --> 00:08:10,800 And so let's actually calculate both of them 139 139 00:08:10,800 --> 00:08:12,393 in each of the class. 140 140 00:08:14,480 --> 00:08:18,090 So in this one here let's create a method 141 141 00:08:18,090 --> 00:08:19,723 for calculating the pace. 142 142 00:08:21,950 --> 00:08:26,950 So calcpace and no longer calcH for a change. 143 143 00:08:27,650 --> 00:08:32,650 And so the pace is usually defined in minutes per kilometer. 144 144 00:08:33,980 --> 00:08:37,330 And again that's unless you are in the US 145 145 00:08:37,330 --> 00:08:40,570 which probably uses miles per kilometer. 146 146 00:08:40,570 --> 00:08:45,110 So of course you can also use your distance here in miles. 147 147 00:08:45,110 --> 00:08:50,050 But anyway all we need to do is to now create this dot pace. 148 148 00:08:51,290 --> 00:08:53,950 So adding this in your property basically 149 149 00:08:53,950 --> 00:08:58,840 and then all we need do is this dot duration 150 150 00:08:58,840 --> 00:09:02,770 which is the minutes and then divided by kilometers 151 151 00:09:02,770 --> 00:09:04,573 and so that is the distance. 152 152 00:09:07,050 --> 00:09:11,480 So this dot distance then that's actually it. 153 153 00:09:11,480 --> 00:09:12,360 All right. 154 154 00:09:12,360 --> 00:09:16,690 Now it might also be a good idea to return this data 155 155 00:09:16,690 --> 00:09:20,570 in case someplace in our code we actually need this 156 156 00:09:20,570 --> 00:09:25,110 but what we will do instead of relying on this return 157 157 00:09:25,110 --> 00:09:28,853 is to simply call this method right here in the constructor. 158 158 00:09:30,210 --> 00:09:33,210 And so remember how I said in the last section 159 159 00:09:33,210 --> 00:09:37,730 that it's perfectly fine to call any code in a constructor 160 160 00:09:37,730 --> 00:09:42,113 and so of course we can simply do this right here. 161 161 00:09:42,950 --> 00:09:46,760 And in fact we did the same here in our app class 162 162 00:09:46,760 --> 00:09:50,180 so here we also did a lot of different stuff 163 163 00:09:50,180 --> 00:09:51,449 in the constructor 164 164 00:09:51,449 --> 00:09:56,449 and we didn't even set any properties here right? 165 165 00:09:56,952 --> 00:09:58,910 So we used the constructor here 166 166 00:09:58,910 --> 00:10:01,560 to immediately calculate the pace 167 167 00:10:01,560 --> 00:10:05,783 and so next up let's do the same here for the speed. 168 168 00:10:10,340 --> 00:10:15,260 So the speed is measured in kilometers per hour. 169 169 00:10:15,260 --> 00:10:16,640 And so this dot speed 170 170 00:10:19,100 --> 00:10:21,260 so not calcspeed but speed 171 171 00:10:22,380 --> 00:10:24,740 will be equal this distance 172 172 00:10:27,530 --> 00:10:29,720 and then divided by the duration. 173 173 00:10:29,720 --> 00:10:33,320 So the speed is basically the opposite of the pace. 174 174 00:10:33,320 --> 00:10:35,330 So this one is duration by distance 175 175 00:10:35,330 --> 00:10:37,483 and this one is distance by duration. 176 176 00:10:38,760 --> 00:10:43,207 However this duration is not in minutes but in hours, right? 177 177 00:10:44,600 --> 00:10:48,080 And so therefore we need to now first divide 178 178 00:10:48,080 --> 00:10:49,653 this one here by 60, 179 179 00:10:51,594 --> 00:10:54,810 and then we can also return this dot speed 180 180 00:10:54,810 --> 00:10:58,960 even though right now that's not yet necessary, 181 181 00:10:58,960 --> 00:11:01,270 because we are simply calling it right here 182 182 00:11:02,680 --> 00:11:07,680 and we don't need to return value at this point. Okay. 183 183 00:11:07,870 --> 00:11:10,823 Now let's just add a comment here. 184 184 00:11:15,830 --> 00:11:18,410 So this one has 40 architecture 185 185 00:11:18,410 --> 00:11:23,410 and then I'm adding like a small divider here. Alright. 186 186 00:11:23,500 --> 00:11:27,163 And then let's actually test out these classes. 187 187 00:11:29,980 --> 00:11:31,620 So let's create a run here 188 188 00:11:33,900 --> 00:11:35,510 so that's new running 189 189 00:11:38,780 --> 00:11:41,770 and let's see what this class needs. 190 190 00:11:41,770 --> 00:11:43,250 So we need coordinates 191 191 00:11:43,250 --> 00:11:45,750 and so that's gonna be an array of coordinates 192 192 00:11:46,910 --> 00:11:49,200 and that's just specified as here. 193 193 00:11:49,200 --> 00:11:52,530 So basically kind of as documentation 194 194 00:11:52,530 --> 00:11:56,120 so an array of latitude and longitude 195 195 00:11:56,120 --> 00:11:58,580 and so if we have some other developers they will 196 196 00:11:58,580 --> 00:12:02,270 then know exactly what this coordinates should look like. 197 197 00:12:02,270 --> 00:12:04,130 And there are other more fancy ways 198 198 00:12:04,130 --> 00:12:06,260 of writing documentation, 199 199 00:12:06,260 --> 00:12:09,743 but maybe we will explore that a bit later in the course. 200 200 00:12:11,040 --> 00:12:14,170 But anyway let's pass in some array here 201 201 00:12:14,170 --> 00:12:17,770 of latitude 39 and longitude minus 12 202 202 00:12:17,770 --> 00:12:20,070 and this should then be somewhere in Portugal. 203 203 00:12:20,949 --> 00:12:23,343 Then next we have the distance 204 204 00:12:23,343 --> 00:12:28,343 and let's say 5.2 kilometers and 24 minutes 205 205 00:12:29,040 --> 00:12:33,533 and with 178 steps per minute. 206 206 00:12:34,730 --> 00:12:37,230 And let's actually do the same for cycling as well 207 207 00:12:40,510 --> 00:12:42,620 so how do we call this? 208 208 00:12:42,620 --> 00:12:47,410 Is it a cycle one? Maybe it's a cycling like this 209 209 00:12:48,640 --> 00:12:50,710 so let's use the same coordinates 210 210 00:12:50,710 --> 00:12:55,597 and then here let's say we did 27 kilometers in 95 minutes 211 211 00:12:57,640 --> 00:13:01,333 and the elevation gain was 523 meters, 212 212 00:13:02,520 --> 00:13:03,430 all right? 213 213 00:13:03,430 --> 00:13:06,330 And now we can lock both through the console really quick. 214 214 00:13:08,030 --> 00:13:10,460 And so again this one here 215 215 00:13:10,460 --> 00:13:13,830 is not really part of the application, Okay. 216 216 00:13:13,830 --> 00:13:16,650 This is just to experiment if our classes 217 217 00:13:16,650 --> 00:13:18,623 are indeed working as expected. 218 218 00:13:21,370 --> 00:13:23,460 So going to our application 219 219 00:13:24,510 --> 00:13:28,493 then you see here that we have our running and our cycling. 220 220 00:13:30,030 --> 00:13:33,950 So indeed we have all the data that we specified 221 221 00:13:33,950 --> 00:13:35,293 that includes the date. 222 222 00:13:38,720 --> 00:13:41,820 Then here the ID looks a little bit off 223 223 00:13:41,820 --> 00:13:46,780 and the reason for that is that I basically used a new date 224 224 00:13:46,780 --> 00:13:48,710 which is gonna be an object 225 225 00:13:48,710 --> 00:13:51,290 and so transforming that object to a string 226 226 00:13:52,330 --> 00:13:55,220 will then basically become all of this here. 227 227 00:13:55,220 --> 00:13:59,480 So this string and so we then took these last characters 228 228 00:13:59,480 --> 00:14:01,030 but let's fix that in a minute. 229 229 00:14:02,090 --> 00:14:05,680 But anyway here we have to pace calculated as well 230 230 00:14:06,520 --> 00:14:10,250 and you see that this is of the type running 231 231 00:14:11,100 --> 00:14:15,830 and then in the prototype we indeed have the calcpace method 232 232 00:14:15,830 --> 00:14:17,713 that we just defined previously. 233 233 00:14:18,760 --> 00:14:21,128 And in cycling we should of course have 234 234 00:14:21,128 --> 00:14:22,878 the calcspeed method. 235 235 00:14:24,304 --> 00:14:26,033 And here it is. Okay. 236 236 00:14:27,260 --> 00:14:30,830 And of course this one itself has another prototype 237 237 00:14:30,830 --> 00:14:34,050 which is then the workout itself. 238 238 00:14:34,050 --> 00:14:36,340 This one doesn't have any methods yet 239 239 00:14:36,340 --> 00:14:38,290 but we will add them a little bit later 240 240 00:14:39,360 --> 00:14:42,230 as we keep moving on in a project. 241 241 00:14:42,230 --> 00:14:46,590 Lets now fix this ID here very quick 242 242 00:14:46,590 --> 00:14:48,780 and so instead of using new date 243 243 00:14:48,780 --> 00:14:53,780 we are gonna use date dot now 244 244 00:14:54,150 --> 00:14:56,150 which remember simply gives us 245 245 00:14:56,150 --> 00:14:58,873 the current time stamp of right now. 246 246 00:15:00,160 --> 00:15:03,570 And so that will now hopefully fix it. 247 247 00:15:03,570 --> 00:15:06,230 And to see that here we have this ID 248 248 00:15:08,250 --> 00:15:10,700 and then here we also have the ID 249 249 00:15:10,700 --> 00:15:14,110 but right now they are actually exactly the same. 250 250 00:15:14,110 --> 00:15:16,520 And so basically that happened because 251 251 00:15:16,520 --> 00:15:19,290 they were created at the same time. 252 252 00:15:19,290 --> 00:15:21,450 But then later in the real world 253 253 00:15:21,450 --> 00:15:23,840 as we used our application of course 254 254 00:15:23,840 --> 00:15:26,820 it's gonna be impossible to create two new objects 255 255 00:15:26,820 --> 00:15:28,230 at the same time. 256 256 00:15:28,230 --> 00:15:31,170 And so then that's gonna work just fine. 257 257 00:15:31,170 --> 00:15:33,160 However as I said previously, 258 258 00:15:33,160 --> 00:15:35,580 when you are really working on the real world 259 259 00:15:35,580 --> 00:15:38,360 then probably you have many users using 260 260 00:15:38,360 --> 00:15:40,510 the same application, right? 261 261 00:15:40,510 --> 00:15:43,350 And then of course some users can create objects 262 262 00:15:43,350 --> 00:15:44,570 at the same time 263 263 00:15:44,570 --> 00:15:46,140 and so by then relying 264 264 00:15:46,140 --> 00:15:51,140 on the time to create ID's is gonna be a really bad idea. 265 265 00:15:51,210 --> 00:15:52,730 All right. 266 266 00:15:52,730 --> 00:15:55,863 So let's get rid of these experiments here. 267 267 00:15:56,780 --> 00:16:01,120 And so for now at least our classes here are complete. 268 268 00:16:01,120 --> 00:16:04,700 As I said we will keep adding some more stuff to them, 269 269 00:16:04,700 --> 00:16:06,850 but for now we're fine. 270 270 00:16:06,850 --> 00:16:09,570 And so with this we are now ready to move on 271 271 00:16:09,570 --> 00:16:12,890 to the next video where we will then use these classes 272 272 00:16:12,890 --> 00:16:15,713 to actually create work outs from the form. 23862