Repositório do servidor web do framework UX-Tracking: User eXperience Tracking
📃 Para a abertura dos projetos contidos neste repositório, estabelecem-se os seguintes requisitos:
- static -
Arquivos estáticos carregados pelo flask no servidor
- templates -
Templates (html + css + js) das páginas renderizadas pelo flask
- base.html -
Template base para as demais páginas
- dashboard.html -
Não implementado
- data_analysis.html -
Página de análise dos dados
- data_filter.html -
Página de coletas
- data_view.html -
Página de visualização dos dados
- email.html -
Email enviado para recuperação de senha do usuário
- forgot_pass.html -
Página de recuperação de senha
- index.html -
Página principal
- login.html -
Página de login
- register.html -
Página de registro
- base.html -
- .gitignore -
Lista de arquivos ignorados no commit
- README.md -
Documentação
- app.py -
Script python para declarar a aplicação web
- functions.py -
Script python de funções chamadas pela aplicação
- requirements.txt -
Arquivo de requisítos para a aplicação
- wsgi.py -
Script wsgi
-
Abra o VSCode, crie um ambiente virtual e ative-o
python -m venv venv
Ativar o ambiente virtual:
Sistema Shell Comando Windows CMD venv/scripts/activate.bat
Windows PowerShell venv/bin/Activate.ps1
Linux bash source venv/bin/activate
-
Faça a instalação das bibliotecas necessárias
pip install -r requirements.txt
-
Crie um arquivo
.env
e adicione as seguintes variáveis de ambiente no seu arquivo .envSECRET_KEY
- Chave secreta da aplicação FlaskMAIL_NAME
- Nome de usuário do serviço de emailMAIL_PASSWORD
- Senha do serviço de emailURI_DATABASE
- String de conexão com a base de dados mongo -
Adicione o modelo BERTimbau ao código, faça o download da pasta e insira-a nos arquivos da aplicação.
-
Para iniciar a aplicação, basta executar o arquivo app.py pelo vscode apertando a tecla
F5
ou pelo terminal -
A aplicação estará rodando em dois IP's, um somente na máquina executada e outro na rede local.
Para utilizar a ferramenta, pode-se fazer o uso da aplicação distribuída ou no ambiente de desenvolvimento criado.
Para utilização da ferramenta distribuída, acesse o site da UX-Tracking, faça seu cadastro e faça o download da extensão disponibilizada para as coletas no seu navegador.
- Após o download da extensão UX-Tracking, faça sua descompressão e ative o modo de programador no navegador Chrome
- Carregue a extensão apertando o botão
Carregar expandida
na aba de extensões - Faça seu login apertando no botão da extensão carregada e estará pronta pra utilizar
- Os dados coletados serão armazenados em nosso servidor e você poderá acessá-los diretamente na página da aplicação, bem como processar, visualizar e filtrar suas coletas.
Para utilização no ambiente de desenvolvimento construído, acesse um dos IP's gerados pelo servidor. Para carregar a extensão que irá apontar para o IP do servidor:
- Acesse o arquivo
background.js
que está na pastaUX-Tracking Extension
- Na linha
const serverUrl = "<SEU_IP";
insira o IP gerado pelo servidor - Realize os passos para carregar a extensão da pasta
UX-Tracking Extension
- A extensão estará apontando para o seu servidor local e você poderá realizar todas as operações que quiser
A UX-Tracking é constituída de 3 módulos: Cliente, Web App e visualizador. Os três módulos são responsáveis respectivamente por coletar dados de interação; organizar e armazenar; e prover formas de visualizar os dados capturados. Os módulos são descritos a seguir.
Desenvolvido como uma extensão do navegador Google Chrome utilizando Javascript, este módulo é responsável por capturar - do lado cliente - as interações dos desenvolvedores, no papel de usuários do portal, a partir das técnicas de rastreamento do mouse, do olho e do teclado, além de transcrição de fala. As versões do módulo cliente encontram-se no diretório clients
.
A captura de interações do mouse contempla 4 tipos de interação:
- Movimento
- Clique
- Pausa
O rastreamento ocular é realizado por meio de uma versão modificada do WebGazer (Copyright © 2016-2021, Brown HCI Group).
A extensão também pode capturar entradas de teclado, registrando a digitação de caracteres.
Utilizando o WebKit Voice Recognition, o módulo cliente é capaz de capturar voz, incluindo pausas, transcrevendo e enviando como entradas de texto.
Após o registro do usuário, a aplicação web, através do login do usuário, disponibilizará os dados coletados, de forma condensada, para o usuário através de um CSV com data e hora da coleta. Os dados do CSV incluem sites visitados, voz, rastreio do mouse e rastreio dos olhos.
A aplicação conta, atualmente, com quatro módulos de pós-processamento de dados de dados, sendo eles:
Este componente, ou submódulo, reproduz individualmente cada amostra capturada, conforme a escolha do usuário permitindo a visualização dos dados clusterizados do modelo de agrupamento k-means.
Este componente produz um agrupamento hierárquico de clusters, conforme a entrada do usuário, e é um método de análise de cluster que busca construir uma hierarquia de clusters.
Este componente gera o deslocamento médio do dado de entrada escolhido pelo usuário.
A aplicação desktop é responsável por permitir a visualização dos dados. Possui três recursos de visualização, descritos a seguir:
Este componente, ou submódulo, reproduz individualmente cada amostra capturada, permitindo a visualização quadro-a-quadro dos movimentos do desenvolvedor registrados a partir das técnicas de rastreamento domouse e do olho. Para a composição da visualização, o módulo utiliza captura de telas registradas durante a interação, e sobre essas posiciona pontos e linhas contínuas representando o caminho percorrido e ações realizadas pelo usuário.
Este componente produz um mapa de calor para o rastreamento do mouse e do olho. É possível a geração de mapas individuais ou de grupo de desenvolvedores. As representações são constituídas de capturas de tela sobrepostas e encontradas nos dados capturados, de forma a reproduzir a tela da aplicação. Este componente permite a detecção de áreas de interesse, desvios de atenção, zonas não visualizadas, entre outras possibilidades.
O procedimento:
1º - Acesse o link -> https://uxtracking.andrepereira.eng.br/
2º - Clique no botão "Download Research"
Após os passos acima, o download do zip da pasta Samples será iniciado.
Para o download da ferramenta de visualização, basta clicar no botão "Ferramenta de Pós-processamento" e o download será iniciado.