‫Sprecher: Lassen Sie uns nun ein erweitertes Postman-Setup erstellen, um uns
‫das Leben bei der Arbeit mit diesem
‫Tool etwas zu erleichtern.
‫Hier bei Postman
‫ist das erste Konzept, das ich
‫Ihnen zeigen möchte, das Konzept der Umwelt.
‫Vielleicht haben Sie bemerkt, dass hier oben
‫keine Umgebung steht, oder?
‫Und das liegt daran,
‫dass wir zu diesem Zeitpunkt noch keine Umgebung geschaffen haben.
‫Gut.
‫Im Grunde ist eine Umgebung also wie ein Kontext, in dem
‫unsere App ausgeführt wird.
‫Und wir können dann für jede dieser
‫Umgebungen einige Variablen angeben.
‫Und am sinnvollsten sind, wie
‫bei unserer Express-Anwendung,
‫die Entwicklungs- und die Produktionsumgebung.
‫Beginnen wir also damit, unsere erste, unsere Umgebung, hier hinzuzufügen.
‫OK.
‫Und ich nenne das eine Tiefe und dann für Naters, also
‫den Namen unserer Anwendung.
‫OK.
‫Die Variable, die ich hier erstellen werde,
‫heißt URL.
‫Denn das ist das
‫Wichtigste, was ich von einer Umgebung in die andere wechseln möchte.
‫In der Entwicklung haben wir also eine URL
‫und dann in der Produktion eine andere.
‫Richtig.
‫Setzen wir nun die URL
‫hier auf http 127001, was
‫für
‫localhost steht.
‫Dann Port 3000 und
‫ich glaube, das wars dann auch.
‫Das ist also der Anfangswert unserer URL-Variable.
‫OK.
‫Also fügen wir
‫jetzt Und hinzu, also haben wir einfach unsere neue Tiefenumgebung.
‫Wir können dann auch eine für die Produktion hinzufügen.
‫Aber hier haben wir noch nicht wirklich
‫eine URL.
‫Das heißt also einfach Naters dot io, das
‫gibt es nicht.
‫OK.
‫Aber das ist einfach, sagen wir, ein Platzhalter.
‫Gut?
‫OK.
‫Lassen Sie uns nun
‫diese Umgebungsvariable verwenden, die wir gerade erstellt haben.
‫Denken Sie also daran, es heißt URL.
‫Und jetzt möchte
‫ich diese URL hier so, hier durch die
‫Variable ersetzen, die wir gerade erstellt haben.
‫Und das tun wir, indem wir geschweifte Klammern, den
‫Namen der Variablen und
‫dann wieder geschweifte Klammern verwenden.
‫Gut.
‫Und so wird diese nun im Grunde
‫durch die Variable ersetzt, die aus unserer Umgebung kommt.
‫Wenn wir jetzt darüber schweben, können wir sehen,
‫dass es ungelöst ist, aber das liegt daran, dass wir
‫unsere Umgebung noch nicht ausgewählt haben.
‫Wir müssen also hier zu
‫diesem Menü kommen und dann die Tiefe nach Naters auswählen.
‫Wenn wir jetzt den Mauszeiger darüber bewegen, sehen Sie,
‫dass es sich tatsächlich um die Variable handelt, die wir gerade zuvor definiert haben.
‫OK.
‫Wenn wir also jetzt versuchen, eine
‫Anfrage zu senden, erhalten wir natürlich wie zuvor die richtige Antwort.
‫OK.
‫Und ich hoffe, Sie können sehen, wie nützlich dies später sein
‫wird, wenn wir in der Produktion sind.
‫Denn wenn wir diese Umgebungsvariablen nicht hätten,
‫müssten wir später, wenn wir zum
‫Testen dieser
‫API in der Produktion
‫wechseln möchten, alle diese URLs in allen Anfragen manuell ändern.
‫Und im Moment haben wir nicht so viele.
‫Aber stellen Sie sich vor, wir haben 30 oder 50
‫oder 100 Anfragen und müssten diese URLs dann in
‫allen manuell ändern.
‫Und das würde überhaupt keinen Spaß machen.
‫Und das machen wir jetzt einmal
‫und dann ist es für den
‫Rest der Projektentwicklung erledigt.
‫Richtig?
‫Wenn wir also jetzt zum Beispiel in die
‫Produktion wechseln, dann hätten wir hier Naters dot io
‫und dann API v1 und Tours.
‫Gut.
‫Also, lassen Sie uns jetzt fortfahren und dies
‫kopieren und tatsächlich in alle diese einfügen.
‫Also müssen wir das natürlich jetzt einmal machen.
‫Aber auch hier ist es besser, es jetzt zu
‫tun, da wir hier noch nicht so viele Endpunkte haben, als
‫es später zu tun.
‫Also, speichern Sie dieses.
‫Speichern Sie diese noch einmal.
‫Eigentlich sollten wir diese Eigenschaft loswerden.
‫Also, speichern.
‫Speichern.
‫Und speichern Sie auch dieses.
‫Also werde ich es jetzt in allen machen.
‫Okay, nur ganz schnell.
‫Und diese beiden haben es bereits.
‫Gut.
‫Dann erhalten Sie alle Touren.
‫Holen Sie sich Tour nicht.
‫In Ordnung, sparen.
‫Und tatsächlich können wir Command-S drücken, genau
‫wie in jeder anderen App.
‫Und dann Befehl-W, um die Registerkarte zu schließen.
‫OK.
‫Also, wie zum Beispiel in
‫Google Chrome.
‫Also Befehl-Speichern, Befehl-S und
‫dann Befehl-W.
‫Also, nur um es ein bisschen schneller
‫zu machen, Und jetzt sind wir hier fast fertig.
‫Und das ist es.
‫OK.
‫Und so haben
‫wir hier mit Postman unsere API-Entwicklung im Grunde zukunftssicher gemacht.
‫Erinnern Sie sich als nächstes daran, wie
‫ich in der letzten Vorlesung sagte, dass ich den
‫Prozess des Kopierens dieses Tokens hier im Wesentlichen automatisieren würde.
‫Und dann fügen Sie es direkt hier in diese leere Kopfzeile ein.
‫Gut.
‫Und das machen wir nun tatsächlich.
‫Und dafür müssen wir tatsächlich
‫ein bisschen Code schreiben.
‫Aber das ist überhaupt kein Problem.
‫Also, lass uns das tun.
‫Und registriere dich und dann logge dich ein.
‫Denn dies sind
‫die beiden Orte, also
‫die beiden Endpunkte, von denen wir ein Json-Webtoken erhalten, oder?
‫Also kommen wir hier zum
‫Test-Tab, den wir noch nicht verwendet haben.
‫Hier legen wir also programmgesteuert
‫eine Umgebungsvariable fest.
‫OK.
‫Wir haben also Umgebungsvariablen erstellt, bevor
‫wir diesen Dialog hier verwendet haben, OK?
‫Aber jetzt hier mit Code
‫werden wir im Grunde auch programmgesteuert eine Umgebungsvariable erstellen.
‫Und wir erstellen eines für das Json-Webtoken,
‫das wir in der Anfrage erhalten.
‫OK.
‫Und im Grunde müssen wir nur die
‫Snippets verwenden, die wir hier haben.
‫Gut.
‫In diesem Fall möchten wir also eine Umgebungsvariable
‫setzen und klicken wir einfach hier.
‫Und tatsächlich bekommen wir hier diesen vorgefertigten Code für uns.
‫OK.
‫Dies ist im Grunde nur
‫etwas JavaScript, auf das wir hier in Postman zugreifen können.
‫Also PM, was wahrscheinlich für Postman steht,
‫Punktumgebung, was die aktuelle Umgebung ist.
‫Und dann stellen Sie ein.
‫Legen Sie also die Variable namens JWT fest.
‫Und dann natürlich der Wert davon.
‫Und wo ist dieser Wert?
‫Nun, es ist in PM dot response dot
‫json.
‫Also im Grunde, um es in json zu konvertieren.
‫Und dann Punkt-Token.
‫Und hier ist es natürlich
‫ein Punkt-Token, denn das ist der Name
‫unserer Eigenschaft im Antwortobjekt.
‫OK.
‫Im Grunde ruft dieser Code hier
‫also die Antwort für uns ab und dann können wir
‫dort die Punkt-Token-Eigenschaft schreiben und dann der JWT-Umgebungsvariablen zuweisen.
‫OK.
‫Und jetzt haben
‫wir hier einen aktiven Test, weshalb wir vielleicht diesen
‫blauen oder einen grünen Punkt
‫bekommen (lacht) und wir testen ihn jetzt.
‫Melden wir uns also mit einem neuen Benutzer an.
‫Ich nenne es Testbenutzer.
‫Wir müssen dieses Komma loswerden.
‫Und jetzt senden wir es.
‫Und wir konnten keine Antwort erhalten.
‫Und das liegt daran, dass ich hier naters dot io habe.
‫Ich bin also in der falschen Umgebung.
‫Wir wollen natürlich in der Entwicklung sein.
‫Senden Sie es also erneut.
‫Und hier bekommen wir tatsächlich unser Token.
‫Lassen Sie uns nun überprüfen, ob es auch in
‫unserer Umgebung vorkommt.
‫Dafür kommen wir hierher.
‫Def, naters, und tatsächlich, hier bekommen wir jetzt JWT und
‫dann dieses Token, das wir auch hier unten haben.
‫OK.
‫Diese Token-Variable, die wir
‫hier haben, sollte genau dieselbe sein wie die hier unten.
‫Also hat Postman es von
‫hier bekommen und es dann als diese neue Umgebungsvariable gepostet.
‫OK.
‫Das ist also der erste Schritt und der zweite
‫Schritt ist nun, zu einer unserer geschützten Routen zu gehen,
‫die in diesem Fall nur diese ist.
‫Und dann können wir das hier eigentlich
‫überhaupt löschen.
‫Also, gleich drüben auf dieser
‫Seite, OK.
‫Also, lass das alles weg.
‫Und dann haben
‫wir hier, wie Sie vielleicht
‫gesehen haben, eine Registerkarte für die Autorisierung.
‫OK.
‫Hier können wir nun also die
‫Art der Berechtigung festlegen.
‫Und Sie sehen all diese
‫Unterschiede hier, aber wir werden das Inhaber-Token wählen.
‫OK.
‫So wie
‫wir Bearer in unserem Token
‫angegeben haben, müssen wir auch hier Bearer benennen.
‫OK.
‫Also Inhabermarke.
‫Und jetzt müssen wir nur noch das Token angeben.
‫Und erinnerst du dich, wie wir das machen?
‫Nun, eigentlich genau so wie wir es hier oben gemacht haben.
‫Also, geschweifte Klammern, geschweifte Klammern,
‫JWT, und dann schließen Sie es.
‫Es wird also orange
‫und das bedeutet, dass es jetzt funktionieren sollte.
‫Und jetzt testen wir das.
‫Und, bam, los geht's.
‫Wir haben also wirklich Zugriff auf die Daten bekommen,
‫was bedeutet, dass der Token erfolgreich gesendet wurde.
‫Gut.
‫Und das können wir tatsächlich hier
‫in den Überschriften sehen.
‫Also hat es diesen Header jetzt automatisch
‫für uns vorausgefüllt.
‫Wir haben also eine Autorisierung, wo wir den Träger und
‫all das gute Zeug hier haben.
‫Und eigentlich hat es all
‫dieses Zeug jetzt auch für uns hierher gebracht.
‫OK.
‫Das ist also genau das, was wir
‫zuvor gesehen haben, als wir eine Vorschau des Request-Dot-Header-Objekts in
‫Express angesehen haben.
‫Erinnere dich daran?
‫OK.
‫Sie sehen hier, dass es eigentlich
‫nur temporär generiert wird.
‫Also nur damit wir eine Vorschau bekommen.
‫Gut.
‫Und das ist es also tatsächlich.
‫Das macht unser Leben so
‫viel einfacher, wenn wir hier mit Authentifizierung arbeiten.
‫Denn jedes Mal, wenn wir
‫eine neue
‫geschützte Route hinzufügen möchten, müssen
‫wir nur zum Autorisierungs-Tab kommen und dann
‫diese Variable hier hinzufügen
‫und angeben, dass
‫wir mit einem Bearer-Token arbeiten.
‫Gut.
‫Und eigentlich habe ich gerade gemerkt, dass wir
‫noch nicht so weit sind.
‫Denn wir haben das hier in der Anmeldung, also
‫diesen Test.
‫Aber natürlich brauchen wir es auch beim Login.
‫Das ist also der
‫andere Ort, von dem wir ein neues, frisches Token bekommen.
‫Richtig?
‫Also, lass uns das kopieren,
‫dieses
‫hier speichern, auch dieses
‫speichern und dann hier beim
‫Anmelden hier posten.
‫Speichern Sie es.
‫Und ich muss
‫es nicht einmal testen, denn es sollte genauso
‫funktionieren wie bei der Anmeldung.
‫Gut.
‫OK.
‫Dies war
‫für uns sehr wichtig, um
‫weiterzukommen und unser Leben ein bisschen einfacher zu
‫machen, wenn Sie mit
‫Postman für Ihre API-Entwicklung arbeiten.