MiracleList ist eine umfangreiche, sehr realitätsnahe Beispielanwendung, die eine ähnliche Benutzeroberfläche und Funktionen wie das inzwischen leider eingestellte Wunderlist bietet. Diese Beispielanwendung verwendet Dr. Holger Schwichtenberg in seinen Fachbüchern, Schulungen und Vorträgen.
Es gibt vier auf ASP.NET Core Blazor basierende Implementierung des MiracleList-Frontends:
- MiracleList_BW: MiracleList mit Blazor WebAssembly (3-Tier mit Zugriff auf die Daten über WebAPI-basierten Application Server)
- MiracleList_BS: MiracleList mit Blazor Server (2-Tier mit Direktzugriff auf die Datenbank)
- MiracleList_BD: MiracleList mit Blazor Desktop in einer WPF-Rahmenanwendung (2-Tier mit Direktzugriff auf die Datenbank)
- MiracleList_BM: MiracleList mit Blazor MAUI (3-Tier mit Zugriff auf die Daten über WebAPI-basierten Application Server)
Abbildung 1: MiracleList im Browser mit Blazor WebAssembly
Abbildung 2: MiracleList als hybride App in Blazor MAUI
Die vier Blazor-Implementierungen der MiracleList verwenden sehr viel gemeinsamen Code. Die Benutzeroberfläche ist nur einmal für alle vier Blazor-Implementierungen der MiracleList realisiert. Der Datenzugriffs erfolgt wahlweise direkt auf die Datenbank (2-Tier) oder via WebAPI/Application Server (3-Tier).
Abbildung 3: Code-Sharing zwischen den vier Implementierungen einschließlich Abstraktion von 2-Tier/3-Tier
Welche Funktionen die Blazor-Implementierungen der MiracleList aus Benutzersicht bieten, finden Sie in der Tabelle auf www.MiracleList.net
Aus technischer Sicht demonstrieren die Blazor-Implementierungen der MiracleList für Softwareentwickler folgende Funktionen von Blazor:
- Alle vier Blazor-Varianten (Blazor WebAssembly,Blazor Server,Blazor Desktop, Blazor MAUI) für Browser und als Hybridanwendung
- Sehr viel Shared Code zwischen allen Blazor-Varianten mit einem gemeinsamen UI in einer Razor Class Library
- Abstraktion zwischen einer 2-Tier- und 3-Tier-Anwendung: Mit dem gleichen Komponenten sowohl direkt auf eine Datenbank zugreifen als auch Nutzung von WebAPIs auf einem Application Server
- Listenansichten mit Suchen und Filtern
- Bearbeitungsformular mit Validierung
- Datei-Upload
- Tastaturereignisse
- Editierbares Datagrid
- Drag&Drop
- Kontextmenüs
- Modale Dialoge
- Toast-Benachrichtigungen
- Ständig aktualisierte Statusanzeige für Backendsysteme
- Generierung eines Berichts via Microsoft Word (nur in Hybridanwendung)
- Authentifizierung und Autorisierung
- Nutzung des Local Storage des Browsers
- Fenster-Synchronisation mit Push-Nachrichten via ASP.NET Core SignalR
- Progressive Web App (nur Blazor WebAssembly)
- Einsatz kostenfreier Zusatzkomponenten
Backend:
- .NET mit C#
- Entity Framework Core
- SQL Azure
- ASP.NET Core-WebAPI
- Swagger/Swashbuckle.AspNetCore
- HTTP-Tests mit Postman
Frontend:
- .NET
- ASP.NET Core Blazor Server
- ASP.NET Core Blazor Webassembly
- Windows Presentation Foundation (WPF) mit Blazor Desktop
- .NET MAUI mit Blazor MAUI
Die Entwicklerdokumentation zu den vier MiracleList-Frontends mit Blazor finden im Blazor-Buch von Dr. Holger Schwichtenberg.
- Backend mit C#/ASP.NET Core: https://miraclelistbackend.azurewebsites.net
- Web-Frontend C#/Blazor Server: https://miraclelist-bs.azurewebsites.net
- Web-Frontend C#/Blazor WebAssembly: https://miraclelist-bw.azurewebsites.net
- Web-Frontend TypeScript/Vue.js: https://miraclelist-vue.azurewebsites.net/
- Web-Frontend TypeScript/Angular: http://www.miraclelist.net
- Windows-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-win32-x64.rar
- MacOS-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-darwin-x64.rar
- Linux-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-linux-x64.rar
Erstellen Sie die Datenbank (nur für bei einem Self-Hosting des Backends und 2-Tier-Varianten notwendig!)
- Ändern Sie die Verbindungszeichenfolge in: DA/Context.cs
- Projektmappen Explorer: Als Startprojekt festlegen = EFCTools
- Package Manager Console: Standardprojekt = DA
- Package Manager Console: Ausführen: Update-Database
Setzen Sie die Verbindungszeichenfolge auf Ihre Datenbank (nur für Self-Hosting des Backends und 2-Tier-Varianten notwendig!)
- in: MiracleList_BD/appsettings.json
- in: MiracleList_BS/appsettings.json
- in: MiracleList_Backend/appsettings.json
- in: EFC_Tools/appsettings.json
- in: Tests/appsettings.json
- Öffnen Sie https://miraclelistbackend.azurewebsites.net/
- Füllen Sie das Formular „Kunden-ID beantragen“ aus
- Holen Sie sich die Client-ID aus dem E-Mail-Konto
- Setzen Sie die Client-ID in der Datei MiracleList_BW/wwwRoot/appSettings.json
- Starten Sie den Server MiracleList_Backend
- Öffnen Sie die laufende Site im Browser
- Füllen Sie das Formular "Kunden-ID beantragen" aus
- Holen Sie sich die Client-ID aus dem E-Mail-Konto. Wenn Sie keine E-Mail erhalten haben: Öffnen Sie die Tabelle "Client" in der Datenbank, um die erstellte Client-ID zu erhalten
- Legen Sie die Client-ID in der Datei MiracleList_BW/wwwRoot/appSettings.json und MiracleList_BM/wwwRoot/appSettings.json fest
- Setzen Sie Ihre Server-URL in "Backend/DebugURL" in der Datei MiracleList_BW/wwwRoot/appsettings.json und MiracleList_BM/wwwRoot/appsettings.json
- Website zum MiracleList-Projekt: www.miraclelist.de