Spring Boot Campus: Vom Anfänger zum Full-Stack-Experten

Das Ziel dieses Abschnitts ist, die Arbeit vorzubereiten.  Neben einer Grundlage für die kommenden Abschnitte des Kurses zeige ich dir auch, wie du an ein neues Projekt herangehst.

In dieser Lektion zeige ich dir, wie du ein neues Projekt in Eclipse einrichtest und auch mit GIT verbindest. GIT hilft dir, eine Kontrolle über dein Projekt zu behalten. Es kann dir auch als Einzelperson helfen, wenn du beispielsweise nachschlagen willst, wie ein Projekt früher ausgesehen hat. Gerade bei der Arbeit in einem Team ist GIT jedoch unverzichtbar, da es vor allem dabei hilft, dass andere deine Änderungen nicht einfach so unbemerkt überschreiben dürfen.

Zur Planung eines Projektes sollte man sich zuerst Gedanken darüber machen, was man eigentlich erreichen will. Unsere Kursidee ist dabei denkbar einfach: Wir wollen eine App für TODOs bauen.

Die Idee habe ich aus einem simplen Grund gewählt: Solche Apps gibt es tatsächlich wie "Sand am Meer". Sei es eine Einkaufsliste oder auch Aufgaben und Erinnerungen, die du in einem Kalender pflegen kannst. Jeder kennt eine oder mehrere Varianten solcher TODO-Apps. Ich bin mir sicher, dass du dir auch sehr schnell etwas darunter vorstellen kannst und so kann ich mich als Dozent auf die Spring Boot Inhalte konzentrieren und du lernst über diesen Fokus deutlich leichter, was wir da im Kurs machen.

Die Strukturierung einer Idee kann über eine Mindmap erfolgen. Was das ist und wie du sie aufbaust, erkläre ich dir hier ganz konkret am Beispiel.

Ich präsentiere dir das Ergebnis der sogenannten Mindmap. Gleiche es gerne mit deiner Idee ab und überlege gemeinsam mit mir, was wir beide jeweils übersehen haben.

Es gibt hier kein "richtig" und "falsch". Wenn du in deiner Mindmap ein anderes Ergebnis hast, kann dies ebenfalls gut sein. Wenn ich etwas übersehen habe, an was du gedacht hast, kannst du auch während dem Kurs oder im Anschluss deine Ideen einbringen und sie als weitere Übungen betrachten.

Hier möchte ich dir einen Einblick in moderne Software-Entwicklung geben. Auch hier kann ich das Thema nur sehr oberflächlich ansprechen. Die Lektion ersetzt keinen vollwertigen Scrum-/Agile-Kurs. Ich erkläre dir hier, warum agile Methoden sinnvoll sind und was ihr Vorteil ist.

Der Kurs wird angelehnt an agiler Methodik oder Scrum aufgebaut sein. Das heißt: Ich erkläre dir zu Beginn eines Abschnitts, worum es geht. Ggf. gibt es Theorie-Lektionen und eine Aufgabenplanung. Am Ende des Abschnitts steht eine "auslieferbare" Version unserer Todo-App.

Nun wird es sehr konkret. Wir legen sowohl ein leeres Spring-Boot-Projekt an als auch über NPM ein Frontend in React.

Diese Lektion ist optional. Als Alternative eines völlig leeren Projektes gibt es auch die Möglichkeit, sich über "Spring Initializr" ein Projekt vorbereiten zu lassen. Du kannst dort aus dem Umfeld von Spring Boot verschiedenste Module wählen.

Diese Lektion ist optional. Im Kurs werden wir Maven als Build-Tool verwenden. Es gibt eine ebenfalls weit verbreitete Alternative: Gradle.

Das Ziel dieses Abschnitts sind die ersten Schritte in Spring Boot. Wir schreiben unsere ersten Controller und schauen uns das Ergebnis in unserer App an.

bei einem "Hello-World" handelt es sich um etwas sehr einfaches: Das Programm soll "Hello-World" ausgeben und so die Welt begrüßen. Das war es auch schon.

Auch in Spring Boot lässt sich so etwas erstellen. Mit ganz wenigen Code-Zeilen kannst du sehr schnell eine solch simple Anwendung schreiben und einen Webserver starten, der dann eine Seite mit dem "Hello-World" ausgibt.

Im WWW gibt es nicht nur Text, der hin- und hergeschickt wird. Es gibt HTML. Es gibt Bilder und Videos. Es gibt vor allem im von uns betrachteten REST-Umfeld das JSON-Format. Hier lernst du, wie du mit all diesen Dingen umgehst.

In dieser Lektion beginnen wir mit der react-Anwendung, um dann auch später eine Webseite zu haben, die als Frontend unserer Spring-Boot Anwendung dient.

Hier bringen wir nun beides zusammen, was zusammen gehört: Die react-Anwendung kommuniziert mit dem Spring Boot Server und zeigt an, was wir zuvor als "Hello-World" geschrieben haben. Dabei lernst du auch etwas sehr Wichtiges für die Web-Entwicklung: Was ist CORS und wie konfiguriert man so etwas?

Um unser Frontend später gut zu nutzen, muss man jedoch stets mehr als nur eine Seite einbauen. Wir brauchen später beispielsweise einen Admin-Bereich und einen Benutzer-Bereich. Hier lernst du, was ein Router in react macht und wie man mehr als eine Seite umsetzt.

Bevor wir uns wieder dem Backend widmen, zeige ich dir noch die Integration von Bootstrap als ordentliche Basis für das Design unserer App. Dies rundet unsere ersten Gangversuche ab.

In diesem Abschnitt geht es um REST. Was ist das und wieso braucht es sinnvolle Konventionen für die Kommunikation zwischen Frontend und Backend?

In dieser Lektion zeige ich dir wertvolle Grundlagen zu REST: Bevor wir uns wieder in die Arbeit stürzen, müssen wir verstehen, worauf es ankommt. So lernst du, was auch andere von dir erwarten, wenn sie von einer REST-API reden.

In der Anwendung gehen wir am Besten chronologisch vor und ideal ist dabei ein einfacher Login. Denn alles, was wir machen, wie beispielsweise das Anlegen eine TODO-Eintrags, braucht später immer einen angemeldeten Benutzer. Es gibt einfach nichts ohne diesen Login.

Postman ist ein wertvolles Tool, um ohne Frontend sehr gezielt die REST-API und damit das Backend zu testen. Obgleich es kein Bestandteil von Spring Boot ist, gehört es für mich stets zum Umfeld der Web-Entwicklung als Tool mit dazu.

Eine Testautomation ist unabdingbar in der professionellen Softwareentwicklung. Anwendungen sind heutzutage oft so komplex, dass man auch bei kleinen Änderungen nie sicher sein kann, dass alles wie vorher funktioniert. Zudem ist es einfach zeitraubend (und nervig) stets alles manuell zu testen. Ich zeige dir von Anfang an, wie du in Spring Boot eine Testautomation aufbaust.

Bisher wurden Benutzername und Passwort direkt im Java-Code geschrieben. Das ist natürlich wenig flexibel und in der Praxis kaum verwendbar. Mit dieser Lektion zeige ich dir anhand der Benutzerdaten, wie man sie in Konfigurationsdateien auslagert. Damit lernst du ein wichtiges Grundprinzip in Spring Boot.

Nun geht es wieder ins Frontend. Passend zum Login-Service des Backend wird nun ein einfaches Login-Formular aufgebaut.

Auch im Broser solltest du wissen, wie man einen Debugger bedient. Denn auch der Javascript-Code lässt sich debuggen. Ich zeige dir, welche Optionen du verwenden kannst und wie du den Datenverkehr zwischen Frontend und Backend anschauen kannst.

Zum Abrunden des Abschnitts erfährst du nun, wie man eine sogenannte openAPI-Dokumentation schreibt.

OpenAPI ist dabei zweierlei: Einmal beschreibt es die Schnittstellen, die unsere Spring-Boot-App anbietet. Sie dient also tatsächlich zur Dokumentation und als Nachschlagewerk für dich und andere. Darüber hinaus gibt es mächtige Generatoren, die uns helfen, sowohl für Spring Boot als auch für React bzw. Javascript Code zu schreiben, mit denen wir dann die ganzen Datenklassen und Service-Schnittstellen direkt verwenden können.

Bisher haben wir noch keine echte Dynamik in unsere Logins eingebaut. Wir mussten stets auf Java-Code oder eine Konfigurationsdatei zurückgreifen, können auch keine neuen Benutzer registrieren usw.

Mit der Anbindung einer Datenbank können wir nun auch eine Registrierung umsetzen. In diesem Abschnitt erkläre ich dir ausführlich, wie das geht und wie (schnell) du das in Spring Boot umsetzen kannst.

Bevor du dir die Praxis anschaust, solltest du zunächst Wissen aufbauen. Was sind Datenbanken und wieso sind sie besser geeignet als Dateien? Wann verwendet man Dateien zur Speicherung von Informationen und wann Datenbanken?

Eines der wichtigsten Konzepte von Spring Boot im Bereich der Datenbanken ist ORM. In dieser Lektion erfährst du, was dies ist und was die Vorteile oder auch die Nachteile beim Nutzen solcher Systeme ist.

Eine ganz einfache Datenbank für unsere Spring-Boot-Anwendung ist H2. Wir nutzen sie im Speicher. Das heißt: Du brauchst keine extra Software.

Ich zeige dir, wie du sie in das Spring-Boot Projekt integrierst und wie du sie im Browser aufrufst, um dort "reinzuschauen".

Nun werden wir konkret und legen eine Benutzer-Entität (=Tabelle) an.

Bevor es weitergeht, gebe ich dir einige theoretische Grundlagen, was die Abkürzung "CRUD" bedeutet und was technisch gesehen dahinter steckt.

In dieser Lektion lernst du etwas über die Architektur einer Anwendung. Wir schreiben hier einen ersten Service und lernen etwas über "Beans" und ein weiteres Grundkonzept in Spring: Die Dependency-Injection. Auch wenn du hier vielleicht nicht sofort verstehst, warum die Trennung zwischen Controllern und Services sinnvoll ist: Im Laufe des Kurses wird es immer klarer werden.

Hier lernst du nun einen ersten vollständigen REST-Controller anzulegen.

Wir sollten nie die Testautomation vernachlässigen. Daher gibt es direkt diese Lektion, um den neu erstellten Rest-Controller auch ausführlich und automatisiert zu testen.

Ich zeige dir hier, wie unser neuer REST-Controller auch mit Hilfe von Postman und der H2-Konsole getestet werden kann. Du siehst, was passiert und kannst an dieser Stelle auch etwas selbstständig experimentieren, um ein besseres Gefühl für die Datenbank und die Controller zu bekommen.

Beim Umsetzen unserer Controller haben wir nun ein Sicherheitsproblem eingebaut: An allen Stellen wird das Passwort zurückgegeben. Das ist ein echtes Problem und so etwas sollte dir NIE passieren. Hier lernst du theoretische Grundlagen, warum das ein Problem ist.

In dieser Lektion lösen wir das Passwort-Problem mit Hilfe von sogenannten "data transfer objects". Ich zeige dir die Arbeitsschritte hierfür.

Um ein weiteres Sicherheitsproblem zu schließen, werden wir in dieser Lektion etwas über Passwort-Verschlüsselung lernen. Ich zeige dir anhand von einfachen Beispielen, wie Hacker arbeiten (können).

Bisher wurden die Benutzer zwar in der Datenbank angelegt, aber noch nicht für den Login berücksichtigt. In dieser Lektion ändern wir dies.

Nach diesen intensiven Arbeitsschritten im Backend sind wir nun bereit, die Administrationsoberfläche für Benutzer zu schreiben.

Natürlich muss sich ein Benutzer auch registrieren können. Ein solches Registrierungsformular erstellen wir nun in dieser Lektion.

Um diesen Abschnitt abzurunden zeige ich dir ganz wichtige Grundlagen zur Validierung. Die Regel "Never trust the client" muss dir wirklich ins Blut übergehen. Das gilt IMMER und ÜBERALL. Wann immer du also Schnittstellen anbietest in einer Software, denke stets darüber nach, wie du eine sinnvolle Validierung hinbekommst.

Du hast im Kurs bereits mit Postman gesehen, wie leicht die Manipulation ist. Sei also nie sicher, dass es nur die React-App ist, die mit deinem Backend kommuniziert. Das kann auch ein Hacker mit irgendeiner anderen Software sein...

Bevor wir die Anwendung nun wirklich absichern und unser Login auch wirklich etwas schützt, gehen wir noch einen Schritt zurück. Es gibt nämlich eine entscheidende Frage: Woher kommt eigentlich der erste Administrator? Was macht ihn zum Administrator und wie richten wir das ein?

Der sogenannte "Lebenszyklus" beschriebt, wie sich unsere Software verhalten wird. An der Frage "Woher kommt der erste Admin" erkläre ich dir gängige Umgebungen, in die unsere Software später integriert sein wird und welche Herausforderungen auf uns warten.

Vielleicht kennst du es schon von anderen Software-Produkten. Ganz sicher kennst du es von der Installation diverser Programme auf deinem Gerät. Entweder gibt es direkt in der Installation oder direkt mit dem ersten Start eine Art "Willkommens-Seite". Dort kannst du erst einmal grundlegende Dinge einrichten. In unserem Beispiel nutzen wir dieses Konzept, um unseren ersten Administrator einzurichten. Hier lernst du, was dahinter steckt.

Es wird wider praktisch: Ich zeige dir, wie du solch einen Installationsmodus umsetzt und was das für eine REST-API bedeutet.

Wir wechseln ins Frontend und fragen nun den Installationsstatus ab.

Die Webseite muss nun auch die Installation umsetzen. Dafür brauchen wir einen REST-Endpunkt.

Wir runden das alles nun ab und schreiben ein Installationsformular in der React-Anwendung.

Ich zeige dir in dieser Lektion, wie du dies in Postman testen kannst.

Natürlich wollen wir die Testautomation nicht vernachlässigen. Daher schreiben wir weitere Tests.

Eine zweite Variante ist die Installation via Konfigurationsvariablen. Was dahinter steckt und was tatsächlich neu ist, zeige ich dir in diesem Theorie-Teil.

Um die Installation aus der Konfiguration zu ermöglichen, schreiben wir einen passenden Service.

Diese Lektion rundet die Konfigurations-Variante ab. Wann immer wir Konfigurationsvariablen einführen, wollen wir auch ermöglichen, dass beispielsweise ein Admin diese mit sinnvollen Werten füllt. Es gibt hierzu einige Vorgehensweisen, die on der Praxis oft eingesetzt werden.

Auch die Variante B wird wieder mit automatisierten Tests komplettiert.

Doch was bedeuten beide Varianten eigentlich? Hier erlernst du im direkten Vergleich die Unterschiede, Vor- und Nachteile.

In dieser Lektion komme ich nun zu der einfachen Frage: Was passiert, wenn wir beide Varianten kombinieren?

In Spring Boot wirst du das oft finden. Verschiedene Varianten werden kombiniert und es lässt sich in der Konfiguration frei entscheiden, was man nutzen möchte. Will man eine Installationsseite haben oder doch lieber die Installation via Konfiguration?

Mit wenigen Handgriffen passen wir hier nun das Backend an, so dass es zielsicher beide Varianten unterstützt und später die Wahlfreiheit liefert, welche man nutzen möchte.

In diesem Abschnitt werden wir uns nun endlich um die Absicherung der App kümmern. Damit z.B. der Administrationsbereich wirklich nur von Admins genutzt werden kann.

Diese Theorie-Lektion ist sehr wichtig. Ich erkläre dir, was "spring security" ist und wie es uns hilft, die Anwendung abzusichern. Du lernst wichtige Grundlagen zu Filtern und einigem mehr.

Wir schreiben hier wieder Code. Ich zeige dir eine einfache Konfiguration für Spring security. Anhand von einfachen Regeln soll unsere App später alles absichern.

Bevor wir weiter machen, testen wir das alles schon einmal via Postman.

Da wir bisher unsere Tests ohne jeden echten Login vollzogen haben, müssen wir sie in diesem Schritt auf die neue Situation anpassen.

Es gibt mehrere Wege, Endpunkte abzusichern. Hier erlernst du weitere wichtige Mechanismen. Zudem passen wir das Backend und das Frontend nun vollständig an und sichern alle Endpunkte ab.

Auch diese neuen Varianten unterziehen wir einem Test in Postman.

Zum Abrunden dieses Abschnitts passen wir wieder die JUnit-Tests an.

Dieser Abschnitt ist durchaus optional und kann von dir übersprungen werden. Früher nutzte man sehr gerne sogenannte Sessions, um Benutzer wiederzuerkennen. Aus verschiedenen gründen ist dies heutzutage nicht mehr so oft im Einsatz. Zur Vollständigkeit eines Spring-Boot Kurses gehört aber, dass du auch diese Variante einmal kennengelernt hast.

Hier stelle ich für dich einmal die Vor- und Nachteile von "stateless" und "stateful" Servidces gegeneinander. Also von einer Nutzung der HTTP-Sessions und einem Weglassen der Sessions.

In dieser Lektion wird es wieder praktisch. Ich zeige dir, was wir am Code anpassen müssen, um Sessions zu nutzen.

Wir testen die Sessions mit Postman.

Und auch hier zeige ich dir wieder eine Testautomation.

Zu einem vollständigen Beispiel gehört auch ein Logout. Ich zeige dir, wie du ihn bei Sessions umsetzt.

Auch den Logout können wir wieder via Postman testen.

Und zum Abrunden werden wir auch zum Logout wieder automatisierte Tests schreiben.

Auf der Suche nach einem sinnvollen und vor allem (so gut es geht) fälschungssicheren Login-Mechanismus wurde der JWT-Standard entwickelt. Was das ist und wie du damit umgehst, zeige ich dir in diesem Abschnitt.

Auch hier benötigst du wieder einige Grundlagen. Ich zeige dir, was JWT ist und wie du es für dich verwenden kannst.

In dieser Lektion geht es wieder an den Code: Du lernst, wie du ein solches JWT-Token generieren kannst und wie du es beim Login einbauen kannst.

Damit dass JWT-Token auch tatsächlich berücksichtigt wird, müssen wir auch die Spring-Security-Konfiguration bzw. unseren eigenen Filter anpassen. Lerne, wie das geht.

Mit Postman können wir nun wieder etwas genauer darauf schauen, was in unserer API passiert und wie die Tokens aussehen.

Hier zeige ich dir nun die Stärken unserer Test-Automation. Wir entdecken die Fehler, die durch unseren Umbau entstanden sind. Einerseits hatten wir an einer Stelle sehr gezielt ausgenutzt, dass man den Login leicht fälschen kann. Unser Testfall hatte also eine Sicherheitslücke ausgenutzt und dies kann er nicht mehr. Andererseits müssen wir nun etwas aufwändiger die eigentlichen Logins testen, da wir beim Token nicht mehr so leicht an die Information kommen, wer da nun eingeloggt ist.

In diesem Abschnitt kommen wir nun zu den eigentlichen Inhalten unserer TODO-App. Du hast bis hier hin genug Grundlagen erlernt, dass wir uns nun auf alles jenseits der Benutzer und Logins konzentrieren können.

Bevor es an die Umsetzung geht, wollen wir aber gemäß agilem Vorgehen erst noch einmal genauer schauen, was wir da eigentlich umsetzen wollen.

Ein weiteres Konzept, was ich dir sehr ans Herz lege: TDD (=test driven development). Auch wenn dies nicht direkt mit Spring Boot zu tun hat, ist es eine gute Praxis. Warum es Vorteile bietet, so vorzugehen, erfährst du in dieser Lektion.

Als Grundlage für unsere App entwerfen wir zuerst die OpenAPI. Sie ist ein guter Moment, sich über die technischen Details im Klaren zu werden, sie zu beschreiben und auch für die Tests genau darauf aufzubauen.

Weitere Hilfsklassen zu haben, ist immer eine gute Idee. In Tests brauchen wir immer auch sinnvolle Testdaten, daher sind sie für mich stets der erste Einstieg in die Entwicklung der eigentlichen Testfälle.

Wir schreiben nun die eigentlichen Tests. Wohl wissend, dass da noch nichts ist, was wir aufrufen können. Wir wissen also bereits, dass die Tests fehleschlagen werden. Das ist aber gewollt.

Ich gehe gerne in zwei Schritten vor:

1. Erst einmal alle Tests als Gerüst entwerfen und beispielsweise mit JavaDoc beschreiben. Ggf. auch bereits Testdaten entwerfen. Die Tests bekommen bis dahin lediglich ein "fail" in ihrer Implementierung, damit sie rot werden beim Ausführen.

2. Nun nach und nach die Testfälle mit echtem Code befüllen und so darauf vorbereiten, dass wir in der Folge das Backend schreiben.

Nun sorgen wir dafür, dass die Testfälle grün werden: Wir schreiben die Backend-Implementierung zu den TODO-Listen und Kommentaren.

Wir brauchen auch hier wieder Tabellen in der Datenbank, um unsere Einträge und Kommentare abzuspeichern.

Nun schreiben wir die eigentliche Logik in Form von Services.

Mit einer gewissen Grund-Naivität haben wir einen Testfall geschrieben, der einfach nicht grün werden will. Obwohl wir eigentlich nicht verkehrt gemacht haben. Oder etwa doch? Lerne die Hintergründe zu dem, was wir da geschrieben haben und wie Spring JPA "tickt".

Wenn du bereits Erfahrung mit Datenbank-Systemen hast, dürfte dir der Begriff der "Kaskaden-Operationen" bereits bekannt sein. Schaue dir an, was es damit auf sich hat, wie man das in Spring Boot formuliert und wie es uns bei unserem Problem hilft.

Wir sind nun fertig mit unserer Entwicklung und können alles abschließen. Die Testfälle sind grün und alles funktioniert nun so wie erwartet.

Bei der Frontend-Umsetzung beginnen wir mit dem Benutzer-Dashboard. Wir zeigen für den Benutzer die wichtigsten Informationen in Form von Tabellen und Graphen an.

Als nächstes bauen wir Seiten für die eigentliche TODO-Liste ein. Wir spendieren dem ganzen auch einen HTML-fähigen Editor.

In dieser Lektion komplettieren wir die App mit den Seiten für die Kommentare.

Was für den Benutzer möglich ist, muss auch für den Administrator möglich sein. Er erhält ebenfalls alle Seiten, um die TODO-Einträge und Kommentare zu administrieren.

Bisher hatten wir einen Spezialfall ausgelassen. Wir haben uns in der Planung einen Button gewünscht, um einen TODO-Eintrag auch schnell erledigen zu können. Dies ist wie geschaffen für einen weiteren Typ von Endpunkten: Den PATCH-Endpunkten. Was das ist und wie du das in Backend und Frontend umsetzen kannst, zeige ich dir in dieser Lektion.