Índice del contenido[Esconder][Espectáculo]
- ¿Qué es Bubble.io?
- ¿Qué es la programación visual?
- ¿Qué tipos de aplicaciones puedes desarrollar?
Creación de una aplicación con Bubble (Tutorial)+-
- 1. Comenzando
- 2. Configuración de la base de datos
- 3. Creación de flujos de trabajo
- 4. Crear una noticia
- 5. Mostrar contenido dinámico en el feed
- 6. Envío de datos entre páginas
- 7. Mostrar contenido dinámico en la página de la historia
- 8. Visualización del artículo del editor
- 9. Siguientes editores
- 10. Funciones adicionales que puede agregar
- 11. El resultado
- Para Agencias y Operadores
- Desventajas
- Precios
- Conclusión
Recientemente me he interesado en enfoques de desarrollo web distintos de HTML, CSS y JavaScript.
Con el creciente panorama sin código, no fue sorprendente descubrir que existen varias alternativas a los enfoques más estándar para desarrollar aplicaciones web.
Debe estar familiarizado con algunas de las plataformas CMS más conocidas, como WordPress, que prácticamente no tienen código. Pero, si desea crear aplicaciones web, dichas plataformas pueden parecer restrictivas.
Aquí les presento a Bubble.io, un poderoso herramienta sin código que le permite crear aplicaciones web como nunca antes.
¡Vamos a explorarlo en profundidad!
Que es burbuja.io?
Bubble es una plataforma no técnica que combina un lenguaje de programación visual y un marco de desarrollo web.
Los usuarios pueden usar estas herramientas de programación para construir aplicaciones en línea únicas, modificar bases de datos y procesos, agregar componentes de página (imágenes, texto, formularios de entrada, mapas) y diseñar sus interfaces.
Es un mercado donde puede descubrir plantillas, complementos y servicios ideales para ayudarlo a crear productos sólidos.
Sin tener que configurar un marco de programación típico, puede crear cualquier cosa, desde un mercado hasta una red social y un CRM (gestión de relaciones con el cliente) utilizando Bubble.
Brinda a los clientes la capacidad de crear y personalizar sus aplicaciones utilizando una interfaz fácil de usar y un editor de apuntar y hacer clic.
Puede usarlo junto con servicios que proporcionan una API REST, como Facebook, SQL, análisis y aplicaciones de pago. Permite a los usuarios dedicar tiempo a mejorar la funcionalidad y la apariencia de sus aplicaciones para que se vean bien en tabletas y dispositivos móviles.
Es apropiado para empresas de todos los tamaños, desde pequeñas hasta medianas y grandes; y accesible para Windows, Mac y la web.
¿Qué es la programación visual?
La programación visual es esencialmente lo que parece. En lugar de programar manualmente escribiendo código, lo hace gráficamente haciendo clic y arrastrando componentes a las páginas.
No se deje engañar por esa breve descripción.
No es como cualquier otra aplicación de corte de galletas o herramienta de creación de sitios web que haya encontrado en línea. La mayoría de los creadores de aplicaciones requieren que confíes en plantillas básicas y tienen una funcionalidad extremadamente limitada; solo le permiten desarrollar tipos específicos de aplicaciones y limitan su personalización.
Aunque la noción de "programación visual" y "arrastrar y soltar" parece fácil en Bubble, es tremendamente poderosa.
Su entorno de programación visual no solo le permite arrastrar objetos como texto, gráficos, entradas y más a una página, sino que también le permite configurar lo que hacen esos elementos.
¿Qué hace Burbuja?
El objetivo principal de Bubble es permitir que cualquiera pueda crear aplicaciones web sin tener que escribir código.
Sin embargo, si bien esto proporciona una declaración de objetivos fácil de recordar, deja fuera una parte importante de la historia. El camino de la idea al mercado es más complicado que simplemente crear líneas de código.
En el desarrollo convencional, se requiere un equipo de profesionales altamente capacitados que trabajen en ciertas secciones de la creación, el crecimiento y el mantenimiento de la aplicación. Considera esto.
¿Qué requiere cada aplicación?
- Seguridad para asegurarse de que nadie tenga acceso no autorizado a los datos.
- Una base de datos para almacenar y recuperar información como elementos, artículos y actualizaciones de redes sociales.
- Escalabilidad para permitir el desarrollo sin trabas de la base de usuarios y el volumen de datos.
- Una interfaz de usuario agradable para que la aplicación sea atractiva y fácil de usar.
- Integración con diversos servicios y sistemas.
Bubble reemplaza mucho más que un codificador. Proporciona todos estos servicios de una manera visualmente atractiva y altamente automatizada, lo que hace posible, si no simple, que una sola persona maneje todo.
Mientras que las plataformas sin código anteriores han intentado reemplazar la codificación de varias maneras. Su concepto es eliminar tantas barreras como sea posible para que una aplicación llegue al mercado, manejando todo, desde el diseño receptivo y las animaciones hasta el alojamiento, la implementación de versiones, la seguridad y las operaciones de la base de datos.
Uso del conector API para conectar Bubble a otros servicios
Su API Connector es probablemente el complemento más importante del mercado. Como su nombre lo indica, esto le permite conectarse a otras aplicaciones y servicios para compartir acciones y datos.
En lugar de profundizar en los detalles técnicos de cómo funciona esto, considere estos ejemplos de lo que las API podrían lograr:
- Obtener acceso a máquina de aprendizaje métodos como el reconocimiento de imágenes y la traducción.
- Obtenga la información meteorológica más reciente desde cualquier parte del mundo.
- Cuando se activa un evento en Bubble, la información se intercambia entre los sistemas, como establecer un cliente potencial en su CRM o una cita en su Google Calendar.
- Reserve un vuelo o una estadía en un hotel en cualquier parte del mundo.
- Obtenga el número de teléfono, la ubicación, las fotografías, el logotipo y las reseñas de cualquier empresa en Google Maps.
Uso de complementos para mejorar las funciones nativas
Técnicamente, combina módulos de código JavaScript, CSS y HTML en un nodo funcional. La aplicación escrita en JS.JSON sirve como base para su propio lenguaje.
Si bien no es necesario que comprenda completamente esa terminología para crear aplicaciones, indican un hecho clave: se adhiere a los estándares web conocidos y reconocidos, lo que permite a los desarrolladores mejorar considerablemente su funcionalidad nativa.
Esto ya se ve en el sitio del complemento, donde están disponibles cientos de extensiones gratuitas y de pago para la funcionalidad básica. También implica que si llega a un punto en el que sus capacidades fundamentales son insuficientes, hay muchos expertos en JavaScript dispuestos a ofrecer una solución a medida para usted.
¿Qué tipos de aplicaciones puedes desarrollar?
Puede crear una amplia gama de aplicaciones, algunas de las cuales se indican a continuación.
- Apps para mercados especializados con comunidad.
- Aplicaciones para bolsas de trabajo en una variedad de sectores.
- Software para dotación de personal hospitalario.
- Software de punto de venta para tiendas físicas.
- Software de consultorio dental con marca blanca.
- Software de inventario de negocios personales y servicio al cliente.
- Aplicaciones de agregación de bienes raíces para corredores y clientes.
- Apps para eventos y cursos en el mercado (e incluso barcos).
- Los certificados profesionales requieren aplicaciones de pruebas internas.
- Aplicaciones para socorristas.
- Software de gestión de empleados para uso interno.
Para ser honesto, la plataforma no está diseñada para hacer todo. Puede que no sea la opción ideal si está diseñando una aplicación de juego con imágenes y movimientos complejos. Además, si está creando una aplicación nativa (una para tiendas de aplicaciones), deberá integrarla con otro servicio de terceros.
Características principales
Bubble está repleto de funciones. No podremos cubrirlos todos aquí, pero intentaremos cubrir los más esenciales.
1. Plugins
Le permite incluir la funcionalidad de numerosas herramientas en Internet en su aplicación web. Por ejemplo, si desea que sus usuarios inicien sesión con su cuenta de Facebook, puede usar el complemento de Facebook para hacerlo.
2 Desarrollar
Le permite crear aplicaciones dinámicas multiusuario para navegadores web móviles y de escritorio, así como todas las herramientas necesarias para crear un sitio similar a Instagram o Airbnb.
3. Diseño
Puede crear diseños aptos para dispositivos móviles y contenido dinámico para dar los toques finales a un producto que estará encantado de mostrar a los demás.
4. Hosting
Nunca tendrá que preocuparse por el mantenimiento del servidor, la infraestructura o las operaciones una y otra vez.
Se encarga de la implementación y el alojamiento por usted de manera segura. La cantidad de usuarios, el volumen de tráfico y el almacenamiento de datos no tienen restricciones.
Creación de una aplicación con Bubble (Tutorial)
Ahora entremos en acción y exploremos cómo puede crear una aplicación de noticias en Bubble.
1. Comenzando
Para empezar, primero debes Regístrese para obtener una cuenta gratuita en Bubble.
Comenzaremos usando la herramienta de diseño visual de Bubble para dar forma a nuestra plataforma interfaz de usuario. Algunas de las páginas clave a incluir se dan a continuación:
- Página de carga: un sitio web donde los editores desarrollarán y distribuirán artículos.
- Página de inicio: se muestra una lista de historias publicadas recientemente.
- Página narrativa: una página donde se puede encontrar cada historia única.
- Página del editor: una página que muestra una lista de cuentos de un determinado editor.
2. Configuración de la base de datos
Una vez que haya diseñado la pantalla de su producto, puede concentrarse en crear los campos de datos que impulsarán su aplicación. Usaremos estos campos para vincular los flujos de trabajo subyacentes a su producto.
Para este ejemplo, estableceremos dos tipos de datos distintos para cada noticia. Un tipo de datos contendrá los datos básicos de una historia (como el título, la imagen destacada y el editor), mientras que el otro tipo de datos contendrá archivos de contenido más grandes, como toda la narrativa.
Al definirlos como tipos de datos discretos, solo podemos cargar la información que se requiere cuando se requiere, lo que limita la cantidad de material que el editor Bubble necesitará producir.
Se crearán los siguientes tipos de datos y campos:
Tipo de datos: Usuario
Campos:
- Nombre
- Los siguientes editores son una lista de editores. Nota importante: la creación de un campo como una lista basada en un tipo de datos distinto le permite incorporar todos sus campos de datos esenciales sin esfuerzo sin tener que crear campos adicionales.
Tipo de datos: Historia
Campos:
- Título
- Imagen destacada
- Escritor
- Categoría
- Publisher
- contenido de la historia
Tipo de datos: contenido de la historia
Campos:
- contenido de la historia
Tipo de datos: Publisher
Campos:
- Nombre
- Logotipo
- Seguidores
3. Creación de flujos de trabajo
Ahora que ha organizado el diseño y la base de datos de su aplicación, es hora de comenzar a juntar todo y hacer que funcione.
Los flujos de trabajo son el método principal para lograr esto en Bubble.
Cada flujo de trabajo ocurre cuando ocurre un evento (p. ej., un usuario hace clic en un botón) y luego realiza una secuencia de "acciones" en respuesta (p. ej., "registrar al usuario", "realizar un cambio en la base de datos", etc.) .
4. Crear una noticia
La primera función que ofreceremos es una herramienta que permite a los editores escribir y publicar noticias en el sitio.
En la página de carga, comenzaremos incorporando una gran cantidad de elementos de entrada que se aplicarán para ingresar datos en nuestra base de datos. Las entradas de texto, un cargador de imágenes y una selección desplegable son ejemplos de estos campos.
También necesitaremos personalizar el menú desplegable del editor para mostrar una lista de opciones dinámicas. Dado que cada nuevo artículo se agregará a la lista de artículos totales de un editor, tendremos que elegir un editor existente de nuestra base de datos.
Al configurar este menú desplegable, elegiremos el tipo de opciones para ser un editor.
Después de eso, nuestra fuente de datos escaneará nuestra base de datos y devolverá una lista de todas las publicaciones actuales. Por último, cambiaremos el título de origen para incluir el nombre del editor.
Una vez que un escritor haya ingresado la información necesaria en cada entrada en la página, hará clic en el botón publicar para generar una nueva historia.
Luego, dentro de su base de datos, creará algo nuevo con el tipo de datos establecido en narrativa.
Luego necesitaremos comenzar a llenar nuestra base de datos con los campos necesarios. Conecte cada uno de los componentes de entrada en la página a sus respectivas columnas de la base de datos.
Primero, crearemos el tipo de contenido de la historia, que finalmente se vinculará con la historia en sí.
A continuación, agregaremos otra etapa a este procedimiento, generando algo más, esta vez, el cuento en sí.
Es posible integrar estos datos sin esfuerzo en toda su plataforma integrando el primer material narrativo que desarrollamos con esta historia.
Cada vez que se active este procedimiento, se producirá un nuevo cuento.
5. Mostrar contenido dinámico en el feed
Una vez que los editores comiencen a cargar material en su aplicación móvil, tendremos que comenzar a crear la lógica en su página de inicio que muestre cada artículo como una lista dinámica. Esto se puede lograr empleando nuestro elemento de grupo repetitivo.
Los grupos repetidos trabajan con su base de datos para presentar y actualizar una lista de material dinámico.
Al aplicar un grupo repetitivo, primero debe vincular el elemento a un tipo de datos en su base de datos.
En este caso, clasificará el tipo de material como cuentos. También deberá proporcionar la fuente de datos como una lista de todas las tablas en su base de datos.
También organizaremos este grupo recurrente por la fecha de inicio de cada historia, mostrando la lista en orden cronológico inverso. Ahora puede comenzar a organizar el material dinámico que aparecerá dentro de cada cuadrícula.
Simplemente complete la fila superior con el material apropiado que desea mostrar, y este poderoso elemento llenará las columnas restantes con datos de su base de datos actual.
6. Envío de datos entre páginas
También es posible construir eventos dentro de cada fila de un grupo repetitivo. Al desarrollar funciones de navegación para su plataforma, esta funcionalidad será útil.
La página de inicio de nuestra aplicación de noticias simplemente muestra una vista previa de cada historia, incluido el editor, una imagen destacada y el título de la historia.
Sin embargo, no muestra todo el contenido de un artículo hasta que el usuario hace clic en la página de la historia. Usaremos nuestro editor de flujo de trabajo para transmitir datos entre páginas para mostrar este material.
Para comenzar, cree un proceso que envíe a un usuario a la página de la historia cuando haga clic en la imagen de una historia.
Use un evento de navegación para transferir a un usuario a otra página mientras desarrolla este proceso.
Elija el tipo de página de destino para que sea la página narrativa en el menú desplegable. Luego deberá proporcionar más información a esta página para que el editor de burbujas entienda qué historia única mostrar.
La información que deberá proporcionar proviene de la historia de las celdas actuales.
7. Mostrar contenido dinámico en la página de la historia
Puede recuperar fácilmente los datos de este evento y mostrar el material relevante de la narración cuando se envía a un usuario a una determinada página de la historia.
Para crear esta función, primero debe verificar que el tipo de página de destino coincida con la propiedad de datos que está entregando a través del flujo de trabajo. En esta situación, debe asociar la página de la historia con una propiedad de la historia.
Simplemente puede extraer y entregar datos apropiados de fuentes existentes al categorizar el tipo de contenido en una página.
Ahora puede comenzar a insertar material dinámico en campos que muestran información de una sola tabla.
8. Visualización del artículo del editor
Después de leer una noticia, un usuario puede optar por examinar todo el catálogo de artículos del editor. Si ha desarrollado un tipo de datos de editor, crear una página separada para editores es tan simple como crear nuestra página de inicio original.
En esta página, debemos comenzar configurando el tipo de página en editor.
Luego, copie el grupo repetitivo de la página de inicio y edite la configuración.
En este caso, la fuente de datos de nuestro grupo repetido buscará todos los artículos existentes cuyo editor sea el editor de la página actual.
9. Siguientes editores
La tercera característica fundamental que crearemos para nuestro MVP es la capacidad de seguir a un editor en la plataforma. Agregaremos un botón de seguimiento en la página del editor. Cuando hacemos clic en este icono, iniciaremos un nuevo proceso que modifica una cosa.
Agregar el editor de la página actual a su lista de publicaciones posteriores cambiará el usuario actual.
Después de eso, necesitaremos actualizar la lista de seguidores del editor de la página actual agregando el usuario actual.
10. Funciones adicionales que puede agregar
Ahora que se siente cómodo creando campos de datos personalizados y presentando información dinámica, puede ser creativo con las experiencias que crea para su producto. También puedes incluir:
- Cree una función que permita a los usuarios guardar contenido para leerlo más tarde.
- En la parte inferior de cada pieza, proporcione una colección recurrente de artículos sugeridos.
- Cree una herramienta de búsqueda para ayudar a las personas a encontrar contenido nuevo en el sitio.
11. El resultado
Tu aplicación final se verá así.
Para Agencias y Operadores
- La capacidad de conectarse a muchas API y complementos.
- Una aplicación fácil de usar y sin código.
- Las personas sin experiencia en programación se beneficiarán de esto.
- Herramientas de diseño que son a la vez versátiles y potentes.
- Procesamiento rápido de consultas.
Desventajas
- Mayor confiabilidad.
- La velocidad de procesamiento de datos es lenta.
- El rendimiento está limitado.
Precios
El plan gratuito te permite conocer la plataforma y desarrollar tu aplicación.
Las suscripciones pagas incluyen extras como marca blanca, un dominio personalizado, acceso a la API de Bubble y capacidad de servidor reservada, que se enumeran a continuación.
- Personal: $25/mes (pago anual) o $29/mes (pago mensual).
- Profesional: $ 115 / mes (pago anual) o $ 129 / mes (pago mensual).
- Producción: $ 475 / mes (pago anual) o $ 529 / mes (pago mensual).
Conclusión
Bubble es una excelente alternativa para crear aplicaciones web que solo pueden mostrar información o tener una interfaz de usuario mínima.
Es bastante simple de usar y los tutoriales proporcionados por Bubble son extremadamente útiles. Su editor visual en línea que le permite diseñar aplicaciones web según sus preferencias.
Y la mejor parte es que no necesita ninguna experiencia o experiencia en programación. Bubble es apropiado para todos, independientemente de si sabes codificar o no.
Sin embargo, la comprensión previa de los lenguajes de interfaz puede brindarle una ventaja porque le permite descubrir rápidamente qué está haciendo con respecto al manejo de eventos.
Entonces, ¿qué piensas de las capacidades de Bubble?
Háganos saber en los comentarios!
Arbehi
¿Se puede crear una tienda para vender productos usando la herramienta bubble.io?