RELATÓRIO CRÍTICO Prova de Aptidão Profissionalaesmprojetos.net/blotaapp/docs/relatorio.pdf · O...

Escola Básica e Secundária de Salvaterra de Magos

RELATÓRIO CRÍTICO

Prova de Aptidão Profissional

Duarte Pinho Nº11

Rafael Meia Bota Nº21

Curso Profissional Técnico de Multimédia

12ºG

Salvaterra de Magos

Junho de 2016

Agrupamento de Escolas de Salvaterra de Magos

2

Blota

Duarte Pinho Nº12

Rafael Meia Bota Nº21

Curso Profissional Técnico de Multimédia

12ºG

SUMÁRIO Relatório das atividades do Projeto Blota,

desenvolvido como requisito parcial dos módulos

curriculares, supervisionado pelos Professores: Alice

Pereira, Anabela Ferreira, António Andrade, Fátima

Ferreira, Teresa Fazenda, no curso Profissional de

Técnico de Multimédia.

Salvaterra de Magos

Junho de 2016


3

Agradecimentos

Com a terminação deste percurso profissional não podemos deixar de agradecer a

algumas pessoas que, direta ou indiretamente, nos ajudaram nesta caminhada tão

importante da nossa vida pessoal e profissional.

Em primeiro lugar, queremos agradecer a orientação que nos foi dada pelos

professores das disciplinas técnicas Alice Pereira, Anabela Ferreira, António Andrade, Fátima

Ferreira, Teresa Fazenda, Carlos Coimbra, durante a elaboração do Prova de Aptidão

Profissional. Obrigado por todo o tempo e disponibilidade que sempre demostraram, assim

como opiniões e criticas que reforçaram o nosso projeto.

Ao corpo docente e não docente da Escola Secundária de Salvaterra de Magos por

terem criado todas as condições necessárias não só nestes três anos de curso mas também

durante todo o nosso percurso escolar.

Agradecemos a orientação que a professor Carlos Coimbra nos disponibilizou,

sempre, durante a elaboração do presente relatório e de todos os textos utilizados. Obrigada

pela pessoa e profissional que demonstrou ser.

Por fim, mas não menos importante, agrademos à nossa família e amigos porque sem eles,

dificilmente conseguiríamos chegar até aqui, e por estarem sempre lá para nos amparar,

criticar e congratular fazendo-nos sentir pessoas melhores.

Salvaterra de Magos

Junho de 2016


4

Índice Agradecimentos .................................................................................................................................. 3

Resumo ................................................................................................................................................ 5

Introdução ........................................................................................................................................... 6

Desenvolvimento................................................................................................................................. 7

Enquadramento teórico ................................................................................................................ 7

Linguagem de Programação ............................................................................................................. 7

Disciplinas influentes no projeto ......................................................................................................... 8

Apresentação do projeto............................................................................................................... 8

Anteprojeto ................................................................................................................................... 9

Gantt Project ................................................................................................................................... 9

Briefing ............................................................................................................................................ 9

Escolha do Nome ......................................................................................................................... 10

Cor ................................................................................................................................................. 11

Aplicação ..................................................................................................................................... 12

Página Principal ............................................................................................................................. 12

Menu ............................................................................................................................................. 14

Página de Registo .......................................................................................................................... 15

Página de Login .............................................................................................................................. 16

Página dos Produtos ...................................................................................................................... 18

Carrinho ......................................................................................................................................... 20

Novos Produtos ............................................................................................................................. 21

Página de métodos de pagamento................................................................................................ 22

Página de mudança de tamanho e da quantidade da t-shirt ........................................................ 23

Bases de dados ............................................................................................................................ 24

Base de dados carrinho ................................................................................................................. 24

Base de dados Cliente ................................................................................................................... 25

Base de dados Métodos de pagamento ........................................................................................ 25

Salvaterra de Magos

Junho de 2016


5

Base de dados slideshow ............................................................................................................... 26

Base de dados Produtos ................................................................................................................ 26

Design gráfico .............................................................................................................................. 27

Design da aplicação ....................................................................................................................... 27

Dificuldades surgidas durante a elaboração do projeto ............................................................... 28

Conclusão .................................................................................................................................... 29

Resumo

O relatório da Prova de Aptidão Profissional tem como objetivo descrever o Projeto

Final desenvolvido durante o corrente ano letivo e refletir sobre os problemas e dificuldades

intrínsecas ao Projeto. Consiste na demostração dos conhecimentos adquiridos ao longo dos

três anos de curso e visa explicar o desenvolvimento sequencial do Projeto.

Salvaterra de Magos

Junho de 2016


6

Introdução

No âmbito da Prova de Aptidão Profissional, desenvolvemos um tema que foi ao

encontro das exigências do nosso cliente, recorrendo aos conhecimentos adquiridos ao

longo do percurso secundário, iniciado em 2013.

O nome da nossa Prova de Aptidão Profissional é Blota, uma marca criada pelo nosso

cliente que visa a venda de roupa biodegradável. O produto surgiu com a intenção de tornar

o mundo mais sustentável. Todo este projeto surgiu quando o nosso colega de turma Diogo

Costa decidiu criar uma empresa com o intuito de realizar a sua prova de aptidão

profissional.

O projeto baseou-se na construção de uma loja em aplicação de android para o nosso

cliente Diogo Costa.

Inicialmente esboçamos todo o processo de construção e estabelecemos metas

semanais e/ou mensais para cada membro do grupo. Com a utilização do programa Gantt

Project, foi possível realizar um plano de trabalho permitindo uma melhor

organização/planificação do projeto. Permitiu ao grupo desenvolver o projeto sempre de

forma linear e sem a existência de subcargas.

Na elaboração da prova de aptidão profissional o grupo utilizou vários softwares

ensinados no decorrer do curso e explorou outros. Utilizamos os seguintes softwares: Gantt

Project ,Adobe Photoshop CC 2014 e o OutSystems.

Salvaterra de Magos

Junho de 2016


7

Desenvolvimento

Enquadramento teórico

Software utilizado

Para a realização da Prova de Aptidão Profissional, recorremos aos softwares lecionados

durante os três anos de curso e explorámos novos.

Adobe Photoshop CC: serve para a edição profissional de imagens digitais e trabalhos de

pré-impressão. Desenvolvido pela Adobe Systems.

Na nossa Prova de Aptidão Profissional utilizamos o Adobe Photoshop para a edição de

imagens de conteúdo da aplicação.

OutSystems: Serve para desenvolver aplicações web e móveis, desenvolvido pela empresa

OutSystems.

Na nossa prova utilizamos o OutSystems para desenvolver a nossa aplicação.

Gantt Project: é um programa criado para o agendamento das tarefas de um projeto em

diferentes etapas, baseado no Diagrama de Gantt.

Utilizámos o Gantt Project para planear todo o projeto, distribuindo as tarefas pelos

elementos do grupo.

Linguagem de Programação

Salvaterra de Magos

Junho de 2016


8

Html/Css

HTML é uma linguagem de marcação utilizada para produzir páginas na Web. Os

documentos em HTML podem ser interpretados por todos os navegadores.

CSS é uma linguagem de folhas de estilo, utilizada para definir a apresentação de

documentos escritos e numa linguagem de marcação, como HTML ou XML.

Disciplinas influentes no projeto

Ao longo dos três anos de curso, houve várias disciplinas que nos permitiram chegar

ao final e realizar todo este projeto, que se desenvolveu principalmente durante o último

ano letivo, a saber: Técnicas de Multimédia, aprendizagem do funcionamento dos softwares;

Design, Comunicação e Audiovisuais, aprendizagem da linguagem gráfica/visual e domínio

estético; Sistemas de Informação, aprendizagem de ferramentas de gestão e manutenção da

Web; Projeto, aprendizagem da metodologia de projeto, dedicado ao desenvolvimento da

Prova.

Apresentação do projeto

A ideia nasceu após o nosso cliente ter apresentado o seu projeto que consistia na

construção de uma marca de roupa biodegradável para “skaters”. Após termo-nos separado do

nosso antigo grupo de prova de aptidão profissional abraçamos este projeto, falamos com o

nosso cliente e, propusemo-nos a construir uma aplicação móvel que seria a loja da marca.

A escolha do nome do nosso projeto foi feita pelo nosso cliente que nos deu a

seguinte justificação: O nome “Blota” deriva do fruto do sobreiro a bolota, tradicional do

ribatejo e tal como esta pequena semente se desenvolve numa árvore de grande dimensão e

porte, como é o sobreiro, também a ideia sobre o projeto possa evoluir para uma empresa

capaz de comercializar produtos desportivos e ecológicos. Dessa forma a palavra “Blota”,

surge como uma opção forte, por derivar de uma palavra portuguesa, o que a torna mais

Salvaterra de Magos

Junho de 2016


9

fácil de memorizar e consequentemente de comercializar. O nome Blota tem um caráter

ecológico muito forte, o que reflete toda uma filosofia inerente a este projeto, tornando fácil

associar os produtos desenvolvidos à pegada ecológica.

Anteprojeto

O anteprojeto consistia no pré-plano da prova de aptidão profissional, neste ficheiro

apresentamos o tema, uma descrição sumativa, os materiais necessários e os objetivos que

nos propomos alcançar na realização da mesma.

Tivemos como principais objetivos, a criação da loja em formato de aplicação para

android e a promoção da própria marca.

Gantt Project

O Gantt Project inclui um diagrama de Gantt para realização de projetos de

calendarização de tarefas e recursos. Possibilitou ao grupo planificar o tempo estipulado

para a realização de cada trabalho, assim como quem realizava cada tarefa.

Briefing

Em janeiro de 2016 foi-nos apresentado o projeto para a nossa prova de aptidão

profissional. O projeto consistia na construção de um aplicação para android, em que nessa

aplicação o objetivo era fazer uma loja para o cliente comprar produtos no telemóvel.

Salvaterra de Magos

Junho de 2016


10

Escolha do Nome

A escolha do nome do nosso projeto foi feita pelo nosso cliente que nos deu a

seguinte justificação: O nome “Blota” deriva do fruto do sobreiro a bolota, tradicional do

ribatejo e tal como esta pequena semente se desenvolve numa árvore de grande dimensão e

porte, como é o sobreiro, também a ideia sobre o projeto possa evoluir para uma empresa

capaz de comercializar produtos desportivos e ecológicos. Dessa forma a palavra “Blota”,

surge como uma opção forte, por derivar de uma palavra portuguesa, o que a torna mais

fácil de memorizar e consequentemente de comercializar. O nome Blota tem um caráter

ecológico muito forte, o que reflete toda uma filosofia inerente a este projeto, tornando fácil

associar os produtos desenvolvidos à pegada ecológica.

Salvaterra de Magos

Junho de 2016


11

Logótipo

A construção do logótipo foi realizada pelo nosso cliente, de modo a renovar o estilo

ecologista e inovar o estilo da própria roupa, para não só tornar a roupa mais apelativa mas

também para transmitir um estilo mais desportivo da própria.

Cor

A escolha de cor de logótipo é explicita pela simples razão da redução do uso de

cores no ambiente. Contudo o gótico revelam também a presente moda inserida no estilo

mais desportivo. O preto, a junção de todas as cores, fica menos dispendioso e com a

pegada ecológica mais reduzida.

Salvaterra de Magos

Junho de 2016


12

Aplicação Página Principal

Na página principal criamos uma imagem de tipo “external”, que necessita de um url

para poder mostrar a imagem. Para esse efeito usamos o url que está guardado na base de

dados slideshow e depois criamos um link no container que está ligado a uma screen action

que verifica se o campo url da base de dados slideshow corresponde ao url de uma

determinada imagem. Em caso afirmativo é alterado o valor do url para um diferente, sendo

feito um update à base de dados. Este processo é idêntico para todos os url das imagens até

não haver mais hipóteses de expansão. Criamos também três radio buttons em que cada botão

assim que é acionado muda automaticamente o url da base de dados slideshow para outro de

uma determinada imagem com uma ligação para um screen action que nos conduz para a

homepage. O nosso logo contém a função de ligação à homepage ou seja quando se clica nele

ele redireciona o cliente para a homepage seja em que pagina o cliente esteja.

Salvaterra de Magos

Junho de 2016


13

Salvaterra de Magos

Junho de 2016


14

Menu

Criamos um menu que necessita de receber o id do cliente, que está guardado no

session ClienteID. Caso o campo logged for igual a true or false a interpretação será esta: se

for false direciona-nos para o login na página de fazer login e o registo para a página de

“registar”; mas se for true direciona o usuário para uma página que disponibiliza um botão

com a indicação logout, que quando é clicado pelo cliente é automaticamente feito o logout,

significa isto que é feita a alteração do campo logout para false e faz um update à base de

dados do cliente. Concebemos também um link para a página dos produtos com a indicação

“Produtos” e um link para o “Carrinho”.

Salvaterra de Magos

Junho de 2016


15

Página de Registo

Criamos uma página de registo onde o cliente tem de inserir um email, palavra-

passe, Rua, Código Postal e Localidade e adicionamos um botão que verifica se o email

inserido já está registado na base de dados do cliente e no caso de existir um usuário com o

mesmo email aparece um alerta informando o cliente que existe um utilizador utilizando o seu

correio eletrónico. Se o cliente deixar o email ou a palavra-passe vazia vai receber um

“Alerta” a informá-lo da obrigatoriedade de preencher o campo; se tudo estiver “OK” é criado

um novo registo na base de dados “Carrinho” e é-lhe atribuído aleatoriamente um id que fica

memorizado no Carrinhoid do Cliente e o campo loged fica true. Depois, cria-se um “novo

Salvaterra de Magos

Junho de 2016


16

cliente” na base de dados “Cliente” ao qual é atribuído um id que fica guardado na Session

Clienteid e este é conduzido para a página de login.

Página de Login

Se o cliente tiver feito o login, a página irá enviá-lo para a homepage, caso não o tenha

feito e se o pretender fica na página de login. Depois, terá de inserir o email e a palavra-passe

e carregar no botão para fazer o login na página login. Logo que o botão seja clicado, a

aplicação confirma se o email inserido consta na base de dados do cliente, caso não conste, o

cliente receberá um “Alerta” a informá-lo de que não existe nenhum utilizador com o correio

Salvaterra de Magos

Junho de 2016


17

eletrónico que inseriu. Se tiver inserido mal a palavra-passe receberá um Alerta a informá-lo

de que esta foi mal escrita, mas se tudo estiver correto a session Cliente.ID recebe o valor do

id do cliente que acabou de fazer login e muda-se o campo logged para true e a base de dados

do cliente é atualizada e o cliente é enviado para a homepage.

Na página de login também existe um link para a “página recuperação” que é a página onde o

cliente tem de inserir o email e carregar num botão para poder recuperar a sua palavra-passe e

ao carregar no botão é verificado se o email inserido está incorreto, se estiver mal inserido o

cliente recebe um Alerta a informá-lo que o email foi mal inserido. Se o email for bem

digitado, é enviado um email para o seu correio eletrónico que foi o que inseriu relembrando-

lhe a sua palavra-passe e é em seguida enviado para a página de login.

Salvaterra de Magos

Junho de 2016


18

Página dos Produtos

Na “Produtos” vai ser apresentado o nome do artigo, o seu preço e tamanho. Isso

acontece, porque a aplicação efetua uma pesquisa no id do cliente guardado no session

Cliente.ID e seleciona-o na base de dados. A seguir procura na base de dados “Carrinho” um

carrinho com o id igual ao campo Carrinhoid que se encontra na base de dados do cliente. Se

o cliente clicar no botão designado “t-shirt”, os produtos que são apresentados são apenas t-

Salvaterra de Magos

Junho de 2016


19

shirt, e se for no botão “sweaters” apenas os produtos nessa categoria. Se eventualmente clicar

no nome de algum dos produtos vai para a página onde pode ver uma imagem do produto

podendo editar o tamanho e a quantidade pretendida. O produto será adicionado ao carrinho

assim que o cliente clique num botão que verifica se a encomenda pode ser aceite,

certificando se existe quantidade suficiente no stock e será adicionado ou atualizado o produto

que se encontra no carrinho se existir quantidade suficiente no stock. Foi criada uma table

records ou seja uma tabela que tem de ter uma conexão a uma lista de records numa base de

dados tendo usado a lista que se encontra na base de dados “produtos”. A base de dados do

produto possui um filtro que informa que o campo QuantidadeStock do produto tem de ser

superior a zero.

Salvaterra de Magos

Junho de 2016


20

Carrinho

Na página “carrinho” é verificado se o Session Cliente.ID é igual à nullidentfier, caso

seja, é apresentado um texto a informá-lo que é necessário “logar-se” para poder visualizar o

carrinho. Porém, se o Session.ClienteID contiver o id de um cliente, este verá o nome do

produto que está associado da base de dados “Produto Clienteid”, que mostra a quantidade

existente na base de dados estática*. A informação dos produtos no carrinho é mostrada

usando uma table record que vai indicar a lista, primeiro a uma base de dados com o id do

produto igual ao produtoid que está na base de dados do carrinho, e depois o id do produto

que tem de ser igual ao produtoid2, assente na base de dados do carrinho. A página ficará em

branco sempre que não existir nenhum id, quer no produtoid, quer no produtoid2.

* base de dados estática – apenas possui registos de números

1º n.º = n.º base dados “carrinho quantidade”

preço do produto X quantidade

tamanho = tamanho base de dados carrinho

ProdutoID2 = ProdutoID2 da base de dados

Salvaterra de Magos

Junho de 2016


21

Total = soma do preço produtoid + mais preço do produtoid2

Novos Produtos

Aqui podemos criar novos produtos, através da inserção da informação do produto, e

acrescentamos outra que nos mostra todos os produtos só com o nome dos artigos e preço.

Criamos também outra página que permite efetuar a compra de um produto e nos direciona

para a próxima página para podermos alterar a quantidade do stock. Por fim, devemos clicar

em atualizar a informação do produto na base de dados produtos.

Salvaterra de Magos

Junho de 2016


22

Página de métodos de pagamento

Tem como método de pagamento o paypal e a transferência bancária. A página possui

um radio button com um valor da base de dados “método de pagamento”. O valor

correspondente ao tipo de pagamento.

Salvaterra de Magos

Junho de 2016


23

Página de mudança de tamanho e da quantidade da

t-shirt

Nesta página, temos que escolher o id do produto, que foi selecionado na página

“produtos”, e damos a informação do produto que tem um id igual ao que se encontra

associado à página “produtos”. É necessário utilizar um filtro indicando que o produto.id tem

que ser igual ao input produto.id. O input produto.id é o que guarda o id do produto carregado

na página “produto”. Feito isso, selecionamos os campos que queremos que sejam atualizados

e ligamo-los a um campo de texto para serem alterados. Se for apenas o tamanho, podemos ter

uma combo box que nos mostra os registos que estão numa base de dados estática chamada

“alturas”, que tem como registos os tamanhos que vendemos. Depois, o cliente escolhe o

tamanho e a quantidade desejadas, inseridas numa base de dados estática, a mesma que

usamos para o cliente poder escolher a quantidade no carrinho de compras. A seguir, clicamos

no botão que verifica a quantidade de t-shirts do tamanho escolhido existente, para podermos

efetuar a encomenda. Se o estado for esgotado, o cliente recebe um alerta a avisá-lo que não

pode guardar o produto no carrinho, já que não há quantidade suficiente em stock para poder

ser aceite. Porém, se existir em stock, confirmamos se o carrinho tem algum dos campos

produtoid ou o produtoid2 igual ao id do produto, e nessa situação adicionamos a quantidade,

que o cliente selecionou, ao campo “quantidade”, caso o id do produto seja igual ao do

produtoid ou se for igual ao do produtoid2. (quantidade2 e altura); é na altura se o id do

produto for igual ao produtoid (produtoid2); é na altura2. Depois tiramos a quantidade que o

cliente selcionou na quantida de stock do produto e atualizamos a base de dados “produto” e

“carrinho”.

Salvaterra de Magos

Junho de 2016


24

Se nem o produtoid, nem o produtoid2 forem iguais ao id do produto, verifica-se se estão

vazios, caso estejam é adicionada a id ao respetivo campo quantidade e altura e é atualizada a

base de dados “carrinho”; tiramos a quantidade no campo QuantidadeStock que está na base

de dados produto. Se estiverem os dois cheios e se o produtoid e o produtoid2 não forem

iguais ao id do produto é mostrado um alerta ao cliente a informá-lo que o carrinho está cheio.

Nós sabemos qual é o carrinho, porque adicionamos um filtro que informa que o id do

carrinho é igual ao id do campo carrinhoid na base de dados cliente, indicando que o cliente.id

é igual ao session ClienteID.

Bases de dados

Base de dados carrinho

A base de dados carrinho é uma base de dados que tem oito campos, que são:

- id, identifica cada carrinho que é gerado automaticamente à medida que se criam carrinhos;

- produtoid, disponibiliza o tipo de produtos;

- identifier, é o id do produto;

- quantidade, é do tipo integer;

- tamanho (tipo text);

- produtoid2, é do mesmo tipo do Produtoid

Salvaterra de Magos

Junho de 2016


25

- quantidade2, a quantidade;

- tamanho2, o tamanho

- Metodopagamento, guarda no carrinho o tipo de pagamento (tipo texto).

Base de dados Cliente

Campos

- Id que identifica cada cliente;

- Email, guarda o email que o cliente inseriu quando fez o registo;

- palavraPasse, guarda a palavra-passe do cliente (tipo text);

- rua, guarda a rua do cliente (tipo text);

- localidade, guarda a localidade do cliente (tipo text);

- CodigoPostal, guarda o código postal do cliente (tipo text);

- Carrinhoid, guarda o id do carrinho que foi criado no momento em que o cliente fez o

registo com sucesso (tipo carrinho identefier);

- loged, guarda só tipo “False and True” (tipo Boolean, por defeito é “False”);

Base de dados Métodos de pagamento

- Id

- Transferência (tipo text)

- Paypal (tipo text)

Salvaterra de Magos

Junho de 2016


26

Base de dados slideshow

- url, é o campo que guarda o url para mostrar as imagens na homepage

Base de dados Produtos

- Nome do produto, guarda o nome do produto (tipo text)

- QuantidadeStock, guarda a quantidade de stock disponível de um determinado produto (tipo

interger)

- Preco, guarda o preço do produto (tipo interger)

- Categoria, guarda a categoria de cada produto (tipo text)

Salvaterra de Magos

Junho de 2016


27

Design gráfico

Design da aplicação

Relativamente ao desing da aplicação, foi nos pedido pelo nosso cliente que o design se

aproxima-se o máximo possível do design do website da empresa e que seguisse as cores que

o próprio website tinha, o preto e o branco. Por isso nós tentamos que fosse um design

Salvaterra de Magos

Junho de 2016


28

simples e agradável ao olhar do utilizador/cliente e o que nos saiu foi isto:

Um design simples, funcional e agradável ao olhar do utilizador este design aplicou-se em

todas as páginas da nossa aplicação.

Dificuldades surgidas durante a elaboração do projeto

Durante a elaboração do projeto, surgiram diversas dificuldades, muitas delas devido

ao facto de não dominarmos o programa no qual realizamos a prova de aptidão profissional.

Inicialmente, o grupo pensava que a elaboração do projeto não seria assim tão difícil, mas ao

longo de todo este processo apareceram muitas dificuldades que, felizmente, conseguimos

ultrapassar com dedicação e esforço.

Salvaterra de Magos

Junho de 2016


29

Conclusão

Durante estes 3 anos de curso desenvolvemos várias capacidades técnicas e cientificas

na área da multimédia. Viemos para este curso sem saber bem o que era multimédia, mas

saímos dele com uma ideia completamente diferente e verificamos que a multimédia tem uma

influência bastante grande na vida das pessoas.

Em relação à prova de aptidão profissional, depois de tanto esforço e de luta contra as

dificuldades que surgiram, conseguimos concluir todo este processo atempadamente e com

satisfação pessoal. Agora, no final, é bastante gratificante verificarmos que o nosso trabalho

foi produtivo e que esse esforço é valorizado.

Anexos

Salvaterra de Magos

Junho de 2016


30

Salvaterra de Magos

Junho de 2016


31

Salvaterra de Magos

Junho de 2016


32

RELATÓRIO CRÍTICO Prova de Aptidão Profissionalaesmprojetos.net/blotaapp/docs/relatorio.pdf · O...

Documents

Transcript of RELATÓRIO CRÍTICO Prova de Aptidão Profissionalaesmprojetos.net/blotaapp/docs/relatorio.pdf · O...