Share
Dans cette série, nous allons développer un client Twitter utilisant les frameworks jQuery Mobile et PhoneGap. Ce projet sera déployé dans les environnements Android et iOS en tant qu'application native. L’interface utilisateur de l’application, appelée simplement «Tweets», sera construite à l’aide de jQuery Mobile et PhoneGap sera utilisé pour créer l’application native. Nous utiliserons également l’API de stockage PhoneGap pour accéder aux fonctionnalités de la base de données native. Tout le codage sera fait avec HTML et JavaScript en utilisant jQuery, jQuery Mobile et les bibliothèques PhoneGap.
Les principales caractéristiques de l'application Tweets abordées dans cette série sont les suivantes:
Accentsconagua
user_timeline et chercher. Le code de l'application est basé sur la fonction jQuery ajax () pour accéder à ces méthodes de l'API..Ce tutoriel a été organisé en 4 parties. Dans la section suivante de la partie I, intitulée "jQuery Mobile et PhoneGap", nous présentons brièvement jQuery Mobile et PhoneGap et traitons du développement d'applications natives multiplates-formes à l'aide de ces infrastructures. Dans la section suivante, "Flux d'écran", nous présentons l'application Tweets et décrivons son déroulement d'écran. La section intitulée "Structure de la page jQuery Mobile" est une introduction à plusieurs concepts de haut niveau du framework jQuery Mobile, en particulier les pages de conteneur et de contenu..
Dans la partie II, nous commencerons par examiner l'application Tweets. Dans "Review Of index.html", nous nous concentrons principalement sur la structure statique du code HTML et du code jQuery Mobile qui constituent les écrans de l'application. La section "API Twitter" donne un aperçu des méthodes de l'API Twitter. user_timeline et chercher. La section suivante, "Révision du code", passe en revue le code JavaScript implémentant les fonctionnalités de l'application. La deuxième partie traitera du "Chargement initial de la page", des "Fonctions utilitaires" et des "Fonctions d'accès à la base de données", et débutera la discussion sur les "Fonctions logiques de base de la gestion".
Dans la troisième partie, nous continuerons d'inspecter les "fonctions logiques fondamentales de l'entreprise", en reprenant la position que nous avions laissée dans la deuxième partie et en terminant l'examen du code de l'application Tweets en examinant les "gestionnaires d'événement" et les "fonctions d'affichage de page"..
La dernière partie de notre didacticiel, Partie IV, commence par la section intitulée "Fichiers de l'archive de téléchargement", dans laquelle nous décrivons le contenu du fichier d'archive accompagnant cette série. Dans la section "Thèmes spécifiques à l'environnement", nous expliquons comment importer l'application dans Eclipse pour la plate-forme Android et Xcode pour la plate-forme iOS. Dans cette section, nous donnons également des images d'écran de l'application dans un téléphone Android, un iPod touch et un iPad 2. Enfin, nous donnons des remarques finales dans "Conclusions"..
Toutes les icônes et les images Splash de l’archive de téléchargement ont été créées à partir d’un ensemble d’icônes fourni par Smashing Magazine. Comme indiqué sur le site Web lié, "Vous pouvez utiliser l'ensemble pour tous vos projets gratuitement et sans aucune restriction. Cependant, il est interdit de les vendre."
Le projet jQuery Mobile est un système d'interface utilisateur pour appareils mobiles qui fonctionne de manière uniforme sur différentes plates-formes, telles qu'Android et iOS. Alors que jQuery Mobile se concentre principalement sur l'uniformité de l'interface utilisateur dans un paradigme d'application Web, le cadre PhoneGap permet de développer des applications natives basées sur HTML5 et JavaScript pouvant être déployées sur plusieurs plates-formes mobiles, notamment Android et iOS. Ces frameworks peuvent être utilisés ensemble pour développer des applications natives où l'interface utilisateur est construite via jQuery Mobile et les fonctions de périphérique natives sont construites à l'aide de PhoneGap..
Le diagramme suivant donne une vue simplifiée d'une application native déployée sous Android et iOS, développée à l'aide de HTML5, CSS et JavaScript..
Notez que jQuery Mobile et PhoneGap prennent en charge des plates-formes mobiles supplémentaires telles que BlackBerry OS, Symbian et autres. Cependant, dans cette série, nous nous concentrerons uniquement sur Android et iOS..
Les avantages suivants du développement d'applications natives à l'aide de jQuery Mobile et PhoneGap sont énumérés ci-dessous..
D'autre part, le développement d'une application native utilisant jQuery Mobile et PhoneGap présente des inconvénients. Certains d'entre eux sont mentionnés ci-dessous.
En outre, comme dans tout projet de développement, vous devez toujours utiliser des outils de développement et de test spécifiques à la plate-forme pour tester et déployer votre application sur des appareils Android et iOS..
Pour l’exemple d’application présenté dans cette série, nous avons utilisé jQuery Mobile version 1.0 RC1 et PhoneGap version 1.1.0. C'étaient les dernières versions au moment de créer cette série.
Il existe deux types de flux d’écran distincts: l’un pour les appareils à écran large où la largeur d’affichage est supérieure à 500 pixels et l’autre pour les appareils à écran étroit dont la largeur d’affichage est inférieure à 500 pixels. Avec cette définition, un iPad sera considéré comme un écran large, tandis qu'un iPod touch ou un téléphone Motorola Droid sera considéré comme un écran étroit. Le seuil, 500, est une constante définie dans le code de l'application..
Voyons tout d’abord le déroulement de l’écran pour les appareils grand écran. L'écran initial comporte deux boutons portant les libellés "Ajouter un nom d'écran" et "Ajouter un terme de recherche". Il y a un champ de texte sous les boutons. Dans la partie inférieure gauche de l'écran, une liste comprend le nom d'écran et les termes de recherche saisis par l'utilisateur. Les noms d'écran sont gris et les termes de recherche sont sur fond jaune..
Pour entrer un nom d’écran Twitter, l’utilisateur tape le nom dans le champ de texte situé sous les boutons, puis appuie sur le bouton «Ajouter un nom d’écran». De même, pour entrer un terme de recherche Twitter, l'utilisateur le saisit dans le champ de texte situé sous les boutons, puis appuie sur le bouton "Ajouter un terme de recherche"..
Si l'utilisateur clique sur le bouton de suppression situé à l'extrême droite d'un élément de la liste (représenté par un «x» dans un cercle), cet élément est supprimé de la liste..
Si l'utilisateur clique sur un élément de la liste pour un nom d'écran Twitter, une roue en rotation s'affiche pour indiquer que la chronologie de l'utilisateur (tweets) pour ce nom d'écran est en cours de récupération sur Twitter..
Après avoir reçu la chronologie associée au nom d'écran, l'application les affiche à droite de la page, à côté de la liste. Ce sont les 11 derniers éléments de la chronologie associés au nom d'écran. Le seuil, 11, est une constante définie dans le code de l'application.
Notez que, selon l'API Twitter, il est possible de récupérer la chronologie d'un utilisateur sans authentification uniquement si sa chronologie n'est pas protégée / privée. Notre application ne comporte pas d'authentification, par conséquent, nous ne disposons que de calendriers publics..
De même, si l'utilisateur clique sur une liste d'éléments pour un terme de recherche Twitter, une roue en rotation s'affiche, indiquant que les résultats de la recherche sont en cours de récupération sur Twitter, comme dans la Figure 4. Après avoir reçu les résultats de la recherche, l'application les affiche dans la partie droite de la page en regard de la liste, comme dans la figure 5. Il s’agit des 11 derniers résultats associés au terme recherché. Le seuil, 11, est une constante définie dans le code de l'application.
La chronologie ou les résultats de la recherche peuvent inclure des liens URL. Si l'utilisateur appuie sur l'un de ces liens, un navigateur Web s'ouvrira pour afficher la page Web associée au lien. Lorsque cela se produit, l'application Tweets n'est plus active..
Le diagramme ci-dessous résume le déroulement de l'écran décrit ci-dessus..
Pour les périphériques à écran étroit, le déroulement de l'écran est similaire. Toutefois, en raison du manque d'espace, les entrées (éléments de la liste), la page de progression et les résultats s'affichent sur différents écrans..
L'écran initial, la page 'Entrées', contient les boutons, le champ de texte et la liste des noms d'écran et des termes de recherche empilés..
Si l'utilisateur clique sur un élément de la liste, la page "Progression" est affichée sur un écran séparé..
Lorsque les résultats sont reçus, la page Progression est remplacée par la case "Résultats"..
Si l'utilisateur appuie sur l'un des liens URL de la page de résultats, une application de navigation commencera à afficher la page Web dans le lien. Lorsque cela se produit, l'application Tweets n'est plus active. Sur les appareils Android, l'utilisateur peut revenir à l'application Tweets en appuyant sur le bouton Précédent de l'appareil. Pour les appareils iOS, l'utilisateur doit fermer le navigateur et lancer l'application Tweets à partir de l'écran d'accueil en appuyant sur l'icône de l'application..
Le diagramme ci-dessous résume le déroulement de l'écran pour les périphériques à écran étroit..
Nous allons maintenant discuter de la façon dont les écrans de notre application seront représentés à l'aide des éléments de page de jQuery Mobile (ici, nous empruntons certains éléments de mon précédent tutoriel, Construire une application de contacts. Pour une discussion détaillée sur la manière de créer des pages avec jQuery Mobile voir la section Anatomie d’une page dans la documentation de référence de jQuery Mobile).
Un seul fichier HTML dans la structure jQuery Mobile consiste en une page de conteneur avec une ou plusieurs pages de contenu à l'intérieur du conteneur. La page de conteneur a un data-role = "page" attribut, alors que les pages de contenu ont un data-role = "content" attribut. Une page de contenu peut éventuellement comporter à la fois un en-tête et un pied de page. Dans l'exemple ci-dessous, il y a deux pages de contenu avec un en-tête et un pied de page, et une page de contenu sans en-tête ni pied de page..
…………………
Dans une page de conteneur, il est prévu d'afficher une seule page de contenu à la fois. L'idée est de regrouper les écrans liés de manière logique dans une seule page de conteneur et de définir chacun d'entre eux en tant que page de contenu. Par exemple, ces pages de contenu peuvent partager du code JavaScript commun.
Dans l'application Tweets, une page de conteneur est stockée dans la page physique. index.html. Cette page de conteneur stocke toutes les pages de contenu nécessaires à l'application. Pour les périphériques à écran étroit, les écrans Entrées (Figure 7), Progression (Figure 8) et Résultats (Figure 9) sont représentés dans des pages de contenu distinctes. Pour les appareils à écran large, il n’existe qu’une seule page de contenu, nommée «Large», fournissant toutes les fonctionnalités requises. La figure suivante résume cette discussion.
Dans la partie initiale de ce didacticiel, nous avons brièvement présenté jQuery Mobile et PhoneGap et discuté du développement d’applications natives multiplates-formes utilisant ces frameworks. Ensuite, nous avons présenté l'application Tweets et décrit son déroulement à l'écran. Ensuite, nous avons présenté plusieurs concepts de haut niveau dans le framework jQuery Mobile. En particulier, les pages contenant et contenu ont été discutées.
Dans la partie II, nous commencerons par examiner l'application Tweets. Dans "Review Of index.html", nous nous concentrerons principalement sur la structure statique du code HTML et du code jQuery Mobile qui constitue les écrans de l'application. La section "API Twitter" donnera un aperçu des méthodes de l'API Twitter. user_timeline et chercher. La section suivante, "Code Review", passera en revue le code JavaScript implémentant les fonctionnalités de l'application. La deuxième partie traitera du "Chargement de page initial", des "Fonctions utilitaires", des "Fonctions d'accès à la base de données", puis lancera la discussion sur les "Fonctions logiques de base de l'entreprise"..
