Crear una App Web para Stream de Partidas de Ajedrez

Introducción

En este tutorial, aprenderás cómo desarrollar una aplicación web para transmitir partidas de ajedrez en directo y cómo integrarla con un sitio web de WordPress. El tutorial incluirá todos los pasos necesarios desde la configuración del entorno de desarrollo en Windows 10 hasta la compilación y la instalación de la aplicación en un sitio de WordPress.

1. Requisitos Previos

Antes de comenzar, asegúrate de tener los siguientes componentes instalados en tu sistema:

• Windows 10
• Node.js y npm
• PHP y MySQL
• Servidor web (XAMPP o WAMP)
• WordPress instalado en tu servidor local
• Editor de código (Visual Studio Code, Sublime Text, etc.)

2. Configuración del Entorno de Desarrollo

Instalación de Node.js y npm

Node.js y npm son esenciales para desarrollar aplicaciones web modernas. Puedes descargar Node.js desde su sitio web oficial.

1. Descarga el instalador de Node.js.
2. Ejecuta el instalador y sigue las instrucciones.
3. Verifica la instalación abriendo una terminal y ejecutando:

   node -v
   npm -v

Configuración del Servidor Web Local

Para desarrollar y probar nuestra aplicación web, necesitamos un servidor web local. XAMPP es una opción popular y fácil de usar.

1. Descarga e instala XAMPP.
2. Inicia Apache y MySQL desde el panel de control de XAMPP.

Instalación de WordPress

1. Descarga WordPress desde wordpress.org.
2. Extrae el contenido en la carpeta htdocs de XAMPP.
3. Crea una base de datos para WordPress usando phpMyAdmin.
4. Configura WordPress siguiendo el asistente de instalación en http://localhost/tu-carpeta-de-wordpress.

3. Creación de la Aplicación Web

Nuestra aplicación web utilizará React para el frontend y Node.js para el backend.

Estructura del Proyecto

1. Crea una nueva carpeta para tu proyecto.
2. Abre una terminal en esa carpeta y ejecuta:

   npx create-react-app chess-stream
   cd chess-stream
   npm install

Implementación del Frontend con React

Instalación de Dependencias Necesarias

1. Instala las siguientes dependencias:

   npm install axios react-router-dom

Creación de Componentes

Crea los componentes básicos para la aplicación.

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Stream from './components/Stream';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/stream/:id" component={Stream} />
      </Switch>
    </Router>
  );
}

export default App;

Home.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

const Home = () => {
  const [games, setGames] = useState([]);

  useEffect(() => {
    axios.get('/api/games')
      .then(response => setGames(response.data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>Partidas de Ajedrez en Vivo</h1>
      <ul>
        {games.map(game => (
          <li key={game.id}>
            <Link to={`/stream/${game.id}`}>{game.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

Stream.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';

const Stream = () => {
  const { id } = useParams();
  const [game, setGame] = useState(null);

  useEffect(() => {
    axios.get(`/api/games/${id}`)
      .then(response => setGame(response.data))
      .catch(error => console.error(error));
  }, [id]);

  if (!game) return <div>Cargando...</div>;

  return (
    <div>
      <h1>{game.title}</h1>
      <iframe src={game.streamUrl} frameBorder="0" allowFullScreen></iframe>
    </div>
  );
};

export default Stream;

Implementación del Backend con Node.js

1. Crea una nueva carpeta para el backend dentro de tu proyecto.
2. Inicializa el proyecto Node.js:

   mkdir backend
   cd backend
   npm init -y

3. Instala las siguientes dependencias:

   npm install express axios

Creación del Servidor

server.js

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 5000;

const games = [
  { id: 1, title: 'Partida 1', streamUrl: 'https://stream-url-1' },
  { id: 2, title: 'Partida 2', streamUrl: 'https://stream-url-2' },
];

app.get('/api/games', (req, res) => {
  res.json(games);
});

app.get('/api/games/:id', (req, res) => {
  const game = games.find(g => g.id == req.params.id);
  if (game) {
    res.json(game);
  } else {
    res.status(404).send('Partida no encontrada');
  }
});

app.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

4. Ejecuta el servidor:

   node server.js

4. Integración con WordPress

Para integrar nuestra aplicación React con WordPress, crearemos un plugin personalizado.

Creación del Plugin de WordPress

1. Navega a la carpeta de plugins de WordPress:

   cd xampp/htdocs/tu-carpeta-de-wordpress/wp-content/plugins
   mkdir chess-stream
   cd chess-stream

2. Crea un archivo chess-stream.php con el siguiente contenido:

<?php
/*
Plugin Name: Chess Stream
Description: Plugin para transmitir partidas de ajedrez en vivo.
Version: 1.0
Author: Tu Nombre
*/

function chess_stream_enqueue_scripts() {
    wp_enqueue_script('chess-stream-app', plugins_url('/chess-stream-app/build/static/js/main.js', __FILE__), array(), null, true);
}

add_action('wp_enqueue_scripts', 'chess_stream_enqueue_scripts');

function chess_stream_shortcode() {
    return '<div id="root"></div>';
}

add_shortcode('chess_stream', 'chess_stream_shortcode');
?>

3. Compila la aplicación React para producción:

   cd chess-stream
   npm run build

4. Copia la carpeta build generada en la carpeta del plugin chess-stream.

Uso del Plugin en WordPress

1. Activa el plugin desde el panel de administración de WordPress.
2. Crea una nueva página y agrega el shortcode [chess_stream].

5. Pruebas y Depuración

Asegúrate de probar la aplicación en diferentes navegadores y dispositivos para garantizar que funcione correctamente. Si encuentras algún problema, revisa los logs de errores en el servidor y en la consola del navegador.

Depuración del Frontend

1. Usa las herramientas de desarrollo del navegador (F12) para inspeccionar la consola y el DOM.
2. Asegúrate de que todas las rutas y endpoints de la API estén configurados correctamente.

Depuración del Backend

1. Revisa los logs del servidor Node.js.
2. Asegúrate de que las rutas de la API estén devolviendo los datos correctos.

6. Compilación de la Aplicación

Para preparar la aplicación para producción, sigue estos pasos:

1. Frontend: Asegúrate de que la aplicación React esté compilada con npm run build.
2. Backend: Asegúrate de que el servidor Node.js esté configurado para ejecutarse en el entorno de producción.

7. Instalación en WordPress

1. Copia el plugin chess-stream a la carpeta de plugins de tu servidor WordPress.
2. Activa el plugin desde el panel de administración de WordPress.
3. Crea una página y agrega el shortcode [chess_stream] para mostrar la aplicación de ajedrez.

8. Conclusión

Has creado con éxito una aplicación web para transmitir partidas de ajedrez y la has integrado con WordPress. Este tutorial te ha guiado a través de cada paso, desde la configuración del entorno de desarrollo hasta la compilación y la instalación en WordPress.

Jorge Ruiz

Filólogo y entusiasta del chess computer

sígueme