Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 24): App umwandeln und veröffentlichen

Web-Apps erstellen (Teil 24): App umwandeln und veröffentlichen

Bislang ging es ausschließlich um den Aufbau einer Web-App. Nun kann es aber natürlich durchaus sein, dass ihr eure Web-App so gelungen findet, dass ihr sie unbedingt auch über die verschiedenen App-Stores vertreiben wollt. Auch das ist möglich, erfordert allerdings einiges an Vorarbeit. Zum Abschluss dieser Reihe möchte ich euch kurz entsprechende Mittel und Wege zeigen, dank derer ihr die Web-App in eine native App umwandeln und dann auch tatsächlich in den Stores veröffentlichen könnt.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Mittlerweile gibt es einige Tools, mit denen ihr aus einer Web-App eine native App machen könnt. Eines der bekanntesten dürfte dabei sicherlich PhoneGap sein.

Interessant ist PhoneGap übrigens nicht nur, weil ihr damit das Ganze entsprechend umwandeln könnt. Tatsächlich ermöglicht es euch auch direkten Zugriff auf spezielle Funktionen des Smartphones. Welche Funktionen PhoneGap unterstützt, könnt ihr euch auf der Seite http://phonegap.com/about/feature/ ansehen.

Bilder



PhoneGap unterstützt die folgenden Plattformen:

• iOS
• Android
• Windows Phone
• Blackberry 5/6/7
• webOS Symbian
• Symbian
• Bada

 
Wie aber nutzt man nun eigentlich PhoneGap? Prinzipiell habt ihr dafür zwei Möglichkeiten:

• Ihr installiert eine vollständige Entwicklungsumgebung und kompiliert dort mittels PhoneGap eure App.
• Ihr nutzt einen Online-Dienst.

In vielen Fällen genügt der Online-Dienst völlig. Hier lädt man einfach die Dateien der App hoch, legt einen Namen und ein Icon fest und schon ist man im Besitz einer echten App für die unterschiedlichen Plattformen. Bei der Sache mit der Entwicklungsumgebung stellt sich das hingegen deutlich aufwendiger dar. Denn tatsächlich müsst ihr dann alle Umgebungen der gewünschten Zielplattformen installieren.

Für Apple wäre das Xcode, für Android das Android SDK. Sollen auch Windows, Blackberry usw. abgedeckt werden, müssen deren Plattformen natürlich ebenfalls installiert werden. Das ist sehr, sehr aufwendig. Daher konzentriere ich mich an dieser Stelle auf die Online-Variante.

Den entsprechenden Dienst findet ihr unter https://build.phonegap.com/.

Bilder



 
Dieser Service ist kostenlos. Wenn ihr später mehrere Apps umwandeln wollt, könnt ihr den kostenpflichtigen Dienst nutzen. Um den kostenlosen Account anzulegen, folgt ihr auf der Seite https://build.phonegap.com/ dem Button completely free. Auf der nächsten Seite müsst ihr euch . Dafür werden zwei Varianten angeboten:

• Adobe ID
• Github

Nach erfolgreichem Login muss man die Nutzungsbedingungen akzeptieren. Anschließend kann man einen ersten Test wagen. Generiert dazu aus dem Verzeichnis, in dem die Web-App liegt, ein Zip-Archiv. Und eben jenes Zip-Archiv wird über die Schaltfläche Upload a .zip file ausgewählt. Beachtet dabei, dass im Stammverzeichnis der App immer eine index.html vorhanden sein muss.

PhoneGap verarbeitet das Zip-Archiv nach dem Upload automatisch. Sobald das Tool damit durch ist, könnt ihr allgemeine Angaben zur App machen. Dazu gehören beispielsweise deren Titel und eine Beschreibung. Die übrigen Einstellungen kann man direkt mit Ready to build übernehmen. Ladet anschließend die App herunter und veröffentlicht sie in den gewünschten Stores. Das Ganze funktioniert in dieser Form für alle Zielplattformen, bis auf iOS. Wollt ihr die App auch dafür fit machen, benötigt ihr zusätzliche Profile und Schlüssel.

Habt ihr die App vorliegen, geht es nun natürlich noch darum, diese tatsächlich in die jeweiligen Stores zu kriegen. Dazu müsst ihr euch zunächst einmal bei den Stores anmelden. Und um es vorwegzunehmen: Kostenlos ist das Veröffentlichen eurer Apps dort dann nicht.

Um eine App im App Store zu veröffentlichen und/oder die App lokal zu testen, braucht man einen Apple Developer Account. Der kostet aktuell 99 US-Dollar pro Jahr. Damit PhoneGap tatsächlich eine iOS-App erstellen kann, braucht man ein sogenanntes Developer-Zertifikat. Erst mit einem solchen Zertifikat bekommt man die Berechtigung zum Kompilieren der iOS-Apps. Außerdem wird noch ein Profil benötigt, über das Apple sicherstellt, dass die App nicht außerhalb des App-Stores vertrieben wird. In diesem Profil sind dann Informationen darüber enthalten, auf welchem Gerät die App installiert werden darf und ob sie im App-Store verfügbar ist.

 
Voraussetzung für ein entsprechendes Zertifikat ist also ein Developer-Account bei Apple. Registriert euch, um einen zu bekommen, unter https://developer.apple.com/programs/start/standard/create.php.

Bilder



Nach erfolgreicher Registrierung könnt ihr euch einloggen unter https://developer.apple.com/devcenter/ios/index.action. Anschließend lassen sich dort Zertifikate und Profile anlegen. Diese müsst ihr anschließend in PhoneGap einbinden. Meldet euch dazu in PhoneGap Build an und klickt auf den Abwärtspfeil im oberen Fensterbereich.

Folgt dem Link Edit account und klickt im Register Signing keys im Bereich iOS auf add a key. Anschließend könnt ihr den Namen des Schlüssels, das Zertifikat und das Profil eintragen. Damit sind dann auch tatsächlich die Voraussetzungen für eine Veröffentlichung im App-Store geschaffen. Bei Android stellt sich die Sache zunächst einmal etwas einfacher dar. Lokal testen kann man die Apps nämlich ohne eine Registrierung. Erst wenn die App bei Google Play veröffentlicht werden soll, müssen Schlüssel und Zertifikat angegeben werden.


 

Die Apps hochladen

Will man die App bei Google Play veröffentlichen, braucht man einen entsprechenden Account. Ein solcher Account ist dabei mit einmaligen 25 US-Dollar deutlich günstiger als bei Apple. Die Registrierung nimmt man unter https://play.google.com/apps/publish/signup/ vor.

Bilder



Erledigt ist die Registrierung in wenigen Schritten, wobei für die Bezahlung der 25 US-Dollar eine Kreditkarte benötigt wird. Anschließend habt ihr Zugriff auf den Developer-Account von Google Play.

 
Um die App im App Store zu veröffentlichen, müsst ihr euch unter https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa mit euren Zugangsdaten einloggen. Anschließend könnt ihr die notwendigen Informationen ergänzen und die App dann hochladen.

Bilder



Auf diese Weise lassen sich also die Apps in die entsprechenden Stores bringen. Ihr solltet dabei natürlich auch immer die anfallenden Kosten im Auge behalten. Testet vielleicht lieber vorher, beispielsweise auch anhand einer Browserweiche, ob eure App überhaupt genutzt wird. Danach könnt ihr dann entscheiden, ob ihr das Geld tatsächlich investieren wollt.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von hierkarl
  • 16.09.2014 - 11:35

naja, einfach nicht das was ich erwartet habe, aber eig. ganz gut.
Ich habe gedacht, hier wird gezeigt wie man NUR seine Webseite in ein App umwandelt, jedoch sollte die Webseite immernoch vom Server abgerufen werden. trotzdem Danke!

Portrait von NobyS
  • 22.08.2014 - 17:31

Hat mir auch gefallen!

Portrait von Kundentest
  • 21.08.2014 - 15:47

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 21.08.2014 - 14:21

Vielen Dank für einen weiteren Teil. :-)

Portrait von Caesarion2004
  • 21.08.2014 - 11:26

Danke für einen weiteren, sehr hilfreichen und informativen Teil!

Portrait von lora-hth
  • 21.08.2014 - 11:20

Wirklich sehr hilfreich! Vielen Dank!

Portrait von jahnrene
  • 02.08.2014 - 11:32

bla, bla, bla ....
nicht wirklich informativ!

Portrait von megaloh
  • 09.08.2014 - 12:32

Absolute Zustimmung. Kann man auch in 60 Sekundne erklären. Ein 10 minutiges Video für 30 Credits ist schon ziemliche Abzocke.

Portrait von MicroSmurf
  • 02.08.2014 - 10:59

Gutes Video, wenngleich sich mir der Sinn nicht erschließt, warum man zusätzlich zur Webapp noch eine Handyapp machen soll. Die modernen Handys mit Internet haben doch alle einen Browser drin und können die Seite doch ohnehin schon aufrufen. Und die Gängelei von den Apfelfressern muss man sich nun wirklich nicht antun.

Portrait von Domingo
  • 02.08.2014 - 10:53

Hat mir gefallen, vielen Dank.

Portrait von Kundentest
  • 02.08.2014 - 09:48

Herzlichen Dank für das weitere Video.

Portrait von Caesarion2004
  • 02.08.2014 - 09:43

Vielen Dank für das informative Videotutorial.

x
×
×