Transcripciones
1. Introducción al curso: En este curso, vamos a
hablar sobre cómo puedes construir aplicaciones de grado de
producción
todo con la ayuda de IA sin escribir una
sola línea de código. Bueno, ni siquiera
necesitas saber la codificación. Eso es lo que
vamos a aprender y vamos a
aprender de manera práctica. Soy facil, y estoy
encantado de ser tu guía en este curso manos en grande y no amigable donde
exploramos cómo la
inteligencia artificial puede ayudarte a dar
vida a tus ideas de aplicaciones sin escribir
una sola línea de código En este
curso en particular, nos sumergimos en una increíble pieza de
software llamada bolt dot N. Esta es una herramienta de
vanguardia que
le permite construir aplicaciones completamente
funcionales solo describir
lo que desea. Ahora bien, si eres
un principiante curioso, fundador
no técnico o simplemente
alguien que está buscando prototipos de tus ideas rápidamente para que puedas validar las cosas. Este curso te
ayudará a entender cómo puedes hacerlo más fácil, más rápido y cómo es más
accesible que nunca. Es como fluye el curso. Entonces primero entenderemos
qué es bolt dot Nu. Qué es esta herramienta de EI
y cómo funciona. Vamos a configurar nuestro espacio de trabajo de
cuenta, y luego comenzaremos a
escribir una solicitud. Por lo que haremos uso
de bolt dot neu el software para generar
una aplicación para nosotros. Entenderemos su interfaz y todos los detalles esenciales que
se
necesitan para construir
una aplicación de grado de producción
completamente funcional Y luego construiremos
nuestro segundo proyecto, que será aún
más complejo que el primero y
aquí es donde entenderemos el
verdadero poder de tales herramientas de IA. No solo construiré productos de manera práctica
y te los mostraré,
sino que también resaltaré cómo
puedes refinar tu producto, cómo puedes hacer mejoras, cómo puedes iterar en diseños y cómo puedes corregir errores
en tu aplicación Todo eso de una manera
completamente práctica, en que en realidad
estaremos arreglando bolsas, mejorando los diseños y agregando nuevas características
a nuestra aplicación. Cada vez que construyes
algo nuevo, es muy importante que
lo implemente en
algún lugar Internet para que el
mundo pueda acceder a él, ¿verdad? lo que esto también se cubre en el curso en donde
tomaremos ayuda de bolt dot new y agregaremos una base de datos
a nuestra aplicación, y también
la tendremos desplegada en
un servidor en vivo para que
el mundo pueda acceder a ella. Al final del
curso, no
solo tendrás múltiples aplicaciones funcionando, sino que también tendrás la
confianza para seguir construyendo, probando y lanzando tus
ideas a la velocidad del rayo. Y este curso es perfecto para principiantes que no tienen antecedentes
de codificación. Incluso si tienes
antecedentes de codificación, eres bienvenido. Aprenderás cómo la
codificación es mucho más rápida en estos días con
la ayuda de estas herramientas de IA. Pero los principiantes sin
experiencia en codificación también son bienvenidos emprendedores y creadores que quieran crear prototipos de sus ideas. Este curso es para ellos también. Además, este curso es para
cualquiera que tenga curiosidad sobre
cómo se puede usar la IA para construir aplicaciones de
grado de producción. Sin habilidades técnicas, no hay problema. Todo lo que necesitas es una idea y esta increíble
pieza de software, que es negrita punto nuevo, que te ayudará a hacer el resto. Así que comencemos y veamos cómo tus ideas cobran vida
con la ayuda de la IA.
2. ¿Qué es Bolt.new?: Entonces comencemos a
hablar de perno. ¿Qué es el perno? Así que Bolt EI es una innovadora plataforma de desarrollo
web impulsada por EI que permite a los usuarios crear, ejecutar y editar e incluso implementar aplicaciones web
full stack directamente en su navegador web o
a través del navegador web. En lugar de escribir
código línea por línea, solo describes lo
que quieres construir usando lenguaje
natural y esta herramienta, que es bolt AI generará
el código correspondiente. Bien. Así que aquí cabeza de palabra a tu buscador favorito.
Entonces he abierto Google. Puedes abrir cualquier
motor de búsqueda de tu elección, y puedes simplemente
buscar perno por aquí. Ahora, cuando busques perno, el primer sitio web que
verás por aquí probablemente va a
ser negrita punto nuevo. ¿Bien? Así que puedes hacer clic en
esto y puedes
venir a este
sitio web en particular por aquí. Entonces este es el sitio web oficial. O si por alguna razón, no
ves esto
como el primer resultado, dudes en desplazarte un poco hacia abajo. ¿Bien? Podría ser el segundo
o tercer resultado para ti. O alternativamente puedes escribir
directamente lo mismo. Hasta ahora tan bien, ¿de acuerdo? Ahora, aquí, se puede ver
esta línea de remate por aquí. ¿Qué quieres construir?
Crea aplicaciones y sitios web impresionantes
chateando con IA. Sí, entonces eso es lo que hace
esta herramienta. Hace uso de la
inteligencia artificial y el
algoritmo de aprendizaje
automático en varias
etapas de desarrollo, y construye un producto
completo para usted Y este producto,
incluso puedes conectarte a la base de datos. Puedes implementarlo en Internet y hacer que
sea accesible para cualquier persona. Entonces aquí, si estás en
este sitio web en particular, simplemente
puedes dar
este aviso por aquí. Puedes ver, puedes dar
click aquí. Crea una app financiera. Ahora, en el momento que
veas esto, bien, te
va a llevar a través de
esta página de chat de aquí. Entonces aún no nos hemos inscrito
ni hecho nada. Acabamos de hacer clic en, crear
una nueva aplicación financiera, y se puede ver que comenzó a importar el proyecto en negrita y dijo que va a
crear un momento, y se puede ver por aquí que está importando esta aplicación
financiera NPM install, se está ejecutando esta Bien, entonces
nos ha configurado
esta aplicación sin que digamos
demasiado sobre la aplicación. Y se puede ver que esta es una aplicación básica que ya está
construida con perno. ¿Bien? Entonces esta aplicación se debe construir con perno ya, y eso es lo que están
viendo por aquí. Ahora bien, si vuelves a
la página de inicio, hay bastantes opciones por aquí, puedes echarle un vistazo. Incluso puedes importar
cosas de Figma o Github si así lo deseas
y construirlo aquí ¿Bien? Y aquí en la parte superior, verás la opción de
empresa comunitaria por aquí, y luego tienes una
opción de precios. Ahora cuando hablamos de precios, por supuesto
vamos a estar haciendo uso de la versión gratuita, ¿de acuerdo? No creo que vayas
a necesitar la versión paga, pero si estás construyendo esto serio o trabajando
en ello en serio, trabajando con esta
herramienta en serio, entonces puedes actualizar a Pro en futuro y puedes comparar
los beneficios por aquí, ¿de acuerdo? Pero para aprender, experimentar,
construir proyectos, bien, siempre y cuando estemos dentro de los
minutos lo siento, no minutos Siempre y cuando estemos dentro de
los límites por aquí, bien, necesitas actualizar. Entonces una versión gratuita debería
estar bien por aquí. Ahora aquí puedes ver por
aquí en versión gratuita, obtienes proyectos públicos y
privados, bien, lo que significa que tus proyectos
pueden ser privados para ti y no ser compartidos con nadie o no
ser vistos con nadie. Obtienes 1 millón de
fichas al mes, ¿de acuerdo? Entonces aquí puedes ver
en versión pro, como el plan de $20 mensuales, obtienes 10 millones de
tokens al mes. Aquí obtienes
1 millón de tokens al mes. ¿Qué son los tokens? Vamos a llegar a eso en breve, y estás obteniendo esto
como el trato en límite. Bien, este es el
límite diario para los tokens. Entonces hablemos de tokens.
Ahora bien, ¿qué son los tokens? Se puede pensar en el token como una
moneda, básicamente, ¿de acuerdo? O déjame ir
aquí a los recursos. Iré a Docs
y Centro de Salud. Bien. Y aquí
del lado izquierdo, por lo que esta es la
documentación oficial de negrita. Aquí en el
lado izquierdo, si te desplazas hacia abajo, verás algo
llamado como fichas. Así que selecciona esto, y
podrás ver por aquí. Bien, los tokens son pequeños
trozos de texto, ¿de acuerdo? Ahora, me encantan los gatos, y
luego la exclamación. Bien, estas son todas
fichas por aquí. Entonces, si cuentas esto, uno, dos, tres y cuatro. Bien, esto se convierte en cuatro fichas. Entonces el
modelo de aprendizaje de idiomas como LLM, procesan texto como tokens, y esta básicamente es la unidad de
aquí o la moneda, usando la cual se le cobra ¿Bien? Entonces, si estás
dando mucha entrada, si estás haciendo
mucho desarrollo, si estás iterando mucho
sobre el código y tu uso es alto,
entonces por supuesto, estarás haciendo
uso de
un entonces por supuesto, estarás haciendo gran número de tokens Si estás haciendo un gran
número de tokens, si estás haciendo uso de un
gran número de tokens, vas a
necesitar la provocación. ¿Bien? Eso es a lo
que estoy llegando. ¿Bien? Entonces, siempre y cuando tu uso esté dentro de 1 millón de
tokens al mes, estás listo
para optar por el plan gratuito. Bien. Entonces esto es algo
que hay que entender. Se puede ver por aquí,
una sencilla función hará uso de 5,200 tokens El script medio hará
uso de esta gran parte de token. Una aplicación completa hará
uso de esta gran parte de token. Y aquí puedes
ver si estás usando un LLM a través de un
servicio pago como negrita, los costos a menudo se calculan en
función del número
de tokens procesados Bien. Menos fichas
significa menor costo. Entonces básicamente, es una unidad de es como tu moneda,
puedes pensarlo. Entonces aquí, esto es lo que es Token, y esta es la
documentación oficial de aquí. Así que
te animaría mucho a que puedas jugar con esta documentación si necesitas algún tipo de ayuda en el futuro. Pero sí, por ahora, es importante que
entiendas qué son los tokens. Todo bien. Entonces se
trata de perno por aquí. Este es el producto, ¿de acuerdo? Puedes dar click sobre estas
diversas opciones. Incluso puede ayudarte a
crear una aplicación móvil. Así podrás hacer click sobre estas
diversas opciones y explorar este producto apet. Espero que esto haya
sido útil hasta ahora.
3. Tu primera aplicación creada por IA usando Bolt.new: Entonces, ahora es el momento en que
vamos un poco manos a la obra, configuramos nuestro espacio e incluso construimos una
primera aplicación que nos dé la sensación de EI. ¿Bien? Así que voy a hacer
click en Comenzar. Si ya tienes una cuenta, puedes presionar iniciar sesión y
serás llevado a la página de inicio de
sesión, bien. Pero voy a seguir
todos estos pasos para nuevos usuarios para que si eres nuevo en esta configuración,
sigas adelante. Entonces voy a decir que comencen.
Ves esta página. Entonces tienes inicio de sesión con Google Github, correo electrónico y contraseña, para que puedas elegir la opción adecuada en
función de tu preferencia, bien, y crear una cuenta. Ahora recuerda, si inicias
sesión con correo electrónico y contraseña, tendrás que
verificar tu correo electrónico también
tendrás que
verificar tu correo electrónico
. Entonces ese es un paso. Así que voy a hacer clic rápidamente en iniciar sesión con
Google por aquí. Así que puedes ver por aquí, me
autenticé usando Google,
y me han comprado
en esta misma página web,
que no es más que la página de
inicio de aquí, ¿de acuerdo? Y se puede ver aquí
en la parte inferior, bien, tengo este panel lateral, Bien, que podremos
explorar más adelante. Entonces, para crear la aplicación
web, voy a dar mis
insumos por aquí, ¿de acuerdo? Y la aplicación que voy a construir,
puede ser cualquier aplicación, antes que
nada, pero la
aplicación que he elegido es un generador de
código inspirador aleatorio, ¿verdad Y voy a describir mi
solicitud aquí, ¿de acuerdo? Entonces le estoy diciendo al modelo de IA
o boulg dot nuevo por aquí. Te estoy diciendo que
crear una página web con un botón central que
diga generar un nuevo código. Al hacer clic, muestra un código inspirador
aleatorio debajo del botón. Eso es. Es una aplicación muy sencilla. Simplemente muestra códigos aleatorios. ¿Bien? Ahora, puedo decir rápidamente, ve por aquí, ¿de acuerdo? O si no estás seguro
y si quieres
mejorar un poco este prompt en particular , entonces
está este botón. Bien, puedes ver este
botón, mejorar prompt, y hay una opción
para subir los archivos como. Entonces, si quieres dar contexto
adicional, también
puedes subir archivos. Pero voy a decir
realzar el prompt, ¿de acuerdo? Y en el momento
en que hagas clic en mejorar el prompt, va a
potenciar este prompt, hacerlo más detallado. Para que puedas ver por aquí o
puedes leerlo. Bien. Se puede leer a través de él. Crear una página
web receptiva utilizando el siguiente diseño
un diseño limpio centrado con botón prominente. Contiene este texto, utiliza un esquema de
color atractivo y estilo
moderno tiene efectos sobre
y clic en la interacción es fácilmente clicable en escritorios
y dispositivos móviles a bordo Cuando se hace clic, para que
pueda ver por aquí, puedo obtener el código de una matriz
predefinida en un EPI, mostrar el código
debajo del botón, y puede ver por aquí, hay algunos punteros
más y requisitos de
estilo
que Así que solo se agregaron dos líneas, y aquí, se
mejora este prompt para agregar información más
detallada. Ahora eres libre de
ajustar esta información de
la manera que quieras, si no quieres
ningún tipo de cosas, por
ejemplo, si no
quieres estas animaciones, que puedas deshacerte de esta línea Si quieres agregar
algo más, puedes agregarlo aquí. Para que puedas mejorar el prompt, y cuanto mejor sea la entrada que estés dando o
el texto escrito o la descripción que
estés dando de la aplicación que deseas tener
al modelo de IA, mejor será la respuesta. Entonces esto es muy elaborado Bien, sí describe
todos y cada uno, y ese es el beneficio de hacer uso de esta opción
rápida mejorada de aquí. ¿Bien? Se puede ver que se ha mejorado el
aviso de conformación. Entonces voy a
decir, ve por aquí. Y puedes ver que te
llevarán a este tipo de página, que es, ya sabes, que básicamente va a
empezar a trabajar en ella. Y aquí en el
lado derecho, vas a ver la vista previa de tu
aplicación, ¿verdad? Para que veas que está pensando, yo pienso por 8 segundos. ¿Bien? Y si quieres ver el proceso de pensamiento,
puedes dar click sobre esto. Bien. Entonces aquí está el proceso de
pensamiento. Entonces creó esto y
ahora está generando todo este código. Para que veas que está
configurando todo el proyecto para ti. Se trata de actualizar
este archivo por ti. Es escribir código
para ti esencialmente. Entonces esperaremos un rato. Hasta que se complete todo el proceso de
generación de código. ¿Bien? Ahora bien, si también
quieres ver el código, aquí tienes una opción en la parte superior, que es el botón de código
y verás todo
el código se está generando
y actualizando aquí. Pero solo me saltaré eso. Solo seleccionaré la vista previa porque dejaré que la IA
haga el trabajo por mí. Bien, esperaremos un
rato hasta que se complete todo
este proceso. Tomará unos
segundos o minutos. Entonces eso fue rápido. Generó este tipo de aplicación. Se puede ver por aquí.
Inspiración diaria, descubre sabiduría que
desencadene la motivación y enciende tu potencial
con cada clic Interesante. Haz clic en el botón arriba para revelar tu
primer código inspirador Genial. Entonces aquí
puedes ver este botón. Tiene una buena animación
y un buen efecto hover. Se puede ver. ¿Diseñamos esto? ¿Desarrollamos esto?
Absolutamente, no. ¿Bien? Todo es generado por. Si haces clic en esto, va
a generar un nuevo código para ti. Puedes ver si estás
trabajando en algo que realmente
te importa,
no tienes que ser empujado. La visión te tira. Este es un código de Steve Jobs. Interesante. Bien. Entonces ni
siquiera tuve que dar la lista
de códigos y todo eso. Acaba de hacer el trabajo
por mí. Se puede ver. Esta es una aplicación muy
sencilla que es muy presentable Es como si fuera una aplicación
presentable. Puede implementarlo
en producción y puede tenerlo como
su aplicación simple que construyó apenas en 10 minutos usando IA o
5 minutos usando IA. Espero que esto te dé una idea
de lo poderosa que puede ser la IE. Entonces esta plataforma,
se puede ver por aquí, así
lo pensó
en base a su aporte, primer lugar, no
dimos esta elaborada aportación. Acabamos de dar dos líneas. Le pedimos a Air que
mejorara el aviso. Lo mejoró de esta manera, ¿de acuerdo? Y luego pensó por
8 segundos por aquí. Se puede pasar por el proceso de
pensamiento
así como a lo
que pensó aquí. Al hacer clic en esto, simplemente
colapsaré esto. Entonces básicamente reiteró
sobre lo que entendía. Entonces reiteró
sobre esto, ¿de acuerdo? Y creó un plan y
publicó por aquí. Y luego comenzó a
desarrollar la aplicación, y puedes ver la
respuesta por aquí. ¿Bien? Entonces sí, esta es tu primera aplicación
generada usando IA. Espero que esto haya sido increíble y espero que sean capaces de
seguir adelante.
4. Cómo entender la interfaz y las características: Ahora es el momento de que
pasemos por la interfaz y entendamos las diferentes opciones
que vemos por aquí. Entonces aquí, del
lado izquierdo, claro, es bastante evidente que ves
el chat y lo que sea que
estés agregando por aquí, cualquier iteración que hagas, cualquier perno que te esté diciendo, ves todo por aquí
y todo el progreso Ahora, inmediatamente en
el lado derecho. Así que este era el
lado izquierdo, ¿de acuerdo? Y este es el lado derecho. En el lado derecho,
vas a ver la ventana donde está habilitada una
vista previa. Y lo que sea que esté siendo
desarrollado por EI, eso es algo que
ustedes están viendo aquí en la ventana, la vida. Ahora bien, si quieres
ver el código fuente, tienes este botón de código en la parte superior en el que
puedes hacer click, y haciendo click en este,
serás llevado a esta
ventana de código fuente donde
podrás ver todo el
código fuente de la aplicación. Ahora bien, esto es
igual que el código fuente que verías en
tu máquina local. Ahora bien, si entiendes la tecnología, entenderías
todo el
código fuente que está escrito aquí. ¿Bien? Entonces, si hay alguna necesidad en donde quieres
acceder al código fuente, puedes verificar el código
fuente por aquí. Todo bien. Entonces esto
es sobre esto. Incluso puedes ir a pantalla completa así haciendo clic en
esta opción de aquí. También puedes buscar archivos
. Todo bien. Entonces se trata de
la ventana de código. Aquí también tienes acceso a
la terminal. Para que puedas ver por aquí,
tienes acceso a tu terminal. Así que básicamente puedes, si quieres construir, implementar cualquier cosa
manualmente, también puedes hacer todas esas cosas desde
la terminal. Pero cambiaremos a la ventana
de vista previa. Y aquí tienes algunas opciones
en el lado derecho, para que puedas ver esta
vista previa abierta en una pestaña separada. Así que puedes dar click aquí y te
va a preguntar para que veas tu vista previa, necesitas conectar esta
pestaña al proyecto, ¿de acuerdo? Entonces puedes decir conéctate
al proyecto, y te va a
mostrar la vista previa de todo el proyecto por aquí. Bien, así que sea lo que sea que estés viendo allá, lo vas
a ver por aquí. Se puede ver algo como esto. Sigues refrescando
el abrigo, así. Todo bien. Entonces esta
es la pestaña de vista previa, y luego tienes
este modo de respuesta. Entonces esto es básicamente una
palanca que te ayuda a cambiar entre la
vista móvil y la vista de escritorio. Entonces aquí puedes ver que
esto está en el iPhone 16. Entonces así es como se
verá en el iPhone 16. Bien, iPhone 16, Pixel nueve, Galaxy 24. Bien, puedes acercar
un hoyo si lo deseas. Entonces iPhone 16, voy a acercar 200%. Bien. Y así es
como lo verás en tu teléfono,
como el iPhone. Así que voy a cambiar de nuevo
al escritorio por aquí. Aquí, usted tiene al inspector. Así que puedes
pinchar por aquí y básicamente
puedes ver por aquí. He seleccionado esto
y puedes ver que esto ha sido seleccionado
aquí en el chat. ¿Bien? Y puedes platicar sobre
este elemento por aquí. Eso es algo que puedes hacer. Así que voy a aclarar esto. Bien. También puedes ir a
pantalla completa con esto. Entonces estas son algunas opciones
que debes conocer. En la parte superior, tienes
opciones para exportar. Se puede descargar el código fuente y abrir en placas apiladas. ¿Bien? Pero si quieres hacer algún desarrollo local,
puedes descargarte. Hay una pestaña de integración, por lo que Bolt admite estas
integraciones en este momento Rayas, súper base, levántate. Es posible que veas más
integraciones en el final de la línea. Siguen agregando integración,
por lo que es posible que veas más. Pero a partir de ahora, como
estoy grabando esto, estoy viendo como
tres integraciones ¿Todo bien? Ahora aquí del lado izquierdo,
verás esta opción. Entonces, si aguantas esto,
esto se abrirá, ¿verdad? Entonces tienes tus chats. Entonces este es el chat que estamos haciendo hoy
o la aplicación de chat, lo siento, no la aplicación de chat, sino la
aplicación de generador de código que hemos construido. Hay una opción
para obtener tokens gratis, que puedas referir a los usuarios
y ganar tokens. Esta es una
manera increíble de agregar tokens a tu cuenta sin
actualizar a Pro, ¿verdad? Para que puedas comprobarlo.
También tienes ajustes. Entonces, si quieres modificar
algún tipo de configuración, aparece en ajustes,
ahora mismo, estoy en modo oscuro. También puedes cambiar al modo de
luz . Bien, puedes hacer eso. Ajustes relacionados con el editor,
relacionados con el equipo, tienes tokens. Entonces, qué todos los tokens has usado. Toda esa información
vendrá por aquí, información de
tu plan y
todo, básicamente, ¿verdad? Ahora, viniendo a las apps por aquí, tienes así que vimos esa pestaña de
integración, ¿verdad? Y aquí también, verás una lista similar de aplicaciones que
puedes conectar por aquí. Para que puedas conectarte
Netlife Net Life básicamente
está permitiendo Net life es un servidor o una plataforma basada en la nube que puede ayudarte a alojar tu aplicación a
través de Internet Super Base es un servicio que te ayuda a alojar
una base de datos SQL. Y luego tienes Figma desde donde podrás introducir los diseños y el perno
analizará esos diseños y
lo convertirá en cool Y entonces también tienes
GitHub. Si quieres tomar la copia
de seguridad de este código fuente o
almacenarlo en GitHub, puedes hacerlo
conectando GitHub. En primer lugar, ¿qué
es la vista previa de funciones? La vista previa de funciones es una
opción en la que puede ver todas las próximas funciones para atornillar. Bien, puedes acceder. No, la primera característica
de aquí es DIFS. Entonces lo que puedes hacer es habilitar este
enfoque DIF por aquí. Usando este enfoque DIF, va a editar los archivos existentes en lugar reescribir todo el
archivo para cada cambio, lo
que significa que
estará haciendo uso de menos tokens si habilitas
este modo por aquí ¿Bien? Ahora bien, esto solo está
disponible para planes pagos, así que no tengo esta opción
porque estoy en plan gratuito. Razón dinámica así
que si quieres aumentar
la capacidad de razonamiento, puedes alternar esto. ¿Bien? Entonces tienes acceso
a la base de conocimientos. Entonces aquí, puedes definir cualquier
instrucción específica del proyecto o cualquier tipo de instrucciones
globales que
puedas definir aquí. Y si, tienes
respaldos y red. Entonces estas son algunas de estas
configuraciones que existen, y luego tienes
tu suscripción, como qué tipo de
suscripción estás teniendo. Entonces estoy en plan gratuito. Bien, si actualizas
a algo, verás tu
plan actual por aquí, y luego tienes la
opción de cerrar sesión. ¿Bien? Entonces esta es
toda la interfaz. En la parte superior, tienes el
nombre del proyecto, y este proyecto es privado. Puedes renombrar el proyecto
si lo deseas puedes duplicarlo y puedes cambiar
su visibilidad por aquí. Entonces si quiero cambiar el nombre de
esto a otra cosa, hermoso
generador de código, o puedo decir aleatorio o puedo
decir inspirador Generador de código,
puedo hacer eso, ¿verdad? Entonces espero que esto tenga sentido, y espero que tenga
claro la interfaz.
5. Creación de un proyecto un poco complejo: ¡una aplicación de lista de tareas!: Entonces ahora es el momento en que comencemos trabajar en nuestra
segunda aplicación, que va a ser un
poco compleja, y esta aplicación
va a ser la aplicación de lista de
tareas pendientes. Entonces es un poco complejo de lo que
ya desarrollamos. ¿Bien? Esto va a tener
algunas partes móviles por aquí. Y estoy aquí en esta página principal. Puedes venir en esta página principal dirigiéndote a esta URL bool dot Nu o puedes ir por aquí
y decir, iniciar un nuevo chat Dices iniciar un nuevo chat, por defecto
serás redirigido a esta página
en particular por aquí Así que también puedes ver los
historiales de chat anteriores por aquí
, ¿verdad Entonces esta es la primera aplicación
que construimos. Bien. Entonces por aquí, lo que
vamos a hacer es que
voy a añadir un prompt que ya
he escrito. Entonces le estoy diciendo a
esta aplicación por aquí o Boltea aquí es crear una aplicación de lista
simple de hacer La aplicación debe tener un campo de entrada para una nueva tarea y
agregar el botón Tarea. La tarea agregada debe
mostrarse como lista a continuación. ¿Bien? Ahora bien, esta cosa
en particular es una descripción de qué pensamientos tengo sobre la
aplicación en mi mente. Y yo solo estoy dando
estos pensamientos a los que
fuesen por aquí o a cualquier tipo de
inteligencia artificial por aquí, ¿verdad? Ahora bien, si digo que vaya, bien, va a empezar a trabajar en esto, pero antes de hacer
eso, voy a mejorar
un poco este prompt, ¿verdad? Así que potenciemos esto para que
podamos obtener un mejor resultado. Entonces va a improvisar y elaborar sobre lo que
todo lo que necesitamos aquí Si quieres, puedes
pasar por todo esto. Para que puedas ver los elementos de la
interfaz de usuario. Está definiendo la interfaz
de usuario. Añadir claramente visible añadir al botón
Tarea junto
al campo de entrada. Mostrar lista de tareas
debajo del área de entrada. cuanto a la funcionalidad,
es pedir a los usuarios que ingresen la descripción de la tarea
en el campo de entrada cuando se hace clic en Agregar tarea Bien, cada tarea, cuando se hace clic en
agregar tarea, se agrega a la lista Y luego cada tarea
se muestra como un elemento de lista
separado. Por aquí, no permita que se agreguen tareas
vacías. Entonces este es un tipo de
validación que se ha agregado. Borre la entrada después de
agregar la tarea. Para que puedas ver cómo está
describiendo y cómo ha mejorado el prompt para nosotros. Diseño visual sabio, ha
agregado algunos punteros por aquí, y aquí se pueden ver algunas mejoras
opcionales que ha mencionado
aquí. Todo bien. Si quieres modificar la mejora
opcional, puedes hacerlo por aquí, pero yo no voy a hacer eso. Todo bien. O podemos
mantenerlo enfocado por aquí. Enfocado. Así que déjanos o lo
mantendremos así. Veamos cuál es
la salida que obtenemos. Yo diré, adelante.
Bien. Entonces aquí tengo un aviso en
cuanto dije, adelante. Entonces me está diciendo que oye, cuéntanos un poco sobre ti, y serás recompensado con 1
millón al finalizar Entonces parece que
hay algún tipo de que normalmente no veo esto,
pero esto es una especie de oferta
o algún tipo de trabajo de investigación que está pasando por el taburete. Así que sólo puedo dar alguna
información sobre mí. Soy educadora. Aquí y soy freelancer solo o trabajando
para una gran empresa. Sea lo que seas,
puedes elegirlo por aquí, y yo soy persona de nivel avanzado. Entonces solo diré lo siguiente, y estoy construyendo
productos para mí mismo. Sólo diré lo siguiente.
¿Bien? Y ¿qué buscas
lograr con audacia? Así que lanza app o sitio web,
completa. Todo bien. Y una vez que hagas esto, se
agregarán
1 millón de tokens gratis a tu cuenta. Entonces eso es increíble. Solo cuenta algo de información sobre ti y
obtienes algo gratis. Bien, volviendo por aquí, puedes ver que está
creando archivos iniciales, así podrás ver todos los
pasos que ha agregado. Y si te desplazas hacia
arriba, se ha
retrocedido sobre los requisitos
que has dado, y está creando
todos los archivos Puedes ver todos los archivos
que se están generando aquí. Si vas a app dot TSX, está escribiendo todo el
código que puedas ver Se trata de escribir app dot TSX. ¿Verdad? Ahora bien, si
vas a previsualizar aquí, ha iniciado la aplicación, y es decir que he creado una aplicación integral para
hacer flujo. Para que puedas ver la aplicación aquí
arriba por aquí. Y aquí se puede ver, es una aplicación de
aspecto decente. Para hacer flujo, mantente organizado y productivo con tu
hermoso administrador de tareas. Buen lema. Yo diría,
¿qué hay que hacer? Entonces tiene un
límite de 500 caracteres, como puedes ver, y este límite debería cambiar y cuando
escribes, eso es bueno. Tienes este botón más. Aún no hay tareas, por lo que es
necesario agregar todas las tareas. Entonces creo que una vez
que agregues la tarea, la tarea aparecería por aquí. Impresionante. Y aquí
ves algunos consejos como presionar Enter para agregar
o Escape para borrar. Impresionante. Vamos a probar esto. Voy a ver
traer abarrotes. Así, déjenme decir Enter. Todo bien. Y estoy
recibiendo este tipo de interfaz
de usuario por aquí donde me dice
que traiga comestibles junto con esta
marca de verificación Y también
me está dando la hora y fecha en cuanto a cuándo
agregué esta tarea, y está categorizando esto
como tarea activa, demente Entonces me está diciendo total
una tarea que he agregado, activo es uno y hecho es cero. Bien, puedo decir que necesito
decir hacer o ir al gimnasio. Ir al gimnasio,
algo así. Y déjame marcar una
tarea por aquí. Oh, para que veas que ha bifurcado
maravillosamente las tareas
activas y terminadas ¿Tenemos esto dado en
algún lugar de la lista de
requisitos de aquí, mejoras
opcionales,
o, Implementar categorías de tareas
o niveles de prioridad Entonces esto estaba ahí en la mejora
opcional. Así que puedes ver por aquí, también ha completado toda la
mejora opcional. Se ha agregado una casilla de verificación junto a la tarea para hacer que el
mercado sea lo más completo También ha incluido
el botón de borrar. ¿Ha incluido
el botón de borrar? Sí, tiene un botón de borrar. Impresionante. Ha agregado animaciones
básicas al agregar y eliminar tareas que se realizan, y ha implementado categorías de
tareas o niveles de
prioridad. Entonces estas no son más que
categorías de tareas, como puedes ver. Y también me está mostrando
los avances por aquí. Se ha agregado lo del progreso por aquí? Bien, no lo encuentro, pero se
ha agregado por sí mismo, creo, lo cual es increíble. ¿Bien? No creo que lo
del progreso se agregue en los requisitos. Entonces esto es una locura, bien, solo darle algunas cosas, básicamente
ha creado una app
completa para nosotros mismos Un consejo que me gustaría
mencionar por aquí, cuando se
generó este prompt y
viste realce opcional, no lo
eliminé. Estaba a punto de quitarlo,
pero no lo eliminé. Entonces, si no está
obteniendo una buena salida, si agrega un prompt mejorado y se agregaron algunas
mejoras opcionales, ¿de acuerdo? Y la respuesta o
la salida que
obtuviste no fue deseable y
no algo que quieras. Lo que puedes hacer
es reducir la carga aquí
deshaciéndote de la mejora opcional y mantener tu tarea realmente,
realmente enfocada. Si haces eso, puedes esperar
una mejor salida de la IA. Pero aquí en mi caso, incluso
con mejoras opcionales, pude ver que la
salida es realmente genial. No veo ningún problema
por aquí, ¿verdad? Entonces la salida es genial, pero esto es solo un consejo que
quiero destacar. Si sientes que la
salida no es tan buena, entonces puedes mantener tu prompt
realmente, realmente enfocado. Puede mantener su
entrada realmente, realmente enfocada en el núcleo de la funcionalidad que está construyendo y
puede ver el resultado. Tu salida
siempre será mejor. Entonces podemos intentar probar
esto claro, terminado. ¿Bien? Se limpiaron
los artículos terminados. Funciona bien. También puedo conseguir
esto claro. Bien, así que esto también se
aclaró. Puedo decir bueno o estudiar hoy. Presentador. Bien, tareas activas. No creo que quede
nada más para las pruebas. ¿Bien? Pruebas. Y ya
veré que me decidan. Bien, está funcionando bien es
lo que puedo ver por aquí. La aplicación está funcionando bien. Y si quieres agregarlo así en
la primera versión en sí, debo decir que hemos agregado cantidad
decente de características. Por ejemplo, agregar
tarea de eliminación es lo que hemos agregado. La funcionalidad para
tachar la tarea es
lo que hemos agregado. La categorización es
lo que se ha agregado. También hay un
tablero por aquí, el panel Progreso que también
se agrega todo en un solo prompt. Entonces eso es impresionante. También hay una propina que se ha agregado. Ahora, algo que puedo
agregar aquí es un pie de página. Entonces puedo decir, agregue un pie de página
profesional en la parte inferior que
hable de compañía. Entonces puedo agregar eso sobre compañía y puede mencionar información de
derechos de autor. Algo así. Entonces puedo dar este
tipo de aviso por aquí y puedes modificarlo en
base a tus requerimientos. No voy a mejorar
este prompt, correcto, porque es solo un pie de página, y solo voy a enviar esto
o dar esto como entrada. Entonces veamos que es revelador, está agregando el pie de página
profesional por aquí y está
creando este componente. Para que puedas ver si
haces click en esto, se está creando este componente.
Está escribiendo este código. Si haces clic en
esto, puedes ver, está
escribiendo completamente este código, y puedes verlo en vivo. Entonces una vez
escrito esto, se va
a actualizar la app dot TSX Puedes ver que todo el archivo
se está actualizando aquí. Entonces esperaremos hasta que
esto suceda. Entonces esto está hecho. Todo bien. Y aquí se pueden ver todas las cosas que
se hicieron por aquí. Por lo que agregó información de la compañía, enlaces
rápidos y enlaces de contacto por correo electrónico
y redes sociales. Así que déjame desplazarme
hacia abajo y ver, Bien, se agrega información de la
compañía aquí y
enlaces de redes sociales como este. Entonces déjame llevarme esta pantalla completa. Vaya, esta parte no. Entonces voy a mejor bien,
la vista previa se ha ido. Entonces solo abriré
esto en una nueva pestaña y me conectaré
al proyecto. Bien. Y aquí. Bien, así es como se ve o
aparece por aquí Entonces viene
verticalmente por aquí. Viene verticalmente por
aquí porque este espacio o el área o el tamaño de
esta ventana es muy menor. Entonces por eso lo abrí en una pestaña diferente para
tener una idea de ello. Se ve decente. iterar por aquí si
así lo deseas Y aquí, lo que puedes hacer es
intentar trabajar en esto, bien, ya ves, soy. Bien, para que veas que
esto se ve bien. Es una aplicación decente, yo diría, ¿no? Y si compruebas la capacidad
de respuesta de esto en el iPhone 16. Así que vamos a comprobar en los dispositivos
móviles. Voy a conseguir que esto sea al 100%. Entonces en los dispositivos móviles, bien, déjame alejarme un poco. Entonces, si está al 90%, puedes ver que así es como se ve,
¿ verdad? Es bastante decente. Bien. Entonces el resultado
que tenemos es bastante decente
para la Versión 1.2, y estoy contento con esto, ¿verdad? Sin escribir una
sola línea de código, puede ver el poder de las herramientas de
IA como las agrupadas. Espero que esto haya sido útil.
6. Desarrollo iterativo con Bolt.new: Ahora es el momento de que empecemos a hablar de desarrollo
iterativo Entonces aquí tenemos
esta versión 1.2 o sea la versión que llame a
esta aplicación en particular. Habrá situaciones en las que desee mejorar
ciertas cosas, agregar nuevas funciones o
eliminar ciertas características. Entonces eso es algo
que absolutamente puedes hacer por aquí con
la ayuda del chat. Ahora, aquí, se puede
ver este botón más. Digamos que no me
gusta este botón más y puedo decirle al modelo de
IA por aquí, así puedo mejorar o mejorar el botón más para decir agregar texto. Bien, algo como esto
y darle un mejor color. Entonces puedo decir
algo como esto. Puedo realzar el prompt
por aquí para que sea mucho más elaborado para
que obtenga una mejor respuesta. Para que puedan ver por aquí, ha elaborado esto y
déjeme mandar esto. Veamos qué
pasa. Todo bien. La salida definitivamente
será la mejor. Entonces puedes ver que está actualizando este archivo en particular por aquí. Esperaremos un rato. Para que veas que la actualización está hecha. Se ha descrito la actualización, y aquí se ha agregado
este texto de anuncio, ¿verdad? Y ahora si te digo, ve al gimnasio, puedes ver que sale el botón. Así que definitivamente es
definitivamente una mejora
sobre lo que tuvimos desde el principio. Por supuesto, no describimos
mucho en los cambios, pero si tienes algún tipo
de requisito específico o
esquema de color específico para ser usado, definitivamente
puedes mencionarlo aquí al momento de dar la entrada. ¿Todo bien? Ahora bien, cualquier tipo de
problemas que encuentres, habrá escenarios en los que también
te encuentres con temas. Entonces por ejemplo, si voy por
aquí en el modo responsive, y si voy al iPhone 16
y si me acerco un poco, puede ver que hay este texto
solapado por aquí, ¿verdad? Por lo tanto, hay una superposición de texto en el campo de entrada si
entra en modo responsivo. Entonces lo que voy a hacer es
comunicar mejor este tema, solo
voy a tomar una captura de pantalla de esto y
lo voy a pegar por aquí. Así que puedes simplemente
tomar una captura de pantalla, guardarla en tu dispositivo, y simplemente publicarla aquí
usando esta opción de carga, o puedes tomar directamente esta captura de pantalla y
pegarla aquí. Eso es algo
que también puedes hacer. Y puedes ver, uh, así que he descrito mi problema. Ya le he dicho que oye, echa un vistazo a la pista
en la caja de salida. Lo siento, pista en el cuadro de entrada. No es legible en modo
responsivo y
funciona bien en escritorio, pero no en los
dispositivos móviles como el Iphone 16. Entonces, cuanto más puedas elaborar, mejor salida
obtendrás, ¿verdad? Así que he elaborado bien me
siento, solo diré enviar y vamos ver si es capaz de
arreglar esto por nosotros. Esperaremos un tiempo hasta
que termine de procesarse para nosotros. Para que puedas ver por aquí, se
ha actualizado la aplicación, y aquí se le da
la descripción de qué actualización ha hecho. Y ahora puedes ver que este cuadro de
texto es de ancho completo. Bien, así que si lees qué
cambios ha hecho, ha agregado mejor espaciado, amigable con el
tacto y separación
clara. Entonces, si tecleas algo
aquí, esto es mejor. Ir a Equipo. Se puede ver en
los dispositivos móviles, se verá genial. Y si lo agregas, quedará
bien. No hay problemas como tales. Entonces en los dispositivos móviles,
también, está funcionando bien. Comprobemos también en el escritorio. Nada está roto, así que nada está roto.
Se ve bien. Entonces sí, los cambios
han sido buenos, y así es como
puedes iterar sobre él. Ahora puedes incluso ahora lo que vimos por aquí,
arreglamos problemas. Hicimos algunas mejoras. Ahora, si quieres agregar algún
tipo de características por aquí, puedes agregar más funciones. Entonces, por ejemplo, si
quiero editar la lista de dos do, definitivamente
puedo
hacerlo también. Entonces aquí puedo decir, por favor agregue funcionalidad para mí para editar
22 que se han agregado. Bien. Y puedo mejorar esto y vamos a ver cómo se ve
la mejora. Para que puedas ver, acceder a él a ID o al
identificador único como entrada. Permita que los usuarios modifiquen los dos hacen descripción
del título y DueDate Entonces no hay
fecha de vencimiento por aquí, ni descripción, y nivel de
prioridad
tampoco está ahí. Así que me voy a deshacer de
esto. Valide la información editada antes de guardarla
y guárdala aquí, mensaje de
confirmación,
maneja cualquier error, devuelve el elemento todo actualizado una
vez completada la edición. Veamos si esto va bien. Entonces he dado esto como
insumo, esperemos un rato. Por lo que se han hecho las actualizaciones. Puedes ver lo que sea que
se haya actualizado aquí. Se ha añadido el icono Editar. Hay una validación, botones de
cancelación de guardar y comentarios
visuales. Bien, así que vamos a probar esto. Entonces solo voy a agregar un Tulu, ir a tres Bien. Ahora vengamos por aquí
y hay un icono de edición. Impresionante. Simplemente voy a
hacer clic en Editar. Puedes ver que
ya estás en modo de edición, ve hoy al gimnasio y
puedes ver guardar por aquí. En el momento en que dices Guardar, puedes ver todo
leerlo con éxito. Es genial. Y esto
se puede mejorar. Puedo volver a editar esto. Se puede ver. Esto es decente. Ahora bien, si no quieres que el
mensaje aparezca por aquí o que el mensaje
aparezca en la parte inferior, puedes dar todo ese tipo de entradas por aquí y
puedes arreglarlo. Pero estoy bien con esto.
Esto se ve increíble. Y siento que es bueno Es una buena salida que
hemos conseguido
hasta ahora en base a los insumos
que hemos dado. Bien, entonces espero que tengas
claro todo el proceso. Espero que también entiendas lo poderosas que pueden ser
estas herramientas.
7. Integración de la base de datos en Bolt.new: Entonces. Ahora es el momento de que empecemos a hablar de datos
en nuestra aplicación. Entonces esta es la aplicación
que hemos construido hasta ahora. Está abierto por aquí
en la nueva pestaña. También está abierto por
aquí como adelanto. Pero aquí en
nuestra aplicación, estamos generando datos. Datos, lo que significa que hay
algunos
datos generados por el usuario como tareas, las tareas
completadas. Los datos también se están actualizando, porque una vez que
se están generando los datos, hay una disposición en nuestra aplicación para permitir a
los usuarios actualizar los datos, puede marcar los datos como completos o marcar
la tarea como completa. Por lo que los datos también se están actualizando, creando, borrando. Todo
eso está pasando. A partir de ahora, estos datos se están
almacenando localmente en
nuestro navegador, ¿verdad? Y puedes comprobar
esto, ¿de acuerdo? Si te desplazas hacia arriba aquí
justo en el primer aviso. Este es el primer
prompt que le había dado para crear la aplicación
Todo list. Y una vez que dimos el prompt, puedes ver por aquí después entender todas las características, IA o la propia IA de perno mencionó que estará haciendo uso de la persistencia de almacenamiento
local, que significa que todos los
datos, la lista
Todo, todo lo que estás
generando por aquí está siendo almacenado en el propio
navegador. Entonces, si haces una actualización,
déjanos hacer una actualización. Voy a tener que
conectarme al proyecto. Estamos conectados con el proyecto, y puedes ver que los datos
no persisten por aquí Ahora bien, si agrego alguna tarea, entonces permítame primero mostrarle dónde se almacenan
los datos. Entonces te voy a mostrar una manera rápida como puedes ver
los datos en la ventana de Chrome. Entonces tienes que hacer click derecho
tienes que ir a inspeccionar. Entonces esto puede parecer un
poco abrumador para la audiencia
no tecnológica, pero simplemente aguanta ahí.
No hace falta que pruebes esto. Sólo estoy tratando de
explicar un concepto. Aquí tienes que dar click sobre las flechas y aquí ir a la aplicación. Ahora aquí en
aplicación, tienes toda la información de almacenamiento que está sucediendo
en el navegador. Haga clic en el almacenamiento local
y seleccione su URL. Entonces esta es la
URL de tu aplicación, selecciona esta. Ahora aquí, verá
toda la información sobre toda la información que se está almacenando para esta
aplicación en el navegador. Ahora bien, esto no es
visible con claridad, así que voy a dar click sobre esto y voy a
llevar esto al fondo. Entonces esto es mucho mejor ahora. Para que puedas ver por
aquí. Bien, y voy a cerrar esto.
También voy a cerrar esto. También me desharé de
la consola desde aquí. Bien, entonces esto es lo suficientemente justo. Ahora puedes ver los
todos por aquí. Entonces, si expandes un poco esto, puedes ver todos los
que están vacíos. ¿Correcto? Para que
veas así es como se está gestionando
Todos
en nuestra aplicación. Se está almacenando en el navegador. Ahora si trato de agregar algún todo, digo, vaya a Jim, si digo Enter, ya pueden ver, hay una identificación única por aquí. El texto es ir a Jim. ¿Está marcado como completado? No, entonces eso está marcado como
falso por aquí. Se puede ver. Entonces es bastante claro que así es como se están
gestionando los datos en nuestra aplicación. Así que acabo de alejarme
para que puedas ver esto bien y déjame expandir esto
para que puedas ver por aquí Finalizado, creado
en, ID y texto. Todo esto está ahí por aquí. Ahora, en el momento en que lo
marque como completo, así que si lo marco como completo, verán esta actualizada que
completada se establece en true. Ahora bien, esta no es la forma ociosa en la que
las aplicaciones de grado de producción administran los datos. No se pueden administrar los datos
en el navegador, ¿verdad? Y si mañana,
digamos que cierras esta sesión e
intentas acceder a esta aplicación
desde tu teléfono móvil. Los datos se encuentran
en el navegador, por lo que estos datos no se mostrarán en el navegador móvil. Ahora bien,
¿cómo arreglas esto? Entonces, para solucionar esto, las aplicaciones de grado de
producción hacen uso de una base de datos que está alojada en
algún lugar de la nube. Ahora para esto por aquí, si vienes, aquí tenemos
esta pestaña de integración, y hay una integración que perno nos permite
hacer con Super Base. Así que Super Base, podemos hacer uso de la base de datos Super Base
dentro de nuestra aplicación, y podemos
configurarla aquí. Ahora la pregunta es,
¿qué es Superbase? Entonces lo que recomendaría
es que te dirijas a tu buscador favorito
y busques Super Base, o puedes
ir directamente a superbs.com Entonces, si abres esta
pestaña por aquí, puedes ver que este es el sitio web
oficial de Super Base, y Super Base es
la plataforma de desarrollo
POSCRs. ¿Qué son los POSCR POSGRS es un proveedor de bases de datos. Bien, hay
múltiples proveedores de bases que están disponibles
en el mercado, como Pascris SQL, entonces tienes MySQL,
tienes SQLLit Entonces Posgris es uno de los proveedores de bases
de datos. Por lo que Superbs hace uso de Poscris y está
alojado en la Nube, y puedes iniciar tu proyecto
con base de datos Poscris,
autenticación, APIs instantáneas, función H, todo Ahora, la mejor parte por
aquí para que puedas desplazarte hacia abajo y explorar todas
las características, ¿verdad? Espero que tengas claro qué es Super Bse. Nos va a permitir almacenar nuestra base de datos. En la nube, que
está alojado, ¿de acuerdo? Y esta base de datos
será una base de datos remota. Persistirá los datos estelares. Así que mañana si agregas una tarea
por aquí en este navegador, y si intentas acceder a la misma aplicación
desde tu teléfono móvil, los datos que
hayas agregado se mostrarán
los datos que
hayas agregado siempre que
estén vinculados a tu cuenta. ¿Bien? Entonces espero que
esto tenga sentido. Y a partir de ahora, lo que está pasando es que lo
estamos almacenando localmente, como te lo he demostrado
. Si no puedes
conseguir esto en tu máquina o si estás usando algún otro
navegador, no te estreses. Esta era solo mi
forma de mostrarte cómo se
almacenan los datos localmente. Entonces quería
probarte y mostrarte cómo se almacenan los datos
en el propio navegador. Entonces esto es lo que se está utilizando
aquí. Entonces esto está hecho. Voy a cerrar esta ficha. Podría parecer abrumador
si no eres un codificador. Entonces viniendo por aquí,
vamos a integrar Super Bs
en nuestra aplicación y
todos los datos que se están en nuestra aplicación y almacenando, todos los todos, todos se están almacenando todos
serán almacenados en una base de datos en la nube que se
creará para nosotros y no
se almacenará en el navegador. Ahora para hacer esto, tendremos que hablar
para atornillar y aquí, voy a decir que persisten todos los datos de nuestra
aplicación en una base de datos, y voy a
mejorar este prompt. Por lo que va a elaborar este requisito
y mejorarlo. Para que puedas ver por
aquí, identifica y mapea todos los datos, implementa
tablas de bases de datos adecuadas con relaciones, usa las mejores prácticas,
incluye todo esto. La solución debe ser escalable y todo esto.
Se ha elaborado. Su elaboración podría
diferir de la mía, pero sólo voy a mandar esto. No voy a modificar esto y veamos cómo funciona esto. Ahora lo que pasa por
aquí es que
aún no hemos integrado una súper Base en nuestra cuenta. Tampoco tenemos una cuenta que hayamos creado
con Super Base. Entonces, veamos cómo funciona
este proceso si eres un usuario nuevo
con Super Base. No tengo una
cuenta en este momento, y te llevaré
a través. Entonces veamos. Entonces aquí, lo que está
haciendo es crear un script de migración bajo
la carpeta de migración, superbs Migraciones, y ha llamado a este
archivo, algo así Esperaré un rato hasta que se completen todos estos pasos. Entonces después de un tiempo,
creó bastantes archivos. Tomó algún tiempo, y creó estos muchos archivos
que ejecutan ciertos comandos, e inició la aplicación. Pero en el
lado derecho, estoy viendo algún error, lo cual está bien. Ahora aquí, si te desplazas hacia abajo, está diciendo que me está incitando a una conexión Superbase Entonces me está incitando y lo que haré es necesitar una nueva conexión Superbase
. Sí, necesito. Entonces lo que voy a hacer es,
voy a venir aquí, voy a decir a los datos Bese Así que voy a hacer clic en esta
opción por aquí y me llevarán de inmediato a este sitio web llamado subbasemos, el sitio web que acabamos de ver Ahora aquí, si tienes una
cuenta, puedes iniciar sesión. Si no tienes una
cuenta, puedes registrarte. No se le cobrará nada. No necesitas ningún tipo o no necesitas
gastar ningún tipo de
dinero es a lo que me refiero. Si vamos a precios,
tienen un generoso nivel gratuito, que debería ser suficiente para que
lanzemos y validemos
nuestras ideas, ¿verdad? Entonces este es un plan gratuito. Eso
es lo que vamos a usar. Y lo que voy a hacer es
ingresar mis datos, todo por aquí, y
voy a hacer que se cree la cuenta. Después de ingresar el
correo electrónico y la contraseña, se
le pedirá la verificación del
correo electrónico. Entonces haz esa verificación,
y te veré ahí. Ahora, cuando hice clic en el enlace de confirmación dentro
del correo electrónico de confirmación, me pidieron que autorizara el acceso a
la API para perno Así que Bolt aquí está tratando de
conectarme a mi cuenta de Superbse, y está pidiendo
todos estos permisos Yo sólo voy a decir
crear una organización. Entonces voy a seguir adelante
con los permisos. Y para eso,
crearemos una organización. Ahora puedes ingresar el nombre de
la organización por aquí. Bien, entonces voy a decir
FaslSog por aquí. Puedes ingresar el
nombre que quieras, seleccionar el tipo, el plan. Estamos en plan gratuito. No
necesitamos gastar nada. Diré crear organización. Y esperaremos un rato. Entonces es volver a pedir esto, y voy a decir que autorice. Entonces se está conectando
al perno y
se puede ver que la conexión
se ha establecido con éxito. Ahora bien, si vienes por aquí,
me ha mostrado un pop up, y es revelador que
necesitas seleccionar tu proyecto Super Bs Data Bs
o Super Bees. Entonces
se supone que SuperBSPject está conectado o creado, básicamente,
si no lo tienes Así que solo lo crearé porque aún
no tengo ningún proyecto. Entonces voy a decir que el nombre de mi proyecto es hacer app, algo así. Se puede introducir la contraseña. Simplemente ingresaré o generaré
algún tipo de contraseña. Bien. Así que asegúrate de que tu contraseña sea
lo suficientemente fuerte por aquí, y aquí también puedes ver la opción de generar
contraseña. Así que acabo de hacer clic en esto. ¿Bien? Entonces, en el momento en
que hagas clic en esto, va a generar
una contraseña de base para ti y podrás
seleccionar la región. Yo solo lo mantendré por defecto y puedes ver
crear un proyecto. Ahora, el proyecto se
creará automáticamente, y no
teníamos no tomamos muchos
esfuerzos por aquí. Para que puedas ver por aquí,
la integración está hecha. Se puede ver que esto está
instalado Superjase. Y aquí puedes ver, está
conectado a la base de datos. Está conectado a Superbase, está conectado al proyecto, está configurado la autenticación Se ha creado la base de datos
y ha finalizado esta configuración. Todo esto está
hecho, y ahora me está
pidiendo que cree
el esquema de la base de datos, así que voy a decir aplicar
y esperemos. Entonces está aplicando
la aplicación de la
migración de base de datos, bien, la migración de base de datos
no se ha aplicado correctamente, y aquí también me ha
mostrado este pop up. Por lo que ha identificado algún problema y me está dando esta
opción para intentar solucionarlo. Así que voy, claro,
a decir intento de arreglar, y voy a dejar que se solucione. Y también llegaremos
a este error en el lado derecho,
pero solo aguanta ahí. Entonces está arreglando esto. Lo está haciendo por sí mismo. Esperaremos un tiempo hasta que se apliquen
estas correcciones. Entonces sí aplicó algunos
cambios por aquí, y mi aplicación se vuelve a cargar Aún no veo que la
aplicación funcione. Sigo viendo un error, pero me está pidiendo que complete
la migración, así que voy a decir aplicar, y me está mostrando algunos
problemas por aquí, así que voy a
intentar que se solucione. Por lo que ha identificado
el problema que estaba viendo en el lado derecho
y está tratando de solucionarlo. Para que puedas ver todos estos
errores que me está mostrando. Entonces este era el error que
estábamos viendo en el navegador. Entonces, una vez que se solucionó el
problema anterior, bien, se hizo clic en
la solución anterior
aquí como intento de corrección Vuelvo a ver otro problema, así que nuevamente estoy haciendo clic en
este intento de arreglar. Entonces veamos cuántas iteraciones hay para resolver
todos los problemas Lo que está pasando
por aquí es que está detectando los problemas en sí, y me está incitando a solucionarlo Entonces solo voy a hacer eso e iterar sobre él para obtener
el producto final Entonces después de un par de iteraciones y hacer clic en intentar
Fijar un par de veces, pude ver el problema en
el lado derecho arreglado, y ahora estoy viendo este otro problema, que
es este problema Entonces solo voy
a decir intento de arreglar. Por lo que ahora se
han solucionado todos los problemas. Tengo algunas pop ups por
aquí preguntándome que oye, este problema está identificado
y solucionado el problema. Entonces lo hice algunas veces, y ahora todos los temas
identificados, para
que puedan ver por aquí. Todos estos problemas ya
se han solucionado, si le echas un vistazo al chat. ¿Bien? Y vemos
esta página de inicio de sesión. Todo bien. Entonces no le pedimos a
Bowl que agregara autenticación. Pero como estás
agregando base de datos, ha agregado la
autenticación por sí misma. Además si te desplazas hacia arriba por los
chats y ves desde el punto donde le pediste agregar la base
de datos
a la aplicación, te darías cuenta de que
hubo un mencionado, como Bolt mencionó
que también está agregando autenticación porque, ya sabes, aquí está toda la funcionalidad
que se está agregando. Gestión de sesiones de usuario, investigación de
contraseñas. Y esto lo está agregando el
propio Bolt sin que lo
digamos porque estamos agregando base de datos, y cada tarea
debe estar asociada con el usuario al
final del día, ¿verdad? Porque quieres
gestionar la sesión. Entonces, si estás iniciando sesión
desde Browser deberías ver
tus todos en el navegador, y si estás iniciando sesión
desde tu teléfono, deberías ver
tus todos allí. Y esto solo se puede hacer si tus todos están
asociados a una cuenta. Todo bien. Entonces esto ha sido
atendido por el propio perno. Ahora, lo que voy a hacer es que voy a echar un
vistazo al discurso. Aún no tengo una
cuenta. Entonces lo que voy
a hacer es decir que te
registres por aquí, e ingresaré mi
correo electrónico por aquí. También ingresaré la contraseña. Bien. Y voy a decir que te
registres al 123, y solo diré
crear una cuenta. Entonces se crea la cuenta, y volví a la página de inicio de sesión, y
en la página de inicio de sesión, he ingresado mi correo electrónico
y la contraseña, y voy a ver
iniciar sesión por aquí. Todo bien. Entonces el
inicio de sesión está hecho. Ahora bien, este correo electrónico
que estoy usando es un correo electrónico ficticio y no mi correo electrónico
real por aquí ¿Bien? Acabo de crear esto para el propósito
de este curso. Entonces aquí, me he registrado
con este correo electrónico ficticio, y ahora puedes ver por aquí, esta es nuestra
página principal de aplicación que ves, ¿verdad Y si vienes a
Super Base ahora, déjanos ver si la información de nuestra
cuenta está siendo almacenada en la cuenta de
Super Base. Entonces aquí, voy a ir
a la barra lateral y
aquí en base de datos. Vamos a la base de datos. Entonces bajo base de datos, si vas a tablas. Bien, para que puedas ver por encima de
tu visualizador de esquemas, que
te va a dar una visualización lo que existen todos los esquemas Entonces aquí puedes ver las preferencias de
usuario en donde tienes ID de
usuario y todo. Esto es almacenar la preferencia
del usuario. Entonces hay que hacer etiquetas, después hay que hacer, y
luego hacer categorías. Entonces toda esta información está
siendo almacenada en la base de datos. Si vas a mesas,
vas a ver las
mesas de aquí. Se pueden ver todas estas tablas. Ahora bien, ¿dónde está la tabla de usuarios? Entonces tabla de usuarios no encontrarás
por aquí debajo de la base de datos. Tienes que ir a la
autenticación. Entonces bajo autenticación,
verás esta tabla. Verás a los usuarios por
aquí en el lado izquierdo. En el
lado derecho, puedes ver los usuarios que se están
creando en tu aplicación. Entonces este es un usuario, que es un usuario usando el cual
acabo de registrarme, y puedes ver que esto
acaba de ser creado. Esta es mi ID de usuario, ¿verdad? Entonces estás viendo alguna
información por aquí. Ahora, vayamos a la base de datos.
Vamos a las mesas. Y aquí están viendo
bastantes mesas por aquí. Bien. Y si
vas a todos, ¿de acuerdo? Entonces, si vas a ver
en la tabla Editor, entonces vamos a la mesa Editor. Entonces aquí puedes ver
ahora todos los datos que residen dentro de
estas tablas. ¿Bien? Esto está ahí
en la tabla Editor. Ahora, agreguemos un
tu do y
veamos si se
está agregando el Todo por aquí. Entonces voy a venir
aquí. Y aquí, voy a decir,
digamos, ve a él. Algo así.
Puedes agregar cualquier tarea. Diré Enter. Bien, entonces
estamos viendo sumar a Todo. Y si
vienes por aquí, Bien, aún no
vemos ninguna actividad. ¿Tenemos una manera de
refrescarnos por aquí? Entonces veo el Todo uppear. Acabo de hacer clic en este todo, y simplemente volvió a cargar
los datos por aquí Se puede ver. Ir al
gimnasio como apareció. Entonces tienes que venir aquí. Vamos a añadir una
tarea más. Diré que vaya a Market,
algo así. Ven aquí. No verás aquí Gudo MakeTueo.
Haga clic en Todos. Bien, o cambia así. Bien, no veo
los datos aquí arriba. Está tomando tal vez un
tiempo cargar los datos, o déjame refrescarme por aquí. Bien, entonces debería
ver a Goodomrket, así tendrás que
hacer una actualización completa si los datos no Entonces sí, esto
viene por aquí, y puedes ver que está
vinculado a mi ID de usuario. Este es el Todo ID. Todo está siendo almacenado
en la base de datos, derecho, creadod anuncio actualizado, toda la información
está siendo almacenada y completada se marca como falsa.
Entonces aún no está completo. Y si completas
alguno de los Too, por ejemplo, si completo
GoodoGym por aquí Para que se complete tarea. Y si vienes por aquí
y si refresco esto, entonces voy a ver que
GoodoGym está terminado, marcado como verdadero. Se puede ver. Por lo que también se está actualizando en
la base de datos, y se ha agregado la base de datos. Todo bien. Y se puede ver el esfuerzo que llevamos
ahora mismo para agregar base de datos. Esta base de datos
existe en la Nube en la Nube significado
a través de Internet. No está localmente en nuestro sistema. Está ahí en Internet. Y si despliega su aplicación a través
de Internet mañana, esta base de datos sería
su base de datos de producción. ¿Bien? Entonces espero que
esto tenga sentido y espero que sean capaces de
seguir lo que hemos hecho todo
lo que hemos hecho. Ahora, cualquier tipo de iteración o cualquier cosa que quieras
hacer por aquí, absolutamente
puedes decirle a
Bol que haga por aquí Pero esto ha sido
increíble hasta ahora, y también obtienes un botón
Sinnot por aquí Puedes ver tus datos de señal
con un botón Sinnot. Déjame abrir esto
en una pestaña aparte por aquí. Voy a
conectar el proyecto. Y se puede ver
cómo aparece esto. Bien, así que solo tengo que volver a
registrarme, ¿de acuerdo? Bien, para que puedas ver por aquí
o puedes ver por aquí. Bien, entonces
me está diciendo migrar tus todos. Hemos encontrado tu
para hacer guardado localmente. ¿Te gustaría
migrarlos a la cuenta? Bien, entonces migrar la migración
también es una funcionalidad que se
ha agregado aquí. Entonces, si el usuario
no tuviera la cuenta, entonces permitiría al
usuario migrar. Entonces básicamente, una vez que
actualices la aplicación, si esta aplicación
fue desplegada, simplemente
puedes hacer clic en Migrar y todos los todos se
agregarían a la cuenta. Entonces veamos.
Bien, buen gimnasio. Entonces probablemente antes,
había agregado GoTo Jim. Entonces por eso se
está agregando dos veces. Y déjame borrar esto, así
voy a borrar este GoTo Jim. Bien. Para que veas
que todo está funcionando bien. Entonces espero que hayas
podido seguirlo, y espero que hayas encontrado
esto súper útil.
8. Despliegue de tu aplicación para la producción: Hemos logrado un
progreso decente en nuestra aplicación, y lo que ahora nos gustaría
hacer es que queremos
desplegar esta aplicación a través de Internet, y me gustaría decir que me gustaría compartir
esta aplicación, la URL con todos mis amigos. Pero ¿puedo compartir la URL y
todo con mis usuarios, amigos, o con quien
quiera compartirlo? ¿Alguien a través de Internet venir y acceder a
esta aplicación? La respuesta es no. residiendo en tu
cuenta por aquí, y esta no es una URL pública. Entonces aquí, si copio esta URL, esta es la URL de nuestra aplicación. Y si abro un nuevo modo incógnito o una sesión de navegador invitado,
intentemos acceder a esto Entonces verías que me
está preguntando que, oye, para poder
ver tu vista previa, necesitas conectar esta
pestaña a su proyecto, lo que significa que necesitas estar autenticado e
iniciar sesión en tu nueva cuenta negrita Entonces si digo conectar el proyecto, verás que no pudo encontrar el proyecto. Así que
tenemos que iniciar sesión. Entonces mis amigos
no van a tener ni mis usuarios ni nadie a través de Internet no va a
tener acceso a mi cuenta. No voy a compartir
credenciales con todos, ¿verdad? Entonces, ¿cómo resolvemos esto? Entonces la respuesta a esto es, tendremos que desplegar
esta aplicación públicamente o
no debería decirlo públicamente. Tenemos que implementar esta
aplicación a través de Internet. Tenemos que hacer uso de
un proveedor de hosting. Entonces voy a decirle a
Bolt New que haga esto. Entonces voy a decir por aquí, despliégueme esta aplicación. Simplemente puede ingresar esta solicitud. Acabo de decir esto para desplegar. Instrucciones de implementación limpia.
Veamos qué hace. Bien, no he
mejorado este aviso. Veamos cuál es la
salida que me da. Te diré, audaz
hace uso de Netify. Para que veas, desplegaré tu aplicación en Netlify
por ti. Ahora, ¿qué es Netlify Yo sólo seleccionaré esto. Yo sólo buscaré a Netlify por aquí.
¿Qué es la hoja neta? Si vas a Netefy te voy a
dar una introducción. Te permite alojar
tus aplicaciones web, y es muy sencillo. Es una
plataforma muy fácil de usar es lo que
debería decir, por aquí. Y se puede ver que
hay tantos despliegues que se han hecho,
35 millones más Está siendo utilizado por 7
millones de desarrolladores. Entonces definitivamente es una de las soluciones populares que existen, y no necesitas
pagar por esto. Te da un
plan generoso de forma gratuita. Entonces aquí se puede ver que
hay una decente Como tengo bastantes uso mucho Netliee, y tengo bastantes sitios web
hostit ahí Si estás acosando
algo por aquí, puedes hacer uso de Netlifee gratis puedes hacer uso de Netlifee gratis
. No hace
falta que pagues nada. Puede pagar solo una vez que escala y necesita funciones profesionales. Entonces vamos a necesitar a Netlify por aquí. Puedes ver aquí
que nos está incitando a implementar nuestra
aplicación en Netlife Entonces, si te desplazas hacia abajo por aquí, puedes ver que estoy
construyendo y desplegando. Así que ejecutó algunos
comandos por aquí. Construyó nuestro sitio web usando
algunos comandos, y decía, estoy construyendo e implementando
su aplicación en Netlify, y esto creará una versión lista para la
producción de su hermosa aplicación para hacer con todas las características
y El sitio ha sido implementado
con éxito. Por lo que ya ha desplegado el sitio por aquí en esta URL. Así que déjame acceder a esta URL. Sí, se ha desplegado. Puedes ver por aquí,
esta es una URL pública. Entonces, si intentas abrir
esta aplicación aquí en otra pestaña,
vas a ver esto. Entonces esta es una URL pública. Es una URL de Netlify. Y déjame decirte
algo que no
tenemos un nombre de dominio
mapeado por aquí. ¿Correcto? No tenemos un nombre de
dominio mapeado por aquí porque
no lo hemos hecho, ¿verdad? Entonces esta es una URL pública, que nos es proporcionada por Nklefy y con la ayuda de
bolt, tenemos esta ND se despliega esta
aplicación a Netlify, y nos está diciendo que transfiera este proyecto de Netlify
a Puedes usar esta URL para
reclamar esta solicitud. Entonces voy a hacer clic en
esta URL de aquí, y me va a
llevar a esto. Entonces esta aplicación
se despliega, dijo, y es necesario reclamar
esta aplicación para que se mueva a
su cuenta, ¿verdad? Entonces, si haces clic en
el botón de reclamo, como la URL de reclamo de aquí, que Bolt ha proporcionado. Se te mostrará esta página de inicio de sesión porque necesitas
autenticarte aquí Ahora bien, si no
tienes una cuenta con Netlify, eso está absolutamente Puedes hacer clic en el registro y crear tu cuenta. Pero sí tengo una
cuenta por aquí. Soy usuario de Netlify, así que
sólo voy a iniciar sesión. Si no tienes una cuenta, no
dudes en registrarte. El proceso de registro es muy sencillo y no te costará nada. Para que puedas ver por aquí, he iniciado sesión en mi cuenta de Netlify Si te has
registrado, verás algo como esto por aquí, reclama tus aplicaciones en negrita en Netlify o si te pierdes por aquí
después del proceso de registro, lo que puedes hacer es volver a hacer
clic en esta URL ¿Correcto? Entonces veo este reclamo Mapas, y voy a ver las
arcillas por aquí Entonces es decir reclamando
aplicaciones y la aplicación ha sido reclamada y transferida a mi cuenta por
aquí. Se puede ver. Se despliega desde
cerrojo por aquí, y esta es una
época en la que se publicó, y a partir de aquí,
incluso se puede abrir esto en conjunto Para que puedas ver el tipo de integración que
están teniendo con Netefy y esta es la
URL que has captado Y si quieres
mapear algún dominio, digamos que compré un dominio, una app de puntos
de lista de todo, por ejemplo, o todo app.com. Este es un
dominio que he comprado. Puedes ir a Administración de Dominios. Y puedes agregar el
dominio por aquí, y tendrás que leer
los documentos de aquí, cómo puedes agregar un dominio personalizado
o tu propio dominio. Dominio personalizado lo que significa que
puedes agregar
tu propio dominio, tu aplicación,
tendrás que seguir estos pasos si
haces clic en este. Te daremos los pasos,
y podrás seguir los pasos y obtener tu
dominio agregado aquí. ¿Bien? Entonces eso es lo que es, y estás consiguiendo
esto por aquí. Entonces, si intentas
acceder a él por aquí, puedes ver que va a funcionar. Si abro esto en una pestaña
diferente por aquí, puedes ver que está
funcionando por aquí, déjame iniciar sesión usando la cuenta que he
creado por aquí. Algo como
esto, puedes ver, he iniciado sesión y puedo ver
mis todos por aquí también. Esta era una nueva sección de navegador, si recuerdas, he
abierto esto en modo adivinar. Me autenticé
usando mi cuenta y los todos que había agregado
junto con las calles Todo se está
guardando en el navegador, o lo siento, no en el navegador, sino en la aplicación,
usando la base de datos. Y donde quiera que me conecto,
voy a ver lo mismo. Incluso si inicio sesión desde
mi teléfono móvil usando esta URL,
va a funcionar para mí. Entonces nuestra aplicación ya
está disponible en producción es lo que
quiero decir aquí. Y tanques especiales
para audaz, ¿verdad? Bold ha manejado el trabajo muy fácil. Entonces aquí puedes
ver, estas son todas las integraciones
también que puedes hacer Así que no veo a
Netlify por aquí, pero en realidad no conectamos cuenta de
perno con Netlify, pero la tenemos
desplegada en Netlify, y reclamamos pero en realidad no conectamos la cuenta de
perno con Netlify,
pero la tenemos
desplegada en Netlify,
y reclamamos el proyecto por aquí.
Eso es lo que hicimos. Espero que esto haya sido útil
y espero que hayas podido entender el poder de la IA
y cómo herramientas como PLT pueden, ya
sabes, hacerte la vida mucho más fácil y
cómo puedes poner a prueba tus ideas o hacer muchas
cosas con todo este conocimiento Espero que esto haya sido útil.
9. Conclusión del curso: Y ahora hemos llegado a
la conclusión de nuestro viaje donde
hemos aprendido cómo podemos construir aplicaciones de
grado de producción con la ayuda de inteligencia
artificial y
herramientas como bolt dot Nu. A lo largo de este viaje,
hemos explorado cómo estas herramientas le
permiten crear aplicaciones
listas para la producción
real sin escribir en una
sola línea de código. Comenzamos entendiendo
lo que es bool dot new y nos
familiarizamos con su interfaz intuitiva
y sus A partir de ahí, construyó su primera aplicación
generada por IA, experimentando de primera mano lo simple que puede ser el
desarrollo impulsado por el baile Luego subimos de nivel para crear
una aplicación de lista de tareas
en la que comenzamos a
sumergirnos en
el desarrollo iterativo con IA, aprendiendo a refinar y expandir sus proyectos
en solo minutos A continuación, vio cómo puede
integrar la base de datos en su aplicación y
desbloqueó el almacenamiento
y recuperación de datos con esto. También aprendió cómo
puede implementar su
aplicación en producción, y esto ha permitido su aplicación sea
accesible a través de Internet. Y si tienes algún tipo de ideas que desees llevar
al mundo,
esta es la mejor
manera en la que puedes construir tu
prototipo de aplicación y
desplegarlo junto con una base de datos
completa y compartirlo con todo
el mundo Recuerda, una cosa, esto
es solo el punto de
partida nuevo y el desarrollo
impulsado por la IA está evolucionando todos los días, y hay más que explorar. Te animo a que sigas experimentando con los conceptos de
aplicación, nuevas ideas de productos,
refinando tu flujo y compartiendo tus
creaciones con el mundo Gracias por acompañarme en este viaje sin código,
impulsado por IA. Espero que este curso te haya inspirado y
te haya hecho confiar
para seguir construyendo, iterando y lanzando ideas de aplicaciones
innovadoras más rápida y consistente
que nunca Con esta clase, también
encontrarás un proyecto de clase en
la sección de proyectos. Podéis ir y comprobarlo, y os
animaría a todos a terminar el proyecto y compartirlo
con toda la clase. Hasta entonces, feliz Edificio y no
puedo esperar a ver
qué creas a continuación.
Faisal Memon, Product | Engineer | Entrepreneur
