Share
Ionic est un cadre d'applications mobiles populaire qui vous permet de créer rapidement des applications mobiles hybrides, à l'aide de HTML, CSS et JavaScript. Dans cette série, vous apprendrez à configurer et à créer vos propres applications mobiles avec Ionic en créant ensemble une application mobile entièrement fonctionnelle. Nous commençons par une introduction à Ionic et apprenons à utiliser l’outillage..
Dans ce tutoriel, nous couvrons:
Ionic regroupe plusieurs technologies parfaitement regroupées et gérées ensemble. J'aime penser à Ionic comme une pile de plusieurs frameworks. L'interaction entre ces technologies est ce qui crée finalement l'application résultante et fournit une bonne expérience de développeur et d'utilisateur.
En tant que base, Ionic utilise Cordova comme cadre d'applications hybrides. Essentiellement, cela permet de regrouper une application Web dans une application native pouvant être installée sur un périphérique. Il intègre une vue Web, qui est une instance de navigateur isolée qui exécute vos applications Web..
Il fournit également une API que vous pouvez utiliser pour communiquer avec l'appareil lui-même, par exemple pour demander les coordonnées GPS ou accéder à la caméra. Un grand nombre de ces fonctionnalités matérielles supplémentaires sont activées via le système de plug-in Cordova. Vous ne devez donc installer et utiliser que les fonctionnalités dont vous avez besoin. Je vous présente plus de Cordova dans un prochain tutoriel.
Angular est un framework JavaScript bien connu pour la construction d'applications Web, sur lequel Ionic est construit. Angular fournit la logique d'application Web utilisée pour créer l'application réelle..
Si vous le connaissez déjà, vous serez en mesure de saisir rapidement les fonctions ioniques. Si vous êtes nouveau sur Angular, vous pouvez continuer à lire et vous commencerez à vous procurer des notions de base sur Angular..
Je ne m'étendrai pas beaucoup sur Angular, je vous recommande donc de prendre le temps d'apprendre les bases en lisant la documentation angulaire..
La principale fonctionnalité de vente d'Ionic est un ensemble clair de composants d'interface utilisateur conçus pour les appareils mobiles. Lorsque vous créez une application native, certains SDK natifs vous fournissent des composants d'interface, tels que des onglets et des boîtes de dialogue..
Ionic fournit un ensemble similaire de composants d'interface à utiliser dans les applications hybrides. Ionic aime à affirmer que c'est le SDK manquant pour les applications hybrides, et il remplit très bien ce rôle. De plus, Ionic possède un certain nombre d’autres fonctionnalités importantes qui en font un choix très convaincant..
Ionic est plus qu'un simple ensemble de composants d'interface utilisateur, c'est aussi un ensemble d'outils de développement et un écosystème pour la création rapide d'applications mobiles hybrides. Je voudrais expliquer pourquoi les applications hybrides conviennent parfaitement aux développeurs Web, aux détails sur la plate-forme et aux outils Ionic, et à quel moment Ionic pourrait ne pas convenir..
Il y a de vieux débats sur la qualité des différentes approches de la création d'applications. Il y a quelques mois, j'ai écrit un article détaillé sur les trois types d'expériences mobiles. Je vous recommande de l'examiner si vous avez des doutes sur les forces et les faiblesses de ces différentes approches sur les appareils modernes..
Les applications hybrides sont le lieu idéal pour permettre aux développeurs Web d'utiliser les compétences qu'ils connaissent déjà pour créer des applications mobiles pouvant ressembler à des applications natives..
Très peu des infrastructures mobiles disponibles ont un outillage proche de la qualité de l'outillage d'Ionic. Nous examinons de plus près les principaux outils disponibles dans le reste du didacticiel, mais j'aimerais aborder certaines des fonctionnalités que vous jugerez probablement utiles au fil du temps..
Les outils CLI d’Ionic sont de premier ordre et offrent de nombreuses fonctionnalités qui vous aident à démarrer un projet, à en avoir un aperçu et finalement à le construire..
Ionic fournit un certain nombre de fonctionnalités, certaines gratuites et d'autres payantes, utiles au développement professionnel, telles que l'analyse d'applications, les notifications push et les outils de déploiement..
Il existe un certain nombre d’add-ons gratuits et payants pour Ionic qui peuvent être facilement intégrés à votre application. Il y a des thèmes, des composants uniques et d'autres plugins.
Ionic ne convient pas à toutes les applications mobiles. Considérez les cas suivants pour décider si Ionic convient parfaitement à votre projet..
En d'autres termes, si vous ne construisez pas d'application pour d'anciens appareils et que vous n'avez pas besoin de programmer beaucoup au niveau matériel, Ionic est plus que capable de fournir une expérience d'application de qualité à vos utilisateurs..
Ionic est livré avec une fantastique interface de ligne de commande (CLI) pour vous aider à démarrer, créer et déployer vos applications. Vous utiliserez fortement la CLI pendant le développement. Ionic s'appuie également sur Cordova, vous l'utiliserez donc indirectement.
Vous devez avoir installé Node.js pour pouvoir commencer. Si vous ne le faites pas, prenez un moment pour l'installer sur votre système. J'utilise Node.js 5.6 pour ce tutoriel et je recommande d'être sur la dernière version stable.
L'installation d'Ionic et de Cordova est aussi simple que l'installation de deux modules de nœud globaux. Si vous avez déjà fait cela auparavant, cela devrait vous paraître familier. Ouvrez votre terminal et lancez la commande suivante:
npm install -g [email protected] [email protected]
Cela peut prendre quelques instants, mais vous devriez recevoir un message de succès indiquant qu'ils sont tous les deux installés. Vous pouvez le vérifier en lançant ce qui suit pour voir la sortie des numéros de version.
ionique -v && cordova -v
Il devrait sortir la version de Ionic et Cordova. Pour les besoins de ce tutoriel, j'utilise la version 1.7.14 de Ionic et la version 6.0.0 de Cordova.
Il existe de nombreuses fonctionnalités dans Ionic CLI et vous pouvez toujours obtenir une référence rapide en exécutant aide ionique. Vous pouvez également consulter la documentation en ligne pour plus d'assistance si nécessaire.
Ionic ne regroupe pas tous les outils nécessaires à la création d'une application, il repose sur certains SDK et logiciels fournis par Apple et / ou Google. Il est bon de lire et de suivre les guides de plate-forme fournis par Cordova pour configurer chaque plate-forme avec laquelle vous souhaitez travailler..
Vous pourrez le faire ultérieurement, mais vous devrez d'abord configurer les outils de la plate-forme avant de pouvoir prévisualiser ou émuler une application sur un simulateur ou un périphérique..
Vous allez suivre un ensemble d’étapes générales lors du développement d’une application ionique. Ces étapes ont des commandes CLI correspondantes pour vous aider. Examinons les commandes principales représentant un flux de développement typique pour la création d'applications Ionic..
En supposant que vous ayez déjà une idée de base de ce que vous envisagez de construire, la première étape consiste à créer un nouveau projet. Les projets ioniques sont basés sur Cordova et nécessitent un échafaudage pour que Cordova puisse comprendre votre projet ultérieurement. Ionic a plusieurs modèles prédéfinis que vous pouvez utiliser pour générer un projet de démarrage, mais vous pouvez également fournir votre propre.
Pour démarrer un projet, lancez le échantillon de départ ionique commander. Il génère un nouveau dossier dans le répertoire actuel en fonction du nom que vous avez fourni (i.e. échantillon). Pendant que la commande s'exécute, elle télécharge les fichiers nécessaires à GitHub pour le projet et initialise le projet à votre place. Il utilise le projet par défaut, qui a une application de base avec une interface de base des onglets.
Courir échantillon de cdpour naviguer dans le nouveau répertoire. Lorsque vous inspectez le répertoire, vous remarquerez quelques fichiers et répertoires. Ne vous préoccupez pas trop de chaque fichier pour le moment. Voici quelques éléments avec lesquels vous devrez travailler initialement.
Pour le reste de ce didacticiel, nous allons travailler avec le projet que vous venez de générer et voir comment développer et prévisualiser l'application..
Vous avez démarré un projet, vous voulez maintenant commencer à développer. Lors du développement initial, vous aurez probablement un aperçu de votre travail dans un navigateur. Après tout, une application ionique n'est en réalité qu'une application Web. Ionic est livré avec un serveur de développement local qui construit et sert votre application.
Pour démarrer le serveur de développement, exécutez service ionique. Dès que cela fonctionne, il ouvre un aperçu de l'application dans votre navigateur par défaut. À ce stade, vous pouvez utiliser les outils de développement du navigateur pour inspecter l'application, rechercher les erreurs et effectuer toute autre tâche que vous effectueriez normalement lors de la création d'une application Web..
Le serveur continue de fonctionner en arrière-plan et surveille le projet pour vérifier si le fichier a été modifié. Lorsqu'il détecte que vous avez édité et enregistré un fichier, il recharge automatiquement le navigateur pour vous..
Aperçu de l'application Ionic s'exécutant sous Chrome, Utilisation de l'émulation de périphérique dans les outils de développementJe recommande d'utiliser Chrome comme navigateur en raison de son excellent outil de développement. Une fonctionnalité particulièrement utile est la possibilité d'émuler les dimensions d'un appareil, ce qui permet de voir facilement à quoi ressemble l'application sur un appareil particulier. Ce n'est pas un véritable émulateur qui exécute l'application comme un véritable périphérique, il imite simplement les dimensions de l'application..
Cordova prend en charge de nombreux types d'appareils mobiles, appelés plates-formes. Vous devez enregistrer les plates-formes que vous souhaitez cibler avec votre application et installer les fichiers de projet appropriés. Heureusement, cela est principalement géré par l’intermédiaire de la CLI Ionic. Ionic prend entièrement en charge les plateformes iOS et Android.
Pour ajouter une plate-forme, exécutez plate-forme ionique ajouter android. Remplacer Android avec iOS pour ajouter iOS à la place. Une fois ajouté, vous verrez un nouveau dossier dans le répertoire plates-formes de votre projet. Ce dossier contient des fichiers spécifiques à la plate-forme. En général, vous devez éviter d’apporter trop de modifications aux fichiers de ce répertoire..
Si vous rencontrez des problèmes, vous pouvez supprimer la plate-forme et l'ajouter à nouveau. Pour supprimer une plate-forme, exécutez plate-forme ionique enlever android.
À un moment donné, vous souhaiterez commencer à prévisualiser votre application dans un véritable émulateur. Les émulateurs sont essentiellement des versions logicielles d'un périphérique réel. Ceci est très utile pour tester rapidement le comportement de l'application sur un appareil réel. Sachez que les émulateurs ne possèdent pas toutes les fonctionnalités d'un périphérique physique, car ils ne sont que des périphériques émulant des logiciels..
Une partie de votre code peut ne pas fonctionner comme prévu, par exemple, si vous envisagez d'utiliser la liste de contacts du périphérique. Généralement, seules les fonctionnalités intégrées au matériel peuvent ne pas fonctionner correctement, mais dans la plupart des cas, cela devrait fonctionner correctement..
La configuration des émulateurs peut être un peu une tâche, selon le type d’ordinateur que vous utilisez et ce que vous devez tester. L'émulation d'un iPhone ne peut être effectuée que sur un ordinateur fonctionnant sous OS X, mais Android peut être émulé sur n'importe quel système d'exploitation. Pour configurer des émulateurs, reportez-vous aux guides de la plate-forme auxquels j'ai déjà fait référence..
Une fois que vous avez cela fait, vous pouvez émuler en utilisant émuler ionique android -c -l. Comme avant, remplacez Android avec iOS si vous ciblez iOS. Cela crée, installe et lance l'application dans le simulateur. Cela peut prendre quelques instants, vous pouvez donc utiliser certaines des fonctionnalités utiles de rechargement en direct, comme vous l'avez fait précédemment dans le navigateur..
Vous pouvez utiliser l'option -l Indicateur pour que l’application soit rechargée en direct dans le simulateur (sans avoir à reconstruire et à réinstaller). C’est génial tant que vous ne modifiez pas la structure de l’application (telle que les paramètres Cordova). Vous pouvez également utiliser l'option -c indicateur pour que tous les messages de la console soient transférés au journal du terminal. Je les utilise presque à chaque fois.
Le meilleur moyen de prévisualiser votre application est de l'installer et de l'exécuter sur un appareil. Cela nécessite que vous ayez configuré une plate-forme et qu'un périphérique soit connecté à votre machine. Cela nécessite une configuration qui varie en fonction du type de périphérique que vous possédez. Vous pouvez vous référer aux guides de la plateforme ci-dessus pour connecter votre appareil..
Une fois que vous avez un appareil connecté, il est assez simple d’exécuter l’application à partir de la ligne de commande. Utilisation course ionique android -c -l et Ionic construit, déploie et lance votre application. Encore une fois, vous pouvez remplacer iOS pour Android. Tout comme la commande emulate, vous pouvez utiliser la commande optionnelle -l et -c drapeaux pour activer le rechargement en direct et la journalisation de la console sur le terminal.
Une fois l'application installée sur votre appareil, vous pouvez la déconnecter et l'application restera installée sur l'appareil. Ceci est utile si vous souhaitez utiliser l'application sur une période donnée pour tester son comportement ou simplement la montrer à d'autres..
On me pose souvent des questions sur Ionic 2 et si les gens devraient l’utiliser. Au moment de la rédaction de cet article, début 2016, il n'y avait pas encore de réponse simple. J'ai travaillé avec et construit des prototypes, et je connais quelques personnes qui ont construit des applications de production avec, mais ce n'est pas encore prêt.
La bonne nouvelle est qu'apprendre Ionic 1 aujourd'hui signifie que l'apprentissage de Ionic 2 sera assez simple. La plupart des choses spécifiques à Ionic que vous apprendrez dans cette série restent relativement cohérentes entre les versions. Les plus gros changements se produiront à cause de la construction d'Ionic 2 sur Angular 2.
Ainsi, bien que vous puissiez créer des applications Ionic 2 aujourd'hui, elles ne sont pas encore officiellement publiées. Vous ne perdez pas de temps en apprenant Ionic 1 maintenant. La mise à niveau devrait être relativement simple une fois que Ionic 2 sera officiellement publié..
Dans ce tutoriel, nous avons beaucoup couvert à propos de Ionic.
Dans la suite de cette série, vous allez commencer à créer une application réelle et fonctionnelle en utilisant les techniques décrites dans ce tutoriel..
Si vous êtes déjà à l'aise avec le cadre Ionic, vous pouvez envisager de participer au concours Most Wanted d'Envato pour les modèles Ionic. Comment? Créez un modèle Ionic unique et envoyez-le au marché Envato d'ici le 27 avril 2016..
Les cinq meilleurs modèles reçoivent 1000 $. Intéressé? Pour en savoir plus sur les exigences et les directives du concours, consultez le site Web du concours..
Accentsconagua