Accentsconagua
Share
Dans cet article, nous allons examiner Ionic 2, la dernière version du cadre d'applications mobiles multiplate-forme Ionic. Pour commencer, nous allons récapituler ce qu'est Ionic et à quoi il sert. Ensuite, nous allons plonger dans Ionic 2. Je vais vous dire ce qui est nouveau et ce qui le différencie de Ionic 1, et je vous aiderai à décider si vous devriez ou non l'utiliser dans votre prochain projet..
Ionic est un framework pour la construction d'applications hybrides utilisant HTML, CSS et JavaScript. Il est livré avec un ensemble de composants et de fonctions d'interface utilisateur que vous pouvez utiliser pour créer des applications mobiles entièrement fonctionnelles et attrayantes..
Ionic est construit sur la pile de Cordova. Vous ne pouvez pas créer d'applications mobiles avec Ionic seul, car il ne gère que la partie interface utilisateur. Il doit fonctionner avec Angular, qui gère la logique de l'application, et Cordova, le cadre d'application multiplate-forme qui vous permet de compiler votre application dans un fichier installable et de l'exécuter dans la vue Web de l'appareil mobile..
Les applications construites avec Cordova et Ionic peuvent fonctionner sur les appareils Android et iOS. Vous pouvez également installer des plug-ins Cordova pour fournir des fonctionnalités natives telles que l'accès à la caméra et l'utilisation de périphériques Bluetooth basse consommation..
Pour en savoir plus sur Cordova, consultez certains de nos cours et tutoriels ici sur Envato Tuts+.
Ionic est cependant plus qu'un simple cadre d'interface utilisateur. La société Ionic propose également des services prenant en charge le cadre d'interface utilisateur ionique, notamment Ionic Creator, Ionic View et Ionic Cloud..
Dans cette section, nous examinerons quelques-unes des modifications importantes apportées à Ionic dans la version 2, ainsi que les nouvelles fonctionnalités et outils introduits dans Ionic 2..
Ionic 1 a été conçu pour les seules applications mobiles hybrides. Mais Ionic 2 est conçu pour prendre en charge les applications Web progressives et les applications Electron. Cela signifie que vous pouvez désormais créer non seulement des applications ioniques s'exécutant dans l'environnement Cordova, mais également des applications Web progressives, qui utilisent des fonctionnalités Web modernes pour offrir aux utilisateurs une expérience similaire à celle d'une application..
Vous pouvez également cibler Electron, une plateforme permettant de créer des applications de bureau multiplates-formes à l'aide de HTML, CSS et JavaScript. Electron est à peu près comme Cordova mais pour les systèmes d’exploitation de bureau comme Windows, Ubuntu ou macOS.
Ionic 2 utilise maintenant Angular 2 pour la logique des modèles et des applications. Cela signifie que les développeurs devront apprendre la nouvelle syntaxe Angular 2 avant de devenir productifs lors de la création d'applications Ionic 2. Ne vous inquiétez pas, car les concepts sont toujours les mêmes que dans Angular 1. Il existe également des ressources telles que ngMigrate qui vous aideront à convertir vos compétences en Angular 1 en Angular 2..
Outre Angular 2, Ionic 2 utilise également TypeScript. Pour ceux qui ne le connaissent pas, TypeScript est un sur-ensemble de JavaScript. Cela signifie que vous pouvez toujours utiliser la syntaxe JavaScript vanilla pour écrire vos applications. Si vous souhaitez utiliser les fonctionnalités fournies avec TypeScript, telles que la syntaxe ES6 et ES7, le typage statique et la complétion intelligente de code, vous pouvez utiliser la syntaxe spécifique à TypeScript. Il existe des plugins que vous pouvez installer sur votre éditeur de texte ou IDE favori pour profiter des avantages des fonctionnalités avancées de complétement du code de TypeScript..
Comme je l'ai mentionné, la syntaxe du modèle dans Ionic 2 a considérablement changé, principalement en raison de son passage à l'utilisation de Angular 2. Vous pouvez même en venir à trouver que la nouvelle syntaxe est plus simple et concise. Voici quelques exemples de syntaxe Ionic 1 et Ionic 2 côte à côte:
Ecouter des événements:
En utilisant un modèle:
En boucle dans un tableau et en affichant chaque élément:
Si vous comparez la structure de dossiers d'un projet Ionic 1 à un projet Ionic 2, vous remarquerez que la plupart des dossiers que vous avez l'habitude de voir dans un projet Ionic 1 sont toujours présents dans Ionic 2. Cela est dû au fait que la plate-forme n'a pas vraiment changé-Ionic 2 utilise toujours Cordova. Les seules choses qui ont changé sont les parties liées à vos fichiers source. Voici une capture d'écran de la structure de dossiers d'une application Ionic 1:
Et voici une application construite avec Ionic 2:
Si vous regardez de plus près, vous remarquerez qu’il ya maintenant un src dossier. C'est là que se trouvent tous les fichiers source de votre projet, et chaque fois que vous modifiez un fichier de ce répertoire, le fichier modifié est compilé et copié dans le répertoire. www / build annuaire. Auparavant, les fichiers source étaient tous dans le wwwrépertoire, et vous n'avez pas besoin d'une étape de compilation supplémentaire.
La structure du répertoire est également plus organisée. Si vous vérifiez le src / pages répertoire, vous pouvez voir que chaque page a son propre dossier, et à l'intérieur de chacun d'eux sont les fichiers HTML, CSS et JavaScript pour cette page spécifique.
Auparavant, dans Ionic 1, vous veniez de recevoir un répertoire vide et disposiez de la liberté nécessaire pour structurer votre projet comme vous le souhaitiez. Mais cela a eu l'inconvénient de ne pas vous obliger à faire les choses de la meilleure façon. Vous pourriez être paresseux et vous en tenir à une structure regroupant tous les fichiers, ce qui pourrait compliquer la tâche des équipes plus importantes travaillant sur des applications complexes..
Contrairement à la version précédente d'Ionic, qui n'avait qu'une apparence et une convivialité pour toutes les plates-formes, Ionic 2 prend désormais en charge trois modes: Material Design, iOS et Windows. Désormais, Ionic correspond à l'apparence de la plate-forme sur laquelle elle est déployée. Ainsi, si votre application est installée sur Android, par exemple, elle utilisera un style et un comportement similaires à ceux des applications Android natives..
Ionic prend en charge les thèmes, même si, au moment de la rédaction de cet article, il n’existe que le thème Light par défaut. Si vous souhaitez modifier le thème, vous pouvez modifier le src / theme / variables.scss fichier.
Ionic 2 est également livré avec de nouveaux outils qui en feront un plaisir de créer des applications mobiles. Je vais vous en montrer quelques unes dans cette section.
Ionic 2 fournit maintenant un générateur qui vous permet de créer des pages et des services pour votre application:
page ionique g contactPage
Cela créera les fichiers suivants dans votre app / pages dossier:
page de contact / page de contact.html page de contact / page de contact.ts page de contact / page de contact.scss
Chaque fichier contient également du code standard:
contactPage
Cela sert également de guide aux nouveaux développeurs afin qu'ils sachent quelles sont les meilleures pratiques pour structurer leur code. Voici le code TypeScript généré qui gère la logique de la page ci-dessus:
//contact-page.js import Component from '@ angular / core'; importer NavController, NavParams de 'ionic-angular'; / * Classe générée pour la page ContactPage. Voir http://ionicframework.com/docs/v2/components/#navigation pour plus d'informations sur les pages ioniques et la navigation. * / @Component (sélecteur: 'page-contact-page', templateUrl: 'contact-page.html') classe d'exportation ContactPagePage constructeur (navCtrl publique: NavController, navParams publique: NavParams) ionViewDidLoad () console .log ('ionViewDidLoad ContactPagePage'); Ionic 2 est maintenant livré avec un outil de rapport d'erreur pour le front-end. Cela signifie que chaque fois qu'il y a une erreur dans votre code, Ionic ouvrira une fenêtre modale directement dans l'aperçu de l'application. Cela permet aux développeurs de s’informer facilement sur les erreurs commises dans l’application..
Ionic App Scripts est une collection de scripts de construction pour les projets Ionic. Auparavant, Ionic utilisait Gulp pour gérer son processus de construction..
Ionic 2 est livré avec quelques-uns de ces scripts pour faciliter l'exécution des tâches de développement courantes. Cela inclut des opérations telles que la transcription du code TypeScript vers ES5, la présentation de l'application à des fins de test dans le navigateur ou son exécution sur un périphérique spécifique..
Vous pouvez trouver les scripts par défaut dans le projet package.json fichier:
"scripts": "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic: build": "ionic-app-scripts build", "ionic: serve ":" ionic-app-scripts serve ",
Les composants sont les blocs de construction de l'interface utilisateur dans Ionic. Les exemples incluent les boutons, les cartes, les listes et les champs de saisie. Beaucoup de nouveaux composants ont été ajoutés à Ionic 2 et, dans cette section, nous en examinerons quelques-uns..
Si vous souhaitez que votre application dispose d'une vue d'ensemble pour les utilisateurs novices, le composant Diapositives facilite sa création. Ce composant vous permet de créer des mises en page basées sur des pages que l'utilisateur peut parcourir pour lire tout ce qui concerne votre application..
Les feuilles d'action sont des menus qui partent du bas de l'écran. Une feuille d'actions apparaît sur la couche supérieure de l'écran. Vous devez donc la supprimer en appuyant sur les espaces ou sélectionner une option dans le menu. Ceci est couramment utilisé pour les confirmations telles que lorsque vous supprimez un fichier sur votre appareil iOS..
Les segments sont comme des onglets. Ils sont utilisés pour regrouper le contenu associé de sorte que l'utilisateur ne puisse voir que le contenu du segment actuellement sélectionné. Les segments sont couramment utilisés avec des listes pour filtrer les éléments associés.
Les toasts sont la version subtile des alertes. Ils sont couramment utilisés pour informer l'utilisateur que quelque chose s'est passé qui ne nécessite aucune action de la part de l'utilisateur. Ils sont souvent affichés en haut ou en bas de la page afin de ne pas interférer avec le contenu affiché. Ils disparaissent également après un nombre spécifié de secondes.
Une barre d'outils est utilisée en tant que conteneur d'informations et d'actions situées dans l'en-tête ou le pied de page de l'application. Par exemple, le titre de l'écran actuel, les boutons, les champs de recherche et les segments sont souvent contenus dans une barre d'outils..
Le composant DateTime est utilisé pour afficher une interface utilisateur permettant de sélectionner des dates et des heures. L’UI est similaire à celle générée lors de l’utilisation de la datetime-local élément, la seule différence étant que ce composant est livré avec une API JavaScript facile à utiliser. Auparavant, Ionic n'avait pas de composant pour travailler avec les dates et les heures. Vous deviez soit utiliser le sélecteur de date natif du navigateur, soit installer un plugin.
Les boutons d'action flottante (FAB) sont des boutons qui sont fixés dans une zone spécifique de l'écran. Si vous avez déjà utilisé l'application Gmail, le bouton permettant de composer un nouveau message est un bouton d'action flottant. Ils ne sont pas limités à une seule action car ils peuvent être développés pour afficher d'autres boutons flottants lorsque vous appuyez dessus..
Pour plus d'informations sur les nouveaux composants, consultez la documentation sur les composants..
Ionic 2 est également doté de nouvelles fonctionnalités et améliorations. Celles-ci sont principalement dues à sa transition vers Angular 2 et TypeScript.
L'un des avantages du passage à Angular 2 est le nouveau système d'animation Angular, construit sur le dessus de l'API Web Animations. Notez que l'API Web Animations n'est pas prise en charge par tous les navigateurs. C'est pourquoi vous devez utiliser Crosswalk pour installer un navigateur pris en charge avec votre application. Le seul inconvénient est que la taille de l'installation sera plus grande. Une autre option est d'utiliser un polyfill.
Les applications créées avec Ionic 2 sont plus vives que celles créées avec Ionic 1. Voici pourquoi:
ion-img composant. Utiliser ce composant au lieu de la norme img element vous permet de déléguer les requêtes HTTP pour la récupération des images à un Web Worker. Cela rend le chargement des images plus vif, en particulier dans les grandes listes. le ion-img Le composant gère également le chargement différé, qui demandera et restituera l'image lorsqu'elle deviendra visible dans la fenêtre de l'utilisateur..Ionic Native est l’équivalent de ngCordova pour Ionic 2. Ils agissent tous les deux comme des wrappers permettant aux plug-ins Cordova d’implémenter des fonctionnalités natives (par exemple, Camera, GeoLocation). Vous pouvez même utiliser Ionic Native dans votre application Ionic 1 si vous le souhaitez. La principale différence est qu'Ionic Native vous permet d'écrire votre code en utilisant les fonctionnalités ES6 et la syntaxe TypeScript. Cela facilite le travail dans Ionic 2 puisqu'il utilise déjà TypeScript par défaut. Voici un exemple de mise en œuvre du plugin Cordova Camera dans ngCordova:
$ cordovaCamera.getPicture (quality: 50). then (function (imageData) var image = "data: image / jpeg; base64," + imageData;, function (err) );
Et voici comment cela se fait avec Ionic Native:
importer Caméra de 'ionic-native'; Camera.getPicture (options) .then ((imageData) => let base64Image = 'data: image / jpeg; base64,' + imageData;, (err) => );
La documentation s'est beaucoup améliorée. J'aime particulièrement le fait qu'il existe maintenant des aperçus différents pour chaque composant sur chaque plate-forme. Cela donne aux développeurs une très bonne idée de l'apparence de leur application. Tout cela sans que le développeur n’écrive une seule ligne de code!
Au moment de la rédaction de cet article, Ionic 2 est sorti. Cela signifie qu'il est prêt à être utilisé pour les applications de production. Compte tenu de toutes les nouvelles fonctionnalités, outils et avantages fournis par Angular 2 et TypeScript, la seule chose qui vous empêchera d’utiliser Ionic 2 est le statut de votre projet..
Si vous ne faites que commencer un nouveau projet, vous pouvez toujours utiliser Ionic 1 si vos coéquipiers et vous-même n’êtes qu’à connaître Angular 1 et si votre projet doit être terminé dès que possible. Mais si vous avez suffisamment de temps pour le projet, vous devriez envisager d’utiliser Ionic 2. Il faudra un peu d’apprentissage, et vous rencontrerez également des problèmes, car il n’est pas aussi éprouvant que Ionic 1, mais c’est Cela en vaut la peine en raison des nouvelles fonctionnalités et améliorations de Ionic 2.
Si vous avez déjà commencé votre projet actuel avec Ionic 1, vous voudrez probablement vous en tenir à Ionic 1 et éviter une réécriture majeure. Ne vous préoccupez pas du support, des améliorations et des correctifs de bogues pour Ionic 1-Ionic Les développeurs se sont engagés depuis longtemps à prendre en charge Ionic 1. Combien de temps exactement n'est pas clair. À tout le moins, il sera pris en charge pendant quelques années après la sortie de la version stable d'Ionic 2. Mais nous devons également garder à l'esprit qu'Ionic est un projet open source avec plus de 200 contributeurs. Donc, tant que les gens continuent à l'utiliser, on peut toujours s'attendre à une forme de soutien de la part de la communauté..
C'est tout! Dans cet article, vous avez tout appris sur Ionic 2. Plus précisément, vous avez découvert les différences significatives entre Ionic 2 et son prédécesseur. Nous avons également examiné les nouvelles fonctionnalités ajoutées à Ionic 2 et déterminer si vous devriez l’utiliser pour vos projets futurs ou non. Dans un prochain tutoriel, nous allons mettre ces connaissances en pratique en créant une application Ionic 2. Restez à l'écoute!
Si vous souhaitez en savoir plus sur Ionic 2, n’oubliez pas de consulter les ressources suivantes:
Et bien sûr, nous avons un cours approfondi sur Ionic 2 que vous pouvez suivre, ici même sur Envato Tuts+!
