UNIVERSIDADE FEDERAL DE SANTA CATARINA
CAMPUS ARARANGUÁ OU CENTRO DE CIÊNCIA, TECNOLOGIA E SAÚDE CURSO DE GRADUAÇÃO EM TECNOLOGIA DA INFORMAÇÃO E
COMUNICAÇÃO
Jonathan da Silva Maciel de Estefani
DESENVOLVIMENTO DE UM PROTÓTIPO DE UM SISTEMA WEB PARA GESTÃO DE TRABALHOS ACADÊMICOS
Araranguá 2019
Ficha de identificação da obra elaborada pelo autor,
através do Programa de Geração Automática da Biblioteca Universitária da UFSC.
DE ESTEFANI, JONATHAN DA SILVA
DESENVOLVIMENTO DE UM PROTÓTIPO DE UM SISTEMA \\ WEB PARA GESTÃO DE TRABALHOS ACADÊMICOS / JONATHAN DA SILVA DE
ESTEFANI ; orientador, Dr. Vilson Gruber, 2019. 144 p.
Trabalho de Conclusão de Curso (graduação) - Universidade Federal de Santa Catarina, Campus Araranguá,
Graduação em , Araranguá, 2019. Inclui referências.
1. . 2. Gestão de Projetos. 3. Framework Angular. 4. Linguagem TypeScript. 5. Integrando APIs. I. Gruber, Dr.
Vilson. II. Universidade Federal de Santa Catarina. Graduação em . III. Título.
Este trabalho dedico aos meus amigos e a todos que me apoiaram me incentivando a sempre continuar, em especial aos meus pais.
AGRADECIMENTOS
Agradeço em primeiro lugar a Deus por ter me dado a oportunidade de colocar pessoas certas do meu lado para conquistar os meus objetivos.
Agradeço aos meus pais e irmãs que sempre me apoiaram para seguir em frente e nunca desistir.
Ao meu orientador Vilson Gruber por ter acreditado em mim desde o início e me deu o apoio que precisava.
Professores que me ensinaram muito e passaram uma grande bagagem de co- nhecimento para ajudar a construir minha carreira, e a Universidade Federal de Santa Catarina, Campus Araranguá, por ter escolhido minha cidade para ser a precursora da região sul de Santa Catarina.
RESUMO
Existem ferramentas gratuitas para gestão de projetos no mercado, possuem diversos recursos que auxiliam na gestão de projetos, porém voltadas para usos genéricos. Ao iniciar a disciplina de projeto integrador II para elaboração do trabalho de conclusão de curso, o discente muitas vezes fica sem saber por onde começar e como fazer uma gestão mais eficaz do seu projeto acadêmico. Existe documentos de template que auxiliam na elaboração da escrita do TCC para o discente, porém esses templates não auxiliam na gestão do cronograma, comunicação e do processo de desenvolvimento. Por outro lado o docente possui vários trabalhos para orientar e fazer a gestão desses projetos, a necessidade é que hoje existem muitas ferramentas de gestão de proje- tos no mercado, mas não especializadas para gestão de trabalhos acadêmicos, com isso o docente sente a necessidade de uma ferramenta que centralize todas essas informações para ajudar na gestão desses trabalhos e facilitar a orientação dos seus discentes, podendo usar ela inclusive para se comunicar com seus discentes, sem a necessidade de definir vários meios de comunicação. Através disso foi possível iden- tificar que um sistema web que centralize todos os projetos acadêmicos e facilite a comunicação com seus discentes, iria resolver muitos desses problemas na gestão desses projetos, e centralizar toda a comunicação em uma única ferramenta com seus discentes, permitindo todos os envolvidos acompanharem o andamento na gestão do cronograma do projeto. Foram pesquisadas algumas tecnologias no mercado para ten- tar resolver esses problemas, e após análise optou-se pelo material design da google como padrão de layout e estilização de páginas web, framework materializecss que implementa os conceitos do material design, framework angular para a arquitetura de projeto e implementação das regras de negócio e todas as telas, a arquitetura REST para comunicar-se com a API do backend, e mattermost como ferramenta de comuni- cação entre todos os envolvidos no projeto. Foi implementado o protótipo de sistema web usando as tecnologias pesquisadas, configurado a ferramenta de comunicação afim de tentar resolver o problema de comunicação entre os envolvidos no projeto, todas as telas do protótipo foram implementadas e sendo responsivas usando o fra- mework materializecss e disponibilizado em um servidor na amazon para teste entre os envolvidos nesse protótipo. Com a implementação desse protótipo, ainda assim é pos- sível identificar a necessidade de algumas melhorias que podem ser feitas, colocando mais recursos para o docente e discente, como relatórios sobre o acompanhamento, e
uma comunicação integrada dentro da ferramenta, para resolver algumas questões de usabilidade para os usuários, e um aplicativo para integrar na ferramenta de gestão de trabalhos acadêmicos.
Palavras-chave: Trabalhos acadêmicos, Angular, TypeScript, Protótipo de Sistema Web.
ABSTRACT
There are free project management tools on the market, they have several features that help in project management, but they are aimed at generic uses. By starting the integrative project discipline II for course completion work, the student is often unsure where to start and how to manage their academic project more effectively. There are template documents that help in writing the writing of the TCC for the student, but these templates do not help in managing the schedule, communication and the development process. On the other hand the teacher has several works to guide and manage these projects, the need is that today there are many project management tools on the market, but not specialized for academic work management, so the teacher feels the need for a It is a tool that centralizes all this information to help manage these assignments and make it easier for your students to guide them. They can even use it to communicate with their students, without having to define various means of communication. Through this it was possible to identify that a web system that centralizes all academic projects and facilitates communication with their students, would solve many of these problems in the management of these projects, and centralize all communication in a single tool with their students, allowing all involved. track progress in project schedule management. Some technologies in the market were researched to try to solve these problems, and after analysis we opted for google material design as standard for web page layout and stylization, materializecss framework that implements material design concepts, angular framework for architecture. design and implementation of business rules and all screens, the REST architecture for communicating with the backend API, and mattermost as a communication tool between everyone involved in the project. The web system prototype was implemented using the researched technologies, configured the communication tool in order to try to solve the communication problem between the involved in the project, all prototype screens were implemented and being responsive using the materializecss framework and made available on a server. at amazon for testing among those involved in this prototype. With the implementation of this prototype, it is still possible to identify the need for some improvements that can be made, putting more resources for the teacher and student, such as monitoring reports, and integrated communication within the tool, to solve some usability issues. for users, and an app to integrate into the academic work management tool.
LISTA DE FIGURAS
Figura 1 - Arquitetura client-server ... 23
Figura 2 - Exemplo de camadas HTML, CSS, Javascript ... 25
Figura 3 - (ROA) vs (SOA). ... 26
Figura 4 - TypeScript VS Javascript ... 28
Figura 5 - TypeScript vs ES5 ... 28
Figura 6 - Arquitetura MVC usando Angular ... 30
Figura 7 - SPA vs MPA ... 30
Figura 8 - Exemplo de quadro kanban ... 34
Figura 9 - Tela de acesso do mattermost ... 41
Figura 10 - Tela principal do mattermost ... 41
Figura 11 - Tela de canais do mattermost ... 42
Figura 12 - Tela de acesso do sistema ... 46
Figura 13 - Tela de cadastro do usuário ... 46
Figura 14 - Tela de esquecimento de senha ... 47
Figura 15 - Exemplo de e-mail recebido para recuperação de senha ... 47
Figura 16 - Tela de recuperação para a nova senha ... 48
Figura 17 - Tela de projetos cadastrados e vinculados ... 48
Figura 18 - Menu de opções do projeto ... 49
Figura 19 - Filtro por status ... 49
Figura 20 - Tela de cadastro de projeto ... 50
Figura 21 - Envolvido(s) no projeto ... 51
Figura 22 - Novo envolvido ... 51
Figura 23 - Cadastro de template ... 52
Figura 24 - Quadro do Kanban ... 53
Figura 25 - Cronograma ... 54
Figura 26 - Modal de cadastro de atividade ... 55
Figura 27 - Modal de cadastro de tarefa ... 56
Figura 28 - 1o Parte - Serviço de autenticação do usuário ... 65
Figura 29 - 2o Parte - Serviço de autenticação do usuário ... 66
Figura 30 - 1o Parte - Serviço de autenticação do usuário ... 66
Figura 32 - 1o Parte - Classe do cadastro de projeto ... 68
Figura 33 - 2o Parte - Classe do cadastro de projeto ... 69
Figura 34 - 3o Parte - Classe do cadastro de projeto ... 70
Figura 35 - 4o Parte - Classe do cadastro de projeto ... 71
Figura 36 - 5o Parte - Classe do cadastro de projeto ... 72
Figura 37 - 1o Parte - HTML do cadastro de projeto ... 73
Figura 38 - 2o Parte - HTML do cadastro de projeto ... 74
Figura 39 - 3o Parte - HTML do cadastro de projeto ... 75
Figura 40 - 4o Parte - HTML do cadastro de projeto ... 76
Figura 41 - 1o Parte - CSS do cadastro de projeto ... 77
Figura 42 - 1o Parte - Classe do cadastro de usuários ... 78
Figura 43 - 2o Parte - Classe do cadastro de usuários ... 79
Figura 44 - 1o Parte - Serviço do cadastro de usuários ... 80
Figura 45 - 1o Parte - HTML do cadastro de usuários ... 81
Figura 46 - 1o Parte - CSS do cadastro de usuários ... 82
Figura 47 - 1o Parte - Classe de criptografia dos dados do usuário ... 83
Figura 48 - 1o Parte - Classe da modal de atividades e tarefas ... 84
Figura 49 - 2o Parte - Classe da modal de atividades e tarefas ... 85
Figura 50 - 3o Parte - Classe da modal de atividades e tarefas ... 86
Figura 51 - 4o Parte - Classe da modal de atividades e tarefas ... 87
Figura 52 - 5o Parte - Classe da modal de atividades e tarefas ... 88
Figura 53 - 6o Parte - Classe da modal de atividades e tarefas ... 89
Figura 54 - 1o Parte - HTML da modal de atividades e tarefas ... 90
Figura 55 - 2o Parte - HTML da modal de atividades e tarefas ... 91
Figura 56 - 3o Parte - HTML da modal de atividades e tarefas ... 92
Figura 57 - 4o Parte - HTML da modal de atividades e tarefas ... 93
Figura 58 - 5o Parte - HTML da modal de atividades e tarefas ... 94
Figura 59 - 1o Parte - Classe de comunicação REST ... 95
Figura 60 - 1o Parte - Classe de gerenciar o quadro do kanban ... 96
Figura 61 - 2o Parte - Classe de gerenciar o quadro do kanban ... 97
Figura 62 - 3o Parte - Classe de gerenciar o quadro do kanban ... 98
Figura 64 - 5o Parte - Classe de gerenciar o quadro do kanban ... 100
Figura 65 - 6o Parte - Classe de gerenciar o quadro do kanban ... 101
Figura 66 - 7o Parte - Classe de gerenciar o quadro do kanban ... 102
Figura 67 - 8o Parte - Classe de gerenciar o quadro do kanban ... 103
Figura 68 - 9o Parte - Classe de gerenciar o quadro do kanban ... 104
Figura 69 - 10o Parte - Classe de gerenciar o quadro do kanban ... 105
Figura 70 - 11o Parte - Classe de gerenciar o quadro do kanban ... 106
Figura 71 - 12o Parte - Classe de gerenciar o quadro do kanban ... 107
Figura 72 - 1o Parte - Serviço do quadro do kanban ... 108
Figura 73 - 1o Parte - HTML da página do quadro do kanban ... 109
Figura 74 - 2o Parte - HTML da página do quadro do kanban ... 110
Figura 75 - 3o Parte - HTML da página do quadro do kanban ... 111
Figura 76 - 4o Parte - HTML da página do quadro do kanban ... 112
Figura 77 - 5o Parte - HTML da página do quadro do kanban ... 113
Figura 78 - 6o Parte - HTML da página do quadro do kanban ... 114
Figura 79 - 7o Parte - HTML da página do quadro do kanban ... 115
Figura 80 - 8o Parte - HTML da página do quadro do kanban ... 116
Figura 81 - 1o Parte - CSS da página do quadro do kanban ... 117
Figura 82 - 2o Parte - CSS da página do quadro do kanban ... 118
Figura 83 - 3o Parte - CSS da página do quadro do kanban ... 119
Figura 84 - 4o Parte - CSS da página do quadro do kanban ... 120
Figura 85 - 5o Parte - CSS da página do quadro do kanban ... 121
Figura 86 - 6o Parte - CSS da página do quadro do kanban ... 122
Figura 87 - 1o Parte - Classe de gerenciar o acesso ao sistema ... 122
Figura 88 - 2o Parte - Classe de gerenciar o acesso ao sistema ... 123
Figura 89 - 1o Parte - Serviço de acesso ao sistema ... 124
Figura 90 - 2o Parte - Serviço de acesso ao sistema ... 125
Figura 91 - 1o Parte - HTML da tela de acesso do sistema ... 126
Figura 92 - 2o Parte - HTML da tela de acesso do sistema ... 127
Figura 93 - 3o Parte - HTML da tela de acesso do sistema ... 128
Figura 94 - 1o Parte - Classe dos projetos vinculado ao usuário ... 129
Figura 96 - 3o Parte - Classe dos projetos vinculado ao usuário ... 131
Figura 97 - 1o Parte - Serviço dos projetos vinculado ao usuário ... 132
Figura 98 - 2o Parte - Serviço dos projetos vinculado ao usuário ... 133
Figura 99 - 1o Parte - HTML dos projetos vinculado ao usuário ... 134
Figura 100 - 2o Parte - HTML dos projetos vinculado ao usuário ... 135
Figura 101 - 3o Parte - HTML dos projetos vinculado ao usuário ... 136
Figura 102 - 1o Parte - CSS da página de projetos vinculado ao usuário ... 136
Figura 103 - 2o Parte - CSS da página de projetos vinculado ao usuário ... 137
Figura 104 - 1o Parte - Classe da recuperação de senha do usuário ... 137
Figura 105 - 1o Parte - HTML da tela de recuperação do usuário ... 138
Figura 106 - 1o Parte - CSS da tela de recuperação do usuário ... 138
Figura 107 - 1o Parte - Classe do template de atividades e tarefas ... 139
Figura 108 - 2o Parte - Classe do template de atividades e tarefas ... 140
Figura 109 - 3o Parte - Classe do template de atividades e tarefas ... 140
Figura 110 - 1o Parte - Serviço do template de atividades e tarefas... 141
Figura 111 - 1o Parte - HTML do template de atividades e tarefas ... 141
Figura 112 - 2o Parte - HTML do template de atividades e tarefas ... 142
Figura 113 - 3o Parte - HTML do template de atividades e tarefas ... 143
Figura 114 - 1o Parte - CSS do template de atividades e tarefas ... 144
LISTA DE TABELAS
Tabela 1 - Diferenças entre a abordagem tradicional e a abordagem ágil...35 Tabela 2 - Requisitos Funcionais...44 Tabela 3 - Requisitos não Funcionais...45
LISTA DE ABREVIATURAS E SIGLAS
ABNT - Associação Brasileira de Normas Técnicas REST - Representational State Transfer
API - Application Programming Interface JS - Java Script
TS - TypeScript
API - Application Programming Interface URL - Uniform Resource Lacators HTTP - Hypertext Transfer Protocol WEB - World Wide Web
SOA - Service-Oriented Architecture ROA - Resource-Oriented Architecture HTML - Hypertext Markup Language CSS - Cascading Style Sheets
MIT - Massachusetts Institute of Technology UX - User Experience
UI - User Interface W3C - World Wide Web
ECMA - European Computer Manufacturers Association ES5 - EcmaScript 5
ES6 - EcmaScript 6
MVC - Model View Controller SPA - Sigle Page Applcation NPM - Node Package Manager NpmJS - Node Package Manager
Javascript Angular/CLI - Angular Command Line Interface PMBOK - Project Management Body of Knowledge
SUMÁRIO
1 INTRODUÇÃO ... 17
2 FUNDAMENTAÇÃO TEÓRICA ... 22
2.1.1 ENTENDENDO O FUNCIONAMENTO BÁSICO DA WEB ... 22
2.1.3 MATERIALIZE CSS ... 26 2.2.2 FRAMEWORK ANGULAR ... 28 2.3.1 GESTÃO DE CRONOGRAMA ... 35 2.3.2 GESTÃO DA COMUNICAÇÃO ... 38 3 MATERIAIS E MÉTODOS ... 43 3.1.1 Requisitos funcionais ... 44
3.1.2 Requisitos não funcionais ... 45
3.2.1 PÁGINA DE ACESSO DO PROTÓTIPO ... 45
3.2.2 TELA DE CADASTRO DE USUÁRIOS ... 46
3.2.3 TELA DE RECUPERAÇÃO DE SENHA ... 47
3.2.4 PÁGINA DE PROJETOS VINCULADOS AO USUÁRIO ... 48
3.2.5 TELA DE CADASTRO DE PROJETO ... 50
3.2.6 TELA DE CADASTRO DE TEMPLATE ... 51
3.2.7 TELA DE DETALHES DO QUADRO KANBAN ... 52
3.2.8 TELA DE CRONOGRAMA ... 54
3.2.9 MODAL DE ATIVIDADES E TAREFAS ... 55
4 RESULTADOS ... 57
5 CONCLUSÃO ... 58
6 TRABALHOS FUTUROS ... 60
REFERÊNCIAS ... 61
1 INTRODUÇÃO
Com o avanço das Tecnologias da Informação e Comunicação em diversas áreas, tem-se percebido a grande mudança que nossa cultura tem passado, muitos processos manuais foram automatizados e outros melhorados, o que antes era neces- sário recorrer a um computador para se obter novos conhecimentos ou fazer alguma pesquisa, hoje temos tudo na palma da mão, através das TICs que invadiram o espaço em todos os aspectos, com isso surgiu a ideia de se adaptar a essa nova cultura e usarmos para benefício no meio acadêmico no processo de criação dos projetos de gestão. Diante desse cenário perceptível, é importante o apoio da universidade em investir e aplicar o uso das TICs para automatizar esse processo que vem sendo usado com dificuldade pelos docentes no meio acadêmico, precisamos refletir em como tirar melhor proveito das TICs e contribuindo assim para agregar novos hábitos, valores e costumes reconfigurando a cultura contemporânea (Damasceno; Cardoso e Costa, 2018). As TIC ampliam a capacidade cognitiva dos seres humanos (aumento da me- mória, percepção, imaginação), provocando dessa forma, “uma profunda mutação na relação com o saber”. (LÉVY, 2010, p. 174).
Essa cibercultura que as TICs estão trazendo, vai ser possível ver muitas mu- danças no nosso meio, na construção do saber e uma inteligência coletiva (Pierre e Lévy, 2010). Com isso será possível que novos conceitos, produtos e serviços tecno- lógicos façam parte do nosso dia a dia, mudando muitos paradigmas que estamos acostumados a usar. A forma como gerimos nossa vida, ficará mais fácil através do uso das TICs, podendo trazer melhores resultados e mais apurados quando consul- tados, pois todas essas informações estão migrando para nuvem, conceito usado no armazenamento de informações e consumo de serviços pela web, pois muitos serviços antes feitos manualmente estão virando serviços online, através da internet podendo ser acessível a qualquer pessoa de forma fácil, em qualquer lugar a qualquer hora (Pierre e Lévy, 2010).
Para Lemos (2000) uma grande evolução ocorreu na microeletrônica, que trouxe um grande impacto na economia e na vida das pessoas, onde foi possível ver gran- des mudanças de paradigmas como na área dos softwares que estão fazendo parte da vida removendo tarefas que antes eram feitas manualmente, e que agora estão automatizadas conforme esse grande avanço da tecnologia.
Segundo Saito (2016) uma forma de melhorar a inovação na área da tecnologia, é o apoio das empresas para melhorar a pesquisa e desenvolvimento aumentando assim o desenvolvimento econômico do país, gerando novas experiências e conhecimento para todos.
Através do incentivo a pesquisa e desenvolvimento, novas soluções poderão surgir para o meio acadêmico, e com essas inovações aplicada no meio acadêmico, o docente terá mais facilidades para fazer a gestão dos seus discentes e poder orientar, acompanhar todos os projetos acadêmicos em uma ferramenta centralizada. Para o discente mais organização e controle no desenvolvimento de seu projeto, aproximando- se mais do docente.
Muitas ferramentas de gestão de projetos existentes no mercado visam melhorar a organização e gerenciamento dos projetos e de todos os stakeholders, porém com os recursos que elas proporcionam não atendem especificamente a necessidade de gestão de projetos acadêmicos, em que permita aproximar o docente e o discente no planejamento estratégico e acompanhamento das atividades do cronograma, no desenvolvimento e no processo de avaliação. O discente tem grande dificuldade em fazer a gestão do seu projeto de conclusão de curso com seu docente e sanar suas dúvidas, por falta de organização, e por não saber por onde começar o desenvolvimento conforme aponta a pesquisa de Alves, Urquiza e Roland (2016).
Foi feito uma pesquisa e encontrado alguns trabalhos de conclusão de curso que tem os objetivos parecidos para atender essa necessidade, na gestão de trabalhos acadêmicos. Algumas são específicas para gestão de trabalhos de conclusão de curso, outros para gerenciamento de bancas e persistência em locais seguros de trabalhos acadêmicos.
Diante do desafio apresentado pretende-se neste trabalho desenvolver um protó- tipo de sistema web que contribua para a melhoria no processo de gestão dos sistemas acadêmicos. Será que as TICs podem contribuir para um processo de gestão mais eficaz na gestão de cronograma e comunicação de projetos acadêmicos?
1.1 PROBLEMA
Atualmente pesquisando na internet é possível encontrar várias ferramentas para gestão de projetos que sejam gratuitas para uso pessoal e pagas para o corporativo, como exemplo Trello, Asana entre outras ferramentas para gestão de projetos. Especificamente para a gestão de trabalhos acadêmicos, existem alguns trabalhos de conclusão de curso abordando o mesmo tema, isso demonstra o quanto é difícil ao docente orientador diversos discentes sem uma ferramenta específica voltada para gestão de trabalhos acadêmicos, que facilite não apenas a gestão, mas a comunicação e centralize tudo em uma única ferramenta.
Existe ferramentas excelentes no mercado para gestão de projetos diversos, com muitos recursos disponíveis, mas o problema é a padronização, centralização e que seja fácil de usar, essa facilidade do uso que apontei, não está relacionado a usabilidade, mas uma ferramenta com muitos recursos para usuários que precisam do pouco e objetivo, podem ter problemas para usarem, o grande diferencial para alguns usuários, não está relacionado a quantidade de recursos disponíveis, mas poucos e que sejam realmente úteis, um grande exemplo de software de comunicação que é muito usado é o WhatsApp, possui poucos recursos, porém fáceis de usar.
Com a existência de vários sistemas web para gestão de projetos no mercado, houve dificuldade de encontrar alguma delas que fosse fácil para usar no dia a dia na prática para gerir projetos acadêmicos, onde integre o discente e docente, centralizando toda a comunicação e gestão do cronograma do projeto dentro de um sistema web, seja na questão financeira ou específica na área acadêmica.
Conforme uma pesquisa já elaborada por Alves, Urquiza e Roland (2016), existe o problema de planejamento do cronograma do discente, gerando assim atrasos de entrega do projeto ao seu docente. Problema de comunicação dentro do projeto, cada discente com seu docente define uma ferramenta de comunicação como
WhatsApp, Telegram, E-mail, e assim o docente tem vários discentes para orientar e
diferentes meios de comunicação definidos com cada um, dificultando o gerenciamento dos TCCs por parte do docente.
Cada discente escolhe uma ferramenta para guardar seus documentos de pes- quisa, artigos e seu TCC, com isso o docente tem muita dificuldade de
acompanhar as etapas dos projetos acadêmicos sendo que essas informações estão distribuídas em várias ferramentas, isso dificulta o gerenciamento quando ele precisa consultar um trabalho acadêmico específico de um discente para acompanhar o progresso, ele terá que procurar em qual ferramenta o discente definiu para acessar e avaliar, isso acaba gerando falha de comunicação e no alinhamento dos objetivos do projeto.
1.2 JUSTIFICATIVA DO PROBLEMA
Diante desse problema, foi pensado em desenvolver um sistema web com a intenção de facilitar a gestão de trabalhos acadêmicos e ajudar os docentes e discentes, centralizando toda a comunicação e gerenciamento a respeito do projeto dentro de um único sistema web, deixando todos os stackholders cientes de como está o andamento de todo o projeto.
Ferramentas de mercado atendem algumas necessidades, porém não centra- lizam a comunicação que é um dos itens principais na gestão de projetos conforme o guia de referência Project Management Institute, Inc. (2005) em que trata sobre o planejamento e gerenciamento das comunicações na gestão de projeto. Ferramentas de gerenciamento de projetos do mercado possuem diversos recursos, mas poucas pessoas sabem como utilizar, o que diferencia um sistema web que seja fácil, é ele ser simples e ter funcionalidades fáceis de encontrar para atender as necessidades dos usuários, aplicando-se os conceitos de usabilidade para diferentes níveis de usuários conforme aponta Cybis, Betiol e Faust (2017) e (Cybis; Betiol e Faust, 2015).
Muitos desses sistemas web de gerenciamento de projetos são estrangeiros, e ao concluir o curso de tecnologia da informação e comunicação, entendemos que precisamos inovar, mudar nossa ideia de depender sempre de ferramentas estrangeiras e criar nossas próprias soluções, principalmente no âmbito universitário. Segundo Calle e Silva (2008) A inovação tornou-se uma vantagem competitiva, sendo que na atualidade existem melhores condições para inovar devido às novas formas de disseminação do conhecimento proporcionadas pelas TICs.
Com tanto conhecimento que o curso de TIC proporciona, podemos criar novas soluções e gerar mais conhecimento para meio acadêmico. Temos muito potencial e devemos investir mais na pesquisa e desenvolvimento, explorar novos recursos, ser-
mos mais criativos e descobrir novas oportunidades. Conforme aponta Lemos (2000); Chaparro (2001); o conhecimento adquirido pela pesquisa e desenvolvimento, é o principal fator estratégico de riqueza e poder, tanto para as organizações quanto para os países.
1.3 OBJETIVO GERAL
Desenvolver um protótipo de sistema web para levantamento de requisitos em gestão de projetos acadêmicos.
1.4 OBJETIVOS ESPECÍFICOS
• Estudar os sistemas de gestão de projeto acadêmicos.
• Levantar requisitos para o desenvolvimento de um sistema para gestão de projetos acadêmicos.
• Programar um protótipo de sistema web para gestão de projetos acadêmicos.
2 FUNDAMENTAÇÃO TEÓRICA
2.1 ARQUITETURA
Este capítulo apresenta um pouco sobre o desenvolvimento do protótipo
Front-end para integrar a uma API do Back-end desenvolvida pela mestranda "Maria
Edu- arda"do curso de Tecnologia da Informação e Comunicação, que atuou juntamente nesse projeto. Para melhor organizar este Capítulo, foi dividido nas seguintes seções: A evolução da web; Entendendo o funcionamento básico da web;
Materialize css; Ar- quitetura Rest de comunicação; Linguagem de programação Typescript ; Framework Angular ; Entendendo o funcionamento desse projeto.
Segundo Primo e Smaniotto (2007)novos negócios implementados a partir da oferta de serviços pela Web vão surgir diariamente, impulsionando uma cate- goria diferenciada de empreendimentos, que muitos identificam como perten- centes a uma "Nova Economia". Pode-se afirmar, como em JAMIL (2001, p. 510-540), que um novo modelo de aplicações está surgindo, apoiado no de- senvolvimento de tecnologias, como as que abordaremos nesta Seção. Este novo modelo gerará inovadores empreendimentos baseados em serviços web (do inglês web services).
2.1.1 ENTENDENDO O FUNCIONAMENTO BÁSICO DA WEB
Silva (2017) afirma que o crescente desenvolvimento de novas tecnologias trouxe a necessidade de ser realizado novas tarefas de maneira simples e informatiza- das. Coulouris (2013) A web evoluiu muito nos últimos anos sem mudar sua arquitetura básica que é dividida em três componentes básicos:
1. HTML (HyperText Markup Language), que é uma linguagem de
marcação onde define a especificação de como deve ser apresentado o layout ao usuário através dos navegadores.
2. URLs (Uniform Resource Locators), que diz a localização de
3. Uma arquitetura cliente e servidor com um padrão de comunicação através do protocolo HTTP - HyperText Transfer Protocol, por onde os navegadores usam para se comunicar e buscar as informações como documentos e outros recursos. É através da linguagem de marcação hypertexto HTML que é construído as páginas de internet e que definem o formato que elas devem se apresentar ao usuário nos navegadores de internet. Ela é baseada no conceito de Hipertexto, que caracteriza um conjunto de elementos ou nós ligados por conexões, esses elementos podem ser textos, vídeos, imagens, gifs e documentos conforme (Eis e Ferreira, 2012).
O conceito de marcação é a definição do que cada elemento representa dentro da página web, um título, um parágrafo ou um texto simples Eis e Ferreira (2012). Através desta o usuário tem uma apresentação da página web de forma organizada onde são mostrados imagens, itens estruturados com cabeçalhos, tabelas e botões. Esse código de marcações em formato texto geralmente fica armazenado no servidor
web em um arquivo, sendo enviado para o cliente que fez uma requisição para acessá-
lo através do endereço URL desse arquivo.
Os navegadores de internet rodam do lado cliente, utilizam o protocolo HTTP para se comunicar com o servidor web e fazer as requisições das páginas através dos seus endereços URL. Conforme mostra a figura 1 do exemplo abaixo, demonstrando exatamente o funcionamento dessa arquitetura cliente e servidor (Coulouris, 2013).
Figura 1 - Arquitetura client-server
Fonte: Sergey Vasutin (2016)
A World Wide Web (W3C) é um consórcio internacional que possui uma equipe integral que trabalham para desenvolver os padrões para a web, juntamente com
organizações filiadas e uma comunidade grande de desenvolvedores, afim de conduzir a World Wide Web para que atinja todo seu potencial, trabalhando no desenvolvimento de protocolos e diretrizes que garantam seu crescimento de longo prazo conforme o site oficial da W3C.
Através deste a W3C é responsável pela padronização das especificações do
HTML e CSS. Com o surgimento do HTML5, novos recursos e APIs foram incorpora-
das nas especificações do HTML para ser possível implementar novas funcionalidades nos sistemas web, não sendo mais necessário introduzir tecnologias de terceiros como
Flash Player para reproduzir vídeos, áudios, animações, imagens vetoriais dentre ou-
tros. Com a descontinuação da Adobe Flash, as empresas que desenvolvem os nave- gadores, começaram a implementar algumas especificações do HTML5 e CSS3, com isso foi possível que novas aplicações pudessem ser mais robustas, não dependendo mais de plugins externos ou de terceiros (FLANAGAN, 2012).
Outro ponto muito importante para o funcionamento da web 2.0, é toda a in- teratividade com o usuário, a definição do comportamento dentro das páginas web.
Javascript é uma linguagem de programação criada por Brendan Eich em 1995, que
inicialmente tinha o nome de Mocha, porém depois alterado para JavaScript afim de popularizar a linguagem, como estratégia de marketing e por receber autorização de uma licença de marca da Sun Microsystems(hoje Oracle).
Após sua criação houve uma tentativa de padronização junto à Ecma Inter-
national (Associação Européia de Fabricantes de Computadores) para que outros
fabricantes de navegadores pudessem ter suas próprias linguagens de script, oferen- cendo um conjunto de funcionalidades sob as mesmas APIs, sendo assim esse padrão ficou conhecido como ESMAScript (FLANAGAN, 2012).
Através da interpretação dos scripts do javascript feito pelo navegador, presen- tes dentro do HTML, é definido todo o comportamento na página e todos os eventos possíveis (FLANAGAN, 2012). Ela é uma linguagem de alto nível, fracamente tipada e implementa uma API mínima para trabalhar com textos, arrays, datas e entre outros, não implementa entrada e saída e nenhuma comunicação direta com as chamadas de sistemas, isso fica de responsabilidade do hospedeiro (browser ) (FLANAGAN, 2012).
Uma camada que trabalha junto com o HTML e deixa o visual mais atraente e bonito ao usuário é o CSS, conhecido como Folha de estilo em cascata, ela é responsável por controlar todo o visual da informação exibida no navegador do usuário,
deixando a página agradável em qualquer dispositivo que tem acesso a página (EIS;
FERREIRA, 2012).
Para entender melhor essas camadas, vamos fazer uma comparação com o corpo humano. Todo esqueleto poderíamos dizer que é o HTML, é ele que define toda a estrutura estática de uma página web, ele é a primeira camada. Porém sem um visual, precisamos dar um destaque melhor visualmente para esse corpo, é nesse ponto que comparamos com o CSS, ele é responsável por essa última camada, que é totalmente visual, onde traz a elegância de uma página web conforme abaixo a figura 2.
Figura 2 - Exemplo de camadas HTML, CSS, Javascript
Fonte: Dev Human - reddit (2019) 2.1.2 ARQUITETURA REST
É um estilo de arquitetura criada pelo Roy Fielding (um dos criadores do pro- tocolo HTTP) em sua tese de doutorado em 2000, que visa transmitir dados de um domínio específico sobre o HTTP sem uma camada adicional de mensagem como
SOAP ou session tracking via cookies HTTP (MORO; DORNELES; REBONATTO,
2011). Ela trabalha de modo Stateless (Sem estado) em que a comunicação não armazena qualquer tipo do estado no servidor, cada requisição deve conter todas as informações necessárias para o servidor atender aos pedidos feito pelo client-side
(lado do cliente). Essa arquitetura possui uma interface uniforme onde utiliza os métodos do protocolo HTTP para representar uma operação a um determinado serviço através de um recurso (MORO; DORNELES; REBONATTO, 2011). Nesse modelo é utilizado uma URI como representação desse recurso, sendo uma string compacta única que visa identificar um endereço físico ou abstrato na internet, pode ser classificada como um local (URL), um nome. Exemplo da figura 3 abaixo que demonstra a abordagem orientada a recursos (ROA) e abordagem orientada a serviços(SOA).
Serviços WS- tem vantagens para circunstâncias para integrar diferentes pro- tocolos de comunicação, em ferramentas middleware, serviços REST recomenda-se usar em aplicações que existem uma grande troca de mensagens conforme o estudo de caso que compara Web Services WS-* versus Web Services REST desenvolvido por (MORO; DORNELES; REBONATTO, 2011).
Figura 3 - (ROA) vs (SOA).
Fonte: Snell (2004)
2.1.3 MATERIALIZE CSS
Segundo o site oficial do Materialize CSS é um Framework front-end baseado no Material Design da google, sobre a licença do MIT. Ele traz componentes visuais prontos para serem utilizados e uma biblioteca com diversos efeitos visuais preparada para ser renderizada na página da melhor maneira possível obedecendo as premissas do Material Design.
Segundo o próprio site oficial do Material Design é uma linguagem de Design que faz a combinação dos princípios clássicos de um bom design rico em User
Experience (UX) e User Interface (UI) através de inovação da tecnologia e da ciência.
benefícios e confiabilidade, e padrões visuais muito atraentes, que hoje são muitos utilizados em vários sites, sistemas, e muitos sistemas mobile dentre outros.
2.2 LINGUAGEM DE PROGRAMAÇÃO
2.2.1 LINGUAGEM DE PROGRAMAÇÃO TYPESCRIPT
Linguagem de programação criada pela Microsoft e liberada como
Open-Source pela licença Apache 2.0 em 2004 segundo Fenton (2014), está focada no
desenvolvimento de aplicações web, permitindo a escalabilidade do projeto e melhorando a visibilidade de todas as camadas para a equipe de desenvolvimento, onde ataca os grandes problemas do Javascript oferecendo as melhores técnicas de programação orientado a objetos e ferramentas de tempo de codificação, verificação e compilação.
A linguagem é fortemente tipada, e considerada um superconjunto do
Javascript, pois você programa e estrutura todo o código usando o conceito de
orientação a objeto e depois faz uma transpilação (Conversão) do código typescript
(TS) para o Javascript como mostra a figura 4, podendo ser interpretado pelos
navegadores de internet, ex: Google Chrome, Mozilla Firefox, Internet Explorer. A linguagem typescript está sobre as especificações mais recentes do
ECMAScript, que é gerenciada pela associação ECMA (European Computer Manufacturers Association) que é responsável pela padronização de sistemas de
informação, atualmente conhecida apenas como Ecma International, de origem Européia. Atualmente o JavaScript dos navegadores de internet estão sobre a especificação ECMA-262, porém o Typescript não é Javascript, mas como implementa as mesmas especificações você pode facilmente programar Javascript dentro do código fonte (FENTON, 2014). A figura 5 mostra a diferença entre a implementação das especificações. ECMAScript é uma linguagem de script voltada para web, que foi a base para o desenvolvimento das linguagens "JavaScript (NetScape), JScript e
Figura 4 - TypeScript VS Javascript
Fonte: Carl’s (2016)
Figura 5 - TypeScript vs ES5
Fonte: Fenton (2014)
2.2.2 FRAMEWORK ANGULAR
Antes de falarmos do framework Angular, vamos entender melhor o que é um
framework. Segundo Duarte (2015) é um conjunto de padrões e boas práticas de
desenvolvimento, onde o programador deve seguir as diretrizes que foram estabeleci- das para o desenvolvimento, ele não pode decidir sozinho como deve funcionar sua aplicação, ele deve seguir exatamente os padrões de desenvolvimento que foi usado para poder obter o resultado que deseja. Alguns seguem o padrão de desenvolvimento
MVC (Model, View, Controller), onde através desse padrão, toda a estrutura da apli-
cação fica organizada de forma legível, fácil manutenção, um código mais limpo e um reaproveitamento melhor dos códigos, separando cada parte do código da aplicação em suas responsabilidades, resultando assim em camadas separadas porém
fortemente ligadas. O Model (Modelo), é responsável em definir os modelos, as lógicas de negócio da aplicação. A View (Visão), é a interface que tem a responsabilidade de mostrar e interagir com o usuário os dados processados e requisitados. O Controller (Controlador), é a ponte que faz a ligação entre a View e o Model, e que comunica ambas as partes conforme o usuário interage com o sistema, ela responde a todos os eventos que o usuário executa, deixando o Model atualizado de tudo o que o usuário requisitou, e levando ao usuário através da View conforme demonstra a figura 6 abaixo, as respostas das suas solicitações (ALVES, 2019).
Uma biblioteca, é definida como um conjunto de funcionalidades prontas em que o desenvolvedor decide como, quando, e onde usar, sem restrições no ambiente que atende os requisitos mínimos para seu uso (DUARTE, 2015).
Porque a decisão de usar o Angular para esse protótipo? Alguns pontos que foram estudados e chegou a conclusão de vários aspectos. O Angular foi desenvolvido por uma das maiores empresas de tecnologia no mundo "Google", exite um grupo grande de colaboradores a favor do projeto conforme Alves (2019), outras questões estão relacionadas a escalabilidade que esse framework proporciona, constantes atualizações e novas versões a cada 6 meses, sem o perigo de quebrar o projeto que foi desenvolvido a partir da versão 2, segundo o líder da equipe de desenvolvimento Igor Minar do Angular. Com isso os projetistas decidiram que não seria mais colocado a versão ao lado do nome "Angular", pois as constantes atualizações não seriam mais baseados em mudanças estruturais a fim de ter que mudar todo o projeto por questões de incompatibilidade conforme afirma Alves (2019), sendo assim, a partir da versão 2 do Angular, houve muitas mudanças drásticas na arquitetura, mudando totalmente o modo de desenvolver aplicações web, comparando com a versão 1 que foi o primeiro piloto do framework totalmente desenvolvida em Javascript, porém a partir da versão 2, eles decidiram aplicar essas regras sobre os novos lançamentos das versões do
framework.
O Angular é um Framework desenvolvido para automatizar o processo de desenvolvimento de aplicações SPA (Single Page Applications) para aplicações
web, diferente do padrão Multiple Page Application, que são padrões de
desenvolvimento com paradigmas bem diferentes principalmente na implementação, pois o SPA trabalha com uma única página, onde contém todas as outras embutidas internamente sendo gerenciadas através de rotas que o usuário requisita, e cada rota que o usuário solicita.
Figura 6 - Arquitetura MVC usando Angular
Fonte: ALVES (2019)
O Angular faz as requisições assíncronas no servidor buscando apenas os dados referente a página, e quando retornado do servidor, ele injeta esses dados na página internamente que fica escondida do usuário, processa as informações na página oculta e depois exibe para o usuário, isso evita atualizações e esperar desnecessários pelo usuário, ganhando um desempenho na navegação.
Já o padrão MPA as páginas são processadas no servidor e a cada requisição do usuário é feito o download de toda a página com o HTML, CSS, Javascript para o navegador do usuário. A figura 7 faz uma ilustração desses dois modelos de desenvolvimento conforme (OH et al.,2013).
Figura 7 - SPA vs MPA
Fonte: OH et al (2013)
Isso representa muita diferença em termos de desempenho, usabilidade e escalabilidade, pois em termos de usabilidade temos um ganho em velocidade e interação com o usuário, podendo aperfeiçoar animações e estilos de transações entre telas, implementar novos recursos que no modelo MPA sempre é necessário procurar
poupar os recursos implementados na página, visto que a cada clique e requisição para uma nova área do sistema, é feito todo o download da página processada.
No modelo SPA, todas as páginas estão implementadas em um único arquivo, geralmente no "index.html", no caso do Angular, todas as classes dos controllers e as
views que são os HTML e CSS, estão dentro do arquivo "main.js", que ao entra a
primeira vez no sistema, é baixado o index.html alguns javascript que contém toda a lógica de negócio da aplicação front-end, e conforme a navegação do usuário, as páginas são injetadas na tela de apresentação no navegador, e alterado o caminho da
URL simulando a troca de página para o usuário, antes dessa injeção de página, é
feita a requisição ao servidor para buscar ou processar alguma informação apenas, sendo a troca de dados entre o cliente e servidor muita pequena comparada com o modelo MPA (OH et al., 2013).
Segundo Benson, Mikowski e Powell (2013) o modelo SPA veio para mudar o paradigma antigo de aplicações web que usavam o Flash para soluções que antes não eram possíveis através do desenvolvimento padrão web, usando o HTML, CSS e
Javascript para páginas que tinham muita interação com os usuários, pois existia um
problema de renderização, levando o navegador a travar ou quebrar a página.
O framework Angular utiliza o Typescript da Microsoft como linguagem de programação base e roda em cima da plataforma NodeJS para o processo de desenvolvimento e testes. NodeJS é considerada uma plataforma que integra diversos módulos e bibliotecas Javascript, que foi implementada sobre o interpretador
Javascript V8 do Google Chrome de uma das maiores empresas de tecnologia a Google. Através do NodeJS é possível executar códigos Javascript do lado do
servidor, ou seja, server-side. Antes era possível executar Javascript apenas nos navegadores de internet client-side, porém com o surgimento dessa tecnologia, você pode construir sistemas escaláveis para serem executados fora dos navegadores de internet, com isso abriu muitas pos- sibilidades fazendo com que equipes pudessem criar e desenvolver novos plugins, bibliotecas e ferramentas de forma mais fácil e colaborativa, podendo disponibilizar nos sites github ou npmJS, e os desenvolvedores instalar de forma fácil em seus projetos, sem se preocupar em gerenciar todas as dependências de forma manual e burocrática (ALVES, 2019).
Usando o NodeJS, é possível fazer todo o gerenciamento de dependências da aplicaçãfeo através do seu gerenciador de pacotes NPM para instalar novas bibliotecas e plugins. Através do gerenciador de pacotes é possível instalar o
Framework Angular/CLI, onde vem com uma interface de linha de comando para o
desenvolvedor interagir e executar comandos para o gerenciador do Angular, onde é possível através dele criar novas páginas, serviços, componentes, e transpilar o projeto para versão de teste ou de produção Fenton (2014). O processo de transpilar o projeto, significa converter todo o código TypeScript para a linguagem JavaScript convencional, que é atualmente interpretada nos navegadores de internet, pois está ainda sobre a especificação ECMA-262, em outras palavras, sobre a versão 5.1 do
ECMAScript (ALVES, 2019).
2.3 GESTÃO DE PROJETOS
Segundo o Guia do PMBOK ® (2017) que é um conjunto de boas práticas em gerenciamento de projetos, define que projeto é um esforço temporário empreendido para criar um produto, serviço ou resultado único. Essas boas práticas estão formaliza- das como um conjunto de habilidades, técnicas e ferramenta de gerenciamento para o sucesso do projeto.
O gerenciamento de um projeto é um grande desafio para o gestor, principalmente ao fazer a gestão de pessoas, que são recursos. O guia PMBOK ® (2017),define os grupo de processos de gerenciamento de projetos como:
1. Processos de Inicialização: Faz a definição e autorização para a execução do projeto
2. Processos de Planejamento: Faz a definição dos objetivos e planeja a ação
3. Processos de execução: Faz a execução dos requisitos do projeto 4. Processos de Monitoramento e Controle: Faz o monitoramento de todo o processo para identificar possíveis mudanças para atingir os objetivos do projeto
5. Processos de Encerramento: Faz a formalização do resultado do projeto com seu cliente.
Porém esse gerenciamento clássico define que cada processo do grupo só pode iniciar mediante ao término do processo anterior, sendo representado pelo ciclo de vida do processo que geralmente é sequencial Guerra (2017), pois eles estão totalmente interligados, diante desses fatos, houve algumas críticas para aplicação de gestão em alguns tipos de projetos, com todos esses fatos, houve-se a necessidade
de uma gestão mais ágil, com isso foi publicado o Manifesto Ágil que é uma declaração de princípios e valores com fundamentação no desenvolvimento ágil de software, ela aborda 4 valores e 12 princípios conforme o Manifesto Ágil publicado pela Agile Alliance que é a organização sem fins lucrativos responsável por criar essa rede de autores para debater alternativas sustentáveis para o desenvolvimento ágil de software:
• VALORES
– Indivíduos e interações mais que processos e ferramentas;
– Software em funcionamento mais que documentação abrangente; – Colaboração com o cliente mais que negociação de contratos; – Responder a mudanças mais que seguir um plano;
• PRINCÍPIOS
– Satisfazer o cliente por meio da entrega contínua e adiantada de
software com valor agregado;
– Mudanças no requisito são bem vindas, mesmo tardiamente; – Entregar frequentemente o software funcionando;
– Pessoas de negócio e desenvolvedores devem trabalhar em conjunto no projeto;
– Construa projetos em torno de indivíduos motivados; – O método mais eficaz de comunicação é face a face; – Software funcionando é a medida primária do sucesso;
– Clientes e desenvolvedores devem manter um ritmo constante; – Contínua atenção à excelência técnica e ao design;
– Simplicidade é essencial;
– As melhores arquiteturas, requisitos emergem de equipes auto organizáveis;
– Em intervalos regulares, a equipe reflete sobre como se tornar mais eficaz e ajusta seu comportamento de acordo;
Para o desenvolvimento ágil de um projeto em relação ao modelo tradicional, o Kanban é uma metodologia ágil dentre outras que existem, que visa acelerar o ritmo dos processos na gestão de um projeto, que se baseia em ciclos iterativos e
incrementais, incentivando uma visão e comunicação em tempo real ao invés de vários documentos escritos.
O Kanban utiliza um quadro divido em colunas que representam status de cada etapa, e utiliza cartões "post-its ou cards" para representar uma atividade ou tarefa do projeto, dando uma visão bem objetiva de cada atividade ou tarefa e em que estágio cada uma delas se encontram conforme o exemplo da figura 8. E com isso traz uma comunicação mais objetiva e mais clara, onde todos os envolvidos podem acompanhar de uma forma simples todo o andamento do projeto.
As iterações são ciclos que visam minimizar o risco do projeto, sendo assim todo o projeto é divido em mini-projetos, onde cada um é responsável por uma parte ou cada equipe, geralmente equipes pequenas, mesmo espaço físico, e com pequenos incrementos, isso tudo para facilitar o andamento de todo o projeto com o cliente. Os ciclos são fases do projeto que podem ser subdivididas em tarefas. Um dos pontos fortes da gestão ágil comparadas com a gestão tradicional, é que a gestão ágil possui mais flexibilidade em ambientes onde pode existir diversas mudanças, ela é mais adaptativa e variável, conforme mostra a tabela 1 do comparativo entre a gestão tradicional e ágil Shenhar e Dvir (2007), porém Guerra (2017) acredita que a metodologia ágil não é a substituição do método tradicional, mas sim um complemento que agrega mais resultados para alguns tipos de projetos, porém é necessário encontrar o equilíbrio entre elas.
Figura 8 - Exemplo de quadro kanban
Tabela 1 - Diferenças entre a abordagem tradicional e a abordagem ágil
Fonte: Adaptado de Shenhar e Dvir (2007)
2.3.1 GESTÃO DE CRONOGRAMA
Definir um cronograma é um processo que visa detalhar e representar como e quando um projeto vai executar seus requisitos para obter o objetivo do projeto, também pode servir de uma ferramenta de comunicação (PMBOK® 2017).
Conforme Chaves et al. (2014) a definição de um cronograma está fortemente ligada a gestão de tempo, que vai desde a definição de atividades, sequenciamento, definição de recursos por atividade, estimativa de duração e montagem até do controle do cronograma.
Um cronograma está ligado com todos os processos de um projeto, um planejamento concreto e bem definido, facilita muito o que cada área deve executar. Segundo Chaves et al. (2014) afirmam que ao definir as atividades é muito importante o conhecimento total do escopo do projeto que é a base para o seu planejamento.
O processo de sequenciamento vem após a definição das atividades, é através dele que são colocados em ordem sequencial o que e quando será executado cada
etapa do projeto. Com o sequenciamento definido, é necessário escolher os recursos (pessoas) para cada atividade e com isso já definir a estimativa de tempo que levará dentro dessa sequência. Com todas as etapas planejadas, no processo de execução dessas atividades o gestor tem o papel de monitorar e avaliar possíveis mudanças em caso de algum problema em alguma etapa.
Conforme Maia e Oliveira (2018), para que um projeto tenha a garantia de um bom resultado dentro do prazo, um dos pilares importantes é o gerenciamento do cronograma, pois sua base está na definição e controle das atividades, que como premissa, é necessário ter um escopo, atividades, prazos e recursos bem definidos. Para atingir todos esses objetivos, é necessário separar nos seguintes processos:
1. Definição das Atividades
2. Sequenciamento das Atividades
3. Estimativa de Recursos e Duração das Atividades 4. Desenvolvimento do Cronograma
Na gestão ágil de projetos, existe pouco planejamento e pode ocorrer muitas mudanças diante de vários cenários para atingir os objetivos do projeto, com isso não existe uma formalidade nas prioridades visto que elas podem mudar a qualquer momento, e isso pode gerar uma dificuldade no gerenciamento do cronograma.
Na gestão de trabalhos acadêmicos, a gestão do cronograma é mais fácil, visto que a definição das atividades estão baseadas no escopo no modelo base do tipo de projeto, logo é possível que venha ter mudança mais na questão dos prazos e não na definição das atividades. As tarefas são definidas pelo próprio discente, com base nas atividades que ele deve executar. As atividades são no geral padronizadas conforme o modelo de projeto de gestão, podendo ter atividades um pouco diferentes do padrão se o docente quiser personalizar algum modelo de projeto para algum caso específico de gestão, mas o ponto crítico para o cronograma na gestão de trabalhos acadêmicos, está mais relacionado com a estimativa de recursos e duração das atividades.
Para Maia e Oliveira (2018), a gestão tradicional é mais fácil de controlar o cronograma, já que funciona de forma sequencial para cada etapa na criação do cronograma, já na gestão ágil, para alguns casos é difícil devido a ser aplicado a ambientes e projetos que sofrem muitas alterações de escopo, devida a muitas
mudanças no mercado ou as necessidades do cliente. Para a definição do cronograma na gestão ágil, é necessário seguir a listagem anterior dos processos, porém pode haver uma organização um pouco diferente, não sendo executado de forma sequencial. Então posso ter a definição de algumas atividades, executá-las de forma aleatórias, estimar um prazo fictício mas depois alterar e ao mesmo tempo controlar o cronograma das atividades que já estão em execução.
Nesse protótipo de sistema, a ideia é justamente tornar flexível a gestão do cronograma, o docente define as atividades com o discente, e pode definir o prazo das atividades, dando início a execução, mesmo não definindo todas as atividades, podendo fazer lançamentos de novas atividades mais tarde se quiser, e na execução das atividades, o docente já consegue acompanhar na tela do sistema o andamento dessas atividades, podendo visualizar a linha do tempo do prazo que foi definido para cada atividade e a linha do tempo de e até quando o discente está executando cada atividade, podendo ver as atividades que passaram do prazo definido, porém o discente não pode finalizar as atividades e tarefas que estão fora do prazo definido, apenas o docente.
Um ponto muito importante na gestão do cronograma na fase de execução das atividades é o monitoramento e controle, pois é através desses que é possível controlar o fluxo de todas as atividades se estão sendo feitas dentro do prazo estimado, pois pode ocorrer de o discente ter dificuldades na execução de algumas delas por falta de conhecimento ou experiência, e com isso não conseguir cumprir o prazo planejado, sendo assim, é crucial o docente estar constantemente monitorando as atividades e controlando o prazo do discente de cada projeto, para que seja possível chegar no resultado esperado, pois esse é o grande objetivo da gestão de cronograma.
Uma má gestão de cronograma pode acabar comprometendo todo o projeto, segundo Maia e Oliveira (2018), os atrasos no fluxo de execução das atividades acabam sendo acumulados e podem comprometer o prazo final para a entrega do projeto, sendo assim o docente deve sempre levar em conta quando estimar o prazo final do projeto, que deve ser adicionado um tempo extra para possíveis problemas que podem vir a ocorrer durante a execução das atividades, pois elas dependem de recursos, e muitas vezes são escassos. A gestão de cronograma está fortemente ligada ao resultado final do projeto e aos custos que ele terá, pois dentro desse contexto vale ressaltar que antes de tudo estamos trabalhando com a gestão de pessoas dentro
desse processo, e essa gestão de pessoas pode sofrer influências na execução das etapas e vir a mudar a estimativa definida de todo o projeto.
2.3.2 GESTÃO DA COMUNICAÇÃO
Toda a gestão de projetos que deseja ser eficaz com os resultados cumprindo todos os seus objetivos, deve-se ter uma premissa muito importante dentro de todos os processos de gerenciamento de projetos, é feito por pessoas. Com os avanços tecnológicos acontecendo com mais frequência, facilitou muito a comunicação entre as pessoas, diminuindo as distâncias entre elas e os obstáculos e objetivos em muitas organizações.
Conforme Besteiro, Calado e Bologna (2016) através de um estudo em um provedor global de serviços de outsourcing "Terceirização" dos Estados Unidos, foi possível identificar que o grande problema na entrega dos projetos era a falha na comunicação entre todos os envolvidos, mesmo havendo vários canais de comunicação como (e-mail, mural, telefone, reuniões, coffe break) não havia uma divulgação eficaz das informações. Sempre quando um projeto está para ser finalizado, surgi novas informações adicionais, gerando atraso no cronograma pois não estão usando metodo- logias ágeis, sendo que qualquer mudança em alguma parte do projeto, era necessário voltar no início das fases para dar continuidade no projeto.
Os envolvidos não se comunicavam-se bem dentro dos processos, gerava assim um desalinhamento do projeto para o cronograma definido, e no momento de finalizar sempre tinha que ajustar os projetos. Os gerentes concluíram que essa falha de comunicação estava entre todos os membros de monitoramento das áreas específicas, todos não tinham o comprometimento em compartilhar as informações para o conhecimento de todos, não apenas discutindo em reuniões, mas documentando e compartilhando com os stackholders dentro dos processos.
Com isso é possível perceber que, não basta ter várias ferramentas de comunicação, deve-se ter um comprometimento com todos os envolvidos em compartilhar qualquer informação do projeto com todos os stackholders e não apenas com os mem- bros de cada equipe. Segundo a pesquisa de Silva (2015), aponta que um estudo feito pela empresa Gartner Group, revelou que 60% dos problemas ocorridos em um projeto é devido a falha de comunicação.
Gerenciar as comunicações é o processo de assegurar a coleta, criação, distribuição, armazenamento, recuperação, gerenciamento, monitoramento e disposição final e adequada das informações do projeto. O principal benefício desse processo é que possibilita um fluxo de informações eficiente e eficaz entre a equipe do projeto e as partes interessadas. Este processo é realizado ao longo do projeto PMBOK®(2017, p. 379).
Para todo tipo de projeto, um dos pontos mais importantes é a comunicação entre todos os envolvidos, sabemos que usamos ela para alinharmos com todos os envolvidos do projeto para planejar, executar, monitorar e controlar e concluir que são os cinco grupo dos processos na gestão de projetos. A comunicação está presente em tudo o que fizemos, nada resolve ter tudo bem escrito ou planejado se não temos uma boa comunicação entre todos os envolvidos, cada indivíduo abstrai as informações da sua maneira e muitas vezes executa diferente dos objetivos propostos para o projeto (Besteiro; Calado e Bologna, 2016).
A comunicação é uma das principais causas de fracassos nos projetos segundo afirma Lamim (2009), pois ela é a responsável em fazer todos os stakeholder chegarem ao mesmo entendimento para obter os resultados esperados pelo cliente. Segundo Augustine (2005), defende que é através da comunicação face a face de forma informal que se obtém os melhores resultados na gestão ágil, pois o fato de não se ter tudo especificado através de documentos e seguir um fluxo de forma incremental podendo surgir novas atividades e tarefas para atingir os resultados esperados, é a melhor prática de trocar conhecimentos e experiências para todos os envolvidos.
A gestão ágil veio para agilizar o processo deixando um pouco de lado os conceitos de que deve-se ter tudo escrito, feito toda a análise e planejamento seguindo todas as outras etapas de forma sequencial, e se houver mudanças no projeto ter que voltar no início e passar por todas as fases novamente até chegar aonde havia parado para dar continuidade no projeto, e o fator principal para que a gestão ágil funcione de forma a obter os resultados esperados pelo cliente, é primordial a comunicação bem alinhada e visível entre todos juntamente com o cliente sempre que necessário, evitando assim muitos processos burocráticos. Segundo (Joaquim 2011) a comunicação bem equilibrada faz com que a equipe venha a se adaptar melhor a qualquer mudança que ocorrer no projeto, com a troca de experiências, ideias, conhecimentos até para novas definições no projeto. A gestão ágil só é possível
aplicar dentro das suas características que está focado na agilidade, flexibilidade e a comunicação para entregar produtos e serviços em curtos períodos (Guerra, 2017).
Cada projeto que é aplicado a metodologia Kanban para uma gestão mais ágil, pode ser definido um meio de comunicação, desde que todos possam ter acesso de forma fácil, de preferência face a face para se obter um melhor entendimento entre as partes, a fim de se for possível haver uma troca de conhecimento de forma facilitada através de articulações e demonstrações se o assim for necessário, pois a comunicação a distância pode dificultar um pouco quando se trata de partes com um nível de detalhes maior para se explorar, e visto que cada indivíduo tem uma maneira de interpretar o contexto, sendo assim uma comunicação centralizada e face a face pode evitar desentendimentos desagradáveis, porém cada equipe tem uma forma de se comunicar da forma que achar melhor, dentro de um ambiente corporativo, as vezes devido a distância dentro da empresa, é mais fácil se comunicar por chat do que ficar se comunicando pessoalmente, mas isso quem define é a equipe com o líder do projeto.
Para esse protótipo foi pesquisado uma ferramenta de chat que pudesse cobrir essa parte da gestão da comunicação, dentro do protótipo de sistema web para gestão de trabalhos acadêmicos. Foi encontrado o sistema de comunicação Mattermost disponível no site oficial <https://mattermost.com>. Esse sistema de comunicação é
open source que é um projeto de "código aberto"sobre a licença MIT para qualquer
um poder colaborar com o projeto.
O próprio site oficial possui documentações de como instalar e integrar dentro de qualquer plataforma conforme os requisitos mínimos estipulados por ela. Ela traz diversos recursos para integrar várias equipes de projetos em forma de canais, onde cada canal pode representar um projeto do protótipo de gestão que foi cadastrado ou vinculado ao usuário através de convites.
A primeira tela é a de acesso ao sistema de chat onde o usuário informa o usuário e senha para fazer o login no sistema conforme mostra a figura 9. Após o login efetuado, o usuário visualiza a tela principal, onde é possível visualizar todos os canais de chat e verificar as mensagens de cada grupo, como mostra a figura 10. No canto esquerdo da tela principal, possui os canais que podem ser representados por projetos cadastrados, e esses canais são de responsabilidade do próprio usuário que criou o projeto no protótipo de sistema web de gestão de trabalhos acadêmicos, criar e fazer convite dos envolvidos para que seja possível ter uma conversa em grupo entre todos os envolvidos. O orientador geralmente ficará responsável em criar esse canal na
ferramenta de chat e vincular todos os envolvidos após cria o projeto no sistema web de gestão.
Figura 9 - Tela de acesso do mattermost
Fonte: Mattermost (2019)
Figura 10 - Tela principal do mattermost
Fonte: Mattermost (2019)
Através da opção de cadastro do canal com ícone “+” localizada no canto esquerdo da tela principal conforme figura 10, é possível definir uma nova equipe para um novo projeto como mostra a figura 11. Na tela de cadastro do novo canal, é possível definir se o canal é público onde todos os usuários do chat podem visualizar as mensagens, ou privado em que apenas a sua equipe pode visualizar e interagir com os membros. Você define um nome para o canal e dois tipos de mensagens, um para quando alguém novo entrar no canal poder visualizar, como uma mensagem de boas vindas ou regras, e uma mensagem que irá aparecer apenas quando existir possíveis bugs.
Figura 11 - Tela de canais do mattermost
3 MATERIAIS E MÉTODOS
O presente trabalho teve sua metodologia dividida nos seguintes tópicos: seção
3.1 faz o levantamento dos requisitos em requisitos funcionais e não funcionais para o protótipo, seção 3.2 mostra as telas criadas do protótipo.
3.1 LEVANTAMENTO DE REQUISITOS
Essa seção tem o objetivo de descrever os requisitos levantados para a construção do protótipo do sistema web, que foi feito através de uma técnica de
Brainstorming entre os envolvidos do projeto, dentre eles, participantes tanto do corpo
docente quanto discente da Universidade Federal de Santa Catarina.
Foram separados os requisitos do projeto em requisitos funcionais e requisitos não funcionais. Os requisitos funcionais descrevem o que o sistema fará ou operações de utilidade para o usuário, já os requisitos não funcionais definem como o sistema fará, não são menos importantes, visto que tratam mais sobre a estrutura, padrões visuais, portabilidade escalabilidade, segurança e outras (MACHADO, 2015).
Segundo Sommerville (2007) na engenharia de software, o modelo incremental trabalha com pequenas entregas do sistema, primeiramente é desenvolvido o sistema com funcionalidades básicas que é o produto essencial, e depois feito peque- nas entregas referente a outras funcionalidades. Com a primeira entrega, o sistema passa por uma avaliação do cliente que busca resolver suas necessidades, é levan- tado os pontos de melhorias e feito um novo planejamento para uma próxima entrega, com novas funcionalidades e outras modificadas. E para esse protótipo foi utilizado o modelo incremental, que atendeu as necessidades básicas conforme levantadas nos requisitos.
Para o desenvolvimento e os testes do protótipo, foi usado um computador local e uma hospedagem na amazon para poder ficar 24 horas e 7 dias na semana online para outros usuários testarem o protótipo que está disponível em: http://ec2-18-231-
