Share
Une des forces de Ionic réside dans les services qu’elle offre en plus du cadre. Cela inclut des services d'authentification des utilisateurs de votre application, des notifications push et des analyses. Dans cette série, nous en apprenons davantage sur ces services en créant des applications qui les utilisent..
Dans cet article, nous allons jeter un oeil à Ionic Deploy. Ce service vous permet de publier les modifications apportées à votre application Ionic sans avoir besoin de la recompiler et de la soumettre à nouveau au magasin d'applications. Ceci est très utile pour pousser rapidement les corrections de bugs, les mises à jour mineures et autres modifications esthétiques de l'application. Avec la fonctionnalité "Déployer des canaux", vous pouvez également effectuer des tests A / B en introduisant différentes modifications de code dans différents canaux de déploiement..
Cependant, toutes les modifications que vous souhaitez apporter à votre application ne peuvent pas être poussées avec Ionic Deploy. Seules les modifications apportées à votre code HTML, CSS, JavaScript et à vos ressources sous votre www répertoire peut être poussé de cette façon. Les modifications binaires telles que les mises à jour de la version de la plate-forme Cordova, les plug-ins Cordova (soit en mettant à jour ceux existants, soit en ajoutant de nouveaux), et les ressources d'applications telles que l'icône et l'écran de démarrage ne peuvent pas être transférés avec Ionic Deploy..
Dans votre application Ionic, vous pouvez avoir un code qui vérifie les déploiements disponibles (mises à jour). Par défaut, il vérifiera les déploiements dans le production canal. Mais vous pouvez aussi spécifier d’autres canaux pour recevoir les mises à jour de.
Vous pouvez ensuite pousser vos modifications en utilisant le bouton téléchargement ionique commander. Cela téléchargera vos modifications sur Ionic Cloud. Une fois qu'ils sont téléchargés, vous pouvez choisir le canal sur lequel vous souhaitez déployer, et décider de le déployer maintenant ou ultérieurement..
Le déploiement sur un canal surveillé par votre application déclenchera l'exécution du code de votre application. Ce code est ensuite responsable du téléchargement de la mise à jour, de son extraction et du rechargement de l'application pour appliquer les modifications..
Dans cet article, vous utiliserez la ligne de commande pour appliquer les modifications et tester si le déploiement fonctionne comme prévu. Pour simplifier les choses, les changements que nous allons introduire concerneront principalement l'interface utilisateur. Pour chaque déploiement, nous allons changer le numéro de version affiché pour l'application. Nous allons également modifier l'image affichée sur l'application pour montrer que les ressources peuvent également être mises à jour..
Maintenant que vous avez une idée du fonctionnement de Ionic Deploy et de ce que vous allez construire, il est temps de vous salir les mains en créant une application utilisant Ionic Deploy. Commencez par démarrer une nouvelle application Ionic:
ionic start --v2 deployApp onglets
La commande ci-dessus créera une nouvelle application à l'aide du modèle d'onglets. Naviguer à l'intérieur du deployApp répertoire une fois l'installation terminée:
cd deployApp
Ensuite, vous devez installer le @ ionique / nuage-angulaire paquet. Ceci est la bibliothèque JavaScript du service Ionic Cloud. Il nous permet d’interagir avec le service Ionic Deploy et d’autres services Ionic via du code JavaScript..
npm install @ ionic / cloud-angular --save
Une fois l'installation terminée, vous pouvez maintenant initialiser une nouvelle application Ionic basée sur cette application. Avant de le faire, assurez-vous que vous avez déjà un compte Ionic. L'outil en ligne de commande vous invitera à vous connecter avec votre compte Ionic si vous ne l'avez pas déjà fait..
ionique io init
Cela créera une nouvelle application nommée "deployApp" (ou ce que vous avez nommé votre application lorsque vous avez démarré une nouvelle application Ionic) sous votre tableau de bord des applications Ionic..
Une fois que vous avez vérifié que l'application est répertoriée sur votre tableau de bord Ionic, revenez au terminal et installez le plugin Deploy:
cordova plugin ajoute ionic-plugin-deploy --save
Notez que ce plugin est celui qui fait le gros du travail. le @ ionique / nuage-angulaire package expose simplement les API requises pour travailler facilement avec les services Ionic dans une application Ionic.
Maintenant que vous avez effectué toute la configuration nécessaire, il est temps d'ajouter le code permettant de vérifier et d'appliquer les mises à jour. Mais avant cela, commencez par servir l'application via votre navigateur:
service ionique
Cela vous permet de vérifier si le code que vous avez ajouté fonctionne ou non. De cette façon, vous pouvez apporter les corrections nécessaires dès que vous voyez une erreur..
Ouvrez le src / app / app.module.ts fichier. Sous le Écran de démarrage importer, importer les services nécessaires pour travailler avec Ionic Cloud:
importer SplashScreen de '@ ionic-native / splash-screen'; // ajoute les éléments suivants: import CloudSettings, CloudModule from '@ ionic / cloud-angular';
Ensuite, ajoutez le app_id de votre application ionique. Vous pouvez le trouver sur votre tableau de bord de l'application Ionic, juste en dessous du nom de l'application..
const cloudSettings: CloudSettings = 'core': 'app_id': 'VOTRE ID APP IONIC';
Une fois que vous avez ajouté cela, vous pouvez maintenant l'inclure dans l'un des modules de l'application:
@NgModule (declarations: [//…], imports: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ], );
Ensuite, ouvrez le src / app / app.component.ts fichier. Juste en dessous de la TabsPage importer, inclure les éléments suivants:
importer TabsPage de '… / pages / tabs / tabs'; // ajoute les éléments suivants: import AlertController, LoadingController from 'ionic-angular'; import Deploy à partir de '@ ionic / cloud-angular'; // importer le service de déploiement à partir du package @ ionic / cloud-angular
dans le constructeur(), ajoutez les services que nous avons importés précédemment:
constructeur (plate-forme: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public deploy: Deploy, privé alertCtrl: AlertController, private loadingCtrl: LoadingController) //…
Puisque nous développons encore l'application, définissez le canal de déploiement sur dev:
this.deploy.channel = 'dev';
Par la suite, si vous souhaitez passer au canal de production, vous pouvez simplement supprimer cette ligne en tant que production est le canal par défaut pour les déploiements. Si vous avez créé un autre canal, vous pouvez également inclure son nom ici.
Vous pouvez accéder à un tableau d'instantanés précédemment téléchargés par l'application. le des instantanés variable est un tableau contenant les identifiants de chacun des instantanés.
Accentsconagua
this.deploy.getSnapshots (). then ((instantanés) => console.log ('obtention des instantanés…'); console.log (instantanés););Nous n'utiliserons pas vraiment d'instantanés pour cette application, mais il est bon de savoir que l'application stocke ce type d'informations pour une utilisation ultérieure. Dans l'exemple ci-dessous, nous allons parcourir la liste d'anciens instantanés et les supprimer pour libérer de l'espace sur le périphérique..
snapshots.forEach ((snapshot_id) => this.deploy.getMetadata (snapshot_id) .then ((metadata) => // faire quelque chose avec les métadonnées); // supprimer l'instantané this.deploy.deleteSnapshot (snapshot_id); )
Pour vérifier les mises à jour, utilisez le vérifier() méthode. Cela renvoie une valeur booléenne qui vous indique si un nouvel instantané est disponible ou non. Par défaut, le dernier déploiement crée un nouvel instantané. Donc, seul le dernier déploiement sera appliqué si vous avez poussé deux mises à jour consécutives.
this.deploy.check (). then ((snapshotAvailable: boolean) => //…);
Si un instantané est disponible pour le téléchargement, vous pouvez obtenir des informations supplémentaires à ce sujet en appelant le getMetaData () méthode. Ces métadonnées peuvent être ajoutées à un déploiement via le tableau de bord de l'application Ionic. Des paires clé-valeur peuvent être ajoutées ici, et chacune d’elles devient disponible en tant que propriété du métadonnées objet. Plus tard, nous utiliserons des métadonnées pour personnaliser les messages affichés dans l'application chaque fois qu'une nouvelle mise à jour devient disponible..
if (snapshotAvailable) // récupère les métadonnées this.deploy.getMetadata (). then ((métadonnées) => console.log ('obtention de métadonnées…'); console.log (métadonnées);); Ensuite, affichez un message d'alerte de confirmation pour permettre à l'utilisateur de décider s'il souhaite télécharger la mise à jour ou non:
let alert = this.alertCtrl.create (title: 'Version' + metadata.version + 'is available', message: 'Voulez-vous télécharger cette mise à jour?', boutons: [text: 'No', rôle: 'cancel', gestionnaire: () => // créer des tâches (par exemple, ajouter un code d'analyse pour compter le nombre d'utilisateurs n'ayant pas appliqué la mise à jour), text: 'Oui', gestionnaire: () => // continue avec le téléchargement de la mise à jour]); alert.present ();
Vous craignez peut-être que cela gêne l'utilisateur s'il continue à recevoir l'invite à mettre à jour son application s'il continue à répondre «Non». Le plus souvent, cependant, c'est en fait une bonne chose. Il ne devrait y avoir aucune raison pour qu'un utilisateur refuse une mise à jour s'il souhaite améliorer son expérience..
Lorsque l'utilisateur accepte, vous pouvez télécharger la mise à jour. Cela peut prendre un certain temps en fonction de votre connexion Internet et de votre appareil. Une fois la mise à jour téléchargée, affichez un chargeur pour attirer l'attention de l'utilisateur pendant son extraction. Une fois qu'il est extrait, rechargez l'application et masquez le chargeur..
this.deploy.download (). then () => // le téléchargement est terminé console.log ('téléchargement terminé!'); // show loader laisser le chargement = this.loadingCtrl.create (contenu: 'Rechargement en cours l'application… '); loading.present (); // extraire la mise à jour this.deploy.extract (). then () => console.log (' extraire! '); this.deploy.load ( ); // recharge l'application pour appliquer les modifications console.log ('recharge terminée!'); loading.dismiss ();););Jetez un oeil à ce que la mise à jour app.components.ts le fichier doit ressembler à tous ces changements.
Maintenant que le code de vérification des déploiements est ajouté, nous pouvons créer l'application et l'installer sur un appareil. Le reste des changements que nous allons introduire sera principalement poussé par le service Ionic Deploy.
Allez-y et ajoutez la plate-forme Android à votre projet Ionic et construisez le .apk fichier avec les commandes suivantes:
plate-forme ionique ajouter android ionic build android
Cela va créer un android-debug.apk déposer à l'intérieur du plates-formes / android / build / output / apk dossier. Copiez-le sur votre appareil et installez-le.
Il est maintenant temps pour nous de pousser certaines modifications dans l'application. Pour l'essayer, apportez quelques modifications mineures à l'interface utilisateur de l'application. Et maintenant, vous pouvez télécharger les modifications:
téléchargement ionique
Une fois le téléchargement terminé, une nouvelle entrée sera listée dans votre Activité récente. Clique le modifier lien de cette entrée. Cela vous permettra d'ajouter une note, des informations de version et des métadonnées à cette version spécifique. C'est toujours une bonne idée d'ajouter une note pour que vous sachiez en quoi consiste cette version. Une fois que vous avez terminé, cliquez sur le bouton Métadonnées onglet et ajouter ce qui suit:
Puis cliquez sur le sauvegarder bouton pour valider vos modifications. Enfin, cliquez sur le Déployer bouton pour déployer la version. Une fois que l'application prend en compte le changement, les métadonnées que vous avez fournies deviennent également disponibles..
Vous pouvez voir qu'il affiche maintenant le numéro de version de la version:
Parfois, vous déplacerez une mise à jour avec Ionic Deploy, mais vous devrez également reconstruire et expédier ces packages vers l'application fournie dans l'App Store. Attention cependant, car Ionic ne sait pas que votre application contient déjà cette mise à jour et votre application invitera l'utilisateur à télécharger les dernières mises à jour lors de la première exécution de votre application..
La fonctionnalité de contrôle de version peut aider à empêcher cela. Avec la fonctionnalité de gestion des versions, vous pouvez spécifier la version de l'application pouvant recevoir les mises à jour:
Vous pouvez ajouter des informations sur la gestion des versions en cliquant sur le bouton MODIFIER lien sur une version spécifique, puis aller à la VERSION languette. À partir de là, vous pouvez spécifier les versions (iOS ou Android) que vous souhaitez cibler..
Qu'est-ce que Ionic fait est de comparer cette version avec celle que vous avez spécifiée dans votre config.xml fichier:
Si la version de l'application se situe entre le le minimum et maximum spécifié, la libération est ramassé. Et si la version de l'application est égale à la équivalent version, la publication est ignorée. Donc, pour la capture d'écran ci-dessus, si la version indiquée dans le config.xml le fichier est 0.0.1, la publication sera ignorée par l'application.
Le prochain changement que nous allons faire est de montrer une image.
La première chose à faire est de trouver une image. Mettez-le à l'intérieur du src / assets / img dossier et le lier à partir de la src / pages / home / home.html fichier:
Accueil 
Version 4
Téléchargez vos modifications en tant que nouvelle version sur Ionic Deploy.
téléchargement ionique
Une fois téléchargé, accédez au tableau de bord de votre application Ionic et mettez à jour la version avec une note et le version dans les métadonnées. Enregistrez les modifications et déployez-les.
L'ouverture de l'application devrait maintenant prendre cette nouvelle version, et sa mise à jour appliquerait les modifications apportées à l'interface utilisateur..
Par défaut, Ionic Deploy dispose de trois canaux sur lesquels vous pouvez déployer: dev, mise en scène, et production. Mais vous pouvez également créer de nouveaux canaux pour que votre application écoute les mises à jour. Vous pouvez le faire en cliquant sur l’icône engrenage sur le Déploiement ionique onglet sur le tableau de bord de votre application:
Ceci est utile pour des tests tels que les tests A / B, vous pouvez donc appliquer des modifications spécifiques à des utilisateurs spécifiques uniquement..
N'oubliez pas de mettre à jour votre code pour utiliser ce canal de déploiement spécifique:
this.deploy.channel = 'me';
Si vous avez poussé quelque chose que vous n'auriez pas dû, vous pouvez utiliser la fonction de restauration. Avec cette fonctionnalité, vous pouvez renvoyer une version précédente à vos utilisateurs..
Notez que vous ne pouvez pas réparer le code cassé en revenant en arrière! Par exemple, si vous rencontrez une erreur de syntaxe dans votre code JavaScript, l'application sera entièrement endommagée et le code de vérification des mises à jour ne fonctionnera jamais. Pour résoudre ce type d'erreur, vous ne pouvez publier qu'une nouvelle version sur l'App Store..
Vous pouvez revenir en arrière en cliquant sur le bouton Revenir à ici lien sur un déploiement donné.
Cela vous demandera de confirmer si vous voulez revenir en arrière ou non. Une fois confirmé, il sera automatiquement défini comme la version actuelle. Ainsi, le code de sélection des nouvelles versions le reconnaîtra comme la dernière version et incitera les utilisateurs à se mettre à jour. Les versions annulées auront une icône d'actualisation orange.
Vous pouvez également déployer une version spécifique en cliquant sur le bouton Déployer lien à côté de la version que vous souhaitez déployer.
Vous pouvez automatiser le déploiement de mises à jour d'applications sur Ionic Deploy avec des hooks Git. Les hooks Git vous permettent d'exécuter des scripts avant ou après des événements Git spécifiques tels que commit, push et receive. Dans ce cas, nous utiliserons le pré-push crochet pour télécharger nos modifications dans Ionic Cloud juste avant la git push la commande fait sa chose.
Commencez par renommer l'échantillon pré-push script au nom actuel reconnu par Git:
mv .git / hooks / pre-push.sample .git / hooks / pré-push
Ouvrez le fichier dans votre éditeur de texte et remplacez son contenu par ce qui suit:
#! / bin / sh echo demande maintenant des modifications pour le téléchargement ionique de déploiement ionique
Maintenant, validez vos modifications et placez-les dans un dépôt distant:
git add. git commit -m "fais quelques changements ..." git push origin master
Juste avant le git push la commande est exécutée, téléchargement ionique sera exécuté.
Vous pouvez également déployer automatiquement la version si vous voulez:
#! / bin / sh echo demande maintenant des modifications à Ionic deploy upload ionic --deploy dev
Cela ne fonctionnera pas pour notre exemple, car vous ne pouvez pas spécifier de métadonnées.!
Si vous souhaitez aller plus loin dans le processus de déploiement, je vous recommande de consulter l'API HTTP pour Ionic Deploy. Cela vous permet de déployer par programme les modifications apportées à votre application à partir de votre serveur d'intégration continue. Il vous permet également de mettre à jour les numéros de version et les métadonnées de vos déploiements. Tout cela peut être fait automatiquement et sans jamais toucher le tableau de bord de l'application Ionic.
C'est tout! Dans ce didacticiel, vous apprendrez à utiliser Ionic Deploy et à vous en servir pour envoyer des mises à jour à votre application Ionic. Il s'agit d'une fonctionnalité puissante qui vous permet de créer un système de gestion de versions et de mises à jour robuste dans votre application..
Restez à l'écoute pour plus de contenu sur les services Ionic et sur le cloud, comme Ionic Deploy! Si vous souhaitez une introduction complète à la mise en route du développement d'applications Ionic 2, consultez notre cours ici sur Envato Tuts+.
Et consultez quelques-uns de nos autres articles sur le développement d'applications mobiles multiplate-formes et ioniques.
