Queiroz.js: JavaScript Extension for Dimep Kairos

09:19 Vinicius Knob 4 Comments


Se você utiliza o sistema Dimep Kairos assim como eu, então você precisa conhecer o Projeto Queiroz.js.

Nesse post quero explicar o que é o Projeto Queiroz.js, motivação, finalidade, tecnologias envolvidas, enfim, quero apresentá-lo de uma maneira melhor da que foi feita no README do GitHub, e demonstrar como uma simples extensão para navegador pode facilitar a vida de muita gente.

O que é o Queiroz.js?


Queiroz.js é uma extensão JavaScript para o serviço online de ponto chamado Dimep Kairos. Basicamente, a extensão fornece cálculos para facilitar a tomada de decisão no dia-a-dia. Se você tem curiosidade em conhecer o código, ou mesmo participar da criação do mesmo, pode conferí-lo aqui.

Como muitas coisas na área da programação, Queiroz.js nasceu da união de dois ingredientes: problema e conhecimento. Eu me perguntava "por que esse programa não mostra cálculo algum?", depois pensei "vou criar algo em JavaScript para rodar nesse console e logar o que preciso".

Evolução da Extensão


Como já foi dito, tudo começou no console de um navegador. Entre um console.log e outro, fui debbugando a interface de ponto, catando elementos, classes, tentando observar os padrões existentes até conseguir trazer para variáveis JavaScript os checkpoints contidos na tela.

Depois do console, foi para um arquivo onde cresceu até atingir a marca de quase 900 linhas de código. Eis a versão 1.0. O formato userscript ganhou lugar e as extensões Tampermonkey no Chrome e Grancemonkey no Firefox começaram a serem utilizadas como gerenciadores para guardar e executar o script. Nesse ponto o arquivo já estava rolando em conversas de Skype e e-mails.

A versão 2.0 foi marcada pela completa reescrita da estrutura do código. Com Gulp, consegui modularizar. Já estava sendo utilizado o Revealing Module Pattern, então não foi tão difícil separar em arquivos, e colocar o Gulp para automatizar diversas tarefas como concatenação e minificação.

A versão 3.0 teve uma grande reescrita do módulo core. Esse módulo é responsável por ordenar a chamada de cada um dos outros módulos fazendo com que todas as operações aconteçam em ordem, desde a coleta dos dados até a apresentação dos resultados. Essa versão também disponibilizou a primeira possibilidade de interação com o usuário: a funcionalidade DayOff, que permite "desligar" dias da semana que são feriados, ou coisas do tipo. Alguns commits depois, surgiu o TimeOn que permite informar folgas em horas. Recentemente, foi incluído a integração com Notifications API.

Código: JavaScript


Não existe mistério. O código literalmente lê a view, coleta os valores de ponto, efetua as conversões para objetos Date e String, efetua cálculos em milisegundos e renderiza novos componentes em tela apresentando todos cálculos em formato humano. Tudo com JavaScript.


A montagem dos componentes HTML também é feita em JavaScript. Entretanto, antes da versão 3.0, foi feita uma propaganda sobre a mesma utilizando um modal. Esse modal foi feito em HTML puro, Gulp fazia a minificação, injetava em uma variável String utilizando replacement, depois renderizava em tela utilizando innerHTML.

Tudo na extensão é JavaScript. A estrutura que não é. O projeto hoje possui HTML, CSS, Strings e JavaScript. A união de tudo isso ocorre graças ao Gulp. Se você olhar no GitHub verá que existem arquivos separados para cada coisa, mas o que realmente é utilizado encontra-se na pasta dist, arquivo queiroz.min.js, que é um compilado de todos os módulos/arquivos.

O que consegui com Queiroz.js?


Bom, em primeiro lugar: Conhecimento e Experiência. Queiroz.js me possibilitou conhecer inúmeras tecnologias, tanto novas como aprofundar as já conhecidas. Git e GitHub, por exemplo, mesmo utilizando no trabalho, hoje posso dizer que tenho muito mais conhecimento em Git Distribuído do que tinha antes. Padrões de Projeto com JavaScript também é algo muito bom e fácil de ser utilizado: Revealing Module Pattern, Observer Pattern e Module Pattern dão vida e organização ao Queiroz.js. Gulp.js é algo que realmente me deixou feliz: um automatizador de tarefas extremamente fácil de utilizar e graças ao Gulp.js a versão minificada e distribuída é tão simples de ser criada.

Em segundo lugar: Networking. Você realmente percebe que nada pode ser criado sozinho e considerado algo suficiente a todos. Receber constantemente opiniões de inúmeros colegas de profissão é algo incrível. Por diversas vezes eu respondo: "Como eu não pensei nisso?!". E imediatamente eu anoto para incluir.

Queiroz.js tem muito que evoluir ainda, que tal fazer parte disso também?

4 comentários:

  1. Muito massa sua iniciativa. Tens algum printscreen de como seria a extensão funcionando? Seria massa colocar no github.

    ResponderExcluir
    Respostas
    1. Olá José H., me desculpe pela demora em responder. Não coloquei prints da extensão em funcionamento por não querer comprar algum tipo de briga com a Kairos. Não tenho conhecimento sobre direitos de imagem. Enfim, concordo com você e seria interessante algumas imagens sim. Obrigado pelo comentário.

      Excluir
  2. Bom dia Vinicius,

    Gostei do seu artigo e da solução Queiroz.Js. Trabalho com captores biométricos, o mesmo tipo que é utilizado no REP da DIMEP, o CBM Morpho.

    Se tiver interesse em conversar sobre o sistema Kairos, gostaria de ter um feedback seu para um sistema que estou idealizando.

    meu email: emmanuel.teix@gmail.com
    Tel: +330685925580

    ResponderExcluir
    Respostas
    1. Bom dia Emmanuel, me desculpe pela demora em responder. O sistema Kairos não é meu, apenas a extensão Queiroz.js. Mas acredito que você consiga mais informações pelo próprio site da Kairos. Obrigado pela feedback.

      Excluir