2016-04-19

Abril de 2016

Volumen 31, número 4

Aplicaciones móviles: uso de Ionic y TACO para crear aplicaciones móviles multiplataforma

Por Adam Tuliper | Abril de 2016

Hay muchos flujos de trabajo disponibles para el desarrollo y la implementación de aplicaciones multiplataforma, lo que implica que no siempre es fácil elegir uno. No es solo que decidir qué tecnología de desarrollo usar pueda suponer un obstáculo, sino que todo el flujo de trabajo de desarrollo a producción es aún más confuso. Puede desarrollar de forma nativa en cada plataforma móvil, lo que requiere que disponga de grandes habilidades de C#, Objective-C/Swift, Java y en ocasiones C++. O bien, puede optar por herramientas multiplataforma como Apache Cordova o Xamarin. Las pruebas beta son otro problema, ya que puede usar instalaciones de prueba de las aplicaciones (una tarea compleja cuando hay más de dos usuarios), soluciones de distribución de pruebas beta específicas de la plataforma, como por ejemplo el uso de códigos promocionales en dispositivos de Windows 10, TestFlight en iOS, grupos en Google Play o plataformas como HockeyApp. Existen muchas maneras de llegar a un resultado final similar, pero a través de caminos muy distintos.

En este artículo, se examinarán los flujos de trabajo para crear aplicaciones multiplataforma que incluyan instalación de herramientas, desarrollo, depuración, implementación (de producción o beta) y actualizaciones. Este flujo de trabajo usa el marco de aplicaciones móviles de HTML5 Ionic, las herramientas de la línea de comandos Herramientas para Apache Cordova (TACO), CodePush y Visual Studio Code, y se puede integrar correctamente en Visual Studio. Me centraré en la línea de comandos y el flujo de trabajo de Visual Studio Code, ya que son esencialmente iguales en Mac OS, Linux y Windows con las mismas herramientas. Sin lugar a dudas, preferirá las herramientas para Visual Studio Code o Visual Studio, ya que son las mejores en el mercado para el desarrollo y la depuración de aplicaciones basadas en Cordova, aunque cabe destacar que los proyectos pueden interoperar completamente entre sistemas operativos (Mac OS, Linux, Windows), líneas de comandos (Ionic, Cordova, etc.) y herramientas (Visual Studio Code o Visual Studio). Las herramientas para Visual Studio instalan automáticamente todos los SDK necesarios y establecen la configuración para la depuración nativa de Windows y de Android.

Si usted es un desarrollador web que quiere hacer desarrollo de aplicaciones multiplataforma y no ha usado antes Apache Cordova, le recomiendo que comience por el artículo "Escriba aplicaciones híbridas entre plataformas en Visual Studio con Apache Cordova" (msdn.com/magazine/dn879349), para obtener una descripción general sobre cómo funciona el marco.

Herramientas para Apache Cordova (TACO)

TACO es un conjunto de productos diseñados para que el desarrollo se realice de forma más rápida y productiva. Existen varios puntos de conexión cuando se desarrolla una aplicación de Apache Cordova. La ruta de Visual Studio instala todos los SDK y las herramientas de terceros necesarios, entre los que se incluye un emulador avanzado para Android. Si trabaja en desarrollo multiplataforma, una extensión realmente útil de Visual Studio Code le ofrece características como IntelliSense y la depuración desde dentro de Visual Studio Code. También hay un conjunto de utilidades de línea de comandos denominado TACO-CLI que puede usar para instalar SDK de terceros si prefiere la ruta de la línea de comandos. Estas herramientas funcionan con cualquier proyecto compatible con Cordova (Ionic, PhoneGap y otros). Ahora instalaré TACO-CLI, para que esté disponible más adelante cuando lo necesite:

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

Cuando se agrega una plataforma a una aplicación de Apache Cordova mediante cualquiera de los comandos siguientes (que básicamente hacen lo mismo, en función de la línea de comandos que utilice), solo se está configurando el proyecto para esa plataforma; el comando no realiza ninguna comprobación ni instalación de los SDK necesarios:

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

La plataforma Android, por ejemplo, requiere dependencias como el SDK de Android, Gradle y Java, que ni Ionic ni las herramientas de la línea de comandos de Cordova instalan, pero se pueden agregar desde dentro de un proyecto existente si se ejecuta lo siguiente:

taco install-reqs android

Esto instalará el SDK de Android y Java, junto con la integración de Gradle y compatibilidad con Android Debug Bridge (adb).

Desarrollo y depuración

Si está trabajando de forma multiplataforma, Visual Studio Code tiene herramientas que permiten depurar desde un emulador o directamente en un dispositivo, como se muestra en la Figura 1. Lo único que debe hacer es clic derecho en una carpeta y seleccionar abrirla con Visual Studio Code, o bien ir a Archivo | Abrir carpeta. Puede hacer esto con cualquier aplicación multiplataforma basada en Cordova; no hay nada que sea específico de Visual Studio en este paso y así se permite que el flujo de trabajo sea propio, lo que resulta una característica interesante cuando se trabaja con un equipo que utiliza otras herramientas y plataformas.

Figura 1. Depuración desde dentro de Visual Studio Code

Lo único que debe hacer es instalar esta extensión para que aparezca la paleta de comandos (cuando presione Ctrl+Mayús+P) y escribir:

ext install cordova

Para depurar la aplicación, simplemente cambie a la vista de depuración (a través del icono o presionando Ctrl+Mayús+D), elija el destino de depuración (como en la Figura 1) y haga clic en Ejecutar. En estas indicaciones se presupone que ya ha instalado los SDK específicos de la plataforma, bien de forma manual o bien mediante el comando taco install-reqs.

Si le encanta Visual Studio, también puede trabajar con carpetas de proyectos existentes, como las de herramientas de la línea de comandos, simplemente seleccionando Archivo | Nuevo | Proyecto a partir de código existente. Tenga en cuenta que esto solo agrega unos archivos .jsproj y taco.json a la carpeta; eso es todo. Después, se pueden usar sin problemas desde Visual Studio mientras los desarrolladores de Mac OS y Linux comparten el mismo repositorio y utilizan Visual Studio Code, la línea de comandos, etc. Todo junto funciona estupendamente. Por supuesto, también puede crear un nuevo proyecto de Apache Cordova desde Archivo | Nuevo proyecto, que de igual manera será multiplataforma. Se trata de un mundo en armonía, ¿verdad?

¿Qué sucede con IntelliSense? En Visual Studio, puede instalar Ionic Pack desde la Galería de extensiones de Visual Studio o desde bit.ly/1Vq4dIo. Obtendrá fragmentos de código, validación e IntelliSense. Visual Studio Code contiene IntelliSense para Ionic cuando se instala la extensión de herramientas de Cordova.

El marco Ionic

Ionic es un marco CSS y una biblioteca de interfaz de usuario de JavaScript, que se combina de forma opcional con un sistema de compilación. Normalmente se ejecuta encima de Apache Cordova, el marco de aplicaciones nativas HTML/JS/CSS multiplataforma de código abierto. Ionic se suele usar con Cordova, pero no es obligatorio; por ejemplo, eche un vistazo a algunas de las contribuciones de CodePen.io/ionic; Ionic es simplemente HTML, CSS, JavaScript e imágenes.

Uno de los desafíos en la creación de aplicaciones móviles que convenzan es asegurar que se representen y tengan un rendimiento acordes con las directrices de diseño de cada sistema operativo: las directrices de diseño de materiales de Android, las directrices de experiencia del usuario en las aplicaciones para la Plataforma universal de Windows (UWP) y las directrices para la interfaz humana de iOS. Tanto si desarrolla juegos como aplicaciones de línea de negocio, los usuarios tienen unas expectativas sobre cómo se debería comportar una interacción. Si lo piensa, existen microinteracciones que usa a diario en los dispositivos, electrodomésticos y otros elementos de su vida.

Las microinteracciones de una aplicación móvil pueden ser tan simples como deslizar el dedo sobre la pantalla en una dirección concreta para realizar una acción, deslizar y soltar para actualizar, dar "me gusta" en la página de una red social o mostrar un icono de carga en curso. ¿Cómo se controlan de una forma específica de la plataforma? Ionic se ocupa automáticamente de algunos de estos detalles. Por ejemplo, detectará si está en iOS o Android y usará el icono de carga con el estilo CSS adecuado para que se muestre como el específico de la plataforma, como puede observar en la Figura 2. Las etiquetas de Ionic para los iconos de carga son etiquetas HTML personalizadas que se parecen a lo siguiente:

<ion-spinner></ion-spinner>

Figura 2. Iconos de carga de iOS y Android

En la Figura 3 se muestra un ejemplo de código para una lista con aspecto nativo que utiliza HTML y CSS en Ionic. Así se consigue como resultado la elegante sección superior con apariencia nativa de la aplicación que se muestra en la Figura 4.

Figura 3. Lista con aspecto nativo creada en Ionic mediante 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>

Figura 4. Lista con aspecto nativo creada en Ionic

Introducción

Una aplicación de Ionic es simplemente una página web empaquetada de forma local en una aplicación de Cordova. Como puede ver, existen etiquetas HTML personalizadas y estilos de CSS específicos de la plataforma. Las aplicaciones de Ionic se crean encima de Angular. Vamos a crear una aplicación de Ionic sencilla y a explorar su estructura. Si está familiarizado con Angular, no tendrá ninguna complejidad. Si no lo está, es bastante fácil comprender lo que sucede a alto nivel. Para usar la interfaz de la línea de comandos (cli) de Ionic, debe tener instalado npm (disponible cuando se instala Node.js desde Nodejs.org) y Git desde Git-scm.com.

Si solo quiere utilizar Ionic en una aplicación independiente, simplemente podría instalarla mediante bower:

bower install ionic

Los usuarios de Visual Studio pueden aprovechar la plantilla de Ionic (que administra el equipo de Visual Studio) que está disponible en la Galería de Visual Studio, en Herramientas | Extensiones y actualizaciones. Como Ionic tiene su propia interfaz de la línea de comandos (CLI), que hace que sea muy fácil de usar, y se basa en Cordova, se analizará esa ruta y se creará una nueva aplicación desde la línea de comandos de 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

El SDK de Android no está instalado y, por tanto, aún no es posible ejecutarlo. Pero es sencillo instalarlo mediante TACO-CLI; se hará así y luego se iniciará el emulador. Recuerde que, como se indicó anteriormente, TACO ofrece mucho más que simplemente una CLI. También me gustaría destacar que las líneas de comandos de Ionic, TACO y Cordova pueden funcionar juntas:

#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é sucede con iOS?

Para iOS, puede depurar y ejecutar la aplicación de Apache Cordova mediante Visual Studio Code o Visual Studio. Si quiere ejecutar la aplicación en un dispositivo o en el simulador de Apple, en algún momento necesitará acceso a un equipo Mac; por tanto, si ya está en Mac OS, puede ejecutar y depurar directamente desde dentro de Visual Studio Code, como se mostró anteriormente para iniciar en un dispositivo o en el simulador.

Si prefiere desarrollar en Windows, tiene varias opciones. Si utiliza Visual Studio, puede usar el simulador Apache Ripple en Windows (bit.ly/1QOqXxK), ya que está configurado directamente para simular iOS (consulte la Figura 5). Si quiere ejecutar y depurar en el simulador de Apple (en OS X) o en un dispositivo iOS, necesitará un equipo Mac que tenga instalados Xcode y el agente remoto, de forma que Visual Studio o Visual Studio Code se puedan comunicar con él, como se describe en bit.ly/1XC36H3. Puede obtener una suscripción de tres meses a Parallels para ejecutar Windows en un equipo Mac desde Visual Studio Dev Essentials. Por último, puede usar uno de los diversos servicios en la nube de Mac, como MacInCloud, y ejecutar en la nube como se muestra en bit.ly/1QOrYpz.

Figura 5. Opciones de ejecución y depuración de iOS en Visual Studio

Como se ha mencionado, es necesario disponer de Xcode instalado en el equipo Mac, pero si usa el comando taco install-reqs, también se instalará ios-sim, que permite iniciar el simulador de iOS desde la línea de comandos, y usar ios-deploy para instalar y depurar aplicaciones en dispositivos iOS sin Xcode.

Carga en Visual Studio Code

En este momento, dispongo de una carpeta de aplicación que creó Ionic. Se trata de una aplicación de Cordova. Puedo cargar Visual Studio Code o Visual Studio, hacer que apunte a esta carpeta y comenzar a trabajar con él. Ahora podría ir a la pestaña de depuración de Visual Studio Code, elegir un destino y comenzar a depurar, como se muestra en la Figura 1.

Echemos un vistazo a la estructura de la aplicación. Index.html es la página principal y carga Ionic y Angular. Rápidamente observará que Ionic utiliza etiquetas personalizadas, como <ion-nav-view>, pero esto se comentará más adelante. Index.html es la página raíz que hospeda el resto de contenidos que se entregan a través de Angular. Ionic consta de dos referencias, css y js, que contienen Angular:

<!-- 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>

En la Figura 6 se muestra la etiqueta body de index.html. El flujo de esta aplicación está controlado por URI. Esos URI están registrados en app.js, como se muestra en la Figura 7. Si es un desarrollador de MVC, puede considerar que son las rutas. En la Figura 7 se muestra solo un segmento que se ampliará más adelante. Como puede ver, se controlan dos direcciones URL aquí: /tab y /tab/dash. ¿Qué se carga cuando se carga la aplicación? La función $urlRouterProvider.otherwise proporciona un valor predeterminado de /tab/dash, de forma que cuando se comienza con index.html, también se procesa /tab/dash.

Figura 6. La etiqueta 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>

Figura 7. App.js que contiene un enrutador de interfaz de usuario de Angular

// 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');

El primer URI está marcado como abstract, lo que implica que nunca navegará directamente a /tabs. Sin embargo, se utilizará cuando se acceda a alguno de sus elementos secundarios. Como el valor predeterminado es /tab/dash, esto provocará que las dos vistas se procesen para estos URI. Una aplicación de Cordova no se ejecuta en un explorador web, sino en una vista web, por lo que no hay un URI expuesto en el que el usuario pudiera escribir. Esta navegación se controla completamente mediante elementos href o JavaScript. Los estados definen qué página HTML se mostrará para un URI, así como el controlador que se ocupará de la lógica de negocios.

El archivo ./js/controllers.js de esta plantilla contiene la lógica de negocios rudimentaria asociada a cada combinación de URI y plantilla. La variable $scope se usa simplemente para asignar datos que las plantillas puedan usar. Si tuviera información de cliente que se debiera devolver, simplemente podría usar:

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

Con esa simplicidad en mente, a continuación se muestra el controlador ChatDetail que asigna datos de un servicio Chat definido en el archivo services.js y, en el segundo ejemplo, el controlador que asigna un objeto JSON a una variable denominada settings que puedo enlazar en mi plantilla:

// 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
  };
});

La interfaz de pestaña predeterminada está compuesta por dos plantillas: la interfaz de pestaña (de /tab) y cualesquiera de las tres pestañas de vistas secundarias que contenga el código HTML, en función de lo que seleccione el usuario. El código HTML de la interfaz se muestra en la Figura 8. Observe como utilizo ion-tabs y ion-tab para definir los controles de pestaña y una pestaña individual, y después ion-nav-view para hospedar las vistas secundarias reales.

Figura 8. Código HTML de la interfaz de pestaña predeterminada

<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>

Esta es la vista tab-dash predeterminada que se muestra cuando se carga la aplicación. Se representa dentro del elemento tab-dash <ion-nav-view> que se indicó anteriormente:

<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 también comprende la navegación entre vistas. Si está ejecutando esto en un explorador y hace clic en Atrás, irá a la vista anterior. Si lo está ejecutando en un dispositivo Android o Windows Phone y usa el botón Atrás, también navegará a la vista anterior. Esto se configura dentro del archivo Index.html:

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

CSS específico de la plataforma

Sin embargo, existen algunas cosas específicas de la plataforma que se deben hacer, como determinar los iconos que se mostrarán, pero para ello, es necesario conocer en qué plataforma se está ejecutando. Existen muchas formas de detectarlo. Se podría usar JavaScript desde el complemento cordova-device predeterminado mediante device.platform, pero eso implicaría el problema de trabajar con bastante lógica if/else para mostrar los iconos. Recuerde, estas aplicaciones están compuestas por páginas web. No quiero sonar simplista, porque "páginas web sencillas" pueden ejecutar aplicaciones en 3D completas a velocidades casi nativas (como WebGL); pero en este caso y debido a que solo utilizo HTML/CSS/JS, puedo aplicar estilo a la aplicación sencillamente con CSS. Ionic ofrece una biblioteca denominada Ionicons, que está disponible en Ionicons.com. Y otro recurso útil que debe consultar es la hoja de referencia que puede encontrar en Ionicons.com/cheatsheet.html.

Cuando compile para una plataforma mediante la ejecución del comando cordova build <plataforma>, un cambio que se produce es que el elemento <body> obtiene una clase CSS adicional para esa plataforma. Por ejemplo, si se ejecuta en un Android, la etiqueta body será una variante de:

<body class="platform-android">

Puede aprovechar esto para mostrar iconos específicos de la plataforma mediante una combinación del lenguaje de hoja de estilos Sass e iconos de Ionic. El comando siguiente configura la aplicación de Ionic con Sass:

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

Si utiliza Visual Studio, este paso funciona, pero asegúrese de configurar primero el Explorador de ejecutores de tareas para que ejecute la tarea Gulp a fin de compilar el código Sass en CSS. ¿No sabe lo que es Gulp o el Explorador de ejecutores de tareas? Eche un vistazo a mi artículo sobre Grunt y Gulp en msdn.com/magazine/mt595751.

Si quiere que Visual Studio compile automáticamente los archivos LESS, Sass, CoffeeScript, JSX, ES6 y Stylus en los proyectos web, puede usar la extensión Web Compiler para procesarlos. Puede encontrarla en bit.ly/1O0LP3x. En este caso no es necesaria porque usaré Gulp, pero cualquiera de los dos métodos funciona.

Ahora, es momento de abrir el archivo ./scss/ionic.app.scss y agregar código Sass. Hay muchísima información disponible sobre Sass, pero lo que se debe destacar es que permite hacer cosas con CSS que, para conseguirlas de otra manera, necesitarían algo más de texto. Si quiero que se muestre un icono de nube específico de la plataforma y un icono predeterminado cuando no haya uno específico de la plataforma, puedo editar el archivo .scss para agregar el código que se muestra en la Figura 9.

Figura 9. Uso de Sass para definir iconos de nubes específicos de la plataforma

// 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
  }
}

Después puedo desencadenar manualmente la tarea Gulp para ello y ejecutarla:

#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

Una cosa que puede observar enseguida es la ubicación de la pestaña específica de la plataforma, que se muestra en la Figura 10. No hizo falta ningún cambio de código para hacerlo, así es cómo funciona Ionic. Otro cambio, aunque muy sutil, es la diferencia en el icono de nube. Por la simple modificación de CSS, represento iconos específicos de la plataforma para cada plataforma.

Figura 10. Ionic en iOS y Android

Proporcionar actualizaciones de la aplicación

Las aplicaciones son servicios. En otras palabras, si quiere garantizar una comunidad adecuada en torno a sus aplicaciones, no debe implementar una vez y olvidarse de ellas. Debería actualizarlas de forma continua para ofrecer correcciones y características. Un motivo muy convincente para elegir aplicaciones de Cordova en lugar de aplicaciones completamente nativas es que puede ofrecer actualizaciones fuera de la tienda. Las aprobaciones de las aplicaciones de iOS, por ejemplo, pueden tardar semanas. ¿Qué puede hacer si tiene una corrección de un problema o una característica que debe estar disponible inmediatamente?

CodePush es un servicio de Microsoft que permite actualizaciones fuera de la tienda para las aplicaciones, siempre y cuando no haya cambios en el código nativo de las aplicaciones de Cordova (que normalmente se producirían al agregar nuevos complementos). Puede cambiar recursos, como el código HTML/CSS/JavaScript, y crear una nueva versión. Las versiones de las aplicaciones se almacenan en Microsoft Azure y se administran completamente mediante CodePush, por lo que no es necesario preocuparse por ninguna infraestructura. Echemos un vistazo a los pasos necesarios para subir una versión de mi aplicación de Ionic de Android a la nube:

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

Estos comandos proporcionan una clave de desarrollo de CodePush, que puede agregar al final del archivo /config.xml mediante un elemento <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>

Ahora solo necesita indicar a CodePush que compruebe si hay actualizaciones y sincronice los cambios. Si se encuentran cambios, se descargan y actualizan en el siguiente inicio de la aplicación. Hay formas sincrónicas y asincrónicas de realizar la comprobación, pero aquí lo haré de forma breve y sencilla con sync. Un buen lugar para comprobar si hay actualizaciones de la aplicación cuando las API de Cordova estén listas es el archivo app.js. Normalmente, en las aplicaciones de Cordova podrá saber si todo está listo mediante un enlace con deviceready:

window.addEventListener('deviceready', {})

Como utilizo Ionic, escuchará el evento deviceready y, a su vez, llamará a $ionicPlatform.ready, que ya se proporciona en el archivo app.js de la plantilla. Solo es necesario agregar una línea de código aquí para sincronizarse con CodePush:

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

He realizado una pequeña actualización al código HTML del archivo /templates/tab-dash. Para publicar este cambio, simplemente le indico a Cordova que lo prepare y que después le aplique CodePush. Primero necesito la versión de la aplicación que se indica en el archivo /config.xml:

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

Después, llevaré a cabo los dos pasos gigantescos para preparar e insertar este cambio en el servicio de 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

Ahora, cuando la aplicación se inicie desde Visual Studio Code, podré ver que la aplicación comprueba si hay actualizaciones en la consola de depuración 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.

Eso es todo. En esta configuración, son necesarios dos inicios de la aplicación para que se adviertan los cambios. El primero descarga las actualizaciones cuando se detecta la nueva compilación de CodePush al inicio; la segunda vez se inicia la aplicación con las actualizaciones aplicadas. Tenga en cuenta que todo este flujo de trabajo se puede usar en producción o en pruebas. Todo lo que he comentado funciona correctamente en el emulador y de forma real, y puedo ver los resultados en el emulador de Android.

Resumen

En el flujo de trabajo que he comentado se incluye el desarrollo, la preparación y la inserción de las aplicaciones en el servicio CodePush. Si es un aficionado de la implementación continua, hay un flujo de trabajo completo que se describe en bit.ly/1QpydG4. Además, este flujo de trabajo describe las implementaciones de Visual Studio Team System y el uso de HockeyApp para administrar distribuciones beta (también se incluyen informes de bloqueos y comentarios de usuarios). Si su objetivo es avanzar lo máximo posible, Subhag Oak tiene un taller independiente muy útil que puede encontrar en bit.ly/1QpCwBt.

Ionic y Angular tienen nuevas versiones principales en proceso (ambas 2.x) que ya están disponibles para probarlas. Era un poco pronto para hablar sobre ellas aquí, ya que en el momento en que estoy escribiendo esto aún no se han publicado.

Este ha sido un paseo por una de las áreas más interesantes del desarrollo de aplicaciones móviles en este momento. Eche un vistazo a algunos de los recursos siguientes para ver una magnífica documentación y para estar al tanto de los próximos cambios:

TACO: taco.tools
Visual Studio Tools para Apache Cordova: taco.visualstudio.com
Sugerencias de rendimiento: bit.ly/24kEaIx
Transiciones nativas para el marco Ionic: bit.ly/1SKFFfm
Blog del equipo de Visual Studio Tools para Apache Cordova Team Blog: bit.ly/1KBpJcH

Hasta la próxima.

Adam Tuliper es un evangelizador técnico sénior de Microsoft y vive en el soleado Sur de California. Destaca como desarrollador web y de juegos, es el autor de Pluralsight.com y le entusiasman todo tipo de tecnologías. Puede encontrarle en Twitter (@AdamTuliper) o en channel9.msdn.com/Blogs/AdamsGarage.

Gracias a los siguientes expertos técnicos de Microsoft por revisar este artículo: Subhag Oak, Ricardo Minguez Pablos y Ryan Salva

Compartir a través de