¿Pensando en implementar 3D Touch Ionic en tu aplicación? O, quizás, ya sabes cómo se hace y lo que quieres es aclarar algún concepto o revisar una función o campo de la clase ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo te explicaré de una manera rápida y concisa cómo puedes comenzar a usar 3D Touch en tus apps 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.
Y ahora si, comenzamos. Let´s go!
¿Qué es 3D Touch Ionic?
Desde hace algunas versiones de iOS, cuando mantenemos pulsado el icono (o lo pulsamos con más fuerza de lo normal) de una aplicación desde el menú de aplicaciones del propio sistema, aparece un menú desplegable con varias opciones. Es cierto que en cada dispositivo tiene un estilo diferente pero las opciones son las mismas. Pues estas opciones son los 3D Touch y es lo que vamos a agregar y a controlar desde nuestro código en este tutorial. Sigamos.
Instalación del componente
Para realizar la instalación tenemos que introducir las siguientes dos líneas en consola:
ionic cordova plugin add cordova-plugin-3dtouch
npm install --save @ionic-native/three-dee-touch@4
La primera línea instalará el plugin que hace de puente entre la parte nativa del sistema y nuestro código TS. Y la segunda línea incorpora el código TS necesario para comunicarte con desde tu código con el plugin de Cordova.
Plataformas soportadas por el módulo
Cómo intuirás, si has leído el punto "¿Qué es 3D Touch Ionic?", solo lo tenemos disponible para una plataforma:
- iOS
Cómo se usa 3D Touch Ionic
Llegamos al punto interesante del artículo. Ahora vamos a ver un ejemplo de código completo y posteriormente explicaré que es lo que hemos hecho. Vamos allá:
import { ThreeDeeTouch, ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from '@ionic-native/three-dee-touch';
constructor(private threeDeeTouch: ThreeDeeTouch) { }
...
this.threeDeeTouch.isAvailable().then(isAvailable => console.log('3D Touch available? ' + isAvailable));
this.threeDeeTouch.watchForceTouches()
.subscribe(
(data: ThreeDeeTouchForceTouch) => {
console.log('Force touch %' + data.force);
console.log('Force touch timestamp: ' + data.timestamp);
console.log('Force touch x: ' + data.x);
console.log('Force touch y: ' + data.y);
}
);
let actions: Array<ThreeDeeTouchQuickAction> = [
{
type: 'checkin',
title: 'Check in',
subtitle: 'Quickly check in',
iconType: 'Compose'
},
{
type: 'share',
title: 'Share',
subtitle: 'Share like you care',
iconType: 'Share'
},
{
type: 'search',
title: 'Search',
iconType: 'Search'
},
{
title: 'Show favorites',
iconTemplate: 'HeartTemplate'
}
];
this.threeDeeTouch.configureQuickActions(actions);
this.threeDeeTouch.onHomeIconPressed().subscribe(
(payload) => {
// returns an object that is the button you presed
console.log('Pressed the ${payload.title} button')
console.log(payload.type)
}
)
Recordad, esto es un código de ejemplo, está escrito de manera didáctica por lo que es recomendable que no lo uses directamente en tus aplicaciones.
Bien, en primer lugar, vamos a importar las clases ThreeDeeTouch, ThreeDeeTouchQuickAction y ThreeDeeTouchForceTouch del paquete "@ionic-native/three-dee-touch"
Posteriormente, a través del constructor, inyectaremos una instancia de "ThreeDeeTouch".
Ahora vamos a controlar la promesa que devuelve la función "isAvailable". Dicha promesa traerá consigo un booleano para conocer si, efectivamente, podemos hacer uso de él y está activado el servicio.
La función "watchForceTouches" nos permite suscribirnos mediante un "observable" para conocer la fuerza con la que el usuario ha pulsado sobre el WebView de nuestra aplicación. A parte del tiempo, en milisegundos, de cuando lo ha hecho y la posición sobre los ejes X e Y donde la ha realizado, la pulsación.
El array de "ThreeDeeTouchQuickAction" contendrá en su interior las opciones que contendrá el menú que aparecerá en la lista de aplicaciones cuando mantengamos el icono de la aplicación pulsado, cómo hemos comentado previamente. Más abajo en este artículo podrás ver que campos, y que hace cada uno, tiene esta clase. En este caso las acciones serán "Check in", "Share", "Search" y "Show favorites".
"configureQuickActions" nos permite enviarle al sistema las acciones que hemos configurado previamente para que las registre. A partir de aquí, si cerrásemos la app e hiciéramos un long touch en el icono de nuestra app, ya aparecerían dichas opciones en el menú desplegable.
Por último, "onHomeIconPressed" nos devuelve un observable al que nos suscribimos para conocer cuando un usuario ha accedido a la app. Y, más concretamente, si ha sido desde una de las opciones del menú o directamente desde el icono de la app. Dentro del Payload, cómo veremos en la sección de campos ahora mismo, se encuentra la información que hemos preconfigurado para poder identificar la acción que debemos hacer.
¿Más o menos has entendido cómo se utiliza? La verdad que bastante intuitivo el concepto. Si tienes cualquier duda, déjamela en los comentarios y vemos a ver qué podemos hacer. Sigamos.
Funciones y campos de clase
Cómo en todos los tutoriales comento, solo hablaremos de las funciones y campos de la clase en sí misma, los heredados no se tratarán aquí ya que tendrán su propio artículo de clase.
isAvailable()
Esta función, cómo hemos explicado en el ejemplo, devolverá una promesa que tenemos que controlar. Dentro de la promesa llegará un booleano que nos permitirá conocer si el servicio 3D Touch Ionic está disponible o no. Así podemos conocer cuando podemos hacer uso de él.
watchForceTouoches()
También comentada en el ejemplo, nos permite conocer la presión con la que un usuario ha tocado nuestro webview. A parte del tiempo, en milisegundos, exacto y la coordenadas X e Y donde la ha realizado. Devuelve un observable al que nos tenemos que suscribir para recibir toda esta información. Cada vez que el observable es llamado, llevará una instancia de "ThreeDeeForceTouch" que es la interface que contiene dichos datos.
configureQuickActions(actions)
También lo hemos visto en el ejemplo. Nos permite definir cuáles van a ser las opciones que queremos mostrar en el menú desplegable. Esta función no devolverá nada.
- actions -> Array<ThreeDeeTouchQuickAction> -> Las acciones que queremos que aparezcan en el menú.
onHomeIconPressed()
La clave del sistema. Nos permite controlar cuando un usuario ha abierto la aplicación desde uno de los iconos del menú desplegable, o desde el mismo icono de la aplicación, para que podamos controlar las acciones a realizar. Devuelve un observable al que tenemos que suscribirnos y con cada llamada llega una instancia de la clase "ThreeDeeTouchQuickAction".
enableLinkPreview()
Dependiendo de la versión del sistema operativo, y de la configuración del dispositivo del usuario, al utilizar dicha función permitirá al usuario realizar una preview del contenido que va a visualizar antes de pulsar el icono del menú desplegable. Algo así como los enlaces de la Wikipedia, solo con poner le ratón encima te "resume" lo que vas a ver si entras en él.
disableLinkPreview()
Fuerza a que la visualización del preview no pueda realizarse.
Y ahora vamos con las clases/interfaces que hemos estado viendo a lo largo del artículo. Así todo te quedará mucho más claro:
ThreeDeeTouchQuickAction
Los campos internos que tiene esta clase son:
- type -> string -> Se definiría cómo el ID que nosotros utilizaremos para identificar sobre que icono del menú ha pulsado el usuario.
- title -> string -> El título de la opción del menú.
- subtitle -> string -> El subtítulo de la opción del menú.
- iconType -> string -> El tipo de icono que queremos que muestre la opción del menú. (Puedes verlos todos aquí)
- iconTemplate -> string -> Será la tura de un icono propio que tengas dentro de tu aplicación.
ThreeDeeTouchForceTouch
Los campos internos que tiene esta interfaz son:
- force -> number -> La fuerza del pulsado en porcentaje de 0 - 100 % (Solo se activará si el usuario supera el 75% del umbral de pulsación).
- timestamp -> number -> El tiempo, en milisegundos, cuando el usuario ha realizado la pulsación.
- x -> number -> La coordenada en el eje X
- y -> number -> La coordenada en el eje Y
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.
Sin nada más que agregar me despido ya geniete. Nos vemos en el siguiente artículo y hasta entonces ¡que te vaya bien!