Dengue Em Foco - Aplicação Mobile Modelo Cliente e Servidor

Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor

UNIP Universidade Paulista

Cincia da Computao

Atividades de Prticas Supervisionadas -


Maio/2014

Nome: Mauricio Junio Moura Mendes

Nmero: A61EBI-2 Turma CCA1

Nome: Juliano Avaci da Silva

Nmero: A3528E-5 Turma CCA1


ndice Objetivo ......................................................................................................................................................................1

Introduo ..................................................................................................................................................................2

Fundamentos do protocolo HTTP...............................................................................................................................3

Fundamentos do modelo Cliente/Servidor ................................................................................................................5

Plano de desenvolvimento da aplicao ....................................................................................................................7

Simulao de Execuo da aplicao ...................................................................................................................... 10

O aplicativo mvel ............................................................................................................................................... 11

O mdulo Servidor............................................................................................................................................... 14

A interface Web ................................................................................................................................................... 15

Consideraes Finais ............................................................................................................................................... 16

Relatrio de cdigo fonte ........................................................................................................................................ 17

Servidor: .............................................................................................................................................................. 17

A interface web: .................................................................................................................................................. 17

O app mvel: ....................................................................................................................................................... 18

Bibliografia ............................................................................................................................................................... 21


1

Objetivo

O trabalho teve como objetivo mostrar como as tecnologias atuais,

principalmente as relacionadas aplicativos mveis, podem auxiliar na

identificao e atuao sobre os principais problemas de sade e meio

ambiente.

O objetivo geral mostrar como possvel, atravs de um aplicativo

mvel, ajudar na identificao de focos da dengue, especificamente na regio

de metropolitana de Campinas. Utilizando tecnologias de desenvolvimento de

software atuais e voltadas, principalmente para a mobilidade, desenvolvemos

um aplicativo mvel que se comunica com um Servidor Web atravs do

protocolo HTTP (Hypertext Transfer Protocol), utilizando-se, basicamente do

mtodo de requisio GET. Aplicativo tal, que prov a possibilidade de informar

atravs de coordenadas geogrficas a localizao exata de um foco da

dengue.


2

Introduo

Levando-se em considerao a importncia da identificao e combate

aos focos de dengue em nossa regio, visto que uma das regies no estado

de So Paulo com maior incidncia de casos de dengue nesse ano de 2014,

desenvolvemos um aplicao mvel para a plataforma Android, que visa

informar atravs de coordenadas geogrficas, renderizadas em um mapa web,

onde exatamente esses focos esto.

Para criao de todo o projeto, foi utilizada a linguagem de programao

Java, voltado para a plataforma Android e Web, HTML e Javascript, juntamente

com a API do Google Maps V3. Utilizamos as IDE's Eclipse e Eclipse ADT

(Android Development Tools), que basicamente uma adaptao do Eclipse

original, no entanto voltado para desenvolvimento para a plataforma Android.

Foram utilizadas tcnicas aprendidas em sala de aula e em geral o

conhecimento adquirido ao longo do curso.


3

Fundamentos do protocolo HTTP

O protocolo HTTP um protocolo em nvel de aplicao voltado para

sistemas de informao distribudos e colaborativos. um protocolo genrico

que pode ser utilizados para diferentes tarefas alm de sua aplicao mais

comum, que a transferncia de hipertexto, tais como: servidor de nomes e

sistema de gerenciamento de objetos distribudos. A caracterstica principal do

protocolo HTTP a capacidade de negociao de representao dos dados,

dessa forma os sistemas que o utilizam podem ser construdos

independentemente dos dados que sero transferidos.

Esse protocolo foi desenvolvido por volta de 1990 e largamente

utilizado por toda a Wide Web, isto , as pginas de sites e na transmisso de

vrios outros contedos na grande rede.

Sua especificao simples, porm robusta, largamente utilizado em

aplicaes que segue o paradigma Cliente-Servidor, que falaremos logo em

seguida.

Seu funcionamento baseado no conceito de requisio e resposta,

onde temos requisies vindas de um cliente, o processamento dessa

requisio, ao que essa requisio desencadeia, o processamento da

resposta para o cliente e finalmente o recebimento dessa resposta pelo cliente.

Uma requisio contm basicamente, o tipo: que pode ser GET ou

POST, a URI: que o endereo de onde a requisio est sendo feita, o

HEADER: que contm informaes sobre o cliente agente, isto , a aplicao

que est fazendo tal requisio, entre outras opes, a verso do protocolo e o

BODY: que o corpo propriamente dito da requisio que pode conter dados que

sero enviados para o servidor. A resposta contm os mesmo dados, exceto

por algumas particularidades como: Cdigo de Status, que informam o status

de recebimento ou processamento da requisio, sendo os mais comuns: 200 -

OK, 403 - Proibido, 404 - No encontrado, 500 - Erro interno de Servidor.


4

Veja abaixo a representao de uma requisio/resposta HTTP:

Figura 1 - estrutura de requisio/resposta HTTP.

importante ressaltar que utilizao do protocolo HTTP no

necessariamente s para transmitir texto, pois podemos transmitir dados em

geral como audio, video e arquivos binrios etc.


5

Fundamentos do modelo Cliente/Servidor

O modelo Cliente/Servidor geralmente se refere ao mtodo de

comunicao onde dois ou mais computadores se interagem de modo que um,

denominado Servidor fornea servios aos outros, os Clientes.

Esse modelo logo d a entender que essa interao tem

obrigatoriamente que ser entre computadores diferentes, no entanto, o cliente e

o servidor podem existir na mesma mquina. Um exemplo disso poderia ser

uma aplicao de mensagens de texto centralizada em um servidor, em que os

clientes para trocar mensagens entre si precisam passar por esse servidor; e

uma dessas aplicaes clientes est na mesma mquina que o servidor.

Contudo, preciso ressaltar que para ser caracterizado como uma aplicao

Cliente/Servidor essa aplicao necessariamente tem que ter uma arquitetura

que implemente uma computao distribuda.

Podemos ver abaixo uma figura representando essa abordagem:

Figura 2 - estrutura de um sistema usando abordagem Cliente/Servidor.


6

importante definirmos os papis que cada um exerce nesse modelo:

Cliente:

Inicia e termina a interao com o Servidor, portanto se o Servidor

termina, algo est errado. Dizemos que o servidor est fora do ar,

no responde.

Para se comunicar com outros clientes, necessariamente a

requisio passar pelo servidor.

o ponto de interao do usurio com o sistema, fornece ao

usurio a capacidade de utilizao do sistema sem que o mesmo

saiba como constitudo tal sistema.

Servidor:

Fornece os servios para o cliente.

Nunca inicia uma interao com o cliente, s responde a todas as

requisies deste.

Atende a vrios cliente "ao mesmo tempo".

Nesse trabalho foi utilizado o modelo de Cliente/Servidor simples, no

qual o Servidor nunca inicia uma interao, somente responde todas as

requisies do cliente. Tambm interessante ressaltar adio do conceito de

mobilidade nessa arquitetura, onde um cliente pode muito bem ser uma

aplicao mvel. Ento nosso modelo est mais prximo do que podemos ver

na imagem abaixo, do que do modelo original:

Figura 3 - abordagem Cliente/Servidor utilizada.


7

Plano de desenvolvimento da aplicao

Para a implementao do aplicativo utilizamos a IDE Eclipse para o

desenvolvimento do mdulo Servidor e para Elipse ADT para o aplicativo

mvel, utilizamos o sistema operacional Windows 8 em um notebook com a

seguintes configuraes:

Processador: Intel Core i7 2.37 GHz.

Memria: 8GB RAM DDR2.

HD: 750 GB Sata.

Tela: 14 Widescreen 1366x768.

Sistema Operacional: Windows 8 64 bits.

Para executar o aplicativo mvel:

Smartphone Sony Xperia ZQ

SO Android 4.3 Key Lime Pie

2GB de RAM e 32 de ROM(16 GB SD)

No back-end, ou seja, no mdulo Servidor, utilizamos a verso 1.7 do

JDK Java Development Kit, juntamente com as tecnologias Java EE como

Servlets, e JSP para desenvolvimento da interface Web, o front-end.

Utilizamos tambm tecnologia Javascript para fazer a comunicao com o

Google Maps API V3, framework de mapas do Google utilizado para visualizar

o local que foi informado pelo app mvel como sendo um foco de dengue. Em

relao ao aplicativo mvel, utilizamos a IDE eclipse ADT, Java JDK 1.7, j que

a plataforma escolhida foi o Android, bem como o SDK do Android.


8

Veja abaixo a estrutura de organizao do cdigo fonte do mdulo

Servidor e front-end Web no Eclipse:

Figura 4 - estrutura de cdigo do mdulo Servidor e Front-End Web.

Da mesma forma, podemos ver como est organizado a estrutura de

cdigo fonte do aplicativo mvel no Eclipse ADT:

Figura 5 - estrutura de cdigo do aplicativo mvel.

Na Figura 4 podemos observar o foco na classe MyServlet.java essa

a principal classe do mdulo servidor e ela responsvel por receber as

requisies que chegam do aplicativo mvel e da interface Web, como uma

verso inicial as coordenadas geogrficas que chegam do app mvel so


9

armazenadas em um arquivo de texto (coords.txt), mas a mudana para um

banco de dados como SQLite ou outro de maior porte poderia facilmente ser

integrado, se houver demanda. Essa classe tambm responsvel por

fornecer as coordenadas salvas no arquivo quando solicitado pela View, isto

a interface Web, que pode ser acessada atravs do navegador de internet, bem

como pela aplicao mvel.

A interface Web implementada atravs do arquivo index.jsp, no qual

as coordenadas salvas no arquivo so fornecidas para a API do Google Maps

utilizando Javascript, este por sua vez renderiza e mostra no mapa os place

markers, que so figuras que representam no mapa exatamente o local

indicado pelas coordenadas. Isto pressupe ento, que para visualizar o mapa

de focos da dengue necessrio ter o Javascript habilitado no navegador de

internet.


10

Simulao de Execuo da aplicao

Veremos nessa seo a representao em imagens do passo a passo

de como se d a interao entre todos o processos envolvidos no sistema.

Primeiramente veremos a seguir a representao dessa interao entres o

processos envolvidos. Segue:

Figura 6 - Diagrama de interao entres os processos envolvidos.

Podemos notar que a comunicao entre o cliente mvel e o servidor se

d em duas vias, mas no s pelo fato de este fazer requisies e receber

respostas do Servidor, mas tambm pelo fato de fornecer informaes ao

servidor, como por exemplo a mensagem e as coordenadas do GPS. Em

futuras verses poderemos at mesmo enviar a foto do local, como evidncia

do foco de dengue em questo, juntamente com a mensagem e as

coordenadas do GPS. Como dissemos anteriormente o protocolo HTTP no se

limita a ser aplicado a transferncia de texto somente, podemos tambm

transferir imagens, sons etc. Essa uma funcionalidade bem interessante e s

no foi desenvolvida devido a falta de tempo hbil para implement-la.


11

O aplicativo mvel

O aplicativo foi desenvolvido para a plataforma Android devido a

popularidade dessa nos ltimos anos e o fcil acesso que temos em relao a

mesma, tanto em relao um smartphone com o sistema em si, quanto em

relao ao desenvolvimento de aplicativos para essa referida plataforma.

Entretanto, nada impede o desenvolvimento futuro de verses para outras

plataformas. Na figura a seguir podemos ver o aplicativo instalado no

smartphone, segue:

Figura 7 - cone do aplicativo instalado no smartphone.

Ao tocar sobre o cone do app mostrado a tela inicial, conforme a

Figura 8, onde o usurio pode digitar uma mensagem que ser enviada para o

Servidor junto com as coordenadas do GPS. Nesse caso fica evidente que

alm de uma conexo ativa com a internet o smartphone deve prover a

funcionalidade de obter localizao por GPS.


12

Observe na imagem a seguir a tela onde o usurio enviar as

informaes para o servidor:

Figura 8 - Tela do aplicativo onde o usurio informa um foco de dengue.

O usurio digita uma informao relevante em poucas palavras que

descreva o foco de dengue que o mesmo quer notificar e ento toca o boto

"Informar Foco!", ao tocar nesse boto o texto digitado pego e juntamente

com as coordenadas do GPS enviado ao Servidor atravs do mtodo GET do

HTTP. Importante ressaltar a transparncia que o SDK do Android prov em

relao obteno da localizao por GPS, toda a dificuldade de programao

de baixo nvel encapsulada pelo SDK e s precisamos chamar o mtodo

getLastKnownLocation() fornecido pela classe LocationManager da API do

Android. Como s precisamos de um par de valores, latitude e longitude, esse

mtodo nos fornece exatamente isso, a ultima coordenada GPS conhecida.

Dessa forma precisamos habilitar o GPS no smartphone antes de iniciar o

aplicativo afim de pegar um valor da localidade onde realmente estamos e no

a ultima conhecida de outro lugar onde o usurio esteve com o GPS ativado

pela ultima vez.


13

Veja a seguir a Figura 9 e 10 que mostra o que acontece logo aps o

usurio tocar no boto "Informar Foco!":

Figuras 9 e 10 - Mensagem de confirmao recebida do Servidor e o mapa de focos da dengue sendo mostrado logo em seguida.

Podemos notar que a comunicao com o Servidor foi realizado com

sucesso, uma vez que uma notificao do tipo Push apresentada na tela com

as informaes que foram enviadas ao servidor. Em seguida podemos

visualizar o mapa com os focos da dengue que foram informados por outros

usurios, bem como a foco de dengue que o usurio em questo acabou de

informar.

Vale ressaltar que essa visualizao do usurio pode ser ampliada

atravs do movimento de "pina" que deve ser realizado pelo usurio ou pelo

toque no boto de "+" (mais) que aparece no canto do mapa.


14

O mdulo Servidor

O mdulo servidor basicamente construdo utilizando a tecnologia Java

chamada Servlet, que basicamente classes Java utilizadas para estender as

funcionalidade de um servidor Web, essas classe implementam e encapsulam

mecanismos para tratamento de requisies HTTP entre outros protocolos.

Dessa forma temos a possibilidade de adicionar contedo dinmico a um

servidor Web. No nosso caso, o Servlet foi criado para atender as requisies

do aplicativo mvel e da interface Web. podemos ver na figura abaixo o

instante em que o Servlet trata a requisio do aplicativo mvel:

Figura 11 - Servlet exibindo as coordenadas GPS recebidos do app.

O Servlet prov a possibilidade de receber essas requisies, realizar

qualquer processamento e devolver a resposta ao cliente, o que no seria

possvel s com um servidor Web. E justamente isso que nosso Servlet faz,

recebe as coordenadas do app movl e grava no arquivo de texto, um

operao um tanto quanto simples, mas se fosse necessrio algo mais

complexo, como por exemplo: integrao com um servio de auditoria de

terceiros para validar algo, ou mesmo gravar em um banco de dados essas

informaes, seria muito mais fcil devido a utilizao dessa tecnologia.


15

A interface Web

A interface web est na mesma aplicao que o mdulo servidor. um

pagina HTML como tags JSP (Java Server Pages) em seu contedo. JSP

tambm uma tecnologia Java que prov contedo dinmico em paginas HTML,

uma pginas JSP consiste de uma pgina HTML com tags especficas que

podem realizar um processamento ou recuperar o resultado de um, feito por

um Servlet e apresentar esse contedo de forma de dinmica.

No nosso caso o que o JSP vai processar de forma dinmica o

contedo do arquivo de texto que guarda as coordenadas GPS, referente aos

focos de dengue informados pelos usurios do app mvel. Alm disso nossa

pgina JSP depois de recuperar essas coordenadas fornece-as para a API do

Google Maps utilizando Javascript afim de renderizar na tela o mapa com

marcadores que representam o local exato informado pelas coordenadas GPS.

Veja abaixo a visualizao do mapa atravs de um navegador de

internet:

Figura 12 - Visualizao do mapa de focos da dengue em um Web Browser.


16

Consideraes Finais

Com esse trabalho procuramos pesquisar, estudar, entender e

implementar o conceito de aplicaes distribudas, utilizando a abordagem

Cliente/Servidor e Computao Mvel.

No trabalho as dificuldades enfrentadas foram sanadas de forma

relativamente fcil, uma vez que as plataformas e suas tecnologias que foram

usadas nesse trabalho j esto bem consolidadas no mercado, encontrar

contedo, respostas para as principais dvidas, documentao etc. foi fcil.

A aplicao tem um objetivo simples, porm de grande valia, uma vez

que poderia auxiliar na identificao e combate aos focos de dengue.

Como uma aplicao-teste invariavelmente muita coisa mudaria em

sua implementao final, para ser utilizada pela populao. Podemos citar

essas mudanas, que eventualmente podem ser includas no futuro. So elas:

Implementar um mecanismo de login, afim de identificar os

usurios;

Implementar a funcionalidade de tirar uma foto do local onde foi

encontrado o foco de dengue e renderizar essa foto no Google

Maps no lugar dos place-markers;

Melhorar a interface do App mvel e interface Web visando o

design responsivo;

Implementar a funcionalidade de gravao dos dados em um

banco de dados;

Conclumos com isso que possvel, utilizando-se de tecnologias

acessveis, visto que a maioria das tecnologias envolvidas so gratuitas,

desenvolver solues colaborativas afim de sanar problemas de diversas

reas, principalmente da sade, que so de interesse da sociedade em geral.


17

Relatrio de cdigo fonte

Servidor:

MyServlet.java

public class MyServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String message = request.getParameter("message"); String lat = request.getParameter("lat"); String lng = request.getParameter("lng"); request.setAttribute("lat", lat); request.setAttribute("lng", lng); System.out.println("Coords X [lat]: " + lat); System.out.println("Coords Y [lng]: " + lng); String path = getServletContext().getRealPath("/"); try (PrintWriter out = new PrintWriter(new BufferedWriter( new FileWriter(path + "\\coords.txt", true)))) { out.println(lat + "|" + lng); out.println(""); } catch (IOException e) { // exception handling left as an exercise for the reader e.printStackTrace(); } response.setContentType("text/html"); response.setStatus(HttpServletResponse.SC_OK); response.getWriter().println( "Message: " + message + " coordX: " + lat + " coordY: " + lng); } }

A interface web:

index.jsp

// cdigo de cabealhos HTML padro


18

String line = null; //String[] parts = null; //List parts = new ArrayList(); while ((line = reader.readLine()) != null) { if (line.equals("")) { continue; } String lat = line.substring(0, line.indexOf("|")); String lon = line.substring(line.indexOf("|") + 1); out.print("var point = new google.maps.LatLng(" + lat + "," + lon + ");\n"); out.print("var marker = placeMarker(point);\n"); out.print("\n"); } reader.close(); } catch (Exception ee) { System.out.println(ee.toString()); }%>

// cdigo de rodap HTML padro

O app mvel:

MainActivity.java

public class MainActivity extends Activity {

private double lat; private double lon; private Context context; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context = this; } public void enviarDados(View view) { getLocation(); new Thread() { public void run() { EditText nEt = (EditText) findViewById(R.id.message); postHttp(nEt.getText().toString()); } }.start(); Intent intent = new Intent(context, WebViewActivity.class);


19

startActivity(intent); } public void postHttp(String message) { String coordX = String.valueOf(lat); String coordY = String.valueOf(lon); HttpClient httpClient = new DefaultHttpClient(); String urlGet = "http://192.168.0.11:8080/maps.do?message=" + message.replaceAll("\\s", "") + "&lat=" + coordX + "&lng=" + coordY; HttpGet httpGet = new HttpGet(urlGet); try { final HttpResponse resposta = httpClient.execute(httpGet); runOnUiThread(new Runnable() { public void run() { try { Toast.makeText(getBaseContext(), EntityUtils.toString(resposta.getEntity()), Toast.LENGTH_SHORT).show(); } catch (ParseException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } } private void getLocation() { // Get the location manager LocationManager locationManager = (LocationManager) getSystemService(LOCATION_SERVICE); Criteria criteria = new Criteria(); String bestProvider = locationManager.getBestProvider(criteria, false); Location location = locationManager.getLastKnownLocation(bestProvider); try { lat = location.getLatitude(); lon = location.getLongitude(); } catch (NullPointerException e) { lat = -1.0; lon = -1.0; } } public class MyLocationListener implements LocationListener { public void onLocationChanged(Location loc) { loc.getLatitude();


20

loc.getLongitude(); String text = ""; text += "My current location is: \n"; text += "Latitud = " + loc.getLatitude() + "\n"; text += "Longitud = " + loc.getLongitude(); Toast.makeText(getApplicationContext(), text, Toast.LENGTH_SHORT) .show(); } public void onProviderDisabled(String provider) { Toast.makeText(getApplicationContext(), ((String) "GPS Disabled"), Toast.LENGTH_SHORT).show(); } public void onProviderEnabled(String provider) { Toast.makeText(getApplicationContext(), ((String) "GPS Enabled"), Toast.LENGTH_SHORT).show(); } public void onStatusChanged(String provider, int status, Bundle extras) { } } }


21

Bibliografia

Java : Como Programar

Autor: Harvey M. Deitel

Editora: Bookman, 2005

Use a Cabea! JSP & Servlets

Autor: Sierra, Kathy

Editora: Alta Books, 2008

Google Android - 3 Edio

Autor: Lecheta , Ricardo R.

Editora: Novatec, 2013.

http://www.caelum.com.br/apostila-java-web/servlets/

http://www.inf.ufsc.br/~bosco/downloads/livro-jsp-servlets-j2ee.pdf

https://developer.android.com/about/versions/android-4.3.html

http://cartacampinas.com.br/2014/03/dengue-fica-fora-de-controle-em-

campinas-veja-bairros-da-regiao-mais-afetada/

http://g1.globo.com/sp/campinas-regiao/noticia/2014/04/campinas-chega-17-

mil-casos-de-dengue-na-maior-epidemia-da-historia.html

http://www.w3.org/Protocols/rfc2616/rfc2616.html

Documents

Dengue Em Foco - Aplicação Mobile Modelo Cliente e Servidor