Echtes Cross-Platform mit HTML5 und JavaScript

HTML5 hat die Karten bei der Anwendungsentwicklung komplett neu gemischt. Der Webstandard enthält viel mehr als nur neue Struktur- und Formularelemente oder die Wiedergabe von Audio und Video ohne Plugin – und läuft zudem auf allen denkbaren Plattformen.

Im Zusammenspiel mit JavaScript und CSS3 bringt HTML5 viele Funktionen, die lange Zeit nur nativen Anwendungen vorbehalten waren, auch ins Web: Offlinefähigkeit, clientseitige Datenhaltung, 2D- und 3D-Animationen oder standortbezogene Dienste sind nur wenige Beispiele für die neuen Möglichkeiten, die sich durch moderne Webstandards eröffnen.

Mithilfe von Apache Cordova und GitHub Electron kann eine zum Beispiel mit Angular geschriebene App mit einem Mausklick für viele verschiedene Desktop- und Mobilplattformen gebaut werden. Christian Liebel und Manuel Rauber zeigen Ihnen anhand einer Beispielanwendung, wie und mit welchen Tools ansprechende Apps auf Basis von HTML5 heute entwickelt werden, ohne auf Touch-Interaktion, flüssige Effekte oder native Funktionen verzichten zu müssen – von der ersten Codezeile bis zum fertigen App-Paket für verschiedenste Plattformen.

Transcript

1. Christian Liebel @chris_liebel christian.liebel@thinktecture.com Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Manuel Rauber @ManuelRauber manuel.rauber@thinktecture.com
2. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! https://www.thinktecture.com Sprecher Christian Liebel Manuel Rauber
3. Was Sie nicht erwartet Masterplan zur App-Entwicklung für jeden Anwendungsfall Wunderschön aufgehübschte Anwendung Production-Ready Code Was Sie erwartet Rundumschlag zu den Themenfeldern Cross-Platform- Entwicklung und Angular Sie implementieren aktiv mit: HTML, TypeScript – hier werden Ihre Hände schmutzig Ihre App landet (mit etwas Glück) auf Ihrem Smartphone/Tablet Hands-on! Echtes Cross-Platform mit HTML5 und JavaScript
4. Prepare it Code it Build it Deploy it Echtes Cross-Platform mit HTML5 und JavaScript Hands-on!
5. 09:00–10:45 Prepare it 10:45–11:15 Pause 11:15–13:00 Code it 13:00–14:00 Mittagessen 14:00–15:00 Build it 15:00–15:30 Kuchenbuffet 15:30–17:00 Deploy it Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Zeitplan
6. 09:00–10:45 Prepare it 10:45–11:00 Pause 11:00–13:00 Code it 13:00–13:45 Mittagessen 13:45–15:00 Build it 15:00–15:30 Kuchenbuffet 15:30–16:30 Deploy it Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Zeitplan (Vorschlag)
7. Willkommen Echtes Cross-Platform mit HTML5 und JavaScript Hands-on!
8. Prepare it • Cross-Platform • HTML5, CSS3, JavaScript • Zielarchitektur Code it • TypeScript • Angular Build it • Electron • Cordova Deploy it • Windows, macOS, Linux • iOS, Android • Ausblick Echtes Cross-Platform mit HTML5 und JavaScript Hands-on!
9. Nintendo DS Windows Windows Mobile iOS Android BlackBerry 10 FireOS macOS Linux Fernseher Kühlschrank Browser Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Single-, Multi- und Cross-Plattform Cross-Plattform == Cross-Plattform?
10. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! „Das sieht ja aber gar nicht wie eine native Anwendung aus!“
11. Creating real cross-platform applications Angular, Cordova & Electron https://spotifyblogcom.files.wordpress.com/2014/12/overview.png
12. Creating real cross-platform applications Angular, Cordova & Electron http://media.idownloadblog.com/wp-content/uploads/2014/06/Google-Docs-Sheets-Slides-teaser-001.jpg
13. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Single-Page Web Applications Cross-Platform-Technologiestack
14. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Auszeichnungssprache Bringt native Plattform-Features ins Web • Umfassendere Eingabe- und Steuerelemente • Audio-/Video-Wiedergabe ohne Plugin • Hardwarebeschleunigte 3D-Inhalte ohne Plugin • Gamepad-Steuerung, Mikrofoneingabe ohne Plugin • Lokaler Speicher (Key-Value-Speicher, Datenbanken, …) HTML5
15. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Umfassende Möglichkeiten zur Gestaltung von Web-Apps • 3D-Transformationen • Animationen • Zustandsübergänge • Responsive Layout CSS3
16. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Programmiersprache des Web Sehr flexibel • Dynamisch typisiert • Prozedural, objektorientiert oder funktional programmierbar Standardisierte Variante: ECMAScript Aktuellste Version: ECMAScript 2016 JavaScript
17. Web APIs Push Services Offlineunterstützung Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Zielarchitektur
18. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Zielarchitektur
19. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Modellierung & Implementierung fachlicher Services • Logik raus aus dem Button1_Click()! Echtes Cross-Plattform braucht interoperable, leichtgewichtige Schnittstellen • HTTP als Basis • Aber: Sicher! Unterstützung auf allen möglichen Technologieplattformen • ASP.NET Web API, Node.js, … Web APIs
20. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! HTTP implementiert eine explizite Request-basierte Kommunikation Realität: Request-basiert + Push • Instant Messaging • Datensatzaktualisierungen Frameworks wie ASP.NET SignalR, Socket.IO, … Push Services
21. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Heute kann überall ein Arbeitsplatz sein (Hotel, Zug, Park, …) Aber: Nicht überall gibt es (schnelles) Internet Apps müssen auch diese Situationen mitmachen! Daher: Lokale Datenhaltung, Synchronisation HTML5 Web Storage API, WebSQL, IndexedDB, … Offline-Unterstützung
22. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Wir schreiben heute eine App… • auf Basis von Angular, TypeScript und HTML • die sich an die Bildschirmabmessungen anpasst (Responsive Design) • auf unterschiedlichen Geräten und Plattformen funktioniert (Cross-Platform) Demo LIVE DEMO
23. Und jetzt Sie! git clone https://github.com/thinktecture/ddf-xplatform- workshop.git cd ddf-xplatform-workshop npm install # or yarn (if installed) # Hat es geklappt? ng version npm start Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Repository-Setup
24. git pull git reset --hard Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Hilfreiche Git-Befehle
25. Prepare it • Cross-Platform • HTML5, CSS3, JavaScript • Zielarchitektur Code it • TypeScript • Angular Build it • Electron • Cordova Deploy it • Windows, macOS, Linux • iOS, Android • Ausblick Echtes Cross-Platform mit HTML5 und JavaScript Hands-on!
26. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! TypeScript
27. Creating real cross-platform applications Angular, Cordova & Electron macOS iOS Windows Mobile Android Windows Desktop Windows 10/UWP Linux Browser
28. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Open-Source-Entwicklung von Microsoft Superset von JavaScript Statische Typisierung Bietet diverse Features von ECMAScript 2017+ Transpilierung nach JavaScript TypeScript Compiler CLI Vielseitiger IDE Support: Visual Studio (Code), WebStorm/IntelliJ IDEA, Atom, … TypeScript
29. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! und die Features von Morgen Statische Typisierung ermöglicht besseres Refactoring Statische Code-Analyse und Typenprüfung Bessere Code Completion Syntaktischer Zucker Async/Await Operators Generics Decorators TypeScript
30. AngularJS vs. Angular 2 vs. Angular AngularJS Erste Ausgabe (2009), geschrieben in JavaScript Angular 2 Vollständiger Rewrite (2016), geschrieben in TypeScript Angular “It’s just Angular!” Semantische Versionierung, zeitbasierter Releaseplan (Mar 23, 2017: Angular 4, Sep/Oct 2017: Angular 5) AngularXYZ? Hands-on! Echtes Cross-Platform mit HTML5 und JavaScript
31. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Motivation Open-Source-Projekt von Google Die Entwicklungsplattform für Desktop- und Web-Apps Ein Framework für Web und Mobile optimiert Angular CLI: Zentraler Ausgangspunkt für Angular-Projekte Angular
32. Features Besonders einfaches und schnelles Setup Keine Konfiguration Unterstützung für E2E- und Unit-Tests Der zentrale Ausgangspunkt unter anderem • zum Lernen von Angular • für schnelle Ergebnisse Angular CLI Hands-on! Echtes Cross-Platform mit HTML5 und JavaScript
33. Verwendung Bootstrapping • ng new project Scaffolding • ng generate component foo Buildprozess • ng build Entwicklungsserver • ng serve Angular CLI Hands-on! Echtes Cross-Platform mit HTML5 und JavaScript
34. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Ziele Performance Mobile Flexibilität Einfach zu lernen Angular
35. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Komponentenorientierung Erlaubt Entwicklung nach dem MV*-Entwurfsmuster Ziel: Reusability, Skalierung Konstrukte • Komponente: Abgeschlossener und wiederverwendbarer Softwarebaustein • eigene UI • eigenes Routing, … • Service: Wiederverwendbare Klassen ohne UI • Bspw. für clientseitige Businesslogik Angular
36. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Und jetzt Sie! Binden Sie das Poké API (https://pokeapi.co/) in die Anwendung ein. Auf den folgenden Slides finden Sie zusätzliche Informationen zu allen Punkten, die Sie beachten müssen: 1. Datenmodell 2. Service 3. Komponente 4. Routing 5. Verlinkung im Menü Poké API
37. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Datenmodell • Daten sind der eigentliche Kraftstoff jeder App. Im nächsten Schritt wollen wir mit der PokéAPI einen Webservice anbinden, der uns diese Daten liefert. Einer der Vorteile von TypeScript ist die optionale statische Typisierung. In TypeScript können Sie die Datenstruktur mithilfe von Interfaces oder Klassen modellieren. • Legen Sie ein Interface für ein Pokémon an: ng generate interface <name> • Die Eigenschaften eines Pokémon können Sie sich auf der Website zur PokéAPI anschauen: https://pokeapi.co/ • Gibt es Tools, die eine TypeScript-Klasse oder ein -Interface aus JSON-Daten heraus generieren können? Poké API
38. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service • Das Konstrukt, um wiederverwendbare nicht-UI-bezogene Funktionalität in Angular zu kapseln, wird als Service bezeichnet. Services dienen der horizontalen Segmentierung Ihrer Anwendung. Denken Sie sich einen Service als Gegenstück zu Ihrem Controller in ASP.NET MVC: Er schachtelt alle HTTP-Anfragen, die zu einem bestimmten Teilbereich Ihrer Problemdomäne gehören. • Legen Sie einen Service zum Zugriff auf die PokéAPI an: ng generate service <name> • Folgende Liste muss beim Entwickeln des Services beachtet werden, welche auf den nachfolgenden Slides beschrieben sind: • Injecting des HTTP-Services • Abruf der Pokémon-Liste • Abruf eines einzelnen Pokémons • Einhängen des Services in die Dependency Injection Poké API
39. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Injecting des HTTP-Services Zum Konsumieren von Abhängigkeiten können Sie sich diese einfach in Ihren Konstruktor einreichen lassen. Die Konstruktorinjektion ist typbasiert. Der HTTP-Service, der von Angular bereitgestellt wird, heißt "Http". Lassen Sie sich diesen in Ihren neuen Service einreichen. Zu aller Not können Sie beim StarWarsService spicken. Poké API
40. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Abrufen der Pokémon-Liste • Entwickeln Sie eine Methode "list()", welche eine Liste aller Pokémon abruft. Welcher Endpunkt zu wählen ist, erfahren Sie auf https://pokeapi.co/ • Der Http-Service kapselt die verschiedenen HTTP-Verben (GET, POST, etc.) durch gleichnamige Methoden: Http.get() • Diese Methode liefert ein Observable zurück. Darunter versteht man einen (oder mehrere) Wert(e), die erst in der Zukunft feststehen. Ein Observable hat einen generischen Typparameter: Http.get() liefert etwa ein Observable zurück, das eine HTTP-Response enthält. Um auf die Nutzlast der Antwort zuzugreifen, müssen Sie diese zunächst entsprechend der Antwort des Servers transformieren. Die Poké API gibt JSON zurück, aber es könnte auch Plain-Text sein. • Hierbei hilft Ihnen der Rx.js-Operator map: return http.get(…).map(response => response.json()) • Geben Sie das Ergebnis als Observable einer Liste von Instanzen des Interfaces, das sie vorhin definiert haben, zurück. Das geht ganz einfach: public list(): Observable<Pokemon[]> { … } – ein Type-Cast ist hier nicht erforderlich. Poké API
41. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Abrufen eines einzelnen Pokémons • Entwickeln Sie analog zu oben eine Methode "get()", die ein bestimmtes Pokémon unter Angabe seiner Nummer im nationalen Pokédex (seiner ID). • Die Implementierung wird sich ähnlich gestalten wie bei der Liste, nur dass diesmal eine ID übergeben und die URL entsprechend zusammengesetzt werden muss. • Zum Konkatenieren von Zeichenketten gibt es ab ECMAScript 2015 die sogenannten Templateliterale. Auch in .NET sind sie bekannt, denn dort haben sie mit C# 6 unter dem Namen String Interpolation Einzug gehalten, wenn auch mit abweichender Syntax. In JavaScript geht das so: `http://example.com/${id}` – Achten Sie auf die Backticks. • Beachten Sie ebenfalls, dass sich der generische Typparameter des Observable ändert: Wir geben nun kein Array, sondern einen einzelnen Datensatz zurück. Poké API
42. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Konfiguration der Dependency Injection Haben Sie beim Erstellen des Services über die Angular CLI die Warnung entdeckt? Die Angular CLI bindet den Service standardmäßig nicht in Ihre Anwendung ein. Stellen Sie nun den Service über die Dependency-Injection bereit. Finden Sie in der Datei module.ts die richtige Stelle? Poké API
43. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Komponente • Der Begriff der Komponente ist so alt wie der Begriff des Software-Engineering selbst. Unter einer Komponente versteht man wiederverwendbare, einfach kombinierbare Softwarebausteine. Im Falle von Angular sind diese UI-bezogen. Sie bringen also ein eigenes Template mit. Erzeugen Sie eine neue Komponente über die Angular CLI: ng generate component pokemonList • Angular CLI hängt die Komponente freundlicherweise bereits in das Modul ein – im Gegensatz zum Service. Poké API
44. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Komponente – Listenanzeige • Auch in Komponenten können Sie sich Abhängigkeiten einreichen lassen: Wieder über den Konstruktor und wieder über die Verwendung des Typs – hier also Ihrer Service-Klasse. • Legen Sie ein Feld an: public pokemon: Observable<Pokemon[]>. • Führen Sie im Konstruktor folgende Zuweisung durch: this.pokemon = pokemonService.list(); • Kommen wir nun zum zugehörigen HTML-Template Ihrer Komponente: Legen Sie dort eine unsortierte Liste (ul) an und legen sie einen Listeneintrag (li) hinein. Zeichnen Sie das li-Element mit der Direktive *ngFor="let item of pokemon | async" aus. • Die async-Pipe wartet darauf, dass der Netzwerkrequest abgeschlossen wird. Sobald das der Fall ist, werden die Pokémon angezeigt und das li-Element für jedes Pokémon wiederholt. • Innerhalb des li-Tag können Sie nun Data-Binding anwenden. Das geht mithilfe der Moustache- Syntax: {{ item.name }} • Zeigen Sie mindestens Namen, Gewicht und Größe des Pokémon in der Liste an. • Sie können Ihre Komponente ausprobieren, indem Sie diese in Ihre HomeComponent einbetten: <app-pokemon-list></app-pokemon-list> Poké API
45. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Komponente – Detailanzeige • Führen Sie nun ähnliche Schritte auch zur Implementierung einer Detail-Komponente durch. • Diesmal benötigen Sie aber keine Liste, sondern zeigen Details zu einem bestimmten Datensatz an. Da wir Databindung nur dann anwenden können, wenn auch ein Datensatz geladen wurde, schalten Sie die Anzeige der Daten nur bei Vorhandensein eines Datensatzes an: <div *ngIf="pokemon | async as pokemon">{{ pokemon.name }}</div> • Innerhalb des "div" können Sie sicher auf das Pokémon zugreifen. Zeigen Sie mindestens Name, Gewicht, Größe und den Basiserfahrungswert an. • Verwenden Sie zum Abrufen von Daten zunächst eine statische ID, zum Beispiel 151 für Mew. Poké API
46. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Routing – Liste • Routing ist ein elementarer Bestandteil von Single-Page Web Applications. Fügen Sie in der Datei routes.ts eine neue Route für die Listenansicht der Pokémon-Liste ein. Parameter werden mit führendem Doppelpunkt (:) deklariert. • Falls nötig, lassen Sie sich inspirieren von der Route zur StarWars-API. Vernachlässigen Sie dabei die Angabe von "model" und "page". • Sie können die korrekte Umsetzung prüfen, indem Sie in Ihrem Browser die neue Route eingeben. Poké API
47. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Routing – Detailseite • Legen Sie nun auch eine Route für die Detail-Ansicht eines Pokémon an. Falls nötig, lassen Sie sich inspirieren von der Route zur StarWars-API. Vernachlässen Sie dabei die Angabe von "model". Die "id" wird allerdings benötigt. • Innerhalb Ihrer Komponente pokemonDetail müssen Sie nun an die ID kommen, die in der Route eingegeben wurde. Zugriff auf die Parameter erhalten Sie über den Service mit dem Typ ActivatedRouteSnapshot. Dieser Service bietet die Eigenschaft "params", auf dem die URL- Parameter abgelegt sind. Starten Sie abhängig davon die Abfrage gegen Ihren Pokémon- Service. • Sie können die korrekte Umsetzung prüfen, indem Sie in Ihrem Browser die neue Route eingeben. • Schauen Sie sich die Angular-Dokumentation zu "routerLink" an. Wie können Sie aus der Pokémon-Liste heraus auf die einzelnen Einträge verlinken? Poké API
48. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Verlinkung im Menü • Abschließend wollen wir die Pokémon-Liste noch im Menü referenzieren. • Navigieren Sie dazu zur Datei src/app/components/menu/menu.html • Fügen Sie einen neuen Menüeintrag analog zu den übrigen Menüeinträgen hinzu. Poké API
49. Prepare it • Cross-Platform • HTML5, CSS3, JavaScript • Zielarchitektur Code it • TypeScript • Angular Build it • Electron • Cordova Deploy it • Windows, macOS, Linux • iOS, Android • Ausblick Echtes Cross-Platform mit HTML5 und JavaScript Hands-on!
50. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! • Nativer Anwendungsrahmen mit integriertem Web Browser • Android: Android spezifischer Browser / CrossWalk • iOS: UIWebView / WKWebView • Windows Mobile: Internet Explorer / Edge • HTML5 Anwendung wird innerhalb des integrierten Web Browsers gehostet • Der Anwendungsrahmen erlaubt Zugriff auf darunterliegende native Platform APIs via Plugins • Native SDKs werden zum Bauen der Apps benötigt Cordova
51. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Cordova Architektur Cordova Application Single-Page Application HTML JS CSS Assets Cordova Plugins Geolocation Notifications Media Camera Custom Plugins HTML Rendering Engine (WebView) Cordova Native APIs Cordova APIs HTML APIs Mobile OS Android iOS Windows 10 UWP and more… OS APIs OS APIs
52. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! • Erlaubt das Erstellen von echten Desktop Anwendungen (.exe, .app) • Kombiert einen “full-blown” Chomium Browser mit Node.js • Anwendung ist nicht abhängig von installierten Browsern des Zielgeräts • Benötigt keine nativen SDKs zum Bauen der Anwendung • Ermöglicht Zugriff auf native Plattform APIs • Electron API • Node.js Module • Bringt Features wie ein Auto-Updater oder einen Crash-Reporter mit Electron
53. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Electron Architektur Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.js) macOS Windows Linux Single-Page Application Electron API Custom Node.js modules IPC Remote Node.js
54. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Und jetzt Sie! Eines der wichtigsten Features: Teilen Bilder, Links, … weitergeben an Freunde und Bekannte Wir wollen Pokémon teilen! Teilen mit Freu(n)den
55. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Plattformerkennung • Entwickeln Sie einen Service "PlatformService" mit drei statischen Methoden, die zur Bestimmung der Plattform genutzt werden können: • "isBrowserApplication()": Liefert einen boolschen Wert, der true ist, wenn die Anwendung in einem Browser läuft. • "isCordovaApplication()": Liefert einen boolschen Wert, der true ist, wenn die Anwendung in Cordova ausgeführt wird. • "isElectronApplication()": Liefert einen boolschen Wert, der true ist, wenn die Anwendung in Electron ausgeführt wird. • Cordova schreibt auf das globale "window"-Objekt eine gleichnamige Property, wenn die Anwendung in Cordova ausgeführt wird. • Bei Electron lässt sich mit Hilfe des User Agents und dem Vorhandensein des Strings "Electron" prüfen, ob die Anwendung in Electron ausgeführt wird. Teilen mit Freu(n)den
56. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Schnittstellendefinition • Entwickeln Sie einen abstrakten Service, der die Schnittstelle zum Teilen von Inhalten definiert. • Definieren Sie ein abstrakte Methode "share()", die einen Titel und eine Beschreibung als String entgegennimmt. Teilen mit Freu(n)den
57. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Teilen im Browser • Entwickeln Sie Service, der den abstrakten Share Service ableitet und implementieren Sie die Methode "share()". • Im Falle des Browsers soll das E-Mail-Programm des Benutzers geöffnet werden und sowohl Titel als auch Inhalt der E-Mail vorausgefüllt werden. • Das E-Mail-Programm können Sie mit einem "mailto:"-Link öffnen. Teilen mit Freu(n)den
58. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Konfiguration der Dependency Injection • Entwickeln Sie eine Funktion "shareServiceFactory()", die eine Instanz des BrowserShareService erzeugt. • Fügen Sie diese Factory der Angular Dependency Injection hinzu: https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#factory-provider Teilen mit Freu(n)den
59. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Komponente – Erweiterung der Detailseite • Erweitern Sie die Detailseite mit einem "Share to a friend"-Button. • Bei Klick auf diesen Button soll eine Methode "share()" ausgeführt werden. • Die Methode "share()" benutzt den ShareService, um den Inhalt zu teilen. • Vergessen Sie nicht, den Service via Konstruktorinjektion anzufordern. Teilen mit Freu(n)den
60. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Teilen auf mobilen Geräten • Entwickeln Sie einen Service, der den abstrakten Share Service ableitet und implementieren Sie die Methode "share()". • Im Falle einer Cordova-basierten Ausführung kann die native "Teilen"-Oberfläche des Geräts benutzt werden. • Die Anwendung integriert bereits ein Plugin, um die native "Teilen"-Oberfläche anzusprechen: https://www.npmjs.com/package/cordova-plugin-x-socialsharing • Benutzen Sie die Funktionen des Plugins, um über JavaScript mit der nativen Funktion zu sprechen. • Erweitern Sie Ihre ShareServiceFactory und erzeugen Sie eine Instanz vom "CordovaShareService", wenn Sie erkennen, dass die Anwendung in Cordova ausgeführt wird. Teilen mit Freu(n)den
61. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Zugriff auf den Desktop • Entwickeln Sie einen Service, um Zugriff auf Electron zu erhalten. • Sie erhalten Zugriff auf Electron, in dem Sie die auf dem "window"-Objekte definierte Methode "require()" aufrufen und ihr als Parameter den Wert "electron" übergeben. • Achtung: Die Methode "require()" steht nur zur Verfügung, wenn die Anwendung in Electron ausgeführt Teilen mit Freu(n)den
62. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Service – Teilen auf dem Desktop • Entwickeln Sie einen Service, der den abstrakten Share Service ableitet und implementieren Sie die Methode "share()". • Im Falle einer Electron-basierten Ausführung soll, wie im Falle des Browsers, das E-Mail- Programm geöffnet werden. • Probieren Sie die Anwendung in Electron mit dem BrowserShareService aus. Was stellen Sie hier fest? • Benutzen Sie den ElectronService, um Zugriff auf "shell" zu erhalten, um externe Links zu öffnen: https://github.com/electron/electron/blob/master/docs/api/shell.md • Erweitern Sie Ihre ShareServiceFactory und erzeugen Sie eine Instanz vom "ElectronShareService", wenn Sie erkennen, dass die Anwendung in Electron ausgeführt wird. • Aufgemerkt: Ihre ShareServiceFactory benötigt eine Abhängigkeit, um den ElectronShareService zu erzeugen. Teilen mit Freu(n)den
63. Prepare it • Cross-Platform • HTML5, CSS3, JavaScript • Zielarchitektur Code it • TypeScript • Angular Build it • Electron • Cordova Deploy it • Windows, macOS, Linux • iOS, Android • Ausblick Echtes Cross-Platform mit HTML5 und JavaScript Hands-on!
64. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Zusammenfassung Windows 10 Mobile iPhone, iPad Android Windows Store Windows Desktop Linux macOS App Node.js npm Gulp TypeScript ECMAScript 2016 HTML5 CSS3 Restify Token-Authentication SequelizeJS SQLite Electron NW.js Apache Cordova TACO Tools Angular Chrome Safari Firefox Edge WebStorm VS Code Atom vi Emacs Sublime Text Eine Codebasis ASP.NET Web API ASP.NET Core 1.0
65. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! CefSharp Push • Applikation • Plattform Touch-Interaktionen Native Integrationen Offline-Fähigkeit Progressive Web Apps Ausblick
66. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Basiert auf CEF (Chromium Embedded Framework) Wrapper um Chromium für WPF und WinForms als Web Browser Control Kommunikation zwischen .NET und JavaScript Code über dediziertes API Ermöglicht Migrationspfade • Anwendung nach und nach als SPA in JavaScript neu entwickeln • Oder nur Teilbereiche in der existierenden Anwendung in der neuen Welt bauen CefSharp
67. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Applikation Echtzeit-Daten-Push direkt in die Anwendungen Prinzip: Aufrechthalten einer Client-Serververbindung durch WebSockets • oder Fallback-Technologie, z.B. HTTP Long Polling Für aktive, laufende Applikationen ASP.NET SignalR oder socket.io Push
68. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Plattform Benutzung der nativen, herstellerspezifischen Push-Funktionen Bspw. Azure App Services kombiniert iOS, Windows 10 Mobile und Android Push Auch für inaktive Applikationen geeignet Push
69. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Native Touch Events vom Browser Abstraktion über hammer.js möglich Erkennung von Gesten • Pinch-to-Zoom • Rotate • Swipe Touchinteraktionen
70. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Integration plattformabhängiger APIs Native Menüs Geolocation Globale Shortcuts Integration nativer Funktionen
71. Echtes Cross-Platform mit HTML5 und JavaScript Hands-on! Synchronisieren der Daten in einen lokalen Speicher • WebSQL • IndexedDB • LocalStorage Bearbeiten der Daten ohne aktive Internetverbindung Synchronisation zurück zum Server nach Wiederherstellen einer Verbindung Offlinefähigkeit
72. Das Web wird nativ(er) • Die Idee: Wir brauchen keine App-Stores mehr • Web-App entspricht der App-App • Feature Parity: Native Experience mit Pushbenachrichtigungen, Offlineverfügbarkeit, … • Angetrieben von Google, auf Android schon heute verfügbar • Abwärtskompatibel (Progressive Enhancement) • Progressive Web Apps sind keine Technologie, sondern eine Sammlung von Eigenschaften Apps von morgen… Hands-on! Echtes Cross-Platform mit HTML5 und JavaScript
73. Vielen Dank! Fragen? Contact @chris_liebel christian.liebel@thinktecture.com @manuelrauber manuel.rauber@thinktecture.com