Universidade Federal de Minas Gerais

Ensino Básico e Profissional

Colégio Técnico (COLTEC)

Relatório Final

Nome do(a) estagiário(a): Bernardo Venancio Cunha Oliveira

Número da carteira de identidade: MG-19.491.552
Curso e ano de conclusão: Desenvolvimento de Sistemas 2023
Endereço e telefone do(a) Estagiário(a): (31)98916-4798 Rua São Cristóvão 611, Leblon,
Belo Horizonte
Nome da Empresa: Departamento de Física, ICEx, UFMG
Setor que desenvolveu o estágio: Eita! (Espaço de inovação, tecnologia e aprendizado)
Data do início do estágio: Agosto 2022
Total de horas cumpridas no período: 320

Agosto
2023
Universidade Federal de Minas Gerais
Ensino Básico e Profissional
Colégio Técnico (COLTEC)

Relatório Final

Relatório de Estágio apresentado à Coordenação do

Curso de Desenvolvimento de Sistemas do Colégio
Técnico da Universidade Federal de Minas Gerais
como requisito parcial para conclusão de curso.

Nome do(a) Estagiário(a): Bernardo Venancio Cunha

Oliveira
Professor(a) orientador(a): Elmo Salomão Alver
Professor(a) co-orientador(a):

Agosto
2023

2
Conteúdo
1 Objetivo do Estágio 4
2 Descrição da Empresa 5
3 Descrição do setor/área do estágio 6
4 Descrição das Atividades Desenvolvidas 7
5 Conceitos abordados durante o estágio 12
6 Descrição da rotina de trabalho na área de atuação 13
7 Discriminação dos equipamentos usados no estágio 14
8 Aprimoramento de sua vida profissional 15
9 Condições de trabalho 16
10 Análise comparativa do curso e estágio 17
11 Conclusão final 18

3
1 Objetivo do Estágio
O estágio teve como objetivo colaborar com meu crescimento profissional
e acadêmico, focando no desenvolvimento web, utilizando metodologias ágeis
e fomentando o trabalho em grupo. Trabalhei com a equipe de
desenvolvimento do meliora.ufmg.br no projeto de aprimoramento da segunda
versão da plataforma, auxiliando no desenvolvimento da mesma.
No desenvolvimento web, foi apresentado tecnologias bastante utilizadas
no mercado de trabalho, algumas já vistas ao decorrer do curso e outras sendo
versões diferentes das mesmas. Em relação às linguagens de programação
utilizadas, foram as seguintes: Javascript e PHP (HTML e CSS também foram
usados porém não se encaixa exatamente como linguagens de programação),
em conjunto com algumas ferramentas para auxiliar no desenvolvimento, como
o framework PHP Laravel, a biblioteca do Javascript Jquery e o banco de dados
MySQL.
Além disso, o desenvolvimento interpessoal também foi trabalhado, visto
que frequentemente era reportado com a equipe sobre os andamentos do
projeto, bem como a divisão de tarefas que em geral era realizada de forma
semanal.

4
2 Descrição da Empresa
No setor de física da UFMG, há o espaço físico que fica localizado o Eita!
(Espaço de inovação, tecnologia e aprendizado), que foi o setor específico onde
o estágio foi realizado, lá são desenvolvidos diversos projetos que reúnem
estudantes de diversos cursos da graduação e também do técnico, todos
trabalhando juntos para desenvolver projetos multidisciplinares.
No EITA!, o desenvolvimento de habilidades técnicas e de conhecimentos
específicos são estimulados juntamente com o de habilidades sociais, por meio
do trabalho em equipe, do estímulo ao pensamento crítico e da comunicação
oral e escrita para o público - todos requisitos para empregabilidade de uma
força de trabalho moderna.
Neste espaço, já foram realizados diversos projetos diferentes, e tem vários
outros em andamentos, e podem ser vistos através do site.

5
3 Descrição do setor/área do estágio
No Eita! há diversos projetos, o projeto do qual eu fiz parte foi o
Meliora, que é um site onde o professor envia perguntas para alunos
responderem durante as aulas, auxiliando no aprendizado dos estudantes. Um
diferencial do Meliora é a capacidade de se obter relatórios dos alunos e das
turmas cadastradas no banco de dados do site, assim o professor pode ter uma
visualização do desempenho da turma de acordo com o número de acertos.
Inicialmente éramos três pessoas trabalhando no projeto, uma era
responsável por monitorar as tarefas desenvolvidas, além de selecionar novas
tarefas, quebrando os problemas em partes menores e distribuindo-as para o
restante de acordo com as competências e disponibilidade, e que eram
revisadas semanalmente, usando conceitos de metodologias ágeis.

O desenvolvimento web é composto de duas frentes distintas, o front-end,

que lida com a parte visual e interação direta com o usuário, e o back-end, que
cuida da lógica interna, gerenciando dados e funcionalidades da aplicação. O
Laravel (framework PHP utlizado) auxilia tanto no front-end quanto no
back-end, porém precisa ser combinado com outras tecnologias para o
front-end, que no caso foi utilizado CSS, Javascript e bibliotecas do Javascript
para tornar o site mais agradável para o usuário.
Além do professor, alunos também utilizarão o Meliora, e principalmente
por conta disto, é necessário também que o site fique compatível para
dispositivos mobile, pois o objetivo é que os alunos possam responder às
questões durante o tempo de aula, e não há um aplicativo. Para solucionar isso
o framework Laravel tem ótimas soluções para layouts dinâmicos utilizando as
views.

6
4 Descrição das atividades desenvolvidas
As atividades realizadas durante o período vão desde a simples
mudanças de layout, quanto correções de bugs e implementação de novas
funções no site, a depender da necessidade, visto que as tarefas disponíveis
tinham diferentes classificações quanto à urgência, em que bugs eram
prioridade, e em seguida vinham correções e melhorias.
No início eu apenas era responsável por pequenas correções e mudanças
no layout, como mudanças na disposição dos elementos da página,
traduções de avisos do Laravel (por padrão do framework os avisos são
todos em inglês), adição de ícones entre outros.
Um exemplo pode ser visto na imagem à seguir, onde aparece no canto
superior direito da tela o ícone de usuário e também há menus dropdown
que também fiz alterações.

As páginas foram feitas utilizando o template Blade disponível no

Laravel, que auxilia no desenvolvimento, é semelhante a uma página PHP,
porém com alguns facilitadores para tornar o desenvolvimento mais
amigável e a página mais dinâmica, ou seja, menos estática. Os ícones
utilizados no site vêm principalmente da biblioteca Font Awesome, que
disponibiliza diversos ícones para serem utilizados de forma gratuita.
Antes de qualquer alteração no site, era apresentado nas reuniões
semanais o resultado alcançado, e caso aprovado era feito um merge
através do GitHub que continha o projeto. Caso não fosse aprovado ou
então a tarefa não tivesse sido concluída era feito uma análise de como
proceder, podendo mudar a pessoa responsável pela tarefa ou tirar a tarefa
de produção e retornar para a lista de tarefas a fazer (o responsável pelo
projeto então verificava se era viável ou não a realização da tarefa, ou se
uma modificação na ideia inicial era necessária).

7
 Após algum tempo passei a realizar tarefas mais avançadas, que
dependiam de um conhecimento maior das tecnologias utilizadas, e passei
a implementar também novas funções e trabalhar com o back-end, ao invés
de apenas pequenas correções e leves melhorias no layout e como o
Laravel é um framework baseado no padrão MVC
(Model-View-Controller), foi necessário aprender sobre ele. O padrão
MVC separa a aplicação em três componentes principais:
Model: Representa a camada de dados da aplicação, lida com a lógica dos
negócios, a interação com o banco de dados e a manipulação dos dados.
View: Representa a camada de apresentação da aplicação. Lida com a
renderização dos dados para o usuário, frequentemente construída
utilizando o mecanismo de template Blade, que permite criar páginas
reutilizáveis e dinâmicas para a web, oferecendo recursos como loops,
heranças de layout, sub-views, entre outros.
Controller: Representa a camada de controle da aplicação. Ele recebe as
requisições do usuário, controla a ação entre model e view e retorna as
respostas apropriadas.
O Laravel facilita a implementação e gerenciamento do padrão MVC,
fornecendo uma estrutura sólida para organizar os models, views e
controllers. Também apresenta recursos para facilitar a interação com o
banco de dados, autenticações, validações, gerenciamento de sessões
(como no caso do Meliora em que haviam 3 tipos diferentes de usuário:
Professor, Aluno e Administrador) e muito mais.
Um exemplo mais avançado onde tive que usar estes conceitos foi na
adição de foto de perfil para os usuários, onde foi criado apenas o campo
na parte dos usuários para armazenar o path (caminho físico do local onde
está armazenado o arquivo) da imagem e eu fiquei responsável em
implementar este recurso. Na parte do controller, criei as funções para
adicionar e remover a foto de perfil, e adicionei as lógicas necessárias para
o bom funcionamento, como a validação do tipo de arquivo para conferir se
é realmente uma imagem que o usuário está tentando adicionar, no caso de
excluir uma foto, antes de alterar no banco de dados, é necessário excluir a
foto antiga (pois senão apenas manualmente seria possível a remoção visto
que perderia o acesso a ela), entre outras verificações. Na parte das views,
elas interagiam com o banco de dados para verificar se existia foto
adicionada, e caso houvesse o usuário poderá visualizá-la nas páginas em
que ele acessasse, caso contrário ficou decidido para apresentar um default,
que foi feito utilizando funções que o Blade fornece. Além dessas citadas,
forem feitos várias outras tarefas, como a autenticação dos usuários ao
acessar as páginas (como alunos tentarem acessar páginas feitas

8
exclusivamente para professores) que foi solucionado utilizando
middlewares nas rotas, para que assim certos endereços só fossem
possíveis acessar caso o tipo de usuário fosse compatível.
Um ponto muito interessante que sempre foi destacado nas reuniões era
a liberdade que tinha ao fazer modificações, nós que trabalhamos no
projeto podíamos modificar qualquer parte do código e pensar na própria
solução, sem ficar preso a um tipo específico de resolução, abordagem esta
que instiga a aprender e descobrir diversas formas diferentes pensando na
melhor forma de resolver o problema.

9
10
11
5 Conceitos abordados durante o estágio
No decorrer do curso no Coltec fomos introduzidos a várias linguagens
de programação, como C, Javascript, PHP, além de outras tecnologias
como a biblioteca Jquery e Ajax que foi utilizado diversas vezes durante o
estágio, bootstrap, CSS, HTML (apesar do Laravel utilizar o template
blade, há diversas semelhanças), banco de dados. Toda essa base que foi
construída serviu para auxiliar no aprendizado de novas tecnologias
necessárias.
Apesar de eu não ter construído tabelas do banco de dados, a todo
momento precisava utilizá-lo, seja fazendo queries ou então utilizando
funções disponíveis no Laravel para manipulação do dados(que se
assemelha com as queries porém de maneira simplificada). Para fazer
páginas dinâmicas, Javascript foi amplamente utilizado, além de bibliotecas
do mesmo, em destaque o Jquery e Ajax para requisições.
Vale ressaltar também o trabalho em equipe, que melhorou minha
comunicação, além de ter que fazer os códigos pensando também no
entendimento das outras pessoas, levando a melhorar a maneira que eu
programo.

12
6 Descrição da rotina de trabalho na área de atuação
As tarefas eram feitas seguindo conceitos de metodologias ágeis, e
semanalmente eram feitas reuniões para discutir o progresso e quais seriam os
próximos passos. Nestas reuniões, as tarefas semanais eram passadas levando
em conta o tempo estimado de conclusão para que fosse possível concluí-las
em tempo hábil. Casos em que a tarefa se mostrava mais complexa do que o
esperado, a responsável por distribuir as tarefas era solícita para auxiliar no
andamento da tarefa.
A rotina diária sempre foi bastante flexível, pois durante todo o período o
estágio foi realizado de forma remota, então eu sempre pude ter a liberdade de
cumprir as horas diárias no período do dia que eu julgasse conveniente.
Um ponto a se destacar é que as reuniões não serviam apenas para
apresentar e receber as novas tarefas, haviam também discussões sobre erros
encontrados, sugestões para o site, como novas melhorias, modificações no
layout entre outros.

13
7 Discriminação dos equipamentos usados no estágio
As tarefas foram feitas utilizando um notebook pessoal, visto que o estágio
foi inteiramente de forma remota.
Quanto aos softwares utilizados, foram os seguintes: Microsoft Teams,
no qual era feita a distribuição das tarefas e reuniões; GitHub Desktop para o
versionamento do código; Visual Studio Code como editor de texto; XAMPP
para acessar o servidor local e o banco de dados, o banco utilizado foi o
MySQL.

14
8 Aprimoramento de sua vida profissional
O estágio foi muito útil para a minha vida profissional, pois eu pude
colocar em prática o que foi aprendido no Coltec, numa experiência real com
um projeto numa escala muito maior do que os utilizados para fins didáticos.
Outro ponto importante foi a melhora na minha capacidade de trabalhar em
equipe e me comunicar, me tornando mais produtivo do que antes.
As tecnologias utilizadas também servem de destaque para o mercado de
trabalho, pois o Laravel é amplamente utilizado e a experiência adquirida me
abre portas para eventualmente trabalhar na área de desenvolvimento web
utilizando tal framework.
Realizar o estágio também foi uma confirmação do que desejo para o
futuro, pois foi uma experiência muito positiva e tenho a certeza de que desejo
seguir na área da programação, que influenciou na escolha da minha faculdade,
pois optei por cursar Ciência da Computação.

15
9 Condições de Trabalho
Como mencionado anteriormente, o estágio foi feito integralmente de maneira
remota, apesar disso a comunicação entre os integrantes era de extrema importância,
tanto para o auxílio nas tarefas quanto para resolver outros assuntos, sempre muito
respeitosos e levando a palavra de todos em consideração.Além da reunião semanal
com os membros, por diversas vezes nos juntamos para tirar dúvidas e pensar em
soluções durante a semana caso houvesse muitas complicações na realização das
atividades.
A maior dificuldade encontrada durante o estágio, foi conciliar os estudos com
as tarefas, visto que durante o período eu estava num cursinho preparatório para o
Enem, porém a equipe era muito compreensível quanto a isso, sendo muito flexível
quanto aos horários tanto de reunião quanto de entrega das tarefas para que eu pudesse
focar na prova quando me aproximei da data de realização da mesma. Em resumo, era
um ambiente de trabalho muito prazeroso de participar.

16
10 Análise comparativa do curso e do estágio
Todo o conhecimento construído durante o curso foi de extrema
importância na realização do estágio. Apesar de algumas tecnologias utilizadas
nele não terem sido abordadas no Coltec, a lógica da programação se mantém a
mesma, o que muda é a sintaxe e algumas particularidades a depender da
tecnologia. Ou seja, com a base que o curso oferece o esforço exigido para
aprender novas linguagens, frameworks e similares se torna muito menor.
O trabalho em equipe é outro ponto forte do colégio, diversos trabalhos
e atividades eram realizadas em grupo, e por conta disso não tive dificuldades
em realizar as atividades do estágio que exigiam uma cooperação entre os
membros, pois já estava acostumado a realizar trabalhos em conjunto.
A parte que eu senti uma maior diferença foram quanto aos prazos, no
estágio o prazo se renovava a cada semana, ou seja, tinha a sensação constante
de ter que realizar as tarefas, quanto que no curso havia uma maior
tranquilidade neste quesito, pois ao realizar uma tarefa os próximos prazos
geralmente eram distantes uns dos outros, e permitia que as atividades fossem
postergadas sem risco de perder os prazos. Apesar disso, no estágio sempre
foram muito flexíveis quanto a prazos, respeitando o tempo de aprendizado de
cada um.

17
11 Conclusão Final
O estágio foi de suma importância para mim, pois foi minha primeira
experiência real na área de desenvolvimento de software, conheci também
pessoas incríveis que já possuem muito mais experiência do que eu, e esse
contatos serviram para me mostrar novos horizontes e enxergar diversas
possibilidades a mais na área.
Como já foi mencionado, o estágio também me deu um norte em como vou
prosseguir, pois depois de realizá-lo tive a certeza do curso que seguiria na
faculdade, que foi Ciência da Computação. Quanto à programação, também foi
útil para eu experimentar tanto a programação front-end quanto a back-end, e
agora sei que a minha preferência é na área de back-end, pois foi o que mais
tive afinidade.

18