Codez votre première application Ionic 2: Mise en place

() translation by (you can also view the original English article)

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

C'est pourquoi je veux vous donner un bon début en vous promenant étape par étape grâce à la création de votre première application Ionic 2. Si vous êtes déjà familier avec Ionic alors les concepts pourraient 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 cadre.

Présentation de l'application

Dans ce tutoriel et le suivant, vous allez créer une application de partage de photos qui permet aux utilisateurs de choisir une image à partir de leur périphérique et de la partager avec Instagram. Voici ce que l'application va ressembler:

Configurer votre environnement

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

SDK Android: les applications construites avec Cordova et Ionic reposent sur les mêmes outils de développement utilisés par les développeurs d'applications natives.
Node.js: il est principalement utilisé par Ionic pour l'outillage—des choses comme la compilation du code et la vérification des erreurs.
Un appareil Android ou un émulateur pour tester. Vous pouvez installer l'émulateur par défaut d'Android avec le programme d'installation d'Android SDK.

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 de ce qui suit:

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

Installation de Cordova et Ionic

Phew! Maintenant, vous pouvez réellement installer Cordova et Ionic. Utilisez la commande suivante:

1	npm install -g cordova ionic

Une fois l'installation terminée, en supposant que vous n'avez pas reçu d'erreurs, vous pouvez vérifier s'ils ont effectivement été installés avec les commandes suivantes: cordova --version et ionic --version. Cela vous montrera les versions des cadres Cordova et Ionic installés sur votre système. Pour moi, ils retournent 6.4.0 et 2.2.1.

Si vous souhaitez afficher des informations plus détaillées sur la version, telles que la version Ionic Framework et la version Ionic de CLI, utilisez plutôt le suivant:

1	ionic info \| grep "Version"

Voici un exemple de sortie:

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

Créer un nouveau projet Ionic

La CLI Ionic fournit la commande de ionic start pour créer facilement un nouveau projet:

1	ionic start photoSharer blank --v2 --id com.tutsplus.photosharer

Voici un modèle pour vous aider à comprendre ce que fait chaque option individuelle:

1	ionic start {name of the app} {starter template to use} --v2 --id {ID of the app when installed}

Le modèle de démarrage utilisé ici est blank. Cela ne contient que le strict minimum afin d'obtenir quelque chose affiché à l'écran. Il y en a d'autres, mais ils peuvent être un peu accablant.

Rappelez-vous que la CLI Ionic s'adresse aux deux projets Ionic 1 et Ionic 2, donc vous devez toujours spécifier l'option --v2 pour démarrer un projet Ionic 2 car Ionic 1 est toujours la valeur par défaut. Mais une fois que vous êtes à l'intérieur d'un projet Ionic 2, le Ionic CLI est assez intelligent pour savoir quelle version à utiliser.

Ajout de la plate-forme

Par défaut, Ionic ne vient avec aucune plate-forme que vous pouvez déployer. Vous pouvez en ajouter une en utilisant la commande ionic platform add, puis la plate-forme à déployer:

1	ionic platform add android

Si vous souhaitez déployer sur une autre plate-forme, il suffit de remplacer android avec la plate-forme que vous voulez.

Installation des plugins

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

Tout d'abord, le plugin Image Picker. Cela donne à l'application la possibilité de sélectionner des images de la bibliothèque de photos de l'utilisateur.

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

Ensuite, le plugin Instagram. Cela vous permet de transférer l'image à l'application Instagram pour la publication.

1	ionic plugin add cordova-instagram-plugin

Ces deux plugins que vous venez d'installer font partie d'un ensemble de ES6 et d'encapsuleurs TypeScript pour les plugins Cordova appelés Ionic Native. Leur tâche principale est de rendre plus facile d'interagir avec Cordova plugins en enveloppant plugin callbacks dans Promises ou Observables.

Processus de développement

Vous êtes maintenant prêt à commencer à coder l'application. Mais avant d'en arriver là, nous allons tout d'abord jeter un coup d'oeil au flux de travail de développement et à la structure de dossiers de Ionic 2.

Dans Ionic 2, la plupart des travaux de développement se font à l'intérieur du dossier src. Ces fichiers sont recompilés chaque fois que vous apportez des modifications aux fichiers de ce dossier. Contrairement à Ionic 1, la compilation est nécessaire car les fichiers source sont écrits en TypeScript (compilé au code ES5) et Sass (compilé en code CSS). Chaque fois que vous effectuez une modification, le code est également vérifié pour les erreurs, qui sont signalés 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 dossier www et les modifications sont reflétées dans l'aperçu de l'application.

Structure du dossier

Pour vous familiariser avec un projet Ionic 2, vous devez vous familiariser avec la structure des dossiers. Pour commencer, vous devez savoir ce que chaque dossier est utilisé pour que vous sachiez où mettre vos fichiers source et où chercher les fichiers dont vous avez besoin.

node_modules: c'est là que les dépendances Ionic 2 sont stockées. La plupart du temps, vous n'avez pas besoin de toucher ce dossier à moins qu'il y ait un problème avec l'une des dépendances et vous devez le réinstaller.
plates-formes: c'est là que le code spécifique à la plate-forme est placé et où l'installateur d'application est mis lorsque vous créez l'application pour s'exécuter sur un périphérique ou un émulateur. Cela signifie que tous les fichiers de vos dossiers www et plugins sont copiés ici chaque fois que vous construisez votre application.
plugins: c'est là que les plugins sont stockés, évidemment—à la fois les plugins Ionic par défaut et tous les plugins que vous installez.
ressources: c'est ici que vous mettez les ressources de l'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 qui composent votre application sont stockés ici.
www: c'est là que vos fichiers compilés vont. Les fichiers inclus ici sont disponibles dans l'aperçu de l'application.
hooks: c'est là que les scripts de Cordova de développement de Cordova sont stockés. Ils sont utilisés si vous avez des scripts personnalisés que vous souhaitez exécuter pendant une partie du cycle de développement (par exemple, lorsqu'une plate-forme ou un plugin est ajouté).

Exécution du serveur de développement

Tout en développant une application, il est utile de voir une prévisualisation en direct de l'application qui est mise à jour lorsque vous apportez des modifications au code. Pour lancer le serveur de développement, utilisez la commande suivante:

1	ionic serve

Cela démarrera le processus de surveillance des modifications apportées aux fichiers sources et commencera à les compiler en temps réel. Par défaut, Ionic servira l'aperçu à http://localhost:8100/. Vous verrez quelque chose comme ci-dessous, puis vous pouvez prévisualiser votre application dans le navigateur à l'URL indiquée.

Prochaines étapes

Maintenant que notre environnement de développement est mis en place, nous sommes prêts à sauter dans le codage de l'application! Restez à l'écoute demain pour le prochain post, où je vais vous montrer comment réellement coder de l'application, la construction de 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 Commencer avec Ionic 2.

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