1
00:00:01,370 --> 00:00:03,150
‫So far in this section,

2
00:00:03,150 --> 00:00:04,790
‫you learned how to require

3
00:00:04,790 --> 00:00:06,720
‫Node JS core modules.

4
00:00:06,720 --> 00:00:09,330
‫How to require your own modules.

5
00:00:09,330 --> 00:00:10,210
‫And so in this video,

6
00:00:10,210 --> 00:00:12,050
‫you're gonna learn how to require

7
00:00:12,050 --> 00:00:15,483
‫third-party modules from the NPM registry.

8
00:00:17,440 --> 00:00:19,863
‫Actually requiring a module

9
00:00:19,863 --> 00:00:22,530
‫that we already installed from NPM

10
00:00:22,530 --> 00:00:24,610
‫is really, really simple.

11
00:00:24,610 --> 00:00:27,380
‫So again we do all the requiring

12
00:00:27,380 --> 00:00:30,230
‫at the top and usually we require

13
00:00:30,230 --> 00:00:31,690
‫the core modules first,

14
00:00:31,690 --> 00:00:33,410
‫then the third-party modules,

15
00:00:33,410 --> 00:00:35,980
‫and then our own coming from

16
00:00:35,980 --> 00:00:37,793
‫our local file system like this.

17
00:00:38,940 --> 00:00:41,740
‫So the one that we are going to require

18
00:00:41,740 --> 00:00:43,360
‫is called slugify.

19
00:00:43,360 --> 00:00:45,000
‫Remember?

20
00:00:45,000 --> 00:00:46,400
‫This is the one that we installed

21
00:00:46,400 --> 00:00:48,350
‫in the previous lecture.

22
00:00:48,350 --> 00:00:50,780
‫And all we have to do to require it

23
00:00:50,780 --> 00:00:52,510
‫is to just like before

24
00:00:52,510 --> 00:00:54,120
‫use the require function

25
00:00:54,120 --> 00:00:57,770
‫and then simply the name of the package.

26
00:00:57,770 --> 00:01:00,010
‫And then OGS will automatically know

27
00:01:00,010 --> 00:01:01,450
‫that it will have to go into

28
00:01:01,450 --> 00:01:02,993
‫the node modules folder.

29
00:01:03,920 --> 00:01:07,260
‫So this folder where all the dependencies are,

30
00:01:07,260 --> 00:01:09,353
‫and search for that module there.

31
00:01:11,470 --> 00:01:12,610
‫Okay?

32
00:01:12,610 --> 00:01:17,430
‫So again this will then return a variable.

33
00:01:17,430 --> 00:01:20,483
‫And so we need to save that into a variable.

34
00:01:22,860 --> 00:01:27,860
‫And I'm calling it slugify here just like this.

35
00:01:27,910 --> 00:01:28,743
‫Okay?

36
00:01:28,743 --> 00:01:30,940
‫And so slugify will be a function,

37
00:01:30,940 --> 00:01:34,630
‫which we can use to basically create slugs.

38
00:01:34,630 --> 00:01:37,260
‫So again what is a slug?

39
00:01:37,260 --> 00:01:40,730
‫Well slug is basically just the last part

40
00:01:40,730 --> 00:01:44,030
‫of a URL that contains a unique string

41
00:01:44,030 --> 00:01:46,130
‫that identifies the resource

42
00:01:46,130 --> 00:01:48,263
‫that the website is displaying.

43
00:01:49,310 --> 00:01:50,590
‫So for example,

44
00:01:50,590 --> 00:01:52,380
‫in our node farm let's say

45
00:01:52,380 --> 00:01:54,810
‫that where we opened this avocado

46
00:01:54,810 --> 00:01:58,750
‫instead of having this ID equal zero

47
00:01:58,750 --> 00:02:01,190
‫we could have something like

48
00:02:01,190 --> 00:02:05,980
‫(clicking) fresh avocados, okay?

49
00:02:05,980 --> 00:02:08,290
‫And so this part here

50
00:02:08,290 --> 00:02:10,330
‫or actually just this part

51
00:02:10,330 --> 00:02:12,910
‫so this would be the slug.

52
00:02:12,910 --> 00:02:15,150
‫So it's basically this name here

53
00:02:15,150 --> 00:02:19,420
‫and then based into a unique string like this.

54
00:02:19,420 --> 00:02:20,830
‫And I'm sure that you have seen this

55
00:02:20,830 --> 00:02:23,090
‫all over the place like in blog posts.

56
00:02:23,090 --> 00:02:25,830
‫It's very common to do it like this.

57
00:02:25,830 --> 00:02:30,830
‫Or really anywhere where we do not simply want

58
00:02:30,900 --> 00:02:33,053
‫something like this.

59
00:02:33,990 --> 00:02:34,823
‫Okay?

60
00:02:34,823 --> 00:02:36,190
‫So ID equals one.

61
00:02:36,190 --> 00:02:38,130
‫Or we could also just use

62
00:02:38,130 --> 00:02:39,580
‫for example in this case here

63
00:02:40,830 --> 00:02:45,712
‫goat and so on and so forth.

64
00:02:45,712 --> 00:02:46,683
‫Okay.

65
00:02:46,683 --> 00:02:47,630
‫I'm not gonna run a tab on the entire name.

66
00:02:47,630 --> 00:02:50,120
‫But the idea is to use a slug,

67
00:02:50,120 --> 00:02:52,400
‫which is this so a unique string

68
00:02:52,400 --> 00:02:53,820
‫instead of just a number

69
00:02:53,820 --> 00:02:56,530
‫which is not meaningful to us at all.

70
00:02:56,530 --> 00:02:58,660
‫Now let's say this is the first time

71
00:02:58,660 --> 00:03:02,200
‫that you're using the slugify package.

72
00:03:02,200 --> 00:03:04,500
‫And so in order to figure out

73
00:03:04,500 --> 00:03:06,100
‫how it actually works

74
00:03:06,100 --> 00:03:07,870
‫we can search for the documentation

75
00:03:07,870 --> 00:03:09,173
‫here on NPM.

76
00:03:10,920 --> 00:03:15,323
‫So we just put the name of the package here.

77
00:03:16,770 --> 00:03:18,210
‫Then search for it.

78
00:03:18,210 --> 00:03:20,473
‫And so this is the one that we did install.

79
00:03:22,300 --> 00:03:23,510
‫All right.

80
00:03:23,510 --> 00:03:25,710
‫So we already did this part here.

81
00:03:25,710 --> 00:03:29,347
‫So requiring the module or the package here.

82
00:03:29,347 --> 00:03:31,240
‫And then down here we can see

83
00:03:31,240 --> 00:03:32,150
‫how we used it.

84
00:03:32,150 --> 00:03:33,580
‫So all we have to do

85
00:03:33,580 --> 00:03:36,320
‫is to use slugify as a function

86
00:03:36,320 --> 00:03:37,653
‫and then pass in a string.

87
00:03:39,740 --> 00:03:42,940
‫Then down here you see the options.

88
00:03:42,940 --> 00:03:46,690
‫And for example we can specify the replacement.

89
00:03:46,690 --> 00:03:49,140
‫So basically what the empty space

90
00:03:49,140 --> 00:03:50,600
‫will be replaced with.

91
00:03:50,600 --> 00:03:52,080
‫And usually that's this dash.

92
00:03:52,080 --> 00:03:54,343
‫So just like I was typing here.

93
00:03:55,770 --> 00:03:57,710
‫But we can specify something different

94
00:03:57,710 --> 00:04:00,853
‫like an underscore or nothing at all.

95
00:04:02,210 --> 00:04:03,043
‫Okay.

96
00:04:03,043 --> 00:04:04,330
‫Here we can specify that we want

97
00:04:04,330 --> 00:04:06,340
‫everything in a lower case.

98
00:04:06,340 --> 00:04:08,390
‫And so let's actually go ahead and do that

99
00:04:08,390 --> 00:04:09,393
‫now in our code.

100
00:04:10,390 --> 00:04:11,700
‫So we have slugify here

101
00:04:11,700 --> 00:04:13,940
‫and now just to test it

102
00:04:13,940 --> 00:04:16,513
‫let's do it here before we create the server.

103
00:04:20,310 --> 00:04:21,543
‫Console at log.

104
00:04:22,900 --> 00:04:25,803
‫Slugify to string.

105
00:04:29,160 --> 00:04:31,680
‫Fresh avocados and then I'm gonna specify

106
00:04:31,680 --> 00:04:34,410
‫the option that I just showed you,

107
00:04:34,410 --> 00:04:35,630
‫which is lower case

108
00:04:38,140 --> 00:04:40,120
‫and set it to true.

109
00:04:40,120 --> 00:04:40,953
‫Give it a save

110
00:04:41,880 --> 00:04:43,660
‫and remember that now no longer

111
00:04:43,660 --> 00:04:45,060
‫we have to close the app

112
00:04:45,060 --> 00:04:46,850
‫and restart it again.

113
00:04:46,850 --> 00:04:49,760
‫Node man does that automatically for us now.

114
00:04:49,760 --> 00:04:53,520
‫And so down here you already see fresh avocados.

115
00:04:53,520 --> 00:04:55,550
‫I simply did some mistake here.

116
00:04:55,550 --> 00:04:57,800
‫So it's lowercase.

117
00:04:57,800 --> 00:04:59,700
‫But it's still not working for some reason

118
00:04:59,700 --> 00:05:01,659
‫so let's go back here.

119
00:05:01,659 --> 00:05:02,492
‫Oh I see.

120
00:05:02,492 --> 00:05:04,203
‫It's actually just lower.

121
00:05:06,300 --> 00:05:07,460
‫But that's exactly what

122
00:05:07,460 --> 00:05:09,250
‫the documentation is for.

123
00:05:09,250 --> 00:05:11,890
‫So for us to see how something really works

124
00:05:11,890 --> 00:05:13,640
‫so that we can use the package

125
00:05:13,640 --> 00:05:14,773
‫correctly in our code.

126
00:05:15,640 --> 00:05:16,687
‫And so just like this,

127
00:05:16,687 --> 00:05:20,090
‫I created a slug out of

128
00:05:20,090 --> 00:05:22,053
‫our initial fresh avocado string.

129
00:05:23,040 --> 00:05:26,300
‫Let's now just do that for all of our products.

130
00:05:26,300 --> 00:05:28,250
‫So they are in data object.

131
00:05:28,250 --> 00:05:30,763
‫So let's create an array of all the slugs.

132
00:05:32,390 --> 00:05:33,383
‫So slugs.

133
00:05:34,470 --> 00:05:38,000
‫So data object dot map.

134
00:05:38,000 --> 00:05:40,460
‫And so this is again just regular JavaScript

135
00:05:40,460 --> 00:05:43,340
‫so that shouldn't be nothing to you.

136
00:05:43,340 --> 00:05:45,710
‫So we're looping over the data object

137
00:05:45,710 --> 00:05:48,163
‫and then create a new array based on that.

138
00:05:49,360 --> 00:05:52,100
‫And in each iteration what we're gonna do

139
00:05:52,100 --> 00:05:53,860
‫is to take the element

140
00:05:53,860 --> 00:05:55,933
‫and then create a slug out of that.

141
00:05:57,060 --> 00:06:01,623
‫So slugify element dot product name.

142
00:06:04,640 --> 00:06:07,390
‫So remember that is where

143
00:06:07,390 --> 00:06:08,740
‫the name of product is.

144
00:06:08,740 --> 00:06:10,713
‫So here you see product name.

145
00:06:12,130 --> 00:06:15,433
‫And so then this object.

146
00:06:21,407 --> 00:06:25,223
‫And let's actually log that one to the console.

147
00:06:28,320 --> 00:06:30,480
‫And indeed here we go.

148
00:06:30,480 --> 00:06:32,790
‫So these are our six slugs

149
00:06:32,790 --> 00:06:34,670
‫or actually just five

150
00:06:34,670 --> 00:06:37,100
‫out of our five products.

151
00:06:37,100 --> 00:06:37,933
‫All right.

152
00:06:37,933 --> 00:06:40,210
‫And so this is how we include

153
00:06:40,210 --> 00:06:42,061
‫a third-party module.

154
00:06:42,061 --> 00:06:44,430
‫Take a look at the documentation

155
00:06:44,430 --> 00:06:47,190
‫and then use it actually in our code.

156
00:06:47,190 --> 00:06:48,160
‫Okay.

157
00:06:48,160 --> 00:06:52,760
‫So this slugify is now a dependency of our code.

158
00:06:52,760 --> 00:06:54,151
‫Because without that package

159
00:06:54,151 --> 00:06:56,220
‫this piece of the code here

160
00:06:56,220 --> 00:06:58,261
‫would now no longer work.

161
00:06:58,261 --> 00:06:59,300
‫Right?

162
00:06:59,300 --> 00:07:01,670
‫So our code now depends on having

163
00:07:01,670 --> 00:07:05,630
‫the slugify package installed in the project.

164
00:07:05,630 --> 00:07:08,000
‫Now we could go ahead and actually store

165
00:07:08,000 --> 00:07:12,400
‫these slugs here into the data json

166
00:07:12,400 --> 00:07:13,610
‫and then build the app

167
00:07:13,610 --> 00:07:15,630
‫so that instead of the ID

168
00:07:15,630 --> 00:07:19,060
‫it displays the slug in the URL.

169
00:07:19,060 --> 00:07:20,480
‫But I'm not gonna go ahead

170
00:07:20,480 --> 00:07:22,350
‫and do that here because

171
00:07:22,350 --> 00:07:24,180
‫that's just using the same concepts

172
00:07:24,180 --> 00:07:26,230
‫that we learned before all over again.

173
00:07:26,230 --> 00:07:29,260
‫And so that doesn't add nothing new.

174
00:07:29,260 --> 00:07:30,840
‫All I wanted to do in this video

175
00:07:30,840 --> 00:07:33,500
‫is really to show you this process

176
00:07:33,500 --> 00:07:36,610
‫of integrating a new package into our code.

177
00:07:36,610 --> 00:07:38,640
‫Taking a look at the documentation,

178
00:07:38,640 --> 00:07:40,171
‫and then just do a simple example

179
00:07:40,171 --> 00:07:43,090
‫with that new module.

180
00:07:43,090 --> 00:07:44,660
‫So that was the goal of this video.

181
00:07:44,660 --> 00:07:46,120
‫That is completed now.

182
00:07:46,120 --> 00:07:48,240
‫And so let's now move on

183
00:07:48,240 --> 00:07:49,643
‫to the next one.