Saltar al contenido

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

App Version Ionic

¿Buscando acceder a los detalles de la instalación de la aplicació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?

Lo lógico es que hayas respondido que sí, si no este artículo no es para ti. Y en caso afirmativo, no debes preocuparte, no eres el primero, ni el último, que pasará por este artículo a intentar dar respuesta a sus preguntas.

Es más, hasta los que somos más expertos necesitamos de estas publicaciones para poder realizar implementaciones de componente nuevos para nosotros, o de componente que llevamos mucho sin utilizar.

Por si no me conoces aún, 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, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

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.

 

Más contenidos del curso

 

El tutorial en vídeo, cómo siempre 🙂


Y con esto hemos terminado, solo me queda despedírteme hasta el siguiente artículo. Hasta entonces, que vaya bien 🙂