Você está na página 1de 23

Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor

UNIP Universidade Paulista



Cincia da Computao






Atividades de Prticas Supervisionadas
-
Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor

Maio/2014


Nome: Mauricio Junio Moura Mendes
Nmero: A61EBI-2 Turma CCA1
Nome: Juliano Avaci da Silva
Nmero: A3528E-5 Turma CCA1

Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor


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










Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.
















Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.















Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.


Dengue em Foco - Aplicao Mobile modelo Cliente/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.









Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.





Dengue em Foco - Aplicao Mobile modelo 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.
Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.








Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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
Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.












Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.

Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.





Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.




Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.



Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.






Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
15

A interface Web
A interface web est na mesma aplicao que o mdulo servidor. um
pagina HTML como tags J SP (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.


Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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.




Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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

<%try {

out.println(request.getContextPath());

BufferedReader reader = new BufferedReader(new
FileReader(
jspPath + "\\coords.txt"));

Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
18

String line = null;

//String[] parts = null;

//List<String> parts = new ArrayList<String>();

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);
Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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();
Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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)
{

}
}

}













Dengue em Foco - Aplicao Mobile modelo Cliente/Servidor
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

Você também pode gostar