TCC (1.000Mb)

(1)

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE

Marcos Felipe da Silva

Ronny Geovanio de Lima Bernardino

Plataforma de agendamento de visitas ao ponto turístico da cidade de Lajes/RN

LAJES, RN 2018

(2)

Relatório de Prática Profissional apresentado ao Curso Técnico de Nível Médio em Informática, modalidade subsequente, do Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Norte, campus Avançado de Lajes, em cumprimento às exigências legais como requisito parcial à obtenção do título de Técnico em Informática.

Orientador: Prof. Me. Mario Andrade Vieira de Melo Neto.

(3)

Plataforma de Agendamento de Visita ao Ponto Turístico da Cidade de Lajes/RN

Relatório de Prática Profissional apresentado ao Curso Técnico de Nível Médio em Informática, modalidade subsequente, do Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Norte, campus Avançado de Lajes, em cumprimento às exigências legais como requisito parcial à obtenção do título de Técnico em Informática.

Relatório de práctica profissional aprovado em ___/___/____, pela seguinte Banca Examinadora:

Nota Final:______

____________________________________

Mario Andrade Vieira de Melo Neto - Orientador

Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Norte

_____________________________________ Ermerson de Oliveira Capistrano

Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Norte

_____________________________________ Pedrina Celia Brasil

(4)

Eu disse: “O negro me dribla” E pus os joelhos no chão Olhei para o infinito Pedi ao Deus de Abraão “Me livra deste maldito!” Me lembrei de Riachão. Antônio Cruz

(5)

AGRADECIMENTOS

Agradecemos primeiramente a Deus por tudo que ele nos proporcionou em nossas vidas e pelo o que ele tem nos dado .

A todos aqueles que acreditaram na realização deste trabalho e deram-me forças e estímulo para dar prosseguimento a esta pesquisa e obter sucesso. Em especial, meu orientador, Prof. Me. Mario Andrade Vieira de Melo Neto.

Agradecemos também aos nossos pais e familiares pelo amor, apoio, paciência e pela valorização dos estudos como essencial ao crescimento.

Aos nossos colegas de turma e a todos aqueles que nos incentivaram tanto no decorrer do trabalho quanto no decorrer do curso.

(6)

LISTA DE SIGLAS

CSS Cascading Style Sheets

SGBD Sistema de Gerenciamento de Banco de Dados SQL Structured Query Language

RF Requisitos Funcionais RNF Requisitos Não funcionais HTML Hypertext Markup Language

(7)

LISTA DE FIGURAS

Figura 1- Página inicial do construct 2. 5

Figura 2- Página inicial do construct 2. 6

Figura 3- Acessando localhost:9000 no navegador. 8

Figura 4- página inicial do MySQL Workbench. 11

Figura 5- Diagrama de caso de uso 14

Figura 6- Diagrama de classe. 16

Figura 7- modelo E-R 17

Figura 8-Tela de Início 18

Figura 9- Tela de Relatos 19

Figura 10- Tela de Localização 19

Figura 11- Tela de Cadastro 20

Figura 12- Tela de Login 20

Figura 13- Tela de Agendamento 21

Figura 14- Tela de Alterar Senha. 21

Figura 15- Tela de Esqueceu a Senha. 22

Figura 16- Encontro entre o Aventureiro e a mãe do menino perdido. 24 Figura 17- Encontro do aventureiro com o Feiticeiro. 24

Figura 18- O aventureiro é desafiado pelo diabo. 25

Figura 19- O aventureiro encontra o menino perdido e um carneiro. 25 Figura 20- O aventureiro encontra uma cruz e uma capela. 26

Figura 21- Imagem do fim do jogo. 26

Figura 22- Imagem do cenário já implementada. 27

Figura 23- Imagem da cruz e da capela implementada. 27

Figura 24- Personagens 28

Figura 25- Menu. 29

Figura 26- Teclado com os controles do jogo. 30

Figura 27- Configuração no sistema para utilizar áudios. 30

Figura 28- Fase do jogo. 31

(8)

LISTA DE TABELAS

Tabela 1- Comandos do Play Framework 7

Tabela 2- Requisitos funcionais 12

(9)

Sumário

1. Introdução 1 1.1 Problemática 1 1.2 Metodologia do Trabalho 1 1.3 Objetivos 2 1.4 Estrutura do documento 3 2. Fundamentação teórica 4 2.1 Jogos Digitais 4 2.2 Construct 2d 5 2.3 Play Framework 6 2.4 Twitter Bootstrap 8

2.5 BANCO DE DADOS (MySql) 9

3. Modelagem do sistema 12

3.1 Visão Geral 12

3.2 Requisitos funcionais 12

3.3 Requisitos Não Funcionais 13

3.4 Casos de Uso 13

3.4.1 Atores 14

3.4.2 Descrição dos Casos de Uso 14

3.5 Diagrama de Classes de Domínio 15

3.6 Modelo E-R 17

3.7 Implementação 18

3.7.1 Telas 18

4. Jogo: Contos da Serra do Feiticeiro 23

4.1 Construção da Ideia 23 4.2 Storyboard 23 4.3 Implementação 26 4.4 Funcionamento Geral 29 5. Conclusões 32 5.1 Trabalhos Futuros 32 6. Referências: 33

(10)

Resumo

O presente trabalho apresenta o processo de concepção e construção de um sistema de agendamento de visitas ao ponto turístico da cidade de Lajes/RN conhecido como Serra do Feiticeiro. O sistema basicamente é um hospedeiro para o jogo contos serra do feiticeiro, contém a história , a lenda e a localização da Serra do Feiticeiro. O usuário será capaz de realizar agendamentos para visitar o local e relatar como foi a experiência na trilha. Esse sistema tem como objetivo a divulgação da serra do feiticeiro e facilitar o agendamento para os visitantes e trilheiros.

(11)

Abstract

The present work presents the process of design and construction of a scheduling system for visits to the tourist district of the city of Lajes/RN, known as the Serra do Feiticeiro. The system is basically a host for the fairy tale game of the sorcerer, contains the history, legend and location of the Sorcerer's Range. The user will be able to make schedules to visit the place and report how the experience on the trail was.This system aims to publicize the sorcerer's saw and facilitate the scheduling of visitors and trackers.

(12)

.: Página 1 :.

1.

Introdução

Ao observar que a cidade de Lajes/RN tem um ponto turístico conhecido por Serra do Feiticeiro porém esse local é pouco conhecido e explorado por pessoas que não habitam na cidade de lajes. Um dos motivo para tal problema é a pouca divulgação, não existe um site específico para a divulgação e agendamento do local.

1.1 Problemática

Diante de tal problemática, este trabalho visa criar um sistema web para a divulgação da história, das lendas, da localização da serra do feiticeiro e facilitar o agendamento de visitas ao local. Nesse sistema o usuário poderá se divertir com o jogo contos da serra do feiticeiro que é um jogo digital que foi desenvolvido para plataforma web, o jogo se passa em terceira pessoa e tem o objetivo de divertir e transmitir conhecimento sobre as lendas da serra do feiticeiro. O sistema também vai facilitar no controle das agendas para os trilheiros que guia as pessoas na trilha do ponto turístico. E os trilheiros terá total controle com as agendas pois todas as agendas ficará listadas em uma página do sistema.

1.2 Metodologia do Trabalho

Para o desenvolvimento deste trabalho, primeiro foi descoberto problema observando que a Serra do Feiticeiro era pouco visitada por pessoas que não reside na cidade de Lajes/RN. Então começamos o projeto com uma proposta do professor da matéria de desenvolvimento de projeto integrador para criar um jogo baseado na Serra do Feiticeiro. A abordagem Design Thinking (IDEO, 2009) foi utilizada como inspiração para definição da metodologia do jogo que foi desenvolvido nas seguintes fases e procedimentos metodológicos.

● Levantamento de Material

Usar fontes impressas ou digitais para reunir material sobre as lendas e a paisagem natural da serra do feiticeiro (visual/textual/oral).

(13)

.: Página 2 :.

Selecionar o material que consideramos mais apropriado para dar suporte à criação do jogo, e ao aprendizado do jogador com relação à serra, sua história, suas lendas e sua paisagem;

Criar planejamento da narrativa do jogo (personagens, cenários, objetivos, mecânica de jogo, etc).

● Planejamento de protótipo

Criação de roteiro do jogo (nível por nível);

Criação de artes e personagens do jogo. (Game Art). ● Desenvolvimento do protótipo

Digitalizar e vetorizar as artes de cenário, personagens e objetos para protótipo de fase do jogo;

Desenvolvimento de fase experimental do jogo.

Com o término do protótipo do jogo, foi pensado em desenvolver um sistema para hospedar o jogo e agendar as visitas ao local. Então começou a implementação do trabalho com os seguintes passos.

● Encontros com o orientador

Os encontros com o orientador era na quarta- feira ou na quinta-feira era discutido o que fazer na semana seguinte;

● Levantamento de requisitos

Onde foi listados os requisitos funcionais e não funcionais do sistema; ● Desenvolvimento dos protótipos de telas

Onde foi desenvolvido os protótipos de telas no Twitter Bootstrap; ● Desenvolvimento dos métodos e do sistema.

Com o término dos protótipos de telas começou o desenvolvimento dos métodos e depois a criação do sistema.

1.3 Objetivos

O projeto tem como objetivo divulgar a trilha ecológica da Serra do Feiticeiro, melhorar o turismo na cidade de Lajes, facilitar os agendamentos para os visitantes e para os trilheiros que fazem a trilha ao local.

(14)

.: Página 3 :.

1.4 Estrutura do documento

O presente documento está organizado em cinco capítulos. No primeiro capítulo é feito uma introdução ao tema do trabalho com os tópicos: problemática, metodologia do trabalho, objetivos e estrutura do documento. No segundo são apresentados os sistemas usados para o desenvolvimento o do sistema e do jogo. No terceiro capítulo são apresentados os seguintes tópicos: requisitos funcionais, requisitos não funcionais, caso de uso, diagrama de classe, modelo entidade relacionamento e a implementação do sistema. No quarto capítulo é apresentado o desenvolvimento do jogo Contos da Serra do Feiticeiro mostrando o projeto do jogo, a construção da ideia, storyboard, a implementação e funcionamento geral. No quinto e último capítulo são mostrados as considerações finais e os trabalhos futuros.

(15)

.: Página 4 :.

2. Fundamentação teórica

Neste capítulo são abordados diversos conceitos que auxiliarão na compreensão do objeto de estudo deste trabalho. São conceitos referentes aos assuntos e as ferramentas utilizadas no desenvolvimento do projeto.

2.1 Jogos Digitais

“Segundo o artigo de Fabiano Lucchese e Bruno Ribeiro da FEEC/universidade Estadual de Campinas, está claro que existe uma ligação entre os jogos digitais com os computadores. Numa visão mais extensa, como PC’s, consoles de videogame e celulares.

Sendo assim, a ideia de que os jogos movem-se entre as mídias, apresentado por Juul torna-se uma ligação natural. Assim, pode-se certificar que os jogos digitais são, não unicamente, representações de jogos, num nível mais abstrato, através dos recursos computacionais. Podemos ver isso acontecendo por exemplo nos jogos de tabuleiro no seu formato físico e também em forma de um jogo digital. Nesses dois exemplo não se altera as regras e os elementos que há no jogo, porém, se altera a forma de representá-lo: no primeiro exemplo através de objetos físicos reais e no segundo em forma de elementos gráficos comunicativo num monitor”. (LUCCHESE, 2010, p. 9)

A percepção de Lucchese nos propiciou uma visão mais ampla do quanto os jogos digitais ganharam mercado, seja entre as crianças ou entre os adultos, ficando claro que os jogos digitais fornecem uma nova representação para um jogo, com características e elementos próprios.

Todo jogo, seja ele digital ou não, deve possuir regras formais e resultados bem definidos e dependentes das ações escolhidas pelos jogadores. Esse formato de interação nos chamou à atenção e nos abriu os olhos para a possibilidade de que o jogador, ao lidar com regras mais rígidas, teria de observar com cuidado suas ações no jogo e os elementos que ele apresenta, se focando mais nos elementos visuais de aprendizado. Assim como diz Lucchese (2010).

(16)

.: Página 5 :.

2.2 Construct 2d

O Construct é um software criado para desenvolvimento de jogos digitais, popularmente conhecida como game engine. Ele foi criado especificamente para criação de jogos, e não exige que o usuário tenha conhecimento em programação para desenvolver um jogo digital.

O programa divide-se em três áreas principais: menu de layout, de ações e a área central onde é possível visualizar o jogo em desenvolvimento. Por tornar conhecimentos específicos em programação desnecessários, o Construct 2D facilita o aprendizado daqueles que porventura queiram iniciar-se no desenvolvimento de jogos.

Uma das suas principais características do Construct é que ele é extremamente rápido para ser criado, pois ele já vem preparado com componentes e comportamentos prontos para uso. Sua preocupação será somente em criar uma história e desenvolver as imagens do jogo.

É uma versão que você pode baixar sem custos para que você possa aprender, conhecer e criar seus jogos na Construct.

“Na versão gratuita é permitido apenas exportar para HTML 5, possibilitando que seu jogo seja executado nos navegadores como Chrome, Firefox, Internet Explorer, entre outros”.(scirra construct 2).

Figura 1 mostra várias opções nas laterais da tela de: salvar, retornar, adiantar, executar, File, Home, View, Events, etc. Existem também opções de exportar o projeto para outros softwares.

Figura 1- Página inicial do construct 2.

(17)

.: Página 6 :.

Na figura 2 podemos ver mais opções na página inical do Construct, que são para visualizar, quais projetos e quais layers estão sendo utilizados no construc.

Figura 2- Página inicial do construct 2.

Fonte: Elaborado pelo Autor (2018)

2.3 Play Framework

O Play é um framework open source utilizado para o desenvolvimento de aplicações Java e Scala. Ele também é uma solução completa que envolve persistência e muito mais recursos. O Play tem muitas vantagens para o utilizador do framework como: possibilitar o usuário a usar qualquer biblioteca java e utilizar a estrutura MVC.(DEVMEDIA, 2018)

A estrutura MVC bastante utilizada no Play, é nada mais que um padrão de arquitetura de software, separando sua aplicação em 3 camadas. A camada de interação do usuário(view), a camada de manipulação dos dados(model) e a camada de controle(controller).

(18)

.: Página 7 :.

A model: sempre que você pensar em manipulação de dados, pense em model. Ele é responsável pela leitura e escrita de dados, e também de suas validações.

A view: a camada de interação com o usuário. Ela apenas faz a exibição dos dados, sendo ela por meio de um html ou xml.

A controller: O responsável por receber todas as requisições do usuário. Seus métodos chamados actions são responsáveis por uma página, controlando qual model usar e qual view será mostrado ao usuário.

A tabela 1 mostra os principais comandos para criar uma aplicação Play. Tabela 1- Comandos do Play Framework

Comandos Funcionalidade

set path=%path%;C:\play; Configurar a variável ambiente

play new Criar nova aplicação

play run Executar aplicação

play deps Instalar as dependências

play netbeansify Fazer conexão com o netbeans

Ctrl + C Finalizar uma execução

Na figura 3 podemos ver como é a página de acesso a funcionalidade da aplicação do projeto no play, depois de instalar e executar o projeto no play, basta colocar localhost:9000 para sua aplicação rodar no navegador.

(19)

.: Página 8 :. Figura 3- Acessando localhost:9000 no navegador.

Fonte: Elaborado pelo Stefanini e Salles (2014)

2.4 Twitter Bootstrap

O Bootstrap é um framework que foi feito para facilitar e agilizar o trabalho dos programadores, usando ferramentas padrões para a utilização de HTML,

Javascript e CSS que são responsáveis para a utilização de projetos responsivos e

focados para dispositivos móveis na web. Desenvolvido por Jacob Thorton e Mark Otto.

O programa Bootstrap é totalmente gratuito e acabou se tornando o software livre mais ativo do mundo. Capaz de utilizar interfaces gráficas e de ter uma abrangência bastante grande de plugins e temas todos compatíveis com o

framework. Além disso, possui um compartilhamento de dados com qualquer

linguagem de programação.

O Bootstrap usa um padrão de interface gráfica, que pode ser utilizado em vários disponíveis móveis como: Notebooks, Desktops e Smartphones. Com isso, facilita a utilização de vários usuários nos sites, tendo em vista toda a contabilidade desenvolvida em um software. Possibilitando vários meios dos usuários utilizar seus

(20)

.: Página 9 :.

recursos em alta qualidade, sem perder nenhum desempenho, de dentro das características dos dispositivos utilizados.

O Bootstrap tem várias características e vantagens algumas delas são: ● Biblioteca de componentes

● Reuso de código

● Documentação e comunidade ● Padrão visual

● Responsividade

Muitos sites famosos no Brasil e exterior utilizam o Bootstrap como framework

front-end. Fora do país, podemos citar o site da NBA, Target e Walmart. No mercado

nacional, a grande maioria dos sites da Globo utilizam o framework, o que explica o excelente padrão visual que eles possuem.(Barbiere, 05 de abril de 2017).

2.5 BANCO DE DADOS (MySql)

O MySQL é um programa estrutural de banco de dados nos sistemas relacionais, guardando informações e fornecendo esses dados armazenados para outros softwares, para que possam pegar e expor os dados nos sistemas.

O sistema foi desenvolvido pela empresa sueca MySQL AB e publicado, originalmente, em maio de 1995. Após, a empresa foi comprada pela Sun Microsystems e, em janeiro de 2010, integrou a transação bilionária da compra da Sun pela Oracle Corporation.

Segundo Korth, um banco de dados “é uma coleção de dados inter-relacionados, representando informações sobre um domínio específico”, ou seja, pode guardar várias informações, sobre um domínio específico de documentos, de um mesmo assunto ao qual se relacionam.

Banco de dados são arquivos ou informações de dados, que são informados e armazenados dentro da memória, para que possam armazenar vários documentos, arquivos pessoais, tabelas, produtos, etc.

Já um sistema de gerenciamento de dados (SGBD) é um software que tem qualidades para manipular informações do banco de dados armazenadas dentro

(21)

.: Página 10 :.

deles e fazer interações com os usuários. Exemplos de SGBD são: Oracle, SQL Server, DB2, PostgreSQL e MySQL.

No banco de dados existem três níveis de abstração que são: nível interno, nível conceitual e nível externo.

O nível interno é o que define a maneira pela qual são armazenados os dados e os métodos para acessá-los.

O nível conceitual, também chamado de MCD (modelo conceitual de dados) ou MLD (modelo lógico dos dados), que define a disposição das informações disponíveis no banco de dados.

O nível externo é o que define quais usuários podem ver e utilizar as informações no banco de dados.

Nos bancos de dados existem algumas modelagens de dados que são: modelo conceitual, modelo lógico e modelo físico.

O conceitual representa as regras de negócio sem limitações tecnológicas, ou de implementação, por isto é a etapa mais adequada para o envolvimento do usuário, que não precisa ter conhecimentos técnicos.

O lógico leva em conta limites, por algum tipo de tecnologia de banco de dados (BD- Hierárquico, BD- relacional, etc.).

O físico leva em consideração, limites impostos pelo SGBD e pelos requisitos não funcionais dos programas, que possam acessar os dados.

“O MySQL é um software gratuito bastante eficaz, para que possam ser armazenados dados no sistema, e tem uma boa compatibilidade com outros

softwares de linguagem de programação, para fornecer informações aos

usuários”.(PISA postado, 17/04/2012).

Na figura 4 podemos ver a página inicial do MySQL Workbench, com várias opções de funcionalidades. Algumas dessa funcionalidades são: criar tabelas de dados, adicionar diagramas, adicionar novos banco de dados no sistema e adicionar nova rotina no banco de dados. Ainda na página inicial, temos botões de bastante utilidade que servem para: abrir, salvar, editar, configurar, modelar, ajuda e de

(22)

.: Página 11 :. Figura 4- página inicial do MySQL Workbench.

(23)

.: Página 12 :.

3. Modelagem do sistema

Neste tópico será mostrado o objetivo geral, os requisitos, o caso de uso, diagrama de classe, modelo ER e a implementação.

3.1Visão Geral

Este projeto foi desenvolvido para hospedar o jogo Contos da Serra do Feiticeiro, facilitar o agendamentos de visitas na Serra do Feiticeiro e divulgar o turismo na cidade de Lajes/RN.

3.2 Requisitos funcionais

Requisitos Funcionais são as funcionalidades a serem disponibilizadas em um software para os seus usuários.

Na tabela 2 é mostrado os requisitos funcionais do sistema.

Tabela 2- Requisitos funcionais

Código Nome Descrição

RF01 Realizar Login O sistema deverá permitir que o usuário se conecte ao sistema através de seu e-mail e senha cadastrados no banco de dados. RF02 Gerenciar Agendamento O sistema deverá permitir que o usuário

cadastre, altere, ou cancele seu agendamento.

RF03 Gerenciar Relatos O sistema deverá permitir que o usuário relate como foi sua visita. E os relatos devem ser apresentados na página pública.

RF04 Recuperar Senha O sistema deverá permitir que o usuário recupere sua senha através de uma

(24)

.: Página 13 :.

mensagem que será enviada para o e-mail cadastrado.

RF05 Gerenciar Confirmação O sistema deverá informar se a reserva de horário foi realizada com sucesso. O usuário receberá uma mensagem informando que a reserva foi realizada com sucesso, caso contrário informando que não foi realizada.

3.3 Requisitos Não Funcionais

Requisitos não funcionais são restrições sobre as funções oferecidas pelo sistema.

Na tabela 3 é mostrado os requisitos não funcionais do sistema.

Tabela 3 - Requisitos não funcionais

RNF01 Usabilidade O sistema tem um design simples e acessível permitindo que o usuário tenha uma interação melhor com o conteúdo. RNF02 Segurança O sistema deverá estabelecer a política de

controle e acesso. O sistema exigirá que o usuário cadastre um e-mail que não seja igual a outro que já esteja cadastrado no banco de dados e crie uma senha com no mínimo 8 caracteres utilizando letras e números.

(25)

.: Página 14 :.

Os diagramas de casos de uso possuem um papel bastante importante para a modelagem do comportamento de um sistema. Cada diagrama demonstra um conjunto de casos de uso, atores que participa e seus relacionamentos.

3.4.1 Atores

A seguir podemos observar a presença de três atores: usuário avulso, usuário logado e trilheiro. O usuário avulso basicamente conhecerá a serra do feiticeiro através de histórias, jogos e imagens do local. O usuário logado poderá agendar visitas, relatar sua experiência ao subir a serra e o trilheiro poderá gerenciar os agendamentos.

Figura 5- Diagrama de caso de uso

Fonte: Elaborado pelo Autor (2018) 3.4.2 Descrição dos Casos de Uso

(26)

.: Página 15 :.

Ao selecionar a opção relatos o usuário irá ver os comentários de pessoas dizendo como foi à experiência de visitar e subir a serra do feiticeiro.

● Realizar login

Quando o usuário clicar em login ele irá preencher com seu e-mail e senha que foram cadastrados e aperta no botão de entrar para se conectar ao sistema.

● Conhecer sobre a serra

Ao selecionar a opção conheça a serra o usuário verá outro menu com as opções localização que Exibirá onde está localizada a serra no google maps, lendas que mostrará a lenda da serra do feiticeiro e história que apresentara a história da serra do feiticeiro.

● Jogar

Ao clicar na opção jogo exibirá um jogo onde o usuário irá se divertir com um jogo sobre a Serra do Feiticeiro.

● Gerenciar agendamento

Ao clicar em agendamento o usuário preencherá os dados do formulário que são: data, hora, quantidade de componentes e comentários em seguida clicar no botão enviar para realizar o agendamento.

● Gerenciar relatos

Ao clicar em relatar um campo de texto onde o usuário poderá fazer algum comentário sua experiência na trilha da serra do feiticeiro.

● Gerenciar confirmação

Ao clicar na opção confirmar agendamento o trilheiro confirmar o agendamento e enviará e-mail de confirmação para o e-mail do usuário que fez o agendamento

3.5 Diagrama de Classes de Domínio

Os diagramas de classe são os modelos conceituais das classes que irão compor o sistema e tem como objetivo descrever vários tipos de objeto no sistema e o relacionamento entre eles.

(27)

.: Página 16 :.

Na Figura 6 é mostrado o diagrama parcial das classes utilizado no sistema feiticeiro.

No diagrama de classes são demonstradas as classes que compõem os módulos do sistema com seus respequitivos atributos e metodos.Na classe de Usuário possui os atributos nome, sobrenome, email e senha e os métodos realizaCadastro, login e essa classe também é responsável por salvar os usuarios no banco de dados.A classe Security não tem atributos, porem possui apenas um método o authenticate esse classe é responsável pelos logins no sistema. A classe Agendamento contém os atributos data do tipo Date, Hora do tipo String, componentes do tipo int e comentários de tipo String e o método realizaAgendamento, a classe é responsável por armazenar os dados no banco de dados.Na classe de relatos tem apenas o atributo relato e o método escreveRelato, é encarregado por salvar os relatos dos usuários no banco de dados.

(28)

.: Página 17 :.

3.6 Modelo E-R

O modelo E-R é basicamente é um modelo conceitual para o banco de dados relacional que descreve os dados como sendo entidade, atributos ou o relacionamento dentro de um sistema.

Na Figura 7 é apresentado o modelo E-R do banco de dados utilizado no sistema proposto neste trabalho, mostrando os atributos e os relacionamentos entre as tabelas de forma conceitual.

Figura 7- modelo E-R

●

Tabela Usuário :

A tabela usuário tem como atributos: id(que é a chave primária), email, nome, senha e sobrenome. Essa tabela se relaciona com agendamento e com relato pois um usuário pode fazer

(29)

.: Página 18 :.

um ou muitos agendamentos ou vários relatos. A tabela serve para fazer o cadastro do usuário no sistema.

●

Tabela agendamento: Na tabela agendamento temos como seus

atributos: id(sendo a chave primária), comentário, componente, data de agenda, hora e status que serve para saber se o agendamento foi confirmado ou não.

● tabela relato:

Nessa tabela seus atributos são: id(que é a chave primária) e relato. Ela relaciona com usuário e serve para fazer os comentários dos usuários.

3.7 Implementação

Nesta seção, é feita a apresentação das funcionalidades do sistema implementadas para esse trabalho.

3.7.1 Telas

Na figura 8 pode observar que temos uma introdução sobre o sistema, um menu com as opções várias opções como: início, relatos, conheça a serra, cadastro e login. Quando o usuário estiver logado acrescentará as opçõe relatar e agendar visitas.

Figura 8-Tela de Início

A figura 9 será apresentado a página de relatos os relatos dos usuários que tiveram a experiência de fazer a trilha da serra do feiticeiro.

(30)

.: Página 19 :. Figura 9- Tela de Relatos

A figura 10 mostra a página de localização com uma mapa do google maps marcando a localização da serra e um texto falando sobre o local.

Figura 10- Tela de Localização

Na figura 11 é apresentado a página de cadastro do usuário com um formulário com os campos de nome, sobrenome, e-mail e senha que será preciso

(31)

.: Página 20 :.

preencher para que o cadastro seja realizado com sucesso. Além de um botão de para salvar os dados.

Figura 11- Tela de Cadastro

Na figura 12 é mostra tela de login com os campos para colocar o e-mail e a senha, além dos botões de cadastrar-se, esqueceu a senha e entrar. Caso o e-mail ou a senha esteja errado será exibido a seguinte frase “Oops, usuário ou senha desconhecidos”.

Figura 12- Tela de Login

(32)

.: Página 21 :.

A figura 13 mostra a página de agendamento de visitas, para isso é preciso preencher os campos: data, hora, número de pessoas e comentário, além de um botão de enviar.

Figura 13- Tela de Agendamento

Na figura 14 mostra a tela de alterar a senha com o formulário que será preciso preencher para que senha seja alterada.

Figura 14- Tela de Alterar Senha.

(33)

.: Página 22 :.

A figura 15 exibe a página de esqueceu a senha. Caso esqueça a senha será preciso digitar o e-mail que foi cadastrado e o sistema enviará um e-mail com sua senha.

Figura 15- Tela de Esqueceu a Senha.

(34)

.: Página 23 :.

4. Jogo: Contos da Serra do Feiticeiro

Neste tópico vamos ver o passo a passo como foi desenvolvido a construção do jogo, que conta as histórias que aconteceram na serra do feiticeiro. O jogo Contos da Serra do Feiticeiro é um jogo educativo em que são apresentados os fatos que aconteceram em seu local. A serra do feiticeiro é um ponto turístico da cidade de Lajes/RN com bastantes histórias. O jogo é uma forma de divulgar a história, levando um pouco da cultura do local para os usuários, fazendo com que as pessoas tenham mais interesse em visitar o local.

4.1 Construção da Ideia

A ideia surgiu ao percebermos que a serra do feiticeiro era pouco visitada por pessoas que não reside na cidade de Lajes. Então optamos por criar um jogo, onde chamasse a atenção da população, baseando por seu esplêndido cenário, paisagens, histórias e contos. A construção das ideias foram iniciadas depois de baseamos em alguns poemas e histórias existentes, que contam os fatos que aconteceram no local.

4.2 Storyboard

Nesta seção será apresentado o percurso do jogo, como será o ambiente, quem estará presente e quais ações acontecerão. Além disso, mostrará todos os personagens, animais e objetos presente no jogo. Será demonstrado o que fazer a cada parte da seção do jogo, mostrando o passo a passo do jogo.

(35)

.: Página 24 :.

Figura 16- Encontro entre o Aventureiro e a mãe do menino perdido.

Na Figura 16, o usuário poderá ver a mãe do menino perdido, que é o primeiro personagem presente no jogo e é encontrado pelo aventureiro.

Figura 17- Encontro do aventureiro com o Feiticeiro.

Na Figura 17, o usuário poderá ver um cenário um pouco mais rochoso, com várias pedras e alguns cactos, que é uma planta típica do cenário nordestino. Ainda nesta figura o aventureiro do usuário irá encontra um feiticeiro, que morou na serra do feiticeiro e cuidou de animais e plantas no local.

(36)

.: Página 25 :.

Figura 18- O aventureiro é desafiado pelo diabo.

Na Figura 18, o usuário terá um desafio, terá que derrotar o inimigo diabo que impede-o de continuar o percurso, então o usuário com o personagem aventureiro, deve pular em cima do diabo, para que ele seja destruído e deixe o caminho livre para continuar seu percurso.

Figura 19- O aventureiro encontra o menino perdido e um carneiro.

Na figura 19, o aventureiro encontra o menino e o carneiro perdido, que não podia retornar para a mãe, pois o diabo estava impedindo de retornarem, após o aventureiro destruir o diabo, ele diz para o menino que o caminho está livre, que o destruiu, e assim o menino volta para a mãe.

(37)

.: Página 26 :.

Figura 20- O aventureiro encontra uma cruz e uma capela.

Na Figura 20, o aventureiro encontra no final do jogo uma cruz e uma capela, onde pessoas vão até a capela para rezar, deixar suas preces e fazer pedidos a Deus, é um momento em que as pessoas mostram sua fé. No jogo essa imagem é para o usuário ver a linda imagem da capela e da cruz, mostrando ao usuário que essa imagem realmente existe na serra do feiticeiro.

Depois do usuario passar da capela o jogo será finalizado mostrando uma imagem dizendo “Fim!”.

Figura 21- Imagem do fim do jogo.

(38)

.: Página 27 :.

4.3 Implementação

O desenvolvimento do jogo começou pela criação do cenário, o cenário precisava ser de um terreno típico do nordeste brasileiro, bastante seco e com muitos cactos planta bastante presente na caatinga. Depois de criar o terreno do cenário, pegamos uma imagem da Serra do Feiticeiro, que foi feita em Pixel Art feita pelo aluno Bruno Roberto. O cenário ficou bastante parecido com o que temos ao subir a serra do feiticeiro. Além da imagem da Serra do Feiticeiro, colocamos algumas rochas no terreno, pois no percurso ao subir a Serra encontramos várias no caminho.

Figura 22- Imagem do cenário já implementada.

Figura 23- Imagem da cruz e da capela implementada.

(39)

.: Página 28 :.

Depois de acabar o cenário do jogo, nos encontramos com o professor para ver como ia o andamento do jogo, e dar início a criação dos personagens em Pixel Art, o Pixel Art é uma ferramenta muito simples com algumas limitações, mas que acabou sendo uma ferramenta de bastante ajuda no universo dos games, por este motivo decidimos utilizá-la.

Figura 24- Personagens

Depois de concluir a criação dos personagens, começou-se a colocá-los no jogo, com ajuda de algumas vídeo aulas no Youtube, ensinando como colocar personagens na plataforma do jogo, com isso podemos aprender bastante e passar a ter uma noção maior na configuração dos personagens, pois alguns personagens precisaria de configurações de movimento. Ao ver vídeos no Youtube, começamos a configurar os personagens já implantados no jogo, essa parte ficou um pouco complicada, pois tem várias configurações para fazer com que o personagem se movimente.

Ao concluir a configuração dos personagens, foi estudado como colocar um menu na tela inicial do jogo assistindo vídeo aula no Youtube, ao assistir as vídeo aula, na sétima semana foi dado início a criação de um menu, que possibilite ao usuário escolher uma opção chamada: “New Game” que possibilita o usuário a dar início ao jogo, passando o usuário da tela menu para a tela do jogo, pronto para dar início a aventu

(40)

.: Página 29 :. Figura 25- Menu.

Depois de concluir a criação do menu foi proposto um encontro para ele verificar o andamento do jogo e dar início a uma nova etapa do jogo, ao ver o que estava bem desenvolvido o jogo, o professor pediu para colocarmos diálogos entre os personagens do jogo. Então demos início a criação do diálogo entre os personagens.

O diálogo acabou ficando para trabalhos futuros, devido a falta de tempo e a pouco conteúdo apresentado nos vídeos assistido, com isso, adiamos o diálogo entre os personagens para uma ocasião futura e demos andamento no documento.

4.4 Funcionamento Geral

O funcionamento geral relata como funciona o jogo, quais controles são utilizados para dar início e quais são os controles de movimentos do personagem que o usuário terá controle. Além disso mostrará as funcionalidades do sistema desenvolvido.

(41)

.: Página 30 :.

Figura 26- Teclado com os controles do jogo.

Os controles apresentados na figura 26 são os comandos que podem ser utilizados no jogo. O comando do teclado espaço só pode ser utilizado no menu inicial, ao acionar o botão espaço no menu inicial na opção “New Game” o usuário será levado ao jogo dando início a sua aventura pelo jogo.

Os comandos de movimento são utilizados no jogo para que o usuário possa movimentar o personagem. Ao acionar o botão do teclado que tem uma seta para a direita, permitirá ao usuário movimentar o personagem para a direita. Ao acionar o botão do teclado que tem uma seta para a esquerda, permitirá ao usuário movimentar o personagem para a esquerda. Ao acionar o botão do teclado que tem uma seta para cima, permitirá ao usuário movimentar o personagem para pular pra cima.

Figura 27- Configuração no sistema para utilizar áudios.

Configuração de áudio foi utilizada, para colocar função de adicionar músicas e sons ao jogo. Com essa função acionada no sistema, podemos colocar uma

(42)

.: Página 31 :.

música, para quando o usuário de início ao jogo começar a tocar, além da música, colocamos um som de botão pressionado, para toda vez que o usuário selecionar a opção “New Game”, será acionado o som do botão. A música escolhida para o jogo foi a do famoso cantor Luiz Gonzaga, musica tipica do nordeste e bastante famosa tocada em todos os lugares do Brasil, essa música foi escolhida por nós, pois a letra da música fala sobre os animais e a seca no nordeste, que estão relacionados ao cenário do jogo.

O jogo só tem uma única fase, na qual o usuário fará uma aventura em uma paisagem da serra do feiticeiro, onde enfrentará inimigos e tentará resgatar um menino perdido.

Figura 29- Personagem principal usado pelo usuário no jogo.

O aventureiro é o nome do personagem, que será utilizado pelo usuário para se aventura-se na fase e tentar fazer todos o objetivos do jogo, que é encontrar o menino, que se perdeu na serra do feiticeiro.

(43)

.: Página 32 :.

5. Conclusões

No final desse projeto foi desenvolvido um sistema de divulgação e agendamento de visitas. Assim facilitando os agendamentos e divulgando as lendas e a história da Serra do Feiticeiro. Além de hospedar um jogo.

Neste trabalho foi utilizado várias ferramentas como: Play Framework, Twitter Bootstrap, Netbeans, Construct 2d, entre outras. Tais ferramentas que ajudaram no desenvolvimento do sistema e que foi importante para ampliar o conhecimento sobre as áreas da informática.

No decorrer do trabalho apareceram algumas dificuldades no desenvolvimento do layout para deixar as páginas totalmente responsivo, na construção do sistema por conta de alguns comandos complexos do play. Além dos obstáculos já mencionados na construção do sistema ocorreram algumas dificuldades no desenvolvimento do jogo e na criação dos personagens pelo motivo de serem criados em pixel art. Além disso, algumas partes não foram implementadas no sistema e no jogo, como: o diálogo entre os personagens, a segunda fase do jogo e a página de notificações dentro do sistema.

5.1 Trabalhos Futuros

Como trabalhos futuros, pretende-se melhorar o sistema da serra do Feiticeiro e o jogo Contos da Serra do Feiticeiro através da implementação das seguintes características:

● Melhorar o grafico do jogo.

● Colocar diálogos entre os personagens do jogo.

● Melhorar o menu colocando mais opções para o usuário. ● Disponibilizar uma versão do jogo para dispositivos móveis. ● Melhorar os movimentos dos personagens.

● Aumentar a fase do jogo. ● Elaborar mais fases no jogo.

(44)

.: Página 33 :.

6. Referências:

BARBIERE, Lu. O QUE É O BOOTSTRAP E PARA QUE SERVE?, 05 de abril de 2017. Disponível em: <https://www.ciawebsites.com.br/dicas-e-tutoriais/o-que-e-bootstrap/ > Acesado em: 15 de junho de 2018.

SCIRRA. 2018. Disponível em: <https://www.scirra.com/construct2> Acessado em:

20 de junho de 2018.

LUCCHESE e RIBEIRO. CONCEITUAÇÃO DE JOGOS DIGITAIS, Disponível em: <http://www.dca.fee.unicamp.br/~martino/disciplinas/ia369/trabalhos/t1g3.pdf>Acess ado em: 21 de agosto de 2018.

MARCELO. CONHECENDO O PLAY FRAMEWORK PARA JAVA: O que é o Play! Framework, 2012. Disponível em: <https://www.devmedia.com.br/conhecendo-o-play-framework-para-java/26655 > Acessado em: 15 de junho de 2018.

PISA, Pedro. SISTEMAS OPERACIONAIS: O QUE É E COMO USAR O MYSQL?, 17 de abril de 2012. Disponível em:

<http://www.techtudo.com.br/artigos/noticia/2012/04/o-que-e-e-como-usar-o-mysql.html> Acessado em: 16 de junho de 2018.

DEVMEDIA. PLAY FRAMEWORK. Disponivel em

<https://www.devmedia.com.br/desenvolva-aplicacoes-com-play-framework/31621>Acessado em : 22 de agosto de 2018.