Conectando nuestro proyecto a la API de GitHub

Clase 14 de 24 • Curso Fundamental de Material UI con React

Patrick Jhonatan Hernandez Blanco

student•

No sé desde cuando se volvió tendencia en Platzi que los profesores se exalten durante los cursos, en pocas dosis está perfecto, pero a veces llega a ser molesto

Francisco Murillo

student•

muy de acuerdo, en lo personal no me gusta. pareciera que fueramos alumnos de primaria, pero si asi es su personalida, que mas da

Juan Esteban Orozco Botero

student•

a mi me gusta

Arturo Mauricio Terceros Beltrán

student•

Este video se debe volver a editar, esta con muchos errores. Por favor revísenlo TEAM PLATZi.

Jeniffer Cruz

student•

Gracias por tu reporte Arturo. Ya estamos revisando.

Francisco Garay

student•

Otra manera de hacerlo:

user.js

import { urlFetch } from '../constants';

export const getUser = async (user) => {
  const response = await fetch(`${urlFetch}${user}`);

  if (response.ok) {
    return await response.json();
  }

  throw new Error('Something went wrong');
};

App.jsx

useEffect(() => {
    const fetchUser = async () => {
      try {
        const data = await getUser(inputUser);
        if (inputUser == 'octocat') {
          localStorage.setItem('octocat', data);
        }
        setUserState(data);
      } catch (error) {
        const { octocat } = localStorage;
        setUserState(octocat);
      }
    };

    fetchUser();
  }, [inputUser]);

Miranda Jaramillo Morales

student•

¡Hola!

Hay muchísimos errores en la edición ¿podrían darle una revisada?

¡Gracias!

Enrique Sanchez

student•

Esta clase la sentí muy improvisada, con varios errores

Daniel Reyes

student•

Hay alguna forma de conectarme a la API de github y que me traiga información del github pages? Es decir, tengo mi portafolio con información de mis proyectos pero los hice en un documento en una lista de arrays y objetos manual, como si fuera una API interna, lo que quisiera saber es si yo puedo acceder a la info de mis repo, incluido la host url para traerlo yo directamente de allá y no tener ese archivo en mi proyecto.

Daniel Rodrigo Valdivieso Merino

teacher•

Hola Daniel, tal vez esto pueda servirte... 😊 GitHub Pages API

Daniel Reyes

student•

Genial y gracias

Gilbert Ardila

student•

Con mucho cariño por el gran esfuerzo del Platzi team y respeto por el profe Daniel pero me parece que la velocidad que lleva lo está llevando a cometer muchos errores

Adrian Villamil

student•

Thunder Client

Una alternativa para hacer peticiones a una API sin tener que descargar e instalar un programa como POSTMAN, podemos instalar la extensión de vscode llamada Thunder Client.
- Para usarlo simplemente le das clic en el ícono de extensiones que son unos cuadritos, luego en el buscador escribes thunder client, y por último lo instalas a tu vscode. Después de instalarse se verá un ícono de un trueno en la barra lateral izquierda.
- Después de estar instalada la extensión, le damos clic en el trueno y vemos que la UI es muy parecida a la de POSTMAN. Para crear una petición le damos clic en el botón New Request, agregamos la url de la api para hacer la petición y le damos en el botón de Send y a la derecha verás la respuesta a la petición con los datos.

Y listo, ya puedes hacer peticiones a apis desde vscode.

josue rodrigo fierro morfin

student•

https://api.github.com/users/

Emanuel Zarazaga

student•

Esta clase tiene un bonus track. Es un behind the scenes de un día en Platzi jajaja Hay que cortar unas partes pero no pasa nada, todo solucionable.

Luciano Giménez

student•

En el minuto 13:49 y 19:30, se olvidaron de hacer el corte.

Conectando nuestro proyecto a la API de GitHub

Introducción al curso

Bienvenida al curso

Presentación proyecto

¿Qué es Material UI?

Preparación de entorno de desarrollo

Herramientas dentro de Material UI

Componentes simples

Componentes compuestos

Contenedores responsive

Material icons

Bonus

Construcción del proyecto

Análisis detallado del proyecto

Creando el contenedor y el text field

Colocando los estilos del buscador

Construyendo la lógica del buscador

Conectando nuestro proyecto a la API de GitHub

Conectando el buscador con la API

Creando el contenedor y trayendo la imagen de perfil del usuario

Trayendo la información principal del usuario

Trayendo la descripción del usuario

Creando el componente con las estadísticas del usuario

Mostrando la localización del usuario

Ajuste de estilos con SX a los componentes de descripción e información principal

Ajuste de estilos con SX al componente de descripción, PaperInformation y LocationInformation

Evaluación del proyecto

Despedida

Resumen del curso