Cree una interfaz de usuario de administración simple con Flutter y etcd

Muy buenas, me llamo Miguel y en esta ocasión les traigo un nuevo post.

Procesar datos de un back-end etcd y mostrar los datos en Flutter

En este tutorial, vamos a crear una aplicación de interfaz de usuario de administración usando etcd como back-end y Flutter como front-end.

Etcd es una excelente manera de mantener organizada la configuración de su aplicación. Almacena los datos de configuración críticos como pares clave-valor.

También vamos a aprender cómo crear una vista DataTable dinámica TabBar dentro de Flutter y cómo llenarla con datos del back-end etcd.

¡Empecemos a codificar!

Prepare el Back End

1. Instale etcd

Para simplificar, usaremos una imagen de Docker.

Crear un docker-compose.yml archivo con el siguiente contenido:

2. Inicie el contenedor Docker

Ejecute este comando en su terminal:

docker-compose up -d

3. Colocar y obtener pares clave-valor

Primero, algunas palabras sobre cómo obtener y escribir valores etc. Los pares clave-valor deben estar codificados en un algoritmo Base64.

Digamos que para nuestra aplicación de administración, queremos almacenar datos de configuración para un cliente de correo electrónico, almacenamiento en la nube y un agente de mensajes.

Dichos datos pueden ser un nombre de usuario, contraseña, host y número de puerto, por ejemplo, rabbitmq/user=user123, rabbitmq/password=secret, y así.

Para poder configurar todos los pares clave-valor para el mismo elemento de configuración, le daremos un prefijo a nuestras claves. Lo mejor de etcd es que recuperará todos los valores que pertenecen a la clave dada según el prefijo.

Entonces podemos configurar tantos valores como queramos.

En este ejemplo, el par clave-valor es foo-bar.

curl -L http://localhost:2379/v3/kv/put 
-X POST -d '"key": "Zm9v", "value": "YmFy"'

curl -L http://localhost:2379/v3/kv/range 
  -X POST -d '"key": "Zm9v"', "range_end": "Zm9w"}'

En breve implementaremos estas funciones con Dart.

Prepare el Front End

1. Instala Flutter

Necesitas tener el SDK de Flutter instalado para continuar con este tutorial. Si necesita ayuda, consulte la guía de instalación oficial.

2. Obtenga las dependencias necesarias

Necesita obtener la dependencia http ya que vamos a llamar a las solicitudes de publicación.

http: any

3. Create the configuration data object

Analizará y decodificará los datos de valor-clave de nuestra solicitud de publicación etcd.

4. Cree el servicio etcd

5. Cree la aplicación principal

Tenga en cuenta que el generateTabColumns() método recopilará los datos de etcd y completará las columnas respectivas en el DataTable.

Necesitamos un StatefulWidget. También creemos un constructor que acepte una clave y una lista de columnas como parámetros.

Así es como se crean los métodos generateDataColumns() y generateDataRows():

Este método se invocará cuando el usuario presione Enter después de modificar el valor en la interfaz de usuario.

Prueba la aplicación

Eso es todo por la parte de codificación. Ahora, veamos cómo se ve la aplicación y realicemos algunas pruebas de la funcionalidad.

1. Inicie la aplicación Flutter

Ejecute estos comandos en su terminal para habilitar el soporte web e inicie la aplicación en un navegador:

El host y el puerto se mostrarán en la ventana del terminal después de ejecutar los comandos. Haga clic en la URL o péguela en un navegador para acceder a la interfaz de usuario.

Su consola de administración debería verse así:

2. Complete la tabla con datos de etcd

Ahora, agreguemos alguna configuración usando etcd. Agregaré un nombre de usuario y una contraseña para la pestaña Almacenamiento en la nube.

Tomaré MinIO como sistema de ejemplo. Las claves serán minio/user y minio/pass. Los valores serán myuser y secret, respectivamente. Ya he codificado estos valores clave con la ayuda de una herramienta codificadora de Base64 en línea.

Publiquemos los datos usando curl:

curl -L http://localhost:2379/v3/kv/put \
>   -X POST -d '{"key": "bWluaW8vdXNlcg==", "value": "bXl1c2Vy"}'

curl -L http://localhost:2379/v3/kv/put \
>   -X POST -d '{"key": "bWluaW8vcGFzcw==", "value": "c2VjcmV0"}'

Actualiza la IU y deberías ver los datos rellenados en la pestaña Almacenamiento en la nube:

3. Modifique los valores a través de la interfaz de usuario

Para modificar un valor, haga doble clic en él y escriba un nuevo valor. Al presionar Enter, los datos se envían a etcd, que actualiza inmediatamente el valor de esa clave. Si actualiza la página, su nuevo valor debe conservarse. Cambié el mío a user123:

Gracias por leer este artículo y feliz codificación.