Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,570 --> 00:00:03,490 Now, before we write a single line of code, 2 2 00:00:03,490 --> 00:00:06,370 we first need to plan this project, 3 3 00:00:06,370 --> 00:00:09,210 because this one is a little bit more complex 4 4 00:00:09,210 --> 00:00:11,933 than the other projects that we have been building. 5 5 00:00:13,440 --> 00:00:18,000 So until now we have always simply started to code, 6 6 00:00:18,000 --> 00:00:20,990 but without much thought about the features, 7 7 00:00:20,990 --> 00:00:23,620 or the architecture before writing 8 8 00:00:23,620 --> 00:00:25,650 the implementation itself. 9 9 00:00:25,650 --> 00:00:30,150 I mean, we actually did use a flowchart a couple of times, 10 10 00:00:30,150 --> 00:00:32,910 but I always simply provided that flow chart, 11 11 00:00:32,910 --> 00:00:34,810 and we never did it together. 12 12 00:00:34,810 --> 00:00:38,120 So we never planned an application together. 13 13 00:00:38,120 --> 00:00:41,030 So in the real world, it's very important 14 14 00:00:41,030 --> 00:00:43,980 that you always start with a planning phase 15 15 00:00:43,980 --> 00:00:46,150 before building any project, 16 16 00:00:46,150 --> 00:00:49,080 because otherwise you're setting yourself up 17 17 00:00:49,080 --> 00:00:52,810 to a lot of confusion and problems down the road. 18 18 00:00:52,810 --> 00:00:56,320 So to avoid all that, we will now do the planning 19 19 00:00:56,320 --> 00:00:58,520 of the Mapty project together. 20 20 00:00:58,520 --> 00:01:02,180 And so then you will get a feeling of how it works. 21 21 00:01:02,180 --> 00:01:06,010 Now, there are many different ways of planning a project, 22 22 00:01:06,010 --> 00:01:08,610 but I'm gonna show you my favorite process here, 23 23 00:01:08,610 --> 00:01:13,320 which works great for many small and medium sized projects. 24 24 00:01:13,320 --> 00:01:15,340 So I always like to start out 25 25 00:01:15,340 --> 00:01:18,290 with a concept called User Stories. 26 26 00:01:18,290 --> 00:01:21,240 And many companies, and teams use this idea 27 27 00:01:21,240 --> 00:01:22,750 of user stories. 28 28 00:01:22,750 --> 00:01:25,840 So you will see this everywhere when you start working 29 29 00:01:25,840 --> 00:01:28,330 on a real developer job. 30 30 00:01:28,330 --> 00:01:32,230 So a user story is basically a description 31 31 00:01:32,230 --> 00:01:34,480 of the application's functionality 32 32 00:01:34,480 --> 00:01:36,670 from the user's perspective. 33 33 00:01:36,670 --> 00:01:39,860 And then all the user stories put together 34 34 00:01:39,860 --> 00:01:42,430 will clearly describe the functionality 35 35 00:01:42,430 --> 00:01:44,730 of the entire application. 36 36 00:01:44,730 --> 00:01:48,740 So user stories are basically a high level overview 37 37 00:01:48,740 --> 00:01:52,610 of the whole application, which will allow us developers 38 38 00:01:52,610 --> 00:01:56,610 to determine the exact features that we need to implement 39 39 00:01:56,610 --> 00:02:00,783 in order to make the user stories actually work as intended. 40 40 00:02:01,780 --> 00:02:04,110 Then to visualize the different actions 41 41 00:02:04,110 --> 00:02:05,870 that a user can take, 42 42 00:02:05,870 --> 00:02:09,290 and how the program react to these actions, 43 43 00:02:09,290 --> 00:02:13,540 we usually put all these features into a nice flow chart. 44 44 00:02:13,540 --> 00:02:16,840 And again, we actually already used flow charts 45 45 00:02:16,840 --> 00:02:20,713 in some other applications that we built before, right? 46 46 00:02:21,610 --> 00:02:25,000 Now, once we know exactly what we're gonna build, 47 47 00:02:25,000 --> 00:02:27,880 it's time to think about how we're gonna build it. 48 48 00:02:27,880 --> 00:02:31,840 And this brings us to the project's architecture. 49 49 00:02:31,840 --> 00:02:34,930 And in this context, architecture simply means 50 50 00:02:34,930 --> 00:02:38,690 how we will organize our code, and what JavaScript features 51 51 00:02:38,690 --> 00:02:40,280 we will use. 52 52 00:02:40,280 --> 00:02:44,550 So the project's architecture is essentially what holds 53 53 00:02:44,550 --> 00:02:46,170 all the code together. 54 54 00:02:46,170 --> 00:02:49,340 It gives us a structure in which we can then develop 55 55 00:02:49,340 --> 00:02:51,333 the application's functionality. 56 56 00:02:52,240 --> 00:02:55,780 Now, my goal here is of course not to turn you 57 57 00:02:55,780 --> 00:02:58,030 into a software architect. 58 58 00:02:58,030 --> 00:03:02,030 The goal of this step is simply to stop and think about 59 59 00:03:02,030 --> 00:03:05,070 how we will implement all this functionality. 60 60 00:03:05,070 --> 00:03:08,770 So all these features before we actually do it. 61 61 00:03:08,770 --> 00:03:11,350 Because we could implement any project 62 62 00:03:11,350 --> 00:03:13,980 in a 1000 different ways. 63 63 00:03:13,980 --> 00:03:17,890 So we could have one big file with no organization at all, 64 64 00:03:17,890 --> 00:03:20,620 or we could divide everything into functions, 65 65 00:03:20,620 --> 00:03:24,140 or we could use classes, or use multiple files, 66 66 00:03:24,140 --> 00:03:26,400 or a mix of everything. 67 67 00:03:26,400 --> 00:03:29,170 The possibilities are really endless. 68 68 00:03:29,170 --> 00:03:32,000 So we have a lot of choice and all that choice 69 69 00:03:32,000 --> 00:03:34,110 can sometimes be a problem. 70 70 00:03:34,110 --> 00:03:37,060 And so if we don't think about the architecture 71 71 00:03:37,060 --> 00:03:40,400 before writing the main part of our application, 72 72 00:03:40,400 --> 00:03:42,920 then we will probably end up with a mess 73 73 00:03:42,920 --> 00:03:45,920 of unmanageable spaghetti code. 74 74 00:03:45,920 --> 00:03:48,053 And so that's not what we want. 75 75 00:03:49,300 --> 00:03:51,450 But anyway, once we thought about 76 76 00:03:51,450 --> 00:03:53,390 the project's architecture, 77 77 00:03:53,390 --> 00:03:56,290 we are finally done with the planning step, 78 78 00:03:56,290 --> 00:03:58,930 and are then ready to finally move on 79 79 00:03:58,930 --> 00:04:01,150 to the development step. 80 80 00:04:01,150 --> 00:04:03,910 And of course, this is where we're gonna implement 81 81 00:04:03,910 --> 00:04:07,103 the plan that we created using JavaScript code. 82 82 00:04:08,210 --> 00:04:11,550 So let's not plan the application that we're gonna build 83 83 00:04:11,550 --> 00:04:13,070 in this section, 84 84 00:04:13,070 --> 00:04:16,510 and so basically go through these four steps 85 85 00:04:16,510 --> 00:04:17,943 of the planning step. 86 86 00:04:19,880 --> 00:04:22,840 And we start with the user stories. 87 87 00:04:22,840 --> 00:04:25,000 And remember a user story 88 88 00:04:25,000 --> 00:04:26,980 is essentially a description 89 89 00:04:26,980 --> 00:04:29,230 of the application's functionality 90 90 00:04:29,230 --> 00:04:31,470 from the user's perspective. 91 91 00:04:31,470 --> 00:04:33,930 And all user stories put together, 92 92 00:04:33,930 --> 00:04:35,490 provide a clear picture 93 93 00:04:35,490 --> 00:04:38,063 of the application's whole functionality. 94 94 00:04:39,010 --> 00:04:40,990 Now there are multiple formats 95 95 00:04:40,990 --> 00:04:43,430 in which we can write user stories, 96 96 00:04:43,430 --> 00:04:46,330 but the most common one is to write sentences 97 97 00:04:46,330 --> 00:04:48,310 with this format. 98 98 00:04:48,310 --> 00:04:50,870 So as a certain type of user, 99 99 00:04:50,870 --> 00:04:54,800 I want to perform a certain action so that I can get 100 100 00:04:54,800 --> 00:04:56,550 a certain benefit. 101 101 00:04:56,550 --> 00:05:00,070 And so this format of the user story answers the question, 102 102 00:05:00,070 --> 00:05:02,463 who, what, and why. 103 103 00:05:03,460 --> 00:05:07,990 Great, and so now applying this to our own Mapty project, 104 104 00:05:07,990 --> 00:05:11,193 the first user story could go something like this. 105 105 00:05:12,210 --> 00:05:15,580 So as a user, I want to log my running workouts 106 106 00:05:15,580 --> 00:05:20,580 with location, distance, time, pace, and steps per minute, 107 107 00:05:21,080 --> 00:05:24,870 so that I can keep a log of all my running. 108 108 00:05:24,870 --> 00:05:27,100 So if we analyze the sentence, 109 109 00:05:27,100 --> 00:05:30,100 then this clearly tells us who wants to perform 110 110 00:05:30,100 --> 00:05:33,090 which action and why. 111 111 00:05:33,090 --> 00:05:36,110 And then based on this, we will be able to plan 112 112 00:05:36,110 --> 00:05:39,940 the application's necessary features in a next step. 113 113 00:05:39,940 --> 00:05:43,743 So that as user story can basically be satisfied. 114 114 00:05:44,640 --> 00:05:47,800 Next up, we can also say that as a user, 115 115 00:05:47,800 --> 00:05:51,790 I want to log my cycling workouts with location, distance, 116 116 00:05:51,790 --> 00:05:55,000 time, speed, and elevation gain, 117 117 00:05:55,000 --> 00:05:58,430 so I can keep a log of all my cycling. 118 118 00:05:58,430 --> 00:06:00,420 So this is similar to the first one, 119 119 00:06:00,420 --> 00:06:02,800 but this one is regarding cycling 120 120 00:06:02,800 --> 00:06:04,163 rather than running. 121 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 122 00:06:10,300 --> 00:06:13,423 so I can easily track my progress over time. 123 123 00:06:14,360 --> 00:06:18,170 Then as a user, I also want to see all my workouts 124 124 00:06:18,170 --> 00:06:22,900 on a map so I can easily check where I work out the most. 125 125 00:06:22,900 --> 00:06:26,070 And finally, the last user story, which makes sense 126 126 00:06:26,070 --> 00:06:29,300 for this application is that as a user, 127 127 00:06:29,300 --> 00:06:32,450 I want to see all my workouts when I leave the app, 128 128 00:06:32,450 --> 00:06:33,980 and come back later, 129 129 00:06:33,980 --> 00:06:36,743 so that I can keep using the app over time. 130 130 00:06:37,610 --> 00:06:40,460 Now, of course, we could have written these stories 131 131 00:06:40,460 --> 00:06:43,710 in a different way, and certainly different people 132 132 00:06:43,710 --> 00:06:46,230 will come up with different user stories 133 133 00:06:46,230 --> 00:06:48,490 for the same application. 134 134 00:06:48,490 --> 00:06:51,400 But what matters is that we can use user stories 135 135 00:06:51,400 --> 00:06:54,950 to describe exactly what the application will do. 136 136 00:06:54,950 --> 00:06:57,400 And I think that these user stories 137 137 00:06:57,400 --> 00:06:59,173 do a pretty good job on that. 138 138 00:07:00,340 --> 00:07:03,500 Now in this project, I actually already showed you 139 139 00:07:03,500 --> 00:07:07,360 the working application in the last video, right? 140 140 00:07:07,360 --> 00:07:09,990 But of course in the real world, you will be building 141 141 00:07:09,990 --> 00:07:13,110 the application from scratch on your own. 142 142 00:07:13,110 --> 00:07:15,760 And so therefore you will really have to think 143 143 00:07:15,760 --> 00:07:18,440 as if you were the user and put yourself 144 144 00:07:18,440 --> 00:07:21,010 in the user's feet so that you can come up 145 145 00:07:21,010 --> 00:07:22,540 with these user stories, 146 146 00:07:22,540 --> 00:07:24,553 and then build your features from there. 147 147 00:07:26,260 --> 00:07:29,820 So let's not actually think about the features. 148 148 00:07:29,820 --> 00:07:33,700 So here on the left side, we have a more boiled down version 149 149 00:07:33,700 --> 00:07:36,840 of the user stories so that we can now work 150 150 00:07:36,840 --> 00:07:40,200 on the features that the application should have, 151 151 00:07:40,200 --> 00:07:44,080 and again, that is based on the user stories. 152 152 00:07:44,080 --> 00:07:46,520 And based on this first user story, 153 153 00:07:46,520 --> 00:07:49,040 we can already imagine a couple of features 154 154 00:07:49,040 --> 00:07:51,890 that our application is gonna need. 155 155 00:07:51,890 --> 00:07:54,910 So first we're gonna need a map where the user 156 156 00:07:54,910 --> 00:07:58,150 can click in order to add a new workout. 157 157 00:07:58,150 --> 00:08:01,060 That's because the user wants to log the workout 158 158 00:08:01,060 --> 00:08:02,590 with the location. 159 159 00:08:02,590 --> 00:08:04,200 And so therefore the best way 160 160 00:08:04,200 --> 00:08:07,180 to get the location coordinates is gonna be 161 161 00:08:07,180 --> 00:08:08,963 just clicking on a map. 162 162 00:08:09,910 --> 00:08:13,740 Next, since we are working with maps, we should probably use 163 163 00:08:13,740 --> 00:08:16,730 geolocation in order to display the map 164 164 00:08:16,730 --> 00:08:19,230 at the current location of the user, 165 165 00:08:19,230 --> 00:08:22,750 because this is a lot more user friendly than having 166 166 00:08:22,750 --> 00:08:26,980 the user scroll to their current position, right? 167 167 00:08:26,980 --> 00:08:30,480 So this is a perfect use case for geolocation, 168 168 00:08:30,480 --> 00:08:33,490 and since all browsers on mobile and desktop 169 169 00:08:33,490 --> 00:08:36,720 now support geolocation this will be a great addition 170 170 00:08:36,720 --> 00:08:38,033 to our application. 171 171 00:08:38,890 --> 00:08:41,570 Then of course, we're also gonna need a form 172 172 00:08:41,570 --> 00:08:44,170 to input the rest of the data. 173 173 00:08:44,170 --> 00:08:48,690 So the distance, the time, pace, and the steps per minute, 174 174 00:08:48,690 --> 00:08:51,300 which is also called cadence. 175 175 00:08:51,300 --> 00:08:53,830 So from the first user story alone 176 176 00:08:53,830 --> 00:08:57,670 we could already know that we need these three features. 177 177 00:08:57,670 --> 00:08:59,770 I mean, we don't really need them, 178 178 00:08:59,770 --> 00:09:02,460 but they are nice to have because they allow us 179 179 00:09:02,460 --> 00:09:05,350 to satisfy the user story. 180 180 00:09:05,350 --> 00:09:09,190 And so let's now take a look at the second user story. 181 181 00:09:09,190 --> 00:09:11,350 And so for this one, we're gonna need a form 182 182 00:09:11,350 --> 00:09:13,840 that is very similar to the first one, 183 183 00:09:13,840 --> 00:09:16,650 but this one has to ask for the elevation gain 184 184 00:09:16,650 --> 00:09:19,350 instead of the steps per minute. 185 185 00:09:19,350 --> 00:09:23,370 Then the user wants to see all the workouts at a glance, 186 186 00:09:23,370 --> 00:09:26,630 and so therefore we're basically just gonna have a list 187 187 00:09:26,630 --> 00:09:28,770 with all these workouts. 188 188 00:09:28,770 --> 00:09:31,350 Then the user also wants to see them on a map, 189 189 00:09:31,350 --> 00:09:34,470 and so therefore we will have a feature 190 190 00:09:34,470 --> 00:09:38,600 basically displaying all the workouts on the map as well. 191 191 00:09:38,600 --> 00:09:42,227 And lastly, the last user story basically says 192 192 00:09:42,227 --> 00:09:46,580 that the workouts should of course persist over time. 193 193 00:09:46,580 --> 00:09:49,310 And so there are multiple ways of doing that. 194 194 00:09:49,310 --> 00:09:52,230 And so usually in a real world application, 195 195 00:09:52,230 --> 00:09:56,240 you will have accounts where people's data then get stored. 196 196 00:09:56,240 --> 00:09:58,940 But in this case here, since we are just building 197 197 00:09:58,940 --> 00:10:01,650 a very simple application, all we're gonna do 198 198 00:10:01,650 --> 00:10:05,200 is to store the workout data right in the browser. 199 199 00:10:05,200 --> 00:10:07,530 And for that, we're gonna use a browser API 200 200 00:10:07,530 --> 00:10:09,700 called local storage. 201 201 00:10:09,700 --> 00:10:12,930 Then whenever the user comes back to the page, 202 202 00:10:12,930 --> 00:10:16,620 we will read the data that was saved in a local storage, 203 203 00:10:16,620 --> 00:10:19,120 and then display it both on the map, 204 204 00:10:19,120 --> 00:10:22,037 and also on the list, okay? 205 205 00:10:22,037 --> 00:10:23,820 And so these are the features 206 206 00:10:23,820 --> 00:10:26,290 that we will have to implement, 207 207 00:10:26,290 --> 00:10:28,843 and so let's now put them in our flow chart. 208 208 00:10:31,170 --> 00:10:33,130 Now the flow chart should of course 209 209 00:10:33,130 --> 00:10:35,180 contain these different features 210 210 00:10:35,180 --> 00:10:36,560 that we're gonna implement, 211 211 00:10:36,560 --> 00:10:39,440 but it's also gonna contain how the different parts 212 212 00:10:39,440 --> 00:10:41,980 of the app interact with each other, 213 213 00:10:41,980 --> 00:10:44,640 which event makes sense to implement, 214 214 00:10:44,640 --> 00:10:47,943 and also how data flows across the application. 215 215 00:10:48,810 --> 00:10:51,560 So let's now see the first couple of features 216 216 00:10:51,560 --> 00:10:53,260 that we need to implement, 217 217 00:10:53,260 --> 00:10:56,200 and that is geolocation to display the map 218 218 00:10:56,200 --> 00:10:58,000 at the user's location, 219 219 00:10:58,000 --> 00:11:01,780 and then to also display a map where the user can click 220 220 00:11:01,780 --> 00:11:04,000 to add new workouts. 221 221 00:11:04,000 --> 00:11:07,790 And this is how we could put them on the flow chart, 222 222 00:11:07,790 --> 00:11:10,800 but let's actually think together about why 223 223 00:11:10,800 --> 00:11:13,530 we put them like this on the flow chart. 224 224 00:11:13,530 --> 00:11:17,430 So whenever we start to build a flow chart like this, 225 225 00:11:17,430 --> 00:11:20,410 it's a good idea to start with events. 226 226 00:11:20,410 --> 00:11:23,520 And so here in this case, I'm starting with the event 227 227 00:11:23,520 --> 00:11:26,120 of the page loading, basically. 228 228 00:11:26,120 --> 00:11:28,920 And so that's always a good event to start 229 229 00:11:28,920 --> 00:11:31,880 the flow charts because of course that's always 230 230 00:11:31,880 --> 00:11:35,910 the first event that basically occurs on any page. 231 231 00:11:35,910 --> 00:11:38,650 I mean, it's not an event that we're gonna handle, 232 232 00:11:38,650 --> 00:11:41,890 but as you know, all the code that is in the top level 233 233 00:11:41,890 --> 00:11:45,500 will essentially be executed when the page loads. 234 234 00:11:45,500 --> 00:11:50,060 And so we can count the page load as an event here as well. 235 235 00:11:50,060 --> 00:11:53,140 So when the page does load, we want to start 236 236 00:11:53,140 --> 00:11:55,870 by getting the user's location coordinates 237 237 00:11:55,870 --> 00:11:58,460 using the geolocation API. 238 238 00:11:58,460 --> 00:12:03,210 So just like we decided on in the last slide, right? 239 239 00:12:03,210 --> 00:12:05,490 Then after that data arrives, 240 240 00:12:05,490 --> 00:12:08,700 we want to then render the map basically centered 241 241 00:12:08,700 --> 00:12:11,690 on the current location of the user. 242 242 00:12:11,690 --> 00:12:15,290 Then we also already saw in the last slide that we need 243 243 00:12:15,290 --> 00:12:19,433 a form to input the data for cycling and for running. 244 244 00:12:20,340 --> 00:12:23,170 So we're gonna need to display a form, 245 245 00:12:23,170 --> 00:12:25,980 and basically we will display that form, 246 246 00:12:25,980 --> 00:12:29,000 or render that form whenever the user clicks 247 247 00:12:29,000 --> 00:12:32,290 on a certain position on a map. 248 248 00:12:32,290 --> 00:12:35,480 So here in this flow chart, as you see the yellow parts 249 249 00:12:35,480 --> 00:12:38,980 are the actions, and the green parts is basically 250 250 00:12:38,980 --> 00:12:42,050 when we render something on the user interface, 251 251 00:12:42,050 --> 00:12:44,320 and in red I have marked operations 252 252 00:12:44,320 --> 00:12:47,170 that happen asynchronously. 253 253 00:12:47,170 --> 00:12:50,053 And what that means we will see in the next video. 254 254 00:12:51,070 --> 00:12:53,990 Now, if the way that I'm building this flow chart here 255 255 00:12:53,990 --> 00:12:57,440 is still confusing to you, then don't worry. 256 256 00:12:57,440 --> 00:13:00,330 So in the future with more and more practice, 257 257 00:13:00,330 --> 00:13:02,120 you will, of course be able to come up 258 258 00:13:02,120 --> 00:13:05,100 with a flow chart like this on your own. 259 259 00:13:05,100 --> 00:13:08,220 So just like everything in coding and programming, 260 260 00:13:08,220 --> 00:13:11,150 this really is a matter of practice. 261 261 00:13:11,150 --> 00:13:13,800 Now, just know that in the real world, 262 262 00:13:13,800 --> 00:13:16,670 we usually don't always come up with all the steps 263 263 00:13:16,670 --> 00:13:20,180 in the flow chart right in the planning phase. 264 264 00:13:20,180 --> 00:13:24,070 So it's perfectly okay to just create a rough sketch 265 265 00:13:24,070 --> 00:13:26,280 in the beginning here and then come up 266 266 00:13:26,280 --> 00:13:29,840 with the exact detail during the implementation. 267 267 00:13:29,840 --> 00:13:33,110 So definitely don't get hang up on building 268 268 00:13:33,110 --> 00:13:35,530 the perfect flow chart, all right? 269 269 00:13:35,530 --> 00:13:37,430 That's just not really necessary 270 270 00:13:37,430 --> 00:13:38,570 in the beginning, 271 271 00:13:38,570 --> 00:13:41,910 and so you should not waste too much time on this. 272 272 00:13:41,910 --> 00:13:45,260 As you become better with practice, this will become easier, 273 273 00:13:45,260 --> 00:13:48,500 and then you might be able to add more and more details 274 274 00:13:48,500 --> 00:13:51,410 to your flow charts, right at the beginning. 275 275 00:13:51,410 --> 00:13:53,630 But when you're just starting out and working 276 276 00:13:53,630 --> 00:13:56,330 on your first applications, then don't stress 277 277 00:13:56,330 --> 00:13:57,603 too much on this. 278 278 00:13:58,574 --> 00:14:01,150 All right, but anyway, let's continue 279 279 00:14:01,150 --> 00:14:02,513 with our features here. 280 280 00:14:03,380 --> 00:14:06,720 So next up we want to display workouts in a list 281 281 00:14:06,720 --> 00:14:08,550 and on the map. 282 282 00:14:08,550 --> 00:14:11,310 And so therefore this is what our flow chart 283 283 00:14:11,310 --> 00:14:13,160 is gonna look like. 284 284 00:14:13,160 --> 00:14:17,500 So basically we rendered the form in step three and four, 285 285 00:14:17,500 --> 00:14:19,440 and then we're going to have an event listener 286 286 00:14:19,440 --> 00:14:20,700 on that form. 287 287 00:14:20,700 --> 00:14:23,920 And so then whenever the user submits in your workout, 288 288 00:14:23,920 --> 00:14:27,510 it is gonna be rendered on the map and on the list, 289 289 00:14:27,510 --> 00:14:29,840 in steps five and six. 290 290 00:14:29,840 --> 00:14:33,390 Then remember we want to store this workout data 291 291 00:14:33,390 --> 00:14:35,990 in the browser and then read that data 292 292 00:14:35,990 --> 00:14:37,970 whenever the page reloads. 293 293 00:14:37,970 --> 00:14:39,630 And so what's gonna happen here 294 294 00:14:39,630 --> 00:14:43,810 is that also whenever a user creates a new workout, 295 295 00:14:43,810 --> 00:14:47,420 it will store all the workouts in local storage. 296 296 00:14:47,420 --> 00:14:50,910 So we're using that local storage API in the browser 297 297 00:14:50,910 --> 00:14:53,460 that I just mentioned in the last slide. 298 298 00:14:53,460 --> 00:14:55,660 Then whenever the page loads, 299 299 00:14:55,660 --> 00:14:58,820 as we see here on the left side of the flow chart, 300 300 00:14:58,820 --> 00:15:02,320 then we get all of the workouts from local storage, 301 301 00:15:02,320 --> 00:15:05,470 and render them on the map and on the list. 302 302 00:15:05,470 --> 00:15:07,420 And of course that can only happen 303 303 00:15:07,420 --> 00:15:10,420 after the current location has been fetched, 304 304 00:15:10,420 --> 00:15:12,610 and a map has been displayed. 305 305 00:15:12,610 --> 00:15:15,760 And so that's essentially what async means. 306 306 00:15:15,760 --> 00:15:19,410 So that red box up there means that it is an operation 307 307 00:15:19,410 --> 00:15:23,000 that takes some time, and only after it's completed, 308 308 00:15:23,000 --> 00:15:26,090 then the rest of the operations that depend on it 309 309 00:15:26,090 --> 00:15:27,293 can be executed. 310 310 00:15:28,360 --> 00:15:31,220 And finally, there is another feature 311 311 00:15:31,220 --> 00:15:33,630 that I didn't mention in the last slide, 312 312 00:15:33,630 --> 00:15:35,510 but with just a nice addition 313 313 00:15:35,510 --> 00:15:37,740 to the way the application works. 314 314 00:15:37,740 --> 00:15:40,070 And so that is to simply move the map 315 315 00:15:40,070 --> 00:15:41,890 to the workout location, 316 316 00:15:41,890 --> 00:15:45,530 whenever we click on one on the workouts in the list. 317 317 00:15:45,530 --> 00:15:47,390 And so here in the flowchart, 318 318 00:15:47,390 --> 00:15:50,490 that is also pretty easy to represent. 319 319 00:15:50,490 --> 00:15:53,290 And so basically all we need is an event handler 320 320 00:15:53,290 --> 00:15:54,337 on the list. 321 321 00:15:54,337 --> 00:15:57,980 And then whenever the user clicks on a workout in the list, 322 322 00:15:57,980 --> 00:16:02,400 it will move to that workout's location, all right? 323 323 00:16:02,400 --> 00:16:05,240 And so this is essentially how our application 324 324 00:16:05,240 --> 00:16:06,660 is gonna work. 325 325 00:16:06,660 --> 00:16:09,210 And so the features that we need to implement 326 326 00:16:09,210 --> 00:16:13,770 using this flow and this sequence basically. 327 327 00:16:13,770 --> 00:16:17,150 Now keep in mind that this flow chart itself 328 328 00:16:17,150 --> 00:16:19,100 actually has nothing to do yet, 329 329 00:16:19,100 --> 00:16:21,670 with the implementation itself. 330 330 00:16:21,670 --> 00:16:24,910 So this is just how the program is gonna work. 331 331 00:16:24,910 --> 00:16:28,870 And we might very well implemented in some other language, 332 332 00:16:28,870 --> 00:16:31,470 so it wouldn't even have to be JavaScript. 333 333 00:16:31,470 --> 00:16:35,770 So essentially this is only what our program should do, 334 334 00:16:35,770 --> 00:16:37,770 but not how it does it. 335 335 00:16:37,770 --> 00:16:40,330 So that's more specific and that's actually 336 336 00:16:40,330 --> 00:16:41,733 for the architecture. 337 337 00:16:43,750 --> 00:16:45,960 And so that brings us to the last part 338 338 00:16:45,960 --> 00:16:50,450 of this planning step, which is, in fact, architecture. 339 339 00:16:50,450 --> 00:16:53,970 Now just like the flow chart, we don't always need to have 340 340 00:16:53,970 --> 00:16:56,100 the perfect final architecture 341 341 00:16:56,100 --> 00:16:58,990 figured out before implementation. 342 342 00:16:58,990 --> 00:17:01,900 So we can first do some experiments, 343 343 00:17:01,900 --> 00:17:04,630 play around with the code, and only then, 344 344 00:17:04,630 --> 00:17:09,380 think about the architecture for the final project in case. 345 345 00:17:09,380 --> 00:17:12,420 Of course we can do it right in the beginning, 346 346 00:17:12,420 --> 00:17:14,920 but it's not always necessary. 347 347 00:17:14,920 --> 00:17:17,450 And so to start this project, 348 348 00:17:17,450 --> 00:17:19,820 we will actually simply start coding, 349 349 00:17:19,820 --> 00:17:22,250 and starting to implement the features 350 350 00:17:22,250 --> 00:17:25,970 according to the flow chart that we just developed. 351 351 00:17:25,970 --> 00:17:28,790 Then as we start to need more organization, 352 352 00:17:28,790 --> 00:17:30,740 and ways to manage our data, 353 353 00:17:30,740 --> 00:17:34,600 we will come back to thinking about the architecture. 354 354 00:17:34,600 --> 00:17:37,853 Now, right, and so actually let's now go do that. 31644