MURILO AUGUSTO LOPES TEIXEIRA - UEL · 1 INTRODUÇÃO Os conceitos de Gamificação estão sendo...

MURILO AUGUSTO LOPES TEIXEIRA

UMA PROPOSTA DE FRAMEWORK DE GAMIFICAÇÃO

PARA APLICAÇÕES WEB (GAMFW)

LONDRINA - PR

2015




Trabalho de Conclusão de Curso apresentado ao

Curso de Bacharelado em Ciência da

Computação do Departamento de Computação

da Universidade Estadual de Londrina, como

requisito parcial para a obtenção do título de

Bacharel em Ciência da Computação.

Orientador: Prof. Dr. Jacques Duílio Brancher

LONDRINA - PR

2015

A ficha catalográfica deverá ser solicitada na biblioteca central

(obrigatório apenas para Dissertação de Mestrado)

B222d Sobrenome, Nome do autor.

Gerência de redes – protocolo SNMP / nome e

sobrenome do aluno. – Londrina, 2010.

98 f. : il.

Orientador: nome sobrenome do orientador.

Dissertação (Mestrado em ) Universidade Estadual de Londrina, Centro de

Ciências Exatas, Programa de Pós-Graduação em xxxxx, 2010.

Inclui bibliografia.

1. Gerencia de redes – Teses. 2. SNMP. 3 NMS – Teses. 3. Assunto 3 – Teses. I.

Sobrenome, Nome do orientador. II. Universidade Estadual de Londrina. Centro de

Ciências Exatas. III. Título.

(ATENCAO PARA MONOGRAFIA DE ESPECIALIZAÇÃO NÃO PRECISA)

CDU 641:579




Trabalho de Conclusão de Curso apresentado ao

Curso de Bacharelado em Ciência da Computação

do Departamento de Computação da Universidade

Estadual de Londrina, como requisito parcial para

a obtenção do título de Bacharel em Ciência da

Computação.

BANCA EXAMINADORA

____________________________________

Prof. Dr. Nome do Orientador

Universidade Estadual de Londrina

____________________________________

Prof(a). Dr(a). Segundo Membro da Banca

Universidade Segundo Membro da Banca

____________________________________

Prof. Dr. Terceiro Membro da Banca

Universidade Terceiro Membro da Banca

____________________________________

Prof. Dr. Quarto Membro da Banca

Universidade Quarto Membro da Banca

Londrina-PR, _____de ___________de 2015.

Este trabalho é dedicado às crianças adultas que,

quando pequenas, sonharam em se tornar cientistas.

AGRADECIMENTOS

SOBRENOME, P. S. Uma proposta de framework de Gamificação para aplicações Web

(GamFW). 51p. Trabalho de Conclusão de Curso (Bacharelado em Ciência da Computação) –

Universidade Estadual de Londrina, Londrina-PR, 2015.

RESUMO

Nos últimos anos, estudos e aplicações da Gamificação emergiram consideravelmente. Este

conceito é baseado na inserção de mecânica de jogos, estética e lógica fora do seu escopo

original com o objetivo de melhorar o envolvimento e compromisso de uma pessoa com uma

tarefa. Esta mecânica e conceitos podem ser representado por pontos, níveis, rankings,

conquistas, tomadas de decisão, resolução de problemas, etc. No entanto, para implementar e

manter um sistema de gamificação dentro de um aplicativo, é necessário estabelecer uma

ligação sólida entre o conteúdo do banco de dados, um exemplo é a relação entre pontos,

conquistas (medalhas) e níveis alcançados pelo usuário.

Estes atributos consomem uma grande quantidade de espaço dependendo da finalidade e

escalabilidade do sistema, o que pode tornar o sistema lento a medida que cresce o número de

usuários. Com base nesta premissa, o presente trabalho tem como objetivo mostrar o projeto e

implementação de um framework on-line onde o usuário é capaz de criar e armazenar seus

próprios conceitos de gamificação, com base em pontos, níveis, conquistas e rankings. O

usuário é responsável por criar uma comunidade on-line dentro do sistema e registrar os

conceitos de jogo previamente estabelecidos. Os elementos são armazenadas no banco de dados

e um webservice será responsável por disponibilizar estas informações na forma de métodos.

Este serviço permite que o usuário possa desbloquear conquistas, pontos e visualizar as

informações do usuário no banco de dados sem a necessidade de armazenar tudo isto em seu

próprio sistema, o que minimiza a quantidade de dados ao carregar sua aplicação. A

implementação da comunicação entre o cliente e o webservice é da responsabilidade do usuário,

no entanto, uma documentação completa estará disponível para eles. O sistema também oferece

uma página de administrador que contém as informações das comunidades dos usuários para

que os usuários possam visualizar as estatísticas de suas comunidades.

Palavras-chave:

SOBRENOME, P. S. Title of the Work. 51p. Final Project (Bachelor of Science in Computer

Science) – State University of Londrina, Londrina-PR, 2015.

ABSTRACT

In the past few years, Gamification studies and applications emerged considerably. This concept

is based on the insertion of game mechanics, aesthetics and logic outside its original scope

aiming at improving a persons’ engagement and commitment to a task. These mechanics can

be represented as points, levels, leaderboards, achievements, decision making, problem solving,

etc. However, in order to implement and maintain a gamification within an application, it is

necessary to establish a solid link between the database contents, an example is the relation

between points, badges and levels achieved by the user.

These attributes consumes a huge amount of space depending on the purpose and scalability of

the system, which may become slower as it grows in user numbers. Based on this premise, this

paper aims to show the project and implementation of an online framework where the user is

able to create and store its own Gamification concepts, based on points, levels, achievements

and leaderboards. The user is responsible for creating an online community within the system

and register the game concepts previously stated. Those are stored within the database and a

web service convert these information in methods. This service allows the user to call the

achievements, points and user information from within the database without needing to store in

its own system, which minimizes the amount of data when loading his/her application. The

implementation of the communication between the client and the web service is on the users’

responsibility, however a strong documentation will be available for them. The system also

offers an administrator page that contains the information of the users’ communities so that

users can view statistics of their communities.

Keywords:

LISTA DE ILUSTRAÇÕES

Figura 1 – Acesso às propriedades do documento. ................... Erro! Indicador não definido.

Figura 2 - Logo comemorativa dos 20 anos do Bacharelado em Ciência da Computação da

UEL. ....................................................................................... Erro! Indicador não definido.

Figura 3 - Estilo de referências ABNT-DC-UEL. .................... Erro! Indicador não definido.

LISTA DE TABELAS

Tabela 1 - Propriedades do documento a serem preenchidas. ... Erro! Indicador não definido.

Tabela 2 - Conjuntos de dados utilizados nos experimentos..... Erro! Indicador não definido.

Tabela 3 - Conjuntos 2. ........................................................... Erro! Indicador não definido.

LISTA DE ABREVIATURAS E SIGLAS

SUMÁRIO

1 INTRODUÇÃO ...................................................................................................... 25

2 GAMIFICAÇÃO .........................................ERRO! INDICADOR NÃO DEFINIDO.

2.1 Abordagem Point-Badge-Level .......................................................................... 30

3 O PROJETO DO GAMFW ........................ERRO! INDICADOR NÃO DEFINIDO.

3.1 Projeto e implementação do Webservice............................................................. 30

3.2 Interface Web para criação e gerenciamento das Comunidades Erro! Indicador não

definido.

3.3 Interface para o usuário final ......................................... Erro! Indicador não definido.

4 FUNCIONALIDADES E DOCUMENTAÇÃOERRO! INDICADOR NÃO

DEFINIDO.

5 TRABALHOS FUTUROS ..........................ERRO! INDICADOR NÃO DEFINIDO.

REFERÊNCIAS ................................................................................................................. 38

APÊNDICE A – NOME DO APÊNDICE ......................................................................... 43

ANEXO A – NOME DO ANEXO ..................................................................................... 47

TRABALHOS PUBLICADOS PELO AUTOR ................................................................ 49

25

1 INTRODUÇÃO

Os conceitos de Gamificação estão sendo usados dentro de uma vasta gama

de aplicações, desde comerciais até aplicações para a área acadêmica [1]. Isso ocorre devido ao

aumento da aceitação deste termo e o seu desenvolvimento nos últimos anos [2].

Este conceito têm alcançado resultados positivos dentro do campo acadêmico,

especialmente na educação [3], pelo fato de utilizar conceitos e elementos dos jogos para

envolver e motivar o aluno.

No entanto, ainda existe uma ausência de ferramentas para gerir e controlar

esse processo. Isso deixa a responsabilidade de implementação dos conceitos de jogo para o

desenvolvedor, o que pode ser um processo demorado e custoso [2] especialmente relacionado

com o gerenciamento de armazenamento dos elementos dentro do sistema.

Com base no acima exposto, este trabalho tem como objetivo desenvolver e

implementar um framework (estrutura) de Gamificação (GamFW) para aplicações web

desenvolvidas em PHP (inicialmente), com foco em aplicações educacionais. Com este

framework, o usuário será capaz de criar uma comunidade dentro da base de dados do GamFW

e inserir conquistas (medalhas), níveis (e quantidade de pontuação necessária para atingir cada

nível). O sistema armazena essas informações e retorna as hashs (palavras-chave para que o

usuário possa implementar o desbloqueio desses elementos cadastrados no framework

diretamente no código fonte de seu site). O usuário terá à disposição uma documentação

completa de como efetuar a junção do GamFW em sua aplicação.

27

2 GAMIFICAÇÃO E ABORDAGEM POINT-BADGE-LEVEL

Gamificação é definida como a utilização de mecânica de jogos, conceitos e

estética no exterior das suas fronteiras, a fim de envolver, motivar, treinar ou modificar um

comportamento individual [4], [2], [5], [6]. Este método é utilizado em muitas áreas, desde

saúde à educação, e está transformando a sociedade de uma forma positiva [1].

O processo de Gamificação se originou a partir de estudos que tiveram

como objetivo explicar o efeito envolvente de jogos digitais em indivíduos, uma vez que essas

ferramentas são capazes de entreter o usuário por um longo período de tempo longo [1], [8].

Esses jogos também estão presentes na rotina da maioria dos jovens e também de pessoas mais

velhas. Os jogos digitais podem ser definidos como um sistema que envolve o jogador em um

conflito virtual, definido por um conjunto de regras e seguido pela interatividade, feedback

contínuo e instantâneo, e um resultado pré-determinado que pode provocar uma transformação

emocional dentro do jogador [9], [10].

O conjunto de regras contidas dentro de um jogo consiste em sua

mecânica e conceitos, que podem ser motivadores intrínsecos ou extrínsecos. Alguns autores

extraíram e conceituaram esses atributos, a fim de entender o potencial de cada um [7], [11]. O

processo de aplicação desses conceitos de jogo dentro de aplicações nongame, ou seja,

aplicações que não são jogos, também pode ser suportada por algumas teorias, como a

defendida por Pink [12]. O autor afirma que existem três pilares principais que baseiam a

motivação humana, sendo eles: autonomia, domínio e propósito. Autonomia, de acordo com

Pink, é definido como o controle do indivíduo sobre sua ação, enquanto o domínio é a perícia

que este indivíduo tem em uma certa habilidade ou grupo de habilidades e propósito é o

sentimento intrínseco que permite a realização pessoal [12].

Esses conceitos podem estar relacionados a jogos digitais, e

consequentemente com a gamificação, como por exemplo: o usuário jogar e controlar suas

ações durante o curso do jogo (autonomia), enquanto está adquirindo e melhorando suas

habilidades para progredir no decorrer do jogo (domínio) e por fim alcançar um sentimento de

satisfação ao terminar uma tarefa ou o jogo em si (propósito).

2.1 Abordagem Point-Badge-Level

3 O PROJETO DO GAMFW

3.1 Projeto e implementação do Webservice

3.2 Interface Web para criação e gerenciamento das Comunidades

3.3 Interface para o usuário final

4 FUNCIONALIDADES E DOCUMENTAÇÃO

Inicialmente para que os usuários da aplicação do cliente interajam com o

GamFW é necessário que eles visitem o site http://187.18.100.57/GMFW/usuarios/login e

realizem o cadastro. Após finalizar o cadastro no Menu esquerdo há a opção “Participar”, onde

o usuário irá participar da comunidade do cliente. Após concluída a participação, os usuários

estarão prontos para interagir com as funcionalidades do GamFW na aplicação do cliente.

Para iniciar a instalação do GamFW em uma aplicação web é preciso fazer o

download do pacote de arquivos, bibliotecas e classes necessárias disponível no link: LINK

AQUI.

Após descompactar os arquivos em sua pasta da aplicação você precisará

inserir o seguinte trecho de código em seu código html:

<head>

<script type="text/javascript" src="js/jquery-2.0.3.js" />

<script type="text/javascript" src="/js/bootstrap.js" />

<script type="text/javascript" src="js/jquery-ui.min.js" />

<script type="text/javascript" src="js/gamificationFramework.js" />

<link rel="stylesheet" type="text/css"

href="css/gamificationFramework.css">

</head>

Para inserir o botão de login do GamFW em sua página html escreva o

seguinte trecho de código:

<div id="GamFw-login-button"><div id="GamFw-login-button-

text"></div><button id="GamFw-login-btn" class="btn btn-info">GamFW

Login</button></div>

Obs: Fica à escolha do cliente onde colocar o botão na página da aplicação.

Para que o servidor da aplicação cliente se comunique com o webservice do

GamFW é necessário instanciar a classe GamificationFrameworkClass como feito no exemplo

abaixo:

require_once('caminho/GamificationFrameworkClass.php');

$GamificationFrameworkInstance = new GamificationFramework();

onde “caminho” é o local no qual o arquivo GamificationFrameworkClass.php foi inserido no

servidor do cliente.

http://srv-169.uel.br:8083/GMFW/usuarios/login

33

A classe GamificationFrameworkClass implementa a funcionalidade

disponível no GamFW que é Somar Pontos.

Somar Pontos

Descrição

function addPoints($comunity_hash, $points, $comunity_owner_user_hash)

Parâmetros

comunity_hash: É uma string única de autenticação da Comunidade informada no site do

GMFW logo após a criação da mesma.

Points: Um inteiro com a quantidade de pontos a serem desbloqueados para o usuário final.

comunity_owner_user_hash: é uma string única de autenticação do usuário criador da

comunidade que também é informada no site do GamFW no link:

http://187.18.100.57/GMFW/pessoas/infopessoal)

Obs: Os pontos serão somados para o usuário que tiver feito login pelo botão de login do

GamFW na aplicação do cliente.

Para implementar a soma de pontos para os usuários os seguintes trechos de

código deverão ser adicionados:

Aplicação em PHP

Server Side

Exemplo:

require_once('caminho/GamificationFrameworkClass.php');

$GamificationFrameworkInstance = new GamificationFramework();

$GamificationFrameworkInstance->addPoints(“GVdc68xKEM0j2aec”, 10,

“YwGc57yKP7i9kiv”);

$GamFW_message = $GamificationFrameworkInstance->message;

Obs: “caminho” é o local no qual o arquivo GamificationFrameworkClass.php foi

inserido no servidor do cliente.

A última linha irá criar a variável GamFW_message inicializando o valor da

mesma com a mensagem presente na classe do GamFW logo após a chamada do método

addPoints (Somar Pontos), para que o javascript possa interpretar essa mensagem e executar a

ação a ser visualizada pelo usuário final.

http://srv-169.uel.br:8083/GMFW/pessoas/infopessoal

Client Side

Na página html que visualizará a mensagem final após a execução do método

addPoints é necessário inserir as linhas de códigos abaixo para que o script em javascript tenha

acesso à essa mensagem e possa mostrar ela ao usuário final:

<input type="hidden" name="GamFW-message" id="GamFW-message"

value="<?php echo $GamFW_message; ?>">

<div class="modal fade" id="GamFW-window">

<div class="GamFW-window-header">

<button type="button" class="close" data-dismiss="modal" aria-

label="Close"><span aria-hidden="true">×</span></button>

<div class="page-header"><h2 class="modal-title"

align="center">Gamification Framework</h2></div>

</div>

<div class="GamFW-window-body"></div>

</div>

Obs: na div class=”GamFW-window-body” é carregado o conteúdo de cada

janela disponível ao usuário final (janela de login, janela de pontos e conquistas de

desbloqueados e janela de ranking)

As conquistas inseridas na Comunidade no site do GamFW serão

desbloqueadas automaticamente ao somar os pontos, pois a verificação de pontos necessários

para desbloquear as conquistas é feito no WebService do GamFW.

Ranking da Comunidade

Para inserir o botão de Ranking da Comunidade na aplicação cliente será

necessário inserir a linha de código abaixo:

<button name="GamFW-Ranking-button" type="button"

value="hash_da_comunidade" class="btn btn-info" id="GamFW-Ranking-button">GamFW

Ranking</button>

Onde no value do botão é necessário informar a hash de autenticação da

Comunidade.

Obs: Fica à escolha do cliente onde colocar o botão de Ranking na aplicação.

37

5 TRABALHOS FUTUROS

REFERÊNCIAS

[1] J. Lee and J. Hammer, “Gamification in Education: What, How, Why Bother?” Academic

Exchange Quarterly, vol. 15, pp. 1–5, 2011. [Online]. Available:

http://dialnet.unirioja.es/servlet/articulo?codigo=3714308

[2] G. Zichermann and C. Cunningham, Gamification by Design: Implementing Game

Mechanics in Web and Mobile Apps. O’Reilly Media; 1 edition, 2011. [Online]. Available:

http://www.amazon.com/Gamification-Design-Implementing-Mechanics-

Mobile/dp/1449397670/ref=srn1n8?ie=UTF8n&qid=1395318226n&sr=8-

8n&keywords=gamification

[3] J. Hamari, J. Koivisto, and H. Sarsa, “Does Gamification Work? - A Literature Review of

Empirical Studies on Gamification,” Proceedings of the 47th Hawaii . . . , 2014. [Online].

Available:

http://www.researchgate.net/publication/256743509\_Does\_Gamification\_Work\_\_A\_Liter

ature\_Review\_of\_Empirical\_Studies\_on\_Gamification/file/9c960523b36be81843.pdf

[4] J. McGonigal, Reality is broken: Why games make us better and how they can change the

world. Penguin Group, The, Dec. 2011, no. Deterding. [Online]. Available:

http://dl.acm.org/citation.cfm?id=2207854http://dl.acm.org/citation.cfm?id=1972527

[5] K. M. Kapp, “The Gamification of Learning and Instruction: Gamebased Methods and

Strategies for Training and Education,” May 2012. [Online]. Available:

http://dl.acm.org/citation.cfm?id=2378737

[6] S. Deterding, R. Khaled, L. Nacke, and D. Dixon, “Gamification: Toward a definition,” CHI

2011 Workshop Gamification Research Network, pp. 12–15, 2011. [Online]. Available:

http://scholar.google.com/scholar?hl=enn&btnG=Searchn&q=intitle:Gamification+:+Toward

+a+Definitionn#0

[7] S. Deterding, D. Dixon, R. Khaled, and L. Nacke, “From game design elements to

gamefulness: defining gamification,” Proceedings of the 15th . . . , pp. 9–15, 2011. [Online].

Available: http://dl.acm.org/citation.cfm?id=2181040

[8] M. Nelson, “Soviet and American precursors to the gamification of work,” Proceeding of

the 16th International Academic . . . , pp. 23–26, 2012. [Online]. Available:

http://dl.acm.org/citation.cfm?id=2393138

[9] K. Salen and E. Zimmerman, “Rules of Play: Game Design Fundamentals,” Oct. 2003.

[Online]. Available: http://dl.acm.org/citation.cfm?id=1215723

39

[10] R. Koster and W. Wright, “A Theory of Fun for Game Design,” Nov. 2004. [Online].

Available: http://dl.acm.org/citation.cfm?id=1207478

[11] A. Dignan, Game Frame. Free Press, 2011. [Online]. Available:

http://www.amazon.com/Game-Frame-Using-Strategy-

Success/dp/B0054U5EHAhttp://books.google.com/books?id=nkUr1RI21jcC

[12] D. H. Pink, Drive: The Surprising Truth About What Motivates Us. Riverhead Books,

2011. [Online]. Available: http://www.amazon.com/Drive-Surprising-Truth-About-

Motivates/dp/1594484805

[13] P. Herzig, K. Jugel, C. Momm, M. Ameling, and A. Schill, “GaML - A Modeling Language

for Gamification,” 2013 IEEE/ACM 6th International Conference on Utility and Cloud

Computing, vol. 48, pp. 494–499, Dec. 2013. [Online]. Available:

http://ieeexplore.ieee.org/lpdocs/epic03/wrapper.htm?arnumber=6809455

[14] J. Simões, R. R. D. Redondo, and A. A. F. Vilas, “A social gamification framework for a

K-6 learning platform,” Computers in Human Behavior, vol. 29, no. 2, pp. 345–353, Mar. 2012.

[Online]. Available: http://dx.doi.org/10.1016/j.chb.2012.06.007http://

www.sciencedirect.com/science/article/pii/S0747563212001574

[15] M. Hall, S. O. Kimbrough, C. Haas, C. Weinhardt, and S. Caton, “Towards the

gamification of well-being measures,” 2012 IEEE 8th International Conference on E-Science,

pp. 1–8, Oct. 2012. [Online]. Available:

http://ieeexplore.ieee.org/lpdocs/epic03/wrapper.htm?arnumber=6404457

41

Apêndices

43

APÊNDICE A – NOME DO APÊNDICE

45

Anexos

47

ANEXO A – NOME DO ANEXO

49

TRABALHOS PUBLICADOS PELO AUTOR

Trabalhos publicados pelo autor durante o programa (obrigatório somente

para teses de doutorado e dissertações de mestrado no template DC/UEL).

1. Jose da silva, autor2 da silva, orientador da silva, Titulo do artigo, local onde foi

publicado, mes/ano, editora, numero de pagina, isbn, (Qualis CC 2012, xx)







MURILO AUGUSTO LOPES TEIXEIRA - UEL · 1 INTRODUÇÃO Os conceitos de Gamificação estão sendo...

Documents

Transcript of MURILO AUGUSTO LOPES TEIXEIRA - UEL · 1 INTRODUÇÃO Os conceitos de Gamificação estão sendo...