Visualização avançada para Process Mining

Tiago Lemos da Costa Neves Ribeiro

Dissertação para obtenção do Grau de Mestre em

Engenharia Informática e de Computadores

Orientador: Prof. Diogo Manuel Ribeiro Ferreira

JúriPresidente: Prof. Mário Rui Fonseca dos Santos Gomes

Orientador: Prof. Diogo Manuel Ribeiro FerreiraVogal: Prof. Pável Pereira Calado

Maio 2016

Resumo

As tecnicas de process mining sao usadas para analisar processos de negocio a partir de registos

de eventos. Tipicamente, estas tecnicas geram um modelo, sob a forma de um grafo, que representa

o comportamento do processo extraıdo a partir da sequencia de eventos. Dependendo desse com-

portamento, o grafo pode ser muito complexo e de difıcil analise. O objetivo deste trabalho consiste

em criar uma ferramenta de process mining que tira partido de tecnologias Web para gerar modelos

interativos, que permitem ao utilizador reorganizar os nos e arcos do grafo, filtrar elementos, etc., a

fim de facilitar a compreensao desses modelos.

Palavras Chave

Process mining, modelacao de processos, visualizacao interativa, geracao de conteudo dinamico

na Web

1

Abstract

Process mining techniques are used to analyse business processes from event logs. Typically,

such techniques generate a model in the form of a graph, representing the process behavior extracted

from a sequence of events. Depending on this behavior, the graph can be very complex and difficult

to analyze. The objective of this work is to create a process mining tool that takes advantage of Web

technologies to create interactive models, which allow the user to rearrange the nodes and edges of

the graph ,filter elements, etc., in order to facilitate the understanding of these models.

Keywords

Process mining, process modeling, interactive visualization, dynamic content on the Web

3

Siglas

API Application Programming Interface. 12, 24, 26, 38

BPIC Business Processing Intelligence Challenge. 42, 46

BPMN Business Process Modeling and Notation. 16

CSS Cascading Style Sheets. 24, 30, 38, 39

CSV Comma-separated values. 30, 48

DOM Document Object Model. 25, 27

EPC Event-driven Process Chains. 16

HTML HyperText Markup Language. 24–26, 30, 38, 39

JSON JavaScript Object Notation. 34, 38, 52

MVVM Model–view–viewmodel. 12

RAM Random Access Memory. 38, 48

SaaS Software as a Service. 51, 52

SPA Single Page Application. 38

SVG Scalable Vector Graphics. 25, 26

5

Lista de Figuras

1.1 Exemplo de modelo complexo conhecido como modelo spaghetti. . . . . . . . . . . . . 12

2.1 Exemplo de registo de eventos importado com a aplicacao LibreOffice Calc. . . . . . . 17

2.2 Perspetiva de fluxo na ferramenta Disco. . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.3 Rede social descoberta atraves da ferramenta ProM. . . . . . . . . . . . . . . . . . . . . 18

2.4 Perspetiva de desempenho realizada na ferramenta Disco. . . . . . . . . . . . . . . . . 19

2.5 Escolha de algoritmos a aplicar na ferramenta ProM e modelo visual resultante. . . . . 20

2.6 Importacao de um ficheiro de log na ferramenta Disco e modelo de atividades gerado. . 20

3.1 Exemplo de grafo nao dirigido construıdo por D3. O grafo permite interacao e animacoes

de fısica simulando a tensao entre os nos ligados. . . . . . . . . . . . . . . . . . . . . . 25

3.2 Grafo dirigido gerado por Dagre-D3, os nos e ligacoes sao posicionados de acordo

com algoritmos proprios[1] [2]. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.3 Exemplo de grafo interativo criado em JointJS, os nos e arcos sao interativos e podem

ser movidos ou editados pelo utilizador. . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4.1 Importacao de registos usando a aplicacao desenvolvida. . . . . . . . . . . . . . . . . . 31

4.2 Modelo de fluxo gerado na ferramenta desenvolvida. . . . . . . . . . . . . . . . . . . . . 35

4.3 Modelo de entrega de trabalho. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.4 Perspetiva de desempenho na aplicacao desenvolvida. . . . . . . . . . . . . . . . . . . 36

4.5 Modelo de rede social com filtragem de arcos aplicada . . . . . . . . . . . . . . . . . . . 37

5.1 Perspetiva de fluxo original gerada atraves do registo da instituicao financeira. . . . . . 43

5.2 As redes sociais da instituicao financeira sao bastantes complexas e requerem algu-

mas filtragens e organizacao para poderem ser analisadas eficazmente. . . . . . . . . . 43

5.3 Os mesmos modelos das redes sociais da instituicao financeira simplificados atraves

do uso de filtros e reorganizacao de nos. . . . . . . . . . . . . . . . . . . . . . . . . . . 44

5.4 Perspetiva de fluxo do sistema VINST. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

5.5 Perspetiva de entrega de trabalho do sistema VINST. . . . . . . . . . . . . . . . . . . . 45

5.6 Perspetiva de trabalho em conjunto do sistema VIST. . . . . . . . . . . . . . . . . . . . . 45

6.1 Performance de geracao de modelo de fluxo a partir de um registo de eventos com

poucas entradas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

7

6.2 Performance de geracao de modelo de entrega de trabalho a partir de um registo de

grandes dimensoes. Ao aumentar a complexidade do modelo o tempo para gerar a

disposicao dos elementos e renderizar aumenta exponencialmente. . . . . . . . . . . . 50

6.3 Problema de visualizacao criado pelos pontos de controlo estaticos ao arrastar um no. 50

8

Conteudo

1 Introducao 11

1.1 Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1.2 Aplicacoes baseadas na Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1.3 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1.4 Estrutura do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2 Process Mining 15

2.1 Registos de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.2 Perspetivas de Analise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.2.1 Perspetiva de Fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

2.2.2 Perspetiva Organizacional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.2.3 Perspetiva de Desempenho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.3 Tipos de Process Mining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.4 Ferramentas Existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.5 Problemas das Ferramentas Atuais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3 Visualizacao Dinamica na Web 23

3.1 Aplicacoes Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.2 Tecnologias Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.2.1 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2.2 D3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2.3 Dagre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2.4 Dagre-D3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.2.5 JointJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.2.6 Haxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.2.7 Outras bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4 Desenvolvimento da Aplicacao 29

4.1 Importacao dos Registos de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4.2 Algoritmos usados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.2.1 Fluxo de atividades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.2.2 Rede Social: Passagem de Trabalho . . . . . . . . . . . . . . . . . . . . . . . . . 32

9

4.2.3 Rede Social: Trabalho em Conjunto . . . . . . . . . . . . . . . . . . . . . . . . . 33

4.2.4 Tempos e Desempenho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.3 Modelos gerados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.4 Interatividade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.5 Pos-processamento de arcos e nos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

4.6 Implementacao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.6.1 Single-Page Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.6.2 Janela de visualizacao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.6.3 Representacao do registo de eventos . . . . . . . . . . . . . . . . . . . . . . . . 38

4.6.4 Compilacao e geracao do codigo . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

5 Casos de Estudo 41

5.1 Registos de uma instituicao financeira . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

5.2 Registos de incidentes da Volvo IT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

6 Conclusoes e trabalho futuro 47

6.1 Resultado Final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6.2 Problemas encontrados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6.2.1 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6.2.2 Pontos de controle estaticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

6.3 Trabalho Futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

6.3.1 Melhorias de performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

6.3.2 Pontos de controle dinamicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

6.3.3 Processamento no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

6.3.4 Aplicacao Desktop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

6.3.5 Utilizar apenas Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Bibliografia 53

10

1Introducao

11

1.1 Contexto

Process mining e uma disciplina nova que se dedica a processar registos de atividades de

negocios, sistemas tecnologicos ou ate web sites, para extrair modelos que refletem o funcionamento

dessas atividades de um ponto de vista global [3]. Os dados analisados e os modelos gerados tem

varias aplicacoes, desde a descoberta de processos, testes de conformidade, previsoes, otimizacoes

e analise de redes sociais dentro das organizacoes [4].

As ferramentas atualmente existentes de process mining geram modelos visuais estaticos que

nao permitem a interacao com o utilizador ou onde esta e bastante reduzida, essa falta de interativi-

dade dificulta a analise dos modelos gerados especialmente para modelos de grande complexidade

ou onde a disposicao inicial dos elementos nao e a mais nıtida.

Este trabalho oferece uma ferramenta moderna para process mining tirando partido de tecnolo-

gias Web e de abordagens recentes para aplicacoes graficas como reatividade e padroes de desenho

como Model–view–viewmodel (MVVM)[5] para fornecer uma ferramenta baseada nas ja existentes

mas com elementos de interatividade para manipulacao dos elementos graficos, o que facilita a com-

preensao e analise dos modelos gerados e oferece uma maior usabilidade.

Figura 1.1: Exemplo de modelo complexo conhecido como modelo spaghetti.

1.2 Aplicacoes baseadas na Web

Hoje em dia a tendencia no desenvolvimento de aplicacoes de software e estas serem projetadas

para recorrer ou prestarem servicos na internet tais como aceder a bases de dados, conectar varios

utilizadores da mesma aplicacao ou aceder a Application Programming Interface (API)s e servicos

12

remotos que realizam parte das funcionalidades da aplicacao, etc. Outra tendencia atual e criar

aplicacoes multi-plataformas a partir do mesmo codigo base que corram em varios dispositivos e

sistemas operativos.

Estas tendencias tem levado a uma grande adesao e a um rapido desenvolvimento de tecnologias

Web que permitem criar aplicacoes que correm num browser a semelhanca de uma pagina Web

convencional e que portanto sao acessıveis, multi-plataforma e projetadas para funcionar com acesso

a rede.

Alem dos avancos das tecnologias Web usadas para construir aplicacoes, tambem os paradigmas

evoluıram com a introducao de conceitos como reatividade[5] e procuram-se construir aplicacoes

cada vez mais dinamicas e interativas que proporcionam uma experiencia de utilizacao mais intuitiva

e eficaz. As tecnologias Web tem-se tornado padrao no desenvolvimento de aplicacoes e os padroes

de interfaces interativas e de desenvolvimento ainda nao sao acompanhados pelas aplicacoes de

process mining que seguem as abordagens mais tradicionais das aplicacoes Desktop.

Embora as tecnicas de process mining tenham vindo a evoluir, as ferramentas que permitem

explorar essas tecnicas ainda nao tiram proveito das tecnologias Web que oferecem vantagens em

termos de conectividade, distribuicao, facilidade de desenvolvimento e inovacao das bibliotecas que

compoem esse ecossistema.

1.3 Objetivo

Este trabalho fornece uma aplicacao base modular e escalavel onde incorpora algumas das

tecnicas e algoritmos de process mining existentes. Os resultados e modelos gerados sao apresen-

tados ao utilizador tirando partido de bibliotecas inovadoras de visualizacao e interacao com graficos

vetoriais que foram adaptadas e integradas nesta aplicacao.

Consegue-se assim uma aplicacao moderna de process mining, que une as tecnicas de proces-

samento de registos e construcao de modelos ja existentes noutras aplicacoes, as tecnologias Web

recentes e bibliotecas de visualizacao interativa numa aplicacao escalavel que pode ser utilizada

para varios fins comerciais, nao lucrativos, ou de investigacao.

1.4 Estrutura do documento

O capıtulo 2 (Process Mining) faz uma introducao sobre tema de process mining, em que consiste,

quais as tecnicas praticadas e quais as ferramentas usadas atualmente. O capıtulo 3 (Visualizacao

Dinamica na Web) descreve as tecnologias Web utilizadas para criar aplicacoes interativas e de

visualizacao dinamica. O capıtulo 4 (Desenvolvimento da Aplicacao) descreve os componentes

chave da aplicacao do ponto de vista tecnico e de desenvolvimento. O capıtulo 5 (Casos de Es-

tudo) relata os resultados obtidos ao utilizar a aplicacao com registos de eventos de sistemas reais.

Por fim o capıtulo 6 (Conclusao), faz uma analise do resultado obtido neste trabalho, as dificuldades

encontradas e melhorias a fazer no futuro.

13

14

2Process Mining

15

Process mining e uma disciplina que se situa entre data mining e business inteligence, enquanto

que data mining analisa varios tipos de dados e fornece estatısticas dentro de uma organizacao,

process mining foca-se na analise de eventos registados por processos e na construcao modelos de

negocio (em notacao Business Process Modeling and Notation (BPMN) e nao so) ou na otimizacao

de modelos de existentes utilizando algoritmos proprios [6]. Process mining inclui a descoberta de

processos a partir do registo de eventos, a extracao e apresentacao de modelos de negocio a partir

dos dados, testes de conformidade entre os modelos gerados e os modelos supostos, e tecnicas de

automatizacao para otimizacao dos modelos gerados [3].

2.1 Registos de Eventos

O ponto de partida de process mining sao os registos de eventos, estes ficheiros contem informacao

historica sequencial sobre acontecimentos verificados num sistema, cada entrada num ficheiro de

registos corresponde a uma atividade distinta ou passo de execucao designado por evento. Para o

processar os registos de eventos existem alguns elementos importantes que devem estar presentes

no registo de cada evento[6]:

• caseid identificador da instancia do processo que deu origem ao evento.

• task nome da atividade ou passo de execucao completada.

• timestamp hora e data do registo do evento.

• resource entidade ou dispositivo que deu origem ao evento.

Destes quatro elementos, apenas o case id e task sao necessarios para poder relacionar a

ocorrencia das atividades com os processos e poder extrair modelos a partir dessa informacao.

O timestamp e resource sao registos frequentes que fornecem informacao adicional que permite a

construcao de grafos de redes sociais [7] ou a analise temporal dos eventos. Alem destas informacoes,

outros dados relevantes podem ser guardados em cada evento para serem apresentados nos mode-

los gerados ou para obter diferentes vistas sobre os processos.

2.2 Perspetivas de Analise

Existem varios tipos de modelos que podem ser gerados a partir dos registos tendo em conta

diferentes perspetivas:

2.2.1 Perspetiva de Fluxo

Os modelos de controlo de fluxo (control-flow) mostram as varias atividades praticadas e as

ligacoes possıveis entre essas atividades. Estes modelos podem ser apresentados em diferentes

notacoes como redes de petri[8], BPMN[9], ou Event-driven Process Chains (EPC)[10] entre outros,

e podem ser usados para analise ou para testar e validar modelos ja existentes para os processos

[6].

16

Figura 2.1: Exemplo de registo de eventos importado com a aplicacao LibreOffice Calc.

Figura 2.2: Perspetiva de fluxo na ferramenta Disco.

17

Figura 2.3: Rede social descoberta atraves da ferramenta ProM.

2.2.2 Perspetiva Organizacional

Outro tipo de modelos podem ser construıdos na perspetiva organizacional [11], por exemplo

mostrando relacoes entre os recursos que participam nas atividades, quais os seus papeis e como

comunicam entre si ou seja redes sociais.

2.2.3 Perspetiva de Desempenho

Por fim os resultados podem ser apresentados segundo uma perspetiva de desempenho [12],

tendo em conta a frequencia das atividades e os dados temporais como a data de inıcio ou fim de

cada atividade, esta vista e util para medir a performance ou estimar o tempo medio envolvido em

cada processo, tambem e util para detetar atividades que tornam um processo mais demorado entre

outras aplicacoes.

18

Figura 2.4: Perspetiva de desempenho realizada na ferramenta Disco.

2.3 Tipos de Process Mining

Em process mining os registos de eventos, que tanto podem ser ficheiros como entradas numa

base de dados por exemplo, sao usados para a descoberta de modelos (discovery )[13], para compa-

rar os modelos gerados com modelos existentes e realizar testes de conformidade (conformance)[14]

que verificam se os modelos supostos correspondem a realidade, e para otimizacao (enhance-

ment)[3] dos modelos existentes com base nos dados analisados, por exemplo estendendo os mo-

delos existentes para incluir informacao vinda dos registos como a data de ocorrencia e aumentar o

detalhe dos modelos existentes. Embora existam outros casos de uso, estes sao os mais frequentes

e para este trabalho interessa sobretudo o primeiro: descoberta de processos e geracao de modelos.

A aplicacao desenvolvida utiliza varios algoritmos descritos no capıtulo 4.2 para descobrir mode-

los a partir de registos de eventos nas perspetivas de fluxo, organizacional e temporal dos processos.

Estes algoritmos sao conhecidos e usados em outras aplicacoes e foram reimplantados e adaptados

a esta aplicacao e a linguagem de programacao e bibliotecas usadas.

2.4 Ferramentas Existentes

Existem varias ferramentas usadas em process mining para diferentes tarefas como geracao

automatica de modelos ou realizacao de testes de conformidade. Duas ferramentas populares

chamam-se ProM e Disco e usamos estas duas como referencias para este projeto.

A ferramenta ProM e open-source e a sua arquitetura e baseada em plugins que podem ser

aplicados sobre os ficheiros carregados (desde registos a modelos ja produzidos) para gerar no-

vos modelos e mais dados sobre os quais podem ser aplicados novamente algoritmos sob a forma

de plugins [15], esta arquitetura modular associada a natureza open-source resulta num programa

muito versatil e com um grande numero de algoritmos e tecnicas de process mining que podem ser

19

Figura 2.5: Escolha de algoritmos a aplicar na ferramenta ProM e modelo visual resultante.

Figura 2.6: Importacao de um ficheiro de log na ferramenta Disco e modelo de atividades gerado.

aplicadas.

Por outro lado a ferramenta Disco e comercial e esta mais orientada para ser simples de usar

e obter resultados praticos e uteis para varios casos embora sem as opcoes e algoritmos que a

ferramenta ProM oferece [16]. Na ferramenta Disco uma vez importado um ficheiro de registo e

selecionados os atributos como caseid e task e gerado um modelo de controlo de fluxo e apresentado

o resultado ao utilizador juntamente com varias estatısticas e dados sobre os processos encontrados,

esta informacao e mais simples de consultar e analisar pelo utilizador o que torna a ferramenta Disco

mais apropriada para casos triviais de process mining, enquanto que a ferramenta ProM e mais

indicada para analises mais complexas ou aplicacao de tecnicas mais avancadas de process mining.

2.5 Problemas das Ferramentas Atuais

As ferramentas usadas hoje em dia para process mining baseiam-se em tecnologia e metodo-

logias criadas a varios anos e nao tiram ainda partido dos avancos feitos em aplicacoes graficas

encontrados nas aplicacoes Web. Os modelos gerados por estas aplicacoes sao estaticos e as fun-

cionalidades interativas limitadas, nao permitindo ao utilizador alterar a disposicao dos elementos

20

dos modelos uma vez criados. Dar a possibilidade de manipulacao dos modelos visuais torna o

processo de analise e exploracao mais intuitivo e melhora a experiencia de utilizacao. E possıvel

adicionar essa componente de interatividade recorrendo as tecnologias Web e as bibliotecas para

visualizacao dinamica atuais, assim como criar uma aplicacao moderna que tira partido das vanta-

gens provenientes do uso destas tecnologias.

21

22

3Visualizacao Dinamica na Web

23

Cada vez mais aplicacoes mudam-se para a Web e correm dentro de um browser, esta tendencia

resulta da evolucao das tecnologias Web que acompanham a crescente necessidade de conectivi-

dade e comunicacao quer entre pessoas quer entre dispositivos.

3.1 Aplicacoes Web

Tem havido uma constante evolucao das linguagens HyperText Markup Language (HTML), Cas-

cading Style Sheets (CSS) e Javascript [17] e de todo o ecossistema de bibliotecas, ferramentas e

browsers ligados as tecnologias Web. O browser e um componente central que funciona como mo-

tor de visualizacao e de comunicacao as aplicacoes fornecendo APIs, multiplas funcionalidades e

fazendo a ponte com o sistema operativo e maquina do cliente. As aplicacoes Web sao desenvolvi-

das recorrendo a scripts que sao interpretados pelos browsers em vez de compiladas para codigo

maquina, o que faz com que nao dependam do sistema operativo para correr em diferentes apare-

lhos e torna tambem o processo de desenvolvimento mais rapido. Outra vantagem que tem uma

aplicacao que corra dentro de um browser, e a acessibilidade desta pelo utilizador, embora este pre-

cise de acesso a internet e de um browser instalado, nao precisa de instalar quaisquer programas e

a aplicacao e descarregada da internet e colocada a correr geralmente em poucos segundos.

As aplicacoes Web recentemente tornaram-se mais interativas e com funcionalidades que ate

entao so eram encontradas em aplicacoes desktop[18], neste momento e possıvel descarregar uma

aplicacao e correr no browser tal como se visitasse uma pagina Web, deixa de haver a necessidade

de instalar uma aplicacao nativa no cliente ou num servidor remoto, o servidor apenas fornece os

ficheiros necessarios para correr aplicacao dentro do browser do cliente. E no entanto frequente re-

alizar uma parte da aplicacao num servidor, quer por motivos de seguranca para proteger algoritmos

ou codigo-fonte, quer para evitar que seja o cliente a realizar operacoes computacionalmente pesa-

das quando este usa dispositivos com poucos recursos tal como dispositivos moveis. A aplicacao a

ser desenvolvida esta projetada para correr no cliente sem ajuda do servidor, no entanto e com pou-

cas modificacoes (recorrendo a tecnologias como Nodejs)[19] poderao ser feitos os calculos mais

pesados como o processamento de registos no servidor, e os resultados enviados e apresentados

de forma interativa no cliente.

3.2 Tecnologias Web

Para aplicacoes Web existem tres linguagens base usadas no lado do cliente: HTML para des-

crever os conteudos e elementos de uma pagina, CSS para definir o aspeto visual dos elementos de

uma pagina, e Javascript usada para a componente logica da pagina ou aplicacao[17].

Para este trabalho foram selecionadas algumas bibliotecas e ferramentas que contribuem para a

qualidade final do projeto, permitindo uma modularidade, versatilidade e apresentacao que seriam

difıceis obter sem um aumento aumento drastico nos recursos e tempo dedicados ao desenvolvi-

mento da aplicacao. Seguem-se algumas das mais importantes:

24

Figura 3.1: Exemplo de grafo nao dirigido construıdo por D3. O grafo permite interacao e animacoes de fısicasimulando a tensao entre os nos ligados.

3.2.1 Node.js

1 Embora nao esteja ja prevista a sua utilizacao, e importante ter em conta esta ferramenta para

uma eventual separacao entre codigo que corra no lado do cliente e no lado do servidor[19]. Nodejs

permite usar a linguagem Javascript para controlar funcionalidades do sistema, a semelhanca de

um browser que interpreta o codigo Javascript para navegar na Web e apresentar paginas, Nodejs

oferece funcionalidades de servidor e acesso ao sistema de ficheiros da maquina onde corre, o que

torna esta ferramenta muito util na adaptacao de uma aplicacao Javascript para correr remotamente

num servidor.

3.2.2 D3

2 Uma das sub-especificacoes da linguagem HTML chama-se Scalable Vector Graphics (SVG)

e consiste num formato para definir graficos vetoriais 2D para a Web[20], os graficos criados neste

formato pertencem a arvore Document Object Model (DOM) da pagina apresentada e podem ser

manipulados como qualquer outro elemento HTML, tambem suportam quaisquer nıveis de resolucao

e ampliacao uma vez que sao definidos programaticamente, por estas razoes o formato SVG e ideal

para mostrar conteudos Web que possam ser definidos atraves de formas geometricas simples tais

como diagramas.

D3 e uma biblioteca que oferece varios atalhos para procurar, modificar ou inserir elementos numa

arvore DOM de forma simples e eficiente[21]. Especialmente util para elementos SVG esta biblioteca

e usada tanto diretamente pela aplicacao como por outras bibliotecas usadas como neste trabalho

como JointJS ou Dagre.

3.2.3 Dagre

3 Dagre e uma biblioteca especializada em grafos dirigidos e em gerar a posicoes para os varios

nos (layout) do grafo [22] tendo em conta o nıvel de profundidade dos nos e o seu numero de ligacoes1http://nodejs.org/2http://d3js.org/3http://github.com/cpettitt/dagre/wiki

25

Figura 3.2: Grafo dirigido gerado por Dagre-D3, os nos e ligacoes sao posicionados de acordo com algoritmosproprios[1] [2].

[1]. Na aplicacao desenvolvida esta biblioteca e usada para gerar o layout inicial de grafos como o

modelo de controlo de fluxo.

3.2.4 Dagre-D3

4 Usando a biblioteca Dagre para criar o layout de grafos e D3 para criar e manipular graficos

vetoriais, esta biblioteca permite criar grafos dirigidos passando como input uma lista de nos e de

ligacoes entre esses nos e originando um grafo dirigido em formato SVG como output, este grafo

pode ser adicionado ao ficheiro HTML e os seus componentes manipulados como quaisquer outros

elementos HTML.

3.2.5 JointJS

5 JointJS e uma biblioteca que oferece varias solucoes para criar varios tipos de diagramas in-

terativos de forma rapida e com um grande leque de opcoes e funcionalidades. Esta biblioteca tem

grande importancia na componente interativa dos modelos da aplicacao uma vez que implementa

componentes de interatividade como drag and drop de nos ou manipulacao de ligacoes entre nos

permitindo adicionar ou mover pontos de controle. Oferece tambem uma API vasta para facilitar a

manipulacao de varios tipos de diagramas SVG gerados. Esta biblioteca assenta sobre ferramentas

como Dagre-D3 para gerar diagramas e Backbone para gerir vistas dinamicas que refletem dados

guardados num modelo interno com a posicao dos nos e das ligacoes em tempo real.

3.2.6 Haxe

6 Haxe e uma linguagem de programacao open-source de alto nıvel que permite gerar codigo

para diferentes linguagens de programacao incluindo Javascript [23]. O compilador desta linguagem

oferece varias possibilidades como controlo sobre o pre-processador usando macros, verificacao

de erros em tempo de compilacao gracas a uma sintaxe tipificada, modularidade do codigo atraves

de classes, enumerados e outras estruturas de alto nıvel, e refatorizacao do codigo dependendo4http://github.com/cpettitt/dagre-d3/wiki5http://www.jointjs.com6http://www.haxe.org

26

Figura 3.3: Exemplo de grafo interativo criado em JointJS, os nos e arcos sao interativos e podem ser movidosou editados pelo utilizador.

do ambiente de desenvolvimento utilizado. Alem destas propriedades a linguagem oferece tambem

varias bibliotecas uteis para varios tipos de projetos.

A linguagem Haxe e um elemento importante na qualidade da aplicacao desenvolvida, oferece

um nıvel de abstracao sobre a linguagem Javascript indispensavel no desenvolvimento de aplicacoes

complexas. Existem alternativas como CoffeeScript, TypeScript da Microsoft, ou Dart da Google, a

linguagem Haxe distingue-se pelas funcionalidades do compilador e pela qualidade e performance

do codigo Javascript gerado.

3.2.7 Outras bibliotecas

Alem das ferramentas mencionadas, outras bibliotecas tıpicas das aplicacoes Web sao utilizadas

como: JQuery para obter e manipular elementos da arvore DOM, Bootstrap que fornece elementos

de interface estilizados como botoes, modais e barra de navegacao, FontAwesome para ıcones,

JLayout para layouts e Momentjs para ler e manipular datas [24].

27

28

4Desenvolvimento da Aplicacao

29

A ferramenta de process mining desenvolvida possibilita analisar registos de process mining e

gerar modelos visuais de controlo de fluxo, organizacionais ou na perspetiva de desempenho atraves

de algoritmos proprios. Estas funcionalidades ja existentes noutras ferramentas foram apuradas com

recurso a tecnologias web e bibliotecas que permitem a visualizacao interativa e manipulacao dos

modelos gerados pelo utilizador.

Para obter uma ferramenta util na analise de registos de eventos reais atraves de process mining,

foram tambem adicionadas funcionalidades como filtragem de nos e de arcos segundo o numero de

ocorrencias ou listas de nos visıveis.

A construcao da aplicacao baseia se nas tecnologias web: HTML, CSS e Javascript, e de biblio-

tecas como Bootstrap e Vuejs para criar uma aplicacao que corre no browser sem necessitar instalar

qualquer software adicional. Utilizou-se tambem a linguagem tipificada Haxe no desenvolvimento da

solucao que posteriormente gera codigo javascript, esta abordagem permite um melhor controlo de

qualidade, organizacao de codigo e detecao de erros, entre outras vantagens.

A renderizacao de modelos, interatividade, e disposicao dos elementos e obtida atraves de uma

versao modificada da biblioteca JointJs bem como da biblioteca D3 e JQuery para manipulacao de

elementos vetoriais, e Dagre para disposicao inicial dos elementos de cada grafo.

Do ponto de vista da arquitetura a aplicacao segue um padrao modular que permite adicionar

novos algoritmos de analise e vistas sem comprometer os atuais modelos gerados. Os registos lidos

sao convertidos em objetos com estruturas de dados e funcionalidades encapsuladas que permitem

flexibilidade como ter multiplos ficheiros de registos com diferentes configuracoes carregados na

aplicacao. Existe ainda uma componente de reatividade obtida atraves do uso da biblioteca Vuejs

que simplifica a tarefa de manter os elementos visuais e interfaces coerentes com os modelos de

dados.

4.1 Importacao dos Registos de Eventos

A primeira fase no uso da aplicacao consiste na importacao de um ficheiro de registo para ser

analisado. O ficheiro deve vir no formato Comma-separated values (CSV) com um evento por linha e

o conteudo das varias colunas separadas por ponto-e-virgula.

Uma vez lido o ficheiro e mostrado um ecra onde sao apresentadas as 100 primeiras entradas

do ficheiro de registo numa tabela, sobre as colunas desta tabela de pre-visualizacao encontram-se

campos que permitem ao utilizador escolher quais as colunas que correspondem ao caso(caseid),

tarefa(task ), recurso(user ) e data(timestamp) no registo. Os campos obrigatorios sao caseid e task

e os campos nao podem ser repetidos em varias colunas. A importacao do ficheiro so prossegue

quando os requisitos sao respeitados, caso contrario e mostrada uma mensagem de erro, rejeitando

a importacao do ficheiro.

Uma vez atribuıdas as colunas, o ficheiro importado e convertido num objeto com estruturas de

dados proprias e e apresentado o ecra com o modelo de fluxo gerado. A conversao dos ficheiros em

estruturas de dados e importante para preparar a informacao para ser processada, detetar erros de

30

Figura 4.1: Importacao de registos usando a aplicacao desenvolvida.

formatacao e facilitar a posterior geracao de modelos e manipulacao de dados.

A aplicacao suporta ainda varios formatos de data na coluna timestamp. Estes sao analisados

atraves da biblioteca Momentjs 1 e quaisquer erros de formatacao ou importacao de data ou outros

dados no registo sao apresentados ao utilizador tentando mesmo assim garantir a conversao do

ficheiro para estruturas de dados e a posterior geracao dos modelos.

4.2 Algoritmos usados

Os modelos de fluxo, entrega de trabalho e trabalho em conjunto sao gerados por algoritmos

ja conhecidos e estudados, estes algoritmos foram re-implementados e adaptados aos requisitos e

linguagem da aplicacao desenvolvida.

4.2.1 Fluxo de atividades

O modelo de fluxo de atividades corresponde a mudancas de tarefas ocorridas dentro do mesmo

caso. Para gerar o modelo de fluxo o registo de eventos e percorrido uma vez e para cada entrada

unica na coluna de tarefas e guardado um no numa lista de nos, os casos que ocorrem sao registados

numa lista juntamente com o ultimo evento encontrado nesse caso. Ao processar um evento com um

caso ja registado, e guardada uma nova transicao entre a tarefa do evento anterior com o mesmo

caso e a tarefa do evento processado, caso a transicao ja exista e apenas incrementada a contagem

para essa transicao.

Apos processar os varios eventos obtem-se uma lista de arcos e nos que e usada para construir1http://momentjs.com

31

o modelo visual final, por ser necessaria apenas uma passagem pelos eventos a complexidade deste

algoritmo e O(N).

/* stores graph nodes */

var nodes = [{node , count }] // array of structs {string , int}

/* store graph links */

var links = [{a, b, count}] // array of structs {string , string , int}

/* store last occurred event for each caseId */

var visited = [{caseid , event }] // array de estruturas {string , event}

/* temporary variables */

var lastEvt

var newLink

for (e in events) {

// create a node for each unique task

// if the task already exists increment the counting

if nodes.has(e.task) == false

nodes.push(e.task)

else

node[e.task].count ++

// create a transition if another event ocurred with the same caseid

lastEvt = visited[e.caseId ];

if (lastEvt != null) {

newLink = {a:lastEvt.task , b:e.task , count :0}

// the new link is stored if it has not occured yet

// otherwise the count is incremented

if (links.has(newLink) == false)

links.push(newLink)

else

links[newLink ].count ++

}

// store last occurence for this caseid for reference

visited[e.caseId] = e

}

Codigo 4.1: Algoritmo de controlo de fluxo usado na aplicacao

4.2.2 Rede Social: Passagem de Trabalho

A semelhanca do modelo de fluxo, o modelo de passagem de trabalho corresponde a mudancas

de utilizador verificadas no mesmo caso. Tambem aqui o registo de eventos e percorrido uma vez

sendo para cada utilizador unico adicionado um no a uma lista de nos e para cada variacao de

utilizador dentro do mesmo caso adicionada uma transicao entre os dois utilizadores. No fim sao

geradas uma lista de arcos e nos e a complexidade deste algoritmo e O(N) pois o registo de eventos

e percorrido apenas uma vez.

/* stores graph nodes */

var nodes = [{node , count }] // array of structs {string , int}

/* store graph links */

var links = [{a, b, count}] // array of structs {string , string , int}

/* store last occurred event for each caseId */

var visited = [{caseid , event }] // array de estruturas {string , event}

/* temporary variables */

var lastEvt

32

var newLink

for (e in events) {

// create a node for each unique user

// if the user already exists increment the counting

if nodes.has(e.user) == false

nodes.push(e.user)

else

node[e.user].count ++

// create a transition if another event ocurred with the same caseid

lastEvt = visited[e.caseId ];

if (lastEvt != null) {

newLink = {a:lastEvt.user , b:e.user , count :0}

// the new link is stored if it has not occured yet

// otherwise the count is incremented

if (links.has(newLink) == false)

links.push(newLink)

else

links[newLink ].count ++

}

// store last occurence for this caseid for reference

visited[e.caseId] = e

}

Codigo 4.2: Algoritmo de passagem de trabalho usado na aplicacao

4.2.3 Rede Social: Trabalho em Conjunto

O modelo de trabalho em conjunto contabiliza o numero de vezes que utilizadores participam

no mesmo caso. Para gerar este modelo e criada uma lista onde sao guardados os conjuntos de

utilizadores que participam em cada caso. Apos realizar uma primeira passagem pelos eventos, a

lista de casos contem os conjuntos de utilizadores para cada caso e e feita uma passagem por cada

conjunto de utilizadores para criar uma transicao para cada par de utilizadores diferentes em cada

caso, caso essa transicao se repita em algum grupo a contagem e incrementada. A complexidade

deste algoritmo e O(n2) ja que e feita uma primeira passagem pelos eventos e em seguida uma

segunda passagem por todos os utilizadores registados para cada caso comparando os utilizadores

entre eles.

/* stores graph nodes */

nodes = [{node , count }] // array of structs {string , int}

/* stores graph links */

links = [{a, b, count}] // array of structs {string , string , int}

/* store users found in each case */

cases = [{case , users }] // array of structs {string , string}

// store each unique user participating in each case

for (e in events) {

// create a new node for each unique user

if (!nodes.has(e.userid))

nodes.push({e.userid , count :1})

if (cases[e.caseid] == null)

cases[e.caseid] = {case:e.caseid , users :[]}

if cases[e.caseid ].users.has(e.user == false)

cases[e.caseid ].push(e.user)

}

33

// match each unique user participating in a case

// and create a link for each match or increment the counting

// for repeated matches in multiple cases

for (c in cases) {

var visited = []

for (u1 in c.users) {

for (u2 in c.users) {

if (u1 != u2) {

if (!links.has(u1+u2 OR u2+u1)) {

links.push({a:u1, b:u2 , count :1})

visited.push(u1+u2)

cases[u1].count ++

cases[u2].count ++

} else

if (! visited.has(u1+u2 OR u2+u1)) {

visited.push(u1+u2)

links[u1+u2].count++

states[u1]. count++

states[u2]. count++

}

}

}

}

}

Codigo 4.3: Algoritmo de trabalho em conjunto usado na aplicacao

4.2.4 Tempos e Desempenho

O modelo temporal e obtido sobre o modelo de fluxo e de entrega de trabalho, o grafo gerado por

estes modelos mantem-se, simplesmente sao alteradas as contagens e aspeto visual dos elementos

como a cor das ligacoes e nos para transmitir informacao sobre a performance desses mesmos

modelos. As contagens e informacoes de performance sao geradas durante os proprios algoritmos

de fluxo e entrega de trabalho. Em cada transicao e guardado o tempo medio decorrido entre as

varias instancias dessa transicao, e nos nos e guardada a soma dos tempos medios de todas as

transicoes para esse no.

4.3 Modelos gerados

A partir dos ficheiros importados a aplicacao gera e apresenta diferentes modelos para as pers-

petivas de fluxo, entrega de trabalho e trabalho em conjunto, e perspetivas de desempenho para os

modelos de fluxo e de entrega de trabalho.

Os modelos sao gerados por uma classe propria com o algoritmo correspondente a perspetiva

escolhida pelo utilizador, uma vez gerados os arcos e nos e criada a disposicao inicial desses ele-

mentos no grafo, estes sao em seguida convertidos para o formato JavaScript Object Notation (JSON)

e enviados para o controlador Viewport para serem renderizados na janela de visualizacao.

A disposicao dos elementos no grafo para as vistas do tipo fluxo e entrega de trabalho e gerada

pela biblioteca Dagre que organiza os elementos de forma otimizada para grafos dirigidos a partir de

uma lista de arcos e nos. Para a vista de trabalho em conjunto, por se tratar de uma rede social e

de um grafo nao dirigido, optou-se por criar um algoritmo simples que coloca os nos em cırculo em

posicoes equidistantes onde a dimensao do circulo depende do o numero de nos no grafo, quanto

mais nos tiver o grafo maior sera o cırculo que forma a disposicao inicial destes nos.

34

Figura 4.2: Modelo de fluxo gerado na ferramenta desenvolvida.

Figura 4.3: Modelo de entrega de trabalho.

35

Figura 4.4: Perspetiva de desempenho na aplicacao desenvolvida.

// A distancia dos nos ao centro e o dobro

// da soma do comprimento de todos os nos.

var r = (Configs.RECT_MAX_WIDTH * nodes.length * 2) / 3.14;

if (r < Configs.RECT_MAX_WIDTH * 3) {

r = Configs.RECT_MAX_WIDTH * 3;

}

// Coloca os nos num circulo de raio r e separa -os usando o angulo

// que resulta da divisao dos radianos do circulo pelo numero de nos.

var rads = 6.28 / nodes.length;

for (i in 0... nodes.length) {

var angle = rads * i;

var x = Math.cos(angle - 1.5707963268) * radius;

var y = Math.sin(angle - 1.5707963268) * radius;

nodes[i]. position(x, y);

}

Codigo 4.4: Disposicao de nos para a vista de trabalho em conjunto

4.4 Interatividade

A ferramenta criada tem como fatores de diferenciacao usar tecnologias web para correr num

browser e gerar modelos interativos que podem ser manipulados pelo utilizador para facilitar o pro-

cesso de analise e melhorar a experiencia de utilizacao.

As funcionalidades de interatividade introduzidas incluem arrastar os nos individuais com o rato,

touch ou outro dispositivo de entrada semelhante, assim como mudar a disposicao dos arcos arras-

tando os seus pontos de controlo ou criar e remover pontos de controlo. Existem tambem botoes

auxiliares na interface para fazer pan e zoom ao grafo, centrar o grafo na janela de visualizacao e

reverter todas as alteracoes feitas ao grafo pelo utilizador recuperando o seu aspeto original.

Estas funcionalidades interativas sao conseguidas sobretudo atraves do uso das bibliotecas Jointjs

36

Figura 4.5: Modelo de rede social com filtragem de arcos aplicada

e D3, sendo que grande parte da componente de interatividade vem ja incorporada na biblioteca

Jointjs a qual foi configurada, integrada e ligeiramente modificada de forma a conseguir o resultado

pretendido.

4.5 Pos-processamento de arcos e nos

Uma vez renderizado um modelo na janela de visualizacao ocorrem dois passos de pos-processamento,

no primeiro sao filtrados os nos e arcos segundo os filtros configuraveis na barra lateral, em seguida

e aplicado o estilo visual final aos elementos do modelo que varia conforme esteja ativada o modo

de perspetiva de desempenho ou nao.

Existem tres modos para filtragem de nos e arcos que ajudam na simplificacao dos modelos

apresentados e na sua analise. Na barra lateral existem sliders para filtrar os nos e arcos onde e

possıvel estabelecer o mınimo e maximo de contagens necessarias para que estes elementos sejam

renderizados. Tambem na barra lateral existe uma lista que contem os nos do grafo e onde e possıvel

escolher individualmente quais destes devem ser filtrados. Os filtros sao reativos, ou seja, o grafo

e automaticamente atualizado quando estes sao alterados. As configuracoes de filtros tambem sao

guardadas e repostas sempre que ha alteracao da perspetiva ou ficheiro de registo ativo.

Uma vez renderizado e filtrado o grafo, e aplicado o estilo final aos nos e arcos, o aspeto final

varia conforme o esteja ativado o modo performance ou modo normal, conforme o modo escolhido as

cores e as contagens mostradas sao alteradas. Esta abordagem permite ativar e desativar o modo

performance sem ter de reconstruir o grafo.

37

4.6 Implementacao

A ferramenta desenvolvida corre a partir do browser uma vez descarregados os ficheiros iniciais

atraves do servidor, este tipo de aplicacoes chamam-se Single Page Application (SPA) [25]. Nestas

aplicacoes, uma vez descarregados os ficheiros, a aplicacao estas correm no browser do cliente a

semelhanca de uma aplicacao desktop. Ao contrario das paginas Web tradicionais que reencami-

nham ou recarregam a pagina sempre que ha uma mudanca de estado, as [25]s apenas recorrem ao

servidor para buscar dados adicionais atraves de chamadas a APIs e gerem todo o estado interno

da aplicacao.

4.6.1 Single-Page Applications

As aplicacoes de pagina unica[25] sao semelhantes as paginas Web convencionais e funcionam

sobre as linguagens HTML, CSS e javascript que sao interpretadas pelo browser. A inovacao em

relacao a abordagem original e ter toda a aplicacao ou parte desta descarregada para o cliente inici-

almente e ter todo o estado da aplicacao a ser gerido no cliente e sem nunca recarregar ou trocar de

pagina. Esta abordagem torna a experiencia de utilizacao mais fluida a semelhanca das aplicacoes

Desktop e do ponto de vista de desenvolvimento tambem sao mais sofisticadas e oferecem melhor

organizacao e separacao de logica de cliente-servidor.

4.6.2 Janela de visualizacao

Existe apenas uma janela de visualizacao dos modelos que e partilhada para mostrar os varios

modelos gerados, esta solucao foi adotada apos ocorrerem problemas quando se tentou usar varias

janelas, uma para cada modelo. Nomeadamente as bibliotecas Jointjs e Backbone originavam varios

bugs ao utilizar multiplos modelos em multiplas janelas em simultaneo. A solucao de usar apenas

uma janela trouxe varias vantagens, uma delas foi continuar a renderizar os modelos apenas uma

vez, mas serializando e reconstruındo-os atraves do formato JSON cada vez que se troca de modelo.

Nao so o processo de serializacao e reconstrucao e muito rapido como e usado para guardar os

modelos gerados. Esta abordagem tambem requer menos memoria Random Access Memory (RAM)

do que ter os varios modelos gerados em memoria, e esta preparada para ser usada para guardar

ou renderizar modelos gerados a partir de um servidor.

4.6.3 Representacao do registo de eventos

Ao importar um registo de eventos e gerado um objeto para esse registo com os seus eventos

numa lista de eventos, informacoes sobre filtros, modelos gerados em formato JSON, quais os in-

dexes das colunas caseId, task, timestamp, etc.. Esse objeto contem ainda funcoes utilitarias como

fornecer os eventos ordenados alfabeticamente, alterar o ındice das colunas e verificar se os dados

estao bem formatados, reiniciar as configuracoes de filtro etc..

Esta abordagem permite encapsular cada ficheiro lido num objeto com estruturas de dados e

funcionalidades proprias e traz varias vantagens a nıvel de organizacao de codigo, modularidade e

38

escalabilidade do codigo.

4.6.4 Compilacao e geracao do codigo

A ferramenta desenvolvida utiliza HTML para descrever as interfaces, CSS para descrever o as-

peto visual dos elementos e javascript para controlar a logica da aplicacao. Utiliza tambem a lin-

guagem tipificada Haxe para programar a logica da aplicacao num ambiente semelhante ao das

linguagens Java ou C#, em que uma vez compilado o codigo Haxe, e gerado um ficheiro Javascript

otimizado e livre de erros detetaveis durante a compilacao, que controla toda a logica da aplicacao.

Tambem e usada a linguagem de pre-processamento CSS Stylus 2 que oferece varias funciona-

lidades adicionais sobre CSS na sua declaracao, tais como encadeamento, heranca, e mais. Esta

pre-linguagem e compilada para CSS que e entao interpretada pelo browser, a semelhanca do que

acontece entre a linguagem Haxe e Javascript.

Para compilar a linguagem Stylus em CSS e tambem para testar a aplicacao em ambiente de de-

senvolvimento, e usada a ferramenta de compilacao Gulp3 que a semelhanca de outras ferramentas

como Ant4 e Make5, e uma ferramenta configuravel com varios procedimentos para compilacao e

processamento de ficheiros. A ferramenta Gulp utiliza a linguagem Javascript na sua configuracao e

e usada para compilar a linguagem Stylus em CSS sempre que deteta a alteracao de ficheiros, as-

sim como para lancar o servidor de testes que serve a aplicacao ao browser e recarrega a aplicacao

sempre que algum ficheiro desta e alterado recorrendo a biblioteca Browsersync6.

2http://stylus-lang.com/3http://gulpjs.com/4http://ant.apache.org/5https://www.gnu.org/software/make/6https://www.browsersync.io/

39

40

5Casos de Estudo

41

Para testar a aplicacao em termos de compatibilidade e usabilidade e para testar a sua utilidade

em situacoes reais, realizaram-se testes usando registos de eventos de empresas disponibilizados

pelo Business Processing Intelligence Challenge (BPIC) 1. O BPIC realiza um desafio anual de pro-

cess mining onde publica registos de eventos de empresas para que os participantes possam aplicar

diferentes tecnicas e ferramentas de process mining para compreenderem o funcionamento destas

empresas e detetarem possıveis problemas ou sugerirem otimizacoes.

O uso de registos de eventos reais permitiu detetar e corrigir problemas na aplicacao em termos

de importacao de registos com problemas de formatacao de dados ou colunas nao preenchidas,

assim como testou a performance da aplicacao em situacoes de stress ao processar registos com

varias dezenas de megabytes de dados e centenas de milhares de entradas, o que embora nao seja

invulgar para registos reais, sao ficheiros bastante maiores do que os usados ate entao durante o

desenvolvimento.

5.1 Registos de uma instituicao financeira

Um dos ficheiros de registos reais usados para testar a aplicacao e disponibilizado pelo BPIC

20122, pertence a uma instituicao financeira alema e contem mais de 262.000 eventos e 13.087

casos.

O processo representado no registo de eventos e um processo de candidatura para um emprestimo

pessoal ou descoberto bancario dentro de uma organizacao de financiamento global. O desafio ori-

ginal consiste em encontrar informacoes valiosas como estimativas para o tempo total do processo,

quais os recursos que geram a maior taxa de ativacao de aplicacoes, qual o aspeto global do modelo

de negocio, quais as decisoes que tem grande influencia no processo e onde ocorrem.

A aplicacao consegue importar o registo da instituicao financeira e fornecer vistas de process

mining uteis na resolucao dos problemas do BPIC, nomeadamente a vista de desempenho para

calcular o tempo do processo e a perspetiva de fluxo para ajudar a compreender o modelo de negocio.

E tambem possıvel carregar o ficheiro multiplas vezes e designar diferentes colunas para tarefa ou

recurso ja que o registo possui varios campos que podem ser usados nesse sentido e intercalar os

resultados para se tirar mais conclusoes sobre o funcionamento da instituicao.

5.2 Registos de incidentes da Volvo IT

Outro registo de eventos usado para testes reais e retirado do BPIC challenge 20133. Este contem

eventos de um sistema de gestao de problemas e incidentes chamado VINST. O desafio consiste em

encontrar respostas a questoes como: Quais os casos que originam um ”ping-pong” entre as equipas

participantes? Quais as equipas que mais participam nesse ”ping-pong”, e se o estado ”a espera de

utilizador”e usado para esconder problemas no tempo total de resolucao.1https://www.win.tue.nl/bpi/doku.php?id=2016:start2http://www.win.tue.nl/bpi/doku.php?id=2012:challenge3http://www.win.tue.nl/bpi/doku.php?id=2013:challenge

42

Figura 5.1: Perspetiva de fluxo original gerada atraves do registo da instituicao financeira.

Figura 5.2: As redes sociais da instituicao financeira sao bastantes complexas e requerem algumas filtragens eorganizacao para poderem ser analisadas eficazmente.

43

Figura 5.3: Os mesmos modelos das redes sociais da instituicao financeira simplificados atraves do uso defiltros e reorganizacao de nos.

Figura 5.4: Perspetiva de fluxo do sistema VINST.

44

Figura 5.5: Perspetiva de entrega de trabalho do sistema VINST.

Figura 5.6: Perspetiva de trabalho em conjunto do sistema VIST.

45

Tal como no desafio da instituicao financeira e possıvel importar o ficheiro de registo fornecido

pelo BPIC e obter as perspetivas de fluxo, trabalho em conjunto, entrega de trabalho e desempenho.

As vistas de componente organizacional obtidas assim como os filtros de contagem de nos e arcos

sao uteis para relacionar as equipas participantes e detetar casos de ”ping-pong” entre elas.

46

6Conclusoes e trabalho futuro

47

Este projeto comecou com o levantamento do estado atual de process mining e das aplicacoes

usadas nesta area, foram em seguida testadas e selecionadas as varias tecnologias web usadas

para construir uma nova ferramenta usavel de process mining. Ao criar varios testes como prova

de conceito das tecnologias avaliadas e ja com uma nocao do que seria possıvel produzir, foram

delineadas quais as funcionalidades que seriam implementadas e quais seriam as etapas para criar

a aplicacao.

A aplicacao foi construıda em tres fases: a realizacao de um primeiro prototipo com a arquitetura

modular base ja definida, a perspetiva de fluxo com a componente de interatividade e a importacao

automatica de um ficheiro de registo para testes. Na segunda fase foram acrescentadas mais funci-

onalidades como as perspetivas de trabalho em conjunto, entrega de trabalho e desempenho, foram

acrescentadas as filtragens de arcos e nos bem como a importacao de registos com selecao de

colunas e foram feitas outras melhorias tecnicas. Na terceira fase foram realizados testes com re-

gistos reais e foram feitos pequenos ajustes a nıvel visual, correcao de bugs e melhoramento das

funcionalidades e algoritmos existentes a nıvel de desempenho e de estrutura do codigo.

6.1 Resultado Final

Ficou desenvolvida uma aplicacao com base em tecnologias web que corre no browser do cliente

com uma estrutura modular escalavel e com mecanismos base para importar e processar registos em

formato CSV de process mining e apresentar modelos interativos que facilitam o processo de analise

e a usabilidade da ferramenta. A utilizacao de tecnologias Web e o acesso ao vasto ecossistema de

bibliotecas e ferramentas Javascript contribuıram para um desenvolvimento e prototipagem rapidos.

Em comparacao com as ferramentas comerciais existentes, a aplicacao desenvolvida apresenta

resultados e funcionalidades semelhantes no que toca a importacao de registos e geracao de mo-

delos visuais, com a vantagem desta ser descarregada e executada como uma pagina web tıpica,

bastando ter um browser instalado na maquina e acesso a internet. A componente interativa dos

modelos gerados tambem ajuda no processo de analise e de satisfacao do utilizador ao permitir que

este organize e filtre os elementos do grafo a seu gosto.

6.2 Problemas encontrados

Esta seccao apresenta os principais problemas encontrados durante o desenvolvimento e utilizacao

da ferramenta.

6.2.1 Performance

Ao carregar registos reais com dimensoes moderadas um dos primeiros problemas que surgiu foi

a performance da aplicacao que demorava varios minutos a apresentar o modelo final ao utilizador e

por vezes excedia a memoria RAM disponıvel na maquina.

O problema foi atenuado ao utilizar o modo de renderizacao assıncrona do Jointjs que utiliza

varias threads denominadas WebWorkers [26] para criar o resultado visual sem bloquear a interface

48

Figura 6.1: Performance de geracao de modelo de fluxo a partir de um registo de eventos com poucas entradas.

ou a pagina. Passou assim a ser possıvel apresentar modelos mais complexos ao utilizador, mesmo

assim a performance esta longe de estar ao nıvel das ferramentas comerciais como a aplicacao

Disco.

Para modelos complexos que demoram mais de tres minutos a serem apresentados, os recursos

sao usados sobretudo usados a criar a disposicao inicial dos elementos do grafo atraves da biblio-

teca Dagre e para renderizar os elementos do grafo atraves das bibliotecas Jointjs e Backbone. As

solucoes passam por substituir estas bibliotecas por outras mais eficientes ou desenvolver solucoes

de raiz especıficas a pensar em registos de eventos de grandes dimensoes.

6.2.2 Pontos de controle estaticos

Outro problema encontrado ao longo do projeto foi o comportamento dos arcos que ligam os nos

quando estes sao arrastados pelo utilizador. Ao arrastar um no, os pontos de controle associados

ficam no mesmo sıtio, o que e pouco intuitivo para o utilizador e complica o aspeto do modelo obri-

gando o utilizador a reposicionar os pontos de controlo ligados a um no cada vez que muda esse

no de sıtio. Para contornar o problema reduziram-se o numero de pontos de controlo, adicionando

os pontos de controlo apenas para ligacoes bidirecionais ou para ligacoes para o proprio no, estes

pontos de controlo sao necessarios para evitar a sobreposicao de arcos. Tambem se criou um algo-

ritmo em os pontos de controle de arcos associados a um no sao arrastados simultaneamente com

o no movimentado. Esta solucao foi no entanto descartada por apenas resultar em alguns casos,

complicando ate o comportamento dos pontos de controlo noutros casos.

Uma solucao definitiva passa por encontrar um algoritmo inteligente que faca os pontos de con-

trole associados a um no acompanhar o movimento deste de forma intuitiva para o utilizador. Tambem

e possıvel que existam algoritmos de posicionamento de elementos do grafo que nao utilizem pontos

de controlo nas ligacoes mas isso e pouco provavel para grafos complexos.

49

Figura 6.2: Performance de geracao de modelo de entrega de trabalho a partir de um registo de grandes di-mensoes. Ao aumentar a complexidade do modelo o tempo para gerar a disposicao dos elementos e renderizaraumenta exponencialmente.

Figura 6.3: Problema de visualizacao criado pelos pontos de controlo estaticos ao arrastar um no.

50

6.3 Trabalho Futuro

Para continuar o desenvolvimento da aplicacao podem ser incorporados novos modelos e es-

tatısticas sem interferir com os resultados ja apresentados. E possıvel assim aproveitar as estruturas

existentes para criar novas funcionalidades dando continuidade a organizacao modular da aplicacao.

Tambem existem problemas atuais que devem ser corrigidos ou atenuados como a performance

e o posicionamento dos pontos de controle. A aplicacao pode ser reestruturada para correr em

parte num servidor utilizando Nodejs o que possibilita criar um servico de software ou Software as a

Service (SaaS)[27] ou entao criar uma aplicacao desktop utilizando tecnologias como Electron1.

Por fim a aplicacao pode ser atualizada reescrevendo a sua logica em Javascript sem o uso da

linguagem intermedia Haxe, utilizando as abordagens mais recentes que contornam os problemas

da linguagem nao tipificada Javascript. Estas abordagens tornam o desenvolvimento mais rapido e

trazem funcionalidades e ambientes de desenvolvimento inovadoras que sao produto do ecossistema

Javascript.

6.3.1 Melhorias de performance

Para criar uma aplicacao de process mining usavel em casos de complexidade media-elevada

e necessario corrigir os problemas de performance atuais com as bibliotecas Jointjs-Backbone e

Dagre. Uma solucao para melhorar a performance da biblioteca Jointjs consiste em reescrever as

funcionalidades da biblioteca usadas na aplicacao aproveitando frameworks reativas mais recentes

e de alta performance como React ou Vuejs. Isso pode ser feito em pouco tempo e trara grandes

benefıcios de performance assim como a criacao de nova tecnologia.

Para corrigir a performance da biblioteca Dagre que parece tambem aumentar exponencialmente

com a complexidade do modelo, e necessario investigar algoritmos de estruturacao de grafos e de-

senvolver uma solucao especıfica para a aplicacao a pensar na performance com grafos de grande

complexidade.

6.3.2 Pontos de controle dinamicos

Um dos problemas na aplicacao consiste no comportamento dos pontos de controlo das ligacoes

quando um no ao qual estao lidados e arrastado. Na biblioteca Jointjs estes sao estaticos e como

tal a disposicao dos arcos e pouco intuitiva quando os nos do grafo sao arrastados, obrigando a um

trabalho extra do utilizador em corrigir a posicao dos pontos de controlo para reorganizar o modelo

visualizado.

A solucao para este problema requer a analise de algoritmos de disposicao de grafos e de

aplicacoes que permitam uma manipulacao interativa de graficos 2D para descobrir uma solucao

que possa servir a esta aplicacao. A solucao mais evidente passa por encontrar um algoritmo que

movimente os pontos de controlo de forma inteligente e intuitiva ao arrastar um no associado a estes

pontos de controle.1http://electron.atom.io/

51

6.3.3 Processamento no servidor

Para fornecer a aplicacao aos utilizadores e possıvel que parte desta seja executada numa

maquina remota ou em cloud, reduzindo assim a quantidade de processamento no cliente e au-

mentando assim a performance ao utilizar os recursos de outras maquinas dedicadas.

A aplicacao ja serializa e renderiza os grafos a partir de objetos JSON e ao ser modular e utili-

zar Javascript, esta preparada para ser reestruturada e correr certas funcionalidades em diferentes

maquinas utilizando Nodejs para esse feito.

Alem das vantagens de performance, correr parte da aplicacao em servidores possibilita a criacao

de um SaaS que tras benefıcios como poder proteger algoritmos proprietarios, controlar os acessos

a aplicacao e criar modelos de negocio como os de subscricao.

6.3.4 Aplicacao Desktop

Tambem e possıvel distribuir a aplicacao em formato de aplicacao Desktop multiplataforma, com-

patıvel com os varios sistemas operativos existentes utilizando tecnologias como Electron ou Cor-

dova2, podendo assim instalar e executar a aplicacao na maquina do utilizador como uma aplicacao

nativa convencional.

6.3.5 Utilizar apenas Javascript

Com os recentes avancos da linguagem Javascript em termos de componentes Web, bundling,

linting, style checking, compiladores js2js, e especificacao ES6. Os problemas da linguagem nao

tipificada Javascript ser podem ser contornados e criar aplicacoes Javascript robustas e modulares

sem uma linguagem intermedia como Haxe ou Dart torna-se mais rapido, mais flexıvel e mais facil de

introduzir a novos programadores por ser esta ser uma das linguagens mais utilizadas atualmente.

Reescrever a logica da aplicacao em Javascript e um processo rapido uma vez que esta linguagem e

semelhante a linguagem Haxe usada atualmente, devera no entanto ser uma escolha bem planeada

pois as tecnologias Web evoluem rapidamente e deve-se escolher uma abordagem duradoura e de

facil adocao para futuros programadores ou tecnicos envolvidos no projeto.

Apesar dos problemas encontrados e das varias formas possıveis de melhorar a aplicacao no fu-

turo, este trabalho foi uma primeira experiencia no sentido de dotar as ferramentas de process mining

com uma maior interatividade, essencial para a analise e compreensao de modelos complexos.

2https://cordova.apache.org/

52

Bibliografia

[1] G. Sander, “Layout of compound directed graphs,” 2005.

[2] U. Brandes and B. Kopf, “Fast and simple horizontal coordinate assignment,” in Graph drawing.

Springer, 2002, pp. 31–44.

[3] W. Van Der Aalst, A. Adriansyah, A. K. A. de Medeiros, F. Arcieri, T. Baier, T. Blickle, J. C. Bose,

P. van den Brand, R. Brandtjen, J. Buijs et al., “Process mining manifesto,” in Business process

management workshops. Springer, 2012, pp. 169–194.

[4] W. M. van der Aalst, “Process mining in the large: A tutorial,” in Business Intelligence. Springer,

2014, pp. 33–76.

[5] L. Li, “Analysis and application of mvvm pattern,” Microcomputer Applications, vol. 12, p. 019,

2012.

[6] W. Van Der Aalst, Process mining: discovery, conformance and enhancement of business pro-

cesses. Springer Science & Business Media, 2011.

[7] W. M. Van Der Aalst, H. A. Reijers, and M. Song, “Discovering social networks from event logs,”

Computer Supported Cooperative Work (CSCW), vol. 14, no. 6, pp. 549–593, 2005.

[8] W. M. Van der Aalst, “The application of petri nets to workflow management,” Journal of circuits,

systems, and computers, vol. 8, no. 01, pp. 21–66, 1998.

[9] M. Chinosi and A. Trombetta, “Bpmn: An introduction to the standard,” Computer Standards &

Interfaces, vol. 34, no. 1, pp. 124–134, 2012.

[10] A.-W. Scheer, O. Thomas, and O. Adam, “Process modeling using event-driven process chains,”

Process-Aware Information Systems, pp. 119–146, 2005.

[11] W. M. van der Aalst, H. A. Reijers, A. J. Weijters, B. F. van Dongen, A. A. De Medeiros, M. Song,

and H. Verbeek, “Business process mining: An industrial application,” Information Systems,

vol. 32, no. 5, pp. 713–732, 2007.

[12] P. T. Hornix, “Performance analysis of business processes through process mining,” Master’s

Thesis, Eindhoven University of Technology, 2007.

53

[13] W. Van der Aalst, T. Weijters, and L. Maruster, “Workflow mining: Discovering process models

from event logs,” Knowledge and Data Engineering, IEEE Transactions on, vol. 16, no. 9, pp.

1128–1142, 2004.

[14] A. Rozinat and W. M. van der Aalst, “Conformance checking of processes based on monitoring

real behavior,” Information Systems, vol. 33, no. 1, pp. 64–95, 2008.

[15] B. F. van Dongen, A. K. A. de Medeiros, H. Verbeek, A. Weijters, and W. M. Van Der Aalst, “The

prom framework: A new era in process mining tool support,” in Applications and Theory of Petri

Nets 2005. Springer, 2005, pp. 444–454.

[16] C. W. Gunther and A. Rozinat, “Disco: Discover your processes.” BPM (Demos), vol. 940, pp.

40–44, 2012.

[17] D. Goodman, Dynamic HTML: The Definitive Reference: A Comprehensive Resource for HTML,

CSS, DOM & JavaScript. ”O’Reilly Media, Inc.”, 2002.

[18] M. Mikowski and J. Powell, Single page web applications: JavaScript end-to-end. Manning

Publications Co., 2013.

[19] S. Tilkov and S. Vinoski, “Node. js: Using javascript to build high-performance network programs,”

IEEE Internet Computing, no. 6, pp. 80–83, 2010.

[20] J. Ferraiolo, F. Jun, and D. Jackson, Scalable vector graphics (SVG) 1.0 specification. iuniverse,

2000.

[21] N. Q. Zhu, Data Visualization with D3. js Cookbook. Packt Publishing Ltd, 2013.

[22] E. R. Gansner, E. Koutsofios, S. C. North, and G.-P. Vo, “A technique for drawing directed graphs,”

Software Engineering, IEEE Transactions on, vol. 19, no. 3, pp. 214–230, 1993.

[23] B. Dasnois, HaXe 2 Beginner’s Guide: Develop Exciting Applications with this Multi-platform

Programming Language. Packt Publishing Ltd, 2011.

[24] C. Niska, Extending Bootstrap. Packt Publishing Ltd, 2014.

[25] M. S. Mikowski and J. C. Powell, “Single page web applications,” B and W, 2013.

[26] H. Rotava, L. P. Dallo, and A. M. dos Santos Adario, “Processamento distribuıdo com web wor-

kers.”

[27] M. Turner, D. Budgen, and P. Brereton, “Turning software into a service.” Computer., vol. 36,

no. 10, pp. 38–44, 2003.

54