Evaluation der Effizienz von Ionic

Präsentation zum Thema: "Evaluation der Effizienz von Ionic"—  Präsentation transkript:

1 Evaluation der Effizienz von Ionic
am Beispiel der Entwicklung einer hybriden Applikation mit Push Notifications Jill Kleiber

2 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

3 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

4 Tool zur hybriden Applikationsentwicklung Drifty/ Ionic
November 2013: erste Alphaversion November 2015: Version 1.0.0 September 2016: Version 2.0.0 AngularJS, Typescript Adobe Cordova, Apache Phonegap Code auf Webbasis Wird auf Platformen publiziert Adam Bradley und Ben Sperry Umbennenung Konzentration auf Ionic Version 1 und 2 strukturelle Unterschiede Version 2 benutzt Baut auf AngularJS 2 2 Wochen vorher erschienen Für Zugriff auf native Funktionen Jill Kleiber

5 Ionic – Voraussetzungen
NodeJS NPM Git CLI Cordova CLI Android SDK Xcode Laufzeitumgebung für Server- und Netzwerkanwendungen Paketverwaltungssystem von NodeJS Versionierungssystem Zum Installieren von Plugins Basis für Ionic CLI Für Entwicklung für Android Für Entwicklung für iOS Jill Kleiber

6 Ionic – Komponenten CLI Backend-Services Forum Ionicons Creator Market
Showcase Zentrale Bedienungsschnittstelle Push-Dienst, Nutzer Authentifizierung Hilfe Icons als Font statt Graphik Graphische UI für Layout Store für Plugins, Starter Präsentationsmöglichkeit für Apps Jill Kleiber

7 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

8 Extern konfigurierbarer Inhalt
Aufgabenanalyse App für iOS und Android Swipebares Hauptmenü Detailansicht Push Notifications Extern konfigurierbarer Inhalt Jill Kleiber

9 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

10 Anmeldung im Apple Developer Portal Erzeugung der/des
Setup – iOS Anmeldung im Apple Developer Portal Erzeugung der/des App ID Development Zertifikat Provisioning Profile Jill Kleiber

11 Erstellung eines Zertifikats über Android Keystore
Setup – Android Erstellung eines Zertifikats über Android Keystore In Java JDK enthaltenes Tool Name und Alias an App anpassen Jill Kleiber

12 Anmeldung mit Google Konto bei Firebase Console
Setup – Firebase Anmeldung mit Google Konto bei Firebase Console Erzeugung eines Projekts Auslesen des Server Schlüssels und Sender ID Jill Kleiber

13 Anlegen eines Benutzerkontos Registrierung der Zertifikate
Setup – Ionic Cloud Anlegen eines Benutzerkontos Registrierung der Zertifikate Firebase Server Key Android Zertifikat iOS Zertifikat Provisioning Profil Jill Kleiber

14 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

15 Ionic Projekt erzeugen Schnittstelle zur Cloud installieren
Umsetzung Ionic Projekt erzeugen Schnittstelle zur Cloud installieren App bei Ionic Cloud registrieren Plattformen hinzufügen Konfigurationen einstellen Konfiguration -> Development Token erlaubt Jill Kleiber

16 Umsetzung – Push Notifications
Phonegap-plugin-push Initiale Registrierung in app.component.ts Registrieren/Abmelden auf eigener Seite Registrationsstatus im Gerätespeicher Popupfenster Tokengenerierung, Cloudanbindung - Linkes oberes Bild Auslesen bei öffnen in app.component.ts Titel und Test (s. Bild) Jill Kleiber

17 Umsetzung – Hauptmenü Startseite Swiper Liste mit Links
Dynamisches Einlesen HomePage Ein Thema pro Folie Zum Thema relevante Unterthemen Aus JSON Datei eingelesen /generiert Jill Kleiber

18 Umsetzung – Detailseite
Insgesamt 3 Seiten Tab Layout Details mit Bildern und Text Liste mit Downloads Von HomePage ansteuerbar TabPage gibt Parameter an gewählte Tab Seite weiter - Downloads ->externe URL Jill Kleiber

19 Umsetzung – externe URL
Webseite PDF Datei Cordova-plugin-inappbrowser Cordova-plugin-device Einbettung in „google docs“ Entweder Website oder PDF Dargestellt im InAppBrowser -> beim Schließen zurück in App Probleme bei Android mit PDF -> Fallunterscheidung Lösung für Android Jill Kleiber

20 Simulation im Emulator Auf einem Testgerät
Umsetzung – Testen Simulation im Browser Simulation im Emulator Auf einem Testgerät Kompilierung der src-Dateien Publikation auf die Plattformen Grundfunktionalität überprüfbar, keine nativen Funktionen Kein Vorteil gegenüber anderen Methoden -> nicht verwendet Für Apple als Testgerät registriert Ionic serve -> für beide Arten Ionic prepare -> für Testgeräte Jill Kleiber

21 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

22 Dokumentation/ Fehlerbehandlung Bauen für Endgeräte
Probleme Proxy Version 2 Dokumentation/ Fehlerbehandlung Bauen für Endgeräte Falsche Konfigurationen iOS Zertifikat PDF Darstellung Plugins nur über mobiles Netz installierbar Wird nicht automatisch angelegt Zum Teil nicht oder nicht zentral vorhanden Unterschiedliche Befehle, die beide gebraucht werden GCM Angabe bei Android -> nicht für FCM Keine Development Token bei iOS erlaubt Zertifikat wird ungültig wenn nach Anleitung erstellt Muss für Android in google docs eingebettet werden Jill Kleiber

23 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

24 Plattformspezifische Änderungen Konfigurationseinstellung für iOS
Evaluation negativ Proxyproblem Anleitung für Setup Dokumentation Plattformspezifische Änderungen Konfigurationseinstellung für iOS Keine Topics Nicht natives Aussehen positiv Abstimmung mit AngularJS Bereitgestellte Funktionalitäten Keine Inkostistenzen Einfache Einbindung Plattformspezifische Icons - Lösung für Proxyproblem nur im Forum Proxylösung nur für Ionic-eigene Befehle - Anleitung für Setup nicht anwendbar - Verteilte/nicht eindeutige Dokumentation - Zentral oder ständig neu - Extra Konfiguration für iOS Entwicklertoken Nur in Forum zu finden - Nachrichten in Themen zu unterteilen Nur nativ möglich - Nicht intuitiv für Anwender - Enge Zusammenarbeit der Entwicklerteams - Layouts einfach implementierbar - Zentrale Änderungen - Kein Backend-Service zu entwickeln Kommunikation zwischen Frontend und Backend automatisch Nur Tokengenerierung und Darstellung zu behandeln - Wieder intuitiver Jill Kleiber

25 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

26 Anbindung an soziale Netzwerke Badges Google Maps Kalenderfunktionen
Ausblick Login Anbindung an soziale Netzwerke Badges Google Maps Kalenderfunktionen z.B. Push Notifications nur an eingeloggte Nutzer - Anzeige wie viele Nachrichten Lokalisierung angegebener Adressen Übernahme von Terminen etc. Jill Kleiber

27 Inhalt Ionic Aufgabenanalyse Setup Umsetzung Probleme Evaluation
Ausblick Fazit Vorstellen, beleuchten, erklären, aufzeigen, benennen, erläutern, abschließen Jill Kleiber

28 Holprige Anfangsphase Relativ reibungslose Entwicklungsphase
Fazit Holprige Anfangsphase Relativ reibungslose Entwicklungsphase Meiste Probleme aufgrund von Einarbeitung Probleme teilweise typisch für hybride Applikationen Wenig Fachliteratur aber starke Internetpräsenz Ständige Weiterentwicklung ⇒ Eignung für Zwecke der regio iT Installation, Setup, Push Notification Einbindung Alles weitere Können bei weiteren Apps vermieden werden Nicht intuitives Aussehen, zentrale Änderungen Literatur schnell veraltet -> Onlineliteratur vorteilhafter Viele Erweiterungsmöglichkeiten Eignet sich für Zwecke der regio iT Jill Kleiber

29 https://docs.ionic.io/ http://ionicframework.com/docs/v2/
Quellen Robert Prediger und Ralph Winziger, Node.js Bengt Weiße, AngularJS und das Ionic Framework Jill Kleiber

30