Comment construire une application iPhone à l'aide PhoneGap | Pas de programmation

PhoneGap, un environnement de développement multii plate-forme, fournit des outils pour développer facilement des plates-formes croisées applications mobiles. Vous pouvez profiter des nouvelles technologies comme HTML5, CSS3 et JavaScript pour créer simple aussi bien sophistiqués applications mobiles pour IOS (iPhone, iPad), Android, Windows Mobile 7, Bada, BlackBerry, Symbian, WebOS avec aucun codage ou très peu.

Pour les développeurs non, il est possible de créer des applications simples, comme des livres de recettes, guides de voyage, des guides pratiques, sans codage si vous utilisez un éditeur WYSIWYG comme DreamWeaver, Komposer ou Amaya parmi d'autres et les environnements de développement natifs pour chaque plate-forme le long avec PhoneGap bien sûr.

Dans ce tutoriel, je démontre la création d'une application simple sans code, qui sera un livre de recettes pour le vin destiné à un dispositif IOS (iPhone). Pour commencer, vous aurez besoin de télécharger XCode 4 d'Apple (vous aurez besoin d'un MacBook, car il n'est pas pris en charge sur Windows ou Linux). Vous aurez aussi besoin Amaya du W3C. Il s'agit d'un aussi en téléchargement gratuit. Enfin, vous aurez le développement PhoneGap qui est disponible à partir de PhoneGap. Voir la section des ressources à la fin de ce tutoriel pour les adresses de sites Web.

Choisir un modèle

Modèle PhoneGap

Nom du projet

Création d'un projet

Une fois que le PhoneGap est téléchargé et décompressé, accédez à l'installation de clic PhoneGap dossier et double sur le programme d'installation dmg dans l'IOS sous-dossier. Suivez les instructions jusqu'à ce que le paquet est installé.

Choisissez un modèle
Suivant Démarrer XCode ou l'installer après l'avoir téléchargé à partir du App Store d'Apple. Créer un nouveau projet commence lorsque l'IDE. De vous devez sélectionner un modèle de projet. Si vous cliquez sur les types d'IOS le projet d'application, vous verrez le modèle PhoneGap. Sélectionnez-le et cliquez sur "Suivant".

Nommez votre projet
Dans la page suivante, vous devrez donner à votre projet un nom. Pour mon exemple du projet, il sera:. Make My Wine également fournir un identificateur d'entreprise si ce ce la première fois que vous utilisez Xcode.Click "Suivant" à nouveau, et la page Git vous demandera si vous voulez ajouter le projet à le contrôle de source. Si vous souhaitez l'ajouter, laissez la case à cocher sur indication contraire supprimer et cliquez sur le bouton pour créer le projet et d'ouvrir l'environnement de développement.

Le dossier www
Avant de pouvoir commencer à travailler sur votre application, vous aurez besoin pour fixer la référence dossier www dans votre projet. Le dossier www est ont été vous mettez tous vos fichiers de projet: html, js (javascript), css (feuille de style), des images. À l'heure actuelle, il n'est pas visible dans le navigateur de projet. C'est apparemment un bug avec le modèle tel que documenté sur le site Web PhoneGap et de la documentation. Suivez ces étapes pour fixer:

Choisissez le simulateur approprié dans le menu Xcode

• Sélectionnez l'iPhone 4.3 Schéma Active Simulator dans le menu déroulant.
• Cliquez sur le bouton Générer et exécuter le projet.

• Vous réussirez dans la construction de l'application et elle se déroulera, mais vous verrez un "index.html" ne trouve pas d'erreur de l'exécution. Il est important pour générer et exécuter la première application afin de créer et peupler le dossier www, sinon, si vous naviguez vers le dossier du projet dans le Finder, votre dossier de projet ne contient pas un dossier www.

• Dans le menu simulateur, quitter l'application
• Choisissez votre nom de projet dans le navigateur de projet, faites un clic droit et sélectionnez "Afficher dans le Finder"

Faites glisser le dossier www de projet racine

• Dans le Finder, vous devriez voir le dossier www dans le dossier du projet. Pour ajouter une référence, faites glisser le dossier www à partir du Finder juste en dessous du nom du projet dans le navigateur de projet dans XCode.

De référence de dossier

• Dans la page de confirmation de référence, sélectionnez "Créer des références de dossier pour le tout dossier ajoutée" et cliquez sur "Terminer".

• Développez le dossier www; vous devriez avoir un fichier index.html et un fichier PhoneGap-1.1.0.js. Pour l'amour de f ce tutoriel, nous allons travailler avec index.html seulement. Sélectionnez le fichier index.html et il sera automatiquement ouvert dans l'éditeur. Le fichier Javascript est nécessaire pour ajouter une logique d'une application et il est hors de la portée de ce tutoriel.

Exécution app - pas d'erreurs

• Il ya beaucoup de passe-partout code html dans le fichier, que vous ne devez pas supprimer sinon le soft ne fonctionne pas correctement. Localisez le "onDeviceReady" fonction dans la section de tête et de supprimer la ligne "navigator.notification.alert (« PhoneGap travaille ")" pour éviter que votre application à partir de l'affichage du message d'alerte chaque fois que ses mises en chantier
• Faites défiler la liste jusqu'à ce que vous obtenez à l'élément Body. Si vous n'êtes pas familier avec le HTML, il est entre les éléments du corps qui nous font le plus de notre développement.
• Générez et exécutez l'application à nouveau, vous aurez maintenant la page d'accueil PhoneGap

Nous pourrions faire notre édition d'ici, mais comme je voulais montrer comment développer une application sans avoir à coder, dans un environnement visuel, je vais éditer le fichier de l'éditeur Amaya HTML. Mais avant d'arriver à Amaya, je vais supprimer la ligne de code qui rend l'affichage contextuel lorsque l'application démarre. Sélectionnez et supprimez la ligne "navigator.notification.alert (« PhoneGap travaille »)« d'entre le code de fonction suivant:

avant ...

onDeviceReady fonction ()
{
/ / Faire ton truc!
navigator.notification.alert («PhoneGap travaille")
}
Après ...
onDeviceReady fonction () {
}

Amaya

Si vous n'avez pas déjà fait, téléchargez l'application Amaya à partir du site du W3C (voir Ressources) et installer en suivant les instructions, ou lorsque vous ouvrez le fichier dmg, faites glisser et déposez l'icône de l'application Amaya dans le dossier Application sur le pont Barre d'outils sur votre Mac. Une fois Amaya s'ouvre, vous accueille avec une page d'accueil, qui vous pouvez fermer (Fichier -> Onglet Fermer).

• Ouvrez votre fichier index.html dans votre projet

• Fichier-> Open Document
• Naviguer (utiliser le bouton parcourir (extrême droite) à côté du champ chemin d'accès) à votre projet dans le Finder.
• Sélectionnez "Remplacer l'onglet courant"
• Cliquez sur "Ouvrir"
• Cliquez sur "Ouvrir" à nouveau pour fermer la boîte de dialogue de fichier et ouvrez le fichier dans Amaya. Vous devrez peut-être cliquez n'importe où dans l'écran pour actualiser l'affichage.

Amaya La page d'accueil

Sélectionnez la page Index dans le dossier www

Page d'index dans Amaya

création div

Maintenant, je vais remplacer le texte passe-partout avec mon propre contenu. Amaya fonctionne un peu comme un éditeur de document ordinaire, comme Microsoft Word. Vous n'avez qu'à ajouter le texte et les éléments dont vous avez besoin et utiliser les outils de formatage (maintenant le droit, ou "Affichage-> Afficher / Masquer les barres d'outils-> Afficher les outils" ou F8). Pour le tutoriel, je vais remplacer le titre et ajouter une image de fond et ajouter une liste de recettes de vin. Suivant Je vais ajouter une nouvelle page qui va contenir ma recette.

• Je vais remplacer le titre par "Ma liste de recette du vin"

• Changer la couleur du texte à blanc, en sélectionnant le texte en cliquant sur le sélecteur de couleur dans la boîte à outils.

Il est important de garder à l'esprit que nous développons pour un appareil mobile, de sorte résolution de l'écran est important. Pour l'iPhone (iPod Touch), la résolution d'écran est 640x960 (Portrait) et 960x640 (paysage). Pour obtenir une bonne idée de la contrainte que nous devons garder à l'esprit, je suggère la création d'un élément div et en définissant ses paramètres de dimension à la taille Portrait ci-dessus. Pour configurer l'image div élément, la dimension, le style et le fond pour l'élément body, suivez ces instructions:

• Retirez le texte ci-dessous le titre
• Placez votre curseur au début de la ligne.
• Menu: Insertion-> Division (div). Vous ne verrez pas l'écran div mais vous obtiendrez une confirmation dans la barre d'état au bas de l'écran

Couleur Format de div

Format de contour div

• Ajouter un style à l'élément div

• Sélectionnez l'élément div dans le navigateur de l'élément
• Menu: Format-> Style Editor
• Sélectionnez l'option "Couleurs" onglet

• Ajouter sur 1px vers le haut, Bas, Gauche, Droite frontière div
• Style: Solide
• Couleur: Gris
• Sélectionnez une couleur de fond

• # A6254f

Liste des recettes de vin

Ajouter Inscriptions vin

• Ajouter la liste des recettes de vin

• Ajouter un titre de recette par ligne

• Ajouter les noms de vins suivants

• "Cidre"
• "Vin de rhubarbe"
• "Vin de cerise"

Sélectionnez Texte, cliquez sur l'outil de liste dans la boîte à outils sur la droite Faites votre 16pt texte pour une meilleure lisibilité de définir la couleur du texte à: # 4f0f5e

• Ajouter une image de fond. Vous pouvez en trouver un dans le domaine public.

• Si vous téléchargez une, enregistrer le jpg ou png dans le dossier www de votre projet
• Pour ajouter à l'élément body, sélectionnez comme vous l'avez fait pour la div
• A partir du menu ouvrir l'éditeur de style
• Sélectionnez l'onglet couleurs
• Suivant le domaine image de fond, cliquez sur le bouton Parcourir et naviguez jusqu'à votre dossier www et sélectionnez le fichier.
• Cliquez sur "Appliquer"
• Votre écran doit ressembler à la capture d'écran ci-dessous

Image de fond

Test App dans Flight Simulator

Retour à XCode et de modifier le régime de l'actif à l'iPhone Simulator 4.3, si vous n'avez pas déjà fait.

• Exécutez votre application. Il devrait ressembler à quelque chose ressemblant à mon application dans la capture d'écran ci-dessous

Exécution App

Maintenant, je vais ajouter plus de trois pages à notre projet, un pour chaque recette et ensuite je vais ajouter des liens à partir de notre liste pour chacune des pages.

• Je vais les nommer apple.html, cherry.html et rhubarb.html
• Pour le style, tous les trois seront identiques
• Télécharger une image d'un "bouton retour" et enregistrez-le dans votre dossier www, ou vous pouvez télécharger la suivante:

• Pour configurer la mise en page, je vais commencer par ajouter quelques retours chariot en haut de la page, car le titre de la recette sera placé en dessous de la barre d'outils qui va contenir le bouton de retour.
• Retournez votre nouveau le curseur en haut de la page et insérer un élément div comme nous le faisions auparavant.
• Ensuite, sélectionnez le div dans le navigateur de l'élément à la base et insérez une image bouton "Retour" "Insertion-> Image (img)"
• Accédez au dossier www et sélectionnez le bouton "Retour"
• Entrez le texte de remplacement "Retour au menu principal"
• Cliquez sur le "clic" sur le bouton
• Avec la div est toujours sélectionné, ouvrez l'éditeur de styles
• Régler les marges 1px

• Définir la couleur d'arrière-plan à la lumière grise
• Appliquer le style

Le contenu du vin d'Apple

Placez le curseur sous l'élément div

• Ajouter le titre "Délicieux cidre"
• Sélectionnez le texte et définir la police à 16pt
• Régler la couleur au noir

Sous le titre ajouter un autre élément div

• Comme précédemment, définir les marges de 1px
• Rembourrage à 0.5em (sélectionner le type de mesure em partir du menu déroulant)
• La couleur de fond au gris moyen
• Régler la taille de police à 9 points
• width: 300px
• hauteur: 960px

A l'intérieur de la copie et coller div la recette suivante

Équipement

• Deux cuves de fermentation (bidon de 5 gallons en plastique avec couvercle et un trou d'air de verrouillage)
• Un sas
• Un instrument de siphonnage (une nette 1 tuyau de diamètre, 3-4 pi de long)
• Hydromètre (pour vérifier le niveau teneur en alcool)

Ingrédients (1 gallon = 4 litres)

• De cidre de pomme (sans conservateur), 1 gallon (4 litres) ou plus
• La canne à sucre, 1 lb par gallon
• Éléments nutritifs de levure, 1 cuillère à café par gallon
• Pectine Enzyne, c 1/8 par gallon
• Mélange d'acides, 1-1/2 c par gallon
• Tannin vin, thé 1/4 par gallon
• Acide ascorbique, c 1/8 par gallon
• Campden Tablet, 2 (écrasé et disssolved); 1 à la préparation initiale et 1 à la fin du processus de
• Lalvin levure, la taille EC-1118, 1 paquet par lot jusqu'à 5 gallons
• Cinnanom bâton, 1 gallon (facultatif)
• Copeaux de chêne, 1/4 tasse par gallon (facultatif)

Comment faire pour

• Mélanger les ingrédients dans un récipient ouvert, à l'exception de la levure Lalvin.
• Couvrir avec un torchon et laisser reposer la lumière 24 heures
• Après 24 heures, ajouter la levure Lalvin, 1 paquet par lot (5 gallons ou moins).
• Ferment 4-5 jours ou jusqu'à ce que hydromètre indique 1,030 à 1,040.
• Utilisez le siphon pour transférer le contenu du premier récipient vers un deuxième récipient. Placez une extrémité du tuyau dans le premier récipient et sucer jusqu'à ce que le jus commence à monter. Retirer de la bouche et des pores de liquide dans le récipient seconde à travers un dispositif de filtrage (crépine ou gaze). Une autre technique consiste à ramasser avec un ladel le liquide du premier récipient au deuxième récipient à nouveau à travers un dispositif de filtrage.
• Le conteneur secondaire doit avoir un couvercle et un trou pour le sas à air. Le sas permet aux gaz de s'échapper sans laisser la poussière de particules autres dans le récipient. Vous pouvez également utiliser un coton à fromage, mais doit être sécurisée sur l'ouverture.
• Laissez fermenter encore 2-3 semaines ou jusqu'à ce que hydromètre indique 0,998.
• Continuer à fermenter encore 2-3 semaines pour laisser le vin clair.
• Ajouter plus de Campden comprimé (s), 1 fois par gallon de vin est clair.
• La bouteille et laisser l'âge, au moins 6 semaines

La page terminée devrait ressembler à la capture d'écran ci-dessous

Recette du vin d'Apple et mise en page finis dans la page apple.html

Retour à la page principale

Lier les Pages

Pour finir, je vais ajouter un lien vers la page apple.html partir d'une page index.html ma principale

• Ouvrez la page index.html
• Sélectionnez le texte du vin Apple dans la liste
• Ajouter un lien, à partir du menu Liens-> Créer ou modifier un lien
• Comme avant de naviguer dans le dossier www et sélectionnez la page apple.html
• Cliquez sur "Cliquez sur" le bouton
• Pour supprimer le lien hypertexte souligner, sélectionnez le texte et ouvrez l'éditeur de styles

• Sur l'onglet Caractères, sélectionnez "none" pour text-decoration
• Appliquer pour confirmer le changement.

Avant de continuer, je vais tester l'application dans le simulateur

• Ouvrez l'IDE Xcode
• Cliquez sur le bouton de marche
• Après l'application est chargée, cliquez sur le lien d'Apple Recette du vin
• Lorsque les charges d'Apple recette de vin, d'utiliser la souris pour simuler coulissante la page de haut en bas pour avoir un aperçu du texte.
• Cliquez sur le bouton "Retour" pour revenir à la page principale