‫Bisher haben Sie in
‫diesem Abschnitt erfahren,
‫wie Sie Node JS-Kernmodule benötigen.
‫So benötigen Sie eigene Module.
‫In
‫diesem Video erfahren Sie, wie
‫Sie Module von Drittanbietern aus der NPM-Registrierung anfordern.
‫Ein Modul zu benötigen, das
‫wir bereits von NPM installiert haben,
‫ist wirklich, wirklich einfach.
‫Also machen wir wieder alle Anforderungen
‫oben und normalerweise benötigen wir zuerst die
‫Kernmodule, dann
‫die Module von Drittanbietern
‫und dann unsere eigenen, die aus
‫unserem lokalen Dateisystem stammen.
‫Diejenige, die wir benötigen,
‫heißt slugify.
‫Merken?
‫Dies ist diejenige, die
‫wir in der vorherigen Vorlesung installiert haben.
‫Und alles, was wir tun müssen, um
‫es zu verlangen, ist wie
‫zuvor die Funktion
‫require zu verwenden und dann einfach den Namen des Pakets.
‫Und dann weiß OGS automatisch, dass
‫es in den
‫Ordner Node-Module gehen muss.
‫Also diesen Ordner, in dem sich alle Abhängigkeiten befinden, und
‫suchen Sie dort nach diesem Modul.
‫Okay?
‫Auch dies wird dann eine Variable zurückgeben.
‫Also müssen wir das in einer Variablen speichern.
‫Und ich nenne es hier einfach slugify.
‫Okay?
‫Und so wird slugify eine
‫Funktion sein, mit der wir im Grunde Slugs erstellen können.
‫Also nochmal, was ist eine Schnecke?
‫Nun, Slug ist im Grunde nur der letzte
‫Teil einer URL, der eine eindeutige Zeichenfolge enthält,
‫die die Ressource
‫identifiziert, die die Website anzeigt.
‫Nehmen wir
‫zum Beispiel in unserer
‫Knotenfarm an, dass wir dort,
‫wo wir diese Avocado geöffnet haben, anstatt diese
‫ID gleich Null zu haben,
‫so etwas wie (Klicken) auf frische Avocados haben könnten, okay?
‫Und so wäre dieser Teil hier
‫oder eigentlich nur dieser
‫Teil, also wäre das die Schnecke.
‫Es ist also im Grunde
‫dieser Name hier und basiert dann auf einer eindeutigen Zeichenfolge wie dieser.
‫Und ich bin sicher,
‫dass Sie das überall gesehen haben, wie in Blogbeiträgen.
‫Es ist sehr üblich, es so zu machen.
‫Oder wirklich überall dort, wo wir so etwas
‫nicht einfach wollen.
‫Okay?
‫ID ist also gleich eins.
‫Oder wir könnten
‫hier
‫zum Beispiel auch einfach hier Ziege usw. verwenden.
‫Okay.
‫Ich werde nicht den gesamten Namen aufzeichnen.
‫Aber die Idee ist, eine Schnecke zu
‫verwenden, die so eine einzigartige Zeichenfolge ist,
‫anstatt nur eine
‫Zahl, die für uns überhaupt keine Bedeutung hat.
‫Nehmen wir nun an,
‫dass Sie das slugify-Paket zum ersten Mal verwenden.
‫Um herauszufinden, wie es tatsächlich
‫funktioniert, können wir hier
‫auf NPM nach der
‫Dokumentation suchen.
‫Also geben wir hier einfach den Namen des Pakets ein.
‫Dann suche danach.
‫Und das ist dasjenige, das wir installiert haben.
‫Gut.
‫Also haben wir diesen Teil hier schon gemacht.
‫Benötigt also das Modul oder das Paket hier.
‫Und dann können wir hier unten sehen, wie wir
‫es benutzt haben.
‫Wir müssen also nur
‫slugify als Funktion verwenden und dann einen
‫String übergeben.
‫Dann sehen Sie hier unten die Optionen.
‫Und zum Beispiel können wir den Ersatz angeben.
‫Also im Grunde, womit der leere
‫Raum ersetzt wird.
‫Und normalerweise ist das dieser Strich.
‫Also genau so, wie ich hier geschrieben habe.
‫Aber wir können etwas
‫anderes angeben, wie einen Unterstrich oder gar nichts.
‫Okay.
‫Hier können wir angeben,
‫dass alles in Kleinbuchstaben geschrieben werden soll.
‫Lassen Sie uns das jetzt in unserem
‫Code tun.
‫Also haben wir hier
‫slugify und jetzt nur um es zu testen,
‫lass es uns hier machen, bevor wir den Server erstellen.
‫Konsole bei log.
‫Slugify zum String.
‫Frische Avocados und dann werde ich die
‫Option, die ich Ihnen gerade gezeigt habe,
‫in Kleinbuchstaben
‫angeben und auf "true" setzen.
‫Speichern Sie
‫es und denken Sie daran, dass
‫wir die App jetzt nicht
‫mehr schließen und neu starten müssen.
‫Node Man macht das jetzt automatisch für uns.
‫Und so sieht man hier unten schon frische Avocados.
‫Ich habe hier einfach einen Fehler gemacht.
‫Es ist also Kleinbuchstaben.
‫Aber aus irgendeinem Grund funktioniert es
‫immer noch nicht, also gehen wir hierher zurück.
‫Ach ich verstehe.
‫Es ist eigentlich nur niedriger.
‫Aber genau
‫dafür ist die Dokumentation da.
‫Damit wir sehen, wie etwas wirklich funktioniert, damit wir
‫das Paket richtig in unserem
‫Code verwenden können.
‫Und so
‫habe ich einfach eine Schnecke aus unserer
‫ersten frischen Avocado-Saite kreiert.
‫Lassen Sie uns das jetzt für alle unsere Produkte tun.
‫Sie befinden sich also im Datenobjekt.
‫Erstellen wir also ein Array aller Schnecken.
‫Also Schnecken.
‫Also Datenobjekt-Punktekarte.
‫Und so ist dies wieder
‫nur normales JavaScript, das sollte Ihnen nichts bedeuten.
‫Also durchlaufen wir das Datenobjekt und
‫erstellen dann basierend darauf ein neues Array.
‫Und in jeder Iteration werden wir
‫das Element nehmen
‫und daraus einen Slug erstellen.
‫So slugify Elementpunkt Produktname.
‫Denken Sie also daran, dass dort der Name
‫des Produkts steht.
‫Hier sehen Sie also den Produktnamen.
‫Und so dann dieses Objekt.
‫Und lass uns das tatsächlich an der Konsole protokollieren.
‫Und tatsächlich geht es los.
‫Das sind also unsere sechs
‫Schnecken oder eigentlich
‫nur fünf von unseren fünf Produkten.
‫Gut.
‫Und so binden wir
‫ein Drittanbietermodul ein.
‫Schauen Sie sich die Dokumentation an
‫und verwenden Sie sie dann tatsächlich in unserem Code.
‫Okay.
‫Dieses Slugify ist nun also eine Abhängigkeit von unserem Code.
‫Denn ohne dieses
‫Paket würde dieses Stück des Codes
‫hier jetzt nicht mehr funktionieren.
‫Richtig?
‫Unser Code hängt jetzt also
‫davon ab, dass das slugify-Paket im Projekt installiert ist.
‫Jetzt könnten wir diese Slugs
‫hier tatsächlich im Daten-Json speichern und dann die App
‫so bauen,
‫dass sie anstelle der
‫ID den Slug in der URL anzeigt.
‫Aber ich werde
‫das hier nicht tun, weil
‫das nur die gleichen Konzepte
‫verwendet, die wir zuvor gelernt haben.
‫Und damit nichts Neues hinzugefügt wird.
‫Alles, was ich in
‫diesem Video tun wollte, ist, Ihnen diesen Prozess
‫der Integration eines neuen Pakets in unseren Code zu zeigen.
‫Schauen Sie sich die Dokumentation an
‫und machen Sie
‫dann einfach ein einfaches Beispiel mit diesem neuen Modul.
‫Das war also das Ziel dieses Videos.
‫Das ist jetzt abgeschlossen.
‫Und so kommen wir nun
‫zum nächsten.