Teknisa CLI

# Criar um novo projeto

# Produto


Nota

O Teknisa CLI cria apenas o frontend do seu projeto. Na seção Backend Zeedhi Next (opens new window) falamos um pouco sobre o backend dos projetos Next.

Dentro da pasta do seu projeto executa um dos dois comando abaixo:

teknisa create frontend

npx @zeedhi/teknisa-cli frontend

No terminal, dentre as opções disponíveis escolha Product.

Em seguida, entre com as informações solicitadas. O projeto será criado e as dependências iniciais serão instaladas.

Seu projeto deve estar com uma estrutura parecida com a imagem abaixo:

# Configurações


Na raiz do seu frontend, configure o arquivo .env.development:

  • VUE_APP_PUBLIC_PATH: Diretório public para o vue. Pode-se utilizar o /, valor que já vem como padrão.

  • VUE_APP_DEV_SERVER_PORT: Porta do seu ambiente vue (8282, 8080, etc...).

    • Apenas utilizado para desenvolvimento. No .env.production não há necessidade.

    Dica

    Para o cloud9, é necessário solicitar ao pessoal da redes a liberação de portas a serem utilizadas.

  • VUE_APP_META_CONTENT_SECURITY_POLICY: Parâmetro que controla o uso de ambientes seguros (https).

    • Nos ambientes dev e teste, deixar o valor em branco.
    • Em produção, seu valor deve ser Content-Security-Policy. Utilizar o mnemônico TEK_META_CONTENT_SECURITY_POLICY, que já possui tal valor como default.

  • VUE_APP_UPGRADE_INSECURE_REQUESTS: Mesma necessidade do anterior.

    • Nos ambientes dev e teste, deixar o valor em branco.
    • Em produção, seu valor deve ser upgrade-insecure-requests. Utilizar o mnemônico TEK_UPGRADE_INSECURE_REQUESTS, que já possui tal valor como default.

Modelo de .env.development preenchido: 
VUE_APP_PUBLIC_PATH=/
VUE_APP_DEV_SERVER_PORT=8080
VUE_APP_META_CONTENT_SECURITY_POLICY=
VUE_APP_UPGRADE_INSECURE_REQUESTS=

No diretório frontend/src/config, preencha o arquivo devEnvironment.json. Esse arquivo contém todas as configurações do produto e as configurações dos módulos que o produto precisa. Ao criar novos módulos, adicionem as configurações na propriedade modules, como o exemplo do login.

  • endPoint: Endereço do seu backend para realizar as requisições.
  • metadataEndPoint: Apontamento para o metadata das telas. Caso for utilizar o caminho padrão (frontend/public/metadata) deixar o valor vazio.
  • baseUrl: Diretório base do produto. Pode-se utilizar o /, valor que já vem como padrão.
  • product:
    • id: ID do produto no DevOps.
    • name: Nome do produto, que será o título da página.
    • url: Endereço onde a aplicação está rodando, com a porta.
    • logoUrl: Endereço que aponta para a logo da aplicação.
    • sessionTime: Tempo máximo de sessão. Em dev, é comum deixar um número bem grande.
    • modulesThemeColor: Cores do tema da aplicação.
  • modules:
    • login:
      • baseUrl: (Obrigatório em todos os módulos) Endereço onde o módulo está rodando, com porta.
      • routePath: (Específico do login) Caminho relativo até a tela de login.
      • backgroundImgUrl: (Específico do login) Endereço que aponta para a imagem de fundo da tela de login.
      • endPoint: (Obrigatório em todos os módulos) Endereço do backend do módulo.

Modelo de devEnvironment.json preenchido: 
{
  "endPoint": "http://192.168.120.42/next-project/backend/service/index.php",
  "metadataEndPoint": "",
  "baseUrl": "/",
  "product": {
    "id": "99999",
	"name": "Next",
	"url": "http://localhost:8080",
	"logoUrl": "http://localhost:8080/assets/img/teknisa.png",
	"sessionTime": "999999999",
	"modulesThemeColor": "#2d68c3"
  },
  "modules": {
    "login": {
	  "baseUrl": "http://localhost:8081",
	  "routePath": "/auth/login",
	  "backgroundImgUrl": "http://localhost:8080/assets/img/teknisa-login-background.jpg",
	  "endPoint": "http://localhost/next-project/modules/login/backend/service/index.php"
	}
  }
}

Na raiz da sua aplicação, crie o arquivo modules.json (bem parecido com o existente no Zeedhi Angular), que será utilizado para controle de versões de deploy. Não é mais necessário definir nesse arquivo caminhos de acesso aos módulos, apenas os ID's e versões máximas.

{
  "product": {
    "devOpsId": 99999
  },
  "login": {
    "maxVersion": "1.*",
    "devOpsId": 6138
  }
}

Ainda na raiz, crie o arquivo menu.json da sua aplicação. Existe um modelo dentro de frontend/public/metadata, mas é necessário que o mesmo exista na raiz da aplicação.

  • Para os menus dos módulos, o parâmetro route deve conter o caminho relativo completo. Vide exemplos em http://gitlab.teknisa.com/teknisa/login-next/-/blob/master/menu.json (opens new window).

  • Os ID's são necessários apenas no menu.json, pois a rotina de permissões referentes à o que o cliente contratou irá continuar. O grunt para gerar os ID's já virá configurado e pronto para uso. Para mais informações, vide seu Gruntfile.js.

Modelo de menu.json preenchido.

[
  {
    "id": "518518516165165156156",
    "name": "dashboard",
    "component": "ZdMenuLink",
    "icon": "mdi-monitor-dashboard",
    "label": "Dashboard",
    "route": "/",
    "isVisible": true,
    "order": 10
  },
  {
    "id": "561894894894894894849",
    "name": "tela1",
    "component": "ZdMenuLink",
    "icon": "mdi-account-switch",
    "label": "Tela 1",
    "route": "/tela1",
    "isVisible": true,
    "order": 20
  }
]

# Módulo


Os módulos devem ser criados dentro do diretório modules que por sua vez deve estar na raiz do seu projeto.

Dentro do diretório do seu módulo crie o frontend a partir do teknisa CLI.

teknisa create frontend

npx @zeedhi/teknisa-cli frontend

No terminal, dentre as opções disponíveis escolha Product.

Em seguida, entre com as informações solicitadas. O projeto será criado e as dependências iniciais serão instaladas.

A estrutura de pastas deve ser parecida com o da imagem abaixo:

# Configurações


Para desenvolvimento é necessário definir algumas propriedades nos arquivos .env.development no diretório frontend e o arquivo devEnvironment.json no diretório frontend/src/config.

  • A propriedade VUE_APP_DEV_SERVER_PORT deve ser definida com o valor da porta que o módulo de ACL vai rodar no seu ambiente de desenvolvimento.
    Exemplo: 8081.

Exemplo:

VUE_APP_PUBLIC_PATH=/
VUE_APP_DEV_SERVER_PORT=8081

No arquivo devEnvironment.json:

  • A propriedade endPoint deve ser definida com o valor do caminho do backend do módulo.
    Exemplo: http://localhost:9000/pm-next/modules/login/backend/service/index.php.

  • A propriedade metadataEndPoint deve ser definida com o valor da rota lib metadata.
    Exemplo: http://localhost:9000/pm-next/modules/login/backend/service/index.php/lib_metadata/.

Exemplo:

{
	"endPoint": "http://localhost:9000/pm-next/modules/acl/backend/service/index.php",
	"metadataEndPoint": "http://localhost:9000/pm-next/modules/acl/backend/service/index.php/lib_metadata/"
}

Algumas propriedade devem ser definidas no produto ao qual seu módulo pertence.
No arquivo devEnvironment.json as propriedades baseUrl (Indica a URL que seu módulo estar sendo acessado) e endPoint (URL do backend do seu módulo) devem ser preenchidas.

Exemplo:

...
"modules": {
	"meu-modulo": {
		"baseUrl": "http://localhost:8081",
		"endPoint": "http://localhost:/produto-next/modules/meu-modulo/backend/service/index.php"
	},
}

Nota

Assim como no produto, o Teknisa CLI cria apenas o frontend do seu projeto. Para mais informações dobre o backend consulte a seção Backend Zeedhi Next (opens new window).

← Atualizações →