Customizações Teknisa

# Projeto

# Baixando o projeto


  • Autentique no Customer Portal (opens new window);
  • Abra a tela Deploy de Produto;
  • Salve o valor do campo Id (Customização), ele será utilizado nos próximos passos;
  • Selecione o produto desejado;
  • Selecione a aba Customizações;
  • Clique na ação Baixar Projeto Modelo.

downloadModelProject

  • Extraia o pacote que foi baixado em seu ambiente no diretório desejado. Nesse guia, utilizaremos a pasta customization como raiz do seu projeto.
  • O pacote contém um alto volume de arquivos. Realizar a descompactação pelo WinRAR pode demorar muito tempo.
  • Em ambientes Linux (recomendado), siga os passos abaixo para realizar o processo mais rapidamente:
    • Crie uma nova pasta.
    • Mova o pacote baixado para dentro dela.
    • Em um terminal localizado na pasta que foi criada, execute o comando abaixo:
tar -zxf customizationModel.tar.gz -C ./

# Configurações

# Id do Projeto


  • No arquivo backend/config/parameters.xml.template, altere o valor do parâmetro projectId para o valor que foi salvo no início desse guia, do campo Id (Customização).
  • Exemplo de configuração para o valor 1:
<parameter key="projectId">1</parameter>
  • Nos arquivos frontend/src/config/prodEnvironment.json e frontend/src/config/devEnvironment.json, altere o valor da propriedade id do product para o mesmo valor.
  • Exemplo de configuração para o valor 1:
"product": {
	"id": "1",
    (...)
}

Atenção!

Apenas altere a configuração acima se não utilizar porta padrão 80!

# Frontend


  • O acesso ao backend (endpoint) do seu projeto está pré configurado para acessar http://localhost/customization (ou seja, utilizando a porta 80). Caso esteja utilizando outra porta para o Apache em seu container, altere no arquivo frontend/src/config/devEnvironment.json todas as configurações de endPoint e metadataEndPoint, informando a sua porta.
  • Exemplo de configuração para a porta 9090:

 
 














 




{
	"endPoint": "http://localhost:9090/customization/backend/service/index.php",
	"metadataEndPoint": "http://localhost:9090/customization/backend/service/index.php/lib_metadata/",
	"baseUrl": "/",
	"product": {
		"id": "1",
		"name": "Customizações",
		"url": "http://localhost:8080",
		"logoUrl": "http://localhost:8080/assets/img/logo.png",
		"sessionTime": "9999999999999999",
		"modulesThemeColor": "#040486"
	},
	"modules": {
		"login": {
			"baseUrl": "http://localhost:8181",
			"routePath": "/auth/login",
			"backgroundImgUrl": "http://localhost:8080/assets/img/teknisa-login-background.jpg",
			"endPoint": "http://localhost:9090/customization/modules/login/backend/service/index.php"
		}
	}
}
  • Não há a necessidade de alterar as demais configurações no arquivo citado acima.

# Backend


  • O arquivo backend/config/environment/devEnvironment.json contém as variáveis de backend do seu projeto, como o Banco de Dados.
    • Altere o valor dos parâmetros de conexão com o banco de dados Oracle DB_ORA_USER, DB_ORA_PASSWORD, DB_ORA_HOST, DB_ORA_PORT e DB_ORA_DBNAME.
    • Altere o valor dos parâmetros de conexão com o Mongo (utilizado para armazenar sessões) DB_MONGO_HOST e DB_MONGO_PORT.
    • Caso utilizar rotinas integradas com o FileServer, altere o valor dos mnemônicos FILE_SERVER_KEY e FILE_SERVER_URL. Por padrão, o ambiente de teste da Teknisa está sendo utilizado.
  • Não há necessidade de alterar as demais configurações.

# Atualizando as configurações


  • Em um terminal, entre em seu container com o comando docker exec -it -u seu_usuario tek-php7 bash. Entre no diretório do seu projeto, na pasta frontend e execute o comando abaixo:
grunt

Nota

Execute o comando acima sempre que alterar as configurações do backend!

# Executando o projeto


  • Em um terminal, entre no diretório do seu projeto, na pasta frontend e execute o comando abaixo:
npm run serve

Nota

Lembre-se de entrar no seu container com o comando docker exec -it -u seu_usuario tek-php7 bash antes de executar o comando!

  • A saída será algo parecido com a imagem abaixo, mostrando que o projeto está em execução na porta configurada.

run-serve

Atenção!

Verifique no console o endereço e porta no qual sua aplicação está sendo executada. Caso não seja a porta configurada (por padrão 8080 se não alterada), verifique em sem ambiente se outro serviço está a utilizando. Nesse caso, sua aplicação não funcionará. Pare o serviço ou altere a configuração de porta no início da seção Frontend logo acima.

  • No navegador Google Chrome (recomendado para utilizar aplicações Teknisa), abra o endereço da sua aplicação.
    • No primeiro acesso, você será redirecionado para autenticação.
    • Marque a opção Manter Conectado para que sua sessão de desenvolvimento não caia com o tempo.
    • Informe um Operador existente em sua base de dados e sua Senha.
  • Se tudo ocorreu bem, você será redirecionado para o Dashboard e seu projeto está pronto para uso.
  • No menu, existem exemplos básicos de telas que não persistem dados no banco, mas possuem toda a rotina de comunicação com o backend.

Atenção!

Lembrem-se que esse passo apenas executa o frontend da sua aplicação. Para que seu backend funcione, mantenha o serviço do docker executando e seu container rodando, como configurados previamente.

# Telas de exemplo


Abaixo estão listadas as telas de exemplo que podem ser consultadas. Para verificar o código e como as parametrizações são realizadas, verifique os arquivos de metada (frontend/public/metadata/example) e seus respectivos controllers (frontend/src/controllers).

# Grid


  • Modelo de tela simples que todas as operações CRUD serão feitas no próprio componente.
  • A Inserção adiciona um novo registro para preenchimento dos campos editáveis.
  • Para Editar um registro existente, clique duplo em algum campo editável.
  • A Exclusão ficará disponível ao selecionar um registro no checkbox que cada um possui.
  • O botão Filtro abre um modal para filtragem dos dados.
  • O botão Colunas serve para realizar configurações em cada coluna, até escondê-las.
  • O botão Layout serve para salvar as configurações feitas a partir do botão Colunas.

# Grid com Modal


  • Modelo mais utilizado.
  • Botões Filtro, Colunas, Layout e Exclusão como o anterior.
  • A Inserção nesse caso abre um modal para preenchimento dos dados, o que colabora com o usuário para dados maiores.
  • Clique simples no registro abre um modal para editar o registro.
  • Clique duplo servirá para edições mais ágeis, diretamente no grid.

# Formulário


  • Modelo de tela para cadastro único ou envio de informações.
  • Possuirá os campos necesários.
  • Botões poderão ser customizados
  • Enviar valida se os campos obrigatórios estão preenchidos.

# Mestre Detalhe


  • Modelo de tela mais robusta para grandes rotinas.
  • Funções CRUD poderão seguir o padrão do exemplo Grid ou do Grid com Modal, de acordo com a necessidade.
  • Clique simples no registro abre o detalhamento em tela cheia, com possibilidade de navegação entre os registros utilizando o componente no canto superior direito.
  • Botões customizados poderão ser criados e aparecerão no rodapé.

← Criando Nova Tela →