Crea productos digitales en minutos con Lovable.dev

[Transcript language: es] 0:00 Hola Qué tal mi nombre es Jesús vivas Y 0:02 en este vídeo Te voy a enseñar a Cómo 0:03 usar loba lob es una de las empresas una 0:06 de las startups que más está creciendo 0:08 en los últimos meses y me obsesiona 0:11 porque muchas veces he visto post en 0:13 linkedin en Twitter sobre personas 0:15 hablando de lovall en inglés pero no he 0:17 visto a nadie en español contando Cómo 0:20 se usa lovable qué caso de uso se le 0:22 puede dar y me puse a crear Este vídeo 0:24 para vosotros Espero que ayude si tienes 0:26 cualquier duda déjame en los comentarios 0:28 y nada espero que sea super y empieces a 0:30 usar esta super plataforma porque me 0:32 parece brutal Pues bien ya estamos aquí 0:34 compartiendo pantalla estamos dentro de 0:36 lawall aquí como veis estoy una vez te 0:39 registras esta es la pestaña que esta es 0:41 la pantalla que vas a ver estoy en el 0:42 apartado de My project Pero antes de 0:44 entrar directamente a lo que es mi 0:45 proyecto y contar un poco cómo llegas 0:47 hasta este punto te quiero comentar 0:49 algunas funcionalidades que tiene lov B 0:51 que me parecen muy interesantes no solo 0:52 a nivel de producto sino también a nivel 0:54 de go to Market Cómo están lanzando su 0:56 producto Cómo están consiguiendo muchos 0:59 muchos usuarios Son creo que es una de 1:00 las startups que más está creciendo en 1:02 los últimos meses y es esta 1:04 funcionalidad la del latest Bueno más 1:06 que una funcionalidad es un una forma de 1:09 crear comunidad una forma de incentivar 1:11 a que las personas sigan creando son 1:13 estas dos pestañas bueno estas tres te 1:15 diría yo la de latest la de feature y la 1:18 de templates Por qué Porque la de 1:20 templates bueno como sabéis en cualquier 1:22 herramienta que uséis normalmente 1:23 entramos y tenemos plantillas con lo 1:25 cual Esto no es nada fuera de lo común 1:27 pero esta pestaña de fature y latest me 1:29 parece eso super interesante porque lo 1:31 que te permite ver son creaciones de 1:33 otras personas dentro de la herramienta 1:36 Es decir cosas que están haciendo otras 1:37 personas con la herramienta y esto Qué 1:39 hace que incentive mucho más a que las 1:41 personas creen con esa herramienta por 1:44 qué Porque primero te deja ver todo el 1:47 chat que ha tenido esta persona para 1:49 llegar a este resultado final con lo 1:50 cual tú puedes aprender de cómo ha 1:52 llegado esta persona a hacer esta 1:53 plataforma como veis que no sé muy bien 1:55 de qué va guía de senderos de los no sé 1:58 dónde en Patagonia 2:00 es decir puedes aprender de de esta de 2:03 este chat que ha tenido esta persona 2:04 pero también puedes hacer un remix que 2:06 es básicamente duplicar este proyecto 2:08 para ti con lo cual tú podrías duplicar 2:10 este 2:10 proyecto adaptarlo a tu gusto y ya 2:13 tendrías un proyecto creado dentro de l 2:14 entonces me parece super interesante esa 2:17 estrategia de go to Market Y esa 2:19 estrategia de comunidad de alguna forma 2:21 no luego hay un apartado que tiene lov 2:25 que se llama launch que es básicamente 2:26 como una especie de eh plataforma 2:30 marketplace en el que las personas 2:32 envían la herramienta que han creado con 2:33 lovable y otros usuarios votan con lo 2:36 cual Esto me parece también super 2:37 interesante porque aquí puedes ver cada 2:40 semana Los mejores productos que se han 2:41 creado votados por la comunidad de 2:44 lovall con lo cual por ejemplo este chat 2:45 PDF puedes ver pues eso Cuál es el 2:48 producto puedes visitarlo puedes 2:50 interactuar con él y si quieres incluso 2:52 puedes duplicarlo o sea me parece s 2:54 super Interesante pero dicho esto Vamos 2:56 a entrar de lleno en lo que es la 2:58 creación de una aplicación o o de o de 3:00 un producto digital o de una página web 3:01 con lovable y te voy a contar el proceso 3:04 que yo he seguido no quiere decir que 3:05 sea el proceso que tú tengas que seguir 3:07 pero si es el que yo he seguido y con el 3:09 que le he dado forma a la idea que 3:10 quería desarrollar con loba bien yo 3:13 antes de entrar a loba lo primero que 3:15 hice fue hablar con ch gpt Entonces tuve 3:17 una conversación en el que preguntaba 3:19 primero si sabía lo que era lovable y 3:21 cuando llegamos a la conclusión de que 3:22 sí sabía lo que era le dije que quería 3:24 crear un producto quería que me diera 10 3:28 ideas relacionadas con lo que es mi 3:30 empresa con lo cual como ya cha gpt 3:32 tiene contexto de quién soy yo Qué es mi 3:34 Qué es mi empresa Qué hace mi empresa 3:36 todo pues simplemente le dije Oye dame 3:38 10 ideas y en base a eso me dio Pues eso 3:40 10 ideas que me parecieron bastante 3:42 buenas de estas concretas me gustaron 3:44 tres y de estas tres le pedí queba 3:46 íbamos a desarrollar la primera que era 3:48 una landing page checklist que yo tenía 3:51 una plantilla y que se lo iba a adjuntar 3:53 Entonces yo lo que hice es una plantilla 3:55 que ya tenía que es esta que está aquí 3:57 que es una plantilla que yo uso con los 3:58 clientes que es llama Sas landing page 4:00 checklist que es básicamente para ver el 4:02 diagnóstico de una landing page pues por 4:05 ejemplo si la página de pricing los 4:07 precios de suscripción se muestran 4:08 públicamente Y de forma correcta pues 4:10 Oye está mal y esto tenemos que 4:12 mejorarlo con lo cual lo ponemos en todo 4:14 eh los beneficios del pricing Pues bueno 4:16 está mejorable si esto lo ponemos en 4:18 todo En definitiva esta plantilla me 4:21 sirve para hacer un una especie de 4:22 auditoría de la landing page de la 4:24 página de adquisición de producto de 4:27 pricing y de registro de clientes 4:29 Entonces lo que hice fue archivo 4:32 Descargar me lo descargué como un Excel 4:34 se lo subí a ch gpt y le dije Oye en 4:36 base a este documento que te he subido 4:38 e vamos a crear este prompt para lovable 4:42 Pero antes quería asegurarme Si los 4:44 checks que los checks para mí eran estos 4:46 de dentro de diagnóstico lo de no 4:48 relevante mal mejorable bien es decir 4:50 este este Drop down si podía leerlo 4:52 correctamente se lo pregunté Oye esto 4:55 puedes leerlo correctamente y me dijo 4:56 que no que no podía leerlo correctamente 4:58 con lo cual le dije en diagnóstico está 5:00 esto y esto y esto y en la parte de 5:02 estatus está esto y esto y esto porque 5:04 esto es importante si por ejemplo vas a 5:06 hacerlo en base a un documento porque ch 5:08 gpt no siempre puede leer el 100% del 5:10 documento o puede tener alguna 5:12 dificultad a la hora de leerlo sobre 5:14 todo si no es un PDF sino que es otro 5:16 formato con lo cual asegúrate primero 5:18 que está correctamente o sea que ch gpt 5:20 ha entendido perfectamente la idea que 5:22 tú quieres 5:23 e desarrollar posteriormente en lv para 5:26 eh posteriormente que te dé un prom el 5:29 objetivo mío el objetivo principal es 5:32 que yo quería que me diera un prompt muy 5:35 eh específico en base a lo que yo quería 5:38 para enchufarlo A lov B Es decir para 5:41 copiarlo y pegarlo en lovable Por qué 5:42 Porque de la otra forma lo que iba a 5:44 estar haciendo en lova es prueba error 5:46 iba a estar créame esto luego me iba a 5:48 decir Oye no he entendido esto o Esto me 5:50 ha dado error entonces quería tener un 5:51 prom lo más concreto y lo más completo 5:54 posible para enchufar selo directamente 5:56 entonces en base a toda esta 5:57 conversación que tuve eh Le dije que me 5:59 crea ar este prom me creó este prom en 6:01 el que me daba Pues cómo tenía que ser 6:03 el el producto las funcionalidades las 6:06 pantallas cómo tiene que ser 6:08 el el ui O sea que tiene que ser 6:11 eh minimalista Mobile friendly que sea 6:15 responsive En definitiva todo esto y lo 6:17 que hice fue directamente copiarlo quité 6:19 una parte que no me encajaba mucho que 6:21 era este punto número tres lo copié aquí 6:24 luego me fui a lovable y lo pegué como 6:27 veis ya estamos aquí en la pestaña de 6:29 creación lo que hice fue pegarle 6:32 directamente lo que me dijo chat gpt 6:35 esto se puso a pensar empezó a analizar 6:38 todo lo que es e Pues eso el promt que 6:40 le había dado y ya aquí me sacó un 6:43 resultado bastante decente ya bastante 6:45 decente porque como veis Pues eso tengo 6:47 un Sas landing page checklist en el que 6:49 tengo los diferentes elementos de 6:51 diagnóstico los diferentes botones eh 6:54 puedo darle a generar report o sea era 6:57 un resultado bastante decente y que la 6:59 verdad me impresionó sin embargo como 7:01 veis aquí tiene bastante mejora con 7:04 respecto a lo que fue el resultado final 7:05 que ahora os lo enseñaré por ejemplo 7:07 aquí no tenía mi logo cuando generaba un 7:10 report 7:11 em el resultado no te da un listado 7:13 bastante claro de las acciones que 7:15 tenías que hacer cuando haces clic en 7:16 estos botones Casi ni se aprecia Cuál es 7:19 el botón que estás pulsando con lo cual 7:21 tenía bastante margen de mejora Entonces 7:23 qué hice fui diciéndole los las mejoras 7:27 que veía que tenía que hacer aquí como 7:28 veis este ya es el resultado final de lo 7:31 que es la plantilla como veis el antes 7:34 es un resultado bastante decente y el 7:36 después que es un resultado aún mejor 7:38 porque ya tiene mi logo aquí cuando hago 7:41 clic como veis ya se ve claramente Cuál 7:43 es 7:44 em el diagnóstico de cada uno de estos 7:47 puntos cuando hago to do in progress 7:49 done también cambia de color si le doy 7:52 al botón de generate report Vamos a 7:53 darle 7:54 aquí ya me saco en listado con las cosas 7:57 que tengo que hacer Bueno en este caso 7:59 Es que solo lo he puesto pero vamos a 8:01 poner por ejemplo esto mal mal mal mal 8:03 Aquí vamos a poner bien bien mal bien 8:08 aquí por ejemplo en price vamos a poner 8:10 no relevant y vamos a mezclarlo y aquí 8:13 como veis vemos el progreso del report y 8:15 cuando le doy a generate report me saca 8:17 un listado de las cosas que tengo que 8:18 mejorar con lo cual es bastante más útil 8:21 que el primer resultado que me dio aquí 8:23 esto le puedo dar a exportar como PDF y 8:25 lo que va a hacer es generarme un PDF 8:27 que puedo mandar por correo que puedo 8:29 usar yo mismo pero En definitiva es un 8:31 producto bastante un producto barra 8:33 página bastante Dinámico y bastante 8:36 usable bien Cómo llegamos a este 8:39 resultado final Pues con una 8:40 conversación y la mejor forma de 8:42 conversar con con lovable es 8:46 directamente en inglés con lo cual si 8:48 sabes inglés pues vas a tener esa 8:50 facilidad si no sabes inglés primero 8:52 pásalo por chpt lo que quieras dile que 8:54 te ajuste el prompt enfocado a una 8:56 plataforma que te va a ayudar a crear un 8:58 producto digital tal y ch te lo va a dar 9:00 bastante bien hecho para que tú luego se 9:02 lo enchufes a lov Si quieres cambiar los 9:04 colores Pues todo es conversacional 9:06 simplemente dile Oye Quiero cambiar el 9:09 color a este código de color quiero que 9:10 subas este logo que es el logo de mi 9:12 empresa a esta parte luego por ejemplo 9:15 le dije que me generar este batch que es 9:17 p el nombre de mi empresa y si haces 9:19 clic te lleva a la página web con lo 9:21 cual es todo absolutamente 9:23 conversacional sí que es cierto que por 9:25 ejemplo a la hora de poner iconos yo 9:27 quería que cada uno de estos elementos 9:28 tuviera un No aquí reventó aquí no sé 9:32 por qué me empezó a dar error entonces 9:34 lo que hice fue un restore si te pasa 9:36 esto si por ejemplo tienes un resultado 9:38 que no es correcto o te parece aparece 9:41 un error después de generar algo que 9:42 estaba bien hecho simplemente vuelve 9:44 atrás y sigue iterando entonces una vez 9:47 mira aquí como veis se ve el error con y 9:49 luego lo que hice fue un restore no me 9:51 complique con lo cual lo que tenéis que 9:53 hacer es simplemente conversar eh aquí 9:55 yo pues eso le he ido añadiendo mejoras 9:58 o ya añade el power product añade iconos 10:01 de nuevo conos no sé por qué pero no 10:03 funcionó e Entonces es conversacional es 10:07 bastante conversacional y en base a eso 10:08 lo que puedes hacer es crear Pues casi 10:11 cualquier cosa que tú quieras más cosas 10:13 que puedes ver dentro de lovall Pues 10:15 bien aquí tienes la pestaña de tu 10:17 histórico es decir todas las iteraciones 10:19 que has ido generando con lo cual si 10:21 quieres restaurar una versión solo 10:22 tendrías que pinchar hacer clic a 10:24 restore que en este caso no lo voy a 10:26 hacer porque me va a volver atrás y 10:28 listo luego también tienes eh la pestaña 10:30 de código vamos a irnos atrás y tienes 10:34 aquí la pestaña de código esto es por si 10:36 eres desarrollador y quieres ver alguna 10:39 parte de código pues puedes verla aquí 10:41 directamente sí que es cierto que no 10:43 puedes editarla desde aquí aquí como 10:45 veis pone que solo puedes leerlo si 10:48 quieres editarlo tienes que hacerlo 10:49 desde github luego la forma de llevarte 10:52 esto a un producto o o con tu propio 10:55 dominio es algo que estoy investigando 10:57 pero si le das al botón de publish aquí 11:00 tienes la opción de hacerlo directamente 11:01 eh añadiendo tu propio dominio que para 11:04 ello tienes que estar en un plan de pago 11:05 con lo cual si Imagínate este es el 11:08 producto final y lo que quiero es 11:09 conectarlo con mi dominio de product 11:11 podría hacerlo directamente desde lova 11:14 pagando la suscripción pero también 11:16 tienes la opción de llevártelo a otra 11:18 plataforma o incluso publicarlo con El 11:21 dominio de lov que en este caso si 11:23 entráis en esta página web products 11:25 checklist lovable lo voy a dejar en los 11:27 comentarios Vais a poder Ver el 11:29 resultado final eh que he tenido con 11:31 esta plataforma entonces en resumen y un 11:35 poco para para finalizar Este vídeo 11:37 logab me parece una plataforma super 11:40 interesante te invito a que la pruebes 11:41 te invito sobre todo a que antes de 11:44 empezar a crear entres en este apartado 11:47 latest y feature y veas las creaciones 11:50 que están haciendo la gente porque me 11:51 parecen algunas super interesantes 11:53 fijaos esto parece un Google calendar O 11:55 sea hay plataformas y y y productos 11:58 super interesantes esto no solo se 12:00 limita a crear páginas web como veis hay 12:03 plataformas esto parece un producto sea 12:06 parece un Sas esto es literalmente un 12:08 Sas o sea con funcionalidades y demás 12:10 obviamente mucho más complejo pero eh la 12:14 capacidad de creación con esta 12:15 plataforma de verdad me parece 12:17 alucinante entonces uno usa ch gpt para 12:21 customizar el prom usa el prom en inglés 12:24 si tienes algún er vuelve atrás y si te 12:26 da algún error también eh que ch gpt sea 12:29 como tu tu asistente a la hora de 12:30 desarrollar con con lovable tienes la 12:33 opción también de integrarlo con figma 12:36 esto es algo que no no he probado aún 12:38 pero me parece aún mejor porque puedes 12:39 crear tu diseño en figma y luego 12:41 traértelo a lov y posteriormente puedes 12:44 conectarlo con tu propio dominio o bien 12:46 puedes publicarlo con El dominio de 12:47 lovall para que sea completamente 12:49 funcional creo que esta plataforma 12:51 cambia un poco el paradigma a la hora de 12:52 crear un mvp a la hora de crear un 12:54 producto mínimo viable Espero que este 12:57 mini tutorial mini conversación que que 12:59 he tenido contigo eh te haya ayudado 13:01 como siempre encantado de resolver 13:03 cualquier duda y pues eso cualquier duda 13:06 déjalo por los comentarios Sígueme en 13:07 linkedin Sígueme en mis redes sociales y 13:09 estaré encantado de ayudarte con lo que 13:11 necesites un abrazo