Share
Ce que vous allez créerÀ l'époque des débuts d'Android, alors que les bonnes interfaces utilisateur n'existaient pas et que la plupart des appareils Android étaient sous-alimentés, créer des applications hybrides - des applications développées à l'aide de technologies Web telles que HTML5, CSS et JavaScript - était une très mauvaise idée..
Comparées aux applications natives, elles semblaient très différentes et leur performance était médiocre. Ces jours, cependant, sont partis depuis longtemps. Aujourd'hui, la plupart des appareils mobiles peuvent exécuter des applications hybrides sans effort et de nombreux frameworks vous permettent de vous moquer parfaitement de l'apparence native d'Android. Par conséquent, si vous êtes confronté à une échéance serrée ou si vous travaillez avec un petit budget, opter pour la méthode hybride n'est plus une si mauvaise idée..
Dans ce tutoriel, je vais vous montrer comment créer une application de liste de tâches simple et hybride pour Android. L'interface de l'application sera conforme aux spécifications de conception matérielle de Google, à l'apparence native d'Android Lollipop et de Marshmallow. Pour ce faire, nous utiliserons un polymère, des éléments en papier polymère et Apache Cordova..
Pour suivre, vous aurez besoin de:
Si vous êtes nouveau à Cordoue, prenez le temps de lire cette introduction de Wernher-Bel Ancheta. Cette introduction devrait vous mettre au courant.
Polymer est un framework qui vous permet de créer rapidement des composants Web personnalisés, des éléments Polymer. En utilisant des éléments Polymer, vous pouvez rendre vos applications Web plus modulaires et votre code plus réutilisable. Une fois créé, un élément peut être utilisé exactement comme les autres balises HTML des pages HTML. Par exemple, si vous avez créé un élément personnalisé appelé mon élément, vous pouvez l'utiliser dans n'importe quelle page HTML en utilisant le code suivant:
"html
"
De plus, en utilisant le framework Polymer, vous pouvez exploiter les fonctionnalités de liaison de données fournies pour rendre votre code JavaScript plus simple et moins sujet aux erreurs..
Les éléments de papier sont des éléments polymères créés en suivant les instructions de conception des matériaux. Ils peuvent être utilisés comme alternatives aux éléments HTML habituels. Par exemple, si vous souhaitez ajouter un bouton de conception de matériau à votre page, vous pouvez utiliser un bouton de papier élément. Le code à faire ressemble à ceci:
"html
"
De même, si vous souhaitez ajouter une carte ou un bouton d’action flottant, vous pouvez utiliser le bouton carte en papier ou fabrique de papier éléments. Je suis sûr que vous commencez maintenant à comprendre l’utilité des éléments en polymère et en papier..
Une application créée à l'aide d'éléments Polymer et Polymer est fondamentalement une simple collection de fichiers HTML, CSS et JavaScript. Cela signifie qu'il a besoin d'un navigateur pour fonctionner. Toutefois, il peut s’exécuter dans une vue Web, un élément d’interface utilisateur natif qui se comporte comme un navigateur sans chrome..
Apache Cordova est un framework qui vous permet de générer une application native contenant un affichage Web et de spécifier les pages HTML à afficher. Dans ce tutoriel, nous utiliserons Apache Cordova pour exécuter l'application de liste de tâches sur les appareils Android..
Pour accélérer le développement et faciliter le débogage, la plupart des développeurs commencent à créer leurs applications hybrides sous forme d'applications Web. Nous ferons la même chose. Commençons par créer l'application de liste de tâches sous forme de projet Web ordinaire pouvant être exécuté dans le navigateur..
Créez un nouveau répertoire pour le projet et nommez-le. todoWebApp.
bash mkdir ~ / todoWebApp
Pour gérer les dépendances du projet, nous utiliserons Bower. Si vous n'avez pas installé Bower, utilisez npm pour l'installer globalement.
bash sudo npm installer -g bower
Une fois que Bower est installé, accédez au répertoire du projet et utilisez le tonnelle commande d'installation d'éléments en papier polymère ainsi que des dépendances nécessaires.
bash cd ~ / todoWebApp bower installer PolymerElements / paper-elements
Ceci termine la configuration du projet Web.
Créons maintenant un élément Polymer personnalisé contenant du code pour la mise en page et les fonctionnalités de l'application Web Liste de tâches. Commencez par créer un nouveau fichier et nommez-le task-list.html.
Chaque élément de papier utilisé dans la présentation d'un élément personnalisé doit être importé individuellement. Pour construire l'interface de l'application Web, nous allons utiliser les éléments suivants:
Accentsconagua
barre d'outils papier pour créer la barre d'outilsbouton de papier créer divers boutonsfabrique de papier créer un bouton d'action flottantliste de papier créer la liste contenant les tâchesarticle de papier pour créer les tâches individuelles dans la listecase à cocher pour créer des cases à cocher que l'utilisateur peut cocher pour marquer les tâches comme étant terminéesbouton-icône-papier dessiner des boutons ayant des icônesentrée papier dessiner un champ de texte que l'utilisateur peut utiliser pour entrer le nom de la tâchedialogue de papier créer un dialogue modalicônes de fer dessiner des icônesDe plus, pour utiliser la fonctionnalité de liaison de données fournie par Polymer, nous devons importer le framework Polymer lui-même. Ajoutez le code suivant au fichier:
"html
"
Vous pouvez considérer les éléments polymères comme des pages HTML. Tout comme les pages HTML, les éléments Polymer ont leur propre arborescence DOM contenant différentes balises pour les éléments de l'interface utilisateur., style étiquettes pour le style, et scénario tags pour le code JavaScript.
Pour créer le DOM, nous devons utiliser le dom-module tag et mettre sa identifiant attribuer au nom de l'élément. Appelons l'élément personnalisé liste de tâches. Notez que le nom doit contenir un trait d'union.
"html
"
Créer une mise en page en utilisant des éléments Polymer est aussi simple que d'en créer une en utilisant des éléments HTML, seules les balises sont différentes. Cependant, vous devez vous assurer que tous les détails de la mise en page se trouvent dans un modèle étiquette.
Voici le code que vous pouvez ajouter à la dom-module pour créer la mise en page de l'application de liste de tâches:
"html
"
Cela peut sembler beaucoup de code, mais si vous connaissez le HTML et les expressions de guidon, vous constaterez qu'il est assez intuitif..
Comme vous pouvez le constater, les balises d'éléments Polymer peuvent être utilisées librement aux côtés de balises HTML et les styles en ligne peuvent être utilisés pour personnaliser leur apparence..
Ajouter un écouteur d'événement à une balise d'élément Polymer est similaire à en ajouter un à une balise HTML. Dans le code ci-dessus, nous avons utilisé deux types d'écouteurs d'événements., sur clic les auditeurs pour détecter les boutons étant cliqués et sur le changement des écouteurs pour détecter les changements dans les états des cases à cocher.
Vous avez peut-être aussi remarqué qu’en plus des éléments Polymer et des balises HTML, nous avons utilisé un dom-repeat assistant modèle étiquette. Si vous ne l'avez pas déjà deviné, cela fonctionne comme un pour déclaration et peut être utilisé pour parcourir tous les éléments d’un tableau. Dans notre mise en page, il est utilisé pour dessiner les tâches individuelles qui appartiennent à un tableau de tâches.
Avant de pouvoir utiliser l'élément Polymer personnalisé dans les pages HTML, nous devons l'enregistrer à l'aide de la commande Polymère une fonction. Cette fonction attend un objet JavaScript unique contenant les fonctions et les propriétés de l'élément. À tout le moins, l'objet doit avoir un est propriété spécifiant le nom de l'élément personnalisé.
Ajouter un scénario tag après le modèle tag et ajoutez le code suivant:
javascript Polymer (est: 'tasks-list', // plus de code va ici);
Dans la présentation de notre élément, nous avons utilisé deux propriétés à l'intérieur d'expressions de guidon., les tâches et latestTaskName. Cependant, l'élément n'a pas encore ces propriétés. Pour les ajouter et les initialiser, il faut utiliser le prêt méthode. Pour l'instant, nous pouvons simplement initialiser les tâches à un tableau vide et latestTaskName à une chaîne vide.
Ajoutez le code suivant après le est propriété:
javascript ready: function () this.tasks = []; this.latestTaskName = ""; ,
Pour stocker de manière permanente les tâches que l'utilisateur ajoute à la liste des tâches, nous allons utiliser le stockage local via le stockage local objet. Écrivons maintenant du code pour ajouter une tâche au stockage local.
La mise en page contient déjà un dialogue de papier qui a un champ de saisie dans lequel l'utilisateur peut entrer le nom d'une tâche. La boîte de dialogue est fermée par défaut, ce qui n'est pas ce que nous voulons. dans le sur clic écouteur du bouton d’action flottante, appelez le ouvrir méthode du dialogue pour l'ouvrir.
javascript showAddTaskDialog: function () this. $. addTaskDialog.open (); ,
Grâce à la liaison de données bidirectionnelle de Polymer, tout ce que l'utilisateur entre dans la boîte de dialogue entrée papier est disponible immédiatement dans le latestTaskName propriété. Par conséquent, à l'intérieur du sur clic auditeur des dialogues Ajouter bouton, on peut simplement ajouter latestTaskName à stockage local en utilisant le setItem méthode.
stockage local stocke les données sous la forme de paires clé-valeur. Pour stocker la tâche, nous utiliserons le nom de la tâche en tant que clé et si elle est terminée ou non en tant que valeur. Parce que stockage local fonctionne uniquement avec des chaînes (les booléens ne sont actuellement pas pris en charge), nous allons les stocker Oui si la tâche est terminée et non autrement.
Une fois la tâche ajoutée, nous pouvons fermer la boîte de dialogue en utilisant sa Fermer méthode.
"javascript addTask: function () // Enregistre la nouvelle tâche comme non terminée. localStorage.setItem (this.latestTaskName, 'no');
// Réinitialisation latestTaskName this.latestTaskName = ""; // Ferme la boîte de dialogue this. $. AddTaskDialog.close (); // met à jour la liste des tâches this.updateTasks (); , "
De même, lorsque l’utilisateur coche ou décoche la case associée à une tâche, nous pouvons mettre à jour la valeur stockée dans le fichier. stockage local objet en invoquant le setItem méthode. Parce que nous avons utilisé le dom-repeat assistant modèle dessiner les objets individuels du liste de papier, nous pouvons utiliser le modèle objet présent dans le sur le changement événement pour obtenir le nom de la tâche associée à la case à cocher. De plus, nous devons convertir la valeur booléenne de la case à cocher vérifié statut à «oui» ou «non» avant de le stocker dans stockage local.
"javascript toggleTask: function (e) // Récupère le nom de la tâche var taskName = e.model.item.taskName;
// Convertit true / false en yes / no if (e.model.item.isComplete) localStorage.setItem (taskName, 'yes'); else localStorage.setItem (taskName, 'no'); , "
Si un utilisateur choisit de supprimer une tâche, il peut cliquer sur le bouton bouton-icône-papier associé à la tâche. Pour supprimer définitivement la tâche, appelez le retirer l'objet méthode du stockage local objet dans le sur clic auditeur du bouton-icône-papier.
"javascript deleteTask: function (e) var nomTâche = e.model.item.taskName; localStorage.removeItem (nomTâche);
// met à jour la liste des tâches this.updateTasks (); , "
Vous avez peut-être remarqué les appels à updateTasks dans les deux Ajouter une tâche et deleteTask méthodes. dans le updateTasks méthode, nous mettons à jour le les tâches tableau, celui que nous avons initialisé dans le prêt méthode, pour refléter le contenu de la stockage local objet. C’est nécessaire, car le dom-repeat assistant modèle, utilisé pour afficher la liste des tâches, ne fonctionne qu'avec un tableau.
dans le les tâches tableau, nous utilisons des objets JSON pour représenter les tâches. Chaque objet JSON a deux champs, Nom de la tâche et est complet. Nom de la tâche est une chaîne contenant le nom de la tâche et est complet est un booléen indiquant si la tâche est terminée.
Pour permettre à Polymer de détecter les changements dans le les tâches tableau, au lieu d'utiliser les fonctions de tableau standard, nous devons utiliser les méthodes de manipulation de tableau présentes dans l'élément Polymer. Pour le moment, nous utiliserons le épissure méthode pour supprimer tous les éléments du tableau à la fois et la pousser méthode pour ajouter des éléments au tableau.
Le code suivant crée le updateTasks méthode, qui parcourt tous les éléments de la stockage local objet et les ajoute à la les tâches tableau.
"javascript updateTasks: function () // Vide le tableau this.splice ('tasks', 0);
// Ajoute des éléments de localStorage pour (var nomTâche dans localStorage) var tâche = nomTâche: nomTâche, isComplete: localStorage.getItem (nomTâche) == 'oui'; this.push ('tâches', tâche); , " En ce moment, le les tâches Le tableau n'est mis à jour que lorsque l'utilisateur ajoute ou supprime une tâche. Pour afficher les tâches dès l'ouverture de l'application, il faut ajouter un appel à la updateTasks méthode à l'intérieur du prêt méthode.
Notre élément polymère personnalisé est prêt à être utilisé.
Créons maintenant une page HTML et y ajoutons l’élément personnalisé. Créez un nouveau fichier, nommez-le index.html, et ajouter le HTML tête et corps balises à elle.
Avant d'utiliser l'élément, nous devons ajouter un lien balise à importer task-list.html. En outre, pour supprimer les rembourrages et les marges et pour utiliser la disposition Flex, ajoutez le paramètre à fond, disposition, et verticale Classes CSS à la corps étiquette. Parce que ces classes CSS sont définies par le iron-flex-layout élément, il faut ajouter un lien tag pour l'importer.
Avec les importations ci-dessus en place, nous pouvons ajouter le liste de tâches étiquette à l'intérieur du corps étiquette. Votre fichier devrait maintenant ressembler à ceci:
"html
"
Notre application Web de liste de tâches est prête. Comme la structure Polymer nécessite l’exécution d’un serveur HTTP, démarrez-en un à l’aide de Python. SimpleHTTPServer module dans le répertoire du projet.
bash python -m SimpleHTTPServer
Vous pouvez maintenant visiter http: // localhost: 8000 / pour utiliser votre application..
Maintenant que nous avons réussi à exécuter l'application dans le navigateur, il est temps de la convertir en application Android en l'intégrant dans un projet Cordova..
Cela signifie que nous devons d’abord installer la CLI (interface de ligne de commande) de Cordova globalement à l’aide de npm:
bash sudo npm installer -g cordova
Pour créer un nouveau projet Cordova, nous pouvons utiliser le cordova créer commander. En tant qu'arguments, il attend le nom du répertoire dans lequel le projet Cordova doit être créé, l'identificateur de nom de domaine inverse de l'application et le nom de l'application..
Pour intégrer notre projet Web au projet Cordova, nous devons également inclure un copie de option et spécifier l'emplacement du projet Web.
La commande suivante crée un projet Cordova pour une application appelée Faire dans un répertoire appelé faire, et contenant le projet Web situé dans todoWebApp:
cordh bash créer todo com.tutsplus.code.hathi.todoapp "à faire" --copy-from = / home / me / todoWebApp
Le projet Cordova que nous venons de créer ne prend encore en charge aucune plate-forme. Pour ajouter la prise en charge de la plateforme Android, accédez à la faire répertoire et utiliser le plate-forme de cordoue commander.
bash cd todo cordova plate-forme ajouter android
Sans avoir à écrire une seule ligne de code, notre projet Cordova est déjà prêt. Construisons-le en utilisant le Cordoue construire commander. Avant de continuer, assurez-vous que la valeur de ANDROID_HOME variable d'environnement définie à l'emplacement du SDK Android.
exportation bash ANDROID_HOME = / home / moi / Android / Sdk / Cordova build android
Si la construction échoue en disant un fichier nommé web-animations.min.js.gz ne peut pas être ajouté à l'APK, essayez de supprimer le fichier et de reconstruire le projet.
bash rm -f ./www/bower_components/web-animations-js/web-animations.min.js.gz cordova build android
Une fois la construction réussie, déployez l’application sur votre appareil Android à l’aide de la Cordova courir commander.
bash cordova run android
Vous devriez maintenant pouvoir voir l'application en cours d'exécution sur votre appareil.
Dans ce didacticiel, vous avez appris à utiliser les éléments en papier Polymer et Polymer pour créer une application Web contenant une liste de tâches. Vous avez également appris à intégrer l'application Web dans un projet Cordova afin qu'elle s'exécute en tant qu'application hybride sur des appareils Android. Même si nous nous sommes concentrés uniquement sur la plate-forme Android, vous pouvez également exécuter l'application sur un appareil iOS sans aucune modification du code. Pour que cela fonctionne, vous devez utiliser le plate-forme de cordoue commande à nouveau pour ajouter le support pour la plate-forme iOS.
Pour apprendre à construire des interfaces plus complexes en utilisant Polymer, j'aimerais vous reporter à la documentation de Polymer..
