Hypatiamat: Gestão de Campeonatos

Universidade do Minho Escola de Engenharia Departamento de Informática Luís Pedro Oliveira de Castro Vieira Hypatiamat : Gestão de Campeonatos Julho 2023 Universidade do Minho Escola de Engenharia Departamento de Informática Luís Pedro Oliveira de Castro Vieira Hypatiamat : Gestão de Campeonatos Dissertação de Mestrado Mestrado em Engenharia Informática Dissertação orientada por José Carlos Leite Ramalho Ricardo Manuel Neves Pinto Julho 2023 DIREITOS DE AUTOR E CONDIÇÕES DE UTILIZAÇÃO POR TERCEIROS Este é um trabalho académico que pode ser utilizado por terceiros desde que respeitadas as regras e boas práticas internacionalmente aceites, no que concerne aos direitos de autor e direitos conexos. Assim, o presente trabalho pode ser utilizado nos termos previstos na licença abaixo. Caso o utilizador necessite de permissão para poder fazer um uso do trabalho em condições não previstas no licenciamento indicado, deverá contactar o autor, através do RepositóriUM da Universidade do Minho. Licença concedida aos utilizadores deste trabalho ATRIBUIÇÃO-NÃO COMERCIAL CC BY-NC https://creativecommons.org/licenses/by-nc/4.0/ i DECLARAÇÃO DE INTEGRIDADE Declaro ter atuado com integridade na elaboração do presente trabalho académico e confirmo que não recorri à prática de plágio nem a qualquer forma de utilização indevida ou falsificação de informações ou resultados em nenhuma das etapas conducente à sua elaboração. Mais declaro que conheço e que respeitei o Código de Conduta Ética da Universidade do Minho. ii Assinado por: Luís Pedro Oliveira de Castro Vieira Num. de Identificação: 30324333 Data: 2023.07.31 09:34:43 +0100 AGRADECIMENTOS Primeiramente gostaria de agradecer aos meus orientadores, Professor José Carlos Leite Ramalho e Doutor Ricardo Manuel Neves Pinto, pelo apoio e disponibilidade ao longo de todo o projeto. Através de uma comunicação rápida e eficiente, aliada à experiência arrecadada de anos, superar as dificuldades sentidas ao longo do desenvolvimento do projeto tornou-se simples e facilitado, mesmo nos momentos mais apertados. Ao longo destes cinco anos foram várias as experiências e desafios que ultrapassei, vasto o conhecimento que adquiri e inúmeras as pessoas que deixaram a sua marca em mim. Foi neste capítulo da minha vida que cresci em tantos e tão diversos aspetos, muitas das vezes através do caminho mais atribulado. Torna-se, portanto, difícil agradecer em poucas palavras a todos os que me ajudaram desde que comecei este percurso em 2018. Aos que sempre estiveram ao meu lado desde o primeiro dia; aos que foram aparecendo e ficaram e aos que não ficaram; aos que viveram as dificuldades do dia a dia comigo; aos que me ouviram quando precisava e aos que me deram na cabeça quando eu não sabia que precisava; aos que me deram a possibilidade de experienciar um pouco mais da universidade para além dos estudos e que tornaram essa experiência inesquecível; aqueles que deixei orgulhosos e os que desiludi; aos que me fizeram acreditar em mim, independentemente das circunstâncias, e que foram o meu apoio durante todos estes anos; aos que nunca desistiram de mim. Um obrigado do fundo do coração. Foram vocês que fizeram dos meus cinco anos algo inesquecível. Levo-vos a todos comigo, nos ensinamentos ou nos erros cometidos, nos risos ou nos choros. Tudo o que vivi com vocês tornou-me uma pessoa melhor em tantos níveis. Um agradecimento especial ao Nelito e à Rosinha que nestes cinco anos foram a minha segunda casa, aturaram o meu ser e sem os quais nada seria igual. Por último, e sem dúvida o mais importante, agradecer à minha família. M¯ae, Pai e Mana, sem vocês não seria a pessoa que sou hoje, não teria construído tudo o que alcancei até agora sem uma fundação tão forte como a que me vocês me deram. Todas as dificuldades pelas quais passei desde pequeno, todas as pequenas e grandes vitórias, todos os choros e desabafos, todos os raspanetes e todas as chamadas de atenção. Vocês estavam lá ao meu lado, sempre. Não há palavras que cheguem para agradecer tudo o que fizeram, fazem e sei que vão continuar a fazer por mim. Começa agora um capítulo novo da minha vida, repleto de oportunidades e novas histórias. No fundo foram vocês que me abriram estas portas e chegou a altura de retribuir tudo o que fizeram por mim. A ti mãe agradeço-te pelas saudades, que sempre me deram a garantia que teria para onde voltar nas horas difíceis. A ti pai, todas as chamadas e conselhos de tudo e mais alguma coisa. A ti mana, a partilha pelo desespero universitário e o companheirismo e amor de sempre. Voa alto e sabe que o teu irmão estará sempre aqui para não só para te chatear, mas também para te ajudar. iii ABSTRACT Hypatiamat, namely through its Hypatiamat Association (AHM) has, among others, the objective of contributing to awakening among students of various educational levels an interest for mathematics and a better understanding of its nature; of promoting the development of mathematics teaching at all levels; of promoting the quality of teaching/learning of mathematics through the use and integration of new technologies in the classroom, through the resources available on the Hypatiamat Platform, thus capitalizing on the familiarity and enthusiasm of students for more technological environments. Considering that the first years of schooling are essential for the construction of knowledge in mathematics and for the development of transversal skills such as logical reasoning and problem solving, and taking into account that the evolution of mathematical learning takes place in a continuous and spiral dynamic, it is important to establish solid foundations so as not to compromise the learning of the following years. Note that failure in this subject is often rooted in incomplete or dysfunctional learning, resulting from a poor construction of the mathematics foundations. The intervention of the Hypatiamat project, being directly aimed at the students, takes advantage of their natural taste for technological environments. With this in mind, it proposes to provide teachers with tools that will allow them to incorporate, in their daily practice, methodologies that use this type of environment, duly articulated with other methodologies. It should be noted that learning is richer and more effective if the experiences and contexts provided to students are more diversed, and it is in this perspective that the Hypatiamat Project offers a great diversity of materials and approaches, allowing teachers to work them not only in a technological context, but also in a concrete one. In this dissertation the objective is to update and improve the component corresponding to the management of championships of Hypatiamat, thus allowing users of the platform an easier and more intuitive interaction with it. keywords Hypatiamat, Championships, Certificates, Interface, Statistics iv RESUMO OHypatiamat, nomeadamente através da sua Associação Hypatiamat (AHM) tem, entre outros, o objetivo de contribuir para despertar junto dos alunos dos vários graus de ensino o interesse pela matemática e uma melhor compreensão da sua natureza; de promover o desenvolvimento do ensino da Matemática a todos os níveis; de promover a qualidade do ensino/aprendizagem da Matemática mediante a utilização e integração das novas tecnologias em sala de aula, através dos recursos disponíveis na Plataforma Hypatiamat, capitalizando-se, assim, a familiaridade e o entusiasmo dos alunos por ambientes mais tecnológicos. Considerando que os primeiros anos de escolaridade são essenciais para a construção do conhecimento em matemática e para o desenvolvimento de capacidades transversais como o raciocínio lógico e resolução de problemas, e tendo em conta que a evolução da aprendizagem matemática se processa numa dinâmica contínua e em espiral, é importante o estabelecimento de bases sólidas para não serem comprometidas as aprendizagens dos anos seguintes. Notese que o insucesso nesta disciplina tem, frequentemente, as suas raízes em aprendizagens incompletas ou disfuncionais, resultantes de uma construção pobre do edifício da matemática. A intervenção do projeto Hypatiamat, orientando-se de uma forma direta para os alunos, aproveita o gosto natural que estes têm por ambientes tecnológicos. Com esse objetivo, propõese munir os professores de ferramentas que lhes possibilitem incorporar, nas suas práticas diárias, metodologias que utilizem esse tipo de ambientes, devidamente articuladas com outras metodologias. Note-se que as aprendizagens são tanto mais ricas e eficazes quanto mais diversificadas as experiências e contextos que são facultados aos alunos, e é nessa perspetiva que o Projeto Hypatiamat oferece uma grande diversidade de materiais e abordagens, permitindo aos professores trabalhá-los não só em contexto tecnológico, mas também concreto. Na presente dissertação o objetivo é atualizar e melhorar a componente correspondente à gestão de campeonatos do Hypatiamat, permitindo assim aos utilizadores da plataforma uma interação mais facilitada e acessível com a mesma. palavras-chave Hypatiamat, Campeonatos, Certificados, Interface, Estatísticas v CONTEÚDO 1Introdução 1 1.1 Contexto 1 1.2 Motivação 2 1.3 Objetivos 2 1.4 Metodologia 3 1.5 Calendarização 3 1.6 Estrutura do Documento 4 2Estado da Arte 5 2.1 Plataformas de Apoio ao Ensino 5 2.1.1 Khan Academy 5 2.1.2 Matematica.pt 5 2.2 Hypatiamat 6 2.2.1 Aplicação Campeonatos Anterior 6 2.2.2 Estrutura da Plataforma 8 2.2.3 Modelos de Dados 8 2.3 Estudo das Tecnologias 12 2.3.1 Node.js 13 2.3.2 Strapi CMS 13 2.3.3 JSON Web Token JWT 13 2.3.4 Vue.js 15 3Modelação do Sistema 17 3.1 Estrutura Aplicacional 17 3.2 Requisitos 18 3.3 Modelação da Base de Dados 29 3.3.1 Novos Modelos 29 3.3.2 Modelo E.R 31 3.4 Modelação das Interfaces 32 4Desenvolvimento da API 37 4.1 Inicialização 37 4.1.1 Novos Modelos 37 4.1.2 Modelos Existentes 39 4.2 Construção 43 4.2.1 Rotas 43 4.2.2 Autenticação 46 4.2.3 Proteção de Rotas 46 vi conteúdo vii 5Desenvolvimento da Interface 49 5.1 Inicialização 49 5.2 Interfaces 50 5.2.1 Interfaces Comuns 50 5.2.2 Interfaces do Aluno 57 5.2.3 Interfaces do Professor 58 5.2.4 Interfaces do Administrador 59 6Deployment da Aplicação 63 6.1 Configuração 63 6.2 API 63 6.3 Interface 64 6.4 Testes 64 6.4.1 Feedback 65 7Conclus¯oes e Trabalho Futuro 67 1 INTRODUÇÃO Neste primeiro capítulo iremos apresentar o projeto de dissertação em questão. Aqui será enunciado o contexto e motivos pelos quais o mesmo está a ser desenvolvido, os seus objetivos e aspetos mais técnicos como os métodos de desenvolvimento, a calendarização e, por fim, a estrutura do documento final. 1.1 contexto Cada vez mais, nos dias de hoje, a sociedade enfrenta desafios decorrentes da globalização e do perpétuo desenvolvimento tecnológico acelerado, tornando necessário adaptar e formar os jovens, de forma adequada e nos mais diferentes contextos, mais especificamente no de ensino da matemática, área fundamental ao desenvolvimento dos mesmos. É neste último onde o auxílio ao ensino e aprendizagem através de ferramentas digitais e variadas tecnologias se torna essencial e cada vez mais procurado. Aliando o ensino da Matemática a tecnologias que, cada vez mais, os alunos do Ensino Básico conhecem e dominam, possibilita fomentar o gosto pela disciplina, a qual assume uma grande importância no currículo de qualquer estudante. Assim, o Projeto Hypatiamat [ 9 ] nasce como uma resposta à preocupação crescente quanto ao desempenho escolar na área de ensino da Matemática, com o intuito de promover a excelência e o desenvolvimento do sucesso escolar, do 1ºao 9ºano de escolaridade [12]. O Projeto Hypatiamat, através do gosto dos alunos por ambientes tecnológicos, visa utilizar a tecnologia como um parceiro e fazer uso dos diferentes recursos digitais existentes para munir os professores com possibilidades de incorporar, no dia a dia, metodologias de ensino diferentes que integrem esta exploração tecnológica [12]. Para além disto, a mesma plataforma permite aos professores acompanharem o progresso e desempenho dos seus alunos nos diferentes jogos e aplicações existentes e que eles mesmos possam consultar os seus próprios resultados. Isto permite ao professor adaptar a sua estratégia de ensino de acordo com os padrões que observa nos resultados dos seus alunos, ou até de um aluno em particular. De forma resumida, o Projeto Hypatiamat pretende não só auxiliar os professores no ensino da Matemática, com as diferentes vertentes acima mencionadas, mas também cativar e contribuir para a autonomia dos estudantes, de forma a que se sintam mais confiantes nas suas 1 1.2. Motivação 2 capacidades e lhes permita melhorar o seu desenvolvimento do conhecimento matemático e em diferentes capacidades transversais como o raciocínio lógico e resolução de problemas [ 12 ], envolvendo toda a comunidade escolar: alunos, professores e encarregados de educação. 1.2 motivação APlataforma Hypatiamat (PLH) é, cada vez mais, uma plataforma de ensino com um elevado número de utilizadores, possuindo uma grande complexidade de dados. Note-se, como exemplo, o crescimento do ano letivo de 2020/2021 com o passado ano letivo (2021/2022): houve um aumento de 31.7% no número total de professores e um aumento de 29.5% no número de alunos que utilizaram a mesma. Os números falam por si, ainda mais se levarmos em conta os utilizadores não registados que fazem uso dos artefactos digitais existentes de livre acesso, o que denota que este é um projeto em constante crescimento e utilização por parte da comunidade escolar do ensino básico. A constante evolução tecnológica faz com que as tecnologias tenham uma maior presença nas atividades do dia a dia, mesmo em contexto escolar, o que induz os principais atores educativos a escolher os artefactos digitais com maior potencial para uma aprendizagem efetiva da matemática [12]. Assim, a atualização da plataforma torna-se algo imperativo no intuito de responder a este crescimento verificado. Com isto em mente, serve a presente dissertação para atualizar e melhorar a aplicação de campeonatos da PLH. A presente dissertação conta não só com o desenvolvimento da API atualmente existente, com o intuito de melhorar os tempos de resposta atuais, mas também com a construção de uma nova aplicação web que permite, de forma mais intuitiva e apelativa com a atualização das interfaces, concretizar as atuais funcionalidades da aplicação existente mas também integrar novas funcionalidades. 1.3 objetivos A presente dissertação pretende cumprir com os seguintes objetivos: • Planear, especificar e modernizar a lógica do componente, nomeadamente o sistema de gestão de campeonatos; • Levantar os requisitos atuais e planear uma arquitetura aplicacional que dê resposta aos mesmos; •Desenvolvimento de software para a componente em questão; •Desenvolvimento de interfaces intuitivas à utilização do componente; •Testes à implementação realizada. 1.4. Metodologia 3 1.4 metodologia A presente dissertação segue a seguinte metodologia de trabalho: •Estudo da plataforma em questão; •Levantamento e análise de requisitos; •Estudos das tecnologias necessárias à implementação do software; •Implementação do software de acordo com os requisitos; •Reuniões semanais com o orientador; •Reuniões periódicas com o coordenador do Hypatiamat. 1.5 calendarização •Estudo do Problema; •Análise e Levantamento de Requisitos; •Desenvolvimento da API; •Desenvolvimento da Interface; •Testes; •Deployment; •Escrita da Dissertação. Figura 1: Calendarização do Desenvolvimento da Dissertação 1.6. Estrutura do Documento 4 1.6 estrutura do documento No primeiro capítulo, servindo um propósito introdutório, foi realizada uma breve e sucinta apresentação do tema da presente dissertação, mais concretamente o contexto em que se enquadra, a motivação associada ao desenvolvimento da mesma e, por fim, os objetivos a alcançar com a mesma. Posteriormente, no segundo capítulo, é apresentado um estudo inicial da plataforma Hypatiamat bem como os resultados da investigação de outras plataformas com o mesmo intuito que anterior. É ainda apresentado a estrutura antiga da plataforma, os modelos de dados já existentes e que serão utilizados na nova aplicação e o estudo das tecnologias a utilizar para o desenvolvimento da mesma. De seguida, no terceiro capítulo, é descrito e explicado tudo aquilo a que a nova aplicação deve atender. É apresentado a nova estrutura aplicacional, os requisitos levantados para cada tipo de utilizador, os novos modelos e base de dados a acrescentar à Plataforma Hypatiamat e as interfaces desenhadas para responder aos requisitos levantados. No quarto capítulo é relatado de forma extensa a construção e desenvolvimento da API de dados necessária para o levantamento e processamento dos mesmos. São apresentados os modelos, novos e existentes, as rotas criadas e o processo de proteção da mesmas, bem como a gestão da autenticação no sistema. Já no quinto capítulo é exposto o desenvolvimento do segundo serviço fundamental ao funcionamento da aplicação, a interface. Neste capítulo são apresentadas e explicadas todas as interfaces, por tipo de utilizador, bem como as configurações necessárias para o desenvolvimento desta componente. Logo após, no sexto capítulo, é relatado o processo de transição da aplicação para ambiente de produção. Aqui é mencionado a forma como a gestão e lançamento das versões do sistema é feita para cada uma dos serviços, front-end eback-end. É ainda mencionada o uso, em cenário de teste, da aplicação em contexto real, acompanhado de testemunhos de diversos utilizadores. Por fim, no sétimo e último capítulo, são apresentadas algumas conclusões sobre o trabalho realizado até ao momento, bem como possíveis passos futuros para o aprimorar da aplicação de Campeonatos da Plataforma Hypatiamat. 2 E S TA D O DA A RT E Neste capítulo iremos apresentar uma breve investigação sobre o estado atual da Plataforma Hypatiamat, bem como de ferramentas semelhantes ou que apresentem os mesmos objetivos. Além disso serão apresentadas as interfaces previamente disponíveis, explicada a estrutura que a plataforma possuía previamente e os modelos de dados a serem utilizados. Como término do capítulo são apresentadas as tecnologias que darão vida ao presente projeto de dissertação, sendo fornecida uma breve explicação sobre cada uma delas e alguns dos detalhes mais relevantes. 2.1 plataformas de apoio ao ensino Com o mesmo intuito e motivação que a Plataforma Hypatiamat, existe um número elevado de aplicações e projetos que visam auxiliar o ensino das variadas disciplinas durante os diversos anos e ciclos de escolaridade. Assim, na presente secção, apresentaremos algumas plataformas conhecidas no contexto da promoção do ensino e aprendizagem da matemática como a Khan Academy e o Matematica.pt. 2.1.1 Khan Academy AKhan Academy [ 11 ], uma plataforma gratuita com reputação internacional, disponibiliza conteúdos das variadas disciplinas e áreas de conhecimento existentes não só para o Ensino Básico mas também para o Ensino Secundário. Do 1ºao 9ºano de escolaridade, tal como acontece na Plataforma Hypatiamat, disponibiliza vários jogos/aplicações que permitem aos alunos testar e expandir os seus conhecimentos nas diversas matérias. 2.1.2 Matematica.pt Conhecida por disponibilizar uma diversidade de vídeos, exercícios e aulas para os alunos esta aplicação web, gratuita, constitui sobretudo uma excelente plataforma de preparação para provas de aferição e exames nacionais, dado que muitos destes exercícios e exames são acompanhados de resoluções detalhadas. 5 2.2. Hypatiamat 6 Como é possível averiguar pelo website [ mat ] da mesma, conta neste momento com 1955 vídeos, 281 aulas, 683 aulas e 3347 exercícios. No entanto o material disponibilizado apenas abrange do 5ºao 9ºano de escolaridade. 2.2 hypatiamat Com o estudo de ferramentas similares à Plataforma Hypatiamat realizado, iremos agora debruçar sobre a mesma com maior afinco. No presente capítulo iremos analisar o design previamente existente, a estrutura que suportava todo o sistema e os modelos de dados que prevalecerão na nova aplicação. Serão ainda abordadas as ferramentas e tecnologias a serem utilizadas no desenvolvimento da nova aplicação Campeonatos, bem como alguns detalhes importantes das mesmas. 2.2.1 Aplicação Campeonatos Anterior APlataforma Hypatiamat já tinha disponível uma aplicação que permitia a participação e consulta dos Campeonatos de matemática por ela disponibilizados. No entanto, encontrando-se desatualizada e sendo difícil de dar continuidade à arquitetura existente, dado o crescimento exponencial da Plataforma Hypatiamat, tornou-se necessário desenvolver uma nova aplicação de Campeonatos com tecnologias estáveis e recentes, o que permitiu também concretizar a implementação de algumas funcionalidades que não existiam na aplicação antiga. A partir das imagens abaixo podemos observar como era a aplicação de Campeonatos, agora descontinuada. Figura 2: Aplicação Campeonatos Antiga - Homepage 2.2. Hypatiamat 7 Na figura 2, podemos observar a página inicial da antiga aplicação Campeonatos da Plataforma Hypatiamat onde o utilizador podia consultar quando se realizaria o próximo campeonato, os jogos a serem praticados e resultados de outros campeonatos. Caso um campeonato se encontrasse a decorrer poderia ainda consultar quanto tempo faltava até ao término do mesmo. Figura 3: Aplicação Campeonatos Antiga - Campeonatos Já na figura 3visualizamos uma listagem de campeonatos que já foram concluídos, aos quais o utilizador poderia aceder de forma a consultar as classificações finais dentro dos mesmos, como poderemos ver na figura seguinte. Figura 4: Aplicação Campeonatos Antiga - Classificação 2.2. Hypatiamat 8 Por fim, na figura 4, o utilizador poderia consultar as classificações do campeonato escolhido, por jogo e por ano de escolaridade, bem como algumas estatísticas como o número total de jogadores e o número total de jogos praticados. 2.2.2 Estrutura da Plataforma No início da presente dissertação, realizou-se uma análise à estrutura da Plataforma Hypatiamat já existente. Neste caso a aplicação web está estruturada através de um conjunto de quatro componentes de software, as quais estão organizadas por camadas, formando assim uma pilha. No topo desta está a aplicação web, sendo que o restante conjunto poderá variar de acordo com o Sistema Operativo (SO) sobre a qual executa. Para este caso vamos explicitar os componentes para uma pilha que executa em Linux. •Linux: O SO é a primeira camada, tornando-se a base deste modelo; • Apache: A próxima camada é o responsável por traduzir os pedidos do browser, enviando de volta a informação correta, um servidor web, neste caso o Apache Web Server; • MySQL: A terceira camada é o local onde se encontram alojadas as bases de dados, mais propriamente o SGBD relacional MySQL. Esta camada coopera diretamente com a camada do servidor Apache e tem a função de armazenar toda a informação apresentada na plataforma Hypatiamat; • PHP: Por fim, na quarta e última camada, temos a camada de scripting. A linguagem de scripting utilizada na aplicação web éPHP com a função de realizar as interrogações e codificações necessárias à apresentação das várias páginas. Assim, a aplicação web é executada nesta camada. Figura 5: Modelo LAMP[IBM] 2.2.3 Modelos de Dados APlataforma Hypatiamat tem, neste momento, a sua Base de Dados (BD) dividida em sete componentes principais: Aplicações,Contadores,QRQ,Questões,SAMD,Teste de Conhecimentos eTPC. 2.2. Hypatiamat 9 Cada uma destas possui um elevado número de tabelas e, como tal, para simplificar, iremos focar-nos apenas nas que são de maior interesse para a presente dissertação, nomeadamente as bases de dados Aplicações eTeste de Conhecimentos. BD Aplicações A presente base de dados é o local de armazenamento de informações sobre elementos como alunos, professores, escolas e turmas. Cada um destes é uma tabela, não descartando a existência de outras que não têm uso ou qualquer impacto nesta dissertação. Figura 6: Modelo Lógico - BD Aplicações Partindo do modelo lógico na figura acima, podemos visualizar cada um dos elementos previamente mencionados bem como os seus atributos caraterizadores: • alunos - Responsável por guardar toda a informação relativa aos alunos da plataforma. ◦id - Identificador único; ◦user - Código identificador do aluno; ◦numero - Número do aluno; 2.2. Hypatiamat 10 ◦nome - Nome do aluno; ◦datanascimento - Data de Nascimento do aluno; ◦escola - Código da escola que o aluno frequenta; ◦turma - Código da turma que o aluno frequenta; ◦email - Email do aluno; ◦password - Password do aluno; ◦codprofessor - Código do professor responsável pelo aluno; ◦pais - País onde o aluno vive; ◦confirmacao -flag que indica se o aluno está ou não confirmado na plataforma. • professores - Responsável por guardar toda a informação relativa aos professores da plataforma. ◦id - Identificador único; ◦codigo - Código identificador do professor; ◦nome - Nome do professor; ◦escola - Código da escola que o professor frequenta; ◦email - Email do professor; ◦password - Password do professor; ◦ confirmacao -flag que indica se o professor está ou não confirmado na plataforma; ◦premium -flag que indica o nível de acesso na plataforma; ◦validade - Data de expiração da conta do professor; ◦socionum - Número de sócio Hypatiamat do professor (caso possua); ◦projeto - Projeto onde se encontra inserido. • Escolas - Responsável por guardar toda a informação relativa às escolas do Hypatiamat. ◦id - Identificador único; ◦nome - Nome da escola; ◦localidade - Localidade onde a escola se encontra situada; ◦distrito - Distrito onde a escola se encontra situada; ◦pais - País onde a escola se encontra situada; ◦cod - Código identificador da escola. • turmas - Responsável por guardar toda a informação relativa às turmas existentes no Hypatiamat. ◦id - Identificador único; 3 MODELAÇÃO DO SISTEMA Será neste terceiro capítulo que iremos abordar a modelação do sistema da nova aplicação de Campeonatos, começando pela nova estrutura aplicacional. Juntamente com os responsáveis pela Plataforma Hypatiamat foi feito um levantamentos das necessidades do novo sistema. Deste modo, serão de seguida apresentados os requisitos levantados e, consequentemente, os novos modelos de dados necessários ao funcionamento da nova aplicação, bem com as suas relações. Por fim, serão ainda apresentados os esboços iniciais daquelas que serão as interfaces a apresentar aos utilizadores. 3.1 estrutura aplicacional Como mencionado previamente no capítulo 2, a aplicação de Campeonatos passará a ter uma nova estrutura. Ao contrário da anterior, esta será composta por dois servidores principais. Um de back-end para a API de dados, que fará a ligação com a BD, e outro de front-end para servir a interface da aplicação. À semelhança de outras aplicações dentro da Plataforma Hypatiamat, apesar de ter uma estrutura própria, funcionará paralelamente à plataforma. Figura 8: Esquema de Arquitetura da Aplicação Assim, o utilizador acede à aplicação no seu browser às interfaces que o servidor de front-end possibilita e este, por sua vez, faz os pedidos de dados necessários ao servidor de back-end, o qual recebe os mesmos da BD. 17 3.2. Requisitos 18 3.2 requisitos Nesta secção é dado início ao estudo e levantamento de todos os requisitos necessários à elaboração da plataforma de Campeonatos referente a esta dissertação. Será também apresentado, para cada um dos utilizadores a seguir mencionados, um diagrama representativo dos requisitos levantados. Por motivos de simplificação foram omitidos os casos de autenticação e término de sessão no sistema nos diagramas. Quanto às funcionalidades que a aplicação deverá ter, podemos dividir estas por Visitantes, Alunos,Professores eAdministradores. Requisitos do Visitante •Um visitante pode consultar a página inicial. • Um visitante pode consultar a informação sobre o próximo campeonato, na página inicial. • Um visitante pode escolher o campeonato, de uma lista de campeonatos, sobre o qual se pretende informar, na página inicial. • Um visitante pode consultar a informação sobre o campeonato atualmente ativo, na página inicial. •Um visitante pode consultar a página de campeonatos já concluídos. •Um visitante pode consultar a página de um campeonato já concluído. • Um visitante pode visualizar as estatísticas gerais de participação de um campeonato já concluído. •Um visitante pode consultar a classificação de um campeonato já concluído. • Um visitante pode definir o jogo, de uma lista de jogos, a consultar na classificação de um campeonato já concluído. • Um visitante pode definir o ano, de uma lista de anos, para um dado jogo, a consultar na classificação de um campeonato já concluído. •Um visitante pode pesquisar por um dado aluno na classificação de um campeonato já concluído. • Um visitante pode pesquisar por uma dada escola na classificação de um campeonato já concluído. •Um visitante pode consultar as estatísticas de um campeonato já concluído. • Um visitante pode definir se pretende consultar por agrupamento ou localidade as estatísticas de um campeonato já concluído. 3.2. Requisitos 19 • Um visitante pode definir se pretende consultar de forma geral ou por jogo as estatísticas de um campeonato já concluído. • Um visitante, caso pretenda consultar por jogo, pode escolher o jogo, de uma lista de jogos, pelo qual pretende consultar as estatísticas de um campeonato já concluído. • Um visitante pode definir o critério, de uma lista de critérios, pelo qual pretende consultar as estatísticas de um campeonato ativo. •Um visitante pode consultar a página do campeonato ativo. •Um visitante pode consultar a página de um campeonato ativo. • Um visitante pode visualizar as estatísticas gerais de participação de um campeonato ativo. •Um visitante pode consultar a classificação de um campeonato ativo. • Um visitante pode definir o jogo, de uma lista de jogos, a consultar na classificação de um campeonato ativo. • Um visitante pode definir o ano, de uma lista de anos, para um dado jogo, a consultar na classificação de um campeonato ativo. • Um visitante pode pesquisar por um dado aluno na classificação de um campeonato ativo. • Um visitante pode pesquisar por uma dada escola na classificação de um campeonato ativo. •Um visitante pode consultar as estatísticas de um campeonato ativo. • Um visitante pode definir se pretende consultar por agrupamento ou localidade as estatísticas de um campeonato ativo. • Um visitante pode definir se pretende consultar de forma geral ou por jogo as estatísticas de um campeonato ativo. • Um visitante, caso pretenda consultar por jogo, pode escolher o jogo, de uma lista de jogos, pelo qual pretende consultar as estatísticas de um campeonato ativo. • Um visitante pode definir o critério, de uma lista de critérios, pelo qual pretende consultar as estatísticas de um campeonato ativo. • Um visitante pode consultar a ajuda de uma página, para qualquer página da aplicação web a que tenha acesso. 3.2. Requisitos 20 Figura 9: Diagrama de Use Cases - Visitante Requisitos do Aluno •Um aluno pode autenticar-se no sistema com as suas credenciais. •Um aluno autenticado pode consultar a página inicial. • Um aluno autenticado pode consultar a informação sobre o próximo campeonato, na página inicial. • Um aluno autenticado pode escolher o campeonato, de uma lista de campeonatos, sobre o qual se pretende informar, na página inicial. • Um aluno autenticado pode consultar a informação sobre o campeonato atualmente ativo, na página inicial. •Um aluno autenticado pode consultar a página de campeonatos já concluídos. •Um aluno autenticado pode consultar a página de um campeonato já concluído. • Um aluno autenticado pode visualizar as estatísticas gerais de participação de um campeonato já concluído. •Um aluno autenticado pode consultar a classificação de um campeonato já concluído. • Um aluno autenticado pode definir o jogo, de uma lista de jogos, a consultar na classificação de um campeonato já concluído. 3.2. Requisitos 21 • Um aluno autenticado pode definir o ano, de uma lista de anos, para um dado jogo, a consultar na classificação de um campeonato já concluído. • Um aluno autenticado pode pesquisar por um dado aluno na classificação de um campeonato já concluído. • Um aluno autenticado pode pesquisar por uma dada escola na classificação de um campeonato já concluído. •Um aluno autenticado pode consultar as estatísticas de um campeonato já concluído. • Um aluno autenticado pode definir se pretende consultar por agrupamento ou localidade as estatísticas de um campeonato já concluído. • Um aluno autenticado pode definir se pretende consultar de forma geral ou por jogo as estatísticas de um campeonato já concluído. • Um aluno autenticado, caso pretenda consultar por jogo, pode escolher o jogo, de uma lista de jogos, pelo qual pretende consultar as estatísticas de um campeonato já concluído. • Um aluno autenticado pode definir o critério, de uma lista de critérios, pelo qual pretende consultar as estatísticas de um campeonato ativo. •Um aluno autenticado pode consultar a página do campeonato ativo. •Um aluno autenticado pode consultar a página de um campeonato ativo. •Um aluno autenticado pode consultar a ajuda para a página de um campeonato ativo. • Um aluno autenticado pode visualizar as estatísticas gerais de participação de um campeonato ativo. •Um aluno autenticado pode consultar a classificação de um campeonato ativo. • Um aluno autenticado pode definir o jogo, de uma lista de jogos, a consultar na classificação de um campeonato ativo. • Um aluno autenticado pode definir o ano, de uma lista de anos, para um dado jogo, a consultar na classificação de um campeonato ativo. • Um aluno autenticado pode pesquisar por um dado aluno na classificação de um campeonato ativo. • Um aluno autenticado pode pesquisar por uma dada escola na classificação de um campeonato ativo. •Um aluno autenticado pode consultar as estatísticas de um campeonato ativo. 3.2. Requisitos 22 • Um aluno autenticado pode definir se pretende consultar por agrupamento ou localidade as estatísticas de um campeonato ativo. • Um aluno autenticado pode definir se pretende consultar de forma geral ou por jogo as estatísticas de um campeonato ativo. • Um aluno autenticado, caso pretenda consultar por jogo, pode escolher o jogo, de uma lista de jogos, pelo qual pretende consultar as estatísticas de um campeonato ativo. • Um aluno autenticado pode definir o critério, de uma lista de critérios, pelo qual pretende consultar as estatísticas de um campeonato ativo. •Um aluno autenticado pode consultar a página de certificados. • Um aluno autenticado pode visualizar a lista de campeonatos em que participou, na página de certificados. • Um aluno autenticado pode descarregar o certificado de um campeonato em que tenha participado, na página de certificados. • Um aluno autenticado pode consultar a ajuda de como utilizar a página, para qualquer página da aplicação web a que tenha acesso. •Um aluno autenticado pode terminar sessão no sistema. Figura 10: Diagrama de Use Cases - Aluno 3.2. Requisitos 23 Requisitos do Professor •Um professor pode autenticar-se no sistema com as suas credenciais. •Um professor autenticado pode consultar a página inicial. • Um professor autenticado pode consultar a informação sobre o próximo campeonato, na página inicial. • Um professor autenticado pode escolher o campeonato, de uma lista de campeonatos, sobre o qual se pretende informar, na página inicial. • Um professor autenticado pode consultar a informação sobre o campeonato atualmente ativo, na página inicial. •Um professor autenticado pode consultar a página de campeonatos já concluídos. •Um professor autenticado pode consultar a página de um campeonato já concluído. • Um professor autenticado pode visualizar as estatísticas gerais de participação de um campeonato já concluído. • Um professor autenticado pode consultar a classificação de um campeonato já concluído. • Um professor autenticado, se tiver turmas que tenham participado, pode definir se pretende consultar por turma ou por jogo a classificação de um campeonato já concluído. • Um professor autenticado pode definir a turma, de uma lista de turmas, a consultar na classificação de um campeonato já concluído. • Um professor autenticado pode descarregar um ficheiro com a classificação e estatísticas de participação, para uma turma selecionada, de um campeonato já concluído. • Um professor autenticado pode definir o jogo, de uma lista de jogos, a consultar na classificação de um campeonato já concluído. • Um professor autenticado pode definir o ano, de uma lista de anos, para um dado jogo, a consultar na classificação de um campeonato já concluído. • Um professor autenticado pode pesquisar por um dado aluno na classificação de um campeonato já concluído. • Um professor autenticado pode pesquisar por uma dada escola na classificação de um campeonato já concluído. • Um professor autenticado pode consultar as estatísticas de um campeonato já concluído. • Um professor autenticado pode definir se pretende consultar por agrupamento ou localidade as estatísticas de um campeonato já concluído. 3.2. Requisitos 24 • Um professor autenticado pode definir se pretende consultar de forma geral ou por jogo as estatísticas de um campeonato já concluído. • Um professor autenticado, caso pretenda consultar por jogo, pode escolher o jogo, de uma lista de jogos, pelo qual pretende consultar as estatísticas de um campeonato já concluído. • Um professor autenticado pode definir o critério, de uma lista de critérios, pelo qual pretende consultar as estatísticas de um campeonato ativo. •Um professor autenticado pode consultar a página do campeonato ativo. •Um professor autenticado pode consultar a página de um campeonato ativo. • Um professor autenticado pode consultar a ajuda para a página de um campeonato ativo. • Um professor autenticado pode visualizar as estatísticas gerais de participação de um campeonato ativo. •Um professor autenticado pode consultar a classificação de um campeonato ativo. • Um professor autenticado, se tiver turmas que tenham participado, pode definir se pretende consultar por turma ou por jogo a classificação de um campeonato ativo. • Um professor autenticado pode definir a turma, de uma lista de turmas, a consultar na classificação de um campeonato ativo. • Um professor autenticado pode descarregar um ficheiro com a classificação e estatísticas de participação, para uma turma selecionada, de um campeonato ativo. • Um professor autenticado pode definir o jogo, de uma lista de jogos, a consultar na classificação de um campeonato ativo. • Um professor autenticado pode definir o ano, de uma lista de anos, para um dado jogo, a consultar na classificação de um campeonato ativo. • Um professor autenticado pode pesquisar por um dado aluno na classificação de um campeonato ativo. • Um professor autenticado pode pesquisar por uma dada escola na classificação de um campeonato ativo. •Um professor autenticado pode consultar as estatísticas de um campeonato ativo. • Um professor autenticado pode definir se pretende consultar por agrupamento ou localidade as estatísticas de um campeonato ativo. 3.2. Requisitos 25 • Um professor autenticado pode definir se pretende consultar de forma geral ou por jogo as estatísticas de um campeonato ativo. • Um professor autenticado, caso pretenda consultar por jogo, pode escolher o jogo, de uma lista de jogos, pelo qual pretende consultar as estatísticas de um campeonato ativo. • Um professor autenticado pode definir o critério, de uma lista de critérios, pelo qual pretende consultar as estatísticas de um campeonato ativo. •Um professor autenticado pode consultar a página de certificados. • Um professor autenticado pode visualizar a lista de campeonatos em que as suas turmas participaram, na página de certificados. • Um professor autenticado, para um dado campeonato, pode definir a turma, de uma lista de turmas, e visualizar uma lista dos alunos que participaram, na página de certificados • Um professor autenticado pode descarregar o certificado de um dado aluno de um campeonato em que tenha participado, na página de certificados. • Um professor autenticado pode consultar a ajuda de como utilizar a página, para qualquer página da aplicação web a que tenha acesso. •Um professor autenticado pode terminar sessão no sistema. Figura 11: Diagrama de Use Cases - Professor 3.2. Requisitos 26 Requisitos do Administrador •Um administrador pode autenticar-se no sistema com as suas credenciais. •Um administrador autenticado pode consultar a página inicial. • Um administrador autenticado pode consultar a informação sobre o próximo campeonato, na página inicial. • Um administrador autenticado pode escolher o campeonato, de uma lista de campeonatos, sobre o qual se pretende informar, na página inicial. • Um administrador autenticado pode consultar a informação sobre o campeonato atualmente ativo, na página inicial. •Um administrador autenticado pode consultar a página de campeonatos já concluídos. • Um administrador autenticado pode consultar a página de um campeonato já concluído. •Um administrador autenticado pode visualizar as estatísticas gerais de participação de um campeonato já concluído. • Um administrador autenticado pode consultar a classificação de um campeonato já concluído. • Um administrador autenticado pode definir o jogo, de uma lista de jogos, a consultar na classificação de um campeonato já concluído. • Um administrador autenticado pode definir o ano, de uma lista de anos, para um dado jogo, a consultar na classificação de um campeonato já concluído. • Um administrador autenticado pode pesquisar por um dado aluno na classificação de um campeonato já concluído. • Um administrador autenticado pode pesquisar por uma dada escola na classificação de um campeonato já concluído. • Um administrador autenticado pode consultar as estatísticas de um campeonato já concluído. • Um administrador autenticado pode definir se pretende consultar por agrupamento ou localidade as estatísticas de um campeonato já concluído. • Um administrador autenticado pode definir se pretende consultar de forma geral ou por jogo as estatísticas de um campeonato já concluído. • Um administrador autenticado, caso pretenda consultar por jogo, pode escolher o jogo, de uma lista de jogos, pelo qual pretende consultar as estatísticas de um campeonato já concluído. 3.4. Modelação das Interfaces 33 •Página de Login Figura 15: Interface de Login •Homepage Figura 16: Interface da Homepage 3.4. Modelação das Interfaces 34 •Página do Campeonato Ativo Figura 17: Interface do Campeonato Ativo •Página dos Campeonatos Anteriores Figura 18: Interface dos Campeonatos Anteriores 3.4. Modelação das Interfaces 35 •Página de Consulta de um Campeonato Específico Figura 19: Interface de um Campeonato Específico •Página de Gestão dos Jogos dos Campeonatos Figura 20: Interface da Gestão de Jogos dos Campeonatos 3.4. Modelação das Interfaces 36 •Página de Certificados Figura 21: Interface dos Certificados •Sidebar Figura 22: Interface da Sidebar 4 DESENVOLVIMENTO DA API Considerando que os requisitos se encontram neste momento descritos na sua totalidade e as ferramentas definidas, é possível avançar agora para a fase de desenvolvimento. Neste caso, no presente capítulo, iremos abordar o desenvolvimento da API. Serão abordados os novos modelos a serem adicionados à base de dados, bem como aqueles que já se encontravam presentes, e respetivos atributos de cada um. Além disso serão ainda explicadas todas as rotas desenvolvidas e o seu propósito, bem como a forma como as mesmas estão protegidas. 4.1 inicialização Como mencionado no capítulo 2, iremos fazer uso do Strapi e respetivas ferramentas para desenvolver a API. Com isto, poderemos construir a nova base de dados, todas as rotas necessárias para o funcionamento da aplicação de Campeonatos bem como gerir a autenticação no sistema. Com a ajuda de um plugin do Strapi, o Content Type Builder, conseguimos modelar por completo a estrutura de dados da API. Este plugin permite criar coleções, equivalentes a tabelas na BD, e para cada uma das mesmas especificar os seus atributos. 4.1.1 Novos Modelos Referenciado no capítulo 3, após análise dos requisitos da aplicação surgiu a necessidade da criação de uma nova BD e, consequentemente, novos modelos para podermos atender a esses mesmos requisitos. Assim, na presente secção iremos abordar a sua criação no Strapi. 37 4.1. Inicialização 38 CertificadosInfo Figura 23: Coleção CertificadosInfo Target Figura 24: Coleção Target De notar o atributo icon que, apesar de não estar presente na tabela da BD está presente na coleção do Strapi uma vez que o ficheiro é armazenado de forma local, sendo só armazenada a informação sobre o mesmo numa outra tabela. 4.1. Inicialização 39 Jogo Figura 25: Coleção Jogo Como podemos observar em cada uma das imagens acima, todas as coleções apresentam os atributos mencionados previamente, sendo possível comparar o mesmo com a figura 13. 4.1.2 Modelos Existentes Com a modelação da nova BD terminada, a mesma passará a funcionar em conjunto com as restantes da Plataforma Hypatiamat (PLH). De forma a completar a nossa API resta-nos acrescentar os modelos das outras BD que são essenciais para a aplicação em desenvolvimento. BD Teste de Conhecimentos •Campeonato Figura 26: Coleção Campeonato 4.1. Inicialização 40 •CampeonatoID Figura 27: Coleção CampeonatoID De notar que, em relação a versões anteriores da BD da Plataforma Hypatiamat (PLH), a tabela campeonatosID, e respetiva coleção (no Strapi), passam a ter um novo atributo: has _ target. Este atributo permite distinguir os campeonatos previamente inseridos na bd dos novos campeonatos. Com os requisitos levantados para a presente dissertação, da BD mencionada, estas foram as coleções consideradas como necessárias para o desenvolvimento da API. 4.1. Inicialização 41 BD Aplicações •Turma Figura 28: Coleção Turma •Aluno Figura 29: Coleção Aluno 4.1. Inicialização 42 •Escola Figura 30: Coleção Escola •Professor Figura 31: Coleção Professor Tal como acontece com a BD anterior, estas foram as coleções consideradas como necessárias para o desenvolvimento da API da aplicação. 5 DESENVOLVIMENTO DA INTERFACE No presente capítulo iremos abordar as interfaces da aplicação com as quais o utilizador irá interagir, permitindo ao mesmo visualizar os diferentes dados respetivos a cada uma delas, cada uma com o seu propósito. Com isto em mente, será de seguida apresentada e explicada cada uma das principais interfaces, fazendo notar os pequenos detalhes que promovem uma melhor experiência de utilização ao utilizador. 5.1 inicialização Aquando do início do projeto, ao configurar o Vue foram definidas algumas ferramentas a incluir no mesmo, nomeadamente: Router,VueX eVuetify. Como o Vue permite a criação de SPAs [ spa ], com a existência do Router [ 6 ] podemos definir diferentes rotas para diferentes vistas para a aplicação. Em termos práticos a interface é dividida em duas componentes principais: views e componentes. Cada view corresponde a uma rota e os componentes são partes da interface que podem ser reutilizadas e integradas nas diferentes vistas. Para a aplicação em desenvolvimento foram definidas as seguintes vistas e respetivas rotas: •Home - Vista inicial de qualquer utilizador; •CampeonatoAtivo - Vista do Campeonato que se encontra a decorrer à data; •Campeonatos - Vista de todos os Campeonatos concluídos; •CampeonatoEspecifico - Vista de um Campeonato concluído; •Certificados - Vista dos certificados de um utilizador; • Jogos - Vista de atribuição, por parte do administrador, de targets a um Campeonato. As rotas referentes à Home, CampeonatoAtivo, Campeonatos e CampeonatoEspecifico são comuns a qualquer utilizador, inclusive o Visitante. No entanto, existem algumas que devem apresentar uma vista diferente ou mesmo ser restritas dependendo do tipo de utilizador que acede à aplicação. 49 5.2. Interfaces 50 No caso do Administrador, por exemplo, a página de Jogos é destinada somente a ele e a página de Certificados apresenta uma vista diferente dos outros utilizadores autenticados. Com isto em mente fazemos uso da informação proveniente do token do JWT para fazer esta distinção. Quer para o Aluno quer para o Professor a página de Certificados apresenta uma listagem de campeonatos. No caso do Aluno aqueles em que participou, no caso do Professor aqueles em que as turmas pelas quais é responsável participaram. Assim a vista de cada um também vai ser diferente. Com o VueX [ vue ] conseguimos facilmente armazenar esta informação ao longo da sessão de um utilizador. Esta ferramenta, através da sua store permite uma gestão em tempo real do estado, possibilita proteger e distinguir as rotas necessárias para cada utilizador. Para tal fazemos uso do tipo e valor premium de cada um. Já o Vuetify [ 4 ] foi utilizado com o intuito de oferecer uma experiência e utilização da aplicação mais intuitiva e imersiva ao utilizador. 5.2 interfaces Na presente secção iremos apresentar as diferentes vistas e componentes criados para a interface da aplicação, sendo as mesmas repartidas entre comuns e cada tipo de utilizador. Desta forma poderemos apresentar e explicar as várias diferenças para cada utilizador autenticado e que são importantes de mencionar. De notar que toda a interface foi desenvolvida e adaptada de forma a que o utilizador tenha a mesma experiência quer no browser quer em mobile. 5.2.1 Interfaces Comuns Login Figura 34: Interface - Login 5.2. Interfaces 51 Homepage Figura 35: Interface - Homepage (Próximos Campeonatos) Figura 36: Interface - Homepage (Campeonato Ativo) Na vista da Homepage qualquer utilizador pode visualizar os próximos campeonatos a acontecer ou o campeonato que se encontra a decorrer podendo consultar a informação relativa ao mesmo e verificar quais os jogos para o mesmo. 5.2. Interfaces 52 Campeonatos Figura 37: Interface - Campeonatos Na vista dos Campeonatos qualquer utilizador pode visualizar uma listagem de todos os campeonatos já concluídos. A partir desta vista pode aceder à página de um campeonato em específico interagindo com o cartão do mesmo. Campeonato Específico Figura 38: Interface - Campeonato Específico A partir da figura 38 podemos verificar que na página de um Campeonato Específico o utilizador pode consultar um conjunto de informações a partir do botão de ajuda, bem como algumas estatísticas gerais sobre o campeonato. Além disso pode interagir com dois botões, 5.2. Interfaces 53 Estatísticas eClassificação, que permitem visualizar duas componentes que serão apresentadas a seguir. Figura 39: Interface - Campeonato Específico (Estatísticas) Na figura acima é possível visualizar as estatísticas de um determinado campeonato. O utilizador tem ao seu dispor um conjunto de filtros, evidenciados mais à frente, que permitem escolher os dados a visualizar. Figura 40: Interface - Campeonato Específico (Classificação) Por fim, na figura 40 podemos ver a tabela de classificação de um dado campeonato. O utilizador pode escolher, de entre uma lista, o jogo que pretende consultar bem como um ano de escolaridade para o qual o mesmo jogo se destina. Pode fazer isto através de filtros que, tal como os das estatísticas, serão evidenciados mais a frente. 5.2. Interfaces 54 Campeonato Ativo A página de Campeonato Ativo é em tudo semelhante à de um Campeonato Específico sendo a única diferença a possibilidade de qualquer utilizador atualizar em tempo real a classificação do campeonato, visível na figura 42. Figura 41: Interface - Campeonato Ativo Figura 42: Interface - Campeonato Ativo (Classificação) 5.2. Interfaces 55 Figura 43: Interface - Campeonato Ativo (Estatísticas) Filtros Como mencionado previamente, existem filtros na página de consulta dos campeonatos, quer ativo quer específico, que permitem alterar os dados a visualizar nas tabelas de estatísticas e de classificação. Figura 44: Interface - Filtros Classificação A figura 44 evidencia o que foi explicado anteriormente. A partir de uma lista de jogos o utilizador pode consultar o pretendido e, posteriormente, escolher um ano de entre aqueles que estão disponíveis para esse mesmo jogo. 5.2. Interfaces 56 Figura 45: Interface - Filtros Estatísticas (Gerais) Figura 46: Interface - Filtros Estatísticas (Por Jogo) Por fim, a partir das figuras 45 e46 é possível compreender melhor os filtros disponíveis para as estatísticas. O utilizador pode escolher ver as estatísticas de um agrupamento ou de uma localidade. Pode ainda escolher ver as estatísticas gerais, visível na figura 45, ou por jogo, visível na figura 46. Se escolher filtrar por jogo, pode definir o jogo a observar. Comum aos dois são os critérios finais de visualização. Um utilizador pode escolher ver as estatísticas relativas ao número total de jogos praticados, número total de alunos participantes ou pontuação média. 5.2. Interfaces 57 Barra de Navegação Figura 47: Interface - Barra de Navegação A barra de navegação apresentada é comum a todos os utilizadores. No entanto existem duas exceções: para o Visitante e para o Administrador. No caso do Visitante, apesar de ser visível a opção de consultar a página dos Certificados, não tem acesso à mesma. Já no caso do Administrador tem uma opção adicional que será visível mais à frente. 5.2.2 Interfaces do Aluno Certificados Figura 48: Interface - Certificados Como mencionado previamente, e visível na figura 48, um aluno pode visualizar todos os campeonatos em que participou e, na mesma página, descarregar o certificado correspondente. 5.2. Interfaces 58 5.2.3 Interfaces do Professor Campeonato Específico Figura 49: Interface - Campeonato Específico (Professor) Na vista do Campeonato Específico, o Professor tem uma componente adicional que lhe permite descarregar um documento com a classificação dos alunos de uma das turmas, sendo igual no restante. Filtros Figura 50: Interface - Filtros Professor (Classificação) Em adição aos filtros já disponibilizados ao visualizar a tabela de classificação num campeonato, um Professor pode decidir filtrar ou por uma das suas turmas, caso tenha alguma a participar no campeonato, ou por jogo. Visível na figura 50, tal como acontece com a escolha de jogo, o Professor pode escolher, de entre uma lista, a turma que pretende consultar. 6.4. Testes 65 6.4.1 Feedback Com os testes realizados foi possível obter alguns testemunhos quer de utilizadores da Plataforma Hypatiamat quer da equipa responsável pela mesma, os quais serão apresentados de seguida. Por questões de privacidade, será mantido o anonimato dos testemunhos. Responsáveis pela Associação Hypatiamat "Esta nova versão que gere os campeonatos veio, de alguma forma, revolucionar a forma como esta componente do Projeto Hypatiamat estava implementada. Trouxe novas funcionalidades e a forma como foi construída veio otimizar todos os procedimentos da versão anterior. Por exemplo, na versão anterior, tínhamos de esperar que os campeonatos terminassem para colocar os certificados disponíveis, agora, ficam disponíveis automaticamente. O feedback que temos tidos, tanto de professores como de alunos, mostra a relevância desta nova versão da página que gere os campeonatos." Professor X - Agrupamento de Escolas de Almodôvar "(...) É exatamente sobre a interface atualmente disponível para aceder aos Campeonatos Hypatiamat, que se me apraz tecer algumas considerações que gostaria de partilhar. (...) Mais uma vez, a equipa de mentores da plataforma assessorada por individualidade técnica bem competente e qualificada, surpreendeu tudo e todos, da noite para o dia com o novo recanto reservado para o suprassumo das “orquestrações instrumentais” dos artefactos digitais, que é a zona dos ”Campeonatos”. No formato anterior, tratava-se de uma zona de acesso aos vários Jogos Sérios que estavam a ser praticados em cada momento competitivo, Nacional ou Regional/Comunitário de acordo com a categoria de cada concorrente. Apresentava o Ranking das pontuações que se iam transmutando ao longo de cada período competitivo e simultaneamente a zona de Resultados Finais, onde podiam ser consultados os Rankings já definitivos, atingidos em momentos anteriores. (...) No formato atual, a área dos Campeonatos, (...) acrescenta mais informações e hiperligações rápidas a outros pontos de interesse e inclusivamente pontos de recolha e impressão de documentos, que anteriormente não poderiam ser feitos no mesmo interface, mas sim, obrigando a um redirecionamento para o Backoffice do professor ou aluno. O que implicava dois a 3 passos mais, na busca de informação. A principal virtude da ferramenta Campeonatos atual, é apresentar-se não só como um espaço de acesso e consulta dos resultados de jogos, mas como um espaço que pelo seu layout simples, objetivo, bem organizado e intuitivo, bem como pela escolha criteriosa das palavraschave de hiperligação a interações instintivas. ... Compromete e responsabiliza de imediato o utilizador (seja aluno, EE, ou professor) com muito mais que uma simples participação ou pesquisa. 6.4. Testes 66 Em primeiro lugar, logo na “Página Inicial”, são muito importantes os esclarecimentos dados quando clicamos na zona de “mostrar ajuda” (...). De seguida, e ainda no menu inicial, são publicitados índices estatísticos atualizados ao segundo, que apelam de imediato a uma série de desafios e compromissos que ultrapassam o mero dever ou interesse de participação individual. (...) Em terceiro lugar, registo a escolha feliz da expressão “Campeonato Ativo”, que (...) envolve, inclui e implica o utilizador não como observador, mas como participante ativo, numa ação inevitável seguinte, após ter clicado na mesma. Ou seja, o aluno é impelido a ir verificar o seu posicionamento no ranking e voltar ao jogo para tentar subir lugares no mesmo... O professor, será por sua vez também impelido a verificar qual a posição dos alunos da sua turma na categoria ou categorias onde competem. .. (...) Relativamente ao separador “Campeonatos”, que veio substituir o anterior tópico de “Resultados Finais”, manteve todas as qualidades que já trazia da versão anterior, acrescida de que no mesmo local, o professor tem acesso aos resultados gerais e da sua turma em cada categoria, acesso que antes só teria se fosse consultar o seu Backoffice. Finalmente, a inovação do item “Certificados”, cujo acesso se faz na primeira linha de comandos, veio facilitar a vida aos professores, que antes tinham de ir ao seu Backoffice, dar vários passos para os encontrarem, mas também aos alunos ou Encarregados de Educação que, não raras vezes, por esquecimento ou instruções superiores sobre necessárias e angustiantes poupanças materiais, nunca receberam diplomas de participação. Ambos os utilizadores têm acesso aos certificados de forma simples, clara e direta, podendo importá-lo e imprimi-lo em segundos.” Encontrando-se agora num ambiente de produção, tendo sido realizados os diversos testes e obtido os testemunhos de diversos utilizadores, foi possível serem feitas correções, tal como relatado, que visaram melhorar a qualidade da aplicação. Resta agora concluir sobre o trabalho produzido bem como possível trabalho futuro para o contínuo crescimento da nova aplicação Campeonatos da Plataforma Hypatiamat. 7 CONCLUS¯ OES E TRABALHO FUTURO Finda a escrita da descrição do trabalho, resta agora recordar e refletir sobre o mesmo de forma a providenciar algumas conclusões e aspetos relevantes para o futuro. A presente dissertação é iniciada com uma apresentação e descrição do projeto Hypatiamat e os motivos para o desenvolvimento da nova aplicação. Além disso são mencionados os objetivos e os passos necessários a seguir para que esse propósito seja concluído com sucesso. De seguida é feita uma análise ao panorama geral quer da Plataforma Hypatiamat, quer das ferramentas, com os mesmos objetivos, disponíveis para os utilizadores. Em mais detalhe sobre a Plataforma Hypatiamat, foi feito um estudo do estado atual da plataforma, mais especificamente da aplicação Campeonatos que apresentava. Foram ainda apresentadas e descritas as tecnologias que passariam a ser utilizadas para a nova aplicação. Com a abordagem inicial e o estudo da Plataforma Hypatiamat feitos, no capítulo 3, estruturou-se todo o novo sistema da nova aplicação Campeonatos. É neste capítulo que é apresentada a nova estrutura aplicacional, revelando as largas diferenças comparativamente à estrutura antiga. Com o levantamento de requisitos dividido pelos diferentes tipos de utilizadores, começamos a ter uma ideia daquilo que é pretendido com a nova aplicação e algumas das suas implicações como, por exemplo, a necessidade de novos modelos de dados. Estes surgem com o intuito de acrescer novas funcionalidades à aplicação Campeonatos, fomentando a evolução e utilidade da mesma. Como término, é apresentado um modelo inicial das interfaces a desenvolver, aumentando ainda mais a noção sobre as possibilidades deste projeto. Dado que a informação sobre a nova aplicação se encontrava recolhida, trabalhada e estruturada chegou o momento de desenvolvimento da mesma. Assim, nos capítulos 4e5, é descrito todo o trabalho realizado para levar este projeto a cabo. Primeiramente é abordado o desenvolvimento da API. Aqui são descritas todas as rotas criadas, bem como a sua proteção, e a autenticação dos utilizadores no sistema. Por sua vez, no tópico que cobre o desenvolvimento da interface, são apresentadas as interfaces finais divididas em dois conjuntos principais: as comuns e as específicas a cada tipo de utilizador. Além de serem apresentadas as vistas disponíveis na aplicação, é ainda feita uma breve descrição sobre cada uma de forma a explicar pequenos detalhes das mesmas. 67 68 No capítulo 6descreve-se todo o processo de lançamento da aplicação numa versão estável e pronta a testar para produção. Nesta secção mencionam-se as ferramentas utilizadas para tal bem como o que deve ser feito para cada um dos serviços, back-end efront-end, separadamente. Por fim, no presente capítulo, é não só recapitulado todo o trabalho desenvolvido até ao momento, como também serão expressas, de seguida, considerações finais e comentários sobre o mesmo. Acrescentando a isso, estarão também presentes algumas nuances relativamente ao futuro do projeto. Terminado o presente projeto de mestrado, é correto afirmar que os objetivos propostos foram cumpridos: analisar, especificar e construir um componente de gestão e consulta de Campeonatos, inserido na Plataforma Hypatiamat. Uma experiência e um projeto sem dúvida exigentes mas que permitiram um crescimento na área de desenvolvimento de software, mais especificamente web development. Permitiu ainda alargar o arsenal de ferramentas na área, grande parte das quais me eram desconhecidas. Mais especificamente, o estudo e uso do Strapi [ 5 ] e do Vue [ 14 ] para o desenvolvimento da API e interfaces, respetivamente, revelou-se de grande importância não só devido ao incremento de conhecimento que proporcionou, mas também, como todo o projeto, como confirmação da área de maior interesse a nível de desenvolvimento de software. Ao longo do processo de desenvolvimento, e mantendo um contacto próximo com os responsáveis pela Associação Hypatiamat, fomos capazes de ir além dos requisitos inicialmente levantados, acrescentado funcionalidades que se provaram úteis não só para a nova aplicação Campeonatos, mas também para a experiência dos utilizadores dentro da mesma. Com uma aplicação neste momento disponível e funcional em toda a sua capacidade e depois do feedback obtido por parte dos diversos utilizadores, é possível concluir que o presente projeto é um sucesso conseguido. Não obstante, existe sempre espaço para melhoria da aplicação a nível global. Assim, como trabalho futuro, e após debate com os responsáveis pela Associação Hypatiamat, seria do maior interesse de todos os envolvidos permitir aos professores a criação por vontade própria de Campeonatos. Aliado ao intuito da Plataforma Hypatiamat na área da educação, uma funcionalidade como esta permitiria aos professores incentivar ainda mais os seus alunos na aprendizagem da Matemática, conjugando as tecnologias da atualidade com a possibilidade de diversão que o conteúdo aplicacional que o Hypatiamat tem para oferecer. Como forma de conclusão, a nova aplicação de Campeonatos da Plataforma Hypatiamat vem comprovar e exponenciar ainda mais o crescimento da mesma, abrindo portas a que novos conteúdos sejam dinamizados e que cada vez mais utilizadores façam uso desta plataforma. BIBLIOGRAFIA Matematica.pt. https://matematica.pt. Acedido a 2023-05-22. Vue - single-page application (spa). https://vuejs.org/guide/extras/ ways-of-using-vue.html#single-page-application-spa. Acedido a 2023-05-29. Vuex - what is vuex? https://vuex.vuejs.org. Acedido a 2023-05-23. (2014). Vuetify - why you should be using vuetify. https://vuetifyjs.com/en/ introduction/why-vuetify/. Acedido a 2023-05-23. (2015). Strapi - open source node.js headless cms. https://strapi.io . Acedido a 2023-01-13. (2020). A close look at vue router. https://vuejsdevelopers.com/2020/01/27/ closer-look-at-vue-router/. Acedido a 2023-05-29. (2021). Auth0 (2023). Introduction to json web token. https://jwt.io/introduction . Acedido a 2023-05-23. Hypatiamat (2017). Hypatiamat. https://www.hypatiamat.com/projeto.php . Acedido a 2023-01-13. IBM. O que é uma pilha lamp ? https://www.ibm.com/topics/lamp-stack . Acedido a 2023-01-13. Khan, S. (2006). Khan academy. https://www.khanacademy.org. Acedido a 2023-05-22. Martins, F., Pinto, R., and Costa, C. (2022). Artefactos Digitais, Aprendizagens e Conhecimento Didático - Contributos para promover a compreensão da matemática, chapter 1 - Projeto Hypatiamat, artefactos digitais para ensinar e aprender matemática. Instituto Politécnico de Coimbra - Escola Superior de Educação de Coimbra. Vieira, J. A. C. (2021). Hypatiamat : Especificação e implementação de um componente para gestão de trabalhos de casa. Master’s thesis, Universidade do Minho, Braga, Portugal. MSc dissertation - Acedido a 2023-06-08. You, E. (2014). Vue.js. https://vuejs.org. Acedido a 2023-01-13. 69