Advertisement
  1. Code
  2. Ionic

Introducción a Ionic Services: Implementar

by
Read Time:13 minsLanguages:

Spanish (Español) translation by Charles (you can also view the original English article)

Uno de los puntos fuertes de Ionic está en los servicios que ofrece sobre el marco. Esto incluye servicios para autenticar a los usuarios de la aplicación, notificaciones de inserción y análisis. En esta serie, estamos aprendiendo sobre esos servicios mediante la creación de aplicaciones que hacen uso de ellos.

En este post, vamos a echar un vistazo a Ionic Deploy. Este servicio le permite publicar cambios en su aplicación Ionic sin necesidad de volver a compilarla y volver a enviarla a la tienda de aplicaciones. Esto es muy útil para empujar rápidamente correcciones de errores, actualizaciones menores y otros cambios cosméticos en la aplicación. Con la característica "Implementar canales", también puede realizar pruebas A/B introduciendo diferentes cambios de código en diferentes canales de implementación.

Sin embargo, no todos los cambios que desea introducir en la aplicación se pueden insertar mediante Ionic Deploy. Solo los cambios en el html, CSS, JavaScript y los activos en el directorio www se pueden insertar de esta manera. Los cambios binarios, como las actualizaciones de la versión de la plataforma Cordova, los complementos de Cordova (ya sea actualizando los existentes o agregando otros nuevos) y los activos de la aplicación, como el icono y la pantalla de bienvenida, no se pueden insertar con Ionic Deploy.

Cómo funciona

En la aplicación Ionic, puede tener código que comprobará las implementaciones disponibles (actualizaciones). De forma predeterminada, comprobará las implementaciones en el canal de producción. Pero también puede especificar otros canales de los que recibir actualizaciones.

A continuación, puede insertar los cambios mediante el comando ionic upload. Esto cargará sus cambios en Ionic Cloud. Una vez cargados, puede elegir en qué canal desea implementar y si desea implementarlos ahora o en un momento posterior.

La implementación en un canal que la aplicación está supervisando desencadenará la ejecución del código de la aplicación. Ese código es responsable de descargar la actualización, extraerla y volver a cargar la aplicación para aplicar los cambios.

Lo que va a construir

En esta publicación, usará la línea de comandos para insertar los cambios y probar si la implementación funciona como se esperaba. Para mantener las cosas simples, los cambios que vamos a introducir serán principalmente en la interfaz de usuario. Para cada implementación, vamos a cambiar el número de versión que se muestra para la aplicación. También vamos a cambiar la imagen que se muestra en la aplicación para mostrar que los activos también se pueden actualizar.

Configuración

Ahora que tiene una idea de cómo funciona Ionic Deploy y lo que va a construir, es hora de ensuciarse las manos creando realmente una aplicación que use Ionic Deploy. Comience por arrancar una nueva aplicación Ionic:

El comando anterior creará una nueva aplicación con la plantilla de pestañas. Navegue dentro del directorio deployApp una vez que haya terminado de instalar:

A continuación, debe instalar el paquete @ionic/cloud-angular. Esta es la biblioteca de JavaScript para el servicio Ionic Cloud. Nos permite interactuar con el servicio Ionic Deploy y otros servicios de Ionic a través de código JavaScript.

Una vez que haya terminado la instalación, ahora puede inicializar una nueva aplicación Ionic basada en esta aplicación. Antes de hacerlo, asegúrese de que ya tiene una cuenta de Ionic. La herramienta de línea de comandos le pedirá que inicie sesión con su cuenta de Ionic si aún no lo ha hecho.

Esto creará una nueva aplicación llamada "deployApp" (o como quiera que llame a su aplicación cuando arranque una nueva aplicación Ionic) en su panel de aplicaciones Ionic.

Una vez que haya verificado que la aplicación aparece en su panel de control de Ionic, vuelva al terminal e instale el complemento Deploy:

Tenga en cuenta que este plugin es el que realmente hace el trabajo pesado. El paquete @ionic/cloud-angular simplemente expone las API necesarias para trabajar fácilmente con los servicios Ionic dentro de una aplicación Ionic.

Trabajar con implementa

Ahora que ha realizado toda la configuración necesaria, es hora de agregar el código para comprobar y aplicar las actualizaciones. Pero antes de hacer eso, primero sirva la aplicación a través de su navegador:

Esto le permite comprobar si el código que ha agregado funciona o no. De esta manera puede hacer las correcciones necesarias tan pronto como vea un error.

Abra el archivo src/app/app.module.ts. En la importación SplashScreen, importe los servicios necesarios para trabajar con Ionic Cloud:

A continuación, agregue el app_id de su aplicación Ionic. Puede encontrar esto en el panel de control de su aplicación Ionic, justo debajo del nombre de la aplicación.

Una vez que haya agregado eso, ahora puede incluirlo como uno de los módulos de la aplicación:

A continuación, abra el archivo src/app/app.component.ts. Justo debajo de la importación de TabsPage, incluya lo siguiente:

En el constructor(), agregue los servicios que importamos anteriormente:

Establecer el canal de implementación

Dado que todavía estamos desarrollando la aplicación, establezca el canal de implementación para desarrollar

Más adelante, si desea cambiar al canal de producción, simplemente puede quitar esta línea, ya que la producción es el canal predeterminado para las implementaciones. Si ha creado otro canal, también puede incluir su nombre aquí.

Trabajar con instantáneas

Puede acceder a una matriz de instantáneas que la aplicación ha descargado previamente. La variable snapshots es una matriz que contiene los identificadores de cada una de las instantáneas.

Realmente no usaremos instantáneas para esta aplicación, pero es bueno saber que la aplicación está almacenando este tipo de información para su uso posterior. En el ejemplo siguiente, repasaremos la lista de instantáneas antiguas y eliminaremos cada una de ellas para liberar algo de espacio en el dispositivo.

Comprobación de actualizaciones

Para buscar actualizaciones, utilice el método check(). Esto devuelve un valor booleano que indica si una nueva instantánea está disponible o no. De forma predeterminada, la implementación más reciente creará una nueva instantánea. Por lo tanto, solo se aplicará la implementación más reciente si ha insertado dos actualizaciones consecutivamente.

Si una instantánea está disponible para su descarga, puede obtener información adicional sobre ella llamando al método getMetaData(). Estos metadatos se pueden agregar a una implementación a través del panel de la aplicación Ionic. Los pares clave-valor se pueden agregar aquí y cada uno de ellos pasa a estar disponible como una propiedad para el objeto de metadatos. Más adelante, usaremos metadatos para personalizar los mensajes que se muestran en la aplicación cada vez que haya una nueva actualización disponible.

A continuación, muestre un mensaje de alerta de confirmación para que el usuario decida si desea descargar la actualización o no:

Es posible que le preocupe que esto moleste al usuario si continúa recibiendo el mensaje para actualizar su aplicación si sigue respondiendo "No". Sin embargo, más a menudo eso no es algo bueno. No debería haber ninguna razón para que un usuario rechace una actualización si va a mejorar su experiencia.

Descarga y aplicación de actualizaciones

Cuando el usuario está de acuerdo, puede seguir adelante y descargar la actualización. Esto puede tomar un tiempo dependiendo de su conexión a Internet y su dispositivo. Una vez descargada la actualización, muestra un cargador para atraer la atención del usuario mientras se extrae. Una vez extraído, vuelva a cargar la aplicación y oculte el cargador.

Eche un vistazo al aspecto que debería tener el archivo app.components.ts actualizado después de todos esos cambios.

Instalación de la aplicación en el dispositivo

Ahora que se ha agregado el código para comprobar las implementaciones, podemos compilar la aplicación e instalarla en un dispositivo. El resto de los cambios que vamos a introducir se impulsarán principalmente a través del servicio Ionic Deploy.

Siga adelante y agregue la plataforma Android a su proyecto Ionic y compile el archivo .apk con los siguientes comandos:

Esto creará un archivo android-debug.apk dentro de la carpeta platforms/android/build/outputs/apk. Cópielo en su dispositivo e instálelo.

Inserción de cambios

Ahora es el momento de que impulsemos algunos cambios en la aplicación. Para probarlo, solo tienes que realizar algunos cambios menores en la interfaz de usuario de la aplicación. Y ahora puedes subir los cambios:

Agregar metadatos

Una vez que haya terminado de cargar, aparecerá una nueva entrada en su Actividad reciente. Haga clic en el vínculo Editar de esa entrada. Esto le permitirá agregar una nota, información de control de versiones y metadatos a esa versión específica. Siempre es una buena idea agregar una nota para que sepa de qué se trata esa versión específica. Una vez que lo haya hecho, haga clic en la pestaña Metadatos y agregue lo siguiente:

add metadataadd metadataadd metadata

A continuación, haga clic en el botón Guardar para confirmar los cambios. Finalmente, haga clic en el botón Implementar para implementar la versión. Una vez que la aplicación recoge el cambio, los metadatos que proporcionó también están disponibles.

Puede ver que ahora muestra el número de versión de la versión:

version numberversion numberversion number

Control de versiones

A veces, enviará una actualización con Ionic Deploy, pero también reconstruirá y enviará esos paquetes a la aplicación empaquetada en la App Store. Sin embargo, ten cuidado, porque Ionic no sabe que tu aplicación ya contiene esa actualización, y tu aplicación pedirá al usuario que descargue las actualizaciones más recientes la primera vez que se ejecute la aplicación.

La característica de control de versiones puede ayudar a evitar esto. Con la función de control de versiones, puede especificar la versión de la aplicación que puede recibir las actualizaciones:

  • Mínimo: se implementa solo si la versión actual de la aplicación es mayor o igual que esta versión.
  • Máximo: se implementa solo si la versión actual de la aplicación es igual o inferior a esta versión.
  • Equivalente: no realice una implementación si la versión actual de la aplicación es igual a esta versión.

Para agregar información de control de versiones, haga clic en el vínculo EDITAR de una versión específica y, a continuación, vaya a la pestaña CONTROL DE VERSIONES. Desde allí, puede especificar las versiones (iOS o Android) a las que desea dirigirse.

VersioningVersioningVersioning

Lo que hace Ionic es comparar esta versión con la que especificó en su archivo config.xml:

Si la versión de la aplicación se encuentra entre el mínimo y el máximo especificado, se recoge la versión. Y si la versión de la aplicación es igual al valor de versión equivalente, se omite la versión. Por lo tanto, para la captura de pantalla anterior, si la versión indicada en el archivo config.xml es 0.0.1, la aplicación ignorará la versión.

Actualizaciones de activos

El siguiente cambio que vamos a hacer es mostrar una imagen.

Lo primero que debes hacer es encontrar una imagen. Colócalo dentro de la carpeta src/assets/img y vincúlalo desde el archivo src/pages/home/home.html:

Cargue los cambios como una nueva versión en Ionic Deploy.

Una vez cargado, vaya al panel de la aplicación Ionic y actualice la versión con una nota y la versión correspondiente en los metadatos. Guarde los cambios e impleméntelos.

Abrir la aplicación ahora debería recoger esta nueva versión y actualizarla aplicaría los cambios a la interfaz de usuario.

asset changesasset changesasset changes

Implementar canales

De forma predeterminada, Ionic Deploy tiene tres canales en los que puede implementar: desarrollo, ensayo y producción. Pero también puedes crear nuevos canales para que tu aplicación escuche las actualizaciones. Puede hacerlo haciendo clic en el icono de engranaje en la pestaña Ionic Deploy en el panel de control de la aplicación:

Create Deploy ChannelCreate Deploy ChannelCreate Deploy Channel

Esto es útil para cosas como las pruebas A/B, por lo que puede insertar cambios específicos solo en usuarios específicos.

No olvide actualizar el código para usar ese canal de implementación específico:

reversión

Si ha insertado algo que no debería tener, puede usar la función de reversión. Con esta característica, puede devolver una versión anterior a los usuarios.

Tenga en cuenta que no puede corregir el código roto mediante la reversión. Por ejemplo, si tienes un error de sintaxis en el código JavaScript, se interrumpirá toda la aplicación y el código para buscar actualizaciones no se ejecutará nunca. Para corregir ese tipo de errores, lo único que puede hacer es lanzar una nueva versión en la tienda de aplicaciones.

Puede revertir haciendo clic en el vínculo Revertir a aquí en cualquier implementación determinada.

RollbackRollbackRollback

Esto le pedirá que confirme si desea revertir o no. Una vez confirmado, se establecerá automáticamente como la versión actual. Por lo tanto, el código para recoger nuevas versiones lo reconocerá como la última versión y pedirá a los usuarios que actualicen. Las versiones revertido tendrán un icono de actualización naranja.

También puede implementar una versión específica haciendo clic en el vínculo Implementar junto a la versión que desea implementar.

Uso de git hooks

Puede automatizar la implementación de actualizaciones de aplicaciones en Ionic Deploy con enlaces git. Los enlaces de Git le permiten ejecutar scripts antes o después de eventos específicos de Git, como confirmar, insertar y recibir. En este caso, usaremos el gancho pre-push para cargar nuestros cambios en Ionic Cloud justo antes de que el comando git push haga lo suyo.

Comience por cambiar el nombre del script de pre-push de ejemplo al nombre real reconocido por Git:

Abra el archivo en el editor de texto y reemplace su contenido con lo siguiente:

Ahora confirme sus cambios y empúdelos a un repositorio remoto:

Justo antes de que se ejecute el comando git push, se ejecutará la carga iónica.

También puede implementar automáticamente la versión si lo desea:

Sin embargo, esto no funcionará para nuestro ejemplo, porque no puede especificar metadatos.

Si desea llevar el proceso de implementación más lejos, le recomiendo que consulte la API HTTP para Ionic Deploy. Esto le permite implementar mediante programación los cambios en la aplicación desde el servidor de integración continua. También le permite actualizar los números de versión y los metadatos de las implementaciones. Todo esto se puede hacer automáticamente y sin tocar el panel de la aplicación Ionic.

conclusión

¡Eso es todo! En este tutorial ha aprendido sobre Ionic Deploy y cómo puede usarlo para insertar actualizaciones en su aplicación Ionic. Esta es una característica eficaz que le permite crear un sistema robusto de control de versiones y actualización en su aplicación.

¡Estén atentos para obtener más contenido en Ionic y en servicios en la nube como Ionic Deploy! Si quieres una introducción completa a cómo empezar con el desarrollo de aplicaciones Ionic 2, echa un vistazo a nuestro curso aquí en Envato Tuts +.

Y echa un vistazo a algunos de nuestros otros mensajes sobre Ionic y el desarrollo de aplicaciones móviles multiplataforma.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.