Cra-template-coa-application-template NPM

Proyecto Base Aplicaciones Front-End COA

Esta es la estructura base de un proyecto front-end para las aplicaciones desarrolladas en COA que se integraran con el marcador predictivo Aheeva en su entorno AWA, este proyecto ya incluye las configuraciones necesarias para su despliegue en Kubernetes.

Dependencias

Dependencia	Version Utilizada
@material-ui/core	^4.11.0
@material-ui/icons	^4.9.1
axios	^0.20.0
classnames	^2.2.6
flexboxgrid	^6.3.1
history	^5.0.0
lodash	^4.17.20
react	^16.13.1
react-dom	^16.13.1
react-hot-loader	^4.12.21
react-redux	^7.2.1
react-router-dom	^5.2.0
redux	^4.0.5
redux-devtools-extension	^2.13.8
redux-logger	^3.0.6
redux-thunk	^2.3.0

Dev-Dependencia	Version Utilizada
@babel/cli	^7.11.6
@babel/core	^7.11.6
@babel/preset-env	^7.11.5
@babel/preset-react	^7.10.4
autoprefixer	^10.0.0
babel-eslint	^10.1.0
babel-loader	^8.1.0
browser-sync	^2.26.12
browser-sync-webpack-plugin	^2.2.2
cross-env	^7.0.2
css-loader	^4.3.0
eslint	^7.9.0
eslint-loader	^4.0.2
eslint-plugin-import	^2.22.0
eslint-plugin-react	^7.20.6
file-loader	^6.1.0
html-webpack-plugin	^4.5.0
node-sass	^4.14.1
path	^0.12.7
postcss-loader	^4.0.2
prop-types	^15.7.2
sass-loader	^10.0.2
style-loader	^1.2.1
url-loader	^4.1.0
webpack	^4.44.2
webpack-cli	^3.3.12
webpack-dev-server	^3.11.0
webpack-merge	^5.1.4

Comandos NPM Del Proyecto

npm start - Comando que nos permite ejecutar nuestro proyecto en modo local, es necesario que la etiqueta base del archivo src/index.html se encuentre con el valor '/' (este punto se define mas adelante).
npm run build-dev - Comando que nos permite compilar nuestro proyecto con el profile dev (configuracion del archivo configDEV.json), el resultado del codigo transpilado por webpack lo dejara en la carpeta dist/(nombre del proyecto declarado en la propiedad homepage del package.json), este comando nos permite agregar el logger que nos muestra en la consola del navegador todos los cambios de estado (Redux).
npm run build-qa - Comando que nos permite compilar nuestro proyecto con el profile qa (configuracion del archivo configQA.json), el resultado del codigo transpilado por webpack lo dejara en la carpeta dist/(nombre del proyecto declarado en la propiedad homepage del package.json), este comando nos permite agregar el logger que nos muestra en la consola del navegador todos los cambios de estado (Redux).
npm run build-prod - Comando que nos permite compilar nuestro proyecto con el profile prod (configuracion del archivo configQA.json), el resultado del codigo transpilado por webpack lo dejara en la carpeta dist/(nombre del proyecto declarado en la propiedad homepage del package.json), así mismo este comando no agregue el logger que nos permite ver los cambios de estado (Redux) en la consola del navegador.

Estructura Del Proyecto

.babelrc - Archivo que contiene la configuración de Babel.
.dockerignore - Archivo que contiene los archivos y directorios que debe ignorar al ejecutar algun comando docker.
.eslintrc.js - Archivo que contiene las reglas para validar la sintaxis del codigo escrito, y si encuentra algun problema dentro de la codificacion dichas reglas no nos permiten compilar el codigo hasta que se resuelvan.
.gitignore - Archivo que contiene los archivos y directorios que debe ignorar y no subir al repositorio de codigo.
config.json - Archivo de propiedades que se utilizara al ejecutar el proyecto con el profile = local (se utiliza cuando se ejecuta el comando npm start).
configDEV.json - Archivo de propiedades que se utilizara al ejecutar el proyecto con el profile = dev (se utiliza cuando se ejecuta el comando npm run build-dev).
configQA.json - Archivo de propiedades que se utilizara al ejecutar el proyecto con el profile = qa (se utiliza cuando se ejecuta el comando npm run build-qa).
configPROD.json - Archivo de propiedades que se utilizara al ejecutar el proyecto con el profile = prod (se utiliza cuando se ejecuta el comando npm run build-prod).

Nota: Siempre se debe configurar la propiedad PATH_APLICACION en cualquier ambiente ya que se utiliza en las constantes que invocan el helper history, y debe ser el mismo que se declara en la propiedad homepage del package.json. y debe quedar asi en cualquiera de los ambientes (en mi caso es /proyectobase).

{
    "PATH_APLICACION": "/proyectoBase"
}

deployment.yaml - Archivo que contiene la configuracion para realizar el deployment de la imagen docker en el ambiente de desarrollo (Es necesario modificar el nombre de la aplicacion (en mi caso es proyecto-base-nginx) por el de tu proyecto en las siguientes propiedades).

metadata:
  name: proyecto-base-nginx

spec:
  selector:
    matchLabels:
      app: proyecto-base-nginx
  template:
    metadata:
      labels:
        app: proyecto-base-nginx
    spec:
      containers:
      - name: proyecto-base-nginx
        image: "gcr.io/findep-desarrollo-170215/coa/proyecto-base-nginx:1.0.0"

deployment-qa.yaml - Archivo que contiene la configuracion para realizar el deployment de la imagen docker en el ambiente de QA (Es necesario modificar el nombre de la aplicacion (en mi caso es proyecto-base-nginx) por el de tu proyecto en las mismas propiedades especificadas en el archivo deployment.yaml).
deployment-prod.yaml - Archivo que contiene la configuracion para realizar el deployment de la imagen docker en el ambiente de Produccion (Es necesario modificar el nombre de la aplicacion (en mi caso es proyecto-base-nginx) por el de tu proyecto en las mismas propiedades especificadas en el archivo deployment.yaml).
Dockerfile - Archivo que contiene la configuración para crear la imagen docker del proyecto (es necesario modificar la linea 5 por el nombre del directorio de la aplicacion (en este caso el proyecto tiene el nombre de proyectobase).

COPY favicon.ico /var/www/proyectobase/

nginx.conf - Archivo que contiene la configuracion Nginx, la cual nos sirve al momento de crear nuestra imagen docker (modificar la siguiente linea por el nombre del directorio de la aplicacion en mi caso es proyecto base).

location ^~ /proyectobase/ {
            # First attempt to serve request as file, then
            # as directory, then fall back to redirecting to index.html
            try_files $uri $uri/ /proyectobase/index.html;
        }

package.json - Archivo que contiene toda la configuracion del proyecto NPM (Es necesario modificar las propiedades name, version, author, homepage y description por los valores de tu proyecto).

    "name": "proyectobase",
    "version": "1.0.0",
    "description": "Proyecto Base Aplicación Front-End React COA",
    "homepage": "/proyectobase/",
    "author": "lolmosc"

service.yaml - Archivo que contiene la configuracion para realizar el despliegue del servicio en kubernetes correspondiente a nuestra carga de trabajo desplegada con el archivo deployment.yaml en el ambiente de desarrollo (Es necesario modificar el nombre del servicio (en mi caso proyecto-base-nginx) por el de tu proyecto en las siguientes propiedades).

metadata:
  name: proyecto-base-nginx
spec:
  selector:
    app: proyecto-base-nginx

service-qa.yaml - Archivo que contiene la configuracion para realizar el despliegue del servicio en kubernetes correspondiente a nuestra carga de trabajo desplegada con el archivo deployment-qa.yaml en el ambiente de QA (Es necesario modificar el nombre del servicio (en mi caso proyecto-base-nginx) por el de tu proyecto en las mismas propiedades del archivo service.yaml).
service-prod.yaml - Archivo que contiene la configuracion para realizar el despliegue del servicio en kubernetes correspondiente a nuestra carga de trabajo desplegada con el archivo deployment-prod.yaml en el ambiente de Produccion (Es Necesario modificar el nombre del servicio (en mi caso proyecto-base-nginx) por el de tu proyecto en las mismas propiedades del archivo service.yaml).
webpack.config.js - Archivo que contiene toda la configuracion webpack para transpilar y compilar el codigo JS del proyecto.
webpack.config.dev.js - Archivo que contiene toda la configuracion webpack para transpilar y compilar el codigo JS del proyecto en el ambiente de Desarrollo y QA, realiza un merge con la configuracion establecida en el archivo webpack.config.js (se toma esta configuracion cuando se ejecutan los comandos npm start, npm run build-dev, nrpm run build-qa).
webpack.config.prod.js - Archivo que contiene toda la configuracion webpack para transpilar y compilar el codigo JS del proyecto en el ambiente de Producción y realiza un merge con la configuracion establecida en el archivo webpack.config.js (se toma esta configuracion cuando se ejecutael comando npm run build-prod).
Folder Src :
- index.html - Es el archivo principal del sitio que nos permite la entrada a nuestro proyecto, en este archivo es necesario modificar las propiedades base y title del encabezado de acuerdo a los valores de nuestro proyecto. Ya incluye la funcionalidad para que no permita copiar, cortar y pegar en todo el sitio.
```

<base href="/cobranzafisa/">


<title>COA ** Cobranza FISA COA v.1.0.0</title>


<body oncontextmenu='return false' oncopy="return false" oncut="return false" onpaste="return false">
```
- index.jsx - Es el componente base del proyecto react no es necesario modificar nada, en este componente ya tiene configurado el store (Redux) y declarado el componente App del proyecto que es el componente principal.
- Folder actions - Carpeta que contiene todas las funciones que se ejecutan para actualizar los reducers desde los componentes.
- Folder actions components - Carpeta que contiene todas las funciones que se ejecutan en los componentes pero que no alteran los reducers.
  - Aheeva Actions - Contiene todos los eventos que se tienen ahorita para la integracion de la aplicación con el marcador aheeva.
    - hangup
    - manualDial
    - pauseRecording
    - ready
    - startRecording
    - transferData
    - transferIvr
    - transferPhone
  - Commons Actions - Contiene funciones comunes que se pueden utilizar en cualquier parte del proyecto.
    - formatDate
    - formatDateNoSeparator
    - formatDateCitaTelefonica
    - formatDateString
    - formatTime
    - formatNull
    - fillDateOneZero
    - orderJsonArray
    - filterJsonArray
- Folder components - Esta carpeta contiene componentes genericos que pueden ser utilizados en la aplicación, dichos componentes no dependen del estado (reducer) para su funcionamiento.
  - PrivateRoute.jsx : Este componente se puede utilizar en aplicaciones que requieran tener rutas protegidas, por ejemplo si un usuario esta autenticado o no, y solo seria necesario modificar el localstorage que se tendria que evaluar para ver si se autoriza o no el acceso, en el caso que no se permita el acceso a dicha ruta en automatico redirecciona a algun otro path de la aplicación.
```

<Route {...rest} render={props => (
    localStorage.getItem('user')
        ? <Component {...props} />
        : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />


<PrivateRoute exact path="/" component={HomePage} />
```
  - TabPanel.jsx : Este componente se utiliza cuando se declaran Tabs en algun componente de la aplicación y sirve para poder mostrar algun otro componente dentro de cada tab.
```

<Tabs>
  <Tab label="DATOS DE LA CUENTA" {...TabProps('tabInformacion', 0)} />
</Tabs>


<TabPanel
  nameTab="tabInformacion"
  value={this.state.tabValue}
  index={0}
>
  <GestionInformacionTabCuenta/>
</TabPanel>
```
- Folder constants - Carpeta que contiene todas nuestras constantes utilizadas dentro de nuestro proyecto.
- Folder helpers - Carpeta que contiene los helpers utilizados dentro de nuestro proyecto.
  - auth-header.jsx - Archivo que nos permite obtener el token de autorizacion registrado para nuestra app (en los casos que se utilize por ejemplo jwt o passport como metodos de autenticacion), para que pueda ser utilizado en cualquier peticion rest, con solo invocar esta funcion ya lo estarias obteniendo para agregarlo en el encabezado de la peticion.
```
//Ejemplo de como se utiliza en la propiedad headers
function getAll() {
const requestOptions = {
    method: 'GET',
    headers: authHeader()
};

return fetch(`${config.apiUrl}/users`, requestOptions).then(handleResponse);}
```
  - history.jsx - Contiene el historial que se utiliza dentro de nuestro router app, para que funcione se tiene que tener la variable PATH_APPLICATION en nuestro archivo de configuracion JSON (ya se menciono anteriormente).
  - store.jsx - Contiene el archivo que controla el estado de nuestra aplicación (Redux), y a su vez en los ambientes local, dev y qa nos agrega un logger que permite visualizar todos los cambios de nuestros reducers en tiempo de ejecución, cuando se activa el profile prod dicho logger ya no se muestra en la pantalla del navegador.
- Folder reducers - Carpeta que contiene todos nuestros estados utilizados en nuestra aplicación que a su vez son importados por el archivo store.jsx de la carpeta helpers.
- Folder services - Carpeta que contiene una capa media entre los componentes y nuestras peticiones rest realizadas a los diferentes endpoints.
Folder App -
- Folder assets - Carpeta que contiene todos los archivos estaticos, como imagenes, iconos, sonidos, videos, etc...
- App.jsx - Componente principal de la aplicación que en mi caso se encarga de cargar todos los parametros desde la base de datos (ivr's, endpoints, variables que pueden cambiar en cualquier momento). Así mismo es el encargado de contener el Router principal de la app.
```
  <div className="backgroundHome" >
  
  <Notification />
  <LoadingPage />
  <ModalQuestionComponent />
  <HeaderHomePage />
  
  
  {(this.state.parametros !== null) &&
    <Router history={history}>
      <Switch>
        <Route exact path='/' render={(props) => <HomePage {...props} />} />
        <PrivateRoute exact path="/home" component={HomePage} />
        <Route path="*" component={DefaultComponent} />
      </Switch>
    </Router>
  }
  </div>
```
- App.css - Archivo css que contiene el estilo del componente principal _App.jsx.
- Folder Components - Carpeta que contiene todos los componentes del proyecto.
  - Component Notification - Componente generico que nos rive para mostrar todo tipo de notificaciones (success, warning, error, info). Los parametros que ocupa el componente son el Titulo de la notificación y el detalle de la notificación (el detalle solo se muestra en notificaciones de tipo Error, en las demas tipos de notificaciones el segundo parametro se puede mandar como una cadena vacia '' o como null);
    - Success
```
  this.props.dispatch(notificationActions.success('Gestión Guardada Correctamente',''));
```
    - Warning
```
  this.props.dispatch(notificationActions.warning('Favor De Capturar El Codigo Contacto', null));
```
    - Info
```
  this.props.dispatch(notificationActions.info('Favor De Capturar El Codigo Contacto', null));
```
    - Error
```
  this.props.dispatch(notificationActions.error('Se genero un error al cargar la informacion', 'Detalle del Error'));
```
    - Clear - Esta funcion es la que se utiliza, para ocultar la notificacion.
```
  this.props.dispatch(notificationActions.clear());
```
  - Component Loading - Componente que muestra un modal con la imagen de un circulo girando, se tienen cinco colores distintos (Azul, Azul Claro, Verde, Naranja, Rojo o Amarillo), solo es cuestion de importar el color deseado en este caso ocupe el rojo.
```
//Import del gif que se desea, las imagenes estan en la carpeta assets/images/loading
import loadingRed from '../../assets/images/loading/Red.gif';

//Lugar donde se debe cambiar el nombre de la imagen (etiqueta <label><src>)
<DialogContent style={{ marginBottom: '25px', textAlign: 'center' }}>
  <label><img src={loadingRed} /></label>
</DialogContent>
```
    - Set - La función set() muestra el modal con su titulo por defecto 'Cargando'
```
this.props.dispatch(loadingActions.set());
```
    - Set_Title - La funcion setTitle() muestra el modal con el titulo que nosotros deseemos ejemplo 'Readme.md'
```
this.props.dispatch(loadingActions.setTitle('Ejemplo Readme.md'));
```
    - Clear - Esta funcion es la que se utiliza, para ocultar el modal.
```
this.props.dispatch(loadingActions.clear());
```
  - Component PopUp - Componente que muestra un PopUp con algun mensaje o pregunta que se desee realizar. Los parametros que recibe son los siguientes:
    - functionAccept : Es la funcion que se va a pasar para el boton de Aceptar del popup.
    - functionCancel : Es la funcion que se va a ejecutar para el boton Cancelar en caso de que la opcion _cancelOption sea true (solo se agrega cuando se invoca la funcion setQuestion).
    - titleDialog : Es el titulo que tendra el PopUp.
    - textDialog : Es el texto que contendra el cuerpo del PopUp.
    - textButtonAccept : Es el texto que llevara el boton de Aceptar.
    - textButtonCancel : Es el texto que llevara el boton de Cancelar (solo se agrega cuando se invoca la funcion setQuestion).
    - SetPopUp - La funcion setPopup() lo que realiza es poner un modal con un mensaje para el usuario, solo se le pasa como parametros la funcion que realizara el boton de aceptar, el titulo del modal, asi como el cuerpo del modal y el texto que contendra el boton de aceptar.
```
handleButtonAccept(){
  this.props.dispatch(popUpActions.clear());
}

this.props.dispatch(popUpActions.setPopup(() => this.handleButtonAccept, 'PopUp de Prueba', 'Mensaje del cuerpo pop-up prueba', 'Ok, boton prueba'));
```
    - SetQuestion - La funcion SetQuestion() lo que realiza es poner un modal con un mensaje de pregunta para el usuario, solo se le pasa como parametros la funcion que realizara el boton de aceptar, la funcion que realizara el boton de cancelar, el titulo del modal, asi como el cuerpo del modal, el texto que contendra el boton de aceptar y el texto del boton de cancelar.
```
handleButtonAccept(){
  this.props.dispatch(popUpActions.clear());
}

handleButtonCancel(){
  this.props.dispatch(popUpActions.clear());
}

this.props.dispatch(popUpActions.setQuestion(() => this.handleButtonAccept, () => this.handleButtonCancel ,'Pregunta de Prueba', 'Mensaje de la pregunta de prueba', 'Ok, pregunta', 'Cancel, pregunta'));
```
    - Clear - Esta funcion es la que se utiliza, para ocultar el modal, y siempre deben ir dentro de las funciones que se pasan como parametros cuando se invocan las acciones de setPopUp() y setQuestion().
```
this.props.dispatch(popUpActions.clear());
```
  - Component Header - Componente que muestra la barra de navegacion superior, la cual dependiendo de la empresa que se le asigna, cambia el color y logo.
    - AEF
```
//linea 18
const empresa = 'AEF';
```
    - AFI
```
//linea 18
const empresa = 'AFI';
```
    - FINSOL
```
//linea 18
const empresa = 'FINSOL';
```
    - FISA
```
//linea 18
const empresa = 'FISA';
```
    - MASNOMINA
```
//linea 18
const empresa = 'MASNOMINA';
```
      - PRESTANOMICO
```
//linea 18
const empresa = 'PRESTANOMICO';
```
  - Component NotFound - Componente que se muestra por default cuando el path ingresado no coincide con alguno de los paths declarados.
```

<Router history={history}>
  <Switch>
    <Route exact path='/' render={(props) => <HomePage {...props} />} />
    <PrivateRoute exact path="/home" component={HomePage} />
    
    <Route path="*" component={DefaultComponent} />
  </Switch>
</Router>
```

Por lolmosc@independencia.com.mx

@everything-registry/sub-chunk-1396 @zalastax/nolb-cra-template-c

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago