Siri Shortcuts Ionic | Cómo registrar comandos de Siri en Ionic

¿Neceistas qué tu usuario pueda lanzar eventos en iOS a través de la api de Siri Shortcuts para Ionic? O, tal vez ya sabes cómo se hace, pero aún te falta que conocer algún detalle de sus funciones o campos para que funcione correctamente ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, Y en este artículo aprenderás, de manera sencilla y totalmente eficiente, a que tu usuario registre atajos en iOS para que sean lanzados por Siri cuando, y cómo, dicho usuario lo crea oportuno.

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 Siri Shortcuts Ionic

Cómo su propio nombre indica, nos permite registrar shortcuts (atajos) para Siri desde nuestra aplicación. Es un sistema sencillo cómo veremos a continuación y únicamente podrá usarse a partir de la versión 12.0 de iOS.

También es importante conocer que únicamente funcionarán si la app es compilada desde XCode 10 o superior.

Cómo instalar el componente

El primer paso que tenemos que dar, igual que con cualquier componente que esté fuera del core de Ionic, es instalarlo en nuestra aplicación para poder hacer uso de él.

Para ello vamos a usar las siguientes dos líneas de consola:

$ ionic cordova plugin add cordova-plugin-siri-shortcuts
$ npm install --save @ionic-native/siri-shortcuts

La primera instalará el plugin de Cordova de Siri Shortcuts Ionic que permitirá a nuestra app la comunicación con la parte nativa del sistema donde se esté ejecutando.

La segunda instalará el código TS necesario para que nos podamos comunicar desde nuestro código con el plugin de Cordova.

Configuración de Siri Shortcuts Ionic

Al igual que el punto anterior, al tratarse de un componente fuera del core, tenemos que agregarlo a los provders de la app para hacerlo funcionar. Para ello nos dirigimos al archivo "app.module.ts" y agregaremos lo siguiente:

import { SiriShortcuts } from '@ionic-native/siri-shortcuts';

...

providers: [
...,
SiriShortcuts,
...
]

...

Qué plataformas soporta

Aunque estoy seguro de que ya lo habrás intuido, solo es soportado por la siguiente plataforma:

• iOS

Cómo usar Siri Shortcus Ionic

Bien, ya llegamos a lo que nos interesa. Cómo en la mayoría de tutoriales, vamos a ver el código y después comentamos lo que hemos hecho en la parte de debajo de este. ¡Vamos con ello!

import { SiriShortcuts } from '@ionic-native/siri-shortcuts';


constructor(private siriShortcuts: SiriShortcuts) { }

...


this.siriShortcuts.donate({
      persistentIdentifier: 'open-my-app',
      title: 'Open my app',
      suggestedInvocationPhrase: 'Open my app',
      userInfo: { username: 'username' },
      isEligibleForSearch: true,
      isEligibleForPrediction: true,
  })
  .then(() => console.log('Shortcut donated.'))
  .catch((error: any) => console.error(error));

this.siriShortcuts.present({
      persistentIdentifier: 'open-my-app',
      title: 'Open my app',
      suggestedInvocationPhrase: 'Open my app',
      userInfo: { username: 'username' },
  })
  .then(() => console.log('Shortcut added.'))
  .catch((error: any) => console.error(error));

this.siriShortcuts.remove('open-my-app')
  .then(() => console.log('Shortcut removed.'))
  .catch((error: any) => console.error(error));

this.siriShortcuts.removeAll()
  .then(() => console.log('All shortcuts removed removed.'))
  .catch((error: any) => console.error(error));

this.siriShortcuts.getActivatedShortcut()
  .then((data: SiriShortcut|null) => console.log(data))
  .catch((error: any) => console.error(error));

En primer lugar, importaremos la clase "SiriShortcuts" del paquete "@ionic-native/siri-shortcuts" para poder hacer uso de esta.

Posteriormente inyectaremos una instancia a través del constructor de nuestra clase. Recuerda que, si no se ha realizado el paso de configuración, aquí la aplicación fallará.

En el orden en el que están, vamos a comentar lo que hace cada una de las funciones aunque ahora lo veremos también en la siguiente sección:

1. Donate: Nos permite registrar un ShortCut dentro del sistema.
2. Present: Nos permite enseñarle al usuario cómo está configurado dicho atajo.
3. Remove: Nos permite eliminar un atajo del sistema siempre que haya sido creado desde nuestra app.
4. RemoveAll: Eliminará todos los atajos creados desde nuestra app dentro del sistema.
5. GetActivatedShortcut: Nos permite conocer el estado de un shortcut.

Y hasta aquí la explicación práctica de Siri Shortcuts Ionic. Espero que te haya quedado más o menos claro. Ahora pasaremos a profundizar más en los campos y funciones, pero con lo que has visto ya, podrías implementarlo perfectamente.

Funciones y campos de clase de Siri Shortcuts

Bien, ahora pasaremos a ver los campos y las funciones de la clase que estamos tratando. Recuerda, aquí no se incluirá ninguno que tenga que ver con los padres del componente.

donate(options, persistenIdentifier, title, suggestedInvocationPhrase, userInfo, isElegibleForSearch, isElegibleForPrediction)

Esta función nos permite registrar, o mejor dicho donar, un shortcut a Siri para que ella realice la acción que le vamos a pasar cómo parámetro que hemos visto en el ejemplo.

• options -> SiriShortcutsOptions -> Opciones específicas de la donación, veremos sus campos a continuación.
• persistenIdentifier -> string -> El identificador único con el que después vamos a poder acceder y configurar el atajo.
• title -> string -> El título del atajo que se mostrará al usuario.
• suggestedInvocationPhrase -> string -> Será la frase que se le enviará a Siri (de manera fonética) para que ejecute el atajo.
• userInfo -> object -> Un objeto de pares key:value que podrá ser recuperado cuando llamemos a la función getActivedShortcut.
• isElegibleForSearch -> boolean -> Si es verdadero, Siri podrá buscarlo para poder ser ejecutado. Verdadero por defecto.
• isElegibleForPrediction -> boolean -> Si es verdadero, el atajo estará disponible para las predicciones de Siri. Verdadero por defecto.
  • Una predicción es cuando un usuario no pronuncia correctamente el nombre de un atajo y Siri muestra una lista con lo que ella interprete que puede ser el atajo que ha dicho.

Retorna una promesa que tenemos que controlar. No llevará nada consigo pero nos permitirá conocer si todo ha salido bien. A parte, cómo hemos visto en el ejemplo, también es recomendable controlar el error para así conocer si algo no ha ido bien.

present(options, persistentIdentifier, title, suggestedInvicationPhrase, userInfo, isEligibleForSearch, isEligibleForPrediction)

Nos permite mostrar al usuario un PopUp con la información del atajo y cómo está configurado.

• options -> SiriShortcutsOptions -> Opciones específicas de la donación, veremos sus campos a continuación.
• persistenIdentifier -> string -> El identificador único con el que después vamos a poder acceder y configurar el atajo.
• title -> string -> El título del atajo que se mostrará al usuario.
• suggestedInvocationPhrase -> string -> Será la frase que se le enviará a Siri (de manera fonética) para que ejecute el atajo.
• userInfo -> object -> Un objeto de pares key:value que podrá ser recuperado cuando llamemos a la función getActivedShortcut.
• isElegibleForSearch -> boolean -> Si es verdadero, Siri podrá buscarlo para poder ser ejecutado. Verdadero por defecto.
• isElegibleForPrediction -> boolean -> Si es verdadero, el atajo estará disponible para las predicciones de Siri. Verdadero por defecto.
  • Una predicción es cuando un usuario no pronuncia correctamente el nombre de un atajo y Siri muestra una lista con lo que ella interprete que puede ser el atajo que ha dicho.

Devuelve una promesa que tenemos que controlar, al resolverse nos avisará de que el PopUp ha sido mostrado.

remove(persistenIdentifiers)

Elimina del sistema los atajos con el identificador solicitado.

• persistenIdentifiers -> string | Array<string> -> Una cadena con el identificador, o array de cadenas con los identificadores, que se quiere eliminar.

Retornará una promesa que tenemos que controlar. Cuando se resuelva sabremos que el sistema ha terminado de realizar la acción.

removeAll()

Elimina todos los atajos que tengamos registrados en el sistema. Aunque creo que se sobre entiende, solo serán eliminados los que hayan sido creados desde la aplicación.

Retorna una promesa que tenemos que controlar. Cuando se resuelva sabremos que la acción ha terminado de realizarse.

getActiveShortcut(options, clear)

Nos permite conocer si el usuario ha iniciado la aplicación desde un shortcut, y en caso de que así sea, nos permite conocer cuál ha sido.

• options -> ActivatedShortcutOptions | null -> Una instancia de la clase "ActivatedShortcutOptions que veremos a continuación.
• clear -> boolean -> Si es verdadero, cuando nosotros usemos el método en cuestión para obtener la información de por donde ha entrado el usuario, una vez recuperemos dicha lista de acciones, está lista será eliminada.

Retorna una promesa que tenemos que controlar. Con ella llegará una instancia de la clase "SiriShortCut" que veremos ahora los campos que tienes, pero que nos permite conocer cómo ha accedido el usuario a la app. O null, en caso de que no haya usado este camino para entrar.

SiriShortcut

• persistentIdentifier -> string -> El identificador único del atajo.
• title -> string -> El título del atajo.
• userInfo -> Objecto de pares key:value -> Los datos, en forma de objeto, que nosotros asociamos al atajo que pueden contener la información que nosotros creamos relevante.
• suggestedInvocationPhrase -> string -> La frase, en forma de cadena, que nosotros tenemos que decirle a Siri para que ejecute el atajo.

SiriShortcutOptions

• isElegibleForSearch -> boolean -> Si es verdadero, Siri podrá buscarlo para poder ser ejecutado. Verdadero por defecto.
• isElegibleForPrediction -> boolean -> Si es verdadero, el atajo estará disponible para las predicciones de Siri. Verdadero por defecto.

ActivatedShortcutOptions

• clear -> boolean -> Si es verdadero, cuando nosotros usemos el método en cuestión para obtener la información de por donde ha entrado el usuario, una vez recuperemos dicha lista de acciones, está lista será eliminada.

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 sin más, me despido ya. Espero haberte ayudado y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!