APS 8

Prévia do material em texto

DESENVOLVIMENTO DE UMA APLICAÇÃO DE SISTEMA DISTRIBUÍDO PARA DISPOSITIVO MÓVEL
7º/8º Ciência da Computação (CC)
INDICE
OBJETIVO	1
INTRODUÇÃO	2
FUNDAMENTOS DAS TECNOLOGIAS PARA DISPOSITIVOS MÓVEIS ESCOLHIDOS	4
HTML	4
CSS	4
JavaScript	5
AJAX	6
PHP	6
DataTable	7
Bootstrap	7
Google Maps JavaScript API	7
PLANO DE DESENVOLVIMENTO DA APLICAÇÃO	8
PROJETO	13
RELATÓRIO COM AS LINHAS DE CÓDIGO DO PROGRAMA	16
APRESENTAÇÃO DO PROGRAMA EM FUNCIONAMENTO	25
BIBLIOGRAFIA	30
OBJETIVO
O objetivo deste trabalho é desenvolver um aplicativo mobile baseado em comunidade para ajudar no controle de vazamentos de água em áreas urbanas, visando reduzir os desperdícios desnecessários de água, através de uma plataforma móvel, onde qualquer usuário que tenha o aplicativo instalado pode informar um novo ponto de vazamento a qualquer hora, de qualquer lugar e não sendo necessário se identificar.
INTRODUÇÃO
Tudo o que fazemos em nosso dia a dia, necessita de água, como quando temos sede, precisamos nos limpar, dar uma descarga, ou nos alimentarmos, pois, sua salada precisa de água para se desenvolver e chegar até sua mesa, sua carne precisa de água que permite que o animal viva, se desenvolva e chegue até você e qualquer bebida precisa de água para sua fabricação, como a cerveja que muitos gostam, água é vida e sem ela não existiríamos.
Mesmo a água sendo tão valiosa e vital para nossa sobrevivência, nem todos dão o devido valor que ela merece, até que haja sua falta, e muitas vezes já está muito tarde para que se possa fazer algo.
Tendo em vista a importância que a água possui em nossa sociedade, foi pensado em um aplicativo que auxilie na manutenção e preservação desse bem.
Todas as cidades possuem empresas que são responsáveis por tratar e distribuir a água para a população, e tendo em vista essas empresas, foi decidido construir algo que as auxilie de alguma forma ao cuidar deste bem tão precioso.
O aplicativo em questão tem o objetivo de ajudar essas empresas, no quesito vazamento, pois a água deve passar por tubos que ficam abaixo da cidade, até que a água chegue em nossas residências, porem podem haver contratempos ao percorrer todo esse caminho, como tubos danificados de alguma forma, tanto pelo tempo quanto pelo homem e isso gera desperdício de água, pois se ela está vazando, uma água boa e tratada acaba indo para a rua, e consequentemente deixando de ser uma água limpa e tratada, pois provavelmente irá para o esgoto ou será sugada pela terra.
Muitas vezes nós mesmos avistamos algum vazamento, porem nem sempre temos a oportunidade de relatarmos esse problema para a empresa responsável pelo tratamento da água, e o ciclo se repete até que muita água seja perdida até que alguém possa reparar tal problema, mas se houvesse uma maneira bem mais rápida e fácil de alertar essas empresas, o desperdício de água seria reduzido em cada vazamento.
O aplicativo ajudará essas empresas, mostrando a elas onde existe um vazamento e se ele é crítico ou não, assim um técnico daria preferência a um vazamento critico, e tal vazamento seria informado por qualquer cidadão que possuir o aplicativo.
O vazamento será informado através da localização do usuário que avistar esse vazamento, isso fará com que o usuário apenas precise estar próximo ao vazamento e com um clique, poderá informar que ali existe um vazamento, e o mesmo será mostrado a empresa, que já terá a localização desse vazamento e também saberá se ele é ou não um vazamento crítico.
Com tal ferramenta, será mais fácil para o cidadão relatar os vazamentos que ele encontrar e ajudará a empresa a sanar tal vazamento de maneira mais rápida, pois com um simples olhar pelo mapa já poderá visualizar se existe ou não algum vazamento e se houver onde é tal vazamento.
FUNDAMENTOS DAS TECNOLOGIAS PARA DISPOSITIVOS MÓVEIS ESCOLHIDOS
Para a criação do aplicativo, foram utilizados o HTML, CSS, JavaScrip, AJAX, PHP, DataTable, Bootstrap e Google Maps JavaScript API.
HTML
O HTML (HyperText Markup Language ou Linguagem de Marcação de Hipertexto), que consiste em uma linguagem de marcação utilizada para produção de páginas na web, que permite a criação de documentos que podem ser lidos em praticamente qualquer tipo de computador e transmitidos pela internet. 
Para escrever documentos HTML não é necessário mais do que um editor de texto simples e conhecimento dos códigos que compõem a linguagem. Os códigos (conhecidos como tags) servem para indicar a função de cada elemento da página Web. Os tags funcionam como comandos de formatação de textos, formulários, links (ligações), imagens, tabelas, entre outros.
Os browsers (navegadores) identificam as tags e apresentam a página conforme está especificada. Um documento em HTML é um texto simples, que pode ser editado no Bloco de Notas (Windows) ou Editor de Texto (Mac) e transformado em hipertexto.
CSS
O CSS (Cascading Style Sheets) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.
Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta, portanto, modificar apenas um arquivo.
O CSS também permite que as mesmas marcações de uma página sejam apresentadas em diferentes estilos, conforme os métodos de renderização (como em uma tela, impressão, via voz, baseadas em dispositivos táteis, etc.). A maioria dos menus em cascata, estilos de cabeçalho e rodapé de páginas da internet, por exemplo, atualmente são desenvolvidos em CSS.
JavaScript
O JavaScript é uma linguagem de programação baseada em scripts e padronizada pela ECMA International (associação especializada na padronização de sistemas de informação).
Foi criada por Brendan Eich (Netscape) e surgiu em 1995 como linguagem de script client-side de páginas web. É uma linguagem dinâmica, orientada a objetos e criada com sintaxe similiar à linguagem C.
Apesar de conter Java no nome, a linguagem JavaScript é distinta da linguagem Java e apresenta recursos não disponibilizados em Java ou C++.
Os scripts desenvolvidos em JavaScript são muito populares e amplamente integrados em páginas web devido à facilidade de interação com o Document Object Model (DOM) da página.
Uma linguagem de script tem a funcionalidade de ser executada no interior de programas ou de outra linguagem de programação. Outras linguagens usadas como script são: ActionScript, PHC, Python, VBScript, entre outras.
AJAX
O AJAX é acrônimo em língua inglesa de "Asynchronous Javascript and XML", que em português significa "Javascript e XML Assíncronos". Designa um conjunto de técnicas para programação e desenvolvimento web que utiliza tecnologias como Javascript e XML para carregar informações de forma assíncrona.
O criador do termo AJAX foi o pesquisador norte-americano Jesse James Garrett. Desde que o modelo AJAX começou a ser utilizado, é visto como uma ferramenta revolucionária, que torna mais agradável a navegação e utilização de serviços diversos na internet.
O desenvolvimento em AJAX permite a criação de páginas mais criativas e com maior interação com o usuário. A sua utilização foi importante para a criação do conceito Web 2.0 que tornou a experiência do usuário mais interessante e proveitosa.
Alguns serviços do Google como o Gmail, Google Earth e Google Maps fazem uso das ferramentas AJAX.
Ao usar AJAX no desenvolvimento de serviços para web, a informação é carregada de maneira mais simples e precisa. O usuário não precisa aguardar que a página seja totalmente recarregada quando faz uma requisição, pois o servidor só irá retornar os dados relevantes, reduzindoo tráfego de dados pela rede.
PHP
O PHP (Hypertext Preprocessor) é uma linguagem interpretada livre, usada originalmente apenas para o desenvolvimento de aplicações presentes e atuantes no lado do servidor, capazes de gerar conteúdo dinâmico na World Wide Web. Figura entre as primeiras linguagens passíveis de inserção em documentos HTML, dispensando em muitos casos o uso de arquivos externos para eventuais processamentos de dados. O código é interpretado no lado do servidor pelo módulo PHP, que também gera a página web a ser visualizada no lado do cliente. A linguagem evoluiu, passou a oferecer funcionalidades em linha de comando, e além disso, ganhou características adicionais, que possibilitaram usos adicionais do PHP, não relacionados a web sites. É possível instalar o PHP na maioria dos sistemas operacionais, gratuitamente. Concorrente direto da tecnologia ASP pertencente à Microsoft, o PHP é utilizado em aplicações como o MediaWiki, Facebook, Drupal, Joomla, WordPress, Magento e o Oscommerce.
Criado por Rasmus Lerdorf em 1995, o PHP tem a produção de sua implementação principal, referência formal da linguagem, mantida por uma organização chamada The PHP Group. O PHP é software livre, licenciado sob a PHP License, uma licença incompatível com a GNU General Public License (GPL) devido a restrições no uso do termo PHP.
DataTable
DataTables é um plug-in para o jQuery biblioteca Javascript. É uma ferramenta altamente flexível, com base nos fundamentos da optimização progressiva, e irá adicionar controles avançadas de interação a qualquer tabela HTML.
Bootstrap
Bootstrap é um framework HTML, CSS, e JS para desenvolvimento de projetos responsivo e focado para dispositivos móveis na web.
Google Maps JavaScript API
A Google Maps JavaScript API é uma API do Google, que permite que um mapa do Google seja usado em uma página da web usando JavaScript. Também permite manipular o mapa e adicione conteúdo com a ajuda de vários serviços.
PLANO DE DESENVOLVIMENTO DA APLICAÇÃO
O aplicativo foi desenvolvido com a ajuda do Intel XDK, que é um ambiente para desenvolvimento e criação de aplicações hibridas, que permite a criação de aplicativos multiplataforma, aplicativos para Windows Phone, Android e IOS, utilizando HTML, CSS e JavaScrip, já que hoje em dia ninguém gosta de estar preso a algum aparelho especifico, e nada melhor do que uma aplicação hibrida, que permite ao usuário usá-la em qualquer aparelho, independentemente de sua marca ou modelo, além de poder ser uado também em tablets, para aqueles que gostam de telas maiores.
Alguns requisitos foram pensados, para que o aplicativo seja o mais fácil possível de ser usado pelo usuário, ao mesmo tempo que exerce as funções necessárias, esses requisitos foram:
· Tela intuitiva
· Poucos elementos
· Sem necessidade de cadastro
· Informar vazamento de maneira fácil
· Mostrar em tempo real os vazamentos no mapa
· Informar se o vazamento é crítico, caso ele seja
· Alterar em tempo real os vazamentos para críticos no mapa
· Informar se o vazamento já não existe mais
· Retirar do mapa vazamentos que já não existem mais
· Contato
· Telefones uteis
· Visualizar todos os informes de vazamentos já realizados
· Visualizar os locais dos vazamentos
· Visualizar a data que os vazamentos foram informados
· Visualizar a data em que os Vazamentos foram sanados
· Visualizar os dados dos vazamentos em ordem da menor data em que eles foram informados
· Visualizar os dados dos vazamentos em ordem da maior data em que eles foram informados
· Visualizar os dados dos vazamentos em ordem da menor data em que eles foram contidos
· Visualizar os dados dos vazamentos em ordem da maior data em que eles foram contidos
· Visualizar os dados dos vazamentos em ordem de endereço em ordem alfabética de a-z
· Visualizar os dados dos vazamentos em ordem de endereço em ordem alfabética de z-a
· Procurar alguma palavra em especifico, como o nome de uma rua ou uma data especifica para um vazamento.
A interface do usuário foi criada com o HTML, e melhorada com a ajuda do CSS e do Bootstrap, para torná-la mais agradável, intuitiva e responsiva ao usuário, além de utilizar o Google Maps JavaScript API, onde ao iniciar o aplicativo, o usuário já conta com um mapa do Google, onde além de já localizar onde o usuário se encontra, também mostra a esse usuário, pontos de vazamentos que já foram relatados por outros usuários.
Para alertar um vazamento, nada mais simples do que um clique, e isso é o que foi pensado, por isso, como o aplicativo já adquire a localização do usuário, ele apenas deve fazer um clique, em informar vazamento, para que dentro de instantes, o vazamento em questão seja mostrado no mapa para que todos possam ver, pratico, rápido, fácil e bem intuitivo para que não haja dificuldades para o usuário.
Caso o vazamento relatado ou algum outro vazamento se torne mais grave, o usuário tem a opção de clicar novamente sobre o vazamento e alterá-lo para critico, novamente de maneira simples e rápida.
Caso o vazamento seja contido, o usuário pode clicar sobre o vazamento e com um simples clique, alterá-lo para contido, o que fará com que ele não seja mais mostrado no mapa, para uma limpeza visual do mapa.
Caso o usuário queira, ele poderá entrar em contato com os desenvolvedores do aplicativo, com um clique em contato, através de um e-mail fornecido, onde podem ser efetuadas reclamações, elogios, duvidas e sugestões para a melhoria do aplicativo.
O usuário também pode ver os telefones uteis, ou seja, os telefones das empresas que tratam e distribuem a água, com um clique em telefones uteis. Apesar de não ser necessário realizar nenhuma ligação para informar um vazamento ou informar se ele é crítico, caso o usuário queira entrar em contato com a empresa, para saber mais informações, ele já contará com o telefone da empresa.
Também haverá a possibilidade de realizar buscas no banco de dados, para saber de não apenas os vazamentos que existem no mapa, como também os que já foram sanados.
Com o DataTable, o usuário pode efetuar de maneira simples e rápida, uma complexa consulta com o banco de dados, no caso o MySQL, que é um sistema de gerenciamento de banco de dados (SGBD), que utiliza a linguagem SQL (Linguagem de Consulta Estruturada, do inglês Structured Query Language) como interface, para trazer dados de:
· Data da Comunicação
· Data de Contenção
· Endereço do vazamento
· Tempo de vazamento
O usuário também poderá ordenar todos esses dados do histórico de comunicação, que se encontram no banco de dados e que são mostrados pelo DataTable em:
· Primeira data de comunicação
· Última data de comunicação
· Primeira data de Contenção
· Última data de Contenção
· Endereço do vazamento de a-z
· Endereço do vazamento de z-a
· Menor Tempo de vazamento
· Maior Tempo de vazamento
O usuário também contará com a opção de selecionar a quantidade de resultados que ele irá querer que sejam mostrados por página e buscar o que ele deseja ver, como por exemplo uma busca pelo nome de uma rua, ou uma data de vazamento em especifico.
O que permitirá que tais dados sejam trocados do aplicativo com o servidor, será o Ajax, que usa metodologias de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações.
Como o PHP é quem faz a conexão com o banco de dados e não é possível chamar de maneira direta o PHP através do Intel XDK, o Ajax é a alternativa perfeita realizar a conexão do banco através do aplicativo.
Mesmo o aplicativo tendo em vista a maior comodidade do usuário, ainda existem os fatores gps e internet, caso o aparelho não possua um gps funcional, não é possível que ele consiga pegar sua posição atual, e o fator internet, mesmo com serviços precários e que muitas vezes deixam os usuários na mão, caso não haja alguma conexão wifi no alcance, ele terá que recorrer aos dados móveis, ele poderia por exemplo usar o aplicativo de maneira offiline, marcar um vazamento e até mesmo informar se tal vazamentoé crítico ou não, e ao conseguir se conectar à internet, enviar esses dados para o servidor, porem e se esse tempo para se conectar, levar horas, como o objetivo em vista é evitar o desperdício, não seria viável tal alternativa, tornando o aplicativo de uso fácil e intuitivo, porém não milagroso.
PROJETO
O projeto contará unicamente com o módulo usuário, que terá a capacidade de inserir um novo vazamento através de sua localização atual, alterar a gravidade do vazamento para crítica, ou informar que o vazamento foi contido, removendo ele do mapa para que não haja uma poluição visual desnecessária do mapa.
O usuário poderá clicar em contato, para que ele possa entrar em contato com os desenvolvedores do aplicativo, para que possam ser efetuadas reclamações, elogios, duvidas e sugestões para a melhoria do aplicativo.
O usuário também pode ver os telefones uteis, ou seja, os telefones das empresas que tratam e distribuem a água, com um clique em telefones uteis. Apesar de não ser necessário realizar nenhuma ligação para informar um vazamento ou informar se ele é crítico, caso o usuário queira entrar em contato com a empresa, para saber mais informações, ele já contará com o telefone da empresa.
O usuário poderá efetuar buscas através de uma tabela, onde haverá a data da comunicação, a data na qual algum usuário informou que havia algum vazamento através de sua localização, vazamento que poderá ou não ter sido contido, data de contenção, a data na qual algum usuário informou que algum vazamento já havia sido contido, endereço, o endereço no qual o vazamento foi relatado pelo usuário, contendo a rua do vazamento, o número da residência mais próxima ao vazamento informado, o bairro onde se encontra o vazamento informado, a cidade e o estado do bairro onde se encontra o vazamento informado, e o CEP do endereço onde se encontra o vazamento informado, informações concedidas pelo Google Maps JavaScript API e o tempo do vazamento, que é o tempo em que o vazamento demorou para ser contido, caso ele tenha sido contido, que é a hora em que ele foi informado até a hora em que ele foi mudado para contido pelo usuário.
O usuário contara também com a opção de escolher quantos resultados que ele deseja ver por pagina de pesquisa, como por exemplo, se deseja mostrar apenas 10 resultados por página ou mostrar 100 resultados de uma vez por página de pesquisa.
O usuário poderá também visualizar quantos resultados foram trazidos do banco de dados para a sua tabela.
O usuário poderá visualizar quantas páginas de resultados existem e navegar entre elas.
O usuário poderá realizar pesquisas digitando um nome de uma rua ou bairro por exemplo, para visualizar os vazamentos informados ali ou até mesmo pesquisar por alguma data especifica, para saber quantos vazamentos ocorreram na data escolhida.
O usuário poderá ordenar os dados em:
· Primeira data de comunicação, mostrar em ordem de datas mais recentes de informes de vazamentos realizados pelos usuários
· Última data de comunicação, mostrar em ordem de datas mais antigas de informes de vazamentos realizados pelos usuários
· Primeira data de Contenção, mostrar em ordem de datas mais recentes de vazamentos que foram contidos
· Última data de Contenção, mostrar em ordem de datas mais antigas de vazamentos que foram contidos
· Endereço do vazamento de a-z, mostrar os endereços em ordem alfabética, da letra a á z
· Endereço do vazamento de z-a, mostrar os endereços em ordem alfabética, da letra z á a
· Menor Tempo de vazamento, mostrar em ordem de vazamentos que duraram menos aos que duraram mais
· Maior Tempo de vazamento, mostrar em ordem de vazamentos que duraram mais aos que duraram menos
O usuário também poderá se movimentar livremente pelo mapa, escolher o tipo mapa ou satélite e aumentar ou diminuir o zoom do mapa.
RELATÓRIO COM AS LINHAS DE CÓDIGO DO PROGRAMA
A página index.html, que é a raiz de todo o projeto, contem primeiramente uma nav-bar, que é uma barra fixa no topo da página, com o seguinte código:
	
O código acima monta toda a estrutura da nav-bar com todos os menus de funcionalidades da aplicação.
	Logo abaixo da nav-bar, no corpo da página index.html, foi feito o código para importar a api do google maps para a aplicação, como mostra a imagem abaixo: 
	O mapa é inicializado através de uma função javascript, onde foram definidos a latitude e longitude default, que é mostrada a seguir:
Esse código renderiza o google maps para a página index, contendo uma div de exibição e os scripts necessários para seu funcionamento.
O código a seguir pega a localização do usuário, e está contido no script mapa.google.js. 
A função MyLatitudeLongitude(), através do function(position) se recupera a latitude e longitude do usuário, e a variável pos centraliza o mapa de acordo com os pontos recebidos.
Os pontos de vazamentos que ainda não foram finalizados são recuperados através do seguinte código: 
Os marcadores (pontos na tela) relacionados aos vazamentos que estão em aberto, é renderizado na tela através do seguinte código:
Os marcadores (pontos de vazamento) são adicionados na tela através do seguinte código, que define o ícone caso seja um vazamento normal ou um vazamento crítico.
Os vazamentos são atualizados na tela do usuário a cada vinte segundos, através do código abaixo.
Na nav-bar do sistema, existe o item de Telefones úteis, que exibe uma lista de telefones úteis ao usuário. 
	
Na nav-bar existe também o item de Contatos, onde existe o e-mail de todos os integrantes do grupo que compõem o projeto:
Seguindo para a página de registros de vazamentos, existe uma tabela que é responsável pela exibição dos dados.
	
A tabela é preenchida através de um select no banco, que recupera os dados através de uma consulta mostrada no código abaixo:
Abaixo segue o código que faz a chamada ajax e busca os resultados para o preenchimento da tabela:
A função ChamadaAjax() requisita a função Registros.php todos os dados de vazamentos. A função AddLinha recebe os dados dos vazamentos comunicados no sistema e popula a tabela com os dados.
Tudo isso realiza comunicação assíncrona com o banco de dados via Ajax. Segue abaixo o código que realiza a conexão do projeto com o banco de dados.
O código abaixo insere um vazamento, realizando um insert com os parâmetros de latitude e longitude, que são recuperados automaticamente pelo sistema, e a rua em que ocorre o vazamento atual.
O vazamento é dado como contido através do código abaixo, que realiza um update na tabela de vazamentos e seta uma hora final, indicando que está terminado. Esse vazamento será mostrado na página de registros, que guarda um histórico de vazamentos.
O código abaixo define um vazamento como crítico. Deste momento em diante o marcador será apresentado em vermelho.
Segue o código do css do projeto, que define um padrão para toda a página, e define que o mapa vai ocupar 100% da largura da página.
APRESENTAÇÃO DO PROGRAMA EM FUNCIONAMENTO
A tela inicial do aplicativo, onde o usuário já pode ver vazamentos que foram relatados e se são críticos.
Aqui o usuário pode ver as opções que o aplicativo lhe oferece, que são informar vazamento a partir de sua localização, histórico de comunicação com o histórico de todos os vazamentos informados, telefones uteis com os telefones para contato com a empresa responsável pela distribuição de água e contato, para entrar em contato com os desenvolvedores.
Ao clicar em informar vazamento, a seguinte mensagem aparece ao usuário, e se ele realmente quiser relatar o vazamento deve apenas clicar em ok.
Após 10 segundos que o usuário clicou em ok, uma marca aparece no mapa, na cidade de Sumaré onde o usuário encontrou o vazamento.
Ao clicar no vazamento, a seguinte mensagem aparece ao usuário, caso ele queira pode alterar o vazamento para critico ou informar que ele já foi contido.
Ao clicar em critico, a marca que era azul, fica vermelha.
Ao clicar em contido, a marca deixa de ser exibida no mapa.Ao clicar em telefones úteis, é mostrado o telefone para contato com a empresa responsável pelo fornecimento de água.
Ao clicar em contato, é exibido o e-mail de contato com os desenvolvedores.
Ao clicar em histórico de comunicações, a seguinte tela é mostrada ao usuário, com todos os vazamentos relatados até o momento, estando contidos ou não.
BIBLIOGRAFIA
MORRISON, MICHAEL. Use a Cabeça! JavaScript. STARLIN ALTA, 2008.
FREEMAN, ELISABETH; FREEMAN, ERIC. Use a cabeça! (Head First) HTML com CSS e XHTML. Tradução Betina Macêdo. 2. ed. Rio de Janeiro Alta Books, 2008.
BEIGHLEY, LYNN. Use a cabeça! (Head First) SQL. Tradução Leopoldino Machado. Rio de Janeiro Alta Books, 2008.
WELLING, LUKE; THOMSON LAURA. PHP e MySQL Desenvolvimento Web. Tradução Edson Furmankiewicz e Adriana Kramer. 3. ed. Rio de Janeiro Elsevier, 2005.
http://fabiopessoa.com.br/css/o-que-e-css-e-qual-sua-finalidade/
http://www.devmedia.com.br/introducao-a-google-maps-api/26967
https://developers.google.com/maps/documentation/javascript/tutorial?hl=pt-br
http://getbootstrap.com.br/customize/
https://datatables.net/manual/index