RELATÓRIO DE PROJETObdigital.ipg.pt/dspace/bitstream/10314/4266/1/Mário Costa_1011210.pdfUm agradecimento ao Mestre José Fidalgo pela sua disponibilidade em ajudar nos momentos

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.


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

mailto:[email protected]


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


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


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


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


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


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


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


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.


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.


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.


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


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.


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.


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]


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]


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.


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


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.


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.


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


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.


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]


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.


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]


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]


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]


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].


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].


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].

https://pt.wikipedia.org/wiki/Cliente-servidor

https://pt.wikipedia.org/wiki/Servidor


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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.


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].


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].


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).


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.


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).


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.


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.


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).

Documents

RELATÓRIO DE PROJETObdigital.ipg.pt/dspace/bitstream/10314/4266/1/Mário Costa_1011210.pdfUm agradecimento ao Mestre José Fidalgo pela sua disponibilidade em ajudar nos momentos