primo explore devenv
December 2022
Directorio gulp : contiene los diversos scripts de compilación para el entorno y el archivo de configuración config.js en el que se debe definir su servidor proxy de destino.
Directorio node_modules : contiene los diversos módulos de terceros necesarios para ejecutar el sistema. Estos módulos se definen en el archivo package.json .
Directorio de paquetes : una vez que su paquete de desarrollo esté listo, podrá compilarlo usando el comando gulp create-package que creará el archivo de paquete comprimido que defina en esta carpeta.
Directorio primo-explore : consta de 2 directorios:
El paquete de desarrollo le permite configurar los siguientes componentes de la página (siga los enlaces para obtener más detalles):
CSS
HTML
Imágenes
javascript
Para cada tipo de configuración, o para cada Vista de Primo diferente, debe haber una carpeta específica con el nombre de la Vista (que se adhiere a la estructura de directorios establecida) en la carpeta del paquete primo-explore/custom .
Esta carpeta de Vista personalizada se puede descargar desde su Back Office de Primo, siguiendo Primo Home > Primo Utilities > UI customization Package Manager , o puede comenzar desde el repositorio de GitHub de primo-explore-package. (La ventaja de utilizar este repositorio es que en cada carpeta encontrará un archivo README.md específico que contiene recetas y ejemplos).
Nota: Si no es el administrador de su máquina, puede tener problemas en el flujo a continuación. Le recomendamos utilizar el símbolo del sistema de Node.js (busque cmd en su PC para ubicarlo) siempre que las instrucciones a continuación hagan referencia a " línea de comando".
Descarga el proyecto desde este repositorio y colócalo en tu computadora.
Descomprima el archivo que descargó en una ubicación preferida de la carpeta del proyecto de desarrollo.
Descargue e instale la versión 16.17.0 de Node
Reinicia tu computadora
Desde la línea de comando, ejecute el comando: npm install -g gulp
En una nueva ventana de línea de comando, navegue hasta el directorio base del proyecto ( cd pathtoyourprojectfolderprimo-explore-devenv )
Desde la línea de comando, ejecute el comando: npm install (Esto debería instalar todos los módulos de nodo necesarios para gulp).
Edite la configuración del servidor proxy del archivo de configuración de Gulp, que se encuentra en gulp/config.js : var PROXY_SERVER = http://your-server:your-port (Asegúrese de utilizar su URL real de Sandbox o Production Primo Front-End.) Tenga en cuenta que para Los entornos SSL (HTTPS) definen el servidor como: var PROXY_SERVER = https://your-server:443
Complete su carpeta de paquete de vista personalizada en la carpeta de paquete personalizado ("...primo-explorecustom"), ya sea descargando los archivos de código de vista desde su oficina virtual de Primo o usando el repositorio GitHub de primo-explore-package) para iniciar una nueva carpeta del paquete. (Si ya definió un paquete de vista y lo cargó en el BO, asegúrese de descargarlo o, de lo contrario, no verá los cambios anteriores y podrá sobrescribirlos).
Si la carpeta de su paquete de vista personalizada se llamara "Auto1", entonces el árbol de directorios de su entorno de desarrollo debería verse similar a este: 
IMPORTANTE: El nombre de la carpeta del paquete de vista personalizada debe coincidir con una vista existente en el servidor proxy al que se hace referencia o el servidor Gulp no funcionará correctamente. Para el desarrollo desde cero, asegúrese de crear (o copiar) primero una vista utilizando el Asistente de vistas de Primo Back Office; entonces podrá realizar sus personalizaciones localmente utilizando este documento.
Inicie las personalizaciones de su código:
Desde la línea de comando, ejecute el comando: gulp run --view <the VIEW_CODE folder> (Esto iniciará su servidor local).
(Por ejemplo, ejecutar gulp run --view Auto1 iniciará el entorno tomando las personalizaciones de la carpeta Auto1 ).
Para clientes de Primo VE, agregue el indicador --ve: gulp run --view <the VIEW_CODE folder> --ve
Abra un navegador y escriba la siguiente URL: localhost:8003/primo-explore/?vid=your-view-code (Ejemplo: http://localhost:8003/primo-explore/search?vid=Auto1)
Para clientes de Primo VE, abra la siguiente URL: localhost:8003/discovery/?vid=your-institution-code:your-view-code
Ahora debería poder realizar sus personalizaciones con búsquedas y resultados reales, desde su servidor proxy previamente definido. Nota: una vez que comiences a trabajar con este entorno, descubrirás que los mejores resultados se obtienen trabajando en el modo incógnito de tu navegador; o puede borrar la memoria caché de su navegador antes de iniciar el servidor Gulp.
Puede obtener comentarios inmediatos sobre los cambios de código actualizando el navegador.
Realice sus cambios de acuerdo con la documentación/ejemplos en:
CSS
HTML
Imágenes
javascript
Nota: tiene múltiples opciones para editar el archivo css (custom1.css) y el archivo js (custom.js), algunas de ellas incluyen métodos para dividir sus desarrollos en archivos separados. Cuando se utilizan estos métodos, los archivos custom1.css y custom.js serán anulados por archivos diferentes cuando se ejecute gulp. Coloque su css y js personalizados en archivos con diferentes nombres, como custommodule.css o custom.module.js, para concatenarlos en los archivos css/js personalizados.
Una vez que termine de personalizar el paquete, puede comprimir ese directorio y cargarlo usando Primo BackOffice.
En una ventana de línea de comando, navegue hasta el directorio base del proyecto: cd pathtoyourprojectfolderprimo-explore-devenv
Desde la línea de comando, ejecute el comando: gulp create-package Aparecerá un menú que especifica todos los paquetes posibles que puede crear, como por ejemplo:
Inicie sesión en Primo Back Office y navegue hasta la sección Administrador de paquetes de personalización de la interfaz de usuario : Primo Home > Primo Utilities > UI customization Package Manager
Utilice el botón de exploración de archivos para buscar y cargar el nuevo archivo del paquete comprimido. (Ubicado en el directorio "rutaasuproyectocarpetaprimo-explore-devenvpaquete").
No olvides implementar tus cambios.
Una vez que termine de personalizar el paquete, podrá prepararlo para publicarlo en Primo-Studio.
En una ventana de línea de comando, navegue hasta el directorio base del proyecto: cd pathtoyourprojectfolderprimo-explore-devenv
Desde la línea de comando, ejecute el comando: gulp prepare-addon Aparecerá un menú que especifica todos los paquetes posibles que puede compilar.
Una vez que haya terminado de ejecutar el script, se creará una carpeta que contiene el complemento en pathtoyourprojectfolderprimo-explore-devenvaddons .
Desde la carpeta anterior puede publicar su complemento en NPM y Primo-Studio. Para obtener instrucciones, consulte: Tutorial del complemento Primo-Studio
