Embed Size (px)
Citation preview
1 | P a g e
Escola Básica e Secundária de Salvaterra de Magos
RELATÓRIO
Prova de Aptidão Profissional
Diogo Mota | Jorge Duarte
Curso Profissional PGSI
12º G 3 | 7
Salvaterra de Magos
Junho de 2017
2 | P a g e
Escola Básica e Secundária de Salvaterra de Magos
Diogo Mota | Jorge Duarte
Curso Profissional PGSI
12º G 3 | 7
SUMÁRIO
Relatório das atividades do Projeto Occasional Move
desenvolvido como requisito parcial dos módulos
curriculares, supervisionado pelos Prof. António
Andrade, José Nunes, Sónia Santos, Lisete Teles no
curso Profissional GPSI
Salvaterra de Magos
3 | P a g e
Junho de 2017
Agradecimentos
Queremos agradecer a algumas pessoas que, direta ou indiretamente, nos
ajudaram neste percurso para a nossa vida profissional e também, pessoal.
Agradecemos a alguns colegas da nossa turma pela ajuda que forneceram.
Também temos que agradecer aos nossos professores da Escola Secundária de
Salvaterra de Magos por terem-nos ajudado no que precisávamos e por terem criado todas
as condições necessárias para estes três anos de curso.
4 | P a g e
Índice
Conteúdo
Agradecimentos .................................................................................................................... 3
Resumo ................................................................................................................................ 5
Introdução ............................................................................................................................ 6
Disciplinas importantes para a realização do projeto ............................................................. 8
Site ....................................................................................................................................... 9
Página Inicial.............................................................................................................................. 11
Master Detail .............................................................................................................................. 12
Financiamentos .......................................................................................................................... 13
Base de dados ............................................................................................................................. 13
Página administrativa ................................................................................................................. 14
Página Stock e Automóvel ......................................................................................................... 20
Página Inicial- Mudanças ........................................................................................................... 21
Garantias ........................................................................................................................................ 23
Compra automóvel ..................................................................................................................... 23
Oficina ........................................................................................................................................ 24
Página “Sobre Nós” ................................................................................................................... 25
Mudanças feitas no final ............................................................................................................ 27
Programa ........................................................................................................................... 28
Conclusão ........................................................................................................................... 31
Referências de sitios na Internet .......................................................................................... 32
Anexos ............................................................................................................................... 33
5 | P a g e
Resumo
O nosso Projeto de Aptidão Profissional é o desenvolvimento de um programa (para
Windows) e um site para publicitar o stand de automóveis Occasional Move.
Desenvolvemos uma aplicação para Windows, onde os funcionários do stand podem registar
a venda dos veículos ou a compra de um novo. Desenvolvemos também um site com o
objetivo de publicitar o stand.
6 | P a g e
Introdução
A nossa Prova de Aptidão Profissional tem o nome de OccasionalMove, sendo este o
nome do stand de automóveis localizado em Paredes, Porto.
Um de nós tinha contato com o dono da empresa. E ficámos a saber que eles precisavam
de um site. Então decidimos ajudá-los.
O projeto baseou-se no desenvolvimento de uma aplicação para Windows e
desenvolvimento de um site, que visa publicitar o stand.
Começamos por planear a nossa base de dados. Tivemos algumas dificuldades como é
óbvio. Mas fomos aprendendo muito durante o desenvolvimento e lá nos desenrascámos.
Na elaboração da prova de aptidão profissional utilizamos vários softwares ensinados no
decorrer do curso: Adobe Photoshop C5.1, o Visual Studio Community 2015, o Sublime
Text 3, Dreamweaver, Brackets, Atom.
7 | P á g i n a
Softwares utilizados
Para a realização da Prova de Aptidão Profissional, utilizamos o Adobe Photoshop
CS5.1 para editar imagens.
Para construir a aplicação para o Windows, utilizamos o Visual Studio Community que
permite programar. A linguagem utilizada para a realização da aplicação Windows foi o
Visual basic (VB). Portanto, o que é Visual Basic? " Visual" refere-se ao método usado
para criar o que o utilizador vê — a interface gráfica do utilizador ou GUI. "Basic" refere-
se à linguagem de programação BASIC (Beginners All-Purpose Symbolic Instruction
Code), uma linguagem usada por mais programadores que qualquer outra linguagem na
história da computação. Permite criar programas úteis aprendendo apenas alguns dos seus
recursos.
Como se trata de um stand de automóveis necessita de uma base de dados, e para isso
usamos o MySql,XAMPP, onde guardamos a nossa base de dados com os dados todos.
Por último, utilizamos, para a construção do site, o Sublime Text 3, Atom,
Dreamweaver, Brackets. Programamos o site em HTML (Hyper Text Markup
Language), que é uma linguagem de marcação utilizada para construir páginas Web, e a
interface gráfica, ou melhor dizendo, para enquadrar esteticamente o site, programamos
em CSS (Cascading Style Sheets), que é uma linguagem de “folhas de estilo”, utilizada
para definir a apresentação de documentos escritos nas linguagens de marcação, como
HTML ou XML. Também utilizamos PHP (Hypertext Preprocessor) que é uma
linguagem de script open source de uso geral, muito utilizada, e especialmente adequada
para o desenvolvimento web e que pode ser embutida dentro do HTML. E, por fim, o
JavaScript que é uma linguagem de programação interpretada. Foi originalmente
implementada como parte dos navegadores web 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 browser, realizando comunicação assíncrona
e alterando o conteúdo do documento exibido.
8 | P á g i n a
Disciplinas importantes para a realização do projeto
As disciplinas mais importantes para o desenvolvimento deste projeto foram
Programação de sistemas informáticos (PSI), onde começámos a aprender
programação em Visual Studio. Redes de comunicação onde aprendemos a
desenvolver em HTML, CSS e JavaScript, e no módulo 19 da disciplina de
programação (PSI), onde aprendemos os conceitos do design e da estética.
9 | P á g i n a
Site
No desenvolvimento do nosso site, nós pesquisamos muito acerca de sites de stands, pois
não fazíamos a mínima ideia como iríamos começar.
Tivemos muitas dúvidas no que íamos fazer.
Ao início encontramos este template. E começamos a desenvolver o site.
O desenvolvimento deste
template não estava a correr
muito bem. Não tínhamos
imagens, não tínhamos texto
para escrever, não tínhamos
nada basicamente.
Fomos inventando conforme
achávamos melhor.
10 | P á g i n a
Mais para frente houve mais problemas. Mas desta vez era mais sério. O site não
funcionava no telemóvel, nem em ipads, ou seja o site não era responsivo.
Então fomos à procura de um novo template. Voltamos à estaca zero.
Este foi o template que encontramos mais tarde, e é o template que ficou definido.
http://shapebootstrap.net/demo/html/corlate/
11 | P á g i n a
Página Inicial Ao encontrarmos este template ficámos com as mesmas dúvidas do início. O que íamos
fazer? Como íamos melhorar a página inicial?
Até uma certa altura que finalmente encontrámos o que fazer. E a página inicial ficou
praticamente assim:
(As imagens do slide foram feitas por nós)
12 | P á g i n a
Depois da página inicial
avançamos para as outras
páginas. Fizemos um
pequeno questionário para a
empresa de forma a ajudar-
nos a perceber o que é que
eles queriam ver publicitado
no site e como o queriam
ver.
Finalmente ao recebermos
as respostas e ao estarmos mais informados sobre a empresa e sobre o que eles pretendiam
que nós mostrássemos no site, começamos a fazer as restantes páginas.
Master Detail
Passámos a criar uma página
chamada “Master Detail”. Esta
página demorou um bocado a ser
feita. Nesta página podiam ser
encontrados vários serviços
extra.
Nos serviços extra não
tínhamos grandes ideias de
como íamos mostrá-
-los. Mas acabámos por achar
várias ideias. Cada serviço
extra era uma página diferente,
como se apresenta na imagem
em baixo.
13 | P á g i n a
Financiamentos
Depois de algum tempo começamos os financiamentos.
Esta página não tinhamos muito a
fazer. Começamos por coisas
simples pois queríamos avançar.
Depois do desenvolvimento das
páginas, dividimos o trabalho. Um
fazia o aperfeiçoamento das páginas
e o outro fazia a base de dados.
Base de dados
Na realização da base de dados começámos por pedir algumas informações ao cliente,
tais como formulários de venda, de compra e de retomas de onde retirámos os dados
que estavam transcritos nessas folhas para a realização dessas mesmas ações tendo
começado por utilizar um dos modelos que aprendemos em aulas, o modelo ER.
De seguida realizámos as ligações das tabelas tendo como base de dados final, que
vemos no anexo A.
Até chegarmos a este resultado tivemos alguns problemas, pois começámos por ter dados
a mais dos quais não iríamos necessitar, o que fomos descobrindo enquanto fazíamos as
pesquisas, levando a que, às vezes, a meio do desenvolvimento tivéssemos que realizar
algumas alterações na base de dados.
Enquanto realizávamos a base de dados começámos a pensar como iríamos realizar o
BackOffice/zona administrativa do site, zona onde o proprietário do stand poderá gerir os
veículos que são mostrados no site.
14 | P á g i n a
Página administrativa
De seguida, começámos por procurar um form de login com um design atrativo, pois
como já foi dito, o design não é o nosso forte, e encontrámos um que nos chamou a
atenção, tendo sido este o escolhido. A página de login ficou desta forma:
A seguir começámos à procura de um template administrativo tendo sido escolhido o
template que vemos na imagem a seguir:
Depois de escolhido este
template começámos por
apagar todo o conteúdo que
tinha e começámos a alterá-lo à
nossa maneira e como
achávamos que este iria ficar
melhor, sendo este o resultado
final:
15 | P á g i n a
Começámos então por mudar a página inicial do backoffice que ficou como vimos em
cima.
Em seguida fomos fazer a zona onde este poderia gerir os utilizadores.
Começámos por pensar quem iria ter acesso a esta zona do BackOffice para segurança
deste, pois não poderíamos arriscar que um funcionário da empresa tivesse acesso a esta
zona e alterasse o seu tipo de utilizador. Por isso decidimos que apenas quem fosse
administrador poderia aceder a esta zona.
Depois começámos a trabalhar no design desta página de forma a que mostrasse todos os
utilizadores que têm acesso a esta zona, tendo ficado desta forma:
Aqui o administrador do site poderá editar, eliminar, ver e adicionar novos utilizadores,
tendo sido essas a páginas que decidimos realizar em seguida, ficando esta da forma que
podemos ver nas imagens abaixo:
16 | P á g i n a
Quando demos por concluída a página para gerir os utilizadores passámos então à página
para gerir as marcas dos veículos. Esta ficou assim:
Decidimos que para gerir as marcas não iria ser preciso mais nenhuma página nem a ação
de editar e de ver, pois se houver um engano podem eliminar essa marca e introduzir uma
nova. Para introduzir uma marca basta clicar no botão que irá aparecer um formulário por
baixo onde poderão introduzir o nome da marca como pode ser visto na imagem a seguir.
17 | P á g i n a
Dada esta página por concluída fomos fazer a página que iria ser usada para gerir os
modelos dos carros. Para esta foi decidido que, igualmente à página de marcas, não iria
ser usado o editar, tendo esta ficado como se pode ver na imagem seguinte.
Nesta página a opção inserir, à semelhança da página de marcas, ao carregar o botão
aparecerá um formulário para introduzir o modelo, que tem uma caixa de texto para inserir
o modelo e uma caixa de seleção para escolher a marca correspondente.
18 | P á g i n a
Demos assim por terminada a página para gerir os modelos. Introduzidas as marcas e os
modelos começámos por criar a página para gerir os automóveis que são mostrados no
site. Foi decidido que deveríamos ter uma zona para que os funcionários pudessem
consultar os veículos filtrando a pesquisa por marca, ano e combustível tornando os
resultados mais adequados.
A gestão dos automóveis é muito semelhante à gestão dos utilizadores. A única diferença
é que temos mais uma ação que serve para introduzir as imagens correspondentes a cada
veículo que queremos que estejam no site. Todas as outras ações fazem exatamente o
mesmo que faziam no “gerir utilizadores” sendo elas como se pode ver em baixo.
A seguir construímos a página para introdução das imagens. Ao carregar nessa ação o
utilizador será direcionado para uma página com todas as imagens que já estão associadas
a esse veículo como pode ser visto na imagem seguinte.
19 | P á g i n a
Esta página tem um botão que direciona para a página de inserção da imagem que é muito
simples e intuitiva como mostra a imagem seguinte.
Dadas por concluídas estas páginas lembrámo-nos que poderíamos arranjar uma forma
de ordenar as imagens como o utilizador quer que estas apareçam no site, pois se isto não
existisse as imagens iriam aparecer no site na ordem pela qual foram introduzidas e visto
que o cliente poderá querer vê-las por outra ordem, começámos a fazer essa alteração.
Tivemos alguns problemas para conseguir que essa alteração fosse comcluída mas
conseguimos, bastando ao utilizador arrastar as imagens para o sitio que pretendem para
que esta fique ordenada.
20 | P á g i n a
Página Stock e Automóvel
Enquanto um de nós tratava do backoffice outro começou a pensar como iria fazer a
página onde mostrar os automóveis que o stand tem disponiveis para venda no momento
e página onde se poderiam encontrar algumas informações sobre esses mesmos carros.
Começámos por procurar como seria a melhor forma para fazermos isto pois não somos
grandes profissionais em design e gostávamos que tudo ficasse o melhor possivel. No fim
dessa procura achámos que o melhor era fazer do género de uma página que continha o
que podemos chamar de vários cartões onde cada cartão correspondia a um automóvel
como pode ser visto na imagem abaixo.
Em seguida e dada por comcluída a página de Stock começámos a pensar como iríamos
fazer a página onde estariam presentes as informações do veiculo bem como mais
imagens deste. Tivemos algumas dificuldades na montagem desta página mas no final
conseguimos fazer o que queriamos tendo ficado como pode ser visto na figura asseguir.
21 | P á g i n a
Página Inicial- Mudanças
Passadas algumas semanas, reparámos que a nossa empresa tinha um site feito.
Comunicámos com a empresa e disseram-nos que nós íamos fazer um site para uma
empresa diferente. Mas a empresa era deles na mesma.
Começámos então a mudar os logótipos e as cores. Mudámos todas as cores para
combinar com o logótipo da empresa.
Em seguida mudámos as imagens que foram feitas por nós. Como o logótipo já não tinha
a parte azul, modificámos o fundo de cada imagem.
E modificámos as cores dos objetos, pois a cor era “muito forte”, tornando-a assim num
cinzento.
Em seguida começamos a modificar o menu e o restante.
22 | P á g i n a
Em seguida o footer. Nós queríamos algo inovador. Algo que chamasse a atenção, pois o
que estava no template era demasiado simples. E nós gostamos de complicar as coisas.
23 | P á g i n a
Depois de fazermos o footer, fomos criar novas páginas e modificar outras. Enquanto um
de nós mexia na base de dados, o outro foi modificando todas as páginas.
Garantias
A página de garantias. Como
podíamos ver no site da AutoSeg,
estava muito simples para nós.
Então, decidimos complicar as
coisas mais uma vez.
Criámos algo interativo, onde ao clicarmos no
botão superior direito. Faz um efeito e mostra
as informações. Como se encontra na figura á
direita.
Compra automóvel
24 | P á g i n a
Nesta página não há muito a se acrescentar, por isso é que ficou pequena.
Também não havia nada para podermos melhorar o aspeto, esta página era simples.
Oficina Seguimos então para a página “Oficina”. Não tínhamos informações nenhumas, porque a
oficina ainda não tinha aberto. Andámos á procura de ideias para esta página enquanto
esperávamos.Quando abriram a oficina, pedimos informações e construimos esta página:
Ao clicarmos no símbolo da Euro Repar vamos para uma nova página, onde falamos
sobre essa empresa. Esta página está mais “escondida” porque não é de interesse de
muitos saber quem é a nossa parceria. Mas para o caso de alguém clicar no símbolo deles
poderá ver mais sobre a empresa.
25 | P á g i n a
Página “Sobre Nós”
Depois de termos modificado o site todo, fomos ver a página acerca da empresa.
Depois de estudarmos tanto design, e de aprendermos mais sobre as linguagens de
programação, já estávamos prontos a modificar as páginas que estavam “demasiado
simples”.
Esta página foi feita no inicio de desenvolvimento da PAP. Como podem ver na
imagem, foi algo simples de se fazer pois havia pouca informação.
Então depois de termos pensado muito sobre melhorar esta página,fomos então modificar-
la transformando-a nisto:
26 | P á g i n a
A imagem que vemos de fundo na figura acima é um vídeo.
27 | P á g i n a
Mudanças feitas no final
A página “Master Detail” foi apagada do site. Demorou algum tempo a fazê-la e mais
tarde tivemos que apagá-la, pois o dono da empresa já não queria essas páginas.
A página de oficinas foi modificada devido a problemas de responsividade.
Houve melhorias na página de financiamentos, também devido a problemas de
responsividade.
Criamos também uma tabela na página de financiamentos com o objetivo de tornar a
página mais profissional. Como se encontra na figura a seguir:
No final ainda não tinhamos mexido no footer, não tinhamos nada feito lá, então fomos
modificar isso.
Por fim, fomos procurar erros de português. É normal haverem erros porque as páginas
têm muito texto.
28 | P á g i n a
Programa
Iniciámos o desenvolvimento do programa. Para começar foi a página de login.
Criar a ligação entre a base de dados do site com o programa.
Depois de criarmos a ligação da base de dados com
o programa, criámos a verificação de utilizador (se
o utilizador existe na base de dados ou não).
Passámos à construção de um menu lateral. Queriamos que só aparecesse ao passar o rato
por cima e que expandisse ao passar por cima dos ícones.
Mas com o passar do tempo, e depois de algumas pesquisas, não conseguimos
desenvolver isso, dando então dúvidas de como íamos avançar.
Ambos fomos procurando soluções para um novo design, mas design não o nosso forte.
Desenvolvemos então estes formulários:
29 | P á g i n a
De início não achávamos o design muito mau, pois como foi dito design não é bem
conosco.
Então decidimos avançar com o resto. Inserir dados na base de dados, apagar e modificar
dados.
Avançamos bastante com isso e correu tudo perfeitamente.
Mais tarde como aconteceu com o site, viemos a saber que a empresa não era esta. Então
começamos a modificar o logótipo em todas as páginas. A pessoa encarregue do programa
decidiu então, não só modificar os logótipos como começar de novo. Óbvio demorou um
bocado de tempo porque tivemos que pesquisar designs, apagar o design todo, modificar
logotipos, etc.
Depois de muita pesquisa a pessoa encarregue do programa teve uma ideia para design.
Transformando o nosso design para algo melhor:
Começámos apenas por ter o logótipo em
cima e os campos de inserção do utilizador.
O cadeado e o resto são melhorias efetuadas
mais tarde.
Depois de validado um utilizador, surge
este formulário onde cada ícone tem um
submenu por baixo. (Quando clicamos num
ícone o submenu aparece).
Logo a seguir ao design, começámos as
verificações. Se o utilizador fosse
administrador então tinha acesso à página
de utilizadores e podia modificar, apagar,
editar cada utilizador.
30 | P á g i n a
Se entrarmos com o utilizador
“funcionário”, podemos verificar
que a gestão de utilizadores se
encontra bloqueada.
Depois das verificações, criámos os formulários para a inserção de dados na base de dados
e fomos simplificando o programa de forma a que o utilizador consiga manipular o
programa facilmente.
Para inserir é muito fácil. Basta
preencher os campos e clicamos
em “Inserir Dados” depois é
devolvida uma mensagem a
dizer que os dados foram
guardados com sucesso.
O botão “Atualizar tabela”
mostra todos os dados que estão
na base de dados.
Atualizar dados também é muito fácil. Preenchemos primeiro os campos, depois clicamos
no botão e irá aparecer uma mensagem a perguntar “Qual o código …?”. Para saberem o
código é atualizarem a tabela e verificarem.
Apagar dados é igual ao atualizar dados, mas não precisamos de preencher campos.
Estes botões existem em todos os formulários e funcionam todos da mesma forma.
Mais para a frente apercebemo-nos de um problema. Ao irmos atualizar dados / apagar
dados se não puséssemos o código e deixássemos em branco, a base de dados era
praticamente toda apagada. Então fomos fazer algumas verificações de forma a não
permitir inserir espaços em branco.
Ao acabarmos as verificações o programa ficou terminado.
31 | P á g i n a
Conclusão
O nosso projeto sofreu muitas alterações desde o primeiro esboço até à versão atual.
Começámos a desenvolver um site e um programa para uma empresa chamada “AutoSeg”
e depois mais tarde viemos a saber que não era para essa empresa.
Tivemos que modificar muitas vezes o design devido à existência de muitos problemas,
mas com o tempo encontrámos os designs certos.
O programa ficou acabado nos finais do estágio, mas com as mudanças na base de dados
ao longo do tempo, fomos mexendo no programa para funcionar de novo.
A parte do backoffice (parte administrativa do site) começou a ser feita para o final do
estágio.
Um de nós ficou com o backoffice e o outro foi acabando as páginas do site.
Durante o desenvolvimento da PAP tivemos muitos problemas e muitas dificuldades.
Quando resolvíamos um problema apareciam dez problemas novos, mas isso é normal, é
a vida de programador.
Os nossos maiores problemas de início foram para pôr o site a funcionar no telemóvel,
mas fomos estudando e pesquisando e resolvemos isso tudo.
Mais para a frente foi com a base de dados. De início funcionava tudo, estava tudo a
correr perfeitamente, mas para o fim da PAP a base de dados começou a dar alguns
problemas.
Resolvemos isso tudo. Estávamos prontos a entregar o site e o programa, e a começar o
relatório.
32 | P á g i n a
Referências de sitios na Internet
• Cores
https://color.adobe.com/pt/
• Icons
http://fontawesome.io
• Ajudas com algumas dúvidas de código
https://stackoverflow.com
https://www.w3schools.com
https://www.youtube.com
https://codepen.io
33 | P á g i n a
Anexos
Anexo A – Imagem da Base de dados Final
