1
00:00:01,370 --> 00:00:03,150
‫Bisher haben Sie in

2
00:00:03,150 --> 00:00:04,790
‫diesem Abschnitt erfahren,

3
00:00:04,790 --> 00:00:06,720
‫wie Sie Node JS-Kernmodule benötigen.

4
00:00:06,720 --> 00:00:09,330
‫So benötigen Sie eigene Module.

5
00:00:09,330 --> 00:00:10,210
‫In

6
00:00:10,210 --> 00:00:12,050
‫diesem Video erfahren Sie, wie

7
00:00:12,050 --> 00:00:15,483
‫Sie Module von Drittanbietern aus der NPM-Registrierung anfordern.

8
00:00:17,440 --> 00:00:19,863
‫Ein Modul zu benötigen, das

9
00:00:19,863 --> 00:00:22,530
‫wir bereits von NPM installiert haben,

10
00:00:22,530 --> 00:00:24,610
‫ist wirklich, wirklich einfach.

11
00:00:24,610 --> 00:00:27,380
‫Also machen wir wieder alle Anforderungen

12
00:00:27,380 --> 00:00:30,230
‫oben und normalerweise benötigen wir zuerst die

13
00:00:30,230 --> 00:00:31,690
‫Kernmodule, dann

14
00:00:31,690 --> 00:00:33,410
‫die Module von Drittanbietern

15
00:00:33,410 --> 00:00:35,980
‫und dann unsere eigenen, die aus

16
00:00:35,980 --> 00:00:37,793
‫unserem lokalen Dateisystem stammen.

17
00:00:38,940 --> 00:00:41,740
‫Diejenige, die wir benötigen,

18
00:00:41,740 --> 00:00:43,360
‫heißt slugify.

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

20
00:00:45,000 --> 00:00:46,400
‫Dies ist diejenige, die

21
00:00:46,400 --> 00:00:48,350
‫wir in der vorherigen Vorlesung installiert haben.

22
00:00:48,350 --> 00:00:50,780
‫Und alles, was wir tun müssen, um

23
00:00:50,780 --> 00:00:52,510
‫es zu verlangen, ist wie

24
00:00:52,510 --> 00:00:54,120
‫zuvor die Funktion

25
00:00:54,120 --> 00:00:57,770
‫require zu verwenden und dann einfach den Namen des Pakets.

26
00:00:57,770 --> 00:01:00,010
‫Und dann weiß OGS automatisch, dass

27
00:01:00,010 --> 00:01:01,450
‫es in den

28
00:01:01,450 --> 00:01:02,993
‫Ordner Node-Module gehen muss.

29
00:01:03,920 --> 00:01:07,260
‫Also diesen Ordner, in dem sich alle Abhängigkeiten befinden, und

30
00:01:07,260 --> 00:01:09,353
‫suchen Sie dort nach diesem Modul.

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

32
00:01:12,610 --> 00:01:17,430
‫Auch dies wird dann eine Variable zurückgeben.

33
00:01:17,430 --> 00:01:20,483
‫Also müssen wir das in einer Variablen speichern.

34
00:01:22,860 --> 00:01:27,860
‫Und ich nenne es hier einfach slugify.

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

36
00:01:28,743 --> 00:01:30,940
‫Und so wird slugify eine

37
00:01:30,940 --> 00:01:34,630
‫Funktion sein, mit der wir im Grunde Slugs erstellen können.

38
00:01:34,630 --> 00:01:37,260
‫Also nochmal, was ist eine Schnecke?

39
00:01:37,260 --> 00:01:40,730
‫Nun, Slug ist im Grunde nur der letzte

40
00:01:40,730 --> 00:01:44,030
‫Teil einer URL, der eine eindeutige Zeichenfolge enthält,

41
00:01:44,030 --> 00:01:46,130
‫die die Ressource

42
00:01:46,130 --> 00:01:48,263
‫identifiziert, die die Website anzeigt.

43
00:01:49,310 --> 00:01:50,590
‫Nehmen wir

44
00:01:50,590 --> 00:01:52,380
‫zum Beispiel in unserer

45
00:01:52,380 --> 00:01:54,810
‫Knotenfarm an, dass wir dort,

46
00:01:54,810 --> 00:01:58,750
‫wo wir diese Avocado geöffnet haben, anstatt diese

47
00:01:58,750 --> 00:02:01,190
‫ID gleich Null zu haben,

48
00:02:01,190 --> 00:02:05,980
‫so etwas wie (Klicken) auf frische Avocados haben könnten, okay?

49
00:02:05,980 --> 00:02:08,290
‫Und so wäre dieser Teil hier

50
00:02:08,290 --> 00:02:10,330
‫oder eigentlich nur dieser

51
00:02:10,330 --> 00:02:12,910
‫Teil, also wäre das die Schnecke.

52
00:02:12,910 --> 00:02:15,150
‫Es ist also im Grunde

53
00:02:15,150 --> 00:02:19,420
‫dieser Name hier und basiert dann auf einer eindeutigen Zeichenfolge wie dieser.

54
00:02:19,420 --> 00:02:20,830
‫Und ich bin sicher,

55
00:02:20,830 --> 00:02:23,090
‫dass Sie das überall gesehen haben, wie in Blogbeiträgen.

56
00:02:23,090 --> 00:02:25,830
‫Es ist sehr üblich, es so zu machen.

57
00:02:25,830 --> 00:02:30,830
‫Oder wirklich überall dort, wo wir so etwas

58
00:02:30,900 --> 00:02:33,053
‫nicht einfach wollen.

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

60
00:02:34,823 --> 00:02:36,190
‫ID ist also gleich eins.

61
00:02:36,190 --> 00:02:38,130
‫Oder wir könnten

62
00:02:38,130 --> 00:02:39,580
‫hier

63
00:02:40,830 --> 00:02:45,712
‫zum Beispiel auch einfach hier Ziege usw. verwenden.

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

65
00:02:46,683 --> 00:02:47,630
‫Ich werde nicht den gesamten Namen aufzeichnen.

66
00:02:47,630 --> 00:02:50,120
‫Aber die Idee ist, eine Schnecke zu

67
00:02:50,120 --> 00:02:52,400
‫verwenden, die so eine einzigartige Zeichenfolge ist,

68
00:02:52,400 --> 00:02:53,820
‫anstatt nur eine

69
00:02:53,820 --> 00:02:56,530
‫Zahl, die für uns überhaupt keine Bedeutung hat.

70
00:02:56,530 --> 00:02:58,660
‫Nehmen wir nun an,

71
00:02:58,660 --> 00:03:02,200
‫dass Sie das slugify-Paket zum ersten Mal verwenden.

72
00:03:02,200 --> 00:03:04,500
‫Um herauszufinden, wie es tatsächlich

73
00:03:04,500 --> 00:03:06,100
‫funktioniert, können wir hier

74
00:03:06,100 --> 00:03:07,870
‫auf NPM nach der

75
00:03:07,870 --> 00:03:09,173
‫Dokumentation suchen.

76
00:03:10,920 --> 00:03:15,323
‫Also geben wir hier einfach den Namen des Pakets ein.

77
00:03:16,770 --> 00:03:18,210
‫Dann suche danach.

78
00:03:18,210 --> 00:03:20,473
‫Und das ist dasjenige, das wir installiert haben.

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

80
00:03:23,510 --> 00:03:25,710
‫Also haben wir diesen Teil hier schon gemacht.

81
00:03:25,710 --> 00:03:29,347
‫Benötigt also das Modul oder das Paket hier.

82
00:03:29,347 --> 00:03:31,240
‫Und dann können wir hier unten sehen, wie wir

83
00:03:31,240 --> 00:03:32,150
‫es benutzt haben.

84
00:03:32,150 --> 00:03:33,580
‫Wir müssen also nur

85
00:03:33,580 --> 00:03:36,320
‫slugify als Funktion verwenden und dann einen

86
00:03:36,320 --> 00:03:37,653
‫String übergeben.

87
00:03:39,740 --> 00:03:42,940
‫Dann sehen Sie hier unten die Optionen.

88
00:03:42,940 --> 00:03:46,690
‫Und zum Beispiel können wir den Ersatz angeben.

89
00:03:46,690 --> 00:03:49,140
‫Also im Grunde, womit der leere

90
00:03:49,140 --> 00:03:50,600
‫Raum ersetzt wird.

91
00:03:50,600 --> 00:03:52,080
‫Und normalerweise ist das dieser Strich.

92
00:03:52,080 --> 00:03:54,343
‫Also genau so, wie ich hier geschrieben habe.

93
00:03:55,770 --> 00:03:57,710
‫Aber wir können etwas

94
00:03:57,710 --> 00:04:00,853
‫anderes angeben, wie einen Unterstrich oder gar nichts.

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

96
00:04:03,043 --> 00:04:04,330
‫Hier können wir angeben,

97
00:04:04,330 --> 00:04:06,340
‫dass alles in Kleinbuchstaben geschrieben werden soll.

98
00:04:06,340 --> 00:04:08,390
‫Lassen Sie uns das jetzt in unserem

99
00:04:08,390 --> 00:04:09,393
‫Code tun.

100
00:04:10,390 --> 00:04:11,700
‫Also haben wir hier

101
00:04:11,700 --> 00:04:13,940
‫slugify und jetzt nur um es zu testen,

102
00:04:13,940 --> 00:04:16,513
‫lass es uns hier machen, bevor wir den Server erstellen.

103
00:04:20,310 --> 00:04:21,543
‫Konsole bei log.

104
00:04:22,900 --> 00:04:25,803
‫Slugify zum String.

105
00:04:29,160 --> 00:04:31,680
‫Frische Avocados und dann werde ich die

106
00:04:31,680 --> 00:04:34,410
‫Option, die ich Ihnen gerade gezeigt habe,

107
00:04:34,410 --> 00:04:35,630
‫in Kleinbuchstaben

108
00:04:38,140 --> 00:04:40,120
‫angeben und auf "true" setzen.

109
00:04:40,120 --> 00:04:40,953
‫Speichern Sie

110
00:04:41,880 --> 00:04:43,660
‫es und denken Sie daran, dass

111
00:04:43,660 --> 00:04:45,060
‫wir die App jetzt nicht

112
00:04:45,060 --> 00:04:46,850
‫mehr schließen und neu starten müssen.

113
00:04:46,850 --> 00:04:49,760
‫Node Man macht das jetzt automatisch für uns.

114
00:04:49,760 --> 00:04:53,520
‫Und so sieht man hier unten schon frische Avocados.

115
00:04:53,520 --> 00:04:55,550
‫Ich habe hier einfach einen Fehler gemacht.

116
00:04:55,550 --> 00:04:57,800
‫Es ist also Kleinbuchstaben.

117
00:04:57,800 --> 00:04:59,700
‫Aber aus irgendeinem Grund funktioniert es

118
00:04:59,700 --> 00:05:01,659
‫immer noch nicht, also gehen wir hierher zurück.

119
00:05:01,659 --> 00:05:02,492
‫Ach ich verstehe.

120
00:05:02,492 --> 00:05:04,203
‫Es ist eigentlich nur niedriger.

121
00:05:06,300 --> 00:05:07,460
‫Aber genau

122
00:05:07,460 --> 00:05:09,250
‫dafür ist die Dokumentation da.

123
00:05:09,250 --> 00:05:11,890
‫Damit wir sehen, wie etwas wirklich funktioniert, damit wir

124
00:05:11,890 --> 00:05:13,640
‫das Paket richtig in unserem

125
00:05:13,640 --> 00:05:14,773
‫Code verwenden können.

126
00:05:15,640 --> 00:05:16,687
‫Und so

127
00:05:16,687 --> 00:05:20,090
‫habe ich einfach eine Schnecke aus unserer

128
00:05:20,090 --> 00:05:22,053
‫ersten frischen Avocado-Saite kreiert.

129
00:05:23,040 --> 00:05:26,300
‫Lassen Sie uns das jetzt für alle unsere Produkte tun.

130
00:05:26,300 --> 00:05:28,250
‫Sie befinden sich also im Datenobjekt.

131
00:05:28,250 --> 00:05:30,763
‫Erstellen wir also ein Array aller Schnecken.

132
00:05:32,390 --> 00:05:33,383
‫Also Schnecken.

133
00:05:34,470 --> 00:05:38,000
‫Also Datenobjekt-Punktekarte.

134
00:05:38,000 --> 00:05:40,460
‫Und so ist dies wieder

135
00:05:40,460 --> 00:05:43,340
‫nur normales JavaScript, das sollte Ihnen nichts bedeuten.

136
00:05:43,340 --> 00:05:45,710
‫Also durchlaufen wir das Datenobjekt und

137
00:05:45,710 --> 00:05:48,163
‫erstellen dann basierend darauf ein neues Array.

138
00:05:49,360 --> 00:05:52,100
‫Und in jeder Iteration werden wir

139
00:05:52,100 --> 00:05:53,860
‫das Element nehmen

140
00:05:53,860 --> 00:05:55,933
‫und daraus einen Slug erstellen.

141
00:05:57,060 --> 00:06:01,623
‫So slugify Elementpunkt Produktname.

142
00:06:04,640 --> 00:06:07,390
‫Denken Sie also daran, dass dort der Name

143
00:06:07,390 --> 00:06:08,740
‫des Produkts steht.

144
00:06:08,740 --> 00:06:10,713
‫Hier sehen Sie also den Produktnamen.

145
00:06:12,130 --> 00:06:15,433
‫Und so dann dieses Objekt.

146
00:06:21,407 --> 00:06:25,223
‫Und lass uns das tatsächlich an der Konsole protokollieren.

147
00:06:28,320 --> 00:06:30,480
‫Und tatsächlich geht es los.

148
00:06:30,480 --> 00:06:32,790
‫Das sind also unsere sechs

149
00:06:32,790 --> 00:06:34,670
‫Schnecken oder eigentlich

150
00:06:34,670 --> 00:06:37,100
‫nur fünf von unseren fünf Produkten.

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

152
00:06:37,933 --> 00:06:40,210
‫Und so binden wir

153
00:06:40,210 --> 00:06:42,061
‫ein Drittanbietermodul ein.

154
00:06:42,061 --> 00:06:44,430
‫Schauen Sie sich die Dokumentation an

155
00:06:44,430 --> 00:06:47,190
‫und verwenden Sie sie dann tatsächlich in unserem Code.

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

157
00:06:48,160 --> 00:06:52,760
‫Dieses Slugify ist nun also eine Abhängigkeit von unserem Code.

158
00:06:52,760 --> 00:06:54,151
‫Denn ohne dieses

159
00:06:54,151 --> 00:06:56,220
‫Paket würde dieses Stück des Codes

160
00:06:56,220 --> 00:06:58,261
‫hier jetzt nicht mehr funktionieren.

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

162
00:06:59,300 --> 00:07:01,670
‫Unser Code hängt jetzt also

163
00:07:01,670 --> 00:07:05,630
‫davon ab, dass das slugify-Paket im Projekt installiert ist.

164
00:07:05,630 --> 00:07:08,000
‫Jetzt könnten wir diese Slugs

165
00:07:08,000 --> 00:07:12,400
‫hier tatsächlich im Daten-Json speichern und dann die App

166
00:07:12,400 --> 00:07:13,610
‫so bauen,

167
00:07:13,610 --> 00:07:15,630
‫dass sie anstelle der

168
00:07:15,630 --> 00:07:19,060
‫ID den Slug in der URL anzeigt.

169
00:07:19,060 --> 00:07:20,480
‫Aber ich werde

170
00:07:20,480 --> 00:07:22,350
‫das hier nicht tun, weil

171
00:07:22,350 --> 00:07:24,180
‫das nur die gleichen Konzepte

172
00:07:24,180 --> 00:07:26,230
‫verwendet, die wir zuvor gelernt haben.

173
00:07:26,230 --> 00:07:29,260
‫Und damit nichts Neues hinzugefügt wird.

174
00:07:29,260 --> 00:07:30,840
‫Alles, was ich in

175
00:07:30,840 --> 00:07:33,500
‫diesem Video tun wollte, ist, Ihnen diesen Prozess

176
00:07:33,500 --> 00:07:36,610
‫der Integration eines neuen Pakets in unseren Code zu zeigen.

177
00:07:36,610 --> 00:07:38,640
‫Schauen Sie sich die Dokumentation an

178
00:07:38,640 --> 00:07:40,171
‫und machen Sie

179
00:07:40,171 --> 00:07:43,090
‫dann einfach ein einfaches Beispiel mit diesem neuen Modul.

180
00:07:43,090 --> 00:07:44,660
‫Das war also das Ziel dieses Videos.

181
00:07:44,660 --> 00:07:46,120
‫Das ist jetzt abgeschlossen.

182
00:07:46,120 --> 00:07:48,240
‫Und so kommen wir nun

183
00:07:48,240 --> 00:07:49,643
‫zum nächsten.