Bien qu'ils ne soient pas spécifiquement conçus pour fonctionner ensemble, jQuery Mobile et Cordova (également connu sous le nom de PhoneGap) constituent un duo très puissant pour la création d'applications hybrides et mobiles. Cette série vous apprendra comment développer un lecteur de flux à l'aide des technologies Web et de ces deux cadres. Au cours de cette série, vous vous familiariserez également avec les plug-ins Cordova Connection et Storage Core et l'API Google Feed..

---

Aperçu de l'application

L'application que nous allons construire dans ce tutoriel, appelée "Audero Feed Reader", est très petite et facile à comprendre. C'est un lecteur de flux de base qui vous aidera à garder toutes les nouvelles et les articles qui vous intéressent au même endroit. Après tout, Google a fermé Google Reader, nous devons donc le remplacer, ne nous?

Sur l'écran d'accueil de l'application, nous placerons deux boutons pour mettre en évidence les deux fonctionnalités principales: un bouton Ajouter un nouveau flux et une liste des flux enregistrés. La disposition de l'écran d'accueil est illustrée par la capture d'écran suivante:

Pour que le projet soit aussi simple que possible, nous n'enregistrerons que le nom du flux et son URL. Ainsi, une fois que l'utilisateur aura cliqué sur le bouton "Ajouter un flux", nous afficherons un formulaire avec seulement deux zones de saisie, comme le montre l'image ci-dessous:

Maintenant que l'utilisateur est capable de sauvegarder autant de flux que souhaité, il est temps de lui permettre d'afficher la liste de ces flux enregistrés. De plus, pour aider l’utilisateur à trouver facilement un flux, la liste est classée par ordre alphabétique, ainsi qu’une boîte de recherche si les flux sont trop nombreux. Vous pouvez voir un exemple de la page décrite en regardant la capture d'écran ci-dessous:

Une fois que l'utilisateur a choisi un flux, l'application récupère l'URL et affiche les entrées disponibles. Pour analyser facilement les différents types de flux (Atom, RSS ou Media RSS), nous allons tirer parti de l'API Google Feed et en particulier de l'interface JSON de Google Feed. Ce dernier analysera l'URL demandée pour nous et renverra un objet JSON unifié et facile à analyser. Nous en découvrirons plus sur cette API dans la prochaine partie de cette série. Par défaut, pour économiser sur la bande passante, Lecteur de flux Audero nécessitera seulement 10 entrées. Pour permettre à l'utilisateur de récupérer plus de données, nous ajouterons un bouton "Afficher plus". Bien sûr, les données ne seront réellement récupérées que si le flux fourni expose plus de 10 entrées. Par exemple, Mobiletuts + ne fournit que 10 entrées. Par conséquent, si l'utilisateur clique sur le bouton "Afficher plus", le message "Aucune autre entrée à charger" sera affiché..

Pour économiser de l'espace, les entrées sont organisées avec un accordéon et, par défaut, seul le titre est visible. Cependant, l'utilisateur peut voir plus de détails si nécessaire. L'application affiche également le résumé de l'entrée, l'auteur et un bouton indiquant "Accéder à l'article" pour lire l'article complet sur le site Web correspondant. Notez que pour améliorer la convivialité, nous allons également afficher à nouveau le titre, mais cette fois-ci, vous pouvez cliquer dessus pour accéder à l'article complet..

L'aspect final de cette page est présenté ci-dessous:

---

Composantes du projet

À ce stade, nous savons quoi à faire, alors il est temps de voir Comment Nous le ferons. Les technologies impliquées dans le développement de Lecteur de flux Audero sont:

• HTML 5: Créer et annoter les pages.
• CSS 3: Styliser les pages. Notez que nous n'aurons pas de feuille de style CSS personnalisée et n'utiliserons que celle fournie et requise par jQuery Mobile..
• JavaScript: C'est le langage que nous utiliserons pour programmer la logique de l'application. C'est la seule langue supportée par PhoneGap.
• jQuery: jQuery sera utilisé pour sélectionner des éléments, attacher des gestionnaires d’événements et exécuter des requêtes AJAX. C’est aussi une dépendance de jQuery Mobile.
• jQuery Mobile: Ceci est notre cadre de choix pour créer l'interface utilisateur de nos pages. Cela nous permet d'optimiser facilement un site Web pour les appareils mobiles et de créer rapidement des interfaces mobiles. Au moment de la rédaction de ce document, la version la plus récente disponible et utilisée est la 1.3.1..
• PhoneGap: Enveloppe tous nos fichiers pour que nous puissions les compiler comme si nous construisions une application native. De plus, PhoneGap propose des API intéressantes et utiles pour communiquer avec le matériel de l'appareil, telles que le stockage et la connexion. La version utilisée est la version 3.0, une amélioration récente et significative par rapport à la version 2.x..

En plus de ce qui précède, nous utiliserons également ces plug-ins Cordova Core spécifiques:

• InAppBrowser: C'est un navigateur Web qui s'affiche dans l'application lors de l'appel window.open. Depuis la version 2.3.0, deux méthodes importantes ont été ajoutées: executeScript () et insertCSS (). Le premier vous permet d’injecter du code JavaScript, tandis que le second ajoute du code CSS dans le InAppBrowser la fenêtre. Nous n'utiliserons pas ces méthodes dans notre application mais je voulais les mentionner. Pour en savoir plus, visitez le document officiel InAppBrowser.
• Plugin de stockage: Fournit un accès aux options de stockage du périphérique. Notez que, comme l'affirme la documentation, certains périphériques fournissent déjà une implémentation de ces spécifications, auquel cas le support intégré s'applique. L'implémentation de Cordova offre un support compatible pour ceux qui ne le font pas. Pour en savoir plus, consultez la documentation sur le stockage local..
• Plugin de notification: Vous permet de créer des notifications visuelles, sonores et tactiles. Parmi les nombreuses méthodes disponibles, nous allons utiliser seulement alerte() pour montrer des messages à l'utilisateur. Par exemple, ce plugin sera utilisé lorsqu'un utilisateur ajoute ou supprime avec succès un flux. Pour plus d'informations, reportez-vous à la documentation Notification.
• Plugin de connexion: Il est constitué d’une seule propriété fournissant des informations sur l’état de la connexion du périphérique (WI-FI, 3G, aucune, etc.). Veuillez noter que depuis la version 2.3.0, vous devez accéder à la Lien objet en utilisant le nouveau navigateur.connexion propriété. Cette propriété correspond à la spécification W3C, au lieu de la précédente navigator.network.connection propriété. Plus sur ceci ici.

Si vous avez utilisé des versions précédentes de PhoneGap, vous reconnaîtrez que ces plug-ins ne sont rien d'autre que ce que vous connaissiez sous le nom d'API. Le changement de nom est dû à la nouvelle architecture PhoneGap. Ne vous inquiétez pas, mis à part le nom, presque tout est pareil. Si vous souhaitez en savoir plus sur les améliorations les plus récentes et les plus importantes de la version 3.0, consultez l'article d'introduction et le guide de prise en main..

---

1. Installez PhoneGap

À partir de la version 3.0.0, l’équipe de développement a introduit une nouvelle procédure d’installation de PhoneGap, qui requiert Node.js et npm. En outre, aucun lien de téléchargement simple n'est fourni comme solution de secours pour le moment. Par conséquent, le reste du didacticiel suppose que ces deux packages logiciels sont installés et fonctionnent. Une fois cela fait, la première étape consiste à taper la commande suivante pour installer PhoneGap:

npm install -g phonegap

Si vous utilisez Linux, n'oubliez pas de prévoir sudo à la ligne précédente.

---

2. Initialiser le projet

Avant de créer le dossier de projet, il convient de noter que l’équipe de développement a également introduit une ligne de commande dans cette nouvelle version pour aider les développeurs à effectuer des tâches courantes telles que la construction et l’exécution de l’application ou l’installation de plug-ins. La CLI vous permet également d’initialiser un projet. Non seulement créera un dossier avec la bibliothèque PhoneGap à l'intérieur, mais il générera également le squelette d'une application. Pour initialiser le projet, vous tapez simplement la commande suivante:

phonegap créer un lecteur de flux com.audero.free.utility.auderofeedreader "Audero Feed Reader"

Le premier argument spécifie le nom du répertoire à créer. Les deux autres arguments sont facultatifs et spécifient l'ID et le nom de l'application, respectivement. Une fois que vous avez exécuté la commande ci-dessus, vous verrez la structure suivante dans le dossier racine du projet:

• .Cordova: Utilisé pour la compatibilité d'arrière-plan avec l'outillage Cordova.
• fusionne: Dans ce dossier, vous pouvez ajouter n'importe quelle personnalisation spécifique à la plate-forme afin de ne pas avoir à modifier les fichiers source à chaque fois que vous travaillez avec un projet..
• plateformes: L'endroit où les installateurs compilés seront placés, au cas où vous compileriez le projet localement.
• plugins: Le dossier où vous trouverez les plugins de votre projet.
• www: Le dossier contenant les fichiers source et la configuration de l'application. Il contient les dossiers "css", "js" et "img" où vous pouvez placer les fichiers respectifs. En outre, il possède également un dossier "res" dans lequel vous placez des icônes et des écrans d'introduction..

---

3. Installer les plugins PhoneGap

Comme nous l'avons vu dans l'introduction, notre projet tirera parti de certains des plugins de base de PhoneGap. Pour les installer, vous devez utiliser la CLI en tapant la commande ci-dessous:

 phonegap local plugin add PLUGIN_REPOSITORY_URL

Au dessus, PLUGIN_REPOSITORY_URL est l'URL du référentiel du plug-in que vous souhaitez utiliser. Puisque notre projet utilisera à la fois les plugins principaux Notification et Connection, vous devez taper la commande suivante:

 plugin local phonegap ajouter https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git plugin local phonegap ajouter https://git-wip-us.apache.org/repos/asf /cordova-plugin-network-information.git

Comme le plus observateur l’a noté, je n’ai pas ajouté le plug-in Storage. La raison en est que depuis la version 3.0, l'accès est intégré à Cordova..

---

4. Ajouter des cadres PhoneGap

Maintenant que PhoneGap et ses plugins sont en place, nous devons ajouter les deux autres bibliothèques nécessaires: jQuery (j'utiliserai la version 2.0.3) et jQuery Mobile (version 1.3.1)..

Avant de poursuivre, il est important de comprendre pourquoi j'ai choisi la branche 2.x de jQuery. jQuery a deux branches principales actuellement en développement: 1.x et 2.x. La version que vous devez utiliser dépend vraiment de l'endroit où vous utilisez le framework et des navigateurs que vous avez l'intention de supporter. Bien que jQuery 1.x prenne en charge toutes les versions de Google Chrome, Firefox, Safari, Opera et Internet Explorer à partir de la version 6, la version 2.x supprime la prise en charge d'Internet Explorer 6, 7 et 8 en échange d'une taille plus petite. et une meilleure performance. Puisque nous développons une application mobile avec Cordova, nous n’avons pas à nous soucier d’Internet Explorer 6-8. En fait, les systèmes d'exploitation Microsoft pris en charge par Cordova sont Windows Phone 7 et Windows Phone 8 qui s'exécutent respectivement sur Internet Explorer 9 et 10. Par conséquent, nous pouvons utiliser jQuery 2.x en toute sécurité.!

Avec le lieu de compréhension ci-dessus, nous pouvons continuer avec nos étapes de base pour mettre en place Lecteur de flux Audero. Une fois les bibliothèques téléchargées, déplacez le fichier jQuery et le fichier JavaScript (version abrégée) de jQuery Mobile à l’intérieur du répertoire. "js" dossier. Ensuite, nous devons mettre la feuille de style de jQuery Mobile (jquery.mobile-1.3.1.min.css) à l'intérieur de "css" dossier. Enfin, nous plaçons les images fournies avec jQuery Mobile dans le dossier "img" dossier. Puisque nous avons légèrement modifié la structure native de jQuery Mobile, nous devons ajuster les chemins d'accès pointant vers les images contenues dans son fichier CSS. Nous devons spécifiquement remplacer la partie "images /" par cette chaîne "… / img /". Gardez à l'esprit que la chaîne doit être remplacée 5 fois.

---

5. Créer une structure de fichier de projet

Maintenant que la structure de projet est en place, nous devons créer le dossier "www", les fichiers HTML requis, définir l'icône de l'application par défaut, ajuster le fichier de configuration de la génération Adobe PhoneGap et modifier l'écran de démarrage par défaut. C'est beaucoup, alors continuons à avancer!

Au cours de cette série, nous allons créer les fichiers suivants:

• index.html: Le point d’entrée de l’application, où nous placerons les liens vers les bibliothèques utilisées.
• add-feed.html: Ceci est la page contenant le formulaire utilisé pour enregistrer un nouveau flux.
• list-feeds.html: Ceci affiche la liste des flux stockés.
• show-feed.html: Ceci montre les entrées du flux donné. De plus, il possède une barre de navigation avec un bouton pour supprimer le flux et un autre pour extraire plus d'entrées du flux..
• aurelio.html: La page des crédits contenant des informations sur l'auteur.
• feed.js: Ce fichier contient une classe, appelée Alimentation, utilisé pour créer, supprimer et récupérer les flux stockés. Il est basé sur le plugin Cordova Storage.
• application.js: Ce fichier contient une autre classe, appelée Application, qui a les méthodes pour initialiser les pages de l'application et attacher des gestionnaires à certains éléments de la page (par exemple les boutons de la barre de navigation précédemment cités).
• config.xml: Ce fichier XML contient les métadonnées de notre projet et stocke des paramètres tels que le nom et la description de l'application..

---

6. Créer la page d'accueil

Comme expliqué dans la section précédente, jQuery Mobile chargeant des pages à l'aide d'Ajax, nous devons charger les fichiers CSS et JavaScript au point d'entrée de notre application, c'est-à-dire index.html fichier. Cette page affiche le titre et la description de l'application, ainsi que tous les boutons pour accéder au reste de l'application..

La source complète de la page d'accueil est indiquée ci-dessous:

                
 
 
Lecteur de flux Audero
  
 
 Audero Feed Reader est un agrégateur de flux de base permettant de conserver au même endroit toutes les actualités et les articles qui vous intéressent.. 
 Ajouter une liste de flux 
  
  

Comme vous pouvez le lire dans le code ci-dessus, les boutons à l’intérieur du et le