IA adorable: Una guía con proyecto de demostración

Lovable es un servicio de conversión de texto a aplicación que permite a cualquiera crear aplicaciones funcionales sin conocimientos de programación. Podemos describir nuestras ideas de aplicación a través de una interfaz de chat, y la plataforma transforma estas descripciones en una aplicación real y operativa.

En este tutorial, te mostraré cómo utilizar Lovable construyendo algo práctico: te guiaré paso a paso en la construcción y publicación de una sencilla pero completa aplicación móvil de listas de tareas con persistencia de datos, autenticación de usuarios, recordatorios por correo electrónico y suscripciones de pago.

Al final, también hablaré de algunas de las limitaciones de Lovable, como los problemas de seguridad, su posible falta de velocidad para los desarrolladores que ya tienen sus propias herramientas y bibliotecas, y los retos a los que pueden enfrentarse los no programadores al depurar.

¿Qué es la IA Amable?

Utilizando la IA, Lovable nos permite transformar nuestras ideas en aplicaciones totalmente funcionales describiéndolas. Esto significa que podemos evitar fácilmente las complejidades de la codificación tradicional, haciendo que la creación de aplicaciones sea accesible y eficiente tanto para los no desarrolladores como para los desarrolladores que buscan una forma más rápida de crear prototipos de aplicaciones.

Lovable utiliza React y Vite para el frontend. React es una popular biblioteca JavaScript para construir interfaces de usuario, conocida por su flexibilidad y eficacia. Vite, en cambio, es una herramienta de compilación que ofrece una experiencia de desarrollo más rápida y ágil. Estos frameworks facilitan la creación de nuestras aplicaciones gestionando la compleja lógica de la interfaz de usuario, garantizando que nuestras aplicaciones no sólo sean funcionales, sino también receptivas y fluidas.

Para el backend, Lovable utiliza Supabaseuna alternativa de código abierto a las soluciones tradicionales de backend. Supabase es esencialmente una colección de herramientas que crean un sistema backend, incluyendo almacenamiento de bases de datos, autenticación y funciones en la nube. Funciona junto con nuestra app para gestionar los datos y permitir la funcionalidad en tiempo real.

Lovable no nos permite editar el código que produce directamente en su interfaz. Sin embargo, sí podemos vincular el código de nuestra aplicación a un repositorio de GitHub. Esta conexión significa que cualquier cambio realizado en el código en GitHub se refleja directamente en la aplicación, permitiendo el desarrollo colaborativo y el control de versiones.

Esta configuración combina la facilidad de una interfaz sin código con la flexibilidad y el control que ofrece GitHub. Sin embargo, a menudo me encontraba deseando poder editar el código directamente para hacer pequeños cambios.

Construye tu primer proyecto con Lovable

Cómo empezar

Para empezar con Lovable, primero tenemos que dirigirnos a su sitio web y crear una cuenta gratuita.

Una vez que tengamos configurada nuestra cuenta gratuita, podremos enviar cinco mensajes al día al asistente de IA de la plataforma. Es un gran reto ver hasta dónde podemos progresar dentro de estas limitaciones.

En el primer mensaje, hacemos una breve descripción de nuestro proyecto. 

Ten en cuenta que mi descripción es bastante breve. También intenté dar una descripción muy detallada en el primer mensaje describiendo toda la funcionalidad, pero no funcionó muy bien porque la mayor parte de esa funcionalidad requiere un backend. Cuando el proyecto se crea inicialmente, no se conecta automáticamente a Supabase, por lo que la consulta fallará.

Este es el resultado que obtuvimos con esta indicación:

La aplicación era bastante funcional en esta fase. Podía crear, eliminar y marcar elementos como completados en la lista de tareas pendientes. Para mi sorpresa, ¡los datos persistían cuando se actualizaba la aplicación!

Lovable lo hizo utilizando el almacenamiento local, que guarda los datos en una base de datos local del navegador. Este método tiene la ventaja de no necesitar conexión a Internet, pero también tiene el inconveniente de no compartir datos entre dispositivos.

Veamos cómo sustituir esto por una base de datos backend conectando nuestro proyecto a Supabase.

Conexión a Supabase

Supabase es una plataforma de código abierto que proporciona una infraestructura backend para nuestras aplicaciones. Ofrece una serie de servicios, como almacenamiento en bases de datos, autenticación y API, lo que la convierte en una solución completa para gestionar los datos de las aplicaciones. 

Al crear una aplicación de listas de tareas, por ejemplo, Supabase resulta esencial si queremos que los datos de nuestra aplicación persistan en múltiples dispositivos y usuarios. A diferencia del almacenamiento local, que sólo almacena datos en el navegador de un dispositivo, Supabase nos permite almacenar datos en la nube. Esto significa que nuestros usuarios pueden acceder a sus listas de tareas pendientes desde cualquier dispositivo y ver las actualizaciones en tiempo real.

Además, los servicios de autenticación de Supabase nos ayudan a gestionar los registros e inicios de sesión de los usuarios, garantizando que los datos de cada usuario permanezcan seguros y privados. Al conectar nuestra aplicación a Supabase, desbloqueamos todo el potencial de nuestra aplicación.

Una de las ventajas de utilizar Supabase para construir nuestras aplicaciones es su naturaleza de código abierto. Al ser de código abierto, Supabase no nos obliga a utilizar un proveedor de nube concreto, lo que nos ofrece más flexibilidad a la hora de gestionar el backend de nuestra aplicación. Aunque tenemos la opción de utilizar los servicios alojados de Supabase para mayor comodidad, también tenemos la libertad de autoalojar nuestras aplicaciones utilizando Docker si lo preferimos. Esta flexibilidad nos permite elegir el entorno de alojamiento que mejor se adapte a nuestras necesidades, ya sea por eficiencia de costes, consideraciones de rendimiento o requisitos de cumplimiento.

Para conectar nuestro proyecto a Supabase, seguimos estos pasos:

1. Pulsa el botón Supabase en la esquina superior derecha.

2. Aparecerá una ventana emergente que nos pedirá que nos registremos en Supabase.

3. Después de registrarnos, volvemos a pulsar el botón Supabase para autorizar a Lovable a acceder a nuestra cuenta. Se nos pedirá que creemos una organización.

4. Una vez creada la organización, podemos seleccionarla y autorizar a Lovable a acceder a nuestra cuenta de Supabase a través de esa organización.

5. Vuelve a pulsar el botón Supabase y crea un proyecto. Esto nos redirigirá al sitio web de Supabase, donde podremos configurar el proyecto.

6. Por último, vuelve al sitio web de Lovable y pulsa por última vez el botón Supabase. A continuación, selecciona el proyecto que acabamos de crear. Esto hará que la IA actualice el código para conectarse a ese proyecto.

Eso es todo, ¡ahora nuestra aplicación tiene un backend!

Como ya se ha dicho, es mejor conectarse al proyecto Supabase antes de pedir a Lovable que implemente cualquier funcionalidad que requiera un backend, porque parece que no le gusta escribir el código antes de estar conectado. Ten en cuenta que en realidad no es así como trabajan los ingenieros: los ingenieros del frontend pueden escribir el código del frontend sin que se implemente el backend.

Añadir autenticación de usuario

Con nuestra app conectada a un proyecto Supabase, ahora podemos pedir a Lovable que añada la autenticación de usuario.

En primer lugar, la IA creará las tablas de la base de datos para nuestra aplicación. Una vez hecho, tenemos que aprobarlo manualmente haciendo clic en el botón "Aplicar cambios" de la ventana de chat.

No siempre se nos pedirá que aceptemos los cambios de la IA, pero en algunos casos es necesario porque algunos cambios (como las actualizaciones de la base de datos) pueden afectar a la aplicación en producción incluso sin publicarla.

Una vez actualizada la base de datos, empezará a actualizar el código para autenticar a los usuarios y guardar las actualizaciones de las tareas pendientes en la base de datos.

Sin embargo, esta vez se encuentra con un error que dice "Construcción fallida". Cuando esto ocurre, podemos ver el error y hacer que el botón "Intentar solucionarlo" de la parte superior intente solucionar el problema automáticamente.

En este caso, al hacer clic en el botón se solucionó el problema, y ahora la aplicación es totalmente funcional con autenticación de usuario y almacenamiento de datos en la base de datos, de modo que si utilizamos la aplicación en varios dispositivos, podemos seguir accediendo a nuestra lista de tareas pendientes.

Publicar la app

Para publicar la app, podemos utilizar el botón "Publicar" de la esquina superior derecha.

Una vez publicado, podemos acceder a él mediante el enlace que aparece en la parte inferior del menú.

Es de acceso público en línea y permite a cualquiera utilizar la aplicación. También podemos configurar un dominio personalizado si disponemos de él. No cubriremos esos detalles aquí, pero Lovable tiene un tutorial al respecto en su documentación.

Ten en cuenta que debemos pulsar el botón "Redistribuir" cada vez que hagamos cambios en la aplicación. De lo contrario, esos cambios sólo serán visibles en la interfaz de Lovable y no por los usuarios que utilicen la app a través de la URL de la app.

Capacidades avanzadas en Lovable

Conectarse a GitHub

Lovable no nos permite realizar directamente cambios en el código, sólo nos permite ver el código y los cambios que realiza.

Para poder modificar el código, necesitamos conectar el proyecto a GitHub, que es una plataforma muy utilizada para alojar y colaborar en proyectos de código utilizando el control de versiones. Esto permite que varios usuarios contribuyan, revisen y gestionen los cambios de forma eficaz.

Para conectarte a GitHub:

1. Accede a tu cuenta de GitHub y crea una organización libre.

2. En Lovable, haz clic en el botón "Editar código" de la esquina superior derecha.

3. A continuación, haz clic en "Conectar con GitHub".

4. Selecciona la organización que creamos en el primer paso.

Con GitHub conectado, el código permanecerá sincronizado con el repositorio de GitHub. Esto significa que podemos utilizar herramientas como VSCode para trabajar en nuestro proyecto localmente. Ten en cuenta que Lovable tarda un rato en recuperar los cambios después de que se envíen al repositorio.

Recuerda que la aplicación no se despliega automáticamente. Para ver los cambios en la aplicación, tenemos que publicarla de nuevo.

Funciones en la nube

Lo que hemos aprendido hasta ahora nos permite crear una aplicación que pueda mantener una base de datos en línea y una interfaz de usuario front-end para crear, leer, actualizar y eliminar esos datos, lo que se conoce como aplicación CRUD.

La nube ofrecen una potente forma de añadir lógica personalizada y operaciones complejas a nuestras aplicaciones sin necesidad de gestionar servidores físicos. Nos permiten ejecutar código backend en respuesta a eventos como cambios en la base de datos, peticiones HTTP u otros desencadenantes. Esto puede ser especialmente útil para tareas como enviar notificaciones por correo electrónico, procesar datos o realizar trabajos programados.

Al utilizar funciones en la nube, ganamos flexibilidad para manejar funciones intrincadas de forma eficiente y escalarlas según sea necesario, todo ello garantizando una experiencia de usuario fluida y receptiva. En esencia, nos permiten ampliar las capacidades de nuestras aplicaciones más allá de la simple gestión de datos, haciéndolas más dinámicas y útiles.

Un gran ejemplo de uso de una función en la nube en una aplicación de listas de tareas es el envío de recordatorios por correo electrónico de las próximas tareas. Supongamos que queremos recordar a los usuarios las tareas que deben realizar en breve. Podríamos escribir una función en la nube que compruebe en la base de datos si hay tareas con plazos próximos y envíe automáticamente un recordatorio por correo electrónico al usuario.

Podemos pedir a Lovable que lo haga por nosotros:

Algunas funciones necesitan acceder a API externas que requieren una clave API para funcionar. En este caso, la solución implementada utiliza la API de reenvío, por lo que Lovable te pidió la clave de la API para terminar de configurar el servicio. 

Añadir suscripciones con Stripe

No tiene mucho sentido crear una aplicación si los usuarios no pueden suscribirse a ella. Vamos a pedir a Lovable que implemente las suscripciones en la aplicación utilizando Stripe.

Podemos utilizar la siguiente indicación:

Me pidió que proporcionara mi clave de Stripe, de forma similar al ejemplo anterior. Podemos obtener esta clave de nuestra cuenta de Stripe.

Por último, decía que faltaba el ID del precio de suscripción. Para ello, podemos volver a Stripe, crear un producto de suscripción y copiar el ID del precio. Como Lovable no tenía un botón para pedir el ID del precio como sí lo tenía para la clave API, podemos proporcionarlo en el chat:

Para completar la implementación, podemos pedirle que sólo permita a los usuarios suscritos crear tareas pendientes y publicar la versión actualizada de la app.

¡Todo funcionó a la primera!

Hacer una aplicación móvil que podamos instalar

La aplicación que Lovable ha creado no es una aplicación web progresiva (PWA). Es sólo un sitio web y esto significa que no podemos instalarlo en un dispositivo móvil y utilizarlo como si fuera una aplicación de teléfono propiamente dicha en lugar de un sitio web.

Sin embargo, esto es muy fácil de arreglar con un simple aviso:

Con estos cambios, si abrimos el enlace de la app en nuestro dispositivo móvil, podremos instalarla y utilizarla como si fuera una app instalada de forma nativa.

Limitaciones de Lovable

A pesar del potencial de Lovable, es importante tener en cuenta sus limitaciones.

Cuestiones de seguridad

Aunque Lovable ofrece una forma atractiva de crear aplicaciones sin codificar, suscita preocupación sobre la seguridad de las aplicaciones, especialmente para quienes no tienen experiencia en codificación. ¿Cómo pueden estar seguros los usuarios de que la base de datos de su aplicación cuenta con las medidas de seguridad necesarias para evitar accesos no autorizados, como que un usuario añada tareas a la lista de otro?

Este aspecto crucial no se mencionó en las indicaciones durante el proceso de creación de la aplicación, lo que dejó sin examinar posibles vulnerabilidades. Los usuarios sin formación técnica pueden tener dificultades para evaluar y gestionar estos problemas de seguridad.

¿Es Lovable realmente más rápido para los desarrolladores?

Para los desarrolladores que ya tienen su propio conjunto de herramientas y bibliotecas de código, la pregunta es: ¿es Lovable realmente más rápido?

Muchos desarrolladores han perfeccionado su oficio creando una biblioteca interna de fragmentos de código y módulos en los que confían y con los que están familiarizados, que a menudo abarcan funciones como pagos, autenticación y operaciones CRUD. Se adaptan a sus preferencias de estilo y tecnología.

Lovable puede no ofrecer el mismo nivel de control sobre las tecnologías utilizadas, lo que puede ser una desventaja para quienes están acostumbrados a sistemas y flujos de trabajo concretos. Aunque la plataforma ofrece una forma sencilla de crear prototipos rápidamente, los desarrolladores podrían considerar más eficaz seguir con sus herramientas y métodos actuales, sobre todo si se tiene en cuenta la perfecta integración y la familiaridad que ofrecen.

Depuración para no programadores

Aunque Lovable facilita enormemente la creación de aplicaciones sin codificación, existe una gran preocupación sobre cómo se espera que los no programadores gestionen las situaciones en las que las soluciones automáticas se quedan cortas y es necesaria la intervención manual. ¿Qué ocurre cuando la plataforma encuentra un problema que no puede resolver automáticamente? ¿Quién se ocupa de estos cuellos de botella cuando los usuarios previstos carecen de conocimientos de codificación?

Sin la posibilidad de sumergirse en el código, una persona que no sepa programar podría sentirse atascada e insegura sobre qué pasos dar a continuación. Esta dependencia podría provocar el estancamiento de los proyectos y frustración, lo que podría obligarles a contratar a un programador o a buscar ayuda externa, lo que podría implicar costes y retrasos adicionales.

Conclusión

En última instancia, aunque Lovable hace que el desarrollo de aplicaciones sea accesible, su éxito para los no programadores depende en gran medida de cómo ayude a los usuarios cuando las cosas se ponen complejas más allá de las simples indicaciones.

Creo que Lovable realmente cumple su promesa de hacer que el desarrollo de aplicaciones sea accesible para todos. A pesar de la limitación de enviar sólo cinco avisos al día, podemos construir una aplicación funcional de forma eficaz.

La plataforma muestra una gran capacidad para gestionar flujos de trabajo más complejos, lo que nos permite realizar una personalización detallada de la aplicación. Esto significa que, incluso con interacciones limitadas, podemos transformar ideas creativas de aplicaciones en aplicaciones que funcionen.