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

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

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

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 19.09.2018 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

Ionic – Voraussetzungen NodeJS NPM Git CLI Cordova CLI Android SDK Xcode 19.09.2018 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

Ionic – Komponenten CLI Backend-Services Forum Ionicons Creator Market Showcase 19.09.2018 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

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

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

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

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

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

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 19.09.2018 Jill Kleiber

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

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

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 19.09.2018 Konfiguration -> Development Token erlaubt Jill Kleiber

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

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

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

Umsetzung – externe URL Webseite PDF Datei Cordova-plugin-inappbrowser Cordova-plugin-device Einbettung in „google docs“ 19.09.2018 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

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 19.09.2018 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

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

Dokumentation/ Fehlerbehandlung Bauen für Endgeräte Probleme Proxy Version 2 Dokumentation/ Fehlerbehandlung Bauen für Endgeräte Falsche Konfigurationen iOS Zertifikat PDF Darstellung 19.09.2018 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

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

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 19.09.2018 - 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

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

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

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

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 19.09.2018 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

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

www.regioit.de