Aplicativo Furb Mobile Gincanasdsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1... · 2016. 8....
Transcript of Aplicativo Furb Mobile Gincanasdsc.inf.furb.br/arquivos/tccs/apresentacoes/2016_1... · 2016. 8....
-
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
-
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
-
Fundamentação Teórica
• 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
-
Fundamentação Teórica
• Phonegap
-
Fundamentação Teórica
• Ionic Platform
-
Fundamentação Teórica
• 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)
-
Trabalhos Correlatos
• Tô Aqui: Aplicativo para
georreferenciamento
em ambientes restritos,
Rocha (2015)
-
Trabalhos Correlatos
• 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
-
Requisitos Funcionais
• 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
-
Requisitos Não Funcionais
• 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
-
Requisitos Funcionais
• 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
-
Requisitos Não Funcionais
• 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
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
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
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 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
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
-
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
-
Resultados e Discussões
• 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
-
Resultados e Discussões
• 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
-
Resultados e Discussões
• 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
-
Conclusões e Sugestões
• 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
-
Conclusões e Sugestões
• 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