Share
Mobile Websites haben einen langen Weg zurückgelegt. Wenn Sie jedoch die Hardware eines Smartphones voll ausnutzen oder im iTunes App Store aufgeführt werden möchten, müssen Sie Ihren Code kompilieren. In diesem Lernprogramm zeigen wir Ihnen, wie Sie mit jQTouch eine mobile Web-App mit einem iPhone-Erscheinungsbild erstellen und anschließend in eine native iPhone-App mit Phonegap verwandeln. Kein Objective-C erforderlich.
Um dieses Tutorial abzuschließen, benötigen Sie Folgendes:
PhoneGap ist ein Open-Source-Framework, mit dem aus jeder Web-App eine native App für iPhone, BlackBerry und Android werden kann. Es zieht ab
diesen Trick, indem Sie Ihren Webcode in einem UIWebView, eine eingebettete Instanz von Safari ohne
Symbolleisten und Schaltflächen der eigenständigen Safari-App. PhoneGap erweitert dann diese Basisfunktionalität, indem Sie Funktionen der
iPhone SDK für JavaScript-Objekte, die Sie in Ihrem Webcode aufrufen können, sodass Sie auf einfache Weise Funktionen wie GPS, Kamera, Kontakte und Vibration hinzufügen können,
SQLLite- und Beschleunigungssensor-Unterstützung. Wenn Sie bereit sind, Ihre App zu verteilen, ist PhoneGap 0.80 von Apple zugelassen!
In der PhoneGap-Distribution ist alles enthalten, was Sie zum Erstellen und Ausführen einer iPhone-App benötigen. Das enthaltene XCode-Projekt wird gebündelt
mit einem Beispielcode, der zeigt, wie viele der nativen Funktionen verwendet werden, und alle unterstützenden Dateien, die zum Kompilieren der App erforderlich sind
Starten Sie es im iPhone Simulator oder auf Ihrem Telefon.
Testen Sie das in PhoneGap enthaltene Beispielprojekt, um zu testen, ob Sie Ihren Mac für die Ausführung Ihres Codes vorbereitet haben.
Öffnen Sie zunächst den iPhone-Ordner und doppelklicken Sie auf PhoneGap.xcodeproj:
Dies sollte XCode mit Ihrem geladenen Projekt öffnen. Obwohl hier viel los ist, brauchen wir als Webentwickler nur
sich mit dem beschäftigen www Mappe. Dieser enthält den Webcode, der zur Schnittstelle und Logik von wird
unsere app.
Jetzt, da wir unser Projekt geladen haben, ist es Zeit, es für eine Runde zu nehmen. Im Lieferumfang des iPhone SDK ist ein iPhone-Simulator enthalten
hakt direkt in XCode ein. Alles, was wir tun müssen, ist auf "Build and Run" zu klicken.
Für dieses Tutorial habe ich eine einfache, native-Feeling-App zusammengestellt, die meinen Tumblr-Feed mit einem Slide-Up "About" anzeigt.
Bildschirm. Diese App basiert auf dem hervorragenden jQTouch-Framework, einer auf jQuery basierenden Bibliothek der Benutzeroberfläche
Elemente, Animationen und Erweiterungen, mit denen Sie mobile Web-Apps mit nativem Erscheinungsbild schnell entwickeln können. Lass uns einen kurzen Blick darauf werfen
Bevor Sie diese App in unser Phonegap-Projekt importieren, erstellen Sie eine Web-App mit jQTouch.
Zuerst laden wir jQuery, jQTouch und einige gebündelte Designdateien in die
Etikett; diese werden unsere Elemente so gestalten, dass sie aussehenDann bauen wir das Skelett unserer App aus:
jQTouch übernimmt alle direkten Nachkommen der
tag und konvertiert es in eine Vollbildansicht. Das bedeutet jeder
Accentsconagua
Ich würde: Über
JQTouch bietet verschiedene Möglichkeiten zum Wechseln zwischen diesen Bildschirmen. Sie können einfach durch das Hinzufügen von CSS-Klassen aktiviert werden.
Um diesen Link zur Seite "About" in einen Slide-Up-Übergang zu verwandeln, fügen Sie Folgendes hinzu:
Über
Dann fügen wir auf der Info-Seite selbst eine Schaltfläche hinzu, um das Panel zu "schließen", indem Sie es zurückschieben:
Schließen
Auf dem Standardbildschirm fügen wir eine Symbolleiste mit der oben genannten Schaltfläche "Info" und eine Stelle zum Einbetten eines Tumblr-Feeds hinzu:
Zuhause
ÜberLiveübertragung
Zum Schluss noch ein paar CSS-Klassen, die die Ausgabe des Tumblr-Feeds an unser "Apple" -Motiv anpassen:
ol Farbe: schwarz; Hintergrund: #fff; Grenze: 1px fest # B4B4B4; Schrift: Fett 17px Helvetica; Polsterung: 0; Marge: 15px 10px 17px 10px; -webkit-border-radius: 8px; ol> li color: # 666; Border-Top: 1px fest # B4B4B4; Typ des Listentyps: keine; Polsterung: 10px 25px 10px 25px;
Das ist es! Nachdem wir unserer Info-Seite etwas hinzugefügt haben, ersetzen wir die Dateien in unserem Phonegap-Projekt www Mappe
mit unserer neuen Web-App, und führen Sie es erneut aus:
Unsere Web-App ist nun zusammengestellt und kann von hier aus für den Vertrieb im iTunes Store verpackt werden. Es ist ein einfacher Anfang, aber
In kürzester Zeit haben wir eine native App, die wie Apples eigene aussieht, auf jedem iPhone ausgeführt werden kann und für eine Vielzahl von Anwendungen erweitert werden kann.
In zukünftigen Tutorials erfahren Sie, wie Sie Ihre App mit Unterstützung für Kameras und Geo-Location erweitern können. In der Zwischenzeit können Sie
Lesen Sie mehr über Phonegap im Phonegap-Wiki. Die Dokumentation ist nicht vollständig ausgearbeitet,
So können Sie sich nach einer langen Jagd durch Git-Repositories graben.
Registrieren Sie sich für das iPhone Developer Program, um Ihre App an den iTunes App Store zu senden.
Nach der Registrierung erhalten Sie die Tools, mit denen Sie Ihre App digital signieren und an den iTunes Store senden können.
Wussten Sie, dass Sie bis zu 600 US-Dollar verdienen können, wenn Sie ein PLUS-Tutorial und / oder einen Screencast für uns schreiben? Wir suchen ausführliche und gut geschriebene Tutorials zu HTML, CSS, PHP und JavaScript. Wenn Sie die Möglichkeit haben, wenden Sie sich bitte an Jeffrey unter [email protected].
Bitte beachten Sie, dass die tatsächliche Kompensation von der Qualität des abschließenden Tutorials und des Screencasts abhängt.
