SmartNode Dashboard: um framework front-end baseado em NodeRED para criação de City Dashboards

(1)

UNIVERSIDADEFEDERAL DORIOGRANDE DO NORTE INSTITUTOMETRÓPOLEDIGITAL

PROGRAMA DE PÓS-GRADUAÇÃO EMENGENHARIA DE SOFTWARE

MESTRADOPROFISSIONAL EMENGENHARIA DESOFTWARE

SmartNode Dashboard: um framework

front-end baseado em Node-RED para criação

de City Dashboards

Cesimar Xavier de Souza Dias

Natal-RN Janeiro de 2019

(2)

Cesimar Xavier de Souza Dias

SmartNode Dashboard: um framework front-end baseado em

Node-RED para criação de Smart City Dashboards

Dissertação de Mestrado apresentada ao Pro-grama de Pós-graduação em Engenharia de Software da Universidade Federal do Rio Grande do Norte como requisito parcial para a obtenção do grau de Mestre em Engenha-ria de Software.

Universidade Federal do Rio Grande do Norte – UFRN Instituto Metrópole Digital – IMD

Programa de Pós-Graduação em Engenharia de Software

Orientador: Prof. Dr. Frederico Araújo da Silva Lopes

Coorientador: Prof. Dr. Jair Cavalcante Leite

Natal/RN

2019

(3)

Dias, Cesimar Xavier de Souza.

SmartNode Dashboard: um framework front-end baseado em Node-RED para criação de City Dashboards / Cesimar Xavier de Souza Dias. - 2019.

70 f.: il.

Dissertação (mestrado) - Universidade Federal do Rio Grande do Norte, Instituto Metrópole Digital, Programa de Pós-Graduação em Engenharia de Software. Natal, RN, 2019.

Orientador: Prof. Dr. Frederico Araújo da Silva Lopes. Coorientador: Prof. Dr. Jair Cavalcante Leite.

1. SmartNode Dashboard - Dissertação. 2. Cidades inteligentes - Dissertação. 3. Dashboards - Dissertação. 4. Padrões de

interface web - Dissertação. 5. Node-RED - Dissertação. I. Lopes, Frederico Araújo da Silva. II. Leite, Jair Cavalcante. III. Título.

RN/UF/BCZM CDU 004.738.5

Universidade Federal do Rio Grande do Norte - UFRN Sistema de Bibliotecas - SISBI

Catalogação de Publicação na Fonte. UFRN - Biblioteca Central Zila Mamede

(4)

Cesimar Xavier de Souza Dias

SmartNode Dashboard: um framework front-end baseado em

Node-RED para criação de Smart City Dashboards

Dissertação de Mestrado apresentada ao Pro-grama de Pós-graduação em Engenharia de Software da Universidade Federal do Rio Grande do Norte como requisito parcial para a obtenção do grau de Mestre em Engenha-ria de Software.

Trabalho aprovado. Natal/RN, 28 de janeiro de 2019:

Prof. Dr. Frederico Araújo da Silva Lopes

Orientador

Prof. Dr. Jair Cavalcante Leite

Coorientador

Prof. Dr. Gustavo Girão Barreto da Silva

Examinador Interno

Prof. Dr. André Gustavo Duarte de Almeida

Examinador Externo

Natal/RN

2019

(5)

(6)

Agradecimentos

Primeiramente agradeço a Deus por ter me dado a capacidade da ciência, o que me fez chegar até aqui. Gostaria de agradecer aos envolvidos diretamente nesse processo de escalada ao ponto mais alto do mestrado, o título. Sem eles eu apenas teria alimentado minha agonia de estar andando em círculo num loop infinito e contraproducente. Assim sendo, um obrigado especial ao meu orientador: Frederico Lopes que me ajudou a concluir este trabalho, bem como ao meu coorientador: Jair Cavalcante. Ao coordenador do mestrado em Eng. de Software, Carlos Eduardo, que prontamente me ajudou sempre que precisei. Aos colegas de mestrado que estiveram juntos a todo instante e sempre que foi possível e necessário: Allyson, Cephas, Jackson, Jorge, Reniere, Tarso e Welkson (a ordem não revela o nível de importância de cada um). E por fim, mas não menos importante, às mulheres da minha vida, que com amor me recebiam todos os dias no regresso ao lar. A todos vocês, minha eterna gratidão.

(7)

Resumo

Atualmente diversas cidades têm se envolvido com pesquisas no intuito de fomentar a criação de soluções que dispõe os dados e informações à população, são os chamados

City Dashboards. Estes projetos possibilitam aos cidadãos acompanhar os acontecimentos

da cidade em tempo real, possibilitando a essas pessoas planejarem suas rotinas baseado no conhecimento gerado sobre o seu contexto local. Mesmo com o número crescente de projetos sendo desenvolvidos com essa finalidade, não há, ainda, trabalhos que sejam voltados a criar estruturas reaproveitáveis ou metodologias que utilizem outros produtos de softwares de código aberto com vistas à padronização de produção de dashboards. Diante disso, esse trabalho se propôs em criar um framework utilizando o Bootstrap. O framework teve a intenção de implementar padrões de projetos e de interface web, focados em conteúdos com estruturas reaproveitáveis, utilizando o Node-RED como pla-taforma de execução. Como resultados deste trabalho, foi possível conceber o SmartNode

Dashboard, um framework para criação de interfaces padronizadas e customizáveis. Além

de oferecer aos desenvolvedores de dashboards uma metodologia de utilização do

Smart-Node Dashboard junto ao Smart-Node-RED para facilitar e ampliar a capacidade das equipes no

tocante ao desempenho, tempo e qualidade no desenvolvimento de dashboards.

Palavras-chave: SmartNode Dashboard. cidades inteligentes. dashboards. padrões de

(8)

Abstract

Nowadays several cities have been involved in research in order to provide the city’s data and information to the population through dashboards (so-called City Dashboards). These solutions enable citizens to follow the events of the city in real time, enabling these people to plan their routines based on the knowledge generated about their local context. Even with the growing number of projects being developed for this purpose, there are no jobs that are aimed at creating reusable structures or methodologies that use other open source software products to standardize the production of dashboards. Therefore, this work was proposed in creating a framework based on Bootstrap. The framework was intended to implement standards projects and web interface, focused on content with reusable structures, using Node-RED as an execution platform. As a result of this work, it was possible to design SmartNode Dashboard, a framework for creating standardized and customizable interfaces. In addition to offering dashboard developers a methodology for using SmartNode Dashboard with Node-RED to facilitate and extend teams’ ability to perform, time and quality in the development of dashboards.

Keywords: SmartNode Dashboard, smart cities, dashboards, web interface patterns,

(9)

Lista de ilustrações

Figura 1 – Dashboard com resumo de informações . . . 22

Figura 2 – Projeto CityDashboard projetado para cidades do Reino Unido . . . . 25

Figura 3 – Projeto CityDashboard projetado para Sydney . . . 25

Figura 4 – Projeto CityDashboard projetado para Amsterdã . . . 26

Figura 5 – Exemplo de dashboard utilizando cards como padrão de interface . . 30

Figura 6 – Funcionamento de um template . . . 34

Figura 7 – Tela principal do Node-RED com exemplo de fluxo de dados . . . 35

Figura 8 – Representação dos arquivos de um nó no Node-RED . . . 35

Figura 9 – Código gerado após a configuração do package.json via linha de comando. 37 Figura 10 – Código gerado após a criação do onibus-natal.js para o nó. . . 37

Figura 11 – Código gerado após a criação do onibus-natal.html para o nó. . . . 38

Figura 12 – Exemplo do fluxo de dados no Node-RED . . . 39

Figura 13 – Estrutura do Card utilizando a metodologia BEM . . . 42

Figura 14 – Estrutura do Card utilizando a metodologia BEM, aplicada para o card de tempo. . . 43

Figura 15 – Visão geral do funcionamento do SmartNode Dashboard . . . 44

Figura 16 – Gráfico com os elementos comuns em city dashboards . . . 45

Figura 17 – Layout do template para cidade inteligente . . . 46

Figura 18 – Protótipo a partir da implementação do template utilizando o Smart-Node Dashboard . . . 48

Figura 19 – Fluxo para o Template 1 . . . 50

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

Figura 21 – Gráfico com tempos em que os participantes executaram as tarefas. . 58

Figura 22 – Gráfico com o percentual de completude que os participantes executa-ram as tarefas. . . 59

(10)

Lista de tabelas

Tabela 1 – Lista com os principais frameworks front-end do mercado . . . 33

Tabela 2 – Principais características do Bootstrap . . . 40

Tabela 3 – Parâmetros incluídos no protótipo 1. . . 47

Tabela 4 – Perfil dos participantes da validação de uso . . . 57

Tabela 5 – Respostas da Questão 1 do questionário pós-teste. . . 60

(11)

Lista de abreviaturas e siglas

API Application Programming Interface (Interface de Programação de

Apli-cativos)

CSS Cascading Style Sheets (Folha de Estilo em Cascata)

HTML HyperText Markup Language (Linguagem de Marcação de Hipertexto)

HTTP Hypertext Transfer Protocol (Protocolo de Transferência de Hipertexto)

IHC Interação Humano-Computador

JSON JavaScript Object Notation (Notação de Objetos JavaScript)

NPM Node Package Manager (Gerenciador de Pacotes do Node)

SDK Software Development Kit (Conjunto de Desenvolvimento de Software)

TIC Tecnologia da Informação e Comunicação

URL Uniform Resource Locator (Localizador Padrão de Recursos)

(12)

Sumário

Sumário . . . 11 1 INTRODUÇÃO . . . 13 1.1 PROBLEMA . . . 15 1.2 Objetivos . . . 17 1.2.1 Objetivos Específicos . . . 17 1.3 Justificativa . . . 18 1.4 Organização do Trabalho . . . 19 2 CONCEITOS BÁSICOS . . . 20 2.1 Smart City . . . 20 2.2 Dashboard . . . 22 2.2.1 Tipos de Dashboards . . . 23 2.2.2 Projetos de Dashboards . . . 24

2.2.2.1 Londres e outras cidades do Reino Unido . . . 24

2.2.2.2 Sydney . . . 25

2.2.2.3 Amsterdã . . . 26

2.3 Padrões . . . 27

2.3.1 Padrões de Projetos. . . 27

2.3.2 Padrões de Interface Web . . . 28

2.3.2.1 Consistência de Padrões . . . 29 2.3.2.2 Cards . . . 30 3 BASE TECNOLÓGICA . . . 31 3.1 CSS . . . 31 3.1.1 Características. . . 31 3.2 Frameworks . . . 31 3.2.0.1 Frameworks Front-end . . . 32

3.2.1 Templates de Interface Web . . . 33

3.3 Node-RED . . . 34 3.3.1 Nós . . . 34 3.3.1.1 Tipos de nós existentes . . . 35 3.3.1.2 Criação de novos nós . . . 36 3.3.2 Fluxos . . . 39 4 SMARTNODE DASHBOARD . . . 40

(13)

4.1 Desenvolvimento do Framework CSS . . . 40

4.1.1 Customização do Bootstrap . . . 40

4.1.2 Arquitetura de Código CSS . . . 41

4.2 Metodologia de utilização . . . 43

4.2.1 Template de Interface Web . . . 44

4.2.2 Processo de Desenvolvimento . . . 47 4.2.3 Processo de Implantação . . . 49 4.2.4 Integração ao Node-RED . . . 49 4.2.4.1 Fluxo do template . . . 50 5 VALIDAÇÃO DE USO . . . 53 5.1 Abordagem . . . 53 5.1.1 Experimentos executados . . . 54 5.1.2 Critérios avaliados. . . 54 5.1.3 Metodologia utilizada . . . 55

5.1.3.1 Orientação sobre Node-RED . . . 55

5.1.3.2 Preparação do Ambiente de Testes . . . 55

5.1.3.3 Processo de Avaliação . . . 55

5.2 Caracterização dos Participantes . . . 56

5.3 Resultados . . . 57 5.3.1 Critério de Eficiência . . . 57 5.3.2 Critério de Eficácia . . . 59 5.4 Discussão . . . 59 5.5 Conclusão . . . 61 6 CONSIDERAÇÕES FINAIS . . . 62 6.1 Principais contribuições . . . 62 6.2 Limitações . . . 63 6.3 Trabalhos futuros . . . 63 REFERÊNCIAS . . . 64

APÊNDICES

67

APÊNDICE A – TERMO DE LIVRE CONSENTIMENTO ESCLARECIDO 68 APÊNDICE B – ROTEIRO DE AVALIAÇÃO . . . 69

(14)

13

1 INTRODUÇÃO

Segundo estimativas da União das Nações Unidas (ONU), até 2050 a população mundial terá alcançado o patamar de 9 bilhões de habitantes. Um número alarmante se for considerada a grande demanda de insumos que uma população tão grande expende para se manter. Acrescendo a esse fator, estima-se que mais de 50% da população mundial viva nas áreas urbanas (LOPES; OLIVEIRA,2017). Vale ressaltar que até os anos 60, apenas 34% da população vivia nas áreas urbanas.Lopes e Oliveira(2017) destaca que já se sabe que cerca de 80% da população do leste da Europa viverá nas grandes cidades até o ano de 2020. Esse panorama traz novas responsabilidades às cidades. Traz consigo a necessidade delas se reinventarem e desafios de como elas vão transformar espaços urbanos em lugares mais inovadores, participativos, conectados e sustentáveis, sem negligenciar a qualidade de vida de suas populações, nunca foram tão latentes.

O panorama defronte a dramática massa urbana representa desafios cruciais para a logística da gestão pública. Estes, decorrentes principalmente da pressão por eficácia no suprimento às demandas sociais, precisam adotar novas abordagens no tocante a sistematização de soluções efetivas para os desafios enfrentados. ParaWeiss, Bernardes e Consoni (2015), esse cenário pode ser ainda mais desafiador do que parece. Para estes autores as restrições no campo legal-institucional e econômico, em referência a destinação de recursos públicos e na concorrência acirrada entre as cidades para angariar investimentos, visto que as receitas governamentais demoram demais para chegar ou são usadas de forma equivocada, é um fator preocupante quando se pensa em soluções efetivas para estas cidades. Muitas vezes, demorar demais na entrega de projetos já em curso, pode significar criar novos problemas.

Aliadas a isso, com o avanço das tecnologias e a urgência de refletir sobre como estão sendo usados os espaços urbanos, respeitando a sustentabilidade, várias cidades ao redor do mundo estão trabalhando continuamente em pesquisas com foco na criação de soluções eficientes. Como reflexo disso, o conceito de cidade inteligente tem ganhando cada vez mais notoriedade. De acordo com Macke et al. (2018), até o ano de 2020, 40 cidades serão consideradas inteligentes, e num intervalo de 5 anos esse número aumentará para 88. Dentre estas cidades, duas capitais brasileiras - Rio de Janeiro e Curitiba, deverão compor o grupo das 8 cidades mais inteligentes da América Latina. Muitos são os exemplos de projetos que estão sendo desenvolvidos para tornar as cidades inteligentes. Para se ter uma ideia, em 2010, a cidade de Curitiba se tornou a primeira cidade do mundo a conectar ônibus públicos a uma rede de banda larga móvel 3G. Isso abriu possibilidade para novas oportunidades na oferta de serviços aos turistas, por exemplo, que podem planejar suas rotas, comprar ingressos, dentre outras conveniências

(15)

Capítulo 1. INTRODUÇÃO 14

ofertadas pelo mercado turístico local (MACKE et al.,2018). Outro exemplo ainda mais arrojado, vem das duas cidades que foram planejadas do zero para se tornar exemplos de cidades inteligentes. Songdo, na Coréia do Sul e Masdar, em Dubai. Estas cidades utilizam todos os conceitos modernos do que deve existir num espaço urbano para serem consideradas inteligentes.

Atualmente, nas cidades, é possível gerar dados por meio de sensores, sinais de trânsito, câmeras espalhadas pelas ruas e até mesmo através dos próprios aparelhos inteligentes dos cidadãos, e disponibilizar esses dados às massas de pessoas conectadas. Esses dados, quando transformados em informação, são utilizados pelas pessoas de diversas formas, desde a geração de novos negócios ou até mesmo no modo como os cidadãos passam a utilizá-los como ferramentas auxiliares em tomadas de decisões nas tarefas cotidianas. Os cities dashboards ou painel de dados das cidades, são ferramentas disponibilizadas aos cidadãos com intuito de mostrar informações que sejam relevan-tes. Um exemplo da importância dessas ferramentas é a influência que elas podem desempenhar na escolha, dos cidadãos, de uma rota de trânsito na volta do trabalho até sua residência. Eles podem até mesmo adiar o retorno em alguns minutos para poder trafegar em vias menos movimentadas. Ou desistir de ir em algum local público, por haver aglomeração de pessoas. Essa é a rede da internet das coisas, que interliga mais que computadores, ela se tornou uma rede que interliga pessoas e comunidades. Tornando os computadores invisíveis ao ponto das pessoas utilizarem seus aparelhos de forma transparente, conforme afirmou o cientista da computação Mark Weiser, na década de 90. Ele afirmou que essa seria conhecida como computação ubíqua, a era da tecnologia calma, quando a tecnologia seria o plano de fundo das nossas vidas (DREY,

2015).

Weiser apontou que as tecnologias mais importantes são aquelas que desaparecem, se integrando ao cotidiano das pessoas, até se tornarem indistinguíveis dele. Atualmente as pessoas estão vivendo essa era e a informação nunca esteve tão presente. A internet como meio de acesso à informação e as cidades como forma de geração de dados, tornou a vida mais conectada e com isso impactando diretamente na maneira de como os cidadãos utilizam seus espaços urbanos conectados. Os aparelhos móveis se tornaram tão presentes no dia a dia a ponto de influenciar na maneira de como se utiliza um determinado espaço urbano ou na escolha produtos de vestuário, na maneira como as pessoas se vestem ou se integram à sociedade. Esse ambiente se tornou tão rico ao ponto de ser possível ter informações em tempo real de um determinado espaço, orientando as informações pelo perfil que cada pessoa e ambientes têm, reunindo a melhor forma de apresentar os dados para essas pessoas, de maneira a mostrar apenas o que é útil.

É possível, por exemplo, ter acesso a detalhes destes locais, tais como: eventos, promoções, características físicas e possibilidades extras que são inerentes a eles. Essas

(16)

informações podem ser fornecidas por seres humanos como também de forma automati-zadas por sensores que geram dados em tempo real. Exemplo disso é a disponibilização de dados sobre o tempo, temperatura ou até mesmo poluição do ar num dado local. Sensores podem facilmente medir esse tipo de informação e informar com exata precisão, e em tempo real. Pessoas podem informar do que se trata o espaço, para que serve, se é cobrado ingresso para ter acesso, dentre outras referências. Os usuários podem acessar essas informações através de interfaces que conversam com os ambientes. As informa-ções dos locais podem se adequar aos usuários de forma dinâmica, podem até mostrar informações que são úteis apenas a um público específico. As interfaces se adaptam aos diferentes perfis e os ambientes mostram o que está acontecendo no momento em que ocorre, se adequando num formato mais pertinente e útil a cada situação.

1.1 PROBLEMA

A interação da sociedade a toda essa inovação e a percepção sobre as melhorias trazidas são de suma importância para que as ações realizadas sejam de fato relevantes. Oferecer à população diferentes formas de interagir, para que dessa forma se consiga extrair e usufruir da inovação gerada, é a essência de toda essa mudança. Neste contexto, se revelam demandas no desenvolvimento de interfaces, onde estas se objetivam em fornecer aos cidadãos uma maneira de interagir com a cidade, fornecendo informações em tempo real e assim auxiliando a sociedade nas suas tomadas de decisões.

Atualmente, há um grande número de cidades ao redor do mundo que desen-volvem e mantém projetos, com ferramentas próprias ou compartilhadas, na tentativa de minimizar os esforços despendidos com esse problema. O governo de Amsterdã, por exemplo, se empenhou em contribuir no desenvolvimento do que chama de City

Service Development Kit (CitySDK). O CitySDK é um sistema que coleta dados abertos

de governos, para disponibilizar de forma padronizada e em tempo real. Dentro deste projeto, a Waag Society1_{é responsável pelo domínio mobilidade. Contudo, apesar de}

contar com pesquisas neste tocante, Amsterdã ainda não disponibilizou, para seus cida-dãos, o seu city dashboard. Uma ferramenta que promete informar o que acontece na cidade, em tempo real, mas que ainda se encontra em desenvolvimento. Paralelamente a isso, A University of New South Wales (Universidade de Nova Gales do Sul) - UNSW, na Faculdade de Ambientes Construídos, foi desenvolvido o City Futures Research Centre (Centro de Pesquisa para Cidades do Futuro). Este centro acabou por se tornar referência nacional pelas suas contribuições acerca das pesquisas urbanas aplicadas. Dentre diversas contribuições por meio da pesquisa aplicada, destaca-se o seu city dashboard. Tratado

1 _{É uma organização composta de grupos de pesquisa que trabalham em conjunto com parceiros de base}

(17)

ainda em forma de protótipo, englobando um número reduzido de serviços, demonstra alguns dos resultados alcançado por este centro. O centro atua desde 2012 e se firmou como ambiente de valiosa contribuição para o planejamento urbano nacional, sendo consolidado, ainda mais, por ter sido avaliado pelo Conselho Nacional Australiano de Pesquisa. No mesmo sentido, a cidade de Gasglow, na Inglaterra, desenvolve o projeto chamado de Future City Gasglow. Um projeto que se objetiva em mostrar o potencial que é trabalhar com dados abertos gerados pelas cidades, explorando a capacidade do seu uso na criação de ideias inovadoras. Projetos como esses revelam que as cidades estão engajadas na busca por soluções mais eficazes para demandas recorrentes e cada vez mais latentes no ambiente de smarts cities.

Esses projetos, sobretudo, demonstram peculiaridades similares: buscam con-tribuir com soluções de softwares que disponibilizam dados aos seus cidadãos. Eles revelam a necessidade, que comumente é negligenciada em projetos de softwares, do processo de design centrado no usuário. Com o acentuado crescimento de soluções dirigidas por dados, o projeto focado em experiência de usuário tem se tornado cada vez mais relevante, visto que o sucesso dos projetos passam, também, pela aceitação dos seus usuários. Atualmente o desenvolvimento dos produtos digitais está focado nas tecnologias utilizadas, onde estas ditam as regras de negócio necessárias para tan-genciar o desenvolvimento dos projetos de interface de dados. Cada projeto tem seu desenvolvimento dirigido pela tecnologia que lhe suporta, e assim como o processo, os resultados são baseados na tecnologia a qual o projeto esteja ligado, e isso acaba por acarretar numa falta de padronização entre os artefatos produzidos, ou até mesmo entre outros produtos com foco análogo. Um exemplo disso está na variação dos resultados nos projetos supracitados. Eles não mantém entre si características semelhantes nem no desenvolvimento e nem nos produtos obtidos.

Conforme foi mostrado anteriormente, há um grande esforço em pesquisas, e isso acaba sendo muito custoso. Por conta disso, diversos grupos cooperam entre si na busca por avançar no mesmo sentido de criar novas soluções. A Waag Society, por exemplo, faz parte de um grupo de cooperação em pesquisas sobre soluções para cidades e já demonstra perceptíveis contribuições. Mesmo com esses aportes, há ainda muito por pesquisar, produzir e avançar. Considerando que esses projetos contribuem apenas no contexto de plataformas de dados, mas não em aplicações com intuito de apresentação de informações em interfaces digitais, revela-se uma carência em soluções neste sentido. Isso se evidencia com a produção de muitas soluções que continuam por produzir material que só servem para um contexto particular. Dessa forma, caso seja preciso construir uma nova interface a partir das existentes, é necessário despender um alto custo de produção, pois precisará realizar diversas melhorias naqueles projetos já consolidados.

(18)

1.2 Objetivos

Nesse contexto, o presente trabalho apresenta uma metodologia de trabalho que alia o uso do SmartNode Dashboard, um framework para auxiliar na criação de dashboards de informações para cidades inteligentes, a partir da junção de tecnologias front-end com a ferramenta de programação por fluxo Node-RED. Seu objetivo é oferecer às equipes de desenvolvimento de software, mais eficiência, padronização, flexibilidade, agilidade e reutilização de códigos, para construção de novos projetos de city dashboards.

1.2.1 Objetivos Específicos

Os objetivos específicos deste projeto são:

• Desenvolver templates de dashboards para cidades inteligentes utilizando Node-RED

2_{e tecnologias web front-end;}

• Aplicar o framework SmartNode Dashboard em um estudo de caso para mostrar a viabilidade da proposta;

• Avaliar com desenvolvedores a utilização do framework.

Para realizar o desenvolvimento desta proposta de trabalho, foi necessário realizar os passos a seguir:

Desenvolvimento de templates: para realização dessa etapa foi necessário o

desenvol-vimento da proposta de um framework que utilizasse tecnologias web front-end. Seu desenvolvimento possibilitou a construção de templates capazes de serem reaproveitados na plataforma Node-RED. A junção dessas tecnologias pode elevar o grau de qualidade e reusabilidade dos códigos produzidos. Assim, foi criada uma metodologia que pudesse unir as tecnologias na perspectiva de reduzir o ferramental utilizado no processo de desenvolvimento. Para tanto, foram seguidas algumas etapas para que fosse possível chegar ao resultado esperado.

• Planejamento e programação do framework com programação front-end a partir da customização do framework Bootstrap. Essa etapa foi realizada conforme demanda inicial dos parâmetros levantados a partir dos estudos sobre city dashboards;

2 _{Plataforma de programação por fluxos com foco em internet das coisas, desenvolvida pela IBM.}

(19)

• Criação do padrão de interface: planejamento e programação do padrão de interface para realizar a integração do SmartNode Dashboard. Essa fase engloba a criação de uma interface web simples, ou seja, onde apenas o esboço do layout e regras de navegação estão disponíveis. Posteriormente com a inclusão do código HTML e CSS. Por fim, a integração dessa interface com estrutura do Node-RED;

Aplicação do framework proposto: foi criado um dashboard utilizando serviços de

dados de diversas cidades espalhadas pelo mundo. A intenção era mostrar a viabilidade do uso do framework. A aplicação consistiu de dois passos:

• Criação de um conjunto de nós para utilizar dados através de um fluxo. Foi criado um conjunto de nós para demonstrar a funcionalidade do Node-RED e sua integração com as APIs de dados abertos de cidades.

• Desenvolvimento de um protótipo com funções comuns às cidades inteligentes de grande porte, demonstrando a utilização e funcionalidade dos nós no

Node-RED.

Avaliação da utilização do framework: com o intuito de validar a proposta junto aos

desenvolvedores, foi realizada uma avaliação que pudesse mensurar e concluir sobre a experiência de utilização do framework no processo de criação de painéis de dados para cidades inteligentes.

1.3 Justificativa

O desenvolvimento de novas tecnologias e métodos que facilitem o aumento de produtividade de equipes de desenvolvimento de software, sempre foi uma temática latente. Desenvolver software é uma tarefa complexa por si só, e isso foi estímulo para muitas iniciativas que foram criadas durante a história da computação. Diante disso, utilizar novas tecnologias no desenvolvimento de novos projetos vem sendo uma prática cada vez mais difundida e sua aceitação cresce desde o momento mais incipiente desse movimento. Os padrões de projetos 3_{, por exemplo, foram meios de se elevar ganhos}

na produção de software por utilizar soluções que resolviam problemas em contextos semelhantes. Atualmente, utilizar esses padrões é algo comum no meio da comunidade de desenvolvimento de software.

Diversas tecnologias surgiram com a visão de ajudar em como se cria produtos digitais. Elas nascem na busca constante por melhorar processos, produtos, métodos e a

3 _{Um padrão descreve um problema que se repete constantemente. Eles foram postulados pelo arquiteto}

(20)

cultura da comunidade de software. É de suma importância estar atento ao surgimento dessas tecnologias, de modo a lançar mão delas na busca por oferecer agilidade, perso-nalização e flexibilidade às equipes. Esse trabalho buscou unir tecnologias que surgiram com essa perspectiva, com foco voltado ao desenvolvimento de dashboards para cidades inteligentes.

1.4 Organização do Trabalho

Os capítulos subsequentes são organizados da seguinte forma: o Capítulo 2 apresenta uma revisão teórica que trata dos elementos preponderantes desta pesquisa: as smart cities e os dashboads. Ademais, mostra também alguns trabalhos relacionados e uma discussão sobre a contribuição que estes trabalhos têm sobre o desenvolvimento desta pesquisa. O Capítulo 3 traz as bases tecnológicas para o tangenciamento da criação do framework, bem do uso da metodologia proposta. Os padrões de projeto e também os padrões de interface web, assim como o Node-RED. Mostrando como estes elementos se entrelaçam para proporcionar o melhoramento no desenvolvimento de

dashboards. O Capítulo 4 apresenta o SmartNode Dashboard, sua construção, arquitetura,

possibilidades e perspectivas. Outrossim, este capítulo expõe a metodologia de uso do SmartNode Dashboard com a tecnologia Node-RED. Elencando sua metodologia de aplicação, e comparativo entre outras metodologias para criação de dashboards. No capítulo subsequente é exibido os resultados da validação de uso com programadores. Essa validação trás resultados de testes realizados com programadores para aferir se a metodologia proposta, assim como o uso das tecnologias trabalhadas, conseguem cumprir os objetivos propostos. Por fim, no Capítulo 6 traz um resgate do trabalho apresentado e suas considerações finais, assim como as contribuições e os trabalhos futuros.

(21)

20

2 CONCEITOS BÁSICOS

Este capítulo descreve conceitos centrais relacionados aos temas abordados neste trabalho, como (i) cidades inteligentes; (ii) padrões de interfaces; e (iii) node-RED, dos quais foram utilizados para dar suporte ao desenvolvimento deste trabalho.

2.1 Smart City

Com uma população que cresce tão rapidamente, as cidades acumulam inúmeros problemas que tendem a ser potencializados com esse aumento imensurável. Problemas de congestionamento do trânsito, moradia, acesso à saúde, gerenciamento de resíduos, poluição do ar, ocupação do espaço, transporte público, se tornam grandes desafios por conta da alta demanda de acesso. É nesse contexto que o conceito de cidade inteligente emerge como uma nova dimensão da gestão pública na difícil missão de solucionar esses desafios (WEISS; BERNARDES; CONSONI,2015).

O termo “Cidade Inteligente” teve seus primeiros registros no início da década de 90, contudo, apenas nos últimos anos é que as tecnologias estão sendo empregadas à sistemas de informação na integração das operações de serviços e infraestrutura urbana (FALCÃO; BAPTISTA; MENEZES,2012). Esse termo foi cunhado a fim de conceituar o fenômeno de desenvolvimento das cidades que cada vez mais se tornavam dependentes de tecnologia, inovação e globalização, principalmente em uma perspectiva econômica (RIZZON et al., 2017). Para Leem e Kim (2013), o fator central para mudança dos paradigmas das cidades está relacionado diretamente com as TICs. A grande utilização das TICs nas cidades, na busca por promover melhorarias estruturais e que consiga entregar, de forma precisa e dinâmica, comodidade aos cidadãos, vários autores indicam que uma Smart City pode ser definida principalmente, pelo amplo emprego de TICs em infraestruturas tradicionais, bem como para melhorar a participação ativa de capital humano e social (RIZZON et al.,2017). Essa noção está intimamente ligada à economia do conhecimento, às mudanças na aglomeração espacial e ao desenvolvimento urbano baseado no conhecimento (MACKE et al.,2018). De uma forma simples, o conceito de

smart cities, ou cidades inteligentes, pode ser definido pelo amplo uso das tecnologias

com intuito de melhorar a infraestrutura das cidades e transformar os centros urbanos em locais mais eficientes e melhores de se viver.

Esse é um ambiente extremamente rico para novas experiências, onde o uso intensivo de tecnologias de comunicação e informação está intimamente ligado ao contexto, se tornando parte da gestão urbana, focadas nas ações sociais onde os dados

(22)

Capítulo 2. CONCEITOS BÁSICOS 21

são os fatores preponderantes que orientam essas estratégias. Dessa forma, os projetos das cidades integram três principais áreas: Internet das Coisas (IoT); Big Data e a governança por algoritmos, onde o planejamento está baseado em ações apoiadas por algoritmos. O intuito maior é a geração de condições que enfoquem sustentabilidade, melhoria das condições para as populações e incentivo a geração de uma economia criativa pela gestão baseada em análise de dados.

Leem e Kim(2013) esclarecem que as cidades podem ser classificadas conforme o nível de tecnologias que são empregadas em seus espaços, e assim poderiam ser categorizadas em quatro diferentes nomenclaturas:

• Digital City: refere-se a uma comunidade conectada que combina infra-estrutura de comunicações de banda larga; uma infraestrutura de computação flexível, orientada a serviços, baseada em padrões abertos da indústria; e serviços inovadores que atendam às necessidades dos governos e seus funcionários, cidadãos e empresas. • Intelligent City: são definidas como territórios que trazem sistemas de inovação

e TICs dentro da mesma localidade, combinando a criatividade de indivíduos talentosos que compõem a população da cidade, instituições que melhoram a aprendizagem e inovação e espaços de inovação virtual facilitando a inovação e gestão do conhecimento.

• Smart City: se destaca pelo uso de tecnologias de computação inteligente para tornar os componentes e serviços de infraestrutura crítica de uma cidade (admi-nistração municipal, educação, saúde, segurança pública, imóveis, transporte e serviços públicos) mais inteligentes, interconectados e eficientes.

• Ubiquitous City: caracteriza a cidade totalmente equipada com redes através das quais as autoridades municipais do governo, central e local, podem monitorar quase tudo o que está acontecendo na cidade. Um exemplo disso é o monitoramento do trânsito, prevenção de crimes e incêndio. Além disso, os usuários tem a capacidade de acessar os serviços da rede de qualquer lugar.

O conceito de smart city é geralmente integrado ao uso de Tecnologia de Informa-ção e ComunicaInforma-ção, especialmente na infraestrutura para monitoramento, gerenciamento e tomada de decisão (SUAKANTO et al.,2013;BARNS,2018). Esse conceito está for-temente ligado a forma como as pessoas utilizam as informações para organizar suas tarefas diárias, consumir informação ou até mesmo tomar decisões. Está intimamente relacionado ao uso de tecnologias que facilitam o acesso aos dados proveniente das cida-des. Dados sobre o trânsito, que ajudam a cidadãos orientar-se sobre que rota tomar para ir às suas casas no retorno do trabalho, informações de promoções sobre algum assunto de interesse baseado na sua localização, ou até mesmo suas preferências, previsão do

(23)

tempo para determinada região, são exemplos de como a população está ligando suas vidas aos dados gerados pelas cidades.

2.2 Dashboard

O atual volume de dados e informações coletadas, armazenadas, compartilhadas e usadas nos centros urbanos, são quase ilimitados (KOURTIT; NIJKAMP, 2018). Os dados oriundos do monitoramento das cidades podem ser sumarizados numa estrutura e disponibilizados para a visualização, servindo como ferramenta de tomada de decisões. Esses dados podem ser alimentados em diversas formas de fontes, espalhadas por uma cidade, que podem registrar informação e enviar para uma base concentradora de dados. A informação sobre previsão do tempo, poluição do ar, o nível das águas dos rios, indicador econômico, até mesmo as condições do tráfego, podem ser exibidas num único painel (SUAKANTO et al., 2013). Kourtit e Nijkamp (2018) explicam que um

dashboard é uma ferramenta de gerenciamento estratégico que usa fatores críticos de

sucesso e indicadores-chave de desempenho para traduzir a missão e a estratégia de uma organização em um conjunto equilibrado de medidas de desempenho integradas à ações concretas relacionadas. A Figura1ilustra um dashboard com informações resumidas a partir de dados gerados e tratados anteriormente.

Figura 1 – Dashboard com resumo de informações

Fonte: https://dribbble.com/shots/3768342-Robo-Advisor-Web-App/attachments/848451

(24)

dashbo-Capítulo 2. CONCEITOS BÁSICOS 23

ards, ainda há muitas incertezas sobre como criar essas interfaces interativas para tomada

de decisões. Na maioria dos casos, as decisões sobre a concepção do design do painel é baseado em circunstâncias específicas ou julgamento pessoal dos tomadores de decisão, culminando numa falta de consistência. Com a grande utilização dos aparelhos móveis, que dispõe de capacidade de processamento análoga aos computadores pessoais, os indivíduos estão gradualmente mais habituadas a estes dispositivos, empregando-os nas atividades mais triviais do dia a dia. A forma como esses sujeitos acessam informações está extremamente diversificada, o que obriga a criação de novas facetas nas tecnologias de disponibilização de informações. Isso mostra que os dashboards digitais se tornaram uma constante nas nossas vidas digitais (BARNS,2018).

A utilização dos dashboards deve ocorrer quando é necessário fornecer uma visão geral de alto nível dos dados que permita descobrir tendências viáveis. Eles fornecem informações em tempo real sobre o estado das métricas mais importantes de um deter-minado sistema. Assim, a disponibilização desse tipo de ferramenta, para orientar os cidadãos, de forma simples, é uma decisão que requer planejamento prévio sobre que tipo de interface é mais adequada num determinado contexto.

2.2.1 Tipos de Dashboards

Existem 3 tipos mais comuns de dashboards, cada um desenvolvido com um propósito específico. São eles:

Dashboards operacionais : exibem informações que facilitam as operações do dia a dia de uma empresa. Os objetivos comuns podem ser monitorar o tempo de atividade do servidor, as vendas diárias, as chamadas diárias feitas ou os compromissos reservados. Painéis operacionais tornam-se o coração do negócio e geralmente exigem dados em tempo real ou quase em tempo real.

Dashboards estratégicos e executivos : exibe KPIs (Key Performance Indicators) impor-tantes, que as equipes executivas rastreiam periodicamente - diariamente, semanal-mente ou mensalsemanal-mente. O painel estratégico se concentra em fornecer uma visão geral de alto nível do estado do negócio e aborda as principais mudanças que o negócio cria. Exemplos de KPIs comuns podem ser a receita (em comparação com o período anterior), os custos (em comparação com o período anterior), o pipeline de vendas etc.

Dashboards analíticos : exibe dados operacionais ou estratégicos - ou ambos. O painel analítico oferece funcionalidades de detalhamento, permitindo que os usuários explorem dados em maiores detalhes.

(25)

2.2.2 Projetos de Dashboards

Atualmente há diversos trabalhos sendo desenvolvidos com foco na apresentação de dados de cidades inteligentes. Londres, Boston, Dublin, Madrid, Macedônia, Amsterdã tem se engajado no desenvolvimento de ferramentas para criar e manter city dashboards. Há grande diversidade entre eles e suas propostas de interface são bastante heterogêneas. Apesar essa grande variação, todos tem o mesmo propósito, exibir dados sumarizados. Nessa seção são apresentados e discutidos trabalhos que abordam o tema central desta pesquisa.

2.2.2.1 Londres e outras cidades do Reino Unido

O CityDashboard (nomenclatura dada ao projeto inglês) foi criado para dar suporte às principais cidades do Reino Unido e foi desenvolvido por pesquisadores do Centro de Análise Espacial Avançada da University College London - UCL. Ele resume dados quantitativos vindo de fontes oficiais ou por meio de cooperação voluntária, das principais cidades do Reino Unido (Londres, Cardiff, Edimburgo, Glasgow, Manchester, Leeds, Birmingham e Newcastle). Este projeto é atualmente considerado uma referência entre a maioria dos projetos e casos de estudo, para este tema. A Figura2mostra esse projeto em duas fases. A primeira (projeto original), lado esquerdo, é a interface idealizada pelo projetista de interfaces. A segunda, lado direito, é a interface implementada com dados reais.

Das características mais relevantes deste projeto, seu padrão modular se destaca. Ele é projetado para se adaptar conforme a tecnologia que dá suporte aos dados, se expandindo quando é necessário. Por exemplo, caso as cidades que dispõe apenas de módulos básicos, quiser incluir mais informações sobre determinado parâmetro (ou novos), o projeto consegue se adaptar. A cidade de Londres, atualmente é a cidade que contém mais módulos e é a interface que mais se aproxima do projeto de tela original completa (onde todos os parâmetros projetados podem ser vistos, Figura 2, lado esquerdo). As demais cidades contam com módulos mais genéricos e por isso o

dashboard mostra apenas alguns poucos dados.

Um ponto negativo a ser destacado é que a interface criada para este dashboard não foi planejada para dar suporte a outros tipos de telas, além do desktop. Esse é um aspecto que vai na contramão da evolução das tecnologias móveis e da experiência do usuário. Apesar de ter sido criado em 2012, esse projeto não evoluiu seus padrões de interface.

(26)

Figura 2 – Projeto CityDashboard projetado para cidades do Reino Unido Fonte: http://oobrien.com/2012/04/citydashboard/

2.2.2.2 Sydney

O projeto de Sydney4_(Figura₃_{) aborda elementos visuais mais modernos que o}

anterior. Assim como o dashboard da UCL, esse também foi desenvolvido num centro de pesquisa. Ele faz parte do projeto City Futures, centro de estudos em ambientes construídos da Universidade USNW5_Sydney.

Figura 3 – Projeto CityDashboard projetado para Sydney Fonte: http://citydashboard.be.unsw.edu.au/

Este projeto se destaca dos outros city dashboards por oferecer uma característica de layout fluído e que se adapta a diferentes telas, sobretudo em aparelhos celulares.

4 _{http://citydashboard.be.unsw.edu.au/} 5 _{https://www.unsw.edu.au/}

(27)

Apesar de contar com esse aspecto de adaptabilidade, vários de seus elementos não se ajustam adequadamente em telas menores. Os elementos são ajustados de forma a esticar o item para encaixar em espaços projetados. O mesmo acontece com as tabelas, que precisam ficar exageradamente comprimidas nas telas menores, fazendo com que seja necessário suprimir alguns dados, por não caber no espaço da tela.

2.2.2.3 Amsterdã

O City Dasboard6 _(Figura ₄_{) de Amsterdã é um esboço ainda em construção.}

Apesar de já está em desenvolvimento há algum tempo, a sua primeira versão ainda não foi lançada. Ainda assim, a sua interface e informações sobre o funcionamento já podem ser acessadas na página oficial do projeto. Ele utiliza os dados abertos dispo-nibilizados pela cidade e sua visualização pode ser realizada em tempo real. Outras cidades podem utilizar esse projeto com a mesma interface. Ele utiliza como background de pesquisa a dados a API CitySDK Linked Data7_{, que pode tornar os dados em fontes}

pesquisáveis e disponíveis sob demanda. Apesar de ser possível reaproveitar a interface e replicar em outras cidades, essa replicação não contempla as diversas diferenças contidas nas cidades. Onde cada centro urbano tem sua particularidade e demanda que suas nuances sejam consideradas. A adaptação a diferentes tipos de centros é um aspecto importante e fundamental para que os projetos, assim como esse, possam ser facilmente reaproveitados.

Figura 4 – Projeto CityDashboard projetado para Amsterdã Fonte: https://waag.org/en/article/city-dashboard-amsterdam

Essa seção mostrou alguns projetos de City Dasboards criados para as cidades do Reino Unido, Sydney e Amsterdã. Há ainda diversos outros projetos espalhados ao redor

6 _{http://citydashboard.waag.org/}

7 _{Uma API para a distribuição e anotação de dados abertos, para pequenas cidades ou até grandes áreas}

(28)

do globo que revelam inúmeras diferenças entre si, mas que seguem na mesma direção. Alguns apenas mostram dados de forma sintética, sem o ideal de envolver o usuário no processo ou de oferecer informação relevante. Nessa perspectiva, a escolha dos projetos supracitados foi embasada na oferta de informações que sejam relevantes aos cidadãos.

Os projetos apresentados nessa seção se assemelham em diversos aspectos. In-formações de dados como: saúde, transporte, recursos naturais, dentre outros; são recorrentes nessas interfaces. Isso é comum pelo fato de que os cidadãos necessitam basicamente dos mesmos tipos de serviços. Desse modo, é natural apresentar esses parâmetros em tela. Contudo, mesmo mantendo os elementos comuns, cada cidade se difere uma da outra, por diversas questões, e por isso um projeto que foi pensado para um tipo de urbe pode não servir a muitas outras ou até mesmo nenhuma outra. Esse é um fator que norteou o presente trabalho durante todo o percurso de análise. Cada projeto tem como característica ou objetivo, sanar problemas de um determinado con-texto. O SmartNode Dashboard, proposto na Seção 4, tem como principal característica a adaptação a diversos tipos de situações diferentes. Por se tratar de um projeto de código aberto, a própria comunidade de desenvolvimento de software pode contribuir e se engajar na evolução dele.

2.3 Padrões

ParaCybis, Betiol e Faust(2015), "padrões se referem aos problemas mais comuns e às boas soluções para esses problemas, que são capturadas, compartilhadas e reuti-lizadas por profissionais atuando no projeto de diversos tipos de produtos e serviços". Seu uso aumenta a eficiência não somente na etapa de programação, mas também na utilização, onde oferece aos usuários usabilidade na interação com o sistema. O arquiteto Christopher Alexander afirmou que um padrão descreve um problema e norteia a solução de modo que se possa utilizar esta solução inumeráveis vezes sem nunca fazê-la da mesma forma (GAMMA et al., 2000). Gamma et al. (2000) corrobora a asserção do arquiteto e explica que, apesar de Alexander relacionar suas proposições ao contexto da arquitetura, o cerne para ambos os tipos de padrões está a solução para um problema num determinado contexto.

2.3.1 Padrões de Projetos

Na Engenharia de Software, os padrões de projeto são soluções bem estruturadas para problemas frequentes, dentro de um contexto específico.Leite(2005) explica que:

"Uma coisa que os projetistas avançados sabem que não devem fazer é resolver cada problema a partir de princípios elementares do zero. Ao

(29)

invés disso, eles reutilizam soluções que funcionaram no passado, e que as utilizam repetidamente em seus projetos".

Dessa forma, os problemas recorrentes, que já contam com soluções testadas, são reaproveitados num momento futuro, resolvendo um outro problema num contexto semelhante. O foco por trás disso é não necessariamente reaproveitar o código criado para

um problema e utilizá-lo em uma nova situação, mas o aproveitamento de soluções de projetos de uma maneira geral.

2.3.2 Padrões de Interface Web

Para a equipe que deve desenvolver novos produtos, os padrões são uma forma de reduzir tempo no processo de desenvolvimento. Além de terem maior consistência e menor risco em violar os padrões de interface, a cultura de padronizar eleva a qualidade dos artefatos construídos. A adoção dos padrões de interface permitem:

• Minimizar o tempo e esforço de design;

• Aumentar a qualidade das soluções de design;

• Auxiliar na comunicação entre designers e programadores.

Cybis, Betiol e Faust (2015) explicam que diversas bibliotecas de padrões de projeto de interfaces estão disponíveis pela web. Esses conjuntos de padrões são úteis para ajudar os projetistas como fonte de inspiração e pesquisa, quando é necessário projetar um determinado recurso ou elemento da interface. Dentre essas bibliotecas, as mais utilizadas são:

• Ui Patterns, disponível em: http://ui-patterns.com/;

• WELIE Interaction Design Patterns, disponível em: http://www.welie.com; • Patternry, disponível em: http://www.patternry.com/;

• ZURB Library, disponível em: http://patterntap.com/library; • Designing Interfaces: Patterns for Effective Interection Design,

disponível em: http://designinginterfaces.com/;

Do ponto de vista de quem interage com a interface, os padrões podem proporci-onar níveis superiores na intuitividade e facilidade de uso para usuários intermediários e avançados. Harley(2017) explica que experiências passadas e práticas repetidas in-formam expectativas aos usuários. Desvios da rotina aprendida levam os usuários a

(30)

enganos. Ao manusear uma interface que já foi utilizada antes, um usuário irá reco-nhecer padrões, essa é a parte que nos permite executar processos complicados sem esforço consciente à medida em que praticamos esse processo. A reprise de uma ação -idealmente do mesmo modo a cada vez - é como aprendemos e guardamos essa ação em nossa memória processual. As variadas formas como os usuários têm para interagir com uma interface, tomar uma ação específica (ou conjunto de ações) e obter o mesmo resultado, servem para reforçar o padrão e consolidá-lo em nossa memória (HARLEY,

2015). A mudança dos padrões quebram as expectativas dos usuários, fazendo com que seja necessário reaprender uma interface que já havia sido desmistificada anteriormente, gerando uma maior esforço cognitivo. Segundo uma lei de usabilidade criada por Jakob Nielsen, intitulada Lei de Jakob sobre a experiência do usuário na Web (Jakob’s Law of

the Web User Experience), os usuários passam a maior parte do tempo navegando em

diferentes sites. Dessa forma, qualquer coisa que seja uma convenção e usada na maioria dos outros sites, será gravada na memória destes usuários e o custo para desviar-se delas é ser penalizado com grandes problemas de usabilidade para seu site (NIELSEN,1999).

Nielsen(2004) explica que é preciso eliminar elementos de design que causam confusão e procurar mover-se o máximo possível para o campo das convenções de design. Não só isso, é preciso estabelecer padrões de projeto para todas as tarefas importantes da interface. Os padrões podem garantir aos usuários:

• saber quais recursos esperar;

• saber como esses recursos serão exibidos na interface; • saber onde encontrar esses recursos no site e na página; • saber como operar cada recurso para atingir seu objetivo;

• não precisem ponderar sobre o significado de elementos de design desconhecidos; • não percam recursos importantes por ignorar um elemento de design fora do

padrão; e

• não terem surpresas desagradáveis quando algo não funciona como esperado. Esses benefícios aumentam o senso de domínio dos usuários sobre o site, au-mentam sua capacidade de realizar tarefas e auau-mentam sua satisfação geral com a experiência.

2.3.2.1 Consistência de Padrões

ParaNielsen(1995), os usuários não devem se perguntar se palavras, situações ou ações diferentes significam a mesma coisa. Sua responsabilidade é eliminar ao máximo

(31)

a frustração oriunda de comportamento inesperado e/ou que não foram claramente informados pelo sistema. É necessário assegurar a consistência da interface com o modelo conceitual embutido no sistema (BARBOSA; SILVA,2010). Dessa forma, ao lançar mão de tecnologias que utilizam padrões, é possível conceber projetos mais qualificados e que têm menor tendência em confundir seus usuários.

2.3.2.2 Cards

Os padrões de interface tem diversas aplicações. Elas implicam numa determinada forma de visualizar conteúdo ou até mesmo como um determinado grupo de elementos devem se comportar numa dada situação. Os cards (cartões), por exemplo, constitui um grupo de padrões de interface do tipo conteúdo. Eles são usados para exibir conteúdo de forma detalhada ou num formato específico. Um card pode conter apenas imagens, imagens com textos, apenas textos ou apenas um link. Apesar de sua versatilidade em poder ser manipulado de diversas formas, o seu formato mais tradicional, geralmente, é composto dos seguintes tipos de mídias: título, imagem, breve resumo e um botão de ação.

Uma das características mais importantes acerca dos cartões é sua capacidade de ser manipulado quase infinitamente. Eles podem ser virados para revelar mais informa-ções, empilhados para economizar espaço, dobrados para um resumo - e expandidos para mais detalhes, classificados e agrupados. Sua versatilidade é ideal para uso em diversas plataformas de renderização, tais como: smartphones, tablets, notebooks, desktops, dentre outros. Na Figura5, o dashboard composto por cards, mostra como este padrão pode ser

Figura 5 – Exemplo de dashboard utilizando cards como padrão de interface Fonte: https://dribbble.com/shots/3768342-Robo-Advisor-Web-App

(32)

31

3 BASE TECNOLÓGICA

Esse capítulo procura apresentar a base tecnológica em que este trabalho se utilizou para desenvolver o SmartNode Dashboard, bem como a metodologia de uso de criação de dashboards utilizando a plataforma Node-RED.

3.1 CSS

A finalidade das CSS é oferecer um mecanismo de estilizar o conteúdo das linguagens de marcação. No presente contexto, a linguagem de marcação, HTML, será o responsável por estruturar o documento de conteúdos e o CSS irá realizar a tarefa de configurar a aparência do documento.

3.1.1 Características

CSS é capaz de estilizar uma página web de forma padronizada, fornecendo mais funcionalidades com um número reduzido de instruções. Entre as principais vantagens, é possível destacar:

• Facilidade de manutenção: é possível atualizar um projeto inteiro com poucas alterações no código de estilo. O efeito que é produzido em cascata faz com que todos os projetos que utilizem o recurso de estilo, seja afetado de igual forma; • Separação dos documentos de formatação e estilo: é possível um documento

referenciar um documento de estilo, dessa forma é possível reaproveitar o mesmo código CSS em diversos projetos diferentes.

3.2 Frameworks

Um framework pode ser definido como um conjunto de conceitos para resolver problemas de um determinado contexto (CAY,2007). No desenvolvimento de software, o

framework consiste de uma abstração que é constituída de vários códigos pré-formatados

que tem por filosofia promover uma funcionalidade padronizada. Eles capturam as funcionalidades comuns a várias aplicações e fornecem a reutilização de código e padrões de design.Monteiro (2002) faz uma definição de framework dentro do contexto

(33)

Capítulo 3. BASE TECNOLÓGICA 32

de padrões de projetos. Para ele, podemos ver um mecanismo como um padrão de projeto de forma aplicada a um conjunto de classes e um framework é um padrão de arquitetura que fornece um modelo extensível a qualquer aplicação dentro de um domínio específico. Essa visão pode ser útil quanto a utilização e reutilização de um framework, onde é possível a evolução de padrões já implementados, na forma de especialização, por conta de uma necessidade específica dentro de um projeto. Cay(2007) explica que isso acontece devido a necessidade que cada projeto pode apresentar, e dessa forma um programador pode criar uma funcionalidade nova no domínio do problema, bastando para isso estender as classes do framework. Essa abordagem pode ser aplicada a diversos domínios de problemas e em outras tecnologias. Esse mesmo tipo de abstração, de orientação a objetos, pode ser aplicada no contexto das linguagens de marcação, como é o caso de projetos escritos em CSS.

3.2.0.1 Frameworks Front-end

Os frameworks front-end tem seu foco voltado para o desenvolvimento de in-terfaces web, ou que seja executado por meio do auxílio de um navegador. Há ainda a possibilidade de diversificar sua finalidade baseando-se nos objetivos intrínsecos ao qual foi projetado. Um exemplo disso são os projetos focados apenas na construção de artefatos para dispositivos móveis, outros que tem a única finalidade de formatar o grid, ou aqueles projetados para suprir demandas do desenvolvimento em dispositivos de impressão. Estes são frameworks menos comuns, haja visto que a maioria abarca uma grande variedade de dispositivos, e assim se tornam mais interessantes aos desenvolve-dores, que não precisam procurar vários projetos para cada demanda específica. Assim como nos frameworks desenvolvidos em linguagens de programação, utilizando a ideia de design patterns, estes bebem da mesma fonte, buscando abstrair os fundamentos básicos e aplicando de forma a solucionar os problemas deste domínio próprio.

Esses frameworks front-end se tornaram muito populares em agosto de 2011, quando houve uma primeira publicação do projeto Twitter Bootstrap8_._Otto₍₂₀₁₂_{) define}

o Bootstrap como sendo um kit de ferramentas de front-end de código aberto criado para ajudar designers e desenvolvedores a construir de maneira rápida e eficiente coisas incríveis on-line. O Bootstrap é um projeto desenvolvido pela equipe do Twitter, original-mente chamado de Twitter Blueprint e sua ideia principal era servir como instrumento para incentivar os projetistas e programadores a trabalhar com mais consistência no desenvolvimento de projetos de interface web (SILVA,2015).

Atualmente há um número vasto de frameworks disponíveis na internet.Gerchev

(2018), Arsenault(2018), Anand(2017) apontam que entre os mais populares podemos

(34)

destacar os projetos mostrados na Tabela 1.Silva(2015) defende que a utilização de um

Tabela 1 – Lista com os principais frameworks front-end do mercado Nome Criador Popularidade

(es-trelas no Github)

Versão Ano

Bootstrap Mark Otto e Jacob

Thornton

125.353 4.0 2011

Foundation Zurb 27.383 6.0 2011

Pure CSS Yahoo 18.710 1.0.0 2013

Semantic UI Jack Lukic 41.651 2.2 2013

UI Kit YOOtheme 11.604 3.0.0 2013

framework front-end ajuda a aumentar a flexibilidade na codificação, além de oferecer

vários componentes de design flexíveis, com documentação robusta. Isso ajuda tanto na manutenibilidade, quanto na evolução dos projetos. Recorrer a esse tipo de estrutura, torna o desenvolvimento front-end acentuadamente mais rápido e menos complexo, sobretudo garantindo mais conformidade ao código produzido.

Arsenault (2018) destaca que a escolha de um framework front-end não deve ser baseada em sua popularidade, essa decisão precisa ser focada na conformidade da estrutura com necessidade do desenvolvimento de cada projeto em questão. Todos os

fra-meworks listados anteriormente implementam diversos padrões de interface, utilizando

para isso código HTML e CSS.

3.2.1 Templates de Interface Web

Kalbach(2009) define templates como sendo coleções de arranjos de mecanismos de navegação pré-definidas. É desejável que para projetos grandes ou que envolvam muito trabalho, a sistematização de regras que gerenciem como a navegação e conteúdo são mostrados, seja empregada para que o projeto apresente consistência. Esse tipo de abordagem garante que os módulos terão o comportamento previsível, conforme foram projetados. A Figura6mostra o funcionamento de um template web.

Conforme a Figura6ilustra, há uma estrutura pré-definida que recebe dados e é processada pelo Template Engine que tem a responsabilidade de fundir o modelo e os dados, e posteriormente gerar o documento visual como produto resultante desse processo.

Essas estruturas também permitem que seja possível reutilizar módulos, facili-tando e reduzindo o trabalho com implementação. Isso acontece porque não é necessário nem redesenhar e nem reprogramar módulos comuns, ao invés disso é possível utilizá-los novamente sempre que preciso (KALBACH,2009;ZANETTE,2014).

(35)

Figura 6 – Funcionamento de um template

3.3 Node-RED

O Node-RED é uma ferramenta para conectar virtualmente os dispositivos, APIs e serviços online. Ele fornece um editor baseado em fluxo, com interface em navegador web, que facilita a tarefa de conectar os fluxos apenas arrastando e soltando os nós (KIRAN et al.,2017).Kiran et al.(2017) destaca que o ponto mais interessante dessa ferramenta se concentra no tempo de execução leve, pois é construído sobre o Node.js, e por isso aproveita ao máximo o modelo não bloqueante e orientado a eventos que esta tecnologia oferece. Originalmente desenvolvida pela equipe de Serviços de Tecnologia Emergentes da IBM e, posteriormente, tornou-se tecnologia de código aberto, atualmente mantida pela Fundação JS (KODALI; MANDAL; HAIDER,2017).

3.3.1 Nós

Os nós consistem, geralmente, em um par de arquivos: (i) um arquivo JavaScript, que é responsável por definir a funcionalidade do nó, ou seja, toda programação do nó fica nesse arquivo; e (ii) arquivo HTML, para a definição das propriedades, edição da

(36)

Figura 7 – Tela principal do Node-RED com exemplo de fluxo de dados

caixa de diálogo e o texto de ajuda. O nó é empacotado como um módulo npm9_através

de um arquivo package.json. A Figura8mostra os arquivos presentes em um nó.

Figura 8 – Representação dos arquivos de um nó no Node-RED

3.3.1.1 Tipos de nós existentes

No Node-RED cada nó é desenvolvido com uma finalidade. Eles podem ser subdi-vididos em três tipos distintos: entrada, processamento e saída.

9 _{NPM é a abreviatura para Node Package Manager. Ele pode ser utilizado para representar o repositório}

online para publicação de projetos de código aberto para o Node.js, além de ser um utilitário de linha de comando responsável por interagir com o repositório e instalar dependências.

(37)

Nó de entrada (inputs): são responsáveis pela entrada de dados em uma aplicação.

Assim sendo, todos os nós que lidam com a entrada de dados a partir de fontes externas, são categorizados como nós de entrada;

Nó de processamento (functions): são as funções que manipulam dados oriundos

pe-los nós de entrada. Esses são os nós mais comuns, pois eles processam e disponibi-lizam estes dados para uma determinada saída;

Nó de saída (outputs): são responsáveis pela saída dos dados, ou seja, externaliza os

dados tratados para um outro meio.

3.3.1.2 Criação de novos nós

Antes de criar um nó, é recomendado uma versão 5.0 ou superior da máquina virtual do Node.js instalada. Conforme é mostrado na Figura8, um nó é composto de três arquivos. Para ilustrar o processo de criação de um nó, é descrito os passos básico para concepção do OnibusNatal (um nó para recuperar dados dos ônibus da cidade de Natal). Esse exemplo é mostrado a seguir, com as funcionalidades básicas que devem conter na criação de um nó:

• package.json: este é um arquivo padrão usado pelos módulos Node.js para

descre-ver seu conteúdo e o Node-RED segue esse mesmo padrão. Para gerar esse arquivo, a documentação oficial indica a utilização do prompt, usando o seguinte comando:

npm init. Na sequência é necessário responder uma série de perguntas para ajudar

na criação do conteúdo inicial deste arquivo de configuração. O resultado final deverá se parecer com a Figura9.

Ele informa, em tempo de execução, quais arquivos o módulo contém. Essa es-trutura de documento é uma eses-trutura básica que um package.json deve conter, contudo é possível obter mais informações sobre configurações extras e outras propriedades que podem ser definidas antes de publicar o nó. Para isso basta consultar o guia de pacotes, disponível no site oficial.

• onibus-natal.js: O Node-RED empacotado o nó como um módulo Node.js. O módulo

exporta uma função que é chamada quando o nó é carregado na inicialização. A função é chamada com um único argumento,RED, que fornece acesso do módulo

ao Node-RED runtime API. O próprio nó é definido como uma função, OnibusNatal(), que é chamada sempre que uma nova instância, sua, é criada. É então passado um objeto contendo as propriedades específicas, definidas no editor de fluxo. A função chama a função RED.nodes.createNode para inicializar os recursos compartilhados por todos os nós. Posteriormente o código específico dele permanece.

(38)

Figura 9 – Código gerado após a configuração do package.json via linha de comando. Fonte: Adaptado do site oficial do Node-RED

Figura 10 – Código gerado após a criação do onibus-natal.js para o nó. Fonte: Adaptado do site oficial do Node-RED

Nessa instância, o nó registra um ouvinte (listener) no evento de entrada, que é chamado sempre que uma mensagem chega ao nó. Dentro desse ouvinte, ele altera o payload para minúscula, em seguida, chama a função enviar (send) para transmitir a mensagem no fluxo. Finalmente, a função OnibusNatal() é registrada em tempo de execução usando o nome do nó, onibus-natal. Se o nó tiver al-guma dependência de módulo externo, elas deverão ser incluídas na seção de dependências do arquivo package.json. A Figura 10mostra o resultado do arquivo onibus-natal.js.

• onibus-natal.html: Como já foi descrito anteriormente, esse arquivo tem a

(39)

contém três partes distintas, sempre envolvidas entre as tags <script>.

– A definição principal do nó, registrada no editor. Ela indica informações como:

categoria da paleta, as propriedades editáveis e ícone a ser utilizado.

– Modelo de edição que define o conteúdo da caixa de diálogo de edição

do nó. Ele é definido dentro de um <script> do tipo text/x-red com o data-template-namedefinido para cada tipo de nó.

– Texto de ajuda que é mostrado na barra lateral de informações. Ele é

defi-nido dentro de um <script> do tipo text/x-red com o data-template-name configurado para cada tipo de nó

Para ilustrar a descrição realizada nessa seção, a Figura 11mostra o código para editar a propriedade nome, do nó.

Figura 11 – Código gerado após a criação do onibus-natal.html para o nó. Fonte: Adaptado do site oficial do Node-RED

Essa seção mostrou, ainda que de forma sucinta, a sequência para criação de um nó. Ainda que de forma simples, é o processo que deve ser seguido para construir um nó em Node-RED. Para mais informações sobre o funcionamento e a documentação

(40)

completa, é importante acessar a página oficial. Outras propriedades e funcionalidades podem ser inseridas e proporcionar a criação de nós mais complexos e funcionais.

3.3.2 Fluxos

A programação no Node-RED acontece através da conexão de nós. Obrigatoria-mente, é preciso de um nó de entrada e um nó de saída. O nó de entrada é responsável por iniciar a aplicação. Enquanto o nó de saída é responsável por realizar a saída do processamento dos dados. Geralmente uma aplicação é desenvolvida utilizando os três nós, gerando uma estrutura de fluxo com entrada, processamento e saída. A junção dos nós, organizados numa sequência de funcionamento, trabalhando em conjunto para obter um determinado resultado, é considerado um fluxo. Os dados seguem a estrutura desenhada pelo fluxo, ao longo dos nós, percorrendo cada ponto, onde este é responsável por uma ação isolada ou uma conjunto de ações. A Figura12ilustra o funcionamento de um fluxo de dados simples.

Figura 12 – Exemplo do fluxo de dados no Node-RED

Por ter o desenvolvimento baseado em fluxos de dados, o Node-RED reduz a complexidade no desenvolvimento de projetos de software. Através da sua interface de editor, baseada em navegador, é possível realizar a conexão entre os nós, usando uma coleção de nós na paleta. Eles podem ser inseridos em tempo de execução, de forma rápida e dinâmica, através de poucos cliques.

Os fluxos criados no Node-RED são armazenados usando o formato JSON, que podem ser facilmente importados de outras fontes ou exportados para compartilhamento com outros desenvolvedores.