Was ist "MiracleList"?
MiracleList ein komplettes Fallbeispiel und Softwarearchitekturmuster mit .NET-Backend und modernen UI-Techniken im Bereich .NET/C# und JavaScript/TypeScript. MiracleList implementiert eine Aufgabenverwaltung mit vielen Features.
Bestandteile des Projekts "MiracleList"
MiracleList besteht aus einem Backend (in C# mit ASP.NET Core geschrieben, für Windows, Linux und macOS) sowie zahlreichen Clients:
- Webbrowser-Frontend mit Blazor Server (C#/HTML)
- Webbrowser-Frontend mit Blazor WebAssembly (C#/HTML)
- Webbrowser-Frontend mit Blazor Auto-Mode/Blazor United (C#/HTML)
- Webbrowser-Frontend mit Vue.js (TypeScript/HTMLl)
- Webbrowser-Frontend mit Angular (TypeScript/HTML)
- Windows-Desktop-App mit Blazor Desktop (C#/HTML)
- Windows-Desktop-App mit WinUI3 (C#/XAML)
- Cross-Platform-App für Windows, macOS, iOS und Android mit .NET-MAUI (C#/XAML)
- Cross-Platform-App für Windows, macOS, iOS und Android mit Blazor-MAUI (C#/HTML)
- Cross-Platform-App für Windows, macOS und Linux mit Angular und Electron (TypeScript/HTML)
- Cross-Platform-App für Android und iOS mit Angular und Cordova (TypeScript/HTML)
- Cross-Platform-App für Browser, Windows,Linux, macOS, iOS und Android mit UNO (C#/XAML)
Gepant, aber noch nicht verfügbar: Clients mit React, Svelte und Flutter.
Zweck der MiracleList
MiracleList dient Test- und Weiterbildungszwecken, d.h. MiracleList wird sowohl in den Schulungen als auch in den Fachbüchern von www.IT-Visions.de behandelt.
Szenario
Im Jahr 2015 zahlte Microsoft für die Übernahme des Berliner App-Herstellers Wunderlist mehr als 100 Millionen US-Dollar. Mittlerweile hat Microsoft Wunderlist sterben lassen zugunsten einer Neuimplementierung unter dem Namen Microsoft TODO".
MiracleList ist eine Nachprogrammierung der Wunderlist-Aufgabenverwaltung mit verschiedenen GUI-Techniken.
Der angemeldete MiracleList-Benutzer kann eine Liste von Aufgabenkategorien erstellen und in jeder Kategorie eine Liste von Aufgaben anlegen. Eine Aufgabe besteht aus einem Titel, einer Notiz, einem Eintragsdatum, einem Fälligkeitsdatum und kann als erledigt markiert werden. Über die Funktionen von Wunderlist hinaus kann in MiracleList eine Aufgabe drei (A, B oder C) statt nur zwei Wichtigkeitsgrade (Wichtig ja/nein) sowie einen Aufwand (Zahl) besitzen. Bewusst besitzt der Aufwand keine Maßeinheit; der Benutzer kann selbst entscheiden, ob er den Aufwand in Stunden, Tagen oder nur in relativen Werten, wie z.B. "1" (für niedrig) bis "10" (für hoch), vergeben will.
Wie bei Wunderlist kann eine Aufgabe Teilaufgaben besitzen, wobei eine Teilaufgabe nur einen Titel und einen Status besitzt. Einige Details aus dem Original fehlen aber in MiracleList, z.B. das Hochladen von Dateien zu Aufgaben, das Verschieben von Aufgaben zwischen Kategorien, die Suche nach Hashtags, das Duplizieren und Drucken von Listen sowie der Aufgabenaustausch zwischen Benutzern. Einige Funktionen wie anklickbare Hyperlinks in Aufgabentexten sind nicht realisiert, um einen Missbrauch der für alle Nutzer offenen Website zu vermeiden. Ganz bewusst sind einige Prozesse stark vereinfacht (z.B. das Benutzeranmeldeverfahren), um die Hürde zum Einstieg in die Anwendung gering zu halten.
Softwarearchktektur
Live-Systeme in der Cloud
Die Browser-basierten Clients laufen öffentlich im Internet (in der Microsoft Azure-Cloud):
Download Desktop-Versionen
Quellcode
Architektur des Cross-Platform-.NET-Application-Servers
Beim MiracleList-Backend kommen dabei folgende Techniken zum Einsatz:
- Aktuelles .NET (als Laufzeitumgebung)
- C# (als Programmiersprache)
- ASP.NET Core (für die WebAPI-REST-Dienste und die wenigen serverseitig erzeugten Webseiten)
- Entity Framework Core (als ORM-Mapper)
- SQL Server oder SQL Azure (als Datenbank), optional andere möglich
- Azure Web App (als Webserver in der Cloud)
- Swagger/Swashbuckle.AspNetCore (für die Bereitstellung von Metadaten für die WebAPI-REST-Dienste)
- Application Insights (für die Anwendungsüberwachung)
Live in der Azure-Cloud
Quellcode auf GitHub (enthalten im Ordner /src/Backend)
Architektur des Vue.js-Clients
Das Frontend von MiracleList ist eine Single Page Web Application (SPA) mit
- HTML, CSS (Benutzeroberflächenbeschreibung)
-
Bootstrap (Benutzeroberflächenbeschreibung, Vereinfachung für CSS)
- TypeScript (Programmiersprache)
- Vue.js (SPA-Framework inklusive Trennung UI- und Benutzerschnittstellensteuerung, Routing)
- MomentJS (Verarbeitung von Datumswerten)
Live in der Azure-Cloud
Quellcode auf GitHub
Architektur der Angular-Clients
Das Frontend von MiracleList ist eine Single Page Web Application (SPA) mit
- HTML, CSS (Benutzeroberflächenbeschreibung)
- Bootstrap (Benutzeroberflächenbeschreibung, Vereinfachung für CSS)
- TypeScript (Programmiersprache)
- Angular (SPA-Framework inklusive Trennung UI- und Benutzerschnittstellensteuerung, Routing und AJAX)
- MomentJS (Verarbeitung von Datumswerten)
sowie den Angular-Zusatzkomponenten
- angular2-moment (Darstellung von Datums- und Zeitraumangaben)
- ng2-datetime (Datumsauswahlsteuerelement)
- ngx-contextmenu (Kontextmenüs)
- ngx-modal (Modale Dialoge)
- ng2-dnd (Drag and Drop)
Einige der eingesetzten Angular-Komponenten von Dritten tragen noch die "2" im Namen, auch wenn es bereits Angular 4, 5 oder höher gibt. Sie laufen dennoch auf den neueren Versionen. Viele Komponentenentwickler wollen sich mit der "2" einfach abgrenzen von den Komponenten für AngularJS 1.x.
Zudem gibt es das Frontend als hybride Cross-Platform-App:
- Mit Hilfe von Electron für Windows, Linux und macOS
- Mit Hilfe von Cordova für Android und iOS
Live in der Azure-Cloud
Quellcode auf GitHub
Architektur der Blazor-Clients
Das Frontend von MiracleList ist eine Single Page Web Application (SPA) mit
- HTML, CSS (Benutzeroberflächenbeschreibung)
-
Bootstrap (Benutzeroberflächenbeschreibung, Vereinfachung für CSS)
- C# (Programmiersprache)
- Blazor WebAssembly, Blazor Server und Blazor Autor-Mode (als SPA-Framework)
Zudem gibt es das Blazor-Frontend als hybride Cross-Platform-App:
- Mit Hilfe von Blazor Desktop für Windows
- Mit Hilfe von Blazor MAUI für Android, iOS, macOS und Windows
Live in der Azure-Cloud (Blazor Server)
Live in der Azure-Cloud (Blazor WebAssembly)
Live in der Azure-Cloud (Blazor United)
Quellcode auf GitHub
Architektur der .NET MAUI-Clients
Das Frontend von MiracleList ist eine Single Page Web Application (SPA) mit
- XAML (Benutzeroberflächenbeschreibung)
- C# (Programmiersprache)
Quellcode auf GitHub
Architektur der WinUI3-Clients
Das Frontend von MiracleList ist eine Single Page Web Application (SPA) mit
- XAML (Benutzeroberflächenbeschreibung)
- C# (Programmiersprache)
Quellcode auf GitHub
Architektur der UNO-Clients
Das Frontend von MiracleList ist eine Single Page Web Application (SPA) mit
- XAML (Benutzeroberflächenbeschreibung)
- C# (Programmiersprache)
Quellcode auf GitHub
MiracleList-Client-Features
Nicht alle MiracleList-Funktionen sind in bereits in allen Clients implementiert. In der Tabelle fehlen noch die Features, die in WinUI, UNO und .NET MAUI implementiert sind.
MiracleList "Light" XAML 2-Tier
Die Light-Variante von MiracleList greift nicht auf das MiracleList-Backend zu, sondern nutzt via Entity Framework Core direkt eine lokale Datenbank oder ein DBMS im Netzwerk. Das Frontend gibt es in allen aktuellen XAML-Varianten: WPF, UWP, WinUI3, Xamarin und .NET MAUI. Die App läuft damit auf Windows, Android, iOS, macOS und Tizen.
Quellcode im Entity Framework Core-Buch