‫Instructor: Y antes de
‫comenzar, hagamos un resumen rápido de la renderización del lado
‫del servidor y del lado del cliente.
‫Y también, quiero mostrarles en este video el
‫sitio web renderizado del lado del servidor que vamos a
‫construir durante las próximas horas.
‫Por lo tanto, recuerde cómo en la representación del lado del
‫cliente, la construcción real del sitio
‫web ocurre en el lado del cliente.
‫Y para eso, necesitamos una fuente de
‫datos, que generalmente es una API
‫que envía datos al cliente según lo solicitado.
‫Entonces, eso es lo que hemos estado
‫construyendo hasta este punto del curso.
‫Pero ahora que domina esa parte, es
‫hora de pasar a la representación del lado del servidor
‫y, de hecho, construir el sitio web en el servidor.
‫Y el aspecto principal de la representación del
‫lado del servidor es construir
‫el HTML real, básicamente porque ahí es donde se almacenarán todos nuestros datos.
‫Y para hacer eso, usamos plantillas,
‫que tienen marcadores
‫de posición donde luego inyectaremos nuestros datos según sea necesario.
‫Entonces, cada vez que hay una
‫solicitud, digamos para la
‫página de inicio, luego obtenemos los datos necesarios
‫de la base de datos, los
‫inyectamos en una plantilla, que luego
‫generará HTML, y finalmente enviamos ese
‫HTML, junto con CSS y JavaScript
‫y archivos de imagen. , de vuelta al cliente.
‫Bastante sencillo, ¿verdad?
‫Ahora, todavía podemos usar la API para
‫algunas de las cosas en
‫la interfaz y, de hecho, también lo haremos.
‫Bien, de todos modos, déjame mostrarte lo que
‫realmente vamos a construir en esta sección.
‫Entonces, este es el sitio web renderizado final de Natours, y en
‫realidad está disponible en www. natours. dev, por lo que,
‫si te apetece, abre
‫esta
‫página en tu navegador ahora y
‫echa un vistazo.
‫Tendrás que especificar este W-W-W, ¿de acuerdo?
‫De lo contrario, no funcionará.
‫De todos modos, aquí puede ver todos los
‫recorridos con los
‫que hemos estado trabajando mientras creábamos nuestra
‫API, y todos los datos aquí son exactamente los mismos.
‫Entonces, todas nuestras nueve giras están aquí, correcto,
‫y
‫nuevamente, esto es exactamente lo
‫que vamos a construir en esta sección.
‫Echemos un vistazo a una de las páginas de detalles aquí.
‫Entonces, el Park Camper,
‫y de hecho, tiene la calificación promedio.
‫Tienes todos los guías turísticos.
‫Entonces tienes algunas fotos.
‫Tienes todas las ubicaciones y se muestran en un mapa, en realidad.
‫Y también tienes la reseña.
‫Y estos, nuevamente, son los comentarios
‫reales provenientes de usuarios reales en la base de datos.
‫Entonces, si tuviera que ver este recorrido
‫aquí en Postman,
‫digamos, obtengamos todos los recorridos aquí primero
‫solo para obtener la identificación del Park Camper.
‫Sea Explorer, City
‫Wanderer,
‫¿dónde está eso?
‫Ah, aquí está el Park Camper.
‫Entonces, si obtenemos este recorrido ahora,
‫verá que, por ejemplo, los
‫guías turísticos son exactamente las mismas personas.
‫Entonces, están Aarav, Ben y Kate, y
‫entonces, de hecho, son las personas que en realidad
‫son los guías turísticos.
‫Entonces, estos
‫tres, y nuevamente, las reseñas
‫son también las de Ayla, Laura, Isabel y Alexander,
‫además de estas otras de allí también.
‫Entonces, si miramos las reseñas aquí,
‫entonces, de hecho,
‫provienen de Ayla y Laura e Isabel y ...
‫Sí, realmente, ves que estos datos son realmente
‫los datos subyacentes a partir
‫de los cuales este sitio web se genera dinámicamente, ¿de acuerdo?
‫Luego, también podemos iniciar sesión, y cualquiera
‫de los usuarios que tengamos
‫en la base de datos trabajará para eso.
‫Entonces, si echamos un vistazo a uno de nuestros usuarios,
‫por ejemplo, usemos a Steve aquí, que
‫en realidad es un guía turístico.
‫Entonces, tomamos el
‫ejemplo, usamos
‫el correo electrónico y la
‫contraseña es, como siempre, test1234.
‫Bien, entonces iniciamos sesión, y esto
‫realmente sucede detrás de escena
‫usando nuestra API.
‫Bien, y ahora, aquí tenemos a Steve.
‫Incluso podemos abrir su cuenta.
‫Luego podemos cambiar la contraseña, y
‫eso, nuevamente, sucederá detrás
‫de escena usando el punto final de API exacto
‫que construimos para un usuario que cambia su contraseña.
‫Luego, también puede consultar las reservas
‫de este usuario en particular, que
‫en este caso, no debería
‫ser ninguna porque es un guía turístico.
‫Entonces, ves que está vacío aquí, pero
‫de todos modos ...
‫Sí, eso es lo
‫que quería mostrarles porque esto es lo
‫que haremos durante el resto de esta sección.
‫Entonces, espero que estén entusiasmados con
‫eso, como
‫yo, así que comencemos ahora.