1
00:00:03,000 --> 00:00:06,436
We had a first look at Strapi in the previous video,

2
00:00:06,436 --> 00:00:08,154
but to use it as a backend

3
00:00:08,154 --> 00:00:10,071
for our Next Shop application

4
00:00:10,071 --> 00:00:12,979
we need more than just a couple of products.

5
00:00:13,678 --> 00:00:16,085
So I have prepared a Strapi project

6
00:00:16,085 --> 00:00:18,289
that already includes some data,

7
00:00:18,858 --> 00:00:21,479
and you can download it from the resources

8
00:00:21,479 --> 00:00:23,040
attached to this lecture.

9
00:00:23,603 --> 00:00:26,782
So please download this "next-shop-backend"

10
00:00:26,782 --> 00:00:29,445
ZIP file from the lecture resources.

11
00:00:30,019 --> 00:00:32,310
I'm going to save it into my Projects folder,

12
00:00:33,051 --> 00:00:35,107
along with the "next-shop" project.

13
00:00:35,951 --> 00:00:37,275
Let me open this file,

14
00:00:37,275 --> 00:00:38,900
or better show it in Finder

15
00:00:39,551 --> 00:00:41,168
from where I can unpack it

16
00:00:41,168 --> 00:00:43,033
just by double clicking on it.

17
00:00:43,595 --> 00:00:46,779
So this extracted a "next-shop-backend" folder,

18
00:00:46,779 --> 00:00:48,879
that contains a Strapi project.

19
00:00:49,446 --> 00:00:51,619
Let me open it in Visual Studio Code.

20
00:00:53,646 --> 00:00:56,649
This project was generated using Create Strapi App,

21
00:00:56,649 --> 00:00:58,886
like we've seen in the previous video,

22
00:00:59,445 --> 00:01:01,703
but it already includes some data,

23
00:01:01,703 --> 00:01:04,559
that's saved in this local SQLite database,

24
00:01:05,126 --> 00:01:06,914
so you don't have to insert

25
00:01:06,914 --> 00:01:08,569
all the products by hand.

26
00:01:09,136 --> 00:01:10,975
Now, before we can start this server

27
00:01:12,036 --> 00:01:14,385
we need to install the dependencies

28
00:01:14,385 --> 00:01:16,063
by running "npm install".

29
00:01:18,202 --> 00:01:21,010
Since we're not going to modify this code

30
00:01:21,510 --> 00:01:23,705
we can build everything once

31
00:01:23,705 --> 00:01:25,744
by typing "npm run build",

32
00:01:26,323 --> 00:01:28,630
and this will create an optimised build.

33
00:01:31,089 --> 00:01:34,449
From now on we can simply run "npm start",

34
00:01:35,255 --> 00:01:37,328
and this will launch the Strapi server.

35
00:01:39,721 --> 00:01:42,864
We can open the admin pages from this URL.

36
00:01:43,454 --> 00:01:45,159
Let me get rid of this download.

37
00:01:46,187 --> 00:01:50,265
But here we can log in as "admin@example.com",

38
00:01:50,765 --> 00:01:53,407
this "admin" user was pre-created,

39
00:01:53,907 --> 00:01:56,918
and the password is "Admin123".

40
00:01:57,418 --> 00:02:00,127
Optionally you can tick this "Remember me" box,

41
00:02:00,627 --> 00:02:02,901
but we should now be able to log in.

42
00:02:03,427 --> 00:02:05,800
And this is the Strapi dashboard.

43
00:02:05,800 --> 00:02:07,958
Note that I've already created

44
00:02:07,958 --> 00:02:09,901
some collection types here.

45
00:02:10,544 --> 00:02:12,852
"Users" is always there by default,

46
00:02:13,352 --> 00:02:16,384
but I have already inserted a couple of users,

47
00:02:16,384 --> 00:02:18,032
called "Alice" and "Bob".

48
00:02:18,598 --> 00:02:20,645
This will be useful when we get to

49
00:02:20,645 --> 00:02:22,331
implementing authentication.

50
00:02:22,892 --> 00:02:26,053
Then there's a collection called "Cart Items".

51
00:02:26,053 --> 00:02:29,488
We'll use this to implement the cart functionality

52
00:02:29,488 --> 00:02:30,382
for our shop,

53
00:02:30,382 --> 00:02:32,443
so that users can add products

54
00:02:32,443 --> 00:02:34,024
to their shopping cart.

55
00:02:34,024 --> 00:02:36,017
But we'll discuss the details

56
00:02:36,017 --> 00:02:37,803
when we get to that point.

57
00:02:38,716 --> 00:02:41,524
The first collection we'll use is Products,

58
00:02:42,024 --> 00:02:44,212
which contains a list of items

59
00:02:44,212 --> 00:02:46,765
that's what we'll sell on our shop.

60
00:02:46,765 --> 00:02:49,683
Now, I had to pick some kind of products

61
00:02:49,683 --> 00:02:52,017
that we can sell on our website,

62
00:02:52,017 --> 00:02:53,914
and I chose indoor plants,

63
00:02:54,706 --> 00:02:57,545
just because the day before I worked on this

64
00:02:57,545 --> 00:03:00,256
I was buying some plants for my apartment.

65
00:03:00,821 --> 00:03:04,154
So if we look at the first product for example,

66
00:03:04,154 --> 00:03:06,281
this is the "Aloe Vera" plant.

67
00:03:06,281 --> 00:03:09,686
Each product has "Title", "Description", "Price"

68
00:03:10,328 --> 00:03:12,217
but also a "Picture", because

69
00:03:12,217 --> 00:03:15,409
we'll want some images to display on our website.

70
00:03:15,975 --> 00:03:18,308
So all this data is already included

71
00:03:18,308 --> 00:03:21,809
into the downloadable project, including the pictures.

72
00:03:22,374 --> 00:03:24,710
This way, from our Next.js application

73
00:03:24,710 --> 00:03:27,293
we should be able to get this product data

74
00:03:27,855 --> 00:03:31,488
simply by making an HTTP request to this server,

75
00:03:31,488 --> 00:03:32,926
using the REST API.

76
00:03:33,502 --> 00:03:35,422
Let's try this out in the REST Client

77
00:03:35,422 --> 00:03:37,395
like we've seen in the previous video.

78
00:03:37,947 --> 00:03:40,354
If I set the file type to "http"

79
00:03:41,513 --> 00:03:43,896
then we can "GET" the Strapi URL

80
00:03:43,896 --> 00:03:45,683
followed by "/products".

81
00:03:46,258 --> 00:03:48,095
And if we send this request

82
00:03:48,095 --> 00:03:49,933
we get a "200 OK" response,

83
00:03:49,933 --> 00:03:52,655
because the server is already configured

84
00:03:52,655 --> 00:03:54,492
with the right permissions.

85
00:03:55,197 --> 00:03:57,075
And the body is a JSON array

86
00:03:57,075 --> 00:03:58,954
containing all the products.

87
00:03:58,954 --> 00:04:00,900
Note that the "picture" field

88
00:04:00,900 --> 00:04:03,718
results in an object with many properties,

89
00:04:04,420 --> 00:04:06,190
but we'll talk more about that

90
00:04:06,190 --> 00:04:09,258
when we get to displaying the images on our website.

91
00:04:09,817 --> 00:04:13,026
Ok, so now that we have the Strapi backend set up

92
00:04:13,026 --> 00:04:16,236
we're ready to go back to our Next.js application

93
00:04:16,802 --> 00:04:20,024
and discuss how we can fetch this product data

94
00:04:20,024 --> 00:04:22,898
in order to display it in our shop pages.