1
00:00:00,360 --> 00:00:01,320
Dar una buena acogida.

2
00:00:01,680 --> 00:00:05,790
Entonces, este video representa un hito bastante importante en esta clase.

3
00:00:05,790 --> 00:00:11,580
Estamos pasando de tecnologías puramente de vanguardia a nuestra primera experiencia de desarrollo web y de respaldo.

4
00:00:11,580 --> 00:00:13,940
Así que vamos a seguir usando todo lo que hemos aprendido.

5
00:00:13,950 --> 00:00:19,230
Es G-mail CSSA javascript pero vamos a aprender algunas nuevas tecnologías que nos ayudan

6
00:00:19,230 --> 00:00:20,880
a hacer aplicaciones web completas.

7
00:00:20,880 --> 00:00:25,300
Por supuesto, antes de que comencemos a escribir un código, tenemos algunas otras cosas de las que debemos ocuparnos.

8
00:00:25,410 --> 00:00:27,840
Comenzaremos revisando cómo funciona Internet.

9
00:00:27,840 --> 00:00:32,310
Entonces vamos a hablar de estática vs. sitios dinámicos y donde el front-end encaja y dónde

10
00:00:32,310 --> 00:00:37,650
se encuentra y se ajusta y en su mayoría hablaremos más en profundidad sobre el respaldo específico y las tecnologías con las

11
00:00:37,650 --> 00:00:38,580
que vamos a trabajar.

12
00:00:39,030 --> 00:00:43,660
De acuerdo, comencemos con la versión de 60 segundos de cómo funciona Internet.

13
00:00:43,980 --> 00:00:49,890
Cuando vamos a un euro aquí para ver los cursos de punto com, hay algunas cosas que ocurren detrás de escena.

14
00:00:50,790 --> 00:00:56,130
Lo primero es que nuestra computadora necesita averiguar a qué dirección IP enviar una solicitud.

15
00:00:56,490 --> 00:01:03,180
Por lo tanto, nos lleva a usted R-OH leer para entrar, obtener la dirección IP correcta, que es el único localizador para

16
00:01:03,180 --> 00:01:04,840
usted y para mí servidor.

17
00:01:05,130 --> 00:01:10,050
Entonces, una vez que tengamos esa dirección IP, se enviará una solicitud de TTP para Nueva Era.

18
00:01:10,290 --> 00:01:14,910
Entonces, se envía una solicitud a esa dirección IP y no es solo una solicitud en blanco.

19
00:01:14,910 --> 00:01:16,800
Tiene un montón de información.

20
00:01:16,800 --> 00:01:20,830
Hablaremos más sobre los detalles específicos que están en esa solicitud en el próximo video.

21
00:01:21,090 --> 00:01:26,220
Pero la versión corta es que tiene cosas como su propia dirección IP en el momento en que la

22
00:01:26,220 --> 00:01:27,910
envía a ese tipo de solicitud.

23
00:01:27,990 --> 00:01:31,920
Y lo más importante es la página específica que está solicitando.

24
00:01:31,950 --> 00:01:34,710
Entonces, en este caso, estamos solicitando la página del curso.

25
00:01:34,830 --> 00:01:42,510
Entonces, eso está codificado en la solicitud que se envía junto a mí y recibe esa solicitud y se da cuenta de qué

26
00:01:42,510 --> 00:01:43,010
hacer.

27
00:01:43,140 --> 00:01:44,810
Y luego responde con algo.

28
00:01:45,030 --> 00:01:51,250
Entonces, si pedimos cursos de Slash, el servidor de Tomy descubrirá qué necesita ir en la página

29
00:01:51,300 --> 00:01:52,230
del curso.

30
00:01:52,230 --> 00:01:58,380
Así que supongo que va a una base de datos y toma un montón de cursos

31
00:01:58,380 --> 00:02:05,310
e imágenes los compila en este archivo largo HTL con algo de éxito y algo de javascript, y finalmente

32
00:02:05,310 --> 00:02:13,580
me lo devuelve a mi computadora con respuesta HTP y luego se vuelve a un navegador cuyo trabajo es renderizar la página.

33
00:02:13,860 --> 00:02:18,870
Entonces, así es como se ve el contenido real antes de que nuestro navegador se encargue de él y

34
00:02:18,870 --> 00:02:19,880
lo represente como humano.

35
00:02:20,010 --> 00:02:24,880
Esto es lo que la computadora ve solo el éxito de HMO en javascript.

36
00:02:25,050 --> 00:02:31,320
Para resumir todo eso cuando voy a una URL y presiono Enter, lo primero que ocurre es

37
00:02:31,320 --> 00:02:39,330
que necesitamos encontrar la dirección IP para ese dominio y luego enviamos una solicitud HTP solicitando una página en particular a esa

38
00:02:39,330 --> 00:02:42,600
dirección IP y luego al servidor. recibe esa solicitud.

39
00:02:42,750 --> 00:02:45,310
Se da cuenta de qué hacer con qué responder.

40
00:02:45,570 --> 00:02:51,300
Y luego responde de nuevo con H. METRO. SS en javascript.

41
00:02:51,300 --> 00:02:56,510
Lo siguiente que quiero discutir es la diferencia entre páginas web estáticas y dinámicas.

42
00:02:56,610 --> 00:03:00,960
Hablamos de esto también en uno de los primeros videos sobre cómo funciona Internet.

43
00:03:00,960 --> 00:03:05,100
Quiero hacer una recapitulación rápida porque es importante para la discusión de back-end que estamos a punto de tener.

44
00:03:06,330 --> 00:03:13,560
Así que hay dos tipos diferentes de sitios web: páginas estáticas y páginas dinámicas. Las páginas web dinámicas son sitios

45
00:03:13,710 --> 00:03:19,860
que se compilan en el lado del servidor donde el servidor está uniendo o construyendo una página

46
00:03:19,890 --> 00:03:22,530
web antes de que se envíe como respuesta.

47
00:03:22,530 --> 00:03:25,610
Todo lo que hemos escrito hasta ahora ha sido estático.

48
00:03:25,650 --> 00:03:31,330
Entonces, incluso algo como esto, no parece que sea estático porque hay contenido dinámico.

49
00:03:31,350 --> 00:03:35,000
Obtenemos colores aleatorios todo el tiempo y es un juego.

50
00:03:35,010 --> 00:03:42,030
No parece tan estático como el ejemplo de la página web del restaurante que utilicé en el video anterior

51
00:03:42,030 --> 00:03:48,030
sobre este tema, pero todavía es estático porque es el mismo HMO C Ss en javascript.

52
00:03:48,060 --> 00:03:49,160
Cada vez.

53
00:03:49,440 --> 00:03:54,630
Sí, se ve diferente porque tenemos algunos colores aleatorios, pero son las mismas piezas fundamentales

54
00:03:54,630 --> 00:03:58,530
cada vez que abrimos el navegador en un sitio web dinámico.

55
00:03:58,560 --> 00:04:03,900
Podríamos tener diferentes javascript o diferentes C Ss diferentes para cada equipo que se envía de vuelta

56
00:04:03,900 --> 00:04:04,620
cada vez.

57
00:04:04,980 --> 00:04:11,100
Entonces, cuando vamos a algo como Reddit, por ejemplo, y actualizo la página, puedo obtener diferentes contenidos

58
00:04:11,100 --> 00:04:11,580
aquí.

59
00:04:11,820 --> 00:04:17,790
Y, de hecho, cada vez que estás fresco la página obtiene contenido nuevo y hay una base de

60
00:04:17,790 --> 00:04:19,330
datos que está compilando cosas.

61
00:04:19,380 --> 00:04:24,960
Hay algunos códigos que comprueban si está conectado y si ha iniciado sesión, entonces no le mostrará un formulario

62
00:04:24,960 --> 00:04:28,020
aquí, pero le mostrará un botón para cerrar la sesión.

63
00:04:28,320 --> 00:04:34,360
Y si no está conectado, muestra un formulario y muestra que inicia sesión o que ingresa los botones.

64
00:04:35,370 --> 00:04:42,210
la misma H G M L C S en javascript que me enviaron cada vez que el servidor realmente está decidiendo qué devolver.

65
00:04:42,210 --> 00:04:44,430
Así que esta página web no es exactamente

66
00:04:44,430 --> 00:04:51,990
Al construir una página web antes de que me la envíe frente a este sitio, tiene el mismo

67
00:04:51,990 --> 00:04:53,540
contenido exacto cada vez.

68
00:04:56,320 --> 00:04:59,260
OK, así que vamos a centrarnos un poco más en el back-end ahora.

69
00:04:59,350 --> 00:05:06,940
Entonces este diagrama es de una pila genérica y la pila es un término que se usa para referirse a todas las

70
00:05:07,210 --> 00:05:09,800
tecnologías que usa una aplicación web en particular.

71
00:05:09,820 --> 00:05:16,840
Entonces H. T. Melchior dice que en JavaScript siempre son casi siempre parte de una pila en

72
00:05:16,840 --> 00:05:17,770
las grandes aplicaciones web de lujo.

73
00:05:17,770 --> 00:05:21,310
Técnicamente podríamos tener un sitio web que no tenga éxito.

74
00:05:21,340 --> 00:05:22,690
Sería horrible.

75
00:05:22,780 --> 00:05:27,430
Podríamos tener un sitio web que no tenga ningún javascript del lado del cliente y simplemente

76
00:05:27,430 --> 00:05:28,420
no sería muy interactivo.

77
00:05:28,540 --> 00:05:34,150
Pero aún podemos hacer un sitio web perfectamente bueno como lo hicimos con el sitio original de portafolio

78
00:05:34,150 --> 00:05:41,110
de fotografía de cada equipo de Eliseus, pero la mayoría de las aplicaciones web como he mencionado tienen HDMI dice elsea y

79
00:05:41,350 --> 00:05:46,050
Javascript que se está enviando al back-end es donde vemos una muchas más variantes.

80
00:05:46,270 --> 00:05:51,910
podemos escribir o volver y usar Ruby o Python o Skala o Java o javascript o THP.

81
00:05:51,910 --> 00:05:57,720
Así que hay diferentes idiomas en los que podemos escribir el código del lado del servidor y

82
00:05:57,820 --> 00:05:59,500
Hay tantas opciones allí.

83
00:05:59,530 --> 00:06:01,930
Hay todo tipo de bases de datos diferentes por ahí.

84
00:06:01,930 --> 00:06:07,760
Publicar post-crisis y secuela en mi también y Mongo y hay tantas opciones.

85
00:06:07,810 --> 00:06:14,590
Entonces, el término pila se refiere a las elecciones particulares que los desarrolladores hicieron y qué

86
00:06:14,590 --> 00:06:16,110
tecnologías exactas usan.

87
00:06:16,180 --> 00:06:19,200
Es una pregunta muy común para los desarrolladores preguntarse unos a otros.

88
00:06:19,450 --> 00:06:25,010
¿Cuál es tu stack en esa empresa o qué stack estás utilizando en este proyecto específico?

89
00:06:25,030 --> 00:06:28,290
Así que aquí hay un ejemplo de la vida real de la pila de Reddit.

90
00:06:28,510 --> 00:06:32,830
Estas son algunas de las tecnologías que Reddit usa en su sitio web.

91
00:06:33,160 --> 00:06:37,010
Entonces, el sitio está escrito en Python usando un marco llamado matraz.

92
00:06:37,410 --> 00:06:42,610
Se basa en un servidor motor X y utiliza postscripts como su base de datos.

93
00:06:42,610 --> 00:06:48,250
De hecho, hay un sitio web dedicado a compartir diferentes pilas de empresas llamadas Stack share.

94
00:06:48,460 --> 00:06:54,760
Así que lo tengo abierto aquí y esta es la página de Reddit sobre la textura y podemos ver todas las diferentes

95
00:06:54,760 --> 00:06:55,470
tecnologías que utilizan.

96
00:06:55,660 --> 00:06:59,270
Y la genética Python post gresse Amazon S3.

97
00:06:59,410 --> 00:07:02,590
Y te dice a continuación un poco sobre para qué se usan.

98
00:07:02,590 --> 00:07:04,980
No se sienta abrumado por la cantidad de íconos que hay.

99
00:07:05,110 --> 00:07:09,530
¿Cuántos nombres y todas estas categorías diferentes y todos estos términos diferentes?

100
00:07:09,790 --> 00:07:11,100
Ese no es el foco aquí.

101
00:07:11,340 --> 00:07:15,910
Todo lo que quiero mostrarle es que diferentes sitios web usan diferentes tecnologías.

102
00:07:15,910 --> 00:07:20,190
Así que hagamos clic en las pilas y podemos echar un vistazo a algunas otras pilas de la compañía.

103
00:07:20,290 --> 00:07:31,570
Por ejemplo, air B y B pueden ver que FBN B usa raíles y Ruby que usan mi lote de Esky para

104
00:07:32,230 --> 00:07:33,130
javascript Java.

105
00:07:33,520 --> 00:07:35,720
Usan un montón de diferentes tecnologías.

106
00:07:35,770 --> 00:07:38,500
Regresemos a nuestras diapositivas aquí.

107
00:07:38,500 --> 00:07:44,110
Otra cosa que quiero mencionar es que esta línea azul aquí denota el límite entre el

108
00:07:44,110 --> 00:07:45,650
extremo posterior y el frontal.

109
00:07:46,000 --> 00:07:51,490
Entonces discutimos cómo un servidor dinámico construye un sitio dinámico en el back-end.

110
00:07:51,490 --> 00:07:57,050
Así que aquí, en esta parte del diagrama, es donde entra la parte dinámica del sitio.

111
00:07:57,250 --> 00:08:02,810
en rojo, es el caso que averigua si un usuario está conectado si necesitamos mostrar un formulario, qué agregar

112
00:08:03,280 --> 00:08:10,120
para agregar a la página qué imágenes poner si necesitamos tener un registro y botón de bloqueo o un botón de cerrar sesión.

113
00:08:10,120 --> 00:08:13,130
Así que esta es toda la lógica escrita en Python

114
00:08:13,240 --> 00:08:20,290
Todo eso se hace en la parte posterior y en esta parte del diagrama y luego envía de vuelta

115
00:08:20,410 --> 00:08:23,600
h tim L C S S y Javascript.

116
00:08:23,680 --> 00:08:26,170
Así que aquí está la pila que vamos a aprender.

117
00:08:26,380 --> 00:08:27,800
Vamos a usar el nodo j.

118
00:08:27,870 --> 00:08:28,440
Sí.

119
00:08:28,450 --> 00:08:33,120
Así que todavía escribiremos javascript pero lo escribiremos en el back-end.

120
00:08:33,280 --> 00:08:39,610
Vamos a usar un marco llamado Express y también vamos a usar Mangu DBI como nuestra base de datos.

121
00:08:40,370 --> 00:08:45,610
Y luego, por supuesto, también tendremos h t m l c s s y Javascript tal como lo hemos estado usando

122
00:08:45,610 --> 00:08:46,490
en las últimas unidades.

123
00:08:46,720 --> 00:08:52,510
Entonces, en este momento del curso, puede considerarse un desarrollador de front-end o un desarrollador front-end en

124
00:08:52,510 --> 00:08:57,490
formación, donde hemos cubierto todo lo que necesita saber para comenzar a utilizar el

125
00:08:57,490 --> 00:08:58,950
front-end de sitios web.

126
00:08:58,960 --> 00:09:03,160
Ahora comenzaremos a hablar sobre el desarrollo web y una vez que los juntemos hacia el final del curso,

127
00:09:03,160 --> 00:09:09,790
escriba el código del lado del servidor con Express A. J. como Mongo D-B, tenemos acceso

128
00:09:09,790 --> 00:09:14,510
de usuario pero también estamos escribiendo javascript de cliente o de cliente.

129
00:09:14,510 --> 00:09:16,170
H Tim L y C Ss.

130
00:09:16,390 --> 00:09:19,090
Eso es lo que llamaríamos desarrollo web completo.

131
00:09:19,270 --> 00:09:25,450
El término desarrollo web de pila completa se refiere a escribir código en todas las partes de la pila, el extremo posterior

132
00:09:25,450 --> 00:09:26,380
y el frontal.

133
00:09:26,710 --> 00:09:30,990
Aquí hay un diagrama de algunas de las funcionalidades que podemos implementar en la cesta.

134
00:09:31,210 --> 00:09:37,240
Reddit como ejemplo. De nuevo puedes ver que tenemos funciones como verificar si el usuario ha iniciado sesión registrarse un

135
00:09:37,240 --> 00:09:44,140
usuario agregar una nueva publicación a la base de datos crear un nuevo comentario eliminar una publicación de la base de datos ordenar

136
00:09:44,140 --> 00:09:50,290
y clasificar las publicaciones un nuevo sub Reddit agrega un suscriptor al boletín y lo guarda en la base de datos.

137
00:09:50,290 --> 00:09:51,420
Y esto es usando

138
00:09:51,760 --> 00:09:57,640
Y el más importante, por supuesto, es averiguar qué evalúa cada equipo en javascript para enviar de vuelta

139
00:09:57,640 --> 00:10:00,270
al usuario, que luego se envía de vuelta.

140
00:10:00,460 --> 00:10:06,880
Cruzando esta línea azul donde ahora vamos a la parte delantera que H. METRO. S. Assassins y Javascript me

141
00:10:06,910 --> 00:10:10,730
son devueltos y luego veo esto en mi navegador.

142
00:10:11,020 --> 00:10:16,360
Tengo un diagrama más aquí que también habla de front-end versus back-end, pero está formateado de

143
00:10:16,360 --> 00:10:17,260
forma ligeramente diferente.

144
00:10:17,560 --> 00:10:23,770
Este diagrama muestra la secuencia de eventos entre front end y back y en el transcurso de algunas cargas de página.

145
00:10:24,370 --> 00:10:29,410
Así que en la parte delantera si voy a leerlo punto com y actualizar.

146
00:10:29,680 --> 00:10:34,790
Estoy enviando una solicitud para la página de inicio de Reddit y luego va a leerla.

147
00:10:34,960 --> 00:10:39,340
Esa solicitud llega a su servidor y el servidor ve que estoy pidiendo la página de inicio.

148
00:10:39,370 --> 00:10:45,650
Así que hay una lógica del lado del servidor que toma la publicación superior de la base de datos y hace

149
00:10:45,730 --> 00:10:52,040
todo el tiempo LNC SS y javascript que veo aquí y luego me lo envía y luego lo veo en mi navegador.

150
00:10:52,780 --> 00:11:00,400
El siguiente paso es que podría escribir algo en un cuadro de búsqueda como perros, lo que haré ahora

151
00:11:00,460 --> 00:11:02,370
escriba aquí y presione enter.

152
00:11:02,710 --> 00:11:09,340
enter, esta vez se envía una nueva solicitud al servidor de Reddit diciendo que estoy buscando perros.

153
00:11:09,340 --> 00:11:10,320
Y cuando presiono

154
00:11:10,570 --> 00:11:16,630
Entonces el servidor tiene una lógica que toma mis términos de búsqueda y encuentra todas las publicaciones que coinciden con ese

155
00:11:16,630 --> 00:11:23,080
término en la base de datos y luego me da una evaluación de sexo masculino en javascript para la página de resultados

156
00:11:23,080 --> 00:11:25,930
del perro y luego me lo envía de vuelta .

157
00:11:26,620 --> 00:11:32,700
Y luego mi navegador lo renderiza y veo que esta es una versión muy simplificada, obviamente.

158
00:11:32,810 --> 00:11:37,300
Hay muchas más cosas detrás de escena y Reddit creará nuestra propia versión

159
00:11:37,330 --> 00:11:39,660
de una aplicación muy similar para leerla.

160
00:11:39,820 --> 00:11:46,540
Una vez que aprendamos más sobre Express y conozcamos a J. S. y Mongo DB Y haremos una aplicación de pila completa.