Desarrollo de strapi-plugin-youtube-transcript: Guía Paso a Paso

Puntos Clave / Resumen Ejecutivo:

• Automatización de contenidos: Automatiza la extracción de subtítulos de YouTube directamente al Admin Panel de Strapi v4.
• Arquitectura modular: Creación de un plugin custom utilizando TypeScript, Services y Controllers nativos.
• Optimización SEO: Almacena transcripciones completas para mejorar la indexación y accesibilidad Web en proyectos Jamstack.

Introducción al Desarrollo de Plugins en Strapi v4

El ecosistema Headless CMS exige integraciones eficientes para acelerar la ingesta de contenido. Desarrollar un plugin propio como strapi-plugin-youtube-transcript permite transformar videos de YouTube en texto estructurado directamente en la base de datos.

Esta extensión elimina la necesidad de copiar manualmente subtítulos, mejorando drásticamente el flujo de trabajo editorial y el posicionamiento SEO del contenido transcribible.

Arquitectura del Plugin e Instalación

Para garantizar un código limpio y mantenible en producción, estructuraremos el plugin utilizando la arquitectura nativa de Strapi v4 basada en servicios, controladores y rutas expresadas en TypeScript.

Inicialización del Proyecto

Ejecuta el siguiente comando dentro de la raíz de tu proyecto Strapi para generar la plantilla base del plugin:

npx strapi generate plugin strapi-plugin-youtube-transcript

Instala la librería encargada de interactuar con el cliente de transcripción de YouTube:

npm install youtube-transcript --save

Implementación de la Lógica del Servidor (Backend Services)

El servicio será el núcleo lógico encargado de invocar la API de transcripción y procesar el array de texto recuperado.

Servicio de Extracción (server/services/transcript-service.ts)

import { Strapi } from '@strapi/strapi';
import { YoutubeTranscript } from 'youtube-transcript';

export default ({ strapi }: { strapi: Strapi }) => ({
  async fetchTranscript(videoId: string) {
    try {
      const transcript = await YoutubeTranscript.fetchTranscript(videoId);
      if (!transcript || transcript.length === 0) {
        throw new Error('No se encontraron subtítulos para este vídeo.');
      }
      
      // Formatear la respuesta unificando el texto
      const fullText = transcript.map((item) => item.text).join(' ');
      return { videoId, transcript: fullText, raw: transcript };
    } catch (error: any) {
      throw new Error(`Error procesando la transcripción: ${error.message}`);
    }
  },
});

Configuración de Controladores y Rutas API

Necesitamos exponer un Endpoint REST seguro dentro de Strapi para que la interfaz frontend o los webhooks puedan consumir la extracción.

Controlador REST (server/controllers/transcript-controller.ts)

import { Strapi } from '@strapi/strapi';

export default ({
  async getTranscript(ctx) {
    const { videoId } = ctx.query;

    if (!videoId || typeof videoId !== 'string') {
      return ctx.badRequest('El parámetro videoId es obligatorio.');
    }

    try {
      const data = await strapi
        .plugin('strapi-plugin-youtube-transcript')
        .service('transcriptService')
        .fetchTranscript(videoId);

      ctx.body = { data };
    } catch (err: any) {
      ctx.internalServerError(err.message);
    }
  },
});

Definición de la Ruta (server/routes/index.ts)

export default [
  {
    method: 'GET',
    path: '/get-transcript',
    handler: 'transcriptController.getTranscript',
    config: {
      policies: [],
      auth: false, // Ajustar según permisos RBAC necesarios
    },
  },
];

Integración en la Interfaz de Usuario (Admin Panel UI)

Para brindar la mejor experiencia de usuario (UX/UI), el plugin se integra dentro del Content Manager mediante un botón personalizado o un campo customizado (Custom Field).

• Usa Strapi Design System (@strapi/design-system) para mantener consistencia visual.
• Implementa peticiones mediante la instancia Axios configurada en @strapi/helper-plugin (useFetchClient).
• Mapea el resultado extraído directamente en un campo tipo Rich Text o Long Text.

Referencias y Documentación

• Strapi Documentation - Documentación oficial del CMS headless para la creación y gestión de plugins personalizados.
• Node.js Documentation - Guía de referencia para el entorno de ejecución de JavaScript del lado del servidor.
• TypeScript Documentation - Manual oficial de TypeScript para el tipado estricto en aplicaciones modernas.