Estructura_es

En este proyecto utilizamos yarn para gestionar las dependencias y webpack-dev-server para ejecutar el servidor de desarrollo. El proyecto se basa en 2 aplicaciones React: el editor y el visor. Ambas se ejecutan en un servidor webpack que facilita enormemente el desarrollo recargando los nuevos cambios directamente en el navegador, sin necesidad de reconstruir la aplicación cada vez que se realiza una modificación. El editor adicionalmente emplea Redux para controlar el estado de la aplicación de forma centralizada. Este mismo estado lo hereda el visor, pero no precisa de Redux puesto que en el visor la información es de sólo lectura. La estructura de directorios del proyecto es la siguiente:

ediphy
├── _editor
|  ├── components
|  └── containers
├── _visor
|  ├── components
|  └── containers
├── common
├── core
|  ├── editor
|  ├── scorm
|  ├── store
|  └── visor
├── dist
|  ├── images
|  ├── js
|  └── lib
├── doc
├── ediphy_server
├── locales
├── plugins
├── reducers
├── sass
└── webpack_plugins

_editor

En la carpeta editor encontraremos los componentes de React y hojas de estilo correspondientes a la aplicación de Editor. Dentro de ella hay 2 carpetas (containers y components), que a su vez se dividen en subcarpetas para organizar los distintos componentes. Todas tienen nombres muy orientativos para indicar a qué parte de la aplicación corresponden. En la seccion Componentes se explica con detalle la función de cada componente de React. El componente raíz es ReduxProvider.jsx, donde se inicializa la aplicación, se realiza la conexión con Redux, se importa el estado inicial, etc.

_visor

Esta carpeta es equivalente a la anterior para la aplicación de visualización. Destaca el componente Visor.jsx que, aunque se renderiza en el Editor, contiene el iframe en el que se renderiza el visor. El componente EditorVisor.jsx es el componente raíz de la aplicación del visor.

common

En este directorio se encuentran ficheros Javascript (ES6) comunes a todo el proyecto:

• common: Carpeta que contiene componentes que se emplean tanto en el editor como en el visor.
• actions.es6: Define las acciones de Redux.
• common_tools.es6: Define funciones recurrentes de carácter general que se emplean en toda la aplicación (para controlar el aspect ratio de las diapositivas o la funcionalidad de pantalla completa, por ejemplo).
• constants.es6: Define constantes de texto de diversa índole, mayoritariamente los prefijos que se usan internamente en el estado para distinguir las páginas, los documentos, las cajas, las marcas, etc.
• plugins_inside_plugins.es6: Define funciones recurrentes para manipular y crear los plugins complejos (plugins dentro de plugins).
• utils.es6: Define funciones recurrentes para manipular y consultar el estado de la aplicación (por ejemplo comprobar si una página es slide o documento).

core

En este directorio se ubica el núcleo del proyecto que habilita la funcionalidad del contenido basado en plugins.

• editor
  • accordion_provider.es6: Contiene funciones necesarias para la creación de las toolbars.
  • base_plugin.es6: Clase base JavaScript para la creación de plugins.
  • main.es6: Eje central del editor, unifica todas las distintas partes de la configuración
  • plugins.es6: Contiene las funciones necesarias para gestionar la renderización de plugins.
  • print.es6: Contiene las funciones necesarias para convertir el contenido del documento en PDF.
• visor
  • base_plugin.es6: Clase base JavaScript para la creación de plugins en modo visualización.
  • correction_functions.es6: Contiene las funciones de corrección de los plugins de ejercicios.
  • main.es6: Contiene la funcionalidad de exportar la aplicación en formato ZIP.
  • plugins.es6: Contiene las funciones necesarias para gestionar la renderización de plugins en el visor.
  • visor_entrypoint.es6: Pasa la información necesaria del editor al visor
• scorm
  • main.es6: Contiene la funcionalidad de exportar la aplicación en formato SCORM (ZIP)
  • SCORM_API.es6: Contiene la API de SCORM.
  • SCORM_WRAPPER.es6: Se trata de una segunda API que hace uso de la API de SCORM para crear funciones de más alto nivel para gestionar las puntuaciones y demás atributos de SCORM del curso.
• store: Carpeta que contiene una serie de estados iniciales por defecto para Ediphy.
• config.es6: Configuración general de development del proyecto.
• config_noserver.es6: Configuración de producción del proyecto para su despliegue en Github pages.
• config_production.es6: Configuración de producción del proyecto para su despliegue en ViSH.

dist

Es el directorio 'público', por así decirlo. Aquí se encuentran los archivos accesibles desde el servidor de desarrollo y se generan los bundles para producción. También aquí se encuentran las imágenes y scripts que no se han incluído en el bundle de la aplicación. Entre estos últimos destaca el editor CKEditor que empleamos para la edición de texto en la aplicación.

doc

En este directorio se encuentra la documentación del proyecto. Se trata de otra aplicación React que carga las páginas de la WIKI del proyecto. El árbol de contenido se define en src/content.es6 y se especifica la URL de la página de la wiki de la que se debe obtener el contenido.

ediphy_server

Se trata de un servidor para emplear en desarrollo y probar la funcionalidad de guardar/abrir un curso desde un servidor remoto. Se define en server.js y el estado se guarda en formato JSON (config.json).

locales

En locales se gestiona la internacionalización del proyecto y se definen todas las cadenas de texto traducidas. Por el momento la aplicación se ofrece en inglés y castellano. Toda la aplicación tiene acceso a la librería i18next. Los desarrolladores de plugins pueden definir sus cadenas de texto propias para su plugin en concreto, creando una carpeta locales con ficheros en.js y es.js, pero la carpeta locales del directorio raíz es para cadenas de texto de uso general.

Para importar la librería de traducción es necesario añadir la siguiente línea al principio del fichero javascript en el que deseemos usarla:

import i18n from 'i18next';

Un ejemplo de uso es el siguiente:

i18n.t("clave")

En nuestros ficheros de locales habríamos definido previamente el valor en cada idioma de para la clave dada.

plugins

En esta carpeta se incluyen los directorios de cada uno de los plugins que contendrá la aplicación. En la sección de plugins de la documentación se concreta más la estructura del directorio de cada plugin.

reducers

Se trata de la carpeta que incluye las funciones reductoras de Redux. En la sección de la documentación correspondiente a Redux se puede averiguar mas sobre el tema.

sass

Como motor de CSS empleamos SASS. Esta carpata contiene los estilos generales de la aplicación. Como ya se mencionó antes, los componentes de React tienen cada uno su propia hoja de estilos (.scss) definida junto al componente.

webpack_plugins

Contiene plugins customizados para webpack, como el que crea los ZIPs para la exportación dinámicamente, o el que incluye las dependencias de los plugins en el mismo node_modules que las dependencias generales de la aplicación.