UNIVERSIDADE PAULISTA - UNIP

Tatuap
Cincia da Computao

ATIVIDADES PRTICAS SUPERVISIONADAS

DESENVOLVIMENTO DE UMA APLICAO DE SISTEMA DISTRIBUDO PARA
DISPOSITIVO MVEL

Alex Assuno B42CFJ-7

Stwart Douglas B493ED-8
Thiago Cottecco B5578E-0

SO PAULO
2015

Sumrio

OBJETIVO DO TRABALHO................................................................................. 1

INTRODUO ..................................................................................................... 3

CONCEITOS GERAIS ......................................................................................... 6

3.1

Android .......................................................................................................... 6

3.2

JSON (JavaScript Object Notation) ............................................................... 8

3.3

API (Application Programming Interface) ...................................................... 9

3.4

Sistemas Distribudos .................................................................................... 9

3.5

Engenharia de Software .............................................................................. 10

3.6

Web Service ................................................................................................ 10

PLANO DE DESENVOLVIMENTO DA APLICAO ......................................... 12

4.1

App Inventor ................................................................................................ 12

4.2

XML ............................................................................................................. 12

4.3

PHP ............................................................................................................. 14

4.4

HTML 5........................................................................................................ 14

4.5

Bootstrap ..................................................................................................... 16

4.6

JavaScript .................................................................................................... 16

PROJETO .......................................................................................................... 18

RELATRIO COM AS LINHAS DO CDIGO DO PROGRAMA ....................... 22

6.1

Aplicativo ..................................................................................................... 22

6.2

Servidor ....................................................................................................... 22

APRESENTAO DO PROGRAMA EM FUNCIONAMENTO .......................... 30

7.1

Apresentao do programa em funcionamento em um computador ........... 30

7.2

Apresentao do programa em funcionamento em um dispositivo mvel ... 31

BIBLIOGRAFIA .................................................................................................. 36

FICHA DE ATIVIDADES PRTICAS SUPERVISIONADAS .............................. 40

OBJETIVO DO TRABALHO

Oculta pelo asfalto, uma imensido de gua corre por mais de 1.500 km de rios e
crregos espalhados por toda a cidade. Antes usados pelos ndios como fonte de
navegao e alimento, passaram a ser tratados como obstculo ao desenvolvimento
e modernizao de So Paulo conforme o aumento da povoao. "Optou-se, ento,
por canaliz-los e escond-los para a construo de ruas e avenidas", explica a
arquiteta e urbanista ROLNIK. No entanto, na poca das chuvas - no h como contlos. Completamente cheios, eles transbordam e, como suas vrzeas esto ocupadas,
inclusive por moradias, ocorrem as enchentes. "Elas so produto da urbanizao",
avalia a gegrafa SEABRA.

A situao se agrava ainda mais porque o solo da capital paulista pouco

permevel - tem apenas 40% de vegetao, segundo a Secretaria do Verde e do Meio
Ambiente. "A gua no tem para onde escorrer, fica na superfcie e vai direto para os
rios", analisa o gelogo RODRIGUES.

O objetivo principal deste trabalho desenvolver uma aplicao baseada em

sistemas distribudos para dispositivo mvel que dever gerenciar as informaes
ambientais urbanas.

O aplicativo desenvolvido permitir que os usurios possam visualizar em um

mapa onde existem pontos de alagamento, caso o mesmo esteja em meio a esta
situao, ele poder usar o aplicativo para informar aos outros usurios que aquela
rea tambm est alagada. As informaes a respeito da localizao dos usurios
sero obtidas atravs da API do Google Maps, que responsvel por capturar as
coordenadas do usurio quando o aplicativo executado. Sempre que os usurios
acessarem o aplicativo para informar que esto em um ponto de alagamento, as
informaes sero gravadas em um arquivo XML, que a fonte de informaes que
sero fornecidas na interface a todos os utilizadores do servio.

Os smartphones devero possuir sistema operacional Android para utilizar o App,

que foi escolhido por ser amplamente utilizado no mundo, e possuir uma interface
agradvel e intuitiva. Dispositivos com outros sistemas operacionais (iOS, Windows
Phone e etc.) podero utilizar o servio atravs do Navegador web (Browser). Para
que o sistema funcione corretamente necessrio que o dispositivo utilizado pelo
usurio possua o recurso de GPS.

INTRODUO

Em um mundo globalizado, competitivo e de mudanas complexas, os aparelhos

smartphones esto sendo utilizados em grande escala e tem sido cada vez mais
importante na vida dos usurios.

Segundo dados do IDC International Data Corporation de 2013, a plataforma

Android possuem aproximadamente 65% da fatia de mercado, o que representa o
grande aceite da populao e confiabilidade na plataforma de sistema, destacando
ainda para o fato dos usurios possurem planos e pacotes que os permitem acessar
a internet atravs das coberturas 3 e 4G, confirmando a tendncia de mercado e a
incluso tecnolgica da populao.

Com isso, a necessidade de desenvolver aplicativos de qualidade e que atendam

as exigncias, necessidades e a melhoria na qualidade de vida dos usurios vm
crescendo exponencialmente.

Os sistemas de informao na internet tm passado por uma expanso fantstica,

acompanhando o crescimento da rede. Os portais fornecem informaes sobre
diversos ambientes de trabalho: Livrarias fornecem informaes sobre obras e
publicaes, portais e noticias fornecem informaes diversas, grandes magazines
lanaram lojas virtuais que fazem a venda de seus produtos e recebem o pagamento
via eletrnica.

Seguindo os preceitos da Engenharia de Software, Qualidade de Software e

Sistemas Distribudos, ser desenvolvida uma aplicao para dispositivo mvel que
informar aos usurios os pontos de alagamentos atravs de um mapa. Este servio
ser disponibilizado utilizando Web Service.

Antes de nos aprofundarmos nos conceitos e tecnologia de Web Services,

vejamos um pouco sobre sua evoluo: No ano de 2000, a W3C (World Wide Web
Consortium) aceitou a submisso do Simple Object Access Protocol (SOAP). Este
formato de mensagem baseado em XML estabeleceu uma estrutura de transmisso
para comunicao entre aplicaes (ou entre servios) via HTTP. Sendo uma
tecnologia no amarrada a fornecedor, o SOAP disponibilizou uma alternativa atrativa
em relao aos protocolos proprietrios tradicionais, tais como CORBA e DCOM
No decorrer do ano seguinte, o W3C publicou a especificao WSDL. Uma nova
implementao do XML, este padro forneceu uma linguagem para descrever a
interface dos Web Services. Posteriormente suplementada pela especificao UDDI
(Universal Description, Discovery and Integration), que proporcionou um mecanismo
padro para a descoberta dinmica (dynamic discovering) de descries de servio,
a primeira gerao da plataforma de Web Services foi estabelecida.

O sistema operacional Android a plataforma de dispositivo mvel mais utilizada

no mundo, conforme demonstra o grfico abaixo:

Figura 1: IDC worldwide smartphone shipments

Com base nas informaes obtidas na pesquisa sobre a utilizao de dispositivos

mveis, o App ser desenvolvido para smartphones com sistema operacional Android,
pois atender um nmero maior de usurios. Dispositivos com outros sistemas
operacionais (iOS, Windows Phone e etc.) podero utilizar o servio atravs do
Navegador web (Browser). Para que o sistema funcione corretamente necessrio
que o dispositivo utilizado pelo usurio possua o recurso de GPS.

3.1

CONCEITOS GERAIS

Android

o sistema operacional do Google baseado em Linux, surgiu durante a

ascenso dos dispositivos touchscreen e est presente em smartphones e tablets. O
sistema operacional Android tem funcionamento idntico a de outros sistemas
operacionais e so responsveis por gerenciar as tarefas dos dispositivos, alm de
fornecer uma interface visual para interao com os usurios. A principal vantagem
do Android utilizar a loja virtual Google Play, que fornece aplicativos e jogos para o
sistema operacional. O Android foi criado em 2003 por Andy Rubin, Rico Miner e Nick
Sears e em 2005 foi comprada pelo Google. Desde o seu lanamento em 2008, o
Android j teve mais dez verses diferentes, sendo elas:

3.1.1 Android 1.0

Lanado em setembro de 2008, a primeira verso do Android possua
aplicativos do Google e outros recursos bsicos. A loja de aplicativos chamava-se
Android Market.

3.1.2 Android 1.1

Lanada em fevereiro de 2009, a verso 1.1 do Android foi a primeira
atualizao do sistema, corrigindo falhas e bugs da verso anterior.

3.1.3 Android 1.5 (Cupcake)

A verso 1.5 do Android foi lanada em abril de 2009 e foi a primeira a ganhar
um apelido de sobremesa, padro at os dias atuais. Nesta verso teve-se a incluso
dos Widgets, transio de telas animadas e melhorias no teclado.

3.1.4 Android 1.6 (Donut)

A verso 1.6, lanada em setembro de 2009, trouxe suporte resoluo 800 x

480, a incluso de uma caixa de buscas na tela inicial, para facilitar pesquisas internas
e na web, alm de melhorar a facilidade de uso para o Google Play, possibilitando a
incluso de screenshots de aplicativos.

3.1.5 Android 2.0 a 2.1 (Eclair)

A verso 2.0 foi a primeira atualizao radical do Android, lanada em outubro
de 2009, trazendo uma nova interface, velocidade de hardware otimizada, suporte ao
HTML5 e a possibilidade de incluso de vrias contas no aparelho, para sincronizao
de diversas fontes diferentes. At a verso 2.1 ocorreram apenas correes de bugs.

3.1.6 Android 2.2 a 2.2.3 (Froyo)

Lanada em maio de 2010, a verso 2.2, trouxe novidades que eram invisveis
aos usurios, como a otimizao de velocidade, memria e desempenho. Nesta
atualizao tambm inclui-se a possibilidade de transformar o celular em um hotspot
de Wi-Fi e instalao de aplicativos em cartes de memria removveis. At a verso
2.2.3 ocorreram apenas correes de falhas de segurana e bugs.

3.1.7 Android 2.3 a 2.3.7 (Gingerbread)

Era a verso mais popular e duradoura do Android at pouco tempo, foi lanada
em dezembro de 2010 e trouxe interface renovada, suporte a resoluo HD e passou
a aceitar mltiplas cmeras em um mesmo dispositivo.

3.1.8 Android 3.0 a 3.2 (Honeycomb)

Lanado em fevereiro de 2011, foi o nico sistema operacional desenvolvido
para tablets, sua interface foi otimizada para este tipo de dispositivo. A verso 3.0
tambm trouxe melhorias de cmeras, na navegao da internet, simplificao de
multitarefas, processadores de mltiplos ncleos e passou a permitir a encriptao
dos dados dos usurios.

3.1.9 Android 4.0 a 4.0.4 (Ice Cream Sandwich)

A verso 4.0 do Android, lanado em outubro de 2011, trouxe como novidade
os botes virtuais disponveis nos tablets com Honeycomb, acabando com a
necessidade das teclas fsicas. Apresentou o Android Bean, que permitia o envio de
arquivos por aproximao dos aparelhos, por meio de NFC. Na verso 3.0 tambm
inclui a possibilidade de acessar aplicativos pela tela de bloqueio e desbloqueio.

3.1.10 Android 4.1 a 4.2.2 (Jelly Bean)

A verso 4.1 do Android foi lanada em Julho de 2012 e est presente tanto em
tablets quanto em smartphones, com interface renovada e mais elegante. J na
verso 4.2, inclui-se a tecnologia Photo Sphere, para a produo de imagens 360 e
trouxe a possibilidade de realizar gestos na tela de desbloqueio para acessar
rapidamente a cmera do celular.

3.1.11 Android 4.4 (KitKat)

Lanada em outubro de 2013, a verso 4.4 trouxe melhorias de desempenho
para tornar o sistema mais suave e responsivo nos smartphones de baixo custo, alm
de otimizar o consumo de memria, suporte a novos gestos.

3.1.12 Android 5.0 (Lollipop)

A verso 5.0, lanada em novembro de 2014 a verso mais atual do sistema
operacional e trouxe novas e mais fludas animaes, design mais minimalista, nova
paleta de cores, novas formas de interagir com comandos. A verso atual do Android
tambm permite vrios perfis de conta de usurio, modo de uso para convidados e
novos mtodos de segurana para conexes Bluetooth.

3.2

JSON (JavaScript Object Notation)

JSON um modelo para armazenamento e transmisso de informaes em

formato de texto e completamente independente de linguagem, baseado em um
subconjunto da linguagem JavaScript.

Para cada valor representado, atribui-se um nome (ou rtulo) que descreve seu
significado.

O JSON constitudo em duas estruturas:

Uma coleo de pares nome/valor.

Uma lista ordenada de valores.

Apesar do XML ser uma linguagem mais rica e possuir maior grau de maturidade, o
JSON representa informaes de forma mais compacta, rpida e simples.

3.3

API (Application Programming Interface)

Interface de Programao de Aplicativos, conjunto de padres de programao

que permite a construo de aplicativos. uma interface que pode estar conectada a
vrios outros sistemas, sem que ningum perceba.

O funcionamento da API feito atravs da comunicao entre diversos cdigos,

determinando o comportamento dos objetos em uma interface. O melhor exemplo de
API o Google Maps.

3.4

Sistemas Distribudos

Segundo TANENBAUM,

um

Sistema Distribudo

uma coleo de

computadores independentes que aparecem para o usurio como um nico

computador. Os Sistemas Distribudos so baseados na Troca de Mensagens, a

10

diferena mais importante entre Sistemas Distribudos e Sistemas Centralizados o

IPC (Interprocess Comunication) e o fato de que nos Sistemas Centralizados a
memria partilhada.

3.5

Engenharia de Software

Existem vrios conceitos de Engenharia de Software, segundo ROGER S.

PRESSMAN, Engenharia de Software o conjunto de mtodos, procedimento e
ferramentas com o objetivo de construir software com qualidade.

Segundo NOGUEIRA, podemos concluir que a Engenharia de Software um

conjunto de prticas para desenvolvimento de solues para software.

3.6

Web Service

Em 1999, surgiu a necessidade de se padronizar a comunicao entre diferentes

plataformas e linguagens de programao. Diversos padres foram propostos, mas
nenhum obteve sucesso. O Web Service surgiu como uma soluo para melhorar a
comunicao entre os sistemas distribudos.

A principal caracterstica do Web Service a interoperabilidade, ou seja, a

interoperabilidade garante que as aplicaes possam trocar e processar dados
geridos por outras aplicaes. Portanto, Web Service um conjunto de protocolos e
padres que servem para trocar dados entre aplicaes.

O Web Service uma classe escrita em uma linguagem suportada pela

plataforma .NET que pode ser acessada via protocolo HTTP. O acesso sempre ser
via HTTP, mas internamente existe uma string XML que est empacotada em um

11

protocolo SOAP (Simple Object Access Protocol). O SOAP um modo padronizado

para a transferncia de dados em diversas aplicaes, em XML.

12

4.1

PLANO DE DESENVOLVIMENTO DA APLICAO

App Inventor

O App Inventor uma ferramenta originalmente criada e posteriormente cedida

pelo Google ao MIT. Trata-se de uma plataforma de desenvolvimento, que parte da
premissa de facilitar a criao de aplicativos, mesmo para aqueles mortais sem
conhecimento

avanado

de

programao,

roda

quase

inteiramente

no

navegador.Com ele possvel criar aplicativos (ou apps), de forma simplificada. Tudo
que voc tem a fazer apenas arrastar os cones correspondentes para o espao que
simula a tela do aparelho com Android.

Com o App Inventor foi construdo o aplicativo para o sistema operacional

Android.

4.2

XML

XML (eXtensible Markup Language) uma recomendao da W3C para gerar

linguagens de marcao para necessidades especiais.

um dos subtipos da SGML (acrnimo de Standard Generalized Markup

Language ou Linguagem Padronizada de Marcao Genrica) capaz de descrever
diversos tipos de dados. Seu propsito principal a facilidade de compartilhamento
de informaes atravs da internet.

Entre linguagens baseadas em XML incluem-se XHTML (formato para pginas

Web), RDF, SDMX, SMIL, MathML (formato para expresses matemticas), NCL,
XBRL, XSIL e SVG (formato grfico vetorial). A principal caracterstica do XML, de
criar uma infraestrutura nica para diversas linguagens, que linguagens

13

desconhecidas e de pouco uso tambm podem ser definidas sem maior trabalho e
sem necessidade de ser submetidas aos comits de padronizao.

Em meados da dcada de 1990, o World Wide Web Consortium (W3C) comeou

a trabalhar em uma linguagem de marcao que combinasse a flexibilidade da SGML
com a simplicidade da HTML. O princpio do projeto era criar uma linguagem que
pudesse ser lida por software, e integrar-se com as demais linguagens. Sua filosofia
seria incorporada por vrios princpios importantes:

Separao do contedo da formatao

Simplicidade e legibilidade, tanto para humanos quanto para computadores

Possibilidade de criao de tags sem limitao

Criao de arquivos para validao de estrutura (chamados DTDs)

Interligao de bancos de dados distintos

Concentrao na estrutura da informao, e no na sua aparncia

O XML um formato para a criao de documentos com dados organizados de

forma hierrquica, como se v, frequentemente, em documentos de texto formatados,
imagens vetoriais ou bancos de dados.

Pela sua portabilidade, j que um formato que no depende das plataformas de

hardware ou de software, um banco de dados pode, atravs de uma aplicao,
escrever em um arquivo XML, e um outro banco distinto pode ler ento estes mesmos
dados.

O XML responsvel por armazenar as coordenadas e o endereo que sero

obtidos dos usurios que informarem reas de alagamento, estas informaes
tambm sero utilizadas pelo mapa do Google, que exibir os pontos de alagamento
a partir desses dados.

14

4.3

PHP

PHP (um acrnimo recursivo para "PHP: Hypertext Preprocessor", originalmente

Personal Home Page) uma linguagem interpretada livre, usada originalmente
apenas para o desenvolvimento de aplicaes presentes e atuantes no lado do
servidor, capazes de gerar contedo dinmico na World Wide Web. Figura entre as
primeiras linguagens passveis de insero em documentos HTML, dispensando em
muitos casos o uso de arquivos externos para eventuais processamentos de dados.
O cdigo interpretado no lado do servidor pelo mdulo PHP, que tambm gera a
pgina web a ser visualizada no lado do cliente. A linguagem evoluiu, passou a
oferecer funcionalidades em linha de comando, e alm disso, ganhou caractersticas
adicionais, que possibilitaram usos adicionais do PHP, no relacionados a web sites.
possvel instalar o PHP na maioria dos sistemas operacionais, gratuitamente.
Concorrente direto da tecnologia ASP pertencente Microsoft, o PHP utilizado em
aplicaes como o MediaWiki, Facebook, Drupal, Joomla, WordPress, Magento e o
Oscommerce.

Criado por Rasmus Lerdorf em 1995, o PHP tem a produo de sua

implementao principal, referncia formal da linguagem, mantida por uma
organizao chamada The PHP Group. O PHP software livre, licenciado sob a PHP
License, uma licena incompatvel com a GNU General Public License (GPL) devido
a restries no uso do termo PHP.

O PHP responsvel por receber as informaes obtidas atravs da API do

Google Maps e gerar o arquivo XML.

4.4

HTML 5

HTML5 (Hypertext Markup Language, verso 5) uma linguagem para

estruturao e apresentao de contedo para a World Wide Web e uma tecnologia
chave da Internet originalmente proposto por Opera Software. a quinta verso da

15

linguagem HTML. Esta nova verso traz consigo importantes mudanas quanto ao
papel do HTML no mundo da Web, atravs de novas funcionalidades como semntica
e acessibilidade. Possibilita o uso de novos recursos antes possveis apenas com a
aplicao de outras tecnologias. Sua essncia tem sido melhorar a linguagem com o
suporte para as mais recentes multimdias, enquanto a mantm facilmente legvel por
seres humanos e consistentemente compreendida por computadores e outros
dispositivos (navegadores, parsers etc). O HTML5 ser o novo padro para HTML,
XHTML, e HTML DOM. Atualmente, est em fase de esboo, porm diversos
navegadores j implementam algumas de suas funcionalidades.

Aps seus predecessores imediatos HTML 4.01 e XHTML 1.1, HTML5 uma
resposta observao de que o HTML e o XHTML, de uso comum na World Wide
Web, uma mistura de caractersticas introduzidas por vrias especificaes,
juntamente com aquelas introduzidas por software, tais como os navegadores,
aqueles estabelecidos pela prtica comum, e os muitos erros de sintaxe em
documentos existentes na web. , tambm, uma tentativa de definir uma nica
linguagem simples de marcao que possa ser escrita em HTML ou em sintaxe
XHTML. Isso inclui modelos de processamento detalhados para incentivar
implementaes mais interoperveis; isso estende, melhora e racionaliza a marcao
disponvel para documentos, e introduz marcaes e interfaces de programao de
aplicativos (APIs) para aplicaes web complexas. Pelas mesmas razes, HTML5
tambm um candidato em potencial aplicaes multi-plataforma mveis. Muitos
recursos do HTML5 tem sido construdos com a considerao de ser capaz de
executar em dispositivos de baixa potncia como smartphones e tablets.

Em particular, HTML5 adiciona vrias novas funes sintticas. Elas incluem as

tags de<video>,<audio>,<header> e elementos<canvas>, assim como a integrao
de contedos SVG que substituem o uso de tags<object> genricas. Estas funes
so projetadas para tornar mais fcil a incluso e a manipulao de contedo grfico
e multimdia na web sem ter de recorrer a plugins proprietrios e APIs. Outros novos
elementos, como <section>,<article>,<header> e<nav>, so projetados para
enriquecer o contedo semntico dos documentos. Novos atributos tm sido

16

introduzidos com o mesmo propsito, enquanto alguns elementos e atributos tm sido

removidos. Alguns elementos, como<a>, e<menu> tm sido mudados, redefinidos ou
padronizados. As APIs e os modelos de objetos de documentos (DOM) no so mais
pensamentos retrgrados, mas so partes fundamentais da especificao do HTML5.
HTML5 tambm define com algum detalhe o processamento necessrio para que
erros de sintaxe de documentos invlidos sejam tratados uniformemente por todos os
browsers e outros agentes de usurios em conformidade com o HTML5.

O HTML5 foi utilizado para construir a interface do sistema.

4.5

Bootstrap

Bootstrap o framework criado por Mark Otto e Jacob Thornton, ambos

engenheiros do Twitter, uma coleo de ferramentas para criao de aplicaes web
utilizando o HTML e CSS.
O Twitter Bootstrap foi utilizado para tornar a aplicao web responsiva a
qualquer dispositivo.

4.6

JavaScript

JavaScript uma linguagem de programao interpretada. Foi originalmente

implementada como parte dos navegadores web para que scripts pudessem ser
executados do lado do cliente e interagissem com o usurio sem a necessidade deste
script passar pelo servidor, controlando o navegador, realizando comunicao
assncrona e alterando o contedo do documento exibido.

atualmente a principal linguagem para programao client-side em navegadores

web. Comea tambm a ser bastante utilizada do lado do servidor atravs de
ambientes como o node.js. Foi concebida para ser uma linguagem script com
orientao a objetos baseada em prottipos, tipagem fraca e dinmica e funes de

17

primeira classe. Possui suporte programao funcional e apresenta recursos como

fechamentos e funes de alta ordem comumente indisponveis em linguagens
populares como Java e C++.

baseada em ECMAScript padronizada pela Ecma international nas

especificaes ECMA-262 e ISO/IEC 16262.

O JavaScript utilizado para consumir o servio do Google que retorna o

endereo do usurio a partir das coordenadas obtidas pelo GPS do dispositivo.
Tambm responsvel por consumir os dados gravados pelo PHP em XML e informar
os pontos de alagamento no mapa utilizando o objeto XMLHttpRequest().

18

PROJETO

Para desenvolvimento do sistema foi necessrio obter informaes das

funcionalidades disponveis para serem utilizadas, fornecidas pelo Google Maps API
v3.
A biblioteca do Google Maps API deve ser declarada para que as classes fiquem
disponveis para serem utilizadas:
<script src=http://maps.google.com/maps/api/js?
type="text/javascript"></script>

Classe: google.maps.Geocoder;
Descrio: Cria uma nova instncia de um Geocoder que envia pedidos geocode para
os servidores do Google.

Classe: navigator.geolocation;
Descrio: O mtodo Geolocation.getCurrentPosition() utilizado para capturar a
posio atual do dispositivo. utilizado tambm para verificar se o dispositivo suporta
a utilizao do mtodo.

Classe: google.maps.LatLng;
Descrio: A LatLng um ponto em coordenadas geogrficas: latitude e longitude.
Latitude varia entre -90 e 90 graus, inclusive. Valores acima ou abaixo deste intervalo
ser fixada ao intervalo [-90, 90]. Isto significa que, se o valor especificado inferior a
-90, ele ser ajustado para -90. E se o valor for superior a 90, vai ser definido como
90. Longitude varia entre -180 e 180 graus, inclusive. Valores acima ou abaixo deste
intervalo ser envolvido de forma que eles fiquem dentro do intervalo. Por exemplo,
um valor de -190 ser convertido em 170. Um valor de 190 ser convertido para -170.
Isso reflete o fato de que longitudes se envolvem ao redor do globo. Embora o mapa
padro associados projeo longitude com a coordenada x do mapa, e latitude com a
coordenada y, a coordenada da latitude sempre escrito em primeiro lugar, seguido

19

pela longitude. Observe que voc no pode modificar as coordenadas de um LatLng.

Se voc quiser computar outro ponto, voc tem que criar um novo objeto. A maioria
dos mtodos que aceitam objetos LatLng tambm aceitam um objeto LatLngLiteral,
de modo que a seguir so equivalentes: map.setCenter (novo google.maps.LatLng (34, 151)); map.setCenter ({lat: -34, lng: 151}); O construtor tambm aceita objetos
literais, e converte-os s instncias do LatLng: myLatLng = new google.maps.LatLng
({lat: -34, lng: 151});

Classe: google.maps.Marker;
Descrio: Cria um marcador com as opes especificadas. Se for especificado um
mapa, o marcador adicionado ao mapa sobre construo. Note-se que a posio
deve ser definida para o marcador para exibir.

Classe: google.maps.MapsEventListener;
Descrio: Esta classe opaca. Ele no tem mtodos e nenhum construtor. Seus
casos so devolvidos a partir addListener(), addDomListener() e, eventualmente, so
passados de volta para removeListener().

Classe: google.maps.Map;
Descrio: Cria um novo mapa dentro do recipiente HTML dado, que geralmente
um elemento DIV.

Para inserir os marcadores com a funo google.maps.Marker utilizada

XMLHttpRequest()que realiza requisies HTTP para acessar os dados do arquivo
XML gerado pelo PHP.

Durante criao do arquivo de dados XML utilizada a classe DOMDocument

do PHP que cria o arquivo dados.xml a partir do arquivo dados.txt que contm as
informaes obtidas dos usurios.

20

Figura 2: dados.xml

Figura 3: dados.txt

Quando o usurio clica no boto rea alagada, as informaes obtidas

atravs da utilizao do Google Maps API so validadas no arquivo salvar.php, que
validar se os campos do formulrio esto vazios ou no. Se as informaes forem
obtidas com sucesso, as informaes sero salvas no arquivo dados.txt. Caso algum
erro ocorra durante este procedimento, o usurio ser informado.

A classe Mobile_Detect responsvel por garantir o acesso ao sistema apenas

em dispositivo mvel.

21

No desenvolvimento do App para sistema operacional Android, foi utilizado o

componente WebViewer onde foi declarada a URL: http://www.estimates.com.br/aps.
Dispositivos com outros sistemas operacionais (iOS, Windows Phone e etc.) podero
utilizar o servio atravs do Navegador web (Browser).

22

6.1

RELATRIO COM AS LINHAS DO CDIGO DO PROGRAMA

Aplicativo
Figura 4: Blocks

Figura 5: Designer

6.2

Servidor

23

index.php
<?php
require_once('lib/geraxml.php');
require_once('lib/Mobile_Detect.php');
$detect = new Mobile_Detect;
?>
<!doctype html>
<html lang=pt-BR>
<head>
<meta name=robots content="noindex, nofollow"/>
<link rel=icon href=img/rainy.png>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>APS - Mapa do alagamento</title>
<meta name=description content="APS"/>
<link href=css/bootstrap.min.css rel=stylesheet>
<!--[if lt IE 9]>
<script

src=http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-

printshiv.js></script>
<![endif]-->
</head>
<body>
<?php if ($detect->isMobile()):?>
<div class=container>
<div class="col-lg-12 col-md-12 page-header">
<h1><strong>APS</strong></h1>

24

</div>
</div>
<div class=container>
<div class="panel panel-default">
<div class=panel-heading>Informaes obtidas via Google Maps API</div>
<div class=panel-body>
<form action=lib/salvar.php class=col-xs-12 method=post>
<p class="help-block text-uppercase">
<small><strong>Voc est aqui</strong></small>
</p>
<div class=form-group>
<label for=latitude>Latitude</label>
<input type=text class=form-control name=latitude id=latitude placeholder=Latitude
readonly=readonly>
</div>
<div class=form-group>
<label for=longitude> Longitude</label>
<input

type=text

class=form-control

name=longitude

id=longitude

name=endereco

id=endereco

placeholder=Longitude readonly=readonly>
</div>
<div class=form-group>
<label for=longitude> Endereo</label>
<input

type=text

class=form-control

placeholder=Endereo readonly=readonly>
</div>
<div class=form-group>

25

<button class="btn btn-primary getLocation"><span class="glyphicon glyphiconexclamation-sign" aria-hidden=true></span> rea alagada

</button>
<p class=help-block>Clique no boto acima para informar que voc est em uma rea
de
alagamento.</p>
</div>
</form>
</div>
</div>
</div>
<div class=container>
<div class="panel panel-default">
<div class=panel-heading>Mapa do alagamento</div>
<div class=panel-body>
<p

class=help-block>Pontos

de

alagamento:

<span

id=pontos

class=badge></span></p>
<div id=map class=col-xs-12 style=height:450px></div>
</div>
</div>
</div>
<div id=myModal class="modal fade bs-example-modal-sm" tabindex=-1 role=dialog
aria-labelledby=mySmallModalLabel>
<div class="modal-dialog modal-sm">
<div class=modal-content>
<div class=modal-header>

26

<button type=button class=close data-dismiss=modal aria-label=Close><span ariahidden=true></span></button>

<h4 class=modal-title id=mySmallModalLabel>APS</h4>
</div>
<div class=modal-body>
<p id=msg></p>
</div>
</div>
</div>
</div>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>
<script src=http://maps.google.com/maps/api/js? type=text/javascript></script>
<script src=js/bootstrap.min.js></script>
<?php if (isset($_GET['null']) == true): ?>
<script>$(window).load(function(){modal.innerHTML="No conseguimos obter suas
coordenadas, tente novamente.";$("#myModal").modal("show")});</script>
<?php endif; ?>
<script>$(document).ready(function(){var

h=new

google.maps.Geocoder;modal=document.getElementById("msg");latitude=document.
getElementById("latitude");longitude=document.getElementById("longitude");enderec
o=document.getElementById("endereco");pontos=document.getElementById("pontos
");if(navigator.geolocation){navigator.geolocation.getCurrentPosition(d)}else{modal.in
nerHTML="O

seu

navegador

Geolocalizao.";$("#myModal").modal("show")}function

no
d(i){var

suporta
j=new

google.maps.LatLng(i.coords.latitude,i.coords.longitude);latitude.value=i.coords.latitu
de;longitude.value=i.coords.longitude;b=new

google.maps.Marker({position:new

google.maps.LatLng(parseFloat(i.coords.latitude),parseFloat(i.coords.longitude)),ma
p:g});google.maps.event.addListener(b,"click",(function(k,l){return
function(){e.setContent("Seu

27

local");e.open(g,k)}})(b,c));h.geocode({location:j},function(l,k){if(k===google.maps.Ge
ocoderStatus.OK){if(l[1]){endereco.value=l[1].formatted_address}else{window.alert("
Nenhum

resultado

encontrado")}}else{window.alert("Falha:

"+k)}})}var

g=new

google.maps.Map(document.getElementById("map"),{zoom:10,scrollwheel:false,cent
er:new

google.maps.LatLng(-23.5483498,-

46.3801577),mapTypeId:google.maps.MapTypeId.ROADMAP});var

e=new

google.maps.InfoWindow();var h=new google.maps.Geocoder;var b,c;var f=new

XMLHttpRequest();f.onreadystatechange=function(){if(f.readyState==4&&f.status==2
00){a(f)}};f.open("GET","dados/dados.xml",true);f.send();function

a(j){var

r=j.responseXML;var l=[];var k=[];var o=[];var p=[];var n=[];var q=[];var m=[];var

i=[];for(c=0;c<r.getElementsByTagName("coordenadas").length;c++){l[c]=r.getEleme
ntsByTagName("coordenadas")[c];k[c]=l[c].childNodes[0].nodeValue;q[c]=k[c].split(":"
);n[c]=q[c][0].split(",");pontos.innerHTML=k.length;o[c]=n[c][0];p[c]=n[c][1];m[c]=r.getE
lementsByTagName("endereco")[c];i[c]=m[c].childNodes[0].nodeValue;b=new
google.maps.Marker({position:new
google.maps.LatLng(parseFloat(o[c]),parseFloat(p[c])),map:g,icon:"img/rainy.png"});g
oogle.maps.event.addListener(b,"click",(function(s,t){return
function(){e.setContent("Coordenadas:

"+o[t]+",

"+p[t]+"

<br>

Endereo:

em

dispositivo

"+i[t]);e.open(g,s)}})(b,c))}}});</script>
<?php else: ?>
<div class=container>
<div class="col-lg-12 col-md-12 page-header">
<h1

class=text><strong>Este

mvel.</strong></h1>
</div>
</div>
<?php endif ;?>
</body>
</html>

sistema

funciona

apenas

28

geraxml.php
<?php
$coordenadas = file('dados/dados.txt');
$dom = new DOMDocument('1.0', 'UTF-8');
$data = $dom->createElement('data');
$dom->appendChild($data);
foreach ($coordenadas as $coordenada) {
$dados = explode(":", $coordenada);
$local = $dom->createElement('local');
$cords = $dom->createElement('coordenadas', $dados[0]);
$endereco = $dom->createElement('endereco', $dados[1]);
$local->appendChild($cords);
$local->appendChild($endereco);
$data->appendChild($local);
}
file_put_contents('dados/dados.xml', $dom->saveXML());

salvar.php
<?php
if ($_POST['latitude'] != null && $_POST['longitude'] != null && $_POST['endereco'] !=
null):
$f = fopen("../dados/dados.txt", "a+", 0);
$linha = $_POST['latitude'] . ", " . $_POST['longitude'] . " : " . $_POST['endereco'] .
"\n";
fwrite($f, $linha, strlen($linha));
fclose($f);
echo "<script>window.location='../index.php';</script>";

29

else:
echo "<script>window.location='../index.php?null=true';</script>";
endif;

30

7.1

APRESENTAO DO PROGRAMA EM FUNCIONAMENTO

Apresentao do programa em funcionamento em um computador

31

7.2

Apresentao do programa em funcionamento em um dispositivo mvel

32

33

34

35

36

BIBLIOGRAFIA

Android. Disponvel em: <http://www.significados.com.br/android>. Acesso em:

09/10/2015.

O que Android. Disponvel em:

<http://www.techtudo.com.br/artigos/noticia/2011/01/afinal-o-que-e-android.html
acesso 09/10/2015.

JSON. Disponvel em: <http://www.json.org/json-pt.html>. Acesso em: 09/10/2015.

Introduo ao Formato JSON. Disponvel em:

<http://www.devmedia.com.br/introducao-ao-formato-json/25275>. Acesso em:
09/10/2015.

O que API. Disponvel em: <http://www.tecmundo.com.br/programacao/1807-oque-e-api-.htm>. Acesso em: 09/10/2015.

Sistemas Distribudos. Disponvel em:

<http://www.cin.ufpe.br/~sd/disciplinas/sd/pos/aulas/Apresentacao.pdf>. Acesso em:
09/10/2015.

Sistemas Distribudos. Disponvel em:

<http://www.noginfo.com.br/moodle/mod/resource/view.php?id=3746>. Acesso em:
09/10/2015.

Engenharia de Software. Disponvel em:

<http://www.noginfo.com.br/moodle/course/view.php?id=2>. Acesso em: 09/10/2015.

37

A Implementao da Engenharia de Requisitos como fator crtico de sucesso para

as pequenas empresas de desenvolvimento de software. Disponvel em:
<http://www.noginfo.com.br/moodle/mod/resource/view.php?id=3>. Acesso em:
09/10/2015.

Metodologia de Desenvolvimento de Sistemas de Informao para Internet.

Disponvel em: <http://www.noginfo.com.br/moodle/mod/resource/view.php?id=7>.
Acesso em: 09/10/2015.

Introduo s tecnologias Web Services: SOA, SOAP, WSDL e UDDI - Parte1.

Disponvel em: <http://www.devmedia.com.br/introducao-as-tecnologias-webservices-soa-soap-wsdl-e-uddi-parte1/2873>. Acesso em: 09/10/2015.

Os nmeros no mentem, qual o melhor? . Disponvel em:

<http://corporate.canaltech.com.br/analise/mobile/os-numeros-nao-mentem-androidou-ios-qual-e-o-melhor-7657>. Acesso em: 09/10/2015.

Linha do tempo, dentro da evoluo do sistema Android. Disponvel em:

<http://www.tecmundo.com.br/android/82344-linha-tempo-dentro-evolucao-do
sistema-android.htm>. Acesso em: 09/10/2015.

Android j teve 10 verses diferentes, relembre a evoluo do sistema. Disponvel

em: <http://olhardigital.uol.com.br/noticia/android-ja-teve-10-versoes-diferentesrelembre-a-evolucao-do-sistema/35801>. Acesso em: 09/10/2015.

Conhea a evoluo do Android. Disponvel em:

<http://eusouandroid.com/infografico-conheca-a-evoluacao-do-android>. Acesso em:
09/10/2015.

38

Web Services com REST e SOAP. Disponvel em:

<http://pt.slideshare.net/CCCarl/web-service-soap-vs-rest>. Acesso em: 09/10/2015.

Web Services. Disponvel em: <https://msdn.microsoft.com/ptbr/library/cc564893.aspx>. Acesso em: 09/10/2015.

So Paulo e as enchentes. Disponvel em:

<http://planetasustentavel.abril.com.br/noticia/cidade/sao-paulo-enchentes-causastratamento-acoes-678098.shtml>. Acesso em: 09/10/2015.

App Inventor. Disponvel em: <http://appinventor.mit.edu/explore/about-us.html>.

Acesso em: 09/10/2015.

XML. Disponvel em: <https://pt.wikipedia.org/wiki/XML>. Acesso em: 09/10/2015.

PHP. Disponvel em: <https://pt.wikipedia.org/wiki/PHP>. Acesso em: 09/10/2015.

HTML5. Disponvel em: <https://pt.wikipedia.org/wiki/HTML5>. Acesso em:

09/10/2015.

O que o Framework Twitter Bootstrap ?. Disponvel em:

<http://www.vrsys.com.br/blog/15-tecnologia/58-o-que-e-o-framework-twitterbootstrap>. Acesso em: 09/10/2015.

JavaScript. Disponvel em: <https://pt.wikipedia.org/wiki/JavaScript>. Acesso em:

09/10/2015.

39

Google Maps Javascript API. Disponvel em:

<https://developers.google.com/maps/documentation/javascript/3.exp/reference>.
Acesso em: 09/10/2015.

40

FICHA DE ATIVIDADES PRTICAS SUPERVISIONADAS