primo explore devenv
December 2022
Diretório gulp : contém os vários scripts de construção para o ambiente e o arquivo de configuração config.js no qual seu servidor proxy de destino deve ser definido.
Diretório node_modules : contém os vários módulos de terceiros necessários para executar o sistema. Esses módulos são definidos no arquivo package.json .
Diretório de pacotes : quando seu pacote de desenvolvimento estiver pronto, você poderá construí-lo usando o comando gulp create-package que criará o arquivo do pacote compactado que você define nesta pasta
Diretório primo-explore : consiste em 2 diretórios:
O pacote de desenvolvimento permite configurar os seguintes componentes da página (siga os links para obter detalhes):
CSS
HTML
Imagens
JavaScript
Para cada tipo de configuração, ou para cada Primo View diferente, deve haver uma pasta especificada com o nome da View (que segue a estrutura de diretório estabelecida) na pasta primo-explore/custom package.
Esta pasta de visualização personalizada pode ser baixada do Primo Back Office, seguindo Primo Home > Primo Utilities > UI customization Package Manager ou iniciada do zero no repositório GitHub primo-explore-package. (A vantagem de usar este repositório é que em cada pasta você encontrará um arquivo README.md específico contendo receitas e exemplos.)
Obs: Caso você não seja o Administrador da sua máquina, poderá ter problemas no fluxo abaixo, recomendamos utilizar o "prompt de comando do Node.js (procure por cmd no seu pc para localizá-lo) sempre que as instruções abaixo se referirem a " linha de comando".
Baixe o projeto deste repositório e coloque-o no seu computador
Descompacte o arquivo que você baixou em um local preferido da pasta do projeto de desenvolvimento
Baixe e instale o Node versão 16.17.0
Reinicie seu computador
Na linha de comando, execute o comando: npm install -g gulp
Em uma nova janela de linha de comando, navegue até o diretório base do projeto ( cd pathtoyourprojectfolderprimo-explore-devenv )
Na linha de comando, execute o comando: npm install (isso deve instalar todos os módulos de nó necessários para o gulp).
Edite a configuração do servidor proxy do arquivo de configuração Gulp, encontrada em gulp/config.js : var PROXY_SERVER = http://your-server:your-port (Certifique-se de usar seu Sandbox real ou URL de front-end do Production Primo.) Observe que para Ambientes SSL (HTTPS) definem o servidor como: var PROXY_SERVER = https://your-server:443
Preencha sua pasta de pacote de visualização personalizada na pasta de pacote personalizado ("...primo-explorecustom"), baixando os arquivos de código de visualização de seu Primo Back Office ou usando o repositório GitHub primo-explore-package) para iniciar um nova pasta do pacote. (se você já definiu um pacote de visualização e o carregou no BO - certifique-se de baixá-lo ou então você não verá e poderá sobrescrever suas alterações anteriores.)
Se a pasta do pacote de visualização personalizada fosse chamada de "Auto1", a árvore de diretórios do ambiente de desenvolvimento deveria ser semelhante a esta: 
IMPORTANTE: O nome da pasta do pacote de visualização personalizada deve corresponder a uma visualização existente no servidor proxy que está sendo referenciado ou o servidor Gulp não funcionará corretamente. Para desenvolvimento do zero, certifique-se primeiro de criar (ou copiar) uma visualização usando o Primo Back Office View Wizard; então você poderá realizar suas personalizações localmente usando este documento.
Inicie suas personalizações de código:
Na linha de comando, execute o comando: gulp run --view <the VIEW_CODE folder> (Isso iniciará seu servidor local.)
(Por exemplo, executar gulp run --view Auto1 iniciará o ambiente obtendo as personalizações da pasta Auto1 .)
Para clientes Primo VE, adicione o sinalizador --ve: gulp run --view <the VIEW_CODE folder> --ve
Abra um navegador e digite o seguinte URL: localhost:8003/primo-explore/?vid=your-view-code (Exemplo: http://localhost:8003/primo-explore/search?vid=Auto1)
Para clientes Primo VE, abra o seguinte URL: localhost:8003/discovery/?vid=your-institution-code:your-view-code
Agora você deve poder fazer suas personalizações com pesquisas e resultados reais, a partir do seu servidor proxy previamente definido. Nota: ao começar a trabalhar com este ambiente, você descobrirá que os melhores resultados são alcançados trabalhando no modo de navegação anônima do seu navegador; ou você pode limpar o cache do navegador antes de iniciar o servidor Gulp.
Você pode obter feedback imediato sobre as alterações no código atualizando o navegador.
Execute suas alterações de acordo com a documentação/exemplos em:
CSS
HTML
Imagens
JavaScript
Nota: você tem várias opções para editar o arquivo css (custom1.css) e o arquivo js (custom.js), alguns deles incluem métodos de divisão de seus desenvolvimentos em arquivos separados. Ao usar esses métodos - os arquivos custom1.css e custom.js serão substituídos por arquivos diferentes quando o gulp for executado. Coloque seu css e js personalizados em arquivos com nomes diferentes, como custommodule.css ou custom.module.js, para que sejam concatenados aos arquivos css/js personalizados.
Depois de terminar de personalizar o pacote, você pode compactar esse diretório e carregá-lo usando o Primo BackOffice.
Em uma janela de linha de comando, navegue até o diretório base do projeto: cd pathtoyourprojectfolderprimo-explore-devenv
Na linha de comando, execute o comando: gulp create-package Você será solicitado com um menu especificando todos os pacotes possíveis que você pode construir, como:
Faça login no Primo Back Office e navegue até a seção Gerenciador de pacotes de personalização da interface do usuário : Primo Home > Primo Utilities > UI customization Package Manager
Use o botão de navegação de arquivos para localizar e fazer upload do novo arquivo do pacote compactado. (Localizado no diretório "caminhoparaseuprojetopastaprimo-explore-devenvpackage".)
Não se esqueça de implantar suas alterações
Depois de terminar de personalizar o pacote, você poderá prepará-lo para ser publicado no Primo-Studio.
Em uma janela de linha de comando, navegue até o diretório base do projeto: cd pathtoyourprojectfolderprimo-explore-devenv
Na linha de comando, execute o comando: gulp prepare-addon Você será solicitado com um menu especificando todos os pacotes possíveis que você pode construir.
Assim que terminar de executar o script, uma pasta contendo o complemento será criada em pathtoyourprojectfolderprimo-explore-devenvaddons .
Na pasta acima você pode publicar seu add-on no NPM e no Primo-Studio. Para obter instruções, consulte: Tutorial do complemento Primo-Studio
