MURILO AUGUSTO LOPES TEIXEIRA UMA PROPOSTA DE FRAMEWORK DE GAMIFICAÇÃO PARA APLICAÇÕES WEB (GAMFW)

Transcrição

1 MURILO AUGUSTO LOPES TEIXEIRA UMA PROPOSTA DE FRAMEWORK DE GAMIFICAÇÃO PARA APLICAÇÕES WEB (GAMFW) LONDRINA - PR 2015

2

3 MURILO AUGUSTO LOPES TEIXEIRA UMA PROPOSTA DE FRAMEWORK DE GAMIFICAÇÃO PARA APLICAÇÕES WEB (GAMFW) 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

4

5 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, 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, 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

6 MURILO AUGUSTO LOPES TEIXEIRA UMA PROPOSTA DE FRAMEWORK DE GAMIFICAÇÃO PARA APLICAÇÕES WEB (GAMFW) 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.

7

8 Este trabalho é dedicado às crianças adultas que, quando pequenas, sonharam em se tornar cientistas.

9

10 AGRADECIMENTOS

11

12 "

13

14 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, 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:

15

16

17 SOBRENOME, P. S. Title of the Work. 51p. Final Project (Bachelor of Science in Computer Science) State University of Londrina, Londrina-PR, 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:

18

19 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.

20

21 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 Erro! Indicador não definido.

22

23 LISTA DE ABREVIATURAS E SIGLAS

24

25 SUMÁRIO 1 INTRODUÇÃO GAMIFICAÇÃO...ERRO! INDICADOR NÃO DEFINIDO. 2.1 Abordagem Point-Badge-Level O PROJETO DO GAMFW...ERRO! INDICADOR NÃO DEFINIDO. 3.1 Projeto e implementação do Webservice 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 APÊNDICE A NOME DO APÊNDICE ANEXO A NOME DO ANEXO TRABALHOS PUBLICADOS PELO AUTOR... 49

26

27 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.

28

29 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).

30 2.1 Abordagem Point-Badge-Level

31 29

32 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

33 31

34 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 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 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-buttontext"></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.

35 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: 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.

36 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" arialabel="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 35

38

39 5 TRABALHOS FUTUROS 37

40 REFERÊNCIAS [1] J. Lee and J. Hammer, Gamification in Education: What, How, Why Bother? Academic Exchange Quarterly, vol. 15, pp. 1 5, [Online]. Available: [2] G. Zichermann and C. Cunningham, Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps. O Reilly Media; 1 edition, [Online]. Available: Mobile/dp/ /ref=srn1n8?ie=UTF8n&qid= n&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..., [Online]. Available: 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: [5] K. M. Kapp, The Gamification of Learning and Instruction: Gamebased Methods and Strategies for Training and Education, May [Online]. Available: [6] S. Deterding, R. Khaled, L. Nacke, and D. Dixon, Gamification: Toward a definition, CHI 2011 Workshop Gamification Research Network, pp , [Online]. Available: +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, [Online]. Available: [8] M. Nelson, Soviet and American precursors to the gamification of work, Proceeding of the 16th International Academic..., pp , [Online]. Available: [9] K. Salen and E. Zimmerman, Rules of Play: Game Design Fundamentals, Oct [Online]. Available:

41 39 [10] R. Koster and W. Wright, A Theory of Fun for Game Design, Nov [Online]. Available: [11] A. Dignan, Game Frame. Free Press, [Online]. Available: Success/dp/B0054U5EHAhttp://books.google.com/books?id=nkUr1RI21jcC [12] D. H. Pink, Drive: The Surprising Truth About What Motivates Us. Riverhead Books, [Online]. Available: Motivates/dp/ [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 , Dec [Online]. Available: [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 , Mar [Online]. Available: [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 [Online]. Available:

42

43 Apêndices 41

44

45 APÊNDICE A NOME DO APÊNDICE 43

46

47 Anexos 45

48

49 ANEXO A NOME DO ANEXO 47

50

51 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) 2. 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) 3. 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) 4. 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)