App Update Ionic | Cómo actualizar nuestra app remotamente

¿Buscando la manera de actualizar tu app sin pasar por los stores con App Update Ionic? O, quizás ya saber cómo hacerlo, pero aún te falta conocer algún detalle para poner todo en marcha ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo, de manera sencilla y accionable, vas a aprender a actualizar tu app de manera remota con App Update Ionic y conocerás sus campos de clase y funciones.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Pero, qué es App Update Ionic

En resumen, se trata de un sistema que nos permite actualizar nuestra aplicación de manera remota y automática sin necesidad de tener que pasar por el store de nuestro dispositivo.

Instalando el componente

Cómo todos los componente que no están incluidos en el core de Ionic, necesitamos realizar una instalación para poder utilizarlos. Para ello, vamos a utilizar las dos siguientes líneas de consola:

$ ionic cordova plugin add cordova-plugin-app-update
$ npm install --save @ionic-native/app-update@4

• La primera línea instalará el plugin de Cordova necesario para poder comunicarnos con la parte nativa del sistema.
• La segunda instalará la api en código TS para que podamos comunicarnos desde nuestro código con el plugin.

Configurando App Update Ionic

Para poder utilizar el módulo mediante el sistema de inyecciones, debemos de incluirlo dentro de los providers de nuestra aplicación. Para ello, nos dirigimos al archivo "app.module.ts" y agregamos lo siguiente:

import { AppUpdate } from '@ionic-native/app-update';

...

providers: [
...,
AppUpdate,
...
]

...

Plataformas soportadas por el módulo

Cómo podrás intuir, solo existe una plataforma soportada. Y es totalmente normal si nos ajustamos a las políticas de uso de las dos principales tiendas de aplicaciones:

• Android

Dado que iOS no permite sistemas cómo este, y Android no tengo ni idea del tiempo que lo seguirá permitiendo, no hay necesidad de implementar algo así en una aplicación para iOS.

Cómo usar App Update Ionic

Ya llegamos a lo que nos interesa. Pero, y cómo en cada tutorial, veamos un ejemplo de código y después comentamos debajo de él. Pero en este habrá 2 partes.

<update>
    <version>302048</version>
    <name>APK Name</name>
    <url>https://your-remote-api.com/YourApp.apk</url>
</update>

Bien, esta sería la versión y configuración que nuestra aplicación deberá de recuperar desde alguna parte de internet para poder realizar la actualización.

• version -> Será la versión que existe en el servidor. El sistema comparará con la que hay en local por si hay que actualizarla.
• name -> Será el nombre de la versión que el sistema mostrará al usuario cuando haya que realizar alguna actualización.
• url -> La ruta donde se encuentra el APK que el sistema tiene que descargar e instalar.

import { AppUpdate } from '@ionic-native/app-update';

constructor(private appUpdate: AppUpdate) {

   const updateUrl = 'https://your-remote-api.com/update.xml';
   this.appUpdate.checkAppUpdate(updateUrl).then(() => { console.log('Update available') });

}

1. Importamos la clase "AppUpdate" del paquete "@ionic-native/app-update".
2. Inyectamos una instancia a través del constructor de nuestra clase. Recuerda, si no se ha incluido en los providers de la app, o del componente en cuestión, la aplicación fallará en este punto.
3. Mediante la función"checkAppUpdate", pasándole la ruta donde se encuentra el archivo XML que hemos creado antes, comprueba si hay actualizaciones pendientes. En caso de que las haya, actualizará la aplicación.

Ahora vamos a pasar a ver los campos de clase y las funciones que tiene disponibles esta librería para nosotros.

Funciones y campos de clase

Recordemos que únicamente vamos a ver los campos y los métodos de esta clase en particular. Los de los padres tendrán su propio artículo, en caso de que existan.

checkAppUpdate(updateUrl, options)

Comprueba si hay actualizaciones disponibles, en caso de que las haya solicitará al usuario si quiere actualizar la aplicación.

• updateUrl -> string -> La ruta donde se encuentra el archivo XML que hemos visto en el ejemplo.
• options -> AppUpdateOptions -> Una instancia del objeto "AppUpdateOptions" que vamos a ver a continuación.

Retorna una promesa que tendremos que controlar. Con ella llegará información relevante sobre si la actualización ha sido realizada, si no, etc...

AppUpdateOptions

Esta clase/interfaz nos permite definir algunos parámetros para enviar con la solicitud al archivo XML.

• authType -> string -> El tipo de autentificación http que llevará la solicitud. Puedes ver los que existen aquí.
• username -> string -> El usaurio de la autentificación.
• password -> string -> El password de la autentificación.

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Y, ahora sí, espero haber ayudado y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!