Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,240 --> 00:00:02,550
So in this section,
2
2
00:00:02,550 --> 00:00:06,570
we're gonna build the biggest and coolest project yet.
3
3
00:00:06,570 --> 00:00:07,730
And as always,
4
4
00:00:07,730 --> 00:00:10,650
let's start by looking at the finished project,
5
5
00:00:10,650 --> 00:00:14,383
so that we can get a feel of what we're gonna build here.
6
6
00:00:16,520 --> 00:00:19,660
And so this is the mapty Application.
7
7
00:00:19,660 --> 00:00:23,830
So you have just a small sidebar here on the left side.
8
8
00:00:23,830 --> 00:00:27,940
And then the main part of the application is this huge map.
9
9
00:00:27,940 --> 00:00:29,950
And so this map is actually loaded,
10
10
00:00:29,950 --> 00:00:32,150
from a third party service.
11
11
00:00:32,150 --> 00:00:35,120
And so in the section, you're gonna learn how to do that.
12
12
00:00:35,120 --> 00:00:38,570
And also the position is actually automatically obtained
13
13
00:00:38,570 --> 00:00:41,123
by the browser using geolocation.
14
14
00:00:43,320 --> 00:00:47,490
So let me turn this off here for now, the geolocation,
15
15
00:00:47,490 --> 00:00:49,220
and now I will reload.
16
16
00:00:49,220 --> 00:00:51,210
And then the browser will ask me here,
17
17
00:00:51,210 --> 00:00:54,360
if it is allowed to know my location.
18
18
00:00:54,360 --> 00:00:57,670
So probably you have seen this year in other applications.
19
19
00:00:57,670 --> 00:01:01,120
And so you will learn how to do this yourself now.
20
20
00:01:01,120 --> 00:01:05,580
So I click allow and then JavaScript will fetch my position,
21
21
00:01:05,580 --> 00:01:09,810
and it will then also load the map on my current position.
22
22
00:01:09,810 --> 00:01:11,600
Now the goal of this application
23
23
00:01:11,600 --> 00:01:14,340
is for me to log my workouts.
24
24
00:01:14,340 --> 00:01:18,500
So let's say I work out here downtown of the city.
25
25
00:01:18,500 --> 00:01:22,320
So here I have this form where I can input my workout.
26
26
00:01:22,320 --> 00:01:25,450
So here's the type which is gonna be running for now.
27
27
00:01:25,450 --> 00:01:29,700
Then let's say I have five kilometers and 20 minutes.
28
28
00:01:29,700 --> 00:01:32,603
And with 175 steps per minute.
29
29
00:01:33,560 --> 00:01:34,970
Then I hit enter,
30
30
00:01:34,970 --> 00:01:38,400
and then you see it prints here nicely on the sidebar.
31
31
00:01:38,400 --> 00:01:40,490
And also on our map,
32
32
00:01:40,490 --> 00:01:45,370
we got this pin together with this popup now, am I right?
33
33
00:01:45,370 --> 00:01:47,450
And of course we can do another one.
34
34
00:01:47,450 --> 00:01:50,693
Let's say I went cycling here a bit in the mountains.
35
35
00:01:51,660 --> 00:01:54,490
So here I can choose a different type.
36
36
00:01:54,490 --> 00:01:58,470
So this application allows us to log a running and cycling,
37
37
00:01:58,470 --> 00:02:02,650
and now watch what happens here to this the last value.
38
38
00:02:02,650 --> 00:02:06,073
So it changes from step to minutes to an elevation gain.
39
39
00:02:07,320 --> 00:02:11,790
So let's say I did 50 kilometers in five hours,
40
40
00:02:11,790 --> 00:02:14,253
and an elevation gain of 400 meters.
41
41
00:02:15,500 --> 00:02:16,400
And so you'll see,
42
42
00:02:16,400 --> 00:02:19,193
that now I get this popup here with cycling.
43
43
00:02:20,440 --> 00:02:21,920
Let's just do one more.
44
44
00:02:21,920 --> 00:02:22,993
Let's say over here,
45
45
00:02:24,320 --> 00:02:28,010
which is another nice spot to go running.
46
46
00:02:28,010 --> 00:02:30,343
And this actually has to be running again.
47
47
00:02:31,600 --> 00:02:34,810
And let's say 180 steps per minute.
48
48
00:02:34,810 --> 00:02:36,630
And now what's cool about this.
49
49
00:02:36,630 --> 00:02:39,400
Let's say I have activities all over the place.
50
50
00:02:39,400 --> 00:02:40,970
Then I can just click here,
51
51
00:02:40,970 --> 00:02:45,453
and it will automatically move to map to that workout, okay.
52
52
00:02:47,720 --> 00:02:49,140
So that's really nice.
53
53
00:02:49,140 --> 00:02:52,760
And I think this looks like a real nice real world project,
54
54
00:02:52,760 --> 00:02:54,150
and we're gonna have a lot of fun,
55
55
00:02:54,150 --> 00:02:56,240
building this one together.
56
56
00:02:56,240 --> 00:02:58,810
Of course, it could be even more real world.
57
57
00:02:58,810 --> 00:03:02,340
For example, we could be able to trace whole lines
58
58
00:03:02,340 --> 00:03:05,760
or polygons here on the map, but as always,
59
59
00:03:05,760 --> 00:03:07,680
I wanted to keep it simple here
60
60
00:03:07,680 --> 00:03:10,220
and focus mainly on the learning,
61
61
00:03:10,220 --> 00:03:13,110
and on just implementing some other features
62
62
00:03:13,110 --> 00:03:14,660
that are also pretty cool.
63
63
00:03:14,660 --> 00:03:15,763
I believe at least.
64
64
00:03:16,770 --> 00:03:18,850
Another thing that is special here,
65
65
00:03:18,850 --> 00:03:23,210
is that actually when we close this app and reload it.
66
66
00:03:23,210 --> 00:03:24,700
So let's just reload.
67
67
00:03:24,700 --> 00:03:26,963
It we'll basically keep it state.
68
68
00:03:27,890 --> 00:03:30,680
So you see that the workouts, are still here,
69
69
00:03:30,680 --> 00:03:32,463
and they're also still on the map.
70
70
00:03:34,290 --> 00:03:36,250
So you'll see, it's still everything here,
71
71
00:03:36,250 --> 00:03:40,650
even after we basically closed down and open it again.
72
72
00:03:40,650 --> 00:03:43,360
And of course, this also works if I copy it,
73
73
00:03:43,360 --> 00:03:47,943
open another tab and so here it is, here's all the data.
74
74
00:03:49,090 --> 00:03:51,700
So essentially this data about the workouts,
75
75
00:03:51,700 --> 00:03:53,770
is gonna be stored in a browser.
76
76
00:03:53,770 --> 00:03:55,560
And then each time we load the page,
77
77
00:03:55,560 --> 00:03:58,190
we will read the data from the browser.
78
78
00:03:58,190 --> 00:04:01,970
And so that's a, yet another really cool browser API.
79
79
00:04:01,970 --> 00:04:05,220
And that we're gonna learn about here in this project.
80
80
00:04:05,220 --> 00:04:08,220
All right, and now that we have a broad overview,
81
81
00:04:08,220 --> 00:04:10,110
of how this application works,
82
82
00:04:10,110 --> 00:04:12,810
let's quickly take a look at our starter files here,
83
83
00:04:12,810 --> 00:04:13,733
one more time.
84
84
00:04:14,950 --> 00:04:16,750
So this is the JavaScript.
85
85
00:04:16,750 --> 00:04:21,200
And once again, I already have my elements preselected here.
86
86
00:04:21,200 --> 00:04:23,650
So we don't have to waste time with that.
87
87
00:04:23,650 --> 00:04:25,670
Then here we have to style.
88
88
00:04:25,670 --> 00:04:28,763
And as always, you can have some fun by going through that.
89
89
00:04:29,940 --> 00:04:32,100
Then here's the HTML file,
90
90
00:04:32,100 --> 00:04:33,310
which is gonna be important
91
91
00:04:33,310 --> 00:04:36,450
because we will need some code from here.
92
92
00:04:36,450 --> 00:04:39,490
And then will also see that I have this flow chart here
93
93
00:04:39,490 --> 00:04:41,120
for this application,
94
94
00:04:41,120 --> 00:04:44,420
and also a diagram for the architecture,
95
95
00:04:44,420 --> 00:04:47,750
but I will not look at this flow chart for now,
96
96
00:04:47,750 --> 00:04:49,580
because actually in this project,
97
97
00:04:49,580 --> 00:04:52,400
I will explain you exactly how to come up
98
98
00:04:52,400 --> 00:04:54,640
with a flow chart like this.
99
99
00:04:54,640 --> 00:04:56,780
And in fact, that's gonna be the topic
100
100
00:04:56,780 --> 00:04:58,400
of the next lecture.
101
101
00:04:58,400 --> 00:05:00,623
And so let's move there right now.
8801
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.