kh-blazor-razor #66
@@ -81,7 +81,7 @@ Ein Modul in Oqtane besteht aus vier Projekten:
|
||||
|
||||
## 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 mittels HTTP-Challenges 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.
|
||||
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 mittels HTTP-Challenges 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. In der folgenden Grafik ist das System Schematisch dargestellt.
|
||||
|
||||
```mermaid
|
||||
architecture-beta
|
||||
@@ -98,7 +98,15 @@ architecture-beta
|
||||
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 dem Schulserver 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.
|
||||
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. Der SSH Service ist in jeder Umgebung anders erreichbar gewesen.
|
||||
|
||||
|
gitea-actions
commented
Rechtschreibung: 'gerenderet' -> 'gerendert', 'dasder' -> 'das ist der'. Rechtschreibung: 'gerenderet' -> 'gerendert', 'dasder' -> 'das ist der'.
```suggestion
- Static Server: Die Komponente wird serverseitig "gerendert" und besitzt keine Interaktivität. Das ist der Default `RenderMode`
```
gitea-actions
commented
Rechtschreibung: Fehlendes Leerzeichen in 'ist der'. Rechtschreibung: Fehlendes Leerzeichen in 'ist der'.
```suggestion
- Static Server: Die Komponente wird serverseitig "gerendert" und besitzt keine Interaktivität. Das ist der Default `RenderMode`
```
|
||||
| Umgebung | Administrationszugang |
|
||||
|
gitea-actions
commented
Rechtschreibung: 'Interative' -> 'Interactive'. Rechtschreibung: 'Interative' -> 'Interactive'.
```suggestion
- Interactive 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.
```
|
||||
| ---------- | --------------------- |
|
||||
| Hetzner | Wireguard |
|
||||
|
gitea-actions
commented
Kontext: 'Modul' -> 'Modus' (bezieht sich auf Render-Modi). Kontext: 'Modul' -> 'Modus' (bezieht sich auf Render-Modi).
```suggestion
- Interactive Auto: Im `Interactive Auto` Modus 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.
```
|
||||
| Schule | Highport |
|
||||
|
gitea-actions
commented
Rechtschreibung: 'Nativen' -> 'nativen', 'Funktioniert' -> 'funktioniert'. Rechtschreibung: 'Nativen' -> 'nativen', 'Funktioniert' -> 'funktioniert'.
```suggestion
- 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, gearbeitet. Das Ganze funktioniert in WPF und WinForms Apps und in nativen mobilen Apps für Android und iOS mithilfe von .NET MAUI.
```
gitea-actions
commented
Rechtschreibung: Adjektiv 'nativen' kleinschreiben. 'Das Ganze funktioniert' groß/klein. Rechtschreibung: Adjektiv 'nativen' kleinschreiben. 'Das Ganze funktioniert' groß/klein.
```suggestion
- Hybrid: Dieser Modus ist der einzige, welcher nicht innerhalb einer Blazor Web App läuft, sondern in einem WebView einer nativen App. Dabei läuft dies 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.
```
|
||||
| LiveDesign | IPSEC VPN |
|
||||
|
||||
|
gitea-actions
commented
Rechtschreibung/Grammatik: 'Dateil' -> 'Datei', 'seperaten' -> 'separaten', 'benutzer' -> 'Benutzung'. Rechtschreibung/Grammatik: 'Dateil' -> 'Datei', 'seperaten' -> 'separaten', 'benutzer' -> 'Benutzung'.
```suggestion
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. Blazor stellt sicher, dass das gerenderte Markup aktualisiert wird, wenn sich der Status der Komponente ändert. Dieser Code kann entweder vollständig in einer .razor Datei liegen, oder in einer separaten Code-Behind-Datei und der Benutzung einer partiellen Klasse. Inline C# Code wird mithilfe von dem `@`-Zeichen markiert. Hier ist ein Beispiel für einen einfachen Counter:
```
gitea-actions
commented
Rechtschreibung: 'sich' statt 'sicher'. 'Datei' statt 'Dateil'. 'separaten' statt 'seperaten'. 'Benutzung' statt 'benutzer'. 'mithilfe des' (Genitiv). Rechtschreibung: 'sich' statt 'sicher'. 'Datei' statt 'Dateil'. 'separaten' statt 'seperaten'. 'Benutzung' statt 'benutzer'. 'mithilfe des' (Genitiv).
```suggestion
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 durch die Verwendung von Inline-C# beeinflusst werden kann. Blazor stellt sicher, dass das gerenderte Markup aktualisiert wird, wenn sich der Status der Komponente ändert. Dieser Code kann entweder vollständig in einer .razor-Datei liegen oder in einer separaten Code-Behind-Datei unter Benutzung einer partiellen Klasse. Inline-C#-Code wird mithilfe des `@`-Zeichens markiert. Hier ist ein Beispiel für einen einfachen Counter:
```
|
||||
Die VPN basierten Zugänge sind tendenziell schwieriger zu finden und auszunutzen, während die Lösung in der Schule mittels Highport den SSH Service öffentlich erreichbar macht. Durch den `Highport` ist der SSH Service schwieriger zu finden. Zur Authentifizierung mit SSH verwenden wir SSH-Keys, da diese durch ihre komplexität sicherer sind, als Passwörter.
|
||||
|
||||
## Entwicklung mit ASP.NET (Was ist Blazor? / Was ist Razor? / Kestrel)
|
||||
|
||||
@@ -157,6 +165,14 @@ SignalR ist eine Library aus dem ASP.NET Framework, welche es möglich macht, Se
|
||||
|
||||
## Dependency Injection
|
||||
|
||||
Dependency Injection ist ein Entwurfsmuster, bei dem die Abhängigkeiten eines Objekts nicht von diesem selbst erzeugt, sondern von außen „injiziert“ werden.
|
||||
|
||||
Wie der Software-Architekt Martin Fowler, der den Begriff im Jahr 2004 maßgeblich prägte, beschreibt, geht es im Kern darum, die Erzeugung von Objekten von deren Nutzung zu trennen [^9]. Anstatt dass eine Klasse ihre Hilfsobjekte mittels des new-Operators selbst instanziiert, werden ihr diese meist über den Konstruktor zur Verfügung gestellt.
|
||||
|
||||
In den folgenden beiden Kapiteln wird das Dependency Inversion Principle und das Microsoft Dependency Injection Framework genauer vorgestellt.
|
||||
|
||||
[^9]: https://martinfowler.com/articles/injection.html
|
||||
|
||||
### Dependency Inversion Principle [^1]
|
||||
|
||||
Das Dependency-Inversion-Principle (DIP / auf Deutsch: Abhängigkeits-Umkehr-Prinzip) ist eines von den fünf `SOLID` Prinzipien in der Softwareentwicklung.
|
||||
@@ -328,7 +344,7 @@ Um das Projektziel dennoch zu erreichen, wurde der Zeitplan im Herbst 2025 massi
|
||||
> (Jon Bentley. 1985. Programmimg pearls. Commun. ACM 28, 9 (Sept. 1985), 896–901. https://doi.org/10.1145/4284.315122) [^8]
|
||||
> Diese Diplomarbeit liefert weitere Evidenz, dass diese Faustregel stimmt.
|
||||
|
||||
[^8](https://dl.acm.org/doi/10.1145/4284.315122)
|
||||
[^8]: https://dl.acm.org/doi/10.1145/4284.315122
|
||||
|
||||
## Sprints und Meetings (in Zukunft ja asynchron)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user
Rechtschreibung: 'Möglich' -> 'möglich', 'and' -> 'und' (Sprachmix), 'teil' -> 'Teil'.
Rechtschreibung/Stil: 'möglich' kleinschreiben (Adjektiv). 'und' statt 'and'. 'Teil' großschreiben.