Estadísticas de Repositorio GitHub

En esta página, mostramos un gráfico en tiempo real que indica el número de estrellas de un repositorio de GitHub.
El gráfico se actualiza automáticamente cada minuto utilizando la API pública de GitHub. A continuación, se explica cómo se ha implementado esta prueba basada en el repositorio de TensorFlow:

Pasos Realizados

1. Identificar la URL del Repositorio: Para poder acceder a la información del repositorio de GitHub, primero necesitamos la URL del repositorio. Esta URL se puede obtener directamente desde la página del repositorio en GitHub. Una vez que tenemos esta URL, la convertimos en una URL de API siguiendo el formato estándar que GitHub proporciona. Este formato es https://api.github.com/repos/usuario/repositorio, donde "usuario" es el nombre del usuario o la organización que posee el repositorio y "repositorio" es el nombre del repositorio en sí.

2. Configurar el Gráfico: Utilizamos Chart.js, una biblioteca JavaScript flexible y fácil de usar, para crear un gráfico de línea que muestra el número de estrellas del repositorio. Chart.js nos permite personalizar el gráfico con diversos estilos y configuraciones para hacerlo visualmente atractivo y fácil de entender. Configuramos el gráfico para que muestre el tiempo en el eje X y el número de estrellas en el eje Y, permitiendo así una visualización clara de cómo cambia la popularidad del repositorio con el tiempo.

3. Obtener Datos con fetch: Para obtener los datos del repositorio, utilizamos la función fetch de JavaScript, que nos permite realizar solicitudes HTTP de manera sencilla y manejar las respuestas de forma asíncrona. Realizamos una solicitud a la API de GitHub utilizando la URL de API que hemos construido previamente. La respuesta de esta solicitud es un objeto JSON que contiene, entre otras cosas, el número de estrellas del repositorio, al cual accedemos mediante la propiedad stargazers_count.

4. Actualizar el Gráfico: Procesamos la respuesta de la API y actualizamos el gráfico en tiempo real, añadiendo nuevos datos cada minuto. Para esto, utilizamos una combinación de funciones de JavaScript que nos permiten añadir nuevas etiquetas y datos al gráfico, y luego actualizarlo para reflejar estos cambios. Utilizamos setInterval para configurar una actualización automática cada 60 segundos, asegurando así que los datos del gráfico estén siempre actualizados y reflejen el estado actual del repositorio.