/Bubble Development Agency

Integración de Bubble.io y GitLab: Guía paso a paso 2024

Explora nuestra guía paso a paso fácil de seguir sobre cómo integrar efectivamente Bubble.io con GitLab para un desarrollo web y gestión de proyectos optimizados.

¿Qué es GitLab?

GitLab es una herramienta de ciclo de vida DevOps basada en la web que proporciona un administrador de repositorios Git que ofrece características de wiki, seguimiento de problemas e integración continua / características de tubería de despliegue continuo, utilizando una licencia de código abierto, desarrollada por GitLab Inc. Está diseñado para equipos de cualquier tamaño para planificar, construir, colaborar y desplegar aplicaciones de software. GitLab proporciona a los usuarios un conjunto diverso de herramientas y características, incluyendo la gestión de proyectos, gestión del código fuente y CI/CD.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

¿Cómo integrar Bubble.io con GitLab?

Paso 1: Crear una aplicación

Debes comenzar creando una aplicación en tu cuenta de Bubble.io. Haz clic en "Nueva aplicación" en tu panel de control y proporciona los detalles necesarios para crear tu aplicación.

Paso 2: Configurar el flujo de trabajo de la API (Bubble.io)

Para conectar tu aplicación con GitLab, dirígete a la pestaña "Configuración" y luego "API". Habilita las configuraciones "Esta aplicación expone una API GET/POST" y "Habilitar CORS para todos los dominios (no seguro pero fácil para desarrollo)". Proporciona un nombre para el endpoint y devuelve datos desde tu base de datos.

Paso 3: Generar token de acceso personal (GitLab)

Inicia sesión en tu cuenta de GitLab. Navega hasta "Configuración de usuario" (esquina superior derecha) y luego "Tokens de acceso". Proporciona un nombre para el token y establece la fecha de expiración. Marca todas las casillas bajo "Alcances" y luego haz clic en "Crear token de acceso personal". Copia este token y mantenlo en un lugar seguro.

Paso 4: Conectar la canalización de Bubble.io al repositorio de GitLab

Ahora, regresa a Bubble.io y dirígete a la pestaña "Complementos". Haz clic en "Agregar complementos", busca e instala el complemento "Conector de API". En la configuración del conector de API, haz clic en 'Agregar otra API', completa los campos requeridos de la siguiente manera:

  • En "Autenticación", selecciona 'Autogestionada'.

  • En "Encabezados compartidos", copia y pega el token de acceso personal generado anteriormente en GitLab.

  • Para 'Usar como acción', ingresa 'GET' y proporciona la URL a tu repositorio de GitLab.

Guarda la configuración de la API.

Paso 5: Activar un flujo de trabajo de la API (Bubble.io)

Vuelve al menú "Flujos de trabajo de la API" y esta vez, haz clic en "+ Nuevo Endpoint". Escribe un nombre para el endpoint. En la misma página, bajo 'Parámetros', selecciona 'Clave' y para el campo de valor selecciona 'Datos dinámicos'. En el panel dinámico que se abre, elige la API que creaste hace un momento. Finalmente, haz clic en "Agregar acción", luego en "Devolver datos desde la API", y elige los datos a devolver.

Paso 6: Prueba tu integración

Ahora, en Bubble.io, ve a la página de índice de tu aplicación y añade un botón. En las propiedades del botón, vincúlalo a 'Flujo de trabajo', y luego selecciona 'Activar un flujo de trabajo personalizado'. Elige el flujo de trabajo de la API que creaste anteriormente. Previsualiza tu aplicación y presiona el botón. Si todo se hizo correctamente, debería proporcionar los datos de tu repositorio de GitLab.

Si hay un error, asegúrate de que seguiste perfectamente todos los pasos. Si todo parece perfecto y aún se presentan problemas, consulta la documentación de soporte de Bubble.io y GitLab.

Nota: La integración directa entre Bubble.io y GitLab no es compatible. Esta guía proporciona una solución utilizando las API de Bubble.io. Si no estás familiarizado con cómo funcionan las API, puedes necesitar ayuda adicional para configurar esto.

Consulta la documentación de la API de ambas plataformas (la documentación de la API de Bubble.io y la documentación de la API de GitLab) para entender cómo funcionan sus API y cómo se pueden usar para establecer una conexión entre ambas plataformas.

Caso práctico de integración de Bubble.io y GitLab

Escenario: Una startup de tecnología está desarrollando una aplicación móvil única usando Bubble.io para su fundador no técnico. La interfaz de la aplicación está construida en Bubble.io, y el backend está construido usando código mantenido por desarrolladores en repositorios de GitLab. Quieren asegurar un flujo de trabajo sin interrupciones para el despliegue regular y las actualizaciones.

Solución: Integración de Bubble.io con GitLab

Desarrollo de Frontend en Bubble.io: La startup utiliza Bubble.io para construir y diseñar la interfaz de la aplicación móvil sin requerir ningún código. Crean diseños interactivos, utilizan flujos de trabajo incorporados y configuran APIs para comunicarse con el backend.

Desarrollo de Backend en GitLab: El equipo de desarrolladores mantiene su código para el backend de la aplicación en GitLab. Gestionan sus repositorios, realizan commits regulares y empujan cambios al código.

Configuración de la Integración: La startup activa la integración de GitLab dentro de Bubble.io. Para cada actualización o cambio en el frontend, se envía automáticamente una solicitud de extracción al repositorio correspondiente en GitLab. En GitLab, los desarrolladores pueden revisar los cambios, la solicitud de extracción puede ser fusionada si es aprobada.

Flujo de Trabajo de Despliegue: Una vez que la solicitud de extracción es aprobada y fusionada en GitLab, las actualizaciones del backend se despliegan automáticamente. En Bubble.io, las actualizaciones de la aplicación se actualizan para reflejar los cambios del backend. Esto asegura que la aplicación móvil siempre esté al día con las últimas características y correcciones.

Monitoreo y Colaboración: La configuración integrada permite la colaboración sin interrupciones entre el fundador no técnico que utiliza Bubble.io y el equipo de desarrolladores que utiliza GitLab. Pueden hacer un seguimiento del progreso del proyecto, identificar y resolver problemas más rápido con esfuerzos combinados de ambos lados.

Beneficios:

Eficiencia: Al automatizar la integración de frontend y backend, la startup ahorra tiempo y esfuerzo en despliegues manuales y reduce el riesgo de errores.

Colaboración: La integración permite un entorno de desarrollo colaborativo entre los equipos no técnicos y técnicos.

Despliegue Continuo: La startup puede desplegar continuamente actualizaciones y mejoras en la aplicación.

Al integrar Bubble.io y GitLab, la startup asegura un desarrollo ágil, actualizaciones sin interrupciones, y una colaboración constante, lo que le permite entregar rápidamente una robusta aplicación móvil.

Más recursos valiosos sin código

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore
Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences