Universidade Federal de Santa Maria
Ci. e nat., Santa Maria, V. 42, Special Edition, e42, 2020
DOI: http://dx.doi.org/10.5902/2179460X40646
Received: 10/10/2019 Accepted: 10/10/2019
Special Edition
Aplicativo Móvel Multiplataforma Para Um Sistema de Medição de Energia Residencial
Multiplatform Mobile App For A Residential Energy Metering System
Eduardo Dornelles Silveira1
Andrei da Cunha Lima1
Diones Varga Dutra 1
Alencar MachadoIV
Vinícius MaranV
I Universidade Federal de Santa Maria – Laboratório de Computação Ubíqua, Móvel e Aplicada (LUMAC), Cachoeira do Sul, Brasil- eduardodornellessilveira@hotmail.com
II Universidade Federal de Santa Maria – Laboratório de Computação Ubíqua, Móvel e Aplicada (LUMAC), Cachoeira do Sul, Brasil - cunhalimaandrei1@gmail.com,
III Universidade Federal de Santa Maria – Laboratório de Computação Ubíqua, Móvel e Aplicada (LUMAC), Cachoeira do Sul, Brasil - diones.de@redes.ufsm.br
IV Universidade Federal de Santa Maria – Colégio Politécnico, Santa Maria, Brasil - alencarcomp@gmail.com
V Universidade Federal de Santa Maria – Laboratório de Computação Ubíqua, Móvel e Aplicada (LUMAC), Cachoeira do Sul, Brasil - vinicius.maran@ufsm.br
Resumo
Este artigo apresenta o desenvolvimento de uma aplicação para a visualização de dados coletados e controle de um protótipo de tomada inteligente (SmartSocket). A aplicação projetada neste trabalho tem como objetivo oferecer mobilidade e melhorar a usabilidade. Seguindo estes princípios, a aplicação foi desenvolvida para dispositivos móveis e é compatível com as plataformas Android e iOS. A aplicação utiliza o framework Ionic, juntamente com Angular, enquanto a aplicação de back-end foi desenvolvida na linguagem Python. A avaliação da aplicação desenvolvida mostrou que é possível analisar, interpretar e exibir ao usuário informações relevantes sobre a tomada inteligente.
Palavras-chave: Aplicação Mobile; Desenvolvimento multiplataforma; Tomada inteligente
Abstract
This paper presents the development of an application for visualizing collected data and controlling a SmartSocket prototype. The application designed in this work aims to provide mobility and improve usability. Following these principles, the application is designed for mobile devices and is compatible with Android and iOS platforms. The application uses the Ionic framework along with Angular, while the backend application was developed in Python language. The evaluation of the developed application showed that it is possible to analyze, interpret and display to the user relevant information about the smart socket.
Keywords: Mobile application; Multiplatform development; Smart outlet
1. Introdução
Visando uma proposta de solução que auxilie usuários no acompanhamento de consumo de energia em tempo real, foi projetada a SmartSocket (Schiefelbein et al., 2018), uma tomada inteligente capaz de coletar dados de consumo referente a aparelhos conectados na rede elétrica. Os dados são coletados e enviados para um servidor, permitindo ao usuário fazer análises dos dados e caso necessário programar situações de controle, como por exemplo: um aparelho de ar-condicionado que está ligado durante horas e atingiu sua cota de consumo diário, estipulado pelo usuário. Neste caso, a tomada então envia uma notificação ao usuário, que poderá desligar remotamente o aparelho para evitar que ele permaneça consumindo energia. Recentemente a terceira versão da SmartSocket foi desenvolvida com dois novos objetivos, sendo eles mobilidade e usabilidade, através do uso de módulos ESP8266.
Na implementação da nova versão da Smartsocket, foi observada a necessidade de uma remodelação na interface gráfica na aplicação de suporte. Desta forma, visando complementar a nova versão da SmartSocket e também atingir os novos objetivos definidos no projeto, este trabalho apresenta o projeto de uma aplicação móvel multiplataforma. A aplicação permite que o usuário analise, interprete e programe a Smartsocket remotamente utilizando apenas o seu smartphone.
O artigo está estruturado da seguinte forma: na Seção 2 são apresentadas as ferramentas utilizadas para o desenvolvimento da aplicação móvel. Na Seção 3 é apresentado o processo de definição e implementação da aplicação móvel. Na seção 4 são apresentados os testes realizados com a aplicação e na seção 5 as conclusões do projeto.
2. Ferramentas de Desenvolvimento
Nesta seção são apresentadas algumas das ferramentas e técnicas de desenvolvimento de software utilizadas no desenvolvimento da aplicação móvel multiplataforma proposta para a Smartsocket. A apresentação destas ferramentas e técnicas é separada em duas seções, nomeadas: Front-end e Back-end.
2.1. Front-end
A seção de Front-end, também conhecida como Client-side, se refere à aplicações que rodam no navegador do usuário em uma arquitetura do tipo cliente-servidor. No front-end de aplicações móveis, há dois caminhos para o desenvolvimento de front-end. O primeiro caminho é devolver aplicações utilizando linguagens de programação nativas. Sendo necessário desenvolver uma aplicação para cada um dos principais sistemas operacionais para smartphones, o que proporciona um ganho em performance, mas também uma enorme demanda de tempo de desenvolvimento e um alto grau de conhecimento de linguagens nativas. O segundo caminho é utilizar ferramentas de desenvolvimento multiplataforma, como PhoneGap, React Native, Ionic, entre outras.
Para realizar o desenvolvimento da aplicação móvel de suporte à SmartSocket foi escolhido o framework Ionic, pois este framework oferece uma série de ferramentas que otimizam o desenvolvimento de aplicações móveis multiplataforma (Scudero, 2019).
O framework Ionic é um kit de ferramentas de interface, responsável pela interação do usuário, que tem como objetivo a criação de aplicativos para dispositivos mobile e desktop, que utiliza tecnologias da Web. Além de ser de fácil aprendizagem, ele se integra muito bem com outras bibliotecas ou estruturas, como o Angular (Ionic framework, 2019). Para utilizar o Ionic é necessário conhecimento nas linguagens HTML, CSS e JavaScript.
2.2. Back-end
O Back-end, também conhecido como Server-side, trata das aplicações que são executadas em servidores em uma arquitetura do tipo cliente-servidor. É a seção responsável pelas regras de negócio e banco de dados da aplicação de suporte. O Back-end pode ser desenvolvido em diversas linguagens de programação como, PHP, Python, entre outras. No contexto da aplicação de suporte para a nova versão da SmartSocket, foi escolhida a linguagem Python para o desenvolvimento da aplicação de back-end.
Para criar uma estrutura de aplicação web, foi utilizado o microframework Flask. Ele utiliza uma estrutura leve e foi projetada para uma aprendizagem rápida e fácil. Ele não impõe nenhuma dependência ou layout de projeto e também permite a importação diversas ferramentas e bibliotecas para a adição de novas funcionalidades, podendo assim expandir para aplicativos complexos.
3. Aplicativo Móvel de Suporte para a SmartSocket
Nesta seção é apresentado o processo de definição e implementação do protótipo de aplicação móvel multiplataforma para a aplicação de suporte à SmartSocket, sendo o front-end desenvolvido sob framework Ionic juntamente com Angular, enquanto o back-end foi desenvolvido na linguagem Python.
A SmartSocket é um conjunto de dispositivos, que pode ser dividido em: uma tomada inteligente definida como master e diversas tomadas definidas como slaves. A master é responsável pelo gerenciamento do conjunto e envio dos dados coletados ao banco de dados, enquanto as slaves são responsáveis pela coleta de dados dos aparelhos ligados a rede elétrica e encaminhamento dos dados à master. Em um conjunto de tomadas, deve existir obrigatoriamente uma tomada master vinculadas a várias slaves.
Durante a etapa de projeto de nova versão da SmartSocket, foram definidas as seguintes funcionalidades como essenciais para implementação da aplicação de suporte: Leitura Atual, Histórico, Arquitetura, Programar, Configuração.
O projeto foi dividido de forma que cada funcionalidade fosse implementada separadamente de outra. Assim, para cada funcionalidade, foi criada uma página separada na aplicação, composta por três arquivos: HTML para definição de estrutura de apresentação, SCSS para representação de personalização de interfaces e um TS que se refere a programação em si dos processos relacionados à funcionalidade implementada. A Figura 1 apresenta o menu de páginas desenvolvidas na aplicação móvel para implementação das funcionalidades definidas na etapa de projeto.
Figura 1 – Interface do menu de funcionalidades
3.1. Página de Leitura Atual
A página de Leitura Atual implementa a funcionalidade de acompanhamento da medição de energia em tempo real. Para que isso seja possível, a aplicação realiza uma varredura constante no banco de dados e mantém atualizados os dados coletados, os exibindo em forma de gráficos ao usuário, para que ele possa acompanhar em tempo real.
Nesta página (exemplo apresentado na Figura 2), os dados coletados são apresentados de forma separada para cada tomada master, ou seja, o usuário deverá escolher qual master ele deseja analisar para que a aplicação carregue os dados coletados das respectivas slaves desta master.
Figura 2 – Interfaces da página Leitura Atual
Há também um filtro na página, para que o usuário possa escolher quais os dados devem ser informados, sendo eles: corrente, tensão, potência, consumo atual e consumo total. Cada informação terá um gráfico separado e cada slave terá sua coloração diferente no gráfico, especificado por uma legenda no início da página.
3.2. Página Arquitetura
A página de Arquitetura é responsável pela conexão do usuário com a master e por listar as conexões já existente com o usuário, além de informar quais são as slaves respectivas de cada master. Como descrito anteriormente o funcionamento da SmartSocket, percebemos que é somente necessário estabelecer a conexão do usuário com a master do conjunto, que é identificada por um Gateway e um pin, únicos para cada master.
A conexão é estabelecida da seguinte forma: quando o usuário fizer login, a aplicação irá armazenar o identificador do usuário. Ao entrar na página de arquitetura e clicar em “Add”, será necessário informar o Gateway e Pin da master que se deseja conectar, então a aplicação fará a conexão da master identificada com o identificador do usuário. A Figura 3 apresenta exemplos de interfaces implementadas na página de Arquitetura.
Figura 3 – Interfaces da página Arquitetura
Há também a possibilidade de o usuário excluir conexões existentes, além de poder editar os nomes das master e suas slaves para dar mais usabilidade ao sistema.
3.3. Página de Histórico
Esta página apresenta gráficos históricos aos usuários, a fim de que o usuário tenha um maior controle sobre oscilações e picos durante determinado período específico de tempo. Os dados coletados também são apresentados de forma separada para cada master e também existem filtros para limitar as informações a serem exibidas. Um exemplo de escolha de histórico é apresentado na Figura 4.
Figura 4 – Interface da página Histórico
3.4. Back-end
As aplicações de back-end são compostas por scripts que implementam rotas através do microframework Flask na linguagem Python. Estas rotas são separadas por funcionalidades, que são acessadas de acordo com as demandas da aplicação móvel apresentada nas seções anteriores. Além disso, são responsáveis pelas regras de negócio e conexão com o banco de dados. Alguns dos exemplos das rotas utilizadas são apresentadas na Figura 6.
Figura 6 – Script principal responsável pelo back-end
As aplicações de back-end foram divididas em três scripts, sendo eles: main, functions e config. O script de config contém os dados referente ao banco de dados como port, host, pass, user, nome do banco. O script de functions é onde estão centralizadas as funções de requisição ao banco de dados, enquanto o script main é responsável por coletar os parâmetros informados pelo front-end e encaminhar a respectiva função requisitada.
4. Testes
Nesta seção são apresentados os testes realizados com aplicação e os feedbacks retornados pelo usuário piloto. No ambiente de teste, o usuário utilizava um smartphone da marca Iphone, modelo X, e o conjunto de tomadas foram instaladas no Laboratório de Computação Ubíqua, Móvel e Aplicada (LUMAC) em Cachoeira do Sul.
Dentro do LUMAC, foram instaladas três tomadas, sendo elas instaladas junto ao computados dos bolsistas. Os computados utilizados pelos bolsistas foram IMac e o teste foi realizado por 3 dias consecutivos nesta configuração, seguindo a rotina normal dos bolsistas. Durante a realização do teste, o foco foi somente na observação da medição de tensão. Os resultados das medições são apresentados na Figura 7.
Figura 7 – Gráficos gerados no teste
Conforme apresentado nos gráficos, pode-se observar que as utilizações dos computadores não foram constantes durante o teste, já que os alunos possuem grade de horário diferente. Também, pode-se observar que a tensão variou bastante no teste.
Quanto a aplicação, ela se apresentou estável e operando com excelente comunicação com o banco de dados e a SmartSocket. O feedback do usuário foi que a aplicação é intuitiva e prática, mas ela está deixando a desejar quanto a parte visual faltando mais cores e ícones.
5. Conclusões
A nova versão da SmartSocket possui agora uma aplicação de suporte completamente remodelada, principalmente na interface gráfica, e assim atingindo os novos objetivos, mobilidade e usabilidade. A nova interface demonstrou superioridade em relação à anterior em diversos quesitos, como design e usabilidade. Agora cumprindo seu objetivo, a aplicação permite que o usuário analise, interprete e programe a SmartSocket remotamente utilizando apenas o seu smartphone.
Ela se apresentou estável e operando perfeitamente com o conjunto da SmartSocket, mas ainda serão realizados alguns testes para certificar que aplicação não contém bugs e também conferir o feedback de diversos usuários quanto a usabilidade e confiabilidade, conforme os futuros feedback a aplicação irá sofrer ajustes para melhor se adaptar ao seu público. Por fim a aplicação será lançada nas lojas de aplicativos, Google Play e App Store, para que ela seja utilizada em conjunto com a SmartSocket.
Agradecimentos
Os autores agradecem à Universidade Federal de Santa Maria (Programa FIPE-UFSM), FAPERGS (Programa ARD), CNPq (Programa PIBIC e CNPQ-Universal), pelas bolsas concedidas aos autores e auxílio financeiro para realização da pesquisa, e também à Cooperativa-Escola dos Estudantes do Colégio Politécnico (CESPOL).
Referências
AGENCIA DE ENERGIA ELÉTRICA DO BRASIL [Internet]. Atlas de Energia Elétrica do Brasil. Available from: http://www2.aneel.gov.br/arquivos/pdf/atlas3ed.pdf
ALVAREZ, Miguel Angel [Internet]. O que é HTML. Available from: http://www.criarweb.com/artigos/7.php
DA CUNHA LIMA, Andrei et al. Development of a wireless communication system for a smart power socket. Ciência e Natura 2018; 40: 38-47.
FLASK [Internet]. Flask. Available from: https://palletsprojects.com/p/flask/.
IONIC FRAMEWORK [Internet]. Core Concepts. Available from: https://ionicframework.com/docs/intro/concepts.
MATERA SYSTEMS [internet]. O que é CSS e qual sua importância?. Available from: http://www.matera.com/br/2012/07 /25/o-que-e-css-e-qual-sua-importancia/
ROSA, L.M.F. Sensorização, fusão sensorial e dispositivos móveis: contribuições para a sustentabilidade de ambientes inteligentes. [dissertation] Universidade do Minho/UMINHO; 2013. 133p.
SCUDERO, Erick [internet]. Desenvolvimento mobile multiplataforma ou nativo, qual é melhor? Available from: https://becode.com.br/desenvolvimento-mobile-multiplataforma-ou-nativo/
SCHIEFELBEIN, U. H. ; SOLIGO, D. ; MARAN, V. ; OLIVEIRA, JOSÉ PALAZZO M. DE ; LIMA, J. C. D. ; MACHADO, A. . Pervasive System Based on Situation-Awareness for Feedback of Energy Efficiency. In: XIV Simpósio Brasileiro de Sistemas de Informação (SBSI), 2018 jun 4-8; Caxias do Sul, Brasil. Anais do Simpósio Brasileiro de Sistemas de Informação (SBSI), 2018.
SOLIGO, D. Internet das coisas aplicada a eficiência energética. [monography]. Santa Maria: Colégio Politécnico/UFSM; 2018.