Processo de Desenvolvimento

Esse processo corresponde aos métodos de implementação de uma estrutura de código para o dashboard. Vale ressaltar que há dois formatos de template, o primeiro é uma estrutura que contém apenas HTML e CSS. Ou seja, é a perspectiva de como ficará a interface, código front-end. Já o segundo é o modelo reutilizável na plataforma

Capítulo 4. SMARTNODE DASHBOARD 48

Figura 18 – Protótipo a partir da implementação do template utilizando o SmartNode Dashboard

Node-RED, ou seja, é um fluxo utilizando os nós propostos. Para deixar essas diferenças

mais claras e realizar a implementação, os passos seguintes mostram como isso funciona:

Passo 1. Criação do modelo de renderização: no primeiro momento, o desenvolvedor

deve criar uma estrutura de código em HTML, do template. Esse código já se integra ao código CSS do SmartNode Dashboard. Ele é apenas um código base, para a organização da interface, sendo considerado uma prévia da estrutura final;

Passo 2. Implementação do fluxo: em seguida é necessário utilizar o node-RED para

criar do fluxo de como o template (modelo de renderização) deverá funcionar. Há o fluxo principal e diversos sub-fluxos funcionando juntos. Cada sub-fluxo, contido nesse fluxo principal, representará um parâmetro (card) de visualização no dashboard (clima, trânsito, etc). Cada sub-fluxo funciona com um par de nós, um para se conectar às fontes de dados e um segundo para receber e renderizar os dados. Dessa forma, o fluxo principal será divididos em vários fluxos menores e no fim eles se ligarão no último nó, que é um nó de configuração do layout do

dashboard. Esse fluxo terá dois nós, respectivamente, o primeiro para entrada da

Capítulo 4. SMARTNODE DASHBOARD 49

Passo 3. Compartilhamento de fluxo: o compartilhamento do código do template fina-

lizado através do repositório oficial do Node-RED. Para isso é preciso primeiramente criar uma conta no repositório oficial deles. Após esse passo, basta acessar a página de flows do site oficial. Nessa página contém um guia de como fazer a inclusão de um novo nó ou fluxo e em seguida compartilhar.

4.2.3

Processo de Implantação

Esse segundo estágio corresponde a etapa de utilização do fluxo e implantação do painel de dados. Ou seja, eles não são obrigatoriamente sequenciais, podem acontecer isoladamente. É possível uma equipe de desenvolvimento utilizar uma estrutura pronta a partir da importação do repositório oficial. Bastando para isso, realizar a instalação dos nós por meio do editor, no Gerenciador de Paleta, ou proceder com a cópia do código disponível na página do repositório e importar no Node-RED. Para isso, a seguir é explicado a sequência de passos necessários:

Passo 1. Importação de fluxo: para executar a importação da estrutura compartilhada,

a partir do repositório, basta utilizar a Gerência de Paletas (Manage Palette) da plataforma, digitando o nome do arquivo cadastrado no repositório. Após isso, caso o item seja encontrado, irá aparecer a opção de instalar;

Passo 2. Configuração dos serviços: Após o passo anterior, é preciso configurar os

serviços. Alguns serviços de acesso a dados, disponibilizados por meio de APIs das cidades, precisam de credenciais de acesso. Algumas delas precisam, obriga- toriamente, de usuário e senha, ou até mesmo outras formas de segurança mais complexas. Há outros serviços que precisam configurar o retorno de dados e por isso é preciso realizar a configuração de cada uma delas.

Passo 3. Deploy e publicação: Esse passo corresponde a última atividade antes da

disponibilização do dashboard. Para isso basta realizar a implantação (deploy) direto na plataforma.

4.2.4

Integração ao Node-RED

Antes de explicar a integração ao Node-RED, vamos retornar à Figura 6, que fornece uma visão geral de como é o funcionamento de um template. A interface final é resultado da composição de três elementos que funcionam em conjunto: (i) a fonte de dados (nesse contexto, os serviços de dados das cidades), (ii) o padrão web (com a estrutura HTML do conteúdo e o formatador de conteúdo em CSS) e (iii) o template

Capítulo 4. SMARTNODE DASHBOARD 50

em artefato digital com as informações. O Node-RED faz o papel do template engine e é o responsável por toda parte de lógica e programação do processo.

A principal função do Node-RED no contexto desse projeto é abstrair a comple- xidade de uma infraestrutura robusta e de grande porte para executar o projeto de

city dashboard. Isso é possível pela capacidade que essa infraestrutura oferece, além do

seu padrão de programação por fluxos, que oferece altos níveis de produtividade no desenvolvimento. Assim, é possível, de forma simples e rápida, a disponibilização do

template em execução.

Para tanto, foi criado um fluxo de dados e nós específicos. Alguns nós já são disponibilizados na biblioteca de itens do Node-RED, o que reduz drasticamente o trabalho para algumas demandas de desenvolvimento do projeto. Por exemplo, a Figura

19mostra o fluxo criado para desenvolver o primeiro template de Dashboard, esse fluxo criado para demonstrar a funcionalidade da plataforma, utilizou nós do próprio Node-

RED, outros disponibilizados por terceiros, além dos nós criados neste projeto, para

representar os cards que renderizam os dados.

4.2.4.1

Fluxo do template

A Figura19apresenta um fluxo com alguns sub-fluxos doProcesso de Implan- tação, que define a metologia de utilização de um template lançando mão do Node-RED.

A ideia é mostrar como são criados os fluxos para consumir os serviços de dados.

Figura 19 – Fluxo para o Template 1

Cada sub-fluxo representa uma saída no template. Cada saída é demarcada por um par de nós (nó de dados e nó de renderização) que origina um card de saída, conforme a Figura 17. Como é possível perceber, praticamente todos os nós de saída (identificados

Capítulo 4. SMARTNODE DASHBOARD 51

pela cor verde) são antecedidos de um nó que tem a função de ser a conexão com os dados, ou seja, são responsáveis por fornecer um meio de comunicação com a fonte de dados e tratá-los para que o nó de saída possa realizar a renderização.

CF01: fluxo sobre dados do clima e representar a saída na interface no card específico.

Ele utiliza dois nós: o primeiro é o nó de clima, que é fornecido por terceiros. Sua função é abstrair a complexidade de criar um algoritmo específico para coletar dados de clima. Ele se conecta com o site Open Weather Map e realiza a consulta sobre as informações do clima da cidade, de acordo com a configuração realizada. O segundo nó é responsável por renderizar a saída em HTML com os dados do tempo. Basicamente ele organiza os dados vindos do nó de clima e ajusta no código HTML;

CF02: fluxo sobre bicicletas de aluguel da cidade do Recife. O primeiro nó acessa a API

de dados das bicicletas. O segundo nó recebe os dados do primeiro e organiza a saída de dados para visualização em HTML;

CF03: fluxo da qualidade do ar. Responsável por mostrar dados sobre a qualidade do ar.

Utiliza dois nós. O primeiro faz a consulta a API de dados, utilizando um nó que recupera dados de uma URL. O segundo recebe os dados e representa em código HTML;

CF04: fluxo para mostrar dados sobre as linhas de ônibus. Utiliza dois nós, com o

primeiro sendo responsável por recuperar informações por requisição em uma URL, na API de dados. O segundo nó é responsável pelo card de visualização, que retorna uma listagem de linhas de ônibus;

CP01: fluxo para projetar o card de tráfego. Ele não precisa de um nó auxiliar para

consulta de dados pelo fato de apenas rendizar um código gerado pela fonte de dados;

CD01: fluxo com a função de consultar a API de dados sobre eventos na cidade e

lidar com a saída no card CD02. Utiliza dois nós: o primeiro recupera os dados

disponíveis numa determinada URL (API de dados). O segundo é o nó responsável por gerar o card em HTML, que organiza os dados de saída de interface;

CD02 : fluxo para consulta API com imagens de câmeras de trânsito. Ele é responsável

por consultar a API de dados sobre imagens de tráfego e recuperá-las para serem visualizadas na saída do card, onde o segundo nó será o responsável por essa renderização;

Dashboard Natal: esse nó é responsável por configurar o layout de saída. Ou seja, nas suas configurações é possível escolher dentre algumas possibilidades de visualiza-

Capítulo 4. SMARTNODE DASHBOARD 52

ção de layouts diferentes. Esse nó recebe os dados gerados pelos nós anteriores e configura para ser renderizado no padrão de interface do dashboard;

response: Por fim, o último nó trata de uma resposta (HTTP response). Seu objetivo é fornecer uma resposta à solicitação gerada pelo nó inicial de entrada (HTTP

request).

Para ilustrar a saída desse fluxo a Figura20exibe o resultado na interface web.

Figura 20 – Protótipo após da implementação do template e integração do fluxo no Node-RED

O fluxoCF01, CF02, CF03, CF04, CP01 e CD01, CD02 são responsáveis pelas

saídas nos cards CF01, CF02, CF03, CF04, CP01, CD01 e CD02, respectivamente.

Como resultado deste trabalho, foi criado alguns nós para contribuir com a comunidade de desenvolvedores Node-RED. O resultado disso é a criação dos nós do

SmartNode Dashboard, com a função de lidar com a formatação de saída dos elementos

de interface. O seu código está disponível no repositório criado para este fim, no GitHub. Assim é possível que outros desenvolvedores consigam ampliar o alcance deste projeto e contribua em novas demandas, solucionando outros problemas.

53

5 VALIDAÇÃO DE USO

Este capítulo apresenta a validação sobre o uso do SmartNode Dashboard, bem como a abordagem utilizada e os resultados obtidos. Ele se organiza da seguinte forma: (i) abordagem; (ii) caracterização dos participantes; (iii) resultados e (iv) discussão.

Conforme a problemática apresentada por essa pesquisa, a falta de padrões (mé- todos, códigos e interfaces) e projetos que auxiliem desenvolvedores voltados a produção de city dashboards torna o processo mais complexo e dispendioso. O objetivo deste trabalho é apresentar uma proposta que possa ajudar aos desenvolvedores de dashboards na melhoraria de seus processos, além de ganhos na produtividade, lançando mão das tecnologias atuais. Diante disso, foi proposto, no Capítulo 4, o SmartNode Dashboard com sua metodologia de utilização junto ao Node-RED. Essas ferramentas são capazes de facilitar o processo de desenvolvimento, possibilitando tanto o reaproveitamento de código e estruturas pré-formatadas, como a possibilidade de estender as ferramen- tas disponibilizadas através de especialização de códigos abertos, fornecidos por este trabalho.

Outrossim, esse estudo propõe a validação da proposta apresentada no capítulo anterior. Esta validação foi realizada por meio de uma avaliação qualitativa. Onde avaliou-se a experiência de uso da proposta trazida por esse trabalho.

5.1

Abordagem

Para realizar essa validação foram utilizados os métodos de questionários e observação. No Apêndice 1, Apêndice 2 e Apêndice 3, são mostrados, respectivamente, o Termo de Livre Consentimento Esclarecido, o Roteiro de Avaliação e as Tarefas solicitadas aos participantes. Esses instrumentos de pesquisa foram utilizados para conduzir a avaliação junto aos participantes. Além desses documentos, foi utilizado um software de captura de tela, para registrar os participantes realizando as tarefas solicitadas, assim como um aplicativo instalado num smartphone para gravação de áudio, que serviu para registrar as respostas dos questionários estruturados: um questionário que antecedia o teste e outro que foi feito após a realização das tarefas.

Após a realização dos estudos deste projeto, verificou-se que as ferramentas exis- tentes não atendem completamente aos problemas aqui apontados. Assim, as conclusões sobre o que se tem disponível na comunidade de software atualmente, é ainda insufici- ente para garantir que os desenvolvedores possam melhorar seus projetos, num modelo

Capítulo 5. VALIDAÇÃO DE USO 54

simplificado e que garanta maior automação na confecção de novos artefatos. Essa con- clusão se delineou durante o percurso de estudos sobre as ferramentas e projetos voltados aos dashboards. Isso acontece pelo fato de que é comum as equipes desenvolvedoras criarem seus próprios projetos, baseando-se no seu contexto e assim não compartilham seus códigos e métodos com a comunidade, ao ponto que os programadores possam utilizar a base feita anteriormente para ampliar na construção de novos softwares.

Essa avaliação procurou analisar se a proposta apresentada no capítulo4atende o objetivo deste trabalho. Ou seja, verificar se o SmartNode Dashboard e sua metodologia que utiliza o Node-RED como plataforma de desenvolvimento é eficaz na busca por melhoria no processo de criação de dashboards.

5.1.1

Experimentos executados

A realização desse estudo foi composta de atividades com intuito de avaliar o nível de dificuldade que os participantes tiveram para construir um dashboard utilizando a abordagem proposta. Dessa forma, a avaliação se dividiu em : (i) treinamento e (ii) execução das tarefas.

• No treinamento, os participantes do experimento receberam instruções sobre a ferramenta de fluxo e como ela funciona. Esse ponto é particularmente importante pelo fato de que os participantes deveriam se nivelar ao ponto de construir um pro- jeto sem necessidade de recorrer a outros materiais. Esse passo não era obrigatório, e por isso os participantes poderiam dispensar se se sentissem confortáveis com o

Node-red;

• Na execução das tarefas foi solicitado a criação de alguns tipos de dashboards diferentes utilizando o SmartNode Dashboard dentro do Node-RED.

5.1.2

Critérios avaliados

Alguns critérios foram tomados como base relevante de comparação para validar esse estudo, afim de que sua aferição possa legitimar os objetivos desta pesquisa.

Eficiência: este critério foi utilizado para mensurar a duração em que cada participante

levou para concluir as atividades propostas. Ou seja, ele procura avaliar o esforço empregado para realizar o trabalho;

Eficácia: esse critério procura mensurar se a execução das tarefas propostas foram

Capítulo 5. VALIDAÇÃO DE USO 55

tarefas propostas. Quanto maior a quantidade de tarefas realizadas, mais eficaz foi ele em realizar a tarefa;

A abordagem empregada nessa avaliação teve o intuito de avaliar a experiência de usuário, onde o participante técnico da área de computação, com experiência em desenvolvimento, teria em utilizar a metologia proposta por esse trabalho.

5.1.3

Metodologia utilizada

Para realizar essa avaliação foi necessário subdividi-la em quatro etapas: (i) Ori- entação sobre Node-RED, onde os participantes eram instruídos de suas funcionalidades; (ii)Preparação do Ambiente de Testes, criação de um ambiente simples para realizar os experimentos com os nós a serem utilizados; (iii) Processo de Avaliação, descrevendo como foram realizadas as avaliações; e (iv) Resultados do estudo na seção5.3.

5.1.3.1

Orientação sobre Node-RED

Antes de iniciar cada avaliação, foi necessário apresentar a plataforma que seria utilizada, o Node-RED. Essa etapa não era obrigatória, mas teve o intuito de instruir os participantes sobre o funcionamento da plataforma. Cada avaliado poderia, a qualquer tempo, pular esse estágio caso julgasse necessário. Isso pelo fato de quê, para aqueles que já tinham alguma experiência com o Node-RED, poderia acreditar que não seria necessário essa explanação.

5.1.3.2

Preparação do Ambiente de Testes

Para oferecer um ambiente próximo do real, onde o programador poderá utilizar o

SmartNode Dashboard e sua metodologia, foram disponibilizado nós com funcionalidades

de painéis para cidades inteligentes. Dessa forma, os participantes teriam os nós já instalados no ambiente.

Como tarefas, foi definido que seria necessário criar e configurar dois dashboards utilizando os nós do framework disponíveis. As saídas desses painéis seriam distintas, para verificar se o participante conseguiria entender a dinâmica da plataforma e as funcionalidades que o framework oferece.

5.1.3.3

Processo de Avaliação

Capítulo 5. VALIDAÇÃO DE USO 56

Apresentação do framework: apresentação do trabalho e da ferramenta de fluxo a ser

utilizada. Essa apresentação teve o intuito de introduzir ao participante o que é o trabalho que está sendo feito, bem como as suas funcionalidades e possibilidades. Após uma breve explanação, o participante já deveria ser capaz de entender a função da plataforma, assim como os objetivos do SmartNode Dashboard;

Termo de Livre Consentimento de Esclarecido: esse um documento discorre sobre as

intenções da pesquisa, esclarecendo as metas e atribuições. Além do mais, ele esclarece como os dados coletados serão utilizados pelos pesquisadores, resguar- dando os pesquisadores e entrevistados. O participante da avaliação deve assinar o documento antes de iniciar os testes. Nele, é possível ter todas as informações relevantes sobre a aplicação dos testes, além de informar que é possível desistir a qualquer tempo;

Questionário pré-teste: esse questionário teve o objetivo de realizar levantamento

sobre o perfil dos participantes. Assim era possível identificar se eles estavam próximo ao perfil esperado para realizar o ensaio.

Realização de tarefas: As tarefas que executadas foram concebidas de acordo com o

objetivo desta validação, ou seja, verificar se a abordagem é capaz de melhorar o processo de desenvolvimento. Duas tarefas de criação de dashboards foram utilizadas, cada tarefa era compostas algumas sub-tarefas que exigiam que o participante procurasse utilizar os nós mais afundo e assim entender melhor o funcionamento. Durante a realização das tarefas era possível realizar consultas, desde ao avaliador ou a materiais disponíveis na internet. Caso os participantes julgassem que não conseguiriam concluir e quisessem desistir, era facultado sua conclusão, mesmo podendo realizar consultas. Todos esses passos foram registrados por meio de software de captura de tela para análise posterior.

Questionário pós-teste: esse questionário foi aplicado para avaliar a experiência do

participante com as tarefas utilizando a ferramenta e suas respectivas impressões. A perguntas realizadas foram todas abertas, com a possibilidade de que o entrevistado ficasse a vontade sobre explicar suas percepções e ampliar as interpretações. Esse questionário foi aplicado tão logo as tarefas foram finalizadas.