VON DER RESPONSIVE WEBSITE ZUR HYBRID-APP

UWE MUTZ Univ.-Lektor Ing. MSc MAS

ZIEL DES WEBINARS

Einblick in die Entwicklung einer App auf Basis einer Website

Verständnisgewinn zum Thema App-Entwicklung generell: Website Responsive Website Web-App Hybrid-App native App

WIE ARBEITEN EINE WEBSITE UND EINE APP?

Website: Verwendung von (verlinkten) Einzelseiten, durch die der User navigieren muss typ. Verlinkung auf verschiedene, eigenständige HTML-

Dokumente bzw. serverseitig programmierte Seiten, die je nach Parametern unterschiedliche Contents laden (CMS)

Bei jedem Klick auf einen Navigationspunkt wird (typ.) eine neue Seite geladen Website baut sich im Browser neu auf.

Responsive Website: Eine Website, die (idealerweise) auf allen Endgeräten

(Smartphone, Tablet, Desktop, etc.) optimiert dargestellt wird, ohne dass für jedes Endgerät eine eigene Site entwickelt werden muss.

Folgt immer noch dem Schema einer Website in Hinblick auf den Ladevorgang von Seiten.

RESPONSIVE

WEBSITE

App: folgt dem typ. Softwareschema: Eine App besteht aus einem einzigen "Fenster" / Seite /

Dokument Die benötigten Inhalte werden bei Bedarf in dieses Fenster

hinzugeladen kein Neu-Aufbau des Fensters wie bei einer "normalen" Website

Web-App: Eine Website, die dem Ladeschema einer App folgt: Inhalte

werden bei Bedarf dynamisch hinzugeladen ohne dass sich die Site neu aufbaut (zugrunde liegende Technologie: AJAX)

Wird nach wie vor in einem Browser aufgerufen.

Links: Formular-verarbeitung mit HTML Rechts: -"- mit AJAX

AJAX: Informationen werden nicht per normalem Request, sondern per

XMLHttpRequest an den Server geschickt es wird zwar in der Regel etwa dieselbe Zeit für das Abarbeiten von Request und Response benötigt, aber der User kann zwischenzeitlich die Site weiterhin benutzen.

Es findet kein Neuaufbau der Seite im Browser statt (sofern der Entwickler dies nicht explizit vorgesehen hat)

LADESZENARIO EINER WEBSITE

Klick auf einen Link: 1. Request: Website wird inaktiv 2. Response: erzeugt einen Neuaufbau der

Seite im Browser des Users

LADESZENARIO EINER APP

1, 3, 5: Requests (AJAX) 2, 4, 6: Response (AJAX)

Vorteile von Web-Apps: werden über den Browser aufgerufen und müssen daher nicht

installiert werden kein Update-Szenario: die Web-App IST letzten Endes eine

Website und somit IMMER aktuell plattformunabhängig für Webdesigner einfach zu entwickeln (HTML5 und CSS3)

Nachteile von Web-Apps: können nicht auf alle Hardware-Ressourcen zugreifen (zB. bis

dato Kamera, Mikrofon) sind i.d.R. weniger performant als native Apps (da der Browser

die Site erst "rendern" muss)

Hybrid-App: Ist eine Web-App, die (über geeignete Hilfsmittel) in eine "echte"

App konvertiert wurde. Enthält einige Erweiterungen gegenüber einer Website, ist aber

letzten Endes in der Entwicklung also noch eine Website.

native App: wird in der Entwicklungssprache des Bebriebssystems

entwickelt: Objective C (iOS) bzw. Java (Android) usw. Ist in der Entwicklung vergleichbar mit einer Software-

Entwicklung (Entwickeln einer "Applikation" wie Word, Excel, usw.)

Da eine Hybrid-App aus einer Web-App entsteht, "erbt" sie dieselben Vor- und Nachteile dieser.

NATIVE APP VS. HYBRID-APP

native App Hybrid-App Zugriff auf alle Resourcen des Geräts (Mikrofon, Kamera, Kontakte, etc.)

ja über Plugins, die bei der Konvertierung hinzugeladen werden

Performance sehr gut (nur abhängig vom Entwickler)

gut (abhängig von Browser und Entwickler)

Entwicklungsaufwand hoch, da für jede Plattform eine eigene App entwickelt werden muss

gering, da die Basis eine Website ist und diese für die verschiedenen Plattformen nur unterschiedlich konvertiert werden muss

KANN EINE WEBSITE ALSO OHNE "NACHZUDENKEN" IN EINE APP KONVERTIERT

WERDEN? Grundsätzlich: nein, denn eine App wird anders bedient

als eine Website und muss somit auch anders aufgebaut werden.

Wurde die Website zuvor bereits responsive entwickelt, so hält sich der weitere Aufwand in Grenzen, denn dann wurden folgende Punkte bereits berücksichtigt: Bildschirm:

Unterscheidung zwischen Quer- und Hochformat notwendig Unmenge unterschiedlicher Auflösungen (speziell bei Android-Geräten) Retina-Displays

Tastatur: normalerweise nicht vorhanden Bildschirmtastatur deckt den halben Bildschirm ab

Berühren statt klicken: keine Kontextmenüs keine Tooltips, etc., da kein Hover-Status existiert klickbare Fläche mind. in Fingerkuppengröße Scrollverhalten (Mausrad vs. "Wischen")

Geringere Leistung des mobilen Endgeräts: Prozessor Grafikchip Internetverbindung

GPS i.d.R. integriert Bewegungssensoren vorhanden

Was eventuell fehlt: Ladeszenario mittels AJAX

GESTALTUNGSTECHNISCHER AUFBAU EINER APP

Typ. Aussehen einer App mit einem ZURÜCK- (oder ABBRECHEN-) und einem WEITER- (oder FERTIG-) Button sowie einem Titel

Toolbar: wie eine Werkzeugleiste, nur befindet sich die Toolbar üblicherweise immer am unteren Bildschirmrand (fix positioniert). Die Buttons sind alle gleich breit.

Tabs: erlauben ein schnelles Wechseln zwischen einzelnen Inhalten, wobei die aktive Lasche hervorgehoben und idealerweise auch "mit dem Inhalt verbunden" ist. Die Reiter sind i.d.R. unterschiedlich lange (je nach Tab-Inhalt)

Symbole / Buttons: beachten Sie, dass die Anzahl der verwendeten Buttons die Länge des Screens nicht überschreiten sollte.

Carousel: die Navigation erfolgt über Flick oder Swipe. Wird die erste oder letzte Seite erreicht, startet das Karussell normalerweise von neuem (deshalb der Name) oder bleibt stehen.

Tutorial (Master-Detail): wählt der User einen Button an, so wird automatisch (animiert) auf die Detailseite gewechselt. Diese Variante ist praktisch, wenn man eine beliebig tief verschachtelte Liste darstellen muss.

Shōji (japan. Schiebetür): enthält typ. 3 Spalten, die von links bzw. rechts (animiert) eingeblendet werden. Gestartet wird mit der mittleren Spalte – die jeweils rechte oder linke Spalte legen sich über die mittlere Spalte.

WEITERE ÜBERLEGUNGEN: UNTERSCHEIDUNG MOBILER ENDGERÄTE

"Vollmobil": Smartphone: Das Gerät wird i.d.R. außerhalb der eigenen vier Wände verwendet und ist zu jeder Zeit griffbereit.

"Halbmobil": Tablet: Das Gerät wird unabhängig von einem Computer verwendet, befindet sich aber nicht immer in der unmittelbaren Umgebung des Users

"Pseudomobil": Das Gerät ist eine Erweiterung des Desktop-Rechners (zB. als Fernbedienung oä.)

je nach Situation des Users das entsprechende Gerät für die App wählen. Mehrere Geräte sind ebenfalls eine Möglichkeit.

Mögliche Situationen, in denen sich der User befindet: Bewegung:

Wenn der User in Bewegung ist, ist er weniger aufnahmefähig als zB. in einer Ruheposition. Die App sollte nur die notwendigsten Informationen darstellen (zB. Navigationssystem).

Position des Users: Steht, sitzt oder liegt der User typ. bei der Verwendung Ihrer App? Hat er eine oder beide Hände frei? Davon ist abhängig, ob der User komplexeren Eingabemechanismen folgen kann.

Anbindungsgeschwindigkeit: Ist der User per WLAN oder über das Mobilfunknetz (LTE, 3G, GPRS, EDGE, ...) angebunden? Davon ist abhängig, wie schnell der User Daten laden kann und wie komplex und aufwändig daher der gelieferte Content sein soll.

Lichtverhältnisse: Ist es Tag oder Nacht, ist der User in einem Zimmer oder im Freien? Je nach Lichtverhältnissen sollte sollte man die Farbkontraste entsprechend wählen.

Umgebung: Je nach Umgebung soll/darf die App keine Töne von sich geben.

WENN DANN ALLES PASST: VERÖFFENTLICHUNGSPROZESS & KOSTEN Grundsätzlich: Konvertieren der Web-App (also HTML,

CSS und JS) mit Hilfe von PhoneGap: entweder SDK aller möglicher Plattformen downloaden und

PhoneGap in diese SDKs installieren oder: build.phonegap.com > Gratis für EINE private App (die

jederzeit überschrieben werden kann) oder kostenpflichtig (monatlich etwa EUR 10,-)

Apple: Developer Account (EUR 99,- pro Jahr)

Google: Developer Account (EUR 25,- pro Jahr)

ADOBE PHONEGAP (EHEM. APACHE CORDOVA)

UI (=Website) wird vom Entwickler in HTML, CSS und JS entwickelt

Phonegap erzeugt daraus ein Plattform-spezifisches Package für: iOS Android Windows 8 je nach Version:

BlackBerry 5.x+ WebOS Symbian Tizen

Code wird vom Web Viewer des Geräts gerendert Darstellung auf allen mobilen Geräten so gut wie ident.

Features, die in Websites nicht möglich sind und durch PhoneGap möglich werden: Beschleunigungsmesser ("Accelerometer") Kamera Zugriff auf die Kontakte Zugriff auf das Dateisystem Medien: Abspielen und Aufnehmen Zugriff auf den Netzwerkstatus usw. (siehe Website von PhoneGap: phonegap.com/about/features)

Einige von PhoneGap bereitgestellte Plugins: Barcode Scanner Bluetooth Push Notifications Text-to-speech Kalender-Zugriff Facebook Connect

UND DANN? VERÖFFENTLICHEN

Apple: iTunesConnect (itunesconnect.apple.com) Login mit den Developer-Zugangsdaten "Manage your applications" > "Add New App"

Sprache Titel SKU-Nummer (typ. fortlaufende Nummer) Bundle ID (siehe Provisioning) Datum & Preis Kategorisierung & Versionisierung Upload (mittels Application Loader (Bestandteil von XCode))

"Apple meldet sich"

Google Play: play.google.com Login mit Developer-Zugangsdaten > Android Developer

Console "Upload Application" (.apk) APK-Files > Datei aktivieren "Product Details" > Screenshots, App-Icon, Beschreibung Preis erfordert Verkäufer-Account Freischaltung dauert einige Stunden Fertig

UWE MUTZ