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 DataTabledinámica TabBardentro 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.

• Ponga un par clave-valor:

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"'

• Recuperar claves por un prefijo dado:

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 httpdependencia ya que vamos a llamar a las solicitudes de publicación.

• Para actualizar las dependencias, abra el pubspec.yamlarchivo y escriba esto en la sección de dependencias:

http: any

3. Create the configuration data object

• Create a new file called configdata.dart with the following code:

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

4. Cree el servicio etcd

• Crea un archivo llamado etcdservice.dart
• Escriba un método para obtener los pares clave-valor

• Para actualizar y codificar los pares clave-valor, agregue este método:

5. Cree la aplicación principal

• Crea un archivo llamado main.dart
• Crea la aplicación principal MyApp
• Importar las bibliotecas necesarias

• Crea el TabBarView interior de la MyAppclase. Para este propósito, estamos usando DefaultTabController. El número de pestañas que se muestran es dinámico.

• Cree las pestañas y genere las columnas de las pestañas:

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

• Llame al servicio etcd creando el getConfigData(String prefix)método:

• Cree el widget para DataTable

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

• Entonces creemos la _DataTableWidgetStateclase justo después de DataTableWidget:

• Crea el DataTableinterior de la misma clase:

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

• Cree un método, setConfigValue(ConfigData config)para actualizar los pares clave-valor etcd:

Este método se invocará cuando el usuario presione Enterdespué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:

• flutter channel beta
• flutter config -enable-web
• flutter create web
• flutter run -d web

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/usery minio/pass. Los valores serán myusery 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:

Conclusión

En este tutorial, hemos explorado algunas de las características básicas de etcd, como recuperar y modificar pares clave-valor. También hemos aprendido cómo crear una DataTablecon un TabBarViewmarco trémolo utilizando de forma dinámica.

El código fuente completo de este proyecto se puede encontrar en mi repositorio de GitHub, vinculado a continuación.

¡Gracias por leer y feliz codificación!

Referencias

• Repositorio de GitHub
• «Construyendo una aplicación web con Flutter»
• «Clase DataTable»
• «Trabajar con pestañas»
• «Por qué la puerta de enlace de gRPC»