Share via

  • Article

Avril 2016

Volume 31 numéro 4

Cet article a fait l'objet d'une traduction automatique.

Mobile Apps : utilisation de Ionic et TACO pour créer des applications mobiles interplateformes

Par Adam Tuliper | Avril 2016

Il existe de nombreux flux de travail disponibles pour développer et déployer des applications multiplateformes, ce qui signifie qu'il n'est pas toujours facile à choisir. Non seulement vous pouvez être bloquée sur les technologies de développement à utiliser, mais le processus de développement et la production entier est encore plus simple. Vous pouvez développer en mode natif sur chaque plate-forme mobile, ce qui vous oblige à être assez qualifiés avec c#, Objective-C/Swift, Java et parfois C++. Ou vous pouvez choisir des outils interplateforme tels que Apache Cordova ou Xamarin. Test bêta est encore un autre problème, comme vous pouvez côté charge applications (pénibles au-delà de quelques utilisateurs), utilisez spécifique à la plateforme de test bêta des solutions de distribution, telles que l'utilisation des codes de promotions sur les appareils Windows 10, TestFlight sur iOS, les groupes sur Google Play ou plateformes telles que HockeyApp. Il existe de nombreuses façons d'obtenir un résultat final semblable, mais par le biais des voyages très différentes.

Dans cet article, je prendrons un coup de œil à un flux de travail pour créer des applications multiplateformes qui inclut l'installation des outils, développement, débogage, les mises à jour et déploiement (production ou bêta). Ce flux de travail utilise l'infrastructure d'application mobile Ionic HTML5, les outils pour Apache Cordova (à TACO à) des outils de ligne de commande CodePush et Code de Visual Studio, et elle permet une intégration étroite à Visual Studio. Je me concentrerai sur la ligne de commande et sur le flux de travail Visual Studio Code, car il s'agit essentiellement le même sur Mac OS, Linux et Windows à l'aide des mêmes outils. Il est souhaitable dans les outils pour le Code de Visual Studio ou Visual Studio, il est le mieux sur le marché pour développer et déboguer les applications Cordova, bien que je souhaite souligner les projets sont totalement interopérables entre les systèmes d'exploitation (Mac OS, Linux, Windows), commande des lignes (Ionic, Cordova, etc.) et les outils (Code de Visual Studio ou Visual Studio). Les outils de Visual Studio installe tous les kits de développement requis automatiquement et vous courez de débogage Windows native et Android.

Si vous êtes un développeur Web pour faire du développement d'applications interplateforme et sont nouveaux pour Apache Cordova, je vous recommande de prise en main de l'article, « Écriture inter-plateformes hybride applications dans Visual Studio avec Apache Cordova » (msdn.com/magazine/dn879349), afin d'obtenir une vue d'ensemble du fonctionne de l'infrastructure.

Outils pour Apache Cordova (à TACO à)

À TACO à est une suite de produits conçus pour faciliter le développement plus rapide et plus productive. Il existe plusieurs points de terminaison lors du développement d'une application Apache Cordova. Le chemin d'accès de Visual Studio installe tous les SDK requis et des outils tiers, y compris un émulateur avancé pour Android. Si vous travaillez sur le développement multiplateforme, une extension Visual Studio Code utile vous fournit des fonctionnalités telles qu'IntelliSense et le débogage à partir de Code Visual Studio. Il existe également un ensemble d'utilitaires de ligne de commande appelé CLI à TACO à que vous pouvez utiliser pour l'installation des kits de développement logiciel tiers si vous préférez le chemin d'accès de ligne de commande. Ces outils fonctionnent avec n'importe quel projet compatible avec Cordova (Ionic, PhoneGap et bien plus encore). Je vais installer maintenant à TACO à-CLI afin qu'il soit disponible plus tard lorsque j'en ai besoin :

#install taco one time (**this requires Node to be installed **)
npm install taco-cli –g

Lorsque vous ajoutez une plateforme à une application Apache Cordova via les commandes suivantes (qui en fait la même chose en fonction de la ligne de commande que vous utilisez), que vous configurez uniquement le projet pour cette plate-forme ; la commande ne fait rien sur la vérification des ou installation des kits de développement logiciel requis :

cordova platform add android
#or
ionic platform add android
#or
taco platform add android

La plateforme Android, par exemple, requiert que les dépendances associées telles que le Kit de développement logiciel Android, Gradle et Java, qui ne sont pas ajoutées par les outils de ligne de commande Ionic ou Cordova, mais peuvent être ajoutés à partir d'à l'intérieur d'un projet existant en exécutant :

taco install-reqs android

Cette commande installe Java et Android, ainsi que l'intégration Gradle et prise en charge Android Debug Bridge (adb).

Développement et débogage

Si vous travaillez inter-plateformes, Visual Studio Code a des outils qui vous permet de déboguer à partir d'un émulateur ou un droit sur un périphérique, comme indiqué dans Figure 1. Vous vous contentez d'avec le bouton droit sur un dossier, puis sélectionnez Ouvrir avec Code Visual Studio, ou utiliser fichier | Ouvrez le dossier. Vous pouvez faire cela avec n'importe quelle application interplateforme Cordova ; Il n'y a rien de spécifique de Visual Studio sur cette étape et vous permet rendre le flux de travail propre, tout à fait une fonctionnalité très utile lorsque vous travaillez avec une équipe à l'aide d'autres plates-formes et outils.

Débogage de code de Visual Studio
Figure 1 débogage à partir de code de Visual Studio

Il vous suffit pour installer cette extension consiste à afficher la Palette de commandes via CTRL-MAJ-p et tapez :

ext install cordova

Pour déboguer votre application, passez simplement à l'affichage de débogage (via l'icône ou CTRL + MAJ + D) et choisissez la cible de débogage (comme dans Figure 1) et cliquez sur lire. Cela suppose que vous avez déjà installé les kits de développement spécifiques à la plateforme manuellement ou via à TACO à installer-reqs.

Si vous aimez Visual Studio, vous pouvez également travailler avec des dossiers de projet existants, tels que ceux à partir des outils de ligne de commande, en exécuter simplement le fichier | Nouveau | Projet à partir de Code existant. Notez que ceci ajoute uniquement un fichier .jsproj et taco.json dans votre dossier, c'est tout. Vous pouvez ensuite heureusement utiliser à partir de Visual Studio pendant que votre Mac OS et les développeurs Linux partagent le même référentiel et utilisent le Code de Visual Studio, la ligne de commande et ainsi de suite. Tout cela fonctionne bien ensemble. Bien sûr, vous pouvez créer un nouveau projet Apache Cordova, également, à partir du fichier | Nouveau projet et qui fonctionne également inter-plateformes. Il est un monde harmonieux, non ?

Qu'en est-il IntelliSense ? Dans Visual Studio, vous pouvez installer le Pack Ionic à partir de la droite de la galerie d'extensions dans Visual Studio ou à partir de bit.ly/1Vq4dIo. Pour obtenir des extraits de code, la validation et IntelliSense. Code Visual Studio contient IntelliSense pour Ionic une fois que vous installez l'Extension d'outils Cordova.

L'infrastructure Ionic

Ionic est une infrastructure CSS et une bibliothèque JavaScript UI, éventuellement associé à un système de génération. Il s'exécute généralement sur Apache Cordova, l'infrastructure open source inter-plateformes JS/HTML/CSS application native. Vous entendez généralement de Ionic utilisé avec Cordova, mais qui n'est pas nécessaire ; par exemple, extraire certaines des plumes au code CodePen.io/ionic; Ionic est simplement HTML, CSS, JavaScript et les images.

Un des défis liés à la création d'applications mobiles convaincantes est de s'assurer qu'ils recherchent et exécuter conformément aux règles de conception pour chaque système d'exploitation: les règles de conception de matériel pour Android ; les instructions de l'expérience utilisateur pour les applications Universal Windows Platform (UWP) et les indications de l'Interface humaine pour iOS. Si vous développez les applications line-of-business ou des jeux, les utilisateurs ont des attentes concernant le comporte d'une interaction. Si vous le constater, il existe des micro-interactions que vous utilisez quotidiennement dans les périphériques, les appareils et les autres éléments dans votre vie.

Micro-interactions dans une application mobile peuvent être aussi simples que le glissement de l'écran dans une direction particulière pour exécuter une action, l'extraction pour actualiser, « plébisciter » sur une page de médias sociaux ou l'affichage d'un compteur. Comment gérez-vous ces de manière spécifique à la plate-forme ? Ionic se charge de certaines de ces informations automatiquement. Par exemple, il détecte si vous êtes sur iOS ou Android et que vous utilisez le compteur de style CSS approprié ressemble à celle qui spécifique à la plateforme, comme indiqué dans Figure 2. Balises Ionic pour un compteur sont les balises HTML personnalisées qui ressemblent à ce qui suit :

 

<ion-spinner></ion-spinner>

Compteurs Android et iOS
Figure 2 Android et iOS compteurs

Figure 3 montre l'exemple de code pour une liste d'aspect natif à l'aide de HTML et CSS dans Ionic. Cela donne à son tour la partie supérieure et aspect natif de l'application illustrée Figure 4.

Figure 3 aspect natif liste créée dans Ionic à l'aide de HTML

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>
  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>
  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>
</div>

Une liste d'aspect natif créée dans Ionic
Figure 4 un aspect natif liste est créé dans Ionic

Démarrage

Une application Ionic est simplement une page Web empaquetée localement dans une application Cordova. Il existe des balises HTML personnalisés que vous pouvez le voir, ainsi que des styles CSS de plateforme spécifique. Ionic applications sont appuient sur angulaire. Nous allons créer une simple application Ionic et découvrez sa structure. Si vous êtes familiarisé avec angulaire, il s'agit d'un jeu d'enfant. Si ce n'est pas le cas, il est assez facile à comprendre ce qui se passe à partir d'un niveau élevé. Pour utiliser l'interface de ligne de commande (cli) Ionic, vous devez avoir npm installée (disponible lorsque vous installez Node.js à partir de Nodejs.org) et de Git Git-SCM.com.

Si vous voulez simplement utiliser Ionic dans une application autonome, vous pouvez simplement l'installer via bower :

bower install ionic

Les utilisateurs de Visual Studio peuvent tirer parti du modèle Ionic (géré par l'équipe Visual Studio) disponibles dans la galerie Visual Studio sous Outils | Les extensions et mises à jour. Ionic a sa propre interface de ligne de commande (CLI), ce qui rend très facile à utiliser, et elle s'appuie sur Cordova, nous allons Explorer cet itinéraire et créer une application à partir de la ligne de commande Ionic :

#install ionic and cordova (once) and create the app(s)
npm install-g ionic cordova
#create a new app using the tabs template
#Could be one of several templates – run the command:
#ionic templates
#or specify url of a custom template
ionic start myIonic tabs
cd myIonic
#add platform support to the project
ionic platform add android
ionic platform add ios

Je n'ai pas le SDK Android installé de sorte que je ne peux pas encore l'exécute. Mais il est facile d'installer l'interface CLI à TACO à-, je vais donc faire et puis lancez l'émulateur. N'oubliez pas qu'à TACO à offre beaucoup plus qu'une interface CLI, comme indiqué précédemment. Je souhaite également remarquer que le Ionic, à TACO à et lignes de commande de Cordova peuvent travailler ensemble :

#install JAVA, Android SDK, Gradle, and so forth if they don’t yet exist
taco install-reqs android
#run in the browser
ionic serve
#run in an emulator
ionic emulate android

Qu'en est-il des e/s ?

Pour iOS, vous pouvez déboguer et exécuter votre application Apache Cordova à l'aide de Code Visual Studio ou Visual Studio. Vous devez avoir accès à un Mac à un moment donné si vous souhaitez exécuter l'application sur un périphérique ou dans le simulateur d'Apple, de sorte que si vous êtes sous Mac OS, vous pouvez exécuter et déboguer directement à partir de Code Visual Studio comme indiqué précédemment pour lancer sur un périphérique ou dans le simulateur.

Si vous préférez développer sous Windows, vous disposez de plusieurs options. Si vous utilisez Visual Studio, vous pouvez utiliser le simulateur Apache Ripple sur Windows (bit.ly/1QOqXxK) tel qu'il est configuré dès le départ pour simuler iOS (voir Figure 5). Si vous souhaitez exécuter et déboguer dans le simulateur d'Apple (sur OS X) ou sur un appareil iOS, vous aurez besoin d'un Mac avec Xcode installé et l'agent à distance est installé sur le Mac que c'est le cas de Visual Studio ou Visual Studio Code puisse communiquer avec lui, comme indiqué sur bit.ly/1XC36H3. Vous pouvez obtenir un abonnement de Parallels trois mois pour exécuter Windows sur votre Mac à partir d'Essentials de développement Visual Studio. Enfin, vous pouvez utiliser un des différents services cloud Mac telles que MacInCloud et exécuter dans le cloud, comme illustré à bit.ly/1QOrYpz.

iOS Options d'exécution/débogage dans Visual Studio
Figure 5 iOS Options d'exécution/débogage dans Visual Studio

Comme mentionné, vous devrez Xcode installé sur votre Mac, mais si vous utilisez l'installation à TACO à-impératifs, cette commande sera également installer ios-sim, qui permet de lancer le simulateur iOS à partir de la ligne de commande, et utiliser ios-déployer pour installer et déboguer des applications sur des appareils iOS en dehors de Xcode.

Chargement dans le Code de Visual Studio

À ce stade, j'ai un dossier d'application qui a été créé par Ionic. Il s'agit d'une application Cordova. Je peux charger le Code de Visual Studio ou Visual Studio et faites-le pointer vers ce dossier et commencer à l'utiliser. Je pourrais maintenant, accédez à l'onglet débogage dans Visual Studio Code, choisissez une cible et commencez le débogage, comme illustré dans Figure 1.

Maintenant examinons la structure de l'application. Index.HTML est la page principale et charge Ionic et angulaire. Vous remarquerez rapidement que Ionic utilise des balises personnalisées, telles que < ion-nav-vue >, mais plus de ceux sous peu. Index.HTML est la page racine qui héberge les autres éléments de contenu distribué via angulaire. Ionic se compose de deux références, les css et le js, qui a angulaire avec :

 

<!-- compiled css (from sass) output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic & angularjs bundled together js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

Figure 6 affiche la balise body index.html. Le flux de cette application est contrôlée par l'URI. Ces URI sont enregistrés dans JavaScript, comme indiqué dans Figure 7. Si vous êtes un développeur MVC, vous pouvez les considérer comme vos itinéraires. Figure 7 indique simplement un segment ici que vous allez étendu ultérieurement. Comme vous pouvez le voir, les deux URL sont gérés ici : /tab et/onglet/dash. Ce qui est chargé lorsque l'application charge ? La fonction $urlRouterProvider.otherwise fournit une valeur par défaut de l'onglet / / tiret, donc lorsque vous démarrez avec index.html, vous traitez également dash/onglet.

Figure 6 la balise Body de Index.Html

<body ng-app="starter">
  <!--
    The nav bar that will be updated as we navigate between views.
  -->
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <!--
    The views will be rendered in the <ion-nav-view> directive below
    Templates are in the /templates folder (but you could also
    have templates inline in this html file if you'd like).
  -->
  <ion-nav-view></ion-nav-view>
  </body>

App.js figure 7 qui contient l'interface utilisateur angulaire routeur

// app.js
// ..
  $stateProvider
// Setup an abstract state for the tabs directive
.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:\
.state('tab.dash', {
   url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})
// Extra code removed for brevity...
// If none of the above states (urls)
// are matched, use this as fallback
$urlRouterProvider.otherwise('/tab/dash');

Le premier URI est marquée comme abstrait, ce qui signifie qu'il accèdera jamais directement à l'attente. Il est utilisé, cependant, chaque fois qu'un de ses enfants sont accessibles. La valeur par défaut étant /tab/dash, alors les deux vues de traitement pour ces URI. Une application Cordova ne s'exécute dans un navigateur Web, un affichage Web, mais il n'existe aucun URI exposé, un utilisateur doit taper dans. Cette navigation est entièrement gérée via href ou JavaScript. Les États définissent les éléments HTML à afficher pour un URI, ainsi que le contrôleur gère la logique métier.

Le fichier./js/controllers.js dans ce modèle contient la logique métier rudimentaire liée à chaque combinaison de modèle d'URI. La variable $scope sert simplement à attribuer les données utilisées par les modèles. Si j'avais pour renvoyer des informations client, il suffirait d'utiliser :

$scope.customer = { "firstName": "John" };

En gardant cette simplicité l'esprit, voici les données de contrôleur affectation ChatDetail à partir d'un service de conversation défini dans services.js et, dans le deuxième exemple, le contrôleur de l'affectation d'un objet JSON dans une variable appelée paramètres, que je peux lier dans mon modèle :

// controller.js
angular.module('starter.controllers', [])
// ...code omitted for brevity
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})
.controller('StorageCtrl', function($scope) {
  $scope.settings = {
    enableCloudStorage: true
  };
});

L'interface d'onglet par défaut est constitué de deux modèles, l'onglet interface (/tab) et selon les vues trois enfant onglets-HTML contient, en fonction des choix de l'utilisateur. Le code HTML pour l'interface est indiqué dans Figure 8. Notez que j'utilise ion-onglets et ion-onglet pour définir le contrôle des onglets et un onglet individuel, puis ion-nav-vue d'héberger les vues enfant réel.

Figure 8 HTML pour l'Interface d'onglet par défaut

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse"
    icon-on="ion-ios-pulse-strong"
    href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>
  <!-- Chats Tab -->
  <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline"
    icon-on="ion-ios-chatboxes"
    href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>
  <!-- Storage Tab -->
  <ion-tab title="Storage" icon-off="cloud-outline" icon-on="cloud"
    href="#/tab/storage">
    <ion-nav-view name="tab-storage"></ion-nav-view>
  </ion-tab>
</ion-tabs>

Il s'agit de la vue de tiret-onglet par défaut affichée lorsque l'application charge. Il est restitué à l'intérieur de l'onglet-tiret < ion-nav-vue > mentionné précédemment :

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
    <p>
    This is the Ionic starter...
    </p>
  </ion-content>
</ion-view>

Ionic comprend également la navigation entre les affichages. Si vous exécutez cela dans un navigateur et cliquez sur précédent, vous accédez à l'affichage précédent. Si vous êtes en cours d'exécution sur un appareil Windows Phone ou Android et utilisez le bouton précédent, vous devez également accéder à l'affichage précédent. Ce paramètre est configuré à l'intérieur de Index.html :

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

Spécifique à la plateforme CSS

Il reste encore quelques opérations spécifiques à la plateforme à effectuer, par exemple pour déterminer les icônes à afficher, mais pour ce que je dois savoir la plateforme sur laquelle j'exécute. Il existe plusieurs façons de détecter. Je pourrais utiliser JavaScript à partir de l'appareil par défaut cordova-plug-in utilisant device.platform, mais que signifie être coincé avec de nombreux if/else logique pour afficher des icônes. Rappelez-vous que ces applications sont composées de pages Web. Je ne veux pas son simpliste, étant donné que « simplement des pages Web » peuvent exécuter des applications 3D complet à près de vitesses natifs (par exemple, WebGL), mais dans ce cas, étant donné que j'utilise simplement HTML/CSS/JS, je peux style de votre application avec juste CSS. Ionic fournit une bibliothèque nommée Ionicons, disponible à l'adresse Ionicons.com. Et extraction sans aucun doute la triche feuille à Ionicons.com/cheatsheet.html.

Lorsque vous générez pour une plateforme de génération cordova en cours d'exécution < plate-forme >, une modification qui se produit est que l'élément < body > Obtient une classe CSS supplémentaire pour cette plateforme. Par exemple, si vous exécutez sur un Android, la balise body sera une variante du :

<body class="platform-android">

Vous pouvez utiliser cela à votre avantage pour afficher des icônes de spécifique à une plateforme à l'aide d'une combinaison du langage de feuille de style Sass et icônes Ionic. La commande suivante configure mon application Ionic avec Sass :

#tell Ionic to configure/create Sass and make the .scss file
ionic setup sass

Si vous utilisez Visual Studio, cette étape fonctionne, mais veillez à configurer tout d'abord Task Runner Explorer pour exécuter la tâche de choses pour compiler le Sass CSS. Ne savez pas quel choses ou la Task Runner Explorer est ? Consultez mon article sur Grunt et Gulp à msdn.com/magazine/mt595751.

Si vous souhaitez que Visual Studio pour compiler automatiquement votre inférieur, fichiers Sass, CoffeeScript, JSX, ES6 et de stylet dans vos projets Web, vous pouvez utiliser l'extension du compilateur Web pour les traiter. Rechercher à l'adresse bit.ly/1O0LP3x. Cela n'est pas nécessaire ici parce que je vais utiliser les choses, mais les deux méthodes fonctionnement.

Maintenant nous allons ouvrir le fichier./scss/ionic.app.scss et ajoutez dans certains Sass. Il est chargé d'informations disponibles sur Sass, mais la seule chose à noter ici est qu'il vous permet de faire des choses avec CSS qui autrement nécessiterait un peu plus de texte à accomplir. Si je veux une icône spécifique à la plateforme cloud s'affiche et une icône par défaut lorsqu'il n'est pas une plateforme spécifique, je peux modifier le fichier .scss pour ajouter le code indiqué dans Figure 9.

Figure 9 à l'aide de Sass pour définir des icônes de spécifique à la plateforme Cloud

// Handle any platform not defined
.cloud{
  @extend .ion-ios-cloud
}
.cloud-outline{
    @extend .ion-ios-cloud-outline
}
// Android-specific
.platform-android {
  .cloud{
    @extend .ion-android-cloud
  }
  .cloud-outline{
    @extend .ion-android-cloud-outline
  }
}
// iOS-specific
.platform-ios .platform-win32{
  .cloud {
    @extend .ion-ios-cloud
  }
  .cloud-outline{
    @extend .ion-ios-cloud-outline
  }
}

Ensuite, je peux manuellement déclencher la tâche de choses pour cela et exécutez-le :

#compile sass
gulp sass
Using gulpfile ~\myIonic\gulpfile.js
[11:28:24] Starting 'sass'...
[11:28:26] Finished 'sass' after 2.1 s
#now run it!
ionic emulate android

Une chose que vous pouvez voir immédiatement est la position de l'onglet spécifique à la plateforme, illustrée Figure 10. Aucune modification de code requis pour cela, il s'agit de fonctionne Ionic. Une autre modification, quoique très légère, est la différence entre l'icône du cloud. En raison de la modification CSS simple, je suis rendu spécifique à la plateforme des icônes pour chaque plateforme.

Ionic sur Android et iOS
Ionic figure 10 sur Android et iOS

Les mises à jour de l'Application

Les applications sont des services. En d'autres termes, si vous souhaitez garantir une Communauté intègre autour de vos applications, vous ne déployer une seule fois et oublient de les concernant. Vous devez actualiser en permanence pour fournir des correctifs et fonctionnalités. Une très bonne raison choisir les applications Cordova sur des applications entièrement natives est que vous pouvez fournir des mises à jour hors du magasin. Approbations d'application sur iOS peuvent, par exemple, prendre des semaines. Que faire si vous avez un nouveau bogue ou une fonctionnalité qui doit passer immédiatement ?

CodePush est un service Microsoft qui permet des mises à jour de la sortie de la banque pour les applications tant qu'il n'existe aucune modification de code natif dans les applications Cordova (ce qui seraient généralement d'ajouter de nouveaux plug-ins). Vous pouvez modifier les ressources telles que le HTML, CSS et JavaScript et créer une nouvelle version. Les versions de vos applications sont stockées dans Microsoft Azure et entièrement gérées par CodePush sans que vous ayez à vous soucier de n'importe quelle infrastructure. Nous allons examiner les étapes requises pour appliquer une version de mon application Android Ionic le cloud :

npm install -g code-push-cli
code-push register
code-push app add myIonic

Ces commandes permettent une clé de déploiement CodePush, que vous pouvez ajouter à la fin du fichier /config.xml à l'aide d'un élément < platform > :

<widget id="com.ionicframework.myionic594688" version="0.0.1"
  xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <!-- other config removed for brevity -->
  <platform name="android">
    <preference name="CodePushDeploymentKey"
      value="YourKeyGeneratedInPriorStep" />
  </platform>
  <platform name="ios">
    <preference name="CodePushDeploymentKey"
      value="YourKeyGeneratedInPriorStep" />
  </platform> 
</widget>

Maintenant, vous devez simplement indiquer CodePush pour rechercher des mises à jour et synchroniser les modifications. Si les modifications sont détectées, elles sont téléchargés et mis à jour au lancement suivant de l'application. Il existe des méthodes synchrones et asynchrones pour vérifier, mais je vais conserver brièvement ici avec la synchronisation. Dans JavaScript, il est un emplacement intéressant pour vérifier les mises à jour pour mon application lorsque les APIs Cordova sont prêts. En règle générale, dans les applications Cordova vous savez que vous êtes prêt à se connecter à deviceready :

window.addEventListener('deviceready', {})

Étant donné que j'utilise Ionic, il écoute l'événement deviceready et, à son tour, appelle $ionicPlatform.ready, qui est déjà fourni dans le modèle dans le fichier app.js. Je dois simplement ajouter une ligne de code pour la synchronisation avec CodePush :

// app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    window.codePush.sync();
    // ...
  });
})

J'ai apporté une petite mise à jour HTML dans le fichier /templates/tab-dash. Pour libérer cette modification, simplement poser Cordova afin de le préparer, puis CodePush il. Tout d'abord j'ai besoin de la version de l'application qui est indiquée dans le /config.xml :

<widget id= "com.ionicframework.myiconic594688" version= "0.0.1"

Ensuite, je vais faire les whopping deux étapes pour préparer et transmettre cette modification pour le service CodePush :

#get my app ready (makes changes only in the /platforms folders)
#we could also cordova prepare or taco prepare – all do the same thing
ionic prepare
#push this release up to the cloud
#we use /assets as those are the prepared html/js/css files
code-push release myIonic ./platforms/android/assets/www 0.0.1 --deploymentName Production

À présent, lorsque l'application est lancée à partir de Code Visual Studio, je peux voir l'application de la vérification des mises à jour dans la Console de débogage de Visual Studio Code :

Debug Console
Launching for android (This may take a while)...
App successfully launched
Attaching to android
Forwarding debug port
Attaching to app.
[CodePush] An update is available.
[CodePush] Downloading update package ...
[CodePush] Package download
[CodePush] Installing update package ...
[CodePush] First update: back up package information skipped.
[CodePush] Install succeeded.

Et voilà ! Dans cette configuration, il faut deux lancements de l'application pour réaliser les modifications. La première télécharge les mises à jour lors de la nouvelle build sur CodePush est détectée au démarrage ; la deuxième fois, l'application est lancée avec les mises à jour. Notez que ce flux de travail entier peut être utilisée en production ou de test. Tout ce dont j'ai avez débattu fonctionne correctement dans l'émulateur, ainsi que live et voir les résultats dans mon émulateur Android.

Synthèse

Le flux de travail que j'ai abordés implique le développement, la préparation et l'envoi de vos applications vers le service CodePush. Si vous êtes un passionné de déploiement continu, il est un flux de travail complet présenté au bit.ly/1QpydG4. Ce flux de travail présente en outre des déploiements à partir de Visual Studio Team System et l'utilisation de HockeyApp pour gérer la distribution de la version bêta (crash commentaires utilisateur et de création de rapports, trop!). Si vous êtes en espérant immédiatement opérationnels, Subhag Oak a un atelier autonome utile, vous trouverez sur bit.ly/1QpCwBt.

Angulaire et Ionic ont les nouvelles versions majeures dans les travaux qui sont désormais disponibles pour la récupération (2.x pour chacun d'eux). C'était un peu tôt pour aborder les ici car ils n'ont pas été lancés depuis la rédaction de cet article.

Cela a été maintenant une présentation rapide de l'une des zones plus intéressantes du développement d'applications mobiles. Consultez les ressources suivantes pour obtenir une documentation excellente et à conserver sur les modifications à venir :

Prochaine fois !

Adam Tuliperest développeur technique senior chez Microsoft vivant dans SoCal ensoleillé. Il est un développeur de développement/jeu Web Pluralsight.com auteur et les amoureux de tech ultra-rapide. Le trouver sur Twitter : @AdamTuliper ou channel9.msdn.com/Blogs/AdamsGarage.

Remercie les experts techniques Microsoft suivants pour avoir relu cet article : Oak subhag, Ricardo Minguez Pablos et Ryan Salva