• Front end

  • Html
  • CSS
    • Flex
    • Grid
  • Flags API

• Back End

  • NodeJS
    • Express
    • child_process
    • EJS view Engine
    • fs
  • Python
    • pandas
    • statsbomb
    • matplotlib
    • mplsoccer
  • JSON

• Players: Se recuperan los datos de todos los jugadores con el módulo fs, del archivo players.json. Posteriormente se hace un render de la vista, y la página permite al cliente seleccionar un jugador de los 34 posibles para solicitar su mapa de toques.

• Map: Cuando llega la request del usuario con el ID del jugador de interés, ocurren dos subprocesos

  • 1) Borrado de todas las imagenes generadas anteriormente: Se elimnan todas las imagenes que existan en la carpeta gen_img, para ahorrar espacio.
  • 2) Ejecución del script de python: Haciendo uso del método "exec" del paquete "child-process" de node, se ejecuta el script "main.py", que se encarga de crear el mapa del jugador con el ID solicitado, el cual se pasa como parámetro de consola. Este script devuelve una dirección que corresponde a la imagen generada, la cual se utilizada luego para hacer el render.

• main.py: Rescata el ID del jugador recibido como parámetro y se encarga de ejecutar la solicitud a la open API de statsbomb para pedir información sobre todas las intervenciones de ese jugador en el partido. Posteriormente rescata los datos de ubicación de esas intervenciones y las integra en una instancia de la clase Pitch, del módulo mplsoccer. Luego, diferenciando los goles con un color diferente, dibuja el mapa y lo guarda en la carpeta gen_img, en formato png. Para nombrar las imágnes se utiliza un número que corresponde a una fecha en milisegundos. Al finalizar, imprime en consola la url de la imagen generada, para ser rescatada por node.

Debe tener instalado el intérprete de python y las bibliotecas que se encuentran en requeriments.txt

Para la instalación de los módulos necesarios de python, abrir una terminal en el directorio y ejecutar:

pip install -r requirements.txt

Para instalar todos los módulos necesarios de node, ejecutar el siguiente comando:

npm install

Una vez finalizada la instalación de todo lo necesario, ejecutar el siguiente comando para levantar el servidor:

npm run start

Aclaración: El puerto por defecto en el que se levantará el servidor es el 3006, pero puedes cambiarlo editando la variable PORT que se encuentra en index.js.

├──index.js     # Entrypoint
├──package.json 
├──package-lock.json
├──README.md
├──.gitignore
├──requirements.txt 
├──node_modules
├──public
    ├──gen_img          #Imágenes generadas
    ├──players_img      #Imágenes de los jugadores
    ├──styles
├──src
    ├──routes
        ├──map.routes.js
    ├──controllers
        ├──mapController.js
    ├──scripts
        ├──main.py
    ├──views
        ├──home.ejs
        ├──map.ejs
        ├──players.ejs
    ├──data
        ├──players.json