Share
Vous voulez apprendre à utiliser PhoneGap, mais vous ne savez pas par où commencer? Rejoignez-nous pour créer «Sculder», un hommage non seulement à une excellente série télévisée de science-fiction, mais également à une application mobile native à part entière pour le croyant qui vous croit!
Dans la dernière partie de cette série, notre application Web a été mise en place avec une structure de base et des transitions entre les pages. Dans cette partie, nous allons continuer à compléter les parties de l'application qui peuvent fonctionner sans PhoneGap et à mettre en place notre projet PhoneGap, prêt pour l'intégration..
Avant de commencer, je voulais répondre à une question que l’on me pose toujours. C’est une question que j’ai déjà posée et que vous avez peut-être posée aussi. À savoir: comment déboguer une application Web sur un appareil mobile?
Il existe plusieurs façons de déboguer un périphérique. Vous pouvez aller à la vieille école et utiliser alerte (quelque chose);, Mais avoir des alertes partout est à la fois inefficace et pourrait se retrouver dans le code de production (tellement ennuyeux!). Vous pouvez utiliser la console de débogage dans Safari sur un périphérique iOS, situé dans Paramètres -> Safari -> Développeur, mais tous les périphériques n'utilisent pas Safari ou ne disposent pas d'une console de débogage. En outre, cette console affiche un minimum d'informations.
Si je dois juste utiliser une console JavaScript pour attraper un console.log (), ou peut-être exécuter un JS sur le périphérique pour vérifier quelque chose, j'aime utiliser jsconsole.com. C'est l'une des méthodes les plus simples pour utiliser une console sur votre appareil et même une application iOS est disponible. Pour démarrer une session sur jsconsole.com, tapez simplement : écoute et vous obtiendrez alors une sortie de balise de script à inclure dans votre page. Démarrez votre application et vous verrez la connexion se produire dans la console. Vous pouvez maintenant exécuter JS dans la console et le voir reflété sur le périphérique ou vous connecter à la console dans votre code et le voir ici. Voir la vidéo ci-dessous pour une démonstration de ceci:
Pour plus d'aide sur jsconsole, voir ici.
WeInRe (Web Inspector Remote) est une autre alternative. WeInRe, qui a débuté en tant que projet indépendant, fait maintenant partie de la famille PhoneGap et se trouve sur debug.phonegap.com. La configuration est très similaire à celle de jsconsole, mais vous obtenez un inspecteur WebKit, un peu comme Chrome ou Safari. Voir la vidéo ci-dessous pour un exemple:
Une autre alternative est Socketbug, ce qui est très bien, mais nécessite l’installation et la configuration de Node et socket.io. Si, toutefois, vous vous sentez aventureux et que vous voulez essayer Socketbug, ça vaut le coup.
Ce sont les outils de débogage que j'utilise. Maintenant, nous pouvons commencer à ajouter des fonctionnalités!
L'une des fonctionnalités que nous pouvons implémenter sans une API PhoneGap est le flux Twitter. Cette fonctionnalité listera simplement un flux de tweets correspondant à un terme de recherche particulier. Heureusement, Twitter peut renvoyer des données au format JSON lorsque nous lançons une requête sur search.twitter.com. Si vous utilisez l'URL suivante http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, vous obtiendrez une réponse JSON contenant suffisamment de données pour remplir une liste.
Afin d'obtenir nos données sur la page et de les afficher de manière agréable, nous allons utiliser des modèles. Il existe de nombreux modèles de moteurs de templates et ils méritent tous d’être examinés. Moustache est très populaire et très puissant. jQuery a également un qui, je pense, est parfait pour ce que nous voulons réaliser.
Dans la page tweet, je vais avoir un vide ul et un div conteneur qui est caché sur la page. Le conteneur contiendra le code que je veux utiliser comme modèle. Dans ce cas, c’est un simple li élément avec une balise de base qui contiendra les informations de twitter que nous voulons afficher. Ce sera dans un scénario bloc qui a un identifiant unique et un type de type = "text / x-jquery-tmpl", c'est pour que le navigateur ne l'exécute pas en JavaScript. Le moteur de templates Twitter utilise $ en tant que paramètre fictif pour les données que nous obtiendrons de notre JSON Les données. La page de tweets ressemble maintenant à ceci:
Nous devons maintenant écrire notre fonction qui sera appelée chaque fois que nous chargerons cette page. Cette fonction ira sur Twitter et obtiendra notre flux:
Accentsconagua
fonction getTweets () var q = "ovni + repéré" rpp = 5, twurl = "http://search.twitter.com/search.json?q="; $ .getJSON (twurl + q + "& rpp =" + rpp + "& callback =?", function (data) $ ("# tmpl-tweets"). tmpl (data.results) .appendTo ("# # tweets") ;); Je vais commencer par charger cette page, donc j'ai défini la classe de la page sur current. Maintenant, il suffit d’ajouter du style aux tweets pour qu’ils soient affichés un peu plus agréablement.
/ ** Tweets Styling ** / #tweets list-style: none; rembourrage: 10px; #tweets li font-size: 12px; débordement caché; marge inférieure: 20 px; #tweets li h2 taille de la police: 14px; marge: 0; .avatar margin-right: 10px; #tweets li a, #tweets li span float: left; #tweets li span width: 70%;
La prochaine fois que nous démarrons l'application, nous devrions obtenir les éléments suivants.
L’autre fonctionnalité que nous pouvons implémenter avant de procéder à l’intégration de Phonegap est la fonctionnalité de carte. Nous allons utiliser l'API Google Maps pour générer une carte simple, puis utiliser des données de carte pour supprimer des marqueurs. Chaque marqueur indiquera des observations d'OVNI.
Pour cela, nous allons utiliser l'API JavaScript, actuellement à la version 3. Une introduction complète à l'API maps est hors de portée de ce tutoriel, mais vous pouvez trouver toute la documentation disponible ici, ainsi que des exemples d'implémentation. Si vous suivez le didacticiel présenté ici, vous verrez comment mettre en œuvre une carte de base. Nous pouvons utiliser le même code pour implémenter une carte de base et obtenir les résultats suivants:
Nous pouvons maintenant consulter la documentation qui couvre les marqueurs, disponible ici. Nous pouvons maintenant déposer des marqueurs de base sur notre carte lors du chargement. Les marqueurs représenteraient les emplacements des observations avec les données des photographies prises et téléchargées par les utilisateurs de l'application. Nous aurions un service fonctionnant sur un serveur pouvant renvoyer des données via Ajax, probablement au format JSON. Encore une fois, la configuration de ce service est un didacticiel complet en soi, mais pour chaque entrée, nous créons un marqueur pour la carte en utilisant le code fourni dans la démonstration.
var marker = new Google.maps.Marker (position: newLatlng, map: map, title: "New Sighting");
Une fois la carte chargée, les marqueurs seraient ajoutés. Si vous parcourez la documentation de l'API Google, vous trouverez d'autres options pour les marqueurs, telles que leur affichage avec des images et des notes. Cela vaut la peine d’explorer les autres options et de proposer différentes implémentations..
C'est à peu près tout ce que nous pouvons faire avant d'arriver à PhoneGap. Notre dernière fonction nécessite l’utilisation de l’appareil photo. Commençons donc par configurer notre projet PhoneGap. Découvrez l'introduction à PhoneGap ici si vous ne l'avez pas encore fait..
Les icônes sont une partie très importante de l'application. C’est l’image qui représente votre application partout, et vous voudrez bien suivre certaines directives pour qu’elle soit belle partout où elle sera vue. Vous trouverez ici un article de blog intéressant sur la taille des icônes et les directives à suivre pour créer une icône. Je prends généralement une icône 512x512 et la redimensionne de là à toutes les tailles nécessaires.
Vous devrez également créer un écran de lancement / image de démarrage pour votre application..
Une fois que nous avons l'application PhoneGap par défaut en cours d'exécution sur notre simulateur et / ou appareil de test. Nous pouvons parcourir la page de résumé principale sur le modèle Xcode pour PhoneGap. La première chose que je veux vérifier est que le menu des appareils est défini sur iPhone. Nous pourrions également nous déployer sur iPad si nous le souhaitions, mais nous aimerions apporter quelques modifications CSS en premier. Pour l'instant, je m'en tiens à l'iPhone uniquement. Vérifiez toutes les orientations de l'appareil pendant que jQuery Mobile trie notre disposition en fonction de l'orientation. Vous pouvez glisser-déposer les fichiers image dans les emplacements attribués sur la page de résumé..
Maintenant, lorsque vous démarrez votre application, vous serez accueilli avec votre nouvelle icône d'application et la page de lancement. Copiez maintenant les fichiers sur lesquels vous avez travaillé dans le répertoire. www dossier. Lancez l'application et vérifiez que tout fonctionne correctement.
Une fois que vous avez configuré votre projet dans Eclipse (de la même manière que nous avons effectué notre projet test dans la première partie), vous devez disposer de trois tailles d’icônes pour votre application. Haute densité (72x72), densité moyenne (48x48) et faible densité (36x36). Ces icônes remplacent les icônes par défaut présentes dans le menu res dossier. Les acronymes appropriés sont hdpi, mdpi et ldpi, signifiant respectivement Elevé, Moyen et Faible. Les images que vous souhaitez utiliser comme écran de démarrage doivent également figurer dans ces dossiers..
Pour que l’écran de démarrage fonctionne sous Android, nous devons ajouter et modifier notre DroidGap classe pour inclure l'image de démarrage lors du chargement. Ajouter:
super.setIntergerProperty ("écran de démarrage", R.drawable.splash) Ensuite, le loadUrl a besoin d'un délai d'attente ajouté.
super.loadUrl ("fichier: ///android_asset/www/index.html", 5000); Votre fichier devrait maintenant ressembler à ceci:
Exécutez l'application et assurez-vous que tout fonctionne correctement.
Nous sommes maintenant prêts à mettre en œuvre nos deux dernières fonctionnalités: la caméra de l'appareil et les options de stockage local. Cela sera couvert dans les prochains tutoriels de cette série. Cette série passera également par la soumission de notre application aux différents magasins d'applications, alors assurez-vous de suivre!
