< www.MiracleList.de: Beispielanwendung mit ASP.NET Core | Angular | Vue.js | Blazor
Sie sind hier: Wissen Top-Know-how seit 25 Jahren!
Logo der Firma www.IT-Visions.de
MENU

www.MiracleList.de
Beispielanwendung mit ASP.NET Core | Angular | Vue.js | Blazor

Werbung

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 mehreren Varianten mit Angular, Vue.js und Blazor) sowie Cross-Platform-Apps für Linux, macOS, Windows, Android und iOS (mit Hilfe von Electron und Cordova bzw. Blazor Desktop aus dem Web-Frontend erzeugt).

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 Web- und Cross-Platform-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.

Live-Systeme in der Cloud

Die fertige Webanwendung läuft öffentlich im Internet (Microsoft Azure-Cloud):

Download Desktop-Versionen

Quellcode

Architektur des Cross-Platform-.NET-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 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)
Live in der Azure-Cloud Quellcode auf GitHub

Architektur des Web-Clients (Variante mit Vue.js)

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 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
Live in der Azure-Cloud Quellcode auf GitHub

Architektur des Web-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)
Zudem gibt es das Frontend als hybride Cross-Platform-App:
  • Mit Hilfe von Blazor Desktop für Windows
  • Mit Hilfe von Blazor MAUI für Android und iOS
Live in der Azure-Cloud (Blazor Server) Live in der Azure-Cloud (Blazor WebAssembly) Quellcode im Blazor-Buch

MiracleList-Client-Features

Nicht alle MiracleList-Funktionen sind in bereits in allen Clients implementiert.

Beratung & Support:

Schulungen zu diesem Thema
 Microservices erstellen und betreiben (mit ASP.NET, ASP.NET Core, Java oder node.js)
 ASP.NET Core 7.0 - Änderungen und Neuerungen gegenüber ASP.NET Core 6.0
 Umstieg auf ASP.NET Core 6.0-Webanwendungen in .NET 6.0 (Umstellung/Migration von klassischen ASP.NET-Webanwendungen auf ASP.NET Core)
 Neuerungen in .NET Core 2.0 gegenüber Version 1.x (inkl. ASP.NET Core, Entity Framework Core)
 ASP.NET SignalR / ASP.NET Core SignalR
 Umstieg von .NET-Desktop-Entwicklung (WPF/Windows Forms) auf Webentwicklung (ASP.NET/ASP.NET Core + JavaScript/TypeScript mit Webframeworks wie Angular oder React)
 Neuerungen in .NET 5.0 gegenüber .NET Core 3.x (inkl. ASP.NET Core, Entity Framework Core, WPF und Windows Forms)
 Tipps & Tricks für bessere Websites/Webanwendungen mit ASP.NET Core
 ASP.NET Core Blazor (Blazor WebAssembly und/oder Blazor Server und/oder Blazor Desktop)
 ASP.NET Core WebAPI 6.0: REST Services/HTTP Services/Microservices
 Umstieg auf ASP.NET Core WebAPI und Google RPC (gRPC) in .NET 6.0 (Umstellung/Migration von ASP.NET WebAPI und/oder WCF in .NET Framework auf ASP.NET Core und gRPC in .NET 6.0)
 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 5.0/6.0: komplettes Wissen - mit MVC, Razor Pages, Blazor, WebAPIs und gRPC
 Sichere Webanwendungen mit IIS und ASP.NET / ASP.NET Core
 Neuerungen in .NET Core 2.1/2.2 gegenüber Version 2.0 (inkl. ASP.NET Core, Entity Framework Core)
 .NET Akademie: Blazor-6.0-Hands-On: Echte Single-Page-Web-Apps mit .NET und C# entwickeln (3-Tages-Agenda des öffentlichen Seminars)
 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)
 Webstorm (JavaScript-IDE von JetBrains)
 Plattformneutrale Hybrid-Anwendungen mit HTML5 und JavaScript (oder TypeScript) unter Einsatz von Chromium und Electron (Hosted/Hybrid Web Apps)
 Windows Modern Apps/Windows Universal Apps entwickeln mit der Windows Runtime (WinRT), HTML/CSS und JavaScript sowie WinJS
 Kendo UI - HTML5/JavaScript-Webanwendungen mit Progress/Telerik Kendo UI
 Geschäftsanwendungen mit HTML 5.x und JavaScript (oder TypeScript): Moderne Web 2.0-/HTML5-Browser-Webanwendungen und Mobilanwendungen entwickeln
 JavaScript und moderne Webanwendungen/Cross-Platform-Anwendungen für Entscheider
 Windows 8/Windows 8.1 für Entwickler: Programmierung mit der Windows Runtime (WinRT) - Erstellen von Windows Apps mit C#/XAML und/oder JavaScript/HTML
 Moderne Web-Anwendungen mit ASP.NET (Core) MVC, WebAPI, HTML5.x/CSS3 und JavaScript-/TypeScript-Frameworks
 Unit Testing / Testgetriebene Entwicklung / Test Driven Development (TDD) mit JavaScript/TypeScript
 JavaScript und TypeScript für die moderne Web- und App-Entwicklung
 jQuery und jQueryUI - vereinfachte Webseiten-Programmierung mit JavaScript (oder TypeScript)
 Anfrage für eine individuelle Schulung zum Thema ASP.NET Core;Blazor;Blazor;JavaScript;TypeScript;Angular  Gesamter Schulungsthemenkatalog

Bücher zu diesem Thema

  Moderne Datenzugriffslösungen mit Entity Framework Core 5.0 (Buchversion 9.x, gedruckte Ausgabe)
 Blazor 6.0: Blazor WebAssembly, Blazor Server und Blazor Desktop - Moderne Single-Page-Web- und hybride Cross-Platform-Apps mit .NET, C# und Visual Studio (Kindle-E-Book)
 Blazor 6.0: Blazor WebAssembly, Blazor Server und Blazor Desktop - Moderne Single-Page-Web- und hybride Cross-Platform-Apps mit .NET, C# und Visual Studio (gedruckte Ausgabe)
 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
 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-E-Book)
 Moderne Datenzugriffslösungen mit Entity Framework Core 2.0/2.1 (Buchversion 5.x, PDF-E-Book)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.0 (Buchversion 6.x, Kindle-E-Book)
 Moderne Datenzugriffslösungen mit Entity Framework Core 2.0 (Buchversion 4.x): Datenbankprogrammierung mit .NET/.NET Core und C# (gedruckte Ausgabe)
 Moderne Datenzugriffslösungen mit Entity Framework Core 6.0 (PDF-E-Book)
 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-E-Book)
 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)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.1 (Buchversion 8.x, Kindle-E-Book)
 Moderne Datenzugriffslösungen mit Entity Framework Core 5.0 (Buchversion 9.x, Kindle-E-Book)
 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)
 Blazor 6.0: Blazor WebAssembly, Blazor Server und Blazor Desktop - Moderne Single-Page-Web- und hybride Cross-Platform-Apps mit .NET, C# und Visual Studio (PDF-E-Book)
 Moderne Datenzugriffslösungen mit Entity Framework Core 5.0 (Buchversion 9.x, PDF-E-Book)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.0 (Buchversion 6.x, Gedruckte Ausgabe)
 ASP.NET Core Blazor 3.1/3.2: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (gedruckte Ausgabe)
 .NET Core 1.0 und 1.1 - Entwicklung mit den Core-Produkten
 Moderne Datenzugriffslösungen mit Entity Framework Core 6.0 (gedruckte Ausgabe)
 Moderne Datenzugriffslösungen mit Entity Framework Core 6.0
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.0 (Buchversion 7.x, PDF-E-Book)
 ASP.NET Core Blazor 5.0: Blazor WebAssembly und Blazor Server - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (PDF-E-Book)
 ASP.NET Core Blazor 5.0: Blazor WebAssembly und Blazor Server - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (Kindle-E-Book)
 ASP.NET Core Blazor 5.0: Blazor WebAssembly und Blazor Server - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio (gedruckte Ausgabe)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.1 (Buchversion 8.x, gedruckte Ausgabe)
 Moderne Datenzugriffslösungen mit Entity Framework Core 2.0 (Buchversion 4.x): Datenbankprogrammierung mit .NET/.NET Core und C# (PDF-E-Book)
 Moderne Datenzugriffslösungen mit Entity Framework Core 3.1 (Buchversion 8.x, PDF-E-Book)
 Alle unsere aktuellen Fachbücher  E-Book-Abo für nur 99 Euro im Jahr