Démarrer avec ionic2

Installation ou configuration #

Étant donné que Ionic 2 s’améliore de jour en jour, veuillez toujours consulter la documentation officielle pour suivre les dernières modifications et améliorations.

Conditions préalables: Vous aurez besoin de NodeJS pour créer des projets Ionic 2. Vous pouvez télécharger et installer node ici et en savoir plus sur npm et les packages utilisés par Ionic 2 [ici](http://ionicframework.com/docs/resources/using- npm/). #

1. Installation d’Ionic 2 #

Comme Ionic 1, vous pouvez utiliser la CLI ou l’interface graphique Ionic pour créer et tester rapidement des applications directement dans le navigateur. Il a même toutes les fonctionnalités pour fonctionner avec vos applications Ionic 1, vous n’aurez donc rien à changer !

Pour utiliser Ionic 2, installez simplement ionic depuis npm :

$ npm install -g ionic

Si vous obtenez une erreur EACCES, suivez les instructions ici pour accorder au nœud les autorisations dont il a besoin. #

2. Création de votre première application #

Une fois la CLI installée, exécutez la commande suivante pour démarrer votre première application :

$ ionic start MyIonic2Project

Le modèle d’onglets est utilisé par défaut, mais vous pouvez choisir un autre modèle en passant un indicateur. Par exemple:

$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install

Cela utilisera le modèle tutoriel.

Pour exécuter votre application, accédez au répertoire de vos projets et exécutez ionic serve -lc :

$ ionic serve -lc

Le -l active le rechargement en direct de la page, le -c affiche les logs de la console. Si vous rencontrez des problèmes pour créer votre application, assurez-vous que votre package.json correspond à celui de la [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/package .json)

Vous pouvez jouer avec votre nouvelle application directement dans le navigateur ! #

3. Construire sur un appareil #

Vous pouvez également créer votre nouvelle application sur un appareil physique ou un émulateur d’appareil. Vous aurez besoin de Cordova pour continuer.

Pour installer Cordova, exécutez :

$ npm install -g cordova

Consultez la documentation du simulateur iOS pour créer des applications iOS (REMARQUE : vous ne pouvez pas créer d’appareils ou d’émulateurs iOS sur tout système d’exploitation autre qu’OSX), ou la documentation Genymotion pour créer une application Android.

S’exécutant sur un appareil iOS :

Pour créer une application iOS, il est nécessaire que vous travailliez sur un ordinateur OSX, car vous aurez besoin du framework cacao pour pouvoir créer pour ios, si c’est le cas, vous devrez d’abord ajouter la plate-forme à cordova en exécutant le commande suivante :

$ ionic cordova platform add ios

Vous aurez besoin de Xcode pour compiler sur un appareil iOS.

Enfin, exécutez votre application avec la commande suivante :

$ ionic cordova run ios

S’exécutant sur un appareil Android :

Les étapes pour Android sont presque identiques. Tout d’abord, ajoutez la plate-forme :

$ ionic cordova platform add android

Installez ensuite le Android SDK qui vous permet de compiler sur un appareil Android. Bien que le SDK Android soit livré avec un émulateur, il est vraiment lent. Genymotion est beaucoup plus rapide. Une fois installé, lancez simplement la commande suivante :

$ ionic cordova run android

Et c’est tout! Félicitations pour la création de votre première application Ionic 2 !

Ionic propose également un rechargement en direct. Donc, si vous souhaitez développer votre application et voir les changements se produire en direct sur l’émulateur/appareil, vous pouvez le faire en exécutant les commandes suivantes :

Pour iOS :

$ ionic cordova emulate ios -lcs

Attention, sur iOS 9.2.2 le livereload ne fonctionne pas. Si vous souhaitez travailler avec livereload, éditez le fichier config.xml en ajoutant ce qui suit :

<allow-navigation href="*"/>

Puis dans le <nom de la plate-forme="ios"> :

<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
</config-file>

Pour Android:

$ ionic cordova run android -lcs

Le l signifie live-reload, c pour les journaux de la console et s pour les journaux du serveur. Cela vous permettra de voir s’il y a des erreurs / avertissements lors de l’exécution.

Construire pour Windows

Si vous souhaitez créer votre projet pour Windows, vous devez travailler sur un ordinateur Windows. Pour commencer, installez la plateforme windows sur votre projet ionic2 en exécutant la commande suivante :

$ionic cordova platform add windows

Ensuite, lancez simplement la commande suivante :

$ionic cordova run windows

Pour exécuter dans le navigateur

$ionic serve

pour le navigateur Chrome, inspectez le périphérique (tapez dans la barre d’adresse du navigateur Chrome)

chrome://inspect/#devices