projetogabble-blog

[projetogabble-blog]

Documentação gráfica

Estamos na fase final para a entrega a decorrer no dia 12 de junho. A documentação gráfica foi desenvolvida tendo em conta todos os critérios apresentados pelo professor Pedro Amado, de forma detalhada e explícita com todas as respetivas explicações. Os documentos foram divididos por secções para que fosse mais fácil analisar todo o conteúdo neles presentes. De seguida, estão presentes as secções com uma breve descrição do seu respetivo conteúdo:

Cores - todas as cores presentes no Gabble.

Tipografia - tipo de letra, peso, estilo e espaçamento com exemplos ilustrativos.

Botões - todos os botões disponíveis na plataforma, botões simples, dropdown, tabs e ainda os seus estados, normal, ativo, hover.

Iconografia - ícones utilizados, no seu estado normal e ativo.

Elementos de formulário - todos os campos de texto, área de texto para grandes descrições, campo de mensagens e alertas.

Elementos UI - todos os elementos UI da plataforma Gabble, desde modais, barras de progresso, cartões, timeline, balões de mensagens, labels, badge e thumbnails. 

Grelhas - especificação das grelhas, Web e Mobile.

Tamanhos - indicação do tamanho da letra utilizado em determinados elementos, o tamanho de ícones, thumbnails, etc.

Ecrãs - imagens de todos os ecrãs de ambas as aplicações para uma análise mais detalhada e de forma a ver a utilização dos elementos nos seus respetivos contextos.

Existem secções que contém conteúdo que faz parte de ambas as aplicações Web e Mobile. Caso existam elementos diferentes entre as aplicações, estes estão identificados e divididos por categorias, nomeadamente categoria Web que engloba os respetivos elementos e categoria Mobile que funciona da mesma forma.

[projetogabble-blog]

Evolução da aplicação Web

A imagem abaixo apresenta a evolução do comportamento do médico na aplicação web. Podemos verificar todas as formas que o utilizador pode interagir e navegar pela aplicação. 

[projetogabble-blog]

Evolução da aplicação móvel

A aplicação móvel, foi sem dúvida alguma, uma grande evolução agora na fase beta, todos os ecrãs apresentados abaixo, foram desenvolvidos para o âmbito da meta beta, ou seja, foi criado, melhorado e também renovados ecrãs de raiz. As imagens apresentam ecrãs nunca antes apresentados na versão protótipo. Ocorreram melhorias na experiência, ou seja, todos ecrãs têm um spinner de carregamento de conteúdo, gráficos e placeholders para ecrãs vazios, validação de campos, animações, modais de confirmação e muito mais.

Foram desenvolvidas inúmeras funcionalidades, tais como: criar, categorizar, visualizar anotações, visualizar e editar perfil, configurar, terminar sessão e muito mais.

[projetogabble-blog]

Ecrãs desenvolvidos para versão beta

Os mapas de navegação apresentados abaixo mostram a evolução dos ecrãs desde do protótipo à versão web. Os ecrãs que foram feitos no protótipo estão assinalados em azul e os ecrãs desenvolvidos na versão beta estão assinalados em amarelo.

[projetogabble-blog]

Design

O design da plataforma Gabble encontra-se num estado avançado, sofreu diversas alterações ao longo do tempo, com o objetivo de chegar ao melhor resultado possível. Ao longo do desenvolvimento da plataforma a preocupação fundamental foi a usabilidade com o objetivo de garantir que o utilizador final atinja os seus objetivos de forma agradável e intuitiva. O design foi desenvolvido com um planeamento estratégico, desde a Estrutura e o Layout, onde o objetivo foi sempre disponibilizar as ferramentas e informação importante e necessária para o utilizador. Um ponto importante sempre foi garantir bons padrões de utilização, onde o código é testado nos diferentes navegadores, seguindo os padrões do W3C possibilitando que a informação na plataforma permaneça correta independentemente do dispositivo utilizado pelo visitante e que seja acessível.

[projetogabble-blog]

Reunião presencial

4 Reunião presencial - Professora Doutora Margarida Figueiredo Braga - mmfb@med.up.pt

Alterar a forma das datas dos planos de intervenção. Os pré Planos criados anteriormente estão com datas de 2016, o que não faz sentido ter datas antigas quando se inicia um novo plano, então em vez de ter as datas com datas especificas, ter o tempo em dias semanas ou meses, a partir do momento em que o pré plano é selecionado.

Alteração do ter consulta, para algo mais especifico como nota consulta, na página dos registos.

Não se deve eliminar pacientes, em vez de eliminar paciente passa a ser inativo.

A medicação também deve aparecer no perfil do paciente na aplicação mobile, porque ter esta informação é útil para muitos pacientes.

Futuramente ter o ecrã da medicação com uma guia de medicamentos.

Futuramente nas informações do paciente poder adicionar dinamicamente novos campos que sejam pertinentes para casa medico.

Ter um plano de boas vindas, ou pelo menos uma mensagens de boas vindas no primeiro plano.

[projetogabble-blog]

Rest vs GraphQL

[projetogabble-blog]

GraphView dos Planos

[projetogabble-blog]

Até ao momento...

[projetogabble-blog]

Fluxograma: Planos de intervenção – Criação

O fluxograma abaixo, representa o algoritmo principal na criação de um plano e dos seus componentes. Diferente do fluxograma acima, onde mostra todo o funcionamento, este mostra o seu comportamento de uma forma simplificada. Desde da sua criação, até ao telemóvel do paciente.

[projetogabble-blog]

Pontos importantes das reuniões

Reuniões: 2 presencial - Drº Hugo Almeida - a.hugosergio@gmail.com

Melhoria nos termos utilizados 

Apresentação do design em inVision

Melhorias e novas funcionalidades (Medicação, Registos etc)

Tarefas passou a ser componentes (Notificações e Monitorização)

Reuniões: 3 presencial - Professora Doutora Margarida Figueiredo Braga - mmfb@med.up.pt

Apresentação das melhorias no design e interação com inVision

Melhorias nos registos ambas as aplicações (Normais === Privadas)

Evolução futura (Recuperar dados, adicionar familiares, etc)

[projetogabble-blog]

Mapas de navegação

Aplicação web (médico) A imagem que se segue representa o mapa de navegação da versão Web do Gabble. Nesta versão o público alvo são os médicos. No mapa de navegação que se segue estão representadas as diversas áreas e as respetivas funcionalidades às quais os médicos têm acesso. Estes terão então acesso a um dashboard e a um perfil pessoal ao qual os pacientes terão acesso para ver as informações básicas do médico. Dentro desse dashboard o médico tem uma lista de todos os seus pacientes e para cada paciente existe uma ��rea de trabalho dividida em subáreas, respetivamente, mensagens, planos de intervenção, follow-up, notas e informações do paciente. Para cada subárea existem as respetivas funcionalidades indicadas no mapa de navegação.

Aplicação Móvel (paciente) Esta segunda imagem representa o mapa de navegação da versão mobile do Gabble. Esta versão tem como público alvo os pacientes e pretende-se desta forma representar no mapa que se segue os vários caminhos disponíveis para cada área e cada funcionalidade correspondente. Como se verifica na imagem, após o registo e/ou inicio de sessão o paciente tem acesso direto à navegação da aplicação que se divide em quatro áreas, respetivamente, mensagens, notificações, notas e perfil. Dentro destas áreas, o paciente tem acesso às respetivas funcionalidades.

[projetogabble-blog]

Modelo de sistema

Sistema Global O modelo de sistema abaixo representa de uma forma geral todo o sistema como um todo, ou seja, tem incluído todos os clientes e servidor (com mais detalhe e separados nos sistemas abaixo).

Aplicação web (médico) O modelo de sistema abaixo, representa de forma geral o funcionamento da aplicação web, ou seja, o dashboard administrativo do médico. Podemos ver com base deste sistema que o cliente não tem uma relação interligada com o backend, ou seja, o backend não esta juntamente com o cliente (navegador). Com isto podemos então verificar que o cliente faz pedidos e recolhe a sua informação através de uma API, esta que também fornece o mesmo conteúdo à aplicação móvel (pacientes). Em suma, o cliente (navegador) faz os pedidos à API e dentro do sistema de backend é tratado este mesmo pedido e verificado o que realmente deseja o cliente, consoante este pedido é retornado uma resposta do servidor.

Aplicação Movél (Paciente) O modelo de sistema abaixo, representa a aplicação móvel (paciente), o sistema de fornecimento de informação, funciona da mesma forma do que aplicação web (médico), ou seja, através de uma API. O que diferencia neste caso é as integrações com bibliotecas externas para fornecer funcionalidades especificas, tais como, push notifications ou mesmo os próprios agendamentos. Em sum, todos os pedidos são feitos através da API e tratados e respondidos através do servidor que aloja a nossa GraphQL API.

Serviço sms (paciente) O modelo de sistema abaixo, representa o serviço alternativo que fornecemos para os pacientes, que não possuem um telemóvel inteligente Android, ou seja, apenas tem um telemóvel básico de SMS´s. Sendo assim temos um sistema que engoba este tipo de paciente, os pedidos são tratados e enviados pela aplicação web (médico) através da nossa API e consoante o tipo do pedido este é tratado no servidor, enviado para os mecanismos de agendamento e de seguida são utilizadas bibliotecas externas para fornecer o serviço de SMS, por fim este conteúdo é enviado ao paciente.  

[projetogabble-blog]

Links para os protótipos interativos

Para tornar os nossos designs mais interativos e mais próximo do real, criamos prototipos no invision para entregar aos nossos colaboradores.

Versão Móvel (Paciente): https://invis.io/C5AU09U9B#/223276364_Iniciar_Sess-o

Versão Web (Médico): https://invis.io/JQAX1GGWY#/224310274_Web_-_1366_-_768

[projetogabble-blog]

Evolução Futura

Como forma de não esquecer e repetir ideias que já foram discutidas, é importante registar as ideias a ser implementadas futuramente.

- Um plano de intervenção criado pelo médio poder passar a ser um plano pré definido para o médico que criou

- Envolver familiares, dar a possibilidade a familiares escolhidos pelo paciente ter acesso a informações também escolhidas pelo paciente 

- Dar a possibilidade aos médicos de recuperar planos de intervenção apagados

[projetogabble-blog]

O resumo antes das férias

Este momento, define o que já fizemos até agora. Estamos orgulhosos do trabalho que temos apresentado até ao momento e como o projeto tem evoluído para algo promissor. Nada disto seria possível sem o apoio nem o feedback excelente dos nossos colaboradores e professores.  Este momento marca um ponto importante na fase do nosso projeto, que é facto de estarmos a fechar aspetos essenciais como o design e outros aspetos de planeamento para começarmos realmente a programar o produto.

Como forma resumida antes de irmos de férias, o projeto encontra-se na seguinte forma. O design em ambas as plataformas (Mobile e Web) já foram apresentados aos nossos colaboradores, recebemos elogios e ao mesmo tempo feedback para cada vez mais melhorar o nosso design. Acabamos por fazer toda a documentação técnica e a escolha do nosso desafio para protótipar.

[projetogabble-blog]

Assuntos para abordar na reunião de amanhã (23 de Março)

Amanhã, dia 23 de março, está agendada a realização da segunda reunião com os nossos colaboradores, sendo a primeira reunião presencial.

Pretendemos com a reunião receber o feedback do desenvolvimento da camada gráfica até agora realizada, isto é, o design do projeto de ambas as versões, web e mobile. Este tópico será o foco principal da reunião, para procedermos às alterações necessárias para prosseguirmos posteriormente à implementação do desafio proposto no âmbito da UC de projeto. Isto porque o nosso objetivo é realizar o desafio já com base no design das aplicações.

Para além do design iremos também abordar o desenvolvimento da camada técnica realizada, isto é, fluxogramas, mapas de navegação, esquema de base de dados e modelo do sistema.

Em suma, a nossa equipa pretende receber todo o feedback por parte dos colaboradores para realizar todas as alterações necessárias para prosseguir assim à implementação do projeto Gabble.