30.05.2020 20:28:45 < ASP.NET Core-/Angular-/Blazor-Beispielanwendung: MiracleList (www.miraclelist.net)
Sie sind hier: Startseite | Wissen
MiracleList ist eine Aufgabenverwaltung und ein komplettes Fallbeispiel einer modernen Single-Page-Webanwendung (SPA), bestehend aus einem Backend (in C# mit ASP.NET Core geschrieben), einem Web-Frontend (in zwei Varianten: a) TypeScript mit Angular und b) Blazor) sowie Cross-Platform-Apps für Linux, macOS, Windows, Android und iOS (mit Hilfe von Electron und Cordova aus dem Web-Frontend erzeugt).

Das Szenario

Im Jahr 2015 zahlte Microsoft für die Übernahme des Berliner App-Herstellers Wunderlist mehr als 100 Millionen US-Dollar. "MiracleList" ist eine Nachprogrammierung dieser Aufgabenverwaltung als Webanwendung und Cross-Platform-Anwendung für Windows, Linux, MacOS, Android und iOS mit einem Cross-Platform-Cloud-Backend.

Der angemeldete 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.

Links

Die fertige Webanwendung läuft öffentlich im Internet:

Der Quellcode ist verfügbar auf Github:

Architektur des Cross-Platform-.NET-Core-Servers

    Beim MiracleList-Backend kommen dabei folgende Techniken zum Einsatz:
  • .NET Core (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 Azure (als Datenbank)
  • 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)

Architektur des Cross-Platform-HTML-Clients (Variante mit Angular)

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

Architektur des HTML-Clients (Variante mit Blazor)

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 bzw. Blazor Server (SPA-Framework inklusive Trennung UI- und Benutzerschnittstellensteuerung, Routing und AJAX)

Beratung & Support:


Schulungen zu .NET Core:
 .NET-Akademie: .NET-/.NET Core-/C#-Basisseminar: Softwarearchitektur, Techniken, Pattern, Best Practices (2-Tages-Agenda des öffentlichen Seminars)
 Microservices erstellen und betreiben (mit ASP.NET, ASP.NET Core, Java oder node.js)
 .NET Akademie: Moderne Web-Anwendungen mit ASP.NET MVC/ASP.NET Core, JavaScript, Angular und anderen JavaScript-Bibliotheken (3-Tages-Agenda des öffentlichen Seminars)
 .NET-/.NET Core-Entwickler-Update 2018
 .NET Akademie: Webservices, verteilte Systeme, SOA und REST mit .NET/.NET Core (WCF, ASP.NET WebAPI)
 Umstellung/Migration von ASP.NET-Anwendungen von .NET Framework auf ASP.NET Core mit .NET Core (Änderungen und Neuerungen in ASP.NET Core gegenüber ASP.NET 4.5 und ASP.NET MVC 5/ASP.NET Web API 5)
 Neuerungen in .NET Core 2.0 gegenüber Version 1.x (inkl. ASP.NET Core, Entity Framework Core)
 Umstellung/Migration von Windows Forms-Anwendungen von .NET Framework auf .NET Core
 Konfigurationsinformationen in .NET und .NET Core
 .NET Akademie: Windows-Desktop-Anwendungen mit der Windows Presentation Foundation (WPF) in .NET und .NET Core (3-Tages-Agenda des öffentlichen Seminars)
 .NET und .NET Core für Entscheider (Entwicklungsleiter, Projektleiter, Teamleiter, Softwarearchitekten)
 .NET Framework / .NET Core - Basiswissen
 .NET 5.0 - Umstieg von .NET Core 3.x oder .NET Framework 4.8
 Umstieg von .NET-Desktop-Entwicklung (WPF/Windows Forms) auf Webentwicklung (ASP.NET/ASP.NET Core + JavaScript/TypeScript mit Webframeworks wie Angular oder React)
 ASP.NET SignalR / ASP.NET Core SignalR
 .NET-/.NET Core-Entwickler-Update 2019
 .NET Core 2.x/3.x - für Umsteiger von .NET Framework 4.x (inkl. ASP.NET Core und Entity Framework Core)
 ASP.NET Core WebAPI (REST Services/HTTP Services/Microservices)
 Neuerungen in .NET Core 3.0/3.1 gegenüber Version 2.x (inkl. ASP.NET Core, Entity Framework Core, WPF und Windows Forms)
 ASP.NET Core 2.x/3.x: MVC, Razor Pages, Blazor und WebAPIs
 Umstellung/Migration von WPF-Anwendungen von .NET Framework auf .NET Core
 .NET Core-Basiswissen
 .NET-/.NET Core-Entwickler-Update 2020
 Entity Framework Core (EF Core) - Objekt-Relationales Mapping für .NET und .NET Core
 Neuerungen in .NET Core 2.1/2.2 gegenüber Version 2.0 (inkl. ASP.NET Core, Entity Framework Core)
 .NET-Überblick für .NET-Einsteiger und .NET-Entscheider (wahlweise für .NET und/oder .NET Core)
 ASP.NET Blazor - browserunabhängige Single Page WebApplications (SPA) mit C# und WebAssembly (WASM)
 RxJS (Reactive Programming Library for JavaScript)
 node.js - Entwicklung hoch-skalierbarer Webanwendungen/WebAPIs mit JavaScript (und/oder TypeScript) auf dem Server
 Webbrowser-Programmierung mit JavaScript und Dynamic HTML (DHTML)
 Anfrage für eine individuelle Schulung zum Thema .NET Core;ASP.NET Core;Blazor;JavaScript;TypeScript;Angular  Gesamter Schulungsthemenkatalog

Bücher zu .NET Core:
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.0 (Buchversion 6.x, Gedruckt)
 Moderne Datenzugriffslösungen mit Entity Framework Core 1.1: Datenbankprogrammierung mit .NET/.NET Core und C# (gedruckte Ausgabe)
 Moderne Datenzugriffslösungen mit Entity Framework Core 1.1.1 und 2.0-Preview2: Datenbankprogrammierung mit .NET/.NET Core und C# (gedruckte Ausgabe)
 Moderne Datenzugriffslösungen mit Entity Framework Core 2.0/2.1 (Buchversion 5.x, Ebook PDF)
 C# 7.2 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin (PDF)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.0 (Buchversion 6.x, Kindle)
 ASP.NET Core Blazor 3.1/3.2: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (PDF)
 Moderne Datenzugriffslösungen mit Entity Framework Core 5.0 (Buchversion 8.x, Kindle)
 Moderne Datenzugriffslösungen mit Entity Framework Core 2.0 (Buchversion 4.x): Datenbankprogrammierung mit .NET/.NET Core und C# (gedruckte Ausgabe)
 C# 7.3 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin (PDF)
 Modern Data Access with Entity Framework Core: Database Programming Using .NET, .NET Core, UWP, and Xamarin with C#
 ASP.NET Core Blazor 3.0/3.1: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (Kindle)
 ASP.NET Core Blazor 3.1/3.2: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (Kindle)
 ASP.NET Core Blazor 3.0/3.1: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (PDF)
 C# 8.0 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin (DRUCK)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.1 (Buchversion 8.x, Kindle)
 ASP.NET Core Blazor 3.0/3.1: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (DRUCK)
 Moderne Datenzugriffslösungen mit Entity Framework Core 5.0 (Buchversion 8.x, DRUCK)
 Effizienter Datenzugriff mit Entity Framework Core: Datenbankprogrammierung mit C# für .NET Framework, .NET Core und Xamarin
 Moderne Datenzugriffslösungen mit Entity Framework Core 5.0 (Buchversion 8.x, PDF)
 C# 8.0 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin (Kindle)
 C# 7.3 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin (Kindle)
 Moderne Webanwendungen für .NET-Entwickler: Server-Anwendungen, Web APIs, SPAs & HTML-Cross-Platform-Anwendungen mit ASP.NET, ASP.NET Core, JavaScript/TypeScript und Angular
 .NET Core 1.0 und 1.1 - Entwicklung mit den Core-Produkten
 C# 7.3 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin (DRUCK)
 Moderne Datenzugriffslösungen mit Entity Framework Core 1.x und 2.0: Datenbankprogrammierung mit .NET/.NET Core und C# (gedruckte Ausgabe)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.0 (Buchversion 7.x, PDF)
 C# 8.0 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin (PDF)
 ASP.NET Core Blazor 3.1/3.2: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (Druck)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.1 (Buchversion 8.x, DRUCK)
 Moderne Datenzugriffslösungen mit Entity Framework Core 2.0 (Buchversion 4.x): Datenbankprogrammierung mit .NET/.NET Core und C# (EBOOK - PDF)
 Moderne Datenzugriffslösungen mit Entity Framework Core 1.x und 2.0: Datenbankprogrammierung mit .NET/.NET Core und C# (EBOOK - PDF)
 Moderne Datenzugriffslösungen mit Entity Framework Core 1.1.2 und 2.0-Preview2: Datenbankprogrammierung mit .NET/.NET Core und C# (PDF)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.1 (Buchversion 8.x, PDF)
 Alle unsere aktuellen Fachbücher