‫Jonas: Willkommen zurück, jetzt ist es also an
‫der Zeit, endlich mit der Entwicklung unserer API zu beginnen.
‫Dieser Vortrag wird also wirklich der
‫erste Schritt auf einem langen Weg zum Aufbau dieses Hauptkursprojekts sein.
‫Und lassen Sie mich damit beginnen, Ihnen noch einmal das
‫Projekt zu zeigen, über das wir sprechen.
‫Das ist also das Natours-Projekt.
‫Es ist im Grunde eine
‫Anwendung, bei der wir Touren sehen und auch buchen können.
‫Wir können Benutzerkonten erstellen, uns einloggen und
‫wirklich alle möglichen Dinge tun.
‫So können wir uns zum Beispiel die Tour hier anschauen.
‫Sie hat all diese Details, diese Karte,
‫sie hat Bewertungen von anderen Benutzern, die die Plattform nutzen, und wir können
‫die Tour dann sogar buchen.
‫Wir müssten uns einloggen, bevor wir buchen können, und
‫das werde ich jetzt
‫nicht tun, weil es hier nur eine sehr einfache
‫Demo ist, also wollte ich Ihnen im Grunde nur
‫diese grafische Oberfläche des Projekts zeigen, das wir bauen .
‫Nun, dieser Teil, den Sie hier sehen,
‫ist tatsächlich der Teil, den wir am Ende
‫des Kurses erstellen
‫werden, denn dieser erste Teil des
‫Kurses besteht darin, eine API zu erstellen, die genau die gleichen
‫Daten verwendet, die Sie hier in dieser Dynamik sehen Webseite.
‫Also beginnen wir wieder
‫mit dem Erstellen der API und dann der dynamisch gerenderten Website,
‫und ich entscheide mich
‫für diese Vorgehensweise, weil wir auf
‫diese Weise nicht all diese verschiedenen Inhalte miteinander mischen
‫müssen, um Express und Mongodb zu lernen und Mongoose finde ich es
‫viel einfacher, einfach mit Daten zu arbeiten und
‫sich nicht um die grafischen Dinge zu kümmern,
‫auch wenn das vielleicht ein bisschen aufregender ist,
‫weil man die echten Ergebnisse in dieser schönen
‫Oberfläche sehen kann.
‫Aber um zu lernen, ist es noch einmal besser, sich einfach
‫mit den Daten selbst zu beschäftigen und
‫sich darum zu kümmern, sie später schön zu machen.
‫Okay, lassen Sie mich Ihnen auch die API zeigen.
‫Und dafür benutze ich natürlich Postman.
‫Erstellen Sie hier eine neue Registerkarte.
‫Und so haben wir die letzte API
‫unter Slash-API aufgerufen, Slash-Version eins, und dann können
‫wir uns zum Beispiel Touren ansehen.
‫Also verwenden wir
‫die Get-Anfrage und erhalten dann all diese verschiedenen Touren.
‫Richtig, also wieder genau die gleichen Touren,
‫die Sie zuvor auf der
‫grafischen Oberfläche gesehen haben, also auf der gerenderten Website.
‫Okay, wir können dann auch weitermachen, die ID nehmen und nur diese
‫ID anfordern, also auf dieser Tour für diese ID, und Sie sehen also, dass
‫wir jetzt nur noch diese hier mit noch mehr
‫Daten als zuvor haben.
‫Wir haben also Startorte
‫hier, wir haben Reiseleiter, die wiederum andere IDs haben, wir
‫haben Orte, wir haben Bewertungen, also all das
‫haben wir in einer Tour.
‫Sie sehen also, es ist wirklich
‫fortgeschrittenes Zeug und wir haben also mehr als nur Touren.
‫Wir haben Benutzer, aber wir können nicht auf sie
‫zugreifen, da wir authentifiziert werden müssen.
‫Sie sind also nicht eingeloggt und wir müssten
‫uns jetzt in unsere App einloggen.
‫An dieser Stelle höre ich auf,
‫dir alle Funktionen zu zeigen, weil wir
‫dies im Laufe
‫des Kurses bauen werden, nur um dir zu zeigen, dass hier
‫wirklich viel los ist und es also viel Material und
‫Zeug zu lernen gibt Ich hoffe,
‫dass Sie sich darauf
‫freuen und jetzt den ersten Schritt mit mir machen wollen.
‫Gehen wir also zurück und implementieren die Tourroute oder
‫beginnen zumindest mit der Implementierung.
‫Okay, diesen Code hier brauchen wir nicht mehr, und ich
‫lösche ihn nicht, sondern kommentiere ihn nur.
‫Also verwenden wir wieder App. get, weil
‫wir in diesem Vortrag
‫damit beginnen, nur die
‫get-Anfragen zu bearbeiten und die URL Slash-API und Touren sein wird.
‫Ich verwende also nicht
‫v1, gut, ich könnte v1 sofort verwenden,
‫daher ist es eine gute Vorgehensweise, die API-Version anzugeben.
‫Okay, falls Sie einige Änderungen
‫an Ihrer API vornehmen
‫möchten, können Sie dies einfach dann auf v2
‫tun, ohne jeden zu beschädigen, der noch v1 verwendet.
‫Okay, im Grunde können Sie also abzweigen, eine
‫neue Version Ihrer API erstellen,
‫aber alle Benutzer können sie dann immer noch verwenden.
‫Wenn wir es einfach
‫so machen und Sie dann Änderungen an API-Slash-Touren vornehmen, dann
‫würden die Benutzer, die damit
‫begonnen haben, es zu verwenden, bevor Sie die Änderung vorgenommen haben, auf Probleme stoßen.
‫Okay, wir sollten also immer die Version der API angeben.
‫Wir könnten es auch in
‫der Subdomain machen, aber es ist einfacher, es einfach in die URL aufzunehmen.
‫Okay, und dann natürlich unser Routenhandler.
‫So nennen wir diese Funktion normalerweise.
‫Wir nennen es den Routenhandler.
‫Okay, also nur um sich mit diesen Express-Bedingungen vertraut zu machen.
‫Was wollen wir nun tun, wenn jemand diesen Weg einschlägt?
‫Nun, wir wollen einfach alle Touren zurückschicken.
‫Das ist also ähnlich dem, was wir gerade
‫in der letzten Vorlesung gelernt haben, richtig.
‫Wir haben diese URL oder diesen Endpunkt, Schrägstrich-Touren,
‫und das sendet normalerweise alle Daten für
‫diese Ressource zurück, richtig.
‫Also, Touren sind jetzt auch die Ressource, und ich beginne
‫hier mit Touren,
‫weil es, wie ich sagen würde, die
‫offensichtlichste ist, seit wir eine Website oder eine Webanwendung für
‫den Verkauf von Touren erstellen, richtig.
‫Woher bekommen wir nun eigentlich
‫diese Touren, die wir an den Kunden zurücksenden wollen?
‫Nun, es ist hier im
‫Dev-Data-Ordner, dann Daten und dann Tours-einfach.
‫Es handelt sich also um diese JSON-Datei, die
‫derjenigen, die wir für die Notizenfarm hatten,
‫sehr ähnlich ist. Es handelt sich also wieder um ein Array von
‫JSON-Objekten, das dann eine Reihe von Daten zu jeder der Touren enthält.
‫Und ja, das
‫sind die Daten, die wir an den Client senden werden.
‫Bevor wir die
‫Daten senden können, müssen wir
‫sie zuerst lesen und tun dies also wieder nicht
‫innerhalb des Route-Handlers, sondern vorher.
‫Okay, und genau wie ich im vorherigen Projekt erklärt habe,
‫können wir das tun, weil der
‫Code der obersten Ebene nur einmal ausgeführt wird, und
‫zwar direkt nach dem Start der Anwendung, richtig.
‫Und jetzt, da Sie alles über die
‫Ereignisschleife wissen, ist es an dieser Stelle für Sie noch sinnvoller, richtig.
‫Nur diese Callback-Funktion, zum Beispiel hier, wird also
‫innerhalb der Ereignisschleife ausgeführt, und
‫hier können wir keinen Block und keinen Code haben.
‫Aber draußen ist das überhaupt kein Problem.
‫Damit werden die Touren einfach synchron in eine
‫Variable außerhalb von all dem eingelesen.
‫Also fs, und dafür
‫brauchen wir natürlich das Modul tatsächlich,
‫und das machen wir hier oben.
‫Und ich fange gerne immer mit den Kernmodulen an
‫und das mache ich mit dem ersten.
‫Also erfordern, fs, also
‫fs. readFileSync, es ist schon da.
‫Und jetzt verwenden wir den Dirnamen.
‫An dieser Stelle
‫wissen Sie bereits, warum wir
‫hier tatsächlich Zugriff auf diese Variable haben, also ist dirname der Ordner, in
‫dem sich das aktuelle Skript befindet,
‫und das ist dieser Hauptordner.
‫Von hier aus müssen wir also in die Entwicklungsdaten
‫übergehen, dann in die Daten und dann
‫haben wir Touren – einfach. json.
‫Okay, und jetzt lassen Sie uns auch gleich in diesem Schritt
‫hier das Ergebnis analysieren.
‫Also JSON, eigentlich die Großbuchstaben,
‫also JSON. parse, sodass das JSON,
‫das wir hier haben, automatisch in ein Javascript-Objekt
‫oder ein Array von Javascript-Objekten konvertiert wird.
‫Also speichern Sie es und so wird es neu formatiert und jetzt
‫müssen wir es
‫nur noch wirklich an den Client zurücksenden, also
‫res. json,
‫und lassen Sie mich hier den Statuscode
‫angeben, auch wenn 200 der
‫Standard ist, mache ich dies gerne in jeder einzelnen Antwort.
‫Alles klar, also JSON, und was wollen wir jetzt zurückschicken?
‫Keine Nachricht, das ist sicher.
‫Was wollen wir also zurückschicken?
‫Denken Sie daran,
‫dass wir den Jsend-JSON-Formatierungsstandard verwenden wollten.
‫Okay, und dort geben wir einen Status an, und
‫so einen Status, und das
‫kann entweder Erfolg, Fehlschlag oder Fehler sein, okay.
‫Der Erfolg ist also offensichtlich.
‫Es ist, wenn wir einen 200-Code oder einen 201
‫haben oder wirklich nur jeden Code, der mit 200 beginnt.
‫Dann haben wir den Fehler, der ein Fehler beim Client ist, und
‫dann haben wir auch den
‫Fehler, wenn ein Fehler beim Server aufgetreten ist.
‫In Ordnung, aber wir werden diese etwas später verwenden.
‫Jedenfalls haben wir dann auch noch die Dateneigenschaft, die
‫wie gesagt der
‫sogenannte Umschlag für unsere Daten ist.
‫Wir spezifizieren also die
‫data-Eigenschaft und diese Daten haben dann wiederum ein Objekt, das
‫dann die Daten enthält, also den
‫Antwortschritt, den wir tatsächlich senden möchten.
‫Und das sind in diesem Fall Touren.
‫Also Touren und dann Touren, das ist in
‫diesem Fall derselbe Name.
‫Bei ES6 müssen wir den Schlüssel und den Wert
‫eigentlich nicht angeben, wenn sie den gleichen Namen haben,
‫also könnten wir einfach Touren
‫schreiben, aber ich wollte hier nur
‫angeben, dass ich Touren hier geschrieben habe,
‫weil, na ja, das ist die Name der Ressource und
‫des Endpunkts, und deshalb
‫sende ich dann innerhalb von Daten ein Objekt mit der Tour-Eigenschaft zurück.
‫Okay, wenn das zum Beispiel x hieße,
‫dann würde ich das
‫hier x nennen, aber hier müsste ich noch Touren sagen, okay.
‫Ich stelle es wieder auf Touren ein, weil das mehr Sinn macht
‫und jetzt kann ich das hier löschen und einfach so belassen.
‫Und das ist eigentlich alles, was wir tun müssen.
‫Also haben wir unsere Daten gelesen und dann unsere
‫Antwort hier so formatiert, indem wir die JSend-Datenspezifikation verwendet haben.
‫Okay, also ganz einfache Sachen.
‫Lass es uns jetzt
‫einfach testen und wir müssen jetzt natürlich
‫die URL ändern, damit wir Slash-API, Slash-Version eins und Touren haben.
‫Das ist also unsere URL.
‫Wir machen immer noch eine Get-Anfrage,
‫und das ist diejenige, auf die wir im Code
‫antworten. Denken Sie also daran, diese Get-Methode zu
‫verwenden, und klicken Sie auf Senden, und tatsächlich können wir loslegen.
‫Hier haben wir also alle unsere Touren.
‫Also, toll, das ist wirklich cool.
‫Wirklich sehr schöne Arbeit.
‫Zum Abschluss noch etwas, das ich normalerweise
‫gerne mache, wenn wir mehrere Antworten senden, ist das
‫Einfügen eines Felds namens results
‫mit der Anzahl der Ergebnisse, die wir senden.
‫Okay, und das ist nicht
‫wirklich Teil der JSend-Spezifikation,
‫aber ich mache es trotzdem
‫sehr gerne, weil es für den
‫Client sehr einfach ist, sehr schnell
‫Informationen über die empfangenen Daten zu erhalten.
‫Wir wissen also, dass Touren eine Reihe sind
‫und müssen daher nur Touren sagen. Länge.
‫Okay, und das macht eigentlich
‫nur dann Sinn, wenn wir ein Array senden, also mehrere Objekte.
‫Wenn wir nur eine Tour senden würden, wäre
‫es nicht sinnvoll, Ergebnisse wie eins zu haben,
‫richtig, und deshalb mache
‫ich dies nur, wenn wir ein Array mit
‫mehreren darin enthaltenen Objekten senden.
‫Also lass uns das nochmal machen.
‫Und tatsächlich haben wir neun Ergebnisse, dann
‫die Dateneigenschaft, dann Touren, um anzugeben, dass
‫wir Touren senden,
‫und dann ein Array mit allen neun Touren.
‫So können Sie ein anderes Objekt und
‫noch eins und noch eins
‫sehen, und zwar
‫bis zum Ende, also der allererste Schritt zu unserer API.
‫Zu diesem Zeitpunkt ist es natürlich wie eine dateibasierte API, also lesen wir diese
‫Daten von einer API, aber später speichern
‫wir diese Daten natürlich in
‫einer Datenbank und lesen sie dann von dort aus.
‫Aber wie auch immer, das sieht schon irgendwie echt aus
‫und das tut mir auf jeden Fall richtig
‫gut, und ich hoffe, es gibt dir auch ein gutes Gefühl.
‫Das war's für die Get-Anfrage.
‫Als nächstes kümmern wir uns um die Post-Anfrage,
‫damit wir unseren Daten tatsächlich eine neue Tour hinzufügen können.