Débuter avec le cadre ionique

Installation ou configuration

1. Installez Ionic Framework et Cordova (puisque les applications Ionic sont basées sur Cordova) à l’aide de npm (le gestionnaire de packages de nœuds) :

Assurez-vous d’avoir une version à jour de Node.js installée sur votre système. Si vous n’avez pas installé Node.js, vous pouvez l’installer depuis ici.

De plus, pour les utilisateurs de Mac, l’installation de la dernière version de Xcode sur votre système vous apporte des outils de ligne de commande et un simulateur iOs, [télécharger ici](https://itunes.apple.com/it/app/xcode/id497799835? mt=12).

Ouvrez une fenêtre de terminal (Mac) ou une fenêtre de commande (Windows) et installez Cordova et Ionic :

$ npm install -g cordova ionic

Sur un Mac, vous devrez peut-être utiliser sudo en fonction de la configuration de votre système :

$ sudo npm install -g cordova ionic

Si Cordova et Ionic sont déjà installés sur votre ordinateur, assurez-vous de mettre à jour la dernière version :

$ npm update -g cordova ionic

$ sudo npm update -g cordova ionic

Suivez Android et [iOS](http://cordova.apache.org/docs/en /5.1.1/guide/platforms/ios/index.html) guides de plate-forme pour installer les dépendances de plate-forme requises.

Remarque : le développement iOS nécessite Mac OS X. Le simulateur iOS via la CLI Ionic nécessite le package ios-sim npm, qui peut être installé avec la commande :

$ sudo npm -g install ios-sim

2. Démarrer un nouveau projet Ionic :

Créez un projet Ionic en utilisant l’un des modèles d’application prêts à l’emploi, ou un modèle vierge pour repartir à neuf.

$ ionic start myApp blank

$ ionic start myApp tabs

$ ionic start myApp sidemenu

3. Testez l’application Ionic :

Pour tester votre application Ionic dans un navigateur de bureau sur les plateformes iOS et Android :

$ ionic serve --lab

Alors que ionic serve --lab est idéal pour tester l’interface utilisateur de l’application sur plusieurs plates-formes, cela peut entraîner des problèmes pour Javascript Console ou Element Inspection, dans ce cas, ce que vous préférez peut-être :

$ ionic serve

Pour tester votre application Ionic dans un émulateur :

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios

Remplacez ios par android pour tester l’émulateur Android :

$ ionic build android
$ ionic emulate android

Pour tester votre application Ionic sur un appareil Android connecté via USB :

$ ionic run android

Pour tester votre application Ionic sur un appareil iOS connecté via USB :

$ ionic run ios --device

Plate-forme ionique (nuage ionique) pour les projets ioniques Yo (Yeoman)

Plate-forme ionique :

Créez, poussez, déployez et mettez à l’échelle vos applications Ionic, en toute simplicité.

Description du titre:
La plate-forme Ionic est une plate-forme cloud pour la gestion et la mise à l’échelle des applications mobiles multiplateformes. Les services intégrés vous permettent, à vous et à votre équipe, de créer, déployer et développer efficacement vos applications.

Objectif du document :
Ionic Platform fonctionne bien avec les projets Ionic standard. Mais les projets qui suivent une structure de répertoire non standard peuvent rencontrer quelques obstacles. Ce document fournit les étapes à suivre pour utiliser Ionic Platform dans les projets Ionic créés à l’aide de Yeoman.

Portée du document :
Ce document couvre les étapes de base pour créer un projet Ionic à l’aide de Yeoman et l’intégrer à Ionic Platform à l’aide du client Web Ionic Platform. Ce document couvre les étapes de base pour utiliser Ionic Deploy, Ionic Analytics et Ionic Push.

Public visé:
Le public visé par ce document est les développeurs d’applications Web/mobiles, avec une expertise de niveau débutant et expert, qui connaissent les prérequis ci-dessous.

Conditions préalables:
Vous devez être familiarisé avec les frameworks/outils suivants avant d’essayer ce document.

AngularJs : https://docs.angularjs.org/guide
IonicFramework : http://ionicframework.com/docs/guide
Yeoman : http://yeoman.io/codelab/index.html
Générateur ionique : https://github.com/diegonetto/generator-ionic
Plate-forme ionique : https://ionic.io/platform

Générateur de cadre ionique

Un générateur pour le cadre ionique de Yeoman, l’outil d’échafaudage du Web pour les applications Web modernes

Node.js est un runtime JavaScript basé sur le moteur JavaScript V8 de Chrome. npm est le gestionnaire de packages pour JavaScript. Téléchargez et installez Node (et npm) depuis http://nodejs.org

$ npm install npm –g
$ npm install -g yo

Yeoman vous aide à démarrer de nouveaux projets, en prescrivant les meilleures pratiques et les outils pour vous aider à rester productif.

$ yo ionic [app-name]

Dans package.json, incluez les éléments suivants dans devDependencies

"grunt-string-replace": "^1.2.1"

Dans bower.json, incluez les éléments suivants dans les dépendances

"ionic-platform-web-client": "^0.7.1"

Dans Gruntfile.js, changez le dossier scripts en ‘js’. Modifiez également index.html si nécessaire.

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })

Puis cours

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

client-web-plate-forme-ionique

Un client Web qui fournit des interactions avec la plate-forme Ionic.

Nous avons besoin de code pour permettre à votre application de communiquer avec la plate-forme ionique. Nous devons ajouter le client Web de la plate-forme Ionic pour que l’application Ionic s’interface avec les plugins et la plate-forme Ionic.io.

$ ionic io init

Dans votre app.js, ajoutez la dépendance de module ‘ionic.service.core’. Dans Gruntfile.js, ajoutez la tâche grunt ‘ionicSettings’ comme indiqué ci-dessous.

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);

Ajoutez les ‘ionicSettings’ dans les tâches init et compress après copy. Dans index.html, déplacez la balise

Débuter avec le cadre ionique

Installation ou configuration #

**1. Installez Ionic Framework et Cordova (puisque les applications Ionic sont basées sur Cordova) à l’aide de npm (le gestionnaire de packages de nœuds) : ** #

2. Démarrer un nouveau projet Ionic : #

3. Testez l’application Ionic : #

Plate-forme ionique (nuage ionique) pour les projets ioniques Yo (Yeoman) #

** Générateur de cadre ionique ** #

client-web-plate-forme-ionique #