Cómo obtener el número de seguidores de Twitch en el proceso de build para Astro

Daniel J. Saldaña
15 de septiembre de 2024
- Desarrollo
Puntuación de feedback

En este tutorial, te mostraré cómo puedes automatizar la obtención del número de seguidores de Twitch y mostrarlo en tu sitio web generado con Astro. Este enfoque es perfecto si deseas tener datos actualizados cada vez que se genera tu sitio, integrando un script en el proceso de build.

¿Qué vamos a hacer?

Obtener el token de acceso de Twitch automáticamente.
Obtener el número de seguidores del canal de Twitch.
Integrarlo en el build de Astro para que los datos de seguidores se actualicen cada vez que se ejecute el build.

Paso 1: Configurar una aplicación en Twitch

Primero, necesitas crear una aplicación en Twitch para obtener tu Client ID y Client Secret.

Ve a Twitch Developers.
Crea una nueva aplicación y anota el Client ID y el Client Secret.
Añade una URL de redirección (puedes usar http://localhost).

Paso 2: Crear el script para obtener los seguidores

Aquí tienes un script de Node.js que se encargará de obtener el Access Token automáticamente, obtener el Broadcaster ID del canal, y luego obtener el número de seguidores.

require('dotenv').config();
const axios = require('axios');
const fs = require('fs');
const path = require('path');

// Variables de entorno
const clientId = process.env.TWITCH_CLIENT_ID;
const clientSecret = process.env.TWITCH_CLIENT_SECRET;
const userChannel = process.env.TWITCH_USER_CHANNEL;

// Definir la ruta del archivo donde guardaremos los seguidores
const outputPath = path.join(__dirname, '..', 'src', 'config', 'twitch.json');

// Función para obtener el token de acceso de Twitch
const getAccessToken = async () => {
  try {
    const response = await axios.post('https://id.twitch.tv/oauth2/token', null, {
      params: {
        client_id: clientId,
        client_secret: clientSecret,
        grant_type: 'client_credentials',
      },
    });

    return response.data.access_token; // Retorna el token de acceso
  } catch (error) {
    console.error('Error obteniendo el token de acceso:', error.response ? error.response.data : error.message);
  }
};

// Función para obtener el ID del canal
const getBroadcasterId = async (accessToken) => {
  try {
    const response = await axios.get('https://api.twitch.tv/helix/users', {
      headers: {
        Authorization: `Bearer ${accessToken}`,
        'Client-ID': clientId,
      },
      params: {
        login: userChannel, // Nombre del canal
      },
    });

    return response.data.data[0].id; // Retorna el ID del canal
  } catch (error) {
    console.error('Error obteniendo el ID del canal:', error.response ? error.response.data : error.message);
  }
};

// Función para obtener el número de seguidores
const getFollowersCount = async (accessToken, broadcasterId) => {
  try {
    const response = await axios.get('https://api.twitch.tv/helix/channels/followers', {
      headers: {
        Authorization: `Bearer ${accessToken}`,
        'Client-ID': clientId,
      },
      params: {
        broadcaster_id: broadcasterId, // ID del canal
      },
    });

    return response.data.total; // Retorna el número de seguidores
  } catch (error) {
    console.error('Error obteniendo los seguidores:', error.response ? error.response.data : error.message);
  }
};

// Función para guardar los datos en un archivo JSON
const saveFollowersToFile = (followersCount) => {
  const data = {
    channel: userChannel,
    followers: followersCount,
    timestamp: new Date().toISOString(),
  };

  // Escribir los datos en el archivo JSON
  fs.writeFileSync(outputPath, JSON.stringify(data, null, 2));
  console.log(`Datos guardados en ${outputPath}`);
};

// Función principal para ejecutar el proceso
const main = async () => {
  const accessToken = await getAccessToken();

  if (accessToken) {
    const broadcasterId = await getBroadcasterId(accessToken);

    if (broadcasterId) {
      const followersCount = await getFollowersCount(accessToken, broadcasterId);

      if (followersCount !== undefined) {
        saveFollowersToFile(followersCount);
        console.log('Número de seguidores guardado correctamente.');
      }
    }
  }
};

// Ejecutar el script
main();

Paso 3: Integrar el Script en tu proceso de build de Astro

Para hacer que este script se ejecute automáticamente durante el proceso de build de Astro, sigue estos pasos:

Instala las dependencias necesarias:
Terminal window
```
npm install axios dotenv
```

Configura las variables de entorno en un archivo .env en la raíz del proyecto:

TWITCH_CLIENT_ID=tu-client-id
TWITCH_CLIENT_SECRET=tu-client-secret
TWITCH_USER_CHANNEL=tu-nombre-de-canal

Modifica tu archivo de build para ejecutar el script antes de que se genere tu sitio web. Puedes agregar un comando en tu package.json:
```
"scripts": {
  "prebuild": "node scripts/twitch-followers.js",
  "build": "astro build"
}
```

De esta forma, el script se ejecutará automáticamente antes de cada build, actualizando el número de seguidores en el archivo twitch.json.

Paso 4: Mostrar los seguidores en tu página de Astro

Ya que el número de seguidores se guarda en un archivo JSON (twitch.json), puedes importarlo y mostrarlo en tu página de Astro:

import twitch from '@config/twitch.json';

<p>{twitch.followers} Seguidores</p>;

¡Y eso es todo!

Has automatizado la obtención del número de seguidores de Twitch y lo has integrado en tu sitio de Astro. Cada vez que ejecutes un build, los datos se actualizarán automáticamente.

Espero que te haya sido útil. ¡Disfruta del desarrollo! 🚀

Feedback del Post