Codez votre première application Ionic 2 Mise en place

Avec la récente version de Ionic 2, vous pourriez être l'un de ces développeurs d'applications hybrides qui veulent l'essayer. Mais peut-être êtes-vous dépassé par la quantité d’apprentissage nécessaire pour commencer.

C'est pourquoi je tiens à vous donner un bon départ en vous guidant pas à pas dans la création de votre première application Ionic 2. Si vous êtes déjà familiarisé avec Ionic, les concepts peuvent facilement "cliquer" avec vous. Mais si vous êtes un débutant complet, ne vous inquiétez pas, je n'assumerai aucune connaissance préalable du framework..

Aperçu de l'application

Dans ce didacticiel et dans le suivant, vous allez créer une application de partage de photos qui permet aux utilisateurs de sélectionner une image sur leur appareil et de la partager sur Instagram. Voici à quoi ressemblera l'application:

Configurez votre environnement

Avant de pouvoir commencer à développer des applications avec Ionic 2, vous devez d'abord configurer votre environnement de développement. Cela inclut les logiciels suivants:

• SDK Android: les applications créées avec Cordova et Ionic reposent sur les mêmes outils de développement que les développeurs d'applications natifs.
• Node.js: ceci est principalement utilisé par Ionic pour des tâches telles que la compilation de code et la recherche d'erreurs.
• Un appareil ou un émulateur Android à tester. Vous pouvez installer l'émulateur Android par défaut avec le programme d'installation du SDK Android..

Je ne vais pas vous montrer comment configurer votre environnement de développement. Le guide de la plate-forme Cordova fait déjà un excellent travail dans ce sens:

• Guide de la plateforme Android
• Guide de la plateforme iOS

Ces deux pages vous montreront tout ce que vous devez savoir sur la configuration de Cordova pour iOS ou Android. Une fois que votre environnement de développement est défini, nous pouvons passer à l'étape suivante..

Installer Cordova et Ionic 

Phew! Vous pouvez maintenant installer Cordova et Ionic. Utilisez la commande suivante:

npm installer -g cordova ionic

Une fois l'installation terminée, en supposant qu'aucune erreur ne soit commise, vous pouvez vérifier si elles ont bien été installées à l'aide des commandes suivantes: cordova --version et --version ionique. Cela vous montrera les versions des frameworks Cordova et Ionic installés sur votre système. Pour moi, ils reviennent 6.4.0 et 2.2.1.

Si vous souhaitez voir des informations de version plus détaillées telles que la version d'Ionic Framework et la version d'Ionic CLI, utilisez plutôt les éléments suivants:

infos ioniques | grep "Version"

Voici un exemple de sortie:

Ionic Framework Version: 2.2.0 Version Ionic CLI: 2.2.1 Version App Ionic Lib: 2.2.0 Version Scripts App Ionic: Version 1.1.4 Node: Version v6.7.0

Créer un nouveau projet ionique

L’Icon CLI fournit le début ionique commande pour créer facilement un nouveau projet:

ionic start photoSharer vierge --v2 --id com.tutsplus.photosharer

Voici un modèle pour vous aider à comprendre le rôle de chaque option:

ionic start nom de l'application modèle de départ à utiliser --v2 --id ID de l'application installée

Le modèle de départ utilisé ici est blanc. Celui-ci ne contient que le strict minimum pour que quelque chose soit affiché à l'écran. Il y en a d'autres, mais ils peuvent être un peu écrasants.

N'oubliez pas que l'interface de ligne de commande Ionic s'adresse aux projets Ionic 1 et 2, il vous reste donc à spécifier le --v2 option pour amorcer un projet Ionic 2 puisque Ionic 1 est toujours la valeur par défaut. Mais une fois que vous êtes dans un projet Ionic 2, la CLI Ionic est suffisamment intelligente pour savoir quelle version utiliser..

Ajout de la plateforme

Par défaut, Ionic n’est livré avec aucune plate-forme sur laquelle vous pouvez déployer. Vous pouvez en ajouter un en utilisant le plate-forme ionique ajouter suivi de la plate-forme sur laquelle vous souhaitez déployer:

plate-forme ionique ajouter android

Si vous souhaitez déployer sur une autre plate-forme, remplacez simplement Android avec la plate-forme que vous voulez.

Installer les plugins

Pour cette application, vous aurez besoin de deux plugins: un pour sélectionner une image dans la bibliothèque de l'utilisateur et un pour partager l'image sur l'application Instagram.. 

Le premier est le plugin Image Picker. Cela donne à l'application la possibilité de sélectionner des images dans la bibliothèque de photos de l'utilisateur..

plugin ionique add https://github.com/Telerik-Verified-Plugins/ImagePicker

Suivant est le plugin Instagram. Cela vous permet de transférer l'image vers l'application Instagram pour la publier..

plugin ionique ajoute cordova-instagram-plugin

Les deux plugins que vous venez d'installer font partie d'un ensemble organisé d'encapsuleurs ES6 et TypeScript pour les plugins Cordova appelé Ionic Native. Leur tâche principale est de faciliter l’interaction avec les plugins Cordova en encapsulant les rappels de plugins dans Promesses ou Observables. 

Flux de travail de développement

Vous êtes maintenant prêt à commencer à coder l'application. Mais avant d’y arriver, examinons d’abord le flux de travail de développement et la structure de dossiers de Ionic 2.. 

Dans Ionic 2, l’essentiel du travail de développement est effectué à l’intérieur du src dossier. Ces fichiers sont recompilés chaque fois que vous modifiez les fichiers de ce dossier. Contrairement à Ionic 1, la compilation est nécessaire car les fichiers source sont écrits en TypeScript (compilé en code ES5) et en Sass (compilé en code CSS). Chaque fois que vous apportez une modification, des erreurs sont également vérifiées dans le code. Elles sont ensuite signalées au développeur via la console ou l'aperçu de l'application. Une fois la compilation terminée, les fichiers résultants sont copiés dans le répertoire. www dossier, et les modifications sont reflétées dans l'aperçu de l'application.

Structure des dossiers

Pour vous familiariser avec un projet Ionic 2, vous devez vous familiariser avec la structure du dossier. Pour commencer, vous devez savoir à quoi sert chaque dossier afin de savoir où placer vos fichiers source et où chercher les fichiers dont vous avez besoin.. 

• node_modules:C'est ici que sont stockées les dépendances Ionic 2. La plupart du temps, vous n'avez pas besoin de toucher à ce dossier sauf en cas de problème avec l'une des dépendances et en le réinstallant..
• plateformes: c’est là que le code spécifique à la plate-forme est placé et que le programme d’installation de l’application est installé lors de la création de l’application en vue de son exécution sur un périphérique ou un émulateur. Cela signifie que tous les fichiers de votre www et plugins les dossiers sont copiés ici chaque fois que vous créez votre application. 
• plugins: c’est ici que sont stockés les plugins, à la fois les plugins Ionic par défaut et tous les autres plugins que vous installez.
• Ressources: c'est là que vous allez mettre des ressources d'application telles que l'icône et l'écran de démarrage.
• src: c'est là que vous coderez la plupart du temps. Tous les modèles, feuilles de style et fichiers TypeScript constituant votre application sont stockés ici..
• www: c'est là que vont vos fichiers compilés. Les fichiers ici sont servis dans l'aperçu de l'application.
• crochets: c'est là que sont stockés les scripts de hook de développement Cordova. Ils sont utilisés si vous souhaitez exécuter des scripts personnalisés au cours du cycle de développement (par exemple, lorsqu’une plate-forme ou un plug-in est ajouté)..

Exécution du serveur de développement

Lors du développement d'une application, il est utile de voir un aperçu en direct de l'application mise à jour lors de la modification du code. Pour lancer le serveur de développement, utilisez la commande suivante:

service ionique

Cela lancera le processus de surveillance des modifications dans les fichiers source et commencera à les compiler en temps réel. Par défaut, Ionic servira l'aperçu à http: // localhost: 8100 /. Vous verrez à peu près ce qui suit, puis vous pouvez prévisualiser votre application dans le navigateur à l'URL indiquée..

Prochaines étapes

Maintenant que notre environnement de développement est configuré, nous sommes prêts à coder l'application! Restez à l'écoute demain pour le prochain article, où je vous montrerai comment coder l'application, créer l'interface utilisateur et toutes les fonctionnalités de partage de photos. Ça va être amusant!

En attendant, consultez certains de nos autres tutoriels sur Ionic 2!

Si vous souhaitez une introduction approfondie et pratique au framework Ionic 2, essayez notre cours Premiers pas avec Ionic 2.

Dans ce cours, Reggie Dawson vous apprendra tout sur le cadre Ionic et vous montrera comment créer une application mobile à partir de zéro. En chemin, vous en apprendrez plus sur la bibliothèque de composants Ionic, sur la programmation de JavaScript de type statique avec TypeScript et sur l'intégration d'une application Ionic 2 avec une API rich media..