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
Para simplificar, usaremos una imagen de Docker.
Crear un docker-compose.yml
archivo con el siguiente contenido:
Ejecute este comando en su terminal:
docker-compose up -d
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
Necesitas tener el SDK de Flutter instalado para continuar con este tutorial. Si necesita ayuda, consulte la guía de instalación oficial.
Necesita obtener la dependencia http
ya que vamos a llamar a las solicitudes de publicación.
pubspec.yaml
archivo y escriba esto en la sección de dependencias:http: any
- Crea un nuevo archivo llamado
configdata.dart
con el siguiente código:
Analizará y decodificará los datos de valor-clave de nuestra solicitud de publicación 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:
- 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.
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í:
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:
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
:
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 este artículo y feliz codificación.
Añadir comentario