- 6/10/2025
Category
📚
LearningTranscript
00:00:00hallo miteinander etwas später ausgeplant jetzt nochmal videoaufzeichnung ursprünglich wäre das
00:00:11für letzte woche geplant gewesen aber da hat man den motoranstrich durch die rechnung gemacht und
00:00:18ich war der meinung wir haben heute einen präsenztermin aber ihr habt es auf der uni noch
00:00:22pfingst ferien von daher bietet sie die gelegenheit für mich dass ich das mit dem video noch wird und
00:00:30wir gemeinsam mit das finale es einmal entstehen also thema in kombination mit dem letzten assignment
00:00:39da geht es um wie präsentation state es wie man das implementiert die schauen uns herum und wir
00:00:52greifen schon ein bisschen vor auf das thema von nächster woche ist auf datenbank integration und
00:01:00wie man über etwa quasi daten aus der datenbank obfragt und dann an den client spricht im browser
00:01:08zurückliefert wir haben dort zwei präsenzeinheiten und wir werden in der präsenz gemeinsam weiterarbeiten
00:01:19an dem assignment und ihr habt dann quasi immer zeit dass dann wo wochen sind also insgesamt drei
00:01:26jetzt aber zwei wochen wo es aktiv noch arbeiten könnt und dann ist das semester somit abgeschlossen
00:01:33vom kontrollieren her wo die sein menschen jetzt eigentlich nur an 0 4 die sowie angeschaut 5 und 6
00:01:46quasi sitze große selben füllt die schauen wir dann im laufe von der woche zu und dann hat
00:01:52jeder sein punktestand im blackboard drinnen schreibt man die punkte eine fürs letzte assignment dass
00:02:01jeder weiß wo er steht und was er braucht damit die gewünschte note mehr oder weniger erreichen kann
00:02:09das letzte assignment ist eine kombination von zwei assignments von dem kurs an dem was wir uns
00:02:16orientieren und wir machen das deswegen gemeinsam weil das uns zu schwierig wäre oder zu viel aufwand wäre
00:02:24deswegen dieses gemeinsame programmieren daran und wir lassen halt mehr oder weniger diese lecture
00:02:34einheiten ein bisschen aus und erklären die restlichen konzepte oder besprechen die anhand von dem assignment
00:02:41also wir lernen es durch durch ausprogrammieren durch erklären beim programmieren ich hätte gern dass ihr
00:02:51dass ihr das assignment akzeptiert runterladet und das was ich heute mache nachprogrammiert oder mitprogrammiert und schreibt es dann auch in blackboard rein
00:03:04am ende hätte ich gern dass jeder eine commit message macht ich zeige es dir vor mit dem datum wo er das video angeschaut hat und das ganze auch erledigt hat
00:03:14ziel wäre dass ihr das bis nächste woche am dienstag macht das ganze video wird nicht länger wie eine stunde dauern
00:03:21ok also wir haben unser assignment akzeptieren runterladen und dann die bibliotheken nach installieren
00:03:32das vorprogrammieren hat ja einen weiteren vorteil viele von die sachen die was wir machen das konnten wir auch über den co-pilot realisieren
00:03:47also mittlerweile da oben ist ein open chat dem gibt man die anweisungen was man gerne hätte und der kann das ziemlich sicher lösen die anforderungen was mit
00:04:09ich bin jetzt kein feind von dem ganzen aber wenn ich was lernen möchte dann muss ich zuerst ein paar grundlagen verstehen und dann ist es überhaupt kein problem dass man diesen co-pilot verwendet
00:04:21aber ein paar grundlagen muss man mal ausprogrammiert haben damit man den code auch lesen kann
00:04:27das ist ein thema was glaube ich ihr in mehreren kurse habt oder was euch überall ein bisschen weglaufen wird
00:04:33das projekt hat
00:04:40ein ordner mehr ich glaube das haben wir auch schon besprochen wir haben den ordner API
00:04:46und wir versuchen jetzt eine kommunikation zwischen client und server herzustellen
00:04:52es können jetzt die gleiche applikation sein was am server läuft oder unterschiedliche
00:04:56eine ist zum beispiel zuständig dass sie die seiten für ein browser ausliefert für ein client und die andere ist dazu da dass
00:05:07irgendwelche abfragen ob arbeit und daten wieder zum client schickt die schauen uns jetzt die zusammenspiel schauen uns ein bisschen an
00:05:13für uns und da haben wir nicht lange drüber geredet ist server.js das ist die datei die
00:05:27dafür verantwortlich ist dass express applikation gestartet wird express ist ein
00:05:34mittel wäre und da drinnen sind ein paar sachen vor implementiert die was uns das leben leichter machen
00:05:41man sieht das zum beispiel da in zeile 10 und 11 da wird express initialisiert und nächste zeile
00:05:53bei der http server erzeugt da gibt es noch ein paar sachen da sagt man wo sind die daten drin was das server ausliefern sollt
00:06:02und da unten ist die startfunktion dieses main das was dann aufgerufen wird zum start für uns das haben wir jetzt schon sehr oft verwendet
00:06:14jetzt mal wollen wir jetzt ein npm sekt sehr rechts unten npm start ausführen passiert dann genau dies da steht dann
00:06:27server started now open localhost in your browser das ist genau dies was du ausgeben werden das heißt
00:06:36dieses server aus der zeile 11 dieser http server der ist jetzt aktiv und hat am port 1930 das heißt wenn wir die adresse anklicken liefert dieser http server die daten aus
00:06:54die daten aus in dem fall wenn man nichts angeben sucht hat also ein webserver mehr oder weniger immer die index datei
00:07:06die index datei in unserem verzeichnis ist im public verzeichnis gibt es index html die wird dann vom http server zurückgeliefert an den client
00:07:19man kann eine andere ressource anfordern und die wird dann zurückgeliefert derweil ist das ganze noch
00:07:26kann man statischen server nennen weil die dateien so wie sie da sind einfach zurückgeliefert werden
00:07:33eine ressource wird angefordert und ausgeliefert wir wechseln jetzt dann schon langsam in etwas wo man das dynamisch gestaltet
00:07:42wir liefern zwar immer noch diese files aus aber wir greifen dann auf teile von unserem framework
00:07:49express zu wo dynamisch was berechnet wird und dann zurückgeliefert wird
00:07:53ok jetzt geht es darum wie liefert man was an den benutzer zurück und wir hätten gerne in dieser also das ist ein social media
00:08:09also social media applikation und dort drinnen gibt es halt ein profil und man kann in anderen folgen und
00:08:18schauen ob wir einen büdel finden
00:08:26also das ist quasi die generische social media app und es geht einfach nur darum dass man ein paar nutzer hat die können
00:08:34und post abgeben und können andere folgen und die logik wenn wir implementieren
00:08:43damit so was funktioniert braucht man daten die im hintergrund liegen und
00:08:51was für die wichtigsten sachen oder was wir gemeinsam machen müssen ist eben dass man diese datenstruktur
00:08:57zur verfügung stellen also bevor man jetzt quasi über eine schnittstelle auf die daten abrufen können
00:09:04browserseitig aus müssen wir zuerst einmal die datenstruktur am server erstellen
00:09:10und die aufgabe wo sie eigentlich geschickt habe war dass ihr bitte
00:09:15im zweiten schritt selbstständig mongodb installiert
00:09:24mongodb ist eine datenbank die
00:09:29ist eine no sql datenbank
00:09:32also no sql ist keine relationale datenbank
00:09:36falls ihr schon mehr gehört habt
00:09:38sondern das ist eine datenbank die ermöglicht uns dass man sogenannte datensätze
00:09:42collections unstrukturiert dort ablegen und auf die zugreifen können
00:09:47also für uns der erste schritt ist wir brauchen eine datenbank auf die daten
00:09:54drinnen liegen auf die was man zugreifen können
00:09:57das machen wir jetzt gemeinsam
00:09:59bitte mongodb installieren
00:10:01laut anleitung
00:10:04und dann zweiter schritt
00:10:08in unserem projekt drinnen
00:10:12habt ihr eine sogenannte initdb file
00:10:19eine erweiterung damit man weiß was das für mongodb ist
00:10:23diese datei die wird benötigt damit man die grundstruktur für unsere generische social media app erstellen kann
00:10:33und da sind schon zwei beispiele drinnen und zwar
00:10:38man erstellt eine datenbank die heißt dann final assignment
00:10:44die löscht man dann in der zweiten zeile
00:10:48und dann sagt man da drinnen gibt es eine collection die heißt users
00:10:53also in der datenbank final assignment
00:10:56gibt es eine collection die schauen wir uns dann an die nennt man users
00:11:00und da fügt man jetzt eine zeile ein oder einen datensatz
00:11:07und das ist im json format geschrieben wenn man sich das anschaut
00:11:11geschwungene klammern und dann steht da die id rschraml und so weiter
00:11:16ich hätte gern dass ihr doro einen zweiten nutzer eingetät
00:11:21also euch selber im besten fall
00:11:24ich muss jetzt irgendwann erfinden
00:11:26ich möchte jetzt einen zweiten nutzer einfügen
00:11:28überlegt sich irgendwen
00:11:39sehr bunter wort sache
00:11:41generische social media app hat ja mehr als nutzer
00:11:55das büdel können wir gleich lassen
00:11:58so und dann haben wir da klassischerweise wie in viel soziale medien halt dass man mit anderen folgen kann
00:12:04und fürs folgen geben wir da in der liste drinnen an wen folgt der rschraml
00:12:10der folgten s und der wort sache und der sepp und der wort sache folgten rschraml
00:12:21wenn man jetzt mehr was hat was mir folgt dann müssen wir dem in den beistrag getrennt in die liste rein kommen
00:12:29und der schraml hat einen ersten post gemacht mit dem aktuellen datum dann welcome to
00:12:37also bitte legt einen zweiten nutzer an und dann schauen wir dass sie die zwei nutzer gegenseitig folgen
00:12:44folgen
00:12:48ok
00:12:50wenn ihr mongodb installiert habt und
00:12:57mongoshell installiert habt
00:13:00steht in der Anleitung drinnen
00:13:02könnt ihr das aufrufen
00:13:06bei mir steht dann jetzt da
00:13:08ich habe jetzt mongoshell
00:13:13steht für mongoshell
00:13:15die ist aufgerufen
00:13:17dann sieht man die mongoshell
00:13:18wo wird sie verbinden mit
00:13:20das ist der eigene rechner
00:13:22und die datenbank läuft am port 27017 usw
00:13:26also das läuft
00:13:28und was ich jetzt machen kann
00:13:31wichtig ist dass ich die mongoshell im gleichen
00:13:36verzeichnis starte wie
00:13:39wie das verzeichnis wo mein projekt drinnen liegt
00:13:43damit ich auf die initdb datei zugreifen kann
00:13:46da drinnen gibt es jetzt eine funktion
00:13:49die muss ich kurz anschauen
00:13:51die heißt load
00:13:54und ihr könnt dann quasi mit load
00:13:56und die runden klammern und den namen von der datei auf die datei zugreifen
00:14:04und die in mongodb laden
00:14:06dann werden die zeilen nach der reihe ausgeführt
00:14:09das können wir ausprobieren
00:14:11so jetzt haben wir dann den sep unterwurzacher
00:14:17ist not defined
00:14:19ja jetzt macht das hin
00:14:21das müssen wir mal kurz ändern
00:14:24da sieht man nämlich dass
00:14:26ich habe da gesagt wir hätten da gerne einen sep unterwurzacher
00:14:31mein following müssen wir so machen
00:14:35man kann erst den folgen
00:14:36wo er erstellt worden ist
00:14:38das heißt ihr erstellt zuerst den ersten
00:14:41dann den zweiten und der zweite kann den ersten folgen
00:14:44man kann das jetzt nicht so machen
00:14:49da muss ich den jetzt ändern
00:14:51aber für uns reicht es dann einfach so dass der sep unterwurzacher folgten
00:14:56er schramml beziehungsweise der zweite nutzer bei euch
00:14:58wird es ihr selber sein
00:15:00ihr folgt es halt einfach mir
00:15:02damit man das dann bei den abfragen sieht
00:15:04nochmal
00:15:08und
00:15:10jetzt haben wir ein nettes problem
00:15:12dann war das nicht das problem
00:15:18so der ist unterwurzacher
00:15:21wir würden da gerne einen zweiten
00:15:26dazu
00:15:29irgendwo ein denkfehler
00:15:36der ist unterwurzacher
00:15:37also speichern hätte es müssen
00:15:39das war's
00:15:40das war's
00:15:41jetzt ist der erste schramml
00:15:49ist not defined
00:15:55da lerne ich jetzt wieder was
00:15:56der fehler ist
00:16:08recht trivial
00:16:10aber ich hab kurz schauen müssen wie es funktioniert
00:16:12und zwar
00:16:14da oben in der liste
00:16:16wenn man folgt oder nicht
00:16:18da übergeben wir die id
00:16:19vom jeweils anderen aus zeichenkette
00:16:20und ich hab da noch
00:16:23so eine Art objekt hingeschrieben
00:16:25und das findet ihr nachher nicht
00:16:27wir wollen jetzt nicht richtig überprüfen
00:16:29ob der jetzt vorhanden ist
00:16:30oder auch keine id ist
00:16:32also wir wollen da keine fremdschlüssel erzeigen
00:16:34das heißt wir speichern da einfach in die liste rein
00:16:37die benutzernamen von den
00:16:38die die was man folgt
00:16:40deswegen haben wir vorher den fehler gehabt
00:16:43das heißt die was wir folgen wollen
00:16:46die schreiben wir mit anführungszeichen
00:16:48aus text
00:16:50da in die äckigen klammern rein
00:16:52also bitte das war mein fehler
00:16:54das tun wir dann bitte wieder speichern
00:16:56und dann sagen wir nochmal
00:16:59load init
00:17:01ok
00:17:03und dann sehen wir da unten
00:17:04kein fehler
00:17:06die datenbank ist
00:17:08vorhanden
00:17:16mit show collections
00:17:18kann man dann schauen
00:17:20welche datensätze
00:17:22jetzt in der datenbank
00:17:23drinnen sind
00:17:24und wir sehen
00:17:25wir haben eine datenbank
00:17:26die heißt
00:17:27final assignment
00:17:29da drinnen haben wir zwei
00:17:31datensätze
00:17:32einer heißt posts
00:17:33und der andere ist users
00:17:34und auf die können wir jetzt zugreifen
00:17:36und in unserer Applikation mit dem arbeiten
00:17:41mit exit
00:17:43kann man da wieder aussteigen
00:17:47und dann starte ich wieder mein
00:17:50Entwicklungs-Server
00:17:51jetzt
00:17:57haben wir unsere datenbank erstellt
00:18:02und
00:18:04Ziel war jetzt
00:18:06dass wir auf die datenbank
00:18:08zugreifen können
00:18:10dazu muss ich ein bisschen was erklären
00:18:12und zwar es geht um das
00:18:13wo greifen wir jetzt auf diese daten zu
00:18:15in server.js
00:18:17da wird quasi dieser http server erstellt
00:18:20der die sachen ausliefert
00:18:22wir drinnen jetzt den bereich
00:18:25wo die webseiten ausgeliefert werden
00:18:28von dem bereich wo der webserver daten
00:18:32für unsere webseiten bereitstellt
00:18:34das ganze ist die schnittstelle
00:18:38das ist das api
00:18:40das kennt ihr es hat sehr in dem studium
00:18:42wo man sich jetzt nicht dafür wendet
00:18:45denken wir jetzt an
00:18:47alle datensätze was die geosphere so bereitstellt
00:18:51da gibt es eine api dazu
00:18:52eine schnittstellenbeschreibung
00:18:53wie man weta daten von weta stationen kriegt
00:18:56und so weiter
00:18:58was machen wir jetzt aber für unsere eigene
00:18:59applikation
00:19:01es ist schon vorprogrammiert
00:19:03gibt da einen aspekt den brauchen wir jetzt nicht mehr besprechen
00:19:06und zwar
00:19:08das ist unsere hauptapplikation
00:19:10und vor der datei
00:19:14die was im ordner api drin liegt
00:19:17da gibt es index.js
00:19:18und da drinnen haben wir eine Funktion
00:19:20die heißt
00:19:21init.api
00:19:22also das ist quasi die Funktion
00:19:25die unser api initialisiert
00:19:28und wir übergeben die aktuelle app
00:19:31unsere express app
00:19:33übergeben an diese Funktion
00:19:36damit alles was für die api relevant ist
00:19:40über das init.api zu dieser app hinzugefügt wird
00:19:44wie schaut das aus
00:19:48wir öffnen api index.js
00:19:56und zwar
00:19:58da drinnen ist jetzt schon vordefiniert
00:20:01dass für unser api
00:20:04gibt es einen datenbanknamen
00:20:08wir haben die datenbank schon erstellt
00:20:11die heißt final assignment
00:20:13die sollte bei euch jetzt lokal am rechner laufen
00:20:15und da drinnen wird jetzt das gemacht
00:20:20da wird über express ein sogenannter router initialisiert
00:20:24ein router hilft uns dass wir gewisse urls
00:20:27verarbeiten können
00:20:29und die zuständigkeit für diese urls werden über unser api behandelt
00:20:34dann sieht man
00:20:38der router sollte den fad
00:20:41slash api nutzen
00:20:43davon wird noch definiert wie die abstände sind
00:20:46bei json files
00:20:48also alles was auf die route slash api geht
00:20:53wird von diesem router da oben behandelt
00:20:55da unten haben wir jetzt schon ein paar vordefinierte routen
00:21:01zum beispiel wenn man slash api gibt
00:21:04da sollte da stehen api is running
00:21:06das können wir ausprobieren
00:21:07das können wir ausprobieren
00:21:11und zwar wir öffnen
00:21:16unseren
00:21:19unseren server
00:21:24standardmäßig wird
00:21:261930 da ausgeliefert
00:21:28also die index html
00:21:29und wenn wir jetzt ein slash eingeben
00:21:32slash api
00:21:38dann kriegen wir ein json file zurück
00:21:40und da steht
00:21:41message api is running
00:21:43wenn wir uns das in unserem projekt anschauen
00:21:47dann sehen wir da unten die standardroute
00:21:49mit dem slash
00:21:51beziehungsweise der router ist verantwortlich für slash api
00:21:55keine erweiterung dazu
00:21:58liefert der json file zurück
00:22:00message api is running
00:22:03das passt
00:22:05da unten haben wir noch ein paar andere testrouten
00:22:08zum beispiel
00:22:11test
00:22:13tests get
00:22:14können wir noch ausprobieren
00:22:15was da rauskommt
00:22:17da haben wir jetzt da keinen request drin
00:22:20alles probieren wir sparen noch aus
00:22:22also die api
00:22:24die ist quasi verfügbar
00:22:26und wir können da drinnen weiter programmieren
00:22:32was wir jetzt gern daten ist
00:22:34da drinnen unseren datenbank zugriff
00:22:38herstellen
00:22:40das machen wir da oben in dem init api
00:22:44das ist schon als asynchron markiert
00:22:48wir sehen dann gleich warum
00:22:49das war quasi das Thema vom letzten mal
00:22:51und zwar da drinnen stellen wir jetzt unsere verbindung her
00:22:57das erste ist
00:23:00wir brauchen eine connection
00:23:05zu unserem
00:23:08mongoserver
00:23:09da schreiben wir jetzt ja
00:23:10es gibt einen sogenannten mongoclient
00:23:11mongoclient
00:23:12mongoclient
00:23:13mongoclient.connect
00:23:14mongoclient.connect
00:23:15Da schreiben wir jetzt, es gibt einen sogenannten mongoclient,
00:23:19mongoclient.connect, das möchte ich da, ja.
00:23:27Schreiben wir da ein bisschen zu viel hin, weil mongoclient.connect
00:23:37und der Server läuft, schreibt mir mongodb, 127.0.1, das mit dem PortFind, der mongoclient,
00:23:58alles schön raus. Also, mongoclient sollte sich verbinden mit dem lokalen Server.
00:24:19Wichtig ist die Zeile da oben, Zeile 3, dass der mongoclient von mongodb installiert wird.
00:24:28Oder importiert wird in dem Fall.
00:24:30Wir haben den mongoclient normalerweise über, wenn wir jetzt nachschauen, welche Pakete werden
00:24:44noch installiert, dann sieht man im Package.json, steht schon drinnen, dass mongodb mit installiert
00:24:51wird. Das heißt, es ist verfügbar und wir können es in index.js importieren.
00:24:58Nächster Schritt, wir haben eine Verbindung hergestellt und jetzt will man die Verbindung
00:25:04aufbauen zur Datenbank. Ganz kurz noch, dieses mongoclient.connect, wenn man da drüber fährt,
00:25:14dann sieht man, da wird ein sogenannter Promise-Retour geliefert. Also Versprechen. Und wir haben
00:25:20letztes Mal gelernt, das Versprechen dauert ein bisschen, bis es eingelöst wird. Deswegen
00:25:25ist die Funktion da oben schaust auch synchron markiert. Und wir können da drinnen sagen, wir
00:25:30wollen warten. Bitte so lange warten, bis der Promise quasi realisiert worden ist und erst dann
00:25:38nächste Zeile ausführen. Jetzt stellen wir die Verbindung her zu unserer Datenbank. Da ist ja
00:25:48letzte Woche so Autocomplit drinnen. Lettdb. Da steht da schon der Connection.db und der Datenbank. Das
00:25:59können wir es übernehmen. Und zwar, die Verbindung sollte auf die Datenbank mit dem Namen aus der
00:26:12Variable Database nehmen zu ergreifen. Wir haben da Final Assignment. Das stimmt. Das ist das, was wir
00:26:20vorher initialisiert haben, wo dann zwei Collections drinnen sind. Jetzt können wir noch hergehen und
00:26:31können wir sagen, wir wissen ja, wir haben ja da zwei Collections drinnen. Eine hat geheißen Users und die
00:26:39andere hat Posts geheißen. Das heißt, die Daten von der dritte und die holen wir uns jetzt gleich. Und zwar, wir
00:26:46initialisieren uns dazu zwei Variablen auf die, wo wir dann in jeder Funktion zugreifen können. Die erste
00:26:53nehmen wir Users. Ich schreibe es groß, damit ich weiß, dass das Collections sind. Und die zweite schreibe ich mir das schon vor. LetPosts.
00:27:04Das kann ich wieder ausschalten. Das macht mich wahnsinnig. Das ist anstrengend. Die Säbel. Also wenn man viel mit KI arbeitet, ist das schon fein, wenn man dieses
00:27:27Completion drinnen hat oder am Anfang, wo man am Lernen ist, ist es eher hinderlich. Also in unserer
00:27:34Collection sollten, also in unserer Datenbank haben wir zwei Collections. Eine heißt Uses, eine heißt Posts. Wenn wir die Verbindung zur
00:27:43Datenbank aufgebaut haben, sagen wir dann quasi, dass wir gerne die Daten hätten. Und zwar aus der Datenbank die
00:27:52Collection mit dem Namen Users. Ich muss mal kurz querchecken, ob Users und Posts haben wir. Users und Posts. Users stimmt. Das zweite sind dann, Posts ist gleich
00:28:17So. Dann haben wir quasi, da drinnen, noch initialisieren, haben wir in Users schon die Daten drinnen aus der
00:28:37Collection Users und in Posts haben wir die. Das sollte eh so bleiben.
00:28:44Jetzt müssen wir jetzt mal schauen, dass wir die Funktion wieder schließen.
00:29:14Passt. Sicher ist, dass ich keinen Fehler habe da.
00:29:19Okay, jetzt speichern wir mal das Ganze. Dann starte ich das selber normalerweise noch.
00:29:24Wir haben keinen Fehler. Das heißt, jetzt hat das funktioniert. Wir haben unsere Datenbankverbindung hergestellt.
00:29:36Das heißt, das heißt, das tut gut, weil das jetzt funktionieren soll. Ich sage, Datenbankverbindung aufbauen.
00:29:48Aufbauen und Datensätze aus den Collections auslesen. Passt.
00:30:13Wir müssen in dem Kurs keine Profis für Datenbanken werden, aber man sollte zumindest sehen, wie das mit MongoDB funktioniert, dass man das installiert, dass man über das Init-File dann seine Datenbank initialisiert und ein paar Datensätze einladet.
00:30:34Das erweitern ist dann wieder ein eigenes Thema. Wenn man irgendwo eine Applikation erstellen möchte, dann nimmt man sich Zeit für das, bzw. über einen Co-Pilot oder andere Tools ist das eh mittlerweile ein Klacks.
00:30:47Jetzt geht es schon Richtung API und wir werden die Fuss komplett gemeinsam machen. Es gibt nur noch ein paar Sachen, die ich dann euch überlasse.
00:31:02Unsere Grundstruktur läuft. Die Frage ist, welche Schnittstellen sollten wir implementieren?
00:31:17Wir drehen die Aufgabe ein bisschen um. Ursprünglich war das so, dass zuerst im SMM 3.1 die Studenten mit einer bestehenden API gearbeitet haben und im zweiten Teil haben sie dann die API selber ausprogrammiert.
00:31:35Wir drehen das um. Wir programmieren jetzt einen Großteil von der API gemeinsam, besprechen dann noch, wie ihr mit der API arbeitet und dann könnt ihr das Frontend komplett einfach selber umsetzen.
00:31:52Die Datenbankstruktur haben wir erstellt. Unsere Datenbank heißt Final Assignment. Zwei Collections haben wir.
00:31:59Da steht ein bisschen drinnen. Each Element, ich hätte mir vorlesen sollen, ist eine User-ID aus Zeichenkette. Das war der Fehler von vorher.
00:32:10Bei Windows ist es ein bisschen anders. Wenn ihr Probleme habt, dann müsst ihr euch halt melden, bitte.
00:32:20Jetzt geht es um die API, um das Application Interface und wir wollen jetzt gemeinsam die erste Schnittstelle umsetzen, damit wir dann nächste Woche in der Lehrveranstaltung ein bisschen schneller weitermachen können.
00:32:42Die Beschreibung, was wir umsetzen sollen, ist da verlinkt.
00:32:48Und zwar jede Schnittstelle ist ein sogenannter Endpoint. Wir haben einen Endpunkt schon ausprobiert. Und zwar wir haben eine Route definiert.
00:33:06Wie habe ich das schon vordefiniert? Ich blende es kurz ein, parallel.
00:33:15So, damit ihr das ein bisschen besser versteht.
00:33:20Also man hätte gerne einen Endpunkt, wo man sieht, ob die API läuft. Und wir haben das quasi schon implementiert. Und zwar sieht man da in Zeile 25 und 26 bei mir. Da steht API GET. Das ist eine GET-Route.
00:33:35Man hätte gerne was für eine Schnittstelle. Und ich lieferte einfach zurück ein JSON-File.
00:33:44Message API IS RUNNING.
00:33:49Die Basic Info About The Database.
00:33:52Bei uns fehlt da noch ein bisschen was. Das könnten wir dann noch gemeinsam implementieren.
00:34:05Statusmeldung hätten wir gern.
00:34:07Ja.
00:34:14Vielleicht sieht man das.
00:34:16Machen wir zuerst das mit den Users und dann machen wir das Zweite.
00:34:20Also wir müssen das ein bisschen erweitern, weil aktuell liefert...
00:34:24Das lassen wir jetzt einmal so. Vielleicht greifen wir das nächste Woche nochmal auf.
00:34:28Bei uns liefert es jetzt gerade noch zurück.
00:34:31API IS RUNNING.
00:34:32Aber wir hätten gern, dass dann da steht, wie heißt die Datenbank und wie viele Nutzer und wie viele Posts gibt es.
00:34:44Mach am Ende halt noch schnell.
00:34:48Die erste Route, was wir jetzt gemeinsam machen, da geht es um das, wo einer gern Infos hätte über die ganzen Benutzer, die es gibt.
00:34:57Das heißt, eine zweite Route definieren.
00:35:01Funktioniert genau gleich wie da oben.
00:35:03Und dann können wir schon ein bisschen besprechen, was so eine Route ausmacht.
00:35:06Also das API bei uns ist eine Router Instanz.
00:35:10Wir sagen, wir machen jetzt eine Get Route.
00:35:15Und die geht auf den Pfad, wo wir eingibt, slash API slash Users.
00:35:21Wenn man das definiert hat, dann wird den ganzen beim Aufruf, also der Benutzer ruft slash API slash Users auf, dann wird der Router Funktion, wird ein Request und ein Response übergeben.
00:35:39Das ist immer so.
00:35:40Request ist das, was angefordert worden ist.
00:35:43Und das Response ist das, was dann zurückgeliefert wird.
00:35:48Der Router Funktion haben wir schon gelernt und besprochen.
00:35:51Dann wird das ausgeführt, der Teil wird dann ausgeführt, die zwei Parameter werden übergeben.
00:36:01Wir können da drinnen jetzt das definieren, was im Backend passiert in unserer API.
00:36:08Okay, jetzt haben wir da einen Statuscode, den wollen wir nachher ausliefern.
00:36:20Und den Statuscode auch gleich nach und nach, weil das schaut bei uns jetzt ein bisschen anders aus.
00:36:28Aber ich sehe es sich da noch.
00:36:29Was wir zurückliefern wollen, ist ein JSON mit einem Eindruck, Key is Users.
00:36:40Und dann liest man da alle Benutzernamen auf.
00:36:45Das heißt, wir müssen da drinnen unsere User Collection durchlaufen und alle Usernamen in eine Liste schreiben.
00:37:12Dazu müssen wir im ersten Schritt uns die Daten aus der Collection holen.
00:37:27Das heißt, wir hätten gerne alle Benutzer.
00:37:32Das können wir jetzt Users nennen, denn wir haben den kleinen Referent.
00:37:38Wir haben jetzt unsere Collection Referenz in der Variable Users.
00:37:45Und es gibt jetzt eine Funktion, die heißt Find, da kann man nach Datensätze suchen.
00:37:53Wir hätten gerne alle, also da drinnen kein Argument, wenn wir gerne alle hätten.
00:37:57Und das können wir dann mit ToArray in eine Liste übersetzen.
00:38:04Wir müssen kurz da drinnen fahren.
00:38:08Irgendwo sieht man das dann sehen.
00:38:11Naja.
00:38:15Wird leider nicht angezeigt.
00:38:16Auf alle Fälle, dieses Find, das liefert wieder eine Promise Retour.
00:38:22Das heißt, es dauert ein bisschen.
00:38:25Das heißt, wir müssen da vorne wieder ein bisschen warten.
00:38:29Wenn wir ein bisschen warten, dann müssen wir in unserer Get, also das da ist mehr oder weniger die Callback Function, wo es dann ausgeführt wird, das Ganze.
00:38:40Und die müssen wir dann da vorne wieder mit Asynchron markieren.
00:38:47Asynchronic Callback Function.
00:38:48Da drinnen darf man warten, bis aus Users alle gefunden worden sind und in der Liste übersetzt worden sind.
00:38:54Dann fürs Retournieren machen wir unsere Variable Usernames, eine leere Liste.
00:39:14Das geht sicher kürzer auch, aber wir machen das jetzt einfach so.
00:39:17Und dann laufen wir über alle die User drüber.
00:39:24Da haben wir schon drüber gesprochen.
00:39:28Wir werden dann nicht mit In drüber iterieren, sondern mit Off.
00:39:32Für jeden User aus der Liste gehen wir her und dann in Usernames vom User.
00:39:46Die müssen wir nachschauen.
00:39:51Die ID hinzufügen.
00:39:54Users.
00:39:55User.id.
00:39:57Die fügen wir da ein.
00:40:00Also, wir holen uns alle Benutzer, dann sind sie in eine Liste, machen eine leere Liste.
00:40:07Da geht der Raum über alle drüber und dann die User-ID hinzufügen.
00:40:13Damit wir am Ende unserer Schnittstelle entsprechen, müssen wir das Ganze noch zusammenbauen.
00:40:28Weil wir wollen da ein JSON retour liefern.
00:40:35Javascript Object Notation.
00:40:38Und wir retournieren jetzt ein.
00:40:41Also, Request, zu dem kommen wir bei dem zweiten Mal.
00:40:47Es passt gut heutzutage.
00:40:49Und der Response ist das, was wir zurückliefern zum Benutzen.
00:40:52So, beim Response.
00:40:53Sagen wir, Response, dort JSON, wir werden JSON zurückliefern.
00:41:02Wie soll das JSON-File ausschauen?
00:41:05Und zwar, wir schreiben es da hinein in die geschwungenen Klammern.
00:41:12Für den Schlüssel Users liefern wir die Liste Usernames retour.
00:41:20Also, wir haben hier einen Schlüssel Users und dann in der Liste, bei uns Usernames,
00:41:31und dann sollt ihr dann zurückliefern alle Namen von D.
00:41:46Dann einmal speichern.
00:41:47Bestellung S.
00:41:48So, rechts oben, wir haben slash API und wir haben jetzt eine Route definiert, die heißt Users.
00:42:09Was wird zurückgeliefert?
00:42:14Wir haben zwei Route drin, ein R Schraml und ein Sepp Unterwurzsacher.
00:42:21Also, die Route, die funktioniert jetzt.
00:42:25Wie wir das Ganze dann verwenden in unserem Frontend, das besprechen wir nächste Woche.
00:42:33Aber ich glaube, wir bleiben jetzt einfach konstant bei unserem Backend.
00:42:39Also, die Route ist fertig.
00:42:46Jetzt sollte man auch schon verstehen, wie wir das da oben zusammenbauen können.
00:42:56Und zwar, wir machen das jetzt gleich.
00:43:02Wenn man die Route nur API aufruft, wird bei uns zurückgeliefert, Message API is running.
00:43:13Wir sollten aber zurückliefern, wie heißt die Datenbank, wie viele Nutzer gibt es und wie viele Post gibt es.
00:43:23Das heißt, die Route da oben müssen wir umbauen.
00:43:26Und dazu holen wir uns die Benutzer raus.
00:43:33Dann müssen wir die Funktion da oben aus asynchron markieren, gleich wie unten.
00:43:41Damit wir wissen, wie viele Posts es gibt, machen wir das gleiche für die Posts.
00:44:02Und den Datenbanknamn wissen wir eh schon.
00:44:06So, und jetzt wollen wir am Ende Adjustment zusammenbauen, wo diese drei Sachen zurückgeliefert werden.
00:44:12Wir haben da schon die geschwungenen Klangen.
00:44:14Ich schreibe es ein bisschen schön hier, dass man es schneller lesen kann.
00:44:17Das erste, was wir zurückliefern wollen, ist der Name der Datenbank.
00:44:27DB, Doppelpunkt.
00:44:29Und was liefern wir zurück?
00:44:31Den Wert von der Variable ganz oben.
00:44:34DatabaseName.
00:44:39DatabaseName.
00:44:42Zweiter Wert sind die NumUsers.
00:44:50Da liefern wir zurück die Länge vom Array.
00:45:04Jetzt weiß ich gar nicht, ob das in Javascript Link heißt.
00:45:08Prüfen wir einfach kurz aus.
00:45:10Length.users
00:45:16API is running
00:45:20Da habe ich einen Fehler drinnen.
00:45:24Der Fehler ist, dass das keine Funktion ist, sondern, wir haben es ja damals besprochen,
00:45:30Das ist eine Eigenschaft, die hängt beim Array dran.
00:45:36Users.length
00:45:38Schauen wir noch einmal.
00:45:40Okay.
00:45:42Users.length gibt uns die Länge vom Array.
00:45:46Und das gleiche können wir nachher noch machen für
00:45:48NumPosts.
00:45:58Dann haben wir Posts.Length.
00:46:06Machen wir einen Aufruf.
00:46:08Wir haben zwei Benutzer und einen Post.
00:46:12Und ihr könnt euch schon vorstellen, wo das jetzt hinführt.
00:46:16Wir haben jetzt diese ganzen Routen von der API und können auf Informationen von unserer Datenbank zugreifen.
00:46:22Nicht direkt auf die Datenbank.
00:46:24Wir können das vorverarbeiten und liefern dann Informationen in gefilterter Art und Weise retour.
00:46:32Das letzte, was wir uns noch anschauen, ist, wie man dann ein bisschen Info an die API liefern kann.
00:46:40Also wir haben jetzt schon die Standardroute definiert.
00:46:46Der Status kommt dann nächstes Mal.
00:46:50Wir können uns eine Übersicht für alle Nutzer zurückliefern lassen.
00:46:54Aber jetzt hätten wir gern noch, dass für einen bestimmten Benutzer das Profil retour liefert wird.
00:47:04Also man lockt sich irgendwo ein und dann ist man genau der eine Nutzer.
00:47:08Jeder von euch hat schon mal den URL-Parameter verwendet.
00:47:18Ein URL-Parameter ist, wenn man dann an die URL oben mit Fragezeichen so Query-Parameter anhängt.
00:47:26Wir machen das Ganze über den Pfad von der URL.
00:47:32Das heißt, das, was wir abfragen, bauen wir in die URL mit ein.
00:47:36Das heißt, wir sagen, wenn ein Benutzer slash Users slash die ID vom Benutzer eingibt,
00:47:44dann tun wir den Teil von der URL, den Teil, der nach Users kommt,
00:47:51den verwenden wir zum Suchen nach dem Benutzer.
00:47:54Das ist in Express schon vordefiniert, wie das funktioniert.
00:47:59Und zwar, wir können hier unsere eine Route weiter verwenden.
00:48:07Und zwar können wir sagen, dass der Benutzer da hinten noch etwas drüber hängen kann.
00:48:23Jetzt müssen wir im ersten Schritt ausprobieren, ob die Standardroute noch immer funktioniert,
00:48:33wenn der Benutzer nichts anhängt.
00:48:35Jetzt ist der Endpunkt nicht gefunden worden.
00:48:47Jetzt frage ich mich gerade selber, ob das so funktioniert, wenn nichts dabei ist.
00:48:53Oder ob wir noch etwas Zweites brauchen.
00:49:03Ich glaube, das mit der Mittel wäre gerne weglassen.
00:49:11Okay, dann können wir das so nicht machen, ist nicht tragisch.
00:49:15Aber sonst müssen wir noch ein Konzept mehr besprechen.
00:49:18Da machen wir lieber zwei Funktionen dafür.
00:49:20Jetzt sieht man, das funktioniert nicht mehr, weil nämlich die Route da noch nach dem Slash auf irgendwas wird.
00:49:31Das löschen wir raus, das funktioniert nicht.
00:49:35Das heißt, wir machen uns eine zweite Route.
00:49:38Jetzt könnt ihr einfach die komplett einmal kopieren.
00:49:41So, und die zweite Route ist dafür zuständig, dass wir noch gezielt eine Nutzer suchen.
00:49:53Slash Users Doppelpunkt ID.
00:49:59Das Doppelpunkt ist nötig, damit Express weiß, das ist ein URL-Parameter, den wir weiterverwenden können.
00:50:07So, wie kann man den auslesen in Express?
00:50:13Wir gehen da her und sagen, dass die ID aus dem Pfad ist vom Request Punkt Params kann man das nennen.
00:50:33Also alles, was mit dem Doppelpunkt angeht, wird dann da aus unter Params abgespeichert.
00:50:37Und dann kann man über den Namen darauf zugreifen.
00:50:41Das heißt, wenn da oben Slash noch was kommt, wird das aus ID interpretiert, in die Params drinnen aus ID abgelegt.
00:50:51Und wir können das verwenden, dass wir darauf zugreifen.
00:50:55Jetzt wollen wir noch genauer den einen Nutzer suchen.
00:51:03Wir wollen, wenn wir alle Nutzer haben, wenn wir alle User nehmen.
00:51:09Wir wollen den User mit, wenn wir alle durchlaufen, einen Nutzer suchen und zurückliefern, nenne ich es jetzt.
00:51:35Also, users.find steht bei uns.
00:51:37Wir wollen aber genau 1 finden.
00:51:39Einen Datensatz.
00:51:41Find 1
00:51:43Was das bei MongoDB
00:51:45Was das bei MongoDB
00:51:49Welchen werden wir finden?
00:51:51Das übergibt man dann aus JSON, denn mit der ID, die wir uns oben in der Variable gemerkt haben.
00:52:01Das war jetzt zufällig halt genau gleich.
00:52:05Bei der Datenbank steht ID und wir konnten es jetzt einfach User ID nennen.
00:52:11Dann war es ein bisschen klarer.
00:52:13ID ist die User ID.
00:52:17Find 1
00:52:19Und das Ganze brauchen wir nicht in eine Array übersetzen, weil das ist genau ein Eintrag.
00:52:31Dann gehen wir her und liefern den Studenten zurück.
00:52:41Also, das ist dann der User.
00:52:45Wir brauchen nicht drüberlaufen über das Ganze.
00:52:49Und jetzt probieren wir einfach einmal, dass wir uns den JSON
00:52:57Und dann schauen wir, was passiert, wenn wir den Nutzer einfach retour liefern.
00:53:05Also, eine Nutzer suchen und zurückliefern.
00:53:09Und dann schauen wir nochmal, was in der Schnittstür steht.
00:53:13Slash users
00:53:15Slash
00:53:17r
00:53:19Schraml
00:53:21Okay, da kommt ein JSON retour.
00:53:23Dann sieht man,
00:53:25dass
00:53:27da die ID
00:53:29hinzugefügt wird.
00:53:31Die kommt außer aus der Datenbank.
00:53:33Die hätte ich gerne, dass eigentlich nicht dabei ist.
00:53:36Dann die ID, die wir wissen wollen.
00:53:38Der Name.
00:53:39Dann welcher Büdel und wen ich folge.
00:53:43Prinzipiell funktioniert es, das Filtern.
00:53:50Aber wir wollen, dass
00:53:54diese ID da oben
00:53:56nicht dabei ist.
00:53:58Das heißt, wir müssen das ein bisschen spezifizieren, was wir zurückliefern.
00:54:02Damit das ein bisschen schneller geht und
00:54:09damit sich da
00:54:10ein nice JSON zusammenbauen wollen,
00:54:12gibt es eine Funktion, damit wir
00:54:14eine Key-Value-Bar wegnehmen können.
00:54:16Wir wollen ja alle anderen ausliefern, außer das
00:54:19underscore ID.
00:54:20Das heißt, bevor wir das ausliefern, gehen wir her und sagen wir
00:54:26user.push
00:54:28wollen wir was hinzufügen.
00:54:30Und ich hätte gerne, dass wir
00:54:32das underscore ID
00:54:34wegnehmen können.
00:54:36Ich nehme mal kurz aus.
00:54:38Ich nehme mal einen Fehler.
00:54:40Schauen wir mal kurz nach.
00:54:42Mein Fehler, also
00:54:50Bob war leider falsch.
00:54:52Da gibt es einen Fehler.
00:54:54Das Ganze macht man über
00:54:56delete user und dann gibt man den Schlüssel an, den man gerne entfernen würde.
00:55:04Delete.
00:55:05Wir hätten gerne das, dass das underscore ID nicht mehr mit zurückgeliefert wird.
00:55:11Den Schlüssel löschen wir.
00:55:13Jetzt probieren wir die Route nochmal aus.
00:55:17Und dann sehen wir, wir kriegen alles zurückgeliefert.
00:55:19Außer das underscore ID werden wir das vorher wegnehmen.
00:55:30Okay.
00:55:31In unserer Beschreibung ist das mit dem 404.
00:55:34Das liefern wir nachher nächstes mal noch zurück.
00:55:36Ein bisschen erweitern.
00:55:39Postroute, ich glaube das passt auch gut, wenn wir nächste Woche machen.
00:55:46Und da haben wir dann eh eineinhalb Stunden Zeit.
00:55:48Und updaten.
00:55:52So, vielleicht geht die Seite noch.
00:56:01User ID nehmen.
00:56:04Posts mapping to the re.
00:56:20Das kommt man noch schnell machen.
00:56:23Die Get-Routen haben wir jetzt eh schon drei mehr oder weniger gemacht.
00:56:29Jetzt schauen wir so das Get-User aus.
00:56:31Und zu dem User hätten wir gerne die Posts.
00:56:35Das heißt, wir können eigentlich da oben unsere Route mit dem URL-Parameter weiterverwenden.
00:56:41Die kopieren wir uns.
00:56:47Und wenn noch aus Erweiterung slash Feed eingeben wird,
00:56:53dann suchen wir zuerst den Nutzer raus.
00:57:00Das ist ja für uns praktisch, oder?
00:57:02Weil dann haben wir gleich den Benutzer.
00:57:05Und dann hätten wir gern von dem Benutzer die Posts.
00:57:15In dem Format.
00:57:19Und zwar Posts.
00:57:25Chasen-File mit Posts.
00:57:27Das können wir da unten gleich zusammenbauen anfangen.
00:57:29Was wird am Ende zurückgeliefert?
00:57:35Das oben bauen wir erst nachher an.
00:57:39Wir liefern zurück ein Chasen.
00:57:41Immer mit die geschwungenen Klammern.
00:57:43Der Key ist Posts.
00:57:55Doppelpunkt.
00:57:57Und dann bauen wir eine Liste zusammen.
00:58:01Und jeder Eintrag ist zuerst einmal der Nutzer selber.
00:58:07Und dann sein Post.
00:58:15Da ist jetzt ein bisschen ein Fehler.
00:58:19Get the Users Field.
00:58:23This includes Posts from all users.
00:58:27They are following as well as they are on.
00:58:33Das dauert ein bisschen länger.
00:58:35Das machen wir dann nächste Woche.
00:58:37Das lassen wir jetzt einfach einmal so stehen.
00:58:41Und das glaube ich ist auch ein netter Punkt.
00:58:43Wo wir dann nächste Woche noch einmal ein bisschen einsteigen können.
00:58:47Weil wir dann sortieren müssen.
00:58:49Und wir müssen auch schauen.
00:58:52Was sind die eigenen Posts.
00:58:54Und was sind die Posts von dem, was derjenige folgt.
00:58:59Und dann bauen wir nächste Woche diesmal mit den Fehlercodes ein.
00:59:03Wenn der Benutzer nicht existiert.
00:59:05Mal schauen mal kurz, ob alles noch funktioniert von der App.
00:59:11Was wir bis jetzt gemacht haben.
00:59:13SlipShift by Users.
00:59:19Das funktioniert immer noch.
00:59:21Das heißt, wir können das einfach so lassen.
00:59:23Zu guter Letzt.
00:59:27Wie ich quasi angekündigt habe.
00:59:29Ich hätte gern das.
00:59:31Wenn ihr das Video geschaut habt.
00:59:33Und diese Schritte mit programmiert habt.
00:59:35Wir haben jetzt da circa eine Stunde aufgewendet.
00:59:39Mit ein paar Fehler natürlich dabei.
00:59:41Fehler natürlich dabei.
00:59:43Dass ihr das Ganze am Ende commitet.
00:59:49Und zwar Video Tutorial gesehen und mit programmiert.
01:00:03Das ist die Nachricht.
01:00:05Und dann hätte ich gern, dass ihr das Ganze ins Repository pusht.
01:00:27Damit ich sehe, ob ihr das gemacht habt.
01:00:31Schaut dann für mich so aus.
01:00:35Vielleicht für euch zur Info.
01:00:37Classroom.
01:00:39Dann sehe ich hier euer Studium.
01:00:47Der Rudolf Schraml hat letztes Commit.
01:00:55Dann ein Commit.
01:00:57Und ich kann mir dann anschauen, was hat der Rudi Schraml gemacht.
01:01:01Er hat das Committed.
01:01:03Was hat er selber eingeprogrammiert.
01:01:07Genau.
01:01:09Dann sehe ich euch schnell, was ich gemacht habe und was nicht.
01:01:15Ich hoffe, das Video ist ansehbar.
01:01:19Also es ist einfach mit aufgezeichnet.
01:01:21Und hier und da unterbrochen.
01:01:23Und wenn ich was nicht gleich gewusst habe.
01:01:25Und dann wieder weitergemacht.
01:01:27Aber ich glaube, zu einem Mitmachen.
01:01:29Sollt es auf alle Fälle reichen.
01:01:31Müllzeichen bei Problemen.
01:01:33Wir haben noch mehr zweimal.
01:01:35Ich hoffe, ihr könnt da etwas mitnehmen.
01:01:37Wie so eine Applikation aufgebaut ist.
01:01:39Was Routen sind.
01:01:41Wie man auf eine Datenbank zugreift.
01:01:43Das hilft dann einfach, dass man, wenn man was mit einer KI generiert.
01:01:53Und das tun wir mittlerweile.
01:01:55Dass man das dann lesen kann.
01:01:57Und vielleicht dort über das Aussehen, dass man selber etwas erstellen kann.
01:02:01Genau.
01:02:03Das ist das Ziel.
01:02:05Ich mag die Datenbrauch.
01:02:07Das ist die Angelegenheit.
01:02:09Wie geht es eigentlich?
01:02:11Ich war es richtig.
Recommended
0:54
|
Up next
40:16
1:07:43
36:22
0:46
2:11
11:13
1:00
2:50