Como ya sabéis, V0 es una inteligencia artificial creada por la gente de Vercell,
los creadores de Next.js y todo esto, que lo que hace es crearte componentes.
De hecho, puedes decir, a Spotify Clone, yo ya tengo acceso, está en beta privada,
o sea, que tenéis que pedir acceso, le puedes decir a Spotify Clone, le das al Enter
y en un momento, en unos segundos, ojo lo que hace, porque es bastante sorprendente,
lo que hace es crearte la UI, los componentes y darte el código.
Tarda un ratito, pero es normal. Ojo, veis que ya está creando poco a poco, va creando.
Además, nos está creando tres versiones diferentes, por si hay una que no te gusta.
Esta sería una, esta sería la otra y esta sería otra. O sea, tenemos tres versiones.
Y fijaos que ya le está poniendo iconos, le está poniendo la barra al lado, le está poniendo,
¿veis? Y sigue creando. Está poniendo Feature Playlist, New Releases, ¿veis que está haciendo aquí
como todas las cosas? Y podemos ir viendo como cada uno está avanzando de forma totalmente diferente.
Aquí está poniendo a los Player Controls. Fijaos aquí que le ha puesto el reproductor.
O sea, cada uno le ha puesto una cosa totalmente distinta, pero es impresionante, ¿no?
Mira, madre mía, que bien ha quedado este de aquí abajo. O sea, este por ejemplo ya ha terminado.
Pues ya tenemos tres versiones de un clon de Spotify. A ver, no lo ha hecho entero,
no lo ha hecho entero, pero de cada uno tendríamos el código. Fijaos, tenemos aquí el código,
que esto si lo pegas deberíamos ver exactamente lo mismo que hemos visto. Si vamos aquí a HTML,
por ejemplo, lo podemos copiar aquí, del WinPlay, pegamos aquí y ¿veis? Ya tenemos aquí nuestro Spotify.
O sea, copiar y pegar, copiar y pegar. ¿Es responsive? A ver, yo creo que será responsive a duras penas.
No, no es responsive. Pero lo podemos intentar y eso es lo más increíble de todo.
Por ejemplo, ¿cuál es el que más os ha gustado? ¿El A, el B o el C? El A, el B o el C.
Vamos a hacer que sea responsive. A, B, A, A, A, C, A, A, B, B, ¿vale? A, B, C, P, P, P.
Bueno, voy a entender más o menos, por lo que estoy viendo, muchos Cs. Venga, vamos a entender que es el C,
no sé por qué, pero el C. Pues lo más interesante de esto es que lo podéis iterar.
O sea, esto es lo que es realmente increíble, porque que lo genere una vez está bien.
Se pueden hacer diferentes cosas. Por ejemplo, podéis con este, ¿veis aquí que hay un botoncito
que pone pick and edit? Podéis darle y decirle, vale, quiero este input.
¿Veis que me lo ha centrado mal? Vamos a seleccionar el elemento, este input,
y le vamos a decir, align, center, vertically, icon and text of the input.
Estamos diciendo que solo exactamente cambie ese input. Le damos, y a partir de aquí lo que va a hacer
es como iterarlo y hacer los cambios exactamente. Bueno, vamos a ver si me ha hecho caso, ¿eh?
Vale, me ha hecho una mierda de caso, o sea, no me ha hecho ni puñetero caso.
O sea, pasado de mí, pero muy bestia, ¿eh?
Center this icon with the input. Yo creo que le está costando, ¿eh?
Ah, si no es capaz ni siquiera de centrar. Estamos tranquilos que no es capaz de centrar verticalmente.
¡Ojo! Ahora sí que lo ha arreglado. Ahora sí que lo ha arreglado.
Pero ¿veis? Lo ha entendido, lo ha entendido, ¿eh?
Y podéis continuar, ¿eh? Por ejemplo, este input le podemos decir,
add some padding vertically to the input, ¿vale?
Y ahí podemos seguir iterando. A la derecha estaréis viendo que hay como versiones,
versión 0, versión 1, ¿no? Y mientras vamos iterando, ¿veis?
Ahora le he añadido un poquito más de padding, lo cual está súper chulo.
Le podemos decir, vale, pues esto, otra vez, este input, make it border radius more rounded.
Y encima tarda súper poco, súper poco, ¿eh? La verdad es que está bastante bonito, ¿eh?
Ah, me ha dejado fatal. Make rounder o more rounded the border radius.
¿Sabes lo que pasa? Que a lo mejor ese componente no es exactamente, o sea, está por fuera o algo.
No sé. Pero no, no lo está haciendo. Ah, mira, ahora sí, ahora sí. Ahora sí que lo ha hecho.
La verdad es que está bastante, está bastante... Dice Guillermo viendo a mí en directo y haciendo lo que le pide.
¿Os imagináis que en realidad está Guillermo en tiempo real mientras yo voy diciendo estas cosas?
Y está ahí, o hay un gnomo gallego que está ahí haciendo las cosas.
Vale, lo ha pedido.
Puede ser la realidad del edge y de la inteligencia artificial.
En realidad es que hay unos enanos mágicos gallegos que están, que cada vez que reciben un input, un prompt, en chaje, pete o lo que sea, te lo contestan a mano.
Es impresionante.
Le podemos empezar a decir ya más cosas generales. Yo que sé.
Transform to dark mode, por ejemplo, ¿no? Me gustaría más que fuese dark mode.
Ya se puede ver que ha cambiado el color. Es tremendo. O sea, la verdad, sinceramente, está muy chulo.
Está muy chulo porque algo que hasta ahora, pues, tendríamos que haber estado ahí un buen rato, no sé qué, no sé cuánto.
Ahora le voy a cambiar el fondo de color, ¿vale? Le voy a decir el color exacto que quiero.
Pero fijaos, ahora tarda más porque está regenerándolo todo. No le hemos dicho un componente en concreto, sino que lo está regenerando todo.
Y ahora, pues, tarda más. De hecho, podemos ver aquí en código. Creo que, ¿ves? Puedes ir viendo cómo lo escribe.
¿Veis? Aquí se va viendo cómo lo está escribiendo y tal. Vale. Bueno, pero ya lo tenemos.
Vamos a decir background black. Lo malo es que va a tardar también bastante.
Mido que lo diseñe en tema retro. A ver, no creo que llegue a tanto, ¿sabes?
Pero sí que es verdad que es una inteligencia artificial que llama bastante, bastante la atención.
Tiene cosas que, como esta, ¿no? Que sí que sorprenden bastante.
El código generado solo es para React y para HTML. Al menos por ahora, ¿ves?
Tendríamos el de React, que lo podéis añadir en vuestro proyecto de Next.js con un comando.
Un solitario. Ah, mira. A Solitary Game. Por ejemplo, juegos.
Hostia, que aquí está haciendo las cartas. La madre que lo parió. No me lo puedo creer.
Mira, aquí está poniendo como los botones, como para cart 1, cart 2, cart 3, cart 4.
Bueno, joder, este está chulo, ¿eh? Este está bastante chulo. Este no ha quedado mal.
Pero como veis, le falta más la parte visual. O sea, aquí, como podéis ver, sí, pone Shuffle, Deal, Reset.
Pero es más una UI, ¿eh? Hay gente que se cree que crea las aplicaciones.
Y no, lo que crea es la UI.
Landing page for the best web developers conference. ¿Vale? Para una conferencia.
A ver, le vais a ver que cuanto más lo utilizas, más costuras le ves.
Vas viendo que, a ver, no es perfecto.
Pero no está mal. O sea, al final lo que estamos viendo es, pues, una forma de empezar.
Cuando vas creando muchas landings, se van pareciendo mucho a las landings.
Son bastante similares.
Sí que hay cosas muy famosas como Spotify, que sí que lo puede hacer bastante bien.
Pero aquí, por ejemplo, ya cuando... Este, por ejemplo, no está mal.
WebDeveloper Conference. Y no está mal. Mira, Conference Schedule.
Stay tuned. Speakers. Estos son nuestros speakers.
Pero le falta el tema de imágenes que, obviamente, yo imagino que lo pondrán eventualmente.
Mira, regístrate. Esta sería otra versión.
Aquí no ha alineado correctamente esto.
A ver, a mí me parece bien porque, queráis o no, esto significa que no nos van a quitar el trabajo tampoco, ¿no?
Pero para empezar cosas desde cero, ¿no? Rápidamente, pues, sí que estaría... Está bastante chulo.
Porque en lugar de tener que hacerlo tú, pues, hombre, lo tienes ya hecho.
Pero fijaos algunos ejemplos aquí, ¿no? Lo del pricing. Esta del pricing está bastante bien.
El hecho... Joder, me parece espectacular esta del pricing.
No sabe Spanish. Sí que sabe Spanish, ¿eh?
Crea la interfaz para un periódico llamado El Informante.
El Informante.
Haz que tenga titulares y artículos llamativos.
El fondo de color rojo tirando a blanco.
O sea, le podéis poner aquí todo lo que queráis, ¿eh?
Le podéis empezar a escribir ahí la vida entera.
Póngase a programar que no hay nada fácil.
¡Hostia! Que ha hecho un degradado. La madre que lo parió.
La madre que lo parió.
El Informante.
Titular del artículo.
Este es el lugar donde se mostrará.
Bueno, a ver, no está mal.
Aquí tenemos, por ejemplo, este...
Y este.
Está bien.
Y la verdad es que hay ejemplos muy chulos.
Aplicación de notas.
Y creo que para cosas muy concretas puede estar bastante bien.
Pero fijaos que esto también está muy bien.
¿Veis? Este que es un clon de Instagram.
Le ha quedado brutal.
Pero hay que afinar bastante.
Es como que hay que afinar bastante.
Yo creo que te puede ayudar y nos ayudará como a cosas muy concretas.
Como a cosas muy pequeñas y que no te dan ganas de hacer.
Pero no es que le vas a decir, hazme Uber y te lo va a hacer y ya está, ¿no?
Pero bueno, para ser una alfa privada, la verdad, tiene muy buena pinta.
Y yo creo que esto el día de mañana nos va a volar bastante la cabeza.
A mí, todo lo que sea que me acelere, yo encantado de la vida.
Pero que mucha gente tenía el miedo de que esto nos va a quitar el trabajo.
La verdad es que si esto nos quita el trabajo, pues igual lo que habría que ver es
qué es lo que estás haciendo en tu trabajo.
Porque madre mía, madre mía.