Módulo Web

6 METODOLOGIA

Esse capítulo apresenta, em detalhes, a metodologia utilizada para a construção da plataforma descrita no Capítulo 5. As seções a seguir estão organizadas da seguinte forma:

A Seção 6.1 discorre sobre os sistemas auxiliares desenvolvidos e fornece seus detalhes de implementação e responsabilidades. A Seção 6.2 apresenta as etapas para construção do módulo de acompanhamento do progresso, detalhando os componentes necessários para sua construção e os passos aplicados para a captura, processamento e computação das métricas de evolução dos usuários.

algumas funcionalidades nativas, como a conexãoBluetooth, acesso à câmera e ao sistema de arquivos do dispositivo. Para o programador, essa técnica também oferece grande vantagem, uma vez que são necessárias poucas alterações no código desenvolvido para a Web para transformá-lo em um PWA. O acesso às APIs nativas do dispositivo é crucial para viabilizar a implementação da plataforma, visto que é necessário o uso de comunicaçãoBluetoothpara que o profissional da saúde e paciente operem o estimulador.

Para melhor projetar o funcionamento, foi utilizada a plataforma de prototipagem colaborativaFigma, onde todas as telas da aplicação foram desenhadas, visando atender seus requisitos funcionais e oferecer uma boa experiência para o usuário. Foram levadas em consideração as limitações motoras comumente apresentadas pelo público alvo (pessoas com comprometimento motor na mão devido a hemiplegia e tetraplegia), de forma que todos os pontos de interação dos usuários com a plataforma foram projetados para oferecer uma boa área de toque para os botões, evitando falhas na operação devido a algum erro ao pressioná-los.

A aplicação Web foi construída de acordo com uma arquitetura comum do tipo Cliente- Servidor, com uma interface para o usuário (Cliente) se comunicando com uma aplicação independente (Servidor). O sistema como um todo foi desenvolvido com a linguagemJavaScript (JS) e na aplicação do Cliente foi utilizada a bibliotecaReactJSpara elaboração da interface.

Para a aplicação do Servidor foi utilizada a plataformaNodeJS, a qual consiste em um ambiente de interpretação de código JS. Os dois maiores motivos da utilização doReactJSpara a aplicação foram:

1- OReactJS introduziu o Virtual DOM (Document Object Model), que armazena o estado de cada componente. Quando ocorre uma mudança nesse estado, oVirtual DOManalisa essas diferenças para encontrar o modo mais fácil para concretizar a atualização. Assim, oDOM só é atualizado depois da Virtual DOM, garantindo o mínimo possível de ações de escrita e leitura. Dessa forma, evita que oDOMleia e escreva repetidamente, perdendo performance na velocidade de renderização.

2- OReactJSpermite criar e reutilizar componentes. Cada componente é independente, possuindo sua própria lógica interna e decidindo como deverá ser renderizado e atualizado. Traz vantagens para os desenvolvedores, como o fato de todo componente poder ser reutilizado em novas partes da aplicação sem precisar ser recriado, facilita na manutenção da aplicação e o desenvolvimento fica mais rápido e limpo.

Para a criação desses componentes foi empregada uma biblioteca que oferecetemplates para sua construção, chamadaMaterial UI, o que garantiu maior agilidade no desenvolvimento, ao mesmo tempo em que garantiu uma aparência moderna para a interface do usuário.

ONodeJSfoi escolhido como plataforma de desenvolvimentoback-end por permitir a construção de aplicações independentes baseadas em JS sem a dependência de um navegador para sua execução. Além disso, destaca-se, dentre as características doNodeJS, sua arquitetura utilizando umevent-looppara gerenciamento de chamadas, que apresenta-se como uma solução vantajosa para a construção de servidores capazes de lidar com alto volume de chamadas.

Para o banco de dados foi utilizado oMongoDB, um sistema gerenciador de bancos de dados (SGBD) orientado a documentos. Os documentos podem ser descritos como dados no formato de chave-valor através do formatoJSON (JavaScript Object Notation). Esse SGBD conta com uma linguagem para consultas também baseada na sintaxe doJavaScript, o que também é vantajoso, visto que segue o padrão adotado nas demais camadas do sistema. Esse tipo de banco de dados não segue o modelo relacional, de tabelas e relacionamentos, mas apresenta uma maior variedade de opções para modelagem de dados, uma vez que permite a criação de estruturas complexas como objetos e listas, garantindo maior flexibilidade para construção dos modelos e armazenamento das informações.

A figura 10 apresenta o diagrama de implantação com uma representação dos principais componentes desse módulo e seus protocolos de comunicação.

Figura 10: Diagrama de componentes do Módulo Web.

Fonte: Autor.

O sistema foi prototipado de forma que apresentasse duas interfaces distintas de acordo com o usuário que estivesse o operando, sendo uma visão específica para o profissional da saúde

e outra para o paciente. A visualização do paciente, como descrito anteriormente, foi pensada de forma a facilitar a operação por usuários com limitações motoras, com foco na utilização através de telas sensíveis ao toque (emsmartphonesoutablets). A figura 11 apresenta alguns dos protótipos desenhados no Figma para as telas iniciais da interface do paciente.

Figura 11: Protótipo das telas iniciais da interface na visualização do paciente. Da esquerda para a direita, são apresentadas as telas: "Página de Login", "Página de Cadastro", "Tela Inicial"e

"Dashboard".

Fonte: Autor.

As telas para funcionalidades do profissional da saúde foram prototipadas inicialmente considerando a operação em telas sensíveis ao toque, conforme exibido na figura 12, porém, com a progressão do desenvolvimento do projeto percebeu-se que haveria uma melhor experiência para o usuário caso seu desenvolvimento fosse realizado visando a utilização em um computador.

Figura 12: Protótipo das telas iniciais da interface na visualização do profissional da saúde. Da esquerda para a direita, são apresentadas as telas: "Menu Lateral", "Configuração de Canais",

"Configuração de Tempos"e "Configuração de Amplitudes".

Fonte: Autor.

O terapeuta tem acesso a um menu lateral para facilitar a navegação entre as telas do aplicativo durante o uso. Cada item no menu é composto por um ícone acompanhado de um nome, indicando a tela de destino. A listagem abaixo apresenta as funcionalidades implementadas na interface de uso do profissional da saúde:

a) Perfil- Apresenta os dados do perfil do terapeuta e permite sua alteração.

b) Listagem de Pacientes- Nesta tela são apresentados todos os pacientes relacionados com o terapeuta. É permitida a adição de novos pacientes através do CPF, a exclusão de um paciente e a alteração de dados do perfil do paciente. Ao clicar no ícone representado por uma "pessoa", o terapeuta terá acesso aos dados e desenvolvimentos desse paciente, podendo também criar programações de uso para esse paciente em um determinada data, conforme apresentado na figura 13.

c) Programação de Uso- Nesta tela o terapeuta poderá configurar os exercícios de um dado paciente. A tela permite cadastrar movimentos, repetições e sequências de execução a serem realizadas em datas específicas, bem como é possível configurar a intensidade de cada canal do estimulador para realizar cada movimento. O terapeuta também terá acesso a alteração de duas permissões nessa tela que refletem no uso da interface pelo paciente; a primeira é a permissão para alteração da intensidade da estimulação e a segunda controla o acesso ao modo funcional (figura 14).

Figura 13: Tela implementada para listagem, adição, alteração e exclusão de dados dos pacientes.

Fonte: Hayashi (2021).

Figura 14: Tela de programação das sequências de estimulação utilizadas em cada sessão pelo paciente. A tela oferece a funcionalidade de alteração das formas de onda por parte do profissional da saúde para os 8 canais disponíveis para estimulação, visando facilidade para configurar o programa adequando-se às necessidades de cada paciente.

Fonte: Hayashi (2021).

A navegação entre as funcionalidades implementadas para o paciente é realizada através dos botões disponíveis na tela. Tendo em vista a inviabilidade da adição de um menu lateral para navegação, foi adicionado um botão em todas as telas para permitir que o paciente cancele a operação acessada e retorne para o menu inicial da aplicação. A listagem a seguir apresenta as funcionalidades implementadas para operação do paciente:

a) Tela Inicial- Contém três botões para navegação, o primeiro leva o usuário para o modo de operação que deseja iniciar, o segundo permite o acesso aodashboarde o terceiro permite desconectar-se do aplicativo.

b) Modo de Operação- A tela de modo de operação permite o usuário escolher entre os modos de fisioterapia e funcional para a realização das atividades. O modo fisioterapia consiste de exercícios repetitivos enquanto o funcional serve para o uso em atividades do cotidiano.

c) Seleção da Ação- A tela de seleção da ação faz com que o usuário escolha a ação que deseja executar para o modo funcional. No fluxo de telas contém dois botões roxos, um para avançar para a próxima ação e outro para voltar a ação anterior e o botão verde que seleciona a ação desejada.

d) Fisioterapia- A tela de Fisioterapia contém um botão para ajustar a intensidade de cada canal e outro botão para ir até a tela onde poderá iniciar o movimento, sendo esse movimentos pré-determinados pelo terapeuta.

e) Funcional- A tela de funcional contém um botão para ajustar a intensidade de cada canal e outro botão para ir até a tela de seleção da ação e posteriormente para a tela de iniciar o movimento desejado.

f) Seleção do Canal- Após clicar no botão de ajustar sensibilidade, o aplicativo irá para tela de seleção do canal, onde o usuário poderá selecionar o canal que deseja ajustar a intensidade.

g) Ajustar Intensidade- Após selecionar o canal que deseja ajustar a intensidade o usuário irá para a tela de ajustar intensidade, onde poderá diminuir ou aumentar a intensidade do canal selecionado.

A figura 15 apresenta algumas das telas implementadas para seleção de operações e acompanhamento das sessões por parte do paciente quando vistas através de um aparelho móvel.

Figura 15: Telas implementadas para operação do paciente no PWA.

Fonte: Adaptado de Hayashi (2021).