Category:

Cross-Plattform

Ridesharing Kooperation mit Stadt Pforzheim gestartet

by Mia Silber 14. Februar 2022

written by Mia Silber

Von unserer R2R Ridesharig-Lösung sollen nach und nach weitere Interessierte profitieren um gemeinsam den Weg in eine nachhaltige Zukunft gestalten zu können. Aus diesem Grund soll die Stadt Pforzheim als erster Pilotanwender ebenfalls Zugriff auf die Ridesharing-Lösung erhalten. Am 08.Februrar trafen sich Stadt und Hochschule zu einem gemeinsamen Kickoff-Termin. Zukünftig soll die App nicht nur für die Studierenden der Hochschule Pforzheim zur Verfügung stehen, sondern auch den Mitarbeitenden der Stadt Pforzheim.

Im Rahmen des Kickoffs wurde den Beteiligten eine historische Einordnung der App-Entwicklung gegeben. Sie entstand aus einem Projekt der Hochschule und wurde nach Abschluss des Projekts weiterentwickelt. Heute ist die App bereits an der Hochschule im Einsatz und wir täglich von Studierenden genutzt.

Zum Funktionsumfang: In der App kann eine eigene Fahrt angelegt werden unter der Prämisse wie viele Mitfahrende mitgekommen werden können. Sollte eine Mitfahrgelegenheit gesucht werden, kann die Strecke eingeben werden und die App sucht freie Plätze bei den bereits angemeldeten Fahrten. Anschließend wird der Fahrer / die Fahrerin angefragt ob eine Mitfahrt gewünscht ist. Er oder Sie hat dann die Wahl den Beifahrer anzunehmen oder abzulehnen. Durch das Benutzen der App können Punkte gesammelt werden welche als Incentives dienen und am Ende in attraktive Prämien eingetauscht werden können.

Mit zunehmender Zahl an Pendlern ist das Bilden von Fahrgemeinschaften ein großer Gewinn für unsere Umwelt. Mit einem ersten Pilotprojekt außerhalb der Hochschule freuen wir uns diese Lösung mit der Stadt Pforzheim in einem größerem Rahmen zu erproben und den Bediensteten der Stadt einen Mehrwert zu bieten. Bis dieser geschaffen ist müssen an der App noch einige spezifische Anpassungen für die Stadt Pforzheim vorgenommen werden. Diese Anpassungen und weitere Inhalte wie der Schutz von personenbezogenen Daten gemäß der DS-GVO standen u.a. im Fokus des Auftaktgespräches. Mit diesen Erkenntnissen machen wir uns an die Arbeit und freuen uns auf eine baldige Umsetzung.

14. Februar 2022 0 comment

Workshop: Entwicklung von Cross-Plattform-Applikationen mit Geertjan Wielenga

by Waidelich, Lukas 19. Mai 2019

written by Waidelich, Lukas

Am 16. Mai hatten nutzten die Studierenden der Hochschule Pforzheim die Chance an einem durch Prof. Dr. Thomas Schuster organisierten Workshop mit dem NetBeans-Experten Geertjan Wielenga teilzunehmen. Geertjan Wielenga der eine wichtige Rolle bei der Entwicklung der NetBeans-Plattform einnimmt, gab den Studierenden interessante Einblicke in die praktische Softwareprogrammierung. Die Professoren um Prof. Dr. Schuster und Prof. Dr. Raphael Volz, die Studierenden aus den Studiengängen Digital Enterprise Management und Wirtschaftsingenieurwesen sowie die wissenschaftlichen Mitarbeiter Jan Christoph und Lukas Waidelich folgten dem theoretischen Vortrag von Geertjan Wielenga aufmerksam. Zuerst stellte er die NetBeans-Plattform vor und zeigte auf, wie mobile Webanwendungen auf Basis von Oracle Jet erstellt werden können. Außerdem widmete er sich der Fragestellung „Wie entwickle ich meine eigenen Webkomponenten“. Die Thematik der komponentenbasierten Entwicklung war ebenfalls Gegenstand der praktischen Phase. Im Rahmen eines Workshops sollte eine Anwendung in Form einer einfachen Angestelltenverwaltung programmiert werden. Geertjan Wielenga entwickelte dazu ein prototypisches Dashboard, das Kennzahlen der Angestellten aufzeigt und als Analyse-Tool genutzt werden kann. Nun waren die Studenten an der Reihe, die das Template auf ihre Gegebenheiten anpassen sollten. Geertjan Wielenga war als Ansprechpartner vor Ort und gab den Studierenden Hilfestellung. Zum Abschluss der Veranstaltung konnten die Studierenden Fragen an den Referenten richten.

NetBeans ist eine freie integrierte Entwicklungsumgebung, die auf der Programmiersprache Java basiert. Die Besonderheit, neben Java werden auch die Programmiersprachen C, C++ sowie weitere dynamische Programmiersprachen unterstützt. Das Open-Source-Projekt, das ebenfalls als Plattform für eigene Anwendungen verwendet werden kann zeichnet sich u.a. durch Erweiterungen aus. So können für verschiedene Anwendungsfälle sogenannte Netbeans-Download-Pakete zur Verfügung gestellt werden. Dabei sind spezifische Funktionen vorkonfiguriert, die für die Entwicklungsumgebung (kontextbasiert) von Vorteil sind.

19. Mai 2019 0 comment

Cross-Plattform

Beitragsreihe zu Cross-Platform: 4. Ionic

by Christoph, Jan 16. Juli 2018

written by Christoph, Jan

Allgemeines

Was ist Ionic – Wie entstand es?

Entwickelt wurde es im Jahr 2012 von Drifty. Das Gründerteam besteht aus Max Lynch und Ben Sperry, den Gründern von Drifty, sowie Adam Bradley. Im März 2014 unterstützte „Arthur Ventures“ Ionic mit einem Startkapital in Höhe von 1 Million Us-Dollar. Ende November 2013 erschien die Alpha-Veröffentlichung und am 7. Mai 2014 wurde die Ionic Version 1.0 Beta 4 veröffentlich, diese Version war bis zu diesem Zeitpunkt das größte Update. Kurz darauf, am 12. Mai 2015 wurde die Version v1.0.0 „uranium-unicorn freigegeben.

Ionic 2 wurde am 25. Januar 2017 freigegeben und stellte zu diesem Zeitpunkt auch von AngularJS auf Angular (Angular 2) um. In diesem Zuge erfolgte auch ein Umstieg von JavaScript zu TypeScript.

Die Version 3 des Frameworks erschien am 1. April 2017. Die größten Änderungen waren die Unterstützung von Angular 4 und den neusten TypeScript Versionen. Am 1. April 2017 erschien Version 3 des Frameworks. Dabei wurde auch die Versionsnummerierung geändert.

Wie funktioniert Ionic und was bietet es?

Ionic bietet die Möglichkeit Webapps, aber auch native Crossplatform-Apps zu entwickeln und stellt damit einen hybriden Einsatz dar. Ionic emuliert eine native App UI und benutzt hierzu native SDKs. Außerdem nutzt Ionic Cordova-Plugins, um plattformspezifische Funktionen zu nutzen. Das Framework ist frei als Open Source erhältlich, wobei der Hersteller auch für die Zukunft verspricht, das Produkt als Open-Source-Produkt zu vertreiben. Die Programmierung erfolgt mittels Angular, JavaScript bzw. TypeScript sowie HTML5. Mittels Angular ist es möglich UI-Komponenten mittels direktiven und verschiedenen Services zu nutzen. Im Bereich der Webentwicklung hat sich Angular bereits bewährt und ist durch eine hohe Nutzeranzahl gekennzeichnet, zumal es die HTML-Funktionen erweitert.

Das Ionic-Framework wird in über 200 Ländern von 5 Millionen Nutzern verwendet. Mit über 100 MeetUp-Groups sowie 32.200 GitHub-Sternen und 30.000 Fragen stellt Ionic eines der größten Communities im Bereich der Cross-Plattform-Entwicklung dar. Vertreten ist Ionic auf den Plattformen: Slack, Ionic Community Forum, StackOverflow sowie GitHub. Außerdem wird Ionic bereits von vielen namenhaften Firmen genutzt und gewürdigt.

Test App

In diesem Abschnitt wollen wir zusammen eine kleine Test App entwickeln und ein paar native Funktionen einbinden. Als IDE wird Atom von GitHub genutzt, da sie übersichtlich ist und sich sehr gut personalisieren lässt: https://atom.io/. Eine weitere gute Wahl ist Visual Studio Code: https://code.visualstudio.com/download. Voraussetzung ist die Installation von Node.js (https://nodejs.org/en/). Außerdem muss in der Console mit dem Befehl:

npm install -g ionic@latest

die neuste Ionic Version installiert werden. Der Befehl: ionic info zeigt, ob alle notwendige Komponenten verfügbar sind. Abbildung 1 zeigt euch, wie ihr ein neues Projekt mittels Ionic aufsetzen könnt. Zunächst navigiert ihr in das gewünschte Ablegeverzeichnis: z.B. cd C:\Users\jan.christoph\Documents\Ionic Im Anschluss könnt ihr das Projekt erstellen lassen:

console_start_app — Abbildung 1: Neues Projekt anlegen

In Abbildung 2 ist die Projektstruktur zu sehen:

.git: Versions Kontrolle
node_modules: Hier sind alle installierten Module und Plugins zu finden (z.B. für die Kamera)
resources: Hier sind die Dateien für die angesprochenen Plattformen hinterlegt (hier Android und iOs)
src: Hier liegt der eigentliche Code der App (Für die Implementierung wird hauptsächlich hier gearbeitet)
app: Hier liegt die „Basis“. In app.modules.ts z.B. werden alle neuen Seiten, Provider, Services, Module und Plugins registriert. In der app.scss können globale Styles festgelegt werden und die app.component.ts ist der Startpunkt
Assets: Hier findet man alle Bilder und Icons (Hier können auch Fonts wie z.B. Font-Awesome eingebunden werden)
pages: Hier liegen die einzelnen Views (html, ts und scss file)
theme: Hier sind globale Variable festgelegt, z.B. Primäre und sekundäre Farben

In der index.html werden wie bei einer Homepage Scripts eingebunden und meta tags genutzt. Im manifest.json sind allgemeine Informationen zur App festgelegt (start url, app logo, usw.). In seltenen Fällen müssen auch die config.xml (für App name, Größe der Icons) und package.json (installierte module) bearbeitet werden. Nachdem die App erstellt wurde, muss in ihr Verzeichnis navigiert werden, um die Anwendung mittels ionic serve zu starten. Möchte man die App mit Cordova Plugins nutzen ist der Befehl ionic cordova run [<platform>] auszuführen. Als Plattform stehen ios, android, uwp und browser zur Verfügung. Um einen Emulator zu nutzen muss dieser vorher installiert werden, z.B. via Android Studio (AVD Manager). Die App wird automatisch auf dem laufenden Emulator deployed. JDK und JRE müssen installiert sein, um die Android Plattform zu nutzen, dazu müssen auch die Umgebungsvariablen entsprechend gesetzt sein. Weitere Optionen beim Ausführen der App sind unter https://ionicframework.com/docs/cli/cordova/run/ zu finden.

atom_folder_structure — Abbildung 2: Porjektordnerstruktur

Für die Generierung unserer Test App haben wir das Tabs Template genutzt, da wir eine App mit 3 Tabs erstellen möchten, die 3 unterschiedliche Funktionen anbietet. Der Startbildschirm dieser Basis-App ist in Abbildung 3 zu sehen.
Der erste Tab wird die aktuelle Systemzeit des Geräts anzeigen, der zweite Tab die aktuellen GPS Koordinaten und der letzte Tab wird eine Kamera und Galeriefunktion unterstützen. Außer dem Tabs-Template bietet Ionic weitere vorgefertigte Muster wie die blank App, sidenmenu App und super App, um sich alle Möglichkeiten anzeigen zu lassen, kann man den Konsolenbefehl: ionic start –list ausführen. Mehr Informationen erlangt ihr direkt unter der Ionic-Doku: https://ionicframework.com/docs/cli/start/

start_screen — Abbildung 3: Start Bildschirm

Systemuhrzeit

Für die Implementierung der Uhrzeit werden zunächst die Icons angepasst (siehe Abbildung 4). In der offiziellen Dokumentation von Ionic können alle verfügbaren Icons eingesehen werden: https://ionicframework.com/docs/ionicons/. Um unserer Uhr ein geeignetes Layout zu geben, bietet es sich an, ion-grid zu nutzen:

In Abbildung 5 ist der zugehörige Code der html-Datei zu sehen. Erwähnenswert ist das Databinding, wie z.B. [(ngModel)]=“hours“. Dadurch wird sichergestellt, dass die UI Änderungen der Werte innerhalb der vergebenen Variablen erkennt und übernimmt. Weitere nützliche Informationen zu Databinding gibt es hier:
https://coursetro.com/posts/code/58/Angular-4-Property-Binding-Tutorial

In der scss File, siehe Abbildung 6, definieren wir die Darstellung von visuellen Elementen, wie z.B. align-content in ion-content, um die Uhr mittig auszurichten. Damit sie nicht am Bildschirmrand klebt, setzen wir einen margin. Außerdem legen wir im ion-input eine größere Schriftgröße fest. Weitere nützliche Informationen und Erklärungen bezüglich CSS, SASS und SCSS findet ihr hier: http://www.peterkropff.de/site/scss/scss.htm.

In der TS-Datei (Abbildung 7) deklarieren wir Variablen für die Stunden, Minuten und Sekunden.
Um die Uhr zum Laufen zu bringen, lassen wir die getTheTime Methode in einer Schleife laufen, in dem wir sie jede Sekunde selbst neu aufrufen.
Die offizielle Dokumentation zu Typescript findet ihr hier:
https://www.typescriptlang.org/docs/handbook/basic-types.html

GPS

Zuerst wird wie zuvor die tabs.html-File, wie in Abbildung 8 zu sehen, angepasst. Um GPS nutzen zu können müssen wir den Anweisungen unter: https://ionicframework.com/docs/native/geolocation/ folgen und das Cordova Plugin Geolocation in unser Projekt integrieren. Eine weitere Hilfe wie Plugins eingebunden werden findet ihr hier: https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module

Um das Plugin nutzen zu können, muss es als Provider in der app.module.ts file eingetragen und aus dem entsprechenden module import werden.
Als nächstes bauen wir die Oberfläche in der zugehörigen html Datei (siehe Abbildung 9):

location_html — Abbildung 9: location.html

In der scss-File wird nicht viel geändert, wie in Abbildung 10 zu erkennen ist:

location_scss — Abbildung 10: location.scss

In der location.ts importieren wir die Geolocation und deklarieren die benötigten Variablen. Im Konstruktor wird die Geolocation injected und die getThePosition-Methode aufgerufen. Mehr Details zur Dependency Injection findet ihr unter: https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
Die getThePosition-Methode greift sich die aktuellen Koordinaten und rundet sie auf 2 Nachkommastellen, wie in Abbildung 11 zu sehen.

Kamera

Als erstes folgen wir den Anweisung unter: https://ionicframework.com/docs/native/camera/ und integrieren das Plugin, wie auch schon zuvor bei der Geolocation in unserer app.module.ts-Datei und fügen es als Provider hinzu. Außerdem bearbeiten wir die tab.html erneut (Abbildung 12):

Im HTML Code nehmen wir ein Ionic Icon und fügen ihm ein click Event hinzu.
Außerdem wollen wir das Bild auch anzeigen lassen, dazu nehmen wir ein img-Element und verknüpfen die Bildpfad-Variable damit. Abbildung 13 veranschaulicht dies:

Im Stylesheet färben wir das Icon ein und zentrieren es, wie in Abbildung 14 gezeigt. Das Bild wird groß dargestellt:

In der Typescript-Datei importieren wir die Kamera, die Kameraoptionen und den Encoding-Typ (Base64ToGallery), welche wir dann im Konstruktor auch injecten. Wir definieren den Bild Pfad als Variable und auch die Kameraoptionen, zu sehen in Abbildung 15:

Wie in Abbildung 16 zu sehen erstellen wir eine addPic-Methode, in der wir mittels einem AlertController zuerst erfragen, ob ein Bild geschossen oder eines aus der Galerie angezeigt werden soll. Sobald das Bild erfolgreich aufgenommen wurde, erscheint eine Erfolgsbestätigung als Benachrichtigung.

Die saveImgToGallery-Methode ermöglicht eine persistente Speicherung der Bilder in der Gallery. Etwaige Fehler oder eine erfolgreiche Speicherung werden geloggt und lassen sich in der Konsole anzeigen:

Anbei findet ihr die fertigen Screens unserer Test App. Von links nach rechts seht ihr im ersten Screen den Kamera-Tab. Hierbei wurde bereits ein Foto aufgenommen und wird nun in der Oberfläche angezeigt. Im Zweiten Tab habe wir eine Anfrage der aktuellen Position gestartet und im letzten Tab wird die Systemzeit des Smartphones angezeigt.

Das fertige Projekt sowie den kompletten Quellcode findet ihr hier:

https://github.com/futureLABHsPforzheim/ionic_blog_prototype

16. Juli 2018 0 comment

Cross-Plattform

Beitragsreihe zu Cross-Plattform: 3. Xamarin

by 28. Mai 2018

written by

Was ist Xamarin – Woher hat es seine Ursprünge?

In diesem Artikel möchten wir euch das Framework Xamarin näher vorstellen. Xamarin stammt vom Entwicklerteam Mono, dass 2011 gegründet wurde und gehört seit 2016 nun zu Microsoft. Damit kann es als Teilkomponente in Visual Studio verwendet werden und unterliegt dessen Lizenzbedingungen. Für die kostenlose Version von Visual Studio (VS Community Edition) gilt dabei, dass diese von einzelnen Entwicklern auch zu kommerziellen Zwecken, von beliebig vielen Personen im Rahmen von Open-Source oder akademischen Projekten verwendet werden darf. Im Unternehmensumfeld muss Visual Studio Professional oder Visual Studio Enterprise verwendet und lizenziert werden.

Wie funktioniert Xamarin und was bietet es?

Xamarin beschreibt eine Reihe von Tools des gleichnamigen Unternehmens, mit denen Cross-Plattform-Apps für Android, iOS und UWP unter Verwendung von C# entwickelt werden können. Xamarin unterteilt sich dabei in die folgenden Produkte/Tools:

Xamarin Platform (Xamarin.Android, Xamarin.iOS) stellt APIs zur Verfügung, die es Entwicklern ermöglichen, C#-Code für Businesslogik zwischen Android, iOS und Windows zu teilen. Die Benutzeroberfläche wird pro Plattform individuell geschrieben. Hier kann durchschnittlich etwa 75% des gesamten Quellcodes geteilt werden:

Xamarin-Architektur

Forms ermöglicht es Entwicklern, zusätzlich plattformunabhängige Oberflächen zu erstellen, die dann in native Oberflächen „gemappt“ werden. Damit kann bis zu 100% des Quellcodes für alle Plattformen verwendet werden.
Xamarin Test Cloud stellt eine Testumgebung auf etwa 2.000 echten Endgeräten kostenpflichtig zur Verfügung (mehr Informationen unter Test-Unterstützung)
Xamarin for Visual Studio ist die Entwicklungsumgebung für Xamarin unter Windows
Xamarin Studio ist die Entwicklungsumgebung für Xamarin unter macOS
Xamarin Mac

Intern verwendet Xamarin verschiedene Ansätze für die Unterstützung der verschiedenen Plattformen:

iOS: Für die iOS-Plattform wird der geschriebene C#-Code per AOT (ahead-of-time)-Kompilierung in ARM-Assembly-Sprache übersetzt und zusammen mit der Mono-Implementierung des .NET Frameworks gepackt. Dabei werden Klassen, die nicht verwendet werden ausgelassen.
Android: Unter Android wird der C#-Code in Intermediate Language (IL) übersetzt und zusammen mit Mono und einer Just-In-Time-Kompilierung-Funktionalität (JIT) gepackt. Auf dem jeweiligen Android-Gerät läuft die Applikation neben der Android Laufzeitumgebung (ART) und greift per Java Native Interface (JNI) auf die nativen Typen zu.
Windows: Für Windows (UWP) wird der C#-Code in IL übersetzt und direkt von der in UWP vorhandenen Laufzeitumgebung ausgeführt.
Mac: Unter macOS wird der C#-Code zunächst in IL übersetzt, zusammen mit Mono gepackt und entweder später während der Laufzeit per JIT-Kompilierung oder per AOT-Kompilierung während des Build-Prozesses in nativen Code übersetzt.

Unterstützte Plattformen

Xamarin wirbt mit der vollen Unterstützung der Plattformen Android, iOS und UWP (also Windows Phone und Windows 10). Diese werden auch – wie in Zugriff auf plattformspezifische Funktionen genauer beschrieben wird – vollumfänglich unterstützt. Plattformen wie Linux, o.ä. werden nicht unterstützt, was jedoch weniger an der technischen Machbarkeit (Mono als verwendetes Framework ist grundsätzlich auch unter Linux verfügbar), als an den damit einhergehenden Problemen liegt. Die Unterstützung von macOS erfolgte mit der Einführung des Produkts Xamarin.Mac, das aktuell jedoch noch in einer sehr frühen Phase ist.

Unterstützte Entwicklungsplattormen

Für die Entwicklung wird Visual Studio für Windows und Xamarin Studio für macOS angeboten. Andere Entwicklungsplattformen (bspw. Linux) werden nicht unterstützt.

Zugriff auf plattformspezifische Funktionen

Xamarin wirbt damit, dass die komplette zugrundeliegende native API angesprochen werden kann und somit alle Funktionen, die bei der Entwicklung mit Java, Objective-C, o.ä. verfügbar sind, genutzt werden können. Das hat sich bei der Evaluierung der Test-App auch bestätigt, da es in deren Umfang keine Funktion gibt, die nicht angesprochen werden konnte. Es gibt bei der Verwendung von Xamarin.Forms mehrere Möglichkeiten geräte- bzw. plattformspezifische Funktionen anzusprechen: So kann man pro Plattform ein zuvor definiertes Interface implementieren und dieses dann im Shared Code über den Dependency Service ansprechen. Eine andere Möglichkeit ist, entsprechende NuGet-Pakete zu installieren und diese zu verwenden (intern wird hier auch meist der Dependency Service mit verschiedenen Interfaces verwendet).

Es besteht sogar die Möglichkeit, Bibliotheken, die bspw. in reinem Java für Android geschrieben wurden über Binding-Libraries zu verwenden, wobei diese Funktionalität hier nicht getestet wurde. Damit steht jedoch eine riesige Auswahl nativer Bibliotheken zur Verfügung.

Dadurch, dass Xamarin jedoch bei Release neuer Funktionen der einzelnen Plattformen (bspw. Android Oreo) diese erst in ihrer eigenen Bibliothek anbieten muss, können die neuesten Funktionen erst nach einer bestimmten Zeitverzögerung (stabil) genutzt werden. Bisher war Xamarin jedoch sehr schnell in der Umsetzung neuer Funktionen, sodass nahezu keine Zeitdifferenz zwischen Release der nativen neuen API und Unterstützung durch Xamarin bestand.

Look & Feel

Da mit Xamarin vollständig native Oberflächen erstellt werden, wirkt die Oberfläche für den Nutzer sehr vertraut. Xamarin unterstützt auch Styling mit Themes. Die Xamarin Oberfläche fügt sich dementsprechend sehr gut in die Plattform ein und ist von der Oberfläche nicht von nativen oder System-Apps unterscheidbar. Unter Android wird auch Material Design unterstützt.

Xamarin-Screens

Performance und Ressourcennutzung

Besonders negativ fällt hier die Startzeit der App auf. Nach mehreren Messungen der Zeit zwischen „Tippen“ des App-Icons und fertig geladener bzw. einsetzbarer Oberfläche ergab sich ein Durchschnitt von etwa 3-3,5 Sekunden, was gerade für eine solch simple Anwendung sehr langsam und für den Nutzer definitiv spürbar ist. Dieses Verhalten kann eventuell noch in späteren Xamarin-Updates behoben werden, ist aktuell jedoch definitiv ein negativ auffallender Aspekt.

Die Performance nach dem Start ist hingegen sehr gut, Eingaben werden sehr schnell registriert und die Aktionen sehr schnell ausgeführt, sodass die App sich bezüglich dieses Aspektes nicht von nativ entwickelten Apps unterscheidet.

Der belegte Speicherplatz ist jedoch ungewöhnlich groß. Die Referenz-App belegt in der Release-Konfiguration ca. 28 MB Speicherplatz. Das liegt zum Teil daran, dass für jede App der eigentliche Code, die verwendeten Bibliotheken, andere Daten (Bilder), die Mono Laufzeitumgebung, und die benötigten BCL Assemblies mitgeliefert werden müssen. Eine simple Hallo-Welt-App besitzt somit bereits eine Größe von ca. 16 MB. Zwar nimmt die Größe der App nicht linear mit der Codebase zu, jedoch ist die „Grundgröße“ bei jeder App recht groß. Es ist jedoch auch anzumerken, dass es viele verschiedene Einstellungsmöglichkeiten und Tweaks gibt, um den belegten Speicherplatz zu reduzieren, an dem eigentlichen Grund für den hohen Speicherbedarf ändert das jedoch nichts.

Der durchschnittliche Arbeitsspeicherverbrauch liegt bei 17 MB, was im normalen Rahmen liegt.

Verteilung und Deployment

Während des Entwicklungsprozesses können die Apps entweder auf Emulatoren oder direkt auf angeschlossenen Geräten installiert, ausgeführt und debuggt werden. Das ist auch recht einfach und unproblematisch, da Visual Studio diese Funktion bereits mitbringt und vollautomatisiert ausführt.

Fertige Xamarin-Apps können wie native Apps in den plattformspezifischen App-Märkten (Google Play Store, Apple App Store, Amazon App Store, Windows Store, etc.) angeboten, installiert und aktualisiert werden. Der Veröffentlichungsprozess wird sehr detailliert in der offiziellen Xamarin-Dokumentation beschrieben. Dort gibt es sogar spezielle Abschnitte für Enterprise-spezifische Anwendungsfälle wie das In-House-Programm von Apple. Weitere Möglichkeiten sind die Installationen über E-Mail oder per Webseite.

Oberflächengestaltung

Die Oberfläche wird in XAML unter Verwendung Xamarin-spezifischer Tags entwickelt. Es gibt eine Oberflächen-Preview, die jedoch keine Erstellung), sondern lediglich eine Vorschau (d.h. die Erstellung muss stets über XAML erfolgen) unterstützt. Bei der Preview werden keine Navigationsleisten, Navigation, o.ä. unterstützt, was somit keine wirkliche Alternative zum Deployen der App ist. Bei der Verwendung von Xamarin.Forms muss beachtet werden, dass lediglich „der kleinste gemeinsame Nenner“ verwendet werden kann, d.h. plattformspezifische Funktionen bzw. Eigenschaften können nicht direkt in XAML verwendet werden (bspw. Toolbar-Subtitles in Android). Solch spezielle Funktionen müssten über Custom Renderer angesprochen werden, die wiederum die Entwicklung etwas komplexer machen.

Komplexität der Entwicklung

Zwar ist die Entwicklung durch die große Anzahl an Möglichkeiten relativ komplex, jedoch kann man auf eine sehr große Anzahl an Anleitungen, Tutorials und Beispielprojekten zurückgreifen. Auch die Community ist groß, jedoch kein Vergleich zu den Communities der nativen Technologien oder HTML/JSS/CSS. Für viele Anwendungsfälle (bspw. Fingerabdruckscanner) gibt es auch bereits fertige Demo-Apps.

Wartbarkeit

Bei der Entwicklung von Xamarin-Apps wird der Einsatz des MVVM Entwurfsmusters gefördert, was durch die Entkopplung von Belangen auf der Präsentationsschicht verbesserte Wartbarkeit mit sich bringt. Auch die strikte Trennung in XAML für die Oberflächengestaltung und C# für die Logik schafft einen strukturierten Aufbau.

Test-Unterstützung

Xamarin unterstützt das Schreiben und die Durchführung von Unit-Tests und UI-Tests. Der größte Vorteil von Xamarin ist jedoch die Xamarin Test Cloud, die es ermöglicht Apps auf bis zu 2.000 echten Endgeräten auszuführen und zu testen. Es lassen sich dabei auch Daten zu Ressourcennutzung und Performance erheben, die wiederum in die weitere Entwicklung einfließen können. Da es sich hierbei jedoch um ein separates Produkt von Xamarin handelt, fallen auch relativ hohe Kosten an.

Übertragbarkeit

Da Xamarin auf Basis von Mono mit C# geschrieben wird, lässt sich der geschriebene Quellcode nur sehr schwer auf andere Sprachen und Frameworks übertragen. Die in XAML geschriebene Oberfläche hingegen könnte prinzipiell in HTML oder ähnliche Sprachen transformiert werden, was jedoch mit großem Aufwand verbunden wäre und sicherlich nicht problemlos verliefe. Eine Austauschbarkeit wie bei der Verwendung von HTML/JSS/CSS ist somit nicht gegeben.

Geschwindigkeit und Kosten der Entwicklung

Prinzipiell ist die Entwicklung durch die Verfügbarkeit vieler Anleitungen, Beispielprojekte und guter Dokumentation recht schnell. Durch die Verwendung von C# lassen sich viele Dinge sehr elegant und einfach lösen, was die Entwicklung (bspw. verglichen mit Java) sehr erleichtert.

Probleme können jedoch mit Visual Studio oder NuGet auftreten, gerade da diese sehr umfangreich sind.

Probleme, die bei der Entwicklung der Referenz-App auftraten waren:

Bei der Installation einer Bibliothek über NuGet musste das gesamte Projekt in einen anderen Ordner verschoben werden, da der Pfad die von Windows erlaubten 256 Zeichen überstieg.
Bei der Verwendung des NuGet-Paketmanagers kann es zu Versionskonflikten kommen, die manuell behoben werden müssen. Dies ist eine sehr langwierige Aufgabe, da man zunächst durch Recherche oder Ausprobieren herausfinden muss, welche Pakete miteinander im Konflikt stehen.

Der Entwicklungsprozess wird etwas durch das Fehlen einer (ausgereiften und umfangreichen) Live-Preview-Funktion verlangsamt, da man bei jeder Änderung die App kompilieren muss und auf einen Emulator bzw. auf ein angeschlossenes Geräte deployen muss.

Quellen:

Xamarin, „Mobile Application Development to Build Apps in C# – Xamarin,“ 2017. [Online]. Available: https://www.xamarin.com/platform. [Zugriff am 6 Dezember 2017].

Xamarin, „Part 1 – Understanding the Xamarin Mobile Platform,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/cross-platform/application_fundamentals/building_cross_platform_applications/part_1_-_understanding_the_xamarin_mobile_platform/. [Zugriff am 6 Dezember 2017].

Xamarin, „Xamarin.Mac Architecture,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/mac/under-the-hood/architecture/. [Zugriff am 6 Dezember 2017].

Microsoft, „Microsoft-Software-Lizenzbestimmungen,“ 2017. [Online]. Available: https://www.visualstudio.com/de/license-terms/mlt553321/. [Zugriff am 6 Dezember 2017].

Microsoft, „Visual Studio 2017-IDEs im Vergleich,“ 2017. [Online]. Available: https://www.visualstudio.com/de/vs/compare/. [Zugriff am 6 Dezember 2017]

Bugzilla, „Mono for Android Support on Linux,“ 2017. [Online]. Available: https://bugzilla.xamarin.com/show_bug.cgi?id=142. [Zugriff am 6 Dezember 2017].

Xamarin, „DependencyService,“ 2917. [Online]. Available: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/dependency-service/. [Zugriff am 6 Dezember 2017].

Xamarin, „Binding a Java Library,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/android/advanced_topics/binding-a-java-library/. [Zugriff am 6 Dezember 2017].

Xamarin, „The Xamarin story,“ 2017. [Online]. Available: https://www.xamarin.com/about. [Zugriff am 6 Dezember 2017].

Xamarin, „Application Package Sizes,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/android/advanced_topics/application_package_sizes/. [Zugriff am 6 12 2017].

Xamarin, „In-House Distribution,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/ios/deployment,_testing,_and_metrics/app_distribution/in-house-distribution/. [Zugriff am 6 Dezember 2017].

Xamarin, „Publishing an Application,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/publishing_an_application/. [Zugriff am 6 Dezember 2017].

Xamarin, „Custom Renderer,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/. [Zugriff am 6 Dezember 2017].

Xamarin, „Uni Testing,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/xamarin-forms/enterprise-application-patterns/unit-testing/ . [Zugriff am 6 Dezember 2017].

Xamarin, „Introduction to Xamarin.UITest,“ 2017. [Online]. Available: https://developer.xamarin.com/guides/testcloud/uitest/intro-to-uitest/. [Zugriff am 6 Dezember 2017].

Xamarin, „Mobile app testing made easy,“ 2017. [Online]. Available: https://www.xamarin.com/test-cloud. [Zugriff am 6 Dezember 2017].

28. Mai 2018 0 comment

Allgemein Cross-Plattform

App-Entwicklung: Cross-Platform, Teil 2.

by 5. Februar 2018

written by

Für die Entwicklung einer App sind unterschiedliche Herangehensweisen möglich. Zur Auswahl der richtigen Tools bzw. Frameworks dienen folgende Leitfragen:

Auf welchen Plattformen soll die App laufen?
Wieviel Zeit habe ich für die Entwicklung der App und welche Funktionen soll diese beinhalten?

Sind diese Fragen beantwortet bestehen folgende Möglichkeiten die App zu entwickeln: Native Anwendung, Web-App oder hybride App. Zu allen drei Möglichkeiten wollen wir Euch nachfolgend ein paar grundlegende Informationen geben, sodass ihr selbst entscheiden könnt, wann ihr welche Methode einsetzt und was in etwa dahinter steckt.

Native Anwendung

Insbesondere, wenn eine App ausschließlich für eine Plattform entwickel werden soll, lohnt es sich eine native App zu entwickeln. Dementsprechend werden auch plattformspezifische Entwicklungsumgebungen genutzt. Dies ermöglicht einen vollständigen Zugriff auf alle Funktionen und Geräteeigenschaften. Außerdem werden so alle herstellerspezifischen Vorgaben und Richtlinien sicher eingehalten.

Was benötigt ihr für eine native App-Entwicklung?

Android: (1) Java ist Eure Programmiersprache; (2) als Testgerät nutzt ihr ein Android Smartphone mit aktiviertem Debug-Modus und USB-Verbindungskabel; (3) schließlich benötigt ihr noch einen PC mit installiertem Android Studio als Entwicklungsumgebung.
iOS: (1) Swift ist Eure Programmiersprache (früher Objective-C/Cocoa); (2) als Testgerät nutzt ihr ein iOS-Gerät (z.B. ein iPhone oder iPad) (3) schließlich benötigt ihr noch einen Mac mit installierter Xcode Entwicklungsumgebung.
Universelle Windows-Plattform: (1) Eure Programmiersprache legt ihr selbst fest (in der Regel bewegt Ihr Euch im Bereich .Net) ; (2) als Testgerät nutzt ihr ein Windows-Gerät; (3) schließlich benötigt ihr noch einen PC und Visual Studio als Entwicklungsumgebung – alle notwendigen Programmiersprachen werden hier bereits mitinstalliert.

In allen Fällen könnt ihr zum Testen der Anwendung auch auf ein Testgerät verzichten und stattdessen einen Emulator einsetzen. Bedenken solltet ihr dabei jedoch, dass sich der Test der Anwendungen dadurch (auch bei leistungsfähigen Computern) deutlich langsamer als bei der Benutzung eines expliziten Testgerätes. Außerdem stehen dem Emulator häufig nicht alle Funktionen, wie z.B. Bluetooth oder die Nutzung der Kamera zur Verfügung.

Plant ihr die App auf mehreren Plattformen gleichzeitig bereit zu stellen, bieten sich andere Lösungswege an. Nachteilig an den jeweils nativen Ansätzen ist, dass ihr bei einer Portierung auf eine andere Plattform den ganzen Quellcode erneut entwickeln müsst. Der Quellcode kann mit diesen Ansätzen also nicht für mehrere Plattformen gleichzeitig verwendet werden. Stattdessen könnt ihr dazu auf Web-Anwendungen oder die bereits erwähnten Cross-Platform-App-Development-Tools zurück greifen.

Web-Anwendung

Web-Anwendungen (oder auch Web-Apps) sind dem Grunde nach Webseiten. Daher werden zur Entwicklung auch die bekannten Web-Standards wie HTML, CSS und JavaScript verwendet. Nachfolgend werden diese drei Standards nur kurz skizziert und ihr findet Hinweise zum Weiterlesen und Tutorials, um Euch in die jeweilige Technologie einarbeiten zu können.

HTML steht für Hyper Text Markup Language und ist eine Auszeichnungssprache zur Beschreibung und Strukturierung von digitalen Inhalten, üblicherweise wird HTML zur Beschreibung von Seiten im Internet genutzt. Mit HTML lassen sich sowohl die Inhalte als auch die Seitenstruktur beschreiben, die anschließende Darstellung erfolgt dann in einem Browser und wird üblicherweise durch CSS (siehe unten) beeinflusst. Als Inhalte kann man sowohl einfachen Text, als auch Multimedia-Inhalte (wie Video oder Bildmaterial) oder Verweise auf andere Seiten verstehen. HTML benutzt sogenannte Tags, um Inhalte zu kennzeichnen. Hier ein Beispiel für Tags, die einen einfachen Textabsatz kennzeichnen:
```
<p>Dies ist ein Textabsatz</p>
```
Wichtig ist es zu jedem öffnenden auch einen schließenden Tag zu beschreiben, um ein gültiges HTML-Dokument zu erhalten. Tags dürfen auch geschachtelt werden und in manchen Fällen kann das öffnende auch zugleich das schließende Tag in einem sein.

Weitere Informationen über HTML könnt ihr unter diesen Links finden: w3schools.com (Tutorial), w3.org (Standard-Spezifikation)
CSS steht für Cascading Style Sheets. Diese dienen zur Beschreibung der Darstellung (Layout) der einzelnen Elemente. Mit CSS können Farben und Layouts für ein HTML-Dokument einfach konfiguriert werden. Neben HTML könnt ihr CSS auch für die Darstellung von anderen Inhalten wie XML (Extensible Markup Language) oder SVG (Scalable Vector Graphics) verwenden. Man erreicht damit eine Trennung von Inhalten und Darstellung (Design), somit kann beides einfach und unabhängig voneinander weiterentwickelt werden. Um Beispielsweise den Hintergrund des obigen Textabsatzes in Rot einzufärben, könnt ihr folgende CSS-Deklaration verwenden:
```
p { background-color: red; }
```
CSS kann insgesamt auch sehr umfangreich werden, wenn die Darstellung einer ganzen Anwendung beschrieben werden soll. Hierzu nutzt man in CSS auch komplexere Konstrukte, beispielsweise Vererbung, außerdem kann man auch auf Erweiterungen, beispielsweise Präprozessoren wie SASS (Syntactically Awesome Stylesheets), einsetzen

Weitere Informationen über CSS findet ihr beispielsweise unter folgenden Links: CSS Tutorial, w3.org (Standard-Spezifikation)
JavaScript: JavaScript ist eine leichtgewichtige Programmiersprache, die ähnlich wie Java, eine objektorientierte Programmierung anbietet. Im Gegensatz zu Java nutzt JavaScript ein Laufzeitsystem, das lediglich rudimentäre Datentypen verwendet. Dazu gehören numerische, Boolsche Werte sowie Zeichenketten. Außerdem nutzt JavaScript ein prototyp-basiertes-Objektmodell, d.h. vererbte Attribute können sich von Objekt zu Objekt unterscheiden. JavaScript unterstützt First-Class Funktionen und wird hauptsächlich für Client-Anwendungen im Browser eingesetzt. Allerdings findet JavaScript auch in anderen Anwendungen Anklang. Das Framework Node.js nutzt JavaScript und ermöglicht damit eine Programmierung von Backend-Services. Auch eine Realisierung von Datenbankanwendungen mittels JavaScript ist möglich. Hierzu kann Apache CouchDB verwendet werden.JavaScript bietet vorab Standardbibliotheken wie Array, Date und Math. Weitere Bibliotheken können bei Bedarf hinzugefügt werden. Somit können komplexe Funktionen bereitgestellt werden und die Anwendungslogik der Anwendung programmiert werden. JavaScript dient somit als Erweiterung von HTML und CSS. Anschauliche Informationen erhaltet ihr hier ebenfalls bei w3schools.com (Tutorials), javascript.info (Info), developer.mozilla (Info). Eine Sammlung von Tutorials für JavaScript können auch aus guru99.com entnommen werden. Hier ein kleines Code-Beispiel:
```
var variable = "Hello-World";
alert(variable);
```
Die Anwendung sendet hier eine Benachrichtigung mit dem Inhalt: „Hello-World“.

Für die Entwicklung von Web-Apps kann eine Entwicklungsumgebung genutzt. Um nativen Apps ähnlich zu sein, wird die Browseranzeige in der Darstellung ausgeblendet. Da es sich dennoch um eine Web-Anwendung handelt, sind Unterschiede in Design-Elementen (Widget) üblicherweise dennoch gut zu erkennen. Außerdem sind native Gerätefunktionen hier nicht ohne weiteres nutzbar.

Hybride Apps

Hybride Apps vereinen die Vorteile von Web-Apps und nativen Apps. Die Anwendung wird zunächst unter Nutzung von Web-Technologien wie HTML, CSS und JavaScript entwickelt und danach durch einen Generator in eine native App umgewandelt. Dadurch wird die Oberfläche ebenfalls sehr stark an die native Darstellung angeglichen. Auch native Gerätefunktionen können hierbei einfach genutzt werden. Da die Umwandlung relativ komplex ist, ist es bei umfangreichen Applikationen nicht immer garantiert, dass alles genau wie bei einer nativ entwickelten App funktioniert. Dies hängt insbesondere vom Generator-Framework (wie Cordova oder PhoneGap) und der unabhängigen Weiterentwicklung der Plattformen (wie iOS, Android) ab. Teilweise können manche Funktionen daher gar nicht oder erst mit zeitlicher Verzögerung in die Entwicklung eingebunden werden.

Um zu entscheiden, ob eine Hybride App die richtige Wahl ist, sind daher folgende Fragen zu beantworten:

Welche Programmiersprachen beherrsche ich?
Welche Funktionen benötigt meine App?
Welche Frameworks passen zu mir und meiner technischen Umgebung?
Welche Reputation (Entwicklungszyklen und Support) weisen diese unterschiedlichen Frameworks auf?

Wie kann ich hybride Apps entwickeln?

…und welche Frameworks sind dafür interessant? Um diese Fragen zu beantworten, stellen wir Euch in den nächsten Beiträgen einen Vergleich einiger Frameworks vor. Wir entwickeln dazu eine Referenz-App, die in allen Frameworks die gleichen Funktionen bieten soll. Die Referenz-App bietet als Navigation ein Tab Menü im unteren Bildschirmrand. Folgende Funktionen sollen abgebildet werden:

Tab 1: Im ersten Tab kann standardmäßig die Ortszeit abgefragt werden.
Tab 2: Der zweite Tab ermöglicht eine genaue Lokalisierung des Geräts. Angezeigt werden hierzu die Longitude sowie Latitude.
Tab 3: Der dritte Tab ermöglicht die Aufnahme eines Fotos mittels der Smartphone-Kamera, welches anschließend in der Bedienoberfläche angezeigt werden soll.

Anbei eine paar Mockups der Referenz-App:

Zur Demonstration nutzen wir die Entwicklungsumgebungen Visual Studio (für Xamarin), Visual Studio Code oder wahlweise auch Atom (für die übrigen Frameworks). Als Testgerät greifen wir auf ein Android Smartphone zurück. Für das Deployment nutzen wir außerdem ein USB-Verbindungskabel. Zusätzlich müsst ihr noch den Entwicklermodus auf eurem Smartphone aktivieren. Den Entwicklermodus schaltet ihr wie folgt frei:

Geht in die Einstellungen eures Android-Gerätes
klickt unter System auf das Navigationselement „Über das Telefon“
Scrollt ganz nach unten bis ihr den Eintrag Build-Number seht. Hier merhmals anklicken bis die Meldung erscheint: „Sie sind jetzt Entwickler“
Wenn ihr jetzt wieder zurück in die Einstellungen-Gesamtübersicht geht, müsste hier der Eintrag Entwickleroptionen erscheinen. Diesen wählt ihr aus.
Dann unter Debugging USB-Debugging aktivieren.

Gegebenenfalls müsst ihr für euer Smartphone noch die entsprechenden Android-Developer-Treiber herunterladen und installieren. Hierzu findet ihr auf der offiziellen Android-Developer-Seite nähere Informationen.

5. Februar 2018 0 comment

Cross-Plattform

App-Entwicklung: Cross-Plattform, wie geht das? Teil 1.

by Christoph, Jan 2. Januar 2018

written by Christoph, Jan

Was bedeutet „Cross-Plattform“?

Der Begriff Plattformunabhängigkeit oder Cross-Plattform beschreibt die Eigenschaft einer Anwendung, auf verschiedenen Plattformen (z.B. iOS oder Android) ausgeführt werden zu können. Aus Sicht des Entwicklers wird dabei im Idealfall eine einzige Code-Basis verwendet.

Ansätze zur Entwicklung von Cross-Plattform-Applikationen

Aktuell sind verschiedene Ansätze im Bereich der Entwicklung cross-plattformfähiger Anwendungen üblich. Am gängigsten sind:

Web Apps (auch Progressive Web Apps): Entwicklung einer – für mobile Endgeräte optimierten – Webanwendung unter Verwendung von HTML, CSS und JavaScript. Da auf nahezu jedem Endgerät ein Webbrowser vorinstalliert ist, sind Web Apps auch unter nahezu jeder Plattform ohne Einschränkungen nutzbar. Vorteile sind die einfache Portabilität der App sowie die relativ simple Entwicklung durch Verwendung bekannter und standardisierter Web-Technologien. Gleichzeitig bietet die breite Verfügbarkeit zahlreicher Frameworks zur Erstellung (Angular, Bootstrap, React, Vue, etc.) der Anwendungen eine geringe Einstiegshürde. Nachteile sind der tendenziell, für Apps, nicht-native Look & Feel sowie die Tatsache, dass gerätespezifische Funktionen (bspw. GPS) nicht ohne weiteres verwendet werden können. Auch die Performance leidet im Vergleich zu nativen Anwendungen, da Web Apps auf jeder Plattform interpretiert werden müssen und nicht kompiliert vorliegen.
Hybride Apps: Hierbei handelt es sich ebenfalls um Apps, die auf Webtechnologien (HTML, CSS und JavaScript) aufbauen. Die Apps greifen auf den unterschiedlichen Endgeräten auf speziell modifizierte, nativen Browser (ohne Adresszeile und ähnliche Steuerelemente) zurück, um die App-Oberfläche darzustellen. Anders als bei reinen Web Apps, bieten Frameworks wie Apache Cordova oder Adobe PhoneGap die Möglichkeit auch gerätespezifische Funktionen des Geräts (bspw. GPS) und native Steuerelemente leicht einzubinden. Vorteile sind die relativ einfache Entwicklung und die gute Portabilität auf unterschiedliche Plattformen. Nachteile können – je nach Anwendungsfall und verwendetem Framework – der fehlende native Look & Feel und auch die etwas schlechtere Performance gegenüber nativen Apps sein. Besonders der Performanceunterschied ist mittlerweile meist nur noch marginal und für den Endnutzer praktisch nicht spürbar.
Nativartige Apps: Entwicklung von Apps mit vollständig nativer Benutzeroberfläche, jedoch gemeinsamer Code-Base unter Verwendung von Frameworks wie Xamarin oder Titanium. Vorteile sind der native Look &Feel sowie die hohe Performance. Nachteile sind der potenziell erhöhte Entwicklungsaufwand und die gestiegene Komplexität des Entwicklungsprozesses, da gegebenenfalls auch plattformspezifischer Code geschrieben werden muss.

Die nachfolgende Grafik veranschaulicht die Funktionsweise dieser Technologien nochmals:

Cross-Platform-App-Development-Tools (CPAD)

Als Cross-Platform-App-Development-Tools (CPAD) bezeichnet man eine Sammlung von Technologien und Werkzeugen, die es einem Entwickler ermöglichen, den gesamten oder einen Teil des Quellcodes einer Anwendung für verschiedene Plattformen (Windows, MacOS, Android, iOS, etc.) wiederverwendbar zu entwickeln oder eine geteilte Code-Basis dafür zu verwalten. Durch ihre Verwendung kann der Entwickler den Entwicklungsaufwand signifikant reduzieren und damit die Entwicklungskosten senken, um gleichzeitig eine große Zielgruppe von Benutzern anzusprechen. Durch die große Popularität mobiler Endgeräte und die gestiegenen Ansprüche der Nutzer erfreuen sich CPAD-Tools immer größerer Beliebtheit gegenüber der Entwicklung mit den jeweiligen plattformspezifischen SDKs.

Im weiteren Verlauf der Beitragsreihe werden folgende 4 CPAD Umgebungen anhand einer einheitlichen Test App kurz vorgestellt. Wir wollen Euch dabei die Umgebungen Ionic, Xamarin, React Native und Oracle Jet vorstellen.

Frameworkvergleich mithilfe einer Test-App

Im Zusammenhang mit den verschiedenen CPAD Umgebungen und unserer Test-Anwendung werden wir die Vorteile und Nachteile der jeweiligen Umgebungen beleuchten. Dabei ist es geplant auch native Funktionen wie Kamera, GPS aber auch Push-Benachrichtigungen und weiteres zu demonstrieren. Wir möchten euch so einen umfassenden Vergleich der verschiedenen Umgebungen bieten. Die nachfolgenden Vergleichskriterien werden Euch daher wiederholt begegnen.

Bewertungskriterien der Infrastruktur

Lizenzen und Kosten: Unter welcher Lizenz wird das Framework verteilt und welche Kosten sind zu erwarten?
Unterstützte Plattformen: Welche Plattformen (mobil und stationär) werden unterstützt und in welchem Umfang?
Unterstützte Entwicklungsplattformen: Welche Plattformen (Windows, macOS, Linux) werden bei der Entwicklung unterstützt?
Zugriff auf plattformspezifische Funtionen: Auf welche plattformspezifischen Funktionen (bspw. GPS) kann zugegriffen werden und wie?
Langzeitunterstützung: Wie aktiv wird das Framework unterstützt? Wie zukunftssicher ist es?
Look & Feel: Wie wirkt die Benutzeroberfläche auf den Endnutzer? Fügt sich die App in die jeweilige Plattform ein?
Performance und Ressounrcennutzung: Wie schnell startet und reagiert die App? Wie viel Arbeitsspeicher und Gerätespeicher belegt die App?
Verteilung & Deployment: Wie kann die App verteilt, deployet und geupdatet werden und wie einfach ist dies?

Bewertungskriterien der Entwicklung:

Entwicklungsumgebung: Welche Funktionen bietet die Entwicklungsumgebung, wie ausgereift und wie einfach zu installieren ist sie?
Oberflächengestaltung: Wie einfach ist die Gestaltung der Oberfläche? Gibt es einen dedizierten Editor für das UI-Design?
Komplexität der Entwicklung: Wie einfach ist die Entwicklung allgemein? Wie gut ist die Dokumentation, Community-Diskussion, Beispielcode, etc.?
Wartbarkeit: Wie einfach kann die App gewartet werden?
Test-Unterstützung: Wie einfach kann die Businesslogik und Oberfläche der App getestet werden?
Übertragbarkeit: Kann Quellcode bei anderen Ansätzen (d.h. Frameworks) wiederverwendet werden?
Geschwindigkeit und Kosten der Entwicklung: Wie schnell ist der Entwicklungsprozess? Gibt es Faktoren, die den Prozess maßgeblich behindern?

Wie geht es weiter?

Im nächsten Beitrag möchten wir euch die Grundsätze der App-Entwicklung näher bringen. Auch hier legen wir den Fokus bereits auf die Cross-Platform-Entwicklung. Zusätzlich veröffentlichen wir nach und nach jeweils einen spezifischen Beitrag zu den vier Frameworks. Hierbei gehen wir dann im Zusammenhang mit unserer Test-App gezielt auf die Stärken und Schwächen des jeweiligen Ansatzes ein. Wir planen auch, den Quellcode unserer Test-App auf GitHub bereitzustellen. Ih könnt unsere Test-Apps daher auch einfach selbst nachbauen oder clonen.

Wo finde ich in der Zwischenzeit noch weitere Informationen zum Thema?

Heitkötter, Henning; Hanschke, Sebastian; Majchrzak, Tim A, „Evaluating Cross-Platform Development Approaches for Mobile Applications,“ in International Conference on Web Information Systems and Technologies, 2012, pp. 120-138
V. Ahti, S. Hyrynsalmi und O. Nevalainen, „An Evaluation Framework for Cross-Platform Mobile App Development Tools,“ in Computer Systems and Technologies, 2016, pp. 41-48
A. Charland und B. Leroux, „Mobile application development,“ 2011
T. Y. Adinugroho, Reina und J. B. Gautama, „Review of Multi-platform Mobile Application Development Using WebView,“ Procedia Computer Science 59, pp. 291-297
Hybride oder Native Anwendungen?
M. Palmieri, I. Singh und A. Cicchetti, „Comparison of cross-platform mobile development tools,“ 16th International Conference on Intelligence in Next Generation Networks, 2012
Oracle Jet im Blog

2. Januar 2018 0 comment