WEBVTT 1 00:00:00.570 --> 00:00:03.490 Now, before we write a single line of code, 2 00:00:03.490 --> 00:00:06.370 we first need to plan this project, 3 00:00:06.370 --> 00:00:09.210 because this one is a little bit more complex 4 00:00:09.210 --> 00:00:11.933 than the other projects that we have been building. 5 00:00:13.440 --> 00:00:18.000 So until now we have always simply started to code, 6 00:00:18.000 --> 00:00:20.990 but without much thought about the features, 7 00:00:20.990 --> 00:00:23.620 or the architecture before writing 8 00:00:23.620 --> 00:00:25.650 the implementation itself. 9 00:00:25.650 --> 00:00:30.150 I mean, we actually did use a flowchart a couple of times, 10 00:00:30.150 --> 00:00:32.910 but I always simply provided that flow chart, 11 00:00:32.910 --> 00:00:34.810 and we never did it together. 12 00:00:34.810 --> 00:00:38.120 So we never planned an application together. 13 00:00:38.120 --> 00:00:41.030 So in the real world, it's very important 14 00:00:41.030 --> 00:00:43.980 that you always start with a planning phase 15 00:00:43.980 --> 00:00:46.150 before building any project, 16 00:00:46.150 --> 00:00:49.080 because otherwise you're setting yourself up 17 00:00:49.080 --> 00:00:52.810 to a lot of confusion and problems down the road. 18 00:00:52.810 --> 00:00:56.320 So to avoid all that, we will now do the planning 19 00:00:56.320 --> 00:00:58.520 of the Mapty project together. 20 00:00:58.520 --> 00:01:02.180 And so then you will get a feeling of how it works. 21 00:01:02.180 --> 00:01:06.010 Now, there are many different ways of planning a project, 22 00:01:06.010 --> 00:01:08.610 but I'm gonna show you my favorite process here, 23 00:01:08.610 --> 00:01:13.320 which works great for many small and medium sized projects. 24 00:01:13.320 --> 00:01:15.340 So I always like to start out 25 00:01:15.340 --> 00:01:18.290 with a concept called User Stories. 26 00:01:18.290 --> 00:01:21.240 And many companies, and teams use this idea 27 00:01:21.240 --> 00:01:22.750 of user stories. 28 00:01:22.750 --> 00:01:25.840 So you will see this everywhere when you start working 29 00:01:25.840 --> 00:01:28.330 on a real developer job. 30 00:01:28.330 --> 00:01:32.230 So a user story is basically a description 31 00:01:32.230 --> 00:01:34.480 of the application's functionality 32 00:01:34.480 --> 00:01:36.670 from the user's perspective. 33 00:01:36.670 --> 00:01:39.860 And then all the user stories put together 34 00:01:39.860 --> 00:01:42.430 will clearly describe the functionality 35 00:01:42.430 --> 00:01:44.730 of the entire application. 36 00:01:44.730 --> 00:01:48.740 So user stories are basically a high level overview 37 00:01:48.740 --> 00:01:52.610 of the whole application, which will allow us developers 38 00:01:52.610 --> 00:01:56.610 to determine the exact features that we need to implement 39 00:01:56.610 --> 00:02:00.783 in order to make the user stories actually work as intended. 40 00:02:01.780 --> 00:02:04.110 Then to visualize the different actions 41 00:02:04.110 --> 00:02:05.870 that a user can take, 42 00:02:05.870 --> 00:02:09.290 and how the program react to these actions, 43 00:02:09.290 --> 00:02:13.540 we usually put all these features into a nice flow chart. 44 00:02:13.540 --> 00:02:16.840 And again, we actually already used flow charts 45 00:02:16.840 --> 00:02:20.713 in some other applications that we built before, right? 46 00:02:21.610 --> 00:02:25.000 Now, once we know exactly what we're gonna build, 47 00:02:25.000 --> 00:02:27.880 it's time to think about how we're gonna build it. 48 00:02:27.880 --> 00:02:31.840 And this brings us to the project's architecture. 49 00:02:31.840 --> 00:02:34.930 And in this context, architecture simply means 50 00:02:34.930 --> 00:02:38.690 how we will organize our code, and what JavaScript features 51 00:02:38.690 --> 00:02:40.280 we will use. 52 00:02:40.280 --> 00:02:44.550 So the project's architecture is essentially what holds 53 00:02:44.550 --> 00:02:46.170 all the code together. 54 00:02:46.170 --> 00:02:49.340 It gives us a structure in which we can then develop 55 00:02:49.340 --> 00:02:51.333 the application's functionality. 56 00:02:52.240 --> 00:02:55.780 Now, my goal here is of course not to turn you 57 00:02:55.780 --> 00:02:58.030 into a software architect. 58 00:02:58.030 --> 00:03:02.030 The goal of this step is simply to stop and think about 59 00:03:02.030 --> 00:03:05.070 how we will implement all this functionality. 60 00:03:05.070 --> 00:03:08.770 So all these features before we actually do it. 61 00:03:08.770 --> 00:03:11.350 Because we could implement any project 62 00:03:11.350 --> 00:03:13.980 in a 1000 different ways. 63 00:03:13.980 --> 00:03:17.890 So we could have one big file with no organization at all, 64 00:03:17.890 --> 00:03:20.620 or we could divide everything into functions, 65 00:03:20.620 --> 00:03:24.140 or we could use classes, or use multiple files, 66 00:03:24.140 --> 00:03:26.400 or a mix of everything. 67 00:03:26.400 --> 00:03:29.170 The possibilities are really endless. 68 00:03:29.170 --> 00:03:32.000 So we have a lot of choice and all that choice 69 00:03:32.000 --> 00:03:34.110 can sometimes be a problem. 70 00:03:34.110 --> 00:03:37.060 And so if we don't think about the architecture 71 00:03:37.060 --> 00:03:40.400 before writing the main part of our application, 72 00:03:40.400 --> 00:03:42.920 then we will probably end up with a mess 73 00:03:42.920 --> 00:03:45.920 of unmanageable spaghetti code. 74 00:03:45.920 --> 00:03:48.053 And so that's not what we want. 75 00:03:49.300 --> 00:03:51.450 But anyway, once we thought about 76 00:03:51.450 --> 00:03:53.390 the project's architecture, 77 00:03:53.390 --> 00:03:56.290 we are finally done with the planning step, 78 00:03:56.290 --> 00:03:58.930 and are then ready to finally move on 79 00:03:58.930 --> 00:04:01.150 to the development step. 80 00:04:01.150 --> 00:04:03.910 And of course, this is where we're gonna implement 81 00:04:03.910 --> 00:04:07.103 the plan that we created using JavaScript code. 82 00:04:08.210 --> 00:04:11.550 So let's not plan the application that we're gonna build 83 00:04:11.550 --> 00:04:13.070 in this section, 84 00:04:13.070 --> 00:04:16.510 and so basically go through these four steps 85 00:04:16.510 --> 00:04:17.943 of the planning step. 86 00:04:19.880 --> 00:04:22.840 And we start with the user stories. 87 00:04:22.840 --> 00:04:25.000 And remember a user story 88 00:04:25.000 --> 00:04:26.980 is essentially a description 89 00:04:26.980 --> 00:04:29.230 of the application's functionality 90 00:04:29.230 --> 00:04:31.470 from the user's perspective. 91 00:04:31.470 --> 00:04:33.930 And all user stories put together, 92 00:04:33.930 --> 00:04:35.490 provide a clear picture 93 00:04:35.490 --> 00:04:38.063 of the application's whole functionality. 94 00:04:39.010 --> 00:04:40.990 Now there are multiple formats 95 00:04:40.990 --> 00:04:43.430 in which we can write user stories, 96 00:04:43.430 --> 00:04:46.330 but the most common one is to write sentences 97 00:04:46.330 --> 00:04:48.310 with this format. 98 00:04:48.310 --> 00:04:50.870 So as a certain type of user, 99 00:04:50.870 --> 00:04:54.800 I want to perform a certain action so that I can get 100 00:04:54.800 --> 00:04:56.550 a certain benefit. 101 00:04:56.550 --> 00:05:00.070 And so this format of the user story answers the question, 102 00:05:00.070 --> 00:05:02.463 who, what, and why. 103 00:05:03.460 --> 00:05:07.990 Great, and so now applying this to our own Mapty project, 104 00:05:07.990 --> 00:05:11.193 the first user story could go something like this. 105 00:05:12.210 --> 00:05:15.580 So as a user, I want to log my running workouts 106 00:05:15.580 --> 00:05:20.580 with location, distance, time, pace, and steps per minute, 107 00:05:21.080 --> 00:05:24.870 so that I can keep a log of all my running. 108 00:05:24.870 --> 00:05:27.100 So if we analyze the sentence, 109 00:05:27.100 --> 00:05:30.100 then this clearly tells us who wants to perform 110 00:05:30.100 --> 00:05:33.090 which action and why. 111 00:05:33.090 --> 00:05:36.110 And then based on this, we will be able to plan 112 00:05:36.110 --> 00:05:39.940 the application's necessary features in a next step. 113 00:05:39.940 --> 00:05:43.743 So that as user story can basically be satisfied. 114 00:05:44.640 --> 00:05:47.800 Next up, we can also say that as a user, 115 00:05:47.800 --> 00:05:51.790 I want to log my cycling workouts with location, distance, 116 00:05:51.790 --> 00:05:55.000 time, speed, and elevation gain, 117 00:05:55.000 --> 00:05:58.430 so I can keep a log of all my cycling. 118 00:05:58.430 --> 00:06:00.420 So this is similar to the first one, 119 00:06:00.420 --> 00:06:02.800 but this one is regarding cycling 120 00:06:02.800 --> 00:06:04.163 rather than running. 121 00:06:05.350 --> 00:06:10.300 Next up as a user, I want to see all my workouts at a glance 122 00:06:10.300 --> 00:06:13.423 so I can easily track my progress over time. 123 00:06:14.360 --> 00:06:18.170 Then as a user, I also want to see all my workouts 124 00:06:18.170 --> 00:06:22.900 on a map so I can easily check where I work out the most. 125 00:06:22.900 --> 00:06:26.070 And finally, the last user story, which makes sense 126 00:06:26.070 --> 00:06:29.300 for this application is that as a user, 127 00:06:29.300 --> 00:06:32.450 I want to see all my workouts when I leave the app, 128 00:06:32.450 --> 00:06:33.980 and come back later, 129 00:06:33.980 --> 00:06:36.743 so that I can keep using the app over time. 130 00:06:37.610 --> 00:06:40.460 Now, of course, we could have written these stories 131 00:06:40.460 --> 00:06:43.710 in a different way, and certainly different people 132 00:06:43.710 --> 00:06:46.230 will come up with different user stories 133 00:06:46.230 --> 00:06:48.490 for the same application. 134 00:06:48.490 --> 00:06:51.400 But what matters is that we can use user stories 135 00:06:51.400 --> 00:06:54.950 to describe exactly what the application will do. 136 00:06:54.950 --> 00:06:57.400 And I think that these user stories 137 00:06:57.400 --> 00:06:59.173 do a pretty good job on that. 138 00:07:00.340 --> 00:07:03.500 Now in this project, I actually already showed you 139 00:07:03.500 --> 00:07:07.360 the working application in the last video, right? 140 00:07:07.360 --> 00:07:09.990 But of course in the real world, you will be building 141 00:07:09.990 --> 00:07:13.110 the application from scratch on your own. 142 00:07:13.110 --> 00:07:15.760 And so therefore you will really have to think 143 00:07:15.760 --> 00:07:18.440 as if you were the user and put yourself 144 00:07:18.440 --> 00:07:21.010 in the user's feet so that you can come up 145 00:07:21.010 --> 00:07:22.540 with these user stories, 146 00:07:22.540 --> 00:07:24.553 and then build your features from there. 147 00:07:26.260 --> 00:07:29.820 So let's not actually think about the features. 148 00:07:29.820 --> 00:07:33.700 So here on the left side, we have a more boiled down version 149 00:07:33.700 --> 00:07:36.840 of the user stories so that we can now work 150 00:07:36.840 --> 00:07:40.200 on the features that the application should have, 151 00:07:40.200 --> 00:07:44.080 and again, that is based on the user stories. 152 00:07:44.080 --> 00:07:46.520 And based on this first user story, 153 00:07:46.520 --> 00:07:49.040 we can already imagine a couple of features 154 00:07:49.040 --> 00:07:51.890 that our application is gonna need. 155 00:07:51.890 --> 00:07:54.910 So first we're gonna need a map where the user 156 00:07:54.910 --> 00:07:58.150 can click in order to add a new workout. 157 00:07:58.150 --> 00:08:01.060 That's because the user wants to log the workout 158 00:08:01.060 --> 00:08:02.590 with the location. 159 00:08:02.590 --> 00:08:04.200 And so therefore the best way 160 00:08:04.200 --> 00:08:07.180 to get the location coordinates is gonna be 161 00:08:07.180 --> 00:08:08.963 just clicking on a map. 162 00:08:09.910 --> 00:08:13.740 Next, since we are working with maps, we should probably use 163 00:08:13.740 --> 00:08:16.730 geolocation in order to display the map 164 00:08:16.730 --> 00:08:19.230 at the current location of the user, 165 00:08:19.230 --> 00:08:22.750 because this is a lot more user friendly than having 166 00:08:22.750 --> 00:08:26.980 the user scroll to their current position, right? 167 00:08:26.980 --> 00:08:30.480 So this is a perfect use case for geolocation, 168 00:08:30.480 --> 00:08:33.490 and since all browsers on mobile and desktop 169 00:08:33.490 --> 00:08:36.720 now support geolocation this will be a great addition 170 00:08:36.720 --> 00:08:38.033 to our application. 171 00:08:38.890 --> 00:08:41.570 Then of course, we're also gonna need a form 172 00:08:41.570 --> 00:08:44.170 to input the rest of the data. 173 00:08:44.170 --> 00:08:48.690 So the distance, the time, pace, and the steps per minute, 174 00:08:48.690 --> 00:08:51.300 which is also called cadence. 175 00:08:51.300 --> 00:08:53.830 So from the first user story alone 176 00:08:53.830 --> 00:08:57.670 we could already know that we need these three features. 177 00:08:57.670 --> 00:08:59.770 I mean, we don't really need them, 178 00:08:59.770 --> 00:09:02.460 but they are nice to have because they allow us 179 00:09:02.460 --> 00:09:05.350 to satisfy the user story. 180 00:09:05.350 --> 00:09:09.190 And so let's now take a look at the second user story. 181 00:09:09.190 --> 00:09:11.350 And so for this one, we're gonna need a form 182 00:09:11.350 --> 00:09:13.840 that is very similar to the first one, 183 00:09:13.840 --> 00:09:16.650 but this one has to ask for the elevation gain 184 00:09:16.650 --> 00:09:19.350 instead of the steps per minute. 185 00:09:19.350 --> 00:09:23.370 Then the user wants to see all the workouts at a glance, 186 00:09:23.370 --> 00:09:26.630 and so therefore we're basically just gonna have a list 187 00:09:26.630 --> 00:09:28.770 with all these workouts. 188 00:09:28.770 --> 00:09:31.350 Then the user also wants to see them on a map, 189 00:09:31.350 --> 00:09:34.470 and so therefore we will have a feature 190 00:09:34.470 --> 00:09:38.600 basically displaying all the workouts on the map as well. 191 00:09:38.600 --> 00:09:42.227 And lastly, the last user story basically says 192 00:09:42.227 --> 00:09:46.580 that the workouts should of course persist over time. 193 00:09:46.580 --> 00:09:49.310 And so there are multiple ways of doing that. 194 00:09:49.310 --> 00:09:52.230 And so usually in a real world application, 195 00:09:52.230 --> 00:09:56.240 you will have accounts where people's data then get stored. 196 00:09:56.240 --> 00:09:58.940 But in this case here, since we are just building 197 00:09:58.940 --> 00:10:01.650 a very simple application, all we're gonna do 198 00:10:01.650 --> 00:10:05.200 is to store the workout data right in the browser. 199 00:10:05.200 --> 00:10:07.530 And for that, we're gonna use a browser API 200 00:10:07.530 --> 00:10:09.700 called local storage. 201 00:10:09.700 --> 00:10:12.930 Then whenever the user comes back to the page, 202 00:10:12.930 --> 00:10:16.620 we will read the data that was saved in a local storage, 203 00:10:16.620 --> 00:10:19.120 and then display it both on the map, 204 00:10:19.120 --> 00:10:22.037 and also on the list, okay? 205 00:10:22.037 --> 00:10:23.820 And so these are the features 206 00:10:23.820 --> 00:10:26.290 that we will have to implement, 207 00:10:26.290 --> 00:10:28.843 and so let's now put them in our flow chart. 208 00:10:31.170 --> 00:10:33.130 Now the flow chart should of course 209 00:10:33.130 --> 00:10:35.180 contain these different features 210 00:10:35.180 --> 00:10:36.560 that we're gonna implement, 211 00:10:36.560 --> 00:10:39.440 but it's also gonna contain how the different parts 212 00:10:39.440 --> 00:10:41.980 of the app interact with each other, 213 00:10:41.980 --> 00:10:44.640 which event makes sense to implement, 214 00:10:44.640 --> 00:10:47.943 and also how data flows across the application. 215 00:10:48.810 --> 00:10:51.560 So let's now see the first couple of features 216 00:10:51.560 --> 00:10:53.260 that we need to implement, 217 00:10:53.260 --> 00:10:56.200 and that is geolocation to display the map 218 00:10:56.200 --> 00:10:58.000 at the user's location, 219 00:10:58.000 --> 00:11:01.780 and then to also display a map where the user can click 220 00:11:01.780 --> 00:11:04.000 to add new workouts. 221 00:11:04.000 --> 00:11:07.790 And this is how we could put them on the flow chart, 222 00:11:07.790 --> 00:11:10.800 but let's actually think together about why 223 00:11:10.800 --> 00:11:13.530 we put them like this on the flow chart. 224 00:11:13.530 --> 00:11:17.430 So whenever we start to build a flow chart like this, 225 00:11:17.430 --> 00:11:20.410 it's a good idea to start with events. 226 00:11:20.410 --> 00:11:23.520 And so here in this case, I'm starting with the event 227 00:11:23.520 --> 00:11:26.120 of the page loading, basically. 228 00:11:26.120 --> 00:11:28.920 And so that's always a good event to start 229 00:11:28.920 --> 00:11:31.880 the flow charts because of course that's always 230 00:11:31.880 --> 00:11:35.910 the first event that basically occurs on any page. 231 00:11:35.910 --> 00:11:38.650 I mean, it's not an event that we're gonna handle, 232 00:11:38.650 --> 00:11:41.890 but as you know, all the code that is in the top level 233 00:11:41.890 --> 00:11:45.500 will essentially be executed when the page loads. 234 00:11:45.500 --> 00:11:50.060 And so we can count the page load as an event here as well. 235 00:11:50.060 --> 00:11:53.140 So when the page does load, we want to start 236 00:11:53.140 --> 00:11:55.870 by getting the user's location coordinates 237 00:11:55.870 --> 00:11:58.460 using the geolocation API. 238 00:11:58.460 --> 00:12:03.210 So just like we decided on in the last slide, right? 239 00:12:03.210 --> 00:12:05.490 Then after that data arrives, 240 00:12:05.490 --> 00:12:08.700 we want to then render the map basically centered 241 00:12:08.700 --> 00:12:11.690 on the current location of the user. 242 00:12:11.690 --> 00:12:15.290 Then we also already saw in the last slide that we need 243 00:12:15.290 --> 00:12:19.433 a form to input the data for cycling and for running. 244 00:12:20.340 --> 00:12:23.170 So we're gonna need to display a form, 245 00:12:23.170 --> 00:12:25.980 and basically we will display that form, 246 00:12:25.980 --> 00:12:29.000 or render that form whenever the user clicks 247 00:12:29.000 --> 00:12:32.290 on a certain position on a map. 248 00:12:32.290 --> 00:12:35.480 So here in this flow chart, as you see the yellow parts 249 00:12:35.480 --> 00:12:38.980 are the actions, and the green parts is basically 250 00:12:38.980 --> 00:12:42.050 when we render something on the user interface, 251 00:12:42.050 --> 00:12:44.320 and in red I have marked operations 252 00:12:44.320 --> 00:12:47.170 that happen asynchronously. 253 00:12:47.170 --> 00:12:50.053 And what that means we will see in the next video. 254 00:12:51.070 --> 00:12:53.990 Now, if the way that I'm building this flow chart here 255 00:12:53.990 --> 00:12:57.440 is still confusing to you, then don't worry. 256 00:12:57.440 --> 00:13:00.330 So in the future with more and more practice, 257 00:13:00.330 --> 00:13:02.120 you will, of course be able to come up 258 00:13:02.120 --> 00:13:05.100 with a flow chart like this on your own. 259 00:13:05.100 --> 00:13:08.220 So just like everything in coding and programming, 260 00:13:08.220 --> 00:13:11.150 this really is a matter of practice. 261 00:13:11.150 --> 00:13:13.800 Now, just know that in the real world, 262 00:13:13.800 --> 00:13:16.670 we usually don't always come up with all the steps 263 00:13:16.670 --> 00:13:20.180 in the flow chart right in the planning phase. 264 00:13:20.180 --> 00:13:24.070 So it's perfectly okay to just create a rough sketch 265 00:13:24.070 --> 00:13:26.280 in the beginning here and then come up 266 00:13:26.280 --> 00:13:29.840 with the exact detail during the implementation. 267 00:13:29.840 --> 00:13:33.110 So definitely don't get hang up on building 268 00:13:33.110 --> 00:13:35.530 the perfect flow chart, all right? 269 00:13:35.530 --> 00:13:37.430 That's just not really necessary 270 00:13:37.430 --> 00:13:38.570 in the beginning, 271 00:13:38.570 --> 00:13:41.910 and so you should not waste too much time on this. 272 00:13:41.910 --> 00:13:45.260 As you become better with practice, this will become easier, 273 00:13:45.260 --> 00:13:48.500 and then you might be able to add more and more details 274 00:13:48.500 --> 00:13:51.410 to your flow charts, right at the beginning. 275 00:13:51.410 --> 00:13:53.630 But when you're just starting out and working 276 00:13:53.630 --> 00:13:56.330 on your first applications, then don't stress 277 00:13:56.330 --> 00:13:57.603 too much on this. 278 00:13:58.574 --> 00:14:01.150 All right, but anyway, let's continue 279 00:14:01.150 --> 00:14:02.513 with our features here. 280 00:14:03.380 --> 00:14:06.720 So next up we want to display workouts in a list 281 00:14:06.720 --> 00:14:08.550 and on the map. 282 00:14:08.550 --> 00:14:11.310 And so therefore this is what our flow chart 283 00:14:11.310 --> 00:14:13.160 is gonna look like. 284 00:14:13.160 --> 00:14:17.500 So basically we rendered the form in step three and four, 285 00:14:17.500 --> 00:14:19.440 and then we're going to have an event listener 286 00:14:19.440 --> 00:14:20.700 on that form. 287 00:14:20.700 --> 00:14:23.920 And so then whenever the user submits in your workout, 288 00:14:23.920 --> 00:14:27.510 it is gonna be rendered on the map and on the list, 289 00:14:27.510 --> 00:14:29.840 in steps five and six. 290 00:14:29.840 --> 00:14:33.390 Then remember we want to store this workout data 291 00:14:33.390 --> 00:14:35.990 in the browser and then read that data 292 00:14:35.990 --> 00:14:37.970 whenever the page reloads. 293 00:14:37.970 --> 00:14:39.630 And so what's gonna happen here 294 00:14:39.630 --> 00:14:43.810 is that also whenever a user creates a new workout, 295 00:14:43.810 --> 00:14:47.420 it will store all the workouts in local storage. 296 00:14:47.420 --> 00:14:50.910 So we're using that local storage API in the browser 297 00:14:50.910 --> 00:14:53.460 that I just mentioned in the last slide. 298 00:14:53.460 --> 00:14:55.660 Then whenever the page loads, 299 00:14:55.660 --> 00:14:58.820 as we see here on the left side of the flow chart, 300 00:14:58.820 --> 00:15:02.320 then we get all of the workouts from local storage, 301 00:15:02.320 --> 00:15:05.470 and render them on the map and on the list. 302 00:15:05.470 --> 00:15:07.420 And of course that can only happen 303 00:15:07.420 --> 00:15:10.420 after the current location has been fetched, 304 00:15:10.420 --> 00:15:12.610 and a map has been displayed. 305 00:15:12.610 --> 00:15:15.760 And so that's essentially what async means. 306 00:15:15.760 --> 00:15:19.410 So that red box up there means that it is an operation 307 00:15:19.410 --> 00:15:23.000 that takes some time, and only after it's completed, 308 00:15:23.000 --> 00:15:26.090 then the rest of the operations that depend on it 309 00:15:26.090 --> 00:15:27.293 can be executed. 310 00:15:28.360 --> 00:15:31.220 And finally, there is another feature 311 00:15:31.220 --> 00:15:33.630 that I didn't mention in the last slide, 312 00:15:33.630 --> 00:15:35.510 but with just a nice addition 313 00:15:35.510 --> 00:15:37.740 to the way the application works. 314 00:15:37.740 --> 00:15:40.070 And so that is to simply move the map 315 00:15:40.070 --> 00:15:41.890 to the workout location, 316 00:15:41.890 --> 00:15:45.530 whenever we click on one on the workouts in the list. 317 00:15:45.530 --> 00:15:47.390 And so here in the flowchart, 318 00:15:47.390 --> 00:15:50.490 that is also pretty easy to represent. 319 00:15:50.490 --> 00:15:53.290 And so basically all we need is an event handler 320 00:15:53.290 --> 00:15:54.337 on the list. 321 00:15:54.337 --> 00:15:57.980 And then whenever the user clicks on a workout in the list, 322 00:15:57.980 --> 00:16:02.400 it will move to that workout's location, all right? 323 00:16:02.400 --> 00:16:05.240 And so this is essentially how our application 324 00:16:05.240 --> 00:16:06.660 is gonna work. 325 00:16:06.660 --> 00:16:09.210 And so the features that we need to implement 326 00:16:09.210 --> 00:16:13.770 using this flow and this sequence basically. 327 00:16:13.770 --> 00:16:17.150 Now keep in mind that this flow chart itself 328 00:16:17.150 --> 00:16:19.100 actually has nothing to do yet, 329 00:16:19.100 --> 00:16:21.670 with the implementation itself. 330 00:16:21.670 --> 00:16:24.910 So this is just how the program is gonna work. 331 00:16:24.910 --> 00:16:28.870 And we might very well implemented in some other language, 332 00:16:28.870 --> 00:16:31.470 so it wouldn't even have to be JavaScript. 333 00:16:31.470 --> 00:16:35.770 So essentially this is only what our program should do, 334 00:16:35.770 --> 00:16:37.770 but not how it does it. 335 00:16:37.770 --> 00:16:40.330 So that's more specific and that's actually 336 00:16:40.330 --> 00:16:41.733 for the architecture. 337 00:16:43.750 --> 00:16:45.960 And so that brings us to the last part 338 00:16:45.960 --> 00:16:50.450 of this planning step, which is, in fact, architecture. 339 00:16:50.450 --> 00:16:53.970 Now just like the flow chart, we don't always need to have 340 00:16:53.970 --> 00:16:56.100 the perfect final architecture 341 00:16:56.100 --> 00:16:58.990 figured out before implementation. 342 00:16:58.990 --> 00:17:01.900 So we can first do some experiments, 343 00:17:01.900 --> 00:17:04.630 play around with the code, and only then, 344 00:17:04.630 --> 00:17:09.380 think about the architecture for the final project in case. 345 00:17:09.380 --> 00:17:12.420 Of course we can do it right in the beginning, 346 00:17:12.420 --> 00:17:14.920 but it's not always necessary. 347 00:17:14.920 --> 00:17:17.450 And so to start this project, 348 00:17:17.450 --> 00:17:19.820 we will actually simply start coding, 349 00:17:19.820 --> 00:17:22.250 and starting to implement the features 350 00:17:22.250 --> 00:17:25.970 according to the flow chart that we just developed. 351 00:17:25.970 --> 00:17:28.790 Then as we start to need more organization, 352 00:17:28.790 --> 00:17:30.740 and ways to manage our data, 353 00:17:30.740 --> 00:17:34.600 we will come back to thinking about the architecture. 354 00:17:34.600 --> 00:17:37.853 Now, right, and so actually let's now go do that.