GeoProcess Visual Builder

Introdução

O Visual Builder é uma ferramenta gráfica desenvolvida para facilitar o levantamento de requisitos no processo de criação de consumidores. Com ela, o desenvolvedor pode montar uma interface de saída dos consumidores, utilizando diversos componentes, como mapas, gráficos, tabelas e mensagens. Essa interface é então apresentada para discussão com o cliente ou usuário final, garantindo que todos os detalhes do projeto sejam alinhados.

Após a definição da interface, o código gerado automaticamente pelo Visual Builder em Python serve como ponto de partida para o desenvolvimento do consumidor final. Dessa forma, a ferramenta agiliza o processo, permitindo que o código base seja criado a partir da interface acordada com o cliente, simplificando a transição entre as etapas de planejamento e implementação.

Visão Geral

A estrutura com as pastas e arquivos principais do projeto Visual Builder está destacada a seguir:

Na raiz do projeto estão presentes os seguintes arquivos main.py, env.conf, requirements.txt e README.md:

• O arquivo main.py implementa o ponto de partida de toda a aplicação.
• O arquivo env.conf possui algumas configurações utilizadas na aplicação.
• O arquivo requirements.txt traz informações sobre ferramentas, e suas versões, necessárias para a execução da aplicação como um todo.
• O arquivo README.md funciona como um tutorial para executar o Visual Builder.

Na raiz do projeto também estão presentes as seguintes pastas answer, data, templates e venv:

• A pasta answer armazena as saídas geradas pela execução do Visual Builder.
• A pasta data traz várias subpastas onde se encontram arquivos JSON de referência para a construção dos objetos gráficos suportados pela ferramenta. É possível construir, por exemplo, diversos tipos de gráficos, de tabelas e mapas.
  • A subpasta data/charts traz os diversos modelos de gráfico suportados como gráficos em barra, pizza, histogramas, etc.
  • A subpasta data/maps apresenta os modelos de mapas suportados.
  • A subpasta data/tables traz os modelos de tabelas suportados.
  • A subpasta data/questions é utilizada como diretório para armazenamento das questões criadas no Visual Builder.
  • A subpasta data/templates possui código Python utilizado na montagem do código gerado do consumidor.
• A pasta templates contém os código HTML utilizados na implementação do frontend da aplicação.
• A pasta venv contém as instalação das bibliotecas Python utilizadas pelo ambiente virtual.

Instalação

Pré-Requisitos

Para que o Visual Builder funcione corretamente, é necessário atender aos seguintes pré-requisitos:

• Python
• Pip
• Git

Além disso, alguns subprojetos do GeoProcess também são necessários. Para isso, clone os seguintes repositórios:

• pgst-portal

  git clone https://github.com/ZETTA-ORG/pgst-portal.git
  

• pgst-lib

  git clone https://github.com/ZETTA-ORG/pgst-lib.git
  

Após a instalação dos pré-requisitos, você poderá preparar a aplicação Visual Builder.

Preparando a Aplicação

Primeiramente, clone o projeto pgst-visual-builder-1 com o seguinte comando:

git clone https://github.com/ZETTA-ORG/pgst-visual-builder-1.git

Observação

Esse projeto deve ser clonado dentro de uma pasta geoprocess, conforme a organização do projeto.

Configurando a Aplicação

Em seguida, copie o arquivo de configuração do ambiente com o comando apropriado para o seu sistema operacional:

Unix/macOSWindows

cp sample.env.conf env.conf

copy sample.env.conf env.conf

Depois, abra o arquivo env.conf e atualize-o conforme as configurações do seu ambiente de trabalho. Atenção especial aos caminhos de diretórios especificados nesse arquivo.

Para isolar as dependências do Python, crie um ambiente virtual venv com o comando a seguir:

Unix/macOSWindows

python3 -m venv venv

py -m venv venv

Ative o ambiente virtual no seu computador utilizando o comando abaixo:

Unix/macOSWindows

source venv/bin/activate

venv\Scripts\activate

Agora, instale as dependências do projeto utilizando o comando abaixo:

pip3 install -r requirements.txt

Em seguida, instale as dependências do projeto pgst-lib dentro do projeto principal:

pip3 install -e ../pgst-lib/ 

Executando a Aplicação

Para executar a aplicação em modo de desenvolvimento execute o comando:

flask --app main run --debug

Abrindo a Aplicação

Para abrir a aplicação acesse a URL: http://127.0.0.1:5000/login.

Informação

Fique atento para a porta em que a aplicação está sendo executada. Para encerrar a execução da aplicação, basta pressionar Ctrl + C.

Executando em Modo de Produção

Para executar a aplicação em modo de produção execute o comando no servidor:

gunicorn --bind 0.0.0.0:8078 -w 1 'main:app'

Abrindo a Aplicação em Produção

Para abrir a aplicação em modo produção acesse a URL: http://177.105.35.205:8078/login.

Trabalhando com o Visual Builder

Como mencionado anteriormente, o Visual Builder é uma ferramenta projetada para auxiliar no levantamento de requisitos para a criação de consumidores. Nesta seção, vamos explorar como utilizar essa ferramenta.

Ao abrir a aplicação, você será recebido com a tela de login, como mostrado abaixo:

Na configuração padrão, utilize as credenciais dev/dev para fazer login. Após autenticar-se, você verá a tela inicial da ferramenta. Essa tela oferece diversas informações, que serão explicadas a seguir. Inicialmente, temos a seção de boas-vindas:

Nessa tela, você encontra o menu com opções de criação de objetos (mapas, gráficos, tabelas, etc.), uma seção com explicações básicas sobre o uso da ferramenta e três botões principais: Visualizar Dashboard, Visualizar Parâmetros e Exportar Código. Vamos explorar esses botões mais adiante.

Para criar suas próprias questões, acesse Questões no menu GeoProcess. Você será levado à tela de gerenciamento, onde poderá criar novas questões ou editar as já existentes, como mostrado a seguir. Para iniciar uma nova questão, clique em Nova Questão.

Um tela semelhante à tela de boas-vindas se abrirá e você poderá entrar com informações sobre a questão em construção, como: código da questão, título, descrição e requisitos para a sua execução.

Incluindo Mapas

Uma vez inseridas as informações adicionais da questão, você pode adicionar objetos e ações a ela. Para adicionar um mapa, acesse Mapa Principal no menu GeoProcess e escolha o tipo de mapa que pretende inserir. Como exemplo, adicionaremos um mapa de área. Ao selecionar essa opção, a tela de construção do mapa é apresentada.

Para editar as informações do mapa, acesse o menu dropdown na área Json do Mapa e selecione a visualização em árvore (Tree) ou diretamente o código JSON (Code). Outra opção recomendada para trabalhar com mapas é usar a ferramenta GeoJson.io, acessível pelo link na mesma área. Com o GeoJson.io, você pode criar pontos, linhas ou áreas sobre a localização desejada.

Neste exemplo, foi criado um mapa de Lavras/MG com áreas circulares representando as principais escolas públicas. Após criar o mapa em GeoJson.io, copie o código JSON gerado e cole-o na área de código do mapa no Visual Builder. Clique em Atualizar Trecho de Código do Mapa para aplicar as mudanças. Preencha os campos de título e grupo do mapa, e finalize clicando em Adicionar o Mapa na Questão.

Incluindo Gráficos

Para incluir um gráfico na questão, selecione Gráficos no menu GeoProcess, onde a ferramenta oferece várias opções de gráficos. Neste exemplo, selecionaremos um gráfico de pizza. Ao escolher esse tipo, uma nova tela aparece com configurações básicas para o gráfico. Edite os dados na estrutura de árvore ou diretamente no código JSON. Após ajustar os dados do gráfico, insira um título e um identificador e clique em Adicionar o Gráfico na Questão.

Inserindo Tabelas

A inclusão de tabelas segue o mesmo fluxo. Vá em Tabelas no menu GeoProcess, escolha o tipo de tabela, edite seus dados, adicione um título, identificador e descrição e finalize com Adicionar a Tabela na Questão.

Observação

Não se esqueça de clicar em Salvar Questão para manter as alterações realizadas até agora.

Após salvar, você retornará à tela de Questões no GeoProcess, onde sua questão estará listada. Para reabrir a edição, clique no menu dropdown no final da linha da questão e selecione Carregar. A visualização inicial deve exibir os objetos que você adicionou, como na imagem abaixo.

Agora, sua questão inclui um mapa, um gráfico e uma tabela, conforme adicionado. Cada objeto pode ser acessado e editado conforme necessário. Para visualizar o resultado final, clique em Visualizar Dashboard. A visualização da questão ficará como ilustrado abaixo.

Definindo Requisitos da Questão

A última funcionalidade permite definir os requisitos da questão, com opções de texto ou fluxogramas. Os fluxogramas seguem a sintaxe do Mermaid, uma ferramenta que facilita a criação visual. Abaixo, mostramos um exemplo de fluxograma básico.

Exportando o código para um consumidor

Depois de concluir o desenvolvimento da interface no Visual Builder, é possível exportar o código gerado para utilizá-lo na criação de consumidores. Para isso, siga os passos abaixo:

1. Na tela de edição da questão, clique em Exportar Código:

   

2. O código gerado será exibido conforme mostrado na figura abaixo. Este exemplo apresenta apenas uma parte do código por motivos de espaço. Certifique-se de copiar o código completo e colá-lo no seu projeto consumidor:

   

Com isso, todas as funcionalidades do Visual Builder foram apresentadas, mostrando como ele pode auxiliar no desenvolvimento de consumidores. Para avançar no processo, siga o guia detalhado em Criando um Consumidor

Github do Projeto

A seguir temos o link para o github do projeto.

VISUAL-BUILDER