In dieser Vorlesung werden wir die Inhalte vorstellen, die wir in der folgenden Lehrveranstaltung durchführen werden.
Wir möchten mit euch zusammen eine Web-Applikation entwerfen und anschließend werdet ihr eure eigenen Server schreiben.
Für das Backend werden wir Java/SpringBoot verwenden und im Frontend TypeScript/React einsetzen.
Die Inhalte von meinem Kollegen Stephan Strehler: https://stephanstrehler.de/courseCatalog
Ablauf der Lehrveranstaltung
- Einführung/Vorstellung
- Web-Frontend als UI
- Grundaufbau von Serveranwendungen
- Vorstellung TypeScript/React
- Domain Driven Design
- Vorstellung Belegthema
- UI Studie
- Docker als Infrastruktur
Benötigte Tools installieren
Zuerst müssen wir eine Reihe von Werkzeugen installieren, sofern ihr diese nicht schon aufgesetzt habt.
Git
Freies Opensource Programm zur Versionskontrolle von Dateien.
Versionskontrolle
- Mit mehreren Entwicklern an denselben Dateien Arbeiten
- Verwaltung von verschiedenen Entwicklungsständen
Gradle
Build-Werkzeug für Java-Projekte
NPM
Build-Werkzeug für JavaScript-Anwendungen
Zur Installation nutzen wir den Node Version Manager(nvm):
Installation Windows
- Herunterladen: https://github.com/coreybutler/nvm-windows/releases
- Installieren
- In der Kommandozeile mittels
nvm install 14.15.0
npm installieren
Installation Linux
- Herunterladen: https://github.com/nvm-sh/nvm
- Installieren
- In der Kommandozeile mittels
nvm install 14.15.0
npm installieren
IntelliJ Ultimate / Webstorm
Für die Lehrveranstaltung wird IntelliJ Ultimate vor allem für die TypeScript-Entwicklung benötigt.
Docker Desktop
- Installieren nach https://docs.docker.com/get-docker
Hier gibt es noch ein Problem mit der Installation unter Windows
Java
Wir werden für die Vorlesung vorrangig Version 17.0.2 verwenden. Neuere Versionen könnten auch funktionieren.
- Herunterladen Java 17.0.2 unter: https://jdk.java.net/archive/
- Entpacken
- Nach dem Entpacken den /bin Ordner in die Umgebungsvariable
PATH
hinzufügen - Nach dem Entpacken / Ordner als Umgebungsvariable
JAVA_HOME
setzen
Aufbau von Webanwendungen
Single Page Application
- man muss die Seite nicht neu laden
- kleine HTML Seite vom Server + CSS und JS
- JS rendert dynamisch den DOM
- Vorstellung der Technologien
- Java, Kotlin, TypeScript, JavaScript
- Programmiersprachen
- SpringBoot:
- Anwendungsframework (HttpServer, Dependency Injection, Datenbank-Kommunikation)
- NodeJS
- JavaScript V8 Runtime
- React
- funktionale WebKomponenten
Todo-List-Anwendung
In dieser und den folgenden Vorlesungen werden wir eine Todo-List Anwendung erstellen.
Dazu gibt es schon die folgenden Repositories:
Backend: https://github.com/klg71/java_springboot_blueprint
Frontend: https://github.com/klg71/typescript_react_blueprint
Dort ist auf dem master
-Branch nur die Grundkonfiguration eingepflegt.
Wenn ihr die komplette Anwendung sehen möchtet, müsst ihr den rest-interface
Branch im Backend und im Frontend ausschecken.
Darüber hinaus gibt es im Frontend noch den ui-components
Branch wo ihr verschiedene UI-Komponenten betrachten könnt.
Verfügbare Projekte
Zur Übung werden wir im Laufe der Veranstaltung in Gruppen eine Web-Applikation entwickeln.
Dafür haben wir folgende Beispiele vorbereitet.