Transcription
¿Qué tal a todos? En este video les mostraré un tutorial completo sobre cómo usar Lovable paso a paso. Lovable es una plataforma de IA que permite crear webs y apps usando solo unos pocos comandos. Lo mejor es que no hay límites para tu creatividad.
En este tutorial de Lovable IA, los guiaré por un proceso de tres pasos. Primero haremos algo básico, como un sitio web sencillo. Desde un lienzo en blanco, crearemos el comando y la IA hará su magia. Luego, perfeccionaremos el diseño, añadirán contenido y publicarán algo increíble. Finalmente, crearemos una web app. Vamos a crear una aplicación que sirva ya mismo para su propio negocio. Podemos personalizar la aplicación y ajustarla a su gusto. Por último, veremos métodos avanzados para crear sitios web que lleven la IA al límite. Replicar algunos de estos sitios requeriría más de $10,000. Verán cómo crear sitios complejos con diseños increíbles rápido.
Pueden empezar con Lovable gratis, aunque su versión gratuita es limitada, da pocos créditos diarios; ténganlo en cuenta. Pero, ¡empecemos! En la descripción hay un enlace que lleva a lobable.dev para crear su cuenta gratis. Muy bien, ¡empecemos!
Este es lovable.dev, donde podemos crear sitios web, aplicaciones y cosas increíbles. Vamos a crear una cuenta gratuita. En la parte superior derecha, haré clic en "empezar" para crear nuestra cuenta. Pueden usar Google o GitHub si lo prefieren. Tras ingresar sus datos y marcar la casilla, cliquen en "crear cuenta".
Luego, revisen su correo y confírmenlo con Lovable para activarla. Así que iré a mi correo electrónico, ya está ahí, y haré clic en este enlace de aquí. Bien. Y luego Lovable les hará unas cuantas preguntas, ¿vale? Pondré mi nombre aquí, Daryl Wilson. Luego, elegiré mi modo preferido. Me gusta el modo oscuro. El claro cansa más la vista. Elegiré el modo oscuro. ¿Cómo se enteraron de nosotros? Pueden poner YouTube u otro, lo que quieran. Lo usaré para un proyecto personal y pondré que soy creador de contenido. Quiero hacer sitios web y páginas de aterrizaje. Aquí también pueden invitar a otras personas a usar Lovable. Saltaré esto por ahora.
Ya iniciamos sesión en Lovable y podemos crear aplicaciones. Lo primero para usar la plataforma es ir a "chat". Así crearemos comandos descriptivos para webs o apps. Entremos en Chat HPT. Primero, busco que la IA conozca Lovable. Quiero crear un sitio web con esta herramienta. ¿Me ayudas a crear un comando descriptivo y detallado para la web de agencia de diseño? Así que vamos a generar este comando.
Muy bien, aquí está nuestro comando. Vean lo descriptivo que es, ¿verdad? Tenemos una introducción que explica lo buscado. Tenemos el tema de color, el estilo de fuente, el estilo de diseño y las funciones de la página de inicio. Tenemos las páginas a incluir, las funciones y luego algunas otras opciones, ¿no? Siempre pueden ajustar esto para que se adapte a la cultura de la empresa que busquen. Además, lo que me encanta de Chat GPT es que aquí abajo pueden cambiar estilos específicos, ¿ven? Así que tal vez quieras un estilo retro, un estilo minimalista o corporativo. Siempre puedes pedirle que cree variaciones y dárselas a la inteligencia artificial. Pero lo que podemos hacer aquí es simplemente tomar esto y pegarlo en Lovable.
Muy bien. Así que de vuelta por aquí, ahora voy a pegar todo este prompt en Lovable. Bien. Y luego procederé a generar este prompt. Ahora, esto podría tardar unos minutos, pero como estamos en YouTube, tardará solo un segundo.
Así de simple. Tenemos un sitio web nuevo generado por IA. Como ven, luce muy elegante con una página de inicio atractiva y dos llamadas a la acción. Hay un diseño abstracto al fondo y algunas ventas extra aquí. Abajo está la sección de servicios para interactuar al pasar el ratón. Y esta animación, ya saben, resalta la sección. Bajando un poco más, tenemos esta sección de nuestro proceso, ¿verdad? Tenemos una sección de portafolio donde realmente podemos filtrar los portafolios. ¿Qué les parece eso justo ahora mismo? También aquí, si se fijan, hay un botón de "ver proyecto" y no pasa nada. Hablaré más sobre lo que podemos hacer al respecto en un momento, pero bajando, tenemos la sección de llamada a la acción, una sección de testimonios y al final un formulario de contacto con nuestra información. Muy bien, subamos por aquí.
Ahora, claramente este sitio no es viable así, pero ahora podemos hacer cambios en todo el sitio usando el editor de Lovable. Una actualización reciente permite modificar cualquier parte, específicamente con inteligencia artificial. Aquí abajo a la izquierda, van a ver este botón de "editar". Haré clic en estas ediciones. Ahora, esto nos permite básicamente editar cada parte de nuestro sitio web. Por ejemplo, aquí en este de "obtener una cotización gratuita", voy a hacer clic en este botón y luego verán unos cuantos comandos. Tienen la opción de pedir cambios rápidos. También tenemos este texto para ajustar el contenido. Podemos cambiar el margen y relleno de este botón específico. También puedes cambiar la fuente, el color, el fondo y ajustes avanzados aquí. Pero mantengamos esto básico, ¿de acuerdo? Así que le pediré cambiar el color de fondo. Entonces, procede a cambiar el color del fondo de la pantalla. Cámbialo a un suave degradado en tonos púrpura. Bien, le pido entonces cambiar el fondo a un degradado púrpura. Y ¡pum!, ya lo cambió. Ahora fíjense en cómo cambió los botones. Debo ser muy descriptivo y decirle a la IA que sea solo para este botón. Bien, así que ahora ya lo sabemos.
Digamos, por ejemplo, que esto que tenemos aquí arriba está muy cerca del menú, ya saben. Y se siente que está un poco apretado. Así que vamos a volver a nuestro editor aquí. Ahora voy a hacer clic en este fondo de aquí para añadir margen. Así que en la sección de "editar espaciado", voy a proceder a añadir algo de margen. Así que por aquí. Así que añadiré unos 50 píxeles de margen. Bien. Y una vez hecho, haré clic en "guardar". Y ahí lo tenemos. Ahora verán que tenemos margen. Aquí arriba. Hay espacio para que no esté todo tan apretado. Así que bajemos ahora en nuestro sitio web.
Muy bien, solo sigan bajando. Ahora aquí tenemos esta sección de portafolio. Si intento hacer clic en este botón, como pueden ver, no sucede nada. Así que podemos pedirle a la IA que realice una acción cuando el usuario pulse estos botones. Ahora voy a sacar esto del modo editor. Bien, entremos ahora en Lovable y echemos un vistazo a esta sección. Esta es la sección de nuestro portafolio en la página de inicio, pero los botones de "ver" no están funcionando correctamente. Debemos ser muy descriptivos, ya que se trata del portafolio de la home y por eso hay que solucionar este problema. ¿Puedes crear ventanas emergentes con más información del portafolio? Es decir, cuando alguien haga clic en "ver proyecto", quiero que aparezca algo y muestre más detalles sobre ese proyecto específico. Bien, la instrucción está lista y ahora verán que se arregló el botón del portafolio. Haré clic en "ver proyecto". Vean esta ventana emergente tan genial. Tenemos el resumen del proyecto, el desafío, nuestra solución, tecnologías y los detalles del proyecto. Si algo en su sitio web no funciona, simplemente denle instrucciones a la IA para que lo arregle y normalmente lo hará por ustedes.
Siguiendo hacia abajo, veamos un ejemplo más de caso de uso. Ahora, realmente no quiero esta llamada a la acción, ¿verdad? Esto es muy sencillo. Para borrar una sección, solo haz clic en "editar". Aquí, haz clic en esta sección y en "borrar sección". Eso es todo para borrar elementos y luego simplemente bórrenlo y listo. ¿Ven? Es así de simple. Ahora, siempre que hagan esto, asegúrense de guardarlo aquí abajo. Al usar el editor, deben guardar para que se apliquen los cambios que desean y seguiremos bajando. Y en general, todo lo demás se ve fantástico.
Ahora, supongamos, por ejemplo, que borraron esa sección, pero la quieren de vuelta, ¿verdad? Aquí arriba a la derecha, tendrán este botón de "historial". Y lo genial de esta plataforma es que es muy parecida a Elementor, así que pueden entrar al historial y volver a cualquier momento en que estuvieran editando su sitio. ¿Ven? Cada vez que actualizan algo, se guarda y luego se vuelve a publicar el siguiente paso, ¿no? Pero siempre pueden volver en el historial a cualquiera de estas versiones revisadas. Y como pueden notar, estas plataformas son cada vez mejores. Hace un año recuerdo que estas plataformas eran un poco malas. Un año después, ahora van mejorando. Creo que en 2 años, estas serán definitivamente el futuro.
Ahora, para guardar su aplicación, vayan arriba a la derecha, cliquen en "publicar proyecto" y luego en "publicar". Para la vista previa de su sitio, mírenla aquí. Este es el sitio ya publicado. Pueden pedir un dominio personalizado. Para añadir un dominio personalizado, hagan clic en "dominios personalizados". Aquí podrán agregar un dominio que ya tengan y también pueden comprar un dominio nuevo. Parece que es a través de INS. Odio esa compañía. Bueno, en fin, vamos a cerrar esto.
Ahora probemos algo distinto. Vamos a crear un sitio web que incluya una aplicación. Primero iremos a Chat GPT y luego le pediremos que cree la aplicación para nosotros. Quiero crear una aplicación que genere correos automáticos para agencias de diseño web. El generador de diseño creará correos de captación para negocios y clientes potenciales. ¿Puedes darme un prompt para que Lobable cree esta app y así conseguir clientes? Vamos a darle a "enter".
Bien, ahora tenemos el prompt que Chat GPT generó para nosotros. Aquí está el prompt para Lovable. Habla del estilo y diseño, las páginas, las funciones principales y la lógica de generación de correos. También nos da plantillas, ¿verdad? ¡Genial! Y también algunas funciones extra. Así que vamos a tomar todo esto de aquí. Vamos a tomar esto, vamos a copiarlo y ahora iremos a Lovable y lo pegaremos. Así que voy a pegarlo y luego generaré esta aplicación.
Y miren eso. Miren este sitio web. Se ve genial, ¿verdad? Como estos botones. Se ve bien. Digo, es una gran estructura. Incluso tiene esta cosita de correo muy creativo. Aquí dice, "¿Por qué las agencias nos eligen?" Y aquí podemos empezar a generar leads ahora mismo. Haré clic en "generar correo ahora" y aquí está el generador de correos. Y esto es algo que puedes usar ya mismo para tu negocio, ¿no? O crear un sitio y referir gente ahí, lo que sea. Aquí tenemos el tipo de negocio. Digamos, por ejemplo, que soy un agente inmobiliario, ¿vale? Y quiero más leads. Aquí vamos. Lo siguiente es la ubicación. Pondré Los Ángeles, tono amigable, nuestros puntos de venta únicos. Miren esto. Quiero aumentar tus ingresos en un 60%. El nombre de mi agencia es Darl Place y luego generaré el correo. Y listo, aquí lo tienen. Tenemos un correo generado que podemos copiar y compartir en nuestra red social favorita.
Ahora también aquí mismo tenemos plantillas. Y echen un vistazo a esto. Han incluido plantillas ya listas para clientes de restaurantes, legal, comercio electrónico e inmobiliaria. Ahora siempre puedes indicarle a la IA que cree más. Solo tienes que, por ejemplo, hacer clic en "e-commerce" y decirle a la IA: "Oye, ¿sabes qué? Quiero que hagas 100 plantillas para comercio electrónico. Quiero que hagas 200 plantillas para inmobiliaria". Puedes pedir casi cualquier cosa que quieras y lo generará para ti. Pero en general, estoy muy contento con cómo se ve esto. Funciona perfectamente y se ve muy profesional.
Estamos de vuelta en Lovable. ¿Y sabían que si bajan por aquí hay un espacio de trabajo? Este es mi espacio de trabajo. Bien. Cada proyecto que creo puedo elegir hacerlo público para otros usuarios o privado. Si elijo hacerlo público, la gente puede tomarlo y trabajar sobre mi obra existente. No crean que sobreescribe su trabajo, ¿vale? Crea una copia para ellos y pueden trabajar en ella en su propio espacio. Para darles un ejemplo detallado, aquí les presento una lista de muchas cosas y tareas en las que trabajaba antes de este video. Intenté copiar sitios web de awwards.com. Estuve muy cerca. Este de aquí intentaba copiarlo, pero creo que necesito más ajustes de IA para que quede realmente bien. Tengo bastantes, como pueden ver, ¿verdad? Incluso tengo algunos con animaciones y diseños muy interesantes.
Lo siguiente es lo de la comunidad, ¿no? Todos estos son hechos por la comunidad y han elegido hacerlos públicos. Así que puedes tomar su trabajo, modificarlo, pedirle a la IA otra cosa y publicarlo como tuyo. Por ejemplo, aquí tenemos esta página de inicio y aquí podemos o previsualizarla o podemos remezclarla. Así que voy a hacer clic en "remezclar". Y así de fácil, ahora podemos trabajar sobre el trabajo de este tipo. Podemos editarlo, podemos remezclarlo y luego reclamarlo como propio. Si quieres mejorar tus habilidades y no sabes cómo se hizo, puedes preguntarle a la IA. No te dará el prompt exacto, pero sí un rango aproximado. Así que aquí abajo puse: "Quiero saber qué prompts se pueden usar para recrear este mismo sitio web exacto". Ahora, si le pides que te dé los prompts exactos, te dirán que no los tienen, pero harán lo posible. Es ideal para darte una idea de lo que funciona. Y entonces aquí vamos. Así que nos dio este prompt, nos dice qué ingresar para obtener exactamente lo que hay en esta página. Ahora digamos, por ejemplo, que quieres volver a modificar esto, solo tienes que preguntarle a Lovable. Haré algo un poco loco: "Cambia el esquema de colores a un degradado rosa y negro estilo retro". Vale, lo ingresaré. Y ahora tenemos este rosa de aspecto raro, estilo retro, pero bueno, podría gustarles a algunos, ¿verdad? Aquí puedes realizar cualquier edición y modificación a este sitio web. Y aquí arriba, si haces clic en "publicar", puedes tomar este trabajo y publicarlo como propio. Es increíble. Me gusta que cree sitios y otros puedan tomar los prestados, construirlos y revisarlos. Esto crea una comunidad de pura innovación. Eso me gusta.
Así que ahora hagamos algo más avanzado. Ahora el punto de todo esto es realmente llevar al límite a la IA. Así que vamos a hacer algo un poco más alocado. Ahora voy a ir aquí a mi Everne y de hecho he creado un prompt muy detallado, ¿verdad? Y esto va a crear algo loco, ¿no? Así que tenemos paraallaje cósmico, tenemos todas estas animaciones diferentes y tenemos todos estos efectos distintos donde tenemos incluso el cursor del ratón. Podemos controlar qué pasa cuando la gente hace clic en algo o cuando mueve en algo. Aquí tenemos animaciones por secciones donde aparecen tarjetas de estilo glass mórfico y se escalan. Así que tenemos un, ya sabes, este es un prompt muy avanzado, como puedes ver. Así que lo que voy a hacer aquí es ir a Lovable y vamos a pegar esto ahora. De hecho, puedes acceder al mismo prompt. Lo dejaré en la descripción del video para que puedas copiarlo y pegarlo en la IA para ver qué podría crearte, ¿verdad? Pero esto es algo un poco más complejo, y el punto de esto es que una vez que obtienes algo complejo como esto, no tienes que usar lo que yo uso, sino que puedes ir a Chat GPT y decirle: "Oye, hazme algunas variaciones diferentes de esto. Hazme una variación que haga esto o aquello para que se ajuste a la cultura de tu empresa, ¿no?" Así que el objetivo de que haga esto es solo darte, ya sabes, un prompt avanzado con el que puedas juguetear y experimentar y editarlo con Chat GPT. Así que vamos ahora a generar esto. Y rápido, solo para darte una idea de qué hacer, ¿verdad? Así que puedes tomar ese prompt y poner: "Puedes generarme cinco versiones diferentes que sean modernas, minimalistas, clásicas y corporativas", y luego tomar ese mismo prompt de aquí y simplemente hacer que la IA cree varias versiones según la cultura de tu empresa. Así que al hacer eso, lo que pasará es que se crearán prompts muy complejos para sitios web corporativos, minimalistas, retro o para cualquier cosa que estés intentando lograr. Y solo para darles un ejemplo, aquí tenemos un estilo moderno, audaz e interactivo, donde nos dan un montón de animaciones y cosas con las que jugar. Tenemos tecnología limpia y minimalista, tenemos un centro de datos clásico y atemporal, fintech, corporativo y también una cuadrícula de hologramas futuristas. Tengo mucha curiosidad por ver cómo se ve eso, pero sigamos adelante y volvamos a Lovable.
Y listo, tenemos este nuevo sitio web tan interesante. Y si paso el cursor sobre estas cositas, verán que aparecen. Y si dejo de mover el ratón, verán que esta flechita se mueve. Pero en cuanto toco la pantalla, vuelve a empezar. ¿Ven eso? ¿Lo ven? Interesante, ¿saben? No sé, simplemente le da al visitante algo con que jugar en su sitio web, ¿verdad? Bajando, tenemos métricas clave y rendimiento trimestral. Parece que el gráfico no se muestra bien, ¿verdad? Así que podemos pedirle a la inteligencia artificial que lo arregle si quieren. Inteligencia global. Aquí, obviamente, podemos usar esto para arreglar el mapa porque no funciona bien, pero, ya saben, pueden pedirle que diga cualquier cosa, ¿no? Bajando, tenemos este, ya saben, genial sitio web de aspecto interesante, ¿verdad? La idea es mostrar que no están limitados por el diseño web convencional, pueden ser tan creativos como quieran con esta herramienta de IA.
Y para darles más inspiración, estos son otros productos que he creado, como pueden ver, donde también se puede poner música y cuando bajas verás que esto nos sigue. Tenemos el equipo y si alguien hace clic aquí, se crean estas animaciones tan geniales. Quizás los haga públicos para que ustedes puedan ir y visitarlos si quieren. También algo como este verb AI, que esencialmente es un generador de prompts. Así que pueden arrastrar géneros específicos aquí para generar una historia y luego la inteligencia artificial generará un relato basado en lo que pongan en la sección de prompts. ¡Exacto! Muy genial. Y luego tenemos este muy básico que creé donde si hago clic, es básicamente como un pequeño formulario por pasos donde los usuarios pueden ingresar información para lo que sea que estén intentando hacer. Y también algo realmente loco aquí donde tengo estas animaciones y este sitio web roto con el que simplemente quería divertirme un poco, pero ya entienden el punto, ¿verdad? Pueden ser tan creativos como quieran.
A continuación, hablemos de la base de datos. Cuando alguien rellena algo en su formulario de reserva o de contacto, todo se envía a una base de datos llamada Supase. Es un servicio independiente sin conexión a IA. Vean a Supase como su base de datos. Aquí arriba, haré clic en esta sección verde. Esto es Supase. Primero conectaré el proyecto, clicaré en "conectar" y añadiré una organización. Ahora vayan a Supase, regístrense y creen una cuenta. Tras esto, autorizan Lovable en su cuenta de Supase. Luego conectan su proyecto, hagan clic en "conectar" y listo, el sitio ya está conectado con Supabase. Cuando alguien complete un formulario de contacto, la información se guardará en nuestra base de datos. Así que vamos a probarlo.
Lo primero que voy a hacer es ir aquí a mi formulario de contacto. Ahora que conectamos nuestras cuentas, quiero volver a nuestra página de contacto y quiero pedirle a la IA que conecte este formulario de contacto con mi cuenta de Supase. Bien, acaba de terminar de integrar nuestro formulario de contacto con Suppabase. Lo que hace la IA es entrar en Suppabase y generar tablas para nuestro sitio web específico, lo cual es genial. Así que entra en la otra plataforma y crea las tablas de la base de datos para ello. Ahora vamos a probarlo. Vayamos a nuestro sitio web. Aquí mismo. Estoy aquí en mis sitios web. Haré clic en "contacto" y pondré mi información. Así que Wilson Wilson en 123.com. Bien, pondremos algo de información. Detallo mi proyecto y luego hago clic en "enviar mensaje". Muy bien, mensaje enviado.
Volvamos a Supabase para revisar la base de datos. Aquí a la izquierda, haz clic en el editor de tablas. Recuerda que si vuelvo aquí, verás que creó un formulario llamado "envíos del formulario de contacto", ¿verdad? Esto es lo que estamos buscando aquí mismo. Así que volveremos a nuestro base y verás los envíos del formulario de contacto. Y aquí está Wilson en 123.com. Y si nos desplazamos a la derecha, verás el rango de presupuesto, el mensaje, la fuente y también el mensaje, ¿no? Así que aquí lo ves todo. Así que cada vez que alguien rellene cualquier tipo de información, todo estará disponible aquí mismo en tu panel personalizado de Supabase. Sé que Supabase no es tan intuitivo como quisieras, pero quizá en el futuro faciliten más la navegación a los clientes.
En resumen, ahora que sabemos cómo hacerlo, ya tienes un sitio web de IA totalmente funcional con integraciones de formularios de contacto. Puedes hacer lo mismo con formularios de reserva y cualquier formulario que se te ocurra. De ahora en adelante, creo que estas plataformas van a ser el futuro, ¿verdad? Hace un año vimos sitios web de IA que generaban páginas con un aspecto algo tosco. Un año después, ahora se está volviendo realmente bueno. Ya podemos editar y mejorar los sitios web. Imagina dentro de 2 años. Creo que estas herramientas de IA van a dejar a Shopify y WordPress totalmente fuera de juego, porque ya estas otras plataformas hoy se están quedando atrás y estas nuevas plataformas de IA están haciendo las cosas cada vez más fáciles, así que habrá que ver qué pasa. Pero dime, ¿qué te parece? ¿Crees que estas webs de IA son el futuro? Dime, ¿qué opinas en los comentarios? Soy Dari Wilson y nos vemos luego, fiesteros. M.