Implementar y probar las conexiones - Platzi

Curso de Single Page Application con JavaScript Vanilla

Curso de Single Page Application con JavaScript Vanilla

Development

¿Qué vamos a aprender?

Introducción a SPA

Configurar el entorno de trabajo

Preparar Webpack

Templates

Crear el Home

Crear template de personajes

Crear página de error 404

Router

Crear rutas del sitio

Conectar las rutas con los templates

Implementar y probar las conexiones

Fetch Data

Obtener personajes con la función de llamado a la API

Conectar la función con la descripción de personajes

Deploy

Configurar CSS para administrar elementos visuales

Github Pages

Crear el script para enviar a producción

Repaso, recomendaciones y tips para seguir aprendiendo

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 51

Preguntas 24

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Oscar Lara

Si en lugar del home te aparece Error 404:

En el archivo resolveRoutes.js elimina el template literal al momento de retornar route, ya que si no lo haces estarías agregando una ‘/’ de más a la ruta y eso ocasiona que al momento de ingresar al sitio la ruta sea ‘//’, la cual no existe y por eso te redirige al 404 page.

El código queda de la siguiente forma:

resolveRoutes.js :

const resolveRoutes = (route) => {
  if (route.length <= 3) {
    let validRoute = route === '/' ? route : '/:id';
    return validRoute;
  } 
  return route;
}

export default resolveRoutes;

LEONARDO RAMOS ARIRAMA

En la carpeta de Utils/getHash.js
deben de corregir el código corregido:

const getHash = () =>
location.hash.slice(1).toLocaleLowerCase().split("/")[1] || “/”;
export default getHash;

espero que les sirva.

Luis Efraín Sánchez Ávila

Hay unos pequeños errores.
Primero en getHash.js
En lugar de slide es slice y en lugar de Locate es Locale

const getHash = () => 
	location.hash.slice().toLocaleLowerCase().split("/")[1] || "/";

export default getHash;

Segundo, parece ser que hay un error en el index.HTML. en la etiqueta section debe haber un Id=“content”. En mi caso yo solo tenía la clase content pero faltaba el Id. Les dejo el HTML por si quieren hacer copy & paste

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie-edge" />
		<title>CIENTIFICO</title>
	</head>
	<body>
		<main class="Main">
			<header class="Header" id="header"></header>
			<section id="content">
				<div class="loading"></div>
			</section>
		</main>
	</body>
</html>``

juan martinez lopez

Revise el código y al parecer todo se ve bien no me muestra errores pero igual no me sale Name ni nada de la lista que se le muestra al profe cuando presiona el Name

100tifico - Google Chrome 25_03_2020 09_39_28 p. m..png

Guadalupe Giovanni Hernández Medina

Si al presionar “name” no les parece nada, verifiquen que dentro del template de Home el vinculo este de esta manera (<a href="#/1/">):

 <article class="Character-item">
            <a href="#/1/">
              <img src="image" alt="name">
              <h2>Name</h2>
            </a>
          </article>

David Daza

¿Cuál es el propósito (en este punto) de utilizar async/await si las funciones Header, resolveRoutes y render realizan operaciones síncronas?

juan martinez lopez

alguien me podria ayudar con este error y por que no me sale name

100tifico - Google Chrome 25_03_2020 09_14_55 p. m..png

Luis Ruiz Ramos

Bueno voy haciendo todo al pie de la letra, aunque entiendo algunas cosas, otras no pero creo que es cosa de practicar, no?

Amaury Soto Garay

Hola, hice el ejercicio con la API de pokemón, hay que hacerlo un poquito diferente pues el primer llamado a la API de pokemon solo nos trae el nombre y una url de la info de cada pokemon, para esto entonces lo que hice fue hacer una lógica para acceder a todos los datos de cada pokemon, dejo y repo para que chequeen : ) https://github.com/amaurysg/SPA-PokeApi

Fernando Vallejo

Dejo mi repositorio en el cual podrán encontrar una rama de cada clase.

https://github.com/ivallejo/Cientifico

Gonzalo Pimentel

Bueeeno cuando le daba click a Name me mostraba error 404… hice todas las recomendaciones de los compañeros de abajo y nada. Me puse a revisar mi código línea por línea y me di cuenta que tenía un lindo typo jaja. En el index.js de la carpeta routes, en el objeto de routes donce declaramos las rutas en el id lo había escrito así:

Me faltaron los : antes de id, debería ser así:

Y listo me funcionó:

Jose Morales Varon

Como 3 horas revisando código y corrijiendo typos hasta que logre solucionar los errores que tenía. Les recomiendo bastante que al momento de ver errores relean su codigo y comparen con el del profesor hasta que encuentren alguna anomalía

Dennis Adrian Guzman Betancur

Tuve un problema al correr la página.
Solamente me salía “Error404” mi error fue un typo en resolveRoutes.js
Tenía escrito:
route.lenght <= 3
En lugar de:
route.length <= 3

Mi typo era en la palabra “length”

Juan Carlos Manzanero Domínguez

Si no obtienen el resultado esperado, revisen en public/index.html, la etiqueta header debe cerrarse antes de los demás elementos.

    <main class="main">
      <header class="header" id="header"></header> <!-- Close!! -->
      <section id="content">
        <div class="loading"></div>
      </section>
    </main>

Irving Juárez

Si no les aparece todo el codigo html al momento de darle en “Name”, lo unico que hay que hacer es cambiar el getHash. Simplemente poniedo

const getHash = () => {
  return location.hash.splice(1)
}

Ya les va a aparecer todo el contenido html al momento de darle name.

Camilo Perilla

Algo intersante que se ve en esta clase, es que al igualar un variable a una función como las que importamos al inicio del documento, se hace sin ‘()’.

let render = Character

Si colocamos los parantesis, estariamos corriendo la funcion, y la variable recibiria el return de la función, osea recebiria una cadena de texto. Lo que buscamos es injectar esa cadena de texto como codigo HTML. Por eso usamos:

content.innerHTML = await render()```
Con los parentesis

Camilo Perilla

Aqui dejo el procesa por el que pasa el Hash en cada función.
getHash():

Con .slice(1) quitamos ‘#’, lo pasamos a minusculas, lo convertimos en un array usando ‘/’ como separador con .split(’/’) y finalmente obtenemos el valor con [1]. Podemos obtener ‘about’ o cualquier numero id como se ve en la imagen.
En resolveRoutes checamos si se trata de un id mirando su longuitud. Aqui las posibles salidas son ‘/about’, ‘/’ o si se trata de un id tenemos ‘/:id’. Este valor se alamcena en la variable route y se confirma si hace parte del objeto routes previamente creado y hacemos el respectivo render.

Jose Morales Varon

Tengo este error en al consola, ya revise mis lineas de codigo y todo esta correcto
![](

Jhonatan David Ibarra Lavado

tengo el siguiente error en consola 😕

Uncaught (in promise) TypeError: location.hash.slide is not a function
at getHash (getHash.js:2)
at router (index.js:24)

este e sel codigo de getHash.js

const getHash = ( ) =>
    location.hash.slide(1).toLocaleLowerCase().split('/')[1] || '/'

    export default getHash

y este re routes

import Header from '../template/Header'
import Home from '../pages/Home'
import Characters from '../pages/Characters'
import Error404 from '../pages/Error404'
import getHash from '../utils/getHash'
import resolveRoutes from '../utils/resolveRoutes'

const routes = {
  '/' : Home,
  '/:id' : Characters,
  '/contact' : 'Contact',

}

const router = async ()=> {

  const header = null|| document.getElementById ('header')
  const content = null|| document.getElementById ('content')

  header.innerHTML = await Header ()

  let  hash = getHash ();
  let route = await resolveRoutes(hash)
  let render = routes[ route] ? routes[route] : Error404
  content.innerHTML = await render()


}

export default router

M F

Tiene que pasarle route a const resolveRoutes para que se muestre en el DOM.

const resolveRoutes = (route) => {
  if (route.length <= 3) {
    let validRoute = route === '/' ? route : '/:id';
    return validRoute;
  }

  return `/${route}`;
};

export default resolveRoutes;

Javier Alejandro Quiñones Ibarra

El error donde no muestra name al cargar la página lo solucione cambiando:
Esto:
location.hash.slice(1).toLocateLowerCase().split(’/’)[1] || ‘/’;
Por esto:
location.hash.slice(1).toLocaleLowerCase().split(’/’)[1] || ‘/’;

Remix Zapata

Para las personas que estén realizando este proyecto usando TS, cuando tengan este problema:

La solución que le encontré es crear una interfaz que le indique al objeto (routes) que cuando haga uso de su índice, haya un contrato de lo que, qué es lo que debe recibir como índice y qué es lo que debe retornar:

Si el retorno es una función que retorna un string “() => string” está todo ok, pero si es distinto a eso, entonces haya un error, por ejemplo:

Fuente: Página Oficial TS

Kevin Giovanni Cano Blanco

Hasta el momento, webpack me ha dado mas problemas que ayuda o soluciones.

Luis Hernando Sendoya Serrato

documentación de mdn para aprender sobre el objeto Location

Cayo Legal

Veo que no funciona si en los links sacamos el hash, alguien sabe por que? Por ejemplo en about se rompe todo si dejo solo “about/”

Victor Hugo Cruz Carballo

const routes={
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
}

const router = async()=>{
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML=await Header();
    let hash = getHash();
    let route = await resolveRoutes(hash);
    let render = routes[route] ? routes[route] : Error404;
    content.innerHTML(render);
};

John Orellana

solo por si las moscas si tienes un [objec.promise] es por que te hase falta un (await)

Andres Cordoba

Otra manera de mostrar el render

let render = routes[route] ?? Error404;

es una simplificación del operador ternario que retorna el mismo valor que esta evaluando como primera opción

routes[route]

sino retorna el segundo valor

Error404

Andrea Lozano Cataño

No me aparecía nada de nada y después de buscar y buscar…recordé que debía dar en consola npm run start. Lo estaba abriendo en el visual studio code y por eso no veía nada.![](

Fernando Cordero

Definitivamente, era un error en el index.html, que era? nunca lo supe, solo volvi a hacerlo !!

Hermes Aguilar

Hola segun mi consola todo compila, pero no me muestra nada. ALguien me puede decir que pasa?

Byron EQ

Vamos bien hasta el momento 😃 Todo se ejecuta Ok.

Nava_Navita

A mi se sale ERROR 404!

Jhon Carlos Colorado Angulo

Continuamos,

Frank Carmona

excelentee

David Alejandro Mosquera Moreno

En realidad re-escribir el index.html sí funciona para solucionar el error de que no aparezca Name

Diego Alfonso Najera Ortiz

A mi no me funcionaba por que no puse el parametro route en resolveRoutes

const resolveRoutes = (route) => {

    if (route.length <= 3) {
        let validRoute = route === '/' ? route : '/:id'
        return validRoute
    }
    return `/${route}`
}

export default resolveRoutes

lmoran

AL correr el proyecto en vez de name me aparecía error 404, revisé el código varias veces y corroboré que todo esté ok, simplemente detuve el npm run start y lo volví a correr y funcionó.

Angélica Rocha

Genial

Germán Moreno

Sin errores! A seguir 😄

Aarón Fabricio Santa Cruz Valdez

Hay muchas cosas que no entiendo. ¿¿¿Que cursos me recomiendan tomas para poder comprender ese curso??

Esteban Casallas

woo no conocia eso del hashchange y por lo q veo es la base fundamental para las single page app, antes solo me preguntaba como era posible… Genial, gracias Platzi 💚

Campos Ruth

Me va quedando así 👏🏼

Wilkins Bernardo Brito Serrano

La mia se ve igualita, no aparece nada nuevo, le doy click en el about y no funciona

Wilkins Bernardo Brito Serrano

Necesito ayuda, cuando yo presiono Name, me lleva al error 404 en lugar del menú, ya hice algunos de los consejos que se ven en los comentarios de esta clase, así que decidí abrir el inspector como podrán ver. Les quedo de antemano muy agradecido por los aportes para solucionar este problema.

John Ruiz

Wenas a tod@s;

Despues de toda una mañana, encontre el error en el typo del Header.js.

Ojo con los typos!!!

Natalia Ortiz Maldonado

No me funcionaba por el parámetro hash del addEventListener del index.js de la carpeta source. Así lo dejé:

window.addEventListener('hashchange', router);

Documentación MDN

d-gonas

revise 2 veces cada archivo que había en src y el de webpack y algunos los vi 3 veces para asegurarme del porque no podia interactuar con “Name” para darme cuenta a la 4 ves que revise el archivo home.js
que puse </a></a> y no <a></a> xd

Jairo Merea Dueñas

ACOTACIPIÓN

Si por a o b decidiste ponerle el corchete a la arrow function, no olvides poner el return, de los contrario te lanzara undefined.

Ejemplo:

const getHash = () => {
    return location.hash.slice(1).toLocaleLowerCase().split("/")[1] || '/';
};

Naldo Duran

f

Jose Morales Varon

De aquí en adelante se vuelve confuso