WheelSelector Ionic - Úsalo cómo un profesional

¿Pensando en realizar una implementación de la librería WheelSelector Ionic en tu aplicación? O, quizás ya sabes cómo se hace, pero aún te falta conocer algún detalles sobre alguna función o campo de clase para terminar de echarla a andar ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo te enseñaré a realizar, de manera práctica y aplicable, la instalación, integración y configuración del componente WheelSelector.

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 WheelSelector Ionic

En sí, se trata de un picker, o select, que nos permitirá agregar varias columnas de selección y luego recuperar esto datos. Veamos un pequeño vídeo que he sacado del curso para que veáis a que me refiero si es que no lo conocéis:

[video width="1920" height="1080" mp4="https://como-programar.net/wp-content/uploads/2020/09/Vdeo_nuevo_.mp4"][/video]

Instalación de WheelSelector en Ionic

Cómo todos los componentes que están desacoplados del core del sistema, necesitamos instalarlo. Para ello vamos a utilizar las dos siguientes líneas de consola:

$ ionic cordova plugin add cordova-wheel-selector-plugin
$ npm install --save @ionic-native/wheel-selector@4

La primera instalará el plugin de Cordova para la comunicación con la parte nativa del sistema donde se esté ejecutando nuestra app.

La segunda será el código que hará de puente entre el plugin y el código de nuestra app.

Configuración del módulo

Para que podamos utilizar este componente en nuestra app, necesitamos agregarlo a los providers de nuestro componente. Lo haremos de la siguiente manera:

providers: [

…,

WheelSelector,

…

]

Recuerda que no será necesario agregarlo a los providers globales que están en “AppModule.ts”. Es mejor opción ponerlos en el módulo del componente que los vaya a usar.

De esta manera incurrimos en buenas prácticas de desarrollo y en un mejor rendimiento de nuestra app.

Plataformas que soporta WheelSelector

Las plataformas soportadas por este módulo, aunque obvias, serán las siguientes:

• Android
• iOS

Al tratarse de un selector móvil, lo normal es que solo se pueda usar en el móvil.

Cómo se usa WheelSelector en Ionic

Vamos a pasar a lo que interesa, sabes cómo rula esto del WheelSelector. Pero antes, y cómo os tengo acostumbrados, veamos previamente un ejemplo de código y luego lo comentamos.

import { WheelSelector } from '@ionic-native/wheel-selector';


constructor(private selector: WheelSelector) { }

...

const jsonData = {
  numbers: [
   { description: "1" },
    { description: "2" },
    { description: "3" }
  ],
  fruits: [
    { description: "Pera" },
    { description: "Plátano" },
    { description: "Mandarina" }
  ],
  firstNames: [
    { name: "Aitor", id: '1' },
    { name: "Mari", id: '2' },
    { name: "Lorena", id: '3' },
    { name: "Manolo", id: '4' },
    { name: "Jose", id: '5' }
  ],
  lastNames: [
    { name: "Martínez", id: '100' },
    { name: "Pérez", id: '101' },
    { name: "Sánchez", id: '102' },
    { name: "García", id: '103' },
    { name: "Jiménez", id: '104' }
  ]
};

...

// Una selección de número básica, el índice será lo que se capture desde el resultado.
 selectANumber() {
   this.selector.show({
     title: "¿Cuantos?",
     items: [
       this.jsonData.numbers
     ],
   }).then(
     result => {
       console.log(result[0].description + ' at index: ' + result[0].index);
     },
     err => console.log('Error: ', err)
     );
 }

 ...

 // Una selección básica, Los valores por defecto serán: '3' 'Plátano'
 selectFruit() {
   this.selector.show({
     title: "¿Cuanta?",
     items: [
       this.jsonData.numbers, this.jsonData.fruits
     ],
     positiveButtonText: "Ok",
     negativeButtonText: "Nope",
     defaultItems: [
       {index:0, value: this.jsonData.numbers[2].description},
       {index: 1, value: this.jsonData.fruits[3].description}
     ]
   }).then(
     result => {
       console.log(result[0].description + ' ' + result[1].description);
     },
     err => console.log('Error: ' + JSON.stringify(err))
     );
 }

 ...

//Algo un poco más elaborado, pruébalo
 selectNamesUsingDisplayKey() {
   this.selector.show({
     title: "Who?",
     items: [
       this.jsonData.firstNames, this.jsonData.lastNames
     ],
     displayKey: 'name',
     defaultItems: [
       {index:0, value: this.jsonData.firstNames[2].name},
       {index: 0, value: this.jsonData.lastNames[3].name}
     ]
   }).then(
     result => {
       console.log(result[0].name + ' (id= ' + this.jsonData.firstNames[result[0].index].id + '), ' +
         result[1].name + ' (id=' + this.jsonData.lastNames[result[1].index].id + ')');
     },
     err => console.log('Error: ' + JSON.stringify(err))
     );
 }

1. Importamos la clase WheelSelector del paquete “@ionic-native/wheel-selector”.
2. Inyectamos una instancia a través del constructor de nuestra clase.
3. Creamos la estructura de datos que se mostrarán en el picker.
4. Creamos las funciones correspondientes que serán llamadas desde la vista HTML. (Podrán ser llamadas, por ejemplo, desde el clic de un botón)
   1. selectANumber()
   2. selectFruit()
   3. selectNameUsingDisplayKey()
5. Controlaremos la promesa ya que en ella llegarán los datos que el usuario ha seleccionado y listo. Ya lo tenemos funcionando.

Este es un ejemplo de código muy sencillo, pero totalmente funcional y útil en caso de que le cambies los datos por los que tú quieras.

Funciones y campos de clase de WheelSelector Ionic

Ahora vamos a pasar a profundizar un poco más, para que puedas extender su funcionalidad tanto cómo necesites, y nos permita el sistema. Aunque siempre podemos extenderla nosotros un poco más.

En este caso solo contamos con dos funciones y una interfaz. Recuerda que solo mostraré funciones propias. Si alguna está en el padre, aquí no aparecerá.

show(options)

• Parámetros:
  • options : WheelSelectorOptions -> Será la configuración que queremos dar al selector. Un poco más abajo veremos los campos que tiene.
• Retorna una promesa que hay que controlar. En caso de que todo haya ido bien se resolverá y con ella llegarán los datos.
  • Los datos llegan en una interfaz llamada: WheelSelectorData que ahora veremos sus campos más abajo también.

Básicamente, hace que se muestre el selector en nuestro dispositivo con los datos que le hemos facilitado.

hideSelector()

• Solo está disponibles para iOS.
• No recibe parámetros.
• Retorna una promesa que tendremos que controlar.

Fuerza que el selector se esconda. En Android no será necesario ya que pulsaremos fuera y se esconderá. En iOS será necesario hacerlo explícitamente en algunas ocasiones.

WheelSelectorOptions

Cómo hemos visto arriba, veamos los campos que tiene:

• title: string -> Será el nombre que tomará el selector cuando esté abierto.
• items: WheelSelectorItem[][] -> Cómo hemos visto en el ejemplo, será un array con el contenido que queremos que muestre el selector. (WheelSelectorItem, será una interfaz construida por nosotros)
• defaultItems: DefaultItem[] (opcional) -> Serán los objetos que serán mostrados por defecto. (DefaultItem, será una interfaz construida por nosotros)
• positiveButtonText: string (opcional) -> Será el texto que tome el botón positivo a la hora de mostrarse.
• negativeButtonText: string (opcional) -> Será el texto que tome el botón negativo a la hora de mostrarse.
• theme: string (opciona) -> Será un enumerado en el que ahora veremos los posibles. Solo estará disponible para Android.
  • light
  • dark
• wrapWheelText: boolean (opcional) -> Solo estará disponible para Android y nos permitirá cambiar la estética de este para que se parezca más al de iOS. Por defecto: false.
• displayKey: boolean (opcional) -> En caso de que sea verdadero, mostrará la key de los pares asignados cómo valores.

WheelSelectorData

Cómo he dicho antes, vamos a ver los campos que aquí llegan. Aunque en realidad solo tenemos uno y llegará con los datos de las interfaces que nosotros hemos creado y enviado a través del options del método show().

• data: WheelSelectorItem -> El objeto que el usuario a seleccionado que nosotros hemos creado y enviado cómo parámetro.

Tutorial en video por si no te gusta leer

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, espero haberte ayudado a comprender este componente y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!