21.08.2018 04:22:16 < ASP.NET Core-/Angular-Beispielanwendung MiracleList: www.miraclelist.net
Sie sind hier: Startseite | Wissen
Werbung
MiracleList ist eine Aufgabenverwaltung. MiracleList ist ein komplettes Fallbeispiel einer modernen Webanwendung, bestehend aus einem Backend (in C# mit ASP.NET Core geschrieben), einem Web-Frontend (in TypeScript mit Angular geschrieben) 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.

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

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

Links

Die fertige Webanwendung läuft öffentlich im Internet:

Der Quellcode ist verfügbar auf Github:

Beratung & Support:

 Beratung/Consulting: Best Practices für moderne Webanwendungen mit HTML5, CSS3 und JavaScript
 Beratung/Consulting: JavaScript-Alternativen (TypeScript, Dart, CoffeeScript)
 Beratung/Consulting: Auswahl und Vergleich von JavaScript-Webframeworks
 Beratung/Consulting: JavaScript beherrschbar machen
 Beratung/Consulting: Moderne Webanwendungen mit ASP.NET MVC
 Beratung/Consulting: Anwendungsarchitektur / Anwendungsdesign (Entwurf einer Softwarearchitektur)
 Beratung/Consulting: Moderne Webanwendungen mit ASP.NET MVC und JavaScript
 Beratung/Consulting: Angular (ab Version 2.x) - Basiswissen
 Beratung/Consulting: Anwendungsredesign
 Beratung/Consulting: Microsoft ASP.NET 4.5 mit C# 2012 - Entwicklerbuch
 Beratung/Consulting: Programmcodereview
 Beratung/Consulting: Architekturreviews
 Beratung/Consulting: Webtechniken, Web-Frameworks/-Bibliotheken und Web-Tools auswählen
 Beratung/Consulting: Geschäftsanwendungen mit HTML 5 und JavaScript (oder TypeScript): Moderne Web 2.0-/HTML5-Browser-Webanwendungen und Mobilanwendungen entwickeln
 Beratung/Consulting: Basiswissen JavaScript und TypeScript für die moderne Web- und App-Entwicklung
 Beratung/Consulting: AngularJS 1.x - Aufbauwissen
 Beratung/Consulting: AngularJS 1.x - Basiswissen
 Anfrage für Beratung/Consulting zu Thema .NET Core und Angular;.NET Core;ASP.NET Core;JavaScript;TypeScript;Angular  Gesamter Beratungsthemenkatalog  Support zum Thema .NET Core und Angular;.NET Core;ASP.NET Core;JavaScript;TypeScript;Angular

Schulungen zu .NET Core Und Angular:
 .NET Core 1.x/2.x - für Umsteiger von .NET Framework 4.x
 ASP.NET Core WebAPI (REST Services/HTTP Services/Microservices)
 ASP.NET Core 1.x/2.x
 .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 Core 2.1 Update
 ASP.NET Core 1.x/2.x Update - die Neuerungen gegenüber ASP.NET 4.5 und ASP.NET MVC 5/ASP.NET Web API 5
 .NET Core 2.0 Update
 node.js - Entwicklung hoch-skalierbarer Webanwendungen mit JavaScript (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 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 und JavaScript (oder TypeScript): Moderne Web 2.0-/HTML5-Browser-Webanwendungen und Mobilanwendungen entwickeln
 Umstieg von .NET auf moderne Webtechniken (Single-Page-Web-Applications mit HTML, CSS, JavaScript/TypeScript, Angular u.a.)
 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 MVC, WebAPI, HTML5/CSS3 und JavaScript-/TypeScript-Frameworks
 Unit Testing / Testgetriebene Entwicklung / Test Driven Development (TDD) in JavaScript/TypeScript
 Basiswissen 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 .NET Core und Angular;.NET Core;ASP.NET Core;JavaScript;TypeScript;Angular  Gesamter Schulungsthemenkatalog

Bücher zu .NET Core Und Angular:
 Alle unsere aktuellen Fachbücher