Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,623 --> 00:00:03,340
Now for that,
2
00:00:03,340 --> 00:00:05,600
I'm back in the events project
3
00:00:05,600 --> 00:00:07,220
as we left it,
4
00:00:07,220 --> 00:00:09,860
attached you find my snapshot,
5
00:00:09,860 --> 00:00:11,820
and, there we can spin up
6
00:00:11,820 --> 00:00:13,430
that development server again,
7
00:00:13,430 --> 00:00:15,840
with NPM run dev.
8
00:00:15,840 --> 00:00:18,820
If we then visit local host free thousand,
9
00:00:18,820 --> 00:00:20,854
we see our events page,
10
00:00:20,854 --> 00:00:23,230
and we can explore the individual events,
11
00:00:23,230 --> 00:00:25,430
and do all those things we,
12
00:00:25,430 --> 00:00:28,333
already practiced in the last project section.
13
00:00:29,230 --> 00:00:31,330
Now up to this point of course,
14
00:00:31,330 --> 00:00:33,530
all the data is in the end,
15
00:00:33,530 --> 00:00:36,260
how it's coded into our pages.
16
00:00:36,260 --> 00:00:39,200
Actually not in the page components themselves,
17
00:00:39,200 --> 00:00:42,560
but we have this dummy data Java script file,
18
00:00:42,560 --> 00:00:45,350
which, well, holds all that data,
19
00:00:45,350 --> 00:00:48,580
and then exposes various helper functions
20
00:00:48,580 --> 00:00:50,350
for retrieving that data,
21
00:00:50,350 --> 00:00:52,530
and working with that data.
22
00:00:52,530 --> 00:00:54,860
And that ultimately is,
23
00:00:54,860 --> 00:00:59,020
not really how we now wanna work with that.
24
00:00:59,020 --> 00:01:01,730
It would be more realistic that,
25
00:01:01,730 --> 00:01:04,060
this data, our events,
26
00:01:04,060 --> 00:01:06,410
are stored in some database,
27
00:01:06,410 --> 00:01:08,260
or in some file,
28
00:01:08,260 --> 00:01:11,630
or coming from another API.
29
00:01:11,630 --> 00:01:16,370
And here, I wanna put those events, into Firebase,
30
00:01:16,370 --> 00:01:19,230
this dummy backend we already used
31
00:01:19,230 --> 00:01:21,080
in the last core section,
32
00:01:21,080 --> 00:01:23,850
so that we can fetch the data from there.
33
00:01:23,850 --> 00:01:26,640
Just so that we have an easy to use backend,
34
00:01:26,640 --> 00:01:28,040
which exposes an API,
35
00:01:28,040 --> 00:01:29,183
which we can query.
36
00:01:30,040 --> 00:01:32,090
Now, I have my sales data in there,
37
00:01:32,090 --> 00:01:33,990
from the last core section,
38
00:01:33,990 --> 00:01:36,530
I'm using the same Firebase project,
39
00:01:36,530 --> 00:01:38,950
you could of course also create a new one.
40
00:01:38,950 --> 00:01:42,490
Just make sure that you do use the real time database.
41
00:01:42,490 --> 00:01:44,790
I will continue with this one though.
42
00:01:44,790 --> 00:01:47,560
And I will add my events here,
43
00:01:47,560 --> 00:01:49,720
into that same database.
44
00:01:49,720 --> 00:01:52,170
So for that, we can click on the plus here,
45
00:01:52,170 --> 00:01:54,500
next to that database name,
46
00:01:54,500 --> 00:01:58,580
and give this, a name of events, this node,
47
00:01:58,580 --> 00:02:02,400
and then add a new nested document in there,
48
00:02:02,400 --> 00:02:05,470
which now has basically the event ID
49
00:02:05,470 --> 00:02:07,970
as a name, e1 let's say,
50
00:02:07,970 --> 00:02:10,520
and then we nest more data in there,
51
00:02:10,520 --> 00:02:14,470
and we transfer the title into Firebase.
52
00:02:14,470 --> 00:02:17,740
So I'll give this key, a name of title,
53
00:02:17,740 --> 00:02:19,230
and the value then,
54
00:02:19,230 --> 00:02:23,943
is the title I had here, like this.
55
00:02:25,080 --> 00:02:25,913
And now I'm going
56
00:02:25,913 --> 00:02:28,040
to add all the other data as well,
57
00:02:28,040 --> 00:02:30,270
like the description.
58
00:02:30,270 --> 00:02:33,630
So grab that description string here,
59
00:02:33,630 --> 00:02:35,970
give this a name of, description,
60
00:02:35,970 --> 00:02:37,890
paste in that value,
61
00:02:37,890 --> 00:02:41,790
and repeat that for the location and so on.
62
00:02:41,790 --> 00:02:43,320
Now I don't wanna bore you,
63
00:02:43,320 --> 00:02:45,630
so I will fast forward here.
64
00:02:45,630 --> 00:02:48,920
You of course can migrate this on your own.
65
00:02:48,920 --> 00:02:50,050
Just pause the video
66
00:02:50,050 --> 00:02:52,490
and migrated it, util you're done.
67
00:02:52,490 --> 00:02:53,323
You also don't have
68
00:02:53,323 --> 00:02:55,246
to migrate all the data of course,
69
00:02:55,246 --> 00:02:57,040
if you don't want to,
70
00:02:57,040 --> 00:03:00,060
I will migrate all the data though,
71
00:03:00,060 --> 00:03:03,040
but you can of course also speed this process up a bit
72
00:03:03,040 --> 00:03:05,340
and just migrate some data.
73
00:03:05,340 --> 00:03:07,490
Important for the images,
74
00:03:07,490 --> 00:03:10,720
we wanna keep the paths which we used before,
75
00:03:10,720 --> 00:03:13,110
because I will keep the images local,
76
00:03:13,110 --> 00:03:15,220
in the public folder.
77
00:03:15,220 --> 00:03:18,120
That's not super realistic,
78
00:03:18,120 --> 00:03:22,260
and we will re-explore image storage later again,
79
00:03:22,260 --> 00:03:23,140
but for the moment,
80
00:03:23,140 --> 00:03:25,590
let's stick to this setup.
81
00:03:25,590 --> 00:03:27,360
So I will just keep the path,
82
00:03:27,360 --> 00:03:30,320
which points to the locally stored images,
83
00:03:30,320 --> 00:03:32,043
in the public folder here.
84
00:03:32,930 --> 00:03:33,763
So therefore here,
85
00:03:33,763 --> 00:03:37,970
I now add isFeatured, set this to false.
86
00:03:37,970 --> 00:03:41,600
And now again, I will just complete this off screen,
87
00:03:41,600 --> 00:03:45,033
and I'm back once I migrated all the events.
88
00:03:53,190 --> 00:03:54,750
Okay, so I'm done.
89
00:03:54,750 --> 00:03:57,080
I copied over all the data here,
90
00:03:57,080 --> 00:03:59,780
into Firebase, those free events,
91
00:03:59,780 --> 00:04:01,790
and therefore this is now prepared,
92
00:04:01,790 --> 00:04:03,590
such that we can query it.
93
00:04:03,590 --> 00:04:06,520
That's therefore we're gonna go to dive in, next.
94
00:04:06,520 --> 00:04:08,520
Now for this course section,
95
00:04:08,520 --> 00:04:11,160
I strongly recommend that you don't continue
96
00:04:11,160 --> 00:04:13,170
with me immediately,
97
00:04:13,170 --> 00:04:15,180
but that instead you pause,
98
00:04:15,180 --> 00:04:18,350
and you're try implementing data fetching
99
00:04:18,350 --> 00:04:19,880
on your own first.
100
00:04:19,880 --> 00:04:23,180
Go through those different pages, and think about,
101
00:04:23,180 --> 00:04:26,000
the different data fetching approaches you learned,
102
00:04:26,000 --> 00:04:28,990
in the last lectures, in the last section.
103
00:04:28,990 --> 00:04:31,330
Then add the different approaches,
104
00:04:31,330 --> 00:04:33,170
which make the most sense to you,
105
00:04:33,170 --> 00:04:35,170
to the different pages.
106
00:04:35,170 --> 00:04:36,540
So look at the pages,
107
00:04:36,540 --> 00:04:38,870
evaluate which data fetching approach,
108
00:04:38,870 --> 00:04:41,570
might make the most sense for the given page.
109
00:04:41,570 --> 00:04:43,510
And then add it.
110
00:04:43,510 --> 00:04:45,230
Now once you try this on your own,
111
00:04:45,230 --> 00:04:47,120
definitely go through this module,
112
00:04:47,120 --> 00:04:50,320
to gather with me, with these modules lectures,
113
00:04:50,320 --> 00:04:52,520
to see how I solved this,
114
00:04:52,520 --> 00:04:54,480
and what my reasoning was,
115
00:04:54,480 --> 00:04:57,420
for fetching data in different ways,
116
00:04:57,420 --> 00:04:59,683
in those different page components.
8280
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.