Tutorial Bolt.new de StackBlitz para Principiantes. La Nueva Forma de Hacer Apps

bien una nueva empresa ha salido para crear código con Inteligencia artificial se llama b. neww y con un simple pron podemos hacer esta barbaridad solo le he escrito un pron y me da un sistema una plataforma full St de compraventa de coches en la cual me muestra diferentes tipos de coches me dice los más vendidos me aparece en la pantalla de carrito de compras puedes proceder al pago con el checkout y puedes incluso Iniciar sesión y todo desde una única prom vale el pron que le he puesto lo dejo en los comentarios es básicamente este de aquí quiero construir una aplicación web full stat para negocio de venta de coches en línea que permita a los usuarios navegar por los coches según su categoría agregarlos a un carrito y realizar la compra la aplicación debe tener una interfaz de usuario amigable con categorías como Sedan vale todas estas Sedan sh y más idos junto con la autenticación de usuario y un panel de control simple Así que este es el pron Bienvenidos a este curso de B bien en el tutorial de hoy vamos a ver esta magnífica herramienta llamada b. New que lo podéis encontrar os dejo el enlace más abajo pero bueno simplemente B Lt New y es un agente de desarrollo web impulsado por Inteligencia artificial que nos va a permitir crear ejecutar editar y desplegar es decir las cuatro partes de un proyecto full stat directamente desde el navegador es decir podemos crear ejecutar editar y desplegar también nuestro proyecto sin necesidad de configuración local Así que si estás viendo este tutorial vas a poder crear tu propia agente de desarrollo web potenciado por Inteligencia artificial usando la base de código abierto de b y bueno qué hace B diferente o qué vamos a ver vale ya sabéis en este curso he sacado vídeos de Cloud de v0 que son herramientas increíbles incluso cursor eh pero no puedes instalar paquetes o ejecutar backen o editar código bueno en cursor sí y ahí es donde B en este caso pues esa segunda parte entra en juego y bueno full stap en el navegador si eres desarrollador full St es decir que tocas el Front que tocas el backen etcétera base de datos Pues con b Integra modelos de Inteligencia artificial con un entorno de desarrollador en el navegador impulsado por web container de Star bck vale que es la empresa que está detrás de todo esto aquí la tenemos Star bck a ver si nos lleva al enlace principal de la empresa vale Ya son una empresa que lleva tiempo en el en el mercado Y ves que en este caso pues trabajan con tecnologías como ria manila Bo angular next ys etcétera y bueno Esto nos vair como he dicho instalar y ejecutar herramientas y bibliotecas de npn como by ns y más ejecutar servidores en Note yet interactuar con apis de terceros degar en producción desde el chat y compartir tu trabajo a través de una URL y bueno la Inteligencia artificial con control de entorno A diferencia de los entornos de desarrollo tradicionales donde la ia solo puede ayudar en la generación de código aquí es donde b.

New entra en juego y le da los modelos de Inteligencia artificial control completo sobre el entorno incluyendo sistemas dech el servidor de note el gestor de paquetes la terminal de consola esto Pues bueno Nos da muchísimo más y sobre todo a la Inteligencia artificial para manejar los ciclos de vida de una aplicación desde la creación hasta el despliegue y ya seas un desarrollador un project manager un diseñador pues B neww nos va a permitir hacer cosas maravillosas como vamos a ver en este tuto y bueno para desarrolladores interesados en crear sus propias herramientas con Inteligencia artificial Pues esta herramienta la verdad es que está bastante bastante bien bien dicho esto vamos a ir al tema lo primero es aquí tenéis la la página de de precios vale de Star bck en este caso pues podemos utilizar b. New desde cero vale si lo vamos a utilizar para uso personal y te da aquí pues estar bck acceso a su ID vale que es esto que tenemos aquí etcétera nos da pues proyectos públicos ilimitados eh tienes acceso a github Un un mega de de carga por project etcétera vale Así que este curso lo que vamos a ver hoy es el totalmente gratuito y bueno si os gusta pues ofrecen versiones pro con unas cuantas cosas más y versiones de equipo siend tu empresa estáis interesados en utilizar esta herramienta Así que nada Qué es lo que tenéis que hacer eh lo primero es cliquear en el botón de sinat y aquí pues os aparece el login con Google Así que os logis o con vuestro email vale es totalmente gratuito bien te permite registrarte con tu cuenta de email o con giha yo lo he hecho con la cuenta de email os aparece este mensaje una vez que os habéis registrado que básicamente es que confirmes tu email le das a confirmar en el otro lado Y bueno ya una vez que lo tengáis pues ya podéis acceder a en este caso a. new bien pues ha tocado la hora de poner nuestro prom le voy a poner Este vale quiero construir una aplicación full stat para un negocio de venta de coches en línea que permita a los usuarios pues navegar por los coches según categoría los puede agregar a un carrito y realizar la compra la aplicación debe tener una interfaz de usuario amigable con categorías como sedans sub y coches más vendidos junto con autenticación de usuario y un panel de control simple vale es un prom complejo aquí hay cosas que hacer y vamos a ver el potencial de esta herramienta vemos que forma en formato chat se lo estoy poniendo en español pues para que veamos ciertos tipos de pruebas entendido vamos a crear tu aplicación con re y Ty Script primero obtendr el template ahora tenemos el contenido del template y podemos empezar a crear Pues los initial files está ejecutando el comando np instal que hace todo esto empieza a crear el vale lo tenemos aquí dentro de los componentes de riat es una bestialidad lo que hace luego veremos qué tan bueno es ahora está creando el carlist que como veis te coge imágenes te dice que este es el modelo a luego lo puedes editar y decir esto va a ser tus Mercedes este va a ser el bmv etcétera la clase de coches que quisieras vender el carrito vale al final necesitas un una lista de coches eh un carrito un Home ese proceso de checkout es decir está creando tus templates en react de esta aplicación y bueno veis aquí que en la terminal todo lo que se está ejecutando pues nos lo va mostrando tarda Vale y relativamente está bien que tarde porque recuerda que está generando todo este código me parece impresionante esta primera parte vale por eso la gente está empezando a hablar de b.

New porque pues bueno toda esta estructura básica de proyecto lleva mucho tiempo vale todo esto no lo haces en 5 segundos un desarrollador etcétera Luego veremos qué temas hay que tocar por eso ya sabéis los que seguís este estos vídeos os digo que la forma de programar ya en 2024 si no programas con Inteligencia artificial pues estás básicamente perdiendo perdiendo tiempo y a ver que puedes dedicar Pues a otras cosas así que bueno aquí nos Comenta un poquito eh todo lo que lo que he creado una aplicación full stat básica para un negocio de venta de coches en línea utilizando rat con Ty Script vemos que se nos Abre por defecto el preview luego veremos qué está ocurriendo y la página de inicio de categorías de coches etcétera lista vale muy bien la estructura de la aplicación en la siguiente te explica es la típica estructura de aplicaciones re nada que comentar nos dice notas importantes y Bueno hay al característica específica Así que vamos a seguir viendo bien pues ya nos acaba de cargar en el local Host de la máquina la aplicación y es esto vale os voy a dejar aquí arriba Vamos a ver el el prom que le he puesto para que nos quede claro lo que estábamos pidiendo Bueno lo dejo aquí en medio quiero construir una aplicación eh web full staff para un negocio de venta de coches no le he dicho colores pero si le hubiera dicho Utiliza este este color lo hubiera utilizado ha puesto este azul y negro por defecto eh que permita a los usuarios navegar por coche según categoría agregarlo a un carrito y realizar la compra vale es decir categoría le puse Sedán y subs también le puse más vendidos lo ha entendido también le puse carrito Aquí está el carrito y junto con autenticación de usuario que es esto de aquí así que por lo menos vemos Que cajón está funcionando a la perfección vale os dejo este pron si queréis os lo dejo en los comentarios vale para que lo en los comentarios no en la caja de texto de la descripción del vídeo de de YouTube para que lo copiis y pegá o utilizar el vuestro vale Y también vemos que por defecto vale Ya sabéis que todas las páginas web tienen el año en que se ha hecho etcétera Bueno le ha puesto el nombre autoventa podríamos haber sido en el prom más ambiciosos y por poner el nombre de nuestro negocio Pero autoventa me parece bien y por lo que vi cuando creaba las líneas de código me da que si clique en Sedan vale ha cogido imágenes por defecto es decir está cargando eh las imágenes esto estaba en el en el código el modelo B bueno vemos que aquí en el modelo c ha cogido una imen aleatoria que le aparecen unos barquitos pero lo tenemos vale por esto bueno como siempre ya sabéis que tengo mis cursos en School si queréis programar con Inteligencia artificial vale están ideados he sacado un curso de cursor entiendo que en breve estoy metido a saco con Ball Así que también lo sacaré Pero bueno al día de hoy los que veis está este curso de de cursor también fundamentos de programación para aquellos que no sabéis si queréis aprender Machine learning ciencia de datos pero por ejemplo este de cursor que me parece una excelente herramienta pues vas a aprender a utilizar cursos t cursos chat como la eh utilizar la Inteligencia artificial para programar muchísimo más rápido vale Échale un ojo pero seguimos con b porque es increíble con este único pron lo que nos está escribiendo bueno el enlace de por supuesto de schol lo dejo más abajo echarle un ojo si nos vamos a sub e valeo vemos que aquí tanto en sidan como sub nos está plantando lo mismo me parece bien vale porque luego ya tú en código lo reutilizas en bestseller vemos que nos aparece lo mismo Pues vamos a ver el carrito bien eh carrito de compras e vale voy a eliminar producto vemos que la funcionalidad de eliminar todavía no está Quiero probar una cosa Vale eh Voy a agregar al carrito Esto vale la funcionalidad como vemos no está porque estoy añadiendo el c estoy pulsando vale probarlo esto es no está bueno vamos a hacer proceder al pago vale nos ha creado el el complemento de pago y si le doy a Iniciar sesión pues vemos que nos ha puesto Iniciar sesión básicamente tenemos eh la página esto si nos vamos a código vale lo vemos más fácil esto es el footer y el header como veis en el footer nos pone este autoventa que es lo que veis Aquí le voy a cambiar el año para que veamos si se actualiza en tiempo real o si tenemos que hacer algo vale 202 25 si me voy a preview vemos que no se respeta vale habría que hacerlo volver a refrescar vamos a ver si refrescando pues tampoco vale lo tiene que ejecutar Y compilar de nuevo porque no está transmitiendo el código de Elo le voy a dar a salvar a ver si ahora en preview vale vemos Que en salvar si lo salvamos Entonces ahora todos los derechos reservados por Elm Master y le damos a salvar nos vamos a preview y vemos que se transmite automáticamente los cambios lo cual está muy muy bien vale esto era el footer si vamos al header vale que nos encontramos Pues con el tipo heeder de en este caso pues de Sedan í vas a mostrar la palabra Sedan vas a mostrar la palabra sub vas a mostrar la palabra eh más vendidos y aquí esto es bastante curioso ya entiende que si estás autenticado o no vale debe ocurrir una cosa u otra vale si estás autenticado Es decir ya estás logueado Te debe aparecer el botón de cerrar sesión Y si estás logueado O sea si no están logueado pues Iniciar sesión para que te loges vale por eso aquí a veces aparecerá Iniciar sesión o cerrar sesión dependientemente de si estás logueado o no eh También el carrito como veíamos aquí en vez de poner texo pues le han casquet el icono que piensa que es el el correcto que estaba bien vale aquí tienes pues el out contest vale pues aquí simplemente aquí iría y esto me gusta eh bastante bien vale de comentar de B que te pone el comentario en español pero todo el código te lo pone en inglés vale me parece aceptable y te lo pone en español porque recordar que mi pron inicial era en español el código eh se hace en inglés todas las empresas eh trabajan con inglés porque no sabes qué idioma va a hacer el el desarrollador que lo utilice puede ser alguien de Francia puede ser alguien de China etcétera el código pero los comentarios si lo vas a tocar aquí iría tu lógica de de autenticación y bueno si vamos en páginas Pues aquí vemos el carlist que esta es la url vale del coche pues que nos está apareciendo en vale si nos está apareciendo en preview eh en los que veis aquí vale un código bastante bueno el carlist etcétera número Ah vale como veis está simulación de los ítems de carrito Así que si quieres Añadir o quitar por eso no funciona porque la lógica no está lo mismo con el checkout lo mismo con el dashboard Home y login Así que vemos que nos ha creado una aplicación en este caso en reat con todo el código necesario que necesitas por defecto de una manera muy muy sencilla vale Así que está claro que esta herramienta B va va a cambiar la forma en las que hacemos las cosas y está pero la Marc interesante bien Vamos a ver ejemplos que nos dice la gente de Star bck aquí en Twitter y os dejo mi enlace de Twitter por si me queréis seguir eh más abajo en el vídeo y bueno dice aquí tenéis Este vídeo que Qué pasaría si los productos de desarrollo de Inteligencia artificial como cl en este caso o v0 te permitieran instalar paquetes ejecutar backen y editar código y por eso estaban presentando B que solicita Evita y ejecuta vale vamos a ver aquí Este vídeo que está interesante en grande vale te permite ejecutar como veis hacerlo de manera oscura el tema te lo cambia entorno de desarrollo completo npm bitness Yes con la Inteligencia artificial de vanguardia aquí te permite pues cambiar el el tipo de texto y deployar vale tienes el botón de deploy lo ejecutas y lo subes y ya estarían tus usuarios pues listos para utilizarlo vamos viendo que también nos dice aquí pues nuevas ideas en este caso Puede crear diseños sorprendentes con código funcional a menudo con un solo prom como el que el ejemplo que hemos visto con anterioridad por ejemplo es tu do app que puedes ir añadiendo notas y crearlo construye en este caso pues otoc componente rat y el resultado pues es una aplicación de lista de tareas elegante completamente funcional que podemos ejecutar Vale Nos da una una URL es lo bueno que tiene como veis eran proyectos públicos y puedes he clique ad vale a esta a esta URL que ponen aquí y vemos que nos aparece pues este proyecto de to do up vale se tiene que hacer la preview tiene que cargar vamos a esperar a ver lo que hace Pero bueno accedemos Al mismo proyecto veis que está ejecutando todo lo que vimos con con anterioridad el np instal etcétera etcétera y bueno puede haber algún tipo de isus pero vamos a ver qué más ejemplos nos comentan la gente en este caso de B porque aquí pues bueno nos cuentan que puedes crear diseños sorprendentes con diseño de código funcional a m en un solo pron y en este caso pues también te permite crear aplicaciones multipágina como vemos Esta vale que tienes el login que tienes el sinat que tienes pues eh Le dices que te la haga el deploy en cualquier lado y desplegarlas en producción con un solo clip Y esto es posible porque cada chat puede ejecutar una bild de producción y desplegarla en net Próximamente en clf vale son empresas muy grandes de despliegue sin necesidad en este caso pues de Iniciar sesión Así que bastante interesante otro vídeo es como Este vale en el que explican vale Qué sucede en este caso cuando el código no funciona veis ahí que ha aparecido el botoncito de Fish error y han integrado una interfaz que es Capa en cada capa de web container lo que hace que B sea consistente de los errores y capaz de resolverlos por nosotros mismos es decir que B tiene esa ia con un solo clip y es increíble cuando trabajas con herramientas tediosas y configuraciones complicadas de webpack Así que muy muy interesante y bueno como vemos también aquí nos comenta que a veces es más rápido escribir código y deporar por nosotros mismos Esa es la potencia y la magia de. new que es un entorno de desarrollo completo y codifica lo que quieras y usas prom cuando quieras y cuando no pues simplemente metes el código a mano como vimos en el en el ejemplo aquí ya tenemos la la to do app vale que era del pron suyo Pues le voy a decir que tengo que subir vídeo a llm Master vale tarea le das a tú y aquí tienes la puedes borrar la puedes cliquear etcétera y la borras Así que bastante bien tarea uno tarea dos tarea tres tarea cuatro tarea cinco la típica to do y vas borrando o la vas tachando Así que muy muy interesante y aquí pues podrías añadirle añádeme añádeme la pantalla de login al inicio de la app vale se lo enviamos y todo esto vale eh Como siempre me gusta indicaros el precio de todo lo que cuesta estoy utilizando la versión gratuita es decir la que nos hemos visto registrarte y todo esto lo estoy haciendo el mismo día es decir que todo este código que está generando Nos lo están ofreciendo con el servicio gratuito Es cierto como todo que están lanzando esta aplicación y les interesa pues que la gente la use eh sin tener que hacer ese bloqueante pues comoo es introducir la tarjeta de crédito Cómo es tener que pagar por token cuando todavía no sabes si va a ser interesante o no para ti así que está bien me parece muy bien veis que se genera la pantalla de de login si nos vamos al código Pues igual aquí en asset tienes la imagen svg Tienes los componentes de login este que acabamos de ver tienes el to for el tut list bla bla bla vale todo el código así que por eso digo que ahora mismo programar con Inteligencia artificial es ahorrar tiempo y no hay otra Vale Nos vamos a la preview eh si me voy al log a ver username vale Y Class con no sé con da que lo machea vale si hay un usuario bueno posiblemente haya creado un usuario por defecto que Met eso Pero bueno vamos a probarlo a ver si meto el user a y el password a Bueno welc a Y si le das aog pu vale está bien habría que meter la lógica que te permita estar y no estar logueado y bueno vamos viendo que también te permite en este caso pues si tienes una idea de una startup como esta que vemos aquí de pensamientos de la web simplemente Dile a tu stat ideal vale que quieres utilizar y có debería funcionar Hola B construye una similar a v.