ARQUITECTURA Y DISEÑO DE LA APLICACIÓN 

 
 
TECNOLOGÍAS WEB QUE SE IMPLEMENTARON 
 
Node.js 
Node.js  es  un  entorno  de ejecución para JavaScript construido con el motor de JavaScript 
V8  de  Chrome.  Este  entorno  permite  correr  scripts  y  programas  hechos  en  JavaScript 
desde  el  servidor.  Para  el  proyecto  se  utilizó  para  la  manipulación  de  las  tablas, 
convirtiendo los archivos CSV a JSON a través de la biblioteca D3.[3] 
 
ReactJS 
Es  una  librería  de  código  abierto  escrita  en  JavaScript  que  permite  escribir  interfaces 
gráficas  en  la  web,  React  puede  ser  usada  como  base  para  el  desarrollo  de  apliaciones 
one­single­page, tanto web como en móviles. [1] 
ReactJS  presenta  el  concepto  del  virtual  DOM  que  brinda  mayor  rendimiento  en 
aplicaciones  grandes  que  contienen  muchos  elementos  y  actualizaciones  constantes  de 
sus datos. 
 
Redux 
Es  una  biblioteca  de  código  abierto  escrita  en  JavaScript  para  manejar  el  estado  de  la 
aplicación.  Es  más comúnmente usada con bibliotecas como Reactjs o Angular para crear 
interfaces  gráficas.  Inspirada  en  la  arquitectura  Flux  de  Facebook,  fue  creada  por  Dan 
Abramov y Andrew Clark. [2] 
Redux  es  una  biblioteca  pequeña  con  una  simple  y  limitada  API  diseñada  para  ser  un 
contenedor  predecible  del  estado  de  la  aplicación.  Funciona  de  manera  similar  a  una 
función reductora, un concepto de programación funcional. 
Más  que  una  biblioteca  Redux  es  una  arquitectura  que  permite  conocer  y  manipular  de 
manera  predecible  el  flujo  de  los  datos  de  la  aplicación,  desde  que  es  obtenida  a  través 
de la base de datos, hasta que es presentada en la web. 
 
D3 
D3.js  es  una  biblioteca  de  JavaScript  para  manipular  documentos  basados  en  datos.  D3 
ayuda  a  visualizar  información  usando  HTML,  SVG  y  CSS.  Hace  énfasis  en  los 
estándares  web,  brindando  todas  las  capacidades  de  los  navegadores  modernos  sin 
atarse  a  un  framework  propietario  específico,  combinando  componentes  de  visualización 
poderosos,  enfoque  de  manejo  de  datos  con  la  manipulación  del  DOM.  Para  el  proyecto 
se utilizaron las funciones para convertir CSV a JSON de esta biblioteca. [4] 
 
 
Three.js (WebGL) 
Three.js  es  una  biblioteca  JavaScript  multiplataforma  y  una  Interfaz  de  programación  de 
aplicaciones (API) usada para crear y visualizar Gráficos de computadora 3D animados en 
un  navegador  web.  Three.js  permite  la  creación  de  animaciones  3D  aceleradas  de 
Graphical  Processing  Unit  (GPU)  utilizando  el  lenguaje  JavaScript  como  parte  de  un  sitio 
web  sin  depender  de  complementos  de  navegador  propietarios.  Esto es posible gracias a 
la  llegada  de  WebGL.  Para  el  desarrollo  del  proyecto  se  usó  esta  biblioteca  para  la 
visualización y simulación del espacio al cual se le va a hacer el proceso de enfriamiento y 
acondicionamiento. [5] 
 
 
Flujo del programa 
 
El  software  se  puede  dividir  en  tres  capas  o  estructuras  principales:  Datos,  funciones 
matemáticas  de  cálculo,  e  interfaz  gráfica.  El  diagrama  de  componentes  del  software  se 
encuentra en la  imagen 1 . 
 

 
Imagen 1.  Diagrama del diseño de la aplicación. 
 
Los  datos  son  obtenidos  de  las  diferentes  fuentes  bibliográficas  y  son  almacenados  en 
hojas  de  cálculo  de  google  docs  o   Google  Spreadsheets,   estas  se  encuentran 
almacenadas  en  la  nube  y  disponibles  para  cuando  se  quiera  consultar  o  modificar  la 
información.  Las  razones  para  la  elección  de  este  medio  de  almacenamiento  de  base  de 
datos,  fue  la  fácil  implementación,  la  baja  curva  de  aprendizaje  y  el  hecho  que  no  se  le 
agregaría  al  programa  una  capa  de  complejidad  innecesaria  que  sí  tendría  un 
administrador  de  base  de  datos  (DBA)  como  MySQL,  SQL  Server  u  otros  que  se 
encuentran  en  el  mercado.  Adicionalmente  los  datos  de  las  tablas  son  estándares  y  el 
programa  no  los  va  a  modificar,  así  que  no  se  necesita  ese  tipo  de  persistencia  a  través 
de DBAs. 
Los  datos  de  las  tablas  son  exportados  al  formato  simple  CSV  y  luego  convertidos  a 
formato  JSON  (JavaScript  Object  Notation)  los  cuales  son  fácilmente  leídos  por  el 
software que está escrito en JavaScript. 
 
Los  datos  de  las  tablas  son  leídos  y  almacenados  en  la  memoria  junto  con  la 
configuración  inicial  de  la  aplicación,  esta  información  inicia,  es manejada por Redux y es 
llamada  estado.  Las  tablas se tendrán disponibles para los cálculos de cargas, y el estado 
será cambiante, dependiendo de la configuración que el usuario desee. 
 
Se  denomina  estado,  porque  constantemente  cambia  y  es  importante  poder  controlar  el 
flujo  de  los  datos  con  precisión  para  no  tener  resultados  indeseables  o  errores  en  la 
aplicación.  Para  el  manejo  del estado es imperativo mantener tres principios básicos en la 
arquitectura, estos son: 
 
Única fuente de verdad 
El  estado  de  toda  la  aplicación  se  almacena  en  un  árbol  de  objetos  dentro  de  un  único 
almacén,  esto  hace  fácil  la  creación  de  la  aplicación,  simplifica  el  proceso  de  corrección 
de  errores  e  inspección;  también  permite  que  los  datos  de  la  app  persistan  mientras  de 
implementa el código,  aumentando el ciclo de desarrollo.  
 
El estado es de sólo lectura 
La  única  forma  de  cambiar  el  estado  es  emitiendo  una  acción,  que  es  un  objeto  que 
describe  qué  ocurre.  Esto  asegura  que  ni  las  acciones  del  usuario  ni  las  peticiones  a  las 
bases  de  datos  escriban  directamente  al  estado.  En  vez  de  eso,  estos  eventos  expresan 
una  intención  de  transformar  el  estado.  Debido  a  que  todos  los  cambios  están 
centralizados  y  pasan  uno  por  uno  en  estricto  orden,  no  hay   race  conditions   a  tener  en 
cuenta.  Como  las  acciones  son  simples  objetos  planos,  ellos  pueden  ser  registrados, 
serializados y almacenados. 
 
Los cambios son hechos con funciones puras 
Para  especificar  cómo  el  árbol  de  estado  es  transformado  por  acciones,  se  escriben 
funciones  reductoras  puras.  Las  funciones  reductoras  toman  el  estado  anterior  y  una 
acción, y retornan el estado siguiente. Se retorna un nuevo objeto estado, en vez de mutar 
el estado previo. 

Una  vez  creado  el  estado  pasa  a  través  de  una secuencia de funciones matemáticas que 

junto  con  los  datos  de  las  tablas  calculan  los  valores  finales  de  calor  requeridos  que  son 
visualizados por la interfaz gráfica. 
 
   
Componentes webs de la aplicación 
 
Las  interfaces  gráficas  creadas  en  Reactjs  consisten  en  los  formularios  donde  se 
configura  el  entorno  a  calcular   imagen  3 ,  y  la  simulación del recinto en 3D elaborada con 
la  biblioteca  Three.js,  el  cual  cambia  de  orientación  de  acuerdo  a  los  eventos  del  mouse 
del  usuario,  cambia  de  tamaño  de  acuerdo  a  las  dimensiones  que  se  especifiquen  y 
cambia  de  luminosidad  de  acuerdo  al número de luces que se le asignen en el formulario, 
la visualización se ilustra en la  imagen 2 . 
 
Una  vez  calculado  los  valores,  se  puede  exportar  o  guardar  el  archivo  del  proyecto, para 
posteriores modificaciones. 
 

 
Imagen 2.  Pantalla principal de la interfaz. 
 

 
Imagen 3.  Formularios para agregar propiedades de puertas y ventanas. 
 
Fuentes 
1. https://reactjs.org/docs/getting­started.html 
2. https://es.redux.js.org/ 
3. https://nodejs.org/es/about/ 
4. https://d3js.org/ 
5. https://threejs.org/docs/index.html#manual/en/introduction/Creating­a­scene 
6. https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaSc
ript