qren smartcp prototipagem e comparação de tecnologias ria vol3 1.1

SmartContentProvider | Entidade Promotora: Parceiros:

Projeto em curso com o apoio de:

18/04/2013

Prototipagem e Comparao de Tecnologias RIA Vol 3



ndice

ndice Figuras .................................................................................................................................2

ndice de Tabelas ...........................................................................................................................3

Introduo .....................................................................................................................................4

Prottipos mobile nativos .............................................................................................................5

Nicereader .................................................................................................................................5

Outras reas/tecnologias mobile ..............................................................................................9

Acelermetro ......................................................................................................................10

Giroscpio ...........................................................................................................................12

Multi-Touch .........................................................................................................................15

Armazenamento e Persistncia de Dados ..........................................................................21



ndice Figuras

Figura 1: Exemplo de aplicao do Nicereader em diferentes plataformas .................................6

Figura 2: Diversos exemplos de contedos do Nicereader ...........................................................7

Figura 3: Esquema do workflows do Nicereader ..........................................................................8

Figura 4: Interactividades e contedos disponveis no Nicereader ..............................................9

Figura 5: Obteno dos dados em bruto do acelermetro .........................................................10

Figura 6: Exemplo de aplicao controlada pelo acelermetro .................................................11

Figura 7: Dados em bruto oriundos do giroscpio ......................................................................13

Figura 8: Rotao sobre os eixos .................................................................................................15

Figura 9: Aplicaes de demonstrao ed capacidades multi-touch ..........................................19

Figura 10: Aplicaes que apresentam contedos de bases de dados SQLite ...........................22



ndice de Tabelas

Tabela 1: Eventos single touch ....................................................................................................16

Tabela 2: Eventos multi-touch ....................................................................................................17



Introduo O presente documento Prototipagem e comparao de Tecnologias RIA Volume 1, 2 e 3

constitui um dos resultados da fase de Estudos Preliminares do projecto SmartCP. Em

particular, sumariza o trabalho realizado no contexto da tarefa Prototipagem e comparao

das principais tecnologias RIA actuais.

Com este estudo, pretende-se numa primeira etapa, efectuar o levantamento das diversas

tecnologias RIA disponveis, tanto num contexto mais convencional de utilizao em

computador e browser web assim como no contexto de ambientes mveis. Numa segunda

etapa, pretende-se aprofundar as tecnologias previamente analisadas e efectuar a

experimentao prtica com diversos prottipos que sejam capazes de evidenciar as vantagens

e pontos fracos de cada tecnologia.

ainda importante frisar que a rea das tecnologias associadas aos RIA muito dinmica e est

em constante alterao e evoluo. Dai a necessidade de efectuar periodicamente este estudos

de anlise e de comparao para ser possvel, acompanhar esse ritmo elevado de evoluo e

de constante mudana.

O presente documento constitudo por diversas seces, sendo apresentadas

individualmente de seguida.

Introduo aos RIA, no primeiro volume, a seco onde se efectua uma apresentao e

esclarecimento dos conceitos basilares associados ao contexto dos RIA.

Na seco Tecnologias RIA em estudo, no primeiro volume, so apresentadas de uma forma

breve, as diversas tecnologias que sero analisadas em maior profundidade ao longo deste

mesmo documento.

De seguida surgem no documento as seguintes seces, cada uma referente a uma tecnologia

concreta, nomeadamente; Silverlight, Flash, HTML5 no primeiro volume, e Android, iOS,

Windows Phone, Windows 8, PhoneGap e Appcelerator Titanium no segundo volume. Todas

estas seces seguem um padro referente s subseces para cada uma delas. Essas

subseces so as Ferramentas, os Formatos, as Linguagens e os Prottipos. Por sua

vez a subseco dos prottipos ainda pode estar subdividida noutras seces mais pequenas,

como por exemplo Vdeo, Objectos 3D, WebCam, Upload de Ficheiros e interaco.

No fim do documento (terceiro volume) ainda apresentada outra seco sobre Prottipos

Nativos em tecnologias mobile, onde se analisa a aplicao VIATECLA Nicereader, que constitui

um exemplo de aplicao transversal de vrias destas tecnologias. Por fim, ainda se analisa em

maior detalhe e com os respectivos prottipos a utilizao de Acelermetros, Giroscpios,

Multi-Touch e Armazenamento e Persistncia de Dados.



Prottipos mobile nativos

Para concluir o estudo e anlise referente s diferentes tecnologias mobile nativas, no iro ser

analisados unicamente prottipos individuais representativos de cada uma tecnologias

individualmente. No entanto, ser analisada uma ferramenta / plataforma, j existente (e

desenvolvida pela VIATECLA), que possui valncias tecnolgicas nessas diversas tecnologias.

Desta forma ser mais fcil efectuar esse estudo, assim como a comparao entre as diferentes

caractersticas e a obteno de concluses relevantes para o desenvolvimento do projecto

SmartCP.

Nicereader

O Nicereader uma plataforma de distribuio de publicaes / documentos, que permite criar

e disponibilizar contedos dinmicos e interactivos para mltiplas plataformas, nomeadamente

por via Web e tablet (iPad, android e windows 8).

O Nicereader uma soluo completa de digital publishing, que suporta formatos definidos

para papel, ou criados especificamente para dispositivos digitais. Neste seguimento, a

plataforma permite a apresentao de contedos de origem documental (e.g. livros, revistas,

jornais, documentos), enriquecidos com elementos multimdia, como udio, vdeo, slide

shows, links internos e externos, grficos, infografias interactivas, hotspots, simuladores,

questionrios e scrolls fluidos e dinmicos. Tambm permite efectuar pesquisas rpidas sobre

os contedos publicados, assim como, permite facilmente estabelecer ligaes com

plataformas de compras online j existentes, permitindo assim inclusive, ser utilizado como um

catlogo.

Para alm do enriquecimento da experincia papel atravs de elementos multimdia,

permite ainda a incluso de apontadores para contedos externos prpria aplicao. Assim

possvel utilizar o contedo documental, como guia para recursos ou servios relacionados, e

que complementem a experincia papel, criando assim um factor de enriquecimento dos

contedos, orientando-os aos RIA, provocando assim uma experincia gratificante imersiva

para o utilizador.



Com o Nicereader tambm possvel efectuar facilmente a partilha dos diversos contedos

pelas diferentes redes sociais, em que distancia de um clique, o utilizador/consumidor dos

contedos pode facilmente difundir esses contedos.

Figura 1: Exemplo de aplicao do Nicereader em diferentes plataformas

Na Figura 1 so apresentados dois exemplos da utilizao do Nicereader em duas plataformas

diferentes, nomeadamente por via de iPad e por via Web convencional.

J na Figura 2 so apresentados diversos contedos em diversas formas, desde as mais

convencionais, semelhantes a livros/revistas e a exemplos mais interactivos e visualmente

apelativos.



Figura 2: Diversos exemplos de contedos do Nicereader

Para construir uma publicao para o Nicereader existe um workflow fcil e intuitivo de ser

concretizado geralmente por uma equipa editorial. Esse workflow constitudo por trs etapas,

nomeadamente a composio e edio, a publicao e a distribuio.

Na Figura 3 apresentado esquematicamente o workflow anteriormente referido.

Na primeira fase desse workflow efectuada uma preparao e utilizada a aplicao desktop

Nicereader Composer para o carregamento do documento (com base em contedo existente

como PDFs ou imagens) e posterior enriquecimento. O processo de enriquecimento consiste na

adio de contedos multimdia como imagens, vdeo ou udio, assim como apontadores para

recursos externos (geralmente URLs de sites com informao complementar). Estes

apontadores externos, quando utilizados numa perspectiva comercial podem apontar para

parceiros que pretendam fazer o upselling dos seus produtos (funcionando o documento como

catlogo de servios / produtos).

Finalizada a fase de preparao, o documento enriquecido submetido / publicado na

componente servidor tornando-se disponvel ao utilizador final, mediante o modelo comercial

associado, e definido em Backoffice (e.g. gratuito, pago, publicidade, subscrio).



Por ltimo, a terceira fase diz respeito disponibilizao e entrega dos contedos em ambiente

multi-dispositivo (e.g. Web, iPad, Android, Windows 8). Nesta etapa tambm efectuada a

recolha de informao de utilizao realizada pelos consumidores e que pode eventualmente

ajudar a refinar o processo de utilizao de toda a plataforma.

Figura 3: Esquema do workflows do Nicereader

Para finalizar, na Figura 4, so apresentadas as diferentes formas de interagir com o Nicereader

( altura da escrita do documento) por via de dispositivos com ecr tctil. Na mesma figura,

tambm apresentado, um resumo dos diferentes tipos de contedos que podem ser utilizados

para enriquecer os documentos e a informao inserida no Nicereader.



Figura 4: Interactividades e contedos disponveis no Nicereader

Outras reas/tecnologias mobile

Embora o captulo anterior sobre o Nicereader um ptimo exemplo transversal de aplicao

presente nas diversas tecnologias mobile, nomeadamente em iOS, Android e Windows 8, os

pormenores tcnicos no foram abrangidos na analise desta aplicao devido a queste de

copyright da VIAECLA. Assim, de seguida, sero analisados em maior detalhe alguns desses

aspectos que ainda no foram aprofundados.



Acelermetro

O acelermetro um dispositivo elctrico que actualmente instalado em praticamente todos

os dispositivos mobile, tanto smarthphones como tablets. Esse dispositivo permite, como o

nome indica, detectar e quantificar aceleraes e consequentemente movimentos. Com este

dispositivo possvel criar aplicaes e interfaces mais interactivas, que no fiquem

dependentes apenas da interaco por via do teclado ou do ecr tctil, mas tambm possam

receber interaco por via de movimentos induzidos pelo prprio utilizador.

Existem diversas aplicaes para as diversas plataformas mobile que podem servir de exemplo

ao funcionamento do acelermetro e que simplesmente exibem os dados em bruto

provenientes do sensor. Na Figura 5 so apresentadas duas aplicaes que mostram esses

dados em bruto. No lado esquerdo possvel visualizar esses valores na forma numrica, j no

lado direito possvel visualizar esses dados numa forma grfica.

Figura 5: Obteno dos dados em bruto do acelermetro

Por sua vez estes dados do sensor podem ser facilmente utilizados noutras aplicaes

interactivas.



Na Figura 6 apresentado um exemplo de um jogo bastante simples em que todos os

movimentos do veiculo so inteiramente controlados por via do acelermetro.

A unidade de medida obtida por este sensor referente a acelerao por isso o seu output

me m/s2.

Figura 6: Exemplo de aplicao controlada pelo acelermetro

Ainda em relao s aplicaes exemplo da Figura 5 e da Figura 6, possvel encontrar essas

aplicaes respectivamente em:

https://play.google.com/store/apps/details?id=uk.co.drdv.AccelerometerChecker&feature=se

arch_result#?t=W251bGwsMSwxLDEsInVrLmNvLmRyZHYuQWNjZWxlcm9tZXRlckNoZWNrZXIiX

Q..

https://play.google.com/store/apps/details?id=com.integer3d.toytruckrally&feature=search_r

esult#?t=W251bGwsMSwxLDEsImNvbS5pbnRlZ2VyM2QudG95dHJ1Y2tyYWxseSJd

No que respeita implementao tcnica e ao nvel de linguagem de programao vai ser dado

o exemplo apenas da plataforma mobile (Android). Para as restantes plataformas, o acesso ao

acelermetro e outros sensores, mesmo com linguagens diferentes, efectuado de forma

bastante semelhante..

Inicialmente necessrio declarar o cdigo dentro de uma classe que implemente o interface

SensorEventListener. Esse interface o que obtm os acessos aos sensores. Obtendo-se algo

do tipo:



public class MainActivity extends Activity implements SensorEventListener { }

Depois necessrio declarar e inicializar o gestor de sensores e o sensor especifico,

nomeadamente o acelermetro:

private SensorManager mSensorManager;

private Sensor mAccelerometer;

mSensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE);

mAccelerometer = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);

Aps este passo, apenas necessrio declarar um evento que apanha as alteraes nos valores

obtidos pelo sensor em causa, como por exemplo:

public final void onSensorChanged(SensorEvent event)

{

float x = event.values[0];

float y = event.values[1];

float z = event.values[2];

}

Desta forma as variveis x, y e z de tipo float, vo ser actualizadas sempre que o sensor emitir

novos valores referentes aos movimentos sofridos pelo dispositivo. Neste caso so utilizadas

trs variveis (x,y e z) que representam as coordenadas nas 3 dimenses espaciais.

Giroscpio

O giroscpio um outro sensor presente na grande maioria dos dispositivos mobile e por norma

utilizado para melhorar as funcionalidades dos acelermetros. Ele utilizado para determinar

e calcular a direco e a rotao do dispositivo. Em semelhana ao acelermetro, tambm

existem aplicaes simples que exibem simplesmente os dados em bruto, provenientes deste

sensor.



Na Figura 7 so apresentados exemplos de aplicaes que fazem a apresentao de dados

provenientes do giroscpio, tanto na forma grfica, como na forma numrica.

Estes dados obtidos, so actualizados centenas de vezes por segundo, permitindo que sejam

criadas aplicaes que utilizem estes dados praticamente em tempo real sem qualquer tipo de

atraso.

A unidade obtida deste sensor a velocidades angular, por isso a unidade o rad/s.

Figura 7: Dados em bruto oriundos do giroscpio

Em relao ao exemplo de aplicao concreta apresentada na Figura 7, esta pode ser utilizada

para testes e experimentao em

https://play.google.com/store/apps/details?id=com.innoventions.sensorkinetics&feature=sear

ch_result



Ao nvel de cdigo de programao, em tudo muito idntica s declaraes necessrias para

aceder ao acelermetro. Dessa forma necessrio declarar uma classe que utiliza o interface

que escuta os sensores, declarar o sensorManager e o respectivo sensor. Que neste caso o

giroscpio. E pro fim, declarar o evento que vai detectar alteraes nesse sensor.

public class MainActivity extends Activity implements SensorEventListener { }

private SensorManager mSensorManager;

private Sensor mAccelerometer;

mSensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE);

mAccelerometer = mSensorManager.getDefaultSensor(Sensor.TYPE_GYROSCOPE);

public final void onSensorChanged(SensorEvent event)

{

float pitch = event.values[0];

float roll = event.values[1];

float Yaw = event.values[2];

}

Neste caso a interpretao dos resultados provenientes do sensor tem de ser mais cuidada e j

no to obvia. Continua-se a receber trs variveis, no entanto, cada uma diz respeito

rotao em torno de um determinado eixo (x, y, z).

Na Figura 8 apresentado um esquema grfico para facilitar a compreenso do conceito da

rotao sobre os eixos.



Figura 8: Rotao sobre os eixos

Multi-Touch

No inicio dos dispositivos tcteis, os displays eram bastante limitados e bsicos, permitindo

apenas toque simples com um dedo, em aces semelhantes s elementares efectuadas com o

cursor de um mouse e com clique simples. No entanto, em pouco tempo essa tecnologia passou

a ser considerada obsolenta e rapidamente deu lugar designada por multi-touch ou ecr

multitctil. Essa tecnologia est presente em praticamente todos os dispositivos smartphone

ou tablets e permitiu melhorar bastante esta interface de interaco homem mquina. Dessa

forma, a tecnologia touch j no se limita a um simples cursos com a possibilidade de clique

simples. A possibilidade de utilizar vrios dedos abriu um novo leque de possibilidades.

Na verso single touch estavam disponveis as seguintes interaces, visveis na Tabela 1.



Tabela 1: Eventos single touch

Clique Duplo Clique

Clique prelongado

Scroll



Pan

Flick

J na Tabela 2 so apresentadas algumas das diversas formas de interaco multi-touch mais

comuns.

Tabela 2: Eventos multi-touch

Clique com dois dedos

Scroll com dois dedos



Zoom Out

Zoom In

Rotao

No entanto, as interaces multi-touch no ficam limitadas a um utilizador, muitos dipositivos

permitem detectar mais de 10 pontos de contacto, estando assim preparados para executar

aplicaes colaborativas com mais de um utilizador em simultneo.



Figura 9: Aplicaes de demonstrao ed capacidades multi-touch

Na Figura 9 so apresentadas diversas aplicaes dedicadas a demonstrar as funcionalidades

multi-touch. A aplicao da esquerda faz a simples contagem e indicao dos diversos dedos

em contacto com o ecr tctil. A imagem central mostra outra aplicao, que para alem de

mostrar onde os dedos esto em contacto com a tela, tambm indica as coordenadas espaciais

onde esta a ser efectuado esse toque. J a imagem do lado direito, apresenta a medio da

distancia de um evento Pinch. Essa medio ao ser incrementada ou decrementada pode ser

facilmente traduzida numa aco de zoom-in ou zoom-out.

Os diferentes prottipos podem ser encontrados respectivamente em:

https://play.google.com/store/apps/details?id=com.the511plus.MultiTouchTester&hl=pt_PT

https://play.google.com/store/apps/details?id=com.electronmagic&feature=related_apps

https://play.google.com/store/apps/details?id=org.metalev.multitouch.visualizer2&feature=se

arch_result

A nvel mais tcnico referente ao cdigo fonte, para detectar a diferena entre a interaco

single touch e multi touch basta criar um objecto MotionEvent o que consiste algo semelhante

a:
https://play.google.com/store/apps/details?id=com.electronmagic&feature=related_appshttps://play.google.com/store/apps/details?id=org.metalev.multitouch.visualizer2&feature=search_resulthttps://play.google.com/store/apps/details?id=org.metalev.multitouch.visualizer2&feature=search_result



public boolean onTouchEvent(MotionEvent event){

if (event.getPointerCount() > 1) {...

Para alm da utilizao do MotionEvent, tambm com um simples if e um mtodo

getPointCount fcil obter a contagem de quantos dedos esto a ser utilizados na interaco

com o display. Com este simples if, possvel criar cdigo e comportamentos consoante a

interaco seja efectuada com um ou dois dedos.

Depois para detectar os diferentes tipos de interaco basta evocar diferentes mtodos sobre

a classe MotionEvent. No cdigo seguinte so apresentados diversos exemplos:

public static String actionToString(int action) {

switch (action) {

case MotionEvent.ACTION_DOWN: return "Down";

case MotionEvent.ACTION_MOVE: return "Move";

case MotionEvent.ACTION_UP: return "Up";

case MotionEvent.ACTION_OUTSIDE: return "Outside";

}

No ACTION DOWN possvel detectar quando o utilizador coloca um dedo sobre a tela. O

ACTION MOVE detecta quando o utilizador aps colocar o dedo na tela e o arrasta efectuando

um movimento. O ACTION UP detecta quando o utilizador volta a tirar o dedo da tela. Por fim,

o ACTION OUTSIDE detecta quando o utilizador toca fora da rea onde se est a efectuar a

monitorizao dos eventos de toque.

Caso seja pretendido obter as coordenadas especificas do toque, continua-se a utilizar a classe

MotionEvent e tambm a classe MotionEventCompat. No exemplo seguinte apresentado

como se obtm as coordenadas (x,y) de um toque na tela e como so guardadas nas variveis

xPos e yPos.

int index = MotionEventCompat.getActionIndex(event);

int xPos = -1;

int yPos = -1;

xPos = (int)MotionEventCompat.getX(event, index);

yPos = (int)MotionEventCompat.getY(event, index);



Armazenamento e Persistncia de Dados

Nos dispositivos mveis conhecida a sua limitao no que diz respeito ao espao de

armazenamento e capacidade de processamento. No entanto, devido ao aumento da

complexidade e da importncia de algumas aplicaes em contexto mobile, foi necessrio

arranjar formas de estruturar e organizar os dados utilizados pelas aplicaes. A principal

soluo e transversal a praticamente todas as plataformas mobile, passa pelo SQLite.

No segmento mobile as plataformas que suportam e adoptaram o SQLite so:

Windows Phone 8

iOS

Symbian

Maemo

Android

MeeGo

webOS

Muitas das plataformas mobile acabam por dar ao programadores ferramentas e interfaces

especificas para eles trabalharem com dados que facilitam a implementao do cdigo e

permitem efectuar pesquisas indirectamente sem a necessidade de saberem SQL. No entanto,

essas ferramentas acabam sempre por assentar e ter a sua base de funcionamento em mais

baixo nvel no SQLite.

O SQLite essencialmente uma base de dados relacional compacta e de pequenas dimenses.

Graas a isso, bastante portvel e favorvel instalao em dispositivos mobile.

inteiramente desenvolvida em C a pensar na performance, sendo um projecto open source.

Ao contrrio das bases de dados convencionais que apenas a sua instalao ocupa centenas de

MBytes, o SQLite ocupa apenas 350 KBytes. Outra grande diferena entre o SQLite e as bases

de dados convencionais, que a base de dados e a API/driver geralmente designada por ODBC

(Open DataBase Connectivity) so programas e processos diferentes e separados. Ao

funcionarem em conjunto acaba por haver um maior consumo de memria e de recursos. J no

SQLite, o ODBC est integrado na prpria base de dados, garantindo assim um ligeiro aumento

de performance e uma maior optimizao de recursos.

O SQLite tambm se distingue por permitir que os pedidos de consulta base de dados em

ambientes com concorrncia sejam satisfeitos em paralelo, o que tambm resulta num



incremento de performance. J os acessos para escrita no podem ser efectuados em paralelo

devido a questes de integridade dos dados.

Embora o funcionamento e a utilizao do SQLite seja completamente transparente para o

utilizador final da aplicao, que nem se apercebe que ele existe e que est a trabalhar como

base da aplicao utilizada. Existem algumas aplicaes especificas para permitir navegar e

visualizar as tabelas e os seus contedos alojados na instancia local de SQLite.

Na Figura 10 so apresentados exemplos de duas aplicaes capazes de efectuar essas

consultas. esquerda apresentada uma listagem das tabelas presentes na base de dados,

enquanto que na figura da direita j so apresentados os dados presentes no interior de uma

tabela.

Figura 10: Aplicaes que apresentam contedos de bases de dados SQLite



Os prottipos apresentados na Figura 10 podem ser encontrados para a realizao de

experiencias e testes em:

https://play.google.com/store/apps/details?id=me.jromero.connect2sql&feature=related_app

s

https://play.google.com/store/apps/details?id=compark.fw.hu&feature=search_result#?t=W2

51bGwsMSwyLDEsImNvbXBhcmsuZncuaHUiXQ..

A mais baixo nvel, as chamadas a comandos do SQLite acabam por ser praticamente idnticas

entre as diversas plataformas mobile, visto as querys do SQLite serem iguais em qualquer

sistema. As diferenas esto presentes apenas na maneira como se invocam as classes e as

bibliotecas necessrias para utilizar estas funcionalidades.

Ao nvel de Android basta carregar o seguinte package para se ter acesso a todas as

funcionalidades da base de dados:

android.database.sqlite

Sem se pretender aprofundar muito as noes bsicas de linguagens derivadas de SQL, para

executar uma query, pode ser efectuada pela via RAW, ou seja, aceite uma query normal de

SQL, como por exemplo:

public Cursor getContactos(){

Cursor cursor = database.rawQuery("select _id, nome,

telefone, foto from contactos2", null);

return cursor;

}

J no caso de ser efectuada a query por via estruturada, a forma seria a seguinte:

public Contacto getContacto (int idContacto){

Cursor cursor = database.query(DB.TABLE_NAME, allColumns,

DB.ID + " = " + idContacto, null,null, null, null);

cursor.moveToFirst();

return cursorToContacto(cursor);

}
https://play.google.com/store/apps/details?id=me.jromero.connect2sql&feature=related_appshttps://play.google.com/store/apps/details?id=me.jromero.connect2sql&feature=related_appshttps://play.google.com/store/apps/details?id=compark.fw.hu&feature=search_result#?t=W251bGwsMSwyLDEsImNvbXBhcmsuZncuaHUiXQhttps://play.google.com/store/apps/details?id=compark.fw.hu&feature=search_result#?t=W251bGwsMSwyLDEsImNvbXBhcmsuZncuaHUiXQ

qren smartcp prototipagem e comparação de tecnologias ria vol3 1.1

Documents