Budibase es una plataforma de desarrollo de bajo código (low-code) diseñada para agilizar la creación de herramientas internas, flujos de trabajo y paneles de administración. Su capacidad para integrarse con diversas bases de datos (PostgreSQL, MySQL, MSSQL, MongoDB) y sistemas (Rest API, Docker, K8s) permite a usuarios con distintos niveles de experiencia técnica construir aplicaciones funcionales de manera eficiente.

En el panorama actual, donde el uso de dispositivos móviles es predominante, asegurar una experiencia de usuario óptima en todas las pantallas es fundamental. Este artículo detalla cómo implementar la adaptación a dispositivos móviles en Budibase, empleando principios de diseño responsivo y técnicas de desarrollo sin código para que las aplicaciones se vean y funcionen correctamente en teléfonos, tabletas y ordenadores.

Fundamentos del Diseño Responsivo en Budibase

Budibase integra capacidades de diseño responsivo que permiten que las aplicaciones se ajusten automáticamente a diferentes tamaños de pantalla. Su arquitectura se basa en tecnologías como CSS Grid y Flexbox, complementadas por la detección de dispositivos y la configuración de puntos de interrupción (breakpoints), logrando una reorganización inteligente de los elementos de la interfaz.

Los componentes clave que facilitan el diseño responsivo en Budibase incluyen:

• Contenedor Grid (GridContainer): Gestiona el comportamiento responsivo de las cuadrículas.
• Provider de Vínculos de Dispositivo (DeviceBindingsProvider): Permite la detección del tipo de dispositivo.
• Clases de Utilidad Responsiva: Clases CSS definidas en varios componentes (ej. .mobile, .desktop) que aplican estilos específicos según el dispositivo.

El sistema de cuadrícula de Budibase permite ajustar automáticamente la posición y el tamaño de los elementos en diferentes dispositivos.

Pasos Clave para la Adaptación Móvil sin Código

1. Uso del Sistema de Cuadrículas Integrado

El sistema de cuadrículas de Budibase facilita la definición de la posición y el tamaño de los componentes para dispositivos móviles y de escritorio por separado. Utilizando el componente GridContainer, se pueden especificar las ubicaciones de los elementos en filas y columnas para distintos tamaños de pantalla.

El sistema detecta automáticamente el tipo de dispositivo y aplica las reglas de diseño correspondientes:

/* Estrategia de diseño priorizando dispositivos móviles */
.grid.mobile :global(> .component) {
 --col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start));
 --col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end));
 --row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start));
 --row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end));
}
 

Este mecanismo de respaldo asegura que, si no se definen estilos específicos para móviles, se utilicen los de escritorio como alternativa.

2. Aprovechamiento de la Vista Previa de Dispositivos

Budibase ofrece una función de vista previa de dispositivos que permite visualizar cómo se verá la aplicación en diferentes pantallas durante el desarrollo. El componente DevTools facilita el cambio instantáneo entre las vistas móvil y de escritorio.

Utilice la función de vista previa de dispositivos de Budibase para verificar la apariencia de su aplicación en móviles.

3. Optimización de Formularios para Móviles

Los formularios son cruciales en las aplicaciones empresariales. Budibase optimiza el diseño de formularios para dispositivos móviles, presentándolos en una disposición vertical para mejorar la usabilidad.

Esta funcionalidad se implementa en el componente InnerFormBlock.svelte:

<div class="form-block fields" class:mobile={{"$"}}context.device.mobile{{"$"}}>
 
</div>
 

Los estilos CSS asociados garantizan un espaciado adecuado y un tamaño apropiado para los elementos del formulario en dispositivos móviles:

.fields.mobile :global(.spectrum-Form-item) {
 /* Estilos de formulario para dispositivos móviles */
 margin-bottom: 16px;
}
 

4. Ajuste del Diseño de Navegación y Menús

La navegación en dispositivos móviles requiere consideraciones especiales. Budibase mejora la experiencia de navegación móvil mediante menús desplegables y botones tipo "hamburguesa". En el componente Layout.svelte, se observa la lógica específica para dispositivos móviles:

class:mobile={!!mobile}

<div class="links" class:visible={mobileOpen}>
 
</div>
 

Budibase ajusta automáticamente el diseño de formularios para adaptarse a las pantallas de dispositivos móviles.

Técnicas Avanzadas de Diseño Responsivo

Uso de Puntos de Interrupción Personalizados

Aunque Budibase proporciona puntos de interrupción responsivos predeterminados, estos pueden ser modificados según las necesidades del proyecto. Por defecto, el punto de interrupción para dispositivos móviles se define así:

// En DeviceBindingsProvider.svelte
mobile: width && width < tabletBreakpoint,
 

Es posible ajustar el valor de la variable tabletBreakpoint para modificar el umbral de ancho que define un dispositivo como móvil.

Aplicación de Clases de Utilidad Responsivas

Budibase ofrece clases de utilidad para controlar la visibilidad de los elementos en diferentes dispositivos:

• grid-mobile-grow: Hace que un elemento ocupe todo el ancho de la fila en dispositivos móviles.
• mobile: Aplica estilos únicamente a dispositivos móviles.
• desktop: Aplica estilos únicamente a dispositivos de escritorio.

Estas clases, definidas en los archivos de utilidad de la interfaz (UI), pueden ser utilizadas directamente en los componentes.

Optimización de la Visualización de Tablas de Datos

Las tablas de datos a menudo requieren un tratamiento especial en pantallas pequeñas. El componente RowExplorer de Budibase incluye optimizaciones para dispositivos móviles:

{{#if (not ${safe("device")}.${safe("mobile")}) }}
 
{{/if}}
 

Este fragmento asegura que en dispositivos móviles solo se muestren las columnas más relevantes, mejorando la legibilidad de los datos.

Pruebas y Depuración de Diseños Responsivos

Budibase proporciona herramientas para facilitar la prueba y depuración de los diseños responsivos:

1. Botones de Cambio de Dispositivo: Permiten alternar rápidamente entre la vista móvil y de escritorio en la barra de herramientas del editor.
2. Panel de Depuración Responsiva: Ubicado en los componentes de herramientas de desarrollo (DevToolsHeader.svelte), ofrece información detallada del dispositivo.
3. Ajuste de Estilos en Tiempo Real: Las herramientas de desarrollo permiten modificar estilos y ver los resultados de inmediato.

Se recomienda probar la aplicación en una variedad de dispositivos físicos para garantizar una experiencia de usuario consistente en todos los tamaños y resoluciones de pantalla.

Conclusión

Las funcionalidades de diseño responsivo de Budibase permiten a los desarrolladores crear aplicaciones adaptables a diversos dispositivos sin necesidad de escribir complejas consultas de medios CSS. Al aprovechar el sistema de cuadrículas integrado, la detección de dispositivos y las clases de utilidad, es posible completar la adaptación a dispositivos móviles de manera eficiente, asegurando que las aplicaciones se presenten de forma óptima en cualquier pantalla.

Budibase simplifica la creación de aplicaciones empresariales multiplataforma, garantizando una experiencia de usuario uniforme y de alta calidad, independientemente del dispositivo utilizado.