App availability Ionic | Guía de uso

¿Te gustaría conocer cómo funciona el componente App availability Ionic? O quizás ya sabes cómo funciona, pero te falta algún detallito que conocer para integrarlo ¿verdad?

Mi nombre es Aitor Sánchez y soy desarrollador de apps desde el año 2014 y en este artículo aprenderás, de una manera clara y con un ejemplo práctico, a saber si hay alguna app instalada en el dispositivo del usuario que está usando tu aplicación en ese preciso momento.

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.

Y ahora si, comenzamos. Let´s go!

Qué es App Availability Ionic

Para no entretenerte mucho, se trata de una librería que nos permitirá conocer si una app está instalada, o no, en el dispositivo donde se esté ejecutando la app.

Instalando el componente

Cómo todos los módulos no incluidos en el core de Ionic, necesitamos realizar una instalación para poderlo utilizar. Para ello vamos a utilizar las dos siguientes líneas de consola:

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

La primera instalará el plugin que comunicará la parte nativa del sistema con el código TS.

La segunda línea instalará el código TS que hará de API para que nosotros, desde nuestra app, nos podamos comunicar con el plugin.

Plataformas soportadas

Cómo se trata de un componente meramente para dispositivos móviles, podemos intuir para que plataformas estará disponible:

• Android
• iOS

Configuración de App Availability Ionic

Para que nuestro nuevo módulo pueda ser utilizado en nuestra app, y cómo pasa con la mayoría de componentes externos, tenemos que agregar la clase principal a los providers de nuestra app. Para ello vamos a ir al archivo "app.module.ts" y dentro del array providers lo vamos a incluir:

import { AppAvailability } from '@awesome-cordova-plugins/app-availability/ngx';

...

providers: [
  ...,
  AppAvailability,
  ...
]

...

Recuerdo que este paso puede ser prescindible de hacerlo en el "app.module.ts". Si únicamente lo vamos a utilizar en una parte de la app, debemos incluirlo solo en el "module" del componente que lo vaya a utilizar.

Y ¿por qué? Fácil, así ahorraremos recursos al no tener que estar el plugin activo en toda la app y solo se utilizará cuando de verdad se necesita.

Cómo usar App Availability Ionic

Primero veamos un ejemplo y comentamos sobre él.

import { AppAvailability } from '@awesome-cordova-plugins/app-availability/ngx';
import { Platform } from 'ionic-angular';

constructor(private appAvailability: AppAvailability, private platform: Platform) { }

...

let app;

if (this.platform.is('ios')) {
  app = 'twitter://';
} else if (this.platform.is('android')) {
  app = 'com.twitter.android';
}

this.appAvailability.check(app)
  .then(
    (yes: boolean) => console.log(app + ' is available'),
    (no: boolean) => console.log(app + ' is NOT available')
  );

1. En primer lugar importaremos las clases Platform y AppAvailability. La primera la utilizaremos para saber si estamos ejecutando la app sobre iOS o Android.
2. Posteriormente inyectaremos una instancia de cada clase a través del constructor.
3. Cómo he explicado en el párrafo anterior, comprobaremos en que plataforma estamos y dependiendo del resultado igualaremos la variable "app" al paquete o la ruta de la aplicación de Twitter.
4. Y ahora, mediante la función "check" de la clase AppAvailability podremos comprobar si la app está instalada, o no, en el dispositivo.
5. ¡Listo! Con este ejemplo totalmente funcional puedes utilizar la biblioteca donde quieras. Únicamente cambia el nombre del paquete, o ruta, y listo.

Funciones y campos de clase

Y para los más avezados, voy a pasar a explicar con un poco más de profundidad dicho componente. Aunque únicamente tiene una función y no tiene campos públicos.

check(app)

Será la función que hemos visto en el ejemplo, nos permite conocer si la app en cuestión está instalada en el dispositivo.

• app -> string -> Si es Android, el nombre del paquete. Si es iOS, la URI de la app.

Retornará una promesa que tenemos que controlar. Con ella llegará un parámetro booleano que será true en caso de que si que esté instalada y false en caso de que no.

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.

Geniete, pues hasta aquí el artículo de hoy. Espero haberte ayudado a saber si alguna aplicación que necesites está instalada en el dispositivo de tu usuario y nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!