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.