Captura de datos con fetch

Es el momento de añadir tus proyectos al portfolio.

Ahora es una lata ponerse a escribir y redactar esos proyectos, ¿verdad?

Aprovechemos lo que, seguramente, ya tienes comenzado en Github. Aunque, si no es así, no te preocupes, que tenemos una solución rápida.

🎧 Podcast: WR 193: Tu portfolio tiene que ser como un cocodrilo

Accediendo a la lista de repositorios de Github ¶

Github posee una API muy potente para trabajar desde fuera de la plataforma con los datos y acciones.

🔍 Una herramienta práctica y abierta sin necesidad de registro es una API que devuelve los datos de los repositorios públicos de un usuario.

Si accedes a https://api.github.com/users/webreactiva-devs/repos verás una JSON con los repos en abierto de la cuenta de Web Reactiva.

Cambia webreactiva-devs por tu nombre de usuario y, ¡ya los tienes!

Es el momento de sacar partido al poder de JavaScript y de Astro para generar un bloque capturando estos datos.

Crea un nuevo Projects.astro en /src/components.

/src/components/Projects.astro

---
const response = await fetch('https://api.github.com/users/webreactiva-devs/repos');
const projects = await response.json();
console.log(projects)
---
<div>
  <h2>Mis proyectos en Github</h2>
</div>

👀 Fíjate como en la parte del componente Astro encerrada entre --- puedes colocar JavaScript normal.

⚡️ Usamos await para esperar la respuesta de la API de Github. No hace falta colocarlo dentro de un async porque Astro lo hace por nosotros.

Incluye este nuevo componente en index.astro.

/src/pages/index.astro

---
import Hero from "../components/Hero.astro";
import Projects from "../components/Projects.astro";
import SiteLayout from "../layouts/SiteLayout.astro";
---
<SiteLayout>
  <div class="container col-xxl-8 px-4 py-5">
    <Hero
      title="Mi primera Astro web"
      imageUrl="https://placekitten.com/g/500/400"
      buttonText="Leer más"
      buttonLink="/about"
    >
    </Hero>
    <Projects />
  </div>
</SiteLayout>

💦 Recarga la página y luego fíjate en la terminal donde arrancaste npm run dev.

👀 Podrás ver lo que contiene un JSON con el array projects que hemos pintado con el console.log en nuestro nuevo componente. Es lo mismo que veías antes si cargabas la URL de los datos en el navegador.

Para hacerlo un poco accesible vamos a cambiar un poco el Projects.astro.

/src/components/Projects.astro

---
const response = await fetch('https://api.github.com/users/webreactiva-devs/repos');
const projects = await response.json();
const firstProject = {
  name: projects[0].name,
  html_url: projects[0].html_url
}
---
<div class="border p-4 my-3">
  <h2>Mis proyectos en Github</h2>
  <div><a href={firstProject.html_url}>{firstProject.name}</a></div>
</div>

👀 Para facilitarte la vida es mejor capturar un dato concreto que analizarlos todos. projects es un array, tomamos el primer valor [0]. Dentro de cada elemento del array hay un objeto con varias claves, nos quedamos con name y html_url.

Creando un componente solo con un SVG ¶

⚡️En el siguiente paso vamos a completar nuestra lista de proyectos, pero ahora vamos a sacar provecho a las ventajas de los componentes.

El formato SVG representa las imágenes como si fueran líneas, círculos, cuadrados y vectores. Eso permite que sea de tipo texto.

Crea un fichero nuevo en src/components/icons/GithubIcon.astro y pega dentro esto.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>

👀 No hace falta que tenga la extensión .svg. Astro se encargará de inyectar este HTML dentro del resto de la web.

💦 Carga este componente en Projects.astro y observa como aparecerá el logotipo de Github.

👉 Puedes utilizar el SVG que más te guste, en SVGrepo hay muchos más.

💪 Otro paso de gigantes si llegaste hasta aquí, ¡vamos a por un conocimiento muy pro!

⚡️ Pon a prueba lo que has aprendido

1. ¿Cómo se puede obtener los repositorios públicos de un usuario en Github?

2. ¿Qué es un SVG en desarrollo web?

3. ¿Cómo se pueden consumir datos de una API en un componente Astro?