ionic-framework Tutoriel
Démarrer avec ionic-framework

Remarques

Versions

Installation ou configuration

1. Installez Ionic Framework et Cordova (car les applications Ionic sont basées sur Cordova) en utilisant npm (le gestionnaire de paquets 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 ici .

De plus, pour les utilisateurs de Mac, la dernière version de Xcode installée sur votre système vous permet de télécharger des outils de ligne de commande et iOs Simulator.

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 selon la configuration de votre système:

$ sudo npm install -g cordova ionic

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

$ npm update -g cordova ionic

ou

$ sudo npm update -g cordova ionic

Suivez les guides de plate-forme Android et iOS pour installer les dépendances de plate-forme requises.

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

$ sudo npm -g install ios-sim

2. Lancer un nouveau projet ionique:

Créez un projet ionique à l’aide d’un des modèles d’applications prédéfinis, ou d’un modèle vierge pour commencer.

$ ionic start myApp blank

ou

$ ionic start myApp tabs

ou

$ ionic start myApp sidemenu

3. Testez l'application Ionic:

Pour tester votre application ionique dans un navigateur de bureau sur les plates-formes iOS et Android:

$ ionic serve --lab

Alors 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 la console Javascript ou l'élément Inspection, dans ce cas vous préférez:

$ ionic serve

Pour tester votre application ionique dans un émulateur:

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

Remplacez ios par Android pour le test de 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 ionique sur un appareil iOS connecté via USB:

$ ionic run ios --device

Ionic Framework Introduction et installation et configuration

Cadre ionique

Un cadre de développement d'applications mobiles multiplates-formes utilisant les technologies Web Angular JS et Front End.

Site officiel : http://ionicframework.com/

Documentation : http://ionicframework.com/docs/

Installation et configuration

Installation Ionic requise NPM (Node Package Manager) et Cordova.

Vous pouvez télécharger et installer Npde JS à partir d’ ici, qui est fourni avec NPM.

Pour télécharger Apache Cordova, vous pouvez utiliser NPM en ligne de commande

npm install -g cordova

Si vous avez déjà NPM et Cordova, vous pouvez installer le framework ionique à partir de la ligne de commande en utilisant la commande suivante.

npm install -g ionic

Cela va installer et configurer le framework ionique pour l'utiliser depuis la ligne de commande.

Remarque * En fonction de votre environnement système, vous devrez peut-être exécuter avec des privilèges d'administrateur.

Commencer un nouveau projet

Pour démarrer un nouveau projet de structure ionique, vous pouvez utiliser la commande suivante

ionic start myproject

ou

ionic start myproject [template_name]

Modèles:

Ionic vous permet de créer un projet en utilisant des modèles intégrés

tabs (par défaut): qui créera une application simple avec un onglet.

sidemenu : qui créera une application ionique avec menu latéral.

blank : qui créera une application ionique vierge.

qui créera un nouveau dossier nommé myproject avec tous les fichiers de projet ioniques.

pour tester le projet dans votre navigateur, vous pouvez utiliser la commande suivante

ionic serve --lab

ou

ionic serve

Exécuter un émulation Pour exécuter ou tester une application sur un émulateur ou un téléphone, vous devez d'abord ajouter une plate-forme pour laquelle vous pouvez utiliser la commande suivante

ionic platform [Platform Name]
ionic build [Platform Name]
ionic emulate [platform name]

Noms de plate-forme, vous pouvez directement mentionner Android et iOS pour les plates-formes respectives, vous pouvez mentionner plusieurs noms de plate-forme également séparés par un espace.

Pour exécuter votre application, vous pouvez utiliser

ionic run [platform name]

Pour de l'aide, vous pouvez utiliser

ionic --help

ou

ionic help

Reportez - vous à ce lien pour une explication détaillée des cli ioniques.

Reportez - vous à ce lien pour les composants CSS disponibles en version ionique.

Reportez - vous à ce lien pour une référence API Javascript pour ionique.

Pour un développement plus rapide avec ionique, vous pouvez également essayer ionic Playground .

Bonne chance avec cadre ionique ...

Ionic Framework Hello World App

Après tout l'installation, pour faire Hello World App

• Pour créer Simple Blank App, exécutez la commande sur le terminal:

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

• ouvrez le projet HelloWorld dans IDE sous-ligne / webstrome:
  • Modifier index.html, dans www / ditectory

 <body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Hello World App</h1>
     </ion-header-bar>
     <ion-content>
        <div class="center">Hello World..!</div>
     </ion-content>
    </ion-pane>
 </body>

• Pour exécuter dans le navigateur à partir du terminal:

ionic serve                  // run the app in browser

• Pour ajouter une plateforme:

ionic platform add android   // add android platform
ionic platform add ios       // add ios platform

• Pour exécuter sur le périphérique:

adb devices                  // to check devices is connected
ionic run android            // to run on android devices
ionic run ios                // to run on ios devices

• Pour courir dans livereload:

ionic run android -c -s -l    // to check app in live reload with console. 

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

Plate - forme ionique :

Construisez, poussez, déployez et redimensionnez vos applications ioniques de manière simple.

Description du titre:

Ionic Platform est une plate-forme cloud pour la gestion et la mise à l'échelle des applications mobiles multiplates-formes. 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 ioniques standard. Mais les projets qui suivent une structure de répertoire non standard peuvent être confrontés à quelques obstacles. Ce document fournit les étapes pour utiliser Ionic Platform dans les projets ioniques créés à l'aide de Yeoman.

Portée du document:
Ce document décrit les étapes de base pour créer un projet ionique à 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 constitué par les développeurs d’applications Web / mobile, avec une expertise de niveau débutant et expert, qui connaissent bien les prérequis ci-dessous.

Conditions préalables:
Vous devriez vous familiariser 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 ionique

Un générateur pour la structure ionique de Yeoman, l'outil d'échafaudage Web pour les applications Web modernes

Node.js est un moteur d'exécution JavaScript basé sur le moteur JavaScript V8 de Chrome. npm est le gestionnaire de paquets pour JavaScript. Téléchargez et installez Node (et npm) à partir de http://nodejs.org

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

Yeoman vous aide à lancer 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 de scripts en "js" . Changer dans index.html si nécessaire.

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

Puis courir

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

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

client-plateforme ionique

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

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 ionique pour que l’application ionique puisse s’interfacer avec les plug-ins 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 "ionicSettings" 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 init et compressez les tâches après la copie . Dans index.html, déplacez la balise ci-dessous après toutes les déclarations de balises.

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

Puis courir

$ Grunt serve

Déploiement ionique

Poussez les mises à jour en temps réel sur vos applications de production et gérez l'historique des versions.

Ionic Deploy vous permet de mettre à jour votre application à la demande, pour toutes les modifications ne nécessitant pas de modifications binaires, vous permettant de gagner des jours, voire des semaines, de temps d'attente. Suivez la procédure ci-dessous pour configurer Ionic Deploy pour votre application.

Dans Gruntfile.js, ajoutez la tâche grunt "deploy" comme indiqué ci-dessous.

grunt.registerTask('deploy', function () {
  return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});

puis courir

$ ionic plugin add ionic-plugin-deploy

Code de déploiement ionique:

var deploy = new Ionic.Deploy();

// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});

Déploiement des mises à jour:

Envoyez un nouveau code pour votre application.

Créez un fichier apk et installez votre application. Apportez quelques modifications à votre code et déployez les modifications à l'aide de « grunt deploy ». Ensuite, mettez-le à jour depuis votre application.

Vous pouvez également le déployer à partir du tableau de bord apps.ionic.io . Vous pouvez déployer l'application sans le paramètre deploy. Ensuite, dans le tableau de bord, vous pouvez ajouter les détails des métadonnées et des versions et déployer l'application à partir de là.

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

Analyse ionique

Afficher le flux en direct des événements ou le nombre brut / unique d'événements / utilisateurs au fil du temps.

Combien d'utilisateurs y a-t-il actuellement sur votre application? Combien d'entre eux utiliseront votre application demain ou la semaine prochaine? Sans information, vous n'avez aucun moyen de savoir si votre application est utilisée de la manière que vous attendez. Suivez la procédure ci-dessous pour configurer Ionic Analytics pour votre application.

Dans votre app.js, ajoutez la dépendance de module ' ionic.service.analytics ' après le ionic.service.core Exécutez la méthode du registre d'analyse dans la fonction d'exécution de notre module.

$ionicAnalytics.register();

Dans Ionic Analytics, chaque action suivie effectuée par un utilisateur dans votre application est représentée par un objet événement. Un événement est une action unique effectuée à un moment précis. Pour suivre vos propres événements, appelez $ionicAnalytics.track(eventType, eventData) chaque fois qu'une action se produit.

$ionicAnalytics.track('User Login', {
  user: $scope.user
});

La directive ion-track-tap envoie un événement lorsque son élément hôte est tapé. La directive associée ion-track-data joint les données d'événement.

<button ion-track-tap="eventType" ion-track-data="expression"></button>

Dans le tableau de bord apps.ionic.io, vous pouvez afficher les données d'analyse suivantes:

Evénements: affichez le nombre brut d'événements au fil du temps ou le nombre d'utilisateurs uniques ayant terminé un événement. Un événement peut être n'importe quoi, depuis un utilisateur chargeant l'application, jusqu'à la confirmation d'un achat.

Entonnoirs: un entonnoir est une séquence d'actions que vous attendez des utilisateurs dans votre application, menant à un objectif défini. L'utilisation judicieuse des entonnoirs vous aidera à améliorer les taux de conversion.

Segments: affiche les événements au fil du temps, regroupés par une propriété spécifiée. Ou bien, calculez le pourcentage d'événements correspondant à une propriété donnée. Les segments vous aident à comprendre votre base d'utilisateurs et à voir comment les propriétés changent avec le temps.

Rétention: suivez la durée pendant laquelle les utilisateurs sont actifs sur votre application avant de cesser de l'utiliser. Ou, indiquez le temps nécessaire aux utilisateurs pour atteindre un objectif défini, comme une vente terminée.

Pulse: Un flux en direct des événements venant de vos utilisateurs.

Push ionique

Envoyez des notifications push ciblées et automatisées à vos utilisateurs.

Ionic Push vous permet de créer des notifications push ciblées via un tableau de bord simple qui sera envoyé automatiquement lorsque les utilisateurs correspondent à des critères spécifiques, et offre une API simple pour envoyer des notifications push depuis vos propres serveurs.

Profils Push Android:

Les notifications push Android utilisent le service Google Cloud Messaging (GCM). Ouvrez la console Google Developers et créez un projet. Copiez le numéro de votre projet . Ce sera le numéro d' expéditeur GCM ou le numéro de projet GCM .

Dans la section API Manager , activez l' API Google Cloud Messaging . Ensuite, accédez à la section Informations d' identification et sélectionnez Créer des informations d'identification, puis choisissez Clé API, puis Clé du serveur. Nommez votre clé API et laissez le champ Accepter les demandes de ... vide et cliquez sur Créer . Enregistrez votre clé API !

Authentification:

Accédez au tableau de bord de votre application sur la plate - forme ionique et accédez à Paramètres -> Certificats . Si vous ne l'avez pas encore fait, créez un nouveau profil de sécurité, puis appuyez sur edit . Notez l' étiquette de profil .

Maintenant, cliquez sur l'onglet Android et recherchez la section marquée Google Cloud Messaging , saisissez la clé API que vous avez générée sur la console développeur Google, puis cliquez sur Enregistrer . Allez dans Paramètres -> Clés API . Sous API Tokens , créez un nouveau jeton et copiez-le. Ce sera votre jeton API .

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init

Note: phonegap-plugin-push nécessite Android Support Repository version 32+

Dans votre app.js, ajoutez la dépendance de module ' ionic.service.push ' après le fichier ionic.service.core

Code Push ionique:

Initialisez le service et enregistrez votre appareil dans la fonction d'exécution de votre module. Vous aurez besoin du jeton de périphérique enregistré par l'utilisateur pour envoyer une notification à l'utilisateur.

$ionicPush.init({
  debug: true,
  onNotification: function (notification) {
    console.log'token:', notification.payload);
  },
  onRegister: function (token) {
    console.log('Device Token:', token);
    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
  }
});

$ionicPush.register();

puis courir

$ grunt build:android --debug

Ionic Push vous permet de créer des notifications push ciblées via le tableau de bord. Vous pouvez également envoyer des notifications à partir du serveur dans le format ci-dessous.

curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
    "tokens": ["DEVICE_TOKEN"],
        "profile": "PROFILE_TAG",
        "notification": {
                "message": "Hello World!"
        "android": {
                  "title": "Hi User",
                  "message": "An update is available for your App",
                  "payload": {
                        "update": true
                  }
            }
    } }' "https://api.ionic.io/push/notifications"

Remarque: les étapes pour configurer Ionic Push pour iOS sont les mêmes, sauf pour la création des profils Push. Pour créer des profils push iOS, reportez-vous à la page http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles.

Exemple d'application

Téléchargez l'exemple d'application ici .

Un exemple d'application est joint ici pour référence.

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html

Remarque: Ceci n'est pas un projet autonome. Le code fourni est uniquement à titre de comparaison avec un projet créé et mis en œuvre en utilisant les procédures indiquées ci-dessus dans ce document, en cas de problèmes ou d'erreurs.