Ceci est la troisième et dernière partie de la série sur Lecteur de flux Audero. Dans cet article, vous apprendrez à créer le fichier de configuration et à terminer le projet que nous avons commencé dans une leçon précédente..
1. Finition de l'application
Une meilleure mise en page réactive
Dans la première partie de cette série, j’ai écrit sur l’importance de la data-iconpos attribut pour les liens dans l'en-tête et le pied de page. Dans cette section, vous apprendrez pourquoi nous les utilisons. Je l'utilise, avec un peu de JavaScript, pour créer un meilleur effet réactif. Je l'utilise pour masquer le texte des liens où il est appliqué. Le but est d'économiser de l'espace, ce qui est important, en particulier pour les écrans plus petits. Mais que se passe-t-il si l’écran est suffisamment grand, disons plus grand que 480 pixels, pour afficher le texte? Pour cela, nous allons écouter pour le page avant de créer événement, et attacher un gestionnaire, le updateIcons () méthode du Application classe, pour réagir une fois qu'il est tiré. Comme les noms l'indiquent, l'événement est déclenché avant la page et ses widgets sont initialisés. Notre gestionnaire testera d’abord si la page est plus grande que 480px et, le cas échéant, il supprimera data-iconpos attribut, donc le texte du lien sera affiché.
Le code qui implémente cette méthode est le suivant:
updateIcons: function () var $ buttons = $ ('a [icône de données], bouton [icône de données]'); var isMobileWidth = ($ (fenêtre) .width () <= 480); isMobileWidth ? $buttons.attr('data-iconpos', 'notext') : $buttons.removeAttr('data-iconpos');
2. Configuration de la construction
Le service Adobe PhoneGap Build vous permet de spécifier les métadonnées de votre projet avec un fichier de configuration appelé config.xml. Il suit la spécification du widget W3C et doit rester à la racine de l'application, au même niveau de index.html. La première ligne est la déclaration XML et la racine du document est un balise qui a plusieurs attributs disponibles. Les plus importants sont identifiant, l'identifiant unique de l'application, et version, qui spécifie la version de l'application. À l'intérieur de tag, vous pouvez écrire les métadonnées.
Si vous avez suivi le didacticiel jusqu'à présent, vous vous en souviendrez lorsque nous avons initialisé l'application à l'aide du PhoneGap CLI, il a créé un fichier de configuration par défaut. La configuration générée spécifie trop de paramètres pour chaque plate-forme par rapport à nos besoins. En fait, nous utiliserons plusieurs paramètres, mais comme il s’agit d’un tutoriel, nous allons nous concentrer sur quelques plates-formes. Cependant, vous êtes absolument libre de vous développer pour répondre à vos besoins individuels..
Dans le fichier de configuration, nous avons:
prénom (obligatoire): c'est le nom de l'application. Il ne doit pas être unique.
La description (obligatoire): texte spécifiant l'objectif de votre application. Ceci est très important car il apparaîtra comme description de votre application sur les marchés..
Auteur (facultatif): l'auteur de l'application. Il possède deux propriétés facultatives: href, une adresse URL du développeur ou de la page d'accueil de la société, et un courrier électronique, l'adresse électronique du développeur ou de la société. Malheureusement, vous ne pouvez spécifier qu'un seul auteur, vous ne pouvez donc pas avoir les détails pour plusieurs auteurs ici..
Icône (facultatif): ce sera l'icône qui s'affichera sur les appareils qui installent votre application. Si ce n'est pas spécifié, le logo Cordova sera utilisé.
Éclaboussure (facultatif): Il définit l'écran de démarrage de l'application, il s'agit de l'image affichée lors du chargement..
Préférence (facultatif): ensemble de préférences que vous souhaitez appliquer à votre application. C'est une balise fermée et vous pouvez avoir zéro ou plus balises à l'intérieur du fichier. Il a deux attributs et les deux sont obligatoires: prénom et valeur. Vous pouvez définir plusieurs préférences, mais la plus importante à utiliser à mon avis est la version Cordova..
Accès (facultatif): permet à votre application d'accéder aux ressources d'autres domaines. Elle permet notamment de charger des pages à partir de domaines externes pouvant prendre en charge l'intégralité de votre visualisation Web. N'oubliez pas ce que j'ai expliqué précédemment dans la section intitulée "Le plug-in InAppBrowser", à savoir que pour ouvrir les liens externes dans Cordova WebView, vous devez les ajouter à la liste blanche de l'application. Par souci de brièveté, nous autoriserons toute ressource externe utilisant le * Caractère spécial.
Gap: plugin (facultatif): Spécifie les fonctionnalités que vous souhaitez utiliser. Par exemple, avant d’installer une application, Android indique à l’utilisateur les autorisations nécessaires et, s’il accepte, il continue..
Si vous avez lu attentivement la liste ci-dessus et avez déjà utilisé PhoneGap, vous avez probablement remarqué l’introduction, dans la version 3.0.0, d’un nouveau paramètre appelé gap: plugin. Ce dernier a remplacé le fonctionnalité réglage, mais, à part le nom, le concept est exactement le même.
Maintenant que j'ai noté les points clés du format, vous pouvez comprendre la source du fichier de configuration de notre projet. Toutefois, si vous souhaitez en savoir plus sur ce sujet, consultez la page de la documentation officielle. Le fichier complet est 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.. Aurelio De Rosa
3. Activer l'application pour qu'elle s'exécute
Nous sommes à la fin de cette série. Son but est de démontrer comment nous pouvons démarrer l'application en toute sécurité avec tous les fichiers que nous avons créés jusqu'à présent. Nos gestionnaires et méthodes peuvent être exécutés en toute sécurité une fois que Cordova est complètement chargé, vous permettant ainsi d’appeler les API Cordova. Mais attendez… Quand Cordova est-elle prête? Je suis content que vous ayez demandé! Le cadre fournit un événement appelé prêt que vous pouvez écouter. Étant donné que, dans le index.html fichier (le point d’entrée de l’application), nous écouterons l’événement et joindrons en tant que gestionnaire notre initApplication () méthode du Application classe. Il sera exécuté une fois l'événement déclenché.
Le code qui implémente ceci est montré ci-dessous.
4. Construction et test de l'application
Notre application est maintenant complète. Tout ce qui reste à faire est de le construire et de le tester sur un émulateur ou un périphérique réel. Pour créer l'application, vous avez deux possibilités: votre ordinateur ou le service cloud Adobe, appelé Adobe PhoneGap Build. N'oubliez pas que si vous souhaitez utiliser votre ordinateur, vous devez installer le SDK pour chaque plate-forme que vous souhaitez cibler. le PhoneGap CLI a une commande pour construire l'application (construire), pour le tester (installer) et d’exécuter les deux tâches (courir). Alors, disons que vous voulez construire et tester Lecteur de flux Audero sur Android, vous devez taper la commande suivante:
phonegap run android
Veuillez noter que si vous avez un périphérique Android connecté et correctement configuré à l'ordinateur, l'application s'exécutera sur celui-ci par défaut. Sinon, il fonctionnera sur l'émulateur SDK.
Si vous souhaitez utiliser Adobe PhoneGap Build pour générer les fichiers installables, vous pouvez également utiliser la CLI, simplement en utilisant le éloigné commande comme indiqué ci-dessous:
phonegap à distance construire Android
Gardez à l’esprit que, l’environnement de compilation distant n’ayant pas d’émulateur, le installer et courir les commandes génèrent simplement un code QR dans le PhoneGap Build interface. De plus, pour utiliser le service, vous devez avoir un compte Adobe. Cela signifie que (malheureusement) vous ne peux pas utiliser les identifiants GitHub.
Conclusion
Comme vous l'avez vu tout au long de cette série, la création d'un lecteur de flux peut être très simple grâce à des infrastructures telles que jQuery Mobile et Cordova, ainsi qu'à certaines API telles que Google Feed API. J'espère que vous avez apprécié ce tutoriel et si vous souhaitez améliorer le projet, envisagez d'ajouter certaines fonctionnalités que vous pensez avoir manquées et de les utiliser sur vos propres appareils mobiles..
Share
Accentsconagua
