primo explore devenv
December 2022
gulp 디렉토리 : 환경에 대한 다양한 빌드 스크립트와 대상 프록시 서버를 정의해야 하는 config.js 구성 파일을 보유합니다.
node_modules 디렉토리 : 시스템을 실행하는 데 필요한 다양한 타사 모듈을 보유합니다. 이러한 모듈은 package.json 파일에 정의되어 있습니다.
패키지 디렉터리 : 개발 패키지가 준비되면 이 폴더에 정의한 압축 패키지 파일을 생성하는 gulp create-package 명령을 사용하여 패키지를 빌드할 수 있습니다.
primo-explore 디렉토리 : 2개의 디렉토리로 구성됩니다.
개발 패키지를 사용하면 다음 페이지 구성 요소를 구성할 수 있습니다(자세한 내용은 링크를 따르세요).
CSS
HTML
이미지
자바스크립트
각 구성 유형 또는 모든 다른 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 (실제 Sandbox 또는 Production Primo 프런트 엔드 URL을 사용해야 합니다.) SSL 환경(HTTPS)은 서버를 다음과 같이 정의합니다: var PROXY_SERVER = https://your-server:443
Primo 백오피스에서 뷰 코드 파일을 다운로드하거나 primo-explore-package GitHub 리포지토리를 사용하여 사용자 정의 패키지 폴더("...primo-explorecustom")에 사용자 정의 뷰 패키지 폴더를 채우고 새 패키지 폴더. (이미 보기 패키지를 정의하고 이를 BO에 로드한 경우 - 다운로드했는지 확인하십시오. 그렇지 않으면 이전 변경 사항이 표시되지 않고 덮어쓸 수 있습니다.)
사용자 정의 보기 패키지 폴더가 "Auto1"이라고 불리는 경우 개발 환경 디렉터리 트리는 다음과 유사해야 합니다. 
중요: 사용자 정의 보기 패키지 폴더의 이름은 참조되는 프록시 서버의 기존 보기와 일치해야 합니다. 그렇지 않으면 Gulp 서버가 제대로 작동하지 않습니다. 처음부터 개발하려면 먼저 Primo Back Office 보기 마법사를 사용하여 보기를 생성(또는 복사)해야 합니다. 그런 다음 이 문서를 사용하여 로컬에서 사용자 정의를 수행할 수 있습니다.
코드 사용자 정의를 시작하세요.
명령줄에서 다음 명령을 실행합니다: 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
이미지
자바스크립트
참고: 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
파일 찾아보기 버튼을 사용하여 새로운 압축 패키지 파일을 찾아 업로드하세요. ("pathtoyourprojectfolderprimo-explore-devenvpackage" 디렉터리에 위치합니다.)
변경사항을 배포하는 것을 잊지 마세요.
패키지 사용자 정의를 마친 후에는 Primo-Studio에 게시할 수 있도록 준비할 수 있습니다.
명령줄 창에서 프로젝트 기본 디렉터리( cd pathtoyourprojectfolderprimo-explore-devenv 로 이동합니다.
명령줄에서 다음 명령을 실행하세요: gulp prepare-addon 빌드할 수 있는 가능한 모든 패키지를 지정하는 메뉴가 표시됩니다.
스크립트 실행을 마치면 추가 기능이 포함된 폴더가 pathtoyourprojectfolderprimo-explore-devenvaddons 에 생성됩니다.
위 폴더에서 추가 기능을 NPM 및 Primo-Studio에 게시할 수 있습니다. 지침은 Primo-Studio 추가 기능 튜토리얼을 참조하세요.
