TUTORIAL : Eigenes iPhone App erstellen!!!

**mac393** · 11. 05. 2009, 14:49

Hi, in diesem Tutorial zeige ich euch, wie ihr aus einer Webseite ein iPhone-App erstellt.

Das HTML-Template, welches in diesem Post verwendet wird, wurde von Mac393 erstellt.

Zunächst einmal, JEDER kann mittels einfacher Tools ein App erstellen, ob Anfänger oder Fortgeschrittener ist egal.

Wie fange ich an? Was wird benötigt ? :

Spoiler:

das HTML-Template (um die Webseite zu erstellen)
PhoneGap (um die Website zu einem App zu machen)

HTML-Template downloaden :

Spoiler:

Das HTML-Template könnt ihr hier herunterladen :
download

PhoneGap downloaden :

Spoiler:

PhoneGap download

Offizielle Webseite von PhoneGap :
PhoneGap.com

Tutorial :

Spoiler:

Ladet zuerst das Template herunter und öffnet den Ordner. Dann klickt auf "Öffnen mit..." und wählt als Programm den Editor aus.
Bild anzeigen :

Spoiler:

Dann könnt den Inhalt der Textboxen verändern (Bild anzeigen : )

Spoiler:

Textboxen hinzufügen (Bild anzeigen : )

Spoiler:

den Titel der Textboxverändern (Bild anzeigen : )

Spoiler:

und den Titel der Seite verändern : (Bild anzeigen : )

Spoiler:

.

Fortsetzung :

Spoiler:

Wenn ihr alles erledigt habt könnt ihr eure Webseite nun mit dem Browser testen!

Der Rest besteht darin die Webseite zu einem App zu machen!
Ihr benötigt :

Spoiler:

einen Macintosh computer mit Xcode und dem iPhone SDK
ein iPhone
eine "iPhone developer certification."

Schritt 1 :

Spoiler:

Downloadet zuerst Phonegap.
http://phonegap.pbworks.com/f/1227056444/step1-git2.png
Öffnet das Projekt in Xcode!(PhoneGap.xcodeproj)
http://phonegap.pbworks.com/f/122705...-openXcode.png
Kopiert alle Dateien der Seite in den Ordner "www", dieser befindet sich im PhoneGap-Ordner.
Öffnet "info.plist" und ändert "BundleIdentifier" zu eurem von Apple vergebenen identifier
http://phonegap.pbworks.com/f/122705...info_plist.png
Geht zum Menu Project > Edit Project Settings
Seit sicher, das alle Einstellungen korrekt sind!
Ändert den Produktnamen
Build and run.
http://phonegap.pbworks.com/f/122705...ild_and_go.png

Step 2

Spoiler:

Öffnet "info.plist" und ändert "BundleDisplayName" zu dem Namen eures Apps
Ersetzte "icon.png" und "[I]default.png"
http://phonegap.pbworks.com/f/1227056796/step2_icon.png

Step 3

Spoiler:

Erstell dein App an dem ausgewälten Ort in "url.text"

Wenn ihr weitere Fragen habt, sendet mir einfach eine Nachricht!

Ich würde mich auch über eine Bewertung freuen!

**mac393** · 11. 05. 2009, 15:07

Update 1.1

Hi, hier präsentiere ich euch das neue Update:

download

Updates :
"Zurückbutton" hinzugefügt
Pfeil auf der Textbox hinzugefügt

Bearbeiten :
Bearbeiten könnt ihr das Template mit NVU.

NVU downloaden

Über NVU :

Spoiler:

Nvu - ausgesprochen "N view" - ist eine Stand-Alone-Weiterentwicklung der Mozilla-Suite-Komponente Composer, basierend auf der Gecko-Engine von Mozilla.

Screenshot Ein komplettes Programm zur Erstellung und Verwaltung von Webseiten ist nun für Linux, Microsoft Windows und viele weitere Betriebssysteme verfügbar.

Es kann mit Programmen wie FrontPage und Dreamweaver konkurrieren. Nvu macht das Verwalten einer Webseite zum Kinderspiel.

Nun kann jeder Webseiten erstellen und verwalten, ohne technische Kenntnisse von HTML.

Durch seine Verfügbarkeit für viele Plattformen müssen Sie sich selbst bei einem Wechsel Ihres Betriebssystems nicht umgewöhnen. Sie können weiterhin den gewohnten Komfort von Nvu nutzen.

* WYSIWYG bearbeiten von Seiten, Webseitenerstellung so einfach wie das Schreiben eines Briefs in ihrer Textverarbeitung.
* Integriertes FTP-Dateimanagement. Loggen Sie sich auf Ihrer Webseite ein und navigieren durch Ihre Dateien, ändern Sie Ihre Webseiten direkt im Netz.
* Zuverlässige HTML-Code-Erstellung, der von den heute beliebtesten Browsern korrekt interpretiert wird.
* Zwischen der WYSIWYG-Ansicht und Code-Ansicht wechseln, ganz einfach mit Tabs.
* Gleichzeitiges bearbeiten mehrerer Tabs macht das Ändern vieler Seiten zum Kinderspiel.
* Leistungsfähige Unterstützung für Formulare, Tabellen und Vorlagen.
* Das einfachste Programm zur Erstellung und Verwaltung von Webseiten. Plattformübergreifend.

Screenshot der neuen Version :

**mac393** · 12. 05. 2009, 09:36

!platzhalter!

BoMb_ · 12. 05. 2009, 10:19

Wow!

Sieht echt gut aus.

Ich werds nachher mal versuchen. Denke mal, dass so das App "iBlank" erstellt wurde

**Wehrzwerg** · 12. 05. 2009, 21:56

ohne mac bzw. mac os kommt ich nicht weit oder?

**mac393** · 13. 05. 2009, 20:47

Aber du kannst auch ein WebApp damit machen, und das geht ganz einfach mit Windows.

**Elmos-Erbe** · 13. 05. 2009, 21:17

.. die aber nur mit netzzugang erreichbar ist

**mac393** · 14. 05. 2009, 13:03

Es gibt gratis Webhosts!

**Wehrzwerg** · 14. 05. 2009, 16:18

Zitat von mac393

Es gibt gratis Webhosts!

ähm danke? wie wärs mit namen, links und beispielen. ich weiß jetzt das man mit nem windows rechner webapps erstellen kann, können diese dann auch javascripts verwenden oder wird das vom iphone geblockt?

**Elmos-Erbe** · 14. 05. 2009, 18:56

Zitat von Wehrzwerg

können diese dann auch javascripts verwenden?

ja, auch javascript wird vom iphone unterstützt.
Stell dir unter WebApps bitte nix besonderes vor.. Es sind einfach aufs iPhone zugeschnittene Webseiten, die eventuell noch n bisschen das webkit von apple nutzt, damit das auch alles schön aussieht und sich ein wenig wie ne native app anfühlt.

n bisschen gui-gedöns findste hier:
http://www.iphone-ticker.de/2009/02/...und-photoshop/
und nur so, weils nett gemacht ist und um zu sehn was möglich is:
http://webapp.net.free.fr/Demo/Index.html
http://cubiq.org/rotating-wheel-for-...one-webapps/14

@mac393: Ich meinte das eher bzgl des Clients. Das hosten wird da das kleinere Problem sein...

**_joker** · 14. 05. 2009, 19:10

Sehr schön.

mfg

**Ref_Kane** · 14. 05. 2009, 19:13

Auch V. 1.1 funktioniert bei mir nicht so wie erhofft. Auch im Portrait-Modus wird die TestApp als Landscape angezeigt.
Ich hab versuchsweise die Originaldateien iWebApp_1.1 hochgeladen.

iPhone 3G, FW 2.2.1
Win XP, SP3

So siehts bei mir aus:

**Wehrzwerg** · 14. 05. 2009, 19:38

Zitat von Elmos-Erbe

Stell dir unter WebApps bitte nix besonderes vor.. Es sind einfach aufs iPhone zugeschnittene Webseiten, die eventuell noch n bisschen das webkit von apple nutzt, damit das auch alles schön aussieht und sich ein wenig wie ne native app anfühlt.

gibt es auch eine möglichkeit durch ein js oder css die internetseite anzupassen.

sprich: wenn jemand über pc drauf geht die normale page und wer mit dem iphone auf die seite kommt, dann zur angepassten automatisch verlinkt wird?

**markus4321** · 14. 05. 2009, 20:06

Gibt es nicht vllt. so ein Dummy-App wo man nur noch die URL anpassen muss?

So wie ich das gerade auffasse, wird hier nur ein App im Browser simuliert, das würde mir auch reichen.

So lange ich das App selbst ohne MAC verändern kann, wie etwa das Öffnen der Dateien vom App und das anschließende Bearbeiten (ich stelle mir das so vor wie bei manchen anderen Apps, wo man manuell Texte ect. umschreiben kann!).

mfg,
Markus

**mac393** · 14. 05. 2009, 20:12

sprich: wenn jemand über pc drauf geht die normale page und wer mit dem iphone auf die seite kommt, dann zur angepassten automatisch verlinkt wird?

Klar! Hier bitteschön :

HTML-Code:

<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){}
else {window.location = "http://www.eureSeite.com";}
</script>

Dabei ersetzt ihr "eureSeite" durch die Seite, auf die man weitergeleitet wird, wenn man die Seite nicht mit dem iPhone besucht.
Dieser Script wird in die iPhone-Seite eingebaut.

___________________________________________________

HTML-Code:

<script type="text/javascript">
   1. if ((navigator.userAgent.indexOf('iPhone') != -1) ||  
   2. (navigator.userAgent.indexOf('iPod') != -1)) {  
   3. document.location = "http://www.eureSeite";  
   4. }
</script>

Dabei ersetzt ihr "eureSeite" durch die Seite, auf die man weitergeleitet wird, wenn man auf die iPhone-Seite weitergeleitet werden soll.
Dieser Script wird in die normale Seite eingebaut.

**Elmos-Erbe** · 14. 05. 2009, 20:59

Zitat von markus4321

Gibt es nicht vllt. so ein Dummy-App wo man nur noch die URL anpassen muss?

So wie ich das gerade auffasse, wird hier nur ein App im Browser simuliert, das würde mir auch reichen.

So lange ich das App selbst ohne MAC verändern kann, wie etwa das Öffnen der Dateien vom App und das anschließende Bearbeiten (ich stelle mir das so vor wie bei manchen anderen Apps, wo man manuell Texte ect. umschreiben kann!).

mfg,
Markus

genau das wird doch im tutorial gemacht

HTML-Kenntnisse sollten aber zumindest vorhanden sein.
wobei das ganze so auch ziemlich eingeschränkt bleibt...

**markus4321** · 14. 05. 2009, 21:05

Irgendwie kann ich das noch nicht ganz nachvollziehen, wie kann das dann als App genutzt werden, wenn nur HTML-Dateien vorhanden sind?

Für die App-Erstellung, das Kompimieren, wird doch ein MAC benötigt.

Oder meinst du durch den Aufruf der index.html in einem App-Ordner wird diese dann als App intepretiert? Das Wäre natürlich perfekt.

Kann man dieser Pseudo-App dann evtl. ein Icon zuordnen, ein direktes, nicht indirekt über Winterboard?

mfg,
Markus

**Elmos-Erbe** · 14. 05. 2009, 21:39

sry.. meine antwort war wohl ein wenig missverständlich.
ich bezog mich dabei eher auf folgenden teil:

(ich stelle mir das so vor wie bei manchen anderen Apps, wo man manuell Texte ect. umschreiben kann!).

dieser teil wird ja im tutorial beschriebn.. dh das bearbeiten von "Textboxen" (so wie der ts es genannt hat

)
das ganze wird dann zu ner normalen App zusammengestampft (der part den du am mac machst)

die andere möglichkeit ist diese html dateien (mit den "textboxen" und so) ins netz zu schieben und online abzurufen... das nennt sich dann "WebApp"

damit spart man sich die arbeit am Mac. dadurch muss aber netzzugang da sein, um auf sie zuzugreifen.
diese kannst du übrigens auch auf dem Springboard anzeigen lassen.. (über das "+" symbol in safari). die browser elemente werden dann afaik ausgeblendet.

**Wehrzwerg** · 15. 05. 2009, 00:35

Zitat von markus4321

Irgendwie kann ich das noch nicht ganz nachvollziehen, wie kann das dann als App genutzt werden, wenn nur HTML-Dateien vorhanden sind?

Für die App-Erstellung, das Kompimieren, wird doch ein MAC benötigt.

Oder meinst du durch den Aufruf der index.html in einem App-Ordner wird diese dann als App intepretiert? Das Wäre natürlich perfekt.

Kann man dieser Pseudo-App dann evtl. ein Icon zuordnen, ein direktes, nicht indirekt über Winterboard?

mfg,
Markus

Das kann ich sogar beantworten ^^

Ja man kann selber ein Icon erstellen.

Nein das ist dann kein APP. Es ist lediglich eine Verlinkung zu deiner Internet seite, die du auf einem server gespeichert hast. offline ist deshalb nichts machbar. das ist so als würdest du dir irgendeine auf deinem ipod speichern, mehr nicht.

**markus4321** · 15. 05. 2009, 14:18

In den Beispieldateien sind auch Paramater zur Offline-Nutzung gesetzt, desshalb dachte ich, dass man diese App auch wie einen Browser Offline simulieren könnte.

Theoretisch sollte dies wohl auch möglich sein.
WebApp ist hier wohl etwas weit hergeholt, es ist nur eine für das iPhone zugeschneiderte Seite, jedoch auch nur Online - nicht Offline.

Ich will diese nur Offline nutzen.

Kennt jemand z.b. das FOCUS App? Damit wird ein Browser online als App simuliert, vielleicht ist es auch dieselbe Routine wie hier beschrieben.

Aber dennoch, ohne MAC kein APP, damit scheidet das Wort "JEDER" schonmal aus

mfg,
Markus