From 6485ed6149479949da97418065669dcd08949e24 Mon Sep 17 00:00:00 2001 From: Konstantin Hintermayer Date: Sat, 7 Mar 2026 14:15:43 +0000 Subject: [PATCH 01/22] Update Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md --- ...beitsbuch-individueller-teil-Konstantin-Hintermayer.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md b/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md index df95490..36f2de6 100644 --- a/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md +++ b/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md @@ -73,7 +73,10 @@ Im Package Projekt findet man Skripte zum Debuggen und Releasen eines Moduls. Un - Beim Debug werden die DLLs, PDBs und statischen Assets wie Skripte und Stylesheets der 3 anderen Projekte in den bereits gebauten Oqtane.Server `oqtane.framework/oqtane.server/bin/debug/net10.0/...` kopiert. - Beim Release wird ein NuGet-Paket erstellt und unter oqtane.framework/oqtane.server/Packages abgelegt. Dort abgelegte NuGet-Pakete werden beim nächsten Start des Oqtane Servers installiert (DB Migrationen werden gemacht und die Pakete entpackt). -## 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. + ```mermaid architecture-beta group server(server)[Server] @@ -88,6 +91,9 @@ architecture-beta nginx:R <--> L:oqtane oqtane:R <--> L:db ``` + +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. + ## Websockets und HTTP 1.1 From e57e821ead3083092209954d74d818d1044e728e Mon Sep 17 00:00:00 2001 From: Konstantin Hintermayer Date: Sat, 7 Mar 2026 15:56:54 +0000 Subject: [PATCH 02/22] KH: Blazor beschreibung --- ...dividueller-teil-Konstantin-Hintermayer.md | 46 ++++++++++++++++++- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md b/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md index 36f2de6..dc3f9df 100644 --- a/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md +++ b/Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md @@ -49,7 +49,6 @@ Es war von Anfang an klar, dass es ein SQL basiertes System wird, da wir im Team # 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. @@ -94,8 +93,51 @@ architecture-beta 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. -## Websockets und HTTP 1.1 +## 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. +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. + - 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. + +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: + +```razor +

Counter

+ +

Count: @count

+ + + +@code +{ + private int count = 0; + + private void Increment() + { + count++; + } +} +``` + +Mit`@count` in Zeile 3 wird der Wert der Variablen count in den `

` Tag mit eingebaut. Mit `@onclick="Increment"` in Zeile 5 wird die onclick Property vom ` -@code +@code { private int count = 0; @@ -125,29 +135,34 @@ Razor-Komponenten (in dieser Arbeit, sowie Umgangssprachlich, auch oft nur Kompo } ``` -Mit`@count` in Zeile 3 wird der Wert der Variablen count in den `

` Tag mit eingebaut. Mit `@onclick="Increment"` in Zeile 5 wird die onclick Property vom `