Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
IREIfolitécnico
1 daGuardaPolytechnicof Guarda
RELATÓRIO DE PROJETO
Licenciatura em Engenharia Informática
Mário Bruno Morgado Costa
4-’
janeiro 1 2018
Escola Superior de Tecnologia e Gestão
Instituto Politécnico da Guarda
RELATÓRIO DE ESTÁGIO
CANTEEN MANAGEMENT SYSTEM APP
MÁRIO BRUNO MORGADO COSTA
RELATÓRIO PARA A OBTENÇÃO DO GRAU DE LICENCIATURA EM
ENGENHARIA INFORMÁTICA
(E.I)
Janeiro/2018
Relatório de Estágio 2018
Página ii
Agradecimentos
Em primeiro lugar, um agradecimento à Mestre Filipa Gaudêncio no âmbito da
disciplina de Projeto por ter facultado alguns documentos em contexto de estágio,
através dos quais foi escolhido o projeto para ser desenvolvido na Coficab Portugal.
Agradecimento, também, à Coficab Portugal por ter aceite este projeto em contexto
estágio.
Um agradecimento ao Mestre José Fidalgo pela sua disponibilidade em ajudar
nos momentos mais difíceis durante todo o percurso do estágio. Não posso, também,
deixar de agradecer ao Mestre Ricardo Almeida, gestor de projeto, pelas suas criticas
em relação ao trabalho elaborado, pois, só assim a aplicação levou o rumo certo e sem
dúvida muito útil para se poder compreender melhor o mundo do trabalho.
Um agradecimento à Eng.ª Prof. Beatriz Rebelo, docente orientadora, pela sua
disponibilidade no presente relatório e ao Instituto Politécnico da Guarda por reunir
todas as condições para me tornar num profissional melhor.
E por fim, um agradecimento muito especial a minha namorada por ser crítica na
estruturação do relatório, e por ser motivadora, sem ela não sei como ficava este
relatório.
Relatório de Estágio 2018
Página iii
Ficha de Identificação
Nome do aluno: Mário Bruno Morgado Costa
Número do aluno: 1011210
Curso: Engenharia Informática
Estabelecimento de ensino: Escola Superior de Tecnologia e Gestão (ESTG) do
Instituto Politécnico da Guarda (IPG)
Docente orientador de estágio da ESTG: Eng.ª Prof. Beatriz Rebelo
Instituição de estágio: Coficab-companhia De Fios E Cabos Lda
Logótipo da instituição:
Morada EN 18.1-Km 2,5 Lote 46 - Vale de Estrela 6300-230 Guarda
Telefone: +351 271 205 090
Fax: +351 271 205 099
Email: [email protected]
Horário de funcionamento: 8:30h / 17:30h
Duração do estágio: 280 horas
Relatório de Estágio 2018
Página iv
Resumo
O presente relatório tem como objetivo apresentar o trabalho desenvolvido por
Mário Bruno Morgado Costa no âmbito do projeto em contexto de estágio, realizado na
Coficab Portugal, do Curso de Engenharia Informática, do Instituto Politécnico da
Guarda.
Descreve o projeto “Canteen Management System APP” na área de
programação para várias plataformas móveis conhecidas, que foi planeado e
desenvolvido na Coficab Portugal.
A aplicação em si visa facilitar a vida aos utilizadores da Coficab Portugal que
através do seu Smartphone podem gerir as suas refeições realizando tarefas, tais como:
marcar, editar, eliminar, ver refeições marcadas e receber notificações (alertas). Desta
forma os utilizadores não precisam de ir a um computador para gerir as suas refeições,
pois, com esta aplicação tem as suas “refeições nas mãos”.
Neste relatório vão ser detalhadas as várias fases do projeto, desde o seu
planeamento, desenvolvimento e fase de testes, com base nas metodologias utilizadas e
ao estado de arte que deu suporte à sua elaboração.
Palavras Chave:
Canteen Management System APP, Gerir Refeições, HTML5, CSS3, JavaScript
Relatório de Estágio 2018
Página v
Abstract
This paper aims to present the work developed by Mário Bruno Morgado Costa
in the scope of a project at Coficab Portugal where the internship as part of the course of
Computer Engineering at the Polytechnic Institute of Guarda took place.
It describes the project "Canteen Management System APP" in the programming
area for several known mobile platforms, planned and developed in Coficab Portugal.
The application itself aims to make life easier for Coficab Portugal employees who can
manage their meals on their smartphones: bookmark, edit, delete, view meals menus
and receive notifications (alerts), so that employees do not need to have access to a
computer to manage their meals and therefore lose time. This app would allow them to
have their "meals at reach”.
This document will identify the various phases of the project from its planning
and development to the testing phase, based on the methodologies used and the state of
art that supported its elaboration.
Key words:
Canteen Management System APP, Manage Meal, HTML5, CSS3, JavaScript
Relatório de Estágio 2018
Página vi
Índice geral
Agradecimentos ................................................................................................................ ii
Ficha de Identificação ...................................................................................................... iii
Resumo ............................................................................................................................ iv
Abstract ............................................................................................................................. v
Índice geral ...................................................................................................................... vi
Índice de Figuras ........................................................................................................... viii
Índice de Tabelas ............................................................................................................. ix
Acrónimos ........................................................................................................................ x
1 – Introdução ................................................................................................................... 1
1.1 - Motivação ............................................................................................................. 1
1.2 - Caracterização da Coficab .................................................................................... 2
1.3 - Objetivos ............................................................................................................... 2
1.4 – Etapas do estágio ................................................................................................. 4
1.5 - Estrutura do documento ........................................................................................ 5
2 - Estado da Arte ............................................................................................................. 6
2.1 - E.on Canteen ..................................................................................................... 7
2.2 - Food on the table ............................................................................................... 8
2.3 - MealBoard......................................................................................................... 9
3 - Planeamento E Desenho ............................................................................................ 10
3.1 - Metodologia ........................................................................................................ 10
3.2 - Requisitos da Cateen management System ........................................................ 11
3.2.1 - Requisitos funcionais ................................................................................... 11
3.3 - Atores e Respetivos Casos de Uso ..................................................................... 12
3.3.1 – Diagrama Casos de Uso .............................................................................. 13
3.3.2 – Descrição dos Casos de Uso ........................................................................... 14
4 - Tecnologia Usada ...................................................................................................... 15
4.1 - Ionic .................................................................................................................... 15
4.1.1 - Ionic Creator ................................................................................................ 16
4.2 - Visual Studio 2017 ............................................................................................. 17
4.2.1 - Xamarin........................................................................................................ 18
4.2.2 - Apache Cordova........................................................................................... 19
4.3 - Pencil .................................................................................................................. 20
Relatório de Estágio 2018
Página vii
4.4 - HTML5 ............................................................................................................... 20
4.5 - CSS3 ................................................................................................................... 21
4.6 - Bootstrap ............................................................................................................. 21
4.7 - JavaScript ........................................................................................................... 21
4.8 - Push notification ................................................................................................. 22
4.9 - Tecnologia SSL .................................................................................................. 22
5 - Implementação .......................................................................................................... 23
5.1 - Protótipo da aplicação “Canteen Management System App” ............................ 23
5.1.1 - Login ............................................................................................................ 23
5.1.2 - Menu inicial ................................................................................................. 24
5.1.3 - Marcar refeições........................................................................................... 25
5.1.4 - Marcar refeições convidado ......................................................................... 26
5.1.5 - Ver refeições marcadas ................................................................................ 27
5.1.6 - Avaliação da ementa .................................................................................... 28
5.1.7 - Alterar refeição ............................................................................................ 28
5.2 - 2º Protótipo da aplicação “Canteen Management System App” ......................... 29
5.2.1 - Login ............................................................................................................ 29
5.2.2 - Página inicial ................................................................................................ 30
5.2.3 - Página inicial sem marcações ...................................................................... 31
5.2.4 - Adicionar refeição ........................................................................................ 31
5.2.5 - Sidemenu...................................................................................................... 32
5.3 - Aplicação desenvolvida no Ionic .................................................................... 33
5.3.1 - Login ............................................................................................................ 33
5.3.2 - Menu da aplicação ....................................................................................... 34
5.3.3 - Marcar refeições........................................................................................... 34
5.3.4 - Ver refeições marcadas ................................................................................ 35
5.4 - Aplicação Final ................................................................................................... 35
6 - Conclusão .................................................................................................................. 38
7 - Referencias bibliográficas ......................................................................................... 39
Anexo ............................................................................................................................. 41
Relatório de Estágio 2018
Página viii
Índice de Figuras Figura 1 - Gráfico de Gantt .............................................................................................. 4
Figura 2 - E.ON Smart Canteen ....................................................................................... 7
Figura 3 - Food on the Table ............................................................................................ 8
Figura 4 – MealBoard ....................................................................................................... 9
Figura 5 - Metodologia Waterfall ................................................................................... 10
Figura 12 - Diagrama de Casos de Usos......................................................................... 13
Figura 13 - Diagrama de Casos de Usos final ................................................................ 14
Figura 6 - Pagina do Ionic .............................................................................................. 15
Figura 7 - Ionic creator ................................................................................................... 16
Figura 8 - Instalador do Visual Studio............................................................................ 17
Figura 9 – Xamarin ......................................................................................................... 18
Figura 10 - Apache Cordova .......................................................................................... 19
Figura 11 - Pencil Project ............................................................................................... 20
Figura 14 - Login, Pencil ................................................................................................ 23
Figura 15 - Menu sidemenu ............................................................................................ 24
Figura 16 - Marcar refeições .......................................................................................... 25
Figura 17 - Marcar refeições Convidado ........................................................................ 26
Figura 18 - Ver refeições marcadas ................................................................................ 27
Figura 19 - Avaliação da ementa .................................................................................... 28
Figura 20 - Alterar refeição ............................................................................................ 28
Figura 21 - Login ............................................................................................................ 29
Figura 22 - Página inicial ............................................................................................... 30
Figura 23 - Página inicial sem marcação ........................................................................ 31
Figura 24 - Adicionar refeição........................................................................................ 31
Figura 25 - Sidemenu ..................................................................................................... 32
Figura 26 - Login Ionic ................................................................................................... 33
Figura 27 - Menu aplicação ionic ................................................................................... 34
Figura 28 - Marcar refeições ionic ................................................................................. 34
Figura 29 - Ver refeições marcadas ................................................................................ 35
Figura 30 - Login ............................................................................................................ 35
Figura 31 - Página Inicial ............................................................................................... 36
Figura 32 - Marcação da refeição ................................................................................... 37
Figura 33 - Menu ............................................................................................................ 37
Relatório de Estágio 2018
Página ix
Índice de Tabelas
Tabela 1-Atores e respectivos casos de uso.................................................................... 12
Tabela 2 - Marcar refeições ............................................................................................ 41
Tabela 3 - Editar refeições .............................................................................................. 42
Tabela 4 -Eliminar refeições........................................................................................... 43
Tabela 5 -Ver refeições marcadas .................................................................................. 43
Relatório de Estágio 2018
Página x
Acrónimos
API - Application Programming Interface
APP - Application
CSS - Cascading Style Sheets
ESTG - Escola Superior de Tecnologia e Gestão
GUI - Graphical User Interface
HTML - HyperText Markup Language
HTTPS - Hyper Text Transfer Protocol Secure
IPG - Instituto Politécnico da Guarda
IOS - iPhone operating system
JS – JavaSript
SDK - software development kit
SSL - Secure Socket Layer
Relatório de Estágio 2018
Página 1
1 – Introdução
Pretende-se com este projeto desenvolver uma aplicação móvel, para várias
plataformas como Android, IOS (iPhone operating system) e Windows phone, para a
gestão das refeições dos colaboradores da Coficab Portugal, aplicando bases de
conhecimento adquiridos no curso de Engenharia Informática, do Instituto Politécnico
da Guarda. Neste projeto tenciona-se ainda aprender e aprofundar novos conhecimentos.
Esta aplicação móvel é desenvolvida em HTML5(HyperText Markup Language)
/CSS3(Cascading Style Sheets) por ser uma linguagem generalista que dá para todas as
plataformas, como IOS/ANDROID, com a vantagem de se poder reciclar o código sem
grandes investimentos por parte da empresa. Quanto à parte mais importante deste
projeto foi o desenvolvimento da aplicação, que recaiu no estudo das melhores
ferramentas e metodologias a serem adotadas para o desenvolvimento da aplicação, que
irá melhorar a vida dos colaboradores da Coficab Portugal. De igual modo, foi também
importante a parte de design elaborada por uma empresa contratada, cujo seu contributo
foi enviar imagens para serem aplicadas nesta aplicação, todo o “Backoffice” encontra-
se desenvolvido.
1.1 - Motivação
Para este projeto em contexto de estágio, inicialmente, foi escolhido o tema
refresch Coficab, que visa a melhoria do aspeto visual e do conteúdo do site da Coficab
Portugal [1], no entanto, foi sugerido na entrevista realizada no início do estágio a
alteração do projeto para Canteen Management System APP, a razão para qual se
mudou, foi a vontade de aprender coisas novas e por ser um desafio, uma vez que nunca
tinha desenvolvido aplicações para dispositivos móveis e também pela necessidade de a
empresa querer que este projeto fosse realizado, assim ambas as partes ficam a ganhar.
Relatório de Estágio 2018
Página 2
1.2 - Caracterização da Coficab
A Coficab é uma empresa de fios e cabos automotivos, a sua primeira fabrica foi
criada em 1992 na Tunísia pelo o seu fundador Grupo Elloumi e devido ao seu volume
de negócios o Grupo Elloumi criou varias empresas em todo o mundo.
Em Portugal a Coficab foi criada em 1993 para produzir fios e cabos para o
ramo automóvel e outros.
Neste momento, a Coficab Portugal está inserida no programa Portugal 2020
com o projeto designado “Inovação Produtiva” que visa o desenvolvimento de novos
produtos e na melhoria dos que já existem, tendo em vista a apresentação de soluções
tecnológicas mais adequadas aos seus clientes e contribuir para a evolução do mercado
automóvel. Este projeto de inovação produtiva permite à Coficab Portugal aumentar as
suas capacidades de produção, apostando em duas vertentes produtivas, produção de
cabos de transmissão de dados de alta velocidade e otimização da produção de fios de
secção reduzida, bem como, a criação de postos de trabalho, aumento das competências,
do volume de negócio, das exportações e da produção Nacional [1].
1.3 - Objetivos
O objetivo deste projeto em contexto de estágio na Coficab Portugal foca-se no
desenvolvimento da Canteen Management System, que é uma aplicação para os
colaboradores da Coficab Portugal gerirem as suas refeições, com o intuito de lhes
facilitar a “vida”. Para tal foram definidos os seguintes objetivos:
1. Familiarização com o ambiente de desenvolvimento em Javascript.
Uma vez que esta linguagem de desenvolvimento não foi abordada no
percurso escolar, este objetivo consiste em ser autodidata e aprender esta
linguagem.
2. Conceção e avaliação dos requisitos da aplicação a desenvolver.
Esta fase é de máxima importância, depois de levantados todos os
requisitos funcionais e não funcionais, de adquirir os conhecimentos necessários
e a tecnologia a usar, estão reunidas todas as condições para desenvolver a
aplicação.
Relatório de Estágio 2018
Página 3
3. Desenvolvimento da aplicação seguindo a metodologia Waterfall.
Este objetivo gastou grande parte do tempo de estágio, pois, o
desenvolvimento da aplicação Canteen Management Syestem APP a partir dos
requisitos levantados anteriormente, levou muito tempo. Seguindo a
metodologia Waterfall, o desenvolvimento da aplicação foi dividido em fases,
onde a fase anterior tinha que estar concluída para depois se passar para a fase
seguinte. O acompanhamento de todo este processo, pela Coficab Portugal, foi
feito em reuniões semanais, onde se efetuavam demostrações do trabalho já
realizado e se discutia o desenvolvimento da aplicação.
4. Teste
Neste objetivo e paralelamente ao desenvolvimento da aplicação,
pretende-se que sejam feitos teste em todas as fases de desenvolvimento, para
garantir que o desenvolvimento está de acordo com os requisitos pretendidos.
Pretende-se também que elementos da Coficab Portugal testem para ver se está
de acordo com o pretendido ou se existem erros a serem corrigidos. No final do
desenvolvimento da aplicação serão realizados testes críticos e exaustivos por
parte dos elementos da Coficab Portugal.
5. Apresentação e demonstração da aplicação desenvolvida.
Por último, previsto para o estágio curricular, uma apresentação geral da
aplicação final, assim como uma demostração das funcionalidades da mesma,
num contexto prático com todas as funcionalidades em execução, para que no
fim possa ser colocada em funcionamento para os colaboradores da Coficab
Portugal.
Relatório de Estágio 2018
Página 4
1.4 – Etapas do estágio
Para a realização deste projeto foram reconhecidas as seguintes etapas de
desenvolvimento, com os respetivos tempos de duração em horas:
Análise de Requisitos: 72 horas;
Estado da Arte: 120 horas;
Estudo da tecnologia a usar: 48 horas;
Planeamento: 96 horas;
Layout: 120 horas;
Construção da aplicação: 816 horas;
Testes da aplicação: 816 horas;
Escrita do relatório: 744 horas.
Na figura a baixo representa o gráfico de Gantt e as respetivas etapas e a
calendarização.
Figura 1 - Gráfico de Gantt
Relatório de Estágio 2018
Página 5
1.5 - Estrutura do documento
Em termos de estrutura do relatório, este, é composto por cinco capítulos onde é
detalhado todo o trabalho desenvolvido no estágio, assim como as explicações das
decisões do trabalho desenvolvido.
O capítulo 1 é referente à introdução onde expõe o projeto desenvolvido,
motivação na qual escolhemos o presente projeto, caracterização e aspetos fundamentais
da Coficab Portugal, objetivos previstos do plano de estágio.
No capítulo 2 faz-se um estudo da arte onde se fala das ferramentas mais
apropriadas para o desenvolvimento da aplicação, no estudo de varias aplicações
parecidas que iremos desenvolver no estágio, da tecnologia a usar e das linguagens de
programação a usar.
No capítulo 3 falamos do Planeamento, do desenho e da metodologia descrita no
processo de desenvolvimento.
No capítulo 4 é feito o levantamento dos requisitos funcionais e não funcionais
para o desenvolvimento da aplicação com base das necessidades da Coficab Portugal.
No capítulo 5 iremos tirar conclusões do trabalho realizado e do que mais se
poderia fazer e, por conseguinte, o futuro da aplicação no universo do Grupo Coficab.
No capítulo final é apresentada a referência onde está uma lista de sites visitados
que foram importantes para o desenvolvimento da aplicação.
Relatório de Estágio 2018
Página 6
2 - Estado da Arte
Uma vez definidos os critérios para o desenvolvimento da aplicação, iremos
fazer uma análise das quais aplicações existentes nesta área e verificar as vantagens das
aplicações nativas e da web, como se vai explicar a seguir.
As Aplicações nativas são desenvolvidas em código específico e criado de raiz
para cada plataforma (IOS/ANDROID/WINDOWS PHONE), o que traz benefícios ao
nível de performance. Mas, no que diz a respeito a custos exigem maior investimento e
é limitada a sua plataforma.
Nas aplicações web perde a nível de performance, mas, tem um custo mais baixo
e em geral dá para todas as plataformas e o código é reciclado, a linguagem tem como
base HTML5/CSS3, JavaScript/typeScript e bootstrap.
Da pesquisa levado a cabo, no desenvolvimento deste projeto, verificou-se a
existência poucas aplicações semelhantes ao que se pretende desenvolver. É de referir
que todas as aplicações têm um sistema de validação o “Login”. Neste caso pode variar
o sistema de validação, pode ser o nome e uma palavra passe á escolha do utilizador ou
pode ser um número e a palavra passe dados pela empresa em causa. Iremos passar a
descrever essas aplicações.
Relatório de Estágio 2018
Página 7
2.1 - E.on Canteen
A e.on Canteen é uma aplicação que está disponível no Play Store da Google e na
App Store da Apple.
A Canteen é uma empresa digital com origem na Alemanha, os colaboradores da
empresa e os seus utilizadores tem ao seu dispor um menu do dia com a possibilidade
de guardar os seus pratos favoritos, além de ser fácil de usar, tem detalhes sobre
alérgenos e aditivos que estão devidamente identificados. A aplicação por sua vez
recolhe informações para minimizar o desperdício de alimentos assim estimar qual a
porção de alimento necessária para os seus colaboradores e utilizadores, trabalhando de
uma forma sustentável dos recursos envolvidos e a Canteen lança aos seus
colaboradores e utilizadores as últimas notícias para tirar maior partido da experiencia
que oferece a aplicação.
No entanto, esta aplicação não satisfaz os requisitos da aplicação em causa, visto
que os colaboradores não conseguem guardar os seus pratos favoritos pois o menu é
variado e consoante o dia em questão. Na figura 2 está representado uma imagem da
aplicação [2] [3].
Figura 2 - E.ON Smart Canteen, Fonte [2]
Relatório de Estágio 2018
Página 8
2.2 - Food on the table
Esta aplicação disponibiliza receitas todas as semanas para o utilizador preparar
a sua refeição tendo em conta o que definiu nas suas preferências e restrições de
alimentação e a alimentos alérgicos. Além disso, se à sua refeição faltar algum
ingrediente para a sua confeção, pode criar uma lista de compras e com base na
localização mostrar qual o lugar para fazer as suas comprar poupando nas suas
refeições. Esta aplicação está disponível para Android e IOS nas suas respetivas lojas
online.
Esta aplicação também não satisfaz os requisitos da aplicação em causa, pois,
não dá para criar uma refeição baseada na receita fornecida, não dá para criar uma lista
de compras. Na figura 3 mostra uma imagem da aplicação aqui explicada [4].
Figura 3 - Food on the Table, Fonte: [4]
Relatório de Estágio 2018
Página 9
2.3 - MealBoard
Esta aplicação faz uso do que tem na despensa e, conforme as existências,
elabora uma nova receita. Mas, para isso acontecer tem que registar os produtos
existentes na sua despensa para a despensa digital da aplicação. A aplicação vai olhar
para refeições antigas e olhar para a despensa digital e sugerir a troca de ingredientes
como por exemplo na refeição anterior usou massa e pode trocar por arroz, e, se não
tem, a aplicação sugere outro como batatas. Assim, deste modo pode poupar, mas, a
aplicação tem outros recursos como lista de compras onde pode adicionar novos
ingredientes à sua despensa digital e também pode partilhar as suas receitas. A qualquer
momento pode ajustar as suas refeições como mostra a figura 4 indicada abaixo [5].
Figura 4 – MealBoard, Fonte: [5]
Da análise das aplicações existentes concluímos que estas são poucas e nenhuma
delas possui os requisitos que são necessários/pedidos para este projeto. Em
consequência deste facto, temos a necessidade de desenvolver uma aplicação de raiz, de
modo a aplicar os requisitos exigidos pela empresa.
Relatório de Estágio 2018
Página 10
3 - Planeamento E Desenho
Pretende-se fazer a análise das principais metodologias de produção de software,
caraterizar o desenvolvimento em cascata (Waterfall), definir a metodologia adotada e
selecionar os recursos, delinear etapas e apresentar objetivos bem como a tecnologia
usada.
3.1 - Metodologia
A metodologia Waterfall (figura 5), palavra em inglês que significa cascata, é
considerada a forma mais tradicional de gerir projetos. Nessa abordagem, todas as
etapas são seguidas de forma sequencial. As fases básicas geralmente são de definição
de requisitos, planeamento, execução e validação, podendo variar dependendo do tipo
de iniciativa.
O modelo em cascata só permite que o projeto avance quando uma fase está
completamente finalizada. Voltar algumas etapas, dar saltos para frente ou sobrepor
atividades não é permitido. Além disso, no Waterfall os requisitos são totalmente
definidos no início do projeto e geralmente sofrem pouca ou nenhuma alteração durante
sua execução [6].
Figura 5 - Metodologia Waterfall
Relatório de Estágio 2018
Página 11
3.2 - Requisitos da Cateen management System
Com esta aplicação pretende melhorar a vida dos colaboradores da Coficab
Portugal.
O colaborador pode marcar, editar, eliminar e ver as suas refeições marcadas
sem a necessidade de ir a um computador, basta ter um smartphone com android, IOS,
Windows phone e instalar aplicação no seu smartphone e passa a ter as suas refeições
nas “mãos” e assim evita o esquecimento de as marcar, pois, a aplicação possui
notificações de alerta que avisam se não tiver a marcação efetuada, alertando o
colaborador para marcar a sua refeição.
Para proceder à sua instalação é necessário ter um smartphone, no caso do
Android tem de ser o Android 4.4.2.
3.2.1 - Requisitos funcionais
Marcar refeições: O utilizador para marcar a refeição tem que ver o dia no calendário
disponibilizado na aplicação, depois de escolher o dia será validada a data para que no
passo seguinte esteja disponível o tipo de refeição se é Almoço ou Jantar, conforme a
escolha, será disponibilizado o tipo de prato, de seguida, o utilizador escolhe o prato
pretendido.
Editar refeições: Nesta fase, se o utilizador não quiser a refeição que escolheu
inicialmente, pode mudá-la, basta escolher outro tipo de prato, ou pode acontecer que o
utilizador não queira almoço mas sim jantar, basta alterar conforme o desejado e a
refeição fica logo editada.
Eliminar Refeição: O utilizador, nesta fase, pode eliminar a refeição caso a refeição
não esteja no estado confirmada. Só pode eliminar a refeição no estado marcada.
Ver refeições marcadas: Este requisito informa o utilizador das refeições marcadas e
do seu estado, se estão no estado marcada ou confirmada, deixa ainda ver os dias em
que não há refeições marcadas ou o menu disponível na semana seguinte.
Relatório de Estágio 2018
Página 12
3.3 - Atores e Respetivos Casos de Uso
A tabela 1, que se segue, tem como objetivo definir o ator/atores
(administrador/utilizador) bem como os respetivos casos de uso que interferem com o
sistema, os casos de uso definem a maioria dos requisitos de um sistema computacional.
Tabela 1-Atores e respectivos casos de uso
Ator Casos de uso Objetivos
Marcar Refeições O objetivo é o administrador
marcar refeições.
Editar Refeições O objetivo é o administrador
editar refeições.
Administrador
Eliminar Refeições O objetivo é o administrador
Eliminar a suas refeições.
Marcar Refeições Convidado
O objetivo é o administrador
marcar as refeições de
convidados que não tem
credenciais para marcar as
refeições.
Ver refeições marcadas
O objetivo é o administrador ver
refeições marcadas até ao
momento.
Marcar Refeições O objetivo é o utilizador marcar
as refeições.
Utilizador
Editar Refeições O objetivo é o utilizador editar
as suas refeições.
Eliminar Refeições O objetivo é o utilizador eliminar
as refeições.
Ver refeições marcadas O objetivo é o utilizador ver as
suas refeições marcadas até ao
momento.
Relatório de Estágio 2018
Página 13
3.3.1 – Diagrama Casos de Uso
A figura 12 tem como objetivo definir o ator/atores (Administrador/Utilizador)
bem como os respetivos casos de uso que interferem com o sistema, os casos de uso
definem a maioria dos requisitos de um sistema computacional para a aplicação final,
isto é, estes requisitos fazem parte da aplicação final.
Figura 6 - Diagrama de Casos de Usos
Relatório de Estágio 2018
Página 14
No entanto na figura 13 define os principais requisitos da aplicação a serem
desenvolvidas, são os seguintes:
Marcar Refeições;
Editar Refeições;
Eliminar Refeições;
Ver Refeições Marcadas.
Figura 7 - Diagrama de Casos de Usos final
3.3.2 – Descrição dos Casos de Uso
Nesta fase iremos descrever, com detalhe, os casos de uso do sistema Canteen
Management System APP:
Nome – Indica o nome do caso de uso que se trata;
Descrição – Descreve o objetivo do caso de uso;
Pré-condições – Indica se existir a pré-condição necessária para se poder dar
início ao caso de uso;
Caminho principal – Descreve as várias etapas do caso uso entre o ator e o
sistema;
Caminhos Alternativos – Descreve validações de campos e operações anormais
ao caminho principal;
Suplementos ou adornos – Indica os casos de teste concretos ao caso de uso;
Pós condições - Se existir descrevem alguma operação efetuada apos o termino
do caso de uso;
Encontra-se em anexo a respetiva descrição dos casos de uso.
Relatório de Estágio 2018
Página 15
4 - Tecnologia Usada
Para o desenvolvimento deste projeto foram utilizadas várias tecnologias que são
muito utilizadas e disponibilizadas de forma gratuita. Iremos explicar detalhadamente
cada ferramenta usada para a criação da aplicação.
4.1 - Ionic
O Ionic é uma ferramenta para vários dispositivos moveis, Android, IOS,
Windows Phone, e o seu desenvolvimento é em HTML5 e CSS3 e javaScript.
Para isso, temos que instalar o node.js e de seguida abrir a linha de comandos e
instalar o Ionic já com o Apache Cordova e os templates do Bootstrap, depois
procedemos à instalação do android studio para o ionic ir buscar as APIs (Application
Programming Interface) do Google SDK (software development kit). Esta ferramenta
tem por predefinição um projeto, como sidemenu, e, ao escolher este projeto vai
aparecer o menu lateral esquerdo, mas antes de ver o projeto temos de fazer a
compilação da aplicação, tudo pela linha de comando e vai mostrar-nos os browsers. O
ionic dispõe de uma aplicação própria que se chama “Ionic view app” para visualizar e
testar aplicação no dispositivo móvel.
Um facto importante é que o desenvolvimento não se faz pela linha de
comandos, esta serve só para criar projetos e fazer a compilação da aplicação, parte de
desenvolvimento é escolhido numa ferramenta como o Notepad, visual code ou
Dreamweaver, no entanto o ionic tem outra ferramenta chamada Ionic Creator que vou
passar explicar na figura 6, [7].
Figura 8 - Pagina do Ionic, Fonte: [7]
Relatório de Estágio 2018
Página 16
4.1.1 - Ionic Creator
Como podemos observar, na figura 7, temos a possibilidade de construir a
aplicação como nós queremos, definimos qual a pagina que é principal e arrastamos do
lado esquerdo os objetos como textbox , labels, button, imagens etc. Podemos também
escolher as cores, tipo de letra, mas sem a parte de desenvolvimento, depois de estar
tudo concluído, guardamos e ao fazer o download ele gera um ficheiro zip para
substituir no projeto principal, indicando quais e em que pastas devemos fazer a
substituição para não estragarmos o projeto principal. Mas temos uma desvantagem, o
ionic é limitado, uma vez que só tem as coisas básicas. Para se fazer mais que um
projeto não dá, os templates existentes são limitados e para se terem mais recursos é
necessário pagar para os ter [8].
Figura 9 - Ionic creator, Fonte: [8]
Em suma o Ionic revela ser uma ferramenta bastante completa, para quem
começa pela primeira vez a desenvolver uma aplicação, o que custa mais é a sua
instalação que requer muitos recursos. Esta ferramenta foi escolhida para o
desenvolvimento da aplicação, no entanto tivemos alguns problemas para os quais não
se conseguiu arranjar solução, desta forma, a solução foi mudar para uma ferramenta
mais em conta para a empresa, como iremos explicar no ponto abaixo.
Relatório de Estágio 2018
Página 17
4.2 - Visual Studio 2017
O visual Studio é uma ferramenta geral e bastante usada pelos programadores
em todo mundo. É usado nas escolas para aprender linguagens de programação, e, no
que toca a desenvolvimento móvel, existem duas ferramentas que são as mais utilizadas
no Visual Studio, o Xamarin e o Apache Cordova, como mostra a figura 8. Será
necessário instalar o Xamarin e as suas dependências e o Apache Cordova e as suas
dependências, no entanto, o Visual Studio precisa, para compilar, da aplicação o
android studio por causa das APIs da Google(SDK), para esta configuração requer
muito espaço em disco na ordem dos 200 gigabytes e mexer nas variáveis de ambiente
do sistema dando o caminho do java e do Android [9].
Figura 10 - Instalador do Visual Studio, Fonte [9]
Relatório de Estágio 2018
Página 18
4.2.1 - Xamarin
O Xamarin, como mostra a figura 9, é uma ferramenta para os dispositivos móveis
conhecidos. É open-source, mas no que toca ao IOS temos vários requisitos a ter em
conta, para testar uma aplicação em IOS temos que ter uma virtual machine com o
sistema operativo da Apple. As aplicações são nativas e desenvolvidas numa linguagem
em C#.
A razão na qual não foi escolhida esta ferramenta foi a de esta requerer alguma
experiencia e ser mais difícil de usar e, também, devido ao facto da linguagem a ser
adotada neste estágio ser o JavaScript.
Esta ferramenta está disponível em mais 15 mil empresas, como a Bosch e kellogg’s
e muitas outras segundo [10].
Para quem quer aprender a programar para dispositivos móveis, o Xamarin tem uma
universidade onde os programadores podem interagir com especialistas nesta
ferramenta, a sua inscrição é paga.
Figura 11 – Xamarin, Fonte: [10]
Relatório de Estágio 2018
Página 19
4.2.2 - Apache Cordova
O Apache Cordova, como mostra a figura 10, destina-se a várias plataformas
como o andriod, IOS e tem por base HTML, CSS, JS. A fonte é open-sourse e tem
muita vantagem em ser usada, não possui licenças, o que é muito bom para a empresa
não ter custos acrescidos. Como a Coficab usa o Visual Studio, faz todo o sentido em se
usar o Apache Cordova, já que é fácil de usar e tem tudo ao nosso dispor. Esta
ferramenta foi escolhida para desenvolver a aplicação, com um template predefinido.
Antes de começar a desenvolver temos de compilar a aplicação predefinida para ver se
há eventuais erros a corrigir. Ao compilar, surgiu um erro que se devia ao facto do
Android Studio estar desatualizado, por isso, tivemos de proceder a sua atualização para
este funcionar como o pretendido e começarmos a desenvolver a aplicação [11].
Figura 12 - Apache Cordova, Fonte:[11]
Relatório de Estágio 2018
Página 20
4.3 - Pencil
O Pencil, como mostrar a figura 11, tem como objetivo fornecer uma ferramenta
de prototipagem de GUI (Graphical User Interface) livre e open source, para que os
utilizadores possam criar Mockups para todas as plataformas conhecidas. Esta
ferramenta é fácil de usar é só arrastar do lado esquerdo para a área de aplicação
fazendo o seu Mockup [12].
Figura 13 - Pencil Project, Fonte [12]
4.4 - HTML5
A tecnologia HTML5 (Hypertext Markup Language, versão 5) é uma linguagem
para estruturação e apresentação de conteúdo para a World Wide Web, usada também
para aplicações web.
Nesta versão foram feitas grandes melhorias como novas APIs, controlo de
multimédia, aprimoramento do uso offline e melhoria da depuração dos erros, o que
reduz a necessidade de plugins.
As vantagens de se usar o HTML5 é que torna a internet mais rápida, está
presente em todos os browsers conhecidos, os ficheiros são mais reduzidos, código mais
claro e fácil de entender. Esta tecnologia já está presente em quase todas as paginas web
e está em constante atualizações ao nível do seu conteúdo e a nível de segurança [13].
Relatório de Estágio 2018
Página 21
4.5 - CSS3
CSS3 é a segunda mais nova versão das famosas Cascading Style Sheets (ou
simplesmente CSS), onde se definem estilos para páginas web com efeitos de transição,
imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspetos de
design do layout.
A principal função do CSS3 é abolir as imagens de plano de fundo, bordas
arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como
um simples relógio de ponteiros [14].
4.6 - Bootstrap
O Bootstrap é uma framework de front-end livre e de open source para
projetar web sites e aplicações da web. Contém modelos de design baseados
em HTML e CSS, para formas, botões, navegação e outros componentes de interface,
bem como, extensões de JavaScript opcionais. Ao contrário de alguns frameworks web,
preocupa-se apenas com o desenvolvimento de front-end [15].
4.7 - JavaScript
É uma linguagem de programação interpretada. Foi originalmente implementada
como parte dos browsers para que scripts pudessem ser executados do lado do cliente e
interagissem com o utilizador sem a necessidade deste script passar pelo servidor,
controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do
documento mostrado.
É atualmente a principal linguagem para programação lado do Cliente nos
navegadores web. Começa também a ser bastante utilizada do lado do servidor através
de ambientes como o node.js. Foi concebida para ser uma linguagem script
com orientação a objetos baseada em protótipos, prototipagem fraca e dinâmica e
funções de primeira classe [16].
Relatório de Estágio 2018
Página 22
4.8 - Push notification
Esta tecnologia faz parte da aplicação, por isso, iremos dar uma explicação de
como como funciona. O seu desenvolvimento ficará a cargo da Coficab Portugal. Esta
tecnologia é bastante usada nas aplicações e depende das notificações dessa aplicação.
As push notification é uma mensagem que aparece nos dispositivos móveis. O
utilizador não precisa de estar a usar a aplicação para receber uma notificação. Por
exemplo, pode receber uma notificação a dizer que ainda não marcou a refeição do dia
[17].
4.9 - Tecnologia SSL
Como não podia deixar de ser, a aplicação Canteen Management System APP
tem que ter segurança devido à sua transmissão de dados do servidor para o cliente, para
isso, falaremos como funciona numa breve descrição.
A tecnologia SSL (Secure Socket Layer) é utilizada para melhorar a segurança da
transmissão de dados através da Internet: esta tecnologia encripta e protege os dados
transmitidos com recurso ao protocolo HTTPS.
De seguida, iremos falar do protocolo HTTPS tem como regra evitar que a
informação transmitida entre o cliente e o servidor seja visualizada por terceiros e assim
prevenir a fuga de informação. A figura 17 mostra um esquema exemplificativo de
como funciona este processo. O ponto 1 faz o pedido de inicialização de uma ligação
segura via SSL, o ponto 2 apresenta o certificado SSL e as verificações em causa são a
validade e a assinatura efetuada por um terceiro de confiança, o ponto 3 diz respeito à
transmissão de uma chave de encriptação única, codificada com uma chave pública do
servidor, o último ponto faz a desencriptação da chave de encriptação para o servidor,
com ajuda da chave privada que vai estabelecer uma ligação segura [18].
Relatório de Estágio 2018
Página 23
5 - Implementação
Nesta fase iremos apresentar com detalhe o desenvolvimento da
aplicação efetuado ao logo do estágio.
5.1 - Protótipo da aplicação “Canteen Management System App”
Nesta secção vai-se falar do protótipo da aplicação, para isso, será utilizado o
programa de Mockups chamado Pencil, esta ferramenta é própria para fazer protótipos
para dispositivos móveis, aqui vamos representar cada página da aplicação e explicar
que cada fase faz na aplicação.
5.1.1 - Login
A figura 14, representa o sistema de validação, o login, em que o colaborador da
Coficab Portugal põe as suas credenciais correspondentes. Quando o utilizador tocar no
botão login serão verificadas as suas credenciais, se estas estiverem corretas entra com
sucesso, se estiverem incorretas fica na mesma página que é o login.
Figura 14 - Login, Pencil
Relatório de Estágio 2018
Página 24
5.1.2 - Menu inicial
A figura 15 mostra um sidemenu no canto superior esquerdo que contem as
seguintes funcionalidades:
Marcar refeições;
Marcar refeições convidado;
Alterar refeições;
Ver refeições marcadas;
Avaliar refeições.
Assim o colaborador toca na funcionalidade que pretende, esta solução do
sidemenu é ótima, pois, permite que seja fácil para o colaborador navegar pelas páginas
sem ter de carregar em voltar para trás.
Figura 15 - Menu sidemenu
Relatório de Estágio 2018
Página 25
5.1.3 - Marcar refeições
O utilizador toca na funcionalidade marcar refeições e vai para uma página que
vai pedir a data e a refeição, aqui, a refeição quer dizer se é almoço ou jantar, e o prato
disponibilizado nesse dia, como mostra a figura 16. Depois destes dados preenchidos,
carrega no botão Guardar e a sua refeição é guardada e permanece na mesma página,
porque o colaborador pode marcar várias refeições, por exemplo um colaborador pode
marcar a refeição para a toda a semana, então convém que o colaborador permaneça na
página, mas, se o colaborador não quer marcar mais refeições pode escolher outra
funcionalidade ou sair da aplicação.
Figura 16 - Marcar refeições
Relatório de Estágio 2018
Página 26
5.1.4 - Marcar refeições convidado
Esta funcionalidade é muito parecida com a do ponto anterior, a pequena
diferença que existe consiste no aparecimento de convidado e empresa, isto quer dizer
que podem ser clientes particulares ou empresas externas que querem ver a Coficab
Portugal e ver o seu processo produtivo. Para as empresas externas existe um campo
que diz empresa para estas colocarem o nome referente à sua empresa. No cliente esta
opção não irá aparecer como mostra a figura 16. O processo dos seguintes campos é
igual ao ponto anterior da figura 15.
Figura 17 - Marcar refeições Convidado
Relatório de Estágio 2018
Página 27
5.1.5 - Ver refeições marcadas
A figura 18 mostra as refeições marcadas, aqui o colaborador pode ver as suas
refeições, para isso, basta por a data e pesquisar. Nessa semana aparecem as refeições
marcadas e as refeições que já foram consumidas. Mostra também a data da refeição, se
a refeição é almoço ou jantar, o prato se é dieta, vegetariano, carne, peixe e opção, a
descrição do prato, por exemplo caldeirada de peixe e por último o estado o que quer
dizer que a refeição pode estar no estado marcada ou confirmada.
Figura 18 - Ver refeições marcadas
Relatório de Estágio 2018
Página 28
5.1.6 - Avaliação da ementa
Esta funcionalidade permite que o colaborador depois de consumida a sua
refeição avalie a refeição com o sistema rating, que é de 1 a 5 estrelas, em que 1
significa não gostou e 5 significa gostou muito. O objetivo desta funcionalidade é
contribuir para o bem-estar dos colaboradores, dando estes o seu feedback para a
melhoria do serviço. No ecrã é mostrado o dia da refeição, o prato, descrição, grau de
satisfação, comentários (feedback). Depois de preenchidos os campos carregar em
enviar como mostra a figura 19.
Figura 19 - Avaliação da ementa
5.1.7 - Alterar refeição
A figura 20 mostra como podemos alterar a refeição, este procedimento é
parecido ao ponto 5.1.2, por exemplo, o colaborador pode ter escolhido peixe e decidiu
por carne basta alterar o campo referente ao prato e carregar em guardar e está feita a
alteração.
Figura 20 - Alterar refeição
Relatório de Estágio 2018
Página 29
5.2 - 2º Protótipo da aplicação “Canteen Management System App”
Este é o segundo protótipo e o que é para implementar na aplicação, este
protótipo foi elaborado por uma empresa de design contratada pela Coficab Portugal.
Todas as imagens do protótipo foram fornecidas por esta empresa, após um mês.
Tivemos como tarefa construir todo o layout da aplicação através da ajuda de várias
ferramentas de edição de imagens.
A seguir iremos descrever o 2º protótipo.
5.2.1 - Login
Na figura 21 mostra o design final da aplicação com o logotipo da aplicação,
bem como, o pedido para inserir as credenciais do colaborador nos campos corretos.
Para que o colaborador não esteja sempre a por a password sempre que entra na
aplicação, basta colocar um visto em “lembrar password” e carregar no botão login.
Figura 21 - Login
Relatório de Estágio 2018
Página 30
5.2.2 - Página inicial
A figura 22 mostra no topo a semana em que estamos, tem um ícone com o
calendário do mês a que essa semana pertence, a seguir tem no lado esquerdo o dia da
semana, na coluna a seguir temos o ícone respeitante ao prato, se é carne, peixe,
vegetariano, dieta ou opção e na mesma coluna diz se é almoço ou jantar, na coluna
seguinte vem a descrição do prato e na última coluna temos a avaliação da refeição
representada pelo sistema rating. Nesta aplicação temos uma conjugação de cores, o
cinzento escuro é porque a refeição está na fase de avaliação ou já foi avaliada, a cor
azul é para representar que a refeição já está no estado confirmada, o verde é para
representar que a refeição está no estado marcada, a cinzento mais claro representa que
não foi efetuada a marcação da refeição e por último temos o campo respetivo para os
convidados.
Figura 22 - Página inicial
Relatório de Estágio 2018
Página 31
5.2.3 - Página inicial sem marcações
Na figura 23 temos o mesmo que no ponto anterior, mas sem marcações
efetuadas a cinzento claro.
Figura 23 - Página inicial sem marcação
5.2.4 - Adicionar refeição
A figura 24 mostra como podemos marcar uma refeição. Para isso, o
colaborador basta tocar na linha do dia de semana e aí, abre um menu com o respetivo
dia de semana e com o tipo de menu. Consoante o colaborador desejar toca no almoço e
aparece a ementa desse dia ou se é jantar aparece a ementa do jantar. Depois o
colaborador toca no seu prato e fica selecionado a preto e clicar no botão adicionar e a
refeição fica no estado marcada com cor verde como foi explicado no ponto 7.2.
Figura 24 - Adicionar refeição
Relatório de Estágio 2018
Página 32
5.2.5 - Sidemenu
A figura 25 representa o sidemenu com o respetivo logotipo da aplicação e com
três páginas referentes a notificações, idioma e o logout com as cores azuis e fundo
branco.
Figura 25 - Sidemenu
Relatório de Estágio 2018
Página 33
5.3 - Aplicação desenvolvida no Ionic
Neste ponto iremos falar da aplicação desenvolvida na plataforma do Ionic, aqui
apliquei o protótipo desenvolvido durante o primeiro mês de estágio, de seguida vou
falar das páginas feitas no Ionic. Todo o design foi desenvolvido no Ionic creator.
5.3.1 - Login
Na figura 26 temos o login onde se encontra o logotipo igual ao que está no site
da Coficab Portugal, para utilizar este logotipo foi necessária uma autorização. Existem
também dois campos, um para o número e outro para a password dos colaboradores e
um botão para fazer o login.
Figura 26 - Login Ionic
Relatório de Estágio 2018
Página 34
5.3.2 - Menu da aplicação
Na figura 27 mostra o sidemenu que é um template predefinido do ionic, quando
se cria um projeto pode escolher um projeto em branco ou com o sidemenu, aqui o
colaborador toca em qual é quer ir. A opção marcar refeição convidada não estará
disponível para o colaborador dito “normal”, mas, estará disponível para o
administrador.
Figura 27 - Menu aplicação ionic
5.3.3 - Marcar refeições
No ponto anterior o colaborador tocou em marcar refeições e vai abrir a página
para marcar a sua refeição, para isso basta pôr a data válida do tipo dia/mês/ano, dizer
se é almoço ou jantar e depois conforme o escolhido, por exemplo se é almoço será
mostrado no campo seguinte o prato do almoço, se fosse jantar os pratos eram diferentes
do almoço. E por último o colaborador toca em Guardar e permanece na mesma página
com os campos limpos para poder inserir novamente como mostra a figura 28.
Figura 28 - Marcar refeições ionic
Relatório de Estágio 2018
Página 35
5.3.4 - Ver refeições marcadas
Na figura 29 o colaborador insere a data válida como no ponto anterior e será
mostrado em lista a data, tipo de refeição, tipo de prato, descrição e o estado em que se
encontra.
Figura 29 - Ver refeições marcadas
5.4 - Aplicação Final
Finalmente iremos falar do resultado final da aplicação desenvolvida, mas, esta
não está concluída uma vez que foi proposto o desenvolvimento das funcionalidades,
marcar refeições, ver refeições marcadas, editar, eliminar refeições e aplicar o design,
conforme será mostrado abaixo com recurso a imagem e a uma explicação do mesmo.
Na figura 30 temos o login em que cada utilizador da Coficab Portugal vai entrar
com o respetivo login, pondo as suas credenciais, o número e password e com uma
checkbox para relembrar a password, assim, deste modo, o utilizador não necessita de
estar a introduzir sempre a password.
Figura 30 - Login
Relatório de Estágio 2018
Página 36
Na figura 31 é demostrado a página principal onde a funcionalidade ver
refeições marcadas destinadas ao colaborador, aqui o colaborador vê as suas refeições
marcadas que está no estado marcadas com cor verde ou confirmadas com cor azul ou
cinzento quando a refeição não foi marcada ou não existe menu disponível, poderá
consultar o calendário e é dito no topo da aplicação em que semana se encontra como
por exemplo “week – 4-sete > 10-sete”, dispõe do menu lateral superior esquerdo onde
pode navegar pelas as paginas disponíveis, mas “Toda a ação desenrola-se” na página
principal como vamos ver a seguir no próximo ponto.
Figura 31 - Página Inicial
Relatório de Estágio 2018
Página 37
Na figura 32 o utilizador vai tocar na linha com base no dia da semana, por
exemplo, o utilizador tocou na linha onde diz 4 seg. e irá aparecer uma subpágina onde
mostra o menu, se for almoço mostra o tipo de prato, se for jantar mostra o tipo de prato
referente ao jantar, o menu do almoço é diferente do jantar, e o colaborador toca no
“radio button” para selecionar o tipo de prato e toca no botão “OK” e será guardada a
sua refeição, e pode continuar a marcar na seguinte linha ou editar ou eliminar a sua
refeição, também contêm um botão cancelar ou se preferir sair, basta tocar novamente
na linha em causa.
Na funcionalidade “Editar/Eliminar” o colaborador só pode editar/eliminar caso
a linha esteja a verde o que quer dizer que a refeição está no estado marcada, a refeição
pode ser editada ou eliminada se estiver no estado confirmada cor azul. O colaborador
não poderá fazer qualquer ação uma vez que a linha de cor azul está bloqueada.
Figura 32 - Marcação da refeição
A figura 33 é referente ao menu lateral superior esquerdo, onde temos o logotipo
da aplicação e a sua designação e onde estão a funcionalidades a serem desenvolvidas,
num futuro próximo, pela empresa. Excetua-se o “LOGOUT” que está direcionado para
a página do “LOGIN”.
Figura 33 - Menu
Relatório de Estágio 2018
Página 38
6 - Conclusão
Neste estágio apliquei os conhecimentos que adquiri ao logo dos anos do curso
Engenharia Informática e aprendi algo de novo com a realização do projeto em contexto
de estágio.
O estágio contribuiu para o meu enriquecimento pessoal e profissional, agora
compreendo melhor o mundo do trabalho, a importância de cumprir horários na
conclusão das tarefas até às reuniões semanais, tarefa que nem sempre era possível e
assim prolongar o tempo até á outra reunião.
No desenvolvimento da aplicação surgiram algumas dificuldades que consegui
superar com esforço, dedicação, empenho, com muito trabalho e pesquisa, adjetivos que
adotei para a realização do meu estágio.
No entanto, a aplicação não foi concluída com tudo aquilo a que me propus fazer,
devido à mudança de ambiente de trabalho e à aplicação do design na mesma, perdeu-se
muito tempo devido a estes fatores, foi preciso haver, da minha parte, um esforço
adicional para fazer pesquisas relativamente aos problemas em causa. É com muita pena
minha que não fiz as funcionalidades marcar, editar, eliminar refeições dos
colaboradores da Coficab Portugal.
Sem dúvida, este estágio foi de grande importância para o meu futuro profissional
e pessoal.
Relatório de Estágio 2018
Página 39
7 - Referencias bibliográficas
[1] “Coficab Portugal,” [Online]. Available: http://www.coficab.pt/. [Acedido em 5
Junho 2017].
[2] “E.on Canteen,” [Online]. Available:
https://play.google.com/store/apps/details?id=de.mahlzeit.eon. [Acedido em 10
Junho 2017].
[3] “E.on Canteen,” [Online]. Available: https://itunes.apple.com/de/app/e-on-
canteen/id1214341458?l=en&mt=8. [Acedido em 10 Junho 2017].
[4] “Food on the Table,” [Online]. Available:
http://www.lifehack.org/articles/technology/10-meal-planning-apps-you-need-
have-get-healthier-easily.html. [Acedido em 10 Junho 2017].
[5] “MealBoaord,” [Online]. Available:
http://www.lifehack.org/articles/technology/10-meal-planning-apps-you-need-
have-get-healthier-easily.html. [Acedido em 10 Junho 2017].
[6] “Metodologia Waterfall,” [Online]. Available:
https://pt.wikipedia.org/wiki/Modelo_em_cascata. [Acedido em 27 Julho 2017].
[7] “Ionic framework,” [Online]. Available: https://ionicframework.com/. [Acedido em
6 Junho 2017].
[8] “Ionic Creator,” [Online]. Available: https://creator.ionic.io/app/login. [Acedido
em 6 Junho 2017].
[9] “Visual Studio,” [Online]. Available: https://www.visualstudio.com/pt-
br/downloads/?rr=https%3A%2F%2Fwww.google.pt%2F. [Acedido em 6 Julho
2017].
[10] “Xamarin,” [Online]. Available: https://www.xamarin.com/. [Acedido em 6 Julho
2017].
[11] “Apache Cordova,” [Online]. Available: https://cordova.apache.org/. [Acedido em
6 Julho 2017].
[12] “Pencil,” [Online]. Available: https://pencil.evolus.vn/. [Acedido em 5 Junho
2017].
[13] “HTML 5,” [Online]. Available: https://pt.wikipedia.org/wiki/HTML5. [Acedido
em 6 Junho 2017].
Relatório de Estágio 2018
Página 40
[14] “CSS 3,” [Online]. Available: https://pt.wikipedia.org/wiki/CSS3. [Acedido em 6
Junho 2017].
[15] “Bootstrap,” [Online]. Available: https://getbootstrap.com/. [Acedido em 6 Junho
2017].
[16] “JavaScript,” [Online]. Available: https://pt.wikipedia.org/wiki/JavaScript.
[Acedido em 7 Junho 2017].
[17] U. Airship, “Push notification,” [Online]. Available:
https://www.urbanairship.com/push-notifications-explained. [Acedido em 6 Junho
2017].
[18] “Tecnologia SSL,” [Online]. Available: https://www.ovh.pt/ssl/funcionamento-
ssl.xml. [Acedido em 6 Junho 2017].
Relatório de Estágio 2018
Página 41
Anexo
A tabela 2 descreve, com detalhe, o caso de uso “Marcar refeições”.
Tabela 2 - Marcar refeições
Nome: Marcar refeições
Descrição: O objetivo é o colaborador marcar as refeições.
Pré-condição: Login efetuado com sucesso.
Caminho Principal:
1. O colaborador clica na linha correspondente.
2. O sistema mostra uma lista pré-definida do
almoço.
3. O colaborador escolhe almoço ou jantar.
4. O sistema mostra a lista do jantar.
5. O colaborador seleciona a refeição pretendida e
clica no botão Guardar.
Caminhos alternativos:
1. A) O colaborador só pode carregar na linha a
cinzento.
2. A) O sistema não mostra lista por não estar
disponível.
4.A) O sistema não mostra lista do jantar.
Suplementos ou adornos:
1. Testar se o colaborador se consegue marcar
refeição.
2. Testar as cores em vários dispositivos e
ambientes (noite, dia, sol).
Relatório de Estágio 2018
Página 42
A tabela 3 descreve, com detalhe, o caso de uso “Editar refeições”.
Tabela 3 - Editar refeições
Nome: Editar refeições
Descrição: Objetivo é o colaborador editar refeição.
Pré-condição: Login efetuado com sucesso.
Caminho Principal:
1. O colaborador clica na linha correspondente.
2. O sistema devolve a lista pré-definida do almoço.
3. O colaborador escolhe almoço ou jantar.
4. O sistema devolve a respetiva lista.
5. O colaborador clica em Guardar.
Caminhos alternativos:
1. A) O colaborador só pode carregar na linha verde.
2. A) O sistema não mostra lista por não estar
disponível.
4.A) O sistema não mostra lista do jantar.
Suplementos ou adornos:
1. Testar se o colaborador se consegue editar
refeição.
2. Testar as cores em vários dispositivos e ambientes
(noite, dia, sol).
Relatório de Estágio 2018
Página 43
A tabela 4 descreve, com detalhe, o caso de uso “Eliminar refeições”.
Tabela 4 -Eliminar refeições
Nome: Eliminar refeições
Descrição: Objetivo é o colaborador eliminar refeição.
Pré-condição: Login efetuado com sucesso.
Caminho Principal: 1. O colaborador clica na linha correspondente.
2. O sistema devolve a lista da refeição marcada.
3. O colaborador carrega em eliminar.
4. O sistema põe a linha a cinzento.
Caminhos alternativos: 1. A) O colaborador só pode carregar na linha verde.
Suplementos ou adornos: 1. Testar se o colaborador se consegue eliminar
refeição.
2. Testar as cores em vários dispositivos e ambientes
(noite, dia, sol).
A tabela 5 descreve, com detalhe, o caso de uso “Ver refeições marcadas”.
Tabela 5 -Ver refeições marcadas
Nome: Ver refeições marcadas
Descrição: Objetivo é o colaborador ver as suas refeições.
Pré-condição: Login efetuado com sucesso.
Caminho Principal: 1. O sistema disponibiliza a lista uma vez que é a
pagina principal.
Caminhos alternativos: 1. A) O colaborador não consegue ver as suas
refeições.
Suplementos ou adornos: 1. Testar as cores em vários dispositivos e ambientes
(noite, dia, sol).