He probado el VIBE CODING con Google AI Studio y ...

locuo
ForoCoches: Usuario
#1
Hace unos días vi que Google había lanzado esta herramienta para desarrollar aplicaciones sin saber código, algo muy similar a otras ya existentes como Lovable, así que coincidiendo con que hace unos días había tenido una idea de aplicación bastante sencilla, me he puesto a probar que tal funciona y os comparto que he hecho y mi conclusión, por si alguien se plantea usar esto para montar algo....

SPOILER: ¡sale mal!

Como contexto, decir que aunque tengo algo de conocimiento de programación, en web estoy ya muy oxidado.... vamos que entiendo los conceptos, pero de react, typescript y similares que es lo que utilizan este tipo de herramientas no tengo ni idea.

Ahora, ahí va mi primer prompt:

Necesito una web para que los usuarios intercambien enlaces de afiliado. Funcionará mediante la gestión de campañas y reportes.

- Cada campaña representa una webs, producto o servicios que ofrece enlaces o códigos de afiliado.
- Cada reporte representa una queja sobre un enlace de una campaña publicado por un usuario.
- Para cada campaña tendremos un título, una descripción, una imagen o logo, la fecha de caducidad, y un listado de enlaces o códigos de afiliado que posteriormente irán registrando los usuarios.
- El panel de administración tendrá un enlace a un formulario para crear nuevas campañas, un listado de campañas con los correspondientes enlaces para modificarlas o borrarlas, y un listado de usuarios que han sido reportados con el total de reportes que han tenido.
- El formulario para publicar nuevas campañas pedirá el título, la descripción, una imagen o logo, la fecha de caducidad y el número de veces que se tiene que mostrar cada enlace de los que registren posteriormente los usuarios en esa campaña.
- En la parte pública de la web, habrá un listado con las campañas publicadas y un buscador de campañas por título, además habrá un botón para iniciar sesión con la cuenta de Google.
- En cada campaña, debajo de su imagen o logo y su descripción, aparecerá el botón para mostrar el enlace de afiliado
- Para poder pulsar el botón de copiar enlace, el usuario tendrá que haber iniciado sesión previamente.
- Cuando el usuario pulse el botón de mostrar enlace de afiliado, se mostrará el siguiente enlace que haya disponible para esa campaña, junto al enlace aparecerá un pequeño icono que permitirá copiar el enlace al porta papeles, y un botón para generar un reporte en caso que el enlace no funcione.
- El botón de reporte guardará en la base de datos el enlace de afiliado, el usuario que lo publicó, el usuario que lo reporta, y la fecha y hora en que se ha generado el reporte.
- Al haberse mostrado ese enlace a un usuario ya dejará de estar disponible por lo que tiene que ser borrado de la base de datos, la próxima vez que un usuario pulse sobre el botón de mostrar enlace de afiliado, se le mostrará el siguiente enlace que haya registrado para esa campaña.
- Si no hay más enlaces para esa campaña, se le mostrará un mensaje informativo indicando que no hay enlaces disponibles.

¿En qué tecnologías me propones crear este proyecto?


Como podéis ver, ignorante de mi, le pregunté con que iba a hacer la web, por el momento ha obviado la pregunta, pero por el resto, me generó algo bastante potable, dejo aquí un par de capturas de pantalla, pero voy a empezar a pedirle cambios:




La web tiene que estar en Español de España.

En tablet y PC la caja de texto del buscador es demasiado grande, quiero que sea proporcional al botón de login con la cuenta de Google.

En las campañas no muestres los días restantes si no faltan menos de 7 días para que termine.

Debajo del botón de Show affiliate Link, si el usuario no ha iniciado sesión, muestra un mensaje indicando que tiene que iniciar sesión para poder mostrar el enlace.


Con este 2o prompt, me tradujo la web correctamente al español, ahora sí, me contestó sobre la pregunta del stack que ignoró en el primer prompt (no he entendido porqué me lo ha respondido ahora sin habérselo recordado yo), aquí la respuesta:

Mi propuesta tecnológica es la siguiente:
  1. Frontend (lo que ve el usuario): React con TypeScript.
    • React es una librería líder para construir interfaces de usuario dinámicas y eficientes. Su sistema de componentes hace que el código sea reutilizable y fácil de mantener.
    • TypeScript añade tipado estático a JavaScript, lo que ayuda a prevenir errores comunes durante el desarrollo y mejora la calidad del código, especialmente en proyectos que crecen.
    • Para los estilos, Tailwind CSS es una opción fantástica. Permite crear diseños modernos y personalizados directamente en el HTML de forma muy rápida, sin tener que escribir CSS tradicional.
  2. Backend (la lógica del servidor y base deatos): Node.js con Express.
    • Node.js permite usar JavaScript en el servidor, lo que simplifica el desarrollo al usar un solo lenguaje en todo el proyecto.
    • Express es un framework minimalista para Node.js que facilita la creación de APIs para que el frontend se comunique con el servidor y la base de datos.
  3. Base de Datos: Firebase (Firestore).
    • Firestore es una base de datos NoSQL en tiempo real que se integra perfectamente con aplicaciones web. Es escalable, flexible y fácil de usar.
    • Además, Firebase Authentication te solucionaría de forma muy sencilla y segura el inicio de sesión con Google que necesitas.
  4. Alojamiento (Deployment): Vercel o Netlify.
    • Ambas plataformas ofrecen un despliegue continuo muy sencillo desde un repositorio de Git (como GitHub), con generosos planes gratuitos para empezar. Son ideales para aplicaciones basadas en React.
Ahora bien, la caja de buscar sigue siendo enorme, vamos a ver si el 3er prompt lo arregla:

Ese buscador de campañas sigue siendo enorme, hazlo más pequeño

sigue el puto buscador enorme.... vamos con otro intento, y se me olvidó también decirle que cambie el título ese Affili-Link que ha decidido poner, como he dicho que es un proyecto chorra, le voy a poner un dominio .com.es, concretamente afiliados.com.es, así que le diré que simplemente ponga algo genérico como "Comparte enlaces de afiliado"

no se trata de hacerlo más estrecho, sino de reducir la altura, necesito que tenga la misma altura que el botón de iniciar sesión.

además, el título de "Affili-Link" Quiero que lo cambies por: "Comparte enlaces de afiliado"


Esta vez (más o menos) sí, ha reducido el buscador, pero me ha mantenido la imagen de la lupa enorme detrás, le he pedido que la quite por completo:

Ahora quita la imagen de la lupa que has puesto en el buscador

Vuelve a atrancarse con el puñetero buscador... me dice que ha quitado la lupa, pero sigue ahí, así que sigo intentandolo:

no lo has eliminado, quita por completo la lupa del buscador

otro intento

detrás del buscador sigo viendo una lupa gris, quítala



¡Ahora sí!, visualmente ya tengo la web en condiciones, en este punto paso a probarla y casi todo funciona bien, el principal problema que veo y que no estoy seguro si es un tema de la preview o que, es que con el usuario que me ha iniciado sesión (te pone uno inventado), ya me sale el panel de admin, quiero asegurarme que solo lo vea el admin, y luego al reportar que un enlace no funciona, también quiero que ponga un mensaje de reporte OK, así que este es mi siguiente prompt:

He iniciado sesión y me ha aparecido un botón al panel de administración, eso solo tiene que aparecerle al administrador, no a todos los usuarios

he reportado un enlace y el reporte se ha guardado correctamente, pero necesito que se muestre un mensaje al usuario que hace el reporte indicando que el reporte se ha realizado correctamente.


Después de este prompt, me dice que ha modificado la simulación para al volver a iniciar sesión ya sea un usuario no admin, pero me sigue apareciendo el botón para ir al panel de admin, es verdad que si le doy no hace nada, pero no tendría ni que aparecer. Y el mensaje de reporte OK nada...dice que lo ha hecho, pero no.

He vuelto a iniciar sesión y al pulsar el botón de panel de administración ya no accedo, pero si no soy administrador, no tiene que aparecer en ningún momento.

También te pedí que al reportar un enlace apareciese un mensaje informando al usuario que el reporte se había hecho correctamente, pero sigue sin aparecer ese mensaje

Con esto parece que ¡lo tenemos!, sigo con la duda de como podré seleccionar que usuario será admin, le pregunto...

necesito saber como podré elegir que usuario es administrador y cuál no

Me dice que para la demo ha hardcodeado en un archivo el admin, pero que lo suyo es tenerlo en la base de datos, y me propone construir un panel de gestión de usuarios, por ahora no voy a pedírselo, ya lo que voy a hacer es ver como despliego esto....

Para desplegar en la parte superior de la preview, hay un botón con un icono que pone "Implementar App" le doy ahí, me pide elegir un proyecto (hablamos de proyectos de la google cloud console) le dejo que use el que te crea por defecto y me pide también habilitar la facturación... $$$$$, le pongo mis datos y mi tarjeta (no se va a comer revoluts ni mierdas, hay que poner la del banco de verdad), te mandan la notificación para autorizar pagos, y si no os habíais registrado antes, os dan 300$ de prueba.

Vuelvo al proyecto de AI Studio, le doy a refresh y ya me se habilita el botón de "Deploy App"

Una vez acaba de deployar la app, me lleva a la página del proyecto en la consola de Google y me da un link a la aplicación, aquí me tocaría mirar como conectar un dominio y tal, pero....entro con el link que me dan y oh sorpresa, tremendo mojón, el login no funciona, me lo hace automáticamente con cuentas fake.

Llegado a este punto, voy a deshacer tremendo mojón, por lo que he visto lo ha deployado sobre un componente de Google Cloud que llama Cloud Run, lo borro y en principio ya está, entiendo que no me cobrarán nada, ahora... bien es verdad que igual alguien aquí ya se ha perdido y no sabe como cojones apagar esto...

CONCLUSIONES

Estas conclusiones son a finales de 2025, no digo que esto en un año o en X tiempo pueda ser otra cosa, dicho esto:

Me parece una solución que NO está madura, como habéis visto hay cosas simples en las que se atranca de mala manera... (como ejemplo el buscador)

Si no tienes conocimiento de lo que hay por debajo (código) es casi imposible de mantener, arreglar errores o hacer cualquier cambio.

Siguiendo con el punto anterior, la escalabilidad es 0, a menos que tengas conocimientos de los componentes del cloud de google, no vas a poder tocar nada.

Alguien me puede decir que si es que se lo he puesto dificil con el login y tal y cuál.... para hacer una web informativa te montas un wordpress y tienes muchisimo más control de la página y puedes cambiar lo que quieras, no estás atado al cloud de Google...

En definitiva, a día de hoy por lo menos la solución de AI Studio me parece un engaña bobos, no acabo de entender cuál es su público objetivo... alguien que sepa programar no va a estar perdiendo el tiempo en ver de que forma tiene que pedir las cosas para que le hagan caso, y el que no es programador, pues lo que ya he dicho arriba, no tiene por donde cogerlo.

Espero que sirva para desmentir el montón de mierda de videos que hay en youtube diciendo que te puedes hacer pajas con el vibe coding y tal y que cuál, y si alguien ha hecho algo que le funcione bien, pues estaría bien que lo comparta abajo.
SeñorFobia
ForoCoches: Usuario
#2
Se tenía que decir y se dijo

Yo hago cosas muy complejas y los agentes son poco más que un autocompletar más lentos que yo, en mi proyecto se pierden

Pero me van bien para darles un contexto limitado y que me hagan la base de los tests (que luego yo pongo los datos bien, porque te testea casi para que pase el código) o algoritmos relativamente conocidos, aunque eso prefiero hacerlo en modo chat que en modo agente
UriiS
® Leyenda
#3
Cita de SeñorFobia
Se tenía que decir y se dijo

Yo hago cosas muy complejas y los agentes son poco más que un autocompletar más lentos que yo, en mi proyecto se pierden

Pero me van bien para darles un contexto limitado y que me hagan la base de los tests (que luego yo pongo los datos bien, porque te testea casi para que pase el código) o algoritmos relativamente conocidos, aunque eso prefiero hacerlo en modo chat que en modo agente
Exacto, en mi proyecto he usado mucho el modo agente de copilot, sobretodo para front que era lo que menos dominaba y funciona bien para todo el tema de crear el esqueleto y te ahorra mucho tiempo porque escribe todo el codigo repetitivo mucho más rápido, pero si no tienes conocimiento de lo que está haciendo te la lía.


Para el back igual, tema montar DTOs basados en el modelo de datos que viene de front muy bien, los controllers solamente el esqueleto, etc... Pero en cuanto a la lógica de negocio y storage es mejor hacerlo tu con el agente en modo chat para preguntarle dudas y sobretodo tratar el código que te da como si fuera un junior, revisando SIEMPRE.
FabadaAsturian
ForoCoches: Usuario
#4
Esta claro que actualmente son un plus a los programadores pero los productos de auto creación como lovable, google ai studio o base44 aun estan muy muy verdes. Yo suelo usar copilot para endpoints CRUD, cambios chorras en un diseño o cosas asi. Los suele hacer bien y lo que hace mal lo puedes discutir con el, el problema esta en cuanto le das ordenes con una lógica mas compleja y comienza a suponer cosas y meter gambazos. Yo le doy unos 2 o 3 añitos, puede que menos si siguen haciendo inversienos tan inmensas en empresas como cursor o lovable.

Un saludo shur, has explicado muy bien tu experiencia!
Sagarret
ForoCoches: Miembro
#5
Cita de SeñorFobia
Se tenía que decir y se dijo

Yo hago cosas muy complejas y los agentes son poco más que un autocompletar más lentos que yo, en mi proyecto se pierden

Pero me van bien para darles un contexto limitado y que me hagan la base de los tests (que luego yo pongo los datos bien, porque te testea casi para que pase el código) o algoritmos relativamente conocidos, aunque eso prefiero hacerlo en modo chat que en modo agente
Esto es, aunque el autocompletar te mete una velocidad que flipas programando.

Para los tests son crema, sobretodo si ya tienes una suit de tests bastante grandes (miles de tests) tienen un contexto cojonudo para generarte mas o modifciarte tests ya que tambien tienen el codigo de referencia. Aunque aun asi, tienes que retocarlos casi siempre.


Pero el otro dia me creo un stub para unos tests de una api grpc que necesito poca modificacion y eso me redujo un dia de trabajo a quiza una o dos horas.


Eso si, tambien lo uso para temas de bajo nivel en rust por proyectos personales y se tira unos triples de medio campo impresionantes.

Lo que yo creo que va a afecatar a los juniors, porque las tareas que son mas de picar cosas no complejas o aplicar un draft las puede hacer un senior en poco tiempo (como lo que digo lo del stub de la api grpc)
← A Empleo / Emprendimiento