DEV Community: Alfredo Bautista 💙 #FlutterConf20

Conociendo las listas en Dart

Alfredo Bautista 💙 #FlutterConf20 — Mon, 06 Apr 2020 15:15:25 +0000

¡Buenas a todos! En este post conoceremos un poco más la clase List para trabajar de forma más sencilla y eficiente con ella.

Single Level of Abstraction (SLA) 🔮

SLA o principio de mismo nivel de abstracción nos indica, que en un código limpio, no debe mezclar instrucciones de alto nivel con instrucciones de bajo nivel en la implementación de nuestra lógica. Esta norma genera código que es legible y entendible al no mezclar niveles de profundidad dentro de un mismo método o fragmento de código.

Podemos diferenciar entre estructuras de bajo nivel o alto nivel cuando nuestro código debe utilizar índices numéricos, bucles for y while, comprobación manual de propiedades, etc.

Estructuras de alto nivel pueden ser métodos descriptivos que cumplan una función específica como la búsqueda por nombre, la ordenación por un criterio o el filtrado de datos.

Un ejemplo claro de estructuras de bajo nivel es la implementación de una búsqueda por nombre de un usuario, en un Array, usando bucles con índices y redirección de flujo. En este caso en Java.


 public User userByName(User[] array, String name) {

       User user = null;

        for (int i = 0; i < array.length; i++) {
             if(array[i].name == name){
                user = array[i];
                break;
            }
        }

        return user;
    }

En los lenguajes de alto nivel ya tenemos métodos, creados por los desarrolladores del lenguaje, para que podamos simplificar estos procesos y escribir todo nuestro código en un nivel alto de abstracción, sin tener que trabajar con estructuras de bajo nivel. Aquí tenemos una búsqueda, por nombre de usuario, en una lista usando estructuras de alto nivel, escrito en Dart.

 User userByName(List<User> array, String name){
     return array.firstWhere((User user) => user.name == name);
  }

Métodos útiles de Listas de Dart

Ahora que ya hemos visto porque utilizar funcionalidades del propio lenguaje que tener que codificarlo nosotros, vamos a ver qué métodos útiles nos da List en Dart.

map

El método map nos devuelve un nuevo iterable, con el resultado que le asignemos en el callback, que le pasamos al método. En este caso, queremos una lista que nos indique: Username: + nombre del usuario

List<String> nameOfUsers = users.map((user) => 'Username: ' + user.name).toList();

print(nameOfUsers); // [Username: Alfredo, Username: pepito, Username: Otro]

where y firstWhere

Los métodos de búsqueda o filtro where y firstWhere nos devuelven un iterable o ítem, que cumpla con el criterio indicado en la callback.

var usersOlderThan18 = users.where((user) => user.age >= 18).toList();

var firstUserOlderThan18 = users.firstWhere((user) => user.age >= 18);

contains

Este método nos devuelve un boolean indicando, si la lista contiene el mismo ítem que le pasamos por parámetro. Es importante recalcar que debe ser la misma instancia, no un ítem que sea igual.

Por ejemplo, este código nos devuelve false

 List<User> users = [User(name: 'Alfredo'), User(name: 'Pepito')];

 print(users.contains(User(name: 'Alfredo'))) // false;

este código nos devuelve true al ser la misma instancia

var usuario = User(name: 'Usuario');

users.add(usuario);

print(users.contains(usuario)) // true;

any

Nos devuelve un boolean, indicando si algún ítem cumple el criterio especificado en la callback.

users.any((user) => user.age > 18);

remove, removeAt, removeWhere

Estos métodos nos sirven para eliminar ítems de nuestra lista, es importante recalcar que muta o modifica la lista original, algunos ejemplos de ello:

remove: Nos permite eliminar el ítem pasándole la misma instancia por parámetro, como hemos visto anteriormente, debe ser el mismo ítem, no uno igual.

var userTemp = users[0];

users.remove(userTemp);

removeAt: Nos permite eliminar el ítem sabiendo su posición, sin necesidad de tener la instancia del mismo.

users.removeAt(0);

removeWhere: Este último nos permite eliminar el ítem sin necesidad de tener su instancia o conocer su posición. Eliminará todos los elementos que cumplan con la condición de la callback.

users.removeWhere((user) => user.name == 'Alfredo');

sort

Este método nos permite ordenar las listas, para ello utiliza Comparator si el ítem lo contiene o podemos pasarle en la callback la función que va a utilizar para saber cómo ordenar los elementos.

Hay clases del lenguaje que ya contienen un comparador y puede ordenar las listas automáticamente, como por ejemplos los números.

List<int> nums = [13, 2, -11];
nums.sort();
print(nums);  // [-11, 2, 13]

Si no tenemos Comparator implementado debemos retornar un integer en la callback con la siguiente especificación:

Sí se debe ordenar por encima, un valor positivo.
Sí son iguales un 0.
Sí es menor un valor negativo.

List<User> users = [User(name: 'Alfredo', age: 22), User(name: 'Pepito', age: 19), User(name: 'Otro', age: 25)];

users.sort((userA, userB) => userA.age >= userB.age ? 0 : 1);

print(users); // [Otro, Alfredo, Pepito]

Si queremos que estén ordenados de menor a mayor:


users.sort((userA, userB) => userA.age >= userB.age ? 1 : 0);

print(users); // [Pepito, Alfredo, Otro]

indexWhere

Este método nos devuelve el indice del ítem que cumpla la condición del callback, es muy útil para buscar cuándo no tenemos la instancia del objeto y queremos su posición.

users.indexWhere((user) => user.name == 'Alfredo');

Propiedades útiles

En la clase List tenemos propiedades interesantes como reversed que nos devuelve un iterador con el contenido de la lista en un orden inverso.


List <User> usersInverted = users.reversed.toList();

users // Alfredo, Pepito, Otro
usersInverted // Otro, Pepito, Alfredo

U otras como isEmpty o isNotEmpty que nos devuelve un boolean, indicando si la lista contiene algún elemento.

💡 Tip: construir una lista inmutable

En Dart, tenemos el keyword final que nos permite indicar que una variable no va a cambiar de tipo, pero esto no nos asegura la integridad de una lista. Al añadir o quitar un elemento la lista sigue teniendo el mismo tipo aunque su contenido haya cambiado.

final List<User> users = [User(name: 'Alfredo', age: 22), User(name: 'Pepito', age: 19), User(name: 'Otro', age: 25)];

users.add(User(name: 'Nuevo', age: 17));

users // [Alfredo, Pepito, Otro, Nuevo];

Para evitar esto tenemos el constructor List.unmodifiable que restringe que nuestra lista no permita añadir o remover elementos.

final List<User> users = List.unmodifiable([User(name: 'Alfredo', age: 22), User(name: 'Pepito', age: 19), User(name: 'Otro', age: 25)]);

users.add(User(name: 'Nuevo', age: 17)); // Uncaught Error: Unsupported operation: add

users.removeAt(0); // Uncaught Error: Unsupported operation: removeAt

Resumen

Con estos pocos métodos y utilidades podremos trabajar de una forma más rápida y generando código sencillo de leer y mantener usando las listas.

En este enlace os dejo toda la documentación de la clase List en el momento de escribir el post.

Recordad que usando extensions methods introducidos en Dart 2.7 podemos implementar nuestros propios métodos en la clase List y así mejorar la simplicidad de nuestro código, os dejo este enlace por si no conocéis las extensiones en Dart.

¡Un saludo y hasta la próxima!

Deploy NestJS en Heroku Dyno

Alfredo Bautista 💙 #FlutterConf20 — Sun, 29 Mar 2020 16:13:53 +0000

¡Buenas a todos! En este post vamos a ver como desplegar nuestra aplicación hecha usando NestJS en heroku y con una base de datos MySQL en otro proveedor.

NestJS

¿Que es NestJS? Es un framework sobre NodeJS que usa TypeScript. Trabaja a través de decoradores, tiene inyección de dependencias «inspirada» en Angular y permite modularizar nuestras aplicaciones.

En resumidas cuentas, es un Framework que, a través de sus herramientas, nos permite un desarrollo más ágil de nuestro backend. Tiene una gran documentación y muchos ejemplos prácticos.

Si queréis conocer más de él, os recomiendo la charla de Carlos Caballero en el DevFest de Málaga, donde explica bastantes conceptos del framework. Aquí tenéis el vídeo.

Heroku

Heroku es una plataforma de cloud computing donde puedes alquilar servidores para poder desplegar tus aplicaciones. Tiene un producto llamado Heroku dyno donde nos provee de instancias gratuitas para el despliegue de aplicaciones con Buildpacks. Los cuales tienen una configuración básica por lenguaje para el despliegue de las aplicaciones.

Tenéis toda la información aquí.

¿Porque he usado Heroku?

En mi caso, voy a desplegar un proyecto que no va a producción, es un proyecto académico y por lo tanto me viene mejor que el despliegue sea gratuito.

El "problema" viene cuando quieres desplegar además una base de datos. Heroku tiene add-ons, que nos permite desplegar complementos a nuestros servidores. Para desplegar una base de datos SQL tenemos ClearDB que tiene un plan gratuito pero necesita la introducción de una tarjeta de crédito. Por lo que buscando encontré esta web que nos permite tener varias bases de datos MySQL gratuitas en la nube.

Manos a la obra

NestJS al estar basado en NodeJS podemos seguir el tutorial de heroku para el despliegue de aplicaciones hechas en NodeJS con algunos cambios que veremos a continuación.

Desplegar nuestro código

Para subir nuestro código a la instancia que hayamos creado, debemos crear un repositorio local y añadir los cambios de nuestros ficheros. Después de ejecutar el comando

$ heroku create

Nos habrá creado una rama remota donde podremos subir nuestros cambios al repositorio que ha creado Heroku y el que usará para descargar nuestro código en nuestro servidor.

Un pequeño tip es que podéis elegir el dns que va a usar nuestra aplicación indicando un nombre a continuación de heroku create. Si está libre nos dejará usarlo y si no, nos pedirá que introduzcamos otro. De todas formas este nombre siempre puede ser cambiado.

Variables de entorno

Debemos conocer que Heroku hará un mapeo de puertos para que nuestra aplicación sea accesible desde el exterior, por lo que no podremos definir de forma estática el puerto por el que escuchará nuestra aplicación. En JS podemos solucionarlo con esta condicional:

const PORT = process.env.PORT || 3000

Que nos permitirá mantener nuestro puerto de desarrollo y cogerá dinámicamente el puerto que le asigne Heroku.

Siguiendo con las variables de entorno debemos también configurar nuestra aplicación, que puede ser de forma estática o dinámica.

En el caso de elegir dinámica, por su flexibilidad, disponemos de una instrucción del CLI de Heroku que nos permite añadir variables de entorno a nuestro despliegue, en el caso de utilizar por ejemplo TypeORM en nuestro NestJS podriamos definir algo así:

$ heroku config:set TYPEORM_USERNAME=user TYPEORM_PASSWORD=pass

O desde nuestro perfil de administración de nuestro despliegue, en el apartado de Settings > Config Vars.

Procfile

Procfile es el fichero que usa Heroku para conocer que comandos debe ejecutar en el contenedor para iniciar nuestra aplicación. En nuestro caso, con NestJS, en el package.json, contiene la siguiente línea:

"scripts": {
    ...
    "start:prod": "node dist/main",
    ...
  },

Que es el que debemos indicar en nuestro Procfile, que es el comando que arrancará nuestro servidor en modo producción.

web: npm run start:prod

Con esta simple instrucción, Heroku instalará los paquetes necesarios y a continuación ejecutará ese comando para iniciar el servidor. En este fichero podemos indicar cualquier comando o la ejecución de algun fichero.

Escalamos el servidor

Para publicar nuestro servidor,el CLI de Heroku nos trae el siguiente comando

$ heroku ps:scale web=1

Con el que podremos escalar las instancias de nuestros servidores, en este caso que es gratuita solo podemos escalar a una instancia.

Conexión con la base de datos

Con los pasos anteriores ya tendremos nuestra aplicación desplegada y accesible, pero nos falta la conexión con la base de datos para que sea totalmente funcional. Para ello vamos a la web de remotemysql.com y creamos un perfil. Tened en cuenta que necesitamos confirmar el correo.

A continuación, procedemos a crear una base de datos y nos dará credenciales y dirección para que podamos acceder a ella. Esta información deberemos introducirlas en nuestras variables de entorno o estáticamente en la configuración del servidor para que se puedan comunicar.

Limitaciones

Tanto en la plataforma de Heroku como en la plataforma de mysql remote tienen algunas limitaciones que debemos tener en cuenta:

En heroku, después de 30 minutos de inactividad, nuestra aplicación entrará en modo reposo y será activada cuando haya una nueva petición. En aplicaciones pesadas, el tiempo de carga de nuevo del servidor puede ser desesperante.
Solo 2 procesos por instancia en Heroku Dyno.
RemoteMysql solo permite un tamaño máximo de 5 MB por lo que puede ser muy corto dependiendo del contexto de la aplicación
Ninguna configuración en el servidor tanto de Heroku como de RemoteMysql

Ventajas

Como gran ventaja, esta combinación de servicios nos puede proporcionar un despliegue de una aplicación no profesional de forma gratuita y usable sin la necesidad de gestión de servidores o configuración de dominios.

Resumen

Como resumen global, diría que estas dos plataformas nos dan una gran oportunidad para que aplicaciones normalmente probadas y desarrolladas en local puedan ser accesible por más personas y compartidas de una forma mucho más sencilla. Es una gran opción para proyectos de aprendizaje y proyectos que estén empezando.

¡Un saludo a todos y nos vemos en la próxima!

NoSQL en Flutter

Alfredo Bautista 💙 #FlutterConf20 — Fri, 27 Mar 2020 17:20:27 +0000

¡Buenas a todos! En este post veremos como usar una base de datos NoSQL en Flutter para guardar información de forma persistente.

SharedPreferences vs NoSQL databases

Muchos que hayáis estado trabajando/jugando con Flutter conoceréis que se recomienda el uso del paquete shared_Preferences para guardar información en formato clave-valor del usuario.

En mi caso, trabajando en un proyecto para utilizar Flutter en Mobile, web y desktop, encontré un problema para usarlo. En SO Linux no está soportado todavía por lo que debía encontrar otra solución. En ese momento encontré Sembast.

Sembast

Sembast es un paquete que nos permite trabajar con bases de datos NoSQL. Este paquete tiene bastantes versiones estables y un buen rating global sobre la estabilidad del mismo.

Para instalarlo únicamente deberemos añadirlo en nuestro pubspec.yaml

sembast: ^2.3.0

Planteamiento del problema

En mi aplicación necesitaba guardar el token de autentificación del usuario al hacer login y poder recuperarlo por cada petición que tuviera que hacer al backend.

Sembast en Web

En el día que escribo el artículo sembast tiene un paquete independiente para web pero que no voy a utilizar porque no permite la elección de la clave para guardar datos, debes recoger la clave al guardar el dato y usarla cuando quieras recuperarlo. Por esta razón voy a usar shared_preferences o sembast dependiendo de la plataforma donde corre.

Utilización

Este paquete nos provee de métodos para el acceso y guardado de datos NoSQL. En mi caso, he creado una clase TokenProvider estática para poder acceder al token y guardarlo sin tener que estar creando instancias del mismo y a la vez permitiendo diferenciar la plataforma donde corre y elegir que paquete usar. Empezamos indicando el fichero donde va a guardar la información.

import 'package:sembast/sembast.dart';
import 'package:sembast/sembast_io.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

class TokenProvicer{
  static final String dbPath = 'token.db';
  static final DatabaseFactory dbFactory = databaseFactoryIo;
}

Con esto tenemos indicado donde va a guardar la información y un objeto propio del paquete que nos permite trabajar con las bases de datos que le indiquemos.

Guardar el token

Para guardar el token simplemente he creado un método que recibe el token como String, abre una "conexión" a la base de datos, ya que es en local, y obtiene un store

Teniendo ya nuestra colección o store podemos proceder a guardar el token de forma asíncrona. El paquete nos proporciona un método record donde indicaremos su clave y con el método put indicamos su base de datos y lo que queremos guardar.

static __saveTokenMobilDesktop(String token) async {
    Database db = await dbFactory.openDatabase(dbPath);
    var store = StoreRef.main();

    await store.record('token').put(db, token);
  }

En el caso de correr en web y no poder utilizar este paquete

static __saveTokenWeb(String token) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    await prefs.setString('token', token);
  }

Y el método que expone y decide cómo guardar el token

static saveToken(String token) {
    kIsWeb ? __saveTokenWeb(token) : __saveTokenMobilDesktop(token);
  }

Recuperar el token

Teniendo la información guardada, únicamente debemos acceder a ella para poder leer el token y hacer las peticiones. En este caso, creamos otro método que no recibe parámetros y devuelve el token con el que vamos a hacer la petición.

static __loadTokenMobilDesktop() async {
    Database db = await dbFactory.openDatabase(dbPath);
    var store = StoreRef.main();

    return await store.record('token').get(db) as String;
  }

En el caso de usar shared_preferences.

  static __loadTokenWeb() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    return prefs.getString('token');
  }

Y el método que expone y decide.

static loadToken() {
    return kIsWeb ? __loadTokenWeb() : __loadTokenMobilDesktop();
  }

Uso en nuestra aplicación

Teniendo la clase creada, solo debemos referenciarla cuando vayamos a guardar el token, por ejemplo:

await loginProvider.login();
TokenProvicer.saveToken(loginProvider.token);

Y donde vayamos a hacer la petición.

this.token = await TokenProvicer.loadToken();
final response = await http.get(
      this.endPoint + username,
      headers: {'Authorization': 'Bearer $token'}
      );

Conclusión

Sembast es un paquete muy sencillo y estable para el manejo de bases de datos NoSQL aunque tenga la limitación de que en su parte web todavía no ofrece las mismas funcionalidades que en Mobile o Desktop.

Os animo a echarle un vistazo en su repo donde encontraréis muchos más ejemplos y características del paquete. También agradecer a la organización que ha creado y mantiene el paquete tekatrik

¡Un saludo y hasta la próxima!