Share
Les sites Web mobiles ont parcouru un long chemin, mais si vous souhaitez tirer pleinement parti du matériel d'un smartphone ou être répertorié dans l'iTunes App Store, vous devez compiler votre code. Dans ce tutoriel, nous allons vous montrer comment créer une application Web mobile avec l'apparence d'un iPhone en utilisant jQTouch, puis en faire une application iPhone native à l'aide de Phonegap. Aucun objectif-C nécessaire.
Pour compléter ce tutoriel, vous aurez besoin des éléments suivants:
PhoneGap est un framework open source qui permet de transformer n'importe quelle application Web en une application native pour iPhone, BlackBerry et Android. Il tire
cette astuce en exécutant votre code Web dans un UIWebView, une instance intégrée de Safari sans le
barres d'outils et boutons de l'application autonome Safari. PhoneGap étend ensuite cette fonctionnalité de base en mappant les fonctionnalités du
Le kit SDK pour iPhone en JavaScript permet d’appeler votre code Web afin d’ajouter facilement des fonctionnalités telles que GPS, appareil photo, contacts, vibration,
SQLLite et accéléromètre. Et lorsque vous êtes prêt à distribuer votre application, PhoneGap 0.80 est approuvé par Apple.!
La distribution PhoneGap comprend tout ce dont vous avez besoin pour créer et exécuter une application iPhone. Le projet XCode inclus est fourni
avec un exemple de code montrant comment utiliser de nombreuses fonctionnalités natives et tous les fichiers de support nécessaires à la compilation de l'application et
exécutez-le dans le simulateur iPhone ou sur votre téléphone.
Pour vérifier si votre Mac est prêt à exécuter votre code, testons l'exemple de projet fourni avec PhoneGap..
Tout d’abord, ouvrez le dossier de l’iPhone et double-cliquez sur PhoneGap.xcodeproj:
Cela devrait ouvrir XCode avec votre projet chargé. Bien qu’il se passe beaucoup de choses ici, nous, les développeurs Web, avons seulement besoin de
se préoccuper de la www dossier. Celui-ci contient le code Web qui deviendra l'interface et la logique de
notre application.
Maintenant que notre projet est chargé, il est temps de l'essayer. Le SDK pour iPhone est fourni avec un simulateur iPhone qui
s'accroche directement au XCode. Tout ce que nous avons à faire est de cliquer sur "Build and Run".
Pour les besoins de ce tutoriel, j'ai créé une application simple et native qui affiche mon flux Tumblr avec une diapositive "À propos de".
écran. Cette application est basée sur l'excellent framework jQTouch, une bibliothèque d'interface utilisateur basée sur jQuery
des éléments, des animations et des extensions qui vous permettent de développer rapidement des applications Web mobiles avec une apparence et une convivialité natives. Jetons un coup d'oeil
pour mettre en place une application Web utilisant jQTouch avant d'importer cette application dans notre projet Phonegap.
Tout d’abord, nous chargeons jQuery, jQTouch et certains fichiers de thème fournis dans le répertoire.
étiquette; ceux-ci donneront un style à nos élémentsEnsuite, nous construisons le squelette de notre application:
jQTouch prend n’importe quel descendant direct du
tag et le convertit en une "vue" en plein écran. Cela signifie que chaque
Accentsconagua
identifiant: Sur
JQTouch inclut une variété de méthodes intéressantes pour la transition entre ces écrans, et elles peuvent être activées simplement en ajoutant des classes CSS..
Par exemple, pour transformer ce lien vers la page À propos en une transition par glissement, nous ajoutons ce qui suit:
Sur
Ensuite, dans la page À propos de nous-mêmes, nous ajoutons un bouton pour "fermer" le panneau en le faisant glisser:
Fermer
Sur l'écran par défaut, nous ajouterons une barre d'outils avec le bouton "À propos de" mentionné ci-dessus, ainsi qu'un emplacement pour intégrer un flux Tumblr:
Accueil
SurDirect
Enfin, quelques classes CSS qui associeront la sortie du flux Tumblr à notre thème "Apple":
ol couleur: noir; background: #fff; bordure: solide 1px # B4B4B4; police: gras 17px Helvetica; rembourrage: 0; marge: 15px 10px 17px 10px; -webkit-border-radius: 8px; ol> li color: # 666; bord supérieur: 1px solide # B4B4B4; type de style de liste: aucun; remplissage: 10px 25px 10px 25px;
C'est tout! Après avoir ajouté du contenu à notre page À propos, nous remplaçons les fichiers de notre projet Phonegap. www dossier
avec notre nouvelle application Web et relancez-la:
Notre application Web est maintenant compilée et à partir de là, elle peut être emballée pour la distribution dans l'iTunes Store. C'est un début simple, mais
en très peu de temps, nous avons une application native qui ressemble à celle d'Apple, fonctionne sur n'importe quel iPhone et peut être étendue à une variété d'utilisations.
Nous verrons comment étendre votre application avec la prise en charge des caméras et de la géolocalisation dans les prochains tutoriels. En attendant, vous pouvez
En savoir plus sur Phonegap sur le Widget Phonegap. La documentation n'est pas complètement étoffée,
alors vous pouvez vous retrouver à fouiller dans les dépôts git après une longue chasse.
Pour soumettre votre application sur l'iTunes App Store, inscrivez-vous au programme pour développeurs iPhone..
Une fois inscrit, vous disposez des outils nécessaires pour signer et soumettre numériquement votre application sur l'iTunes Store..
Saviez-vous que vous pouvez gagner jusqu'à 600 USD en écrivant un tutoriel et / ou un screencast PLUS pour nous?? Nous recherchons des didacticiels détaillés et bien écrits sur HTML, CSS, PHP et JavaScript. Si vous en avez la possibilité, veuillez contacter Jeffrey à l'adresse [email protected]..
Veuillez noter que la rémunération réelle dépendra de la qualité du didacticiel final et du screencast..
