17 de Dezembro de 2013

Mestrado em Engenharia de Computao e Instrumentao Mdica

Sistemas de Computao Mvel
Trabalho Laboratorial n 2
Relatrio de Desenvolvimento da Aplicao FarmApp
Daniel Benevides (1100863) Nelson Gomes (1131441)


RESUMO
No mbito da unidade curricular de Sistemas de Computao Mvel, foi proposto aos alunos que proce-
dessem realizao de um trabalho laboratorial que lhes proporcionasse a conceo e a implementao de
um aplicativo para dispositivos mveis com o sistema operativo Android. Durante o processo de desenvol-
vimento, o MIT App Inventor foi a ferramenta em que assentou todo o processo de implementao em con-
junto com o uso de fragmentos de cdigo em linguagem JavaScript.
A aplicao foi desenvolvida com o nome de FarmApp e esta permite ao utilizador comum obter infor-
maes sobre um determinado medicamento ou frmaco atravs da pesquisa pelo seu, nmero de registo ou
leitura do cdigo de barras da embalagem do medicamento. Esta aplicao tem como principal objetivo
informar os utilizadores de forma rpida e eficiente acerca dos contedos de um determinado medicamento
ou frmaco.

3
INTRODUO
Desde a ltima dcada tem-se assistido a uma dependncia cada vez maior de sistemas de comunicaes
mveis e as suas potencialidades. A necessidade de realizar tarefas ou resolver problemas no contexto de
mobilidade impulsionou o desenvolvimento de hardware e software capazes de dar resposta s necessidades
exigidas quer por utilizadores quer por corporaes. Em 2007, a Google reconheceu a existncia desta neces-
sidade e aproveitou para desenvolver um sistema operativo para telemveis em conjunto com a Open Hand-
set Alliance: o Android. Este sistema operativo dedicado a telemveis e tablets foi criado sobre o kernel do
Linux e foi concebido primariamente para uma interface de touchscreen. O fato de ser um sistema operativo
open source, permitiu uma livre distribuio e modificao do mesmo.
[1][2]

Com a maturao do Android, comeam a surgir ferramentas de programao para auxiliar o desenvol-
vimento de aplicaes que possam tirar partido das capacidades do hardware existente nos terminais. O MIT
App Inventor uma das ferramentas de desenvolvimento de aplicaes, que permite a um utilizador mini-
mamente familiarizado com conceitos de programao, a possibilidade de criar aplicaes para o sistema
operativo Android. Esta ferramenta permite ao utilizador programar sob a forma de blocos funcionais atravs
de um sistema de drag-and-drop de objetos virtuais. O editor de blocos (Blocks Editor) baseado em tecno-
logia Java e permite ao utilizador manipular variveis, funes e lgica de acordo com o modo de como
pretende implementar as funcionalidades da sua aplicao. Em suma, o MIT App Inventor permite imple-
mentar o aspeto da aplicao enquanto o editor de blocos permite implementar o funcionamento interno da
aplicao a desenvolver.
[3][4][5]

Para simular as vrias etapas do desenvolvimento da aplicao utiliza-se um emulador (phone emulator),
includo no MIT App Inventor que emula o funcionamento da aplicao num terminal padronizado com as
caractersticas do Android. Este emulador permite visualizar em tempo real as alteraes efetuadas durante o
desenvolvimento da aplicao pelo que muito til para testar diferentes segmentos ou blocos da aplicao.
A figura 1 exemplifica o funcionamento geral do MIT App Inventor integrado com o Blocks Editor em para-
lelo com um telefone Android e um emulador.
[6]


Figura 1: Diagrama representativo do funcionamento do App Inventor.

4
ENQUADRAMENTO
Inicialmente, a ideia projetada foi de implementar um sistema mvel de consulta por cdigos de barra de
artigos ou objetos relacionados com a rea farmacutica, devolvendo informao relativa aos mesmos. Rela-
tivamente ao tipo de utilizadores que poderiam vir a utilizar esta aplicao, ponderou-se que esta aplicao
seria til para pessoas que de algum modo estivessem relacionadas com rea da farmacutica, fossem profis-
sionais ou utentes. No seguimento desta ideia, decidiu-se avanar com a implementao da aplicao com o
nome de FarmApp, denominando-se tambm a parceria de autores por BenGom. A aplicao a desenvolver
permitiria ao utilizador pesquisar informaes de um medicamento atravs da insero manual do seu nme-
ro de registo ou pela leitura automtica do cdigo de barras da sua embalagem (que codifica o seu nmero
de cdigo de barras e que equivalente ao seu nmero de registo)
[7]
atravs da cmara do telefone.
Para se aceder s informaes dos medicamentos recorreu-se base de dados do Infomed,
[8]
atualizada
atravs da transferncia dos dados da base de dados interna do Infarmed (organismo responsvel por supervi-
sionar os sectores dos medicamentos, dispositivos mdicos e produtos cosmticos e de higiene corporal)
[9]
e
cuja utilizao livre, gratuita e sem restries sua utilizao. O conjunto de informaes relativas ao
medicamento esto reunidas num folheto informativo (FI), ou bula medicamentosa. Este documento emi-
tido pelo laboratrio farmacutico que concebe o medicamento e possui as seguintes informaes:
[10]

Nome do medicamento;
Apresentao, formas ou formulaes;
Composio - Ingredientes e suas dosagens;
Informaes ao paciente - Cuidados de armazenamento, prazo de validade;
Informaes tcnicas - Dados farmacolgicos gerais sobre o medicamento;
Farmacutica - O metabolismo do medicamento no organismo;
Indicaes;
Contraindicaes - Indicam condies em que o medicamento no dever ser utilizado;
Precaues - Cuidados a serem tomados durante o uso do medicamento;
Gravidez - Informaes sobre uso do medicamento durante a gestao e a lactao;
Interaes - Dados sobre o uso concomitante com outras substncias;
Reaes adversas - Efeitos colaterais possveis ou esperados do medicamento;
Posologia - Informaes sobre a dosagem e os intervalos de administrao;
Sobredosagem - Informaes sobre o uso excessivo ou em altas doses.
Informaes adicionais.
Na continuao deste relatrio demonstrada o modo de utilizao da aplicao assim como a descrio
do funcionamento ao nvel interno programado atravs da utilizao do Blocks Editor.

5
IMPLEMENTAO
Nesta seco, explicado como foi desenvolvida a aplicao FarmApp.
No App Inventor, o desenvolvimento inicia-se na janela de Designer (ver figura i do anexo A) que corre
no browser. Esta janela apresenta, entre outras, a seco Components, essencial para a compreenso da apli-
cao, e onde so apresentados os diversos componentes da aplicao cujo comportamento ser definido e/ou
programado. Entre estes, destacam-se:
Componente HeaderArrangement, onde so apresentados os botes principais de interao com a
aplicao, bem como uma barra de progresso para o conjunto de comunicaes pendente. Este com-
ponente est presente em todas as janelas, exceo da janela de execuo de leitura automtica de
cdigo de barras (ver figuras do anexo C)
Componente I nstructionsArrangement (ver figuras v, vi e ix do anexo C), onde so apresentadas as
instrues para a utilizao da aplicao, bem como alguns botes para iniciar outras aplicaes tais
como as que permitem contactar os responsveis pelo desenvolvimento desta aplicao ou instalar a
aplicao Barcode Scanner.
Componente WebViewer (ver figuras xi e xii do anexo C), utilizado para realizar comunicaes de
acesso a recursos externos e para visualizar os FI.
Componente TimeoutArrangement (ver figura xiii do anexo C), que surge quando o conjunto de
comunicaes necessrias obteno de um FI demora mais tempo do que o previsto.
Componente BarcodeScanner (ver figura x do anexo C), que um componente invisvel, servindo
para executar a aplicao Barcode Scanner e obter os resultados das leituras automticas de cdigos
de barras efetuadas.
Componente Clock, que um componente invisvel e que serve para temporizar, coordenar e execu-
tar as comunicaes de acesso a recursos externos aplicao.
Componente ActivityStarter, que um componente invisvel e que permite para executar outras apli-
caes tais como as que permitem contactar os responsveis pelo desenvolvimento desta aplicao ou
instalar a aplicao Barcode Scanner. (Ver figuras vii e viii do anexo C).
De referir ainda que na seco Media da janela de Designer so apresentadas algumas imagens editadas
pelos autores da aplicao com o intuito de servirem como cones para alguns botes da aplicao.
A programao do comportamento dos vrios componentes acima referidos realizada na janela de
Blocks Editor. Pode-se dividir os blocos desenhados em trs grupos distintos:
Variveis globais:
o Varivel TimeToLeave (ver figura i do anexo B), que contm o nmero representativo do tempo
mnimo, em milissegundos, durante o qual a aplicao deve aguardar pela resposta do conjunto
de comunicaes necessrias obteno de um FI.
Relatrio de Desenvolvimento da Aplicao FarmApp Implementao
6
o Varivel TimeRemaining (ver figura ii do anexo B), que ser alterada nas comunicaes com o
exterior. No incio das comunicaes, esta varivel ter o mesmo valor que a varivel TimeTo-
Leave, sendo decrementada a cada intervalo do componente Clock pelo perodo desse mesmo
componente.
o Varivel Action (ver figura iii do anexo B), que tem o valor correspondente ao tipo de comunica-
o pendente (Login, Search, View ou None).
o Varivel J S_postToURL_Function (ver figura iv do anexo B), que contm o cdigo JavaScript
para declarar a funo postToURL. Esta funo recebe um endereo e um conjunto de variveis
com os respetivos nomes e valores e executa um pedido do tipo Post ao referido endereo com
essas variveis. Esta funo permite, portanto, executar os pedidos destinados ao servidor do
Infomed.
Procedimentos:
o Procedimento J S_postToURL_CallPath (ver figura v do anexo B), que permite invocar, na linha
de URL do WebViewer, a funo JavaScript postToUrl, cujo cdigo corresponde ao valor da
varivel JS_postToURL_Function. Os argumentos que este procedimento recebe so os argumen-
tos com que a funo postToUrl invocada.
o Procedimento LoginPath (ver figura vi do anexo B), que invoca o procedimento
JS_postToURL_CallPath enviando como argumentos o endereo para o login na plataforma
Infomed bem como as respetivas credenciais de guest login. O valor retornado por este procedi-
mento deve ser alocado linha de URL do WebViewer para que o cdigo JavaScript seja execu-
tado.
o Procedimento SearchPath (ver figura vii do anexo B), que invoca o procedimento
JS_postToURL_CallPath enviando como argumentos o endereo para a pesquisa por um medi-
camento na plataforma Infomed bem como o nmero de registo submetido para consulta e o
nmero de resultados a listar (que em pesquisa por nmero de registo sempre 1, dado que a
relao entre medicamentos e nmero de registo unvoca). O valor retornado por este procedi-
mento deve ser alocado linha de URL do WebViewer para que o cdigo JavaScript seja execu-
tado.
o Procedimento ViewPath (ver figura viii do anexo B), que devolve o caminho para a visualizao
no Google Docs Viewer do folheto informativo do medicamento relativo consulta efetuada.
o Procedimento Login (ver figura ix do anexo B), que inicia a comunicao de login que resulta na
execuo de um guest login na plataforma do Infomed, alocando o valor retornado pelo procedi-
mento LoginPath linha de URL do componente WebViewer.
o Procedimento Search (ver figura x do anexo B), que inicia a comunicao de search, alocando o
valor retornado pelo procedimento SearchPath linha de URL do componente WebViewer.
Relatrio de Desenvolvimento da Aplicao FarmApp Implementao
7
o Procedimento View (ver figura xi do anexo B), que inicia a comunicao de View, alocando o
valor retornado pelo procedimento ViewPath linha de URL do componente WebViewer aceden-
do, assim, ferramenta Google Docs Viewer com o objetivo de apresentar o FI obtido em respos-
ta a uma consulta.
o Procedimento Show (ver figura xii do anexo B), que assinala o fim de um conjunto de comunica-
es com o exterior, executando os comandos necessrios para a apresentao do FI obtido em
cada consulta.
o Procedimento Reset (ver figura xiii do anexo B), que repe as variveis de controlo no seu estado
original e apresenta o painel Instructions.
o Procedimento Timeout (ver figura xiv do anexo B), que, caso o conjunto de comunicaes tenha
excedido o tempo definido em no valor da varivel TimeToLeave, apresenta o painel de Timeout.
Eventos:
o Evento TimeoutWaitButton.Click (ver figura xv do anexo B), que ocorre quando o componente
TimeoutWaitButton do painel de Timeout pressionado e que possibilita que as comunicaes
continuem a partir do ponto em que foram interrompidas durante, no mnimo, um novo perodo
de TimeToLeave.
o Evento TimeoutRetryButton.Click (ver figura xvi do anexo B), que ocorre quando o componente
TimeoutRetryButton do painel de Timeout pressionado e que possibilita reiniciar as comunica-
es relativas consulta efetuada, invocando o procedimento Login.
o Evento TimeoutStopButton.Click (ver figura xvii do anexo B), que ocorre quando o componente
TimeoutStopButton do painel de Timeout pressionado e que possibilita cessar as comunicaes
e invoca o procedimento Reset, regressando ao painel Instructions.
o Evento Clock.Timer (ver figura xviii do anexo B), que ocorre a cada intervalo do componente
Clock, definido a 1000 milissegundos, e que permite temporizar, coordenar e executar as comu-
nicaes de aceso a recursos externos aplicao.
o Evento BenGomButton.Click (ver figura xix do anexo B), que ocorre quando o componente
BenGomButton do painel InstructionsArrangement pressionado e que leva o componente Acti-
vityStarter a iniciar a aplicao de envio de email do dispositivo, inserindo o contacto da parceria
responsvel pela aplicao como endereo destinatrio.
o Evento ZXingButton.Click (ver figura xx do anexo B), que ocorre quando o componente ZXing-
Button do painel InstructionsArrangement pressionado e que leva o componente ActivityStarter
a iniciar a aplicao de Web Browser do dispositivo, encaminhando-a para o endereo onde o uti-
lizador poder instalar a aplicao Barcode Scanner.
Relatrio de Desenvolvimento da Aplicao FarmApp Implementao
8
o Evento BarcodeScanner.AfterScan (ver figura xxi do anexo B), que ocorre aps a utilizao do
componente BarcodeScanner e que aloca o valor resultante da leitura executada ao contedo da
caixa de texto do painel HeaderArrangement.
o Evento BarcodeScannerButton.Click (ver figura xxii do anexo B), que ocorre quando o compo-
nente BarcodeScannerButton do painel HeaderArrangement pressionado e que invoca o mto-
do BarcodeScanner.DoScan do componente Barcode Scanner, levando assim utilizao deste
componente para a realizao de uma leitura automtica de cdigo de barras.
o Evento BarcodeNumberTextBox.LostFocus (ver figura xxiii do anexo B), que ocorre quando o
componente BarcodeNumberTextBox do painel HeaderArrangement perde o foco do teclado
ocultando este ltimo.
o Evento I nfoButton.Click (ver figura xxiv do anexo B), que ocorre quando o componente Info-
Button do painel HeaderArrangement pressionado e que permite regressar ao painel Instruc-
tionsArrangement, repondo as condies iniciais de execuo.
o Evento SubmitButton.Click (ver figura xxv do anexo B), que ocorre quando o componente Sub-
mitButton do painel HeaderArrangement pressionado e que permite proceder a uma consulta
por nmero de registo de medicamento, realizando-se em seguida, todo o conjunto de comunica-
es necessrias para a obteno do FI relativo consulta, caso esta seja vlida e caso o exista
acesso Internet e ao servidor web do Infomed.
Nas figuras do anexo C possvel visualizar o aspeto da aplicao em diversos pontos de execuo num
dispositivo de teste, facilitando a compreenso do design e programao da aplicao.
Na prxima seco so estudados e discutidos os resultados da implementao e so tiradas concluses
relativamente ao projeto desenvolvido.

9
RESULTADOS E CONCLUSO
Ao partir para o desenvolvimento deste projeto, concluiu-se rapidamente que o pleno funcionamento da
aplicao estaria limitado a situaes em que se verificasse acesso Internet. Alm desta restrio, de
salientar que o desempenho da aplicao depende tambm da disponibilidade do servidor de acesso base de
dados Infomed, onde feita a procura pelos dados, bem como da ferramenta gratuita Google Docs Viewer,
[11]

utilizada para apresentar o folheto informativo resultante dado que permite que os documentos sejam visuali-
zados mesmo quando o utilizador no possui software de visualizao especfico instalado na sua mquina.
O acompanhamento do progresso destas comunicaes com recursos externos pode ser acompanhado
pelo utilizador pela observao da barra de progressos do painel HeaderArrangement, sendo que a cor ver-
melha corresponde fase de login, amarela de search, azul de view e verde ao fim do controlo de comu-
nicaes. Ao iniciar a aplicao e ao regressar ao painel inicial de instrues, esta barra de progresso fica
com a cor cinzenta.
De referir ainda que a funcionalidade de leitura automtica de cdigos de barras recorre aplicao Bar-
code Scanner desenvolvida pela equipa ZXing, pelo que disponibilizado um atalho para descarregar esta
aplicao gratuita.
[12]

Aps a concluso da programao da aplicao realizaram-se algumas tarefas de debugging de forma a
validar o seu correto funcionamento de acordo com os objetivos pretendidos. Durante esta fase foram desco-
bertos alguns bugs que apesar de no interferirem no princpio de funcionamento base da aplicao poderiam
induzir o utilizador em erro durante a sua utilizao. O bug mais relevante encontrava-se num procedimento
(ViewPath) que executava um split de uma string, deverendo devolver uma lista de dois elementos e, ao
invs, estava a tentar devolver uma lista de um s elemento, o que gerava um erro de ndice quando se reque-
ria a utilizao do elemento com o segundo ndice durante esse procedimento.
Uma das otimizaes efetuadas ao cdigo da aplicao durante a fase de debugging foi a remoo de
fragmentos de cdigo HTML (contendo JavaScript) levando criao de um procedimento que executaria o
cdigo JavaScript necessrio para enviar os formulrios de login e search evitando assim a necessidade de
alternar entre caminhos de ficheiros em modo de development test e em modo de package.
O exerccio do desenvolvimento da aplicao FarmApp foi um bom exemplo de que o MIT App Inventor
uma excelente ferramenta de desenvolvimento para pequenos projetos de implementao de aplicaes
Android, apesar das suas funcionalidades limitadas. Com a concluso deste trabalho e tendo em conta as
possibilidades de melhoria da aplicao desenvolvida, essa hiptese estar sempre em aberto quer para a
continuao do seu desenvolvimento quer para a incluso de novas funcionalidades utilizando o MIT App
Inventor ou outras ferramentas de desenvolvimento mais avanadas.


REFERNCIAS
1. Open Handset Alliance Android Overview. Consultado a 9 de Dezembro de 2013, em
http://www.openhandsetalliance.com/android_overview.html .
2. Wikipedia Android (operating system). Consultado a 9 de Dezembro de 2013, em
http://en.wikipedia.org/wiki/Android_(operating_system) .
3. MIT App Inventor Explore. Acedido a 16 de Dezembro de 2013, em
http://appinventor.mit.edu/explore/ .
4. Wikipedia App Inventor for Android. Consultado a 9 de Dezembro de 2013, em
http://en.wikipedia.org/wiki/App_Inventor_for_Android .
5. MIT App Inventor About. Consultado a 9 de Dezembro de 2013, em
http://beta.appinventor.mit.edu/about/ .
6. MIT App Inventor What Is. Consultado a 9 de Dezembro de 2013, em
http://beta.appinventor.mit.edu/learn/whatis/ .
7. Legislao Farmacutica Compilada Despacho Normativo n. 17/2005, de 26 de Julho Fixa os
cdigos de barras que devero constar nas etiquetas das embalagens de todos os medicamentos. Con-
sultado a 9 de Dezembro de 2013, em
http://www.infarmed.pt/portal/page/portal/INFARMED/LEGISLACAO/LEGISLACAO_FARMACEU
TICA_COMPILADA/TITULO_III/TITULO_III_CAPITULO_V/despacho_norm_17_2005.pdf .
8. Infarmed Infomed. Acedido a 16 de Dezembro de 2013, em
http://www.infarmed.pt/infomed/inicio.php .
9. Infarmed Apresentao. Consultado a 9 de Dezembro de 2013, em
http://www.infarmed.pt/portal/page/portal/SOBRE_O_INFARMED/APRESENTACAO .
10. Wikipedia Bula (medicamento). Consultado a 9 de Dezembro de 2013, em
http://pt.wikipedia.org/wiki/Bula_(medicamento) .
11. Google Docs Viewer. Acedido a 16 de Dezembro de 2013, em
https://docs.google.com/viewer .
12. Google Play ZXing. Acedido a 16 de Dezembro de 2013, em
https://play.google.com/store/apps/details?id=com.google.zxing.client.android .

i-A
ANEXO A - DESI GNER
Neste anexo encontra-se um screenshot da janela de Designer

Figura i-A Janela de Designer.

i-B
ANEXO B - BLOCKS
Neste anexo encontram-se screenshots de todos os blocos relativos implementao da aplicao no
Blocks Editor.

Figura i-B varivel TimeToLeave.

Figura ii-B varivel TimeRemaining.

Figura iii-B varivel Action.

Figura iv-B Varivel JS_postToURL_Function.

Figura v-B Procedimento JS_postToURL_CallPath.
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO B Blocks
ii-B

Figura vi-B Procedimento LoginPath.

Figura vii-B Procedimento SearchPath.
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO B Blocks
iii-B

Figura viii-B Procedimento ViewPath.

Figura ix-B Procedimento Login.

Figura x-B Procedimento Search.
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO B Blocks
iv-B

Figura xi-B Procedimento View.

Figura xii-B Procedimento Show.

Figura xiii-B Procedimento Reset.

Figura xiv-B Procedimento Timeout.

Figura xv-B Evento TimeoutWaitButton.Click.

Figura xvi-B Evento TimeoutRetryButton.Click.

Figura xvii-B Evento Timeout.StopButton.Click.
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO B Blocks
v-B

Figura xviii-B Evento Clock.Timer.

Figura xix-B Evento BenGomButton.Click.
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO B Blocks
vi-B

Figura xx-B Evento ZXingButton.Click.

Figura xxi-B Evento BarcodeScanner.AfterScan.

Figura xxii-B Evento BarcodeScannerButton.Click.

Figura xxiii-B Evento BarcodeNumberText-
Box.LostFocus.

Figura xxiv-B Evento InfoButton.Click.

Figura xxv-B Evento SubmitButton.Click.

i-C
ANEXO C EXECUO DA APLICAO
Neste anexo encontram-se screenshots da execuo da aplicao num dispositivo de teste.

Figura i-C Incio da instalao da aplicao.

Figura ii-C Instalao da aplicao.

Figura iii-C Concluso da intalao da aplicao.

Figura iv-C Aplicaes instaladas.
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO C Execuo da Aplicao
ii-C

Figura v-C InstructionsArrangement (superior).

Figura vi-C InstructionsArrangement (inferior).

Figura vii-C Browser iniciado aps pressionar o
boto ZXing.

Figura viii-C Aplicao de Email iniciada aps pres-
sionar o boto para contactar a parceria BenGom.
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO C Execuo da Aplicao
iii-C

Figura ix-C Insero manual de um nmero de regis-
to de medicamento no componente BarcodeNumber-
TextBox.

Figura x-C Janela iniciada pelo componente Barco-
deScanner (o fundo a preto deve-se ao facto da funcio-
nalidade de screenshot no conseguir capturar a ima-
gem captada pela cmara do dispositivo, que, na reali-
dade a apresentada como fundo desta janela).

Figura xi-C WebViewer apresentado folheto Infor-
mativo resultante da consulta efetuada.

Figura xii-C WebViewer apresentado folheto infor-
mativo resultante da consulta efetuada (ampliado).
Relatrio de Desenvolvimento da Aplicao FarmApp ANEXO C Execuo da Aplicao
iv-C

Figura xiii-C TimeoutArrangement aps insero de nmero de registo invlido.