Hybrid-App-Entwicklung mit PhoneGap – Ein Erfahrungsbericht

Immer mehr unterschiedliche Endgeräte (z.B. Smartphone, Tablet, Desktop-PC oder TV) mit unterschiedlichen Betriebssytemen finden ihren Weg auf den Markt. Dadurch wird es immer schwieriger, die angestrebte Zielgruppe mit einer App zu erreichen. Wird nur eine App für ein bestimmtes Gerät entwickelt, kann die mögliche Reichweite an Konsumenten nicht komplett ausgeschöpft werden. Da es jedoch auch im Hinblick auf die Wirtschaftlichkeit nicht optimal ist, für jedes Endgerät eine angepasste App zu entwickeln (höherer Entwicklungsaufwand = höhere Kosten), ist es am vorteilhaftesten von Beginn an eine plattformunabhängige Anwendung zu erstellen. Hier stellt sich natürlich die Frage, wie dies am effizientesten und kostengünstigsten zu bewerkstelligen ist. Die Antwort auf dieses Dilemma sind Open Source Frameworks, welche zur Erstellung von Hybrid Apps benutzt werden. Dabei bietet sich zum Beispiel das Framework PhoneGap an, um diese Erwartungen an eine App erfüllen zu können.

Über Hybrid Apps

Hybrid-Apps verbinden Vorteile der nativen und Web-orientierten Programmierung. Damit wird eine eigenständige und, darüber hinaus, effiziente Entwicklung möglich. Das Hauptaugenmerk der hybriden Apps liegt darin, dass es möglich ist, mit einer Entwicklung verschiedene Plattformen (z.B. iOS und Android)  zu bedienen. Hierdurch kann der Aufwand für die Erstellung einer Anwendung somit auch im finanziellen Bereich deutlich sinken. Mehr über Hybrid Apps erfahren Sie in unserem Blog.

Hybrid App Ansatz

Hybrid-App Ansatz (Quelle: FLYACTS)

Über PhoneGap

PhoneGap ist ein Framework von Adobe, das genutzt wird, um Hybrid-Apps zu erstellen, die auf mehreren mobilen Plattformen laufen. Apps, die mit PhoneGap entwickelt wurden, sind mit HTML5, CSS3 und JavaScript programmiert. Hierbei werden HTML5 und CSS3 für die Darstellung und JavaScript für die Programmlogik verwendet. PhoneGap unterstützt alle derzeit wichtigen Plattformen wie z.B. iOS, Android und Windows Phone. In diesem Zusammenhang kann über die Schnittstellen (API) von PhoneGap auf die Hardware des entsprechenden Betriebssystems zugegriffen und diese genutzt werden.

PhoneGap Build

PhoneGap Build (Quelle: PhoneGap)

Praxiserfahrungen mit PhoneGap

Durch eine mehrjährige Nutzung von PhoneGap ist es möglich auf breitgefächerte Praxiserfahrung mit diesem Framework zurückzugreifen. Hierdurch kann man die Vorteile der Arbeit mit PhoneGap unterstreichen, aber auch auf die Herausforderungen, welche die PhoneGap Entwicklung mit sich bringt, näher eingehen.

Technologie

Einer der größten Pluspunkte von PhoneGap ist die Möglichkeit, Hybid-Apps entwickeln zu können. Neben dem bereits genannten finanziellen Aspekt gesellt sich der Nutzen durch Flexibilität in Anbetracht auf die Aktualisierung und Weiterentwicklung hinzu. Außerdem ist die zu Grunde liegende Web-Technologie plattformunabhängig und garantiert somit eine größere Reichweite sowie Aktualisierungen in Echtzeit. Mit PhoneGap erstellte Apps können, wie native Apps, installiert und auch im App-Store aufgefunden und heruntergeladen werden. Zudem ist PhoneGap unkompliziert zu installieren und lässt sich auch recht einfach bedienen.

Auch die vielen vorhandenen Plugins sind eine erhebliche Unterstützung, denn für immer wiederkehrende Probleme werden Lösungen bereitgestellt, sodass nicht jedes mal neu programmiert werden muss. Für die Entwicklungsarbeit mit PhoneGap werden darüber hinaus keine weiteren Programmiersprachen außer HTML5, CSS3 und JavaScript benötigt. Das macht es einfach und schnell, da keine speziellen Entwicklungsumgebungen eingerichtet werden müssen, wie z.B. für Java.

App Geschwindigkeit und Performance

Bei der Erstellung von mobilen Apps gelten die gleichen Grundsätze wie bei der normalen Webseiten-Erstellung. Es gilt Bilder und Quellcode zu optimieren, um Lade- und Ausführungzeiten zu verkürzen. Die Entwicklung verschiedenster Javascript-Technologien wird jedoch soweit gehen, dass in naher Zukunft bei der App-Geschwindigkeit von nativen und hybriden Anwendungen kein wahrnehmbarer Unterschied mehr zwischen beiden bestehen wird.

Durch die hervorragende Erweiterbarkeit von PhoneGap können Hardware-lastige Berechnungen und andere Programmteile als Plugin ausgelagert und dann mit der eigentlich App verknüpft werden. So muss nicht die ganze App für alle Plattformen entwickelt werden, sondern nur bestimmte Programmabschnitte. Dadurch entsteht trotzdem eine einheitliche Codebasis für sämtliche Plattformen. Um die Performance einer App nicht durch zu viele Grafiken zu verschlechtern, ist es nötig, diese vorab für das Web in Größe und Auflösung zu optimieren, um die Ladezeiten zu verkürzen.

App-Design

Mit PhoneGap kann man die ganzen Freiheiten von CSS3 und HTML5 nutzen, um ein attraktives Design zu erschaffen. Wir gestalten die Benutzeroberfläche selbst, was die Design-Abteilung übernimmt. So wird eine ansprechende Gestaltung der Anwendung gewährleistet.

PhoneGap-Build

Phonegap bietet die Möglichkeit, die Apps selbst zu bauen. Wem das zu aufwändig ist, der kann dies mit Hilfe eines Build-Service umzusetzen, der diese Arbeit übernimmt. Hierbei handelt es sich um PhoneGap-Build. Der Vorteil der Nutzug von PhoneGap-Build liegt darin, dass automatisierte Vorgänge vorhanden sind, welche den Workflow erleichtern.

 Praxisbeispiel Lost & Find – Erfolgreich mit PhoneGap umgesetzt

Wie eine App gelungen mit PhoneGap entwickelt werden kann, ist am Beispiel der Anwendung Lost & Find zu sehen. Diese App stellt ein mobiles Fundbüro dar, mit welchem Finder die Möglichkeit haben, gefundene Gegenstände einzustellen. Folgende Ansprüche sollte die App erfüllen:

  • Gegenstände mithilfe einer Karte lokalisieren
  • Funde inklusive Bild einpflegen
  • Liste gefundener Gegenstände durchsuchen
  • Gutes Design und Benutzerfreundlichkeit

Das Lokalisieren der Gegenstände bzw. den Standort, an dem der Nutzer den Gegenstand aufgefunden hat, wurde mit Hilfe des Geolocation Plugins bei PhoneGap umgesetzt. Dies ermöglicht in Kombination mit der Google-Maps API die Funktion zur Auswahl des aktuellen Standorts für einen Fund. Beim Einpflegen des Fundes soll auch ein Foto des Gegenstands gemacht und mit den Daten zusammen eingetragen werden.

Hierfür wurde wieder ein PhoneGap Plugin genutzt, welches den Zugriff auf die Kamera bzw. die Bildergalerie des Smartphones ermöglicht. Zu guter Letzt ist noch ein Splashscreen-Plugin in der App vorhanden (was bei allen unseren Apps so ist, die mit PhoneGap entwickelt wurden), mit welchem die Splashscreens für iOS und Android angezeigt und ausgeblendet werden.

Lost & Find

Lost & Find (Quelle: FLYACTS)

Drei Jahre PhoneGap – FAZIT

In der App-Entwicklung sollen Anwendungen erstellt werden, die eine hohe Kundenreichweite und gutes Preisniveau bieten. Außerdem sollen sie plattformunabhängig nutzbar, gut bedienbar und leicht im App-Store zu finden sein. Zu guter Letzt stehen sie auch noch in der Anforderung die Hardwarefunktionen des Endgerätes nutzen zu können. Um all diese Anforderungen erfüllen zu können, bilden hybride Apps eine Lösung, welche die Vorteile von nativen Anwendungen besitzen, aber in der Erstellung viel wirtschaftlicher sind. Dazu wird jedoch ein Framework benötigt, welches die erstellten Apps “packt” und diese somit für die unterschiedlichen Betriebssysteme nutzbar macht.

Aus diesem Grund haben wir uns für das Framework PhoneGap entschieden. Dieses Framework bietet nicht nur die Möglichkeit der Hybrid-App Erstellung, sondern auch die Vorteile einer einfachen Installation, guter Dokumentation und bereits vorhandener Plugins. Auch wenn man bei der Arbeit mit PhoneGap einigen Herausforderungen begegnet, lassen sich diese mit dem nötigen Know-how, einer ausführlichen Dokumenation und dem Feedback der Community gut bewältigen. Für uns hat sich PhoneGap über die Jahre bewährt und wird auch in Zukunft ein wichtiger Baustein bei der App-Entwicklung sein.

Gemeinsam etwas starten?
Einfach Kontakt aufnehmen:

FLYACTS Anne

NEUKUNDEN & ANFRAGEN

ANNE SCHULZE

+49 3641 55 987 92
hallo@flyacts.com

FLYACTS Christin

PR & MARKETING

CHRISTIN DOMIN

+49 3641 55 987 93
presse@flyacts.com

Share This