UNIVERSIDADE ESTADUAL DA ZONA OESTE COLEGIADO … · LISTA DE FIGURAS Figura 1 – Explicação do...
51
UNIVERSIDADE ESTADUAL DA ZONA OESTE COLEGIADO DE COMPUTAÇÃO E MATEMÁTICA APLICADA CURSO DE BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO DIARIUM: APLICAÇÃO WEB VOLTADA PARA O REGISTRO DE ATIVIDADES DIÁRIAS por Jeferson Farias Calazans Profa. Dra. Dilza de Mattos Szwarcman Orientadora Rio de Janeiro (RJ), Julho de 2014
Transcript of UNIVERSIDADE ESTADUAL DA ZONA OESTE COLEGIADO … · LISTA DE FIGURAS Figura 1 – Explicação do...
UNIVERSIDADE ESTADUAL DA ZONA OESTE
COLEGIADO DE COMPUTAÇÃO E MATEMÁTICA APLICADA
CURSO DE BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO
DIARIUM: APLICAÇÃO WEB VOLTADA PARA O REGISTRO DE
ATIVIDADES DIÁRIAS
por
Jeferson Farias Calazans
Profa. Dra. Dilza de Mattos Szwarcman
Orientadora
Rio de Janeiro (RJ), Julho de 2014
UNIVERSIDADE ESTADUAL DA ZONA OESTE
COLEGIADO DE COMPUTAÇÃO E MATEMÁTICA APLICADA
CURSO DE BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO
DIARIUM: APLICAÇÃO WEB VOLTADA PARA O REGISTRO DE
ATIVIDADES DIÁRIAS
por
Jeferson Farias Calazans
Relatório apresentado à Banca Examinadora do
Trabalho de Conclusão do Curso de Ciência da
Computação para análise e aprovação.
Orientadora: Profa. Dra. Dilza de Mattos Szwarcman
Rio de Janeiro (RJ), Julho de 2014
DIARIUM: APLICAÇÃO WEB VOLTADA PARA O REGISTRO DE
ATIVIDADES DIÁRIAS
Elaborado por Jeferson Farias Calazans
Aluno do Curso Ciência da Computação da UEZO
Este trabalho de Graduação foi analisado e aprovado com
Grau: ..............................................
Rio de Janeiro, _______ de ______________ de 2014
Rio de Janeiro (RJ), Julho de 2014
Calazans, Jeferson Farias
Diarium: Aplicação Web voltada para o registro de atividades diárias / Jeferson
Farias Calazans. – Rio de Janeiro, 2014.
51f.
Trabalho de conclusão de curso – Centro Universitário Estadual da Zona Oeste,
Curso de Bacharelado em Ciência da Computação.
Orientadora: Profa. Dra. Dilza de Mattos Szwarcman
Dedico este trabalho a meus queridos pais, Heitor e Lúcia, e à Michele, minha amada,
por todo carinho e amor.
AGRADECIMENTOS
Aos meus pais, Heitor Calazans Júnior e Lúcia Silva Farias Calazans, pelo cuidado,
orientação, paciência e apoio durante toda minha formação. À Michele Piezente, minha
amada, por seu apoio, carinho, dedicação e paciência desde sempre e durante toda a
produção deste trabalho.
A minha orientadora Dilza de Mattos Szwarcman, por ter acreditado e colaborado para a
conclusão deste trabalho e também por sua atenção, dedicação, amizade e
companheirismo.
Agradeço também a todas as pessoas que de certa forma me influenciaram e me fizeram
chegar até aqui.
"Inteligência é a habilidade de evitar fazer o trabalho e, mesmo assim conseguir ter o
trabalho realizado”
Linus Torvalds
LISTA DE ABREVIATURAS
MVC
HTML
CSS
MVP
MTV
PHP
HTTP
IIS
URL
URI
Model-View-Controller, arquitetura de software
Hypertext Markup Language, linguagem para marcação de texto
Cascade StyleSheet, linguagem para estilização
Minimum Viable Product
Model-Template-View
Hypertext Preprocessor, linguagem de programação
Hypertext Transfer Protocol, protocolo de comunicação
Internet Information Server
Uniform Resource Locator
Uniform Resource Identifier
LISTA DE FIGURAS
Figura 1 – Explicação do funcionamento de um sistema web..........................................4
Figura 2 – Simulação de uma solicitação e resposta.........................................................6
Figura 3 – Demonstrativo de métodos HTTP em um sistema web...................................7
Figura 4 – Mostrando em destaque códigos de resposta HTTP em uma aplicação
Django...............................................................................................................................8
Figura 5 – Arquitetura MVC.............................................................................................8
Figura 6 – Comparativo de ambiente de informação não planejado e planejado............10
Figura 7 – Site da empresa StarBucks utilizando Responsive Web Design....................11
Figura 8 – Flat Design aplicado no Windows 8..............................................................12
Figura 9 – Arquitetura cliente-servidor...........................................................................15
Figura 10 – Kanban.........................................................................................................16
Figura 11 – Arquitetura de uma aplicação Django..........................................................17
Figura 12 – Arquitetura do sistema Diarium...................................................................19
Figura 13 – Diagrama de Classes do Sistema..................................................................20
Figura 14 – Diagrama de Caso de Uso............................................................................21
Figura 15 – Model que representa o mapeamento da tabela Evento...............................23
Figura 16 – Template utilizado na tela de autenticação do sistema Diarium..................24
Figura 17 – View utilizada na tela de visualização do Evento do sistema Diarium........25
Figura 18 - Representação módulo Calendarium............................................................26
Figura 19 – Tela de cadastro no sistema..........................................................................27
Figura 20 – Tela de autenticação do sistema...................................................................27
Figura 21 – Tela de recuperar senha no sistema..............................................................28
Figura 22 – Tela inicial do sistema..................................................................................28
Figura 23 – Tela de visualização do perfil e estatísticas do usuário................................29
Figura 24 – Tela de editar perfil do usuário....................................................................29
Figura 25 – Tela de editar email do usuário....................................................................30
Figura 26 – Tela de editar senha do usuário....................................................................30
Figura 27 – Tela de adicionar evento..............................................................................31
Figura 28 – Tela de visualizar e editar evento.................................................................31
Figura 29 – Tela de buscar evento...................................................................................32
Figura 30 – Tela de favoritos...........................................................................................32
Figura 31 – Tela de calendário........................................................................................33
LISTA DE TABELAS
Tabela 1 – Tabela lógica baseada na entidade Usuário...................................................22
Tabela 2 – Tabela lógica baseada na entidade Evento....................................................22
Tabela 3 – Tabela lógica baseada na entidade Tag ........................................................23
Tabela 4 – Tabela lógica baseada no relacionamento entre as entidades Evento e Tag
.........................................................................................................................................23
RESUMO
A Internet evoluiu muito desde a sua criação, em especial no aspecto social com a
formação de comunidades virtuais. Há, atualmente, diversas redes sociais onde muitas
informações são compartilhadas. Naturalmente, tal evolução impulsionou o aspecto
tecnológico, trazendo novas abordagens para o desenvolvimento de sistemas web, onde
a interface com dispositivos móveis é tomada como requisito essencial. Além disso, tais
tecnologias buscam prover alta rapidez de desenvolvimento, além de facilidade de
extensão e manutenção.
Nesse contexto, este trabalho se dedica à investigação de tecnologias atuais para o
desenvolvimento web e à aplicação integrada de várias delas na construção do sistema
Diarium, que tem como finalidade auxiliar os usuários no registro e organização de
atividades e compromissos do dia-a-dia, podendo ser acessado a partir de computadores
ou de dispositivos móveis. Tal aplicação teve como motivação o fato que, na maioria
das redes sociais atuais, o usuário fica sem a opção de manter registros de
acontecimentos de interesse de forma inteiramente privada.
Palavras-chave: sistemas web, organização de atividades, diário, agenda.
ABSTRACT
The Internet has evolved greatly since its inception, particularly in the social aspect,
with the formation of several virtual communities. There are currently many different
social networks where information is shared. Naturally, this development has boosted
the technological aspect, bringing new approaches for the development of web systems,
where the interface with mobile devices is taken as an essential requirement.
Furthermore, such technologies seek to provide high speed of development, and ease of
extension and maintenance.
In this context, this work is devoted to the investigation of current technologies for web
development and integrated application of several of them in the construction of
Diarium a system that aims to aid users in recording and organizing activities and
appointments for the day-to-day and that can be accessed from computers or mobile
devices. This application was motivated by the fact that, in most of today's social
networks, the user is left with no option of keeping records of events of interest in an
entirely private way.
Keywords: web systems, organizing activities, journal, schedule.
SUMÁRIO
CAPÍTULO 1 INTRODUÇÃO......................................................................................1
1.1 APRESENTAÇÃO......................................................................................................1
1.2 OBJETIVOS................................................................................................................2
1.3 JUSTIFICATIVA........................................................................................................3
CAPÍTULO 2 FUNDAMENTAÇÃO TEÓRICA.........................................................4
2.1 SISTEMAS WEB........................................................................................................4
2.2 SERVIDORES WEB...................................................................................................5
2.3 PROTOCOLO HTTP..................................................................................................5
2.4 ARQUITETURA MVC...............................................................................................8
2.5 FRAMEWORKS WEB...............................................................................................9
2.6 ARQUITETURA DA INFORMAÇÃO....................................................................10
2.7 RESPONSIVE WEB DESIGN.................................................................................11
2.8 FLAT DESIGN..........................................................................................................11
2.9 METODOLOGIAS ÁGEIS DE DESENVOLVIMENTO........................................12
2.10 CONTROLE DE VERSÃO.................................................................................14
CAPÍTULO 3 O SISTEMA DIARIUM.......................................................................15
3.1 TECNOLOGIAS UTILIZADAS..............................................................................15
3.1.1 KANBAN............................................................................................................15
3.1.2 GIT.......................................................................................................................16
3.1.3 PYTHON.............................................................................................................16
3.1.4 DJANGO.............................................................................................................16
3.1.5 POSTGRESQL....................................................................................................17
3.1.6 HTML5................................................................................................................17
3.1.7 CSS e CSS3.........................................................................................................17
3.1.8 JAVASCRIPT.....................................................................................................18
3.2 ARQUITETURA.......................................................................................................19
3.3 MODELAGEM.........................................................................................................19
3.3.1 ATORES DO SISTEMA.....................................................................................19
3.3.2 DIAGRAMA DE CLASSES...............................................................................20
3.3.3 DIAGRAMA DE CASO DE USO......................................................................21
3.3.3.1 CRIA PERFIL.....................................................................................................21
3.3.3.2 CRIA TAG..........................................................................................................21
3.3.3.3 CRIA EVENTO...................................................................................................21
3.3.3.4 BUSCA EVENTO...............................................................................................21
3.3.3.5 ESCOLHE EVENTO FAVORITO.....................................................................22
3.3.3.6 GERENCIA USUÁRIO......................................................................................22
3.3.4 MODELO LÓGICO............................................................................................22
3.4 IMPLEMENTAÇÃO.................................................................................................23
3.4.1 MODEL – TEMPLATE – VIEW........................................................................23
3.4.2 CALENDARIUM................................................................................................26
3.4.3 TELAS.................................................................................................................27
3.4.3.1 CADASTRO NO SISTEMA...............................................................................27
3.4.3.2 AUTENTICAÇÃO NO SISTEMA.....................................................................27
3.4.3.3 RECUPERAR SENHA NO SISTEMA..............................................................28
3.4.3.4 TELA INICIAL...................................................................................................28
3.4.3.5 VISUALIZAÇÃO DO PERFIL E ESTATÍSTICAS..........................................29
3.4.3.6 EDITAR PERFIL DO USUÁRIO.......................................................................29
3.4.3.7 EDITAR EMAIL DO USUÁRIO.......................................................................30
3.4.3.8 EDITAR SENHA DO USUÁRIO.......................................................................30
3.4.3.9 ADICIONAR EVENTO......................................................................................30
3.4.3.10 VISUALIZAR E EDITAR EVENTO......................................................31
3.4.3.11 BUSCAR EVENTO.................................................................................32
3.4.3.12 FAVORITOS...........................................................................................32
3.4.3.13 CALENDÁRIO........................................................................................33
CAPÍTULO 4 CONCLUSÃO.......................................................................................34
REFERÊNCIAS BIBLIOGRÁFICAS........................................................................35
SITES...............................................................................................................................35
1
CAPÍTULO 1
INTRODUÇÃO
1.1 APRESENTAÇÃO
A Internet está presente no dia a dia da maioria das pessoas, tornando-se bastante
utilizada para o entretenimento, convívio social, como fonte de informação e na
resolução de diversos problemas.
Dentro de uma visão mais ampla, pode-se verificar que, com o passar dos anos foram
surgindo diversos dispositivos que permitem às pessoas utilizarem a Internet de forma
convencional, não ficando restrito o seu uso apenas aos computadores.
Acompanhando essa escalada, surgiram diversas redes sociais que transformaram a
maneira como as pessoas se comunicam e interagem na Internet. Elas tem se revelado
uma maneira mais simples e rápida de transmitir informações e estabelecer
relacionamentos.
Porém, nem todos os fatos ou atividades precisam ser expostos publicamente nas redes
sociais e, se atendo a essa questão, o presente projeto se propõe a construir um diário
virtual, denominado Diarium, que é tomado como base para o estudo e investigação de
tecnologias modernas para desenvolvimento de sistemas web. Em especial, pretende-se
investigar a arquitetura Model View Control (MVC), muito bem aceita pela comunidade
de cientistas da computação e que tem impulsionado a construção de diversos
Frameworks.
O sistema Diarium foi idealizado para auxiliar o usuário a recuperar sua privacidade na
Internet, utilizando um sistema para registros de atividades e compromissos do dia-a-dia
de forma inteiramente privada.
2
1.2 OBJETIVOS
Este trabalho de conclusão de curso tem por objetivo a criação de um sistema web que
possa ser acessado através de dispositivos móveis ou computadores convencionais.
Todo o trabalho está baseado na utilização de tecnologias de programação e
metodologias de desenvolvimento atuais.
3
1.3 JUSTIFICATIVA
Existem duas questões determinantes para a escolha do referido tema para o trabalho de
conclusão de curso.
Primeiramente, há um interesse muito grande do autor em aprofundar o seu
conhecimento das práticas atuais de desenvolvimento de software voltado para
ambientes web. Essa área profissional mostra-se bastante promissora para aqueles que
possuem domínio sobre ela.
Além disso, embora haja no mercado atual diversos sistemas web que visam o
compartilhamento de informações, observa-se claramente a carência de aplicativos que
foquem na privacidade dos registros do usuário.
4
CAPÍTULO 2
FUNDAMENTAÇÃO TEÓRICA
O sistema proposto neste trabalho emprega tecnologias computacionais atuais,
reconhecidamente vantajosas em especial por se basearem em modelos técnicos bem
estabelecidos, tal como a arquitetura Model View Control (MVC). Além disso, o projeto
emprega metodologias de desenvolvimento que seguem os preceitos mais atuais da
Engenharia de Computação. As seções que se seguem descrevem a fundamentação
teórica do trabalho
2.1 SISTEMAS WEB
Sistemas web são sistemas disponíveis na Internet ou em uma rede corporativa, de
acesso restrito ou público a diversos usuários, por meio de um navegador, em um
computador pessoal, notebook, tablet ou smartphone (Figura 1).
A Internet foi um fator fundamental para o rápido crescimento do uso de sistemas web.
Antes, o processamento de informações era feito no âmbito dos computadores pessoais
ou de redes corporativas. Atualmente, a Internet permite a implantação de sistemas de
acesso compartilhado, em tempo real, e ainda com compartilhamento de dados, podendo
ser consultados de qualquer lugar do mundo e a qualquer hora.
Figura 1 – Explicação do funcionamento de um sistema web
5
2.2 SERVIDORES WEB
Servidores Web são programas de computador que tem por responsabilidade aceitar de
clientes remotos, geralmente os navegadores, e servi-los com respostas, que geralmente
são páginas web, tais como documentos HTML (Hypertext Markup Language) com
objetos embutidos (imagens, vídeos, etc).
Para se hospedar um site ou um sistema web, é necessário um Servidor Web. A seguir
apresenta-se uma breve descrição sobre os principais servidores web utilizados
atualmente:
Apache: é o servidor web mais utilizado no mundo. O Apache oferece uma
variedade de recursos, e é suportado pelas principais linguagens de programação
(Python, Ruby, PHP, etc).
IIS: é o servidor web da Microsoft. Ele é parte integrante do Windows Server,
apesar de não ser habilitado por padrão em uma instalação normal do Windows.
Como principal característica desse servidor, está a integração com as
tecnologias criadas pela Microsoft.
Nginx: é um servidor web rápido, leve, e com inúmeras possibilidades de
configuração para melhor desempenho. Ele também pode ser utilizado como um
servidor proxy reverso, bem como um servidor proxy de email.
2.3 PROTOCOLO HTTP
O HTTP (Hypertext Transfer Protocol) é um protocolo de comunicação em rede, na
camada de aplicação do Modelo OSI, utilizado em sistemas hipermídia distribuídos para
permitir a transmissão de informações entre clientes e servidores. A comunicação é
baseada em requisições (requests) e respostas (responses) (Figura 2).
6
Figura 2 – Simulação de uma solicitação e resposta
O protocolo HTTP define oito tipos de requisição ou métodos. A seguir está a lista com
as descrições dos mesmos.
GET: solicita ao servidor um recurso identificado por uma URI (Uniform
Resource Identifier). É o método padrão, porque é a forma como o navegador
chama o servidor quando se digita uma URL (Uniform Resource Locator).
POST: Os parâmetros de solicitação são codificados no corpo da mensagem.
Seu uso mais frequente é na submissão de formulários.
HEAD: similar ao método GET, o servidor apenas retoma a linha de resposta e
os cabeçalhos de resposta.
PUT: esse método permite o envio de arquivos para o servidor web.
DELETE: permite a exclusão de documentos dentro do servidor web.
OPTIONS: recupera os métodos HTTP que o servidor web aceita.
TRACE: permite depurar as requisições, devolvendo o cabeçalho de um
documento.
CONNECT: serve para usar com um proxy que possa se tornar um túnel TCP/IP
transparente.
7
Figura 3 – Demonstrativo de métodos HTTP em um sistema web
Na Figura 3 pode-se visualizar exemplos do uso de métodos HTTP em um sistema web.
O conteúdo de uma requisição HTTP inclui o tipo de método, a página que será
acessada e parâmetros do formulário. Em contrapartida, o conteúdo de uma resposta
inclui o código de status (informando se a solicitação foi realizada com sucesso ou não),
o tipo de conteúdo (HTML, figuras, textos, etc.) e o conteúdo propriamente dito.
Uma resposta HTTP é composta de duas partes: o cabeçalho e o corpo. A informação do
cabeçalho informa o protocolo que está sendo usado no navegador, o tipo de conteúdo
que está incluído no corpo e se ocorreu ou não erro na solicitação.
A linha inicial de uma resposta HTTP indica ao cliente se sua requisição foi bem
sucedida ou não. Essa situação é fornecida através de um código de retorno e uma frase
explicativa. A seguir está a lista dos mais encontrados:
200: informa que a confirmação da requisição foi respondida com sucesso.
304 (NOT MODIFIED): informa que os recursos que não foram modificados
desde a última vez que foi feito uma solicitação.
401 (UNAUTHORIZED): informa que o cliente não tem acesso autorizado para
acessar a área requisitada.
403 (FORBIDDEN): informa que o acesso à área requisitada falhou.
404 (NOT FOUND): informa que o quer que tenha sido solicitado não foi
encontrado.
505 (SERVER ERROR): informa que ocorreu um erro no servidor ao cumprir
uma requisição válida.
8
Figura 4 – Mostrando em destaque códigos de resposta HTTP em uma aplicação Django
Na Figura 4 pode-se visualizar exemplos de respostas HTTP em uma aplicação web.
2.4 ARQUITETURA MVC
A Arquitetura MVC é um padrão de desenvolvimento de software que separa as
representações internas dos dados (e as suas regras de negócio) da forma como eles são
apresentados ao usuário, ou seja da interface com a qual ele interage. Para isso, o padrão
MVC divide a aplicação nas três partes apresentadas na Figura 5: Modelo (Model),
Visão (View) e Controlador (Controller).
Originalmente desenvolvida para computação pessoal, a Arquitetura MVC tornou-se
amplamente difundida como uma arquitetura padrão para o desenvolvimento de
sistemas web.
Figura 5 - Arquitetura MVC
O Controlador interpreta as requisições do usuário, mapeando-as em comandos que são
enviados para o Modelo e para a Visão para efetuar a ação desejada. O Modelo por sua
vez, é responsável pela gerência dos dados, além de responder a perguntas sobre o
9
estado corrente dos mesmos e também a solicitações de mudanças desse estado. O
Modelo é, em geral, a principal estrutura da arquitetura MVC, normalmente
concentrando as regras de negócio e modelos de solução do problema que se está
tentando resolver. Já a Visão é responsável por apresentar as informações para o usuário
através de uma interface. Ela fica totalmente separada da lógica do sistema, recebendo
as instruções do Controlador e as informações do Modelo para então exibi-las. Além
disso, a Visão também se comunica de volta com o Modelo e com o Controlador para
reportar alterações no seu estado.
2.5 FRAMEWORKS WEB
Diversas linguagens de programação são hoje utilizadas para o desenvolvimento de
sistemas web. Muitas delas foram impulsionadas pela criação de Frameworks Web que
facilitam o desenvolvimento dessas aplicações.
Os Frameworks Web utilizam a Arquitetura MVC como padrão para o desenvolvimento
de sistemas web. Alguns deles utilizam algumas variações dessa arquitetura, porém,
mantendo funcionamento semelhante.
Abaixo, segue uma lista das principais linguagens utilizadas atualmente e seus
respectivos Frameworks Web:
Python é uma linguagem de programação de alto nível, interpretada, que tem
como característica suportar diferentes paradigmas, tais como: imperativo, o
funcional e o orientado a objetos. Para o desenvolvimento web em Python, há
disponível o Framework Django. Hoje bem aceito, ele foi lançado no ano de
2005 e utiliza o padrão MTV (Model-Template-View).
Ruby é uma linguagem de programação interpretada multiparadigma de tipagem
dinâmica e forte. Ela suporta programação funcional, orientada a objetos,
imperativa e reflexiva. Nesse caso, o framework web mais utilizado é o Ruby on
Rails que foi criado no ano de 2004 e foi o precursor no uso da arquitetura MVC
para desenvolvimento de sistemas web.
PHP é uma linguagem de programação interpretada, usada originalmente para
desenvolvimento de aplicações atuantes no lado do servidor, capaz de gerar
conteúdo dinâmico na web. O framework web em PHP mais utilizado é o Zend
Framework, lançado no ano de 2005. Desenvolvido com o objetivo de
10
simplificar o desenvolvimento web, ele promove as melhores práticas na
comunidade de desenvolvedores PHP e a utilização do padrão MVC.
2.6 ARQUITETURA DA INFORMAÇÃO
A área de Arquitetura da Informação tem a preocupação de organizar a informação para
torná-la clara e compreensível a quem a observa (Figura 6).
Figura 6 – Comparativo de ambiente de informação não planejado e planejado
O papel da Arquitetura da Informação em sistemas web é organizar toda a informação
daquele ambiente, estruturando e distribuindo as áreas, principais e secundárias, para
que as informações possam ser encontradas com facilidade. Para isso, são utilizados
variadas técnicas de design centradas no usuário, como: testes de usabilidade, pesquisas,
criação de personas e fluxogramas.
Teste de usabilidade tem por objetivo verificar a facilidade que o sistema web ou site
possui de ser claramente compreendido e manipulado pelo usuário. A criação de
personas serve como forma de entender e enxergar melhor um usuário, pode ser uma
descrição mais simples ou detalhada, com o intuito de personificar um usuário fictício
dentro do público alvo. Já os fluxogramas são fundamentais para o olhar realista do
projeto, pois além de compreender os caminhos ainda permite encontrar fluxos mais
objetivos para a visualização de determinadas seções ou telas.
11
2.7 RESPONSIVE WEB DESIGN
Responsive Web Design é um conceito da área de Comunicação Visual, que prega que a
informação deve estar acessível de forma confortável para qualquer que seja o meio de
acesso (de desktops e notebooks a tablets e smartphones). Com base nesse conceito,
foram criadas soluções técnicas para garantir que os elementos de interface dos sistemas
web se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo
visualizado (Figura 7).
Figura 7 – Site da empresa StarBucks utilizando Responsive Web Design
2.8 FLAT DESIGN
Flat Design ou design plano é a nova tendência para criação das interfaces digitais.
Com filosofia simplista e minimalista esse estilo é focado na usabilidade e centrado nos
usuários. O Flat Design baseia-se na eliminação dos elementos desnecessários,
buscando uma interface mais intuitiva e fácil de utilizar. Atualmente, esse é um conceito
de design largamente utilizado em conjunto com o Responsive Web Design. As
principais características do Flat Design são:
12
Utilização de cores sólidas;
Tipografia nítida;
Contraste bem definido;
Espaços em branco exagerados.
Figura 8 – Flat Design aplicado no Windows 8
2.9 METODOLOGIAS ÁGEIS DE DESENVOLVIMENTO
Metodologias Ágeis são largamente adotadas atualmente, pois fornecem uma estrutura
conceitual para reger projetos de software que prioriza a velocidade de
desenvolvimento, mantendo, porém, o alto nível de qualidade. Elas são baseadas no
Manifesto Ágil, que estabelece os doze princípios listados a seguir.
A maior prioridade é satisfazer o cliente, através da entrega adiantada e contínua
de software de valor.
Aceitar mudanças de requisitos, mesmo no fim do desenvolvimento. Processos
ágeis se adequam a mudanças, para que o cliente possa tirar vantagens
competitivas.
Entregar software funcionando com frequência, na escala de semanas até meses.
Pessoas relacionadas a negócios e desenvolvedores devem trabalhar em conjunto
e diariamente, durante todo o curso do projeto.
13
Construir projetos ao redor de indivíduos motivados, dando a eles o ambiente e
suporte necessário, e confiar que farão seu trabalho.
O método mais eficiente e eficaz de transmitir informações para um time de
desenvolvimento, ou entre membros da equipe, é através de uma conversa cara a
cara.
Software funcional é a medida primária de progresso.
Processos ágeis promovem um ambiente sustentável. Os patrocinadores,
desenvolvedores e usuários, devem ser capazes de manter indefinidamente,
passos constantes.
Contínua atenção à excelência técnica e ao bom design; aumenta a agilidade.
Simplicidade é a arte de maximizar a quantidade de trabalho que não precisou
ser feito.
As melhores arquiteturas, requisitos e designs emergem de times auto-
organizáveis.
Em intervalos regulares, o time reflete em como ficar mais efetivo, então, se
ajusta e otimiza seu comportamento de acordo.
Scrum, Extreme Programming (XP) e Kanban são exemplos de métodos ágeis. Cada um
deles traz uma abordagem diferente que inclui diversos valores, práticas e reuniões. O
Scrum, por exemplo, traz uma abordagem mais voltada para gestão, com foco maior nas
reuniões, no planejamento e na melhoria contínua. No XP, o enfoque maior são as
práticas técnicas. Já o Kanban difere da maioria dos métodos ágeis, pois não possui
interações. Ao invés disso, desacopla o planejamento, a priorização, o desenvolvimento
e a entrega, de forma que cada uma dessas atividades possa ter sua própria cadência
para melhor se ajustar à realidade e necessidade que o processo demanda.
As Metodologias Ágeis permitem a aplicação do conceito de Minimum Viable Product
(MVP), que determina primeiro cobrir, através de uma pesquisa, o que o mercado não
oferece, para depois desenvolver as funcionalidades essenciais para o lançamento do
sistema, e só então programar mais funcionalidades para o sistema, baseadas no
feedback dos usuários.
14
2.10 CONTROLE DE VERSÃO
Um sistema de Controle de Versão registra as mudanças feitas em um arquivo ou
conjunto de arquivos ao longo do tempo de forma que versões específicas possam ser
recuperadas.
A utilização de sistemas de controle de versão foi impulsionada pela expansão da
aplicabilidade de metodologias ágeis para desenvolvimento de software. Tais sistemas
são, também, muito comuns no desenvolvimento de software livre. Em diversos
aspectos, a utilização de um sistema de versão, se mostra muito útil, tanto para projetos
pessoais, pequenos, como para grandes projetos comerciais. Segue abaixo a descrição
de três controladores muito utilizados atualmente.
Subversion (SVN): é um sistema de controle de versão open source,
multiplataforma, desenvolvido pela Apache Software Foundation.
Mercurial: é uma ferramenta multiplataforma de controle de versão distribuído
sob licença open source para desenvolvedores de software.
Git: é um sistema open source de controle de versão desenvolvido pelo criador
do kernel do Linux, Linus Torvalds.
15
CAPÍTULO 3
O SISTEMA DIARIUM
O sistema Diarium segue o conceito de arquitetura cliente-servidor, comumente adotado
nos aplicativos web, podendo ter, como clientes, aplicativos comuns de navegação na
Internet, instalados em computadores ou em dispositivos móveis (Figura 9).
Figura 9 –Arquitetura cliente-servidor
3.1 TECNOLOGIAS UTILIZADAS
Em um projeto como este, uma questão muito importante é a escolha das tecnologias de
programação e das metodologias a serem empregadas para o desenvolvimento. Tomou-
se como base um conjunto de tecnologias open-source, de grande aceitação na
comunidade de cientistas da computação, com extensa documentação, bem
exemplificadas e com pequenas chances de serem descontinuadas.
3.1.1 KANBAN
O uso do Kanban foi de grande valia para o desenvolvimento deste trabalho, pois no
Kanban o processo é um fluxo contínuo e não é preciso que todo o trabalho planejado
esteja concluído para que uma entrega seja realizada. Isso fez com que o
desenvolvimento da documentação ocorresse em paralelo com o do projeto em si
(Figura 10).
16
Figura 10 – Kanban
3.1.2 GIT
No desenvolvimento deste trabalho de conclusão de curso, utilizou-se o sistema Git para
gerenciamento de versões de código fonte. Tal sistema adota um modelo distribuído de
controle de versão que favorece a maior velocidade de desenvolvimento. O uso desse
sistema foi fundamental para uma melhor organização do código fonte.
3.1.3 PYTHON
A linguagem de programação utilizada é o Python, uma linguagem de alto nível e
código fonte livre e de uso geral, criada com o objetivo de permitir os programadores
desenvolverem código de alta qualidade e fácil de manter.
3.1.4 DJANGO
Em consonância com a escolha da linguagem, o framework utilizado é o Django, um
framework para desenvolvimento de sistemas web, escrito em Python e de código livre
que utiliza o padrão MTV (Model – Template – View) visto na Figura 11.
Um dos elementos mais importantes do Django é seu sistema de templates. Ele possui
uma forma peculiar de trabalhar que facilita a criação de páginas HTML. Um template
pode conter variáveis, que são substituídas por valores quando o modelo é avaliado, e
tags, que controlam a lógica do modelo.
17
Figura 11 – Arquitetura de uma aplicação Django
3.1.5 POSTGRESQL
O sistema de gerenciamento de banco de dados escolhido é o PostgreSQL, um software
desenvolvido como projeto de código livre e que utiliza o modelo relacional de base de
dados. É atualmente um dos bancos de dados mais populares do mundo.
3.1.6 HTML5
A linguagem para estruturação e apresentação de conteúdo para web escolhida será
HTML5, quinta versão da linguagem HTML que é utilizada para criação de páginas
web. Essa nova versão traz importantes mudanças quanto ao papel do HTML no mundo
web, através de novas funcionalidades como semântica e acessibilidade.
3.1.7 CSS e CSS3
Para definir estilos das páginas web do projeto são utilizadas, de forma conjunta, CSS e
CSS3. CSS foi criado para prover a separação entre o formato e o conteúdo do
documento HTML. Sua mais nova versão, CSS3, define estilos para páginas web com
18
efeitos de transição, imagem, entre outros, que dão um novo estilo às aplicações web em
todos os aspectos de design do layout.
3.1.8 JAVASCRIPT
Para a criação de scripts a serem executados no lado cliente a linguagem utilizada é o
JavaScript, uma linguagem de programação interpretada. Ela foi implementada
originalmente como parte dos navegadores web para que scripts pudessem ser
executados do lado cliente e, dessa forma, erros de entrada de dados pudessem ser
tratados localmente sem a necessidade do acesso ao servidor. A linguagem evoluiu para
permitir comunicação assíncrona com o servidor e carregamento parcial de páginas.
19
3.2 ARQUITETURA
Figura 12 – Arquitetura de uma aplicação Django
A Figura 11 ilustra o funcionamento do sistema Diarium, baseado na arquitetura MTV
(Model – Template – View) do Django.
3.3 MODELAGEM
3.3.1 ATORES DO SISTEMA
Usuário: representa qualquer usuário da base de dados que pode criar, editar ou
excluir um evento no sistema.
Administrador: usuário com privilégios responsável pela atualização e
manutenção do sistema.
20
3.3.2 DIAGRAMA DE CLASSES
Figura 13 – Diagrama de Classes do Sistema
21
3.3.3 DIAGRAMA DE CASO DE USO
Figura 14 – Diagrama de Caso de Uso
3.3.3.1 CRIA PERFIL
Este caso de uso permite ao usuário do sistema criar um perfil para ter acesso ao
sistema.
3.3.3.2 CRIA TAG
Este caso de uso permite ao usuário do sistema criar, editar ou excluir as tags que serão
inseridas em seus eventos.
3.3.3.3 CRIA EVENTO
Este caso de uso permite ao usuário do sistema criar, editar ou excluir seus eventos.
3.3.3.4 BUSCA EVENTO
Este caso de uso permite ao usuário do sistema fazer buscas por seus eventos.
22
3.3.3.5 ESCOLHE EVENTO FAVORITO
Este caso de uso permite o usuário do sistema escolher seus eventos favoritos.
3.3.3.6 GERENCIA USUÁRIO
Este caso de uso permite ao administrador do sistema gerenciar os usuários cadastrados.
3.4 MODELO LÓGICO
Usuário
Variável Tipo Chave Null Descrição
ID Inteiro Primária N ID do usuário
Nome Texto - N Nome do usuário
Sobrenome Texto - N Sobrenome do usuário
Data_nascimento Data - N Data de nascimento do usuário
Sexo Texto - N Sexo do usuário
Email Texto - N Email do usuário
Senha Texto - N Senha do usuário
Foto Texto - N Foto do usuário
Tags_ids Array - N Sequência com IDs de tags
criadas pelo usuário
Eventos_ids Array - N Sequência com IDs dos
eventos criados pelo usuário
Tabela 1 - Tabela lógica baseada na entidade Usuário
Evento
Variável Tipo Chave Null Descrição
ID Inteiro Primária N ID do evento
Usuário Inteiro Estrangeira
Usuário(ID)
N ID do usuário que criou o
evento
Título Texto - N Título do evento
Data Data - N Data em que ocorreu o evento
Conteúdo Texto - N Conteúdo do evento
Foto Texto - N Foto do evento
Favorito Booleano - N Verifica se o evento foi
favoritado
Tabela 2 - Tabela lógica baseada na entidade Evento
23
Tag
Variável Tipo Chave Null Descrição
ID Inteiro Primária N ID da tag
Usuário Inteiro Estrangeira
Usuário(ID)
N ID do usuário que criou o
evento
Nome Texto - N Nome da tag
Tabela 3 - Tabela lógica baseada na entidade Tag
EventoTag
Variável Tipo Chave Null Descrição
ID Inteiro Primária N ID da tabela
Evento Inteiro Estrangeira
Usuário(ID)
N ID do evento relacionado com
a tag
Tag Inteiro Estrangeira
Usuário(ID)
N ID da tag relacionada com a
evento
Tabela 4 - Tabela lógica baseada no relacionamento entre as entidades Evento e Tag
3.5 IMPLEMENTAÇÃO
3.4.1 MODEL – TEMPLATE – VIEW
Um objeto modelo consiste nos dados da aplicação, regras de negócio, lógica e funções.
Ele contém os campos e comportamentos essenciais das entidades do sistema.
Geralmente, cada modelo corresponde a uma tabela no banco de dados. Cada modelo é
uma classe Python e cada atributo do modelo representa uma coluna da respectiva
tabela no banco de dados.
Figura 15 – Model que representa o mapeamento da tabela Evento
24
Na Figura 15 pode-se visualizar a definição do modelo Event que possui alguns
atributos (title, body, author, etc.). Cada um desses atributos corresponde a um campo
da tabela Evento no banco de dados.
Abaixo segue o template da tela de autenticação do sistema Diarium.
Figura 16 – Template da tela de autenticação do sistema Diarium
25
A View recebe uma requisição HTTP e retorna uma resposta HTTP. Essa resposta pode
ser um documento HTML, um redirecionamento, uma imagem, etc. Seu funcionamento
é o mesmo de um Controller da arquitetura MVC. A View ilustrada na Figura 17 mostra
o funcionamento da tela de visualização do Evento do sistema Diarium.
Figura 17 – View da tela de visualização do Evento do sistema Diarium
26
3.4.2 CALENDARIUM
Python possui uma extensa biblioteca padrão. Ela é disponibilizada na instalação da
linguagem e contém um grande número de módulos úteis. No desenvolvimento do
sistema Diarium foi preciso entender o módulo HTMLCalendar1 da biblioteca calendar
2
que resultou na criação do módulo Calendarium, que contém métodos a mais utilizados
no sistema. A figura 18 representa o módulo Calendarium.
Figuras 18 – Representação módulo Calendarium
1 < https://docs.python.org/2/library/calendar.html#calendar.HTMLCalendar> Acessado em 2 de julho de
2014
2 < https://docs.python.org/2/library/calendar.html#calendar.HTMLCalendar> Acessado em 2 de julho de
2014
27
3.4.3 TELAS
3.4.3.1 CADASTRO NO SISTEMA
Para ter acesso ao sistema é preciso preencher um cadastro para a criação de um
usuário.
Figura 19 – Tela de cadastro no sistema
3.4.3.2 AUTENTICAÇÃO NO SISTEMA
Antes de entrar no sistema, o usuário deverá informar o seu nome de usuário e a sua
senha, para que sejam validados e permitido ou vetado o acesso.
Figura 20 – Tela de autenticação do sistema
28
3.4.3.3 RECUPERAR SENHA NO SISTEMA
Caso o usuário tenha esquecido sua senha, ele pode recuperá-la acessando a tela de
recuperar senha.
Figura 21 – Tela de recuperar senha no sistema
3.4.3.4 TELA INICIAL
Após a validação dos dados de login, o usuário é redirecionado à tela inicial do sistema.
Nessa tela são exibidos todos os eventos cadastrados pelo usuário no mês corrente.
Figura 22 – Tela inicial do sistema
29
3.4.3.5 VISUALIZAÇÃO DO PERFIL E ESTATÍSTICAS
Ao clicar no nome de usuário disposto no menu lateral à esquerda, o usuário é
redirecionado para a tela de visualização do perfil que apresenta algumas estatísticas.
Figura 23 – Tela de visualização do perfil e estatísticas do usuário
3.4.3.6 EDITAR PERFIL DO USUÁRIO
Ao clicar no item Editar na tela de visualização do perfil e estatísticas, o usuário será
redirecionado para a tela de editar perfil do usuário.
Figura 24 – Tela de editar perfil do usuário
30
3.4.3.7 EDITAR EMAIL DO USUÁRIO
Ao clicar no item Editar Senha na tela de editar perfil, o usuário será redirecionado para
a tela de editar email do usuário.
Figura 25 – Tela de editar email do usuário
3.4.3.8 EDITAR SENHA DO USUÁRIO
Ao clicar no item Editar Email na tela de editar perfil, o usuário será redirecionado para
a tela de editar senha do usuário.
Figura 26 – Tela de editar senha do usuário
3.4.3.9 ADICIONAR EVENTO
Ao clicar em adicionar evento no menu lateral à esquerda, o usuário é redirecionado
para a tela de adicionar evento. Nessa tela o usuário pode registrar sua atividade, marcá-
31
la como favorito, adicionar tags para melhor organização dos eventos e uma imagem
que registra o momento.
Figura 27 – Tela de adicionar evento
3.4.3.10 VISUALIZAR E EDITAR EVENTO
Ao clicar sobre um evento na tela inicial do sistema o usuário é redirecionado para a
visualização do mesmo. Nessa tela o usuário poderá adicionar mais informações ao
registro, marcar ou desmarcar como favorito, adicionar e remover tags, além de
cadastrar ou remover a uma imagem que registra o momento.
Figura 28 – Tela de visualizar e editar evento
32
3.4.3.11 BUSCAR EVENTO
Ao digitar um texto no campo de busca que se encontra no menu lateral à esquerda ou
clicar em um das tags presentes nos eventos da tela inicial, o usuário será redirecionado
para tela de busca que mostrará o resultado da busca efetuada pelo usuário.
Figura 29 – Tela de buscar evento
3.4.3.12 FAVORITOS
Ao clicar em favoritos no menu lateral à esquerda, o usuário será redirecionado para a
tela que lista todos os eventos marcados como favorito pelo usuário.
Figura 30 – Tela de favoritos
33
3.4.3.13 CALENDÁRIO
Ao clicar em calendário no menu lateral à esquerda, o usuário será redirecionado para
tela de calendário que mostra o ano corrente e destaca na cor cinza os dias dos meses
que possuem eventos cadastrados e em verde o dia atual. Ao clicar no nome de um
determinado mês, o usuário será redirecionado para a visualização dos eventos no desse
mês. Caso o usuário clique em um dia de um mês qualquer, ele será redirecionamento
para tela de criação de um evento naquele dia.
Figura 31 – Tela de calendário
34
CAPÍTULO 4
CONCLUSÃO
Esse trabalho de conclusão de curso apresentou o desenvolvimento do sistema Diarium.
Através dele foi possível alcançar o objetivo de criar um sistema web que auxiliasse o
usuário no registro e organização de atividades e compromissos do dia-a-dia, podendo
ser acessado a partir de computadores ou dispositivos móveis.
Apesar do sistema já estar maduro o suficiente para ser lançado, ele ainda não está
completo. Faltam-lhe alguns ajustes no layout que, se implementados, poderiam torná-
lo uma ferramenta ainda melhor.
Portanto, o desenvolvimento do sistema Diarium não cessará com o término deste
trabalho. Seguindo os preceitos de metodologia ágil, esse sistema terá como premissa o
desenvolvimento e crescimento contínuo, ou seja, adicionar mais funcionalidades ao
sistema conforme as necessidades dos usuários.
35
REFERÊNCIAS BIBLIOGRÁFICAS
Boeg, Jesper. Kanban em 10 passos. InfoQ, 2012.
Fried, Jason - David Hansson, Heinemeier - Linderman, Matthew. Getting Real: The
Smarter, Faster, Easier Way to Build a Successful Web Application. 37signals, 2009.
Gomes, André Faria. Agile: Desenvolvimento de software com entregas frequentes e
foco no valor de negócio. Casa do Código, 2013.
Greenfeld, Daniel - Roy, Audrey M. Two Scoops of Django: Best Practices For Django
1.5. CreateSpace Independent Publishing Platform, 2013.
Lopes, Sérgio. A Web Mobile: Programe para um mundo de muitos dispositivos. Casa
do Código, 2013.
Mazza, Lucas. HTML5 e CSS3: Domine a web do futuro. Casa do Código, 2013.
Zemel, Tárcio. Web Design Responsivo: Páginas adaptáveis para todos os dispositivos.
Casa do Código, 2013.
SITES:
Django, "Documentação".
Disponível em: <https://docs.djangoproject.com/en/1.6/>
Acesso em: 26.jun.2014
Entendendo um pouco mais sobre o protocolo HTTP.
Disponível em: <http://simplesideias.com.br/entendendo-um-pouco-mais-sobre-o-
protocolo-http
Acesso em: 26.jun.2014
Git, "Documentação".
Disponível em: <http://git-scm.com/documentation>
Acesso em: 26.jun.2014
36
Introdução a Arquitetura MVC.
Disponível em: <http://developer.nokia.com/community/wiki/Arquitetura_MVC_-
_Model-View-Controller>
Acesso em: 26.jun.2014
Manifesto para desenvolvimento ágil de software.
Disponível em: <http://manifestoagil.com.br/>
Acesso em: 26.jun.2014
O que é Arquitetura de Informação?
Disponível em: <http://chocoladesign.com/o-que-e-arquitetura-de-informacao>
Acesso em: 26.jun.2014
O que é flat design?
Disponível em: < http://gizmodo.uol.com.br/o-que-e-flat-design/>
Acesso em: 26.jun.2014
Porque usar um Framework?
Disponível em: <http://blog.glaucocustodio.com/2012/07/31/porque-usar-um-
framework/>
Acesso em: 26.jun.2014
Python, site oficial.
Disponível em: <https://www.python.org/>
Acesso em: 26.jun.2014
