1
00:00:01,240 --> 00:00:02,660
‫Instructor: Y antes de

2
00:00:02,660 --> 00:00:05,610
‫comenzar, hagamos un resumen rápido de la renderización del lado

3
00:00:05,610 --> 00:00:07,440
‫del servidor y del lado del cliente.

4
00:00:07,440 --> 00:00:09,860
‫Y también, quiero mostrarles en este video el

5
00:00:09,860 --> 00:00:12,850
‫sitio web renderizado del lado del servidor que vamos a

6
00:00:12,850 --> 00:00:14,393
‫construir durante las próximas horas.

7
00:00:15,670 --> 00:00:18,680
‫Por lo tanto, recuerde cómo en la representación del lado del

8
00:00:18,680 --> 00:00:20,600
‫cliente, la construcción real del sitio

9
00:00:20,600 --> 00:00:22,720
‫web ocurre en el lado del cliente.

10
00:00:22,720 --> 00:00:25,330
‫Y para eso, necesitamos una fuente de

11
00:00:25,330 --> 00:00:27,722
‫datos, que generalmente es una API

12
00:00:27,722 --> 00:00:30,590
‫que envía datos al cliente según lo solicitado.

13
00:00:30,590 --> 00:00:32,600
‫Entonces, eso es lo que hemos estado

14
00:00:32,600 --> 00:00:34,490
‫construyendo hasta este punto del curso.

15
00:00:34,490 --> 00:00:36,750
‫Pero ahora que domina esa parte, es

16
00:00:36,750 --> 00:00:39,900
‫hora de pasar a la representación del lado del servidor

17
00:00:39,900 --> 00:00:43,030
‫y, de hecho, construir el sitio web en el servidor.

18
00:00:43,030 --> 00:00:45,780
‫Y el aspecto principal de la representación del

19
00:00:45,780 --> 00:00:47,930
‫lado del servidor es construir

20
00:00:47,930 --> 00:00:52,140
‫el HTML real, básicamente porque ahí es donde se almacenarán todos nuestros datos.

21
00:00:52,140 --> 00:00:54,480
‫Y para hacer eso, usamos plantillas,

22
00:00:54,480 --> 00:00:56,090
‫que tienen marcadores

23
00:00:56,090 --> 00:00:59,960
‫de posición donde luego inyectaremos nuestros datos según sea necesario.

24
00:00:59,960 --> 00:01:02,200
‫Entonces, cada vez que hay una

25
00:01:02,200 --> 00:01:04,170
‫solicitud, digamos para la

26
00:01:04,170 --> 00:01:07,172
‫página de inicio, luego obtenemos los datos necesarios

27
00:01:07,172 --> 00:01:09,280
‫de la base de datos, los

28
00:01:09,280 --> 00:01:11,410
‫inyectamos en una plantilla, que luego

29
00:01:11,410 --> 00:01:13,610
‫generará HTML, y finalmente enviamos ese

30
00:01:13,610 --> 00:01:15,890
‫HTML, junto con CSS y JavaScript

31
00:01:15,890 --> 00:01:18,990
‫y archivos de imagen. , de vuelta al cliente.

32
00:01:18,990 --> 00:01:21,320
‫Bastante sencillo, ¿verdad?

33
00:01:21,320 --> 00:01:24,290
‫Ahora, todavía podemos usar la API para

34
00:01:24,290 --> 00:01:26,640
‫algunas de las cosas en

35
00:01:26,640 --> 00:01:29,840
‫la interfaz y, de hecho, también lo haremos.

36
00:01:29,840 --> 00:01:32,600
‫Bien, de todos modos, déjame mostrarte lo que

37
00:01:32,600 --> 00:01:35,150
‫realmente vamos a construir en esta sección.

38
00:01:36,690 --> 00:01:39,900
‫Entonces, este es el sitio web renderizado final de Natours, y en

39
00:01:39,900 --> 00:01:44,000
‫realidad está disponible en www. natours. dev, por lo que,

40
00:01:44,000 --> 00:01:45,360
‫si te apetece, abre

41
00:01:45,360 --> 00:01:46,193
‫esta

42
00:01:46,193 --> 00:01:48,150
‫página en tu navegador ahora y

43
00:01:48,150 --> 00:01:49,500
‫echa un vistazo.

44
00:01:49,500 --> 00:01:52,360
‫Tendrás que especificar este W-W-W, ¿de acuerdo?

45
00:01:52,360 --> 00:01:54,320
‫De lo contrario, no funcionará.

46
00:01:54,320 --> 00:01:56,760
‫De todos modos, aquí puede ver todos los

47
00:01:56,760 --> 00:01:58,060
‫recorridos con los

48
00:01:58,060 --> 00:02:00,020
‫que hemos estado trabajando mientras creábamos nuestra

49
00:02:00,020 --> 00:02:02,940
‫API, y todos los datos aquí son exactamente los mismos.

50
00:02:02,940 --> 00:02:06,133
‫Entonces, todas nuestras nueve giras están aquí, correcto,

51
00:02:07,010 --> 00:02:07,920
‫y

52
00:02:07,920 --> 00:02:09,800
‫nuevamente, esto es exactamente lo

53
00:02:09,800 --> 00:02:12,700
‫que vamos a construir en esta sección.

54
00:02:12,700 --> 00:02:16,000
‫Echemos un vistazo a una de las páginas de detalles aquí.

55
00:02:16,000 --> 00:02:18,100
‫Entonces, el Park Camper,

56
00:02:18,100 --> 00:02:21,170
‫y de hecho, tiene la calificación promedio.

57
00:02:21,170 --> 00:02:22,773
‫Tienes todos los guías turísticos.

58
00:02:24,030 --> 00:02:25,600
‫Entonces tienes algunas fotos.

59
00:02:25,600 --> 00:02:29,870
‫Tienes todas las ubicaciones y se muestran en un mapa, en realidad.

60
00:02:29,870 --> 00:02:31,610
‫Y también tienes la reseña.

61
00:02:31,610 --> 00:02:34,060
‫Y estos, nuevamente, son los comentarios

62
00:02:34,060 --> 00:02:37,380
‫reales provenientes de usuarios reales en la base de datos.

63
00:02:37,380 --> 00:02:39,940
‫Entonces, si tuviera que ver este recorrido

64
00:02:39,940 --> 00:02:41,363
‫aquí en Postman,

65
00:02:43,500 --> 00:02:46,250
‫digamos, obtengamos todos los recorridos aquí primero

66
00:02:47,980 --> 00:02:51,100
‫solo para obtener la identificación del Park Camper.

67
00:02:51,100 --> 00:02:52,393
‫Sea Explorer, City

68
00:02:55,770 --> 00:02:57,003
‫Wanderer,

69
00:02:58,180 --> 00:02:59,880
‫¿dónde está eso?

70
00:02:59,880 --> 00:03:01,233
‫Ah, aquí está el Park Camper.

71
00:03:02,170 --> 00:03:04,123
‫Entonces, si obtenemos este recorrido ahora,

72
00:03:08,950 --> 00:03:10,650
‫verá que, por ejemplo, los

73
00:03:10,650 --> 00:03:12,690
‫guías turísticos son exactamente las mismas personas.

74
00:03:12,690 --> 00:03:15,123
‫Entonces, están Aarav, Ben y Kate, y

75
00:03:16,130 --> 00:03:19,410
‫entonces, de hecho, son las personas que en realidad

76
00:03:19,410 --> 00:03:21,080
‫son los guías turísticos.

77
00:03:21,080 --> 00:03:22,730
‫Entonces, estos

78
00:03:22,730 --> 00:03:25,210
‫tres, y nuevamente, las reseñas

79
00:03:25,210 --> 00:03:29,890
‫son también las de Ayla, Laura, Isabel y Alexander,

80
00:03:29,890 --> 00:03:33,690
‫además de estas otras de allí también.

81
00:03:33,690 --> 00:03:36,640
‫Entonces, si miramos las reseñas aquí,

82
00:03:36,640 --> 00:03:38,807
‫entonces, de hecho,

83
00:03:38,807 --> 00:03:43,090
‫provienen de Ayla y Laura e Isabel y ...

84
00:03:43,090 --> 00:03:46,150
‫Sí, realmente, ves que estos datos son realmente

85
00:03:46,150 --> 00:03:48,520
‫los datos subyacentes a partir

86
00:03:48,520 --> 00:03:53,023
‫de los cuales este sitio web se genera dinámicamente, ¿de acuerdo?

87
00:03:54,140 --> 00:03:56,260
‫Luego, también podemos iniciar sesión, y cualquiera

88
00:03:56,260 --> 00:03:57,890
‫de los usuarios que tengamos

89
00:03:57,890 --> 00:04:00,353
‫en la base de datos trabajará para eso.

90
00:04:01,750 --> 00:04:04,723
‫Entonces, si echamos un vistazo a uno de nuestros usuarios,

91
00:04:06,430 --> 00:04:08,620
‫por ejemplo, usemos a Steve aquí, que

92
00:04:08,620 --> 00:04:10,593
‫en realidad es un guía turístico.

93
00:04:12,690 --> 00:04:14,093
‫Entonces, tomamos el

94
00:04:16,600 --> 00:04:17,630
‫ejemplo, usamos

95
00:04:17,630 --> 00:04:19,563
‫el correo electrónico y la

96
00:04:21,010 --> 00:04:23,010
‫contraseña es, como siempre, test1234.

97
00:04:23,010 --> 00:04:25,070
‫Bien, entonces iniciamos sesión, y esto

98
00:04:25,070 --> 00:04:26,880
‫realmente sucede detrás de escena

99
00:04:26,880 --> 00:04:28,390
‫usando nuestra API.

100
00:04:28,390 --> 00:04:31,120
‫Bien, y ahora, aquí tenemos a Steve.

101
00:04:31,120 --> 00:04:33,663
‫Incluso podemos abrir su cuenta.

102
00:04:35,620 --> 00:04:37,780
‫Luego podemos cambiar la contraseña, y

103
00:04:37,780 --> 00:04:39,720
‫eso, nuevamente, sucederá detrás

104
00:04:39,720 --> 00:04:42,840
‫de escena usando el punto final de API exacto

105
00:04:42,840 --> 00:04:46,083
‫que construimos para un usuario que cambia su contraseña.

106
00:04:47,830 --> 00:04:49,610
‫Luego, también puede consultar las reservas

107
00:04:49,610 --> 00:04:51,460
‫de este usuario en particular, que

108
00:04:51,460 --> 00:04:53,180
‫en este caso, no debería

109
00:04:53,180 --> 00:04:55,170
‫ser ninguna porque es un guía turístico.

110
00:04:55,170 --> 00:04:56,773
‫Entonces, ves que está vacío aquí, pero

111
00:04:57,900 --> 00:04:58,970
‫de todos modos ...

112
00:04:59,830 --> 00:05:01,520
‫Sí, eso es lo

113
00:05:01,520 --> 00:05:03,800
‫que quería mostrarles porque esto es lo

114
00:05:03,800 --> 00:05:06,130
‫que haremos durante el resto de esta sección.

115
00:05:06,130 --> 00:05:07,980
‫Entonces, espero que estén entusiasmados con

116
00:05:07,980 --> 00:05:09,000
‫eso, como

117
00:05:09,000 --> 00:05:10,573
‫yo, así que comencemos ahora.