Aplicativo Furb Mobile Gincanasdsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1... · 2016. 8. 16. · Objetivos Este trabalho temo como objetivo estender o trabalho proposto por

Aplicativo Furb Mobile

Gincanas

Aluno(a): Rafael Adão

Orientador: Dalton Solano dos Reis

Roteiro

• Introdução

• Objetivos

• Fundamentação Teórica

• Trabalhos Correlatos

• Camadas

• Requisitos

• Especificação

• Implementação

• Operacionalidade

• Resultados e Discussões

• Conclusões e Sugestões

Introdução

• O aumento de uso da tecnologia traz

mudanças no comportamento da

sociedade

Objetivos

Este trabalho temo como objetivo estender o trabalho proposto por

Campos (2015), adicionando regras de negócio que permitam criar

uma aplicação de gincana virtual voltado para o evento Interação

FURB utilizando o framework multiplataforma Phonegap

a) autenticação e integração dos grupos do Facebook

b) quadro público da gincana no Trello

c) câmera

d) GPS

d) vídeos do YouTube

e) notificações push

f) serviços online utilizando OpenShift

Fundamentação Teórica

• Realidade Alternativa – Gincanas Virtuais

– Interação com elementos reais tem influência

em um mundo virtual

– Gincana Virtual

• Equipes

• Engajamento

• Ações no mundo real impactam sistema/mundo

virtual


• Interação FURB

– Oficinas, palestras, gincanas, conhecer a

estrutura da universidade

– Na última edição:

• 26.000 vagas ofertadas em mais de 590 oficinas

• 7.500 alunos

• 190 escolas

• 50 cidades


• Phonegap


• Ionic Platform


• Ionic Platform – Notificações PUSH

– APNS - Apple

– GCM - Google

Trabalhos Correlatos

• Sistema Móvel na

plataforma Android

para compartilhamento

de geolocalização

usando mapas e

notificações da Google,

Kestring (2014)


• Tô Aqui: Aplicativo para

georreferenciamento

em ambientes restritos,

Rocha (2015)


• Ingress

Camadas

Requisitos Funcionais

• Aplicativo

– Autenticar usando Facebook

– Participar de gincanas e grupos, assumindo o

papel de líder ou membro

– Utilizar a câmera, YouTube e GPS

– Receber notificações

– Acessar o placar da gincana no Trello

Requisitos Não Funcionais

• Aplicativo

– Desenvolver utilizando a plataforma

PhoneGap com o framework Ionic

– Utilizar requisições do tipo REST, utilizando a

biblioteca AngularJS, para se comunicar com

o servidor back-end

– Utilizar as APIs do Google Maps, Facebook,

YouTube e Ionic Platform


• Site

– Criação de gincanas, grupos e tarefas

– Tarefas do tipo pergunta, imagem, vídeo e

geolocalização

– Tarefas com dependências

– Cerca virtual em tarefas de geolocalização

– Autorizar conta do Trello

– Permitir que as tarefas sejam avaliadas


• Site

– Desenvolver com tecnologia web (HTML,

CSS e Javascript) e AngularJS, no ambiente

de desenvolvimento Visual Studio Code

– Utilizar as APIs do Trello e Google Maps


• Servidor

– Converter o token de autorização do usuário

no Facebook para um token de longa duração

– Notificar os usuários do aplicativo sobre os

acontecimentos da gincana

– Criar os quadros, listas e cartões respectivos

as gincanas, grupos e tarefas no Trello


• Servidor

– Hospedar online na plataforma OpenShift

– Utilizar as bibliotecas JTrello, restfb e a

classe Ionic nas integrações com Trello,

Facebook e Ionic Platform

– Utilizar o banco de dados PostgreSQL e a

framework Hibernate

Arquitetura

Especificação

• Site e Aplicativo

– AngularJS

Especificação

• Servidor

Implementação

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$scope.ativarGincana = function (gincana, indice) {

var opts = {

type: "popup",

name: "Furb Mobile Gincanas",

scope: {read: true, write: true, account: true},

expiration: "never",

success: function () {

var token = localStorage.getItem("trello_token");

gincanaAPI.ativar(gincana.id, token).then(

function onSuccess(params) {

$scope.gincanas[indice] = params.data;

});

},

error: function (params) {

alert("Não foi possível víncular com o Trelo: " +

params);

}

};

Trello.authorize(opts);

};

• Integração com Trello

Implementação

• Ao ativar gincana, o servidor deve criar e

associar gincanas e grupos com quadros

e listas do Trello

Implementação1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

public Gincana criarQuadroGincana(Gincana gincana) throws Exception{

JTrelloClient client = new JTrelloClient(authKey,

gincana.getTrello_token());

BoardService boards = client.getBoards();

ListaService listas = client.getLists();

Board quadroGincana = new Board();

quadroGincana.setName(gincana.getTitulo());

quadroGincana.setDesc(gincana.getDescricao());

Board quadroCriado = boards.create(quadroGincana);

gincana.setTrello_IdBoard(quadroCriado.getId());

gincana.setTrello_UrlBoard(quadroCriado.getUrl());

List listaGruposFromGincana =

grupoService.getListaGruposFromGincana(gincana.getId());

for (Grupo grupo : listaGruposFromGincana) {

Lista lista = new Lista();

lista.setIdBoard(quadroCriado.getId());

lista.setName(grupo.getNome());

Lista listaCriada = listas.create(lista);

grupo.setTrello_idLista(listaCriada.getId());

grupoDAO.create(grupo);

}

return gincana;

}

Adquire os serviços

Cria o Quadro

Associa com a Gincana

Cria a Lista

Associa com o Grupo

Implementação

• Enviar notificação push

Implementação1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

public void Notificar_Avaliar(String tokenLider, String tokenUsuario,

String tituloTarefa, int notaTarefa) {

ArrayList tokens = new ArrayList();

tokens.add(tokenLider);

tokens.add(tokenUsuario);

Notificar(tokens, "Tarefa Avaliada", tituloTarefa + " foi

avaliada e recebeu a nota " + notaTarefa);

}

private void Notificar(ArrayList tokens, String titulo,

String descricao) {

Notificacao notificacao = new Notificacao();

notificacao.getTokens().addAll(tokens);

notificacao.setProfile(IONIC_API_PROFILE);

notificacao.getNotification().put("title", titulo);

notificacao.getNotification().put("message", descricao);

Ionic ionic = new Ionic(IONIC_API_TOKEN);

ionic.push(new Gson().toJson(notificacao));

}

Tokens líder e membro

Notificação

Profile

Chave API

Implementação1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20








}


String descricao) {








}

Tokens dispositivo móvel líder e membro

Notificação

Profile

Chave API

Implementação1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20








}


String descricao) {








}

Tokens líder e membro

Notificação

Profile

Chave API

Operacionalidade da

Implementação• Tarefa de geolocalização

Operacionalidade da

Implementação

Operacionalidade da

Implementação• Líder

Operacionalidade da

Implementação

Operacionalidade da

Implementação• Resolvendo geolocalização

Operacionalidade da

Implementação

Resultados e Discussões

• Depoimento:

– “acredito que essa seja a ideia mesmo, claro que não

utilizamos tanta tecnologia como login por Facebook

e o Trello, mas são tecnologias super acessíveis que

seriam ótimas serem implantadas” – Paola Adriano,

participa a 1 ano da gincana


• Estender o trabalho de Campos (2015)

– Problemas para gerar APK para Android

– Conflito nos plugins utilizados

– Erro segue desde 2014 sem solução

• Iniciou-se o desenvolvimento de outro aplicativo

– Framework Ionic

– Focado em gincanas

– Permitindo adicionar outras funcionalidades


• Atualizações de API de terceiros

– Ionic Platform – Metade de março, final de junho e

início de julho

– Facebook – Metade de abril

– Google Maps – Metade de abril

• Renderizar Mapas em janelas modais


• Comparação entre trabalhos:

Resultados e Discussões Kestring

(2014)

Rocha (2015) Niantic Labs

(2012)

Furb Mobile Gincanas

geolocalização de usuários X X X X

interface gráfica com mapa X X X X

mundo virtual X X

compartilhamento de localização X

envio de notificações X X X X

integração com FURB X X X

login com Facebook X

quadro virtual com Trello X

uso de Beacons X

grupos X X

integração com YouTube X

plataforma suportada Android Híbrido Híbrido Híbrido

framework mobile Nativo Phonegap LibGDX Phonegap

Conclusões e Sugestões

• Atendimento dos objetivos

– Aplicação de gincana virtual utilizando o

framework multiplataforma Phonegap

– Login com Facebook

– Quadro público da gincana no Trello

– Câmera


• Atendimento dos objetivos

– GPS

– Integração de vídeos do YouTube

– Notificações

– OpenShift como plataforma de serviço para

hospedar o servidor do protótipo online


• Ionic aprimorou a experiência do usuário

ao proporcionar o visual de um aplicativo

nativo

• Dependência de API de terceiros

• Openshift as vezes fica indisponível

Extensões

• Beacons para aprimorar a geolocalização em espaços internos proposto por Rocha(2014)

• Compartilhamento de localizações e amigos do Facebook proposto por Campos (2015)

• Gamificação

Extensões

• Maior integração com as redes sociais.

Fotos, vídeos e check-ins em seus perfis

do Facebook, Twitter e Instagram, entre

outros.

Demonstração

Dúvidas?

Aluno: Rafael Adão

Orientador: Dalton Solano dos Reis

Documents

Aplicativo Furb Mobile Gincanasdsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1... · 2016. 8. 16. · Objetivos Este trabalho temo como objetivo estender o trabalho proposto por