Webentwicklung mit Angular, Teil 1: Grundgerüst, Zugriff auf Webservices, Templates
Die 100-Millionen-Dollar-App
Angular ist ein leistungsfähiges Framework zur Entwicklung komplexer Single-Page-Applikationen. Im ersten Teil dieses dreiteiligen Tutorials entsteht die Projektgrundstruktur für eine Aufgabenverwaltung, die auf einen REST-Dienst zugreift.
Im Jahr 2015 zahlte Microsoft für die Übernahme des Berliner App-Herstellers Wunderlist mehr als 100 Millionen US-Dollar. Dieses dreiteilige Tutorial stellt sich der Herausforderung, die Webanwendung www.wunderlist.com, eine leistungsfähige Aufgabenverwaltung, in ihren Kernfunktionen nachzubauen. Dabei kommen neben der aktuellen Version von TypeScript [1] und Angular [2] diverse Webbibliotheken wie Bootstrap, jQuery und MomentJS zum Einsatz.
In MiracleList kann der angemeldete Benutzer mehrere 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 Wichtigkeitsgrade (A, B, C) sowie eine Aufwandsabschätzung besitzen. Bewusst besitzt der Aufwand keine Maßeinheit; der Benutzer kann selbst entscheiden, ob er ihn in Stunden, Tagen oder nur in relativen Werten wie 1 für niedrig bis 10 für hoch angeben will. Wie bei Wunderlist kann eine Aufgabe Teilaufgaben besitzen, wobei eine Teilaufgabe aus einem Titel und einem Status besteht.
Das Ergebnis des Tutorials kann der geneigte Leser schon jetzt in Abbildung 1 und unter http://www.miraclelist.net betrachten. Einige Details, die das Original noch zusätzlich beherrscht (beispielsweise das Hochladen von Dateien zu Aufgaben, die Suche nach Hashtags, das Duplizieren und Drucken von Listen sowie der Aufgabenaustausch zwischen Benutzern), müssen hier aus Platzgründen unberücksichtigt bleiben. Auch hinsichtlich der Gestaltung gibt es noch Optimierungspotenzial – dieses Tutorial richtet sich an Softwareentwickler, nicht an Webdesigner.
Das Backend ist schon da
Das Backend für die MiracleList existiert bereits unter https://miraclelistbackend.azurewebsites.net. Es läuft mit C# 6.0 und .NET Core [3] und nutzt SQL Azure als Datenbank, Entity Framework Core als OR-Mapper [4] und ASP.NET Core als Webserver-Framework [5]. Das Backend ist als „Web App“ in Microsofts Azure-Cloud gehostet. Das aus vier Klassen und einem Aufzählungstyp bestehende Objektmodell zeigt Abbildung 2.
Das MiracleList-Backend stellt folgende HTTPS-basierten REST-Dienste bereit:
– POST /Login: Anmeldung mit einer Client-ID, einem Benutzernamen und einem Kennwort. Die Login-Operation sendet eine GUID als Sitzungstoken zurück, das allen Operationen mitzugeben ist.
– GET /Logoff/{token}: Abmelden des Benutzers.
– GET /CategorySet/{token}: Liste der Kategorien.
– GET /TaskSet/{token}/{id}: Liste der Aufgaben in einer Kategorie.
– GET /Task/{token}/{id}: Details zu einer Aufgabe mit Teilaufgaben.
– GET /Search/{token}/{text}: Volltextsuche in Aufgaben und Teilaufgaben.
– GET /DueTaskSet/{token}: Liste der fälligen Aufgaben.
– POST /CreateCategory/{token}/{name}: Anlegen einer Kategorie.
– POST /CreateTask/{token} und PUT /ChangeTask/{token}: Erstellen und Ändern einer Aufgabe, die im Body inklusive Teilaufgaben im JSON-Format zu übermitteln ist.
– DELETE /DeleteTask/{token}/{id}: Löschen einer Aufgabe mit allen Teilaufgaben.
– DELETE /DeleteCategory/{token}/{id}: Löschen einer Kategorie mit allen Aufgaben und Teilaufgaben.
Für alle REST-Operationen sind Metadaten in der Swagger-OpenAPI-Spezifikation für REST-APIs verfügbar. Die formale Beschreibung der REST-Dienste und eine Hilfeseite findet man über den Link „Swagger-OpenAPI-Syntax“ auf https://miraclelistbackend.azurewebsites.net/. Das Backend unterstützt zudem Cross-Origin Requests (CORS), um Websites, die auf beliebigen anderen Domains gehostet sind, den Zugang zu ermöglichen.
Die beim Login anzugebende Client-ID muss jeder Client-Entwickler für seine App einmalig unter https://miraclelistbackend.azurewebsites.net/iX anfordern. Für dieses Tutorial ist die Anzahl der Aufgaben pro Client-ID auf 1000 begrenzt. Das explizite Anlegen eines neuen Benutzerkontos ist nicht notwendig: Wenn der beim Login übermittelte Benutzer noch nicht vorhanden ist, wird er automatisch neu angelegt. Jedes neue Benutzerkonto besitzt dabei zum Start drei Beispielkategorien (Beruf, Haushalt und Freizeit) mit einigen Beispielaufgaben.
Es geht los mit Codegenerierung
Ein Angular-Projekt von Grund auf zu erstellen, ist mit viel Tipparbeit verbunden. Helfen können Codegeneratoren wie Yeoman.io. Im Folgenden kommt das Kommandozeilenwerkzeug „Angular CLI“ des Angular-Entwicklungsteams zum Einsatz. Dafür ist zunächst eine aktuelle Version von Node.js einzurichten, um dann Angular CLI mit dem Node Package Manager zu installieren:
npm install -g angular-cli
Nun legt das Kommandozeilenwerkzeug ng in einem leeren Ordner ein neues Projekt an:
ng new MiracleListClient
Dabei wird nicht nur das neue Verzeichnis MiracleListClient mit zahlreichen Dateien angelegt (siehe Abbildung 4), sondern es wandern auch mehrere Hundert Node.js-Pakete auf die Festplatte.
Seit Version Beta 14 verwendet Angular CLI das Modulsystem Webpack, auch wenn die Angular-Dokumentation derzeit noch SystemJS beschreibt. Die bei Webpack übliche Datei webpack.config.js findet man in den generierten Dateien nicht; Angular abstrahiert von Webpack und konfiguriert den Paketinhalt über die Datei angular-cli.json. In dem generierten Projekt sind TypeScript als Sprache, Git zur Quellcodeverwaltung, Karma für Unit-Tests und Protractor für Browser-Tests voreingestellt.
Die wichtigsten Dateien in dem generierten Projekt sind
– package.json: Listet die direkt verwendeten NPM-Pakete. Deren Abhängigkeiten sind hier nicht aufgeführt.
– angular-cli.json: Konfiguration für einzubindende CSS- und JavaScript-Dateien, statische Dateien sowie Einsprungpunkte in die Anwendung.
– src/tsconfig.json: Konfiguration für das Transpilieren zu JavaScript.
– src/index.html: Fast leere Grundstruktur der HTML-Seite mit dem Tag, das Angular durch die Ausgabe von app.component.ts ersetzt.
– src/main.ts: Einsprungpunkt in die Angular-Anwendung.
– src/polyfills.ts: Registrierung von Polyfills, deren NPM-Pakete vorliegen und die in den Browser integriert werden sollen, um dort Funktionen von aktuellen Webstandards zu emulieren (insbesondere für ältere Browser).
– src/app/app.module.ts: Hauptmodul der Anwendung. Hier registriert der Entwickler alle Komponenten, Direktiven, Pipes und zu injizierenden Dienste.
– src/app/app.component.ts: Realisiert die mit @Component dekorierte Komponentenklasse für das Tag <app-root>.
– src/app/app.component.html: Enthält die Darstellung für <app-root>.
– src/styles.css (für alle Komponenten) und src/app.component.css (für app.component.html) sind zunächst leer.