Escolar Documentos
Profissional Documentos
Cultura Documentos
EF.181.r1
DEDICATÓRIA
A mim mesmo,
EF.181.r1
AGRADECIMENTOS
Agradeço — mais uma vez — à Escola Profissional de Aveiro pela oportunidade que
me facultaram com a AE2EP e mesmo em diversas outras atividades promovidas pela
escola, cumpre expor o quanto isto tudo me ajudou a crescer como pessoa e
profissional. Obrigado por tudo e todos.
Agradeço ao meu ODE Samuel Teixeira por exortar-me sempre para o meu melhor,
mesmo quando falho, sem desistir. A sua orientação me ajudou a superar muitos
desafios e travas internas.
Agradeço ao meu sénior Mykola Davydiv mais uma vez pela estádia impecável ao longo
desses três anos e boa companhia e pelos ensinamentos de sua área e não só.
Agradeço ao meu coach João Paulo dos Santos por esparsos momentos em que tive a
oportunidade de absorver conhecimentos e instruir-me em como ou não executar algo.
ii
EF.181.r1
ÍNDICE
Dedicatória .......................................................................................................................i
Agradecimentos............................................................................................................... ii
Introdução....................................................................................................................... 1
Desenvolvimento ............................................................................................................ 3
Conclusão..................................................................................................................... 20
Bibliografia .................................................................................................................... 20
Anexos............................................................................................................................ A iii
Anexo I – Anteprojeto PAP ......................................................................................... A
Resumo ................................................................................................................... A
EF.181.r1
INTRODUÇÃO
A Roboplan, desde que comecei a estagiar na EPEP, enfrentava uma carência de
um sistema sólido para gerir a sua frota de veículos. Anteriormente, os gestores lidavam
com documentos em papel, e os colaboradores faziam as requisições diretamente a
eles. Então, o meu sénior — Mykola Davydiv —, que estava no prenuncio de engendrar
uma aplicação que viria ser conhecida mais tarde como «Gestão de Viaturas», desafiou-
me a ajudá-lo com o seu desenvolvimento. Cumpria que a aplicação tivesse as
seguintes capacidades:
• Requisições de veículos;
• Documentações;
• Abastecimentos.
À medida que o projeto avançava outras competências foram integradas à aplicação.
Em produção a aplicação saiu-se muito bem. Junto com os gestores em momentos de
brainstorm discutíamos e ideávamos como aperfeiçoar a aplicação.
1
Soma-se que a aplicação necessitava ser migrada da plataforma — low-code —
Zoho para uma aplicação interna. Para tal, cumpria que alguém desenvolvesse a
aplicação à EPEP e foi-me oferecido a oportunidade de desenvolvê-la. Aos moldes da
aplicação «Gestão de Viaturas» desponta a nova «Gestão de Frota». Para esse efeito,
a aplicação foi desenvolvida com foco em dois campos: o back-end e o front-end,
utilizando diversas ferramentas e dois frameworks — o Laravel e o Vue.js.
APRENDIZAGENS MOBILIZADAS
Na escola, adquiri uma base sólida em conceitos fundamentais de programação
e desenvolvimento de software. Durante o meu percurso, explorei conceitos basilares
que serviram como alicerce para o meu desenvolvimento profissional. Além disso, tive
a oportunidade de mergulhar na programação em Arduino, uma plataforma de eletrónica
de código aberto e fácil utilização. Embora possa parecer distante do desenvolvimento
web, essa experiência foi valiosa, pois ajudou a fortalecer a minha lógica de
programação e a compreender os princípios fundamentais por trás do funcionamento
dos sistemas computacionais. O professor João Paulo dos Santos foi de grande ajuda
para o design do software.
EF.181.r1
Por meio do Laravel 10, um framework PHP elegante e poderoso que simplifica
o processo de desenvolvimento de aplicações web aprendi a criar aplicações robustas,
seguras e de alto desempenho de forma eficiente. Explorei conceitos avançados como
routing, middleware, Eloquent ORM, authentication e authorization, além de utilizar
recursos poderosos como queued jobs (filas de trabalhos de segundo plano) e
agendamento de tarefas para otimizar o desempenho das minhas aplicações.Tudo sob
a alçada da arquitetura MVC (Model View Controller) que permite o desenvolvimento
descomplicado e inteligente do back-end da aplicação.
Estudei o Inertia.js, uma biblioteca que traz uma nova abordagem na construção 2
de aplicativos web orientados pelo servidor, denominada de «o monólito moderno».
Com o Inertia, é possível criar aplicativos single page application (SPA), totalmente
renderizados no lado do cliente, sem a complexidade dos SPAs modernos, aproveitando
os padrões já existentes do lado do servidor. Ele não requer roteamento no cliente nem
uma API separada, permitindo construir controladores e visualizações de página como
de costume, com especial integração para o Laravel e o Vue.js.
Por fim, o Postman emergiu como uma ferramenta indispensável para testar e
depurar as minhas aplicações. A sua interface intuitiva e poderosas funcionalidades
EF.181.r1
permitiram-me automatizar testes, monitorar o desempenho das APIs e garantir a
qualidade do software desenvolvido.
DESENVOLVIMENTO
Diante o desafio oferecido a mim pela EPEP, tornei a investigar no mercado as
tecnologias que melhor se qualificavam para o que a «Gestão de Frota» cumpria ser e
que fossem descomplicadas e intuitivas na experiência de desenvolvimento (DX). Com
efeito, cheguei a conclusão de que as ferramentas que melhor me atenderiam seriam o
Laravel, o Vue.js e o Inertia.js. Prontamente, reportei ao meu sénior e o mesmo assentiu.
À título de curiosidade, na EPEP utiliza-se o Laravel numa aplicação interna que acede
a uma base de dados interna.
EF.181.r1
Este projeto é basicamente uma clone do Google Drive, onde pode-se fazer subir 5
ficheiros, pastas, pastas com pastas e/ou mais ficheiros, mantendo sua estrutura. E
depois fazer o descarregamento destes ficheiros/pastas. Ademais, quando se faz o
descarregamento de um ficheiro só é feito o download dele com o próprio ficheiro;
quando é feito dois ou mais arquivos ou pastas é comprimido num .zip com o nome do
diretório atual, por exemplo:
EF.181.r1
Outrossim, é possível fazer o partilhamento de pastas e/ou ficheiros entre usuários. Nas
abas «Shared with Me» e «Shared by Me», respetivamente «Partilhado por mim» e
«Partilho comigo», por exemplo:
Aqui eu partilhei dois itens com o «joao.pato@sapo.pt», ele, por sua vez, pode
descarregar estes itens. Isto é a aba «Partilhado comigo», para quem partilhou os itens
poderia ver na aba «Partilhado por mim» os itens partilhados. Por fim, a aba «Trash» é
onde se aloja os ficheiros e pastas deitadas fora, sendo, porém, mantidas na lixeira até
que o usuário decida livrar-se de eles de uma vez — ou restaurá-los. Isto ocorre, porque
os arquivos/ficheiros no código têm um atributo chamado «soft delete» que permite que
estes sejam apenas filtrados da lista de ficheiros/pastas do usuário e se o mesmo
desejar pode novamente torná-los visíveis, isto é, restaurá-los.
EF.181.r1
Laravel aceitam um URI (Uniform Resource Identifier) e uma closure fornecendo um
método muito simples e expressivo de definir rotas e comportamento sem arquivos
complicados de configuração de roteamento. O Laravel categoriza as rotas em quatro
tipos principais:
• API
• Auth(entication);
• Channels;
• Console;
• Web.
Como mencionado nas aprendizagens adquiridas na EPEP, não utilizei a API, pois
o Inertia permite uma melhor integração com a web sem necessitar de utilizar APIs por
detrás. A seguir uma evidência das rotas que escrevi e também uma elaboração acerca
delas:
EF.181.r1
Depois de receber uma requisição em qualquer destas rotas a requisição é tratada no
controller, no caso no FileController.php. Por exemplo, a rota «trash» servirá para
explicar como é tratado uma requisição:
8
EF.181.r1
É possível tratar de muitos assuntos somente neste simples trecho de código primeiro
faz-se um recuperamento do argumento na linha 3; já na linha faz-se um query de todos
os Files que estão atualmente na lixeira, a partir do método «onlyTrashed()», depois faz-
se mais alguns filtros; da linha 10 a 20 é feita a lógica para a busca, onde mediante o
que o usuário mandar como argumento na request para a busca é feito um query que
busca os registos a ver com a busca, então o resultado é paginado, isto é, divido com
xis páginas mediante o tamanho da paginação que no meu caso é 10 itens, ou seja,
numa query onde devolve-me 145 itens terei 15 páginas, 14 com 10 itens e a última com
5, e então a rol de itens é tratada por meio de um Resource que pega a query que vem
dopada de dados que, por vezes, é indesejável que o usuário tenha acesso e só passa-
se para frente os campos desejados ou datas formatadas, por exemplo. Por fim, se a
request vier pedindo JSON, ou seja, apenas dados, nada de re-renderizar a página. Fiz
isto para a ver o famoso scroll infinito, mas comum de ser visto em redes sociais, que
quanto mais descemos em busca de novo conteúdo, mais surge; caso, então, o usuário
esteja acedendo a rota «trash» pela primeira vez é-lhe renderizada a página e enviada
a query com os Files. Caso o usuário não tenha nenhum item na lixeira ou em qualquer 9
outra aba é-lhe mostrado uma mensagem de erro. Esta é tratado diretamente no front-
end, com o Vue e suas diretivas:
Neste exemplo de projeto o CRUD (Create, Read, Update, Delete) foi tratado como bem
visto antes, através das rotas juntamente com o controller:
EF.181.r1
10
Neste projeto a autenticação foi tratada a partir do starter kit Laravel Breeze. Laravel
Breeze é uma implementação mínima e simples de todos os recursos de autenticação
do Laravel, incluindo login, registo, redefinição de senha, verificação de e-mail e 11
confirmação de senha. Além disso, o Breeze inclui uma página simples de “perfil” onde
o usuário pode atualizar seu nome, endereço de e-mail e senha.
EF.181.r1
• Administradores: Possuem acesso total ao sistema, incluindo a criação, leitura,
atualização e exclusão de produtos, pedidos e usuários.
• Gerentes: Podem visualizar e editar produtos e pedidos, mas não podem criar ou excluir
usuários.
• Vendedores: Podem visualizar produtos e pedidos, mas só podem editar pedidos.
• Clientes: Podem visualizar produtos e realizar compras.
Para implementar uma ACL para este cenário, podemos utilizar uma estrutura de dados
simples, como uma matriz bidimensional. As linhas da matriz representariam os tipos de
usuários, enquanto as colunas representariam as operações que cada tipo de usuário
pode realizar em cada recurso:
EF.181.r1
Criaremos uma política «ProductPolicy» para definir as permissões de acesso aos
produtos. Arquivamos a política em «app/Policies/ProductPolicy.php»:
13
Nosso controlador de produtos pode utilizar métodos como authorize para verificar se o
usuário possui permissão para uma determinada ação:
EF.181.r1
14
Em seu modelo de usuário, você pode definir um relacionamento com a tabela de roles
e implementar métodos para verificar se o usuário possui um determinado role:
EF.181.r1
15
EF.181.r1
Para a principal funcionalidade da aplicação encontrei duas alternativas
concorrentes: o Vue Fullcalendar (Shaw, 2009) e o Vue Schedule-X (Österlund, 2020).
O primeiro é uma poderosa biblioteca JavaScript que oferece um componente de
calendário completo e personalizável para aplicações construídas com a framework
Vue.js. Ela falha, porém, em ser mobile-friendly, ou seja, em telas menores o calendário
não se comporta como esperado, antes como se estivesse num desktop com a tela
pequeníssima. Já o Vue Schedule-X é uma biblioteca de componentes Vue.js que
oferece uma solução elegante para a construção de calendários e agendadores de
tarefas. Com o Vue Schedule-X pude facilmente criar interfaces visuais atraentes para
gerir eventos, compromissos e horários, permitindo funcionalidades como arrastar e
largar, redimensionamento de eventos e muito mais. A sua integração perfeita com o
framework Vue torna-o numa escolha flexível e eficaz. O exemplo de um calendário no
desktop e depois no mobile:
16
EF.181.r1
17
EF.181.r1
porque a aplicação tolhe o gestor ou mesmo o colaborador de fazer reservas em cima
de outras, algo que é capaz de ocorrer oralmente. Para esse efeito, a aplicação
mostrava ao colaborador as reservas de seus colegas e suas para que ele pudesse
analisar e reservar onde lhe coubesse. Nesta nova aplicação «Gestão de Frota», a
missão inicial mantém-se, é ainda, porém, reforçado alguns conceitos e mais bem
desenvolvido alguns outros. Com efeito, uma vez que a aplicação foi feita do zero sem
nenhuma plataforma a quem a aplicação subjaz permitiu-se que a ela fosse feita sob
medida para a EPEP, assim transpondo os limites impostos pela plataforma Zoho.
CRONOGRAMA DE EXECUÇÃO
Calendarização
Tarefas / Atividades / Etapas
MAR
ABR
MA I
JAN
JUN
FEV
JUL
(…)
RECURSOS UTILIZADOS
Descrição Tipologia Quantidade
EF.181.r1
(materiais, equipamentos, espaços,
RH)
PhpStorm Software n/a
LaraDumps Software n/a
Docker Software n/a
Visual Studio Code Software n/a
DBeaver Software n/a
Postman Software n/a
Git Software n/a
(…)
19
(…)
EF.181.r1
CONCLUSÃO
Este projeto marcou um marco significativo em minha jornada profissional,
representando não apenas uma oportunidade de aplicar, mas também de aprofundar
meus conhecimentos em uma variedade de tópicos relevantes. Ao longo do processo,
fui desafiado a assimilar novos conceitos e habilidades, contribuindo para meu
desenvolvimento pessoal e profissional. A experiência de participar ativamente do
desenho, discussão e implementação do projeto foi verdadeiramente enriquecedora,
proporcionando insights valiosos e oportunidades de aprendizado inigualáveis.
BIBLIOGRAFIA
Adermann, N., & Boggiano, J. (n.d.). Composer. Introduction - Composer. Retrieved
March 8, 2024, from https://getcomposer.org/doc/00-intro.md
Haaziq, K. (2021). Radix Vue | Unstyled, accessible components for building high-quality
design systems and web apps in Vue. https://www.radix-vue.com/
Otwell, T. (2023, February 14). Laravel. Why Laravel? - Laravel 10.x - The PHP
Framework For Web Artisans. https://laravel.com/docs/10.x#why-laravel
Reinink, J., Dekker, C., Pittman, J., Archer, J., & Maduro, N. (n.d.). Inertia.js. Retrieved
March 8, 2024, from https://inertiajs.com/
EF.181.r1
Shaw, A. (2009). FullCalendar. FullCalendar - JavaScript Event Calendar.
https://fullcalendar.io/
21
EF.181.r1
ANEXOS
Fundamentação do Projeto
EF.181.r1
ANEXO II – PLANO DE CONCEÇÃO E DESENVOLVIMENTO
Tema da PAP
Resumo
Objetivos do Projeto
A
desenvolvimento DEZ JAN FEV MAR ABR MAI JUN JUL
Recursos Necessários
Tipologia
Descrição (materiais, equipamentos, espaços, Quantidade
RH)
EF.181.r1