Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:03,000 --> 00:00:06,384
I will now give you a quick overview of Strapi,
2
00:00:06,384 --> 00:00:09,066
that, as mentioned, is the Headless
3
00:00:09,066 --> 00:00:11,366
CMS we'll use for our example.
4
00:00:11,442 --> 00:00:13,960
Now, you can just watch this video,
5
00:00:13,960 --> 00:00:17,078
without following the same steps on your machine,
6
00:00:17,078 --> 00:00:19,492
because in the next lecture I'll give
7
00:00:19,492 --> 00:00:21,515
you a project you can download,
8
00:00:21,580 --> 00:00:24,389
so what I'm showing you now is just to
9
00:00:24,389 --> 00:00:27,125
give you an idea of how Strapi works.
10
00:00:27,199 --> 00:00:29,774
We can initialize a new project with
11
00:00:29,774 --> 00:00:32,061
the "create-strapi-app" command.
12
00:00:32,134 --> 00:00:34,102
So I'll open a Terminal,
13
00:00:34,102 --> 00:00:36,791
and I'm inside my Projects folder.
14
00:00:36,791 --> 00:00:39,394
Here I'll run "create-strapi-app",
15
00:00:39,394 --> 00:00:43,329
but let me change the project name to "my-cms".
16
00:00:43,329 --> 00:00:45,988
We want a "Quickstart" installation,
17
00:00:45,988 --> 00:00:48,539
and it will take some time to download
18
00:00:48,539 --> 00:00:49,949
all the dependencies.
19
00:00:50,016 --> 00:00:51,825
It will also start the Strapi
20
00:00:51,825 --> 00:00:53,447
application automatically,
21
00:00:53,796 --> 00:00:55,936
and this opens a web page where
22
00:00:55,936 --> 00:00:57,386
we can create a user.
23
00:00:57,455 --> 00:00:59,248
But we'll do that later.
24
00:00:59,415 --> 00:01:01,610
Let me stop the server for now,
25
00:01:01,610 --> 00:01:04,967
and show you what's inside this project first,
26
00:01:04,967 --> 00:01:07,667
by opening it in Visual Studio Code.
27
00:01:07,667 --> 00:01:10,858
You can see that it's a JavaScript project,
28
00:01:10,858 --> 00:01:12,861
with a "package.json" file.
29
00:01:12,935 --> 00:01:15,547
It has some Strapi dependencies,
30
00:01:15,547 --> 00:01:18,808
and it uses SQLite as the database
31
00:01:18,808 --> 00:01:20,535
for local testing.
32
00:01:20,630 --> 00:01:23,152
We don't actually need to look at the code,
33
00:01:23,152 --> 00:01:24,618
but it is all JavaScript.
34
00:01:24,676 --> 00:01:27,281
Now, we can start the dev server,
35
00:01:27,281 --> 00:01:30,414
by going inside the project folder first,
36
00:01:30,414 --> 00:01:33,218
and typing "npm run develop".
37
00:01:33,218 --> 00:01:35,755
This will start the Strapi server
38
00:01:35,755 --> 00:01:37,292
in development mode.
39
00:01:37,369 --> 00:01:40,289
And it's asking us again to create a user.
40
00:01:40,289 --> 00:01:43,376
So I'll just enter some sample details.
41
00:01:43,411 --> 00:01:47,658
I'll put "admin@example.com" as the email,
42
00:01:47,658 --> 00:01:50,964
and "Admin123" as the password,
43
00:01:50,964 --> 00:01:53,126
that are the same credentials we'll
44
00:01:53,126 --> 00:01:55,103
use for the rest of our example.
45
00:01:55,165 --> 00:01:57,664
Now, this is just a welcome tour,
46
00:01:57,664 --> 00:01:58,952
that we can skip.
47
00:01:59,028 --> 00:02:02,482
But this is what the Strapi dashboard looks like.
48
00:02:02,482 --> 00:02:06,301
From here we can configure our "Content Types",
49
00:02:06,301 --> 00:02:08,609
which means the type of objects
50
00:02:08,609 --> 00:02:10,768
we want to save into the CMS.
51
00:02:10,842 --> 00:02:13,830
There's an existing type called User,
52
00:02:13,830 --> 00:02:17,473
with fields like "username", "email", and so on,
53
00:02:17,473 --> 00:02:19,140
but we're not actually going
54
00:02:19,140 --> 00:02:20,629
to use it in our example.
55
00:02:20,688 --> 00:02:24,010
Instead, we want to create a new collection type,
56
00:02:24,010 --> 00:02:27,554
and we can enter "Review" as the "Display name",
57
00:02:27,554 --> 00:02:30,863
because this object represents a game review
58
00:02:30,863 --> 00:02:34,020
that we'll display on our Next.js website.
59
00:02:34,095 --> 00:02:36,571
There are some "Advanced Settings",
60
00:02:36,571 --> 00:02:40,542
and by default it has "Draft & publish" enabled,
61
00:02:40,542 --> 00:02:43,431
which means that when we create a new Review
62
00:02:43,431 --> 00:02:45,467
it will initially be a "Draft",
63
00:02:45,533 --> 00:02:48,850
and then we can publish it as a separate step.
64
00:02:48,850 --> 00:02:51,477
This could be useful to preview each
65
00:02:51,477 --> 00:02:53,593
article before publishing it.
66
00:02:53,666 --> 00:02:55,559
Anyway, let's continue.
67
00:02:55,559 --> 00:02:57,868
The next step is to define some
68
00:02:57,868 --> 00:03:00,176
fields for our collection type.
69
00:03:00,250 --> 00:03:03,249
For example we could add a "Text" field,
70
00:03:03,249 --> 00:03:06,046
for the "title" of each Review.
71
00:03:06,046 --> 00:03:08,796
We're basically defining which properties
72
00:03:08,796 --> 00:03:11,076
are available for a Review object.
73
00:03:11,143 --> 00:03:13,834
Again, there are some "Advanced Settings",
74
00:03:13,834 --> 00:03:17,308
and here we can set this field as "required",
75
00:03:17,308 --> 00:03:20,396
which sounds like a good idea for the "title".
76
00:03:20,396 --> 00:03:23,063
Then we can go ahead and add another field,
77
00:03:23,063 --> 00:03:25,962
this time we could select "Rich text",
78
00:03:25,962 --> 00:03:28,758
that will provide a "rich text editor
79
00:03:28,758 --> 00:03:30,647
with formatting options".
80
00:03:30,723 --> 00:03:33,908
This is perfect for the "body" of our Review.
81
00:03:33,908 --> 00:03:35,504
And, once again, we could
82
00:03:35,504 --> 00:03:37,100
make it required as well.
83
00:03:37,164 --> 00:03:39,130
Ok, let's finish here.
84
00:03:39,130 --> 00:03:40,896
We only have two fields, but
85
00:03:40,896 --> 00:03:42,662
that's enough as an example.
86
00:03:42,725 --> 00:03:45,069
What we want to do now is "Save"
87
00:03:45,069 --> 00:03:46,827
our new collection type,
88
00:03:46,900 --> 00:03:49,870
and Strapi will restart, after adding
89
00:03:49,870 --> 00:03:52,598
some code for our new Review type.
90
00:03:52,679 --> 00:03:54,508
At this point we can go to
91
00:03:54,508 --> 00:03:56,337
the "Content Manager" tab,
92
00:03:56,407 --> 00:03:59,105
and here we'll see all our reviews.
93
00:03:59,105 --> 00:04:01,247
Of course we don't have any yet,
94
00:04:01,247 --> 00:04:04,363
but we can go and create a new entry from here.
95
00:04:04,363 --> 00:04:07,509
Let's enter a title, like "Stardew Valley",
96
00:04:07,509 --> 00:04:10,631
and a body, with some example text.
97
00:04:11,906 --> 00:04:14,524
Now, as you can see this editor provides
98
00:04:14,524 --> 00:04:16,553
some simple formatting options,
99
00:04:16,619 --> 00:04:18,930
so we can select some text
100
00:04:18,930 --> 00:04:20,925
click the Bold button,
101
00:04:20,925 --> 00:04:24,058
and this adds the right Markdown syntax.
102
00:04:24,058 --> 00:04:26,053
We can then preview the result
103
00:04:26,053 --> 00:04:27,582
with this other button.
104
00:04:27,648 --> 00:04:30,840
So the person that writes the review doesn't
105
00:04:30,840 --> 00:04:33,597
need to know the full Markdown syntax.
106
00:04:33,669 --> 00:04:36,318
Anyway, let's go and save this entry.
107
00:04:36,318 --> 00:04:40,577
Now, at this point this Review is a Draft version,
108
00:04:40,577 --> 00:04:42,919
so we could have another person
109
00:04:42,919 --> 00:04:44,959
check the text for example.
110
00:04:45,034 --> 00:04:48,116
And then we can publish it as a separate step.
111
00:04:48,116 --> 00:04:50,161
If we go back to the list, we can
112
00:04:50,161 --> 00:04:52,144
see our new review in the table.
113
00:04:52,206 --> 00:04:54,581
Let's go and quickly create another entry,
114
00:04:54,581 --> 00:04:57,059
this time for "Hollow Knight",
115
00:04:57,059 --> 00:04:59,675
and I'll just write "Test" as the body.
116
00:04:59,675 --> 00:05:02,719
Let's save, and publish straight away,
117
00:05:02,719 --> 00:05:04,982
and if we go back, of course we
118
00:05:04,982 --> 00:05:07,027
see two reviews in the list.
119
00:05:07,100 --> 00:05:09,948
So, as administrators we can define
120
00:05:09,948 --> 00:05:11,739
some collection types,
121
00:05:11,821 --> 00:05:13,770
and specify which fields are
122
00:05:13,770 --> 00:05:15,441
available for each type,
123
00:05:15,511 --> 00:05:17,386
and Strapi will automatically
124
00:05:17,386 --> 00:05:19,002
give us a user interface,
125
00:05:19,067 --> 00:05:22,237
with a form with all the right field types,
126
00:05:22,237 --> 00:05:24,780
so we or other staff members
127
00:05:24,780 --> 00:05:27,141
can easily enter the data.
128
00:05:27,232 --> 00:05:30,457
Not only that, but Strapi automatically
129
00:05:30,457 --> 00:05:31,697
provides an API
130
00:05:31,779 --> 00:05:34,096
that we can call from our frontend
131
00:05:34,096 --> 00:05:36,141
application to fetch the data.
132
00:05:36,209 --> 00:05:38,994
It's a REST API that we can use for
133
00:05:38,994 --> 00:05:41,461
example to get all the entries.
134
00:05:41,541 --> 00:05:44,441
Let's try opening this URL in the browser,
135
00:05:44,441 --> 00:05:47,315
but our collection is called "reviews".
136
00:05:47,315 --> 00:05:50,728
Now, at the moment we get a "Forbidden" error,
137
00:05:50,728 --> 00:05:52,733
because we need to configure
138
00:05:52,733 --> 00:05:54,380
some permissions first.
139
00:05:54,452 --> 00:05:57,862
Under Settings we can configure the Roles,
140
00:05:57,862 --> 00:06:00,135
under "Users & Permissions".
141
00:06:00,216 --> 00:06:03,271
There's a predefined Role called "Public",
142
00:06:03,271 --> 00:06:05,478
where we can specify which content
143
00:06:05,478 --> 00:06:07,684
should be accessible to everybody.
144
00:06:07,749 --> 00:06:09,644
Here we can select "Review",
145
00:06:09,644 --> 00:06:13,133
and if we enable "find" and "findOne",
146
00:06:13,133 --> 00:06:17,271
this means the public should be able to read the reviews,
147
00:06:17,271 --> 00:06:18,722
but not modify them.
148
00:06:18,795 --> 00:06:21,660
So, if we save these new permissions
149
00:06:21,660 --> 00:06:25,245
and then go and request "/api/reviews" again,
150
00:06:25,245 --> 00:06:28,693
you can see that this time we get some JSON data,
151
00:06:28,693 --> 00:06:31,132
that contains two objects with
152
00:06:31,132 --> 00:06:33,571
"title" and "body" properties,
153
00:06:33,652 --> 00:06:35,421
along with some other fields
154
00:06:35,421 --> 00:06:37,127
that are set automatically.
155
00:06:37,191 --> 00:06:39,642
We'll look at the data format in more
156
00:06:39,642 --> 00:06:41,563
detail later in this section,
157
00:06:41,629 --> 00:06:44,447
but this is how we'll be able to fetch
158
00:06:44,447 --> 00:06:47,117
the data in our Next.js application.
159
00:06:47,191 --> 00:06:50,319
Our collaborators can manage all the review
160
00:06:50,319 --> 00:06:52,647
data using the Strapi interface,
161
00:06:52,720 --> 00:06:54,749
but we'll display it to the
162
00:06:54,749 --> 00:06:56,704
public in our Next.js app,
163
00:06:56,779 --> 00:06:59,941
with a fully customized user interface.
164
00:06:59,941 --> 00:07:03,661
Now, I've only created two text fields here,
165
00:07:03,661 --> 00:07:07,126
but there are other field types, like Media,
166
00:07:07,126 --> 00:07:10,854
that we can use to upload images for example,
167
00:07:10,854 --> 00:07:14,504
or "UID", that is a unique identifier,
168
00:07:14,504 --> 00:07:17,409
and will be useful for the review "slug".
169
00:07:17,409 --> 00:07:20,323
As mentioned, in the next video I'll give
170
00:07:20,323 --> 00:07:22,739
you a preconfigured Strapi project
171
00:07:22,810 --> 00:07:26,371
that already includes data for a number of reviews,
172
00:07:26,371 --> 00:07:27,558
including images.
12716
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.