@@ -51,4 +51,3 @@
 # Technologie
-## Entwicklung mit ASP.NET (Was ist Blazor? / Was ist Razor? / Kestrel)
 ## Was ist Oqtane? Architektur von Oqtane?
 Oqtane ist ein Framework und CMS zur Entwicklung von Webseiten mithilfe von ASP.NET und Blazor. [^5] Ein Oqtane-System besteht aus mehreren Komponenten.

@@ -76,1 +75,3 @@
-## Systemarchitektur (Postgres / Oqtane / Nginx )
+## Systemarchitektur (Postgres / Oqtane / Nginx)
+
+In diesem Kapitel erkläre ich wie die ausgewählten Komponenten zusammenspielen. Wir verwenden NginX als Reverse Proxy, welcher bei uns die SSL Terminierung macht. Das Zertifikat, welches verwendet wird, wird von Let's Encrypt bereit gestellt und mitels HTTP-Challanges und dem Certbot auf dem Server aktualisiert und verwaltet. Oqtane selber läuft als Systemd-Service im Kestrel Backend. Kestrel ist ein kleiner Webserver, welcher in das ASP.NET Core Framework eingebaut worden ist. Oqtane (bzw. der ASP.NET Core Server "Kestrel") hört auf der Loopback IP und Port 5000. Damit ist Oqtane nur durch NginX erreichbar. PostgreSQL ist die Datenbank in dem System: Sie hört wieder auf der Loopback IP und Port 5432.

@@ -93,0 +95,4 @@
+
+## Entwicklung mit ASP.NET (Was ist Blazor? / Was ist Razor? / Kestrel)
+### Blazor [^7]
+Blazor ist ein kostenloses und quelloffenes Web-Framework, welches es Möglich macht, Benutzeroberflächen für Web-Browser basierend auf C# and HTML zu erstellen. Es wird von Microsoft als teil des ASP.NET Core Frameworks entwickelt. 

@@ -93,0 +99,4 @@
+
+Blazor hat mehrere Hosting-Modelle:
+- Blazor Web App: Hier wird die Web App als Teil einer ASP.NET Core Anwendung bereitgestellt. Hier gibt es mehrere Render Modi:
+  - Static Server: Die Komponente wird serverseitig "gerenderet" und besitzt keine Interaktivität. Das istder Default `RenderMode`

@@ -93,0 +100,4 @@
+Blazor hat mehrere Hosting-Modelle:
+- Blazor Web App: Hier wird die Web App als Teil einer ASP.NET Core Anwendung bereitgestellt. Hier gibt es mehrere Render Modi:
+  - Static Server: Die Komponente wird serverseitig "gerenderet" und besitzt keine Interaktivität. Das istder Default `RenderMode`
+  - Interative Server: Die Komponente wird serverseitig "gerendert", diesmal ist sie jedoch interaktiv. Das bedeutet: Man kann mithilfe von C# den Zustand der Seite dynamisch bearbeiten. Diese Zustandsänderungen werden serverseitig bearbeitet. Hierbei kommunizieren Server und Client mithilfe von SignalR über WebSockets miteinander.

@@ -93,0 +102,4 @@
+  - Static Server: Die Komponente wird serverseitig "gerenderet" und besitzt keine Interaktivität. Das istder Default `RenderMode`
+  - Interative Server: Die Komponente wird serverseitig "gerendert", diesmal ist sie jedoch interaktiv. Das bedeutet: Man kann mithilfe von C# den Zustand der Seite dynamisch bearbeiten. Diese Zustandsänderungen werden serverseitig bearbeitet. Hierbei kommunizieren Server und Client mithilfe von SignalR über WebSockets miteinander.
+  - Interactive WebAssembly: Die Komponente wird clientseitig, also im Browser, "gerendert". Damit der Blazor C# Code auch im Browser ausgeführt werden kann wird dieser in WebAssembly kompiliert.
+  - Interactive Auto: Im `Interactive Auto` Modul wird bei dem initialen Besuch der Website der `Interactive  Server` Modus gewählt und im Hintergrund wird der WebAssembly-Build heruntergeladen, damit bei weiteren Besuchen der Seite der `Interactive WebAssembly` Modus gewählt werden kann.

@@ -93,0 +103,4 @@
+  - Interative Server: Die Komponente wird serverseitig "gerendert", diesmal ist sie jedoch interaktiv. Das bedeutet: Man kann mithilfe von C# den Zustand der Seite dynamisch bearbeiten. Diese Zustandsänderungen werden serverseitig bearbeitet. Hierbei kommunizieren Server und Client mithilfe von SignalR über WebSockets miteinander.
+  - Interactive WebAssembly: Die Komponente wird clientseitig, also im Browser, "gerendert". Damit der Blazor C# Code auch im Browser ausgeführt werden kann wird dieser in WebAssembly kompiliert.
+  - Interactive Auto: Im `Interactive Auto` Modul wird bei dem initialen Besuch der Website der `Interactive  Server` Modus gewählt und im Hintergrund wird der WebAssembly-Build heruntergeladen, damit bei weiteren Besuchen der Seite der `Interactive WebAssembly` Modus gewählt werden kann.
+- Hybrid: Dieser Modus ist der einzige, welcher nicht innerhalb einer Blazor Web App läuft, sondern in einem WebView einer Nativen App. Dabei wird innerhalb des Mutterprozesses, ganz ohne WebServer. Das ganze Funktioniert in WPF und WinForms Apps und in nativen mobilen Apps für Android und iOS mithilfe von .NET MAUI.

@@ -93,0 +105,4 @@
+  - Interactive Auto: Im `Interactive Auto` Modul wird bei dem initialen Besuch der Website der `Interactive  Server` Modus gewählt und im Hintergrund wird der WebAssembly-Build heruntergeladen, damit bei weiteren Besuchen der Seite der `Interactive WebAssembly` Modus gewählt werden kann.
+- Hybrid: Dieser Modus ist der einzige, welcher nicht innerhalb einer Blazor Web App läuft, sondern in einem WebView einer Nativen App. Dabei wird innerhalb des Mutterprozesses, ganz ohne WebServer. Das ganze Funktioniert in WPF und WinForms Apps und in nativen mobilen Apps für Android und iOS mithilfe von .NET MAUI.
+
+Razor-Komponenten (in dieser Arbeit, sowie Umgangssprachlich, auch oft nur Komponenten genannt) sind der Grundbaustein für Blazor Web Apps. Sie bestehen aus HTML, welches mit der Verwendung von inline C# beeinflusst werden kann. Das Blazor stellt sicher, dass das gerenderte Markup aktualisiert wird, wenn sicher der Status der Komponente ändert. Dieser Code kann entweder vollständig in einer .razor Dateil liegen, oder in einer seperaten Code-Behind-Datei und der benutzer einer partiellen Klasse. Inline C# Code wird mithilfe von dem `@`- Zeichen markiert. Hier ist ein Beispiel für einen einfachen Counter:

@@ -93,0 +125,4 @@
+}
+```
+
+Mit`@count` in Zeile 3 wird der Wert der Variablen count in den `<p>` Tag mit eingebaut. Mit `@onclick="Increment"` in Zeile 5 wird die onclick Property vom `<button>`Tag auf die Increment Methode im C# Code. Der `@code` Block in Zeile 7 ist der C# Code, welcher diese Komponente dynamisch macht. Hier ist die Variable count definiert und die Methode Increment, welche dieser Komponente interaktiv macht. 

@@ -93,0 +127,4 @@
+
+Mit`@count` in Zeile 3 wird der Wert der Variablen count in den `<p>` Tag mit eingebaut. Mit `@onclick="Increment"` in Zeile 5 wird die onclick Property vom `<button>`Tag auf die Increment Methode im C# Code. Der `@code` Block in Zeile 7 ist der C# Code, welcher diese Komponente dynamisch macht. Hier ist die Variable count definiert und die Methode Increment, welche dieser Komponente interaktiv macht. 
+
+Razor hat auch eine Reihe an Keywords wie zum Beipsiel (nur Auszugsweise, bzw. die die wir verwendet haben):

@@ -93,0 +132,4 @@
+- inherits: Gibt die Superklasse der generierten C# Klasse an.
+- using: Gibt die im C# Code benutzen/verfügbaren Namespaces an
+- foreach: Für Wiederholungen im Markup
+- if: Für verzweigungen im Markup

@@ -93,2 +139,4 @@
+### SignalR
+### Kestrel
 
 ## Dependency injection

@@ -76,1 +75,3 @@
-## Systemarchitektur (Postgres / Oqtane / Nginx )
+## Systemarchitektur (Postgres / Oqtane / Nginx)
+
+In diesem Kapitel erkläre ich wie die ausgewählten Komponenten zusammenspielen. Wir verwenden NginX als Reverse Proxy, welcher bei uns die SSL Terminierung macht. Das Zertifikat, welches verwendet wird, wird von Let's Encrypt bereit gestellt und mitels HTTP-Challanges und dem Certbot auf dem Server aktualisiert und verwaltet. Oqtane selber läuft als Systemd-Service im Kestrel Backend. Kestrel ist ein kleiner Webserver, welcher in das ASP.NET Core Framework eingebaut worden ist. Oqtane (bzw. der ASP.NET Core Server "Kestrel") hört auf der Loopback IP und Port 5000. Damit ist Oqtane nur durch NginX erreichbar. PostgreSQL ist die Datenbank in dem System: Sie hört wieder auf der Loopback IP und Port 5432.

@@ -90,3 +92,3 @@
 ```
-## Websockets und HTTP 1.1 
 
+Zusätzlich gab es einen Administrationszugang zu den Servern, welcher über SSH möglich war. Dieser wurde für die Installation und Konfiguration der einzelnen Komponenten verwendet. Bei Hetzner war dieser Zugang nur über eine Wireguard VPN erreichbar. Bei der Schule war dieser Zugang direkt (über einen Hight-Port) möglich. Und bei LiveDesign war dieser Zugang wieder über eine VPN geregelt. Anfänglich mit SSL VPN, später mit einem IPSEC / Strongswan.

@@ -93,0 +95,4 @@
+
+## Entwicklung mit ASP.NET (Was ist Blazor? / Was ist Razor? / Kestrel)
+### Blazor [^7]
+Blazor ist ein kostenloses und quelloffenes Web-Framework, welches es Möglich macht, Benutzeroberflächen für Web-Browser basierend auf C# and HTML zu erstellen. Es wird von Microsoft als teil des ASP.NET Core Frameworks entwickelt. 

@@ -93,0 +99,4 @@
+
+Blazor hat mehrere Hosting-Modelle:
+- Blazor Web App: Hier wird die Web App als Teil einer ASP.NET Core Anwendung bereitgestellt. Hier gibt es mehrere Render Modi:
+  - Static Server: Die Komponente wird serverseitig "gerenderet" und besitzt keine Interaktivität. Das istder Default `RenderMode`

@@ -93,0 +103,4 @@
+  - Interative Server: Die Komponente wird serverseitig "gerendert", diesmal ist sie jedoch interaktiv. Das bedeutet: Man kann mithilfe von C# den Zustand der Seite dynamisch bearbeiten. Diese Zustandsänderungen werden serverseitig bearbeitet. Hierbei kommunizieren Server und Client mithilfe von SignalR über WebSockets miteinander.
+  - Interactive WebAssembly: Die Komponente wird clientseitig, also im Browser, "gerendert". Damit der Blazor C# Code auch im Browser ausgeführt werden kann wird dieser in WebAssembly kompiliert.
+  - Interactive Auto: Im `Interactive Auto` Modul wird bei dem initialen Besuch der Website der `Interactive  Server` Modus gewählt und im Hintergrund wird der WebAssembly-Build heruntergeladen, damit bei weiteren Besuchen der Seite der `Interactive WebAssembly` Modus gewählt werden kann.
+- Hybrid: Dieser Modus ist der einzige, welcher nicht innerhalb einer Blazor Web App läuft, sondern in einem WebView einer Nativen App. Dabei wird innerhalb des Mutterprozesses, ganz ohne WebServer. Das ganze Funktioniert in WPF und WinForms Apps und in nativen mobilen Apps für Android und iOS mithilfe von .NET MAUI.

@@ -93,0 +105,4 @@
+  - Interactive Auto: Im `Interactive Auto` Modul wird bei dem initialen Besuch der Website der `Interactive  Server` Modus gewählt und im Hintergrund wird der WebAssembly-Build heruntergeladen, damit bei weiteren Besuchen der Seite der `Interactive WebAssembly` Modus gewählt werden kann.
+- Hybrid: Dieser Modus ist der einzige, welcher nicht innerhalb einer Blazor Web App läuft, sondern in einem WebView einer Nativen App. Dabei wird innerhalb des Mutterprozesses, ganz ohne WebServer. Das ganze Funktioniert in WPF und WinForms Apps und in nativen mobilen Apps für Android und iOS mithilfe von .NET MAUI.
+
+Razor-Komponenten (in dieser Arbeit, sowie Umgangssprachlich, auch oft nur Komponenten genannt) sind der Grundbaustein für Blazor Web Apps. Sie bestehen aus HTML, welches mit der Verwendung von inline C# beeinflusst werden kann. Das Blazor stellt sicher, dass das gerenderte Markup aktualisiert wird, wenn sicher der Status der Komponente ändert. Dieser Code kann entweder vollständig in einer .razor Dateil liegen, oder in einer seperaten Code-Behind-Datei und der benutzer einer partiellen Klasse. Inline C# Code wird mithilfe von dem `@`- Zeichen markiert. Hier ist ein Beispiel für einen einfachen Counter:

@@ -93,0 +125,4 @@
+}
+```
+
+Mit`@count` in Zeile 3 wird der Wert der Variablen count in den `<p>` Tag mit eingebaut. Mit `@onclick="Increment"` in Zeile 5 wird die onclick Property vom `<button>`Tag auf die Increment Methode im C# Code. Der `@code` Block in Zeile 7 ist der C# Code, welcher diese Komponente dynamisch macht. Hier ist die Variable count definiert und die Methode Increment, welche dieser Komponente interaktiv macht. 

@@ -93,0 +127,4 @@
+
+Mit`@count` in Zeile 3 wird der Wert der Variablen count in den `<p>` Tag mit eingebaut. Mit `@onclick="Increment"` in Zeile 5 wird die onclick Property vom `<button>`Tag auf die Increment Methode im C# Code. Der `@code` Block in Zeile 7 ist der C# Code, welcher diese Komponente dynamisch macht. Hier ist die Variable count definiert und die Methode Increment, welche dieser Komponente interaktiv macht. 
+
+Razor hat auch eine Reihe an Keywords wie zum Beipsiel (nur Auszugsweise, bzw. die die wir verwendet haben):

@@ -93,0 +132,4 @@
+- inherits: Gibt die Superklasse der generierten C# Klasse an.
+- using: Gibt die im C# Code benutzen/verfügbaren Namespaces an
+- foreach: Für Wiederholungen im Markup
+- if: Für verzweigungen im Markup

@@ -93,0 +136,4 @@
+
+[^7]: https://en.wikipedia.org/wiki/Blazor
+
+### Kommunikations zwischen Front und Backend

@@ -93,0 +140,4 @@
+Wie Front- und Backend miteinander interagieren hängt hauptsächlich vom Render Modus ab. Oqtane kann auf verschiedene Arten betrieben werden. Hierbei ist es dem Modulentwickler ziemlich egal, welche Art der Kommunikation (WebSockets, HTTP Long-Polling, REST) verwendet wird. 
+
+#### SignalR
+SignalR ist eine Libary aus für das ASP.NET Framework, welche es möglich macht Server zu Client komminikation zu betreiben. Oqtane verwendet im `Interactive Server (SignalR)` Render-Modus verwendet wird.

@@ -234,1 +282,4 @@
+
 ## Produktion != Staging
+
+Ein Learning, welches doch relativ schnell aufkam ist im Bereich der IT eigentlich kein unbekanntes. Wir hatten dieses Learning relativ bald, im Frühling 2025, als die ersten Probleme mit dem Deployment von Oqtane aufkamen. Oqtane war zwar in unserer Entwicklungsumgebung sehr einfach zum einrichten gewesen, das Deployment in der Cloud vom Hetzner war jedoch geplagt von Problemen. Im Zeitraum von Mai bis Okober hatten wir keine laufende Produktivumgebung. Dadurch sind wir mit dieser Diplomarbeit auch in [Zeitverzug](#Arbeitszeiteinschätzung-und-verzug) gekommen. Hätte ich mich vor dem Start der Diplomarbeit mit dem Deployment von Oqtane auseinander gesetzt, dann wäre das in [Probleme mit Oqtane](#Probleme mit Oqtane) beschriebene Problem früher aufgekommen und der Zeitverzug wäre nicht so groß, oder noch ganz vermeidbar gewesen.

@@ -235,0 +286,4 @@
+
+## Teamleitung (Motivation / Downsizing)
+
+Nachdem ich mich von Anfang an volkommen in das Deploymentproblem von Oqtane gestürzt habe, habe ich meine Rolle als Teamleitung etwas schleifen gelassen. Dadurch fehlte bei einigen Teammitgliedern initial die Identifikation mit dem Projekt und in weitererfolge auch die Motivation an diesem Projekt mitzuarbeiten. Nachdem im Verlauf des Frühlings und über den Sommer von der hälfte des Teams trotz Besprechungen und Mahnungen keine Beiträge zu dem Projekt kamen haben Hr. Prof. Gürth und ich uns dazu entschieden uns von 2 Personen vor unterschreiben des Projektantrages zu trennen. Grund dazu war die Angst, die mangelnde Motivation zieht das restliche Team mit hinunter. Wir wollten uns trotz des Downsizings nicht an Funktionalitäten sparen und haben uns für das nächste halbe bis dreiviertel Jahr einen ziemlich strikten Zeiplan vorgenommen.