Captivate: going mobile mit Phonegap – Teil 1

Captivate: going mobile mit Phonegap – Teil 1

Seit Captivate 8 ist das Veröffentlichen von Projekten als App direkt auf dem Smartphone oder Tablet möglich

Start – Anlegen eines neuen Projektes

Erstellt man ein Projekt mit automatischer Anpassung, lassen sich verschiedene Endgerät-Typen (Smartphones und Tablets, Hoch- bzw. Querformat) mit unterschiedlichen Varianten eines Layouts ansprechen. Klassische Projekte erlauben allerdings auch eine Skalierung, sodass sie häufig eine einfache Alternative sind. Besonders, wenn die Zielplattform bekannt ist.
Wichtig ist in beiden Fällen die Ausgabe als HTML5-Projekt.

Was ist eine Hybride App?

HTML5 ist notwendig, da nicht eine ‚Native App’, sondern eine ‚Hybride App’ erstellt wird. Dabei wird der eigentliche Kern der App, der die Funktionalitäten beinhaltet, mit HTML5/JavaScript erzeugt und anschließend in eine App verpackt.

Adobe hat diesen Vorgang auf seiner Webseite zu Phonegap Build sehr schön visualisiert.

Für den Benutzer handelt es sich also um eine vollwertige App, die nicht von einer ‚Native App’ zu unterscheiden ist. Intern wird innerhalb der App ein Browser gestartet, der die Web-Inhalte fullscreen anzeigt.

Durch den einheitlichen Kern mit universellen Webtechnologien kann die App leicht auf unterschiedliche mobile Plattformen angepasst werden. Allerdings leidet darunter die Performance der Anwendung, da es sich weiterhin um eine Browseranwendung handelt, die keine Optimierungen für ein spezielles mobiles Betriebssystem enthält.

Cativate: Für Geräte veröffentlichen

Um aus einem Captivate-Projekt eine App zu erstellen, gibt es viele Wege. Der einfachste ich vielleicht der Weg über Phonegap Build (build.phonegap.com), da er direkt im Programm integriert ist.

capturfiles
Abb. 1 Dialog ‚Veröffentlichen’

Über Für Geräte (App) veröffentlichen öffnet sich ein Dialog, der die automatische Anmeldung (Benutzername, Kennwort) beim Dienst direkt aus Captivate ermöglicht.

capturfiles_1

Abb. 2 Optionen Für Geräte (App) veröffentlichen (Klick für vergrößerte Ansicht)

Anmeldung bei Phonegap Build

Natürlich muss man sich vorher bei dem Dienst registrieren (Registrieren im Dialog oder über die Phonegap Build-Seite). Dies passiert direkt auf der Webseite und kann z.B. mit der eigenen Adobe-ID erfolgen.

Es gibt unterschiedliche Preismodelle, für den Einstieg reicht der kostenlose Plan völlig aus. Er erlaubt die Erstellung einer ‚privaten’ App, deren Quellcode geschützt ist und unendlich vieler öffentlicher Apps, die der Allgemeinheit zur Verfügung stehen.

Hat man ein Abo der Creative Cloud, ist ein vollwertiger Phonegap Build-Account inbegriffen.

Einstellungen

Zurück zu den Dialog-Optionen. Nach erfolgreicher Anmeldung sind weitere Eingaben notwendig.

capturfiles_2

Abb. 3 Einstellungen für die App (Klick für vergrößerte Ansicht)

  • App – hier beim ersten Mal ‚Neu erstellen’ auswählen, später dann über ‚Aktualisieren’ eine bestehende Anwendung verändern.
  • Name – der Name der App.
  • Version – hier sollte man bei jeder Aktualisierung die Versionsnummer aktualisieren, z.B. 0.1, 0.2 usw.
  • Paket – der eindeutige Datei-Name der App. Bei einer Veröffentlichung in einem App-Store muss dieser einmalig sein. Als Konvention hat sich der der Domainname des Unternehmens in umgekehrter Reihenfolge plus App-Name eingebürgert, also z.B. de.osthof.meineApp.

Über Weiter kommt man zum letzten Konfigurationsschritt, der Eingabe der Zertifikate für iOS und/oder Android.

Zertifikate

capturfiles_4

Abb. 4 Zertifikatseinstellungen (Klick für vergrößerte Ansicht)

Entwickler-Zertifikate müssen bei Apple (iOS) bzw. Google (Android) erworben werden. Sie stellen die Identität des Entwicklers sicher und sind für eine Veröffentlichung im App-Store zwingend notwendig. Während das Apple-Zertifikat auf jährlicher Basis für 99,- EUR erneuert werden muss, zahlt man bei Google einmalig 20$.

Einen preiswerten Ausweg gibt es unter Android. Hier kann man eine unsignierte (un-zertifizierte) App zu Testzwecken auf dem eigenen Smartphone installieren.

Allerdings müssen dafür auf dem Gerät erst die Entwickleroptionen aktiviert werden. Eine Anleitung dazu findet sich z.B. bei giga.de.

Wir wählen also bei den Zertifikaten iOS ab und lassen bei den Android-Einstellungen alles unverändert (Titel: kein Schlüssel ausgewählt).

capturfiles_5

Abb. 5 Zertifikatseinstellungen  – ohne iOS (Klick für vergrößerte Ansicht)

Veröffentlichen

Über die Schaltfläche Veröffentlichen wird das Projekt nun zu PhoneGap Build hochgeladen.

Nach erfolgreichem Upload öffnet sich ein Dialogfenster, dass das Herunterladen der App erlaubt.

capturfiles_6

Abb. 6 Dialogfenster (Klick für vergrößerte Ansicht)

Herunterladen

Herunterladen öffnet den Webbrowser mit zwei Möglichkeiten die App zu beziehen.

capturfiles_7

Abb. 7 Webseite von Phonegap-Build mit Bezugsmöglichkeiten für die App (Klick für vergrößerte Ansicht)

Über die türkisfarbene Schaltfläche kann man die App als Datei herunterladen (Dateiendung: apk), muss sie dann aber noch auf dem Android-Smartphone installieren. Hierfür benutzt man im Normalfall eigene Tools und schließt das Smartphone per USB-Kabel an den Rechner an.

Etwas umständlicher -aber einfacher!- ist der Weg über den QR-Code in der Mitte der Webseite. Fotografiert man diesen mit einer QR-Code-Reader-App, kann man einen Link öffnen und die App auf dem eigenen Smartphone installieren (Hinweis: Auf dem Smartphone muss, wie oben erwähnt, der Entwicklermodus aktiviert sein).

Auf dem Smartphone findet man nun das Captivate Projekt als App mit dem in den Einstellungen vergebenen Namen. Phonegap vergibt dafür ein Standard-Icon, das sich aber individualisieren läßt.

cordova_bot

Abb. 8 Standard-Icon der App

Im zweiten Teil von Captivate: going mobile befasse ich mich mit den grundlegenden Einstellungen von Phonegap Build.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.