Crear nuevo modulo
Clonar reporsitorio
Es necesario conectarte al VPN del ORA con los datos de accesos proporcionados.
Url del repositorio:
ssh://[usuario]@172.16.10.20:/opt/git/ora
Comando para clonar:
git clone ssh://[usuario]@172.16.10.20:/opt/git/ora
M贸dulos disponibles
Estructura de archivos en m贸dulo
Pasos para levantar un nuevo m贸dulo
- Copiar el contenido de la carpeta moduledefault en la carpeta del nuevo m贸dulo(nuevo_modulo).
- Configurar campos en el archivo nuevo_modulo > package.json, es necesario definir un nombre 煤nico para el m贸dulo y reemplazarlo en examplemodule.
- Ir a la carpeta recursos_ora y ejecutar los siguientes comandos:
- Dentro de la carpeta nuevo_modulo ejecutar los comandos:
yarn install
yarn link
yarn install
yarn link @ora/recursos
Configurar archivos .env
Es necesario tener disponible el nombre del m贸dulo asignado para el backend, en el ejemplo se tiene como tal a nombremoduloejemplo las urls en BASE_URL deben apuntar al entorno seg煤n corresponda REAC_APP_LOCAL_URL es el nombre de la p谩gina asignada al m贸dulo despu茅s del dominio: para el caso de prueba para la URL https://oraotca.org/basicmodule
solo debemos tomar basicmodule.
.env.production
.env.development
Levantar m贸dulo
Una vez pre configurado el nuevo m贸dulo, podemos levantarlo con el siguiente comando: yarn start. Al terminar de cargar, se mostrar谩 el siguiente mensaje.
Esto nos abrir谩 una pesta帽a con el url asignado para el desarrollo del m贸dulo. En caso se muestre el siguiente mensaje, es necesario habilitar el acceso haciendo click en avanzado y luego en procesar.
Al cargar el contenido en la web este apunta a https://localhost:3000/wp-content/plugins/ora-examplemodule/build es necesario que la url local apunte a unos de los urls ya configurados para este m贸dulo.
M贸dulo de ejemplo
Este es el resultado del m贸dulo de ejemplo una vez levantado.
Contenido de una vista que tenga habilitado el uso de la intranet.
Agregar rutas al m贸dulo
En el archivo nuevo_modulo > indexj.js la variable listUrls contiene las rutas y componentes ligados a esta, as铆 como opciones de autenticaci贸n y permisos.
- auth: define si a ruta debe verificar si usuario necesita haber iniciado sesi贸n.
- path: url asignada a la vista.
- comoponent: componente asignado a la vista para la ruta.
- can: asignar permisos para la vista, ejemplo: permiso1, permiso2, permiso_tres
Cuerpo del m贸dulo
En el archivo nuevo_modulo > indexj.js se encarga de renderizar el cuerpo sobre el que cargar谩n nuestras vistas. Se deben configurar unas tres secciones de ser necesarios.
- (1) modulo de traducci贸n: se puede asignar un conjunto de traducciones del propio m贸dulo o de otro m贸dulo, pero por defecto siempre carga las traduccines generales.
- (2) redirecci贸n despues de iniciar sesi贸n: Modificar en caso no necesitemos que redireccione a una ruta diferente.
- (3) root renderizado: este es el id sobre el cu谩l va a correr nuestro aplicativo de React deben ser modificados en este apartado como en el de
nuevo_modulo > public > index.html.
// public/index.html 31 <div id="modulodefault_app" class="ora_apps"></div>
Estructura de los archivos de idiomas:
Dentro del repositorio principal existe la carpeta聽languages聽en ello se tienen carpetas con las traduccines de cada m贸dulo, de esta manera no sobrecargamos un solo fichero y se puede personalizar y sobreescribir una variable de traducci贸n dependiendo del m贸dulo.
Por cada carpeta existen tres ficheros location.xx.json por cada idioma. Cada fichero tiene la estructura JSON mostrada en la imagen de arriba, es en content donde agregaremos nuestras traducciones en la forma 芦key禄: 芦value禄
Views
Las vistas de cada ruta est谩n basadas en React Class Component los ficheros en nuevo_modulo > src > components > views poseen la estructura m铆nima para tener una vista.
Tomando en cuenta el fichero聽nuevo_modulo > src > components > views > Protegido2.jsx existe un proceso para dar persistencia a cierto grupo de datos seg煤n sea necesario. En el constructor se verifica si el datos almacenado en un LocalStorage existe, de no ser as铆 se procede a realizar la carga de estos y guardarlos en los states del componenete seg煤n corresponda. Los datos obtenidos persisten durante toda la aplicaci贸n.
Tambi茅n existe una funci贸n en la cual podemos definir cierto comportamiento de la vista:
- titulo: Define el t铆tulo que se mostrar谩, en esa misma l铆nea se hace uso de la propiedad this.props.language() la cual nos permite obtener el valor traducido de una variable y asignarle un valor por defecto en caso no exista.
- isbackend: Definir si mostramos en men煤 de intranet, debe considerarse que este men煤 solo debe ser mostrado si el usuario inici贸 sesi贸n.
- hasBreadcrumb: Definir si mostrar el breadcrumb.
- hasHeroBar: Definir si mostrar la barra superior donde se encuentran el t铆tulo, sut铆tulo y breadcrumb.
- be_itemselect: etiqueta 煤nica para la vista que se utiliza para activar el item referenciado en el men煤 de intranet.
- breadcrumb: definir los elementos del breadcrumb.
La funci贸n render debe tener siempre como primer componente BasePageRoute2 que viene desde la paqueter铆a de @ora/recursos. Este componente maneja la estructura del men煤 intranet, el t铆tulo y las traducciones.
Consideraciones por cada componente
Agregar HEADER a las peticiones al backend
Es necesario agregar una HTTP Authorization como medida de seguridad, para ello se implementan varios funciones. Estas funciones est谩n en el apartado Helpers.ValidationAuth de @ora/recursos.
Agregar token a urls
Existen casos en el que se soliciten url de manera directa, pero al no poder modifica el header podemos pasar como par谩metro la variable token siempre y cuando este est茅 disponible. En el ejemplo de abajo, obtenemos el hash del token proporcionado para el m贸dulo y lo asignamos a la variable token. Debe considerarse que la url solicitada est谩 configurada para recibir ese par谩metro (revisar secci贸n de backend)
Configurar backend
Dentro de la ra铆z del repositorio tenemos la carpeta ci4 en el cual se encuentra el backend hecho en PHP con el framework CodeIgniter. La carpeta est谩 separada por m贸dulos. Dentro de cada m贸dulo existen las carpetas Config, Controllers y Models. Para un nuevo m贸dulo solo basta con copiar la carpeta ModuloEjemplo y hacer las modificaciones para acondicionarlo a un m贸dulo personalizado.
De ser posible revisar la documentaci贸n de Code Igniter, no se hizo modificaciones sobre el core, pero se agregaron caracter铆sticas para los Modelos y Controladores.
Rutas
Las urls deben estar agrupadas, de esta manera podemos decir que nuestro conjunto de Urll solo pertenecen a 芦nuestro m贸dulo禄. Tomando como ejemplo la imagen de abajo.
Resultado de lo declarado en el ejemplo, se puede notar que nombremoduloejemplo es el nombre que formar谩 parte de la url y con el que agruparemos nuestras url para este m贸dulo.
- https://dominio.com/nombremoduloejemplo/listaprueba
- https://dominio.com/nombremoduloejemplo/listaprueba2
- https://dominio.com/nombremoduloejemplo/listadotodo
El namespace debe apuntar a la carpeta de controladores de nuestro m贸dulo como es en el caso de Modules\ModuloEjemplo\Controller.
Debajo de las urls que podamos definir, debemos hacer unas configuraciones adicionales, en este caso tenemos un $scope con el mismo nombre con el que agrupamos nuestras urls, en protected declaramos las url que deben pasar por autenticaci贸n, en public, aquellas que solo necesitan una autenticaci贸n b谩sica(las que poseen cada m贸dulo) y en tokenUrl est谩n aquellas url que pueden recibir la variable token y no usar un HTTP Authorization.
En este apartado es posible restringir el acceso a las url, mediante la propiedad filter en el que se define a can, seguido de los permisos a los que pertence: can:permisoo1, permiso2;permiso_tress
Controladores
Para el caso de los controladores se agreg贸 CustomResourceController el cu谩l nos permite identificar el idioma y arrancar con el helper de traducciones y permisos.
Modelos
Los modelos tambi茅n reciben una configuraci贸n adicional, deben agregarse los traits TraitImport y TraitBaseModel, adicional a ello, debe definirse el schema al cual pertenece dicho modelo.
