- Clonar el repositorio
git clone <urlDelRepositorio> - Instalar las dependencias principales
- Ejecutar el comando
npm installdesde el archivo clonado. - Configurar la base de datos y publicarla con el comando
mongod --auth - Ejecutar la aplicación con el comando
npm start
El front es renderizado desde ./views/index.jade por express, utilizando el archivo ./public/js/main.js para la carga de cada vista, en este archivo main.js se llevarán todas las variables necesarias para el funcionamiento de la aplicación.
- En este archivo
index.jadevienen las librerias js externas : - jQuery
./public/js/jquery-3.2.1.min.js - jQuery forms
./public/js/jquery.form.min.js - Bootstrap 3
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa', crossorigin='
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', rel='stylesheet', integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u', crossorigin='anonymous')
./public/css/font-awesome.min.css - Slick
./public/css/slick.css
./public/css/slick-theme.css
./public/js/slick.min.js - momentjs
./public/js/moment-with-locales.js
Notas:
- Cada vista es un archivo html ubidado en la carpeta
./public/views/.- Cada vista tiene un Módulo scss encargado de darle los estilos específicos a esa vista, este módulo está ubicado en la carpeta
./public/scss/modules/.- Cada vista debe ser cargada desde el array de vistas en el archivo
./public/js/main.js.
Las vistas deben ser creadas en html, se le pueden agregar cualquier tipo de librerías externas a cada vista específica o se le puede agregar al archivo index.jade para utilizarlas de forma global en cada vista.
Se recomienda darle una clase o id a cada vista para facilitar el referenciamiento en el js y en el scss.
Para crear una nueva vista se debe :
Crear un nuevo archivo html en la carpeta
./public/views/– Por ejemplo, crearemos un archivo llamado
ejemplo.htmlAgregar el nombre de el nuevo archivo al array de vistas sin la terminación
.htmlvar divs = ['gender', 'name', 'age', 'size', 'sizePrimi', 'occasion', 'weather', 'color', 'personality', 'result' 'ejemplo'];
Para cargar una vista, la aplicación tiene una función base loadView(cur) que acepta como parámetro un objeto jQuery que hace referencia al tag html en el cual se quiera renderizar la vista.
Ejemplos
loadView($('#ejemplo'));
La forma correcta de cargar una vista es utilizar las funciones next(cur) o previous(cur) que acepta como parámetro un String con el nombre de la vista sin la terminación .html, este String es recibido por la función loadView(cur) o por convención, la variable current que contiente el String de la vista actual.
Ejemplos
next(current);next('ejemplo');next(divs[10]);previous(current);previous('ejemplo');previous(divs[10]);Cada función tiene una animación
<ul> <li><code>next()</code> desliza la vista actual hacia la izquierda y desliza la nueva vista desde la derecha hacia el centro.</li> <li><code>previous()</code> desliza la vista actual hacia la derecha y desliza la nueva vista desde la izquierda hacia el centro.</li> </ul>
El archivo principal main.js es el que se encarga de toda la lógica del front, está ubicado en ./public/js/main.js y toma como referencia el archivo ./public/js/variables.js para cargar variables como divs la cuál contiene un array con los String de cada vista disponible en la aplicación, este archivo también contiene todas las variables que mostrarán varios String a lo largo de la aplicación, los cuales serán editables desde el modo administrador.
En este archivo main.js se lleva un rastreo de todas las variables necesarias en cada vista.
loadView()
Esta función hace un llamado al método.load()dejQueryel cuál tiene un callback en el cual se define la lógica de cada vista mediante unif (current == 'ejemplo'); si se cumple esta condición, la vistaejemplo.htmlcargó exitosamente y la aplicación procerderá a ejecutar la lógica dentro de el condicional sobre esta vista, pudiendo así utilizar las variables globales en cualquier vista.
El SCSS se encarga de compilar todos los estilos css de la aplicación en la carpeta ./public/css/main.css, esto se logra por medio del archivo main.scss ubicado en ./public/scss/main.scss, este archivo contiene los estilos del index.jade y carga todos los módulos de la carpeta ./public/scss/modules en la cuál estarán los archivos scss de cada vista y algunos archivos globales como _variables.scss que contiene todas las variables de estilo que se utilizarán a lo largo de la aplicación.
Nota
Para compilar una vez estos archivos se debe instalar Sass y correr el comandosass --update scss:cssen la carpeta./public, o correr el comandosass --watch scss:csspara que compile cuando hayan cambios en cualquierscss.
Para acceder al admin debemos ir a la ruta /admin, en esta ruta el archivo index.jade retorna la variable var admin = true y el main.js verifica a través del LocalStorage si hay una sesión activa, en caso tal de que haya una sesión activa, el main.js carga el front con la barra de administrador o de call-center de acuerdo al rol.
En caso tal de que no haya una sesión activa, el main.js carga la vista de inicio de sesión donde se podrá ingresar con las credenciales.
En la ruta principal
/el archivoindex.jaderetorna la variablevar admin = false.
Por defecto está desactivada, en caso de estar activada, esta función permitiría que el cliente avanzar a lo largo de al aplicación, cerrar la pestaña, volver a ingresar y continuar donde estaba siempre y cuando sea en el mismo navegador.
Se puede activar la función de persistencia cambiando la variable
persistencyen el archivomain.jsatrue.
Se utiliza NodeJS con express para servir la aplicación, la API REST y renderizar el index.jade
Todas las configuraciones del servidor que corre por express están en el archivo ./offcorssAssistantBack.js , acá se configura el router y cada ruta.
Para más información referirse a la documentación.
Cada ruta se define en la carpeta ./routes y se debe importar en el archivo ./offcorssAssistantBack.js asignándole su ruta.
Para más información referirse a la documentación.
Se utiliza MongoDB como motor de base de datos para el manejo de datos de la aplicación.
Para configurar la base de datos se debe crear un usuario en la base de datos admin con los accesos necesarios para la aplicación (root, userAdminAnyDatabase, dbAdminAnyDatabase).
Luego de haber creado los accesos, se debe modificar la variable mongoURL en el archivo ./routes/db.js, la cadena de conexión deberá quedar así
var mongoURL = process.env.MONGODB_URI ||
process.env.MONGOHQ_URL ||
'mongodb://<user>:<pwd>@localhost:27017/assistant?authSource=admin';
La aplicación dedica una ruta de express Router a lo que tenga que ver con llamados a la base de datos, esta ruta /db contenida en el archivo /routes/db.js utiliza mongoose para el manejo de llamados desde node y express, también importa los modelos ubicados dentro de la misma carpeta para la manipulación de cada colección dentro de la base de datos.
Utiliza también crypto para verificar contraseñas del administrador.
Robomongo
Se recomienda el uso de esta aplicación para la visualización y manipulación de la base de datos en una forma gráfica y amigable al usuario.