Aitor Sánchez - Blog - Nov. 2, 2023, 10:32 a.m.
¿Buscando la manera de guardar datos, entre sesiones, dentro del dispositivo de tu usuario desde tu app y has pensado en App Preferences Ionic? O, quizás ya sabes cómo se hace, pero te falta algún detallito que conocer para hacerla funcionar correctamente ¿verdad?
Mi nombre es Aitor Sánchez y soy desarrollador de apps desde el 2014. Y, en este artículo vas a aprender a almacenar datos en la memoria no volatil del dispositivo y que puedan ser recuperados entre diferentes sesiones de tu usuario.
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!
Básicamente, es una biblioteca que nos permite el acceso, tanto de lectura cómo de escritura, para que podamos editar preferencias de la aplicación. Nos permite almacenar objectos en clave key:value de una manera sencilla e intuitiva cómo veremos a continuación.
Cómo cualquier otro módulo externo al core del sistema, necesitamos instalarlo para que lo podamos utilizar en nuestra app. Para ello vamos a utilizar la dos siguientes líneas de consola:
$ ionic cordova plugin add cordova-plugin-app-preferences
$ npm install @awesome-cordova-plugins/app-preferences
La primera instalará el plugin de Cordova que nos permitirá la comunicación con la parte nativa del sistema donde estemos ejecutando la app.
La segunda instalará el código TS necesario para que desde nuestro código podamos comunicarnos con el plugin.
Del mismo modo que en el punto anterior, necesitamos realizar la configuración de dicho módulo. Para ello nos dirigimos a nuestro archivo "app.module.ts" y agregaremos los siguiente:
import { AppPreferences } from '@awesome-cordova-plugins/app-preferences/ngx';
...
providers:[
...,
AppPreferences,
...
]
...
Recuerda, si únicamente vas a usar las preferencias en una parte de la aplicación, es recomendable que incluyas la clase en los providers de dicho componente. De esta manera ahorramos rendimiento y recursos aumentando así la experiencia de usuario dentro de la app.
Las plataformas donde podemos hacer uso de esta librería son las siguientes:
La verdad que cuando lo he visto me he quedado bastante impresionado. Aunque también es verdad, que la funcionalidad nativa que aporta esta librería es prácticamente nula a excepción del almacenamiento del archivo que guarda nuestras preferencias.
Ya llegamos a la chicha, a lo que nos interesa. Pero, y cómo en todos los tutoriales de este curso de Ionic, vamos a ver un ejemplo de código funcional y luego comentamos sobre él. Vamos con ello.
import { AppPreferences } from '@awesome-cordova-plugins/app-preferences/ngx';
constructor(private appPreferences: AppPreferences) { }
...
this.appPreferences.store("key_saved", "valor de key_saved").then(()=>{
this.appPreferences.fetch('key_saved').then((res) => { console.log(res); });
})
En primer lugar, importaremos la clase "AppPreferences" del paquete "@awesome-cordova-plugins/app-preferences/ngx" que nos permitirá trabajar con dicha clase.
Posteriormente inyectaremos una instancia de la esta clase mediante el constructor. Recordad que si no hemos agregado la clase a los providers del module en cuestión, o el module de la app, la inyección fallará.
Ahora, mediante el método "store" guardaremos el valor "valor de key_saved" asociado a la key "key_saved".
Y, posteriormente, mediante el uso de la función "fetch" recuperaremos el valor asociado a la key "key_saved". Para hacerlo, controlaremos la promesa y con ella llegará le valor guardado, en este caso la variable "res".
¿A qué es sencillo? Espero que lo hayas entendido bien. Pues con este ejemplo, tienes un código totalmente funcional para agregar a tus aplicaciones cuando quieras. Ahora pasaremos a ver los métodos y campos de clase.
En esta sección profundizaremos un poquito más en los campos y las funciones que tenemos disponibles. Te recuerdo que no se incluirán los campos/funciones de los padres, únicamente los de la clase en sí misma.
Nos permite obtener el valor guardado asociado a la key que le pasamos cómo parámetro.
Retorna una promesa que tenemos que controlar, con ella llegará el valor en caso de que esté registrado previamente, o null en caso de que no se haya registrado.
Esta función nos permite guardar un valor, asociado a una key, dentro del sistema.
Retorna una promesa que tenemos que controlar, con ella no llegará nada, pero nos permitirá conocer cuando ha terminado de realizarse la acción.
Cómo intuirás, nos permite eliminar el par que tengamos guardado mediante su key.
Nos permite eliminar del sistema todas las preferencias que tengamos almacenadas.
Retorna una promesa que tenemos que controlar, con ella no llegará nada, pero nos permitirá conocer cuando ha terminado de realizarse la acción.
Nos permite mostrar las preferencias nativas que hay almacenadas en el sistema asociadas a la aplicación.
Retorna una promesa que tenemos que controlar, con ella no llegará nada, pero nos permitirá conocer cuando ha terminado de realizarse la acción.
Muestra las preferencias nativas del sistema que estén asociadas a la aplicación.
Retorna un observable al que nos podemos suscribir para conocer cuando ha habido cambios en las preferencias.
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. Espero haberte ayudado con la persistencia de datos que necesitas y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!