Desenvolvimento de uma Aplicação de Página-Única e Banco de Dados Não-Relacional para

70 Pages·2015·1.6 MB·Portuguese

UNIVERSIDADEFEDERALDORIOGRANDEDOSUL
INSTITUTODEINFORMÁTICA
CURSODECIÊNCIADACOMPUTAÇÃO
RAPHAELDELEONFERREIRALUPCHINSKI
Desenvolvimento de uma Aplicação de
Página-Única e Banco de Dados
Não-Relacional para Organização e
Controle de Eventos Esportivos
Monografia apresentada como requisito parcial
para a obtenção do grau de Bacharel em Ciência
daComputação
Orientador:Prof.Dr.LeandroKrugWives
PortoAlegre
2015
UNIVERSIDADEFEDERALDORIOGRANDEDOSUL
Reitor: Prof.CarlosAlexandreNetto
Vice-Reitor: Prof.RuiVicenteOppermann
Pró-ReitordeGraduação: Prof.SérgioRobertoKielingFranco
DiretordoInstitutodeInformática: Prof.LuisdaCunhaLamb
CoordenadordoCursodeCiênciadeComputação: Prof.CarlosArthurLangLisbôa
Bibliotecária-chefedoInstitutodeInformática: BeatrizReginaBastosHaro
AGRADECIMENTOS
Osmaisprofundosagradecimentoàfamíliaacolhedora,carinhosaeincentivadora
que tenho e que muito me auxiliou para a conclusão deste trabalho. À minha namorada,
que cuidou de mim em nossa nova casa e me deu total apoio durante este projeto. À mi-
nhaqueridadindaMariaLúcia(InMemoriam),queinfelizmentenãoestaráconoscopara
presenciaraconclusãodestaimportanteetapa. Aosdemaisamigosefamiliarespelocari-
nhodurantetodosessesanos. AoscolegasdaADP,pelasideiaseapoioparaconcluireste
trabalhoefinalmenteaoProf. LeandroWivespelareceptividade,incentivo,teracreditado
nestaideiaeportermeguiadoduranteestesmeses.
RESUMO
O esporte é uma peça fundamental na sociedade pelo seu caráter transformador e inclu-
sivo na vida das pessoas. A prática esportiva promove ganhos físicos e mentais notáveis,
melhorando a saúde e aumentando as capacidades motoras. É comum encontrar uma
abundância de aplicações que visam auxiliar a prática de esportes, em especial gerenci-
ando grupos de pessoas com interesses esportivos similares. Este trabalho descreve os
passos tomados para a implementação de uma aplicação que cobre funcionalidades de
gerenciamentodegruposeeventosesportivos,alémdeapresentarumapesquisarealizada
com diversos participantes acerca das qualidades do produto final. Trata-se de uma apli-
cação de página única (SPA) desenvolvida em AngularJS, utilizando um banco de dados
não-relacionalesistemadeautenticaçãofornecidospeloFirebase.
Palavras-chave: Angularjs. SPA.firebase. NoSQL.bootstrap. eventosesportivos.
DevelopingaSingle-PageApplicationwithNoSQLDatabaseforSportsEvents
Management
ABSTRACT
Sportsareanessentialcomponentinoursocietyjudgingbyitsshifterandinclusivechar-
acterinpeoples’lives. Practicingsportsgrantsnotablephysicalandmentalgains,increas-
ing our health and motor skills. It’s usual to find an abundance of applications that aims
to support sports practice, particularly managing groups of people with similar sports in-
terests. This work describes the steps taken to implement such application that covers
these groups and events management features and also shows the results of a survey an-
sweredbyseveralparticipantsonfinalproduct’squalities. ThisapplicationfollowsaSPA
model,developedinAngularJSusinganon-relationaldatabaseandauthenticationsystem
providedbyFirebase.
Keywords: angularjs,SPA,firebase,NoSQL,bootstrap,sportsevents.
LISTADEFIGURAS
Figura2.1 BuscasporframeworksFront-EndJSnoGoogle..........................................16
Figura2.2 ExemplodeumaaplicaçãoutilizandoosestilospurosdoBootstrap............17
Figura2.3 PáginadeumeventonoFacebook................................................................19
Figura2.4 PáginadeumaatividadenoJoga+1..............................................................20
Figura2.5 PáginadeumagruponoPeladeiro.com........................................................21
Figura3.1 DiagramaEntidade-RelacionamentodoGameFinder..................................30
Figura3.2 ConfiguraçãodosistemadeautenticaçãodeumaaplicaçãonoFirebase......36
Figura3.3 Configuraçãodasversõesdaaplicação..........................................................36
Figura3.4 Configuraçãodeumlistener emumdocumentonoFirebase.......................38
Figura4.1 Arquivodeconfiguraçãodedependênciadoprojeto-package.json....40
Figura4.2 DefiniçãodomódulocentraldoGameFinder...............................................40
Figura4.3 FactoryAuthparaacessoaoservidordeautenticaçãodoFirebase...............41
Figura4.4 DiagramaderotasdoGameFinder...............................................................43
Figura4.5 ConfiguraçãoderotasdoGameFinder.........................................................44
Figura4.6 ApontamentoàAPIdoFirebase....................................................................45
Figura4.7 BuscadeumusuárionobancodedadospeloseuID....................................45
Figura4.8 Buscadeumgruponobancodedadospelonome........................................45
Figura4.9 Estruturaçãodosobjetosdeusuários.............................................................47
Figura4.10 Estruturaçãodosobjetosdeesportes...........................................................47
Figura4.11 Estruturaçãodosobjetosdegrupos.............................................................48
Figura4.12 Estruturaçãodosobjetosdeeventos............................................................49
Figura4.13 Estruturaçãodosobjetosdeparticipantesdeumevento.............................49
Figura4.14 EstruturadepastasdaentidadePerfil..........................................................50
Figura5.1 FluxogramadeacessoaumeventodentrodoGameFinder.........................53
Figura5.2 CapadoGameFinder....................................................................................54
Figura5.3 TeladelogindoGameFinder.......................................................................55
Figura5.4 TeladeregistrodoGameFinder...................................................................55
Figura5.5 PaineldoGameFinder-Telainicial.............................................................56
Figura5.6 Páginadeperfildeumusuário......................................................................57
Figura5.7 Páginainicialdeumgrupo............................................................................58
Figura5.8 Páginadeumevento......................................................................................58
Figura6.1 Idadedospesquisados...................................................................................60
Figura6.2 Níveldeconhecimentoeminformáticadospesquisados..............................60
Figura6.3 Níveldeconhecimentododomíniodospesquisados....................................60
Figura6.4 Esportesfavoritosdospesquisados................................................................61
Figura6.5 Frequênciadapráticaesportivadospesquisados..........................................61
Figura6.6 Pesquisadosqueorganizameventosparaseusgrupos..................................62
Figura6.7 FuncionalidadesdesejadasparaofuturodoGameFinder............................64
LISTADETABELAS
Tabela2.1 Comparativodefuncionalidadesdasaplicaçõessemelhantes.......................24
Tabela7.1 Comparativodefuncionalidadesdasaplicaçõesrelacionadasemrelação
aoGameFinder.........................................................................................................65
LISTADEABREVIATURASESIGLAS
API ApplicationProgrammingInterface
BAAS Back-endAsAService
CSS CascadingStyleSheets
DOM DocumentObjectModel
HTML HyperTextMarkupLanguage
JS JavaScript
JSON JavaScriptObjectNotation
MVC Model-View-Controller
MVVM Model-View-ViewModel
MVW Model-View-Whatever
NoSQL NotOnlyStructuredQueryLanguage
RDBMS RelationalDatabaseManagementSystem
VCS VersionControlSystems
WYSIWYM WhatYouSeeIsWhatYouMean
XHR XMLHTTPRequest
XML eXtensibleMarkupLanguage
SUMÁRIO
1INTRODUÇÃO...........................................................................................................11
1.1 Objetivo....................................................................................................................11
1.2 Estruturadotexto...................................................................................................12
2FUNDAMENTOS,APLICAÇÕESETRABALHOSRELACIONADOS............13
2.1 FundamentoseTecnologias....................................................................................13
2.1.1 Front-End/Back-End............................................................................................13
2.1.2 HTML,CSSeDOM..............................................................................................14
2.1.3 JavaScript...............................................................................................................14
2.1.4 AngularJS...............................................................................................................15
2.1.5 Firebase..................................................................................................................16
2.1.6 Bootstrap................................................................................................................17
2.1.7 Controledeversionamento....................................................................................17
2.2 AplicaçõeseTrabalhosRelacionados....................................................................18
2.2.1 Facebook................................................................................................................18
2.2.2 Joga+1...................................................................................................................19
2.2.3 Peladeiro.com.........................................................................................................20
2.2.4 Aplicaçõesemdispositivosmóveis.......................................................................22
2.2.5 Outrasaplicações...................................................................................................22
2.3 ComparativodeFuncionalidades..........................................................................23
3PROJETODAAPLICAÇÃO....................................................................................25
3.1 UserStories..............................................................................................................25
3.1.1 Usuário...................................................................................................................25
3.1.2 Grupo.....................................................................................................................26
3.1.3 Evento....................................................................................................................26
3.1.4 Dashboard..............................................................................................................27
3.1.5 Busca......................................................................................................................28
3.2 Entidades.................................................................................................................28
3.2.1 Autenticação..........................................................................................................29
3.2.2 Usuário...................................................................................................................29
3.2.3 Esporte...................................................................................................................31
3.2.4 Grupo.....................................................................................................................31
3.2.5 Evento....................................................................................................................32
3.3 FrameworkseTecnologias.....................................................................................33
3.3.1 AngularJS...............................................................................................................33
3.3.1.1 ArquiteturaemCamadas.....................................................................................33
3.3.1.2 OrganizaçãodeArquivos....................................................................................34
3.3.1.3 LigaçãodeDados................................................................................................34
3.3.2 Firebase..................................................................................................................35
3.3.2.1 Autenticação.......................................................................................................35
3.3.2.2 Hospedagem........................................................................................................35
3.4 BancodeDados.......................................................................................................37
4DESENVOLVIMENTODAAPLICAÇÃO..............................................................39
4.1 ConfiguraçãoeCriaçãodoProjeto.......................................................................39
4.2 Autenticação............................................................................................................41
4.3 Rotas.........................................................................................................................41
4.3.1 DiagramadeRotas.................................................................................................42
4.3.2 AngularJSUI-Router.............................................................................................42
4.3.3 ConstruçãodeRotas..............................................................................................43
4.4 Queries.....................................................................................................................45
4.5 OrganizaçãodosDados..........................................................................................46
4.6 Componentes...........................................................................................................46
4.7 SistemadeBusca.....................................................................................................50
5GUIADEUSO............................................................................................................52
5.1 Navegação................................................................................................................52
5.2 Componentes...........................................................................................................54
5.2.1 Capa,LogineRegistro..........................................................................................54
5.2.2 Painel......................................................................................................................56
5.2.3 Perfil.......................................................................................................................56
5.2.4 Grupos....................................................................................................................57
5.2.5 Eventos...................................................................................................................57
6AVALIAÇÃOEPESQUISA.......................................................................................59
6.1 IdentificaçãodePerfil.............................................................................................59
6.2 Funcionalidades......................................................................................................61
6.3 UsodaAplicação.....................................................................................................62
7CONCLUSÃOETRABALHOSFUTUROS...........................................................65
7.1 AspectosTécnicos....................................................................................................66
7.2 TrabalhosFuturos...................................................................................................66
REFERÊNCIAS.............................................................................................................68