‫Jonas: Willkommen zurück.
‫Lassen Sie uns nun endlich Express einrichten,
‫einen einfachen Server erstellen und einige grundlegende Routings durchführen,
‫um ein erstes Gefühl
‫dafür zu bekommen, wie wir in Express tatsächlich arbeiten.
‫In diesem Video beginnen wir also
‫mit der Arbeit am natours-Projekt, also dem großen Hauptprojekt, das
‫Teil dieses Kurses ist.
‫Gehen Sie also wie bisher
‫vor und holen Sie sich das Starterprojekt aus den Kursdateien.
‫Ich habe es schon hier.
‫Ich habe es in meinem VS-Code geöffnet.
‫Werfen wir nur einen kurzen Blick auf das, was wir hier haben.
‫Wir haben die schönere Konfigurationsdatei,
‫genau wie wir sie wie zuvor eingerichtet haben.
‫Ich habe auch eine Konfigurationsdatei für ESLint, und ESLint haben
‫wir zu diesem Zeitpunkt noch nicht eingerichtet, aber
‫das werden wir
‫auch später in diesem Abschnitt tun.
‫Im Moment möchte ich nur mit
‫dem Codieren beginnen und mich nicht darum kümmern, unseren Code zu verschmutzen.
‫Linting dient nur dazu, einige Fehler zu beheben.
‫Aber das machen wir später noch einmal.
‫Hier haben wir nur einige Dateien für
‫später, wie CSS, Bilder, okay, und jetzt auch zum Beispiel einige
‫Daten, die wir zum Erstellen unserer Anwendung benötigen.
‫Auch hier beginnen wir mit der Verwendung dieser Daten
‫in diesem Abschnitt.
‫Jedenfalls haben wir jetzt ein brandneues Projekt.
‫Das erste, was wir normalerweise bei einem neuen Projekt tun, ist
‫das Erstellen des Pakets. json-Datei, wie
‫ich bereits erwähnt habe.
‫Das haben wir im Nodefarm-Projekt
‫gemacht, und jetzt werden wir das auch hier tun.
‫Ich öffne das integrierte Terminal.
‫Sie können dies tun, indem Sie hier auf diese Verknüpfung klicken oder einfach
‫hierher zu View und dann Terminal kommen.
‫Lassen Sie mich es ein wenig aufhängen, damit Sie es sehen können.
‫Denken Sie daran, dass der Befehl npm init lautet.
‫Wir haben dem Projekt einen Namen gegeben.
‫Es heißt Natours.
‫Oh okay, es darf keine Großbuchstaben enthalten.
‫Machen wir das nochmal.
‫Die Version ist eins, Beschreibung,
‫sagen wir einfach Lernknoten, Express und mongoDB, mongoDB.
‫Einstiegspunkt, Index. js, eigentlich
‫werden wir app verwenden. js jetzt.
‫Nennen wir es App. js.
‫Wir haben keinen Testbefehl, kein Git,
‫keine Schlüsselwörter, Autor bin ich, und das war's, also okay.
‫Hier haben wir Paket. json.
‫Nach wie vor nichts Neues hier.
‫Jetzt ist es Zeit, Express zu installieren.
‫Npm drücke ich aus.
‫Ich werde hier Express verwenden,
‫das ist zum
‫Zeitpunkt der Aufnahme die neueste Version, aber
‫das Express-Team arbeitet seit einiger Zeit an Version 5.
‫Dies ist eine Hauptversion, die
‫Breaking Changes einführen könnte, wenn Sie diese installieren.
‫Nun, in Version
‫5 ändert sich nicht viel, aber um sicherzugehen,
‫installieren Sie bitte Express wie ich es in Version 4 tue.
‫Um dies zu tun, drücke einfach auf 4.
‫Das installiert dann die neueste Version innerhalb von 4 mit den neuesten
‫Neben- und Patch-Versionen, also 4. 16. 4.
‫Das ist die Version, die ich jetzt
‫in diesem Kurs verwende, und Ihre wird wahrscheinlich eine
‫spätere Version sein, aber solange Sie die 4 am Anfang hier
‫haben, sollte es Ihnen gut gehen.
‫Sie sehen, dass
‫hier tatsächlich unser Knotenmodulordner erstellt wurde.
‫Jetzt sind wir startklar.
‫Ich erstelle eine neue Datei und sie heißt app. js.
‫Es ist eine Art Konvention, die gesamte Express-Konfiguration in
‫der App zu haben. js.
‫Das verwende ich jetzt hier.
‫Wir haben jetzt die Warnung, dass
‫ESLint nicht geladen werden kann.
‫Auch hier werden wir dies später
‫in diesem Abschnitt konfigurieren.
‫Lassen Sie uns jetzt Express verwenden.
‫Ich benötige natürlich das Express-Paket.
‫An dieser Stelle nichts Neues.
‫Geben Sie ihm einen Safe.
‫Sie sehen, dass die Vorschau hier bereits ihre Magie entfaltet
‫hat, indem sie dieses Semikolon und auch diese neue Zeile
‫hier unten hinzugefügt hat.
‫Wir haben Express importiert, und jetzt erstellen
‫wir eine Variable namens app.
‫Auch das ist eine Art Standard.
‫Also App und zugewiesenes Ergebnis des Aufrufs von Express.
‫Das ist es tatsächlich.
‫Dies ist eine Funktion, die beim
‫Aufrufen unserer App-Variablen hier eine Reihe von Methoden hinzufügt.
‫Die erste, die wir verwenden werden,
‫ist eigentlich die App. hören, um im
‫Grunde einen Server zu starten.
‫Das ist ein bisschen ähnlich zu dem,
‫was wir zuvor mit dem http-Paket in den vorherigen Abschnitten gemacht haben, richtig.
‫Denken Sie also noch einmal daran,
‫dass Express zu 100% kein js unter der Haube ist
‫und einige der Dinge
‫hier in Express auf sehr ähnliche Weise funktionieren.
‫Alles klar, es macht unser Leben
‫einfach ein bisschen einfacher, indem
‫es uns etwas von der Komplexität nimmt.
‫Wie zuvor, in die App. Hör zu, wir
‫fügen den Port ein.
‫Lassen Sie uns hier zuvor tatsächlich eine Variable dafür erstellen.
‫Port und sagen wir mal 3000.
‫Das ändern wir etwas später.
‫Wir fügen den Port und eine Callback-Funktion ein.
‫Dies ist wiederum
‫die Callback-Funktion, die aufgerufen wird, sobald der
‫Server mit dem Zuhören beginnt.
‫Machen wir einfach eine Konsole. Loggen Sie sich
‫hier ein, die App läuft auf dem Port.
‫Alles klar, also hört unser Server
‫jetzt eigentlich schon zu.
‫Als nächstes müssen wir die Route definieren.
‫Und noch einmal,
‫wir haben eigentlich schon vorher
‫im Nodefarm-Projekt Routen definiert, erinnern Sie sich
‫daran, aber mit Express funktioniert es ganz anders.
‫Denken Sie daran, dass Routing
‫im Wesentlichen bedeutet, zu bestimmen, wie eine Anwendung
‫auf eine bestimmte Client-Anfrage, also auf eine bestimmte URL, reagiert.
‫Und tatsächlich ist es nicht nur
‫eine URL, sondern auch
‫die http-Methode, die für diese Anfrage verwendet wird.
‫Erinnern Sie sich an die http-Vorlesung, die wir zuvor hatten.
‫Wie machen wir das?
‫Nun, in Express ist es ganz einfach.
‫Alles, was wir tun, ist app, dann die http-Methode,
‫auf die wir antworten möchten, und beginnen wir
‫mit der einfachsten Methode,
‫die get ist, und dann die URL.
‫Wir geben hier nur die Art der Root-URL an.
‫Auch hier ist die Route im Grunde
‫die URL, die in diesem Fall nur diese
‫Root-URL ist und auch die http-Methode, die in diesem Fall get ist.
‫Was wollen wir nun eigentlich
‫tun, wenn jemand mit einer Get-Anfrage auf diese URL trifft?
‫Nun, was immer wir
‫tun wollen, wir müssen es in
‫einer Callback-Funktion angeben, die wir als zweites Argument angeben.
‫Wir haben
‫eine Callback-Funktion wie diese, und
‫diese Callback-Funktion kann einige Argumente akzeptieren.
‫Die einfachste und die,
‫die wir normalerweise immer brauchen, sind Get Request, Entity Response.
‫In dieser Hinsicht ist es wieder sehr ähnlich zu dem,
‫was wir zuvor im Nodefarm-Projekt gemacht haben.
‫Damals, als wir unseren Server starteten,
‫hatten wir auch Zugriff auf das
‫Request- und das Response-Objekt.
‫Jetzt sind sie hier in Express ein bisschen anders.
‫Sie verfügen über viel mehr Daten und Methoden,
‫aber die Idee ist genau dieselbe.
‫Sie sehen also, dass es
‫bei Express-Apps und damit auch Node-Apps
‫um Anfragen und Antworten geht, einfach weil
‫das Web so funktioniert, wie Sie es
‫in den vorherigen Abschnitten gelernt haben.
‫Was wollen wir jetzt machen?
‫Nun, alles, was wir tun wollen, ist,
‫einige Daten sehr schnell zurückzusenden.
‫Wir können das Response-Objekt verwenden
‫und von dort aus die send-Methode verwenden und
‫etwas angeben, das wir zurücksenden möchten.
‫Hallo von der Serverseite.
‫Nur wieder ein String, den wir zurückschicken wollen.
‫Wir können auch den Statuscode angeben und
‫das ist ganz einfach.
‫Alles, was wir tun müssen, ist, bevor wir den String tatsächlich
‫an den Client senden,
‫wir fügen einfach den Status davor hinzu.
‫Die Statusmethode, und hier geben wir
‫unseren Code an.
‫Und wieder werden wir 200 für okay verwenden.
‫Das ist eigentlich alles, was wir tun müssen.
‫Lassen Sie uns das sehr schnell
‫testen und dann noch ein paar Sachen hinzufügen.
‫Lassen Sie uns die Nodemon-App verwenden. js.
‫Mal sehen was
‫passiert und unsere App läuft auf Port 3000.
‫Groß.
‫Und wie testen wir diese API jetzt?
‫Deshalb haben wir Postman installiert.
‫Öffnen wir Postbote.
‫Eigentlich ist es noch da von der letzten Vorlesung.
‫Lassen Sie uns dies
‫löschen und die URL oder eigentlich die IP
‫für den lokalen Host und dann unseren Port schreiben.
‫Das ist genau das gleiche
‫wie beim Nodefarm-Projekt.
‫Wir treffen nur die Wurzel.
‫Wir können den Schrägstrich schreiben oder
‫es funktioniert genauso ohne irgendetwas.
‫Lassen Sie uns dies senden und tatsächlich, los geht's.
‫Hallo von der Serverseite.
‫Das ist erstaunlich, es funktioniert bereits.
‫Nur um sicher zu gehen,
‫würden wir natürlich in einem Browser genau das gleiche Ergebnis erhalten.
‫Wenn ich das hier kopiere, sehen Sie das gleiche Ergebnis.
‫Aber auch hier werden wir
‫Postman verwenden, weil es all diese API-Tests für uns viel einfacher macht.
‫Sie werden sehen, sobald wir wirklich
‫mehr und mehr Funktionen dieser großartigen Anwendung nutzen.
‫Nun, zurück hierher, fügen wir noch einiges hinzu,
‫da send einfach diesen String hierher zurück an
‫den Client sendet, aber es ist auch sehr einfach,
‫json an den Client zu senden.
‫Anstatt send zu verwenden, verwenden wir tatsächlich json.
‫Die json-Methode und dann hier können
‫wir ein Objekt einfügen.
‫Machen wir es so.
‫Sagen wir, das ist die Botschaft.
‫Und dann noch ein anderes Feld hier, Natours.
‫Okay, und jetzt sehen Sie, dass die
‫Vorschau hier dies automatisch für uns formatiert hat und
‫sie dies auch in einer anderen Zeile haben möchten.
‫Ah okay, hier fehlt natürlich ein Komma.
‫Aber die Vorschau-Erweiterung hat es aus irgendeinem
‫Grund immer noch hier hochgeladen.
‫Aber das ist natürlich egal.
‫Es ist nur eine Frage der Formatierung.
‫Schauen wir uns an, was jetzt passiert.
‫Jetzt haben wir hier unser schön formatiertes Json.
‫Gibt uns all diese verschiedenen Farben
‫hier für die Tasten und für die Werte.
‫Hier haben wir die Statuscodes.
‫Hier haben wir die Zeit, die für diese Anfrage benötigt wurde.
‫Wir haben auch die Größe der Antwort.
‫Wir könnten zum Beispiel den Code hier ganz einfach ändern.
‫404 wird nicht gefunden, denken Sie daran.
‫Machen Sie es noch einmal, und dann sehen Sie hier 404, nicht gefunden.
‫Für solche
‫Sachen ist Postman wirklich großartig.
‫Lassen Sie uns das alles tatsächlich vergrößern.
‫Lassen Sie uns jetzt fortfahren, fügen Sie hier einfach etwas anderes hinzu.
‫Nur etwas ganz Einfaches.
‫Denken Sie daran, all dies dient nur dazu,
‫es auszuprobieren, um unsere Füße nass zu machen
‫und ein wenig Erfahrung zu sammeln.
‫Denken Sie daran, dass dies hier die http-Methode für die Anfrage ist.
‫Diese Antwort, die wir hier senden, also
‫diese hier, wird nur
‫gesendet, wenn diese Get-Methode über diese URL an unseren Server gesendet wird.
‫Lass es mich dir tatsächlich zeigen.
‫Wenn wir zum Beispiel einen Beitrag machen.
‫Mit Postman ist das wieder ganz einfach.
‫Wenn wir einen Post machen, dann bekommen wir nichts.
‫Stattdessen sendet Express automatisch diesen HTML-Code zurück,
‫der sagt, kann nicht posten und dann mit
‫einem 404, nicht gefunden.
‫Das liegt daran, dass für
‫diese URL und für diese http-Methode keine Route definiert ist.
‫Machen wir das jetzt ganz schnell.
‫Also posten, wir wollen die gleiche URL, das
‫Request- und das Response-Objekt.
‫Sagen wir einfach res. senden, können
‫Sie an diesen Endpunkt senden.
‫Nur damit Sie sehen,
‫dass wir auf diese Weise unterschiedliche
‫Antworten für verschiedene http-Methoden in der Anfrage senden.
‫Lassen Sie uns das noch einmal ausführen,
‫und tatsächlich können Sie mit einem 200-Statuscode an diesen Endpunkt senden.
‫Dies ist eigentlich die
‫Standardeinstellung, wenn wir keine in unseren Codes angeben.
‫Hier haben wir 404, was nicht richtig ist.
‫Aber auch hier ist 200 die Standardeinstellung.
‫Eine andere schnelle Sache,
‫die ich Ihnen zeigen möchte, ist, dass durch die
‫Verwendung dieser json-Methode hier beispielsweise unser Inhaltstyp
‫automatisch auf Anwendungs-Json gesetzt wird. Denken Sie also
‫daran, dass wir dies manuell in der Nodefarm-App
‫gemacht haben, als wir unsere sehr einfache API erstellt haben.
‫Wir haben damals auch etwas Json zurückgesendet,
‫mussten dann aber manuell definieren, dass
‫der Inhalt Json war, damit der Browser wusste,
‫was er erwartete.
‫Aber Express nimmt uns diese Arbeit ab.
‫Lassen Sie uns das tatsächlich überprüfen.
‫Gehen Sie zurück, um zu holen.
‫Hier haben wir unsere Ergebnisüberschriften.
‫Hier sehen Sie, dass
‫der Inhaltstyp tatsächlich auf application json eingestellt ist.
‫Express sendet dann auch automatisch
‫eine Reihe anderer Header,
‫zum Beispiel diese powered by Express oder das Datum oder die Verbindung.
‫Aber auch hier werden wir
‫uns etwas später im Kurs mehr um Kopfball kümmern.
‫Dies war hier nur ein sehr kleines und einfaches
‫Beispiel, aber Sie können
‫bereits erkennen, wie viel einfacher diese Art von Antworten ist.
‫Um diese Route zu erstellen, um auf Client-Anfragen zu antworten, auf eine viel
‫einfachere Weise als in einem einfachen Knoten. js.
‫Vor diesem Hintergrund erfahren wir
‫im nächsten Video alles über das Erstellen von
‫APIs mit der restlichen Architektur, damit wir danach endlich
‫mit dem Erstellen unserer API beginnen können.