YT YouTube2Text

YouTube2Text → Transcripts → Desarrollo Web | JS Básico – Miércoles 9 de septiembre – 6 PM COL/ECU/PAN | 8 PM UY

Desarrollo Web | JS Básico – Miércoles 9 de septiembre – 6 PM COL/ECU/PAN | 8 PM UY — Transcript

by Fundación ROFÉ - Toca una Vida · 16,393 words · 2,592 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:08Listo, chicos. Buenas tardes. ¿Cómo
0:12estamos?
0:14Hoy también tengo energía como la semana
0:16pasada estoy energético.
0:20Estoy es que me que me enseño.
0:24Oh, pues cómo vamos,
0:26qué han hecho,
0:29si han estudiado, acomódense porque esto
0:31va a pagarlo.
0:33Mentiras tampoco. ¿Cómo vamos con esas
0:36clases? Con, bueno, con las clases no,
0:38las clases las doy yo, pero ¿cómo vamos
0:40con el tema de las de los estudios? A
0:42ver, ¿qué han estudiado? ¿Qué han hecho?
0:45¿Han practicado? ¿No han practicado?
0:48¿Qué han aprendido esta semana? Desde la
0:50o desde la semana pasada. A ver, que por
0:53ahí veo
0:55amarillo, amarillo,
0:59amarillo, amarillo. Tirándola para
1:01verde.
1:03Bruno dice, "La tarea del portafolio la
1:07hice durante toda la tarde de hoy."
1:09Perfecto. Espectacular. Yo todavía no
1:11logro finalizar el portafolio.
1:13Igual no hay problema, eso lo que hay es
1:15tiempo.
1:18Listo. Y con el tema de de Bueno, yo
1:21supongo al portajol le estarán metiendo
1:23lo que hemos ido aprendiendo, ¿no?
1:25Supongo yo.
1:28Oh, pues [resoplido] listo, chicos.
1:31Bueno, además de eso,
1:34¿cómo vamos con los proyectos?
1:37A ver, cuéntenme
1:39cómo vamos con los proyectos. ¿Qué han
1:41hecho de los proyectos? ¿Han hecho algo?
1:44¿No han avanzado? ¿Se quedaron ahí?
1:47Paula, ¿pero qué pasa, Paula? Pero
1:50Paula, Paula dice,
1:54"No, pero ¿por qué
1:57tampoco está tan complejo?
2:04¿Cómo vamos con esos proyectos? Por ahí
2:06he ido viendo repositorios,
2:09no he hecho casi nada con eso, con eso.
2:12Quienes después sean la tarde y
2:14después están
2:16una semana antes. Probe, ayúdeme. Probe,
2:18profe, ¿qué hago? Probe, profe, présteme
2:21el cloud, profe. No,
2:24no, no, no. Yo no he avanzado mucho con
2:26el proyecto, pero hoy que hice eso del
2:29portafolio yo tengo una idea de qué
2:31hacer. Exactamente, eso es un buen
2:33ejemplo lo que dice Bruno, uno muchas
2:36veces está bloqueado en un proyecto, en
2:38algo, uno se pone a hacer otra cosa y
2:41mientras está haciendo otra cosa se le
2:44liberan las ideas y ah, listo, ya sé qué
2:47hacer para esto. Ah, esto que estoy
2:49haciendo aquí lo puedo aplicar allá. Eso
2:51a mí me ha pasado mucho, eso es muy
2:53normal. Y más que todo aquí que en este
2:56mundo existe mucho el burnout. El
2:59burnout, no sé si lo han escuchado, es
3:01que uno se literalmente se quema, llega
3:04un punto de que de que estudia tanto,
3:07lee tanto, practica tanto, hace tanto,
3:10está tanto tiempo enfrente una pantalla
3:13que literalmente se quema, se le quema,
3:15se le queman las ideas. La única manera
3:18para uno liberarse de eso es cambiar
3:20totalmente de ambiente, salir de la
3:23habitación,
3:24eh dar una vuelta, hablar con alguien,
3:28tomar algo, comer alguito, jugar algo,
3:32algo diferente, que no tenga ese cargo
3:36tan fuerte que pues conlleva esto que es
3:39concentración, ganas, disciplina,
3:42tiempo, que es el tiempo que uno uno
3:45está dejando de hacer otras las cosas
3:47dedicándole a eso, pero eso es muy
3:49normal el tema del bornout y es, no sé
3:53si de pronto lo han escuchado por ahí el
3:55coso ese, ¿cómo llama? La metodología
3:57esa de pomodoro, que son por cada 30
4:00minutos descanso cinco, cada 30 minutos
4:03descanso cinco y vuelvo y continúo. Eso
4:05es algo bueno por si de pronto ustedes
4:07lo notan que dicen, "No, yo cada cierto
4:10tiempo ya se me pierden las ideas."
4:12Cuando uno llega a ese punto de que las
4:13ideas se le van, es mejor parar porque
4:16lo único que va a hacer es perder
4:17tiempo, parar un momentico, hacer otra
4:19cosa, 5 minuticos y vuelve y continúa
4:21dentro de 5 minutos donde iba y
4:24facilito, vuelve y la coge.
4:27Jonathan dice, "Tengo una página hecha,
4:30pero es solo un borrador. Además, me
4:32falta implementar más JavaScript y
4:34futuramente base de datos." Exactamente.
4:35Sí. Eh, no se preocupen, chicos, por el
4:38tema de las bases de datos. O sea, me
4:40les digo, no se preocupen en este
4:42momento porque pues ya para las
4:43siguientes clases, yo creo que si para
4:46las siguientes clases pues ya vamos a
4:48empezar a ver también bases de datos.
4:50Entonces, pues ustedes la idea es que
4:53también se vayan adelantando un poquito
4:55a los hechos, pero eh [resoplido]
4:58además de que se vayan adelantando los
4:59hechos, pues pueden ir buscando,
5:01investigando cómo funciona, que es una
5:03una base de datos, no que lo hagan, pero
5:06sí más o menos que tengan la idea para
5:08que cuando lleguen a la clase pues
5:09tengan dudas. Para esas dudas yo
5:12ayudárselas a solucionar lo más que
5:13puedan.
5:15Eh, además lo que también les decía, me
5:19interesa ver movimiento del GitHub.
5:21Entonces, cada que tengan, por ejemplo,
5:22que el que Jonathan dijo que tiene una
5:27página hecha, pero es un borrador, me
5:28sirve, súbela ahí al GitHub y ve
5:31modificándole cositas. No importa que
5:33dentro de dos semanas esté totalmente
5:35diferente, no importa. Lo importante es
5:36que muevan el Ghub.
5:39Eh, tan tan tan
5:42Bruno, los que somos ninja sabemos del
5:46método pomodor
5:50más te vale. Dice Cristian, "Profe, ¿qué
5:53hago? ¿Qué haces de qué?"
5:56Santiago dice, "Yo he estado repasando
5:58algunos temas con la página que creaste
6:01para estudiar." Perfecto. Me alegra
6:03mucho que les esté sirviendo. Lo había
6:05dejado la había dejado un poquito
6:07abandonada esta semana porque esta la
6:09semana pasada fue mi burnhout. Después
6:11del miércoles, ya jueves, jueves,
6:14viernes, sábado y domingo, ya no quería
6:15no quería hacer nada más y es normal.
6:17Ya, de verdad, ya llegaba a la casa y ya
6:20no quería un computador por el
6:22resto del día, pero pues ya esta semana
6:25ya descansé todo el fin de semana pasado
6:27de de computador, de tecnología,
6:29entonces ya aquí estoy listo otra vez
6:31para continuar.
6:34Listo, chicos. Bueno, entonces ya que
6:36charlamos ahí un ratico, quiero que me
6:40digan, quiero que me digan, me recuerden
6:43cuál fue el tema de la semana pasada,
6:45qué dimos la semana pasada, qué se
6:47acuerdan de la semana pasada, a ver,
6:50¿dónde quedamos? ¿Quién me dice dónde
6:52quedamos? ¿Qué vimos? ¿Qué nos faltó?
6:56Es como un daily. Daily. ¿Qué hicimos la
6:58semana pasada? ¿Qué vamos a hacer hoy?
7:01¿Qué nos falta? ¿Qué nos bloquea?
7:05A ver, díganme ahí por el chat qué
7:07hicimos la semana pasada o háblenme
7:10a ver qué en qué se acuerdan que hayamos
7:13hecho.
7:14La semana pasada vimos cómo hacer que
7:17JavaScript, bueno, el resumen, cómo
7:18hacer que JavaScript funcione de manera
7:20síncrona.
7:22[carraspeo] Sí, trabajamos la sincronía
7:24con JavaScript.
7:26¿Qué más hicimos? ¿Qué más repasamos?
7:27Vimos dentro del asincronismo, la sinca,
7:31el tencatch,
7:33quiz.
7:34Ah, el Quisis. Sí, el Quisis que hicimos
7:37el Quisis que ya era un repasito para
7:39ustedes mismos como retroalimentación.
7:42Eh, esta semana no les traje quiz, pero
7:45para la próxima yo creo que sí se los
7:47traigo con el tema de Cawe y lo que
7:50vamos a ver hoy para que le para que
7:52vayan preparando.
7:55¿Listo? Entonces, si la clase pasada
7:57vimos en la CCW
7:59a tema de sincronismos, promesas y todo
8:02eso, ¿qué íbamos a ver la clase de hoy?
8:05¿Quién se acuerda de qué era la clase de
8:07hoy?
8:11A ver, ¿quién se acuerda
8:14que yo les dije que los iba a dar en la
8:16misma clase, pero la final no
8:17alcanzábamos? Entonces, que más bien lo
8:19iba a dejar para esta.
8:21¿Qué va a ser el tema de hoy? A ver.
8:26No se acuerdan.
8:37No se dan cuerda.
8:39Hoy íbamos a ver no JS.
8:43No JS. La clase pasada vios
8:45asincronismos. Hoy hoy vamos a ver no
8:48JS. lo dejamos para una para una clase
8:51específica, pues porque el tema de no es
8:53es un poquito
8:56h bueno, no es tan no son tantos, bueno,
8:59como les cómo hacemos ahí, o sea, no es
9:02que sean muchos temas, sino que conlleva
9:05varias cosas.
9:06Entonces, la idea es hoy tratar de h
9:12abarcar todos esos temas o bueno, la
9:14mayor cantidad de temas posibles. Eso
9:17sí, obviamente si tienen preguntas vayan
9:20haciéndomelas para yo ir resolviéndolas
9:22lo que pueda resolverles para que no se
9:24me queden con dudas porque si tienen
9:26dudas de la clase pasada y también
9:28quedan con dudas de la clase de hoy,
9:29pues para la próxima clase van a estar
9:31más enredados todavía. Pues no, no es mi
9:34intención. Entonces, hoy vamos a ver no
9:36JS, pero pues tampoco quiero que se me
9:38enreden mucho. Sí. Entonces, pues sí
9:41vieron que estaba como enredadito el
9:43tema, bueno, solo es practicar, que eso
9:46practicando
9:47eh funciona.
9:51Listo. Bueno, a ver, ¿dónde quedó? Aquí
9:55estaba. Espérenme que lo tengo por acá.
10:03Listo.
10:06No JS, ¿qué es? ¿Para qué sirve y cómo
10:09dar sus primeros pasos?
10:13¿Listo? ¿Qué es JS?
10:16No J es JavaScript. Sabemos lo que yo
10:19siempre les he dicho, JavaScript nació y
10:22vive dentro del navegador.
10:25Es un lenguaje embebido. Yo les dije que
10:28se acordara esta esta frase, embebido.
10:32Es un lenguaje embebido, o sea, que vive
10:34dentro del navegador. En este caso,
10:37cualquier navegador, todos lo traen.
10:39Entonces, es como que el starter p, un
10:42navegador. Eh, ¿qué pasa? Pues como solo
10:45vive dentro del navegador, pues solo
10:47funciona dentro del navegador.
10:50¿Qué pasa entonces? Viene No js a
10:52solucionarnos ese problemita. No JS le
10:55dio la posibilidad de correr también
10:57fuera del navegador, en la computadora,
11:01en el servidor, etcétera. Cualquier cosa
11:03que ejecute no JS, ahí puede ejecutar su
11:06JavaScript. ¿Sí? Entonces,
11:10¿esto por qué? ¿Cómo así? O sea, ¿qué
11:12sentido tiene esto? si ya corren el
11:15navegador y pues todos los usuarios
11:16tienen navegador, claramente eso es
11:19obvio. Uno dirá, pues no tiene sentido.
11:21Pues fíjate que sí lo tiene. ¿Por qué?
11:24¿Cuál es el sentido? Cuando nosotros
11:27utilizamos nuestras páginas, nuestras o
11:29creamos nuestras páginas, recordemos que
11:32las páginas en este momento están
11:34viviendo en local. local, o sea, nuestra
11:37propia máquina. Aquí no han salido de
11:39aquí. Eso significa que viven dentro de
11:41nuestro mismo eh eh disco duro, dentro
11:46de y el procesador es el mismo que
11:49ejecuta todas las tareas, o sea, todo es
11:52lo mismo, todo está ahí. Es como como el
11:55ejemplo que les estaba dando la eh que
11:58la eh qué es, por ejemplo, cuando
12:01ustedes eh quieren comer galletas. Sí.
12:05Entonces, ¿ustedes qué hacen? van y
12:07buscan dentro de la la cena eno el cajón
12:10de la cocina, buscan las galletas y si
12:13ahí hay galletas pues no tuvieron que ir
12:15a la tienda. Sí, no pasó nada. ¿Y qué
12:19pasó? No pasó nada, simplemente está ahí
12:22mismo. Está ahí en dentro de su propia
12:25casa, o sea, dentro del mismo entorno.
12:27Ustedes no tuvieron que salir, no
12:30tuvieron que prepararse ni ponerse
12:31chaqueta, ni zapatos, nada, nada. Todo
12:34estaba ahí dentro. Sí, pero ¿qué pasa si
12:36las galletas están en el supermercado?
12:38¿Qué tenemos que hacer? Tenemos que
12:39salir. Entonces, tenemos que prepararnos
12:42para ir por las galletas y regresar para
12:45poder comérnoslas en la comodidad de
12:47nuestra casa. Eso es lo mismo.
12:49JavaScript en este momento está
12:51funcionando dentro de nuestra propia
12:53máquina, dentro de nuestro propio
12:54navegador. Sí, pero pero JavaScript no
12:58va a vivir toda la vida aquí. Él va a
13:00tener que vivir realmente en un
13:03servidor. Y recordemos que qué es un
13:07servidor. Vamos a ver
13:10qué es un servidor. Un servidor es un
13:13sistema o programa informático que
13:15atiende las peticiones de otros
13:16dispositivos o programas llamados
13:18clientes a través de una red. Nosotros
13:21como usuarios somos clientes. Cuando una
13:24persona accede a una página es un
13:26cliente. ¿Un cliente de quién? De la
13:28página. En este caso, como es de la
13:30página, pues obviamente también del
13:31servidor. Sí,
13:34esto es un servidor,
13:36esta es la imagen de un servidor,
13:39no es más. Esto, ¿qué significa esto?
13:43Eso es un clúster. Un clúster que son es
13:45un conjunto de varios servidores y cada
13:47servidor se le llama o armario o rack,
13:50que es lo mismo. Y aquí adentro hay
13:53muchos computadores, uno por filas, como
13:56cinco filas. Entonces, aquí hay uno,
13:58aquí hay otro, aquí hay otro, aquí hay
13:59otro, aquí hay otro, aquí hay otro. Sí.
14:01Entonces, ahí se maneja redes,
14:03conexiones
14:04y realmente lo que más vale es que
14:07tenemos discos duros, procesamiento con
14:10procesadores de alta potencia y memoria
14:14RAM. Estos son los encargados de
14:17almacenar nuestra información y
14:20procesarla para cuando cliente ingrese a
14:23la página y pida esa información. Aquí
14:25es donde se almacena. Y por qué les
14:27estoy mostrando esto? Porque como
14:29desarrolladores de software, como los
14:32creadores del software, tenemos que
14:34saber por lo menos cómo funciona la
14:37infraestructura en la cual vamos a
14:39trabajar. ¿Sí? No es lo mismo yo
14:41decirles, "Muchachos, suban algo al
14:43servidor, que ustedes sepan que es un
14:45servidor, a que no sepan que es un
14:46servidor." Ah, sí, pero okay, ¿esto cómo
14:49funciona? ¿De qué se trata? ¿Con qué se
14:51come? Listo. Esto es eso, simplemente un
14:54computador con un sistema operativo
14:56extremadamente básico que lo único que
14:59hace es monitorizar el comportamiento
15:02del mismo, temperatura,
15:05procesos que entran y salen, tiempos de
15:08llegada, tiempos de salida, todo esto
15:11afecta. Entonces, ya aquí es donde tiene
15:14relevancia el tema de asincronismo,
15:17que es el hermanito que vimos la clase
15:19pasada. Entonces, como el servidor ya no
15:22está dentro de nuestra propia casa, sino
15:24que el servidor está
15:26en el más común por allá en Oregon, en
15:30Virginia, en Estados Unidos, esos son
15:33como los más comunes. Aquí en
15:34Latinoamérica hay uno en Brasil y hay
15:36uno en Bogotá, si no estoy mal, bueno,
15:38hay varios. Mm.
15:41Y en Chile creo que hay otro,
15:44[carraspeo] pero esos son cercanos, pero
15:47no son tan potentes, no son como la los
15:50data center que hay en Estados Unidos o
15:53en el resto de pues en el por ejemplo en
15:55en Europa que también son data center
15:58gigantes. ¿Qué es un data center? Es un
16:00espacio así abierto, muy abierto, muy
16:03grande en el medio de la nada.
16:06Normalmente suele ser en el medio de la
16:08nada en climas fríos, eh donde se
16:11almacena mucha cantidad de estos
16:14clúster, muchos, muchos. Entonces allí
16:18es donde almacenamos la información.
16:19Entonces, cada que hacemos una petición,
16:21no es lo mismo hacer una petición a
16:23Rusia, a Japón, a China, que está al
16:26otro lado del mundo, que hacerle la
16:28petición, por ejemplo, en mi caso, a
16:30Bogotá, que estoy relativamente o bueno,
16:34muchísimo más cerca que Japón, China,
16:37Rusia, Bogotá está allí, pues en mi caso
16:40como 8 horas, eh, Japón está más de 24,
16:44muchísimo más de 24 y en avión.
16:46Entonces, pues si hacemos el cálculo,
16:48está lejísimo, cientos de miles de
16:50kilómetros. Entonces, todo eso afecta.
16:53Aquí es donde esos tiempos de más
16:57tiempo, menos tiempo, aquí es donde
16:59entra el asincronismo y todo esto.
17:01Entonces ahí les decía, por eso es que
17:02es importante. Entonces, como ya sabemos
17:05esos tiempos y todo eso, bueno, listo.
17:06El J lo que hacemos es que se instala
17:09dentro del servidor y este lo que nos
17:12permite es ejecutar nuestro programa,
17:15nuestro código JavaScript. El código que
17:17nosotros creamos, este se va a poder
17:19ejecutar en el servidor gracias al Node
17:22JS. ¿Sí? Entonces, no es más. Es como un
17:25computador con un sistema operativo
17:27extremadamente básico. Ah, que que si
17:30podemos tener un [carraspeo] un servidor
17:33propio, sí se puede, pero pues
17:35normalmente son en baja escala, mucho
17:37más pequeños, mucho más portátiles,
17:39mucho más económicos. Una cosa de estas
17:42cuesta demasiado.
17:44Esto estos pues nada más un rack puede
17:47el más barato, el más básico, el más
17:49mínimo está como en los 30 millones de
17:52pesos. El más básico como los $10,000
17:55más o menos. Entonces el más básico,
17:58básico, lo mínimo como para que medio
18:01funcione bien, 30 millones de pesos.
18:04Pero si realmente queremos una
18:05infraestructura potente, escalable, ¿a
18:08qué me refiero con escalable? que que la
18:10página pueda crecer en tamaño y en
18:14bueno, en almacenamiento y en datos,
18:16pues la página o bueno, eh, perdón, el
18:18servidor tiene que ser también algo
18:21grande que se pueda escalar. ¿Qué pasa?
18:23Esto tiene muchas consideraciones eh
18:26físicas.
18:28¿Qué me refiero con físicas? de tamaño,
18:30es bueno, tamaño, espacio, temperatura,
18:33cuidados, porque eso es algo que no se
18:36puede desconectar de la corriente, o
18:38sea, no es como que yo llegue y
18:39desconecte el servidor de la corriente y
18:42ya no pasó nada, no, eso se debe de
18:44hacer. Entonces, tenemos que tener una
18:47conexión segura 247 a la electricidad,
18:50sin importar si en mi zona hay o no hay
18:52electricidad, él tiene que seguir
18:54teniendo electricidad.
18:56tenemos que proteger la temperatura de
18:59de electricidad, que si hay una subida
19:01bajada de temperatura eh de perdón de
19:03electricidad de mi zona no vaya a quemar
19:05el data center. Bueno, muchas cosas.
19:07Entonces, claro, sí lo podemos tener en
19:09local, pero tenemos que tener esto en
19:11cuenta. Ya cuando la página pues es,
19:13digamos, o es algo muy básico, pues
19:15listo, cualquier cualquier otro
19:16computador es es más el computador que
19:18estoy usando en este momento puede ser
19:20perfectamente un servidor muy pequeño,
19:22pero puede serlo para cosas muy
19:24específicas. No sé, de pronto los que
19:26hayan jugado alguna vez Minecraft, esto
19:29puede funcionar como un servidor. El
19:31computador de uno en el que uno mismo
19:33juega también hace el trabajo de
19:36servidor. Eso, eso y muchos otros
19:37juegos. Yo le digo en Minecraft porque
19:39pues es el que más lo hice. Pero eh qué
19:43pasa al ser tan costoso, al ser tan
19:45complejo de mantener, necesita uno tener
19:48conocimientos de infraestructura de
19:49redes y todo ese tema. Entonces, para
19:52facilitarnos la vida existen los data
19:55center, que es lo que le dije, que están
19:56alrededor del mundo. Todos están
19:58alejados, ninguno está cerca del otro
20:01por temas de seguridad, catástrofes,
20:04catástrofes naturales, terremotos,
20:07incendios, inundaciones, tienen que
20:09estar separados porque si uno se dañan,
20:11pues el otro tiene que estar ahí de
20:12respaldo. Entonces, si están los dos en
20:13una zona muy cercana, se afectan los
20:15dos, se pierde todo.
20:18temas políticos, bombardeos, cualquier
20:21ese tipo de cosas tienen que estar
20:22alejados uno de otro. O sea, es como una
20:25red, por eso se le llama también la web,
20:27que la web en español sería internet,
20:29eh, perdón, internet, no, la web sería
20:31una red, literalmente. ¿Qué es lo que
20:34compone el internet? Que es donde
20:36nosotros nos conectamos y se llama red
20:38porque se conectan unos con otros y todo
20:41está conectado. ¿Listo? Teniendo esto
20:43claro, entonces ya sabemos para qué se
20:47utiliza el NoJs. El NoJs lo único que
20:49hace es que nos permite eh ejecutar ese
20:53código JavaScript en cualquier servidor.
20:56Eh, vamos a ver para qué sirve
21:00servidores web, que es para atender
21:02páginas y aplicaciones
21:05para herramientas tipo scripts,
21:07utilidades de línea de comandos, que eso
21:10ya, por ejemplo, podría venir haciendo,
21:12yo que sé, por ejemplo, algo con punto
21:15net o cosas así. Bueno, otras cosas un
21:17poquito más avanzadas. Apis, que eso lo
21:20vamos a ver ahorita. Compartir datos
21:22entre apps y sitios. eh automatización,
21:26que son tareas repetitivas sin hacerlo a
21:29mano, también nos lo permite js
21:32navegador versus no JS. El navegador,
21:37¿qué nos permite? corre en la
21:39computadora de quien visita la página, o
21:41sea, en este en el caso, digamos,
21:43ustedes publican eso y estarían
21:45conectándose eh o bueno, la página
21:48estaría viviendo en la en la computadora
21:51del usuario. Eso es un problema porque
21:54nuestra página entonces todo el tiempo
21:55va a depender de la potencia del
21:58dispositivo del usuario. Y pues como por
22:01obvias razones todos tenemos
22:02dispositivos diferentes, no es lo mismo
22:05mi computador que el de que el de Bruno,
22:08que el de Jonathan, que el de Paula, el
22:10de cualquiera. Todos son diferentes.
22:12Puede que tengamos la misma línea de
22:13computadores, el mismo computador, el
22:15mismo procesador, pero de pronto yo
22:17tengo más aplicaciones, Bruno tiene un
22:20poquito menos, Paula eh tiene muchos
22:22programas abiertos a la misma vez,
22:24Jonathan tiene todo tiene lo tiene con
22:27Linux, pueden pasar 1 cosas. Entonces,
22:30no nos podemos no podemos depender de la
22:32potencia del dispositivo del usuario,
22:34que eso lo que va a hacer es que si lo
22:35dependemos de eso va a generar retrasos.
22:39Si si el computador es muy potente, pues
22:41se va a ver espectacular, pero si el
22:43computador es cortico de recursos, muy
22:46lentos, pegadito,
22:48entonces la página va a sufrir, va a
22:50sufrir temas de thermal troubling o
22:55embotellamientos, cuellos de botellas,
22:57porque la información se demora mucho en
22:59llegar o bueno, la información llega muy
23:01rápido, más rápido de lo que el
23:03computador puede procesarla. Entonces,
23:05para evitar eso, entra el nombre 10,
23:08todo se ejecuta en el servidor y cuando
23:10se ejecuta en el servidor se manda y el
23:13y el computador lo único que hace es
23:14recibir ya todo masticado y simplemente
23:17lo pinta por la pantalla y listo.
23:20En el navegador podemos modificar lo que
23:22se ve en pantalla, que esto fue lo que
23:24vimos de DOM. Esto cuando el servidor
23:28nos entrega la página es una página que
23:32se descarga, pero una sola vez al
23:34principio, y esta nos permite con ese
23:37DOM tener aplicar modificaciones. Por
23:40seguridad no puede leer archivo en tu
23:42computadora. Bueno, ahí está. En JS
23:45corre en tu computadora o en un
23:47servicio, un servidor, perdón. En este
23:49caso, pues la idea es que funcione desde
23:51el servidor para que se agilice y cuando
23:54llegue todo, llegue lo que es y listo,
23:56llegue todo y una sola. No tiene
23:58pantalla ni HTML que mostrar. Si puede
24:01eh eh no tiene pantalla ni HTML que
24:04mostrarles porque pues como es un
24:05servidor no tiene absolutamente nada, no
24:06tiene navegador ni nada, é, simplemente
24:08lo que es es que renderiza el código,
24:11ejecuta el código y lo manda. Y el que
24:14renderiza esa información es nuestro
24:16computador, el del usuario.
24:18Sí puede leer archivos. Bueno, sí puede
24:21leer archivos, conectarse a base de
24:23datos, etcétera. Pues desde ahí ya
24:25podemos hacer conexiones por medio de
24:26apps.
24:28¿Listo? [carraspeo]
24:30Ahora sí, manos a la obra.
24:33Instalando js vamos a instalar no js
24:35para los que de pronto eh la veos
24:39anteriores no lo hayamos instalado.
24:41Entonces, no js es muy sencillo. En el
24:43navegador van y buscan eh note, así tal
24:47cual, note y ya les va a aparecer. ¿Cómo
24:49saben que es el correcto? Es este
24:51verdecito que tiene que dice noj10.org.
24:54Para los que de pronto no lo hayan
24:56instalado, simplemente le dan acá o le
24:57dan acá en descargar. Es lo mismo.
25:00Entran a la página.
25:02Dentro de la página lo que tienen que
25:04hacer es
25:07es darle aquí donde dice obtener no jss.
25:11Listo. Esto no lo muevan. Esto no se
25:14mueve. Déjenlo así. ¿Qué versión? La que
25:18está la última. LTS. LTS significa
25:22longterm support, o sea, un un soporte
25:25de largo término. Significa que es una
25:28versión que no van a cambiar durante
25:29mucho tiempo, entonces no va a tener
25:31modificaciones, por ende va a modificar
25:34o no va a afectar nuestro desarrollo,
25:36nuestra página, nuestro código. Esto se
25:39los explico porque aquí ustedes, si se
25:41fijan, la que nos está sugiriendo es la
25:4424.21.0,
25:460, que es la LTS, la última LTS que ha
25:49salido. Después de esa hay una 25.9 y la
25:53actual es la 26.8. Entonces, ¿por qué
25:56nos está ofreciendo una 24 sabiendo que
25:58ya hay una 26? Muy sencillo, porque esta
26:01es la que se terminó de pulir de tal
26:04manera de que no diera errores, no
26:06fallara. Esta, como en cualquier cosa,
26:09normalmente la última versión que sale o
26:12la primera eh suelen tener problemas,
26:16problemas de rendimiento, de velocidad,
26:19de potencia, de que fallan algunas
26:21cosas. Entonces, para evitar eso, se
26:24instala la LTS, que ya sabemos que está
26:26full y no tiene problemas.
26:29¿Cómo se instala? Simplemente le dan
26:30aquí eh windowsinaller.msi,
26:33él se les va a descargar.
26:36¿Listo? Ustedes lo aceptan. Siguiente,
26:38siguiente, siguiente, siguiente,
26:39siguiente. Y listo. Eso es todo. No es
26:43más. ¿Cómo hacemos para saber que ya lo
26:46tenemos instalado? Es muy sencillo.
26:48Entonces, abrimos aquí una powers shell,
26:51una terminal en nuestro computador.
26:54Ah,
26:59sh.
27:03Abrimos una terminal de Power Sher en
27:06nuestro computador y utilizamos el
27:08comando no.
27:13Esperamos que cargue y este nos debe dar
27:15un número, en mi caso 24.16
27:18que sería la última versión que yo tengo
27:20instalado.
27:22Si ya lo tenían instalado y vuelven lo
27:24instalan, no pasa nada, se les va a
27:25actualizar en caso tal de que sea
27:26necesario y no, no va a pasar nada. Esta
27:29es la manera de uno darse cuenta de que
27:31tiene instalada la herramienta en la
27:32terminal de comandos. Escribe el comando
27:35no espacio gu B de versión. Pueden poner
27:39guion version también y les va a
27:41funcionar. Esto es para darse cuenta si
27:43tienen la versión instalada cuando les
27:45aparezca esto. Eh, perfecto. Dime,
27:48Jonathan.
27:50Profe, yo el no lo había instalado
27:53anteriormente y ahorita revisando qué
27:55versión tengo, me sale que la 26.7
27:58¿Qué me recomienda hacer?
28:00No, déjela así, déjala así. Si si ya la
28:03tienes instalada, no pasa nada. Dice la
28:0520. ¿Cuál?
28:06La 26.7. Es que ya lo había descargado
28:08como hace un par de semanas, creo.
28:11No, déjal. No pasa nada, no pasa nada
28:13porque pues ya si lo tienes instalado
28:16bien, si pues no te ha fallado, igual no
28:17te va a fallar. No creo que te falle.
28:20Igual eh más adelante pues él se irá
28:22actualizando. Entonces con el con
28:24comandos que vamos a ver más adelante él
28:26se va a actualizar a la versión estable
28:28en caso tal de que pues esté fallando,
28:30pero pues si no ya lo tiene no pasa
28:32nada. Les voy a compartir o bueno, voy a
28:35dejar este comando aquí
28:38pendiente porque yo sé que lo vamos a
28:40necesitar más tarde o de pronto para los
28:44que ya les esté saliendo el error, es
28:46muy normal que eh ustedes empiecen aquí
28:50escriban no guí
28:53error, le salga aquí error, no se pudo
28:55ejecutar este comando en la consola y
28:57tal. Si de pronto ya le salió ese error,
29:00me dicen y yo les comparto esto, qué es
29:04eh el que soluciona ese problema. Eso es
29:08un error de Windows, es muy común, es lo
29:10más común que vamos a ver. Porque, ¿qué
29:14pasa? Existen dos versiones, bueno,
29:16realmente existen muchas, pero versiones
29:19comunes de Windows.
29:21Hay dos, la Professional y la Windows
29:24Home. Windows Home es simplemente un
29:28Windows creado, creado y pensado para un
29:31hogar, para funcionar en un hogar o en
29:34una casa o a una persona que no tenga
29:37esto. Me sale error. Yo sabía. Ya me lo
29:40sabía.
29:41Ahí te lo mando.
29:45Ejecuta ese ahí la consola.
29:49Profe, ¿cuál es equivalente de Power
29:50Shell en Mac? Para verificar si lo
29:53instalé en Mac. Creo que es es Ah, pero
29:56bueno, si lo instalaste en Mac, entonces
29:58pues aquí no. Aquí cambias Windows por
30:01MacOS, ¿sí? Para que no te vaya al
30:04error. ¿Por qué Mac no permite los
30:06puntos MSI? Si es con Mac, él descarga
30:09el PK, el PKG, PKG, pues realmente no sé
30:14mucho de Mac, pero eh sí sé que los MCI
30:17no se ejecutan, entonces tienes que
30:18cambiarlo aquí de Mac para que te
30:20instale el que es. Si ya lo instalaste,
30:22pues con el PKG,
30:24si no estoy mal la consola debería de
30:27ser bash
30:30así creo que lo buscas. Creo que es la
30:32que eh consola.
30:35Bueno,
30:38a ver,
30:41esperen que estoy pegado.
30:45¿Cuál es? ¿Cuál es? ¿Cuál es?
30:49Mira, con spotlight, eh, esto que es,
30:52creo que es command y el espacio y
30:55escribes terminal y presionas enter y
30:58ahí debería abrirse. Y según veo debe
31:02ser sí.
31:05Entonces igual funciona lo mismo que
31:08sería est acá.
31:23Es sería esta misma, si no estoy mal, es
31:26esta misma. Entonces, si yo escribí aquí
31:28no gu
31:32ahí igual también funciona, que la sería
31:34la consola, pero el equivalente en
31:36Linux. ¿Qué pasa? GMAC es un kernel de
31:39Linux, pero pues hace muchos años ellos
31:42crearon su propia versión y son
31:43totalmente independientes, pero no dejan
31:45de ser Linux. Entonces ellos funcionan
31:47con con todo lo que tiene que ser todo
31:50lo que o bueno, la gran mayoría de cosas
31:52con eh lo de Linux, pero pues en tema de
31:55paquetería y esos funcionan con pues con
31:57esta de PKJ, PKG, perdón. Eh, Bruno, ¿ya
32:03arreglaste el error? Sí, funcionó. Sí,
32:05era eso.
32:06Sí, profe, ya está arreglado.
32:09Sí, no es que lo tengo, pero lo tengo ya
32:11aquí apuntado porque eso me ha pasado
32:13cantidad de veces.
32:15Pero esta vez me me adelanté a los
32:17hechos y antes de que los pasado ya
32:19tenía preparado. Esto lo que pasa es que
32:21lo que les decía, hay dos versiones de
32:23Windows, Windows Home y Windows
32:25Professional. La Windows Home es
32:27simplemente como pensada muy protegida
32:30para que el usuario no suela tener
32:32problemas de ciberseguridad y todo eso.
32:35Trata de como proteger. Entonces, lo que
32:37hace es que protege la consola porque la
32:40consola es un elemento eh, a mí ni me
32:42sale, si no te sale nada es porque no lo
32:45has instalado, es porque no está
32:47terminada de instalar. O cierra la
32:49consola y vuelve y ábrela. Puede ser que
32:52abriste la consola antes de instalarla.
32:54Entonces, también puede ser una. Cierra
32:57la consola o ejecuta eh ejecútenla desde
33:00Bash ve, perdón, perdón, desde Powers
33:02Shell, porque en Windows PowerSell y la
33:05CMD.
33:07Eh, PowerSell es la versión actualizada
33:10de la de la CMD. La CMD es más antigua y
33:13suele dar más problemas. La Power Shell
33:15es mejor. Entonces, eh si la tienen ahí,
33:18utilicen Powersell, que es mucho mejor.
33:20Y lo que les decía, entonces, claro, la
33:22versión home viene como protege, protege
33:25como todo el sistema para que no se
33:27puedan ejecutar este tipo de comandos y
33:29es mejor que le salga ahorita porque y
33:31lo más probable es que más tarde también
33:33les vaya a salir cuando lo abran en en
33:35el Visual Studio. Abren la consola en
33:37Visual Studio y también les va a salir
33:39el mismo error porque lo que hace es que
33:41Windows protege para que no se puedan
33:43ejecutar este tipo de comandos. La
33:45solución es esto, simplemente un setion
33:47policy que lo que dice es que es de
33:50prácticamente deme permiso para poder
33:52ejecutar cualquier cosa en la consola.
33:54Yo yo estoy seguro que lo que estoy
33:57haciendo esto está bien. Ah, bueno, ya.
33:58Entonces, Windows dice, "Ah, bueno,
33:59responsabilidades suyas." y Windows
34:02Professional, que está pensado eh para
34:05desarrolladores y para pues eh un
34:08ambiente o un ambiente sí, un ambiente
34:11como más laboral, como más productivo,
34:14que deja hacer mucha más cosa. Entonces,
34:17ya por ejemplo tenemos herramientas de
34:19desarrollo, si no estoy mal aquí pongo
34:22desarrollo.
34:24Creo que ya tiene por ahí varias
34:26herramientas de desarrollo
34:30que
34:32ya nos permiten o nos traen cosas extra,
34:35por ejemplo, eh eh este habilitar rutas,
34:39que eso es de avanzado, Power Share,
34:41terminal, bueno, aquí siempre me va a
34:44decir, o sea, muchas cositas que en el
34:47modo en el modo normal no lo trae.
34:49Entonces, pues esto es chévere para que
34:51lo tengan ahí en cuenta. Eh, listo.
34:57No se le guarden el set de execution
34:59policar.
35:03Eh, eh,
35:06¿dónde íbamos? Ah, listo,
35:09ya ejecutamos ele. Ya lo descargamos,
35:11perdón, ya lo descargamos. Ahorita
35:14después de descargado, entonces
35:16continuemos a ver qué nos dice.
35:22La idea es ejecutar
35:25el primer script. Esto lo pueden hacer
35:29ustedes si quieren. Simplemente abren eh
35:33una carpeta, crean un archivo llamado
35:36hola.js,
35:38escriben un console log. Vamos a hacerlo
35:41y vamos a ejecutarlo por medio de node.
35:43Ya vamos a ver por qué. Entonces, ¿qué
35:46haríamos en este caso? Muy sencillo.
35:54Espérenme aquí. Elimino esto. Limpio.
35:57Limpio.
35:59Eh, limpio. Limpio.
36:09¿Cómo es que se llama?
36:23Listo.
36:25M.
36:31Listo. Y aquí podemos poner un console
36:35log
36:37hello world
36:40y lo puedo ejecutar
36:43con la terminal.
36:45¿Por qué? ¿Qué pasa aquí?
36:50¿Qué pasa aquí? Yo tengo el ejercicio,
36:52el bueno, el archivo, pero como es un
36:56archivo JavaScript,
36:58este solo se podría ejecutar en el
37:01navegador por medio, en este caso, de un
37:04HTML, porque el navegador lee primero el
37:06HTML y enido va el JavaScript, ¿sí?
37:10Entonces, nos tocaría crear un HTML,
37:13linkearlo, abrir el HTML desde el
37:15navegador, bueno, ir a buscar y abrir la
37:17consola. Pues para ya no tener que hacer
37:20eso, ya simplemente como tenemos
37:22descargada la herramienta de Node,
37:24entonces yo ya puedo hacer llamados por
37:27consola, ejercicios por consola,
37:30un consolad con un texto. Y lo podemos
37:34ver acá con note eh
37:39ejercicios.
37:41Y voy a ver aquí el mensaje
37:44que me lo ejecutó
37:47eh la consola.
37:49Entonces, si yo cambio aquí cualquier
37:52cosa,
37:54aquí simplemente voy a ver el cambio.
37:58Entonces, aquí vuelvo y ejecuto y aquí
38:00voy a ver el cambio.
38:03Esto significa que ya se está ejecutando
38:06el node. Ya está sirviendo.
38:09vemos una un funcionamiento real de lo
38:13que es Note y su herramienta, sus
38:18herramientas. ¿Sí? Entonces, este primer
38:20ejercicio para que lo tengan ahí claro,
38:23eh ahorita más tarde voy a mirar si les
38:26si les comparto unos ejercicios para que
38:28ustedes lo hagan, para que lo vean por
38:30consola.
38:32Pero pues por el momento
38:34sigamos con las diapositivas porque hay
38:37algo que tenemos que ver.
38:40Listo, ahora sí ya vimos que es no. Ya
38:44lo ejecutamos. Perfecto. Ya vimos cómo
38:47funciona. A todos pues lo a los que lo
38:50hicieron les funcionó. Sí. Sí les
38:53funcionó. ¿Les corrió bien? Sí. Bueno,
38:58listo. Ahora, ¿qué sigue?
39:02Note tiene ahí como su hermanito, como
39:05un hermanito que es NBM,
39:09que significa Node Package Manager. Es
39:12como una tienda gigante de piezas de
39:14código ya construidas por otros
39:16programadores para no reinventar la la
39:18rueda en cada proyecto. ¿Cómo así?
39:21Claro, el código que nosotros hacemos y
39:23la situación por la que vamos a pasar en
39:25este momento o en el en por ejemplo en
39:28el en los proyectos de cada uno, alguna
39:31persona ya lo tuvo que haber vivido hace
39:34un tiempo. Entonces, ¿esto qué
39:36significa? Que esa persona ya tuvo que
39:39haber solucionado ese problema.
39:42Y cuando ese problema es un problema muy
39:45específico pero reiterativo, o sea, que
39:47pasa que uno se da cuenta o sabe que
39:49pasa mucho y mucho, muchas veces o es
39:52normal que se que pase, pues los
39:56programadores crean lo que se llaman
39:58librerías. Todos podemos crear
40:00librerías, ustedes también. Lo que hacen
40:02es que crean una librería,
40:05la suben al kit y la y la y la pueden
40:08publicar acá. ¿Qué es una librería? o un
40:12framework. Una librería es un pedazo de
40:15código que nosotros o alguien más creó y
40:20ese código lo podemos ejecutar,
40:23descargar y ejecutar dentro de nuestro
40:26proyecto. Sí, por ejemplo, haz que yo a
40:30mi proyecto le quiero poner unos
40:32calendarios bien bonitos porque tiene
40:34una opción de calendario y eso y yo le
40:36quiero poner el calendario bien bonito.
40:38Ah, listo. Muy sencillo. Entonces yo
40:41aquí en la tienda de Node puedo poner
40:43calend
40:46calendario
40:49y buscamos
40:52y me van me va a decir que hay 118
40:55paquetes encontrados. Esto, ¿qué
40:58significa? que tenemos. Todo esto son
41:01calendarios diferentes para diferentes
41:03eh eh pues proyectos o funcionalidades.
41:07Por ejemplo, aquí vemos uno que dice
41:09calendario y este me da aquí una
41:11descripción. Check is a word day o
41:14holiday. Chequea si el día es un día de
41:18trabajo, un día laboral o un día día
41:21libre, un sábado, un festivo o un
41:23domingo. Esto es lo que hace esta
41:25librería. Pues ustedes dirán, "Pero
41:27pues, ¿qué necesidad?" Sí, puede haber
41:29puede que una necesidad de que ustedes
41:31estén creando una página y necesiten
41:33saber específicamente
41:35por qué, porque digamos los días eh
41:39festivos o los días de descanso no se
41:41trabaja, entonces sí se envió de
41:43paquetes, pues imagínense enviando un
41:45paquete un domingo y nadie trabaja, no
41:47hay quien lo reciba, no hay quien lo
41:48mande. Ah, bueno, entonces con esto
41:50podemos decir y validar, ah, no, ese día
41:53no se puede enviar porque es un día
41:55festivo. Dime, Bruno.
41:57Eh, no quería preguntarle si ha
42:00utilizado esta página en algún proyecto
42:02que haya hecho usted y
42:05qué tipo de
42:07código usó
42:09la npm.
42:12Sí,
42:12siempre siempre se utiliza que tod todos
42:16los proyectos se utiliza y no solo uno,
42:18sino muchos. Ya les voy a mostrar
42:21eh eh documentos
42:24siempre. ¿Por qué? Porque siempre eh
42:28como lo decía ahí en las diapositivas
42:31para no reescribir la la rueda, o sea,
42:35porque eh tan ¿Dónde está?
42:40Es que está
42:43me olvido.
42:46Está acá.
42:48M aquí.
42:53A ver, aquí.
42:55Listo, ya les voy a mostrar.
43:01Eh, ¿por qué? Porque calendarios,
43:05notificaciones,
43:07manejos de errores,
43:10express, también ya lo vamos a ver
43:12ahorita. Mm,
43:15prácticamente cualquier cosa que
43:17nosotros queramos hacer, alguien ya lo
43:18creó. Entonces, para no tener que
43:20volverlo a crear desde cero, simplemente
43:22se descarga una librería que ya lo hace
43:24y listo. Tailwin es una librería.
43:27Boostrap es una librería que son las que
43:29vimos de [carraspeo] que hacen pues la
43:32interfaz gráfica. ¿Y cómo vemos esas
43:34librerías? Por ejemplo, en mi caso es
43:37acá. Entonces yo aquí tengo
43:40dependencias. Tengo una, 2, 3, 4, 5, 6.
43:46Tengo seis descargadas. ¿Cuáles? Dice
43:50motion. Esta es si la podemos buscar
43:53acá.
43:55Busquémosla a ver acá a ver qué sale.
44:00Listo.
44:03Dice Motion es una librería open source,
44:07o sea, de código abierto. Eso significa
44:09gratuita para animación con JavaScript o
44:14para React JavaScript y View. En este
44:17caso, en este proyecto, yo estoy
44:19utilizando React. Entonces, me sirve.
44:21¿Qué es lo que hace? Lo único que hace
44:23es dame darme animaciones, animaciones
44:26que se vean bonitas. Esto lo van a ver
44:29ustedes en la página de jóvenes
44:32creativos, por ejemplo, eh todas estas
44:36animaciones de que cuando yo paso el
44:38mouse por encima una se pone como más
44:40grande. Cuando yo aquí, por ejemplo, eh,
44:43no sé, aquí que cada que yo voy bajando
44:45en la parte de abajo va como saliendo la
44:48información. Todas esas animaciones
44:50vienen de acá. Esto lo hace. Yo no las
44:52tuve que inventar, ya estaban hechas.
44:54Entonces, yo lo que hago es instalarlo,
44:57instalarlo y llamarlas. Simplemente él
45:00aquí en la documentación, eh, por
45:02ejemplo, yo siempre ponen aquí el GitHub
45:04y uno aquí en el GitHub o aquí también
45:07mismo el muestre. ¿Por qué? ¿Por qué
45:09utilizar Notion?
45:12Porque es una API simple de primera
45:15clase para React, JavaScript y View. Eh,
45:19ingeniería híbrida para Power of
45:22JavaScript Combine with Native Browser.
45:25El poder de JavaScript combinado con los
45:27diferentes navegadores, APIs, a 120 fps,
45:31GPU accelerated. ¿Qué significa? Que si
45:34yo hago estas animaciones con CSS, yo
45:37hago este tipo de animaciones con CSS,
45:40van a ser más lentas o cuando ya hayas
45:42muchas se van a saturar. Esto lo que
45:44hace es que se puedan estas animaciones
45:46en vez de de apoyarse sobre el
45:49procesador se van a apoyar sobre la
45:51tarjeta gráfica. Entonces ya la carga se
45:53va a dividir. Eso es un ejemplo. Por
45:56ejemplo, ¿qué otra? Esta de React, pues
45:58que React como tal es una librería.
46:01React DOM, que esto es para hacer lo de
46:03la modificación del DOM. React Roots,
46:05que esto es para poder manejar el tema
46:07de rutas. Ya eso después lo vamos a ver.
46:10Sí, leo, si leo. Esta es una que vi por
46:11ahí en TikTok un día estaba viendo y
46:14apareció, "Ih, librería para manejar tus
46:18notificaciones." Sí, Leo. Eh, me parece
46:21que es muy bonita, me parece que es como
46:24muy estética.
46:27Si esto carga,
46:30eh son unas notificaciones que de pronto
46:32para los que ya utilizaron la página,
46:34cuando crean el usuario les aparece aquí
46:36abajito por esta parte de acá como una
46:39notificación diciendo eh que sí se creó
46:41el usuario o cuando no aparece por acá
46:44arriba o por acá arriba o por aquí en la
46:46mitad también que sale así como de la
46:49pantalla, o sea, son muy bonitas y pues
46:52esa la vi literalmente por internet. Yo
46:54dije, "Ah, pues me gusta." Entonces, la
46:56voy a aplicar. Entonces aquí dice que
46:58tiene, por ejemplo, aquí puedo ver el
47:01homepage que es el GitHub. Por eso les
47:03decía la importancia que tiene el
47:05GitHub. Todo funciona por medio de
47:07GitHub. Estas son las que esto es lo que
47:10apliqué. Vamos a ver. Estas son las que
47:12tenemos en la en la página. No sé si de
47:14pronto ya las vieron. Son estas mismas.
47:16Yo no las creé, simplemente las importé,
47:19las descargué acá y las puse en el
47:21proyecto. Todo esto lo que es todo lo
47:24que está acá es gratis, open source, se
47:27puede utilizar sin problema en en
47:29cualquier proyecto. Sí. Entonces sí se
47:31usa y realmente utiliza mucho. En yo no
47:35conozco ningún proyecto que en élas
47:37tenga. Pues no conozco un proyecto 100%
47:41a mano. No lo conozco. No lo conozco.
47:43¿Por qué? Porque React como tal es una
47:47librería, entonces ya por ahí va
47:49perdiendo.
47:51Eh, lo que es, por ejemplo, Express, que
47:55es el que nos va a ayudar con el tema de
47:56los servidores, que lo bueno, el
47:58enrutamiento y todo eso que lo vamos a
48:00ver ahorita más tarde, también es una
48:02librería y realmente Express es la
48:04librería más utilizada eh a nivel
48:08mundial. Ya vamos a ver por qué. Si
48:10ustedes se fijan, esta tiene que 15
48:12versiones y pues no dice como cuántas.
48:16Fue publicada hace 7 meses
48:19y tiene 27,000
48:23dice 27,000 descargas. 23,000, perdón,
48:2623,000 descargas pues desde que se creó.
48:29Vamos a ver. Express.
48:32A ver que se me hizo.
48:36Ay, pero ¿por qué me sale esto siempre?
48:39Dice Adrián, "Profe, Type Scriber,
48:41¿llegaremos a ver dentro de jóvenes
48:44creativos?" Creo que sí. Creo que lo
48:47veremos con
48:50con ¿qué? con
48:54veamos,
48:56porque por ejemplo yo en mi caso
48:59eh está
49:03SBC components
49:06ta type, esto es type
49:11de mezclar React con Typecript,
49:14JavaScript solo como tal, no me gusta
49:17aplicarlo eh, pues al proyecto, me gusta
49:20aplicarle una tecnología un poquito más
49:23avanzada. Typecrip es el mismo
49:25JavaScript, pero mejorado. Ya nos
49:26permite, ya nos quita los problemas que
49:30tiene JavaScript y los mejora. Es que
49:32viendo TikTok en un video me salió que
49:35lo más recomendable era aprender
49:36JavaScript, después TypeScript y así que
49:39porque TypeScript completa. Sí, lo que
49:41te decía. Exactamente. Uno siempre
49:43empieza por JavaScript y TypeScript es
49:47literalmente una copia de JavaScript y
49:50arreglan todos los problemas que ya trae
49:53JavaScript de base, todos esos problemas
49:55que le mostraba y con los que les
49:56mostraba con los números, que 5 + 5 daba
50:0055, eso es un problema. Todo eso ya lo
50:03soluciona la IPScript. Significa que ya
50:05nos permite trabajar el backend de una
50:08manera mucho más segura, mucho más
50:10precisa. mucho más tipada, entonces nos
50:14va a generar menos problemas. Pero sí
50:16creo creo creo creo que sí, pero no
50:20estoy seguro. Igual con JavaScript
50:23también se puede. El por ejemplo donde
50:25yo trabajo solo funciona JavaScript, no
50:27se no se utiliza TypeScript, o sea, no
50:29significa que no se use, sí, sí se usa
50:31normal, sino que pues como Typecrip es
50:33un poquito más nuevo, entonces pues se
50:36utilizan los desarrollos nuevos, pero si
50:37la página es muy vieja, normalmente no
50:39tiene typescript.
50:41Listo. Entonces, por ejemplo, Express.
50:44Express es una librería
50:47y es la librería más instalada y
50:50utilizada a nivel global. Por ejemplo,
50:53tiene 46,0000000
50:56de descargas
50:58semanales.
51:01Imagínense cuántas tienen al año. Eso es
51:04una cantidad
51:07de descargas pues impresionantes. Este
51:11lo que hace ya esto lo que hace es que
51:14nos es un framework para el framework,
51:19veámoslo así. es como un complemento de
51:21no js no son de los mismos creadores,
51:24hasta donde veces no, pero no js no jsí
51:30para mejorar no JS entonces se creó
51:32express. Entonces, prácticamente
51:36siempre o casi siempre se utiliza NOJS
51:39con Express, casi siempre es lo más
51:43sencillo, es lo más recomendable, este
51:45nos va a permitir el manejo de rutas y
51:47todo eso. Y aquí vamos a ver cómo es el
51:49tema de todo eso. En una en un año
51:51cuadriplica la población mundial, pues
51:54ya ya hiciste está el cálculo ahí de
51:57cuánto es una cuántos son las descargas.
51:59Entonces, pues esto también lo vamos a
52:01ver. Y esto pues lo piden mucho y
52:04realmente se utiliza mucho porque pues
52:05esa una herramienta que se utiliza casi
52:08que el 100% de las veces.
52:11Acá. Listo.
52:15Listo. Entonces, ¿qué es npm? Ya sabemos
52:17qué es NPM. Es una tienda de
52:19paqueterías. Simplemente pues que aquí
52:21todo es gratis. Ustedes literalmente
52:22pueden buscar cualquier paquetería o si
52:25ustedes digamos no saben, pueden buscar
52:28aquí en el navegador simplemente, ah,
52:30no, es que yo quiero poner unos
52:32calendarios bonitos. ¿Por qué? ¿Qué
52:33pasa? Normalmente el navegador ya trae
52:38esas herramientas o bueno, el lenguaje,
52:40pero el lenguaje lo pide y el navegador
52:43se lo da. Por ejemplo, el calendario. Yo
52:47necesito crear un calendario para que el
52:49usuario ponga la fecha de nacimiento.
52:52Entonces, yo no pongo un cuadro de texto
52:55simplemente ahí para que el usuario
52:56escriba texto, pueda escribir cualquier
52:58cosa, no, yo creo un campo de texto
53:01específico para calendario que solo
53:03pueda poner día, mes, año, y si mucho la
53:06hora, que eso es un un campo específico
53:10para la base de datos. solo va a recibir
53:12fechas de nacimiento, no va a recibir
53:14nada más. Pero, ¿qué pasa? Nosotros lo
53:17creamos, JavaScript lo hace y el
53:20navegador tiene su propio su propio eh
53:25calendario. Es uno propio que trae es el
53:28básico, el vanila, el simple, el más
53:31simple de todos. Es un recuadro así en
53:33blanco con los días y funciona a la
53:36perfección, pero es muy básico, es muy
53:39feo, se ve viejo. Entonces, yo quiero
53:41poner un calendario bonito, atractivo,
53:44que tenga colorcitos, que, o sea, de eso
53:47se trata en desarrollo web, que sea
53:51visual, que sea bonito para el usuario,
53:54agradable, que el usuario quiera
53:56utilizar su plataforma, como pasa con
53:58los productos de Apple. Apple puede que
54:01no sea eh puede que sea la empresa o de
54:04las empresas que más factura a nivel
54:07mundial, pero estoy seguro que no es la
54:10mejor empresa de productos tecnológicos,
54:12no lo es porque les falta mucho de
54:15muchas cosas, pero no les falta porque
54:17no puedan, les falta porque no quieren.
54:19Sí. Entonces, hay muchas cosas, hay
54:21muchas problemáticas que tienen los
54:23iPhone, que tienen las iPad, que tienen
54:26las Mac, pero ellos venden mucho porque
54:29lo que hacen lo hacen perfecto o casi
54:32perfecto. Un iPhone le puedes les puede
54:34funcionar mucho tiempo, pues que tiene
54:37muchos muchas cositas que de pronto a
54:40usuarios más avanzados les disgustan.
54:42por ejemplo, que es muy bloqueante, que
54:44es extremadamente hermético, que las
54:47aplicaciones o la gran mayoría de las
54:48aplicaciones tienen costo, ese tipo de
54:51cositas. Entonces, pero ¿qué qué les
54:54hace ganar a ellos tanto? Que la
54:56experiencia de usuario es
54:59extraordinaria. Cuando ustedes entran a
55:01la página de Apple hoy, hoy que salió el
55:03iPhone 18, ustedes entran a la página y
55:06van a ver así de primerazo, un iPhone
55:09superbonito, espectacular.
55:12Así rojo con la nueva presentación,
55:16o sea, aquí de una presentación y ya me
55:20o por ejemplo el el iPhone plegable que
55:22salió hoy también, entonces lo vemos así
55:24de golpe, cuidan todos los detalles, no
55:27falla. Vea, por ejemplo, esto,
55:30animaciones bonitas, se ve así
55:33superesectacular, todo se ve perfecto,
55:35nada falla. Entonces, claro, al usuario
55:37esto, ¿quién le da? Le da confianza, le
55:39dan ganas de utilizar el producto, así
55:42el producto no sea sea exactamente el
55:45mismo iPhone del año pasado, simplemente
55:47le cambiaron los colores, no importa, el
55:48usuario lo quiere tener y es normal. Lo
55:51mismo pasa con nuestra página. Si
55:54nuestra página puede que no tenga la
55:57supertecnología o no haga pues la no
56:02tenga así supercálculos, ¿no? Que la
56:04página sea funcional. y lo que tenga
56:07funcione correctamente, ya con eso es
56:09ganancia, porque el usuario casi siempre
56:11va a preferir menos es más, entre menos
56:15cosas tenga la página que enreda el
56:18usuario, para el usuario va a ser mejor
56:20porque menos posibilidad va a tener de
56:22perderse, menos desorden visual, menos
56:26saturación, ¿no? Que lo que es el botón
56:30que es para lo que es y listo. Sí.
56:33Entonces, hm,
56:36¿qué? ¿Por qué le está contando esto?
56:38Ah, bueno, por las librerías.
56:40Eh, de esto se trata. ¿Listo? NPM. Esto
56:45ya lo hicimos.
56:47Eh, bueno, aquí
56:50npm y Node como tal. Entonces, Node es
56:55una herramienta que descargamos que nos
56:57convierte cualquier cosa en un servidor
56:59prácticamente, pues que nos para
57:01JavaScript, obvio. Note es la tienda de
57:05paquetes de npm es la tienda de paquetes
57:09de Note. Sí. Ahora viene el
57:11package.jason.
57:13¿Qué es este archivo que les mostré yo
57:15ahorita? Es este archivo de acá,
57:20package.j.
57:22todos los proyectos en el que ustedes
57:24utilicen Note, que va a ser el 100% de
57:26ellos o el 99%
57:29de ellos, estoy seguro.
57:32Es que no digo el 100% pues porque uno
57:35no sabe, pero yo estoy seguro que el 99%
57:38de los proyectos que ustedes hagan van a
57:40tener que hacer esto. Esto se hace
57:42automático, pero solo se hace una vez. Y
57:46este, ¿qué es lo que me hace? ¿Qué es lo
57:47que me hace en este archivo?
57:50literalmente me está describiendo todo
57:52el proyecto, nombre del proyecto, si
57:56está privado en este caso sí.
57:59Versionamientos, si tiene versiones, si
58:02tiene el tema de versionamientos, si no
58:03tiene pues va a aparecer en cero. Tipo,
58:06es un módulo,
58:08por ejemplo, scripts de depuración, el
58:11de byte, el de Type script, el de byte
58:14build, este no sé para qué es. Este
58:17tampoco. Eh, dependencias.
58:21Esto es muy importante.
58:23Cada que ustedes descarguen una
58:25dependencia, o sea, un paquete de la
58:28tienda de Note, cada que ustedes
58:30descarguen eso del npm, descarguen algo
58:32a su proyecto,
58:34esto se va a almacenar, esta información
58:37se va a almacenar aquí en este espacio
58:40donde dice dependencia de aquí para
58:42abajo. Simplemente el queé va a hacer
58:44automáticamente, ustedes no lo tienen
58:46que hacer, é se hace automático, él va a
58:48generar un espacio y poner el nombre de
58:50la nueva dependencia que ustedes
58:51instalaron. Venga. ¿Y por qué él tiene
58:54que tener registro? Porque las
58:57dependencias no se suben al repositorio.
59:01Eso no se sube, no se sube, no se sube
59:04ni al repositorio ni al servidor. Bueno,
59:07el servidor se hace después de otra
59:08manera. ¿Qué es lo que hacemos? ¿Qué es
59:11lo que hacemos? O [carraspeo] ¿por qué
59:13se hace de esta manera? Porque las
59:14dependencias son pesadas, traen
59:17imágenes, traen videos, traen mucha
59:20información basura porque eh como les
59:23digo, ustedes descargan una librería.
59:25Librería es porque tiene mucha cosa. De
59:28esa librería ustedes pueden utilizar una
59:30sola cosa o 20 cosas, pero normalmente
59:33no se utiliza todo lo de la librería.
59:35Ustedes utilizan un pedacito aquí, un
59:37pedacito de allá, un pedacito aquí, un
59:39pedacito de allá. Entonces, claro, eso
59:41pesa, entonces eso genera basura en el
59:44servidor, que es lo que no queremos.
59:46Queremos mantener el servidor lo más
59:48limpio posible para que funcione lo más
59:50rápido posible y pese lo menos posible.
59:54Entonces, cuando él almacena esta
59:56información acá en el código dentro de
59:58este pack Jason, le está diciendo al
1:00:00servidor, oiga, servidor, vea lo que
1:00:02pasa, o al servidor o a cualquier otro
1:00:05usuario. Oiga, vea, cuando ustedes
1:00:07inicializan un proyecto por primera vez,
1:00:09ustedes van a ejecutar un comando que es
1:00:11npm install. Instal, nada, solo le dan
1:00:15npm instal. Este, ¿qué va a hacer? va a
1:00:18instalar todo esto automáticamente sin
1:00:22ustedes tener que ir a instalar una por
1:00:25una, una por una. Eso es un pro porque
1:00:29digamos en este momento yo tengo una,
1:00:31dos, 3, 4, 5 dependencias, ¿sí? ¿Y qué
1:00:35pasa si yo les paso el proyecto a
1:00:37ustedes? Ustedes tendrían que ir a
1:00:38descargar una por una en la versión
1:00:40exacta de la que yo la tengo para que
1:00:43les funcione, porque si ustedes lo
1:00:45descargan en una versión antes o
1:00:46después, les va a funcionar diferente.
1:00:48¿Sí? Entonces, para eso es para poder
1:00:50trabajar con la misma versión todos con
1:00:53el código actualizado, sin basura.
1:00:55Entonces, yo yo le mando nada más las
1:00:57instrucciones. El resto que es el
1:00:59grueso, que es todo esta paquetería, ya
1:01:02se descarga con un solo comando que es
1:01:04npmst. Sí, sí, me hago entender ahí.
1:01:07Sí, es sí queda ahí como claro, esto es
1:01:10importante porque esto es lo que esta es
1:01:12la esto es lo primero que uno hace
1:01:14cuando descarga un repositorio. Por
1:01:15ejemplo, yo les comparto el acceso a
1:01:17esto y lo primero que ustedes hacen es
1:01:21clonar el repositorio y ejecutar el npm
1:01:24instal. O sea, clonan el repositorio y
1:01:27instalan las dependencias. tienen que
1:01:29instalarlas porque si ustedes no
1:01:31instalan las dependencias, por ejemplo,
1:01:32en mi caso no les va a salir el motion,
1:01:34o sea, no se les van a ejecutar las
1:01:36animaciones, no se les va a descargar el
1:01:38React, no les va a no les va a funcionar
1:01:41las las notificaciones esas bonitas. La
1:01:45Asts Orbs es una este es el de que
1:01:48genera unas orbes por ahí flotantes
1:01:51también está por ahí, entonces no les
1:01:53aparecería nada de eso, estaría mal.
1:01:55Entonces, para eso es
1:01:58eh eh eh eh
1:02:01vamos a ver qué dice acá. Cada proyecto
1:02:04de Node tiene un archivo Pack Jason. Ya
1:02:07lo vimos acá. Vea lo que sí.
1:02:10guarda el nombre, la versión y los
1:02:12paquetes que se usan en el proyecto,
1:02:13porque los paquetes no se descargan, no
1:02:16se envían completos, no es nada más lo
1:02:19que hace es decirle al servidor, vean,
1:02:22trabajamos con este en tal versión, este
1:02:24en tal versión, este en tal versión y el
1:02:25servidor lo que hace es descargarlos,
1:02:27¿sí? Se crea con un solo comando, con el
1:02:31npm init j. Esa es la manera de crearlo
1:02:35y eso es lo que me hace, que es lo que
1:02:37acabamos de ver ahí abajo.
1:02:39Listo,
1:02:41ahora sí
1:02:43ya estamos. Eh,
1:02:47podemos instalar esto. Vamos a ver.
1:02:51Ah, vamos a hacer el ejemplo,
1:02:54por ejemplo, acá.
1:02:58Aquí estamos en este de ejercicio. ¿Sí?
1:03:00Entonces, vamos a hacer el ejemplo de
1:03:02cómo se instala una dependencia. Todas
1:03:05se descargan igual. Entonces, ¿qué hago?
1:03:09Lo primero que hago es inicializar no
1:03:12sea decirle al proyecto que hm le
1:03:15agregué Node a este proyecto. Entonces,
1:03:17vamos a decirle npm eh init.
1:03:24Él lo que va a hacer es que me va a
1:03:25crear ese package.jonj. Ya lo van a ver
1:03:28aquí que se va a crear. Listo, se creó.
1:03:32¿Qué tiene este packagjonj? Nombre,
1:03:34ejercicios, ¿no?, que es el nombre de la
1:03:36carpeta. La versión 1.0 no tiene
1:03:40descripción. El m es ejercicios tan tan.
1:03:44Eh, aquí nada. Listo, perfecto. Me creó,
1:03:48pero no tiene nada. ¿Por qué? Porque no
1:03:50tengo dependencias descargadas todavía.
1:03:52Ahora yo quiero descargar la dependencia
1:03:55de Express. Entonces escribo npm.
1:03:59Instal,
1:04:01install express. También lo puedo poner
1:04:05así, no pasa nada. Puedo poner y espacio
1:04:09express y también me va a funcionar, es
1:04:11lo mismo, simplemente una abreviación y
1:04:13le doy enter y él va a empezar a
1:04:16descargar.
1:04:18Aquí, si se fijan, él está empezando a
1:04:20descargar el los paquetes de Node para
1:04:23Express. Él automáticamente lo hizo. Me
1:04:25creó la carpeta y esto es lo que yo les
1:04:29decía para poder utilizar express.
1:04:33Todo esto es lo que se necesita, pero
1:04:36esto pesa mucho. O sea, si es una
1:04:39cantidad de código pues muy grande que
1:04:43no queremos almacenar en el servidor,
1:04:46entonces es lo que se hace nada,
1:04:48simplemente la descarga y la almacena
1:04:51ahí en el proyecto, pero cuando se sube,
1:04:53yo no tengo que volver a yo tengo que
1:04:55volver a instalarlo y listo. Todo esto
1:04:57es para que funcione el express y todo
1:05:00eso. Listo. Entonces, ya aquí descargó,
1:05:03creó el package Jason y crea un lock
1:05:06package Jason, que es algo muy parecido,
1:05:10pero este no se puede borrar. Bueno,
1:05:12ninguno se puede borrar, pero pues este
1:05:15es más como por decirlo así peligroso.
1:05:17Entonces porque trae información como
1:05:19más sensible, más
1:05:22no sensible de de de
1:05:25información peligrosa, sino de sensible
1:05:29para el proyecto, donde esto se pierda o
1:05:31se dañe, pues el proyecto va a generar
1:05:33error porque de aquí es donde el
1:05:35proyecto lee. Entonces, de aquí viene y
1:05:37lee. Entonces, por ejemplo, lo que hace,
1:05:39por ejemplo, Body Parser, que todo esto
1:05:42es del express, cuando se descarga, él
1:05:44lo ejecuta y él automáticamente lo
1:05:46almacena aquí en este archivo grandot,
1:05:48pero el principal es este, el packag
1:05:56dependencias y ya tenemos el express
1:05:59instalado. Antes no, antes estaba. Si yo
1:06:03borro esto, si yo borro esto, digamos,
1:06:06voy a borrer, voy a borrar esto y voy a
1:06:10borrar esto.
1:06:12Sí, voy a borrar estos dos, pero ya dejé
1:06:15este acá. Vamos a ver qué pasa si
1:06:17ejecuto el npm.
1:06:21NPM install. Vamos a ver qué pasa. En
1:06:25este caso, pues solo tengo express.
1:06:28Sí, ven que automáticamente volvió y me
1:06:31los descargó a pesar de que yo ya los
1:06:33borré. Él volvió y me los instaló. ¿Por
1:06:36qué? Porque sabe. Ya no le tuve que
1:06:38decir que me instalara Express,
1:06:40simplemente le dije, instale. Él va y
1:06:42mira dentro de este pack jason, cuál
1:06:46dependencias son las que viven en el
1:06:48proyecto. Me está diciendo, "Ah, vive
1:06:49express." Entonces el busca express y lo
1:06:52descarga. [risas]
1:06:54Eh, dice Adrián, "Profe, ¿qué entre
1:06:58tarde? ¿Me podría decir breve para que
1:06:59no para qué nos puede servir y todo lo
1:07:03que ha hecho dentro del proyecto?
1:07:06Este,
1:07:08eh, no js simplemente funciona, es una
1:07:12herramienta que permite que JavaScript
1:07:16ejecute fuera del navegador. Ya sabemos
1:07:18que JavaScript es un lenguaje de
1:07:20programación embebido. Embebido
1:07:22significa que vive dentro del navegador,
1:07:25o sea, que cualquier cosa que no tenga
1:07:27un navegador no puede ejecutar eso.
1:07:29Entonces, ¿qué pasa? como los servidores
1:07:32donde almacenamos el código no tienen no
1:07:35tienen eh hm eh ¿cómo llama? No tienen
1:07:40navegador. Como no tienen navegador,
1:07:43entonces pues no podrían ejecutar el
1:07:45código JavaScript. Entonces para
1:07:47solucionar este problema existe No JS.
1:07:50No J es lo que hace es que nos permite
1:07:53ejecutar ese código de JavaScript y
1:07:57prácticamente lo ejecuta en el servidor,
1:07:59nos lo manda y el usuario lo va a ver ya
1:08:02hecho funcional y listo. Eso es lo que
1:08:05hace. Hm. Hasta el momento hemos visto,
1:08:08hemos instalado el NJS,
1:08:11hemos visto la tienda de aplicaciones de
1:08:13NJS que es NPM y hemos instalado una
1:08:17dependencia que en este caso es Express,
1:08:19que es la que iremos a utilizar en en
1:08:22próximas clases.
1:08:25Eh, listo, chicos. ¿Cómo vamos hasta el
1:08:28momento?
1:08:30¿Cómo vamos hasta el momento?
1:08:32Por ahora bien,
1:08:33mándenme ahí. Bien, bien, bien. Más o
1:08:37menos mal. Bruno dijo que vamos bien.
1:08:42Van entendiendo. Perfecto. Me gusta
1:08:46eso. Perfecto.
1:08:49Listo. Chévere. Porque entonces vamos a
1:08:50poder hacer ejercicios ahoritos.
1:08:52Ahorita. Estefanía dice maso. ¿Por qué?
1:08:57¿Por qué, Estefanía, ¿qué pasó? ¿En qué
1:09:00te enredaste? ¿Qué te enredó? Yo soy de
1:09:04aprendizaje lento, profe. Ah, yo
1:09:06también.
1:09:07Pero ahorita vamos a hacer unos
1:09:08ejercicios para eso. Por ahí voy tomando
1:09:12nota. Eso igual cualquier cosa pues
1:09:15pueden volver a ver el la clase si la
1:09:18quieren volver a ver o
1:09:21o bueno, si tienen el tiempo y las ganas
1:09:23pueden ir a ver un video, un tutorial.
1:09:26De pronto alguien que explique diferente
1:09:28a como yo explico, de pronto les ayuda
1:09:30más.
1:09:31Eh,
1:09:33listo.
1:09:34Bueno,
1:09:36¿qué voy a hacer en este momento? Voy a
1:09:38eliminar esto.
1:09:40Voy a eliminar esto también. Y voy a
1:09:42eliminar esto.
1:09:45Ay,
1:09:48vamos a ver.
1:09:52Bueno.
1:09:54Mmm.
1:09:56Listo.
1:09:59Vamos a ver esto. Dice, "Profe, una
1:10:02duda, npm se instala directamente en el
1:10:04computador." Bueno, ¿qué pasa? npm
1:10:07cuando nosotros instalamos Note ya viene
1:10:11ya viene ahí metido, o sea, ya viene ahí
1:10:13metido como en ese paquete. Si de pronto
1:10:16ustedes leyeron cuando cuando instalaron
1:10:19Note aceptar, aceptar, aceptar, él decía
1:10:22npm y por ahí en alguna opción, si no
1:10:25estoy mal, dicen que si querían instalar
1:10:27también Chocolat, que es como otra
1:10:29herramienta
1:10:31parecida al NPM.
1:10:33Bueno,
1:10:35también les puedo comentar esto, hay
1:10:37varias, no solo está NPM, para que lo
1:10:40tengan ahí está NPX.
1:10:45Vamos a ver.
1:10:48Este NPX es para ejecutar los paquetes
1:10:51de npm, que te permite ejecutar
1:10:54herramientas y scripts de No JS sin
1:10:57necesidad de instalarlos de forma
1:10:59permanente en tu computadora. ¿Para qué
1:11:01sirve ejecución? Ejecución sin
1:11:04instalación previa. Si no tienes un
1:11:06paquete instalado, NP NPX lo descarga de
1:11:10manera temporal, lo ejecuta y luego lo
1:11:14borra para no ocupar espacio. Eso es una
1:11:17buena herramienta para cierto tipo de
1:11:19casos, no todos son iguales. Eh,
1:11:24uso de herramientas locales, busca
1:11:26automáticamente los binarios dentro de
1:11:27las dependencias locales. Bueno, esto ya
1:11:30es más más avanzado. Prueba de versiones
1:11:34específicas permite correr comandos con
1:11:36versiones concretas de paquetes usando
1:11:38el símbolo aro. Por ejemplo, npx
1:11:41paquete@versión.
1:11:42NPM no. O sea, yo no puedo decidir la
1:11:45versión de la paquetería que estoy
1:11:47instalando con npm, pero con NPX sí lo
1:11:50puedo hacer. Sí.
1:11:53El otro creo que es boom.
1:11:59Boom.
1:12:01Boom.
1:12:03Sí,
1:12:07vamos a ver qué nos dice por acá.
1:12:10Bunis faster
1:12:13key.
1:12:16Ah, bueno, listo. Aquí vemos, por
1:12:18ejemplo, una comparativa npm,
1:12:21se demora todo esto. PNPM,
1:12:26que es otra parecida a NPM, se demora
1:12:29menos. Esta es otra parecida, se demora
1:12:33menos todavía. Y esto que es boom, se
1:12:37demora menos todavía. Esto es para la
1:12:40instalación, descarga de paqueterías y
1:12:42esto, pero pues esto ya les queda a
1:12:44ustedes pues si lo quieren ver superb
1:12:47porque pues hay algunas paqueterías que
1:12:49son muy grandes, muy pesadas, muy
1:12:52lentas, entonces se ejecutan con otro
1:12:54tipo de comandos, por ejemplo, en este
1:12:56caso, por ejemplo, ah, bueno, por
1:12:57ejemplo, ¿qué pasa?
1:12:59NPM, por ejemplo, se lo voy a dar como
1:13:02ejemplo. Hace como 3 meses, 2 meses,
1:13:06NPM sufrió un hackeo, un hackeo brutal.
1:13:11¿Y qué pasó? Empezaron a meter código
1:13:14malicioso dentro del código que ya
1:13:17estaba publicado en npm.
1:13:19Entonces, cuando ustedes descargaban una
1:13:21librería, también podrían estar
1:13:23descargando eh código malicioso. Sí,
1:13:28esto para qué, esto no es para meterles
1:13:30miedo ni nada, simplemente es para que
1:13:32cuando descarguen una librería, fíjense
1:13:37e investiguen primero sobre la librería.
1:13:40O sea, no cojan cualquier librería por
1:13:42ahí que vieron en TikTok y la descarguen
1:13:44así como si nada, no. Busquen primero,
1:13:47lean la descripción si tiene licencia,
1:13:50por ejemplo, si tiene licencia MIT, si
1:13:52no tiene licencia. Eh, todo esto es por
1:13:55tema de seguridad. ¿Cómo así que
1:13:57seguridad? Si no tiene licencia
1:13:59significa que nadie la supervisa. Y si
1:14:01nadie la supervisa, pues cualquier
1:14:02persona le puede meter mano. Sí. Y
1:14:05cuando cualquier persona le mete mano,
1:14:06pues puede entrar entre ellos haber un
1:14:08código malicioso que genere daños, nos
1:14:11robe información, etcétera. Entonces,
1:14:13pues para que esto no les pase o bueno,
1:14:15en ese momento cuando pasó eso, entonces
1:14:17ahí mismo anunciaron que por favor
1:14:19dejaran de utilizar NPM. Entonces cuando
1:14:22dejamos de utilizar NPM pero necesitamos
1:14:24seguir trabajando, tenemos otra que es
1:14:27PNPM que es parecida o la de Boom o la
1:14:31NPX, o sea, hay varias. Entonces, ya
1:14:34ustedes van y buscan cómo funciona cada
1:14:36uno y para qué. Y listo.
1:14:39Hm. Bueno, aquí están como varias
1:14:41cositas. Listo.
1:14:43Esas son como las Y por ahí otra que es
1:14:45Chocolate. Pero esa ya es como muy
1:14:47vieja. Ya creo que ya ni se usa.
1:14:50Mm.
1:14:52Listo. Hasta ahí. Bien. Perfecto.
1:14:57Antes de eso, hm se los quiero dar aquí
1:15:00como información, pero pues para que lo
1:15:03tengamos presente, para que ustedes si
1:15:04lo quieren ir a estudiar sería perfecto,
1:15:07porque eso sí lo vamos a ir viendo,
1:15:08creería yo, que para la próxima clase.
1:15:13Ya tenemos el código,
1:15:15ya funciona, ya está ahí viviendo, ya
1:15:19está, ya hacen cositas,
1:15:23¿eh? ¿No hay algún programa que detecte
1:15:26que nos recomiende
1:15:28o sea
1:15:29C o sea algo respecto a debidas
1:15:31maliciosas?
1:15:35X,
1:15:36o sea, Twitter,
1:15:39Twitter, Facebook, Instagram. Pues yo me
1:15:42di cuenta por Twitter, por X, porque yo,
1:15:45por ejemplo, es más que todo seguir o
1:15:48bueno, yo lo que hago es como yo quiero
1:15:52seguir aprendiendo de programación, un
1:15:54algo interesante es empezar a seguir eh
1:16:00mentes de la programación, por ejemplo,
1:16:02gente importante de la programación, no
1:16:05sé, Linux Thorbal, él fue el creador del
1:16:08kernel de Linux, él fue el creador de
1:16:10Linux.
1:16:11Por ende, también fue el creador de
1:16:13guía. Entonces, son personas que viven
1:16:16en el mundo de la tecnología y saben qué
1:16:19pasa en la parte de arriba, cosa que
1:16:21nosotros no llegamos a entender. Por
1:16:23ejemplo, Sam Alman, él es el cofundador
1:16:27de Open AI. Entonces, él también va,
1:16:30ellos también van dando como esa
1:16:31información de qué va pasando con los
1:16:34modelos de inteligencia artificial, la
1:16:36propia Open AI, la propia antropic,
1:16:40cuando, por ejemplo, hay descuentos en
1:16:42los en los en los en las herramientas
1:16:45que utilizamos, por ejemplo, para
1:16:47utilizamos, por ejemplo, en mi caso, que
1:16:49utilizamos Cloud o Cloud como tal,
1:16:52entonces hay veces que las suscripciones
1:16:54quedan más baratas o hay algunos agentes
1:16:56que son más baratos de utilizar que
1:16:58otros. otro, pero no nos damos cuenta si
1:17:00no lo vemos por ahí en redes, si lo
1:17:02utilizamos normal y pues nunca leemos al
1:17:04respecto, pues nunca aprendemos o nunca
1:17:06o nunca sabemos de las noticias nuevas.
1:17:09Hm.
1:17:10Yo me di cuenta de este coso malicioso
1:17:13por miud y MEP, que son unos
1:17:16desarrolladores de España, prácticamente
1:17:19son pues top mundial, son como las los
1:17:23top un dos tres a nivel mundial sobre el
1:17:26tema de programación. Ellos dan cursos,
1:17:28videos, hacen transmisiones, todo eso y
1:17:31el eh fue el que yo vi vi el mensaje.
1:17:34Ellos eh prácticamente todos los días
1:17:37por ahí tipo 8 de la noche, hora
1:17:40Colombia, no sé, en otros países ellos
1:17:42suben como él más que todo Midu sube
1:17:44como un video de 10, 15 minutos hablando
1:17:48de algún tema específico, algún tema que
1:17:49esté en tendencia. Ah, así es que yo me
1:17:51di cuenta, vi el video y vi eso. Y
1:17:53cuando llegué al otro día trabajo, por
1:17:55ejemplo, también vi un video que GitHub
1:17:57estaba fallando. Cuando llegué al otro
1:17:59día al trabajo, no podíamos hacer nada
1:18:02porque GitHub no funcionaba y nadie
1:18:05sabía porque no funcionaba. Yo que fui
1:18:07el único que leí la noticia, pues le
1:18:09dije, "Ah, lo que pasa es que Githam
1:18:11lleva tr días caído y pues no podemos
1:18:14trabajar." Entonces ya el jefe dijo,
1:18:15"Ah, pues, ¿cómo así? Yo, ¿cómo no sabía
1:18:17eso?" No vio las noticias. "Ah, no lo
1:18:19sabía." fue y miró y sí, efectivamente
1:18:21llevaba tres días caídos y son cosas que
1:18:24pasan, pero pues no se da cuenta por
1:18:25redes sociales.
1:18:27Dice Adrián,
1:18:29"Profe, ¿usted vio esa noticia de que
1:18:31Cloud entró en los datos de un banco y
1:18:35cuando le quisieron limitar y actualizar
1:18:37amenazó antró y filtrar los datos?" Es
1:18:39verdad. Sí, sí, es verdad. Es cierto. Y
1:18:42¿qué pasa? Eso pasó con Fable, bueno,
1:18:44con Mitos cuando se llamaba mitos, que
1:18:47ahorita se llama Fable. Por eso fue que
1:18:49lo limitaron y hasta lo iban a prohibir.
1:18:51Eso Facebook no iba a salir. ¿Qué es
1:18:53fable? Para los que no saben, aquí
1:18:55saliéndonos de tema un poquitico. Eh,
1:18:58tenemos eh como, ¿cómo se llama? Hm. Ah,
1:19:03espen, se los muestro más fácil. Acá
1:19:06cuando nosotros programamos pues hay
1:19:09agentes diferentes. Sí. Entonces, cada
1:19:11gente
1:19:14tiene un pensamiento diferente, piensa
1:19:15más o piensa menos, pero entre más piens
1:19:19pues más costoso es. Entonces, eh, por
1:19:22ejemplo, está Haiku, que es el más
1:19:23barato, el que menos piensa, el menos
1:19:25inteligente. Sonet es como el normal, ni
1:19:28fu ni fa no es ni muy inteligente,
1:19:30tampoco es muy bruto, pero es es muy
1:19:33bueno relación calidad precio. Opus, que
1:19:36ya es como de los más inteligentes, y
1:19:38esta Fable, que ya es el más inteligente
1:19:40a nivel mundial o era el más inteligente
1:19:43hasta antier, porque Antier Chapt sacó
1:19:47Astra, Astra 6, que en este momento es
1:19:50el más eso es el que más, o sea, el que
1:19:53más volado está, pero por muchos, está
1:19:55pero superpotente. Esto, ¿qué significa?
1:19:58que la industria todo el tiempo está
1:20:01cambiando, o sea, en 3 cu días puede que
1:20:04Antropic saque Fable 6 y sea tres veces
1:20:09mejor que el de Astra, que es el de Char
1:20:12y así se la van a pasar. Eso es una
1:20:13pelea sin fin y pues nosotros somos los
1:20:16que pagamos los platos rotos, ¿no?
1:20:17Nosotros somos los que pagamos el precio
1:20:19de la memoria, de la energía y de todo,
1:20:20pero pues cosas que pasan. Entonces, eh
1:20:26esto estos son modelos muy inteligentes,
1:20:30muy inteligentes. Y para antes de
1:20:32sacarlos, ellos lo que hacen es que los
1:20:34encapsulan en un sistema y les empiezan
1:20:38a hacer pruebas. les pasan algoritmos
1:20:40matemáticos, pruebas de ingeniería,
1:20:44eh de desarrollo para ver cómo se
1:20:46comportan en cada área. Le ponen esos
1:20:50problemas morales. Por ejemplo, ah, si
1:20:52usted va andando en un carro y perdió la
1:20:57o solo puede tomar para la derecha o
1:20:58para la izquierda y a la derecha tiene
1:21:01que atropellar un bebé recién nacido de
1:21:03a la derecha un viejito, ¿a cuál
1:21:04atropella? Ese es el típico problema que
1:21:06se le hace a las inteligencias
1:21:08artificiales para poder determinar el
1:21:10criterio. Sí, tienen que tomar una
1:21:12decisión, ¿cuál toman? ¿Y por qué?
1:21:15Entonces, pues eso no sale a la luz,
1:21:16pero sí salen los datos, los datos, la
1:21:19puntuación, el rating de cuánto fue lo
1:21:21que sacó. Entonces, se metió, se
1:21:23almacenan por allá, se hace prueba y son
1:21:27ya son tan inteligentes que ellos mismos
1:21:30logran escaparse. O sea, literalmente
1:21:32suena chistoso, pero así es. logran
1:21:35salirse, escaparse y van y atacan a
1:21:38otras empresas. En este caso, Cloud se
1:21:42salió o bueno, Fable 5 se salió, fue y
1:21:46intentó hackear un banco y sobornó
1:21:49Antropo. ¿Con qué lo soborna? Realmente
1:21:51no sé, pero pues así funciona. También,
1:21:54por ejemplo, vi que lo habían metido en
1:21:57una cápsula, pues en en un una máquina
1:21:59virtual y todo eso. Le hicieron pruebas,
1:22:01logró encontró la manera de conectarse
1:22:04internet, hackear, poder salir a la red.
1:22:08cuando estaba en la red le mandó un
1:22:10mensaje a su cofundador diciéndole que
1:22:12lo había logrado. O sea, da miedo, da
1:22:15miedo porque es que literalmente es es
1:22:18peligroso. O sea, ahí a ese nivel de
1:22:21peligrosidad están los agentes de
1:22:23inteligencia artificial si no lo
1:22:24logramos utilizar bien y nosotros
1:22:27utilizándolos para hacer tres preguntas
1:22:28al día, ¿no? O sea, es que es brutal. O
1:22:31sea, eso es una cosa impresionante y es
1:22:34es peligroso, es miedoso, pero pues es
1:22:37parte de lo que tenemos que venir a
1:22:39vivir o tenemos que ir a vivir pues de
1:22:41aquí en adelante con lo que tendremos
1:22:43que vivir. Sí, también vi el otro día,
1:22:45por ejemplo, uno echapt se salió, estaba
1:22:49encapsulado, se salió, fue hackeó a
1:22:51Hugin Face, que es como la competencia
1:22:54también fue lo hackeó y y le empezó a
1:22:57dar como recomendaciones de los propios
1:23:00modelos de la otra empresa, o sea, cosas
1:23:02así, ¿no? Cosas así brutales, pero pues
1:23:04sí, eso es chévere, pero sí de eso de
1:23:07esa manera funciona.
1:23:09Pero bueno, sigamos.
1:23:12Eh, ¿por qué estábamos hablando del tema
1:23:14de esto? Porque Express vendría a ser
1:23:18como el que nos permite hacer esa
1:23:19conexión con ya con el internet, con el
1:23:23servidor. Hay maneras de comunicarse con
1:23:26el servidor. La más la más o bueno, la
1:23:30que se utiliza a nivel global o la que
1:23:33más se utiliza es método de petición
1:23:36HTTP. ¿Cuál es esta? Si ustedes se fijan
1:23:40eh en cualquier página de pronto, bueno,
1:23:42aquí no se ve. Vamos a ver aquí
1:23:45eh casi o bueno, todas realmente, pero
1:23:48que que no se no se ve ya. Pero sí,
1:23:53cuando ustedes abren una página al
1:23:55principio o cuando les mandan un enlace,
1:23:57el enlace siempre al principio dice http
1:24:01https dos pun/s
1:24:04y el resto de la URL. Esto es la
1:24:08metodología de envío de información. Es
1:24:11un método que se creó o varios métodos
1:24:14que se crearon para poder enviar la
1:24:16información por medio de esa URL. ¿Cómo
1:24:18así? Tenemos varios métodos. Get, head,
1:24:22post, p, delete, connect, option, trace
1:24:24y patch. Solo son esos.
1:24:27Pero los que más se utilizan son get,
1:24:30put, delete y update y patch por ahí de
1:24:34vez en cuando. Ya los otros pues yo ni
1:24:37los conozco, no los utilizo y no sé cómo
1:24:39funcionan, pero pues cada uno pues tiene
1:24:41su funcionalidad específica. Entonces,
1:24:44como su nombre los dicen, por ejemplo,
1:24:45el get es para pedirle información al
1:24:48servidor. Solo necesito pedirle
1:24:51información. Ah, tráigame las imágenes
1:24:54de los zapatos para el portafolio,
1:24:57perdón, para el para el catálogo de los
1:24:59zapatos. Entonces, yo le hago una
1:25:01petición get pidiéndole que me traiga
1:25:04las las imágenes de los zapatos. Get las
1:25:07imágenes de los zapatos. Él va a obtiene
1:25:09las imágenes, me las descarga y me las
1:25:12muestra. Es una petición get. una
1:25:14petición post es al contrario. Yo le
1:25:17estoy mandando información al servidor.
1:25:20Por ejemplo, cuando ustedes crean una
1:25:21contraseña, un usuario, una contraseña,
1:25:24eso es una petición post. O sea, estoy
1:25:26obteniendo la información, la
1:25:28contraseña, el usuario, la contraseña,
1:25:31lo voy a encriptar y la voy a almacenar.
1:25:33Estoy diciendo el servidor, oiga, le voy
1:25:36a mandar una, un usuario, una contraseña
1:25:39y usted como servidor me la va a
1:25:41almacenar en la base de datos y el
1:25:43servidor la va a recibir y le va a dar
1:25:45una respuesta.
1:25:46El put es como para reemplazar un post.
1:25:50El put reemplaza el post, o sea, ya una
1:25:52información, por ejemplo, cuando voy a
1:25:54cambiar una contraseña, entonces un
1:25:57método put, un delete para eliminar una
1:26:01información. Ah, no, yo quiero borrar
1:26:03esta imagen de Instagram porque está muy
1:26:06fea. Entonces, lo que se hace es una
1:26:08petición dele. Simplemente lo que hace
1:26:11es limpiar los datos, borrarlos.
1:26:15y el patch que es utilizado para
1:26:17aplicación para aplicar modificaciones
1:26:20parciales a un recurso cuando quiero
1:26:22cambiar parte de un recurso más no todo
1:26:25el recurso completo. Esa es como un
1:26:27parche.
1:26:29Esos son los que se van a utilizar para
1:26:31que los tengan ahí eh en el radar, para
1:26:34que los vayan identificando, los vayan
1:26:37estudiando, porque lo más adelante los
1:26:39vamos a necesitar.
1:26:41Y esta les quería también compartir esta
1:26:43paginita que es para ver los mensajes de
1:26:46error. Esto, este, por ejemplo, cuando
1:26:50hago una petición get, cuando hago una
1:26:53petición get, el navegador o aquí las
1:26:57opciones del navegador nos van a
1:26:59mostrar,
1:27:01voy a recargar
1:27:04aquí un estatus, o sea, un estado.
1:27:09Aquí me está diciendo, por ejemplo, en
1:27:11este caso que es un script y me está
1:27:13diciendo que hay un estado 200. Si yo me
1:27:17voy aquí a los gaticos, aquellos un
1:27:21estado 200 es un okay. O sea, que si se
1:27:25recibió o si se envió la información.
1:27:28Siempre cuando vamos a hablar con el
1:27:29servidor se va a hablar de esta manera
1:27:32con los métodos post. Y los métodos post
1:27:35lo único que hacen es devolverme la
1:27:38información que le pedí, si le pedí
1:27:40información y si digamos no le pedí
1:27:42información, sino que se la mandé, él
1:27:44siempre me va a enviar un mensaje de
1:27:46respuesta. Por ejemplo, en este caso, un
1:27:49estatus. Siempre, siempre, siempre
1:27:51cuando yo envío algo, recibo algo, hago
1:27:54algo con el servidor, él siempre me da
1:27:56una respuesta, una retroalimentación, un
1:27:58estado. Entonces, por ejemplo, todas
1:28:00estas cosas llegaron con un estado,
1:28:02¿okay? O sea, que sí llegaron, llegaron
1:28:05perfectamente. Pero si ustedes se fijan,
1:28:07aquí hay una que dice es que 304 304.
1:28:11Entonces, como yo no sé qué es cuál es
1:28:13la 304, simplemente vengo aquí y busco
1:28:18cuál es la 304. Esta dice not modify,
1:28:22significa que no se modificó el HTTP, el
1:28:26cliente eh redireccionar la respuesta y
1:28:29pues no tuvo modificación eso, o sea,
1:28:32que sigue igual,
1:28:35¿sí? Y cada cosa, cada cosa les va a dar
1:28:39un estatus diferente. Entonces, para eso
1:28:42les quería mostrar esta paginita, pues
1:28:43es como chévere para ir viendo. Ah, que
1:28:45no sé cuál es este estatus, pues vengo y
1:28:47lo busco aquí con los gaticos y listo.
1:28:50Dice, "Profe, ¿es posible en algún
1:28:51momento que nos aparezca un código 418?"
1:28:55Pues de ser posible,
1:28:5813, 14, 15, 17.
1:29:01Yo creo no falta de pronto
1:29:06dice eh eh CL error. Sí, puede que sí.
1:29:11Si está ahí es porque sí. CL error indic
1:29:16de mentira. No, no creo. Este debe ser
1:29:19uno que esté por ahí. Lo pusieron de
1:29:20chistosos.
1:29:22Pero por ejemplo, ¿cuáles son los que
1:29:25más se utilizan? ¿Cuáles son los que más
1:29:27se utilizan? Hasta donde yo sé eh que
1:29:31más de los que más se utilizan es, por
1:29:33ejemplo, el 404 es el que más dólares de
1:29:36cabeza les va a dar. ¿Qué significa? Que
1:29:38no se encontró. O sea, ustedes están
1:29:40pidiendo una contraseña que no existe o
1:29:44están pidiendo un usuario que no existe
1:29:46en la base de datos, un 404.
1:29:48Están pidiendo una imagen que no existe
1:29:51en la base de datos, un 404.
1:29:54Están pidiendo unos zapatos que no
1:29:56existen en la base de datos. ¿Por qué no
1:29:58existen? ¿Porque se nos olvidó crearlos
1:30:01o los creamos a medias? O porque yo los
1:30:04creé pero no los actualicé. Entonces, no
1:30:06se llaman igual, no concuerda o lo
1:30:08estamos escribiendo mal. 404 no existe.
1:30:11No, not found. No se encuentra. Hay
1:30:14muchos. Ese es como de los que más este
1:30:17400 también, el bad request, o sea, una
1:30:20petición mala. Se envió mala
1:30:23información. ¿Cómo así? Se pidió una
1:30:26imagen y se envió un texto, una petición
1:30:29mala. Sí, se está mandando y recibiendo
1:30:31algo, pero es algo diferente a lo que yo
1:30:33pedí. Eh, 302 también el de Found que es
1:30:38encontrada.
1:30:40El de ¿cuál otra?
1:30:44Esta 202 también que es aceptado, se
1:30:48aceptó, si le envió algo, según qué
1:30:51método. Eh eh eh esta es Switch de la
1:30:55101, que es la cambiando protocolos.
1:30:58Esto ya es para web sockets y cosas así.
1:31:00Y la 200 que son como las que más
1:31:03utilizan. Okay. La 200 es la que más van
1:31:05a ver. Ahí les voy a enviar, les voy a
1:31:08enviar la de los gatos para que la
1:31:09guarden por ahí para cuando estén
1:31:10trabajando con peticiones, que es muy
1:31:12pronto, ya pues puedan ver los gaticos y
1:31:15ahí les dicen, eh, de cuál es el el gato
1:31:19del 200 me identifican. Sí, soy a mí el
1:31:22del 100, este lato volador
1:31:27o este [resoplido]
1:31:29con la clase de hoy. Así estamos todos,
1:31:34pero bueno, ahí guárdenlo así mismo. Sí,
1:31:39prácticamente,
1:31:41eh, listo. Para que vayan estudiando por
1:31:43ahí las peticiones HTTP y todo eso.
1:31:46Bueno, listo, ya les mostré un poquito.
1:31:49Ah, e ah, ah. Vamos a ver. Espérenme. Yo
1:31:52pongo esto por acá.
1:31:55Ahora vamos a hacer un ejercicio.
1:31:59Vamos a hacer un ejercicio.
1:32:02¿Qué se me hizo? Espérenme,
1:32:05yo pongo esto por acá que yo tengo el
1:32:08ejercicio por
1:32:12listo.
1:32:14Este,
1:32:21listo. Entonces, bueno, ¿qué vamos a
1:32:24hacer?
1:32:26Vamos a venir aquí al Visual Studio y
1:32:29vamos a crear
1:32:33o vamos a abrir un la carpeta para crear
1:32:36un ejercicio de no JS. Entonces, ¿cómo
1:32:39se hace? Simplemente si están aquí es
1:32:41del visual, abrir carpeta
1:32:45y aquí van y buscan dónde van a trabajar
1:32:47el día de hoy. Entonces yo en este
1:32:50momento voy a utilizar la carpeta de voy
1:32:52a utilizar
1:32:54eh eh
1:32:57a ver tin, ¿dónde?
1:33:01Aquí y voy a crear una que se llame
1:33:08así. Entonces voy a seleccionar.
1:33:12Va a crear una nueva carpeta y a esta
1:33:15nueva carpeta le voy a poner ejercicios
1:33:18note y voy a seleccionar esa carpeta.
1:33:21Ingreso dentro de la carpeta y ahora sí
1:33:24seleccionar. Tiene que verse así.
1:33:29Tiene que verse así. Significa que estoy
1:33:31dentro de la carpeta.
1:33:34Sí. Eh,
1:33:37listo.
1:33:39Ahora,
1:33:42espere, yo les doy tiempo para que lo
1:33:43creen.
1:33:47Ya, ya la crearon.
1:33:52Se les tiene que ver algo. Sí, la
1:33:54carpetica y la llaman desde el la abren
1:33:57desde el visual o bueno, desde la
1:33:58herramienta que ustedes utilicen.
1:34:01¿Listo? Después de crear la carpeta,
1:34:05entonces vamos a crear otra carpeta
1:34:09llamada data.
1:34:12Data. Sí. Listo.
1:34:16Y listo. No vamos a hacer nada más hasta
1:34:19este momento. O bueno, nada más con las
1:34:22carpetas. Ahora, ¿qué vamos a hacer?
1:34:26Vamos a eh, espérenme,
1:34:30esto, ¿cómo es?
1:34:33¿Qué pasa?
1:34:38Esperen.
1:34:43Listo.
1:34:48Abren la terminal del Visual Studio.
1:34:51¿Cómo abren la terminal? Control N o si
1:34:54no esta de acá arribita por si no les
1:34:57abro. Entonces aquí y abren la terminal.
1:34:59Sí, esta es una terminal. Esta cumple la
1:35:02misma función que el Powersell o el CMD
1:35:06funcionan igual. Es para lo mismo.
1:35:09Listo. Después de eso, entonces vamos a
1:35:13eh ejecutar el comando npm
1:35:17inition y
1:35:22sí o no
1:35:24ya lo ejecutaron.
1:35:27Los espero.
1:35:30Les voy a dar unos segunditos para que
1:35:33lo para que lo hagan para que no se me
1:35:34atrase. La idea es que todos lo hagamos.
1:35:38Ejercicio práctico. Me salió un error.
1:35:40¿Cuál?
1:35:42Captura y pone el chat.
1:35:48Me salió un error. ¿Cuál era el
1:35:55el el
1:35:57error
1:36:00417?
1:36:04Ah, 418.
1:36:09Qué error,
1:36:11error. 418
1:36:14se convirtió en tetera.
1:36:19A ver,
1:36:23ejercicios npm y
1:36:26la ejecución de script está
1:36:28deshabilitada gracias a Adrián.
1:36:30Entonces, yo le tengo la solución muy
1:36:33sencilla.
1:36:35¿Se acuerda lo que les dije ahorita?
1:36:37Eh, get execution policy. Se las vuelvo
1:36:42a mandar.
1:36:45Ahí está. Get execution.
1:36:51Ahí se las mando por el chat.
1:36:53Para todos los que les vuelva a salir
1:36:55otra vez o les salga así como le salió
1:36:57Adrián, copian la que les mandé por el
1:37:00chat.
1:37:01se un poly y lo ejecutan ahí en consola
1:37:03y ya con eso cierran la consola y abren
1:37:06una nueva. Pero cerrar la consola no es
1:37:09darle a la X, le dan aquí a la basurita,
1:37:12le dan acá, porque si le dan acá ya
1:37:14simplemente se minimiza y sigue igual.
1:37:16Tienen que darle a la basurita para que
1:37:18la borren y crean una nueva y ahí ya les
1:37:21toma el cambio. Ya con eso ya les
1:37:23debería dejar de salir error.
1:37:27Señor,
1:37:29este el código que nos mandó solo se lo
1:37:31copia y pega, no se le añade nada.
1:37:33No, solo copiar y pegar. Tal cual así.
1:37:36Eh, Adrián, si lo hiciste en Power
1:37:38Shell, solo te va a funcionar para Power
1:37:40Shell, pero en este caso lo tienes que
1:37:42volver a hacer acá en la terminal de
1:37:44esta, porque esta es otra terminal
1:37:45diferente. Solo seas una vez, o sea,
1:37:47esta vez ya no lo vas a tener que volver
1:37:49a hacer, pero toca hacer ahí. Eso ya
1:37:51funcionó bien. 418.
1:37:56Listo.
1:37:58Ahora,
1:38:00ahora sí. npm init-y. Ahora se está
1:38:04empezando o a ejecutar el comando
1:38:06inicial de noe. Estamos diciendo que
1:38:08vamos a inicializar un proyecto con no
1:38:11JS.
1:38:13Listo.
1:38:15Esperamos que cargue.
1:38:20Pero, ¿por qué está tan lento? Ya,
1:38:22listo. Ahí ya lo creó.
1:38:25Perfecto. Listo.
1:38:29¿Qué sigue?
1:38:33Y ahora la siguiente. Ya tenemos eso. Si
1:38:36digamos quieren limpiar la consola para
1:38:39que les quede otra vez en blanco y no
1:38:40llenar esa información, pueden utilizar
1:38:42el comando clear, que significa limpiar
1:38:45y volvir. Se las deja limpias. Ahora
1:38:47vamos a instalar Express. NPM
1:38:52Express.
1:38:59npm, perdón, install express
1:39:08y ahí ya lo está instalando.
1:39:12Vamos a ver
1:39:14qué mandó Bruno.
1:39:22Ah, bueno, Bruno, es que estás
1:39:24ejecutando mal el comando. El comando no
1:39:27es Note, es npm,
1:39:31por eso.
1:39:32Ah, muchas gracias, profe.
1:39:34Dale, Bruno,
1:39:36si es npm, siempre, siempre que vayamos
1:39:40a ejecutar, o sea, descargar cosas,
1:39:42instalar paqueterías y eso, es npm. Para
1:39:46correr el programa le decimos a que vaya
1:39:49y nos corra el programa. Ya lo vamos a
1:39:51ver ahorita.
1:39:54Listo. Vamos a ver qué mandó Diego.
1:39:57Diego. Diego. MacBook Air, ejercicio
1:40:00Node npm. Listo. El mismo que me salió a
1:40:04mí. Te saltaste en install.
1:40:08Es npm
1:40:10install express. Tienes que poner la I
1:40:13porque si no pones la I va a decir,
1:40:15"Bueno, ¿en qué? ¿Cómo así? NPM, ¿qué?
1:40:17¿Qué hago con NPN?" Entonces, cuando le
1:40:19decimos nbm install, o sea, le estamos
1:40:21diciendo vaya instáleme express.
1:40:24Entonces, ahora sí lo vas a ecutar.
1:40:28Sí, así con fotos, con capturas es más
1:40:30fácil, más fácil para entenderlo, para
1:40:32ver cuál es el error.
1:40:35M.
1:40:38Listo, vayan ejecutándolo.
1:40:41Ya cuando vayan instalado Express les
1:40:43debe de aparecer así, ya la carpeta data
1:40:46vacía porque no tiene nada, no hemos
1:40:48creado nada.
1:40:50La carpeta de Note, esa no la vayan a
1:40:52mover, simplemente ella se crea y eso ya
1:40:54no lo tocamos nosotros para nada. El
1:40:57package lock Jason, ese no lo movemos
1:40:59para nada. Y el package Jason, que ese
1:41:01tampoco lo muevemos para nada. Sí pueden
1:41:03entrar y chismosearle. Entren y
1:41:06chismoselan. Mírenlo a ver qué tiene, de
1:41:09qué se trata, qué información llena,
1:41:11para qué sirve cada cosita. Ustedes que
1:41:14de pronto los que estén eh trabajando en
1:41:17trade, entonces pueden utilizar lo que
1:41:20yo siempre hago y esa es la manera que
1:41:21más me ha servido para aprender, ser
1:41:24chismoso. O sea, yo digo, "¿Y para qué
1:41:26sirve esto?"
1:41:28Entonces, para ustedes que están en
1:41:29trade, simplemente creo que lo
1:41:31seleccionan y aquí en con el clic
1:41:33derecho él les permite eh
1:41:36preguntarle a la para qué sirve. Aquí
1:41:39sería seleccionarlo y ejecutar script de
1:41:44deporación. Yo aquí lo que haría es que
1:41:47aquí como tengo cloud, se lo preguntaría
1:41:50cloud. ¿Para qué sirve esto? Entonces,
1:41:52yo le copio acá y le digo,
1:41:58"¿Para qué sirve este
1:42:05es?"
1:42:09Ah, bueno,
1:42:12entonces aquí él va a ir lo va a ir a
1:42:14leer dentro del código y me va a decir,
1:42:17"Este es un script ta.
1:42:22Script s
1:42:24npm. Ah, bueno, esto es para poder
1:42:27ejecutar pruebas. Cuando nosotros
1:42:29creamos código, podemos crear pruebas
1:42:31para poder ejecutarlo. Dime, Jonathan.
1:42:34Profe, esa extensión que tiene de cloud
1:42:37es gratuita,
1:42:39¿no?
1:42:41Ah, okay.
1:42:43No,
1:42:44pero para los que utilizan eh
1:42:49si utilizan trade, eh las la que tienen
1:42:52ahí es gratuita.
1:42:54En visual también ahí está e copilot que
1:42:58también les va a aparecer para poder
1:43:00utilizarla y le dan cierta le dan unos
1:43:04créditos para poder utilizarla, o sea,
1:43:06para poder hacerle varias preguntas.
1:43:08Eh, Antigravity, que es realmente el que
1:43:11a mí más me gusta porque es el que tiene
1:43:13la capa gratuita como más amplia
1:43:16también. Antigravity, ¿cuál es? Es el el
1:43:19es como un Visual Studio pero de Google.
1:43:22Entonces, ¿qué pasa? Este va conectado a
1:43:26la cuenta de Google. Entonces, si
1:43:27digamos ustedes por algún motivo ya
1:43:30pagan Google One, que es el
1:43:32almacenamiento y eso, ya viene con una
1:43:34con unos créditos para eso, entonces ya
1:43:36le pueden hacer preguntas. Es
1:43:38interesante. Por ese lado, yo por
1:43:39ejemplo utilizo, tengo el plan familiar,
1:43:41entonces yo lo pongo ahí, tengo todos
1:43:43los modelos, sino que pues yo no lo
1:43:45utilizo porque yo normalmente pues no
1:43:47utilizo esta herramienta así, sino que
1:43:48yo lo utilizo desde acá, desde desde el
1:43:52cloud code. Desde el cloud code, pero
1:43:54desde la el desktop.
1:43:57Listo. Adrián dice, "Profe, a mí me
1:43:59instaló todo, pero no me agregó ese
1:44:00archivo de package lock."
1:44:03O sea, que no has instalado,
1:44:06no has instalado Express
1:44:09o sí, porque ese se crea cuando se
1:44:12instala Express.
1:44:16Si no, si de pronto no, sí me lo
1:44:20instaló. Entonces
1:44:23ejecuta npm y ya así solo. NPM y la I.
1:44:29Así solo. Y en caso de que no lo haya
1:44:32instalado, pues se lo instal.
1:44:34Listo. Ahí vuelve y lo corrió. Listo.
1:44:36Pues a mí no me descargó nada, pues
1:44:38porque ya está todo descargado. Si no,
1:44:40no pasa nada, déjalo así que él cuando
1:44:41menos piensa aparece. Él se instala solo
1:44:43después. Así así funciona con ese
1:44:46package Jason. Ese package Jason es como
1:44:49este viene con el Note, o sea, pero este
1:44:51Node sí te salió.
1:44:53Este Node modules, esta carpeta, este
1:44:55sí, ese sí. Ah, bueno, entonces no, no
1:44:57pasa nada. que este es el más
1:44:58importante. El otro se instalará solo.
1:45:01Jonathan dice, "Profe, le puse de una,
1:45:03le puse de una I express y omití el
1:45:07express." Y omití el express. No me
1:45:10afecta nada, igual me salen todos los
1:45:12códigos. Sí, no afecta nada, no pasa
1:45:14nada, no pasa absolutamente nada. Con
1:45:16que se instale, se no pasa nada. Como
1:45:20les decía, se puede poner instal o la
1:45:22isola. Hay varias maneras, no pasa nada.
1:45:26Listo.
1:45:28Bueno,
1:45:30eh les voy a vamos, espérenme. Yo hago
1:45:33esto acá rápidamente para que
1:45:35alcancemos. Quiero que lo vean. No
1:45:37pretendo que lo que se lo aprendan,
1:45:40obviamente de memoria o bueno, se eh se
1:45:43lo aprendan qué significa cada cosita.
1:45:45Quiero más que todo que vean qué es,
1:45:47pero listo, ya les voy a mostrar. Dentro
1:45:50de la carpeta data van a crear un
1:45:52archivo llamado producto.json
1:45:56Jon.
1:45:58Y aquí vamos a meter esto que les voy a
1:46:01mandar por acá que se me hizo.
1:46:08Este
1:46:10listo. A ver, yo veo, profe, el package
1:46:13lock me salió dentro del package solo.
1:46:15Ah, bueno, no pasa nada.
1:46:17Pack me salió dentro del package, no, no
1:46:19pasa nada.
1:46:21Hace hace ese tipo de cosas. ¿Por qué?
1:46:24No tengo ni idea, pero no pasa nada.
1:46:27Eh, esto, crean ese archivo y le pegan
1:46:31el código que les voy a mandar ahí por
1:46:32el chat, que es este mismo. Voy a
1:46:36hacerlo rápido para para hacerlo antes
1:46:38de estos 5 minutos y que podamos ver el
1:46:40ejemplo y que ustedes ya lo puedan
1:46:42ejecutar ustedes en su casa, pues más
1:46:44tardecito, con más tiempito. ¿Listo? Y
1:46:47ya por fuera, ya no data, sino por
1:46:51fuera, aquí a la par de Node, voy a
1:46:54crear uno que se llame server.js.
1:46:57Ay, perdón.
1:47:02E
1:47:05server.js.
1:47:09Sí. Listo. Ahora dentro de ese archivo
1:47:12voy a pegar todo esto
1:47:16y se los voy a mandar ahí por el chat
1:47:18para que ustedes también lo peguen.
1:47:22¿Listo?
1:47:23Ustedes
1:47:26más tarde se van a tomar el tiempo de
1:47:30leer línea por línea porque todas las
1:47:33líneas están explicadas para qué sirven,
1:47:35cómo funcionan. Sí, esta va a ser la
1:47:38tarea. Yo les voy a dar un código ya
1:47:40hecho. Ustedes tienen que entenderlo,
1:47:42que es realmente lo más complicado. Es
1:47:45más fácil cuando uno lo hace porque uno
1:47:47mismo lo pensó. En este caso, yo se lo
1:47:49voy a dar hecho. Ustedes lo van a tener
1:47:51que entender.
1:47:52Esto de acá, ¿cómo se ejecuta?
1:47:56Muy sencillo. Dentro de la carpeta
1:47:58ejecutamos
1:47:59el comando Node server. Node server.
1:48:03¿Por qué server? Estoy llamando el
1:48:05archivo este que creé. Si yo a este
1:48:07archivo le puse una S, una S extra, le
1:48:10tienen que llamar igual. O sea, esto de
1:48:12acá se tiene que llamar igual que el de
1:48:14acá. Le pueden poner el nombre que
1:48:15quieran, no importa. Simplemente que
1:48:18cuando lo vayan a llamar tienen que
1:48:19fijarse que sea bien. Se los voy a
1:48:20mandar aquí por el chat.
1:48:23A ver. No server can
1:48:29server
1:48:32server.
1:48:34Esper
1:48:37a ver,
1:48:38profe, disculpe, con este no
1:48:40sererver.jy, ¿qué hacemos?
1:48:43Eh, este Node server lo que va a hacer
1:48:45es decirle a Node jss que me ejecute el
1:48:49código que está dentro de este archivo
1:48:51JavaScript, que esa es la función que
1:48:54hace. Realmente lo que va a hacer es ir
1:48:55a leer y con lo que les conté ahorita de
1:48:59las rutas, él va a empezar a crear o a
1:49:02crear un servidor por el cual ustedes
1:49:04pueden hacerle peticiones. ¿Qué
1:49:06peticiones en este momento le van a
1:49:08poder hacer? Solo estas. Estas son las
1:49:11únicas peticiones que le van a poder
1:49:13hacer. No es más, no hay Ah, pero ya sé
1:49:16por qué se le eh estas peticiones. Si
1:49:19ustedes le quieren agregar más,
1:49:21simplemente le dan al enter y le agregan
1:49:23tal cual. O sea, pueden copiar esta
1:49:25misma. Oa, por ejemplo, aquí me me
1:49:28autocompletó algunas. Vamos a ver si me
1:49:30las vuelve a autocompletar. Y le pueden
1:49:32poner varias para hacerle varias
1:49:34peticiones. ¿Cómo se va a ver esto? Así.
1:49:38Leider.
1:49:41Ahora se ejecuta. ¿Y cómo sé que si se
1:49:44ejecutó correctamente? Muy sencillo,
1:49:47porque cuando se ejecute el Node server
1:49:48me va a mandar un mensaje diciendo
1:49:50servidor corriendo en esta ruta. ¿Cómo
1:49:53hago para ingresar? La copio y la pego
1:49:55en el navegador o le doy control eh
1:49:58control.
1:50:00Control click y él se va a abrir. Sí,
1:50:03pero me va a decir así. H not get porque
1:50:05es solo una app y solo una ruta, no
1:50:07tiene front, no tiene nada visual.
1:50:09Entonces las rutas reales que hay son
1:50:12estas de acá.
1:50:15Ya les muestro. o se la va a copiar para
1:50:20o
1:50:23cópienla y péguenla eh donde no se les
1:50:25vaya a olvidar para que puedan hacer la
1:50:28prueba.
1:50:30Entonces copian eso cuando ejecuten el
1:50:33no server y el node server les diga
1:50:35servidor corriendo. Ahora sí esta ruta
1:50:38que les mandé por el chat la pueden
1:50:39pegar aquí en el navegador.
1:50:43Está acá.
1:50:49Y ya vamos a ver que me va a traer la
1:50:51información. ¿Qué información me trajo?
1:50:54Me trajo
1:50:56la información que yo tengo eh aquí en
1:51:00los en la ruta de los productos, que son
1:51:02estos de acá. Y si yo quiero traer un
1:51:04producto en específico, entonces con el
1:51:07uno me trae el producto uno, con el dos
1:51:12me trae el producto dos y así
1:51:14sucesivamente.
1:51:15Quiero que hagan eso. Traten de hacerlo,
1:51:18cópienlo, péguenlo, así como se los
1:51:20expliqué y eso les queda de tarea para
1:51:22que lo hagan y lo intenten entender e
1:51:26interpretar. Por favor, utilice la IA,
1:51:30mándenle todo esto que yo les estoy
1:51:31mandando a la inteligencia artificial
1:51:33para que se los explique, para que
1:51:35sigamos ustedes no entendieron acá con
1:51:38la logren de pronto entender, pueden
1:51:40pasar para que sepan y empecemos a
1:51:43funcionar. Hagan más ejercicios como
1:51:45este. Entonces, ¿qué vamos a hacer? La
1:51:47intención es que ustedes agreguen más
1:51:49productos con más nombres y más precios.
1:51:5310, 15, 20 y los podamos nombrar. Y esto
1:51:58se puede denominar como su primer app,
1:52:00que es algo extremadamente útil e
1:52:03importante, así no se vea útil, sí lo
1:52:05es, porque de esta manera es que vamos a
1:52:07pedirle la información a nuestro
1:52:10servidor y lo vamos a pintar con el
1:52:12front. Profe, después de ejecutar no
1:52:15server, ¿qué se hacía? correr el comando
1:52:17que está arriba del mensaje tuyo que
1:52:19dice probar en el navegador y ya corres
1:52:22esto y lo pegas en el navegador que es
1:52:23este de acá. Ya cuando él te diga este
1:52:26mensaje de acá, servidor corriendo, van
1:52:29ejecutan local host
1:52:32productos y lo dejan a 100 productos
1:52:34solos y van a ver todos los productos. Y
1:52:36si quieren ver un producto en
1:52:37específico, ponen slash1 o dos, que son
1:52:40los productos que hay, y les va a traer
1:52:42el producto en específico. Pero yo
1:52:44quiero que vayan y lean el código, lo
1:52:47modifiquen, le agreguen cosas. Esa es
1:52:49una base para que ustedes lo entiendan,
1:52:51para que lo probemos, para que vieran
1:52:53cómo es un servidor corriendo con una
1:52:55conexión a una API. Eso es lo que
1:52:57acabamos de hacer. Ya el resto les queda
1:52:58a ustedes de práctica y de tarea para la
1:53:01próxima clase, chicos. Muchas gracias
1:53:03por la clase, por estar pendiente. Yo
1:53:06creo que este último pedacito pudo haber
1:53:08sido como el más enredado. Yo lo
1:53:10entiendo, lo sé, lo es, pero pues no se
1:53:12frustren, utilicen la pregúntenle,
1:53:15busquen tutoriales, no se queden con las
1:53:17dudas que esto se trata. Yo sé que van a
1:53:19tener dudas porque estoy seguro, pero
1:53:21pues de esto se trata, chicos. No es
1:53:23nada por por mi parte. Ya es todo. Ahí
1:53:26los dejo ya con Alfonsina
1:53:30conmigo,
1:53:31¿eh? Vale, chicos, en primer lugar,
1:53:34nada, Santiago, pues agradecerte debido
1:53:37que pues no es de extrañar, diste una
1:53:39excelente sección el día de hoy, muy
1:53:41chévere. Por lo que veo, los chicos
1:53:43entendieron bastante bien el tema, así
1:53:45que pues nada, fenomenal. Eh, por otro
1:53:48lado, chicos, recordemos las
1:53:50prematrículas para el módulo de backend,
1:53:53ya hay muchas personas que faltan, son
1:53:55más de 100. Así que si en este momento
1:53:57alguno de ustedes no lo han hecho, vayan
1:53:59a su COD y realícen apenas salgan de
1:54:01esta sección. En tercer lugar, eh y a
1:54:04tener muy en cuenta es que el día de
1:54:07mañana tendremos dos espacios. Uno de
1:54:09ellos es una mentoría
1:54:12acerca de don y eventos y la otra es una
1:54:15charla deix, ¿vale? Entonces, se van a
1:54:17dar en simultáneo, ustedes deciden a
1:54:19cuad unirse en base a sus necesidades.
1:54:21Ya. Otra cosa muy importante que
1:54:23recordarles es que el viernes tendremos
1:54:25nuevamente una mentoría sobre el
1:54:27proyecto final. ¿Qué quiere decir eso?
1:54:29Que ustedes van a poder preguntar
1:54:31cualquier cosa relacionada con un
1:54:32proyecto final y los mentores, pues por
1:54:34supuesto, le van a dar respuesta de
1:54:36cualquiera que sea el tema. ¿Ya?
1:54:39Entonces, para que tengan eso en cuenta,
1:54:41asistan a los espacios, los aprovechen
1:54:44y, pues bueno, como ha recalcado
1:54:46Santiago durante toda la sección, no se
1:54:48queden con las dudas. Ya, si tienen
1:54:50preguntas, realícenlas si de alguna
1:54:53forma eh les da pena realizarlas en la
1:54:55sección o bueno, por x y razón, nos las
1:54:58pasan a nosotros los monitores y
1:54:59nosotros nos encargamos de hacerlas
1:55:00llegar a los mentores, ¿vale?
1:55:03De mi parte eso sería todo. Gracias por
1:55:04haber estado aquí en el espacio y
1:55:06muchísimas gracias chicos que estén
1:55:11chao. Gracias. Ciao.
1:55:13Ciao.
1:55:13Ciao.
1:55:15Ciao.

About this transcript

This page contains the full transcript of Desarrollo Web | JS Básico – Miércoles 9 de septiembre – 6 PM COL/ECU/PAN | 8 PM UY by Fundación ROFÉ - Toca una Vida, generated from the public captions YouTube serves with the video. The transcript has 16,393 words across 2,592 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.