primo explore devenv
December 2022
gulp-Verzeichnis : Enthält die verschiedenen Build-Skripte für die Umgebung und die Konfigurationsdatei config.js, in der Ihr Ziel-Proxy-Server definiert werden muss.
Verzeichnis „node_modules“ : Enthält die verschiedenen Module von Drittanbietern, die zum Ausführen des Systems erforderlich sind. Diese Module sind in der Datei package.json definiert.
Paketverzeichnis : Sobald Ihr Entwicklungspaket fertig ist, können Sie es mit dem Befehl gulp create-package erstellen, der die von Ihnen definierte ZIP-Paketdatei in diesem Ordner erstellt
Primo-Explore-Verzeichnis : besteht aus 2 Verzeichnissen:
Mit dem Entwicklungspaket können Sie die folgenden Seitenkomponenten konfigurieren (folgen Sie den Links für Details):
CSS
HTML
Bilder
JavaScript
Für jeden Konfigurationstyp oder für jede andere Primo-Ansicht sollte es im Ordner primo-explore/custom package einen angegebenen Ordner geben, der nach der Ansicht benannt ist (der sich an die festgelegte Verzeichnisstruktur hält).
Dieser benutzerdefinierte Ansichtsordner kann von Ihrem Primo-Backoffice heruntergeladen werden, indem Sie Primo Home > Primo Utilities > UI customization Package Manager folgen, oder neu aus dem GitHub-Repository primo-explore-package gestartet werden. (Der Vorteil der Verwendung dieses Repositorys besteht darin, dass Sie in jedem Ordner eine spezifische README.md-Datei mit Rezepten und Beispielen finden.)
Hinweis: Wenn Sie nicht der Administrator Ihres Computers sind, könnten im folgenden Ablauf Probleme auftreten. Wir empfehlen die Verwendung der „Node.js-Eingabeaufforderung“ (suchen Sie nach „cmd“ auf Ihrem PC, um es zu finden), wenn sich die folgenden Anweisungen auf „ Befehlszeile".
Laden Sie das Projekt aus diesem Repository herunter und legen Sie es auf Ihrem Computer ab
Entpacken Sie die heruntergeladene Datei an einen bevorzugten Speicherort für den Entwicklungsprojektordner
Laden Sie die Node-Version 16.17.0 herunter und installieren Sie sie
Starten Sie Ihren Computer neu
Führen Sie über die Befehlszeile den folgenden Befehl aus: npm install -g gulp
Navigieren Sie in einem neuen Befehlszeilenfenster zum Projektbasisverzeichnis ( cd pathtoyourprojectfolderprimo-explore-devenv ).
Führen Sie in der Befehlszeile den Befehl aus: npm install (Dadurch sollten alle für gulp erforderlichen Knotenmodule installiert werden.)
Bearbeiten Sie die Proxy-Server- Einstellung der Gulp-Konfigurationsdatei unter gulp/config.js : var PROXY_SERVER = http://your-server:your-port (Stellen Sie sicher, dass Sie Ihre echte Sandbox- oder Production Primo-Front-End-URL verwenden.) Beachten Sie, dass für SSL-Umgebungen (HTTPS) definieren den Server als: var PROXY_SERVER = https://your-server:443
Füllen Sie Ihren benutzerdefinierten View-Paketordner im benutzerdefinierten Paketordner („...primo-explorecustom“), indem Sie entweder die View-Codedateien von Ihrem Primo-Backoffice herunterladen oder das GitHub-Repository „primo-explore-package“ verwenden, um a zu starten Neuer Paketordner. (Wenn Sie bereits ein Ansichtspaket definiert und in das BO geladen haben, stellen Sie sicher, dass Sie es herunterladen, sonst werden Ihre vorherigen Änderungen nicht angezeigt und überschreiben diese möglicherweise.)
Wenn Ihr benutzerdefinierter Ansichtspaketordner „Auto1“ heißen würde, sollte der Verzeichnisbaum Ihrer Entwicklungsumgebung etwa so aussehen: 
WICHTIG: Der Name Ihres benutzerdefinierten Ansichtspaketordners muss mit einer vorhandenen Ansicht auf dem Proxyserver übereinstimmen, auf den verwiesen wird, sonst funktioniert der Gulp-Server nicht ordnungsgemäß. Stellen Sie bei der Entwicklung von Grund auf sicher, dass Sie zunächst eine Ansicht mit dem Primo Back Office-Ansichtsassistenten erstellen (oder kopieren). Anschließend können Sie Ihre Anpassungen mithilfe dieses Dokuments lokal vornehmen.
Beginnen Sie mit Ihren Codeanpassungen:
Führen Sie in der Befehlszeile den folgenden Befehl aus: gulp run --view <the VIEW_CODE folder> (Dadurch wird Ihr lokaler Server gestartet.)
(Wenn Sie beispielsweise gulp run --view Auto1 ausführen, wird die Umgebung gestartet und übernimmt die Anpassungen aus dem Ordner „Auto1“ .)
Für Primo VE-Kunden fügen Sie das Flag --ve hinzu: gulp run --view <the VIEW_CODE folder> --ve
Öffnen Sie einen Browser und geben Sie die folgende URL ein: localhost:8003/primo-explore/?vid=your-view-code (Beispiel: http://localhost:8003/primo-explore/search?vid=Auto1)
Für Primo VE-Kunden öffnen Sie die folgende URL: localhost:8003/discovery/?vid=your-institution-code:your-view-code
Jetzt sollten Sie in der Lage sein, Ihre Anpassungen mit echten Suchen und Ergebnissen von Ihrem zuvor definierten Proxyserver aus durchzuführen. Hinweis: Sobald Sie mit der Arbeit in dieser Umgebung beginnen, werden Sie feststellen, dass Sie die besten Ergebnisse erzielen, wenn Sie im Inkognito-Modus Ihres Browsers arbeiten. Alternativ können Sie Ihren Browser-Cache leeren, bevor Sie den Gulp-Server starten.
Sie können sofortiges Feedback zu Ihren Codeänderungen erhalten, indem Sie den Browser aktualisieren.
Führen Sie Ihre Änderungen gemäß der Dokumentation/Beispiele in: durch.
CSS
HTML
Bilder
JavaScript
Hinweis: Sie haben mehrere Möglichkeiten, die CSS-Datei (custom1.css) und die JS-Datei (custom.js) zu bearbeiten. Einige davon umfassen Methoden zum Aufteilen Ihrer Entwicklungen in separate Dateien. Bei Verwendung solcher Methoden werden die Dateien „custom1.css“ und „custom.js“ durch die verschiedenen Dateien überschrieben, wenn gulp ausgeführt wird. Platzieren Sie Ihr benutzerdefiniertes CSS und JS in Dateien mit unterschiedlichen Namen, z. B. „custommodule.css“ oder „custom.module.js“, damit es in den benutzerdefinierten CSS-/JS-Dateien zusammengefasst wird.
Sobald Sie mit der Anpassung des Pakets fertig sind, können Sie dieses Verzeichnis komprimieren und es mit dem Primo BackOffice hochladen.
Navigieren Sie in einem Befehlszeilenfenster zum Projektbasisverzeichnis: cd pathtoyourprojectfolderprimo-explore-devenv
Führen Sie in der Befehlszeile den folgenden Befehl aus: gulp create-package Sie werden mit einem Menü aufgefordert, in dem alle möglichen Pakete angegeben werden, die Sie erstellen können, z. B.:
Melden Sie sich im Primo-Backoffice an und navigieren Sie zum Abschnitt „UI-Anpassungspaketmanager“ : Primo Home > Primo Utilities > UI customization Package Manager
Verwenden Sie die Schaltfläche „Datei durchsuchen “, um die neue ZIP-Paketdatei zu finden und hochzuladen. (Befindet sich im Verzeichnis „PfadzuIhremProjektOrdnerprimo-explore-devenvpackage“.)
Vergessen Sie nicht, Ihre Änderungen bereitzustellen
Sobald Sie die Anpassung des Pakets abgeschlossen haben, können Sie es für die Veröffentlichung in Primo-Studio vorbereiten.
Navigieren Sie in einem Befehlszeilenfenster zum Projektbasisverzeichnis: cd pathtoyourprojectfolderprimo-explore-devenv
Führen Sie in der Befehlszeile den folgenden Befehl aus: gulp prepare-addon Sie werden aufgefordert, ein Menü anzuzeigen, in dem alle möglichen Pakete aufgeführt sind, die Sie erstellen können.
Sobald Sie die Ausführung des Skripts abgeschlossen haben, wird ein Ordner mit dem Add-on in pathtoyourprojectfolderprimo-explore-devenvaddons erstellt.
Aus dem obigen Ordner können Sie Ihr Add-on in NPM und in Primo-Studio veröffentlichen. Anweisungen finden Sie im Primo-Studio-Add-on-Tutorial
