1 - Kurseinführung

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

  1. Einführung/Vorstellung
  2. Web-Frontend als UI
  3. Grundaufbau von Serveranwendungen
  4. Vorstellung TypeScript/React
  5. Domain Driven Design
  6. Vorstellung Belegthema
  7. UI Studie
  8. 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.

https://git-scm.com/

Versionskontrolle

  • Mit mehreren Entwicklern an denselben Dateien Arbeiten
  • Verwaltung von verschiedenen Entwicklungsständen

Gradle

Build-Werkzeug für Java-Projekte

https://gradle.org/install/

NPM

Build-Werkzeug für JavaScript-Anwendungen
Zur Installation nutzen wir den Node Version Manager(nvm):

Installation Windows

  1. Herunterladen: https://github.com/coreybutler/nvm-windows/releases
  2. Installieren
  3. In der Kommandozeile mittels nvm install 14.15.0 npm installieren

Installation Linux

  1. Herunterladen: https://github.com/nvm-sh/nvm
  2. Installieren
  3. 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

  1. 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 11.0.2 verwenden. Neuere Versionen könnten auch funktionieren.

  1. Herunterladen Java 11.0.2 unter: https://jdk.java.net/archive/
  2. Entpacken
  3. Nach dem Entpacken den /bin Ordner in die Umgebungsvariable PATH hinzufügen
  4. Nach dem Entpacken / Ordner als Umgebungsvariable JAVA_HOME setzen

Aufbau von Webanwendungen

Webanwendung

HttpRequest

Single Page Application

  • man muss die Seite nicht neu laden
  • kleine HTML Seite vom Server + CSS und JS
  • JS rendert dynamisch den DOM
  1. 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.

WG Einkaufsverwaltung

Link

Teamverpflegung

Link