App Rate Ionic | Así se usa e implementa

¿Interesado en solicitar al usuario de tu app que te deje una valoración mediante la api App Rate Ionic? O, quizás ya sabes cómo se puede hacer, pero te falta conocer alguna función o campo para terminar la implementación ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a mostrarle a tu usuario la solicitud de reseña para tu app sin salir de la aplicación mediante App Rate Ionic y conocerás todos sus campos 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.

Y ahora si, comenzamos. Let´s go!

Pero, qué es App Rate Ionic

En resumen, se trata de una api que nos permite mostrarle al usuario un popup solicitando la review de nuestra app. A parte de poder configurar alguna cosita más, cómo cuando dirigir al usuario al store dependiendo de la cantidad de estrellas que haya dejado.

Instalando el componente

Cómo cualquier componente que no se encuentre dentro del Core de Ionic, necesitamos instalarlo en nuestra app para poder usarlo. Para ello vamos a utilizar las dos siguiente líneas de consola:

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

La primera instalará el plugin que nos permitirá la comunicación con la parte nativa del sistema donde se esté ejecutando la aplicación.

La segunda instalará la api para que desde nuestro código TS nos podamos comunicar con el plugin.

Configurando App Rate Ionic

Para que nosotros podamos hacer uso de la inyección de dependencias, y por ende hacer uso del componente App Rate Ionic, al igual que la mayoría de los componentes externos, necesitamos incluir la clase en los providers de nuestra aplicación.

Nos dirigimos al archivo "app.module.ts" y agregamos lo siguiente:

import { AppRate } from '@awesome-cordova-plugins/app-rate/ngx';

...

providers: [
...,
AppRate,
...
]

...

Recuerda, si no es necesario utilizar el módulo por toda la aplicación, es recomendable que solo lo incluyas en el "module" asociado al componente donde vayas a hacer uso de él. Así estarás ahorrando recursos y reduciendo el tiempo de carga de la aplicación.

Plataformas soportadas por el módulo

Ahora bien, Aitor ¿para qué plataformas podemos utilizar App Rate Ionic? Pues muy sencillo, para estas:

• Android
• BlackBerry 10
• iOS
• Windows

Recuerda que este componente, cuando nosotros le digamos, enviará al usuario a una de las tiendas a dejar la valoración. Así que es necesario que la plataforma para la que se esté usando, tenga tienda de aplicaciones.

Cómo usar App Rate Ionic

Bien, ya llegamos a lo que nos interesa. Cómo en todos los tutoriales, vamos a ver un ejemplo de código y después, debajo del ejemplo, comentamos lo que hemos hecho.

import { AppRate } from '@awesome-cordova-plugins/app-rate/ngx';

constructor(private appRate: AppRate) { }

...
// set certain preferences
this.appRate.setPreferences({
  storeAppURL: {
    ios: '<app_id>',
    android: 'market://details?id=<package_name>',
    windows: 'ms-windows-store://review/?ProductId=<store_id>'
  }
});

this.appRate.promptForRating(true);

// or, override the whole preferences object
this.appRate.setPreferences({
  usesUntilPrompt: 3,
  storeAppURL: {
   ios: '<app_id>',
   android: 'market://details?id=<package_name>',
   windows: 'ms-windows-store://review/?ProductId=<store_id>'
  }
});

this.appRate.promptForRating(false);

1. Importamos la clase AppRate del paquete "@awesome-cordova-plugins/app-rate/ngx".
2. Inyectamos una instancia a través del constructor de nuestra clase. Recuerda, si no has incluido la clase en el module.ts este punto dará un error.
3. Mediante el método "setPreferences" inicializamos las urls de los stores donde está nuestra app.
4. Mostramos el modal con la función "propmtForRating(boolean)". El parámetro booleano nos permite mostrar el modal inmediatamente.

Bien, pues con todo esto ya estás en disposición de utilizar App Rate Ioinc en tu app. Ahora vamos a ver los métodos y campos de clase que están a nuestra disposición para profundizar un poco más en cómo se utiliza.

Funciones y campos de clase

Recuerda que, cómo en el resto de tutoriales, solo vamos a incluir los campos y funciones de esta clase. Obviaremos todos los de los padres.

promptForRating(inmediately)

Nos permite mostrar el modal al usuario para que deje su valoración.

• inmediately -> bool -> Si es verdadero el modal será mostrado nada más llamar a la función. De lo contrario, el modal será mostrado cuando el contador de usos que definimos en el campo "usesUntilPrompt" llegue 0.

Esta función no devuelve nada.

navigateToAppStore()

Envía al usuario, de manera inmediata, a la página del store de apps de la plataforma donde se está ejecutando que contiene nuestra aplicación.

Dicha función no tiene parámetros ni devuelve nada. Pero si que es necesario haber definido previamente, en las preferencias que hemos visto en el ejemplo, la url de la tienda en cuestión.

AppRatePreferences

Esta clase/interfaz contiene los parámetros de las preferencias que nosotros queremos definir sobre el componente.

• usesLanguaje (opt) -> string -> El código del idioma codificado en BCP 47 que queramos que utilice el módulo.
• displayAppName (opt) -> string -> El título de la aplicación que queramos que aparezca en el modal.
• promptAgainForEachNewVersion (opt) -> boolean -> Si es verdadero, cuando la app se haya actualizado App Rate Ionic mostrará de nuevo el modal al usuario.
• usesUntilPrompt (opt) -> number -> El número de usos que tiene que hacer el usuario de la app antes de que se muestre el diálogo de solicitud de valoración.
• simpleMode (opt) -> boolean -> Si es verdadero, el sistema utilizará el modo de configuración simple y desviará al usuario cuando el feedback sea negativo.
• inAppReview (opt) -> boolean -> Si es verdadero, la aplicación se cerrará cuando el usuario sea redirigido al store mediante el plugin.
• useCustomRateDialog (opt) -> boolean -> Utilizará una vista personalizada para la ventana modal.
• customLocale (opt) -> AppRateCustomLocale -> Un objeto personalizado.
• callbacks -> AppRateCallbacks -> Una instancia de la clase "AppRateCallbacks" que veremos a continuación.
• storeAppURL -> AppUrls -> Una instancia de la clase "AppUrls" que veremos a continuación.

AppUrls

Esta clase/interfaz contendrá las rutas de la aplicación una vez estén publicadas en los stores.

• ios -> string -> Id de la app en AppStore.
• android -> string -> URL de la app en GooglePlay
• windows -> string -> URL de la app en Windows Store
• blackberry -> string -> URL de la app en AppWorld
• windows8 -> string -> URL de la app en WindowsStore

AppRateCallbacks

Se trata de los listeners que podemos pegar al modal.

• onButtonClicked -> function -> Será llamado cuando el usuario haga click en los botones del modal.
• onRateDialogShow -> function -> Será llamado cuando el diálogo sea mostrado.
• handleNegativeFeedback -> function -> Será llamado cuando el usuario haga click en el feedback negativo del modal.

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 ya hemos terminado geniete. Espero haberte ayudado a mostrar el mensaje para que te dejen una reseña y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!