App Version Ionic | Controla tu app desde su código de versión

¿Buscando acceder a los detalles de tu instalación en el dispositivo de tu usuario? O, quizás ya sabes cómo se utiliza el componente App Version Ionic, pero aún te falta conocer algún detalle de un campo o funcioón para hacerle funcionar cómo quieres ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014 y en este artículo aprenderás a obtener detalles de la instalación de tu aplicación mediante el componente App Version Ionic.

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.

Instalación de App Version en Ionic

Cómo es costumbre ya, tenemos que instalar el componente en nuestra aplicación. Al tratarse de un módulo desacoplado, es necesario.

Para ello vamos a utilizar las dos siguientes líneas de código:

$ ionic cordova plugin add cordova-plugin-app-version 
$ npm install @awesome-cordova-plugins/app-version 

La primera instalará el plugin que permitirá la comunicación desde nuestra app con la parte nativa del sistema.

La segunda incluirá el código necesario para comunicar nuestro código, con el plugin.

Configuración de App Version

Seguimos avanzando y ahora le toca el turno a la configuración. Recuerda que, si estás utilizando Ionic 4 o superior, y usas el módulo NGX, no es necesario que lo hagas.

Tendremos que incluir la clase en los providers de nuestra app para que se pueda inyectar en los constructores cómo un servició. Para tal fin vamos a utilizar el siguiente código.

...

import { AppVersion } from "@awesome-cordova-plugins/app-version/ngx"

...

providers: [
...,
AppVersion,
...
]

...

Nota: Siempre lo digo, pero no me cansaré nunca, porque yo tuve un problema enorme con esto. Es muy recomendable NO incluir los módulos / componentes que NO vayamos a usar en toda la aplicación en el AppModule.ts. Es mejor incluirlos en el module del componente que lo use. Así reduciremos los consumos de la app y mejoraremos la experiencia de usuario con una carga difereida de los componentes. Solo los cargaremos cuando los usemos.

Plataformas soportadas por App Version Ionic

Buenos, al tratarse de un módulo que interactúa con la parte nativa, estará disponible para las siguientes:

• Android
• iOS
• Windows

Cómo usar App Version de Ionic

Llegados a este punto, ya estamos a disposición de poner todo el sistema en marcha. Pero antes vamos a ver un sencillo ejemplo funcional y comentamos sobre el código.

import { AppVersion } from '@awesome-cordova-plugins/app-version/ngx';


constructor(private appVersion: AppVersion) { }

...

this.appVersion.getAppName();

this.appVersion.getPackageName();

this.appVersion.getVersionCode();

this.appVersion.getVersionNumber();

1. Realizamos un import de AppVersion lo que nos permitirá usar la clase en nuestra clase.
2. Inyectamos una instancia a través del constructor.
3. Posteriormente usaremos los métodos que se ven en el ejemplo y que hablaremos de ellos en la sección de método y funciones del tutorial.

¿Has visto que sencillo es? No tiene ¡nah!

Una vez que ya hemos visto esto, estamos en disposición de continuar.

Funciones y métodos de App Version

Ahora vamos a proceder a ver los métodos y las funciones de las que disponemos y lo que hace cada una.

getAppName()

• Retorna el nombre de nuestra aplicación. Por ejemplo: “Esta es mi app”
• Retorna una promesa que hay que controlar. En ella llega una cadena con el nombre de la app.

getPackageName()

• Similar a la anterior, pero con el nombre del paquete.
• Retorna una promesa que hay que controlar. Con ella llega una cadena con el nombre del paquete.

getVersionCode()

• Devuelve el identificador de compilación de la aplicación. En iOS será una cadena con la versión de compilación como "1.6095" Y en Android, un número generado a partir de la cadena de versión, como 10203 para la versión "1.2.3"
• Retorna una promesa que hay que controlar. En ella llegará una cadena, o un number, dependiendo del dispositivo donde se ejecute cómo hemos visto en la descripción.

getVersionNumber()

• Esta función nos devuelve una cadena con el número de versión de la app. No es lo mismo que la función anterior.
• Retorna una promesa que hay que controlar. Con ella nos llega una cadena que contiene el código.

Tutorial en video por si no te gusta leer

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 si, me despido ya. Espero haberte ayudado con tus dudas sobre el componente y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!