MiracleListClient

Dies ist eine Beispielanwendung für eine Cross-Platform-Anwendung auf Basis einer Single-Page-Webapplication (SPA). MiracleList dient der Aufgabenverwaltung.

Live-Systeme in der Cloud:

• Backend: https://miraclelistbackend.azurewebsites.net
• Web-Frontend TypeScript/Angular: http://www.miraclelist.net
• Web-Frontend C#/Blazor Server: http://miraclelist-bs.azurewebsites.net
• Web-Frontend C#/Blazor WebAssembly: http://miraclelist-bw.azurewebsites.net
• Windows-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-win32-x64.rar
• MacOS-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-darwin-x64.rar
• Linux-Client TypeScript/Angular/Electron: https://Miraclelist.azurewebsites.net/download/MiracleListElectron-linux-x64.rar

Quellcode:

• Backend .NET Core: https://github.com/HSchwichtenberg/MiracleListBackend
• Frontend TypeScript/Angular: https://github.com/HSchwichtenberg/MiracleListClient
• Frontend C#/Blazor: http://leanpub.com/blazor50 (in den Downloads zu diesem Buch)

Eingesetzte Techniken:

• Backend: .NET Core, C#, ASP.NET Core WebAPI, Entity Framework Core, SQL Azure, Azure Web App, Swagger, Application Insights
• Frontend: HTML, CSS, TypeScript, Angular, Bootstrap, MomentJS, angular2-moment, ngx-contextmenu, ngx-modialog, ngx-translate, ng-pick-datetime, ng2-dnd

Versionsgeschichte:

• 0.1: Basisversion mit Aufgaben anlegen und bearbeiten
• 0.2: Benutzerverwaltung, Kategorien verwalten
• 0.3: Suchfunktion, fällige Aufgaben
• 0.4: Aufwand als Zusatzeigenschaft
• 0.5: Electron-Client
• 0.6: Cordova-Client, Aufgaben sind sortierbar
• 0.6.1: Verbesserte Navigation auf kleinen Displays
• 0.6.2: Umstellung auf API v2 mit HttpInjector
• 0.6.3: Ständige Aktualisierung des Server-Status, zusätzliche Menüpunkt in Electron-App
• 0.6.4: Dateisystemexport in Cordova-App
• 0.6.5: Umstellung auf Angular 5.2.2
• 0.6.6: Anzeige Release Date
• 0.6.7: Umstellung auf Electron 6.0.7

Package Restore

Die notwendigen NPM-Module (ca. 500 MB) sind nicht enthalten. Sie müssen diese mit npm install wiederherstellen!

Dieser Befehl muss 3x ausgeführt werden

• im Hauptverzeichnis
• im Verzeichnis /Electron für die speziellen Node-Pakete für Electron
• im Verzeichnis /Cordova für die speziellen Node-Pakete für Cordova

Hilfe zum Electron-Client

Voraussetzungen: npm install electron for use from cli npm install electron-packager -g for use in npm scripts npm install --save-dev electron-packager

Übersetzen und starten: npm run w-electron (w für AUSFÜHRUNG auf Windows, m für Mac)

Pakete erstellen: npm run w-electron-deployallprod

Hilfe zum Cordova-Client

Cordova global installieren: install -g cordova

Verzeichnis wechseln cd ./Cordova/

Angular-Webanwendung ins Verzeichnis "Cordova/www" übersetzen: npm run build-ng oder npm run build-ng-prod

Platform hinzufügen: cordova platform add android usw.

Übersetzen: cordova build android usw.

Starten: cordova run browser oder cordova run windows oder cordova run android -device usw.

Geräteliste: cordova run android --list

Optional: Plug-In ergänzen: cordova plugin add cordova-plugin-device

Angular-CLI

Dieses Projekt wurde mit angular-cli erzeugt mit Version 1.0.0-beta.24. Es wurde später auf Angular-CLi v1.5.x aktualisiert.

Es folgt die Original-Readme-Datei von Angular-CLI

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

ng build --target=production --environment=prod

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Further help

To get more help on the angular-cli use ng help or go check out the Angular-CLI README.

Produktionsbuild und Hosting

ng build --prod http-server ./dist