primo explore devenv
December 2022
répertoire gulp : contient les différents scripts de build pour l'environnement et le fichier de configuration config.js dans lequel votre serveur proxy cible doit être défini.
Répertoire node_modules : contient les différents modules tiers nécessaires au fonctionnement du système. Ces modules sont définis dans le fichier package.json .
répertoire packages : une fois votre package de développement prêt vous pourrez le construire en utilisant la commande gulp create-package qui créera le fichier package zippé que vous définissez dans ce dossier
Répertoire primo-explore : composé de 2 répertoires :
Le package de développement vous permet de configurer les composants de page suivants (suivez les liens pour plus de détails) :
CSS
HTML
Images
Javascript
Pour chaque type de configuration, ou pour chaque Primo View différente, il doit y avoir un dossier spécifié nommé d'après la vue (qui adhère à la structure de répertoires établie) dans le dossier primo-explore/custom package.
Ce dossier View personnalisé peut être téléchargé depuis votre back-office Primo, en suivant Primo Home > Primo Utilities > UI customization Package Manager , ou démarré à partir du référentiel GitHub primo-explore-package. (L'avantage d'utiliser ce référentiel est que dans chaque dossier, vous trouverez un fichier README.md spécifique contenant des recettes et des exemples.)
Remarque : Si vous n'êtes pas l'administrateur de votre machine, vous pourriez rencontrer des problèmes dans le flux ci-dessous. Nous vous recommandons d'utiliser l'invite de commande "Node.js (recherchez cmd sur votre ordinateur pour le localiser) chaque fois que les instructions ci-dessous font référence à" ligne de commande".
Téléchargez le projet depuis ce référentiel et placez-le sur votre ordinateur
Décompressez le fichier que vous avez téléchargé dans un emplacement de dossier de projet de développement préféré
Téléchargez et installez la version 16.17.0 de Node
Redémarrez votre ordinateur
Depuis la ligne de commande, exécutez la commande : npm install -g gulp
Dans une nouvelle fenêtre de ligne de commande, accédez au répertoire de base du projet ( cd pathtoyourprojectfolderprimo-explore-devenv )
Depuis la ligne de commande, exécutez la commande : npm install (Cela devrait installer tous les modules de nœuds nécessaires à gulp.)
Modifiez le paramètre de serveur proxy du fichier de configuration Gulp, trouvé dans gulp/config.js : var PROXY_SERVER = http://your-server:your-port (Assurez-vous d'utiliser votre véritable URL Sandbox ou Production Primo Front-End.) Notez que pour Les environnements SSL (HTTPS) définissent le serveur comme : var PROXY_SERVER = https://your-server:443
Remplissez votre dossier de package View personnalisé dans le dossier du package personnalisé ("...primo-explorecustom"), soit en téléchargeant les fichiers de code de vue depuis votre back-office Primo, soit en utilisant le référentiel GitHub primo-explore-package) pour démarrer un nouveau dossier de package. (si vous avez déjà défini un package de vues et l'avez chargé dans le BO, assurez-vous de le télécharger, sinon vous ne verrez pas et pourriez écraser vos modifications précédentes.)
Si votre dossier de package de vue personnalisé devait s'appeler "Auto1", alors l'arborescence de vos répertoires d'environnement de développement devrait ressembler à ceci : 
IMPORTANT : le nom de votre dossier de package de vues personnalisées doit correspondre à une vue existante sur le serveur proxy référencé, sinon le serveur Gulp ne fonctionnera pas correctement. Pour un développement à partir de zéro, assurez-vous d'abord de créer (ou de copier) une vue à l'aide de l'assistant de vue Primo Back Office ; vous pourrez alors réaliser vos personnalisations localement à l'aide de ce document.
Commencez vos personnalisations de code :
Depuis la ligne de commande, exécutez la commande : gulp run --view <the VIEW_CODE folder> (Cela démarrera votre serveur local.)
(Par exemple, exécuter gulp run --view Auto1 démarrera l'environnement en prenant les personnalisations du dossier Auto1 .)
Pour les clients Primo VE, ajoutez l'indicateur --ve : gulp run --view <the VIEW_CODE folder> --ve
Ouvrez un navigateur et saisissez l'URL suivante : localhost:8003/primo-explore/?vid=your-view-code (Exemple : http://localhost:8003/primo-explore/search?vid=Auto1)
Pour les clients Primo VE, ouvrez l'URL suivante : localhost:8003/discovery/?vid=your-institution-code:your-view-code
Vous devriez maintenant pouvoir effectuer vos personnalisations avec des recherches et des résultats réels, à partir de votre serveur proxy précédemment défini. Remarque : une fois que vous aurez commencé à travailler avec cet environnement, vous découvrirez que les meilleurs résultats sont obtenus en travaillant en mode navigation privée de votre navigateur ; ou vous pouvez vider le cache de votre navigateur avant de démarrer le serveur Gulp.
Vous pouvez obtenir un retour immédiat sur vos modifications de code en actualisant le navigateur.
Effectuez vos modifications selon la documentation/les exemples dans :
CSS
HTML
Images
Javascript
Remarque : vous disposez de plusieurs options pour modifier le fichier css (custom1.css) et le fichier js (custom.js), certaines d'entre elles incluent des méthodes de fractionnement de vos développements en fichiers séparés. Lors de l'utilisation de telles méthodes, les fichiers custom1.css et custom.js seront remplacés par les différents fichiers lors de l'exécution de gulp. Placez vos CSS et JS personnalisés dans des fichiers portant des noms différents tels que custommodule.css ou custom.module.js pour les concactiner dans les fichiers CSS/js personnalisés.
Une fois que vous avez terminé de personnaliser le package, vous pouvez compresser ce répertoire et le télécharger à l'aide du Primo BackOffice.
Dans une fenêtre de ligne de commande, accédez au répertoire de base du projet : cd pathtoyourprojectfolderprimo-explore-devenv
Depuis la ligne de commande, exécutez la commande : gulp create-package Vous serez invité à afficher un menu spécifiant tous les packages possibles que vous pouvez créer, tels que :
Connectez-vous à Primo Back Office et accédez à la section Gestionnaire de packages de personnalisation de l'interface utilisateur : Primo Home > Primo Utilities > UI customization Package Manager
Utilisez le bouton Parcourir les fichiers pour rechercher et télécharger le nouveau fichier de package compressé. (Situé dans le répertoire "pathtoyourprojectfolderprimo-explore-devenvpackage".)
N'oubliez pas de déployer vos modifications
Une fois que vous avez terminé de personnaliser le package, vous pouvez le préparer à être publié sur Primo-Studio.
Dans une fenêtre de ligne de commande, accédez au répertoire de base du projet : cd pathtoyourprojectfolderprimo-explore-devenv
Depuis la ligne de commande, exécutez la commande : gulp prepare-addon Vous serez invité à afficher un menu spécifiant tous les packages possibles que vous pouvez créer.
Une fois que vous avez terminé d'exécuter le script, un dossier contenant le module complémentaire sera créé dans pathtoyourprojectfolderprimo-explore-devenvaddons .
À partir du dossier ci-dessus, vous pouvez publier votre module complémentaire sur NPM et sur Primo-Studio. Pour les instructions, voir : Tutoriel du module complémentaire Primo-Studio
