WEBVTT 1 00:00:01.240 --> 00:00:02.550 So in this section, 2 00:00:02.550 --> 00:00:06.570 we're gonna build the biggest and coolest project yet. 3 00:00:06.570 --> 00:00:07.730 And as always, 4 00:00:07.730 --> 00:00:10.650 let's start by looking at the finished project, 5 00:00:10.650 --> 00:00:14.383 so that we can get a feel of what we're gonna build here. 6 00:00:16.520 --> 00:00:19.660 And so this is the mapty Application. 7 00:00:19.660 --> 00:00:23.830 So you have just a small sidebar here on the left side. 8 00:00:23.830 --> 00:00:27.940 And then the main part of the application is this huge map. 9 00:00:27.940 --> 00:00:29.950 And so this map is actually loaded, 10 00:00:29.950 --> 00:00:32.150 from a third party service. 11 00:00:32.150 --> 00:00:35.120 And so in the section, you're gonna learn how to do that. 12 00:00:35.120 --> 00:00:38.570 And also the position is actually automatically obtained 13 00:00:38.570 --> 00:00:41.123 by the browser using geolocation. 14 00:00:43.320 --> 00:00:47.490 So let me turn this off here for now, the geolocation, 15 00:00:47.490 --> 00:00:49.220 and now I will reload. 16 00:00:49.220 --> 00:00:51.210 And then the browser will ask me here, 17 00:00:51.210 --> 00:00:54.360 if it is allowed to know my location. 18 00:00:54.360 --> 00:00:57.670 So probably you have seen this year in other applications. 19 00:00:57.670 --> 00:01:01.120 And so you will learn how to do this yourself now. 20 00:01:01.120 --> 00:01:05.580 So I click allow and then JavaScript will fetch my position, 21 00:01:05.580 --> 00:01:09.810 and it will then also load the map on my current position. 22 00:01:09.810 --> 00:01:11.600 Now the goal of this application 23 00:01:11.600 --> 00:01:14.340 is for me to log my workouts. 24 00:01:14.340 --> 00:01:18.500 So let's say I work out here downtown of the city. 25 00:01:18.500 --> 00:01:22.320 So here I have this form where I can input my workout. 26 00:01:22.320 --> 00:01:25.450 So here's the type which is gonna be running for now. 27 00:01:25.450 --> 00:01:29.700 Then let's say I have five kilometers and 20 minutes. 28 00:01:29.700 --> 00:01:32.603 And with 175 steps per minute. 29 00:01:33.560 --> 00:01:34.970 Then I hit enter, 30 00:01:34.970 --> 00:01:38.400 and then you see it prints here nicely on the sidebar. 31 00:01:38.400 --> 00:01:40.490 And also on our map, 32 00:01:40.490 --> 00:01:45.370 we got this pin together with this popup now, am I right? 33 00:01:45.370 --> 00:01:47.450 And of course we can do another one. 34 00:01:47.450 --> 00:01:50.693 Let's say I went cycling here a bit in the mountains. 35 00:01:51.660 --> 00:01:54.490 So here I can choose a different type. 36 00:01:54.490 --> 00:01:58.470 So this application allows us to log a running and cycling, 37 00:01:58.470 --> 00:02:02.650 and now watch what happens here to this the last value. 38 00:02:02.650 --> 00:02:06.073 So it changes from step to minutes to an elevation gain. 39 00:02:07.320 --> 00:02:11.790 So let's say I did 50 kilometers in five hours, 40 00:02:11.790 --> 00:02:14.253 and an elevation gain of 400 meters. 41 00:02:15.500 --> 00:02:16.400 And so you'll see, 42 00:02:16.400 --> 00:02:19.193 that now I get this popup here with cycling. 43 00:02:20.440 --> 00:02:21.920 Let's just do one more. 44 00:02:21.920 --> 00:02:22.993 Let's say over here, 45 00:02:24.320 --> 00:02:28.010 which is another nice spot to go running. 46 00:02:28.010 --> 00:02:30.343 And this actually has to be running again. 47 00:02:31.600 --> 00:02:34.810 And let's say 180 steps per minute. 48 00:02:34.810 --> 00:02:36.630 And now what's cool about this. 49 00:02:36.630 --> 00:02:39.400 Let's say I have activities all over the place. 50 00:02:39.400 --> 00:02:40.970 Then I can just click here, 51 00:02:40.970 --> 00:02:45.453 and it will automatically move to map to that workout, okay. 52 00:02:47.720 --> 00:02:49.140 So that's really nice. 53 00:02:49.140 --> 00:02:52.760 And I think this looks like a real nice real world project, 54 00:02:52.760 --> 00:02:54.150 and we're gonna have a lot of fun, 55 00:02:54.150 --> 00:02:56.240 building this one together. 56 00:02:56.240 --> 00:02:58.810 Of course, it could be even more real world. 57 00:02:58.810 --> 00:03:02.340 For example, we could be able to trace whole lines 58 00:03:02.340 --> 00:03:05.760 or polygons here on the map, but as always, 59 00:03:05.760 --> 00:03:07.680 I wanted to keep it simple here 60 00:03:07.680 --> 00:03:10.220 and focus mainly on the learning, 61 00:03:10.220 --> 00:03:13.110 and on just implementing some other features 62 00:03:13.110 --> 00:03:14.660 that are also pretty cool. 63 00:03:14.660 --> 00:03:15.763 I believe at least. 64 00:03:16.770 --> 00:03:18.850 Another thing that is special here, 65 00:03:18.850 --> 00:03:23.210 is that actually when we close this app and reload it. 66 00:03:23.210 --> 00:03:24.700 So let's just reload. 67 00:03:24.700 --> 00:03:26.963 It we'll basically keep it state. 68 00:03:27.890 --> 00:03:30.680 So you see that the workouts, are still here, 69 00:03:30.680 --> 00:03:32.463 and they're also still on the map. 70 00:03:34.290 --> 00:03:36.250 So you'll see, it's still everything here, 71 00:03:36.250 --> 00:03:40.650 even after we basically closed down and open it again. 72 00:03:40.650 --> 00:03:43.360 And of course, this also works if I copy it, 73 00:03:43.360 --> 00:03:47.943 open another tab and so here it is, here's all the data. 74 00:03:49.090 --> 00:03:51.700 So essentially this data about the workouts, 75 00:03:51.700 --> 00:03:53.770 is gonna be stored in a browser. 76 00:03:53.770 --> 00:03:55.560 And then each time we load the page, 77 00:03:55.560 --> 00:03:58.190 we will read the data from the browser. 78 00:03:58.190 --> 00:04:01.970 And so that's a, yet another really cool browser API. 79 00:04:01.970 --> 00:04:05.220 And that we're gonna learn about here in this project. 80 00:04:05.220 --> 00:04:08.220 All right, and now that we have a broad overview, 81 00:04:08.220 --> 00:04:10.110 of how this application works, 82 00:04:10.110 --> 00:04:12.810 let's quickly take a look at our starter files here, 83 00:04:12.810 --> 00:04:13.733 one more time. 84 00:04:14.950 --> 00:04:16.750 So this is the JavaScript. 85 00:04:16.750 --> 00:04:21.200 And once again, I already have my elements preselected here. 86 00:04:21.200 --> 00:04:23.650 So we don't have to waste time with that. 87 00:04:23.650 --> 00:04:25.670 Then here we have to style. 88 00:04:25.670 --> 00:04:28.763 And as always, you can have some fun by going through that. 89 00:04:29.940 --> 00:04:32.100 Then here's the HTML file, 90 00:04:32.100 --> 00:04:33.310 which is gonna be important 91 00:04:33.310 --> 00:04:36.450 because we will need some code from here. 92 00:04:36.450 --> 00:04:39.490 And then will also see that I have this flow chart here 93 00:04:39.490 --> 00:04:41.120 for this application, 94 00:04:41.120 --> 00:04:44.420 and also a diagram for the architecture, 95 00:04:44.420 --> 00:04:47.750 but I will not look at this flow chart for now, 96 00:04:47.750 --> 00:04:49.580 because actually in this project, 97 00:04:49.580 --> 00:04:52.400 I will explain you exactly how to come up 98 00:04:52.400 --> 00:04:54.640 with a flow chart like this. 99 00:04:54.640 --> 00:04:56.780 And in fact, that's gonna be the topic 100 00:04:56.780 --> 00:04:58.400 of the next lecture. 101 00:04:58.400 --> 00:05:00.623 And so let's move there right now.