ionic-framework
Nuage ionique pour projets ioniques Yeoman
Recherche…
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.