Eine Web- und Cross-Plattform-Desktop-Anwendung mit HTML, TypeScript und Angular
Das Architekturbeispiel "MiracleList" lÀuft sowohl im Browser als auch als Desktop-Client auf Windows, Linux und macOS sowie Android und iPhone/iPad.
Das Architekturbeispiel "MiracleList" lÀuft sowohl im Browser als auch als Desktop-Client auf Windows, Linux und macOS sowie Android und iPhone/iPad.
Im Jahr 2015 zahlte [1] Microsoft fĂŒr die Ăbernahme des Berliner App-Herstellers Wunderlist mehr als 100 Millionen US-Dollar. FĂŒr das kommende iX-Tutorial zu Angular (Ausgabe 4/2017 bis 6/2017) habe ich eine Ă€hnliche Aufgabenverwaltung als Architekturbeispiel fĂŒr eine moderne Cross-Platform-Anwendung mit Responsive Design programmiert: Die Beispielanwendung "MiracleList" gibt es sowohl als Single-Page-Webanwendung [2] als auch als Cross-Platform-Desktop-Anwendung fĂŒr Windows, Linux und macOS sowie als Mobilanwendung in Android, Windows Phone und iOS.
Eingesetzte Techniken:
- Backend: .NET Core [3], C#, ASP.NET Core WebAPI [4], Entity Framework Core [5], SQL Azure [6], Azure Web App, Swagger Open API [7]
- Frontend: HTML, CSS, TypeScript [8], Angular [9], Bootstrap [10], MomentJS, angular2-moment, angular2-contextmenu, angular2-modal, Electron [11], Cordova [12]
Die Implementierung stellen mein Kollege André KrÀmer [13] und ich am Donnerstag, den 2. MÀrz 2017, auf dem Infotag "Cross-Platform" in Oberhausen [14] im Detail vor.
Der folgende Screenshot zeigt MiracleList im Browser, der zweite auf dem Ubuntu-Desktop.
Eine Benutzeranmeldung bei dieser Beispielanwendung ist mit jeder beliebigen Kombination aus E-Mail-Adresse und Kennwort möglich. 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 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; Benutzer können selbst entscheiden, ob sie den Aufwand in Stunden, Tagen oder nur in relativen Werten, wie zum Beispiel "1" (fĂŒr niedrig) bis "10" (fĂŒr hoch), schĂ€tzen will.
Wie bei Wunderlist kann eine Aufgabe Teilaufgaben besitzen, wobei eine Teilaufgabe nur einen Titel und einen Status besitzt. Einige Details, die das Original noch zusĂ€tzlich beherrscht (z. B. das Hochladen von Dateien zu Aufgaben, die Suche nach Hashtags, das Duplizieren und Drucken von Listen sowie der Aufgabenaustausch zwischen Benutzern), mĂŒssen unberĂŒcksichtigt bleiben.
Teilnehmer des Infotags und Leser des iX-Tutorials werden zudem die Möglichkeit haben, selbst einen eigenen Client fĂŒr das Backend zu entwickeln. ( [15])
URL dieses Artikels:
https://www.heise.de/-3629904
Links in diesem Artikel:
[1] https://www.heise.de/news/Microsoft-uebernimmt-Berliner-Startup-6Wunderkinder-2678017.html
[2] https://miraclelist.azurewebsites.net
[3] http://www.entwickler-lexikon.de/NET_Core/lex/8013.aspx
[4] http://www.entwickler-lexikon.de/ASPNET_Core/lex/7899.aspx
[5] http://www.entwickler-lexikon.de/Entity_Framework_Core/lex/8501.aspx
[6] http://www.entwickler-lexikon.de/SQL_Azure/lex/5952.aspx
[7] http://www.dotnet-lexikon.de/OpenAPISpecification/lex/8895.aspx
[8] http://www.entwickler-lexikon.de/TypeScript/lex/6737.aspx
[9] http://www.entwickler-lexikon.de/Angular/lex/8740.aspx
[10] http://www.entwickler-lexikon.de/Twitter_Bootstrap/lex/8293.aspx
[11] http://www.entwickler-lexikon.de/Electron/lex/8610.aspx
[12] http://www.entwickler-lexikon.de/Cordova/lex/8611.aspx
[13] http://www.it-visions.de/about/experte.aspx/Akraemer
[14] https://www.it-visions.de/%5BQBLOG%5D/infotag
[15] mailto:hs@ix.de
Copyright © 2017 Heise Medien