primo explore devenv
December 2022
gulp ディレクトリ: 環境のさまざまなビルド スクリプトと、ターゲット プロキシ サーバーを定義する必要があるconfig.js構成ファイルが保持されます。
node_modules ディレクトリ: システムの実行に必要なさまざまなサードパーティ モジュールを保持します。これらのモジュールはpackage.jsonファイルで定義されます。
パッケージ ディレクトリ: 開発パッケージの準備ができたら、 gulp create-packageコマンドを使用してビルドできるようになります。このコマンドにより、このフォルダーに定義した zip パッケージ ファイルが作成されます。
primo-explore ディレクトリ: 2 つのディレクトリで構成されます:
開発パッケージを使用すると、次のページ コンポーネントを構成できます (詳細についてはリンクを参照してください)。
CSS
HTML
画像
JavaScript
構成タイプごと、またはさまざまな Primo View ごとに、 primo-explore/customパッケージフォルダー内にビューにちなんで名付けられた指定フォルダー (確立されたディレクトリ構造に準拠) が存在する必要があります。
このカスタム View フォルダーは、 Primo Home > Primo Utilities > UI customization Package Managerに従って Primo バックオフィスからダウンロードするか、primo-explore-package GitHub リポジトリから新たに開始することができます。 (このリポジトリを使用する利点は、各フォルダーにレシピと例を含む特定の README.md ファイルがあることです。)
注: マシンの管理者ではない場合は、以下のフローで問題が発生する可能性があります。以下の手順で言及されている場合は常に、「Node.js コマンド プロンプト (PC で cmd を検索して見つけます)」を使用することをお勧めします。コマンドライン」。
このリポジトリからプロジェクトをダウンロードし、コンピュータに配置します。
ダウンロードしたファイルを開発プロジェクト フォルダーの任意の場所に解凍します。
Node バージョン 16.17.0 をダウンロードしてインストールします。
コンピュータを再起動します
コマンドラインから、次のコマンドを実行します: npm install -g gulp
新しいコマンド ライン ウィンドウで、プロジェクトのベース ディレクトリ ( cd pathtoyourprojectfolderprimo-explore-devenv ) に移動します。
コマンドラインから、コマンドnpm installを実行します (これにより、gulp に必要なすべてのノード モジュールがインストールされます)。
gulp/config.jsにある Gulp 設定ファイルのプロキシサーバー設定を編集します: var PROXY_SERVER = http://your-server:your-port (必ず実際のサンドボックスまたはプロダクション Primo フロントエンド URL を使用してください。) SSL 環境 (HTTPS) では、サーバーを次のように定義します。 var PROXY_SERVER = https://your-server:443
Primo バック オフィスからビュー コード ファイルをダウンロードするか、primo-explore-package GitHub リポジトリを使用して、カスタム パッケージ フォルダー (「...primo-explorecustom」) にカスタム View パッケージ フォルダーを追加して、新しいパッケージフォルダー。 (すでにビュー パッケージを定義して BO にロードしている場合は、必ずダウンロードしてください。そうしないと、以前の変更が表示されず、上書きされる可能性があります。)
カスタム ビュー パッケージ フォルダーの名前が「Auto1」の場合、開発環境のディレクトリ ツリーは次のようになります。 
重要:カスタム ビュー パッケージ フォルダーの名前は、参照されているプロキシ サーバー上の既存のビューと一致する必要があります。一致しない場合、Gulp サーバーは正しく機能しません。最初から開発する場合は、必ず最初に Primo Back Office View Wizard を使用してビューを作成 (またはコピー) してください。その後、このドキュメントを使用してローカルでカスタマイズを実行できます。
コードのカスタマイズを開始します。
コマンド ラインから、次のコマンドを実行します: gulp run --view <the VIEW_CODE folder> (これにより、ローカル サーバーが起動します。)
(たとえば、 gulp run --view Auto1を実行すると、 Auto1フォルダーからカスタマイズを取得して環境が開始されます。)
Primo VE 顧客の場合は、--ve フラグを追加します: gulp run --view <the VIEW_CODE folder> --ve
ブラウザを開いて次の URL を入力します: localhost:8003/primo-explore/?vid=your-view-code (例: http://localhost:8003/primo-explore/search?vid=Auto1)
Primo VE 顧客の場合は、次の URL を開きます: localhost:8003/discovery/?vid=your-institution-code:your-view-code
これで、以前に定義したプロキシ サーバーから実際の検索と結果をカスタマイズできるようになります。注: この環境で作業を開始すると、ブラウザのシークレット モードで作業すると最良の結果が得られることがわかります。または、Gulp サーバーを起動する前にブラウザのキャッシュをクリアすることもできます。
ブラウザを更新すると、コードの変更に関するフィードバックをすぐに得ることができます。
次のドキュメント/例に従って変更を実行します。
CSS
HTML
画像
JavaScript
注: css ファイル (custom1.css) と js ファイル (custom.js) を編集するには複数のオプションがあり、その中には開発を分割して別個のファイルにする方法が含まれています。このようなメソッドを使用する場合、gulp の実行時に、custom1.css ファイルとcustom.js ファイルは別のファイルによってオーバーライドされます。カスタム css と js を、custommodule.css やcustom.module.js などの異なる名前のファイルに配置して、カスタム css/js ファイルに結合します。
パッケージのカスタマイズが完了したら、そのディレクトリを圧縮し、Primo BackOffice を使用してアップロードできます。
コマンドラインウィンドウで、プロジェクトのベースディレクトリに移動します: cd pathtoyourprojectfolderprimo-explore-devenv
コマンド ラインから、コマンドgulp create-packageを実行します。次のような、ビルドできるすべてのパッケージを指定するメニューが表示されます。
Primo Back Officeにログインし、 UIカスタマイズパッケージマネージャセクションに移動します: Primo Home > Primo Utilities > UI customization Package Manager
ファイル参照ボタンを使用して、新しい zip パッケージ ファイルを見つけてアップロードします。 (「pathtoyourprojectfolderprimo-explore-devenvpackage」ディレクトリにあります。)
変更をデプロイすることを忘れないでください
パッケージのカスタマイズが完了したら、Primo-Studio に公開できるように準備できます。
コマンドラインウィンドウで、プロジェクトのベースディレクトリに移動します: cd pathtoyourprojectfolderprimo-explore-devenv
コマンドラインから、次のコマンドを実行します: gulp prepare-addonビルドできるすべてのパッケージを指定するメニューが表示されます。
スクリプトの実行が完了すると、アドオンを含むフォルダーがpathtoyourprojectfolderprimo-explore-devenvaddonsに作成されます。
上記のフォルダーから、アドオンを NPM および Primo-Studio に公開できます。手順については、Primo-Studio アドオン チュートリアルを参照してください。
