Muy buenas, me llamo Miguel y en esta ocasión les traigo un nuevo post.
Índice
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.
- 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 http
dependencia ya que vamos a llamar a las solicitudes de publicación.
- Para actualizar las dependencias, abra el
pubspec.yaml
archivo 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 laMyApp
clase. Para este propósito, estamos usandoDefaultTabController
. 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
_DataTableWidgetState
clase justo después deDataTableWidget
:
- Crea el
DataTable
interior 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 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:
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/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
:

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»
Añadir comentario