A criação de plugins no Cronapp é de forma high code no momento atual e , através da seleção de modelos, é possível criar plugins do tipo servidor, cliente e componente.

Novo plugin

Ao clicar no ícone novo (seta da Figura 1), será aberta a janela de criação de projeto. Para criar um plugin, selecione a opção plugin (1 da Figura 1) na aba high-code, devendo informar um nome para esse plugin  (2 da Figura 1) e selecionar uma fonte (3 da Figura 1). Ao clicar em finalizar, será aberta as janelas de configuração conforme o tipo da fonte selecionada.

Figura 1 - Criar plugin na IDE Cronapp

Projeto está sob controle de versão?

Se o projeto do tipo plugin já foi criado e está versionado, deve-se marcar esta opção para abrir a próxima janela controle de versão (Figura 1.1).

Figura 1.1 - Janela de controle de versão

• Protocolo: seleciona o protocolo de controle de versão, nesse caso o GIT;
• URL do Repositório: informa a URI do repositório que contém o projeto do tipo plugin;
• Anônimo: ao marcar essa caixa, é possível importar projetos que estejam como públicos sem informar o usuário e a senha;
• Usuário: informa o usuário do serviço do protocolo, nesse caso o serviço GIT;
• Senha: informa a senha do serviço do protocolo, nesse caso o serviço GIT;
• Nome do autor: preenchido automaticamente com os dados cadastrados no Cronapp, é o nome que será informado ao realizar uma atualização no arquivo;
• Email do autor: preenchido automaticamente com os dados cadastrados no Cronapp, é o e-mail que será informado ao realizar uma atualização no arquivo;
• Branch: seleciona a branch desejada do projeto.

Baseado em modelo existente

Se o projeto é novo, deve-se marcar esta opção. Será aberta a janela de modelos (Figura 1.2), podendo ser do tipo componente, cliente para bloco de programação e servidor para bloco de programação.

Figura 1.2 - Modelos da IDE para criar plugins

• Componente visual: modelo utilizado para criar plugins que servirão como componentes visuais, podendo ser tanto web quanto mobile;
• Plugin cliente para bloco de programação: modelo utilizado para criar plugins que serão utilizados nos blocos de programação do tipo cliente da IDE, podendo ser tanto web quanto mobile;
• Plugin servidor para bloco de pogramação: modelo utilizado para criar plugins que serão utilizados no bloco de programação do tipo servidor da IDE.

O projeto está em um arquivo ZIP?

Permite importar projetos do tipo plugin compactados. Será aberta uma janela para selecionar o arquivo no computador do usuário (Figura 1.3).

Figura 1.3 - Selecionar projeto compactado

Modelos da IDE

Existe três modelos para criar plugins que são componente visual, cliente para bloco de programação e servidor para bloco de programação e cada um desses modelos tem suas particularidades.

Plugin de componente visual

Ao selecionar o modelo componente visual, será direcionado para a janela de informe dos campos no qual deve ser informado um nome tanto para ID do componente quanto para o nome do componente (Figura 2.1.1).

Figura 2.1.1 - Campos para criar componente

Ao finalizar, a estrutura do projeto será mostrada na árvore de arquivos e é criada tanto para mobile quanto para web (Figura 2.1.2). Se o plugin vai ser somente web - basta somente excluir a pasta mobile (mobileapp) e vice versa.

Figura 2.1.2 - Estrutura do plugin do tipo componente visual

Por padrão, ambas as pastas apresentam os seguintes arquivos:

• id_do_componente.template.html: é o arquivo usado para criar o template do componente, que é um HTML;
• id_do_componente.components.json: é o arquivo usado para definir as propriedades e eventos do componente, em um JSON;
• id_do_componente.js: é o arquivo usado para desenvolver a lógica do componente, em JavaScript.

Plugin para bloco cliente

Ao selecionar o modelo plugin cliente para bloco de programação, será direcionado para a janela de informe dos campos (Figura 2.2.1) no qual deve ser preenchido os seguintes campos:

• Nome do arquivo: campo para informar o nome do arquivo JavaScript a ser criado;
• Nome da função: campo para informar o nome da função do arquivo JavaScript a ser criado e que será exibida no bloco quando utilizar o plugin;
• Nome reduzido da função: campo para informar o nome reduzido da função do arquivo JavaScript;
• Descrição da função: campo para descrever a finalidade da função;
• Categoria: campo para criar a categoria em que esse bloco se encontrará quando o plugin for utilizado.

Figura 2.2.1 - Campos para criar bloco cliente

Ao finalizar, a estrutura do projeto será mostrada na árvore de arquivos e contém as pastas web e mobile com seus respectivos arquivos JavaScript como também contém os arquivos properties (Figura 2.2.2). Se o plugin vai ser somente para web - basta somente excluir a pasta mobile (mobileapp) e vice versa.

Figura 2.2.2 - Estrutura do plugin do tipo bloco cliente

Arquivo cronapi.js

O arquivo JavaScript criado, tanto para web quanto para mobile, precisa seguir a nomenclatura padrão: nome_do_arquivo.cronapi.js e também precisa estar contida na pasta que também vem por padrão (a pasta cronapi). O código base do arquivo criado vem com alguns parâmetros (anotações) tidos como padrão e eles podem ser modificados a depender da necessidade, mas eles são essenciais para garantir a funcionalidade.

Figura 2.2.3 - Arquivo JavaScript

• @type: define o tipo da função;
• @name: nome da função;
• @description: descrição sobre a funcionalidade da função;
• @multilayer: define se o componente criado estará disponível tanto no bloco cliente quanto no servidor (true) ou somente no bloco cliente (false);
• @param: define o tipo do parâmetro de entrada da função, podendo ser LIST, JSON, DOUBLE, DATETIME, DATASET, BOOLEAN, BLOCK ou class;
• @returns: define qual o tipo de retorno da função, podendo ser LIST, JSON, DOUBLE, DATETIME, DATASET, BOOLEAN, BLOCK ou class.

Plugin para bloco servidor

Ao selecionar o modelo plugin servidor para bloco de programação, será direcionado para a janela de informe dos campos (Figura 2.3.1) no qual deve ser preenchido os seguintes campos:

Arquivo template.properties

Além dos arquivos JavaScript, o plugin apresenta o arquivo template.properties e esse arquivo possui informações que podem ajudar no momento da instalação do plugin. Basicamente, ele informa o caminho dos arquivos do plugin (src) que serão incluidos no index.html, passando o caminho (resource) dele e eles devem seguir uma ordem (definida pela numeração) e são em pares - ou seja, para cada arquivo no plugin (src) tem que ter seu próprio meio específicado para o index (resource) do projeto que o plugin será instalado (FIgura 2.2.4).

Figura 2.4 - Arquivo properties

Adicionando parâmetros

É também no arquivo properties que podem ser adicionados parâmetros para que eles sejam exibidos no momento da instalação do plugin no projeto.