() translation by (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:
1 |
ionic start --v2 deployApp tabs
|
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:
1 |
cd deployApp
|
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.
1 |
npm install @ionic/cloud-angular --save |
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.
1 |
ionic io init |
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:
1 |
cordova plugin add ionic-plugin-deploy --save
|
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:
1 |
ionic serve |
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:
1 |
import { SplashScreen } from '@ionic-native/splash-screen'; |
2 |
|
3 |
// add the following:
|
4 |
import { CloudSettings, CloudModule } from '@ionic/cloud-angular'; |
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.
1 |
const cloudSettings: CloudSettings = { |
2 |
'core': { |
3 |
'app_id': 'YOUR IONIC APP ID' |
4 |
}
|
5 |
};
|
Una vez que haya agregado eso, ahora puede incluirlo como uno de los módulos de la aplicación:
1 |
@NgModule({ |
2 |
declarations: [ |
3 |
//...
|
4 |
],
|
5 |
imports: [ |
6 |
BrowserModule, |
7 |
IonicModule.forRoot(MyApp), |
8 |
CloudModule.forRoot(cloudSettings) // <-- add this |
9 |
],
|
10 |
});
|
A continuación, abra el archivo src/app/app.component.ts. Justo debajo de la importación de TabsPage, incluya lo siguiente:
1 |
import { TabsPage } from '../pages/tabs/tabs'; |
2 |
|
3 |
// add these:
|
4 |
import { AlertController, LoadingController } from 'ionic-angular'; |
5 |
import { Deploy } from '@ionic/cloud-angular'; // import the Deploy service from @ionic/cloud-angular package |
En el constructor(), agregue los servicios que importamos anteriormente:
1 |
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public deploy: Deploy, private alertCtrl: AlertController, private loadingCtrl: LoadingController){ |
2 |
//...
|
3 |
}
|
Establecer el canal de implementación
Dado que todavía estamos desarrollando la aplicación, establezca el canal de implementación para desarrollar:
1 |
this.deploy.channel = 'dev'; |
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.
1 |
this.deploy.getSnapshots().then((snapshots) => { |
2 |
console.log('now getting snapshots...'); |
3 |
console.log(snapshots); |
4 |
});
|
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.
1 |
snapshots.forEach((snapshot_id) => { |
2 |
this.deploy.getMetadata(snapshot_id).then((metadata) => { |
3 |
// do something with metadata
|
4 |
});
|
5 |
// delete snapshot
|
6 |
this.deploy.deleteSnapshot(snapshot_id); |
7 |
});
|
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.
1 |
this.deploy.check().then((snapshotAvailable: boolean) => { |
2 |
// ...
|
3 |
});
|
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.
1 |
if (snapshotAvailable) { |
2 |
// get metadata
|
3 |
this.deploy.getMetadata().then((metadata) => { |
4 |
console.log('now getting metadata..'); |
5 |
console.log(metadata); |
6 |
});
|
7 |
}
|
A continuación, muestre un mensaje de alerta de confirmación para que el usuario decida si desea descargar la actualización o no:
1 |
let alert = this.alertCtrl.create({ |
2 |
title: 'Version ' + metadata.version + ' is available', |
3 |
message: 'Do you want to download this update?', |
4 |
buttons: [ |
5 |
{
|
6 |
text: 'No', |
7 |
role: 'cancel', |
8 |
handler: () => { |
9 |
// do some stuff (e.g. add analytics code for counting how many users didn't apply the update)
|
10 |
}
|
11 |
},
|
12 |
{
|
13 |
text: 'Yes', |
14 |
handler: () => { |
15 |
// proceed with downloading the update
|
16 |
}
|
17 |
}
|
18 |
]
|
19 |
});
|
20 |
|
21 |
alert.present(); |
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.
1 |
this.deploy.download().then(() => { |
2 |
// download is done
|
3 |
console.log('download completed!'); |
4 |
// show loader
|
5 |
let loading = this.loadingCtrl.create({ |
6 |
content: 'Now reloading the app...' |
7 |
});
|
8 |
|
9 |
loading.present(); |
10 |
|
11 |
// extract the update
|
12 |
this.deploy.extract().then(() => { |
13 |
console.log('extract completed!'); |
14 |
this.deploy.load(); // reload the app to apply the changes |
15 |
|
16 |
console.log('reload completed!'); |
17 |
loading.dismiss(); |
18 |
});
|
19 |
});
|
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:
1 |
ionic platform add android |
2 |
ionic build android |
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:
1 |
ionic upload |
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:
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:
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.
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:
1 |
<ion-header>
|
2 |
<ion-navbar>
|
3 |
<ion-title>Home</ion-title> |
4 |
</ion-navbar>
|
5 |
</ion-header>
|
6 |
|
7 |
<ion-content padding> |
8 |
<ion-card>
|
9 |
<img src="assets/img/lightning.png" /> |
10 |
<ion-card-content>
|
11 |
<ion-card-title>
|
12 |
Version 4 |
13 |
</ion-card-title>
|
14 |
</ion-card-content>
|
15 |
</ion-card>
|
16 |
</ion-content>
|
Cargue los cambios como una nueva versión en Ionic Deploy.
1 |
ionic upload |
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.
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:
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:
1 |
this.deploy.channel = 'me'; |
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.
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:
1 |
mv .git/hooks/pre-push.sample .git/hooks/pre-push
|
Abra el archivo en el editor de texto y reemplace su contenido con lo siguiente:
1 |
#!/bin/sh
|
2 |
|
3 |
echo now pushing changes to Ionic deploy
|
4 |
ionic upload |
Ahora confirme sus cambios y empúdelos a un repositorio remoto:
1 |
git add .
|
2 |
git commit -m "make some changes..." |
3 |
git push origin master |
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:
1 |
#!/bin/sh
|
2 |
|
3 |
echo now pushing changes to Ionic deploy
|
4 |
ionic upload --deploy dev
|
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.
