Faculdade de Tecnologia de Sorocaba Relatório Final ... · Segundo Sommerville (2006), software é...

Faculdade de Tecnologia de Sorocaba

Relatório Final – Iniciação Científica

SOROACQUA – Aplicativo para divulgação de informações sobre a água

de Sorocaba

Aluna: Ana Paula Ribeiro

6º Semestre em Tecnologia em Análise e Desenvolvimento de Sistemas

Orientador: Prof. Dr. Paulo Edson Alves Filho

Sorocaba / SP

Junho/2017

AGRADECIMENTO

A Deus por ter me dado saúde, força e garra para superar todas as

dificuldades.

Agradeço а todos os professores por me proporcionar о conhecimento

não apenas racional, mas а manifestação do caráter е afetividade da educação

no processo de formação profissional, por tanto que se dedicaram а mim, não

somente por terem me ensinado, mas por terem me feito aprender. А palavra

mestre, nunca fará justiça aos professores dedicados aos quais sem nominar

terão os meus eternos agradecimentos.

Aos meus pais, meu irmão e ao meu noivo, pelo amor, compreensão,

incentivo е apoio incondicional.

Aos amigos e companheiros de aulas que fizeram parte da minha

formação е que aprendi tanto com eles.

Ao meu orientador, onde no momento quando tudo parecia perdido não

me deixou desistir.

A todos que direta ou indiretamente fizeram parte da minha formação, о

meu muito obrigado!

RESUMO

A água é um recurso natural muito importante para a sociedade. Informações

referentes a ela são uma forma de conscientizar o seu consumo. O rio

Sorocaba atende a uma totalidade de 18 municípios e dados importantes sobre

ele estão contidos no portal do SAAE. Hoje a população de Sorocaba não tem

acesso fácil a esses dados, tais como: tratamento da água, distribuição e

qualidade. Este projeto tem como finalidade o desenvolvimento de um

aplicativo para observar os índices e a qualidade da água consumida na

cidade, além de disponibilizar informações como qualidade e características da

água que é consumida. Ele também pretende apresentar um sistema que seja

de fácil acesso. Este relatório apresenta as etapas concluídas da pesquisa

sobre elaboração de um aplicativo que proporcionará informações para os

munícipes sobre a qualidade da água do Rio Sorocaba bem como sobre água

que cada cidadão consome diariamente em suas residências. O projeto foi

desenvolvido em equipe, e esse relatório é referente à parte que contempla a

análise de interação humano e computador, análise e levantamento de

requisitos, desenvolvimento da linguagem UML, como também todo

desenvolvimento de uma plataforma híbrida para aplicativos.

Palavras-Chave: SAAE, Rio Sorocaba, munícipes, aplicativo, Sorocaba.

ABSTRACT

The water is a very important natural resource for a society. Information about it

is a way of raising awareness of its consumption. The Sorocaba River serves a

total of 18 municipalities and important data on those contained do not have a

portal to the SAAE. Today the population of Sorocaba does not have easy

access to such data, such as: water treatment, distribution and quality. This

project aims to develop an application to observe the indexes and a quality of

water consumed in the city, besides providing information such as quality and

characteristics of water that is consumed. He also seeks to present a system

that loves easy access. This report presents the completed steps of the

research on the development of an application that provides information to

citizenabout the water quality of the Sorocaba River. The project was developed

as a team, and this report refers to a part that includes a human interaction

analysis and computation, analysis and requirements assessment, development

of the UML language, as well as the development of an application platform.

Key-words: SAAE, Rio Sorocaba, citizen, aplicativo, Sorocaba.

LISTA DE ILUSTRAÇÕES

Figura 1 - Diagrama de Caso de Uso de Alto Nível do Administrador ....................... 15

Figura 2 - Diagrama de Caso de Uso – Cadastrar ..................................................... 15

Figura 3 - Diagrama de Caso de Uso – Alterar .......................................................... 16

Figura 4 - Diagrama de Caso de Uso– Excluir ........................................................... 16

Figura 5 - Diagrama de Caso de Uso – Consultar ..................................................... 17

Figura 6 - Caso de Uso Cadastrar Projetos ............................................................... 17

Figura 7 - Caso de Uso Cadastrar Eventos ............................................................... 18

Figura 8 - Caso de Uso Cadastrar Notícias ............................................................... 18

Figura 9 - Caso de Uso Cadastrar Estações ............................................................. 19

Figura 10 - Caso de Uso Cadastrar Qualidade da Água .......................................... 19

Figura 11 - Caso de Uso Cadastrar Qualidade da Água do Rio ............................... 20

Figura 12 - Caso de Uso Cadastrar Bairro ............................................................... 20

Figura 13 - Caso de uso Logout............................................................................... 21

Figura 14 - Caso de Uso Alterar Projetos ................................................................ 21

Figura 15 - Caso de Uso Alterar Eventos ................................................................. 22

Figura 16 - Caso de Uso Alterar Notícias ................................................................. 22

Figura 17 - Caso de Uso Alterar Estações ............................................................... 23

Figura 18 - Caso de Uso Alterar Qualidade da Água ............................................... 23

Figura 19 - Caso de Uso Alterar Qualidade da Água do Rio .................................... 24

Figura 20 - Caso de Uso Consultar Qualidade da Água do Rio ............................... 24

Figura 21 - Caso de Uso Consultar Qualidade da Água .......................................... 25

Figura 22 - Caso de Uso Consultar Estações .......................................................... 25

Figura 23 - Caso de Uso Consultar Eventos ............................................................ 26

Figura 24 - Caso de Uso Consultar Projetos ............................................................ 26

Figura 25 - Caso de uso Consultar Notícias............................................................. 26

Figura 26 - Caso de Uso Excluir Projeto .................................................................. 27

Figura 27 - Caso de Uso Excluir Evento .................................................................. 27

Figura 28 - Caso de Uso Excluir Notícia .................................................................. 27

Figura 29 - Caso de Uso Excluir Estação ................................................................ 28

Figura 30 - Caso de Uso Excluir Qualidade da Água ............................................... 28

Figura 31 - Caso de Uso Excluir Qualidade da Água do Rio .................................... 29

Figura 32 - Caso de Uso Excluir Bairro .................................................................... 29

Figura 33 - Diagrama de Sequência Login ............................................................... 29

Figura 34 - Diagrama de Sequência Cadastrar Notícia ............................................ 30

Figura 35 - Diagrama de Sequência Cadastrar Bairro ............................................. 30

Figura 36 - Diagrama de Sequência Cadastrar Diretor ............................................ 31

Figura 37 - Diagrama de Sequência Cadastrar Estação .......................................... 31

Figura 38 - Diagrama de Sequência Cadastrar Evento ............................................ 32

Figura 39 - Diagrama de Sequência Projeto ............................................................ 32

Figura 40 - Diagrama de Sequência Qualidade ....................................................... 33

Figura 41 - Diagrama de Sequência Consultar Qualidade da Água ......................... 34

Figura 42 - Diagrama de Sequência Consultar Projeto ............................................ 34

Figura 43 - Diagrama de Sequência Consultar Notícia ............................................ 34

Figura 44 - Diagrama de Sequência Consultar Evento ............................................ 35

Figura 45 - Diagrama de Sequência Consultar Qualidade do Rio ............................ 35

Figura 46 - Estrutura geral das pastas do projeto .................................................... 37

Figura 47 - Estrutura da pasta src ............................................................................ 37

Figura 48 - Trecho de código da página app.component.ts ..................................... 37

Figura 49 - Trecho do código do menu principal do aplicativo ................................. 38

Figura 50 - Trecho do código em CSS da página de Despoluição do aplicativo ...... 38

Figura 51 - Trecho do código do provider da página de eventos do aplicativo ......... 39

Figura 52 - Parte do código em HTML do aplicativo ................................................ 39

Figura 53 - Execução do aplicativo no terminal ........................................................ 39

LISTA DE ABREVIATURAS E SIGLAS

CSS – Linguagem de Folhas de Estilo (CascadingStyleSheets)

CVS – Sistema de Versões Concorrentes (ConcurrentVersion System)

DFD – Diagrama de Fluxo de Dados

GPL – Licença Pública Geral (General PublicLicense)

HTML – Linguagem de Marcação de Hipertexto (HyperTextMarkupLanguage)

I/O – Entrada e saída de dados em programas de computador (Input/Output)

SAAE – Serviço Autônomo de Água e Esgoto

SCM – Gestão da Cadeia Logística (Supply Chain Management)

UML – Linguagem de Modelagem Unificada (UnifiedModelingLanguage)

SUMÁRIO

1 INTRODUÇÃO E JUSTIFICATIVA....................................................................... 10

2 REVISÃO BIBLIOGRÁFICA................................................................................. 11

3 OBJETIVOS ........................................................................................................ 14

4 MATERIAIS E MÉTODOS ................................................................................... 15

4.1 MODELAGEM DE DADOS ........................................................................... 15

4.1.1 Diagramas de Caso de Uso de Alto Nível .............................................. 15

4.1.2 Diagrama de Caso de Uso de Baixo Nível ............................................. 17

4.1.2.1 Cadastrar Projetos .......................................................................... 17

4.1.2.2 Cadastrar Eventos .......................................................................... 18

4.1.2.3 Cadastrar Notícias .......................................................................... 18

4.1.2.4 Cadastrar Estações ........................................................................ 19

4.1.2.5 Cadastrar Qualidade da Água ........................................................ 19

4.1.2.6 Cadastrar Qualidade da Água do Rio ............................................. 20

4.1.2.7 Cadastrar Bairro ............................................................................. 20

4.1.2.8 Logout ............................................................................................ 21

4.1.2.9 Alterar Projetos ............................................................................... 21

4.1.2.10 Alterar Eventos ............................................................................... 22

4.1.2.11 Alterar Notícias ............................................................................... 22

4.1.2.12 Alterar Estações ............................................................................. 23

4.1.2.13 Alterar Qualidade da Água.............................................................. 23

4.1.2.14 Alterar Qualidade da Água do Rio .................................................. 24

4.1.2.15 Consultar Qualidade da Água do Rio .............................................. 24

4.1.2.16 Consultar Qualidade da Água ......................................................... 25

4.1.2.17 Consultar Estações ........................................................................ 25

4.1.2.18 Consultar Eventos .......................................................................... 26

4.1.2.19 Consultar Projetos .......................................................................... 26

4.1.2.20 Consultar Notícias .......................................................................... 26

4.1.2.21 Excluir Projeto ................................................................................ 27

4.1.2.22 Excluir Evento................................................................................. 27

4.1.2.23 Excluir Notícia................................................................................. 27

4.1.2.24 Excluir Estação ............................................................................... 28

4.1.2.25 Excluir Qualidade da Água ............................................................. 28

4.1.2.26 Excluir Qualidade da Água do Rio .................................................. 29

4.1.2.27 Excluir Bairro .................................................................................. 29

4.1.3 Diagrama de Sequência ........................................................................ 29

4.2 DESENVOLVIMENTO DO CÓDIGO ............................................................ 36

4.3 EXECUÇÃO DO APLICATIVO ..................................................................... 39

5 RESULTADOS E DISCUSSÃO ........................................................................... 41

6 CONCLUSÕES.................................................................................................... 42

7 SUGESTÕES PARA TRABALHOS FUTUROS ................................................... 43

8 REFERÊNCIAS ................................................................................................... 44

10

1 INTRODUÇÃO E JUSTIFICATIVA

Devido ao aumento gradativo da usabilidade dos aplicativos no dia a

dia da população, seja em qualquer tipo de segmento, notou-se uma

oportunidade para implantação de uma ferramenta que auxilia de modo fácil,

eficaz e rápido a informação chegar até a população que deseja saber e

entender um pouco mais sobre os índices e dados da água de Sorocaba.

Com base no projeto de Trabalho de Graduação realizado na Fatec

Sorocaba chamado “Borgundfjorden.no – O portal para dados ambientais”

(PESSUTO, 2016), o qual reportava algumas informações sobre os fiordes

naturais da Noruega, surgiu então o ponto de partida para o desenvolvimento

deste projeto.

De acordo com BARANAUSKAS (2003), para obter um melhor

desempenho do software devemos não só tratar a qualidade do mesmo, mas

sim, a qualidade do sistema como um todo, incluindo o ambiente de trabalho e

os recursos disponíveis para serem utilizados, ou seja, não basta apenas

desenvolver, temos que nos preocupar com o ambiente em que o usuário

encontrará no aplicativo.

Nesse relatório será dada ênfase na análise de interação humana e

computador, no desenvolvimento da linguagem UML e os estudos para um

desenvolvimento de uma aplicação móvel, que foi realizada em paralelo com a

análise e o levantamento inicial dos requisitos. As demais fases estão

contempladas no relatório do outro componente do projeto.

A primeira etapa do projeto consistiu no levantamento da bibliografia e

estudos das técnicas de desenvolvimento de aplicativos e levantamentos de

dados a respeito da água presente da cidade de Sorocaba. Também foi

desenvolvido um protótipo simples com as funcionalidades básicas do

aplicativo.

11

2 REVISÃO BIBLIOGRÁFICA

Este projeto derivou do Trabalho de Graduação (PESSUTO, 2016)

realizado na Fatec Sorocaba chamado “Borgundfjorden.no – O portal para

dados ambientais” e propõe um portal ambiental de livre acesso que exponha a

biodiversidade do Rio Sorocaba a partir da coleta de dados da autarquia

responsável pela água do município de Sorocaba, o SAAE Sorocaba (SAAE,

2016), a qual fornece informações para o aplicativo.

Para elaborar essa pesquisa foram revisadas as obras dos autores

Pressman (2014) e Sommerville (2006) que abordam temas relacionados ao

planejamento de desenvolvimento de um software.

Segundo Sommerville (2006), software é caracterizado como um programa

de computador e toda a documentação associada a ele. Já Pressman (2014)

define software como um elemento de sistema lógico, e não físico que não se

desgasta. Para este autor, a Engenharia de Software é uma tecnologia em 3

camadas: processos, métodos e ferramentas. E a base de todas essas

camadas é o foco na qualidade do software desenvolvido.

Processos: constituem um elo de ligação que mantém juntos os métodos

e as ferramentas e possibilita o desenvolvimento racional e oportuno do

software de computador. É o alicerce da engenharia de software.

Métodos: proporciona os detalhes de "como fazer" para construir o

software;

Ferramentas: proporcionam apoio automatizado ou semi - automatizado

aos métodos.

Ainda segundo o autor, o trabalho associado à engenharia de software pode

ser categorizado em três fases genéricas, independentemente da área de

aplicação, do tamanho do projeto ou de sua complexidade: Definição,

Desenvolvimento e Manutenção.

O teste de software, sob o ponto de vista dos métodos convencionais da

Engenharia de Software, é, na realidade, uma séria de quatro passos,

implementados na seguinte ordem: unidade, integração, validação e sistema.

12

Engenharia de Software é uma área da computação voltada à

especificação, desenvolvimento, manutenção e criação de sistemas de

software, com aplicação de tecnologias e práticas de gerência de projetos e

outras disciplinas, visando organização, produtividade e qualidade. Atualmente,

essas tecnologias e práticas englobam linguagens de programação, banco de

dados, ferramentas, plataformas, bibliotecas, padrões, processos e a questão

da qualidade de software.

Para desenvolver esta pesquisa foi adotado o modelo DFD (Diagrama

de Fluxo de Dados) que delimita as funcionalidades do sistema antes do

desenvolvimento do código.

Para desenvolvermos o código foi usado Javascript. Segundo Zakas

(2002):

“O JavaScript é muito vagamente baseado em Java, uma linguagem de programação orientada a objetos popularizada para uso na Web por meio de applets incorporados. Embora o JavaScript tenha uma sintaxe e metodologia de programação semelhantes, não é uma versão "leve" de Java. Em vez disso, o JavaScript é sua própria linguagem dinâmica, encontrando sua home em navegadores da Web ao redor do mundo e permitindo a interação aprimorada do usuário em sites e aplicações web” (ZAKAS,2002, p.:35, tradução nossa).

Utilizamos como ambiente de codificação o software editor ATOM. Tem-

se como vantagem de desenvolver em um ambiente e assim, a utilização de

tecnologias como HTML ou CSS e suas devidas extensões.

Em nosso projeto de desenvolvimento optamos por uma aplicação

híbrida, ou seja, um aplicativo que possa ser executado em qualquer

plataforma: iOS, ou Android, ou Windows Phone. Para o desenvolvimento

utilizamos um framework chamado Ionic 2.

Para trabalhar com o Ionic 2 é necessário envolver alguns componentes

no projeto. Estes componentes são: Cordova (Integração com recursos nativos

dos dispositivos), AngularJS(Criação da parte Web da App) e Ionic Module e o

Ionic CLI (Ferramentas e Componentes disponibilizados pelo framework). De

acordo com empresa Ionic: “Hoje, a Ionic é a tecnologia de desenvolvimento

móvel multi plataforma mais popular do mundo, dando poder a startups em seu

rápido crescimento para se tornarem grandes empresas no mundo” (IONIC 2)

https://pt.wikipedia.org/wiki/Desenvolvimento_de_software

https://pt.wikipedia.org/wiki/Software

https://pt.wikipedia.org/wiki/Ger%C3%AAncia_de_projetos

https://pt.wikipedia.org/wiki/Tecnologia

https://pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o

https://pt.wikipedia.org/wiki/Banco_de_dados

https://pt.wikipedia.org/wiki/Banco_de_dados

https://pt.wikipedia.org/wiki/Ferramenta_CASE

https://pt.wikipedia.org/wiki/Plataforma_(inform%C3%A1tica)

https://pt.wikipedia.org/wiki/Biblioteca_de_rotinas

https://pt.wikipedia.org/wiki/Qualidade_de_software

http://cordova.apache.org/

https://angularjs.org/

13

Devido à abrangência de desenvolvimento que esse framework nos

proporciona, escolhemos utilizar HTML e CSS, que ajudam incorporar o design

e comunicação do projeto com a Internet. A linguagem HTML nos remete a

novas funcionalidades e tags que deixam a criação de websites e aplicações

muito mais dinâmica, atrativa e harmoniosa.

Com a evolução dos recursos de programação, as páginas da internet

têm adotado estilos e variações para deixá-las mais elegantes e atrativas para

os usuários. Com isto, linguagens de marcação simples como o HTML,

anteriormente destinadas apresentarem os conteúdos também foram

aprimoradas. Assim, a linguagem CSS foi inserida no dia a dia dos

programadores.

O CSS 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.

Para então auxiliar no modo de escrita e também na ambientação

dessas linguagens e no seu desenvolvimento, Duckett observa:

“Todos os dias, mais e mais pessoas querem aprender alguns HTML e CSS. Juntando-se aos profissionais da web designers e programadores são novos públicos que precisam saber um pouco de código no trabalho (atualização de um sistema de gerenciamento de conteúdo ou loja de comércio eletrônico) e aqueles que querem tornar os seus blogs pessoais mais atraentes”. (DUCKETT:2011, p.: tradução nossa).

14

3 OBJETIVOS

O objetivo deste trabalho foi dar continuidade aos estudos realizados

anteriormente em busca de um aplicativo móvel que divulgue informações

sobre a água da cidade de Sorocaba. Neste estudo foi aplicado o

conhecimento em planejar e desenvolver uma aplicação móvel, bem como

todas as suas ligações técnicas como: levantamento de requisitos, modelagem

de dados, desenvolvimento do código.

Portanto, foi necessário o uso do conhecimento em modelagem de

dados e para auxiliar nisto usamos a ferramenta Visio, e também para

desenvolvimento do código foi utilizado o editor de texto Atom.

15

4 MATERIAIS E MÉTODOS

4.1 MODELAGEM DE DADOS

Foi utilizada neste projeto para orientação de modelagem de dados a

bibliografia de Pressman (PRESSMAN, 2014). Todo projeto exige um

planejamento, e um projeto de desenvolvimento de uma aplicação também

inclui esse tipo de elaboração e planejamento. Antes mesmo de começar a

escrever os código e rotinas, é necessário elaborar um planejamento, um

escopo, reuniões com o cliente para então, começar a liberar pequenas

entregas do projeto. No que diz respeito à modelagem de dados, podemos citar

o Diagrama de Caso de Uso de Alto Nível, bem como o Diagrama de Caso de

Uso de baixo Nível, também o Digrama de Fluxo de Dados que foi o qual nos

auxiliou para delimitar e modelar o sistema, descrevendo assim os envolvidos e

as funcionalidades da aplicação móvel. Abaixo seguem os diagramas (Figuras

1 a 45) modelados para este projeto.

4.1.1 Diagramas de Caso de Uso de Alto Nível

Figura 1 - Diagrama de Caso de Uso de Alto Nível do Administrador

Fonte: O autor (2016).

Figura 2 - Diagrama de Caso de Uso – Cadastrar

16


Figura 3 - Diagrama de Caso de Uso – Alterar


Figura 4 - Diagrama de Caso de Uso– Excluir

17


Figura 5 - Diagrama de Caso de Uso – Consultar


4.1.2 Diagrama de Caso de Uso de Baixo Nível

4.1.2.1 Cadastrar Projetos

Figura 6 - Caso de Uso Cadastrar Projetos

18


4.1.2.2 Cadastrar Eventos

Figura 7 - Caso de Uso Cadastrar Eventos


4.1.2.3 Cadastrar Notícias

Figura 8 - Caso de Uso Cadastrar Notícias

19


4.1.2.4 Cadastrar Estações

Figura 9 - Caso de Uso Cadastrar Estações


4.1.2.5 Cadastrar Qualidade da Água

Figura 10 - Caso de Uso Cadastrar Qualidade da Água

20


4.1.2.6 Cadastrar Qualidade da Água do Rio

Figura 11 - Caso de Uso Cadastrar Qualidade da Água do Rio


4.1.2.7 Cadastrar Bairro

Figura 12 - Caso de Uso Cadastrar Bairro

21


4.1.2.8 Logout

Figura 13 - Caso de uso Logout


4.1.2.9 Alterar Projetos

Figura 14 - Caso de Uso Alterar Projetos

22


4.1.2.10 Alterar Eventos

Figura 15 - Caso de Uso Alterar Eventos


4.1.2.11 Alterar Notícias

Figura 16 - Caso de Uso Alterar Notícias

23


4.1.2.12 Alterar Estações

Figura 17 - Caso de Uso Alterar Estações


4.1.2.13 Alterar Qualidade da Água

Figura 18 - Caso de Uso Alterar Qualidade da Água

24


4.1.2.14 Alterar Qualidade da Água do Rio

Figura 19 - Caso de Uso Alterar Qualidade da Água do Rio


4.1.2.15 Consultar Qualidade da Água do Rio

Figura 20 - Caso de Uso Consultar Qualidade da Água do Rio

25


4.1.2.16 Consultar Qualidade da Água

Figura 21 - Caso de Uso Consultar Qualidade da Água


4.1.2.17 Consultar Estações

Figura 22 - Caso de Uso Consultar Estações


26

4.1.2.18 Consultar Eventos

Figura 23 - Caso de Uso Consultar Eventos


4.1.2.19 Consultar Projetos

Figura 24 - Caso de Uso Consultar Projetos


4.1.2.20 Consultar Notícias

Figura 25 - Caso de uso Consultar Notícias


27

4.1.2.21 Excluir Projeto

Figura 26 - Caso de Uso Excluir Projeto


4.1.2.22 Excluir Evento

Figura 27 - Caso de Uso Excluir Evento


4.1.2.23 Excluir Notícia

Figura 28 - Caso de Uso Excluir Notícia

28


4.1.2.24 Excluir Estação

Figura 29 - Caso de Uso Excluir Estação


4.1.2.25 Excluir Qualidade da Água

Figura 30 - Caso de Uso Excluir Qualidade da Água

29


4.1.2.26 Excluir Qualidade da Água do Rio

Figura 31 - Caso de Uso Excluir Qualidade da Água do Rio


4.1.2.27 Excluir Bairro

Figura 32 - Caso de Uso Excluir Bairro


4.1.3 Diagrama de Sequência

Para modelar as trocas de mensagens entre os objetos no decorrer do

sistema ao ser realizado uma operação. Abaixo seguem os Diagramas de

Sequências das operações possíveis da aplicação.

Figura 33 - Diagrama de Sequência Login

30


Figura 34 - Diagrama de Sequência Cadastrar Notícia


Figura 35 - Diagrama de Sequência Cadastrar Bairro

31


Figura 36 - Diagrama de Sequência Cadastrar Diretor


Figura 37 - Diagrama de Sequência Cadastrar Estação

32


Figura 38 - Diagrama de Sequência Cadastrar Evento


Figura 39 - Diagrama de Sequência Projeto

33


Figura 40 - Diagrama de Sequência Qualidade

34


Figura 41 - Diagrama de Sequência Consultar Qualidade da Água


Figura 42 - Diagrama de Sequência Consultar Projeto


Figura 43 - Diagrama de Sequência Consultar Notícia

35


Figura 44 - Diagrama de Sequência Consultar Evento


Figura 45 - Diagrama de Sequência Consultar Qualidade do Rio

36


4.2 DESENVOLVIMENTO DO CÓDIGO

Neste projeto após a elaboração e modelagem de dados, foi

implementado um protótipo através de códigos as funcionalidades da aplicação

móvel. Os códigos de nível back-end foram desenvolvidos em um ambiente

proporcionado pelo software editor de texto Atom e na linguagem de

desenvolvimento TypeScript.Abaixo segue a imagem da estrutura dos códigos

fontes no projeto (Figuras 46 a 52).

37

Figura 46 - Estrutura geral das pastas do projeto


Figura 47 - Estrutura da pasta src


Figura 48 - Trecho de código da página app.component.ts


38

Figura 49 - Trecho do código do menu principal do aplicativo


A aplicação é inicializada através deste comando:

initializeApp() { this.platform.ready().then(() => { StatusBar.styleDefault(); Splashscreen.hide(); }); }

Toda codificação do front-endneste projeto foi utilizada a linguagem

CSS, onde foi utilizado como referência e também como agregação de

conhecimento a bibliografia DUCKETT (2011).

Figura 50 - Trecho do código em CSS da página de Despoluição do aplicativo

39


Figura 51 - Trecho do código do provider da página de eventos do aplicativo


Figura 52 - Parte do código em HTML do aplicativo


4.3 EXECUÇÃO DO APLICATIVO

Para a execução do código foi utilizado à plataforma IONIC 2, onde

executa-se através do comando “ionic serve”no terminal de comando e verifica-

se a evolução da aplicação móvel pelo browser do próprio computador (Figura

53).

Figura 53 - Execução do aplicativo no terminal

40


41

5 RESULTADOS E DISCUSSÃO

Como resultado nesta etapa final de pesquisa, foi executada toda

modelagem de dados, bem como a estruturação do projeto, preparação do

ambiente de desenvolvimento, desenvolvimento do código e uma primeira

versão do aplicativo junto a sua implementação.

Os resultados obtidos neste projeto até o momento foram: a modelagem

do projeto, a estruturação e desenvolvimento do código e a criação de uma

primeira versão do aplicativo. Para garantir a melhor forma de desenvolvimento

e um protótipo da aplicação, foram estudadas várias metodologias de

desenvolvimento e ferramentas, tais como: Ionic 2, AngularJs 2, Node.js, Atom,

Codova, Star UML, Levantamento de Requisitos, TypeScript, que auxiliam e

garantem o desenvolvimento e conclusão do projeto.

42

6 CONCLUSÕES

Mediante ao acesso aos informativos contidos na aplicação, o cidadão

possuirá uma gama maior de conteúdo a respeito da cidade de Sorocaba. Os

visitantes da aplicação poderão consultar de forma simples as notícias,

projetos, eventos, índices do Rio Sorocaba de uma forma simples e objetiva,

através das páginas de navegação do aplicativo.

A literatura utilizada foi muito importante para a pesquisa, principalmente

com relação a parte de UML, bem como a tecnologia escolhida IONIC 2. A web

também tem se apresentado como uma grande aliada para pesquisa das

ferramentas que foram utilizadas no desenvolvimento do projeto, algumas

destas ferramentas foram testadas e descartadas por motivos de

incompatibilidade e problemas de performance no desenvolvimento. A escolha

das ferramentas tem se voltado no sentido de facilitar o trabalho de

desenvolvimento, aliando-se ao melhor resultado. Essa escolha vem

consolidando sua importância nos projetos de tecnologia da informação, onde

as ferramentas e tecnologias são grandes pontos de influência dentro de um

projeto, saber evidenciar seus aspectos bons e ruins e aproveitar todos seus

recursos torna-se muito válido.

Com a definição da estrutura do projeto baseado em tecnologias

confiáveis, a etapa de desenvolvimento aponta para um grande

aproveitamento, fazendo que o projeto em sua totalidade foi concluído com

sucesso.

43

7 SUGESTÕES PARA TRABALHOS FUTUROS

Deve-se ressaltar que este projeto está em sua primeira versão, então o

mesmo não passou por testes de usuário reais.

Podemos citar que como requisitos funcionais o aplicativo pode ser

aprimorado em uma etapa posterior através dos seguintes aspectos:

a) na utilização de um servidor;

b) desenvolvimento que aponte para a otimização do desempenho e da

interface do usuário;

c) implementação do projeto no servidor da autarquia SAAE Sorocaba; e

d) disponibilização para usuários em geral.

44

8 REFERÊNCIAS

ATOM. WhyAtom? Disponível em: <http://flight-manual.atom.io/getting-started/sections/why-atom/>. Acesso em: 20 set. 2016. DUCKETT, J. HTML&CSS design and build websites. Hoboken: Wiley&Sons, 2011. GIT: distributed-even-if-your-workflow-isnt. [2017]. Disponível em: <https://git-scm.com/> Acesso em: 21 set. 2016. IONIC 2. [2016]. Disponível em: <http://ionic.io/2>. Acesso em: 21 de set. 2016. LINO, M. O que é Apache Cordova? 2015. Disponível em: <http://blog.marianalino.com.br/o-que-e-apache-cordova/>. Acesso em: 21 set. 2016. NODEBR.O que é Node.js? [2016]. Disponível em: <http://nodebr.com/o-que-e-node-js/>. Acesso em: 21 set. 2016. PESSUTTO, D. Borgundfjorden.no:o portal para dados ambientais. 2016. 46f. Trabalho de Conclusão de Curso (Tecnologia em Análise e Desenvolvimento de Sistemas) – Faculdade de Tecnologia José Crespo Gonzales, Sorocaba, 2016. PORTO, Tiago. Tutorial de configuração do ambiente Ionic + Android no Windows. 2015. Disponível em: <http://www.tiagoporto.com/blog/tutorial-de-configuracao-do-ambiente-ionic-android-no-windows/> Acesso em: 30 nov 2016. POWERSTAR 7. Uma breve explicação sobre aplicativos móveis. <Http://www.omb10.com/franquias/2/4444/editor-html/228076.pdf>. Acessado em 21 set. 2016. PRESSMAN, R. Engenharia de software: uma abordagem profissional. 7. ed. São Paulo: McGraw Hill, 2006. PRESSMAN, R. S.; MAXIM, B. Software engineering: apractitioner’sapproach. 8th ed. New York: McGraw-Hill, 2014. ROCHA, H.V. da; BARANAUSKAS, M.C.C. Design e avaliação de interfaces humano-computador. Campinas: NIED/UNICAMP, 2003. SAAE Sorocaba. Sorocaba, 2016. Disponível em: <http://saaesorocaba.com.br/ site/?page_id=134>. Acesso em: 15 set. 2016. SOMMERVILLE, I. Software engineering.8th ed. Upper Saddle River: Pearson Education, 2006.

45

STARUML: tutorial. Viçosa: Universidade Federal de Viçosa, 2013. Disponível em: <http://www.dpi.ufv.br/projetos/geoprofile/tutoriais/StarUMLTutorial.pdf>. Acesso em: 21 set. 2016. TUTORIAL Ionic: meu primeiro app. 2015. Disponível em: <http://tableless.com.br/tutorial-ionic-meu-primeiro-app/> Acesso em: 30 nov. 2016. TYPESCRIPT: preview. [2017]. Disponível em: <http://www.diullei.com/TypeScript-ptBR/>. Acesso em: 21 set. 2016. VALENTE, K. Porque utilizar AngularJS no seu próximo projeto. 2014. Disponível em: <https://tasafo.org/2014/11/26/porque-utilizar-angularjs-no-seu-proximo-projeto/>. Acesso em: 21 set. 2016. ZAKAS, N. C. Professional JavaScript for Web developers. 3rd ed. Hoboken:Wiley&Sons, 2012.

Faculdade de Tecnologia de Sorocaba Relatório Final ... · Segundo Sommerville (2006), software é...

Documents

Transcript of Faculdade de Tecnologia de Sorocaba Relatório Final ... · Segundo Sommerville (2006), software é...