hybrid-apps entwickeln - donau-uni.ac.at ist eine web-app, die (über geeignete hilfsmittel) in eine...
Post on 07-Mar-2018
221 Views
Preview:
TRANSCRIPT
HYBRID-APPS ENTWICKELN
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 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.
Wird nach wie vor in einem Browser aufgerufen.
LADESZENARIO EINER WEBSITE
LADESZENARIO EINER APP
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
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
top related